/* ============================================================================
   scroll.css — TAIKOOL brand over the scrollcraft engine.
   The engine (scrollcraft.css) is the mechanism; this file is the brand.
   Light-first, airy world per DESIGN.md: navy #102B4E, ice #DCEAF5,
   off-white #F7F9FC, blue #3986D7 (selective accent). Poppins head, Inter body.
   ========================================================================== */

/* ------------------------------------------------------------ brand tokens -- */
:root {
  --sc-canvas:      #F7F9FC;
  --sc-surface:     #DCEAF5;
  --sc-ink:         #102B4E;
  --sc-ink-soft:    #51617D;
  --sc-accent:      #3986D7;
  --sc-accent-ink:  #0E2036;

  --sc-font-display: "Poppins", system-ui, sans-serif;
  --sc-font-text:    "Inter", system-ui, sans-serif;
  --sc-font-mono:    "Inter", system-ui, sans-serif;

  --sc-shadow-color: 222 50% 30%;
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 9%, transparent);
}

/* Per-act ground family. The engine drifts --sc-canvas; these redefine the ink
   family the SAME way taste.md requires (token + color restated together), so
   an act on a dark ground does not inherit navy body text. */
.act--dark {
  --sc-ink:      #F7F9FC;
  --sc-ink-soft: #BBD0E6;
  --sc-accent:   #9FD0F5;
  --sc-accent-ink: #102B4E;
  color: var(--sc-ink);
}
.act--ice {
  --sc-canvas: #DCEAF5;
  --sc-surface: #C7DCEF;
}

/* ------------------------------------------------------------ page chrome -- */
.sc-page { background: var(--sc-canvas); }

.site-bar {
  position: absolute; inset: 0 0 auto 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-5) var(--sc-gutter);
  pointer-events: none;
}
.site-bar > * { pointer-events: auto; }
.brand {
  font-family: var(--sc-font-display); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: var(--sc-t-sm); color: var(--sc-ink);
}
.brand b{ font-weight: 700; }
.brand .brand__tone { color: var(--sc-accent); }
.brand-logo {
  height: clamp(1.9rem, 4vw, 2.7rem); width: auto; display: block;
}
.bar-cta {
  font-size: var(--sc-t-xs); font-weight: 600;
  color: var(--sc-ink); border: 1px solid var(--sc-hairline-strong);
  background: var(--sc-surface); border-radius: var(--sc-r-pill);
  padding: var(--sc-2) var(--sc-4); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.bar-cta:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm);
  line-height: 1; padding: var(--sc-3) var(--sc-5);
  border-radius: var(--sc-r-pill); text-decoration: none; cursor: pointer;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  color: var(--sc-accent-ink); background: var(--sc-accent);
  box-shadow: var(--sc-e2);
}
.btn--primary:hover { background: color-mix(in oklab, var(--sc-accent) 88%, var(--sc-ink)); }
.btn--ghost {
  color: var(--sc-ink); background: transparent; border: 1px solid var(--sc-hairline-strong);
}
.btn--ghost:hover { border-color: var(--sc-hairline); background: var(--sc-surface); }
.act--dark .btn--primary { color: #102B4E; }

/* =====================================================================
   ACT 1 · RECOGNITION — dimensional hero.
   Three planes (background recedes, mid card advances) + airflow ribbon.
   ===================================================================== */
.hero__stage { background: var(--sc-canvas); }
.plane--bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; will-change: transform;
}
/* soft tint so the navy headline always clears the morning scene */
.hero__tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(115deg,
      color-mix(in oklab, #F7F9FC 88%, transparent) 0%,
      color-mix(in oklab, #F7F9FC 60%, transparent) 30%,
      transparent 55%);
}
.hero__copy { z-index: 12; }
.hero__eyebrow {
  font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-accent); margin: 0 0 var(--sc-3);
}
.hero__title {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-4xl); line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight); color: var(--sc-ink);
  max-width: 11ch; text-wrap: balance; margin: 0 0 var(--sc-4);
}
.hero__lede {
  font-size: var(--sc-t-lg); line-height: 1.44; color: var(--sc-ink);
  max-width: 40ch; margin: 0 0 var(--sc-6); text-wrap: pretty;
}
.hero__actions { display: flex; gap: var(--sc-3); flex-wrap: wrap; }

/* the product card: an advancing mid plane in the right of the frame */
.hero__card {
  position: absolute; z-index: 5; will-change: transform;
  right: var(--sc-gutter); bottom: var(--sc-5);
  width: clamp(15rem, 26vw, 23rem);
  border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
  box-shadow: var(--sc-e3), var(--sc-edge);
  overflow: hidden;
}
.hero__card img { width: 100%; height: auto; display: block; }
.hero__card figcaption {
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft); padding: var(--sc-3) var(--sc-4);
  border-top: 1px solid var(--sc-hairline); font-weight: 500;
}

