/* Isaac Christian landing, round 2 (scroll-craft). Loaded after scrollcraft.css and site.css.
   Brand tokens come from site.css (:root). This file maps them onto the engine and lays out the page. */

:root {
  --sc-canvas: var(--paper); --sc-surface: var(--white);
  --sc-ink: var(--ink); --sc-ink-soft: var(--grey);
  --sc-accent: var(--orange); --sc-accent-ink: var(--on-orange);
  --sc-font-display: var(--font-display); --sc-font-text: var(--font-sans);
  --door-h: min(62svh, 600px);
  --door-w: calc(var(--door-h) * 9 / 16);
}
body { background: var(--paper); font-size: 16px; line-height: 26px; letter-spacing: 0; }
/* A scroll container breaks position: sticky, so clip instead of hidden. */
.lp { overflow: visible; overflow-x: clip; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 0; }
.ic-header { position: relative; z-index: 5; }

/* ---------- 1 · Hero ---------- */
.hero { padding-bottom: var(--space-8); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-8); align-items: center; padding-block: var(--space-4) var(--space-7); }
.hero__copy { display: grid; gap: var(--space-5); min-width: 0; position: relative; z-index: 4; }
.hero__title { font-size: clamp(64px, 8.6vw, 128px); line-height: .88; letter-spacing: -.01em; }
.hero__say { margin: 0; font: 400 clamp(40px, 4.4vw, 64px)/.95 var(--font-display); text-transform: uppercase; color: var(--ink); }
.hero__leads { position: relative; color: var(--orange-text); display: inline-block; }
.hero__under { position: absolute; left: -2%; bottom: -14px; width: 104%; height: auto; color: var(--orange); }
.hero__sub { margin: 0; font-size: 20px; line-height: 30px; font-weight: 500; color: var(--grey); max-width: 30ch; }
.hero__buttons { margin-top: var(--space-2); gap: var(--space-3); }
.hero__arrow { left: -88px; top: 4px; width: 80px; }

.hero__scene { position: relative; aspect-ratio: 1 / 1.08; max-width: 580px; width: 100%; justify-self: end; }
.hero__block { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; background: var(--orange); border-radius: var(--radius-block); }
/* The person shares the block's bottom edge; the clip keeps that contact line clean while the two move at different rates. */
.hero__person { position: absolute; inset: -6% 0 0 0; clip-path: inset(-20% 0 0 0 round 0 0 16px 16px); }
.hero__person img { position: absolute; right: 0; bottom: -10%; width: 100%; height: auto; max-width: none; }
.hero__chip { position: absolute; z-index: 3; }
.hero__chip--a { left: -7%; top: 52%; }
.hero__chip--b { right: -4%; top: 38%; }
.hero__chip--c { left: 6%; bottom: 4%; }
.hero__sticker-wrap { position: absolute; right: 0; top: 4%; z-index: 3; }
.hero__sticker { position: relative; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Section hand-off: each section is a rounded sheet that slides up over the last;
   page.js pushes the one underneath back (scale + fade) as it is covered. ---------- */
.sheet { position: relative; margin-top: -40px; border-radius: 40px 40px 0 0; box-shadow: 0 -24px 48px -20px rgb(40 26 14 / .22); }
.sheet__in, .hero__grid { transform-origin: 50% 0; will-change: transform, opacity; }
.hero { position: relative; z-index: 0; }
.doors { z-index: 1; } .about { z-index: 2; } .reviews { z-index: 3; } .close { z-index: 4; }

/* ---------- 2 · Doors ---------- */
.doors { background: var(--white); padding-block: var(--space-9) var(--space-9); }
.doors__stage { display: flex; flex-direction: column; gap: var(--space-7); }
.doors__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.doors__hint { margin: 0; font-size: 18px; line-height: 28px; color: var(--grey); }
.doors__viewport { width: 100%; }
.only-touch { display: none; }
@media (hover: none), (pointer: coarse) { .only-fine { display: none; } .only-touch { display: inline; } }
.doors__row { display: flex; justify-content: center; gap: clamp(24px, 4vw, 64px); padding: 0 var(--space-4) 48px; }

/* --open is animated by the browser, so a door swings rather than snaps. */
@property --open { syntax: "<number>"; inherits: true; initial-value: 0; }
.dr { --open: 0; position: relative; display: block; width: var(--door-w); height: var(--door-h); flex: none; color: var(--ink); text-decoration: none;
  transition: --open .5s cubic-bezier(.5, 0, .3, 1); -webkit-tap-highlight-color: transparent; }
.dr.is-open { --open: 1; transition-duration: .75s; transition-timing-function: var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .dr:hover { --open: 1; transition-duration: .75s; transition-timing-function: var(--sc-ease-out); }
  .dr:hover .dr__go svg { transform: translate(2px, -2px); }
}
.dr:focus-visible { --open: 1; outline: none; }
.dr:focus-visible .dr__frame { outline: 2px solid var(--focus); outline-offset: 4px; }
.dr:active .dr__frame { transform: translateY(1px); }

/* The casing: an arch. Horizontal radius = half the width; vertical radius matches it on a 9:16 box (9/32 = 28.125%). */
.dr__frame { position: absolute; inset: 0; border: 1.5px solid var(--ink); border-radius: 50% 50% 14px 14px / 28.125% 28.125% 14px 14px; background: var(--ink); perspective: 1600px;
  box-shadow: 0 18px 30px -18px rgb(40 26 14 / .45); }
.dr__room { position: absolute; inset: 8px; border-radius: 50% 50% 10px 10px / 28.6% 28.6% 10px 10px; overflow: hidden; background: var(--orange); color: var(--on-orange);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 0 22px 26px; }
.dr__room::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(14 14 14 / calc(.3 * (1 - var(--open)))) 0, transparent 55%); pointer-events: none; }
.dr__title { font: 400 clamp(30px, 2.6vw, 40px)/.95 var(--font-display); text-transform: uppercase; position: relative; }
.dr__meta { font: 500 15px/22px var(--font-sans); position: relative; max-width: 26ch; }
.dr__go { position: relative; display: inline-flex; align-items: center; gap: 6px; font: 600 15px/20px var(--font-sans); border-bottom: 2px solid var(--ink); align-self: flex-start; padding-bottom: 2px; margin-top: 6px; }
.dr__go svg { width: 14px; height: 14px; transition: transform .16s var(--sc-ease-out); }
.dr__room > * { opacity: calc(var(--open) * 1.5 - .5); transform: translateY(calc((1 - var(--open)) * 16px)); }

