/* ============================================================
   Anacapa Wavepower — Design System
   Palette, type, components, motion. Maps to a WordPress theme
   stylesheet. Colours from 00_Resources/brand-guidelines.md.
   ============================================================ */

:root {
  /* Base grey-green */
  --slate:      #35454E;
  --sage:       #8DC5B6;
  --mist:       #D8EBE6;
  --ink:        #1A2429;   /* darkened slate for deep backgrounds */
  --white:      #FFFFFF;

  /* Main teal series */
  --ocean:      #0084A1;
  --bright-teal:#00BCE5;
  --sky-teal:   #92E2F4;
  --ice:        #DBF5FB;
  --deep-teal:  #004554;

  /* Accent oxide -> yellow (sparing) */
  --oxide:      #F04A00;
  --amber:      #F78B18;
  --yellow:     #FECC2F;

  /* Functional */
  --text:       #2A363D;
  --text-soft:  #5B6970;
  --line:       #E1E8EA;
  --bg:         #FFFFFF;
  --bg-alt:     #F4F8F8;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 18px 50px -22px rgba(0,68,84,.45);
  --shadow-sm: 0 8px 24px -14px rgba(0,68,84,.35);

  --font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ocean); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--deep-teal); }
button { font-family: inherit; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; color: var(--slate); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 300; letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.1em; }
strong { font-weight: 700; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--ink); color: #C7D2D6; }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--tight { padding: clamp(48px, 6vw, 88px) 0; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: 1rem;
}
.section--dark .eyebrow { color: var(--bright-teal); }