/* signature move: the airflow ribbon draws itself across the hero */
.air-ribbon { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.air-ribbon__path {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  color: var(--sc-accent); opacity: 0.9; filter: drop-shadow(0 2px 6px rgba(16,43,78,0.15));
}

/* =====================================================================
   ACT 2 · CONTEXT — the heat, named plainly. Pin + kinetic lines.
   ===================================================================== */
.ctx__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ctx__scrim { z-index: 1; }
.ctx__copy { z-index: 12; bottom: clamp(3rem, 13vh, 9rem); }
.ctx__line {
  font-family: var(--sc-font-display); font-weight: 500; color: var(--sc-ink);
  font-size: var(--sc-t-2xl); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug); max-width: 22ch; margin: 0;
  text-wrap: balance;
}
.ctx__line + .ctx__line { margin-top: var(--sc-3); }
.ctx__note {
  font-size: var(--sc-t-base); color: var(--sc-ink-soft); max-width: 40ch;
  margin: var(--sc-5) 0 0; text-wrap: pretty;
}

/* =====================================================================
   ACT 3 · TURN — the TAC-160 rises (PEAK). Reveal wipe over ice.
   ===================================================================== */
.turn__stage { background: var(--sc-surface); }
.turn__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  will-change: clip-path;
}
.turn__copy { z-index: 12; }
.turn__title {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-3xl); color: var(--sc-ink); line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight); text-wrap: balance;
  max-width: 14ch; margin: 0 0 var(--sc-4);
}
.turn__specs {
  display: flex; gap: var(--sc-5); flex-wrap: wrap; margin: 0; padding: 0;
  list-style: none;
}
.turn__specs li { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-weight: 500; }
.turn__specs b { display: block; font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-lg); color: var(--sc-ink); }

/* =====================================================================
   ACT 4 · RANGE — who it's for. Horizontal pan rail on navy.
   ===================================================================== */
.range__stage { background: #0F2A4E; }
.range__head { position: absolute; z-index: 12; top: clamp(2.5rem, 7vh, 5rem); left: var(--sc-gutter); right: var(--sc-gutter); }
.range__title {
  font-family: var(--sc-font-display); font-weight: 600; color: var(--sc-ink);
  font-size: var(--sc-t-2xl); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug); max-width: 20ch; text-wrap: balance; margin: 0;
}
.rail { align-items: stretch; gap: var(--sc-4); padding: clamp(11rem, 30vh, 18rem) var(--sc-gutter) var(--sc-6); }
.seg {
  flex: 0 0 auto; width: clamp(15rem, 30vw, 22rem);
  border-radius: var(--sc-r-lg); overflow: hidden; background: var(--sc-surface);
  box-shadow: var(--sc-e2), var(--sc-edge); display: flex; flex-direction: column;
}
.seg img { width: 100%; height: 12rem; object-fit: cover; display: block; }
.seg__name { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg);
  color: #102B4E; margin: var(--sc-4) var(--sc-5) var(--sc-2); }
.seg__line { font-size: var(--sc-t-sm); color: #51617D; margin: 0 var(--sc-5) var(--sc-5); text-wrap: pretty; }

/* =====================================================================
   ACT 5 · APPROACH — honest steps. Two-column flow reveal.
   ===================================================================== */
.approach__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sc-8);
  align-items: center;
}
.approach__title {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-3xl); color: var(--sc-ink); line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight); text-wrap: balance; margin: 0 0 var(--sc-5);
}
.approach__title .tone { color: var(--sc-accent); }
.approach__steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--sc-4); align-items: start;
  border-top: 1px solid var(--sc-hairline); padding: var(--sc-5) 0; }
.step__n { font-family: var(--sc-font-display); font-weight: 600; color: var(--sc-accent);
  font-size: var(--sc-t-sm); line-height: 1.44; }
.step h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg);
  color: var(--sc-ink); margin: 0 0 var(--sc-2); }
.step p { font-size: var(--sc-t-base); color: var(--sc-ink-soft); margin: 0; max-width: 46ch;
  text-wrap: pretty; }
.approach__media { border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e3); }
.approach__media img { width: 100%; height: auto; display: block; }

/* =====================================================================
   ACT 6 · COMMITMENT — one next step. Pin + magnet CTA. Last in frame.
   ===================================================================== */
.commit__stage {
  background-image:
    radial-gradient(120% 95% at 50% 42%, rgba(16,43,78,0.86) 0%, rgba(16,43,78,0.62) 55%, rgba(16,43,78,0.40) 100%),
    url('commit-case.jpg');
  background-size: cover;
  background-position: center;
  text-align: center; display: grid; place-items: center;
}
.commit__inner { padding: var(--sc-4); }
.commit__title {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-3xl); color: var(--sc-ink); line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight); text-wrap: balance; margin: 0 0 var(--sc-4);
}
.commit__body { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 34ch;
  margin: 0 auto var(--sc-6); text-wrap: pretty; }
