/* Emerson North site. Dark private-firm ground, one glass material shared by the 3D mark, nav and buttons. */
:root {
  --ink: #0E1116;
  --ink-2: #131720;
  --ink-3: #1A1F29;
  --rule: rgba(237,235,230,0.12);
  --paper: #EDEBE6;
  --soft: #C9CBD0;
  --mute: #A1A4AB;
  --red: #F05454;
  --red-deep: #8B0000;
  /* Emerson product world, used only inside the Emerson preview */
  --em-bg: #FAF7F2;
  --em-ink: #0F172A;
  --em-teal: #0E9F87;
  --em-mint: #9FE7D2;
  --em-sky: #BFE3F5;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Montserrat, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 6vw, 88px);
  --ease: cubic-bezier(.2,.7,.1,1);
  color-scheme: dark;
}
html { background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
h1, h2, h3 { text-wrap: balance; font-weight: 500; margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }
.wrap { padding-inline: var(--gutter); }
.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.serif { font-family: var(--serif); }

/* ---------- glass: the material of the arrow's clear half ---------- */
.glass {
  --mx: 50%; --my: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.09) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.08), inset 0 0 22px rgba(255,255,255,.05), 0 14px 40px rgba(0,0,0,.35);
}
.glass::before { /* specular highlight that follows the pointer */
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  background: radial-gradient(160px 90px at var(--mx) var(--my), rgba(255,255,255,.34), rgba(255,255,255,0) 70%);
  mix-blend-mode: screen; transition: opacity .3s;
}
.glass::after { /* a light streak crossing the glass, like the refraction lines in the mark */
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 38%; left: -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,244,240,.28) 48%, rgba(255,255,255,.05) 52%, rgba(255,255,255,0));
  transform: skewX(-22deg); transition: left 1.1s var(--ease);
}
.glass:hover::after, .glass.sheen::after { left: 130%; }
.glass-red { background: linear-gradient(160deg, rgba(240,84,84,.55), rgba(139,0,0,.45)); border-color: rgba(255,170,160,.45); }

/* ---------- nav: a floating glass pill ---------- */
.nav { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 24px; border-radius: 999px; }
.nav .brand img { height: 20px; width: auto; }
.nav .links { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.nav .links a { padding: 10px 14px; border-radius: 999px; color: var(--paper); opacity: .82; transition: opacity .2s, background .2s; }
.nav .links a:hover, .nav .links a[aria-current="page"] { opacity: 1; background: rgba(255,255,255,.08); }
.nav .menu { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 24px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; cursor: pointer; will-change: transform; border: 0; font-family: var(--sans); }
.btn svg { width: 14px; height: 14px; }
.btn.light { background: var(--paper); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(0,0,0,.3); }

/* ---------- motion helpers (visible at rest; JS animates from offset) ---------- */
.line { display: block; overflow: hidden; padding-bottom: .08em; }
.line > span { display: block; }
.load .line > span { animation: rise 1.2s var(--ease) both; }
.load .line:nth-child(2) > span { animation-delay: .1s; }
.load .line:nth-child(3) > span { animation-delay: .2s; }
.load .fade { animation: fade 1.3s .45s both; }
.load .fade.late { animation-delay: .65s; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- page header (every page opens with one) ---------- */
.phead { position: relative; min-height: min(88vh, 940px); display: flex; align-items: flex-end; padding: 150px var(--gutter) clamp(56px, 10vh, 120px); overflow: hidden; }
.phead > canvas, .phead > .media { position: absolute; inset: 0; width: 100%; height: 100%; }
.phead .media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 40%; will-change: transform; }
.phead .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,22,.35) 0%, rgba(14,17,22,.45) 55%, var(--ink) 100%); }
.phead .copy { position: relative; z-index: 2; max-width: 1000px; display: flex; flex-direction: column; gap: 26px; }
.phead h1 { font-family: var(--serif); font-size: clamp(50px, 7.4vw, 112px); line-height: .98; letter-spacing: -0.01em; }
.phead .lede { font-size: clamp(17px, 1.45vw, 20px); color: #DAD8D2; max-width: 640px; }
.phead .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.phead .sweep { position: absolute; top: -20%; bottom: -20%; width: 34%; left: -40%; transform: skewX(-18deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,236,230,.16) 50%, rgba(255,255,255,0)); mix-blend-mode: screen; pointer-events: none; z-index: 1; }

/* sections flow into one another: no hard section fills, soft fades at the edges */
.sec { position: relative; padding-block: clamp(90px, 12vw, 170px); }
.sec + .sec { padding-top: clamp(40px, 6vw, 90px); }
.reveal { will-change: transform, opacity, filter; }
.statement { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 52px); line-height: 1.24; }
.statement .w { opacity: .38; }
.statement em { font-style: normal; color: var(--red); }

.ways .way { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; padding-block: 40px; border-top: 1px solid var(--rule); }
.ways .way:last-child { border-bottom: 1px solid var(--rule); }
.way .num { grid-column: span 2; font-size: 13px; letter-spacing: .2em; color: var(--red); }
.way h3 { grid-column: span 4; font-family: var(--serif); font-size: clamp(32px, 3.4vw, 48px); transition: transform .5s var(--ease); }
.way p { grid-column: span 5; color: var(--soft); font-size: 17px; line-height: 1.7; max-width: 52ch; }
.way .go { grid-column: span 1; justify-self: end; color: var(--mute); transition: color .3s, transform .5s var(--ease); }
.way:hover h3 { transform: translateX(12px); }
.way:hover .go { color: var(--red); transform: translateX(6px); }

.rows { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; padding-block: 28px; border-bottom: 1px solid var(--rule); position: relative; }
.row::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -0.3); border-radius: 18px; background: rgba(255,255,255,.04); opacity: 0; transform: scaleY(.6); transition: opacity .4s, transform .5s var(--ease); }
.row:hover::before { opacity: 1; transform: none; }
.row > * { position: relative; }
.row .name { grid-column: span 4; font-family: var(--serif); font-size: clamp(28px, 2.6vw, 38px); transition: transform .45s var(--ease); }
.row:hover .name { transform: translateX(14px); }
.row .what { grid-column: span 6; color: var(--soft); font-size: 16px; }
.row .rel { grid-column: span 2; text-align: right; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

.link { display: inline-flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--red); padding-bottom: 6px; }
.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.h2 { font-family: var(--serif); font-size: clamp(44px, 5vw, 72px); line-height: 1.02; }

