/* ============================================================
   AVAD SHAMAR CREATIVE - homepage, Round 4 (2026-09-14)
   "Vision, Engineered." Luxury cream + warm charcoal + future glass.

   Loaded after css/main.css and ONLY on index.html. main.css owns the
   tokens (rethemed warm on the same day), the header, the announce
   bar, the mobile menu and the footer. This file owns everything
   between them.

   Two rules carry the page:
   1. ONE LIGHT, TOP-LEFT. Every lit arc is brightest at the top-left
      of a radius; every shadow drops down-right; the page bloom sits
      at the top-left corner. Glass lit from nowhere is a texture.
   2. RHYTHM BY POLARITY. Dark hero -> CREAM premise -> dark rail ->
      raised work -> charcoal method (no glass at all) -> dark founder
      -> CREAM close. The founder's most repeated note across four
      rounds was that nothing surprised her; the cream bands are the
      surprise, and they are what stops the page reading "too dark".
   ============================================================ */

:root {
  --hp-shell:1240px;
  --hp-gutter:clamp(20px, 5vw, 72px);
  --hp-sec:clamp(96px, 11vw, 168px);

  --cream:#F4EFE5;
  --cream-body:#DDD5C7;
  --cream-mute:#AFA69A;
  --on-cream:#191512;
  --on-cream-mute:#6B625A;          /* 5.2:1 on cream */
  --on-cream-hair:rgba(25,21,18,0.14);
  --on-cream-hair-lit:rgba(25,21,18,0.36);

  --brass:#C9A227;
  --brass-soft:#E0C35F;

  --glass-fill:rgba(244,239,229,0.062);
  --glass-fill-hi:rgba(244,239,229,0.10);
  --glass-edge:rgba(244,239,229,0.16);
  --glass-lit:rgba(255,250,240,0.34);

  --e-raised:0 24px 60px -18px rgba(10,6,3,0.62);
  --e-float:0 48px 110px -28px rgba(10,6,3,0.78);

  --font-voice:'Bodoni Moda', Georgia, 'Times New Roman', serif;

  --t-cine:1100ms;
  --ease-out:cubic-bezier(.16,1,.3,1);   /* brand ease (DESIGN.md), used for reveals */
  --ease-ui:cubic-bezier(.23,1,.32,1);   /* strong ease-out for pressed/hovered UI */
  --t-press:160ms;
}

/* ---------- Page atmosphere ----------
   Something worth refracting. Warm, monochrome, one light. NOT a
   saturated mesh (Round 2). Fixed, so the glass has a moving ground
   to catch as the page scrolls past it. */
.hp-atmos {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(56vw 44vw at 8% -10%,  rgba(232,204,120,0.22), transparent 62%),
    radial-gradient(42vw 36vw at 0% 12%,   rgba(255,243,220,0.11), transparent 64%),
    radial-gradient(76vw 64vw at 96% 28%,  rgba(104,74,44,0.42),  transparent 66%),
    radial-gradient(60vw 50vw at 40% 104%, rgba(201,162,39,0.10), transparent 62%);
}
.hp-atmos::after {
  content:""; position:absolute; inset:0; opacity:0.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.home .announce, .home .header, .home main, .home .footer { position:relative; z-index:1; }
.home .header { position:sticky; }
/* The drawer and the sticky bar keep main.css's own stacking (90 and 80);
   flattening them to z-index 1 put the drawer BEHIND the page (2026-09-14). */
.home .mobile-menu { position:fixed; z-index:90; }
.home .sticky-bar { position:fixed; z-index:80; }

/* Header reads as a lit strip rather than a bar: hairline below, warm scrim */
.home .header.is-scrolled { background:rgba(25,21,18,0.68); box-shadow:0 1px 0 rgba(244,239,229,0.10), 0 18px 40px -24px rgba(10,6,3,0.7); }
.home .header__cta.btn--navy { background:var(--cream); color:var(--on-cream); border-color:transparent; font-weight:600; }
.home .header__cta.btn--navy:hover { background:#FFFAF0; box-shadow:0 8px 24px -10px rgba(244,239,229,0.45); }
.home .announce { background:rgba(34,29,25,0.9); }

/* ---------- Layout primitives ---------- */
.hp-shell { max-width:var(--hp-shell); margin:0 auto; padding:0 var(--hp-gutter); }
.hp-sec { padding:var(--hp-sec) 0; position:relative; }

/* ---------- Type ---------- */
.hp-d-xl, .hp-d-lg, .hp-d-md {
  font-family:var(--font-serif);
  font-weight:500;
  color:var(--ink);
  text-wrap:balance;
}
.hp-d-xl { font-size:clamp(3.25rem, 1.2rem + 4.4vw, 5.25rem); line-height:0.98; letter-spacing:-0.036em; }
.hp-d-lg { font-size:clamp(2.5rem, 1.6rem + 3.9vw, 5.25rem);  line-height:1.0;  letter-spacing:-0.034em; }
.hp-d-md { font-size:clamp(2rem, 1.4rem + 2.6vw, 3.75rem);    line-height:1.05; letter-spacing:-0.028em; }

/* THE VOICE: one italic word per screen. Cream on dark, ink on cream;
   never brass (2.1:1 on cream, and a metal is not a highlighter). */
.v {
  font-family:var(--font-voice);
  font-style:italic;
  font-weight:400;
  font-size:1.1em;
  letter-spacing:-0.015em;
  color:inherit;
  font-variation-settings:"opsz" 96;
}
.hp-lead { font-size:clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height:1.55; color:var(--cream-body); max-width:36em; text-wrap:pretty; }
.hp-marker { display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-6); }
.hp-marker::before { content:""; width:28px; height:1px; background:var(--brass); flex:none; }
.hp-marker .mono { color:var(--cream-mute); }

.hp-chip {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--cream); padding:0 16px; min-height:36px;
  border:1px solid var(--glass-edge); border-radius:var(--r-pill);
  background:var(--glass-fill);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.hp-chip::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--brass); box-shadow:0 0 12px 2px rgba(201,162,39,0.55); }