/* At --open 0 the leaf sits exactly in the frame: rotateY(0). */
.dr__leaf { position: absolute; inset: 8px; border-radius: 50% 50% 10px 10px / 28.6% 28.6% 10px 10px; overflow: hidden;
  transform-origin: 0 50%; transform: rotateY(calc(var(--open) * -96deg)); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dr__face { position: absolute; inset: 0; width: 100%; height: 100%; }
.dr__plate { position: absolute; left: 50%; top: 59.5%; transform: translate(-50%, -50%); white-space: nowrap;
  font: 400 15px/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--paper); color: var(--ink); }
.dr__knob { position: absolute; right: 9%; top: 55%; width: 13px; height: 13px; border-radius: 50%; background: var(--orange); border: 1.5px solid var(--ink); }
.dr__spill { position: absolute; left: 4%; right: -30%; top: calc(100% - 2px); height: 44px; background: var(--orange);
  clip-path: polygon(0 0, 30% 0, 100% 100%, 0 100%); opacity: calc(var(--open) * .32); transform-origin: 0 0; transform: scaleX(var(--open)); pointer-events: none; }

.dr--web .dr__leaf { background: var(--ink); }
.dr--web .g-win { fill: var(--white); stroke: var(--paper); stroke-width: 1.4; }
.dr--web .g-ln { stroke: var(--ink); stroke-width: .8; }
.dr--web .g-dot, .dr--web .g-ink { fill: var(--ink); }
.g-hot { fill: var(--orange); }
.dr--web .g-pan, .dr--video .g-pan { fill: none; stroke: color-mix(in oklab, var(--paper) 40%, transparent); stroke-width: 1.2; }
.dr--web .g-ln2 { stroke: color-mix(in oklab, var(--paper) 40%, transparent); stroke-width: 1.2; }
.dr--crm .dr__leaf { background: var(--paper); }
.dr--crm .g-wire { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.dr--crm .g-node { fill: var(--white); stroke: var(--ink); stroke-width: 1.4; }
.dr--crm .g-node--hot, .dr--crm .g-card--hot { fill: var(--orange); }
.dr--crm .g-pan { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.dr--crm .g-ln2 { stroke: var(--ink); stroke-width: .9; }
.dr--crm .g-card { fill: var(--line); }
.dr--crm .dr__plate { background: var(--white); }
.dr--video .dr__leaf { background: var(--grey); }
.dr--video .g-perf rect { fill: var(--paper); }
.dr--video .g-win { fill: var(--ink); stroke: var(--paper); stroke-width: 1.4; }
.dr--video .g-play { fill: var(--orange); }
.dr--video .g-cap { fill: var(--paper); }
.dr--video .g-cap--s { opacity: .55; }
.dr--video .dr__plate, .dr--web .dr__plate { background: var(--orange); }

/* ---------- 3 · About ---------- */
.about { background: var(--paper); padding-block: var(--space-10) var(--space-10); }
.about__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--space-9); align-items: center; }
.about__photo { position: relative; max-width: 520px; width: 100%; align-self: start; position: sticky; top: 10vh; }
.about__burst { position: absolute; right: -6px; top: 6%; width: 72px; z-index: 3; }
.about__reveal { padding-top: 4%; }
.about__copy { display: grid; gap: var(--space-5); }
.about__title { font-size: clamp(56px, 6.4vw, 96px); line-height: .9; }
.about__lead { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; font-weight: 500; color: var(--ink); max-width: 34ch; text-wrap: pretty; }
.about__body { margin: 0; font-size: 20px; line-height: 31px; color: var(--grey); max-width: 52ch; text-wrap: pretty; }
.about__quote { margin: var(--space-2) 0 0; padding: var(--space-5) var(--space-6); background: var(--ink); color: var(--on-band); border-radius: 20px;
  font: 400 clamp(24px, 2.2vw, 30px)/1.12 var(--font-display); text-transform: uppercase; max-width: 30ch; box-shadow: 0 20px 40px -24px rgb(40 26 14 / .55); }
