/* site.css — Imanaka Asato
   Editorial × Japanese Ma. Hairline borders, no shadows, sharp corners.
   Mobile-first. All motion gated behind prefers-reduced-motion. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--color-primary); color: var(--color-on-dark); }

/* faint film grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; margin: 0; line-height: 1.06; letter-spacing: -0.01em; }
.serif { font-family: var(--font-heading); }
p { margin: 0 0 1rem; }
.lede { font-family: var(--font-heading); font-size: var(--fs-lede); line-height: 1.4; color: var(--color-text); max-width: var(--measure); }
.kicker {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-muted);
  margin: 0 0 var(--sp-3);
}
.muted { color: var(--color-muted); }
.measure { max-width: var(--measure); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 12vw, 160px); }
.section--surface { background: var(--color-surface); color: var(--color-text); }
.section--federal { background: var(--color-federal); color: var(--color-on-dark); }
.section--federal .kicker { color: var(--color-on-dark-muted); }
.section--federal .muted { color: var(--color-on-dark-muted); }
.section-head { margin-bottom: clamp(40px, 6vw, 80px); }
.section-head h2 { font-size: var(--fs-h2); }
.hr { height: 1px; background: var(--color-line); border: 0; margin: 0; }

.grid { display: grid; gap: var(--gutter); }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em; justify-content: center;
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  letter-spacing: var(--track-btn); text-transform: uppercase; text-decoration: none;
  padding: 16px 28px; border: 1px solid var(--color-primary); border-radius: var(--radius);
  cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  min-height: 48px;
}
.btn-primary { background: var(--color-primary); color: var(--color-on-dark); }
.btn-primary:hover { background: var(--color-text); border-color: var(--color-text); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.btn-ghost:hover { background: var(--color-text); color: var(--color-background); }
.section--federal .btn-ghost { color: var(--color-on-dark); border-color: var(--color-on-dark); }
.section--federal .btn-ghost:hover { background: var(--color-on-dark); color: var(--color-federal); }

/* underline-wipe text links */
.link {
  text-decoration: none; position: relative; color: inherit;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 1px; color: var(--color-accent); }

.arrow-link {
  display: inline-flex; align-items: center; gap: .6em; text-decoration: none;
  font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--color-primary);
}
.arrow-link svg { transition: transform var(--dur-fast) var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }
.section--federal .arrow-link { color: var(--color-on-dark); }

/* ---------- Focus ---------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--color-primary); color: var(--color-on-dark);
  padding: 12px 18px; text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: 8px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: var(--color-background); border-bottom: 1px solid var(--color-line);
  view-transition-name: site-header;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.brand {
  font-family: var(--font-heading); font-size: 1.35rem; letter-spacing: .02em;
  text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.brand .logomark { width: 26px; height: 26px; }
.nav { display: none; }
.nav a {
  text-decoration: none; color: var(--color-text); font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 500;
  position: relative; padding: 6px 0; white-space: nowrap;
}
.nav a[aria-current="page"] { color: var(--color-primary); }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--color-accent); transition: width var(--dur-fast) var(--ease);
}
.nav a:hover::after { width: 100%; }
.header-cta { display: none; }

/* overlay header for the home hero — light over video, solid on scroll */
.site-header--overlay { background: transparent; border-bottom-color: transparent; color: var(--color-on-dark); }
.site-header--overlay .brand, .site-header--overlay .nav a { color: var(--color-on-dark); }
.site-header--overlay.is-solid {
  background: var(--color-background); border-bottom-color: var(--color-line); color: var(--color-text);
}
.site-header--overlay.is-solid .brand, .site-header--overlay.is-solid .nav a { color: var(--color-text); }

@media (min-width: 1024px) {
  .nav { display: flex; gap: clamp(12px, 1.3vw, 24px); align-items: center; flex-wrap: nowrap; }
  .nav-toggle { display: none; }
}
/* slightly tighter letterspacing on nav so 7 one-line items fit the bar */
.nav a { letter-spacing: 0.1em; }
@media (min-width: 1280px) {
  .header-cta { display: inline-flex; }
}
/* keep the header phone CTA on one tight line, vertically centered */
.header-cta { white-space: nowrap; padding: 0 18px; height: 42px; min-height: 0; font-size: 12px; letter-spacing: .08em; align-self: center; }