/* ---------- Buttons ---------- */
.hp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-sans); font-size:0.9375rem; font-weight:600; letter-spacing:0.005em; line-height:1;
  min-height:54px; padding:0 30px; border-radius:var(--r-pill);
  text-decoration:none; white-space:nowrap; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform 220ms var(--ease-ui), translate 240ms var(--ease-ui), scale var(--t-press) var(--ease-ui),
             box-shadow 220ms var(--ease-ui), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
/* Press feedback: the button heard you. Scale, not a nudge, and quick. */
.hp-btn:active { scale:0.97; }
.hp-btn .hp-arw { display:inline-block; transition:transform 220ms var(--ease-ui); }
/* Sheen sweep: a lit edge crosses the button once on hover. Asymmetric on
   purpose: it travels on enter and resets instantly (out of sight) on leave,
   so it never sweeps backwards across the label. */
.hp-btn::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,250,240,0.55) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:none;
  pointer-events:none;
}

.hp-btn--cream { background:var(--cream); color:var(--on-cream); border:1px solid transparent; box-shadow:0 1px 0 rgba(255,250,240,0.6) inset, 0 10px 30px -12px rgba(244,239,229,0.35); }
.hp-btn--cream:hover { box-shadow:0 1px 0 rgba(255,250,240,0.6) inset, 0 18px 40px -14px rgba(244,239,229,0.5); }
.hp-btn--ghost { background:transparent; color:var(--cream); border:1px solid rgba(244,239,229,0.34); }
.hp-btn--ghost:hover { background:var(--glass-fill-hi); border-color:rgba(244,239,229,0.6); }
.hp-btn--ghost::after { background:linear-gradient(105deg, transparent 30%, rgba(255,250,240,0.16) 50%, transparent 70%); }

.hp-light .hp-btn--ink { background:var(--on-cream); color:var(--cream); border:1px solid transparent; box-shadow:0 18px 40px -18px rgba(25,21,18,0.6); }
.hp-light .hp-btn--ink:hover { box-shadow:0 26px 50px -18px rgba(25,21,18,0.7); }
.hp-light .hp-btn--ink::after { background:linear-gradient(105deg, transparent 30%, rgba(255,250,240,0.22) 50%, transparent 70%); }
.hp-light .hp-btn--ghost-ink { background:transparent; color:var(--on-cream); border:1px solid var(--on-cream-hair-lit); }
.hp-light .hp-btn--ghost-ink:hover { background:rgba(25,21,18,0.06); border-color:var(--on-cream); }
.hp-light .hp-btn--ghost-ink::after { background:linear-gradient(105deg, transparent 30%, rgba(25,21,18,0.08) 50%, transparent 70%); }

.hp-ctas { display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; }

/* Text links: resting underline is the affordance (phones have no hover) */
.hp-tlink {
  color:var(--cream); font-weight:600; font-size:0.9375rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  background-image:linear-gradient(currentColor, currentColor); background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:3px; position:relative;
  transition:color var(--t-ui) var(--ease-out);
}
.hp-tlink .hp-arw { display:inline-block; transition:transform 220ms var(--ease-ui); }
.hp-tlink:hover { color:var(--brass-soft); }
.hp-tlink::after { content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:44px; }
.hp-light .hp-tlink { color:var(--on-cream); }
.hp-light .hp-tlink:hover { color:var(--on-cream-mute); }
.hp-links { display:flex; gap:var(--s-6); flex-wrap:wrap; }

/* ---------- Future glass ----------
   Warm tint (never white), lit top arc from the top-left, grain
   inside, warm shadow. Only ever on a ground with something to refract. */