.about__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.about__tools li { font: 600 15px/20px var(--font-sans); padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--white);
  transition: background-color .16s, color .16s, transform .16s var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .about__tools li:hover { background: var(--orange); transform: translateY(-2px); } }

.about__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; counter-reset: step; display: grid; }
.step { counter-increment: step; position: relative; display: grid; grid-template-columns: 96px 1fr 28px; gap: var(--space-5); align-items: center;
  padding: var(--space-5) var(--space-4); border-top: 1px solid var(--line); border-radius: 18px; isolation: isolate;
  transition: color .2s var(--sc-ease-out); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ink);
  transform: scaleY(.2); opacity: 0; transition: transform .35s var(--sc-ease-out), opacity .25s; }
.step__num::before { content: counter(step, decimal-leading-zero); }
.step__num { font: 400 clamp(56px, 5vw, 72px)/.9 var(--font-display); color: var(--orange-text); display: inline-block;
  transition: transform .35s var(--sc-ease-out), color .2s; transform-origin: 0 100%; }
.step h3 { margin: 0 0 4px; font: 400 clamp(26px, 2.2vw, 32px)/1 var(--font-display); text-transform: uppercase; color: var(--ink); transition: color .2s, transform .35s var(--sc-ease-out); }
.step p { margin: 0; font-size: 17px; line-height: 26px; color: var(--grey); transition: color .2s; }
.step__go { width: 24px; height: 24px; opacity: 0; transform: translateX(-10px); transition: opacity .2s, transform .3s var(--sc-ease-out); color: var(--orange); }
@media (hover: hover) and (pointer: fine) {
  .step:hover::before { transform: scaleY(1); opacity: 1; }
  .step:hover .step__num { color: var(--orange); transform: scale(1.12) rotate(-4deg); }
  .step:hover h3 { color: var(--on-band); transform: translateX(6px); }
  .step:hover p { color: #C9C4BC; }
  .step:hover .step__go { opacity: 1; transform: none; }
}

.about__more { margin-top: var(--space-3); }

/* ---------- 4 · Reviews: two columns drifting in opposite directions ---------- */
.reviews { background: var(--orange); padding-block: var(--space-9) var(--space-10); overflow: hidden; }
.reviews__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: center; }
.reviews__head { display: grid; gap: var(--space-4); align-content: center; }
.reviews .ic-kicker { color: var(--ink); }
.reviews__lead { margin: 0; font-size: 20px; line-height: 30px; font-weight: 500; color: var(--ink); max-width: 28ch; }
.reviews__score { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--ink); color: var(--on-band);
  border-radius: 22px; width: max-content; box-shadow: 0 18px 34px -18px rgb(60 24 6 / .55); }
.reviews__num { font: 400 64px/.9 var(--font-display); color: var(--orange); }
.reviews__of { display: grid; gap: 6px; font: 600 15px/20px var(--font-sans); }
.reviews__of .ic-stars svg { fill: var(--orange); }