.lede { font-size: clamp(1.15rem, 1.8vw, 1.42rem); font-weight: 300; color: var(--text-soft); max-width: 60ch; }
.section--dark .lede { color: #AEBEC3; }
.measure { max-width: 64ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.6em;
  border-radius: 100px;
  font-weight: 700; font-size: .98rem;
  letter-spacing: .01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--ocean); color: #fff; box-shadow: 0 12px 26px -12px rgba(0,132,161,.7); }
.btn--primary:hover { background: var(--deep-teal); color: #fff; }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn--ghost:hover { border-color: var(--bright-teal); color: var(--bright-teal); }
.btn--dark { background: var(--slate); color:#fff; }
.btn--dark:hover { background: var(--deep-teal); color:#fff; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.textlink { font-weight: 700; display: inline-flex; align-items: center; gap: .4em; }
.textlink .arrow { transition: transform .25s var(--ease); }
.textlink:hover .arrow { transform: translateX(3px); }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav__logo img { height: 34px; width: auto; }
.nav__logo .logo-dark { display: block; }
.nav__logo .logo-light { display: none; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  color: rgba(255,255,255,.92); font-weight: 700; font-size: .95rem;
  position: relative; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--bright-teal); transition: right .28s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; }
.nav__links a:hover { color: #fff; }
.nav__cta { margin-left: 8px; }

/* Scrolled / solid state (added via JS) */
.nav.is-solid { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 1px 0 var(--line); padding-top: 12px; padding-bottom: 12px; }
.nav.is-solid .nav__logo .logo-dark { display: block; }
.nav.is-solid .nav__logo .logo-light { display: none; }
.nav.is-solid .nav__links a { color: var(--slate); }
.nav.is-solid .nav__links a:hover { color: var(--ocean); }
.nav.is-solid .nav__cta.btn--ghost { color: var(--slate); border-color: var(--line); }
.nav.is-solid .nav__cta.btn--ghost:hover { color: var(--ocean); border-color: var(--ocean); }

/* On dark hero pages the logo starts white */
.nav--over-dark .nav__logo .logo-dark { display: none; }
.nav--over-dark .nav__logo .logo-light { display: block; }
.nav--over-dark.is-solid .nav__logo .logo-dark { display: block; }
.nav--over-dark.is-solid .nav__logo .logo-light { display: none; }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; width: 30px; height: 24px; position: relative; }
.nav__toggle span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.nav__toggle span:nth-child(1){ top: 2px; } .nav__toggle span:nth-child(2){ top: 11px; } .nav__toggle span:nth-child(3){ top: 20px; }
.nav.is-solid .nav__toggle { color: var(--slate); }
.nav:not(.is-solid) .nav__toggle { color: #fff; }

@media (max-width: 860px) {
  .nav__toggle { display: block; z-index: 120; }
  .nav__links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 26px;
    background: var(--ink); transform: translateX(100%); transition: transform .4s var(--ease);
  }
  .nav__links a { color: #fff !important; font-size: 1.4rem; }
  body.nav-open .nav__links { transform: translateX(0); }
  body.nav-open .nav__toggle span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
  body.nav-open .nav__toggle span:nth-child(2){ opacity: 0; }
  body.nav-open .nav__toggle span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }
  body.nav-open .nav__toggle { color: #fff; }
}

/* ============================================================
   Hero + Waterline Wave (per brand-guidelines-html-motion.md)
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  background: radial-gradient(120% 120% at 70% 10%, #0a5a6d 0%, var(--deep-teal) 38%, var(--ink) 100%);
  color: #fff; overflow: hidden; padding-top: 90px;
}
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px;
  width: 100%;
}
.hero-text { max-width: 38rem; }
.hero h1 { color: #fff; }
.hero h1 b { font-weight: 700; color: var(--sky-teal); }
.hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 300; color: #BCD0D5; max-width: 46ch; margin-top: .4em; }
.hero__cta { margin-top: 2rem; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5; color: rgba(255,255,255,.55); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; }
.hero__scroll::after { content:""; display:block; width:1px; height:34px; margin: 8px auto 0; background: linear-gradient(rgba(255,255,255,.6), transparent); animation: scrollpulse 2.2s var(--ease) infinite; }
@keyframes scrollpulse { 0%{ transform: scaleY(0); transform-origin: top; } 50%{ transform: scaleY(1);} 100%{ transform: scaleY(0); transform-origin: bottom; } }

/* atmospheric drifting glow behind render */
.hero__glow { position: absolute; z-index: 1; width: 60vw; height: 60vw; right: -8vw; top: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,188,229,.20), transparent 62%); filter: blur(10px); animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateY(0) scale(1);} to { transform: translateY(-26px) scale(1.06);} }

/* render stage */
.hero-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56vh; }
/* Split WEC from three registered renders: NetBuoy+housing heave with the wave,
   the input rod stretches from its base to follow, reaction body + tether stay still. */
.wec { position: relative; z-index: 2; isolation: isolate; width: min(100%, 460px); aspect-ratio: 1 / 1; filter: drop-shadow(0 40px 60px rgba(0,0,0,.45)); }
.wec img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wec-rb     { z-index: 1; }
.wec-rod    { z-index: 2; transform-origin: 50% 67.6%; animation: rodstretch 8s ease-in-out infinite; }
.wec-topwec { z-index: 3; animation: heave 8s ease-in-out infinite; }
@keyframes heave     { 0%{ transform: translateY(-8px);} 25%{ transform: translateY(0);} 50%{ transform: translateY(8px);} 75%{ transform: translateY(0);} 100%{ transform: translateY(-8px);} }
@keyframes rodstretch{ 0%{ transform: scaleY(1.6);} 25%{ transform: scaleY(1);} 50%{ transform: scaleY(0.42);} 75%{ transform: scaleY(1);} 100%{ transform: scaleY(1.6);} }