.glass.hp-g, .hp-g {
  position:relative; overflow:hidden;
  background:var(--glass-fill);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(34px) saturate(150%) brightness(1.04);
  backdrop-filter:blur(34px) saturate(150%) brightness(1.04);
  box-shadow:var(--e-raised), inset 0 1px 0 var(--glass-lit);
}
.hp-g::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:2; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,250,240,0.72) 0%, rgba(255,250,240,0.30) 15%, rgba(255,250,240,0.06) 37%, rgba(255,250,240,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.hp-g::after {
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0.035; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:190px 190px;
}
.hp-g > * { position:relative; z-index:3; }
/* interior wash, anchored top-left so it agrees with the arc */
.hp-g .hp-wash { position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(125% 85% at 2% -8%, rgba(255,246,230,0.20), transparent 60%),
             radial-gradient(95% 75% at 98% 110%, rgba(201,162,39,0.12), transparent 64%); }
/* pointer-tracked sheen (desktop only; set by js as --mx/--my) */
.hp-g .hp-sheen { position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(260px 260px at var(--mx, 50%) var(--my, 50%), rgba(255,250,240,0.14), transparent 60%);
  transition:opacity var(--t-ui) var(--ease-out); }
.hp-g:hover .hp-sheen { opacity:1; }

/* ============================================================
   00 · HERO - dense and layered. Type left, a glass plate right
   with the work inside it and a figures tile overlapping its corner.
   ============================================================ */
.hp-hero { position:relative; overflow:clip; padding:clamp(56px, 7vw, 104px) 0 clamp(80px, 9vw, 136px); min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; }
.hp-hero__grid { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(40px, 6vw, 96px); align-items:center; width:100%; }
.hp-kicker { display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-bottom:clamp(28px, 3.4vw, 44px); }
.hp-kicker__meta { display:inline-flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--cream-mute); }
.hp-kicker__meta::before { content:""; width:28px; height:1px; background:var(--brass); flex:none; }
.hp-hero .hp-d-xl { max-width:none; margin-bottom:clamp(24px, 2.8vw, 36px); }
.hp-hero .hp-lead { margin-bottom:clamp(32px, 3.6vw, 48px); max-width:30em; }
.hp-hero .hp-ctas { margin-bottom:clamp(40px, 4.6vw, 64px); }
.hp-trust { display:flex; gap:var(--s-4); align-items:flex-start; max-width:480px; color:var(--cream-mute); }
.hp-trust::before { content:""; flex:none; width:40px; height:1px; background:var(--brass); margin-top:0.7em; }

.hp-hero__stage { position:relative; justify-self:end; width:100%; max-width:520px; padding-bottom:64px; }
.hp-plate { aspect-ratio:4 / 5; width:100%; margin:0; border-radius:var(--r-xl); box-shadow:var(--e-float), inset 0 1px 0 var(--glass-lit); }
.hp-plate__img { position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden; }
.hp-plate__img img, .hp-plate__img video { display:block; width:100%; height:118%; object-fit:cover; object-position:0% 46%; margin-top:-9%; transform:scale(1.02); }
.hp-plate__img::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(25,21,18,0.55) 0%, rgba(25,21,18,0) 30%), linear-gradient(118deg, rgba(255,246,230,0.10), transparent 40%); }

.hp-figs {
  position:absolute; left:calc(-1 * clamp(24px, 4vw, 72px)); bottom:0; z-index:4;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-radius:var(--r-md); background:rgba(43,38,34,0.72);
  box-shadow:var(--e-float), inset 0 1px 0 var(--glass-lit);
  min-width:min(360px, 100%);
}
.hp-fig { padding:clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px); }
.hp-fig + .hp-fig { border-left:1px solid var(--glass-edge); }
.hp-num { font-family:var(--font-serif); font-weight:600; font-size:clamp(2.25rem, 2rem + 1.4vw, 3.25rem); line-height:1; letter-spacing:-0.03em; color:var(--cream); font-variant-numeric:tabular-nums; }
.hp-num sup { font-size:0.55em; vertical-align:top; margin-left:2px; color:var(--brass); }
.hp-fig__l { margin-top:8px; font-size:0.8125rem; line-height:1.4; color:var(--cream-mute); }


/* Hero entrance (load): words rise through a mask, plate settles, tile lifts */
.js .hp-hero .hp-plate { opacity:0; transform:translateY(28px) scale(1.04); transition:opacity var(--t-cine) var(--ease-out) 220ms, transform var(--t-cine) var(--ease-out) 220ms; }
.js .hp-hero .hp-figs { opacity:0; transform:translateY(24px); transition:opacity 800ms var(--ease-out) 640ms, transform 800ms var(--ease-out) 640ms; }
.js.is-loaded .hp-hero .hp-plate, .js.is-loaded .hp-hero .hp-figs { opacity:1; transform:none; }

/* ============================================================
   Word masks + reveals (shared by every section)
   ============================================================ */
[data-words] .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:0.08em; margin-bottom:-0.08em; }
[data-words] .wi { display:inline-block; }
.js [data-words].is-split .wi { transform:translateY(112%); opacity:0; transition:transform 900ms var(--ease-out), opacity 500ms var(--ease-out); transition-delay:calc(var(--wi, 0) * 42ms); }
.js [data-words].is-split.in .wi { transform:none; opacity:1; }