.reviews__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); height: 720px; overflow: hidden; outline-offset: 4px; border-radius: 28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.rcol { min-width: 0; }
.rcol__track, .rcol__dup { display: flex; flex-direction: column; gap: var(--space-5); }
.rcol__track { padding-bottom: var(--space-5); animation: rcol-up var(--dur, 28s) linear infinite; will-change: transform; }
.rcol--b .rcol__track { animation-direction: reverse; }
@keyframes rcol-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.reviews__cols:hover .rcol__track, .reviews__cols:focus-within .rcol__track { animation-play-state: paused; }
.rcol .rv { width: 100%; padding: 28px 28px 22px; }
.rcol .rv__q { font-size: 18px; line-height: 28px; }
.rv { position: relative; margin: 0; width: min(440px, 82vw); flex: none; background: var(--white); border-radius: 28px; padding: var(--space-6) var(--space-6) var(--space-5);
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-5); align-items: start;
  box-shadow: 0 2px 4px rgb(60 24 6 / .10), 0 14px 28px -8px rgb(60 24 6 / .28), 0 34px 60px -24px rgb(60 24 6 / .35);
  transition: transform .3s var(--sc-ease-out), box-shadow .3s var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .rv:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 2px 4px rgb(60 24 6 / .10), 0 22px 36px -10px rgb(60 24 6 / .34), 0 48px 80px -28px rgb(60 24 6 / .45); }
}
.rv__mark { width: 40px; height: 32px; fill: var(--orange); }
.rv__q { margin: 0; font-size: 20px; line-height: 30px; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.rv__who { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.rv__av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 400 24px/1 var(--font-display); color: var(--white);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 4.5px var(--line), 0 6px 14px -4px rgb(40 26 14 / .35); }
.rv__av--a1 { background: radial-gradient(circle at 30% 25%, #4A4743, #0E0E0E); }
.rv__av--a2 { background: radial-gradient(circle at 30% 25%, #FF8A5C, #B33A0B); }
.rv__av--a3 { background: radial-gradient(circle at 30% 25%, #8C857C, #4A4743); }
.rv__av--a4 { background: radial-gradient(circle at 30% 25%, #FF6A33, #E84A0E); }
.rv__id b { display: block; font-weight: 700; font-size: 16px; }
.rv__meta { display: block; font-size: 14px; line-height: 20px; color: var(--muted); }
.rv__right { display: grid; justify-items: end; gap: 4px; }
.rv__stars { color: var(--orange-text); letter-spacing: 2px; font-size: 15px; line-height: 1; }
.rv__tag { font: 600 12px/16px var(--font-sans); color: var(--ink); background: var(--paper); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

/* ---------- 5 · Close ---------- */
.close { background: var(--band); color: var(--on-band); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.close__inner { flex: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-7); padding-block: var(--space-9) var(--space-7); }
.close__copy { display: grid; gap: var(--space-6); }
.close .contact-line { color: var(--on-band); }
.close .ic-hot { color: var(--orange); }
.close__squiggle { width: 220px; display: block; margin-top: -8px; }
.close .ic-icon-btn { background: transparent; color: var(--on-band); border-color: var(--on-band); }
.close .ic-icon-btn:hover { background: var(--orange); color: var(--on-orange); border-color: var(--orange); }
.close :focus-visible { outline-color: var(--orange); }
.close__msg { transform: none; }
.close__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); border-top: 1px solid #2E2B28; padding-block: var(--space-5); font-size: 14px; line-height: 22px; color: #B8B2A8; }
.lp .close__foot a { color: var(--on-band); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--orange); }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  :root { --door-h: min(64svh, 520px); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); padding-block: var(--space-4) var(--space-6); }
  .hero__title { font-size: 60px; }
  .hero__say { font-size: 40px; }
  .hero__sub { font-size: 18px; line-height: 28px; }
  .hero__arrow { left: auto; right: 6px; top: -62px; width: 70px; transform: rotate(98deg); }
  .hero__buttons { margin-top: var(--space-7); }
  .hero__scene { justify-self: center; max-width: 420px; }
  .hero__chip--a { left: -2%; }
  .hero__chip--b { right: -1%; }

  .sheet { border-radius: 28px 28px 0 0; margin-top: -28px; }
  .doors { padding-block: var(--space-8); }
  .doors__stage { gap: var(--space-5); }
  .doors__hint { font-size: 16px; line-height: 24px; }
  /* Swipe between doors; tap opens, a second tap walks in. */
  .doors__row { justify-content: flex-start; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: calc(50vw - var(--door-w) / 2); }
  .doors__row::-webkit-scrollbar { display: none; }
  .dr { scroll-snap-align: center; }
  .dr__room { padding: 0 18px 22px; }

  .about { padding-block: var(--space-8) var(--space-9); }
  .about__photo { position: relative; top: 0; }
  .step { grid-template-columns: 64px 1fr; padding-inline: var(--space-2); }
  .step__go { display: none; }
  .about__quote { padding: var(--space-5); }
  .about__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .about__photo { max-width: 340px; margin: 0 auto; }
  .about__title { font-size: 52px; }
  .about__lead { font-size: 21px; }
  .about__body { font-size: 18px; line-height: 28px; }

  .reviews { padding-block: var(--space-8) var(--space-9); }
  .reviews__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .reviews__cols { grid-template-columns: 1fr; height: 600px; }
  .rcol--b { display: none; }
  .rcol--a .rcol__track { --dur: 34s; }
  .rv { padding: var(--space-5); border-radius: 22px; }
  .rv__who { grid-template-columns: auto 1fr; }
  .rv__right { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--space-3); }
  .rv__q { font-size: 18px; line-height: 28px; }

  .close__inner { flex-direction: column; align-items: flex-start; padding-block: var(--space-8) var(--space-6); }
  .close__squiggle { width: 160px; }
}

/* ---------- Reduced motion: everything present, nothing travelling ---------- */
@media (prefers-reduced-motion: reduce) {
  .dr { transition: none; }
  .sheet__in, .hero__grid { transform: none !important; opacity: 1 !important; }
  .hero__sticker { animation: none; }
  .rcol__track { animation: none; }
  .rcol__dup { display: none; }
  .reviews__cols { height: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Review cards in the columns are narrower: stars and project tag sit on their own row under the name. */
.rcol .rv__who { grid-template-columns: auto 1fr; }
.rcol .rv__right { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--space-3); }

/* Metal hairlines */
.reviews__score.metal-edge { background: transparent; --edge-fill: var(--ink); }
.close__msg.metal-edge { background: transparent; --edge: 2px; --edge-fill: var(--orange); }
.dr .dr__rim { position: absolute; inset: -3px; z-index: 0; border-radius: 50% 50% 16px 16px / 28.4% 28.4% 16px 16px; overflow: hidden; }
.dr__frame { z-index: 1; border-color: transparent; }
@media (max-width: 760px) { .hero__wa { width: 100%; } .hero__wa .ic-metal__body { justify-content: flex-start; gap: 14px; } }

/* Hero chips: rounded pills that float, each on its own rhythm. The float uses the `translate`
   property so it stacks with the scroll parallax the engine writes to `transform`. */
.hero__chip { border-radius: 999px; padding: 6px 16px 6px 6px; font-weight: 600;
  box-shadow: 0 1px 2px rgb(40 26 14 / .12), 0 10px 22px -8px rgb(40 26 14 / .35); animation: chip-float 5.2s ease-in-out infinite; }
.hero__chip .ic-chip-icon { border-radius: 50%; }
.hero__chip--a { animation-duration: 5.6s; }
.hero__chip--b { animation-duration: 4.8s; animation-delay: -1.6s; }
.hero__chip--c { animation-duration: 6.2s; animation-delay: -3.1s; }
@keyframes chip-float {
  0%, 100% { translate: 0 0; rotate: -1.5deg; }
  50% { translate: 0 -12px; rotate: 1.5deg; }
}

/* The arrow draws itself in, then keeps nudging toward "See my work". The nudge is on the inner group,
   so it follows the arrow's own direction (right on laptop, down on phone where the svg is rotated). */
.hero__arrow { overflow: visible; }
.hero__arrow-shaft, .hero__arrow-head { stroke-dasharray: 1; stroke-dashoffset: 1; animation: arrow-draw .7s cubic-bezier(.65, 0, .35, 1) .35s forwards; }
.hero__arrow-head { animation-delay: .95s; animation-duration: .3s; }
.hero__arrow-g { transform-box: view-box; animation: arrow-nudge 1.4s cubic-bezier(.45, 0, .2, 1) 1.4s infinite; }
@keyframes arrow-draw { to { stroke-dashoffset: 0; } }
@keyframes arrow-nudge {
  0%, 100% { transform: translate(0, 0); }
  45% { transform: translate(12px, -3px); }
  60% { transform: translate(9px, -2px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__chip, .hero__arrow-g { animation: none; }
  .hero__arrow-shaft, .hero__arrow-head { animation: none; stroke-dashoffset: 0; }
}

/* Shared footer (chrome.css) slides over the reviews like the other sheets (2026-10-24) */
.lp .ch-foot { margin-top: -40px; }
@media (max-width: 760px) { .lp .ch-foot { margin-top: -28px; } }