/* Hallmark · genre: modern-minimal · macrostructure: Photographic EPC landing + structured technical pages · design-system: design.md · designed-as-app
 * theme: studied-DNA (JY FUTURE blue reference) · nav: dropdown standard · footer: four-column index
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
:root {
  /* Light content zones — cool neutral, not beige */
  --color-paper: #F4F6F8;
  --color-surface: #FFFFFF;
  --color-surface-muted: #E9EDF1;
  --color-ink: #14202B;
  --color-ink-muted: #55606B;
  --color-rule: #D7DEE5;
  --color-rule-strong: #B8C4CE;
  --color-backdrop: rgb(15 36 56 / 0.78);
  --color-shadow-strong: rgb(15 36 56 / 0.22);

  /* Navy — primary theme identity, used for header / hero / process / footer */
  --color-navy: #0F2438;
  --color-navy-2: #17324A;
  --color-navy-hover: #0B1C2C;
  --on-navy: #F2F5F8;
  --navy-muted: #9FB3C4;
  --navy-rule: #24405A;

  /* Structural accent on light backgrounds — navy family */
  --color-accent: #17324A;
  --color-accent-hover: #0F2438;
  --color-on-accent: #FFFFFF;

  /* Conversion color — brushed gold, the one warm counterpoint to navy */
  --color-cta: #B8860B;
  --color-cta-hover: #D2A62A;
  --color-on-cta: #14202B;

  --color-focus: #2E7BD6;
  --color-error: #B23A2E;
  --color-success: #2E7D4F;

  --font-display: "Space Grotesk", "Segoe UI", "Microsoft YaHei", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", "Microsoft YaHei", sans-serif;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-section: 96px;

  --radius-control: 6px;
  --radius-panel: 8px;
  --dur-fast: 160ms;
  --z-raised: 10;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
}

h1 { font-size: clamp(36px, 5vw, 62px); }
h2 { font-size: clamp(28px, 3.4vw, 38px); }
h3 { font-size: 20px; font-weight: 600; }

p { margin: 0; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: var(--on-navy);
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 900px) { .wrap { padding: 0 24px; } }
@media (max-width: 480px) { .wrap { padding: 0 20px; } }
@media (max-width: 320px) { .wrap { padding: 0 16px; } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.btn-primary,
.btn--primary,
a.btn-primary:visited,
a.btn--primary:visited {
  background: var(--color-cta);
  color: var(--color-on-cta);
  border-color: var(--color-cta);
}
.btn-primary:hover,
.btn--primary:hover,
.btn-primary:focus-visible,
.btn--primary:focus-visible {
  background: var(--color-cta-hover);
  color: var(--color-on-cta);
  border-color: var(--color-cta-hover);
  text-decoration: none;
}
.btn-primary:active,
.btn--primary:active {
  background: var(--color-navy-hover);
  color: var(--on-navy);
  border-color: var(--color-navy-hover);
  transform: translateY(1px);
}
.btn-secondary,
.btn--outline,
a.btn-secondary:visited,
a.btn--outline:visited {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink-muted);
}
.btn-secondary:hover,
.btn--outline:hover,
.btn-secondary:focus-visible,
.btn--outline:focus-visible {
  background: var(--color-surface);
  color: var(--color-navy);
  border-color: var(--color-navy);
  text-decoration: none;
}
.btn-secondary:active,
.btn--outline:active {
  background: var(--color-surface-muted);
  color: var(--color-navy-hover);
  border-color: var(--color-navy-hover);
  transform: translateY(1px);
}
.btn-on-navy,
a.btn-on-navy:visited {
  background: transparent;
  color: var(--on-navy);
  border-color: var(--navy-rule);
}
.btn-on-navy:hover,
.btn-on-navy:focus-visible {
  background: var(--color-navy-2);
  color: var(--on-navy);
  border-color: var(--on-navy);
  text-decoration: none;
}
.btn-on-navy:active {
  background: var(--color-navy-hover);
  color: var(--on-navy);
  border-color: var(--on-navy);
  transform: translateY(1px);
}
.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* CTA panels on dark sections use a light surface with explicit dark text. */
.section--dark .decision-band {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-rule);
}
.section--dark .decision-band h2,
.section--dark .decision-band h3 {
  color: var(--color-ink);
}
.section--dark .decision-band p {
  color: var(--color-ink-muted);
}
.section--dark .decision-band .kicker {
  color: var(--color-navy-2);
}
.link-arrow { font-weight: 600; color: var(--color-accent); }
.link-arrow:hover { color: var(--color-accent-hover); }
.link-arrow-on-navy { font-weight: 600; color: var(--on-navy); border-bottom: 1px solid var(--navy-rule); }
.link-arrow-on-navy:hover { color: #fff; border-bottom-color: var(--on-navy); text-decoration: none; }

/* Header — navy identity */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-navy);
  border-bottom: 1px solid var(--navy-rule);
  height: 80px;
}
@media (max-width: 768px) { header.site-header { height: 64px; } }

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--on-navy);
}
.brand:hover { color: var(--on-navy); text-decoration: none; }

