/* Stacey Vanthuyne - R3 home page concept (James's working file).
   One bright frame, one question. The hero carries the boldness; everything after it is quiet.
   Palette, type and the bright direction are from Brand Guide v4. Tints only, no new hues.
   Type rule: Cormorant italic is Stacey speaking (questions, the reframe lines, the quote); roman is the page stating (headings that state, titles, the six lines, the chain, the
   assessment instrument). Weight follows size the way metal display cuts did: the h1 is the one Medium
   display moment, h2 and the chain words are Regular at display size, everything smaller in Cormorant
   is Medium. One ink for text (#211E1A); near-black is a surface. No single accented word.
   Scale: a major third (1.25) from 18px body: 18, 22, 28, 35, 44, 55, 69, 86, 134 (desktop maxima).
   Motion: three moments (hero load, the belief chain drawn by scroll, the Alcatraz numbers), plus
   state changes at 100 to 160ms. Two easings only. */

:root{
  --cream:#F5F0E8;
  --sand:rgba(184,146,74,.10);   /* a gold wash over the cream ground */
  --ink:#141210;
  --ink-text:#211E1A;
  --ink-2:#211E1A;          /* the guide site's ink: closest allowed value to the studio backdrop of the Alcatraz photograph */
  --char:#3A3530;
  --body-ink:#3A3530;
  --stone:#8A8178;
  --gold:#B8924A;
  --gold-l:#D4AD6A;
  --gold-deep:#9A7836;
  --copper:#C17F59;
  --metal:linear-gradient(135deg,#D4AD6A 0%,#B8924A 48%,#9A7836 100%);
  --on-dark:rgba(245,240,232,.92);
  --on-dark-2:rgba(245,240,232,.72);
  --line:rgba(20,18,16,.16);
  --line-dark:rgba(245,240,232,.18);
  --display:'Cormorant Garamond',serif;
  --body:'Figtree',sans-serif;
  --label:'Jost',sans-serif;
  --gutter:clamp(20px,5vw,64px);
  --sec:clamp(84px,11vw,152px);
  --hdr:86px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --fast:100ms;
  --base:160ms;
  --medium:240ms;
  --slow:320ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr);-webkit-text-size-adjust:100%}
/* Lenis (smooth scroll on mouse and trackpad): its stylesheet, inline. CSS smooth scrolling steps aside while Lenis runs. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}   /* two classes already outrank html{scroll-behavior:smooth} */
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;padding-top:var(--hdr);background:var(--cream);color:var(--body-ink);font:400 1.125rem/1.7 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.dark :focus-visible{outline-color:var(--gold-l)}

.wrap{width:min(1240px,calc(100% - 2*var(--gutter)));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:.75rem 1rem;z-index:1002}
.skip:focus{left:1rem;top:1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--ink-text);margin:0 0 .5em;text-wrap:balance;font-variant-numeric:lining-nums}
h1{font-size:min(clamp(3.4rem,9.2vw,8.6rem),10.8svh);line-height:.95;letter-spacing:-.02em;font-style:italic}   /* one hero size on every page: the home size, trimmed only on short screens so the hero stays on one screen */
h2{font-weight:400;font-size:clamp(2.5rem,4.6vw,4.25rem);line-height:1.1;letter-spacing:-.015em}
h3{font-size:clamp(1.9rem,2.4vw,2.5rem);line-height:1.15;letter-spacing:0}
h2 em,h3 em{font-style:italic;color:inherit}
.q{font-style:italic}
p{margin:0 0 1.1em;max-width:50ch}
.kicker{display:block;font:500 1rem/1.4 var(--label);letter-spacing:.01em;color:var(--char);margin:0 0 1.25rem}
.dark .kicker{color:var(--gold-l)}   /* Baley's design contract: on a dark surface the eyebrow is gold */
.lead{font-size:clamp(1.25rem,1.6vw,1.375rem);line-height:1.55}
.aside{font:italic 500 clamp(1.35rem,1.9vw,1.6rem)/1.35 var(--display);color:var(--ink-text);margin:1.5rem 0 2.2rem;max-width:36ch}
.dark .aside{color:var(--on-dark)}
.row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 2rem;font:500 1rem/1.5 var(--label);color:var(--char)}
.dark .row{color:var(--on-dark-2)}

/* ---------- buttons: squared, one gold, one line ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 2rem;border-radius:2px;border:1px solid transparent;font:500 1.0625rem/1 var(--label);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background-color var(--base) var(--ease-io),color var(--base) var(--ease-io),border-color var(--base) var(--ease-io),filter var(--base) var(--ease-io)}
.btn-gold{background:var(--metal);color:var(--ink);border-color:var(--gold-deep);box-shadow:inset 0 1px 0 rgba(245,240,232,.45)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-line{border-color:var(--ink-text);color:var(--ink-text);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.dark .btn-line{border-color:rgba(245,240,232,.6);color:var(--on-dark)}
.dark .btn-line:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.text-link{position:relative;display:inline-block;font:500 1.0625rem/1.3 var(--label);color:var(--ink-text);text-decoration:none;padding:.8rem 0;transition:color var(--fast) var(--ease-io)}
.text-link::after{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:1px;background:var(--gold);transition:background-color var(--fast) var(--ease-io)}
.text-link:hover{color:var(--char)}
.text-link:hover::after{background:var(--gold-l)}

/* ---------- progress bar ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:1001}

/* ---------- header: the near-black bar with the gold logo (kept) ----------
   Fixed above everything (Baley's header rule: position fixed, z-index 1000); the body pads for it.
   Height stays 86px, not his 72px, so the logo's tagline stays readable (James). */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--ink);transition:transform var(--slow) var(--ease-io),box-shadow var(--slow) var(--ease-io)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--gold-deep) 0%,var(--gold) 25%,var(--gold-l) 50%,var(--gold) 75%,var(--gold-deep) 100%)}