.js .rv { opacity:0; transform:translateY(20px); filter:blur(4px); transition:opacity 700ms var(--ease-out), transform 860ms var(--ease-out), filter 600ms var(--ease-out); transition-delay:calc(var(--d, 0) * 1ms); }
.js .rv.in { opacity:1; transform:none; filter:none; }

/* ============================================================
   Cream bands - the light. Ink type, warm hairlines, warm grain.
   ============================================================ */
.hp-light { background:var(--cream); color:var(--on-cream); position:relative; isolation:isolate; }
.hp-light::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
.hp-light::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 6% 0%, rgba(255,255,255,0.55), transparent 60%), radial-gradient(50% 44% at 100% 100%, rgba(201,162,39,0.10), transparent 60%); }
.hp-light > * { position:relative; z-index:1; }
.hp-light .hp-d-xl, .hp-light .hp-d-lg, .hp-light .hp-d-md, .hp-light h3 { color:var(--on-cream); }
.hp-light .hp-lead, .hp-light p { color:var(--on-cream); }
.hp-light .hp-marker .mono, .hp-light .mono { color:var(--on-cream-mute); }
.hp-light .small { color:var(--on-cream-mute); }

/* ============================================================
   01 · PREMISE (cream) - one sentence at signature scale, then
   the four gaps on a hairline grid.
   ============================================================ */
.hp-premise { padding:var(--hp-sec) 0; }
.hp-premise__grid { display:grid; grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); gap:clamp(32px, 5vw, 80px); align-items:end; }
.hp-premise .hp-d-lg { max-width:14ch; }
.hp-premise__note { padding-bottom:0.4em; }
.hp-premise__note p { font-size:1.0625rem; line-height:1.6; color:var(--on-cream-mute); max-width:32em; }
.hp-premise__note p + p { margin-top:1em; }
.hp-gaps { display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(24px, 3vw, 40px); margin-top:clamp(56px, 7vw, 96px); border-top:1px solid var(--on-cream-hair-lit); }
.hp-gaps li { padding-top:clamp(22px, 2.6vw, 32px); position:relative; }
.hp-gaps li::before { content:""; position:absolute; top:-1px; left:0; width:40px; height:2px; background:var(--on-cream); transform:scaleX(0); transform-origin:left center; transition:transform 900ms var(--ease-out) calc(var(--d, 0) * 1ms + 200ms); }
.js .hp-gaps li.in::before, .no-js .hp-gaps li::before { transform:none; }
.hp-gaps__n { display:block; margin-bottom:var(--s-5); }
.hp-gaps h3 { font-family:var(--font-serif); font-weight:500; font-size:clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); line-height:1.2; letter-spacing:-0.015em; margin-bottom:var(--s-3); text-wrap:balance; }
.hp-gaps p { font-size:0.9375rem; line-height:1.55; color:var(--on-cream-mute); }
.hp-premise__close { margin-top:clamp(48px, 6vw, 80px); max-width:34em; font-size:clamp(1.125rem, 1.05rem + 0.5vw, 1.4375rem); line-height:1.45; font-family:var(--font-serif); font-weight:500; letter-spacing:-0.012em; }

/* ============================================================
   02 · CAPABILITIES - a full-bleed rail. Five stations on one
   brass datum, staggered and overlapping. Eight services on one
   journey, not eight cards.
   ============================================================ */
.hp-caps { padding:var(--hp-sec) 0; overflow:clip; }
.hp-caps__head { display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:clamp(32px, 5vw, 80px); align-items:end; margin-bottom:clamp(56px, 7vw, 96px); }
.hp-caps__head .hp-d-md { max-width:12ch; }
.hp-caps__head .hp-lead { padding-bottom:0.3em; }
/* One focused message per head: the lead sits under the headline on a
   measure, instead of floating in a right-hand column (three sections in a
   row used that split, which is what made the page read as one template). */
.hp-caps__head.hp-stack, .hp-sec-head.hp-stack { display:flex; flex-direction:column; align-items:flex-start; gap:clamp(20px, 2.4vw, 28px); }
.hp-stack .hp-lead { padding-bottom:0; max-width:40em; }
.hp-stack .hp-d-md { max-width:18ch; }

.hp-rail-wrap { position:relative; padding:8px 0 24px; }