nav.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
}
nav.main-nav a.nav-link,
nav.main-nav a.nav-link:visited {
  color: var(--navy-muted);
  background: transparent;
  font-weight: 500;
  font-size: 16px;
}
@media (hover: hover) and (pointer: fine) {
  nav.main-nav a.nav-link:hover {
    color: var(--on-navy);
    background: var(--color-navy-2);
    text-decoration: none;
  }
}
nav.main-nav a.nav-link:focus-visible,
nav.main-nav a.nav-link[aria-current="page"] {
  color: var(--on-navy);
  background: var(--color-navy-2);
}
nav.main-nav a.nav-link:active {
  color: var(--on-navy);
  background: var(--color-navy-hover);
  transform: translateY(1px);
}

details.nav-dropdown { position: relative; }
details.nav-dropdown summary {
  list-style: none;
  cursor: pointer;
  color: var(--navy-muted);
  background: transparent;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
details.nav-dropdown summary::-webkit-details-marker { display: none; }
details.nav-dropdown summary:hover,
details.nav-dropdown summary:focus-visible,
details.nav-dropdown[open] > summary {
  color: var(--on-navy);
  background: var(--color-navy-2);
}
details.nav-dropdown summary:active {
  color: var(--on-navy);
  background: var(--color-navy-hover);
  transform: translateY(1px);
}
details.nav-dropdown .dropdown-panel {
  position: absolute;
  top: 36px;
  left: -16px;
  z-index: 110;
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: var(--space-sm);
  width: 300px;
  box-shadow: 0 12px 28px rgba(4, 10, 16, 0.35);
}
details.nav-dropdown .dropdown-panel a,
details.nav-dropdown .dropdown-panel a:visited {
  display: block;
  padding: 8px 8px;
  border-radius: 4px;
  color: var(--color-ink);
}
details.nav-dropdown .dropdown-panel a:hover,
details.nav-dropdown .dropdown-panel a:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-navy);
  text-decoration: none;
}
details.nav-dropdown .dropdown-panel a:active {
  background: var(--color-rule);
  color: var(--color-navy-hover);
  transform: translateY(1px);
}
details.nav-dropdown .dropdown-panel small {
  display: block;
  color: var(--color-ink-muted);
  font-size: 13px;
}
details.nav-dropdown .dropdown-panel a:hover small,
details.nav-dropdown .dropdown-panel a:focus-visible small,
details.nav-dropdown .dropdown-panel a:active small { color: var(--color-ink-muted); }

.mobile-menu-btn {
  display: none;
  color: var(--on-navy);
  background: transparent;
  border: 1px solid var(--navy-rule);
}
@media (max-width: 900px) {
  nav.main-nav ul { display: none; }
  .mobile-menu-btn {
    display: inline-flex;
    border-radius: var(--radius-control);
    padding: 8px 12px;
    font-weight: 600;
  }
  .nav-cta-desktop { display: none; }
}

/* Sections */
section { padding: var(--space-section) 0; }
.section-eyebrow {
  color: var(--color-navy-2);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  display: block;
}
.section-eyebrow-on-navy {
  color: #D9B65C;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  display: block;
}