.site-header.scrolled{box-shadow:0 10px 28px rgba(20,18,16,.22)}
.site-header.hide{transform:translateY(-100%);box-shadow:none}   /* no shadow smudge left at the top of the screen */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--hdr)}
.brand img{height:64px;width:auto}
.nav-links{display:flex;gap:2.2rem}
.nav-links a{font:500 1rem/1 var(--label);letter-spacing:.01em;color:var(--on-dark);text-decoration:none;padding:.9rem .2rem;margin:0 -.2rem;border-bottom:1px solid transparent;transition:color var(--fast) var(--ease-io),border-color var(--fast) var(--ease-io)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-l);border-bottom-color:var(--gold)}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-cta .btn{min-height:44px;padding:0 1.25rem;font-size:1rem}
.site-header .btn-line{border-color:rgba(245,240,232,.55);color:var(--on-dark)}
.site-header .btn-line:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.menu-btn{display:none;width:48px;height:48px;border:0;background:transparent;cursor:pointer;padding:13px}
.menu-btn span{display:block;height:2px;background:var(--on-dark);margin:5px 0;transition:transform var(--medium) var(--ease-io),opacity var(--medium) var(--ease-io)}
.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:999;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:1.3rem;padding:100px var(--gutter) 40px;opacity:0;transform:translateY(-12px);visibility:hidden;transition:opacity var(--medium) var(--ease-out),transform var(--medium) var(--ease-out),visibility 0s linear var(--medium)}
.mobile-menu.open{opacity:1;transform:none;visibility:visible;transition:opacity var(--medium) var(--ease-out),transform var(--medium) var(--ease-out)}
.mobile-menu a:not(.btn){font:500 2.4rem/1.15 var(--display);color:var(--cream);text-decoration:none;padding:.2rem 0}
.mobile-menu a:not(.btn):hover,.mobile-menu a:not(.btn)[aria-current="page"]{color:var(--gold-l)}
.mobile-menu .btn{align-self:flex-start;margin-top:.5rem;min-width:260px}
.mobile-menu .btn-line{border-color:rgba(245,240,232,.6);color:var(--on-dark)}

/* ---------- sections ---------- */
.sec{padding:var(--sec) 0}
.sand{background:var(--sand)}
.dark{background:var(--ink);color:var(--on-dark)}
.dark h2,.dark h3{color:var(--cream)}
.dark p{color:var(--on-dark)}

/* ======================================================================
   HERO: one frame. The photograph owns the right of the viewport and the
   question is set on its edge. This is the one place the page is loud.
   ====================================================================== */
.hero{position:relative;min-height:calc(100svh - var(--hdr));display:flex;align-items:center;padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,96px);overflow:hidden}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:50%;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hero-photo::before{content:"";position:absolute;top:0;bottom:0;left:0;width:clamp(110px,15vw,220px);background:linear-gradient(90deg,var(--cream) 0%,rgba(245,240,232,0) 100%);z-index:1;pointer-events:none}
.hero-copy{position:relative;z-index:1;width:min(640px,56%)}
.hero h1{margin:0 0 .35em;width:max-content;max-width:none}
.hero h1 span{display:block;white-space:nowrap}
.hero .lead{max-width:40ch;margin-bottom:0}
.hero .aside{margin:1.3rem 0 2.2rem;max-width:34ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem}

/* the one page-load sequence: pure CSS, runs only when JS is on, instantly off under reduced motion */
.js .hero-photo{animation:settle 1200ms var(--ease-out) both}
.js .hero-copy>*{animation:rise 700ms var(--ease-out) both}
.js .hero-copy>:nth-child(1){animation-delay:120ms}
.js .hero-copy>:nth-child(2){animation-delay:220ms}
.js .hero-copy>:nth-child(3){animation-delay:360ms}
.js .hero-copy>:nth-child(4){animation-delay:460ms}
.js .hero-copy>:nth-child(5){animation-delay:560ms}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

/* ---------- sound familiar: type only, a quiet column of six lines ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.lines{list-style:none;margin:.4rem 0 0;padding:0}
.lines li{padding:.55rem 0 .55rem 2.2rem;text-indent:-2.2rem;font:500 clamp(1.5rem,2vw,1.85rem)/1.3 var(--display);color:var(--ink-text)}
.lines li::before{content:"";display:inline-block;width:1.1rem;height:1px;margin-right:1.1rem;vertical-align:middle;background:var(--gold)}   /* the dash sits at mid-letter on the first line; wrapped lines hang under the words */
.closer{font:italic 500 clamp(1.9rem,2.4vw,2.5rem)/1.3 var(--display);color:var(--ink-text);margin:1.4rem 0 0;max-width:24ch}

/* ======================================================================
   THE BELIEF CHAIN: six words, one line drawn by the scroll.
   Default state is fully lit (no JS, reduced motion, short screens).
   JS pins the section and dims the words until the scroll reaches them.
   ====================================================================== */