/* hamburger + drawer (mobile) */
.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
  width: 48px; height: 48px; background: none; border: 0; cursor: pointer; padding: 12px;
}
.nav-toggle span { height: 1.5px; width: 100%; background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.site-drawer {
  position: fixed; inset: 0; z-index: 150; background: var(--color-background);
  transform: translateY(-100%); transition: transform .5s var(--ease);
  display: flex; flex-direction: column; padding: var(--gutter);
  visibility: hidden;
}
.site-drawer.is-open { transform: translateY(0); visibility: visible; }
.site-drawer .drawer-top { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); margin: calc(var(--gutter) * -1) calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); }
.site-drawer nav { display: flex; flex-direction: column; gap: 4px; margin-top: auto; margin-bottom: auto; }
.site-drawer nav a {
  font-family: var(--font-heading); font-size: clamp(2rem, 9vw, 3.5rem); text-decoration: none;
  color: var(--color-text); padding: 8px 0; border-bottom: 1px solid var(--color-line);
}
.site-drawer .drawer-foot { display: flex; flex-wrap: wrap; gap: 18px; color: var(--color-muted); font-size: var(--fs-meta); }
.drawer-close { width: 48px; height: 48px; background: none; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; color: inherit; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--color-on-dark); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.6) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(48px, 10vh, 120px); padding-top: calc(var(--header-h) + 24px); }
.hero__name { font-size: var(--fs-display); line-height: .98; letter-spacing: -0.015em; }
.hero__tagline { font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.9rem); max-width: 22ch; margin-top: var(--sp-3); color: var(--color-on-dark); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.hero .btn-ghost { color: var(--color-on-dark); border-color: rgba(255,255,255,.7); }
.hero .btn-ghost:hover { background: var(--color-on-dark); color: var(--color-text); }
.hero__scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2; width: 1px; height: 48px; background: rgba(255,255,255,.6); }

/* ---------- Reveal ---------- */
.reveal { opacity: 1; }
.motion-ok .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.motion-ok .reveal.in { opacity: 1; transform: none; }
.motion-ok .reveal-img img { transform: scale(1.06); transition: transform 1s var(--ease); }
.motion-ok .reveal-img.in img { transform: scale(1); }

/* ---------- Cards / lists ---------- */
.feature-grid { display: grid; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.feature-grid > * { background: var(--color-background); }
@media (min-width: 680px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .feature-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.tile { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 220px; }
.tile .idx { font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--color-muted); }
.tile h3 { font-size: var(--fs-h3); }
.tile .icon { width: 30px; height: 30px; color: var(--color-primary); }
.tile p { color: var(--color-muted); margin: 0; }

/* index list (practice areas, attorneys rows) */
.idx-list { border-top: 1px solid var(--color-line); }
.idx-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--sp-3);
  padding: clamp(20px, 3vw, 34px) 0; border-bottom: 1px solid var(--color-line);
  text-decoration: none; color: inherit; transition: padding-inline var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.idx-row:hover { background: var(--color-surface); padding-inline: 16px; }