/* silk band: fades in and out of the ink so it never reads as a separate block */
.silkband { position: relative; overflow: hidden; }
.silkband > canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.silkband .inner { position: relative; z-index: 1; }

/* pinned cinematic band (tower push-in) */
.cine { position: relative; height: 100vh; min-height: 620px; overflow: hidden; }
.cine .media { position: absolute; inset: 0; }
.cine .media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 40%; will-change: transform; }
.cine .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(14,17,22,.35) 22%, rgba(14,17,22,.5) 70%, var(--ink) 100%); }
.cine .copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(70px, 14vh, 150px); display: flex; flex-direction: column; gap: 22px; max-width: 920px; z-index: 2; }
.cine h2 { font-family: var(--serif); font-size: clamp(46px, 6vw, 92px); line-height: 1; }
.cine p { font-size: clamp(16px, 1.4vw, 19px); color: #E2E0DB; max-width: 58ch; }
.cine .sweep { position: absolute; top: -20%; bottom: -20%; width: 34%; left: -40%; transform: skewX(-18deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,236,230,.16) 50%, rgba(255,255,255,0)); mix-blend-mode: screen; pointer-events: none; z-index: 1; }

/* ---------- Emerson preview: the product's own world ---------- */
.em-world { position: relative; background: var(--ink); }
.em-stage { position: relative; margin-inline: var(--gutter); border-radius: 36px; overflow: hidden; background: var(--em-bg); color: var(--em-ink); padding: clamp(28px, 4vw, 56px); font-family: var(--sans); }
.em-stage::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -35%; height: 80%; background: radial-gradient(50% 60% at 30% 60%, var(--em-mint), transparent 70%), radial-gradient(40% 55% at 75% 45%, var(--em-sky), transparent 70%); opacity: .9; filter: blur(10px); }
.em-stage > * { position: relative; }
.em-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,.8); border-radius: 999px; padding: 10px 10px 10px 18px; box-shadow: 0 10px 30px rgba(15,23,42,.08); flex-wrap: wrap; }
.em-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.em-logo i { width: 26px; height: 26px; border-radius: 6px; background: var(--em-ink); display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 800; font-size: 16px; }
.em-nav nav { display: flex; gap: 22px; font-size: 14px; color: #334155; flex-wrap: wrap; }
.em-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--em-ink); color: #fff; font-size: 14px; font-weight: 600; }
.em-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; padding-block: clamp(40px, 6vw, 80px) 28px; align-items: end; }
.em-hero h2 { grid-column: span 7; font-family: var(--sans); font-weight: 700; font-size: clamp(40px, 5.2vw, 78px); line-height: .98; letter-spacing: -.035em; }
.em-hero h2 span { color: var(--em-teal); }
.em-hero .side { grid-column: span 5; display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.65; color: #334155; }
.em-window { border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(15,23,42,.18); overflow: hidden; transform-origin: 50% 0; }
.em-window .chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #EEF0F3; font-family: var(--mono); font-size: 12px; color: #64748B; }
.em-window .chrome b { width: 10px; height: 10px; border-radius: 50%; background: #E2E8F0; display: inline-block; }
.em-window .chrome span { margin-left: 10px; background: #F1F5F9; padding: 3px 12px; border-radius: 999px; }
.em-window .body { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.em-window .welcome { font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.em-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.em-tile { border: 1px solid #EEF0F3; border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: #1E293B; min-width: 0; }
.em-tile i { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; }
.em-tile i svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; }
.em-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 26px; font-size: 14px; color: #475569; }

/* ---------- misc blocks ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { border-radius: 26px; padding: 34px 30px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card h3 { font-family: var(--serif); font-size: 32px; }
.card p { color: var(--soft); font-size: 16px; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.compare .col { border-radius: 26px; padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; }
.compare ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.compare li { display: flex; gap: 14px; font-size: 16px; color: var(--soft); }
.compare li b { color: var(--paper); font-weight: 600; min-width: 1.2em; }
.muted-col { border: 1px solid var(--rule); }
.founder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: center; }
.founder .photo { grid-column: span 5; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, #E9E6E0, #CFCAC1); aspect-ratio: 1 / 1; max-width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.founder .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.founder .bio { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 20px; }
.timeline { display: flex; flex-direction: column; }
.timeline .t { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-block: 26px; border-top: 1px solid var(--rule); align-items: baseline; }
.timeline .t:last-child { border-bottom: 1px solid var(--rule); }
.timeline .yr { grid-column: span 3; font-family: var(--serif); font-size: 34px; color: var(--paper); }
.timeline .ev { grid-column: span 9; color: var(--soft); font-size: 17px; }
.ph { color: #E7B4B0; font-family: var(--mono); font-size: .9em; }
.form { border-radius: 30px; padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.form .full { grid-column: 1 / -1; }
.form input, .form textarea, .form select { font: 16px var(--sans); color: var(--paper); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 14px 16px; min-height: 48px; box-sizing: border-box; width: 100%; }
.form select option { color: #111; }
.form textarea { min-height: 140px; resize: vertical; }
.note { font-size: 14px; color: var(--mute); }

footer.foot { padding: clamp(80px, 10vw, 140px) var(--gutter) 40px; display: flex; flex-direction: column; gap: 80px; }
footer.foot .top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
footer.foot .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; font-size: 14px; }
footer.foot .cols div { display: flex; flex-direction: column; gap: 10px; color: var(--mute); }
footer.foot .cols b { color: var(--paper); font-weight: 600; }
footer.foot .legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 24px; font-size: 13px; color: #8E9097; }
.sel { user-select: all; }

@media (max-width: 900px) {
  .nav .links a:not(.btn) { display: none; }
  .nav .menu { display: inline-flex; }
  .grid12 > *, .way > *, .row > *, .timeline .t > *, .founder > *, .em-hero > * { grid-column: 1 / -1 !important; }
  .way, .row, .timeline .t { row-gap: 8px; }
  .row .rel, .way .go { text-align: left; justify-self: start; }
  .cards3, .compare, .form, footer.foot .cols { grid-template-columns: minmax(0, 1fr); }
  .em-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-nav nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .load .line > span, .load .fade { animation: none; }
  .statement .w { opacity: 1; }
  .glass::after { display: none; }
}
@media (max-width: 900px) {
  .nav.open { border-radius: 28px; flex-wrap: wrap; }
  .nav.open .links { order: 3; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 8px; }
  .nav.open .links a:not(.btn) { display: block; }
}
.link svg, .btn svg, .em-btn svg, .go svg { width: 14px; height: 14px; flex: none; }
.go svg { width: 22px; height: 22px; }
.em-btn { white-space: nowrap; gap: 10px; }
@media (max-width: 900px) {
  .nav .links .btn { display: none; }
  .nav.open .links .btn { display: inline-flex; }
  .phead { padding-top: 120px; }
}

/* ================= v2 ================= */
/* glass glow only where the pointer actually is: buttons and cards on hover, never the nav */
.glass::before { opacity: 0; }
.btn.glass:hover::before, .card.glass:hover::before, .history-teaser:hover::before, .form.glass:hover::before { opacity: 1; }

/* nav: wordmark, bounce closed on scroll down, reopen on scroll up, dark glass over light */
.navwrap { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 32px)); pointer-events: none; }
.nav { position: relative; top: auto; left: auto; transform: none; width: 100%; pointer-events: auto; transition: width .75s cubic-bezier(.34,1.56,.64,1), background .4s, border-color .4s, padding .5s; padding: 10px 10px 10px 26px; }
.nav .brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: .16em; color: var(--paper); white-space: nowrap; line-height: 1; }
.nav .brand .mark { width: 30px; height: 29px; flex: none; transform: translateY(-2px); }
.nav .links { transition: opacity .35s, transform .5s var(--ease); }
.nav.compact { width: 318px; }
.nav.compact .links, .nav.compact .menu { opacity: 0; transform: translateX(24px); pointer-events: none; }
.nav.compact:hover { width: 100%; }
.nav.compact:hover .links { opacity: 1; transform: none; pointer-events: auto; }
.nav.on-light { background: linear-gradient(160deg, rgba(14,17,22,.82), rgba(14,17,22,.68)); border-color: rgba(255,255,255,.14); }

/* scroll progress rail, every page */
.rail { position: fixed; z-index: 25; left: max(14px, calc(var(--gutter) * .32)); top: 22vh; bottom: 22vh; width: 2px; background: rgba(237,235,230,.12); border-radius: 2px; pointer-events: none; }
.rail i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, var(--red), #ffb3a8); transform-origin: top; transform: scaleY(var(--p, 0)); border-radius: 2px; }
.rail b { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(240,84,84,.25), 0 0 18px rgba(240,84,84,.8); }
.rail.on-light { background: rgba(14,17,22,.14); }

/* floating action */
.floater { position: fixed; z-index: 29; right: max(16px, calc(var(--gutter) * .5)); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); box-shadow: 0 18px 40px rgba(0,0,0,.45); transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s; }
.floater.hide { opacity: 0; transform: translateY(30px) scale(.9); pointer-events: none; }

/* home header sits higher so the buttons show on landing; headers melt into the next section */
.phead.home { align-items: center; min-height: min(92vh, 960px); padding-block: 130px 90px; }
.phead.home h1 { font-size: clamp(50px, 7vw, 104px); }
.phead > canvas { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.phead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, rgba(14,17,22,0), var(--ink)); pointer-events: none; z-index: 1; }