.chain-sec{--p:1}
.chain-pin{min-height:100svh}
.js .chain-sec.pinned .chain-pin{height:260vh}
.chain-stick{min-height:100svh;display:flex;align-items:center;padding:calc(var(--hdr) + 24px) 0 48px}
.js .chain-sec.pinned .chain-stick{position:sticky;top:0;height:100svh}
.chain-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.chain-sec h2{margin-bottom:0}
.chain{list-style:none;margin:0;padding:0 0 0 2.2rem;position:relative}
.chain::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;background:var(--line-dark)}
.chain::after{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;background:var(--gold);transform-origin:top;transform:scaleY(var(--p))}
.chain li{position:relative;font:400 clamp(2rem,3.6vw,3.4rem)/1.15 var(--display);letter-spacing:-.01em;color:var(--cream);padding:.12em 0;transition:color var(--slow) var(--ease-io)}
.chain li::before{content:"";position:absolute;left:calc(-2.2rem - 3px);top:50%;width:7px;height:7px;margin-top:-3px;background:var(--gold);transition:background-color var(--slow) var(--ease-io),transform var(--slow) var(--ease-io)}
.chain li:last-child{color:var(--gold)}
.chain li.start{color:var(--gold-l)}
.js .chain-sec.pinned .chain li:not(.lit){color:var(--stone)}
.js .chain-sec.pinned .chain li:not(.lit)::before{background:var(--stone);transform:scale(.6)}
.chain-copy{margin-top:1.4rem;opacity:1;transform:none;transition:opacity var(--slow) var(--ease-out),transform var(--slow) var(--ease-out)}
.js .chain-sec.pinned .chain-copy:not(.on){opacity:0;transform:translateY(12px)}
.chain-copy p{font-size:clamp(1.25rem,1.6vw,1.375rem);line-height:1.55;max-width:30ch}

/* ======================================================================
   THE ASSESSMENT: the first real question, answerable on the home page.
   The panel is the only dark surface on a cream section: it is the feature.
   ====================================================================== */
.assess{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,104px);align-items:center}
.assess .row{margin:1.4rem 0 2.2rem}
.qpanel{background:linear-gradient(rgba(184,146,74,.08),rgba(184,146,74,.08)),var(--cream);color:var(--ink-text);padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px) clamp(20px,2.6vw,32px);border-radius:2px;border-top:3px solid var(--gold)}
.qpanel .qk{display:flex;justify-content:space-between;gap:1rem;font:500 1rem/1.4 var(--label);color:var(--char);margin:0 0 1.1rem;max-width:none}
.qpanel .qt{font:500 clamp(1.5rem,2vw,1.85rem)/1.3 var(--display);color:var(--ink-text);margin:0 0 1.4rem;max-width:none}
.answers{list-style:none;margin:0;padding:0;border-top:1px solid rgba(44,44,44,.14)}
.answers a{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:1rem;align-items:start;min-height:56px;padding:.8rem .6rem .8rem .4rem;margin:0 -.4rem;color:var(--ink-text);text-decoration:none;font-size:1.0625rem;line-height:1.5;border-bottom:1px solid rgba(44,44,44,.14);transition:background-color .16s cubic-bezier(.4,0,.2,1)}
.answers a:hover,.answers a:focus-visible{background:rgba(184,146,74,.14)}
.answers li.picked a{background:var(--ink);color:var(--cream)}
.answers li.picked b{color:var(--gold)}
.answers b{font:500 1.0625rem/1.5 var(--label);color:var(--char);letter-spacing:.02em}
.qpanel .qn{font-size:1rem;color:var(--char);margin:1.1rem 0 0}
.qpanel .qgo{display:none;margin-top:1.1rem;scroll-margin-bottom:120px}   /* clears the dock when the script brings the button into view */
.qpanel.answered .qgo{display:inline-flex}
.qpanel.answered .qn{display:none}


/* ======================================================================
   ALCATRAZ: the one full-bleed photograph. The studio backdrop of the
   picture is the section's ground, so she stands in the section, not in a box.
   ====================================================================== */
.race{position:relative;background:var(--ink-2);color:var(--on-dark);overflow:hidden}
.race-photo{position:absolute;inset:0;z-index:0}
.race-photo img{width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.race .wrap{position:relative;z-index:1}
.race-copy{width:min(620px,55%);padding:var(--sec) 0}
.race h2{color:var(--cream)}
.legs{list-style:none;margin:2.2rem 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:1rem clamp(1.8rem,3.6vw,3.6rem)}
.legs b{display:flex;align-items:baseline;gap:.35rem;white-space:nowrap;font:400 clamp(3.2rem,6vw,5.6rem)/1 var(--display);letter-spacing:-.02em;color:var(--gold);font-variant-numeric:lining-nums tabular-nums}
.legs .u{font:500 1.0625rem/1 var(--label);letter-spacing:0;color:var(--on-dark-2)}
.legs b+span{display:block;margin-top:.5rem;font:500 1rem/1.3 var(--label);color:var(--on-dark-2)}
.race .facts{font-size:clamp(1.25rem,1.6vw,1.375rem);line-height:1.55;color:var(--on-dark);max-width:34ch}
.race blockquote{font:italic 500 clamp(1.9rem,2.4vw,2.5rem)/1.3 var(--display);color:var(--cream);margin:2rem 0 0;max-width:24ch}
.race cite{display:block;margin-top:.8rem;font:500 1rem/1 var(--label);font-style:normal;color:var(--on-dark-2)}

/* ---------- meet stacey: the photograph bleeds off the left edge ---------- */
.meet{position:relative;overflow:hidden}
.meet-photo{position:absolute;top:0;bottom:0;left:0;width:44%}
.meet-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.meet .wrap{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,104px)}
.meet-copy{grid-column:2;padding:var(--sec) 0}
.meet .roles{margin:1.4rem 0 2rem}

