/* AI-Author: Claude (Anthropic) — Home page only. */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 1. Hero */
.hero { padding-top: 7rem; }
.hero-media img { opacity: .42; object-position: center 30%; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: var(--gutter); align-items: center; }
.hero-crest { width: auto; height: min(46vh, 380px); justify-self: center; opacity: .95; }
.hero-copy .lede { color: var(--ink-200); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 1;
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-400);
}
.scroll-cue::after {
  content: ""; display: block; width: 1px; height: 3rem; margin: .8rem auto 0;
  background: var(--ink-400); transform-origin: top; animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; text-align: left; }
  .hero-crest { height: 140px; justify-self: start; }
}

/* 2. The old way */
.old-way .h-xl { max-width: 16ch; }
.old-lines { list-style: none; padding: 0; margin: clamp(3rem, 8vh, 6rem) 0 0; max-width: 46rem; }
.old-lines li {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.5; padding: 1.4rem 0;
  border-top: 1px solid var(--ink-200); color: var(--ink-600);
}
.old-lines li:last-child { border-bottom: 1px solid var(--ink-200); }
.old-cost { margin-top: clamp(3rem, 8vh, 6rem); max-width: 26ch; }

/* 3. The break: one line, held on screen for a long pause while scrolling */
.break { height: 240vh; position: relative; background: var(--black); color: var(--white); }
.break-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter);
}
.break-line {
  text-align: center; max-width: 18ch;
  /* fade in over the first 40% of the section, hold, then ease out at the end */
  opacity: clamp(0, calc(var(--p, 1) * 2.6 - .1), 1);
  transform: scale(calc(1.06 - min(var(--p, 1), .4) * .15));
  filter: blur(calc((1 - min(var(--p, 1) * 2.6, 1)) * 6px));
}
.no-js .break { height: auto; }
.no-js .break-sticky { position: static; height: auto; padding: var(--section-pad) var(--gutter); }
@media (prefers-reduced-motion: reduce) {
  .break { height: auto; }
  .break-sticky { position: static; height: auto; padding: var(--section-pad) var(--gutter); }
  .break-line { opacity: 1; transform: none; filter: none; }
}

/* 4. The new era */
.era-grid { align-items: center; }
.era-copy { grid-column: 1 / span 7; }
.era-copy .h-lg + .h-lg { margin-top: 1.4rem; }
.era-close { margin-top: 3rem; font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: .01em; color: var(--ink-600); }
.era-media { grid-column: 9 / span 4; aspect-ratio: 4 / 5; }
/* The terminal photo carries notes: one column wider than the blades/video frame. */
@media (min-width: 861px) { html:not([data-era="blades"]):not([data-era="video"]) .era-media { grid-column: 8 / span 5; } }
@media (max-width: 860px) {
  .era-copy, .era-media { grid-column: 1 / -1; }
  .era-media { aspect-ratio: 4 / 3; }
}

/* 5. Two products */
.products .bg-media img { opacity: .3; }
.product-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink-800); }
.product-card {
  display: flex; flex-direction: column; gap: 1.4rem; padding: clamp(2rem, 5vw, 4rem) 0;
  text-decoration: none; border-bottom: 1px solid var(--ink-800);
  transition: padding var(--med) var(--ease);
}
.product-card + .product-card { border-left: 1px solid var(--ink-800); padding-left: clamp(1.5rem, 4vw, 4rem); }
.product-card:hover .product-name, .product-card:focus-visible .product-name { letter-spacing: .32em; }
.product-name {
  font-size: calc(.8rem + 2px); font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-300); transition: letter-spacing var(--med) var(--ease);
}
.product-card .h-lg { max-width: 14ch; }
@media (max-width: 860px) {
  .product-pair { grid-template-columns: 1fr; }
  .product-card + .product-card { border-left: 0; padding-left: 0; }
}