/* Waterline hairlines */
.waterline, .waterline-back {
  position: absolute; left: -100%; width: 400%; height: 130px;
  pointer-events: none; overflow: visible;
}
.waterline      { z-index: 3; opacity: .80; top: 46%; }
.waterline-back { z-index: 1; opacity: .42; top: 44%; }
.hero.is-in .waterline      { animation: wavetravel 8s linear infinite; }
.hero.is-in .waterline-back { animation: wavetravel 8s linear infinite; }
@keyframes wavetravel { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .hero-text { max-width: none; margin-inline: auto; }
  .hero__sub { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero-stage { min-height: 42vh; order: -1; }
  .hero-render { width: min(74%, 320px); }
}

/* ============================================================
   Evidence band (proof points)
   ============================================================ */
.evidence { background: var(--ink); color: #B9C7CC; padding: 36px 0; border-top: 1px solid rgba(255,255,255,.06); }
.evidence__label { text-align: center; color: #8FA2A8; font-size: .92rem; letter-spacing: .01em; margin: 0 auto 22px; max-width: 60ch; }
.evidence__label b { color: #fff; font-weight: 700; }
.evidence__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(22px, 5vw, 56px); }
.evidence__row a, .evidence__row span { color: #DCE6E9; font-weight: 700; letter-spacing: .08em; font-size: .98rem; text-transform: uppercase; opacity: .82; transition: opacity .2s var(--ease), color .2s var(--ease); }
.evidence__row a:hover { opacity: 1; color: var(--bright-teal); }

/* ============================================================
   Cards / grids
   ============================================================ */
.grid { display: grid; gap: 26px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){ .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--sky-teal); }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--text-soft); font-size: .98rem; margin-bottom: 0; }
.card__icon { width: 44px; height: 44px; border-radius: 11px; background: var(--ice); color: var(--ocean); display: grid; place-items: center; margin-bottom: 18px; }
.card__icon svg { width: 24px; height: 24px; }

/* Split feature (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.split--rev .split__media { order: 2; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.split__media figcaption { font-size: .8rem; color: var(--text-soft); margin-top: 10px; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split--rev .split__media { order: 0; } }

/* Video figure (wave tank, linear generator, future ocean footage) */
.videofig { margin: 0; position: relative; }
.videofig__v { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.videofig figcaption { font-size: .8rem; color: var(--text-soft); margin-top: 10px; }
.videofig__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.videofig__play span { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,132,161,.92); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
.videofig.is-playing .videofig__play { display: none; }
.videofig__play svg { width: 24px; height: 24px; margin-left: 3px; }
.section--dark .videofig figcaption { color: #9DB0B5; }

/* ============================================================
   KPI / stats
   ============================================================ */
.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.kpi b { display: block; font-weight: 900; font-size: clamp(2rem, 4vw, 3.1rem); color: var(--ocean); line-height: 1; letter-spacing: -.02em; }
.section--dark .kpi b { color: var(--bright-teal); }
.kpi span { display: block; font-size: .9rem; color: var(--text-soft); margin-top: 8px; }
.section--dark .kpi span { color: #9DB0B5; }
@media (max-width: 720px){ .kpis { grid-template-columns: repeat(2,1fr); gap: 28px 16px; } }

/* ============================================================
   Interactive: Power Explorer
   ============================================================ */
.explorer { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.explorer__controls { display: flex; flex-wrap: wrap; gap: 26px; padding: 26px 30px; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.control { flex: 1 1 200px; }
.control > label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 10px; }
.segmented { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.segmented button {
  border: 0; background: transparent; padding: .55em 1.1em; border-radius: 100px; cursor: pointer;
  font-weight: 700; font-size: .9rem; color: var(--text-soft); transition: background .2s var(--ease), color .2s var(--ease);
}
.segmented button[aria-pressed="true"] { background: var(--ocean); color: #fff; }
.segmented button:hover:not([aria-pressed="true"]) { color: var(--ocean); }
.explorer__out { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.explorer__metric { padding: 30px; text-align: center; border-right: 1px solid var(--line); }
.explorer__metric:last-child { border-right: 0; }
.explorer__metric .num { font-weight: 900; font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--ocean); line-height: 1; letter-spacing: -.02em; transition: color .3s; }
.explorer__metric .unit { font-size: 1rem; font-weight: 700; color: var(--text-soft); }
.explorer__metric .lab { display: block; font-size: .82rem; color: var(--text-soft); margin-top: 10px; }
.explorer__note { padding: 14px 30px; font-size: .8rem; color: var(--text-soft); background: var(--bg-alt); border-top: 1px solid var(--line); }
@media (max-width: 720px){ .explorer__out { grid-template-columns: 1fr; } .explorer__metric { border-right: 0; border-bottom: 1px solid var(--line); } .explorer__metric:last-child { border-bottom: 0; } }

/* ============================================================
   Interactive: LCOE waterfall
   ============================================================ */
.waterfall { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(8px,1.4vw,18px); align-items: end; min-height: 320px; margin-top: 30px; }
.wf-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 300px; position: relative; }
.wf-bar { width: 100%; max-width: 96px; border-radius: 8px 8px 0 0; position: relative; transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease); }
.waterfall.is-in .wf-bar { transform: scaleY(1); }
.wf-bar.is-step { opacity: .9; }
.wf-val { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-weight: 900; font-size: 1rem; color: var(--slate); white-space: nowrap; }
.wf-lab { font-size: .82rem; color: var(--text-soft); text-align: center; margin-top: 12px; min-height: 3em; }
.wf-lab b { color: var(--slate); display: block; font-size: .9rem; }

/* ============================================================
   Interactive: Material savings compare
   ============================================================ */
.matsave { margin-top: 14px; }
.mat-row { display: grid; grid-template-columns: 200px 1fr 90px; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mat-row .mat-name { font-weight: 700; color: var(--slate); }
.mat-row .mat-name small { display:block; font-weight: 400; color: var(--text-soft); font-size: .8rem; }
.mat-track { background: var(--mist); border-radius: 100px; height: 16px; position: relative; overflow: hidden; }
.mat-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--ocean), var(--bright-teal)); border-radius: 100px; width: 0; transition: width 1.1s var(--ease); }
.matsave.is-in .mat-fill { width: var(--w); }
.mat-pct { font-weight: 900; color: var(--ocean); text-align: right; font-size: 1.1rem; }
@media (max-width: 620px){ .mat-row { grid-template-columns: 1fr 70px; } .mat-track { grid-column: 1 / -1; order: 3; } }

/* ============================================================
   Interactive: Device cutaway
   ============================================================ */
/* Full-bleed scroll-driven cutaway (sticky stage pinned through a tall track) */
.cutaway { width: 100vw; margin-left: calc(50% - 50vw); position: relative; height: 320vh; }
.cutaway__pin { position: sticky; top: 0; }
.cutaway__stage { position: relative; width: 100%; overflow: hidden; background: radial-gradient(95% 85% at 50% 12%, #0c6178, var(--ink) 78%); }
.cutaway__mv { display: block; width: 100%; height: clamp(440px, 66vh, 800px); background: transparent; }
/* Subsystem rail: horizontal expanding accordion, pinned below the stage */
.cutaway__steps { flex: 0 0 auto; display: flex; gap: 12px; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gutter) 22px; align-items: stretch; }
.cut-step { flex: 1 1 0; min-width: 0; padding: 20px 22px; border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; overflow: hidden; transition: flex-grow .45s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.cut-step:hover { border-color: var(--sky-teal); }
.cut-step.is-active { flex-grow: 3.4; border-top-color: var(--ocean); box-shadow: var(--shadow-sm); }
.cut-step h4 { color: var(--slate); display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0; font-size: 1rem; line-height: 1.25; transition: margin-bottom .3s var(--ease); }
.cut-step.is-active h4 { margin-bottom: .55em; }
.cut-step h4 .n { width: 26px; height: 26px; border-radius: 50%; background: var(--ice); color: var(--ocean); display: grid; place-items: center; font-size: .85rem; flex: none; }
.cut-step.is-active h4 .n { background: var(--ocean); color: #fff; }
.cut-step p { color: var(--text-soft); font-size: .92rem; margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .3s var(--ease); }
.cut-step.is-active p { max-height: 360px; opacity: 1; margin-top: .35em; }
@media (max-width: 860px){
  .cutaway { height: auto; }
  .cutaway__pin { position: static; height: auto; display: block; }
  .cutaway__stage { flex: none; }
  .cutaway__mv { height: 56vh; }
  .cutaway__steps { flex-direction: column; gap: 10px; padding-top: 18px; }
  .cut-step, .cut-step.is-active { flex: none; }
}

/* ============================================================
   Validation timeline
   ============================================================ */
.timeline { position: relative; margin-top: 30px; padding-left: 28px; }
.timeline::before { content:""; position:absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--ocean), var(--sky-teal)); }
.tl-item { position: relative; padding: 0 0 30px 24px; }
.tl-item::before { content:""; position:absolute; left:-28px; top: 4px; width: 14px; height: 14px; border-radius:50%; background:#fff; border: 3px solid var(--ocean); }
.tl-item.is-future::before { border-color: var(--sage); background: var(--mist); }
.tl-item .tl-date { font-weight: 900; color: var(--ocean); font-size: .85rem; letter-spacing: .04em; }
.tl-item.is-future .tl-date { color: var(--sage); }
.tl-item h4 { margin: 2px 0 .2em; }
.tl-item p { color: var(--text-soft); font-size: .94rem; margin: 0; }

/* ============================================================
   Spec table
   ============================================================ */
.spectable { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: .96rem; }
.spectable th, .spectable td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.spectable thead th { background: var(--ocean); color: #fff; font-weight: 700; letter-spacing: .02em; }
.spectable thead th:first-child { border-radius: 8px 0 0 0; }
.spectable thead th:last-child { border-radius: 0 8px 0 0; }
.spectable tbody th { font-weight: 700; color: var(--slate); background: var(--bg-alt); }
.spectable tbody tr:hover td { background: var(--ice); }
.spectable td small { color: var(--text-soft); }
@media (max-width: 620px){ .spectable { font-size: .85rem; } .spectable th, .spectable td { padding: 10px 10px; } }

/* ============================================================
   FAQ / answer block (also feeds FAQPage schema)
   ============================================================ */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-weight: 700; font-size: 1.08rem; color: var(--slate); }
.faq__q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-weight: 300; font-size: 1.6rem; color: var(--ocean); transition: transform .3s var(--ease); }
.faq__item.is-open .faq__q::after { transform: translateY(-50%) rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq__a p { color: var(--text-soft); padding-bottom: 22px; margin: 0; }
.faq__item.is-open .faq__a { max-height: 400px; }

/* ============================================================
   Applications strip
   ============================================================ */
.apps { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.app { padding: 24px 18px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); text-align: center; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.app:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.app .app__ic { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--ocean); }
.app h4 { font-size: .98rem; margin-bottom: .3em; }
.app p { font-size: .82rem; color: var(--text-soft); margin: 0; }
@media (max-width: 860px){ .apps { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--ink); color: #9DB0B5; padding: 70px 0 30px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.footer img.footer__logo { height: 38px; margin-bottom: 18px; }
.footer h5 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: #9DB0B5; font-size: .94rem; }
.footer a:hover { color: var(--bright-teal); }
.footer address { font-style: normal; font-size: .88rem; line-height: 1.7; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 50px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: #6E8187; }
@media (max-width: 860px){ .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Scroll reveal
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-render, .hero__glow { animation: none; }
}

/* Section heading helper */
.sec-head { max-width: 62ch; margin-bottom: 48px; }
.sec-head.center { margin-inline: auto; }

/* ============================================================
   Feedback round 2: wave-bob sync, tether-to-seabed, cutaway dynamism
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .hero.is-in .waterline, .hero.is-in .waterline-back { animation: none; }
  .wec-topwec, .wec-rod { animation: none; }
}

/* Tether to seabed (hero render + cutaway stage) */
.tether { position: absolute; left: calc(50% - 0.5px); width: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(146,226,244,.6), rgba(146,226,244,0)); }
.wec .tether { top: 93%; height: 22%; }
.cutaway__device .tether { top: 93%; height: 28%; }

/* Cutaway: pulse the active callout, zoom the device (image + tether) toward the active subsystem */
.cutaway__device { position: relative; transition: transform .8s var(--ease); transform-origin: 50% 50%; will-change: transform; }
.cutaway__dot.is-active { animation: dotpulse 1.7s ease-out infinite; }
@keyframes dotpulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,188,229,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(0,188,229,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,188,229,0); }
}
@media (prefers-reduced-motion: reduce) {
  .cutaway__img img { transition: none; }
  .cutaway__dot.is-active { animation: none; }
}

/* LCOE pathway: descending, no axis numbers (gated) */
.waterfall .wf-bar { display: flex; align-items: flex-start; justify-content: center; }
.wf-cap { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--text-soft); }
.wf-bar.is-target .wf-cap { color: var(--ocean); }
.wf-arrow { text-align: center; color: var(--text-soft); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 18px; }


/* Economics: cost-vs-diesel comparison */
.costcompare { max-width: 720px; margin: 34px auto 0; display: flex; flex-direction: column; gap: 20px; }
.cc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 12px; }
.cc-name { font-weight: 700; color: var(--slate); font-size: 1rem; }
.cc-val { font-weight: 900; font-size: 1.15rem; color: var(--slate); white-space: nowrap; }
.cc-row.is-anacapa .cc-val { color: var(--ocean); }
.cc-track { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 100px; height: 24px; overflow: hidden; }
.cc-fill { height: 100%; width: 0; border-radius: 100px; transition: width 1.2s var(--ease); }
.costcompare.is-in .cc-fill { width: var(--w); }
.cc-row.is-diesel .cc-fill { background: var(--slate); }
.cc-row.is-anacapa .cc-fill { background: linear-gradient(90deg, var(--ocean), var(--bright-teal)); }
@media (prefers-reduced-motion: reduce) { .cc-fill { transition: none; } }


/* Interactive 3D model (model-viewer) cutaway */
.cutaway__mv { width: 100%; height: 540px; border-radius: var(--radius);
  background: radial-gradient(120% 100% at 50% 0%, #0a5a6d, var(--ink) 80%); --poster-color: transparent; }
.mv-hotspot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bright-teal);
  background: rgba(0,188,229,.22); color: #fff; font-weight: 900; font-size: .85rem; display: grid; place-items: center;
  cursor: pointer; padding: 0; transition: transform .25s var(--ease), background .25s var(--ease); }
.mv-hotspot:hover { background: rgba(0,188,229,.45); }
.mv-hotspot.is-active { background: var(--bright-teal); transform: scale(1.3); }
.mv-hotspot[data-visibility="hidden"] { opacity: 0; pointer-events: none; }
@media (max-width: 860px){ .cutaway__mv { height: 420px; } }


/* Labeled hotspots (no auto-rotate; view follows scroll) */
.mv-hotspot { background: none; border: 0; padding: 0; display: flex; align-items: center; cursor: pointer; }
.mv-hotspot .mv-num { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bright-teal);
  background: rgba(0,188,229,.28); color: #fff; font-weight: 900; font-size: .82rem; display: grid; place-items: center; flex: none;
  transition: background .2s var(--ease), transform .2s var(--ease); }
.mv-hotspot .mv-label { margin-left: 8px; background: rgba(20,32,42,.85); color: #fff; font-weight: 700; font-size: .8rem;
  padding: 4px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; }
.mv-hotspot:hover .mv-label, .mv-hotspot.is-active .mv-label { opacity: 1; transform: none; }
.mv-hotspot.is-active .mv-num { background: var(--bright-teal); transform: scale(1.2); }


/* Cutaway refinements: bigger model, narrower steps, leader labels, locked view */
.cutaway { grid-template-columns: minmax(0, 1.8fr) 280px; gap: 40px; }
.cutaway__mv { height: 640px; }
.cut-step { padding: 18px 20px; }
@media (max-width: 860px){ .cutaway { grid-template-columns: 1fr; } .cutaway__mv { height: 440px; } }
.mv-hotspot .mv-lead { width: 0; height: 2px; background: var(--bright-teal); transition: width .25s var(--ease); }
.mv-hotspot:hover .mv-lead, .mv-hotspot.is-active .mv-lead { width: 24px; }
.mv-hotspot.is-active .mv-num { background: var(--oxide); border-color: var(--oxide); transform: scale(1.18); }
.mv-hotspot.is-active .mv-lead { background: var(--oxide); }
.mv-hotspot .mv-label { margin-left: 0; }


/* Hero waves: full-width layers faded at the frame edges. Front layer crosses in front of the device, back behind; text sits above both. */
.hero-waves { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); }
.hero-waves--back  { z-index: 1; }
.hero-waves--front { z-index: 3; }
.hero-text { position: relative; z-index: 4; }