/* Hero — navy identity band */
.hero-section {
  background: var(--color-navy);
  color: var(--on-navy);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.hero-grid {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: var(--space-xl);
  align-items: center;
  min-height: 520px;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-grid { display: flex; flex-direction: column; }
}
.hero-copy h1 { color: var(--on-navy); }
.hero-copy p.lede {
  margin-top: var(--space-md);
  font-size: 19px;
  color: var(--navy-muted);
  max-width: 34ch;
}
.hero-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
  align-items: center;
}
.hero-image {
  background: var(--color-navy-2);
  border: 1px solid var(--navy-rule);
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-muted);
  font-size: 14px;
  position: relative;
}
@media (max-width: 900px) { .hero-image { order: -1; aspect-ratio: 4/3; } }
.hero-image figcaption {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  font-size: 13px;
  color: var(--navy-muted);
  background: rgba(15, 36, 56, 0.85);
  padding: 4px 8px;
  border-radius: 4px;
}
.hero-anchors {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--navy-rule);
}
.hero-anchors a { color: var(--on-navy); font-weight: 600; }
.hero-anchors a:hover { color: #D9B65C; }

/* Solutions grid — light zone */
.solutions-head { max-width: 62ch; margin-bottom: var(--space-xl); }
.solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
@media (max-width: 900px) { .solutions-grid { grid-template-columns: 1fr; } }
.solution-card {
  border-top: 3px solid var(--color-navy);
  background: var(--color-surface);
  padding-top: var(--space-md);
}
.solution-image {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-rule);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted);
  font-size: 14px;
  margin-bottom: var(--space-md);
}
.solution-card h3 { margin-bottom: var(--space-xs); }
.solution-card p.desc { color: var(--color-ink-muted); margin-bottom: var(--space-sm); }
.solution-scope {
  font-size: 14px;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-md);
}
.solution-scope strong { color: var(--color-ink); }

/* Process (navy band, deeper) */
.process-section {
  background: var(--color-navy-hover);
  color: var(--on-navy);
}
.process-section .section-eyebrow-on-navy { color: #D9B65C; }
.process-section h2 { color: var(--on-navy); }
.process-intro { max-width: 60ch; margin-top: var(--space-md); color: var(--navy-muted); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr; } }
.process-step {
  border-left: 1px solid var(--navy-rule);
  padding-left: var(--space-md);
}
@media (max-width: 900px) { .process-step { border-left: none; border-top: 1px solid var(--navy-rule); padding-left: 0; padding-top: var(--space-md); } }
.process-step .step-num {
  font-family: var(--font-display);
  font-size: 14px;
  color: #D9B65C;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.process-step h3 { color: var(--on-navy); margin: var(--space-xs) 0; }
.process-step p { color: var(--navy-muted); font-size: 15px; margin-bottom: var(--space-sm); }
.process-step ul { margin: 0; padding-left: 18px; color: var(--navy-muted); font-size: 14px; }
.process-footnote {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--navy-rule);
  color: var(--navy-muted);
  font-size: 15px;
}

/* Design inputs (case-study fallback) — light zone */
.inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (max-width: 900px) { .inputs-grid { grid-template-columns: 1fr; } }
.input-card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: var(--space-md);
}
.input-card h3 { margin-bottom: var(--space-xs); }
.input-card p { color: var(--color-ink-muted); font-size: 15px; }
.concept-diagram {
  margin-top: var(--space-xl);
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-rule);
  aspect-ratio: 16/6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted);
  font-size: 14px;
}

/* Equipment */
.equipment-section { background: var(--color-surface-muted); }
.equipment-layout { display: grid; grid-template-columns: 34% 66%; gap: var(--space-xl); }
@media (max-width: 900px) { .equipment-layout { grid-template-columns: 1fr; } }
.equipment-list { display: flex; flex-direction: column; gap: var(--space-sm); }
details.equip-item {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: var(--space-md);
}
details.equip-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
details.equip-item summary::-webkit-details-marker { display: none; }
details.equip-item summary::after { content: "+"; font-size: 20px; color: var(--color-navy); }
details.equip-item[open] summary::after { content: "\2212"; }
.equip-body { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-md); margin-top: var(--space-md); align-items: start; }
@media (max-width: 560px) { .equip-body { grid-template-columns: 1fr; } }
.equip-thumb {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-rule);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted);
  font-size: 12px;
  text-align: center;
}
.equip-body p { color: var(--color-ink-muted); font-size: 15px; margin-bottom: var(--space-xs); }