/* ---------- ways to work together: three offers, no boxes ---------- */
.offers-head{max-width:760px;margin-bottom:clamp(40px,5vw,72px)}
.offers{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(32px,4vw,64px);align-items:start}
.offer{display:flex;flex-direction:column;min-height:100%}
.offer.feature{padding-left:clamp(20px,2.4vw,32px);border-left:3px solid var(--gold)}
.offer h3{margin-bottom:.45em}
.offer p{font-size:1.0625rem;margin-bottom:1em}
.offer .kicker{font-size:1rem;margin-bottom:1.25rem}
.offer .row{margin:0 0 1.6rem}
.offer .btn,.offer .text-link{margin-top:auto;align-self:flex-start}
.offer .when{font:500 1.0625rem/1.4 var(--label);color:var(--ink-text);margin:0 0 1.1rem}
.podcast{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem clamp(32px,5vw,80px);align-items:center;margin-top:clamp(56px,7vw,104px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.podcast p{margin:0}
.podcast .show{font:500 clamp(1.6rem,2vw,2rem)/1.2 var(--display);color:var(--ink-text);margin-bottom:.4rem}
.heard{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:baseline;margin:.4rem 0 0}
.heard .kicker{margin:0;color:var(--char)}
.heard a{position:relative;display:inline-block;font:500 1rem/1.5 var(--label);color:var(--char);text-decoration:none;padding:.65rem 0;transition:color var(--fast) var(--ease-io)}
.heard a::after{content:"";position:absolute;left:0;right:0;bottom:.5rem;height:1px;background:transparent;transition:background-color var(--fast) var(--ease-io)}
.heard a:hover{color:var(--ink-text)}
.heard a:hover::after{background:var(--gold)}

/* ---------- closing call to action: the gold frame (kept) ---------- */
.cta{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,120px);align-items:center}
.framed{position:relative;isolation:isolate;justify-self:end;width:min(100%,460px)}
.framed img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%}
.framed::before{content:"";position:absolute;z-index:0;inset:-18px -18px auto auto;width:78%;height:78%;background:var(--metal)}
.cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* ---------- footer: Baley's luxury-footer-system in Stacey's palette (rebuilt 2026-10-07).
   It sits on the same warm studio brown as the home page's closing band, so the band and the footer read
   as one final screen; a gold hairline that fades at both ends is the only divide. Three calm zones (brand,
   the sitemap, the newsletter), then the legal row with the POM AI signature. Nothing under 16px. ---------- */