/* light header (Approach) */
.phead.light { color: #14171D; }
.phead.light::after { height: 320px; }
.phead.light .lede { color: #3B3F47; }
.phead.light .eyebrow { color: #6B6F77; }

/* split headings */
.split-words .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.split-words .wd > span { display: inline-block; }

/* firm statement: bigger swing */
.statement .w { opacity: .12; filter: blur(6px); display: inline-block; transform: translateY(.18em); }

/* three ways: fuller hover */
.ways-list .way { position: relative; overflow: hidden; border-radius: 0; transition: padding .5s var(--ease); }
.ways-list .way::before { content: attr(data-n); position: absolute; right: 8%; top: 50%; transform: translate(40px, -50%); font-family: var(--serif); font-size: 220px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(240,84,84,.45); opacity: 0; transition: opacity .5s, transform .8s var(--ease); pointer-events: none; }
.ways-list .way::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.ways-list .way:hover { padding-left: 18px; }
.ways-list .way:hover::before { opacity: 1; transform: translate(0, -50%); }
.ways-list .way:hover::after { transform: scaleX(1); }
.ways-list .way h3 { transition: transform .6s var(--ease), letter-spacing .6s var(--ease), color .3s; }
.ways-list .way:hover h3 { transform: translateX(10px); letter-spacing: .01em; color: #fff; font-style: italic; }
.ways-list .way p { transition: color .4s; }
.ways-list .way:hover p { color: var(--paper); }
.ways-list .way .go { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; transition: background .4s, border-color .4s, transform .6s cubic-bezier(.34,1.56,.64,1); }
.ways-list .way:hover .go { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-45deg) scale(1.08); }
.hover-img { position: fixed; z-index: 20; left: 0; top: 0; width: 300px; height: 380px; border-radius: 22px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.hover-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }

/* portfolio rows: more happens */
.row .name { transition: transform .6s var(--ease), letter-spacing .6s var(--ease), color .3s; }
.row:hover .name { letter-spacing: .02em; color: #fff; }
.row .rel { transition: color .3s, transform .5s var(--ease); }
.row:hover .rel { color: var(--red); transform: translateX(-10px); }
.row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.row:hover::after { transform: scaleX(1); }

/* tilt surfaces */
.tilt { transform-style: preserve-3d; will-change: transform; transition: box-shadow .4s; }
.tilt:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 30px 70px rgba(0,0,0,.45); }

/* history teaser (no founder on home) */
.history-teaser { display: block; position: relative; border-radius: 34px; min-height: 420px; }
.history-teaser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; z-index: -2; transition: transform 1.2s var(--ease), opacity .6s; }
.history-teaser:hover img { transform: scale(1.06); opacity: .7; }
.history-teaser .ht-copy { position: relative; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; gap: 18px; justify-content: flex-end; min-height: 420px; box-sizing: border-box; background: linear-gradient(90deg, rgba(14,17,22,.8), rgba(14,17,22,.2)); }

/* Emerson preview: the product's style, not its site */
.em-stage { padding: clamp(28px, 5vw, 72px); }
.em-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: center; }
.em-copy { grid-column: span 5; display: flex; flex-direction: column; gap: 22px; }
.em-copy h2 { font-family: var(--sans); font-weight: 700; font-size: clamp(40px, 4.6vw, 70px); line-height: .98; letter-spacing: -.035em; color: var(--em-ink); }
.em-copy h2 span { color: var(--em-teal); }
.em-copy p { font-size: 17px; line-height: 1.65; color: #334155; max-width: 44ch; }
.em-cards { grid-column: 7 / span 6; position: relative; min-height: 460px; }
.em-card { position: absolute; background: rgba(255,255,255,.92); border-radius: 22px; padding: 20px 22px; box-shadow: 0 24px 60px rgba(15,23,42,.14), inset 0 1px 0 #fff; display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.em-card .k { font-family: var(--mono); font-size: 12px; color: #64748B; letter-spacing: .02em; }
.em-card .v { font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--em-ink); }
.em-card .bar { height: 6px; border-radius: 6px; background: #E2E8F0; overflow: hidden; }
.em-card .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--em-teal), #38BDF8); border-radius: 6px; }
.em-card .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.em-card .chips span { font-size: 12px; font-weight: 600; color: #0F766E; background: #E6F7F2; padding: 5px 10px; border-radius: 999px; }
.em-card.c1 { top: 0; left: 4%; width: 64%; }
.em-card.c2 { top: 150px; right: 0; width: 56%; }
.em-card.c3 { bottom: 0; left: 0; right: 6%; }
.em-card.c3 .em-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.float-a { animation: bob 7s ease-in-out infinite; }
.float-b { animation: bob 8s ease-in-out -2s infinite; }
.float-c { animation: bob 9s ease-in-out -4s infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.em-btn svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .nav .brand { font-size: 19px; gap: 8px; }
  .nav .brand .mark { width: 22px; height: 21px; }
  .nav.compact { width: 100%; }
  .rail { display: none; }
  .em-copy, .em-cards { grid-column: 1 / -1; }
  .em-cards { min-height: 0; display: flex; flex-direction: column; gap: 14px; }
  .em-card { position: relative; inset: auto !important; width: auto !important; }
  .hover-img { display: none; }
  .ways-list .way::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .float-a, .float-b, .float-c { animation: none; }
  .statement .w { opacity: 1; filter: none; transform: none; }
  .nav { transition: none; }
}
.phead.light { align-items: center; padding-bottom: 220px; }
@media (min-width: 901px) {
  .em-cards { min-height: 560px; }
  .em-card.c1 { top: 0; left: 2%; width: 62%; }
  .em-card.c2 { top: 128px; right: 0; width: 58%; z-index: 2; }
  .em-card.c3 { bottom: 0; left: 0; right: 10%; }
}

/* ================= v3 ================= */
/* no pointer glow anywhere; the streak on hover stays */
.glass::before, .btn.glass:hover::before, .card.glass:hover::before, .history-teaser:hover::before, .form.glass:hover::before { display: none; }

/* wordmark: smaller, letters closer */
.nav .brand { font-size: 20px; letter-spacing: .07em; gap: 9px; }
.nav .brand .mark { width: 24px; height: 23px; }
.nav.compact { width: 262px; }

/* home header: centered and balanced, the mark above the words */
.phead.center { justify-content: center; align-items: flex-end; text-align: center; padding-top: 44vh; padding-bottom: 80px; min-height: min(100vh, 1040px); }
.phead.center .copy { margin-inline: auto; align-items: center; }
.phead.center h1 { font-size: clamp(46px, 6vw, 92px); }
.phead.center h1 .line { display: inline-block; margin-inline: .12em; }
.phead.center .lede { margin-inline: auto; }
.phead.center .ctas { justify-content: center; }

/* progress: a bar along the bottom, filling left to right */
.rail { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; border-radius: 0; background: rgba(237,235,230,.08); }
.rail i { transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, rgba(240,84,84,.2), var(--red) 70%, #ffc2b8); border-radius: 0 3px 3px 0; }
.rail b { top: 50%; left: calc(var(--p, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.rail.on-light { background: rgba(14,17,22,.12); }
.floater { bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); }
@media (max-width: 900px) { .rail { display: block; } }

/* Emerson section is one link */
.em-link { display: block; color: inherit; }
.em-link .em-stage { transition: box-shadow .6s var(--ease), transform .6s var(--ease); }
.em-link:hover .em-stage { box-shadow: 0 40px 100px rgba(14,159,135,.25); }
.em-link:hover .em-btn { background: var(--em-teal); }
.em-link:focus-visible { outline: none; }
.em-link:focus-visible .em-stage { outline: 3px solid var(--em-teal); outline-offset: 6px; }

/* three ways: letters roll, glass fills in from the left, a detail line opens */
.hover-img { display: none !important; }
.ways-list .way { isolation: isolate; }
.ways-list .way > .fill { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(255,255,255,.07), rgba(240,84,84,.08) 60%, rgba(255,255,255,0)); clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease); }
.ways-list .way:hover > .fill { clip-path: inset(0 0 0 0); }
.ways-list .way:hover h3 { font-style: normal; letter-spacing: 0; }
.roll { display: inline-flex; flex-wrap: wrap; }
.roll .ch { position: relative; display: inline-block; overflow: hidden; line-height: 1.12; }
.roll .ch > span { display: block; transition: transform .6s var(--ease); transition-delay: calc(var(--i) * 18ms); }
.roll .ch > span + span { position: absolute; left: 0; top: 100%; color: var(--red); }
.way:hover .roll .ch > span { transform: translateY(-100%); }
.way .more { display: block; max-height: 0; opacity: 0; overflow: hidden; color: var(--paper); font-weight: 500; transition: max-height .7s var(--ease), opacity .5s, margin .7s var(--ease); }
.way:hover .more { max-height: 3em; opacity: 1; margin-top: 10px; }

/* ---------- contact: the page becomes a conversation ---------- */
.chatworld { position: relative; min-height: 100vh; padding: 120px var(--gutter) 90px; display: flex; flex-direction: column; align-items: center; gap: 48px; overflow: hidden; }
.aurora { position: absolute; inset: -10%; z-index: 0; opacity: 0; pointer-events: none; filter: blur(70px) saturate(140%); }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.aurora i:nth-child(1) { width: 60vw; height: 60vw; left: -10vw; top: 5vh; background: radial-gradient(circle, rgba(240,84,84,.55), transparent 65%); animation: drift1 18s ease-in-out infinite; }
.aurora i:nth-child(2) { width: 55vw; height: 55vw; right: -12vw; top: -10vh; background: radial-gradient(circle, rgba(126,103,255,.42), transparent 65%); animation: drift2 22s ease-in-out infinite; }
.aurora i:nth-child(3) { width: 50vw; height: 50vw; left: 25vw; bottom: -25vh; background: radial-gradient(circle, rgba(255,170,120,.38), transparent 65%); animation: drift3 20s ease-in-out infinite; }
.aurora i:nth-child(4) { width: 40vw; height: 40vw; right: 10vw; bottom: 0; background: radial-gradient(circle, rgba(94,190,230,.3), transparent 65%); animation: drift1 26s ease-in-out -6s infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8vw,6vh) scale(1.15); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-10vw,8vh) scale(.95); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vw,-8vh) scale(1.2); } }
.chat-shell { position: relative; z-index: 1; width: min(820px, 100%); display: flex; flex-direction: column; gap: 18px; }
.chat-head { display: flex; align-items: center; gap: 14px; }
.chat-head .who { font-family: var(--serif); font-size: 26px; }
.chat-head .status { font-size: 13px; color: var(--mute); }
.orb { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; }
.orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(240,84,84,.55); animation: ring 4.8s cubic-bezier(.25,.1,.35,1) infinite; }
.orb i:nth-child(2) { animation-delay: 1.6s; } .orb i:nth-child(3) { animation-delay: 3.2s; }
.orb b { width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, #F05454, #FFB199); box-shadow: 0 0 16px rgba(240,84,84,.8); animation: breathe 4.4s ease-in-out infinite; }
.chatworld.busy .orb i { animation-duration: 2.4s; }
@keyframes ring { from { transform: scale(1); opacity: .45; } to { transform: scale(1.9); opacity: 0; } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.chat-log { display: flex; flex-direction: column; gap: 16px; min-height: 280px; }
.msg { max-width: 82%; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; }
.msg.bot { align-self: flex-start; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; color: var(--paper); }
.msg.me { align-self: flex-end; padding: 14px 20px; border-radius: 22px 22px 6px 22px; background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); white-space: pre-wrap; }
.wordin { display: inline-block; animation: wordin .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes wordin { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }
.typing { display: inline-flex; gap: 6px; padding: 8px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
.composer { display: flex; align-items: flex-end; gap: 12px; padding: 14px 14px 14px 22px; border-radius: 26px; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 24px 70px rgba(0,0,0,.45); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.composer textarea { flex: 1; resize: none; background: transparent; border: 0; outline: none; color: var(--paper); font: 18px/1.5 var(--sans); padding: 8px 0; min-height: 30px; max-height: 180px; }
.composer textarea::placeholder { color: rgba(237,235,230,.45); }
.composer .send { width: 48px; height: 48px; flex: none; border-radius: 16px; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #F05454, #B3202A); box-shadow: 0 10px 26px rgba(240,84,84,.45); transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.composer .send svg { width: 20px; height: 20px; }
.composer .send:hover { transform: translateY(-3px) scale(1.05); }
.composer .send[disabled] { opacity: .4; cursor: default; transform: none; }
.consent { display: flex; gap: 16px; align-items: flex-start; font-size: 13px; color: var(--mute); line-height: 1.55; }
.consent label { display: flex; gap: 10px; align-items: flex-start; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--red); flex: none; }
.consent .skip { background: none; border: 1px solid var(--rule); color: var(--paper); border-radius: 999px; padding: 0 18px; min-height: 44px; font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; flex: none; }
.chat-hint { font-size: 13px; color: var(--mute); min-height: 1.4em; }
.chat-hint.warn { color: #FFB4A8; }
.chat-side { position: relative; z-index: 1; width: min(820px, 100%); box-sizing: border-box; padding-inline: 0; display: flex; gap: 48px; flex-wrap: wrap; font-size: 15px; color: var(--soft); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .aurora i, .orb i, .orb b { animation: none; } .wordin { animation: none; } .aurora { opacity: .8; } }
.phead, .chatworld, .cine { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ================= v4 ================= */
/* nav: bounce only when it opens; closing is a clean ease */
.nav.compact { transition: width .45s cubic-bezier(.4,0,.2,1), background .4s, border-color .4s, padding .5s; }
.nav.compact:hover { transition: width .75s cubic-bezier(.34,1.56,.64,1), background .4s, border-color .4s, padding .5s; }

/* contact: details first, then the chat; the aurora melts into the footer */
.intro { border-radius: 28px; padding: clamp(22px, 3.4vw, 38px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.intro .intro-title { grid-column: 1 / -1; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); }
.intro label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.intro .full { grid-column: 1 / -1; }
.intro input:not([type="checkbox"]) { font: 16px var(--sans); color: var(--paper); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 14px 16px; min-height: 50px; box-sizing: border-box; width: 100%; }
.intro .consent-line { flex-direction: row; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.55; }
.intro .consent-line input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--red); flex: none; }
.intro-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.chatworld { padding-bottom: 200px; }
.chatworld::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient(180deg, rgba(14,17,22,0), var(--ink) 85%); pointer-events: none; z-index: 1; }
.aurora { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 62%, transparent 100%); }
.chat-side { z-index: 2; }
@media (max-width: 900px) { .intro { grid-template-columns: minmax(0, 1fr); } }

/* ================= v5 ================= */
/* three ways: the row stays put on hover so the round buttons never clip */
.ways-list .way { padding-inline: 14px; }
.ways-list .way:hover { padding-left: 14px; }
.ways-list .way .go { margin-right: 4px; }
/* page headers with a scene: the words sit on a soft shade so they read over the motion */
.phead > canvas + .copy { text-shadow: 0 2px 30px rgba(14,17,22,.55); }
.phead > .shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(70% 80% at 18% 60%, rgba(14,17,22,.78), rgba(14,17,22,.2) 60%, rgba(14,17,22,0) 80%); }

/* ================= v6: contact sits tight to the footer ================= */
.chatworld { min-height: 0; padding-top: 110px; padding-bottom: 40px; gap: 36px; }
.chat-log { min-height: 0; }
.chat-log:empty { display: none; }
.chatworld::after { height: 160px; }
.chat-hint:empty { display: none; }
.chatworld + footer.foot, main:has(.chatworld) + footer.foot { padding-top: clamp(40px, 5vw, 72px); }
main:has(.chatworld) + footer.foot .top { display: none; }
main:has(.chatworld) + footer.foot { gap: 48px; }
/* the arrows are dark at rest now, so the shade behind the words can be lighter */
.phead > .shade { background: radial-gradient(60% 70% at 18% 60%, rgba(14,17,22,.55), rgba(14,17,22,0) 75%); }
.path-labels { position: absolute; left: 0; right: 0; bottom: calc(10% - 26px); z-index: 2; pointer-events: none; }
.path-label { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(237,235,230,.72); white-space: nowrap; }
@media (max-width: 900px) { .path-labels { display: none; } }

/* ================= v9: Approach opens on real footage ================= */
.phead .media video { width: 100%; height: 100%; object-fit: cover; transform-origin: 55% 45%; will-change: transform; display: block; }
.phead .media.film::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,17,22,.82) 0%, rgba(14,17,22,.45) 45%, rgba(40,6,10,.25) 100%); }
.phead .media.film video { filter: saturate(1.05) contrast(1.08) brightness(.9) sepia(.12) hue-rotate(-12deg); }
.phead .media.film::after { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .phead .media.film video { display: none; } .phead .media.film { background: url("../img/way-run.jpg") center / cover; } }