/* Company intro */
.about-grid { display: grid; grid-template-columns: 40% 60%; gap: var(--space-xl); align-items: center; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
.about-image {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-rule);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted);
  font-size: 14px;
}
.about-copy p.lede { font-size: 18px; color: var(--color-ink-muted); margin-top: var(--space-md); }

/* Homepage structure — application-led, system-led and evidence-aware. */
.section-lede {
  margin-top: var(--space-md);
  color: var(--color-ink-muted);
  max-width: 62ch;
}
.section-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--space-xl);
  align-items: end;
  margin-bottom: var(--space-xl);
}
.section-head-row > * { min-width: 0; }
.section-head-row .section-lede { margin-top: 0; }

.applications-section {
  padding-top: calc(var(--space-section) - var(--space-md));
  padding-bottom: calc(var(--space-section) + var(--space-md));
  background: var(--color-surface);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.applications-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: calc(var(--space-xl) * 1.5);
  align-items: start;
}
.applications-intro .link-arrow { display: inline-block; margin-top: var(--space-lg); }
.applications-list { border-top: 1px solid var(--color-rule); }
.application-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-rule);
}
.application-item > span {
  color: var(--color-cta);
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.application-item h3 { margin-bottom: var(--space-xs); }
.application-item p { color: var(--color-ink-muted); }

.project-basis-section { background: var(--color-paper); }
.process-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--navy-rule);
  color: var(--navy-muted);
}
.process-close .link-arrow-on-navy { white-space: nowrap; }

.home-products-section { background: var(--color-surface-muted); }
.home-products-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, .9fr);
  gap: var(--space-md);
}
.home-product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
}
.home-product-card figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-rule);
}
.home-product-card figure img { object-fit: contain; padding: var(--space-sm); }
.home-product-card > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-md);
}
.home-product-card h3 { margin-bottom: var(--space-xs); }
.home-product-card p { color: var(--color-ink-muted); margin-bottom: var(--space-md); }
.home-product-card .link-arrow { margin-top: auto; }

/* Hallmark · section system: Split Studio · theme: studied-DNA · enrichment: supplied product/process footage */
.home-products-section { padding: 0; background: var(--color-surface-muted); }
.product-stories-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: end;
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(56px, 7vw, 88px);
}
.product-stories-intro h2 { max-width: 760px; }
.product-stories-intro .link-arrow { display: inline-block; margin-top: var(--space-md); }
.product-story { padding: clamp(72px, 8vw, 112px) 0; border-top: 1px solid var(--color-rule); }
.product-story--solar,
.product-story--charging { background: var(--color-surface); }
.product-story--storage { background: var(--color-navy); color: var(--on-navy); }
.product-story__layout {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}
.product-story--storage .product-story__copy { grid-column: 2; grid-row: 1; }
.product-story--storage .product-story__media { grid-column: 1; grid-row: 1; }
.product-story__copy { max-width: 560px; }
.product-story__index {
  margin: 0 0 var(--space-sm);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.product-story__copy h3 { margin-bottom: var(--space-md); font-size: clamp(32px, 4vw, 52px); }
.product-story__copy > p:not(.product-story__index) { color: var(--color-ink-muted); font-size: 18px; line-height: 1.65; }
.product-story--storage .product-story__copy h3 { color: var(--on-navy); }
.product-story--storage .product-story__copy > p:not(.product-story__index) { color: var(--navy-muted); }
.product-story__links { margin-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.product-story--storage .product-story__links { border-top-color: var(--navy-rule); }
.product-story__link,
.product-story__link:visited {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink);
  text-decoration: none;
}
.product-story__link b { color: var(--color-accent); font-size: 14px; font-weight: 700; white-space: nowrap; }
.product-story__link span { white-space: nowrap; }
.product-story__link:hover,
.product-story__link:focus-visible { color: var(--color-navy); background: var(--color-surface-muted); text-decoration: none; }
.product-story--storage .product-story__link,
.product-story--storage .product-story__link:visited { border-bottom-color: var(--navy-rule); color: var(--on-navy); }
.product-story--storage .product-story__index,
.product-story--storage .product-story__link b { color: var(--color-cta-hover); }
.product-story--storage .product-story__link:hover,
.product-story--storage .product-story__link:focus-visible { color: var(--on-navy); background: var(--color-navy-2); }
.product-story__cta { display: inline-flex; min-height: 50px; align-items: center; margin-top: var(--space-lg); padding: 0 24px; white-space: nowrap; }
.product-story__media { min-width: 0; margin: 0; }
.product-story__player {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-navy-hover);
  border: 1px solid var(--color-rule-strong);
  box-shadow: 0 24px 64px var(--color-shadow-strong);
}
.product-story--storage .product-story__player { border-color: var(--navy-rule); }
.product-story__player iframe,
.product-story__player video { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.product-story__caption { margin: 18px 0 0; color: var(--color-ink-muted); font-size: 15px; line-height: 1.55; }
.product-story__caption strong { color: var(--color-ink); }
.product-story--storage .product-story__caption { color: var(--navy-muted); }
.product-story--storage .product-story__caption strong { color: var(--on-navy); }
.product-story__placeholder {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  background: var(--color-navy);
  border: 1px solid var(--color-rule-strong);
}
.product-story__placeholder img { width: 100%; min-height: 420px; object-fit: cover; }
.product-story__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--color-backdrop), transparent 64%);
  pointer-events: none;
}
.product-story__placeholder figcaption {
  position: absolute;
  z-index: var(--z-raised);
  right: clamp(20px, 4vw, 44px);
  bottom: clamp(20px, 4vw, 44px);
  left: clamp(20px, 4vw, 44px);
  display: grid;
  gap: var(--space-xs);
  color: var(--on-navy);
}
.product-story__placeholder figcaption strong { font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 32px); }
.product-story__placeholder figcaption span { max-width: 700px; color: var(--navy-muted); }
.product-story :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