.site-footer{position:relative;background:linear-gradient(rgba(193,127,89,.075),rgba(193,127,89,.075)),var(--ink-2);color:var(--on-dark-2);padding:clamp(40px,3.6vw,56px) 0 clamp(12px,1.2vw,18px)}
.site-footer::before{content:"";position:absolute;top:0;left:max(var(--gutter),calc((100% - 1240px) / 2));right:max(var(--gutter),calc((100% - 1240px) / 2));height:1px;background:linear-gradient(90deg,rgba(184,146,74,0) 0%,rgba(184,146,74,.55) 50%,rgba(184,146,74,0) 100%)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.25fr) minmax(0,1.1fr);gap:clamp(40px,5vw,88px);align-items:start}
.foot-logo-link{display:inline-block}
.foot-logo{display:block;height:clamp(64px,4.8vw,76px);width:auto;margin:0 0 1.1rem}
.foot-line{margin:0 0 1rem;max-width:none;font:italic 500 1.25rem/1.4 var(--display);color:var(--on-dark)}
.foot-line>span{display:block}   /* the three lines from the hero, one per line */
.foot-mail{position:relative;display:inline-block;padding:.5rem 0;color:var(--on-dark-2);text-decoration:none;transition:color var(--base) var(--ease-io)}
.foot-mail:hover{color:var(--cream)}
.foot-h{margin:0 0 .9rem;font:500 1rem/1.3 var(--label);letter-spacing:.02em;color:var(--gold-l)}
.foot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:0}
.foot-grid a{position:relative;display:inline-block;padding:.38rem 0;color:var(--on-dark);text-decoration:none;transition:color var(--base) var(--ease-io)}
.foot-grid a::after,.foot-mail::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform 420ms var(--ease-out)}
.foot-grid a:hover,.foot-grid a:focus-visible{color:var(--cream)}
.foot-grid a:hover::after,.foot-grid a:focus-visible::after,.foot-mail:hover::after,.foot-mail:focus-visible::after{transform:scaleX(1)}
/* the newsletter: one hairline field with its word beside it, no boxes */
.news p{margin:0 0 1.1rem;max-width:34ch;color:var(--on-dark)}
.news-row{display:flex;align-items:stretch;border-bottom:1px solid rgba(212,173,106,.55);transition:border-color var(--base) var(--ease-io)}
.news-row:focus-within{border-color:var(--gold-l)}
.news-row input{flex:1 1 auto;min-width:0;min-height:52px;padding:0 1rem 0 0;border:0;border-radius:0;background:transparent;color:var(--cream);font:400 1.0625rem var(--body)}
.news-row input::placeholder{color:rgba(245,240,232,.6)}
.news-row input:focus-visible{outline:none}
.news-btn{flex:none;min-height:52px;padding:0 0 0 1rem;border:0;background:transparent;color:var(--gold-l);font:500 1.0625rem/1 var(--label);letter-spacing:.02em;cursor:pointer;transition:color var(--base) var(--ease-io)}
.news-btn:hover,.news-btn:focus-visible{color:var(--cream)}
.news-btn[disabled]{opacity:.7;cursor:progress}
.news-note{margin:.8rem 0 0;font-size:1rem;color:var(--on-dark-2)}
.news-success{display:none;margin:.4rem 0 0;font:italic 500 1.375rem/1.4 var(--display);color:var(--gold-l)}
.news-success.show{display:block}
/* the legal row and the POM AI signature */
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1.5rem;margin-top:clamp(28px,2.4vw,40px);padding-top:clamp(8px,.8vw,12px);border-top:1px solid var(--line-dark);font-size:1rem;color:var(--on-dark-2)}
.foot-sig{display:inline-flex;align-items:center;gap:1.1rem}
.foot-sig-label{font:400 1rem/1 var(--label);letter-spacing:.06em;color:var(--on-dark-2);white-space:nowrap}
.foot-sig-rule{flex:none;width:1px;height:30px;background:linear-gradient(rgba(212,173,106,0),rgba(212,173,106,.7) 50%,rgba(212,173,106,0))}   /* a thin gold rule between the credit and the mark */
.foot-sig a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;filter:drop-shadow(0 0 0 rgba(212,173,106,0));transition:filter 300ms var(--ease-io)}
.foot-sig a:hover,.foot-sig a:focus-visible{filter:drop-shadow(0 0 10px rgba(212,173,106,.55))}
.pom-logo{display:block;height:32px;width:auto}   /* POM AI's own logo from pomai.ca, unaltered; empty margin trimmed only */
@media (prefers-reduced-motion:reduce){.foot-sig a{transition:none}}
/* tablets: the legal row and the credit stack, centred, rather than wrap to the left */
@media (max-width:820px){.foot-bottom{flex-direction:column;text-align:center}}
/* phones: the credit above the logo, so it never runs wider than the screen */
@media (max-width:400px){.foot-sig{flex-direction:column;gap:.1rem}.foot-sig-rule{display:none}.pom-logo{height:28px}}

/* ---------- scroll-follow call to action: one gold button in the corner (Baley's sticky-cta-system).
   It appears past the hero, takes over from the header's button while the header is away (one call to
   action on screen at a time), retracts at the footer, and is a full-width button at phone width. ---------- */
.dock{position:fixed;z-index:40;right:clamp(16px,2.2vw,32px);bottom:clamp(16px,2.2vw,32px);opacity:0;transform:translateY(14px);visibility:hidden;transition:opacity var(--slow) var(--ease-out),transform var(--slow) var(--ease-out),visibility 0s linear var(--slow)}
.dock.show{opacity:1;transform:none;visibility:visible;transition:opacity var(--slow) var(--ease-out),transform var(--slow) var(--ease-out)}
.dock .btn{min-height:52px;padding:0 1.7rem;box-shadow:inset 0 1px 0 rgba(245,240,232,.45),0 16px 38px rgba(20,18,16,.3)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-cta .btn-line{display:none}
}
@media (max-width:900px){
  .hero{min-height:0;max-height:none;display:block;padding:0 0 clamp(48px,7vw,80px)}
  .hero-photo{position:relative;width:100%;height:60vw;max-height:560px}
  .hero-photo img{object-position:50% 20%}
  .hero-photo::before{display:none}
  .hero-copy{width:auto;padding-top:clamp(32px,5vw,48px)}
  .hero h1{width:auto}
  .hero h1 span{white-space:normal}
  .split,.assess,.chain-grid,.cta{grid-template-columns:1fr}
  .chain-grid{gap:2rem}
  .js .chain-sec.pinned .chain-pin{height:220vh}
  .race-copy{width:auto}
  .race-photo{position:relative;height:96vw;max-height:620px}
  .race-photo img{object-position:50% 0}
  .race-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(33,30,26,0),var(--ink-2))}
  .race-copy{padding-top:clamp(28px,4vw,40px)}
  .meet-photo{position:relative;width:100%;height:72vw;max-height:620px}
  .meet .wrap{display:block}
  .meet-copy{padding-top:clamp(32px,5vw,48px)}
  .offers{grid-template-columns:1fr}
  .offer.feature{padding-left:0;border-left:0;padding-top:1.4rem;border-top:3px solid var(--gold)}
  .podcast{grid-template-columns:1fr}
  .podcast .btn{justify-self:start}   /* keeps the button at its natural width once the grid collapses, as on desktop and as the offer buttons above it */
  .framed{justify-self:start}
}
@media (max-width:640px){
  :root{--hdr:72px}
  body{font-size:1.0625rem}
  .brand img{height:52px}
  .nav-cta .btn-gold{display:none}
  .hero-photo{height:46svh;min-height:350px;max-height:420px}
  .hero-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(245,240,232,0) 0%,var(--cream) 100%);pointer-events:none}
  .hero-copy{margin-top:-9svh;padding-top:0;position:static;z-index:1}
  .hero-copy .kicker{position:absolute;top:20px;left:var(--gutter);z-index:2;margin:0;color:var(--ink-text)}
  .hero h1{position:relative;z-index:1}
  .hero h1{font-size:clamp(2.9rem,13.5vw,3.6rem);letter-spacing:-.02em}
  .hero .aside{margin:.9rem 0 1.4rem}
  .hero-actions .btn,.cta-actions .btn{flex:1 1 100%}
  .lines li{font-size:1.4rem}
  .legs{grid-template-columns:repeat(3,auto);gap:1rem 1.4rem}
  .legs b{font-size:clamp(2.4rem,11vw,3.2rem)}
  .framed::before{inset:-12px -12px auto auto}
  .qpanel{margin:0 calc(-1*var(--gutter));border-radius:0;padding:28px var(--gutter) 22px}
}
@media (max-height:680px){
  .js .chain-sec.pinned .chain-pin{height:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}   /* arrives at once: no delays either */
  .js .chain-sec.pinned .chain-pin{height:auto}
  .js .chain-sec.pinned .chain-stick{position:static;height:auto}
  .js .chain-sec.pinned .chain li:not(.lit){color:var(--cream)}
  .js .chain-sec.pinned .chain li:not(.lit)::before{background:var(--gold);transform:none}
  .js .chain-sec.pinned .chain-copy:not(.on){opacity:1;transform:none}
}