.commit__foot {
  position: absolute; inset: auto 0 var(--sc-4) 0; text-align: center;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  display: flex; gap: var(--sc-4); justify-content: center; flex-wrap: wrap;
}
.commit__foot a { color: var(--sc-ink-soft); }

/* =====================================================================
   PROCESS · from idea to floor. Four stages reveal as you scroll.
   ===================================================================== */
.process { background: var(--sc-canvas); }
.process__head {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-2xl); color: var(--sc-ink); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug); max-width: 22ch; text-wrap: balance;
  margin: 0 0 var(--sc-7);
}
.process__list { list-style: none; margin: 0; padding: 0; }
.process__stage {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sc-5); align-items: baseline;
  border-top: 1px solid var(--sc-hairline); padding: var(--sc-6) 0;
}
.process__stage:last-child { border-bottom: 1px solid var(--sc-hairline); }
.process__n {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm);
  color: var(--sc-accent); font-variant-numeric: tabular-nums;
}
.process__title {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl);
  color: var(--sc-ink); letter-spacing: var(--sc-track-wide); margin: 0 0 var(--sc-2);
}
.process__sub { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin: 0; letter-spacing: 0.03em; }

/* =====================================================================
   SPECS · the TAC-160 on the numbers. Spec-sheet grid, two columns.
   ===================================================================== */
.specs { background: var(--sc-surface); }
.specs__head {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-2xl); color: var(--sc-ink); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug); max-width: 24ch; text-wrap: balance;
  margin: 0 0 var(--sc-7);
}
.specs__list {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sc-8); margin: 0;
}
.spec { border-top: 1px solid var(--sc-hairline); padding: var(--sc-6) 0; }
.specs__list .spec:nth-last-child(-n+2) { border-bottom: 1px solid var(--sc-hairline); }
.spec__val {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl);
  color: var(--sc-ink); letter-spacing: var(--sc-track-snug); margin: 0 0 var(--sc-2);
  display: block; font-feature-settings: "tnum";
}
.spec__label { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin: 0; max-width: 40ch; text-wrap: pretty; }

/* =====================================================================
   FOOTER · visit + hours + contact, four columns on a light ground.
   ===================================================================== */
.site-footer {
  background: #0B2442; color: #F7F9FC;
  border-top: 3px solid var(--sc-accent);
  padding: var(--sc-9) 0 0;
}
.footer__brand { display: flex; align-items: center; justify-content: flex-start; gap: var(--sc-4); margin-bottom: var(--sc-7); }
.footer-wordmark {
  font-family: var(--sc-font-display); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; font-size: var(--sc-t-xl); color: #F7F9FC;
}
.footer-logo { height: clamp(1.6rem, 3.5vw, 2.4rem); width: auto; display: block; }
.footer__tag { font-size: var(--sc-t-sm); color: #BBD0E6; }
.footer__cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sc-7);
}
.footer-col h4 {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xs);
  text-transform: uppercase; letter-spacing: var(--sc-track-wide); color: #F7F9FC;
  margin: 0 0 var(--sc-3);
}
.footer-col p { font-size: var(--sc-t-sm); color: #BBD0E6; line-height: 1.65; margin: 0 0 var(--sc-3); }
.footer-col a { color: #9FD0F5; text-decoration: none; display: block; font-size: var(--sc-t-sm); margin-bottom: var(--sc-2); }
.footer-col a:hover { text-decoration: underline; color: #F7F9FC; }
.footer__strong { font-weight: 600; color: #F7F9FC; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.16); margin-top: var(--sc-8); padding: var(--sc-4) 0;
  display: flex; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap;
  font-size: var(--sc-t-xs); color: #A9BFDA;
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 860px) {
  .hero__copy { bottom: auto; top: clamp(4.5rem, 16vh, 8.5rem); left: var(--sc-4); }
  .hero__card { width: clamp(10rem, 42vw, 16rem); bottom: var(--sc-5); right: var(--sc-4); }
  .hero__title { font-size: var(--sc-t-2xl); }
  .hero__copy { max-width: 82vw; }
  .ctx__line { font-size: var(--sc-t-xl); }
  .turn__title { font-size: var(--sc-t-2xl); }
  .approach__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .range__title { font-size: var(--sc-t-xl); }
  .commit__title { font-size: var(--sc-t-2xl); }
  .rail { padding-top: clamp(11rem, 36vh, 15rem); }
  .process__head { font-size: var(--sc-t-xl); }
  .process__title { font-size: var(--sc-t-lg); }
  .process__stage { gap: var(--sc-4); }
  .specs__list { grid-template-columns: 1fr; }
  .specs__head { font-size: var(--sc-t-xl); }
  .spec__val { font-size: var(--sc-t-lg); }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: var(--sc-6); }
  .footer__bottom { justify-content: flex-start; }
  .site-footer { padding-top: var(--sc-7); }
  .footer__brand { margin-bottom: var(--sc-5); }
}