.idx-row .idx { font-size: var(--fs-meta); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.idx-row h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.idx-row .role { font-size: var(--fs-meta); color: var(--color-muted); text-align: right; }

/* ---------- Attorneys ---------- */
.people { display: grid; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
@media (min-width: 560px) { .people { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .people { grid-template-columns: repeat(3, 1fr); } }
.person { background: var(--color-background); padding: clamp(22px,3vw,32px); display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.person .portrait { aspect-ratio: 3/4; background: var(--color-surface); border: 1px solid var(--color-line); overflow: hidden; }
.person .portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.02); transition: transform .6s var(--ease), filter .4s var(--ease); }
.person:hover .portrait img { transform: scale(1.03); filter: saturate(1) contrast(1.03); }
.person .portrait .mono { font-family: var(--font-heading); font-size: 3rem; color: var(--color-line); line-height: 1; }
.person h3 { font-size: 1.45rem; margin-top: 8px; }
.person .role { font-size: var(--fs-meta); color: var(--color-muted); letter-spacing: .04em; }
.person:hover h3 { color: var(--color-primary); }

/* ---------- Verify flag ---------- */
.verify {
  display: inline-block; font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent);
  border: 1px dashed var(--color-accent); padding: 2px 8px; border-radius: 0;
  background: rgba(140,115,85,.06);
}

/* ---------- Contact form ---------- */
.field { position: relative; border-bottom: 1px solid var(--color-text); }
.field input, .field textarea {
  width: 100%; border: 0; background: transparent; font-family: var(--font-body); font-size: 1rem;
  color: var(--color-text); padding: 22px 0; min-height: 64px; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; }
.field:focus-within { border-bottom-color: var(--color-primary); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-text); color: var(--color-on-dark); padding-block: clamp(48px, 8vw, 96px); }
.site-footer a { color: var(--color-on-dark); text-decoration: none; }
.site-footer .cols { display: grid; gap: var(--sp-6); }
@media (min-width: 760px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-on-dark-muted); margin: 0 0 var(--sp-3); font-weight: 500; }
.site-footer .brand { color: var(--color-on-dark); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer .footer-link:hover { color: var(--color-accent); }
.site-footer .colophon { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; color: var(--color-on-dark-muted); font-size: var(--fs-meta); }

/* demo preview banner (factory rule) */
.demo-banner { background: #111; color: #eee; text-align: center; padding: 10px 14px; font-size: 13px; }
.demo-banner strong { color: #fff; }

/* ---------- Heritage (about) ---------- */
.heritage { display: grid; gap: var(--gutter); }
@media (min-width: 900px) { .heritage { grid-template-columns: 1fr 1fr; } }
.heritage__sticky { align-self: start; }
@media (min-width: 900px) { .heritage__sticky { position: sticky; top: calc(var(--header-h) + 40px); } }
.heritage__col { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); }
.frame { border: 1px solid var(--color-line); padding: 14px; background: var(--color-background); }
.frame img { aspect-ratio: 3/4; object-fit: cover; width: 100%; filter: saturate(.72) contrast(1.05); }
.frame + figcaption, .figmeta { display: flex; justify-content: space-between; margin-top: 12px; font-size: var(--fs-meta); color: var(--color-muted); letter-spacing: .04em; }

/* insights list */
.insights { border-top: 1px solid var(--color-line); }
.insight {
  display: grid; grid-template-columns: 1fr; gap: 8px; padding: clamp(26px,3.5vw,40px) 0;
  border-bottom: 1px solid var(--color-line); text-decoration: none; color: inherit;
  transition: padding-inline var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
@media (min-width: 760px) { .insight { grid-template-columns: 160px 1fr auto; align-items: baseline; gap: var(--sp-4); } }
.insight:hover { background: var(--color-surface); padding-inline: 16px; }
.insight .date { font-size: var(--fs-meta); color: var(--color-muted); letter-spacing: .04em; }
.insight h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.insight .tag { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-accent); }

/* ---------- Accordion (practice areas) ---------- */
.acc { border-top: 1px solid var(--color-line); }
.acc details { border-bottom: 1px solid var(--color-line); }
.acc summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--sp-3); padding: clamp(22px,3vw,34px) 0;
  transition: padding-inline var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--color-surface); padding-inline: 16px; }