/* ======================================================================
   DARK TOP: every page opens on the warm near-black and the header sits on it (James, 2026-10-06).
   The header is see-through while it sits on the top section and turns to the dark glass once past it
   (Baley's luxury-header-system: blur only on a dark header). JS adds .off-hero; without JS the header
   keeps its solid bar. The home page blends its studio photograph into the ground (r3-home.css); the
   other pages set a bright photograph as a crisp panel that starts under the header.
   ====================================================================== */
body.dark-top{padding-top:0}
.dark-top .site-header{transition:transform var(--slow) var(--ease-io),background-color var(--slow) var(--ease-io),box-shadow var(--slow) var(--ease-io)}
.dark-top .site-header::after{transition:opacity var(--slow) var(--ease-io)}
.js .dark-top .site-header:not(.off-hero):not(.mega-open){background:transparent;box-shadow:none}
.js .dark-top .site-header:not(.off-hero):not(.mega-open)::after{opacity:0}
.dark-top .site-header.off-hero{background:rgba(20,18,16,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.top-dark{background:var(--ink-2);color:var(--on-dark)}
.top-dark h1{color:var(--cream)}
.top-dark .lead{color:var(--on-dark)}
.dark-top .top-dark{min-height:100svh;padding-top:calc(var(--hdr) + clamp(24px,4vw,56px))}
.dark-top .top-dark .hero-photo{top:var(--hdr)}
.top-dark:not(.hero-dark) .hero-photo::before,.top-dark:not(.hero-dark) .hero-photo::after{display:none}
@media (max-width:900px){
  .dark-top .top-dark{min-height:0;padding-top:0}
  .dark-top .top-dark .hero-photo{margin-top:var(--hdr);top:auto}
}
/* tablets: the stacked top still fills the screen, the photograph taking whatever height the copy leaves */
@media (min-width:641px) and (max-width:900px){
  .dark-top .top-dark{display:flex;flex-direction:column;min-height:100svh}
  .dark-top .top-dark .hero-photo{flex:1 0 auto;max-height:none}
}
@media (max-width:640px){
  .top-dark:not(.hero-dark) .hero-copy{margin-top:0;padding-top:28px}
  .top-dark .hero-copy .kicker{position:static;margin:0 0 1rem;color:var(--gold-l)}
}

/* ======================================================================
   WORK WITH STACEY DROPDOWN: Baley's luxury-header-system mega menu, in Stacey's palette and type
   (her ink, her gold, Cormorant, Figtree and Jost; sentence case, nothing under 16px). Hover opens it
   after 150ms on a mouse; click, Enter and Space always toggle it; Escape and a click outside close it.
   Desktop only: from 1100px down the full-screen menu carries the same links.
   ====================================================================== */
.mega-trigger{display:flex;align-items:center}
.mega-trigger__btn{display:inline-flex;align-items:center;gap:.6rem;font:500 1rem/1 var(--label);letter-spacing:.01em;color:var(--on-dark);background:none;border:0;border-bottom:1px solid transparent;padding:.9rem .2rem;margin:0 -.2rem;cursor:pointer;transition:color var(--fast) var(--ease-io),border-color var(--fast) var(--ease-io)}
.mega-trigger__btn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--medium) var(--ease-out)}
.mega-trigger__btn:hover,.mega-trigger__btn[aria-expanded="true"]{color:var(--gold-l);border-bottom-color:var(--gold)}
.mega-trigger__btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.site-header.mega-open,.dark-top .site-header.mega-open{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}   /* one solid ink with the panel, no two-tone seam */
.mega-l{font-variant-numeric:lining-nums}   /* "1:1" in lining figures */
/* the page behind the open dropdown dims, so the panel never seems to slice through a headline */
body:has(.site-header.mega-open)::after{content:"";position:fixed;inset:0;z-index:999;background:rgba(20,18,16,.55);pointer-events:none}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--ink);border-top:1px solid rgba(184,146,74,.35);border-bottom:1px solid rgba(184,146,74,.35);box-shadow:0 28px 56px rgba(20,18,16,.38);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out)}
.mega[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
.mega-inner{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);padding:36px 0 44px}
.mega-feature{display:grid;align-content:start;gap:.3rem;text-decoration:none;color:var(--cream)}
.mega-img{display:block;overflow:hidden;aspect-ratio:4/3;margin-bottom:.9rem;border-radius:2px}
.mega-img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:scale 600ms var(--ease-out)}
.mega-feature:hover .mega-img img{scale:1.04}
.mega-k{font:500 1rem/1.4 var(--label);color:var(--gold-l)}
.mega-t{font:500 1.75rem/1.15 var(--display);color:var(--cream)}
.mega-d{font:400 1rem/1.5 var(--body);color:var(--on-dark-2)}
.mega-h{font:500 1rem/1.4 var(--label);color:var(--gold-l);margin:0 0 .4rem;padding-bottom:.9rem;border-bottom:1px solid var(--line-dark);max-width:none}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col a{display:block;padding:.85rem 0;text-decoration:none;color:var(--cream);border-bottom:1px solid var(--line-dark)}
.mega-l{display:block;font:500 1.375rem/1.25 var(--display);transition:color var(--fast) var(--ease-io),translate var(--medium) var(--ease-out)}
.mega-s{display:block;margin-top:.2rem;font:400 1rem/1.45 var(--body);color:var(--on-dark-2)}
.mega-col a:hover .mega-l,.mega-col a:focus-visible .mega-l{color:var(--gold-l);translate:6px 0}
.mega[data-open="true"] .mega-inner>*{animation:mega-in 380ms var(--ease-out) backwards}
.mega[data-open="true"] .mega-inner>:nth-child(2){animation-delay:50ms}
.mega[data-open="true"] .mega-inner>:nth-child(3){animation-delay:100ms}
@keyframes mega-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:1100px){.mega{display:none!important}}