/* ================= v10 ================= */
/* nav: when it closes, the logo pill settles on the left, not the middle */
.navwrap { left: max(16px, calc(var(--gutter) * .5)); right: max(16px, calc(var(--gutter) * .5)); width: auto; transform: none; }
.nav { width: min(1180px, 100%); margin-left: max(0px, calc((100% - 1180px) / 2)); transition: width .75s cubic-bezier(.34,1.56,.64,1), margin-left .75s cubic-bezier(.34,1.56,.64,1), background .4s, border-color .4s, padding .5s; }
.nav.compact { width: 262px; margin-left: 0; transition: width .45s cubic-bezier(.4,0,.2,1), margin-left .45s cubic-bezier(.4,0,.2,1), background .4s, border-color .4s, padding .5s; }
.nav.compact:hover { width: min(1180px, 100%); margin-left: max(0px, calc((100% - 1180px) / 2)); transition: width .75s cubic-bezier(.34,1.56,.64,1), margin-left .75s cubic-bezier(.34,1.56,.64,1), background .4s, border-color .4s, padding .5s; }
@media (max-width: 900px) { .nav.compact, .nav.compact:hover { width: 100%; margin-left: 0; } }

/* Approach: three film panels, one per way in */
.phead.tri { align-items: stretch; gap: clamp(24px, 4vw, 64px); padding: 130px var(--gutter) 70px; min-height: min(96vh, 980px); }
.phead.tri::after { height: 120px; }
.phead.tri .copy { flex: 0 0 min(38%, 520px); justify-content: flex-end; padding-bottom: 20px; }
.phead.tri h1 { font-size: clamp(46px, 5.4vw, 92px); }
.triptych { position: relative; z-index: 2; flex: 1; display: flex; gap: 12px; min-height: 480px; }
.panel { position: relative; flex: 1; border-radius: 26px; overflow: hidden; background: #0b0d11; transition: flex-grow .8s var(--ease), filter .6s; isolation: isolate; }
.panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease), filter .6s; filter: grayscale(.35) brightness(.72); }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,22,.1) 30%, rgba(14,17,22,.88) 100%); z-index: 1; }
.panel .pl { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.panel .pl b { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .2em; color: var(--red); }
.panel .pl span { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.1; color: #fff; }
.panel .pl em { font-style: normal; font-size: 14px; color: var(--soft); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s; }
.triptych:hover .panel { filter: brightness(.7); }
.triptych .panel:hover { flex-grow: 2.1; filter: none; }
.triptych .panel:hover video { transform: scale(1.1); filter: grayscale(0) brightness(.95); }
.triptych .panel:hover .pl em { max-height: 3em; opacity: 1; }
.panel:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
@media (max-width: 900px) {
  .phead.tri { flex-direction: column; }
  .phead.tri .copy { flex: none; }
  .triptych { min-height: 320px; }
  .panel .pl span { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .panel video { display: none; } .panel { background-size: cover; background-position: center; } }

/* ================= v11: more vibrant, less grey ================= */
/* photo headers: darken only where the words sit, keep the picture in full colour */
.phead .media img { filter: saturate(1.2) contrast(1.06); }
.phead .media::after { background: linear-gradient(90deg, rgba(14,17,22,.62) 0%, rgba(14,17,22,.18) 45%, rgba(14,17,22,0) 70%), linear-gradient(180deg, rgba(14,17,22,0) 55%, var(--ink) 100%); }
.cine .media img { filter: saturate(1.2) contrast(1.06); }
.cine .media::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(14,17,22,0) 16%, rgba(14,17,22,0) 45%, rgba(14,17,22,.55) 78%, var(--ink) 100%); }
.history-teaser img { opacity: .9; filter: saturate(1.2); }
.history-teaser:hover img { opacity: 1; }
.history-teaser .ht-copy { background: linear-gradient(90deg, rgba(14,17,22,.78), rgba(14,17,22,.1) 65%, rgba(14,17,22,0)); }
/* film panels: vivid at rest, full colour on hover */
.panel video { filter: saturate(1.1) brightness(.9); }
.panel::after { background: linear-gradient(180deg, rgba(14,17,22,0) 45%, rgba(14,17,22,.82) 100%); }
.triptych:hover .panel { filter: brightness(.62) saturate(.9); }
.triptych .panel:hover { filter: none; }
.triptych .panel:hover video { filter: saturate(1.3) brightness(1.05) contrast(1.05); }
.triptych .panel:hover::after { background: linear-gradient(180deg, rgba(14,17,22,0) 60%, rgba(14,17,22,.75) 100%); }
/* glass reads clearer, less milky */
.glass { background: linear-gradient(160deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,.07) 100%); -webkit-backdrop-filter: blur(18px) saturate(200%); backdrop-filter: blur(18px) saturate(200%); }
/* body copy a touch brighter */
:root { --soft: #D6D8DC; --mute: #B0B3B9; }
/* the nav keeps the glass look but carries a little ink, so links read over bright photos */
.nav.glass { background: linear-gradient(160deg, rgba(40,42,50,.5) 0%, rgba(14,17,22,.42) 50%, rgba(30,32,40,.48) 100%); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }

/* ================= v12 ================= */
/* some of the overlay back: photos stay colourful, words stay easy to read */
.phead .media::after { background: linear-gradient(90deg, rgba(14,17,22,.72) 0%, rgba(14,17,22,.35) 45%, rgba(14,17,22,.12) 75%), linear-gradient(180deg, rgba(14,17,22,.1) 0%, rgba(14,17,22,0) 40%, var(--ink) 100%); }
.cine .media::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(14,17,22,.12) 18%, rgba(14,17,22,.2) 45%, rgba(14,17,22,.62) 78%, var(--ink) 100%); }
.history-teaser img { opacity: .78; }
.history-teaser .ht-copy { background: linear-gradient(90deg, rgba(14,17,22,.85), rgba(14,17,22,.25) 65%, rgba(14,17,22,.1)); }
/* Approach: the moving gradient sits behind the words and the films */
.phead.tri > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.phead.tri .copy { position: relative; z-index: 2; }
.phead.tri .ctas { margin-top: 6px; }
.phead.tri .panel { box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); }