.acc summary .idx { font-size: var(--fs-meta); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.acc summary h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.acc .plus { width: 22px; height: 22px; position: relative; color: var(--color-muted); flex: none; }
.acc .plus::before, .acc .plus::after { content: ""; position: absolute; background: currentColor; transition: transform var(--dur-fast) var(--ease); }
.acc .plus::before { top: 10px; left: 0; width: 22px; height: 1.5px; }
.acc .plus::after { left: 10px; top: 0; width: 1.5px; height: 22px; }
.acc details[open] .plus::after { transform: scaleY(0); }
.acc details[open] summary h3 { color: var(--color-primary); }
.acc .acc-body { padding: 0 0 clamp(28px,4vw,44px); }
.acc .acc-body .grid { align-items: start; }
.acc .acc-body h4 { font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-muted); margin: 0 0 14px; font-weight: 500; }
.acc .acc-body ul { margin: 0; padding-left: 1.1em; color: var(--color-muted); display: flex; flex-direction: column; gap: 8px; }
.motion-ok .acc details[open] .acc-body { animation: accIn .5s var(--ease); }
@keyframes accIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Pipeline interactive (Phase 5) ---------- */
.pipeline-stage { background: var(--color-federal); color: var(--color-on-dark); padding-block: clamp(40px, 7vw, 96px); position: relative; overflow: hidden; }
.pipeline-map { width: 100%; max-width: 820px; margin: 0 auto; height: auto; }
.pipeline-clocks { display: flex; justify-content: space-between; max-width: 820px; margin: 18px auto 0; font-size: var(--fs-meta); color: var(--color-on-dark-muted); letter-spacing: .04em; }
.pipeline-nodes {
  display: flex; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line);
  overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.pipeline-node {
  flex: 1 0 200px; background: var(--color-background); border: 0; border-top: 2px solid transparent;
  text-align: left; padding: 22px 22px 26px; cursor: pointer; display: flex; flex-direction: column; gap: 10px;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  font-family: var(--font-body);
}
.pipeline-node .n { font-size: var(--fs-meta); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.pipeline-node .t { font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.08; color: var(--color-text); }
.pipeline-node:hover { background: var(--color-surface); }
.pipeline-node.is-active { background: var(--color-surface); border-top-color: var(--color-primary); }
.pipeline-node.is-active .t { color: var(--color-primary); }
.pipeline-panels { padding-block: clamp(40px, 6vw, 80px); }
.pipeline-panel[hidden] { display: none; }
.pipeline-panel .grid { align-items: start; }
.pipeline-panel .pp-step { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-accent); }
.pipeline-panel h3 { font-size: var(--fs-h2); margin: 10px 0 18px; }
.pipeline-panel .pp-side { border: 1px solid var(--color-line); padding: clamp(22px,3vw,32px); background: var(--color-surface); }
.pipeline-panel .pp-side h4 { font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-muted); margin: 0 0 10px; font-weight: 500; }

/* ---------- Magnetic cursor (pointer:fine only) ---------- */
.cursor, .cursor-ring { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor { cursor: none; }
  .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor [data-cursor] { cursor: none; }
  .cursor {
    display: block; position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
    width: var(--cursor-size); height: var(--cursor-size); border-radius: 50%;
    background: var(--color-text); transform: translate(-50%, -50%);
    transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .25s;
    mix-blend-mode: normal;
  }
  .cursor-ring {
    display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0;
    z-index: 9999; pointer-events: none; width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--color-text); transform: translate(-50%, -50%) scale(.4); opacity: 0;
    transition: opacity .25s var(--ease), transform .25s var(--ease), border-color .25s;
    font-family: var(--font-body); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text);
  }
  .cursor.is-hot { opacity: 0; }
  .cursor-ring.is-hot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .cursor-ring .lbl { opacity: 0; transition: opacity .2s; }
  .cursor-ring.has-label .lbl { opacity: 1; }
}

/* ---------- View Transitions (cross-document MPA) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Imagery: banners, figures, media ---------- */
.bleed { width: 100%; height: clamp(260px, 44vw, 560px); overflow: hidden; }
.bleed img, .bleed video { width: 100%; height: 100%; object-fit: cover; display: block; }
.motion-ok .bleed img { transform: scale(1.04); transition: transform 1.2s var(--ease); }
.motion-ok .bleed.in img { transform: scale(1); }
.media { position: relative; border: 1px solid var(--color-line); overflow: hidden; }
.media video, .media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media .media-fallback { display: none; position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) { .media video { display: none; } .media .media-fallback { display: block; } }
.acc-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--color-line); margin-bottom: 18px; filter: saturate(.85) contrast(1.03); }