/* ======================================================================
   SCROLL REVEALS: Baley's scroll-journey-animations armed reveal. A page opts in with body[data-reveal].
   Nothing is hidden until JS has armed an element that is confirmed off screen, and every element replays
   when it comes back, in both directions. Text rises; cards rise and settle; numbered steps travel in from
   the side; photographs clear from the top. Off entirely under reduced motion.
   ====================================================================== */
.rise[data-armed="1"]{opacity:0;transform:translateY(26px)}
.rise.rise-card[data-armed="1"]{transform:translateY(26px) scale(.98)}
.rise.rise-side[data-armed="1"]{transform:translateX(-28px)}
.rise.rise-media[data-armed="1"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.rise[data-armed="1"].on,.rise.rise-card[data-armed="1"].on,.rise.rise-side[data-armed="1"].on{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--d,0ms),transform .6s cubic-bezier(.16,1,.3,1) var(--d,0ms),translate .42s cubic-bezier(.16,1,.3,1)}
.rise.rise-media[data-armed="1"].on{clip-path:inset(0 0 0 0);transition:clip-path .6s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.rise[data-armed]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}}

/* ======================================================================
   HOVER: slow, small and transform-only, and only on a mouse (Baley's brief: smooth and expensive).
   It uses the separate translate and scale properties, so it never fights a reveal's transform.
   ====================================================================== */