.hp-rail { max-width:var(--hp-shell); margin:0 auto; padding:0 var(--hp-gutter); display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0; position:relative; }
.hp-stn { position:relative; padding-top:0; margin-top:calc(var(--lift, 0) * 1px); }
.hp-stn:nth-child(1) { --lift:0; }
.hp-stn:nth-child(2) { --lift:36; }
.hp-stn:nth-child(3) { --lift:8; }
.hp-stn:nth-child(4) { --lift:44; }
.hp-stn:nth-child(5) { --lift:16; }
.hp-stn__card {
  display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--cream);
  min-height:280px; padding:clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 28px);
  margin-right:-18px; border-radius:var(--r-md);
  transition:transform 320ms var(--ease-ui), scale var(--t-press) var(--ease-ui), box-shadow 320ms var(--ease-ui), background-color 200ms ease, border-color 200ms ease;
  z-index:calc(6 - var(--z, 0));
}
.hp-stn:nth-child(odd) .hp-stn__card { --z:1; }
.hp-stn__card:hover { box-shadow:var(--e-float), inset 0 1px 0 var(--glass-lit); background:var(--glass-fill-hi); border-color:rgba(244,239,229,0.28); z-index:9; }
.hp-stn__card:active { scale:0.985; }
.hp-stn__name { font-family:var(--font-serif); font-weight:600; font-size:clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing:-0.015em; line-height:1.1; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.hp-stn__name .hp-arw { color:var(--brass); font-weight:400; transition:transform 220ms var(--ease-ui); }
.hp-stn__copy { color:var(--cream-body); font-size:0.9375rem; line-height:1.5; flex:1; }
.hp-stn__svcs { border-top:1px solid var(--glass-edge); padding-top:12px; display:flex; flex-direction:column; gap:6px; }
.hp-stn__svcs li { font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream-mute); }
.hp-stn__svcs li { display:flex; align-items:center; gap:8px; }
.hp-stn__svcs li::before { content:""; flex:none; width:8px; height:1px; background:var(--brass); }

.hp-caps__foot { display:flex; justify-content:space-between; align-items:center; gap:var(--s-7); flex-wrap:wrap; margin-top:clamp(40px, 5vw, 64px); padding-top:var(--s-6); border-top:1px solid var(--border-light); }
.hp-caps__foot p { color:var(--cream-mute); max-width:44ch; font-size:0.9375rem; }

/* ============================================================
   03 · SELECTED WORK - raised band. Big glass-framed motion panels
   alternating with copy; the device holds still, the screen scrolls.
   ============================================================ */
.hp-work { background:var(--navy-900); padding:var(--hp-sec) 0; position:relative; }
.hp-work::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0.30; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:220px 220px; }
.hp-work > * { position:relative; }
.hp-sec-head { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(32px, 5vw, 80px); align-items:end; margin-bottom:clamp(56px, 7vw, 96px); }
.hp-sec-head .hp-d-md { max-width:14ch; }
.hp-work__rows { display:flex; flex-direction:column; gap:clamp(64px, 8vw, 120px); }
.hp-case { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(32px, 5vw, 80px); align-items:center; }
.hp-case--flip { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); }
.hp-case--flip .hp-case__visual { order:2; }
.hp-case__visual { aspect-ratio:3 / 2; border-radius:var(--r-lg); padding:0; box-shadow:var(--e-float), inset 0 1px 0 var(--glass-lit); }
.hp-case__visual video, .hp-case__visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; z-index:0; transform:scale(1.08); }
.hp-case__visual .hp-case__frame { position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(244,239,229,0.10); background:linear-gradient(118deg, rgba(255,246,230,0.08), transparent 42%); }
.hp-case__copy .mono { display:block; margin-bottom:var(--s-4); color:var(--cream-mute); }
.hp-case__copy h3 { font-family:var(--font-serif); font-weight:500; font-size:clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); line-height:1.12; letter-spacing:-0.02em; color:var(--cream); margin-bottom:var(--s-6); text-wrap:balance; }
.hp-case__lines div { display:grid; grid-template-columns:72px 1fr; gap:var(--s-4); padding:14px 0; border-top:1px solid var(--border-light); }
.hp-case__lines div:last-child { border-bottom:1px solid var(--border-light); }
.hp-case__lines dt { padding-top:3px; }
.hp-case__lines dd { color:var(--cream-body); font-size:0.9375rem; line-height:1.55; }
.hp-case__attr { color:var(--cream-mute); margin:var(--s-4) 0 var(--s-5); }
/* The third case breaks the zigzag: a wide panoramic panel, copy set in
   three columns under it. Two alternating rows then a change of composition. */
.hp-case--wide { grid-template-columns:minmax(0, 1fr); gap:clamp(28px, 3.6vw, 48px); }
.hp-case--wide .hp-case__visual { aspect-ratio:21 / 9; }
.hp-case--wide .hp-case__visual video { object-position:50% 58%; }
.hp-case--wide .hp-case__copy { display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(24px, 4vw, 64px); align-items:start; }
.hp-case--wide .hp-case__lede h3 { margin-bottom:0; }
.hp-case--wide .hp-case__lines { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 2.4vw, 32px); }
.hp-case--wide .hp-case__lines div { grid-template-columns:minmax(0, 1fr); align-content:start; gap:10px; padding:14px 0 0; border-bottom:0; }
.hp-case--wide .hp-case__foot { grid-column:2; display:flex; justify-content:space-between; align-items:center; gap:var(--s-5); flex-wrap:wrap; }
.hp-case--wide .hp-case__attr { margin:0; }
.hp-work__ctas { display:flex; align-items:center; gap:var(--s-7); flex-wrap:wrap; margin-top:clamp(56px, 7vw, 96px); padding-top:var(--s-7); border-top:1px solid var(--border-light); }
.hp-work__ctas p { color:var(--cream-mute); }