/* ============================================================
   Inner pages: page hero, team, news, contact, prose
   ============================================================ */
.pagehero { padding: 150px 0 80px; position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 120% at 75% 0%, #0a5a6d 0%, #004554 45%, #14202A 100%); }
.pagehero h1 { color: #fff; max-width: 20ch; }
.pagehero .lede { color: #BCD0D5; max-width: 62ch; }

/* Team grid */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.person { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.person__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--ice); color: var(--ocean); display: grid; place-items: center; font-weight: 900; font-size: 1.15rem; margin-bottom: 18px; }
.person h3 { margin: 0 0 .1em; font-size: 1.2rem; }
.person .role { color: var(--ocean); font-weight: 700; font-size: .88rem; margin-bottom: .7em; }
.person p { color: var(--text-soft); font-size: .92rem; margin-bottom: .8em; }
.person a { font-weight: 700; font-size: .85rem; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }

/* News grid */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--sky-teal); }
.news-card .meta { display: flex; gap: 12px; align-items: center; font-size: .8rem; color: var(--text-soft); margin-bottom: 12px; }
.news-card .meta .tag { color: var(--ocean); }
.news-card h3 { font-size: 1.18rem; margin: 0 0 .5em; }
.news-card p { color: var(--text-soft); font-size: .92rem; flex: 1; margin-bottom: 1em; }
@media (max-width: 860px) { .news-grid { grid-template-columns: 1fr; } }