.btn{transition:background-color var(--base) var(--ease-io),color var(--base) var(--ease-io),border-color var(--base) var(--ease-io),filter var(--base) var(--ease-io),translate var(--medium) var(--ease-out)}
.offer{transition:translate 420ms var(--ease-out)}
.meet-photo,.alive-photo{overflow:hidden}
.meet-photo img,.alive-photo img{transition:scale 600ms var(--ease-out)}
.steps li h3,.steps li .num{transition:color var(--base) var(--ease-io),translate var(--medium) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{translate:0 -2px}
  .offer:hover{translate:0 -4px}
  .meet:hover .meet-photo img,.alive:hover .alive-photo img{scale:1.03}
  .steps li:hover h3{translate:6px 0}
  .steps li:hover .num{color:var(--gold-deep)}
  .text-link:hover::after{animation:link-sweep 560ms var(--ease-out)}
}
@keyframes link-sweep{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* the scroll-follow button at phone width: full width, above the home indicator */
@media (max-width:640px){
  .dock{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .dock .btn{width:100%;min-height:54px}
}

/* ======================================================================
   LIGHT IN THE WORDS: the two text effects from the POM AI look kit (pomai.ca), in Stacey's gold.
   Starlight: a headline's letters light one by one as the page loads, flaring gold and settling.
   Word fill: a block of words starts dim and lights in reading order as it travels up the screen.
   Light only: nothing moves and nothing hides. r3.js switches them on (data-motion), so without it,
   or under reduced motion, every word is simply there.
   ====================================================================== */
[data-fill] .w,[data-starlight] .l{display:inline}   /* the lit pieces stay inline, whatever span rules their heading has */
[data-starlight][data-motion="on"] .l{color:transparent}
[data-starlight].play .l{animation:starlight .8s cubic-bezier(.4,0,.2,1) var(--d,0ms) both}
@keyframes starlight{
  0%{color:rgba(212,173,106,0);text-shadow:0 0 0 rgba(212,173,106,0)}
  40%{color:var(--gold-l);text-shadow:0 0 18px rgba(212,173,106,.85),0 0 2px rgba(245,240,232,.6)}
  100%{color:var(--cream);text-shadow:0 0 0 rgba(212,173,106,0)}
}
[data-fill][data-motion="on"] .w{opacity:.18;transition:opacity .5s var(--ease-io)}
[data-fill][data-motion="on"] .w.lit{opacity:1}

/* the full-screen menu is open: the header's own gold button steps aside so there are never two */
.menu-open .nav-cta .btn-gold{visibility:hidden}


}

/* no word left alone on the last line of a paragraph or list item */
p,li{text-wrap:pretty}

/* ======================================================================
   THE LIVE ALIVE CARD (home "Ways to work together" and About "Work with Stacey"): the program as a dark
   spread, the golden-hour coast it leads to, three numbers set like the Alcatraz ones, one button; the
   two other ways as ruled columns beneath. No portrait here: the pages already carry enough of her.
   ====================================================================== */
.la-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--ink-2);border-radius:2px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(20,18,16,.45)}
.la-photo{margin:0;min-height:100%;aspect-ratio:4/5}
.la-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.la-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,5vw,80px)}
.la-body .kicker{margin:0 0 1rem}
.la-body h3{margin:0 0 1rem;font-size:clamp(2.6rem,4.4vw,4rem);line-height:1.02;letter-spacing:-.02em;color:var(--cream)}
.la-lead{margin:0 0 2.2rem;max-width:34ch;font-size:clamp(1.2rem,1.5vw,1.3rem);line-height:1.55;color:var(--on-dark)}
.la-facts{list-style:none;display:flex;flex-wrap:wrap;gap:1.4rem clamp(28px,3.4vw,52px);margin:0 0 1.8rem;padding:1.6rem 0 0;border-top:1px solid var(--line-dark)}
.la-facts li{display:flex;flex-direction:column;gap:.35rem}
.la-facts b{font:400 clamp(2.4rem,3.4vw,3.2rem)/1 var(--display);letter-spacing:-.02em;color:var(--gold-l);font-variant-numeric:lining-nums}
.la-facts span{font:500 1rem/1.35 var(--label);color:var(--on-dark-2)}
.la-when{margin:0 0 2rem;font:500 1.0625rem/1.4 var(--label);color:var(--cream)}
.la-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem}
.la-card .text-link{color:var(--cream)}
.la-card .text-link:hover{color:var(--gold-l)}
.more-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,80px);margin-top:clamp(48px,6vw,88px)}
.way{display:flex;flex-direction:column;padding-top:1.6rem;border-top:1px solid var(--line)}
.way .kicker{margin:0 0 .9rem}
.way h3{margin:0 0 .6rem}
.way p{margin:0 0 1.2rem;font-size:1.0625rem;max-width:42ch}
.way .text-link{margin-top:auto;align-self:flex-start}
@media (max-width:900px){
  .la-card{grid-template-columns:1fr}
  .la-photo{aspect-ratio:16/10}
  .la-photo img{object-position:50% 40%}
  .more-ways{grid-template-columns:1fr}
}


.nobr{white-space:nowrap}

/* the header's gold button is an outline while the header sits over a dark hero (at rest or turned to glass), so the
   hero's own gold button is the one solid gold thing on the first screen; it fills in once the hero has passed */
.js .dark-top .site-header.over-hero:not(.mega-open) .nav-cta .btn-gold{background:transparent;color:var(--gold-l);border-color:rgba(212,173,106,.7);box-shadow:none}
.js .dark-top .site-header.over-hero:not(.mega-open) .nav-cta .btn-gold:hover{background:rgba(212,173,106,.12)}

/* footer, narrower screens: brand and newsletter side by side over the sitemap; phones stack, centred brand */
@media (max-width:1023px){
  .foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.6rem 3rem}
  .foot-grid{grid-column:1/-1;grid-row:2;padding-top:2rem;border-top:1px solid var(--line-dark)}
}
@media (max-width:640px){
  .foot-top{grid-template-columns:1fr;gap:2.4rem}
  .foot-brand{text-align:center}
  .foot-logo{margin-inline:auto}
  .foot-grid{grid-row:auto;padding:2rem 0;border-bottom:1px solid var(--line-dark)}
  .foot-bottom{flex-direction:column;text-align:center}
}

/* ---------- K15 seams: a photograph never ends in a hard line on a ground of its own tone. Dark heroes on tablets
   and phones: the photograph dissolves into the hero's ground (the ink-2) at its top and its foot, with eased stops. */
@media (max-width:900px){
  .hero.top-dark .hero-photo::before{content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:auto;width:auto;height:64px;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--ink-2) 0%,rgba(33,30,26,.6) 40%,rgba(33,30,26,.2) 72%,rgba(33,30,26,0) 100%)}
  .hero.top-dark .hero-photo::after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:auto;height:36%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(33,30,26,0) 0%,rgba(33,30,26,.12) 25%,rgba(33,30,26,.38) 50%,rgba(33,30,26,.7) 74%,rgba(33,30,26,.92) 90%,var(--ink-2) 100%)}
}