/* 6. What it gives back */
.back-grid { align-items: center; }
.back-media { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.back-copy { grid-column: 7 / span 6; }
.back-list { margin: 2.4rem 0; font-size: clamp(1.15rem, 1.6vw, 1.45rem); color: var(--ink-600); }
@media (max-width: 860px) {
  .back-media, .back-copy { grid-column: 1 / -1; }
  .back-media { aspect-ratio: 4 / 3; order: 2; }
}

/* 7. The close */
.close-inner { max-width: 60rem; }
.close .lede { color: var(--ink-300); }

/* Hero entrance: pure CSS on load (no JS dependency for above-the-fold content). */
.rise { animation: rise var(--slow) var(--ease) both; animation-delay: var(--d, 0ms); }
.hero-crest.rise { animation-duration: 2200ms; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }
@media (max-width: 860px), (max-height: 700px) { .scroll-cue { display: none; } }

/* Videos (2026-10-04). Generated with Gemini/Veo from the client-approved keyframes. */
.media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Lines animation restored EXACTLY to the 2026-10-04 version (48d5463) at the
   client's request (2026-10-06): scroll-driven, 240vh, text fades with --p. */
/* The break: video behind the line; the text sits a little above centre so the
   video's final teal line settles beneath it rather than through it. */
.break-sticky { overflow: hidden; }
.break-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.break-line { position: relative; z-index: 1; }
/* Default: the line is drawn live on a canvas (break-lines.js) and placed under the
   text. The Gemini video is kept as a fallback, selectable in the client preview. */
.break-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
html:not([data-break="video"]) .break-video { display: none; }
html[data-break="video"] .break-canvas { display: none; }
html[data-break="video"] .break-line { margin-bottom: 30vh; }

/* "The new era": live blade-field animation (era-blades.js) by default; the
   Gemini video stays as a fallback, selectable in the client preview. */
.era-canvas { width: 100%; height: 100%; display: block; }
html:not([data-era="video"]) .era-media:not(.era--static) video { display: none; }
html:not([data-era="blades"]) .era-canvas, .era--static .era-canvas { display: none; }
html:not([data-era="route"]) .era-route { display: none; }
html[data-era="route"] .era-photo, html[data-era="blades"] .era-photo, html[data-era="video"] .era-photo { display: none; }

/* Default "new era" visual (era-route.js): a container's journey; every stage
   sends the client an update. Static markup is the final state. */
.era-media:has(.era-route) { background: var(--white); }
.era-route { width: 100%; height: 100%; display: block; overflow: visible; font-family: inherit; }
.era-route .route-base { fill: none; stroke: var(--ink-300); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.era-route .route-done { fill: none; stroke: var(--line-l); stroke-width: 2.5; stroke-linecap: round; }
.era-route .stop circle { fill: var(--white); stroke: var(--ink-300); stroke-width: 1.2; transition: fill .4s, stroke .4s; }
.era-route .stop.is-on circle { fill: var(--line-l); stroke: var(--line-l); }
.era-route .stop-label { font-size: 19px; letter-spacing: .02em; fill: var(--ink-400); transition: fill .4s; }
.era-route .stop.is-on .stop-label { fill: var(--black); }
.era-route .stop-label.end { text-anchor: end; }
.era-route .chip text { text-anchor: middle; font-size: 14px; letter-spacing: .02em; fill: var(--black); }
.era-route .chip rect { fill: var(--white); stroke: var(--line-l); stroke-width: 1; }
.era-route .chip { opacity: 1; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.era-route.is-live .stop:not(.is-on) .chip { opacity: 0; transform: translateY(6px); }
.era-route .box-body rect { fill: var(--white); stroke: var(--black); stroke-width: 1.8; }
.era-route .box-body path { stroke: var(--ink-400); stroke-width: 1; }
.era-route .box-done circle { fill: var(--line-l); }
.era-route .box-done path { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.era-route .box-done { opacity: 1; transform-box: fill-box; transform-origin: center; transition: opacity .4s, transform .4s var(--ease); }
.era-route.is-live:not(.is-delivered) .box-done { opacity: 0; transform: scale(.4); }

/* The old way: text with a "frustration" still revealed top→bottom (reveal.js). */
.oldway-grid { align-items: start; }
.oldway-copy { grid-column: 1 / span 7; }
.oldway-media { grid-column: 9 / span 4; aspect-ratio: 4 / 5; margin-top: clamp(2rem, 8vh, 6rem); }
@media (max-width: 860px) {
  .oldway-copy, .oldway-media { grid-column: 1 / -1; }
  .oldway-media { margin-top: 3rem; }
}
/* What it gives back: frustration → relief wipe by default; the Gemini video is
   kept as a preview option (data-giveback="video"). */
html:not([data-giveback="video"]) .back-media video { display: none; }
html[data-giveback="video"] .back-media img { display: none; }
html[data-giveback="video"] .back-media video { display: block; }

html[data-giveback="video"] .back-media::before { display: none; }
/* Phones: the route needs a tall frame (the video/blades used 4:3). */
@media (max-width: 860px) {
  html:not([data-era="blades"]):not([data-era="video"]) .era-media { aspect-ratio: 4 / 5; max-width: 28rem; }
}

/* Default "new era" visual (era-photo.js): automated terminal photo; notes
   appear next to the containers as you scroll. Static markup = all notes on. */
.era-photo { position: absolute; inset: 0; overflow: hidden; }
.era-photo { transform: scale(var(--zoom, 1)); transform-origin: 50% 40%; }
.era-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; }
/* Terminal A: one layer per driverless vehicle, moved along its lane by era-photo.js. */
.era-photo .agv { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.era-photo .agv img { width: 100%; height: 100%; object-fit: cover; }
.era-photo .agv-shadow { mix-blend-mode: multiply; }
.era-photo.is-bw > img, .era-photo.is-bw .agv img { filter: grayscale(1) contrast(1.08); }
.era-photo .pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.era-photo .pin-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--line-l); box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 2px 10px rgba(0,0,0,.35); }
.era-photo .pin-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--line-l); opacity: 0; }
.era-photo .pin.is-on .pin-dot::after { animation: pin-ping 1.4s var(--ease) 1; }
@keyframes pin-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.era-photo .pin-chip { position: absolute; top: -22px; white-space: nowrap; display: flex; flex-direction: column; gap: 1px;
  padding: .45rem .7rem; border-radius: 10px; background: rgba(251,249,244,.96); color: #0c0c0e;
  border-left: 3px solid var(--line-l); box-shadow: 0 6px 22px rgba(0,0,0,.28);
  font-size: .72rem; letter-spacing: .01em; line-height: 1.3; }