.trust-section {
  background: var(--color-navy);
  color: var(--on-navy);
}
.trust-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: calc(var(--space-xl) * 1.5);
}
.trust-section h2 { color: var(--on-navy); }
.trust-section .section-lede { color: var(--navy-muted); }
.trust-intro > .link-arrow {
  display: inline-block;
  margin-top: var(--space-lg);
  color: var(--on-navy);
}
.trust-links { border-top: 1px solid var(--navy-rule); }
.trust-link,
.trust-link:visited {
  display: grid;
  grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--navy-rule);
  color: var(--on-navy);
  text-decoration: none;
}
.trust-link span { color: var(--navy-muted); }
.trust-link strong { font-weight: 500; }
.trust-link b { color: var(--color-cta); font-size: 20px; }
.trust-link:hover,
.trust-link:focus-visible { color: var(--on-navy); background: var(--color-navy-2); text-decoration: none; }
.trust-link:active { color: var(--on-navy); background: var(--color-navy-hover); }

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: calc(var(--space-xl) * 1.5);
  align-items: start;
}
.faq-layout .faq-list { margin-top: 0; }

@media (max-width: 900px) {
  .section-head-row,
  .applications-layout,
  .trust-layout,
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .section-head-row { align-items: start; }
  .home-products-grid { grid-template-columns: minmax(0, 1fr); }
  .home-product-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: none; }
  .home-product-card figure { aspect-ratio: 4 / 3; border-bottom: 0; border-right: 1px solid var(--color-rule); }
  .product-stories-intro,
  .product-story__layout { grid-template-columns: minmax(0, 1fr); }
  .product-story--storage .product-story__copy,
  .product-story--storage .product-story__media { grid-column: auto; grid-row: auto; }
  .product-story--storage .product-story__media { order: 2; }
  .product-story__copy { max-width: 760px; }
}
@media (max-width: 560px) {
  .home-product-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .home-product-card figure { border-right: 0; border-bottom: 1px solid var(--color-rule); }
  .product-stories-intro { gap: var(--space-lg); }
  .product-story { padding: 64px 0; }
  .product-story__layout { gap: 36px; }
  .product-story__copy h3 { font-size: 36px; }
  .product-story__copy > p:not(.product-story__index) { font-size: 17px; }
  .product-story__link { min-height: 64px; }
  .product-story__cta { width: 100%; justify-content: center; text-align: center; }
  .product-story__player { margin-inline: -2px; width: calc(100% + 4px); }
  .product-story__placeholder,
  .product-story__placeholder img { min-height: 360px; }
  .trust-link { grid-template-columns: minmax(0, 1fr) auto; }
  .trust-link strong { grid-column: 1 / -1; }
  .process-close { align-items: flex-start; flex-direction: column; }
}