/* ============================================================
   04 · METHOD - the charcoal she named. Narrow, offset right,
   numerals on a vertical brass datum that fills as you scroll.
   NO glass here, on purpose: the material has to be withheld
   somewhere to be worth anything anywhere.
   ============================================================ */
.hp-method { background:var(--navy-800); padding:var(--hp-sec) 0; position:relative; }
.hp-method::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0.30; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:220px 220px; }
.hp-method::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 40% at 0% 0%, rgba(255,243,220,0.06), transparent 60%); }
.hp-method > * { position:relative; z-index:1; }
.hp-method__grid { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(48px, 7vw, 120px); align-items:start; }
.hp-method__head { position:sticky; top:calc(var(--header-h-condensed) + 40px); }
.hp-method__head .hp-d-md { max-width:11ch; margin-bottom:var(--s-5); }
.hp-outcomes { margin-top:clamp(40px, 5vw, 64px); }
.hp-outcomes h3 { margin-bottom:var(--s-4); color:var(--cream-mute); }
.hp-outcomes li { padding:14px 0; border-top:1px solid var(--border-light); font-size:0.9375rem; line-height:1.5; color:var(--cream-body); max-width:40ch; }
.hp-outcomes li:last-child { border-bottom:1px solid var(--border-light); }

.hp-steps { position:relative; padding-left:clamp(40px, 5vw, 72px); display:flex; flex-direction:column; gap:0; }
.hp-steps__track { position:absolute; left:6px; top:12px; bottom:12px; width:1px; background:var(--border-dark); }
.hp-steps__fill { position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(180deg, var(--brass-soft), var(--brass)); box-shadow:0 0 12px rgba(201,162,39,0.45); transform:scaleY(0); transform-origin:top center; }
.hp-step { position:relative; padding:clamp(24px, 3vw, 36px) 0; border-bottom:1px solid var(--border-light); }
.hp-step:first-child { padding-top:0; }
.hp-step::before { content:""; position:absolute; left:calc(-1 * clamp(40px, 5vw, 72px)); top:calc(clamp(24px, 3vw, 36px) + 0.55em); width:13px; height:13px; border-radius:50%; background:var(--navy-800); border:1px solid var(--cream-mute); transition:background 400ms var(--ease-out), border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.hp-step:first-child::before { top:0.55em; }
.hp-step.is-lit::before { background:var(--brass); border-color:var(--brass); box-shadow:0 0 14px 2px rgba(201,162,39,0.5); }
.hp-step__n { font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.16em; color:var(--cream-mute); margin-bottom:var(--s-3); transition:color 400ms var(--ease-out); }
.hp-step.is-lit .hp-step__n { color:var(--brass-soft); }
.hp-step h3 { font-family:var(--font-serif); font-weight:500; font-size:clamp(1.5rem, 1.3rem + 1vw, 2.125rem); letter-spacing:-0.02em; line-height:1.1; color:var(--cream); margin-bottom:var(--s-3); }
.hp-step p { color:var(--cream-body); max-width:44ch; line-height:1.6; }
.hp-step__cta { padding-top:clamp(28px, 3.6vw, 44px); display:flex; flex-direction:column; gap:var(--s-5); align-items:flex-start; }
.hp-step__cta p { color:var(--cream-mute); max-width:44ch; }

/* ============================================================
   05 · FOUNDER - the glass returns at its largest. Portrait plate
   left, signature-scale line right, then a slim BrandMEE strip.
   ============================================================ */
.hp-founder { padding:var(--hp-sec) 0 clamp(72px, 8vw, 120px); overflow:clip; }
.hp-founder__grid { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(48px, 7vw, 120px); align-items:center; }
.hp-portrait { aspect-ratio:4 / 5; max-width:440px; width:100%; margin:0; border-radius:var(--r-xl); display:flex; flex-direction:column; justify-content:space-between; padding:clamp(28px, 3.4vw, 44px); box-shadow:var(--e-float), inset 0 1px 0 var(--glass-lit); }
.hp-portrait__mark { width:52px; height:auto; opacity:0.9; }
.hp-portrait__me { font-family:var(--font-serif); font-weight:600; font-size:clamp(5rem, 4rem + 6vw, 9rem); line-height:0.9; letter-spacing:-0.05em; color:var(--cream); align-self:center; margin:auto 0; }
.hp-portrait__me span { color:var(--brass); }
.hp-portrait__cap p { margin:0; }
.hp-portrait__name { font-family:var(--font-serif); font-weight:500; font-size:1.375rem; letter-spacing:-0.01em; color:var(--cream); }
.hp-portrait__role { margin-top:6px; }
.hp-founder__copy .hp-d-md { max-width:16ch; margin-bottom:var(--s-6); }
.hp-founder__copy > p { color:var(--cream-body); max-width:56ch; line-height:1.65; margin-bottom:var(--s-6); }

.hp-brandmee { margin-top:clamp(64px, 8vw, 112px); padding:clamp(24px, 3vw, 36px) 0; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); display:grid; grid-template-columns:auto minmax(0, 1fr); gap:clamp(24px, 5vw, 80px); align-items:center; }
.hp-brandmee__lockup { display:flex; align-items:center; gap:var(--s-3); flex-wrap:nowrap; white-space:nowrap; font-family:var(--font-serif); font-weight:500; font-size:clamp(1.125rem, 1rem + 0.6vw, 1.5rem); letter-spacing:-0.015em; color:var(--cream); }
.hp-brandmee__old { color:var(--cream-mute); text-decoration:line-through; text-decoration-color:rgba(175,166,154,0.5); text-decoration-thickness:1px; }
.hp-brandmee__lockup .hp-arw { color:var(--brass); font-family:var(--font-sans); font-weight:400; }
.hp-brandmee p:last-child { color:var(--cream-body); font-size:0.9375rem; line-height:1.55; }