.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 50px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem; background: #fff; color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2335454E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(0,132,161,.15); }
@media (max-width: 620px) { .form .row { grid-template-columns: 1fr; } }
.contact-block { margin-bottom: 26px; }
.contact-block h3, .contact-block h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 8px; }
.contact-block address { font-style: normal; line-height: 1.7; color: var(--text); }
.contact-block a { font-weight: 700; }
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.4rem; margin: 1.8em 0 .5em; color: var(--slate); }
.prose p, .prose li { color: var(--text); }
.prose ul { padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .4em; }
/* Nav CTA pill: restore button padding (`.nav__links a` was zeroing it) and drop the underline */
.nav__links a.nav__cta { padding: .5em 1.25em; }
.nav__links a.nav__cta::after { content: none; }

/* Team headshots */
.person__avatar--photo { width: 72px; height: 72px; overflow: hidden; padding: 0; }
.person__avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ============================================================
   Mobile fixes, 2026-08-05
   ============================================================ */

/* .nav.is-solid carries a backdrop-filter, and a backdrop-filter makes an
   element the containing block for its position:fixed descendants. Since
   .nav__links lives inside .nav, the full-screen mobile menu collapsed into
   the header box whenever the page was scrolled (it opened correctly only at
   the very top). Drop the blur while the menu is open; the nav is covered by
   the panel at that point anyway. */
body.nav-open .nav.is-solid {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 860px) {
  /* The hero scroll hint is absolutely positioned near the hero's bottom edge.
     At phone widths the stacked CTAs grow into that space and it sits on top
     of both buttons. It is decorative and redundant on touch. */
  .hero__scroll { display: none; }

  /* With the hint hidden and the hero CTA reduced to one button, the button
     sat flush against the evidence band below. Give the hero a floor. */
  .hero { padding-bottom: 56px; }
}