.era-photo .pin-chip b { font-weight: 600; font-size: .78rem; }
.era-photo .pin[data-side="r"] .pin-chip { left: 16px; }
.era-photo .pin[data-side="l"] .pin-chip { right: 16px; }
.era-photo .pin-dot, .era-photo .pin-chip { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.era-photo.is-live .pin:not(.is-on) .pin-dot { opacity: 0; transform: scale(.4); }
.era-photo.is-live .pin:not(.is-on) .pin-chip { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .era-photo { transform: none; } .era-photo .pin-dot::after { animation: none; } }
@media (max-width: 860px) {
  .era-photo .pin-chip { padding: .3rem .5rem; font-size: .6rem; top: -18px; border-radius: 8px; }
  .era-photo .pin-chip b { font-size: .64rem; }
  .era-photo .pin-dot { left: -5px; top: -5px; width: 10px; height: 10px; }
  .era-photo .pin[data-side="r"] .pin-chip { left: 11px; }
  .era-photo .pin[data-side="l"] .pin-chip { right: 11px; }
}

/* "Scroll" hint inside the pinned break (client, 2026-10-06): same look as the
   hero cue; shown on phones too, where a pinned section can feel stuck. */
.break-sticky .break-cue { z-index: 2; }
@media (max-width: 860px), (max-height: 700px) { .break-sticky .break-cue { display: block; bottom: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .break-cue { display: none; } }
.no-js .break-cue { display: none; }
/* Phones: figures had the browser's default 40px side margins, so every picture
   sat narrower than the text column (278 vs 358px at 390px). Full column width. */
@media (max-width: 860px) {
  .oldway-media, .era-media, .back-media { margin-left: 0; margin-right: 0; }
  html:not([data-era="blades"]):not([data-era="video"]) .era-media { max-width: none; }
}
/* Phone design pass (2026-10-13): tighter inner gaps; pictures come right after
   their heading (old way: heading → photo → examples → cost line; gives back:
   heading → photo → text, "Arivan takes the rest." stays with its text); the
   cold→warm picture runs edge to edge without its frame. */
@media (max-width: 860px) {
  .old-lines { margin-top: 1.5rem; }
  .old-cost { margin-top: 2rem; }
  .era-close { margin-top: 1.8rem; }
  .oldway-copy, .back-copy { display: contents; }
  .oldway-grid > *, .oldway-copy > *, .back-grid > *, .back-copy > * { grid-column: 1 / -1; }
  .oldway-copy > .eyebrow { order: 1; } .oldway-copy > h2 { order: 2; }
  .oldway-media { order: 3; margin-top: .5rem; }
  .old-lines { order: 4; } .old-cost { order: 5; }
  .back-copy > h2 { order: 1; }
  .back-media { order: 2; margin: .5rem calc(-1 * var(--gutter)) 0; }
  html .back-media { border: 0; }
  .back-copy > .back-list { order: 3; margin: 1rem 0 0; }
  .back-copy > p:last-child { order: 4; margin: 0; }
  .oldway-grid, .back-grid { row-gap: 1rem; }
}
/* The break keeps its original spacing (client-locked look, 48d5463). */
@media (max-width: 860px) { .break { --section-pad: clamp(6rem, 16vh, 12rem); } }
/* Phones: frame the cold→warm scene higher so both women's whole heads are in
   view (client, 2026-10-13); same position for both layers keeps the wipe aligned. */
@media (max-width: 860px) { .back-media img { object-position: center 37%; } }