/* ---------- Contrast: overlay header + hero scrims ---------- */
.site-header--overlay { background: linear-gradient(180deg, rgba(12,16,14,.6) 0%, rgba(12,16,14,0) 100%); }
.site-header--overlay.is-solid { background: var(--color-background); }
.site-header--overlay .brand, .site-header--overlay .nav a { text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.site-header--overlay.is-solid .brand, .site-header--overlay.is-solid .nav a { text-shadow: none; }
.hero__media::after { background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.34) 36%, rgba(0,0,0,.74) 100%); }
.hero__name, .hero__tagline { text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hero__inner .kicker { text-shadow: 0 1px 16px rgba(0,0,0,.55); }

/* ---------- Scroll progress bar ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--color-accent); z-index: 300; pointer-events: none; }

/* ---------- Magnetic buttons (fine pointer) ---------- */
@media (hover: hover) and (pointer: fine) {
  .motion-ok .btn, .motion-ok .arrow-link { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform .3s var(--ease); will-change: transform; }
}

/* ---------- Tile hover cue ---------- */
.tile { position: relative; transition: background var(--dur-fast) var(--ease); }
.tile::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--color-primary); transition: height var(--dur-fast) var(--ease); }
.tile:hover { background: var(--color-surface); }
.tile:hover::before { height: 100%; }

/* ---------- Hero entrance ---------- */
.motion-ok .hero__inner > * { opacity: 0; transform: translateY(26px); }
.motion-ok.is-loaded .hero__inner > * { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.motion-ok.is-loaded .hero__inner > *:nth-child(2) { transition-delay: .12s; }
.motion-ok.is-loaded .hero__inner > *:nth-child(3) { transition-delay: .24s; }
.motion-ok.is-loaded .hero__inner > *:nth-child(4) { transition-delay: .36s; }

/* ---------- Staggered reveals (grids) ---------- */
.motion-ok .feature-grid.reveal .tile,
.motion-ok .people.reveal .person { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.motion-ok .feature-grid.reveal.in .tile,
.motion-ok .people.reveal.in .person { opacity: 1; transform: none; }
.motion-ok .feature-grid.reveal.in .tile:nth-child(2), .motion-ok .people.reveal.in .person:nth-child(2) { transition-delay: .05s; }
.motion-ok .feature-grid.reveal.in .tile:nth-child(3), .motion-ok .people.reveal.in .person:nth-child(3) { transition-delay: .10s; }
.motion-ok .feature-grid.reveal.in .tile:nth-child(4), .motion-ok .people.reveal.in .person:nth-child(4) { transition-delay: .15s; }
.motion-ok .feature-grid.reveal.in .tile:nth-child(5), .motion-ok .people.reveal.in .person:nth-child(5) { transition-delay: .20s; }
.motion-ok .feature-grid.reveal.in .tile:nth-child(6), .motion-ok .people.reveal.in .person:nth-child(6) { transition-delay: .25s; }
.motion-ok .people.reveal.in .person:nth-child(7) { transition-delay: .30s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__scroll { display: none; }
  .pipeline-flow { display: none; }
  @view-transition { navigation: none; }
}

/* ---------- Interactive Pacific (pipeline hero) ---------- */
.ocean-stage {
  position: relative; overflow: hidden;
  min-height: clamp(460px, 76vh, 780px);
  display: flex; flex-direction: column; justify-content: center;
  /* poster still = reduced-motion view + fallback before the video loads */
  background:
    radial-gradient(130% 90% at 50% -12%, #27425a 0%, rgba(39,66,90,0) 58%),
    #0f1d28 url("../img/ocean-water.png") center / cover no-repeat;
}
/* animated water (Veo-generated loop) */
.ocean-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; display: block; pointer-events: none;
  transition: transform .5s var(--ease-soft);   /* eased parallax toward the cursor */
  will-change: transform;
}
.motion-ok .ocean-video { transform: scale(1.08); }   /* headroom so parallax never reveals edges */
/* contrast scrim so the arc + labels stay legible over the water */
.ocean-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(15,29,40,0) 0%, rgba(15,29,40,.55) 100%),
    linear-gradient(180deg, rgba(15,29,40,.62) 0%, rgba(15,29,40,.18) 30%, rgba(11,22,30,.66) 100%);
}
/* mouse-reactive ripple + glow overlay */
.ocean-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; pointer-events: none; }
.ocean-stage > .wrap { position: relative; z-index: 3; }

/* the arc map floats above the water */
.ocean-stage .pipeline-map { filter: drop-shadow(0 6px 26px rgba(0,0,0,.5)); }
.ocean-stage .pipeline-clocks { text-shadow: 0 1px 14px rgba(0,0,0,.7); }

@media (prefers-reduced-motion: reduce) {
  .ocean-video { display: none; }   /* poster background shows instead */
}