/* FAQ */
.faq-list { margin-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
details.faq-item { border-bottom: 1px solid var(--color-rule); padding: var(--space-md) 0; }
details.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; font-size: 20px; color: var(--color-navy); flex-shrink: 0; }
details.faq-item[open] summary::after { content: "\2212"; }
details.faq-item p { margin-top: var(--space-sm); color: var(--color-ink-muted); max-width: 68ch; }

/* Inquiry form */
.inquiry-section { background: var(--color-surface); border-top: 1px solid var(--color-rule); }
.inquiry-grid { display: grid; grid-template-columns: 34% 66%; gap: var(--space-xl); }
@media (max-width: 900px) { .inquiry-grid { grid-template-columns: 1fr; } }
.inquiry-intro p.lede { color: var(--color-ink-muted); margin-top: var(--space-md); }
.inquiry-contacts { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 15px; }
.form-field .hint { font-size: 13px; color: var(--color-ink-muted); }
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  font-size: 16px;
  font-family: var(--font-body);
  background: var(--color-surface);
  color: var(--color-ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-focus);
}
.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.radio-group label { font-weight: 400; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.form-submit-row { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); }
.form-note { font-size: 13px; color: var(--color-ink-muted); }

/* Footer — navy identity */
footer.site-footer { background: var(--color-navy); color: var(--navy-muted); padding: var(--space-xl) 0 var(--space-lg); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { color: var(--on-navy); font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.footer-slogan { margin-top: var(--space-xs); color: var(--color-cta-hover); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.footer-tagline { margin-top: var(--space-sm); font-size: 14px; max-width: 32ch; }
.footer-col h3 { color: var(--on-navy); font-size: 15px; margin-bottom: var(--space-sm); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: var(--navy-muted); font-size: 14px; }
.footer-col a:hover { color: var(--on-navy); }
.footer-contact {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
  gap: clamp(32px, 7vw, 96px);
  align-items: start;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--navy-rule);
}
.footer-contact__copy { max-width: 52ch; }
.footer-contact__copy h3 { color: var(--on-navy); font-size: 24px; margin-bottom: var(--space-sm); }
.footer-contact__copy p { color: var(--navy-muted); }
.footer-contact__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-md);
  font-style: normal;
}
.footer-contact__details a,
.footer-contact__details a:visited { color: var(--on-navy); text-decoration: none; border-bottom: 1px solid var(--navy-rule); }
.footer-contact__details a:hover { color: var(--color-cta-hover); border-bottom-color: var(--color-cta-hover); }
.footer-contact__details a:focus-visible,
.footer-contact__qr a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.footer-contact__qr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: var(--space-md);
  justify-content: end;
}
.footer-contact__qr { display: grid; gap: 12px; min-width: 0; }
.footer-contact__qr > a,
.footer-contact__qr-image {
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  padding: 8px;
  background: var(--color-surface);
  border-radius: var(--radius-control);
}
.footer-contact__qr img { width: 100%; height: 100%; object-fit: contain; }
.footer-contact__qr figcaption { display: grid; gap: 2px; }
.footer-contact__qr figcaption strong { color: var(--on-navy); font-size: 15px; }
.footer-contact__qr figcaption span { color: var(--navy-muted); font-size: 13px; }
.footer-legal { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--navy-rule); font-size: 13px; }
@media (max-width: 900px) {
  .footer-contact { grid-template-columns: minmax(0, 1fr); }
  .footer-contact__qr-grid { justify-content: start; }
}
@media (max-width: 480px) {
  .footer-contact__qr-grid { grid-template-columns: minmax(0, 200px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Navy preview: fit imagery, align controls and preserve the supplied theme. */
figure{margin:0}img{display:block;width:100%;height:100%;object-fit:cover}
section[id],article[id]{scroll-margin-top:100px}
.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.hero-image{overflow:hidden;min-width:0;border:0;aspect-ratio:4/3}
.hero-image figcaption{font-size:11px;color:var(--on-navy)}
.solution-image{position:relative;overflow:hidden}
.solution-image span{position:absolute;right:8px;bottom:8px;background:var(--color-navy);color:var(--on-navy);font-size:10px;padding:2px 6px}
.solutions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.solution-card{padding:0 0 24px}
.solution-card h3,.solution-card .desc,.solution-card .solution-scope,.solution-card>.link-arrow{margin-left:20px;margin-right:20px}
.equipment-layout,.inquiry-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}
.about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.about-image{position:relative;overflow:hidden}
.about-image figcaption{position:absolute;bottom:0;left:0;right:0;background:var(--color-navy);color:var(--on-navy);font-size:11px;padding:6px 10px}
.equip-body{grid-template-columns:140px minmax(0,1fr)}.equip-thumb{aspect-ratio:4/3;overflow:hidden}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-field,.form-field input,.form-field textarea,.form-field select{min-width:0;width:100%}.radio-group input{width:auto}
.btn{white-space:nowrap}
nav.main-nav>ul{align-items:center}nav.main-nav>ul>li{display:flex;align-items:center}
nav.main-nav .nav-link,nav.main-nav details.nav-dropdown>summary{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--space-sm);border-radius:var(--radius-sm);line-height:1;white-space:nowrap}
.nav-chevron{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:4px}
details.nav-dropdown .dropdown-panel{top:calc(100% + 8px)}
#mobile-nav{position:absolute;top:100%;left:0;right:0;background:var(--color-navy);padding:12px 24px 24px;border-bottom:1px solid var(--navy-rule)}
#mobile-nav[hidden]{display:none}#mobile-nav a{display:block;color:var(--on-navy);padding:12px 0}.mobile-menu-btn{min-height:44px;font-size:15px}
.concept-diagram{display:block;aspect-ratio:auto;padding:32px;border:0}
.system-flow{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1.3fr) 24px minmax(0,1fr);align-items:center;gap:10px}
.system-flow>div{padding:24px 16px;background:var(--color-surface);text-align:center;font-weight:600}
.system-flow span{display:block;font-size:12px;font-weight:400;margin-top:6px}
.system-flow .flow-center{background:var(--color-navy);color:var(--on-navy)}
.system-destinations{display:flex;justify-content:center;gap:24px;padding:28px 0 20px;font-size:14px}
.concept-diagram figcaption{font-size:12px;text-align:center}#form-status{grid-column:1/-1}
@media(min-width:901px){#mobile-nav{display:none}nav.main-nav ul{gap:20px}nav.main-nav .nav-link,nav.main-nav details.nav-dropdown>summary{font-size:14px!important}.nav-cta-desktop{padding:0 16px}}
@media(min-width:901px) and (max-width:1100px){nav.main-nav ul{gap:12px}.brand{font-size:17px}.nav-cta-desktop{font-size:14px;padding:0 12px}}
@media(max-width:900px){.hero-grid{display:grid;grid-template-columns:minmax(0,1fr)}.hero-image{order:initial;width:100%;aspect-ratio:16/10}.hero-copy p.lede{max-width:55ch}.solutions-grid,.equipment-layout,.inquiry-grid,.about-grid{grid-template-columns:minmax(0,1fr)}section{padding:64px 0}.hero-anchors{gap:16px 24px;font-size:14px}}
@media(max-width:560px){.form-grid,.equip-body,.system-flow{grid-template-columns:minmax(0,1fr)}.system-flow>b{transform:rotate(90deg);text-align:center}.system-destinations{flex-wrap:wrap;gap:8px 16px}.concept-diagram{padding:20px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions>a{text-align:center}.hero-image figcaption{font-size:10px}.hero-grid{gap:32px}}

/* Full-width image hero for the navy preview. */
.hero-section{position:relative;isolation:isolate;padding:0;background:var(--color-navy)}
.hero-grid{display:flex;align-items:center;min-height:clamp(620px,77svh,820px);padding-top:88px;padding-bottom:100px}
.hero-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;aspect-ratio:auto;border:0;pointer-events:none}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(15,36,56,.94) 0%,rgba(15,36,56,.7) 38%,rgba(15,36,56,.18) 80%),linear-gradient(0deg,rgba(15,36,56,.86),transparent 40%)}
.hero-copy{width:100%;max-width:640px}
.hero-slogan{margin:0 0 var(--space-sm);color:var(--color-cta-hover);font-family:var(--font-display);font-size:14px;font-weight:700;line-height:1;letter-spacing:.12em;text-transform:uppercase}
.hero-copy h1{font-size:clamp(44px,5.3vw,76px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.hero-copy p.lede{color:var(--on-navy);font-size:20px;max-width:39ch;margin-top:28px}
.hero-actions{margin-top:36px;gap:28px}
.hero-actions .btn-primary{min-height:52px;padding:0 28px}
.hero-actions .link-arrow-on-navy{color:var(--on-navy);border-bottom-color:var(--on-navy)}
.hero-section :focus-visible{outline-color:var(--on-navy)}
.hero-anchors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:0;padding-top:0;padding-bottom:0;border-top-color:rgba(255,255,255,.3)}
.hero-anchors a{padding:22px 16px;font-size:15px;border-right:1px solid rgba(255,255,255,.3)}
.hero-anchors a:first-child{padding-left:0}.hero-anchors a:last-child{border-right:0}
.hero-anchors a::after{content:" ↗";margin-left:10px}
.hero-image figcaption{top:16px;right:24px;bottom:auto;left:auto;max-width:90%;font-size:10px;background:rgba(15,36,56,.7)}
@media(max-width:900px){
.hero-grid{display:flex;min-height:640px;padding-top:80px;padding-bottom:72px}
.hero-image{aspect-ratio:auto;order:initial;height:100%}.hero-image img{object-position:60% center}
.hero-anchors{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.hero-anchors a{font-size:13px;padding:20px 10px}.hero-anchors a::after{margin-left:4px}
}
@media(max-width:560px){
.hero-grid{min-height:640px;padding-top:76px;padding-bottom:48px}
.hero-section::before{background:linear-gradient(90deg,rgba(15,36,56,.92),rgba(15,36,56,.65))}
.hero-image img{object-position:62% center}
.hero-copy h1{font-size:clamp(42px,11vw,56px);line-height:1.08}
.hero-copy p.lede{font-size:17px;line-height:1.6;margin-top:24px}
.hero-actions{gap:16px;margin-top:28px}
.hero-actions .btn-primary{width:100%;padding:0 16px}
.hero-anchors{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-anchors a,.hero-anchors a:first-child{padding:16px 8px}
.hero-anchors a:nth-child(2){border-right:0}
.hero-anchors a:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.3)}
.hero-image figcaption{right:16px;top:12px;font-size:9px}
}

/* Legacy homepage process-video styles retained for safe stylesheet compatibility. */
.home-video-section{background:var(--color-navy);color:var(--on-navy);padding:clamp(72px,9vw,112px) 0}
.home-video-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(40px,6vw,80px);align-items:center}
.home-video-copy{max-width:600px}
.home-video-eyebrow{margin:0 0 14px;color:var(--color-cta-hover);font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.home-video-copy h2{color:var(--on-navy);font-size:clamp(34px,4vw,52px);text-wrap:balance}
.home-video-copy .section-lede{margin-top:24px;color:var(--navy-muted)}
.home-video-points{display:grid;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.home-video-points li{position:relative;padding-left:22px;color:var(--on-navy);font-size:16px}
.home-video-points li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--color-cta-hover)}
.home-video-boundary{margin-top:26px;padding-top:22px;border-top:1px solid var(--navy-rule);color:var(--navy-muted);font-size:14px;line-height:1.55}
.home-video-cta{display:inline-flex;margin-top:28px;min-height:50px;align-items:center;padding:0 24px}
.home-video-media{min-width:0}
.home-video-player{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;background:var(--color-navy-hover);border:1px solid var(--navy-rule);box-shadow:0 24px 64px var(--color-shadow-strong)}
.home-video-player iframe{display:block;width:100%;height:100%;border:0}
.home-video-summary{margin:18px 0 0;color:var(--navy-muted);font-size:15px;line-height:1.55}
.home-video-summary strong{color:var(--on-navy)}
.home-video-section :focus-visible{outline:3px solid var(--color-cta-hover);outline-offset:4px}
@media(max-width:900px){.home-video-layout{grid-template-columns:minmax(0,1fr);gap:40px}.home-video-copy{max-width:760px}}
@media(max-width:560px){.home-video-section{padding:64px 0}.home-video-copy h2{font-size:36px}.home-video-player{margin-inline:-2px;width:calc(100% + 4px)}.home-video-cta{width:100%;justify-content:center;text-align:center}}