/* ============================================================
   06 · CLOSE (cream) - one enormous line, centred, calm.
   ============================================================ */
.hp-cta { padding:var(--hp-sec) 0; text-align:center; }
.hp-cta .hp-marker { justify-content:center; }
.hp-cta .hp-marker::after { content:""; width:28px; height:1px; background:var(--brass); flex:none; }
.hp-cta .hp-d-lg { max-width:14ch; margin:0 auto clamp(24px, 3vw, 40px); }
.hp-cta .hp-lead { margin:0 auto clamp(36px, 4.4vw, 56px); max-width:34em; color:var(--on-cream-mute); }
.hp-cta .hp-ctas { justify-content:center; margin-bottom:var(--s-6); }
.hp-cta__micro { color:var(--on-cream-mute); }

/* ============================================================
   Responsive
   ============================================================ */
/* Tablet landscape (961 to 1180): five staggered cards no longer fit, so the
   rail becomes a wrapping grid of equal cards with the node sitting on each
   card; the brass datum is withheld until the desktop rail returns. */
@media (max-width:1180px) and (min-width:961px) {
  .hp-rail { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-5); }
  .hp-stn { margin-top:0 !important; }
  .hp-stn__card { margin-right:0; min-height:0; }
  .hp-stn:nth-child(4), .hp-stn:nth-child(5) { grid-column:span 1; }
  .hp-premise__grid, .hp-caps__head, .hp-sec-head { gap:clamp(28px, 4vw, 56px); }
}
@media (max-width:1100px) {
  .hp-gaps { grid-template-columns:1fr 1fr; row-gap:var(--s-6); }
  .hp-gaps li:nth-child(-n+2)::before { display:block; }
}
@media (max-width:960px) {
  .hp-hero { min-height:0; }
  .hp-hero__grid { grid-template-columns:1fr; }
  .hp-hero__stage { justify-self:start; max-width:560px; padding-bottom:56px; }
  .hp-figs { left:auto; right:calc(-1 * clamp(0px, 2vw, 24px)); }
  /* minmax(0,1fr), never bare 1fr: a bare 1fr track sizes to its content's
     min-content width, so one no-wrap button pushed the whole method grid
     to 380px inside a 360px phone (audit, 2026-09-14). */
  .hp-premise__grid, .hp-caps__head, .hp-sec-head, .hp-method__grid, .hp-founder__grid, .hp-brandmee { grid-template-columns:minmax(0, 1fr); }
  .hp-brandmee__lockup { white-space:normal; flex-wrap:wrap; }
  .hp-method__head { position:static; }
  .hp-gaps { grid-template-columns:1fr 1fr; }
  .hp-case, .hp-case--flip { grid-template-columns:minmax(0, 1fr); }
  .hp-case--wide .hp-case__visual { aspect-ratio:3 / 2; }
  .hp-case--wide .hp-case__copy { grid-template-columns:minmax(0, 1fr); gap:var(--s-5); }
  .hp-case--wide .hp-case__lines { grid-template-columns:minmax(0, 1fr); gap:0; }
  .hp-case--wide .hp-case__lines div { padding:14px 0; }
  .hp-case--wide .hp-case__lines div:last-child { border-bottom:1px solid var(--border-light); }
  .hp-case--wide .hp-case__foot { grid-column:auto; flex-direction:column; align-items:flex-start; }
  .hp-case--flip .hp-case__visual { order:0; }
  /* the rail becomes a vertical list */
  .hp-rail-wrap { padding:0; }
  .hp-rail { grid-template-columns:minmax(0, 1fr); gap:var(--s-5); }
  .hp-stn { margin-top:0; }
  .hp-stn__card { margin-right:0; min-height:0; }
}
@media (max-width:720px) {
  :root { --hp-sec:clamp(80px, 18vw, 112px); }
  .hp-d-xl { letter-spacing:-0.03em; }
  .hp-hero { padding-top:40px; }
  .hp-hero .hp-d-xl { max-width:none; }
  .hp-kicker { margin-bottom:24px; }
  .hp-ctas .hp-btn { width:100%; }
  /* long labels may wrap on a phone instead of forcing the page wider */
  .hp-btn { white-space:normal; text-align:center; line-height:1.25; padding-block:14px; min-height:52px; }
  .hp-step__cta .hp-btn { width:100%; }
  .hp-hero__stage { max-width:none; padding-bottom:0; }
  .hp-figs { position:static; margin:16px 0 0; min-width:0; width:100%; }
  .hp-plate { border-radius:var(--r-lg); }
  .hp-gaps { grid-template-columns:minmax(0, 1fr); gap:0; }
  .hp-gaps li { padding:22px 0; border-bottom:1px solid var(--on-cream-hair); }
  .hp-gaps li::before { display:none; }
  .hp-gaps__n { margin-bottom:10px; }
  .hp-caps__foot { flex-direction:column; align-items:flex-start; }
  .hp-links { flex-direction:column; gap:var(--s-4); }
  .hp-case__lines div { grid-template-columns:1fr; gap:6px; }
  .hp-steps { padding-left:40px; }
  .hp-step::before { left:-40px; }
  .hp-portrait { max-width:none; }
  .hp-work__ctas { flex-direction:column; align-items:flex-start; gap:var(--s-5); }
  .home .motion-toggle { bottom:calc(56px + var(--s-3)); }
}