/* ================= v13: the stack, in all its mess ================= */
.chaos { --calm: 0; position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: radial-gradient(80% 70% at 50% 55%, #16121a, var(--ink) 75%); }
.chaos > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chaos::before, .chaos::after { content: ""; position: absolute; left: 0; right: 0; height: 180px; z-index: 1; pointer-events: none; }
.chaos::before { top: 0; background: linear-gradient(180deg, var(--ink), rgba(14,17,22,0)); }
.chaos::after { bottom: 0; background: linear-gradient(0deg, var(--ink), rgba(14,17,22,0)); }
.chaos-top { position: absolute; z-index: 2; left: var(--gutter); top: 110px; display: flex; flex-direction: column; gap: 18px; opacity: calc(1 - var(--calm) * 1.6); transform: translateY(calc(var(--calm) * -40px)); padding: 22px 26px; border-radius: 26px; background: rgba(14,17,22,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 640px; }
.chaos-meter { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.chaos-meter b { color: var(--red); font-size: 20px; letter-spacing: 0; font-variant-numeric: tabular-nums; margin-right: 6px; }
.chaos-end { position: absolute; z-index: 2; left: 50%; bottom: 12vh; transform: translate(-50%, calc((1 - var(--calm)) * 40px)); width: min(760px, calc(100% - 32px)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; opacity: calc(var(--calm) * 1.4 - .3); pointer-events: none; }
.chaos-end p { font-size: clamp(18px, 1.6vw, 22px); color: var(--soft); max-width: 44ch; }
.chaos-end a { pointer-events: auto; }
.chaos-note { position: absolute; z-index: 2; right: var(--gutter); bottom: 24px; font-size: 11px; color: var(--mute); letter-spacing: .08em; }
@media (max-width: 900px) { .chaos-top { top: 90px; left: 16px; right: 16px; } }
/* history: a chain you scroll down, each year lighting as the line reaches it */
.chain { position: relative; display: flex; flex-direction: column; gap: 0; padding-left: 0; }
.chain-line { position: absolute; left: calc(25% - 1px); top: 0; bottom: 0; width: 2px; background: var(--rule); }
.chain-line i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--red), #FFB3A8); transform-origin: top; transform: scaleY(var(--fill, 0)); }
.link-item { display: grid; grid-template-columns: 25% 1fr; align-items: start; padding-block: clamp(34px, 5vw, 64px); position: relative; }
.link-item::before { content: ""; position: absolute; left: calc(25% - 8px); top: calc(clamp(34px, 5vw, 64px) + 18px); width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--rule); transition: background .5s, border-color .5s, box-shadow .5s; }
.link-item.lit::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 6px rgba(240,84,84,.18), 0 0 24px rgba(240,84,84,.7); }
.link-item .yr { font-family: var(--serif); font-size: clamp(54px, 7vw, 110px); line-height: .9; color: rgba(237,235,230,.18); padding-right: 40px; transition: color .6s; }
.link-item.lit .yr { color: var(--paper); }
.link-item .ev { padding-left: clamp(28px, 4vw, 64px); display: flex; flex-direction: column; gap: 12px; max-width: 640px; opacity: .35; transform: translateX(20px); transition: opacity .7s, transform .9s var(--ease); }
.link-item.lit .ev { opacity: 1; transform: none; }
.link-item .ev h3 { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 40px); }
.link-item .ev p { color: var(--soft); font-size: 18px; }
.bio-p { color: var(--soft); font-size: 18px; line-height: 1.7; }
@media (max-width: 900px) { .link-item { grid-template-columns: 1fr; gap: 10px; padding-left: 28px; } .chain-line { left: 6px; } .link-item::before { left: -1px; top: calc(clamp(34px, 5vw, 64px) + 10px); } .link-item .ev { padding-left: 0; } .link-item .yr { font-size: 56px; } }
@media (prefers-reduced-motion: reduce) { .link-item .ev { opacity: 1; transform: none; } .link-item .yr { color: var(--paper); } }
.chaos-note { right: auto; left: var(--gutter); }

/* ================= v14: the home header's instrument ================= */
.orbit-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.orbit-label { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); padding: 4px 10px; border-radius: 999px; background: rgba(14,17,22,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; transition: opacity .5s; will-change: transform; }
.orbit-label.em { color: #fff; border-color: rgba(240,84,84,.6); background: rgba(139,0,0,.45); }
.ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 54px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.1); background: rgba(14,17,22,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker .track { display: flex; width: max-content; height: 100%; align-items: center; animation: tick 60s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 12px; padding: 0 34px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.ticker span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(240,84,84,.8); }
.ticker b { color: var(--paper); font-weight: 600; letter-spacing: .12em; }
.ticker:hover .track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.phead.home { padding-bottom: 130px; }
@media (max-width: 900px) { .orbit-labels { display: none; } }
@media (prefers-reduced-motion: reduce) { .ticker .track { animation: none; } }

/* ================= v15: home header is a flight into Atlanta ================= */
.flight { --p: 0; position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: #0b0d11; box-sizing: border-box; }
.flight > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flight-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(14,17,22,.78) 0%, rgba(14,17,22,.42) 38%, rgba(14,17,22,.05) 70%), linear-gradient(180deg, rgba(14,17,22,.45) 0%, rgba(14,17,22,0) 26%, rgba(14,17,22,0) 70%, rgba(14,17,22,.8) 100%); }
.beats { position: absolute; inset: 0; z-index: 2; }
.beat { position: absolute; left: var(--gutter); bottom: 18vh; max-width: 760px; display: flex; flex-direction: column; gap: 22px; opacity: 0; will-change: opacity, transform, filter; }
.beat[data-first] { opacity: 1; bottom: 16vh; }
.beat h1 { font-family: var(--serif); font-size: clamp(50px, 7vw, 108px); line-height: .98; letter-spacing: -0.01em; }
.beat h2 { font-family: var(--serif); font-size: clamp(56px, 8vw, 124px); line-height: .95; }
.beat p { font-size: clamp(17px, 1.5vw, 21px); color: #E8E6E1; max-width: 560px; }
.beat .lede { color: #E8E6E1; }
.beat .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.flight-hint { position: absolute; z-index: 2; right: var(--gutter); bottom: 90px; font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(237,235,230,.7); opacity: calc(1 - var(--p) * 6); display: flex; align-items: center; gap: 10px; }
.flight-hint::after { content: ""; width: 1px; height: 38px; background: linear-gradient(180deg, rgba(237,235,230,.8), transparent); animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }
@media (max-width: 900px) { .beat { bottom: 14vh; right: 16px; } }
@media (prefers-reduced-motion: reduce) { .beat:not([data-first]) { display: none; } }
.flight-shade { background: linear-gradient(90deg, rgba(14,17,22,.7) 0%, rgba(14,17,22,.32) 36%, rgba(14,17,22,0) 62%), linear-gradient(180deg, rgba(14,17,22,.35) 0%, rgba(14,17,22,0) 22%, rgba(14,17,22,0) 72%, rgba(14,17,22,.75) 100%); }

/* Production fit: keep the floating nav inside the phone viewport. */
.nav { box-sizing: border-box; }
html, body { overflow-x: clip; }
@media (max-width: 360px) {
  .nav { gap: 4px; padding: 10px 8px 10px 12px; }
  .nav .brand { font-size: 16px; letter-spacing: .03em; gap: 4px; }
  .nav .brand .mark { width: 18px; height: 18px; }
  .nav .menu { font-size: 10px; padding: 10px 12px; }
}
@media (max-width: 900px) {
  /* The form and page CTAs already give phones a clear action. */
  .floater { display: none; }
}

/* Keep the desktop nav open while the pointer is anywhere in its header row.
   The row stays still as the compact pill expands and moves to the center. */
@media (min-width: 901px) {
  .navwrap { left: 0; right: 0; padding-inline: max(16px, calc(var(--gutter) * .5)); box-sizing: border-box; pointer-events: auto; }
  .navwrap:is(:hover, :focus-within) .nav.compact { width: min(1180px, 100%); margin-left: max(0px, calc((100% - 1180px) / 2)); transition: width .75s cubic-bezier(.34,1.56,.64,1), margin-left .75s cubic-bezier(.34,1.56,.64,1), background .4s, border-color .4s, padding .5s; }
  .navwrap:is(:hover, :focus-within) .nav.compact .links { opacity: 1; transform: none; pointer-events: auto; }
}

/* Contact: give each step and the office details room to breathe. */
.chatworld { padding-top: clamp(120px, 10vw, 170px); padding-bottom: clamp(90px, 9vw, 140px); gap: clamp(64px, 6vw, 92px); }
.chat-shell { gap: 28px; }
.chat-head { gap: 18px; margin-bottom: 8px; }
.intro { padding: clamp(28px, 4vw, 52px); column-gap: 28px; row-gap: 26px; }
.intro .intro-title { margin-bottom: 8px; }
.intro label { gap: 12px; }
.intro input:not([type="checkbox"]) { min-height: 56px; }
.intro .consent-line { border-top: 1px solid var(--rule); padding-top: 26px; margin-top: 4px; gap: 14px; }
.intro-foot { padding-top: 10px; }
.chat-side { border-top: 1px solid var(--rule); padding-top: 36px; gap: 64px; }
main:has(.chatworld) + footer.foot { padding-top: clamp(72px, 8vw, 116px); }
@media (max-width: 600px) {
  .chatworld { gap: 72px; }
  .chat-shell { gap: 24px; }
  .intro { row-gap: 24px; }
  .intro-foot { align-items: stretch; }
  .intro-foot .btn { width: 100%; }
  .chat-side { flex-direction: column; gap: 30px; }
}