/* ============================================================
   Reduced motion - every effect lands on its DESIGNED end state.
   ============================================================ */
@media (prefers-reduced-motion:reduce) {
  .js .rv, .js [data-words].is-split .wi, .js .hp-hero .hp-plate, .js .hp-hero .hp-figs { opacity:1; transform:none; filter:none; transition:none; }
  .hp-btn::after, .hp-btn:hover .hp-arw, .hp-tlink:hover .hp-arw, .hp-stn__card:hover .hp-arw { transform:none; transition:none; }
  .hp-btn, .hp-stn__card { translate:none !important; }
  .hp-plate__img img, .hp-plate__img video, .hp-case__visual video, .hp-case__visual img { animation:none !important; }
  .hp-gaps li::before { transform:none; transition:none; }
  .hp-steps__fill { transform:none; }
  .hp-g .hp-sheen { display:none; }
}

/* The motion control's show/hide now lives in main.css (site-wide). */

/* Panels that are filled edge to edge by an image or a video have nothing
   to refract; skip the backdrop blur there and keep it for the true glass. */
.hp-plate, .hp-case__visual { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--navy-900); }

/* ============================================================
   Hover-only motion (2026-09-14 polish pass).
   Gated to a real pointer: a tap on a phone fires :hover and leaves it
   stuck, so a card would stay lifted after the finger is gone.
   ============================================================ */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .hp-btn:hover::after { transform:translateX(120%); transition:transform 700ms var(--ease-out); }
  .hp-btn:hover .hp-arw { transform:translateX(5px); }
  .hp-btn--cream:hover, .hp-light .hp-btn--ink:hover, .hp-btn--ghost:hover, .hp-light .hp-btn--ghost-ink:hover { transform:translateY(-2px); }
  .hp-tlink:hover .hp-arw { transform:translateX(4px); }
  .hp-stn__card:hover { transform:translateY(-8px); }
  .hp-stn__card:hover .hp-stn__name .hp-arw { transform:translateX(4px); }
}

/* ============================================================
   Scroll-linked motion, off the main thread (2026-09-14 polish pass).
   Where the browser supports scroll-driven animations the parallax and the
   method datum run as CSS on the compositor, and js/home.js does no
   scroll work at all. Elsewhere js/home.js drives the same transforms.
   Ranges are kept inside each image's overscan so no edge ever shows.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    .hp-plate, .hp-case__visual { view-timeline:--hp-pv block; }
    .hp-plate__img video, .hp-plate__img img {
      animation:hp-plate-drift linear both; animation-timeline:--hp-pv; animation-range:cover;
    }
    .hp-case__visual video, .hp-case__visual img {
      animation:hp-case-drift linear both; animation-timeline:--hp-pv; animation-range:cover;
    }
    .hp-steps { view-timeline:--hp-steps block; }
    .hp-steps__fill {
      animation:hp-fill linear both; animation-timeline:--hp-steps;
      animation-range:cover 38vh cover calc(100% - 62vh);
    }
  }
}
@keyframes hp-plate-drift { from { transform:translate3d(0, -6%, 0) scale(1.02); } to { transform:translate3d(0, 6%, 0) scale(1.02); } }
@keyframes hp-case-drift  { from { transform:translate3d(0, -3%, 0) scale(1.08); } to { transform:translate3d(0, 3%, 0) scale(1.08); } }
@keyframes hp-fill { from { transform:scaleY(0); } to { transform:scaleY(1); } }