/* ==========================================================================
   Eastwood Studio — site styles
   Brand: cream #faf8f3, ink #16140f, taupe #8a8577, amber #e58d1b. Type: Sora.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=UnifrakturCook:wght@700&display=swap');

:root{
  --cream:#faf8f3;
  --ink:#16140f;
  --ink-70:rgba(22,20,15,.72);
  --ink-50:rgba(22,20,15,.52);
  --taupe:#8a8577;
  --amber:#e58d1b;
  --line:rgba(22,20,15,.12);
  --edge:6vw;
  --wrap:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ min-height:100%; }
body{
  font-family:'Sora',system-ui,-apple-system,sans-serif;
  background:var(--cream); color:var(--ink);
  line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--amber); color:var(--cream); }

.wrap{ width:min(100% - 2*var(--edge), var(--wrap)); margin-inline:auto; }

/* --- header / nav ------------------------------------------------------- */
.header{
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:2rem var(--edge);
}
.brand img{ height:34px; width:auto; }
.nav{ display:flex; align-items:center; gap:2.2rem;
  transition:opacity .22s var(--ease), transform .22s var(--ease); }
/* Home button fades away on scroll-down, in sync with the EN/ES toggle */
.nav--dim{ opacity:0; transform:translateY(-8px); pointer-events:none; }
.nav a:not(.btn){
  text-decoration:none; font-size:.82rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink); opacity:.72; transition:opacity .25s var(--ease);
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"]{ opacity:1; }
.menu-toggle{ display:none; }

/* --- language toggle (EN/ES): fixed, translucent, WebGL amber behind ---- */
.lang-toggle{ position:fixed; top:1.9rem; left:var(--edge); z-index:60;
  display:inline-flex; align-items:center; gap:.02rem; padding:.22rem; border-radius:999px; overflow:hidden;
  -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
  background:rgba(250,248,243,.3); border:1px solid rgba(22,20,15,.1); box-shadow:0 8px 24px -14px rgba(22,20,15,.4);
  transition:opacity .22s var(--ease), transform .22s var(--ease); }
/* fades out on scroll-down, returns on scroll-up (glass-like) */
.lang-toggle--dim{ opacity:0; transform:translateY(-8px); pointer-events:none; }
.lang-toggle__fx{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none; }
.lang-toggle__opt{ position:relative; z-index:1; background:none; border:0; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:.26rem;
  font-size:.61rem; font-weight:600; letter-spacing:.05em; padding:.2rem .38rem; border-radius:999px;
  color:var(--ink); opacity:.4; transition:opacity .3s var(--ease); }
.lang-toggle__opt[aria-current="true"]{ opacity:1; }
.lang-toggle__opt:hover{ opacity:.82; }
/* actual mini flags: real Union Jack (EN) and Spanish flag (ES) */
.lang-flag{ width:16px; height:11px; border-radius:2px; display:block; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(22,20,15,.08); }

/* --- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-size:.9rem; font-weight:500; text-decoration:none; cursor:pointer;
  padding:.95rem 1.6rem; border-radius:999px; border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
/* living liquid-light button (WebGL, assets/js/btn.js): amber light drifts at
   rest, pools to the cursor on hover, button is magnetic. Text sits above. */
.btn--primary{ position:relative; overflow:hidden; background:var(--ink); color:var(--cream);
  border-color:transparent; will-change:transform; box-shadow:0 10px 30px -18px rgba(22,20,15,.5); }
.btn--primary .btn__fx{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; }
.btn--primary .btn__label{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.6rem;
  text-shadow:0 1px 5px rgba(0,0,0,.35); }
/* no-webgl / reduced-motion fallback: clean solid that warms on hover */
.btn--primary.btn--nofx{ background:var(--ink); color:var(--cream); }
.btn--primary.btn--nofx:hover{ background:var(--amber); color:var(--ink); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--amber{ background:var(--amber); color:var(--ink); }
.btn--amber:hover{ background:var(--ink); color:var(--cream); transform:translateY(-2px); }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }
.nav .btn{ padding:.55rem 1.05rem; opacity:1; }
.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:500;
  font-size:.9rem; border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:border-color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow:hover{ border-color:var(--ink); gap:.8rem; }

/* --- shared section furniture ------------------------------------------ */
.section{ padding:clamp(1.5rem,3.5vh,2.5rem) 0; }
.section--tight{ padding:clamp(0.75rem,1.75vh,1.25rem) 0; }
.hr{ border:0; height:1px; background:var(--line); margin:0; }
/* NOTE: @keyframes tagShine is still used by .brand--shine (single sweep on load) */
@keyframes tagShine{ 0%{ background-position:150% 0; } 67%,100%{ background-position:-50% 0; } }
.h-lg{ font-weight:600; line-height:1.0; letter-spacing:-.02em; font-size:clamp(2.4rem,6vw,4.4rem); }
.h-md{ font-weight:600; line-height:1.05; letter-spacing:-.02em; font-size:clamp(1.9rem,4vw,3rem); }
.h-lg .amber, .h-md .amber{ color:var(--amber); }
.h-lg .light, .h-md .light{ font-weight:300; color:var(--taupe); }
.lede{ font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:300; line-height:1.55; color:var(--ink-70); max-width:52ch; }

/* --- reveal ------------------------------------------------------------ */
[data-reveal]{ opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay:var(--rd,0ms); }
[data-reveal].in{ opacity:1; transform:none; }

/* ==========================================================================
   HERO — particle wordmark
   ========================================================================== */
/* No header bar and no Web·Brand·Film tag above it any more, so the hero owns
   the top of the page outright. It's centred inside a near-viewport block
   rather than padded from the top: that way the space the bar and tag vacated
   is absorbed into the composition instead of sitting as a dead band above the
   wordmark, and the marquee still peeks in at the bottom to invite the scroll. */
.hero{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  min-height:min(76vh, 680px);      /* fallback: svh is iOS 15.4+, and an */
  min-height:min(76svh, 680px);     /* unknown unit voids the whole min() */
  padding:clamp(1rem,3vh,2rem) var(--edge) clamp(1.5rem,4vh,3rem); }
@media(max-width:600px){
  /* tightened: at 72svh the hero left a dead band above the wordmark and
     another below the CTA on a phone. The composition is unchanged, there is
     simply less empty cream wrapped around it. */
  .hero{ min-height:min(62vh, 470px); min-height:min(62svh, 470px); padding-top:.25rem;
         padding-bottom:clamp(1rem,2.5vh,1.75rem); }
}
.stage-wrap{ position:relative; width:100%; height:clamp(200px, 33vw, 420px); }
#stage-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.name{ position:absolute; inset:0; display:grid; place-content:center; align-content:center;
  line-height:.92; font-weight:700; letter-spacing:-.03em; font-size:clamp(3.4rem,15vw,12rem); }
.name span{ display:block; }
.name .a{ color:var(--ink); } .name .b{ color:var(--taupe); }
body.has-canvas .name{ clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }
.hero__below{ margin-top:1.4rem; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.hero__below .tag{ max-width:34ch; font-size:clamp(1rem,1.5vw,1.25rem); font-weight:300; line-height:1.5; color:var(--ink-70); }
.cta-row{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; justify-content:center; }

/* --- page hero (inner pages) ------------------------------------------- */
.page-hero{ padding:clamp(3rem,8vh,7rem) 0 clamp(2rem,5vh,4rem); }
.page-hero .lede{ margin-top:1.4rem; }
/* reactive dot grid (start page): a fixed backdrop behind the whole page so the
   floating cards sit on a living grid and no margin is dead cream. */
.start{ position:relative; }
.page-grid{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none; }
.start > *:not(.page-grid){ position:relative; z-index:1; }
.start .lang-toggle{ position:fixed; z-index:61; }  /* fixed + above the sticky header, or the header eats taps */
/* line the toggle's centre up with the wordmark + Home button on phones (measured) */
@media(max-width:600px){ .start .lang-toggle{ top:2.35rem; } }
.page-hero--grid{ padding-block:clamp(1.25rem,3vh,2.25rem) clamp(1.25rem,3vh,2rem); text-align:center; }
@media(max-width:600px){ .page-hero--grid{ padding-top:.25rem; } }
.page-hero--grid .lede{ margin-inline:auto; }
/* sticky start-page header: brand centred + shining, soft progressive-blur fade */
.start .header{ position:sticky; top:0; z-index:40; justify-content:flex-end; transition:padding .35s var(--ease); }
.start .header .brand{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.start .header::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:-30px; z-index:-1;
  pointer-events:none; opacity:0; transition:opacity .45s var(--ease);
  background:linear-gradient(to bottom, rgba(250,248,243,.92) 0%, rgba(250,248,243,.5) 52%, rgba(250,248,243,0) 100%);
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  -webkit-mask:linear-gradient(to bottom, #000 42%, transparent 100%); mask:linear-gradient(to bottom, #000 42%, transparent 100%); }
.start .header.is-stuck::before{ opacity:1; }
.start .header.is-stuck{ padding-top:1.2rem; padding-bottom:1.2rem; }
/* Legal pages: no top-right button. Wordmark size now comes from the shared
   .brand--shine rule, so every header matches (it used to be 236px here vs
   196px on the start page, which made the start page look undersized). */

/* mobile-only line-break helper (statement -> two lines on phones) */
/* Closing statement. It used to run at .h-md and carry a forced <br> on mobile,
   which made it the loudest thing on the page — bigger than the manifesto it
   follows — and locked it to two lines. Now it sits deliberately BELOW the
   manifesto in scale so it reads as a sign-off, and wraps naturally (balanced)
   instead of at a hard-coded break, which also stops the longer Spanish
   translation breaking in an arbitrary place. */
.statement-line{ font-weight:600; line-height:1.15; letter-spacing:-.02em;
  font-size:clamp(1.3rem, 2.5vw, 2rem); text-wrap:balance; }
.statement-line .amber{ color:var(--amber); }
.statement-line .light{ font-weight:300; color:var(--taupe); }
/* Phones keep the wordmark optically CENTRED, exactly as desktop does. It used
   to be shunted left here to dodge the nav button, which made mobile behave
   differently from web for no good reason. Instead the wordmark is sized in vw,
   so it shrinks with the screen and can never reach the button — verified down
   to 320px. The absolute centring from the desktop rules is left in place. */
@media(max-width:600px){
  .start .header .brand--shine{ width:clamp(92px, 29vw, 170px); height:auto; aspect-ratio:1608/368; }
  .start .header .nav .btn{ padding:.5rem .9rem; font-size:.82rem; }
  /* legal pages carry no button, so the wordmark can run larger there */
  .start .header--center .brand--shine{ width:clamp(150px, 52vw, 210px); }
}
/* Eastwood Studio wordmark. The amber sweep used to loop forever; a logo that
   never stops animating is the same tell as the old eyebrows, so it now plays
   ONCE on load and settles to solid ink ("both" holds the end frame). */
/* One header size across every page (start + all three legal pages), a step up
   from the old legal-page size. Ratio tracks wordmark.png at 1608x368 (4.37:1). */
.brand--shine{ display:block; width:260px; height:60px;
  -webkit-mask:url(../wordmark.png) center/contain no-repeat; mask:url(../wordmark.png) center/contain no-repeat;
  background:linear-gradient(100deg, var(--ink) 0 42%, var(--amber) 50%, var(--ink) 58% 100%);
  background-size:230% 100%; animation:tagShine 4.5s linear 1 both; }
@media(prefers-reduced-motion:reduce){ .brand--shine{ animation:none; background:var(--ink); } }
.footer__brand .brand--shine{ width:200px; height:46px; margin-left:-13px; }
/* calmer, consistent heading scale across the start page (hero was blasting) */
.page-hero .h-lg{ font-size:clamp(2rem,4.2vw,3.3rem); text-wrap:balance; }
/* one line on web (font scales with the viewport so it never overflows);
   below 900px it wraps, balanced, so no lone "Let's make". */
@media(min-width:900px){ .page-hero .h-lg{ white-space:nowrap; } }
/* let the hero copy use the full width on web; wraps naturally on narrow */
.page-hero .lede{ max-width:none; }

/* ==========================================================================
   AS SEEN IN — marquee
   ========================================================================== */
.seen{ padding:clamp(2.5rem,6vh,4rem) 0; border-block:1px solid var(--line); background:var(--cream); }
.seen__label{ text-align:center; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); margin-bottom:2rem; }
.marquee{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
/* JS-driven belt (assets/js/site.js): seamless loop + wheel-scroll on hover.
   No CSS animation (the old -50% keyframe left gaps + stuck on mobile hover). */
.marquee__track{ display:flex; width:max-content; will-change:transform; }
/* Even RHYTHM, not just an even gap. The logos vary wildly in width (the Sony
   lockup is ~3x a square mark), so a plain gap leaves the wide ones crowded and
   the small ones marooned. Each logo gets an equal-width slot and is centred in
   it, so the spacing between marks reads consistent whatever their shape.
   gap and padding-right MUST stay equal — site.js loops the belt by exact set
   width, and the padding is what forms the gap across the seam. */
.marquee__set{ display:flex; align-items:center;
  gap:clamp(2.25rem,4.5vw,4rem); padding-right:clamp(2.25rem,4.5vw,4rem); }
/* Equal WHITESPACE between logos, which is what the eye actually reads as even
   spacing. An earlier version gave every logo an equal-width slot instead —
   that makes the CENTRES evenly spaced, but since the logos are different
   widths the leftover padding differs, so the visible gaps swung 60px to 95px.
   Natural widths + one flex gap makes every edge-to-edge gap identical by
   construction. Sony is sized by height (below) so it can't run away. */
.logo{ flex:0 0 auto; color:var(--ink); opacity:.5; transition:opacity .3s var(--ease);
  display:inline-flex; align-items:center; height:48px; }
.marquee:hover .logo{ opacity:.4; }
.marquee .logo:hover{ opacity:1; }
/* recognisable monochrome renditions (swap for official SVGs when available) */
.logo--bbc{ gap:5px; }
.logo--bbc b{ background:var(--ink); color:var(--cream); font-weight:700; font-size:1.15rem;
  width:1.5em; height:1.5em; display:grid; place-items:center; letter-spacing:0; }
.logo--sky{ background:var(--ink); color:var(--cream); border-radius:7px; padding:.3em .6em;
  font-weight:400; font-size:1.05rem; letter-spacing:.01em; }
.logo--sky b{ font-weight:700; }
.logo--sun{ background:var(--ink); color:var(--cream); font-style:italic; font-weight:700;
  font-size:1.25rem; padding:.12em .5em; letter-spacing:-.01em; }
.logo--google{ font-weight:600; font-size:1.5rem; letter-spacing:-.02em; }
/* Mark-only logos (Anthropic, OpenAI). These used to be mark + wordmark
   lockups; the names are gone and the marks stand alone, so they're sized up
   from the old 23px lockup height to sit level with the other square marks
   (VW is 41px) rather than looking like afterthoughts. Both are 1:1 viewBoxes. */
/* Mark-only logos (Anthropic, OpenAI). Both are single dense glyphs, so they
   sit at roughly the Google G's 31px rather than the height of the bigger
   badge-style marks — pushed larger they dominate the whole strip. */
.logo--mark img{ height:29px; width:auto; display:block; }
/* The Hormones Nurse — real circular logo (our project) */
.logo--thn img{ height:44px; width:auto; display:block; border-radius:50%;
  filter:grayscale(1); transition:filter .35s var(--ease); }
.marquee .logo--thn:hover img{ filter:none; }
/* Guardamar Jetski — real badge logo (our project); grayscale in the strip,
   full colour on hover. */
.logo--guarda img{ height:46px; width:auto; display:block; border-radius:50%;
  filter:grayscale(1); transition:filter .35s var(--ease); }
.marquee .logo--guarda:hover img{ filter:none; }
/* The Gap Partnership — ink lockup (our work) */
.logo--tgp img{ height:26px; width:auto; display:block; }
/* Google — the colour G, grayscale in the strip, colour on hover */
.logo--g img{ height:31px; width:auto; display:block; filter:grayscale(1); transition:filter .35s var(--ease); }
.marquee .logo--g:hover img{ filter:none; }
/* Sony Interactive Entertainment / Volkswagen / British Lung Foundation
   greyscale in the muted strip, true colour on hover (matches BodyFit + Google) */
/* Sony is a wide horizontal lockup: at a height matched to the round marks it
   ran ~145px wide and dominated the row. Driven by height so it lands ~112px
   naturally, no width cap needed (a cap would letterbox it inside its box). */
.logo--sony img{ height:41px; width:auto; display:block; filter:grayscale(1); transition:filter .35s var(--ease); }
.logo--vw img{ height:41px; width:auto; display:block; filter:grayscale(1); transition:filter .35s var(--ease); }
/* Swissport — emblem only (no wordmark). It's a solid filled shape, so it reads
   heavier than the line-art marks; sized down accordingly to balance the row. */
.logo--swissport img{ height:34px; width:auto; display:block; filter:grayscale(1); transition:filter .35s var(--ease); }
.marquee .logo--swissport:hover img{ filter:none; }
.marquee .logo--sony:hover img,
.marquee .logo--vw:hover img{ filter:none; }
/* deep-link anchors: clear the sticky start-page header when jumping to a section */
[id]{ scroll-margin-top:clamp(2rem,9vh,6.5rem); }

/* ==========================================================================
   CONTENT BLOCKS
   ========================================================================== */
.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.stack > * + *{ margin-top:1.1rem; }

/* generative flow-field backdrop (landing: who-we-are -> cta band) */
.flow-zone{ position:relative; overflow:hidden; }
.flow-fx{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none; }
.flow-zone > section{ position:relative; z-index:1; }

/* who-we-are: kinetic manifesto with animated highlighter-marker sweeps */
.who-manifesto{ text-align:center; }
.manifesto{ font-weight:600; letter-spacing:-.02em; line-height:1.3;
  font-size:clamp(1.6rem,3.5vw,2.7rem); max-width:26ch; margin:0 auto; color:var(--ink); }
.manifesto mark{ color:inherit; padding:0 .06em;
  background:linear-gradient(rgba(229,141,27,.42), rgba(229,141,27,.42)) no-repeat left 86%;
  background-size:0% .4em; transition:background-size .65s var(--ease-out); }
.who-manifesto.in .manifesto mark{ background-size:100% .4em; }
.who-manifesto.in .manifesto mark:nth-of-type(1){ transition-delay:.2s; }
.who-manifesto.in .manifesto mark:nth-of-type(2){ transition-delay:.55s; }
.who-manifesto.in .manifesto mark:nth-of-type(3){ transition-delay:.9s; }
@media(prefers-reduced-motion:reduce){ .manifesto mark{ transition:none; background-size:100% .4em; } }

/* centred section head (what we do) */
.section-head--center{ text-align:center; margin-bottom:clamp(1rem,2vh,1.5rem); }

/* legal hero (privacy/terms/cookies) — centred, amber dot + scramble title */
.legal-hero{ text-align:center; padding-top:clamp(1.25rem,3vh,2.5rem); padding-bottom:clamp(1.25rem,3vh,2.25rem); }
.legal-hero .h-lg{ font-size:clamp(2.4rem,6vw,4rem); }
.scramble-live{ color:var(--amber); }

/* services / offer list */
.offer{ border-top:1px solid var(--line); }
.offer__row{ display:grid; grid-template-columns:2.6rem 1fr auto; gap:1.2rem; align-items:baseline;
  padding:1.6rem 0; border-bottom:1px solid var(--line); }
.offer__n{ color:var(--amber); font-style:italic; font-size:.95rem; }
.offer__t{ font-size:clamp(1.2rem,2.2vw,1.7rem); font-weight:500; line-height:1.15; }
.offer__d{ color:var(--ink-70); font-weight:300; max-width:46ch; }
/* ---- elevated services ("what we do") -------------------------------- */
.svcs{ margin-top:2.4rem; border-top:1px solid var(--line); }
/* svc uses the shared [data-reveal] fade-and-rise (reliable, like the cards);
   the elevation is the ghost number, parallax and amber hover panel. */
.svc{
  position:relative; display:grid; grid-template-columns:3rem 1fr auto; align-items:center; gap:1.6rem;
  padding:2.1rem 1.4rem; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink); overflow:hidden; isolation:isolate;
}
/* huge parallax outline number drifting behind (site.js data-parallax) */
.svc__ghost{
  position:absolute; right:2.5rem; top:50%; z-index:0; transform:translateY(-50%);
  font-size:clamp(3.5rem,10vw,8rem); font-weight:700; line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(22,20,15,.09); pointer-events:none;
  transition:-webkit-text-stroke-color .4s var(--ease);
}
/* amber panel that slides into frame on hover */
.svc__fill{
  position:absolute; inset:0; z-index:0; background:var(--amber);
  transform:translateX(-101%); transition:transform .55s var(--ease-out); pointer-events:none;
}
.svc:hover .svc__fill, .svc:focus-visible .svc__fill{ transform:translateX(0); }
.svc__num, .svc__body, .svc__arrow{ position:relative; z-index:1; }
.svc__num{ font-style:italic; color:var(--amber); font-size:1rem; transition:color .4s var(--ease); }
.svc__title{ display:block; font-size:clamp(1.35rem,2.6vw,2rem); font-weight:600; line-height:1.1; letter-spacing:-.01em; }
.svc__desc{ display:block; margin-top:.4rem; color:var(--ink-70); font-weight:300; transition:color .4s var(--ease); }
.svc__arrow{ font-size:1.5rem; transition:transform .4s var(--ease-out); }
.svc:hover .svc__num, .svc:focus-visible .svc__num{ color:var(--ink); }
.svc:hover .svc__desc, .svc:focus-visible .svc__desc{ color:rgba(22,20,15,.8); }
.svc:hover .svc__arrow, .svc:focus-visible .svc__arrow{ transform:translateX(10px); }
.svc:hover .svc__ghost, .svc:focus-visible .svc__ghost{ -webkit-text-stroke-color:rgba(22,20,15,.22); }
@media(max-width:760px){
  /* no hover on touch: drop the clashing ghost number, show the arrow, and
     flash the amber panel on tap so the rows still feel alive. */
  .svc{ grid-template-columns:auto 1fr auto; gap:.9rem; padding:1.5rem .1rem; }
  .svc__ghost{ display:none; }
  .svc__arrow{ display:inline; font-size:1.15rem; color:var(--taupe); transition:transform .3s var(--ease); }
  .svc__title{ font-size:1.2rem; }
  .svc:active .svc__fill{ transform:translateX(0); }
  .svc:active .svc__num{ color:var(--ink); }
  .svc:active .svc__arrow{ transform:translateX(6px); color:var(--ink); }
}
@media(max-width:760px){ .offer__row{ grid-template-columns:2rem 1fr; } .offer__d{ grid-column:2; } }

/* stat / feature cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card{ border:1px solid var(--line); border-radius:14px; padding:1.8rem; background:rgba(255,255,255,.4);
  transition:transform .3s var(--ease), border-color .3s var(--ease); }
.card:hover{ transform:translateY(-3px); border-color:var(--taupe); }
.card h3{ font-weight:600; font-size:1.15rem; margin-bottom:.5rem; }
.card p{ color:var(--ink-70); font-weight:300; font-size:.98rem; }
@media(max-width:860px){ .cards{ grid-template-columns:1fr; } }

/* --- big CTA band ------------------------------------------------------ */
.cta-band{ background:var(--ink); color:var(--cream); border-radius:24px;
  padding:clamp(1.9rem,4vw,3.2rem); text-align:center; position:relative; overflow:hidden; }
/* static glow: z-index 0, kept only as a no-WebGL fallback (the canvas covers it) */
.cta-band::after{ content:""; position:absolute; width:60%; height:160%; right:-10%; top:-30%; z-index:0;
  background:radial-gradient(circle,rgba(229,141,27,.35),transparent 62%); pointer-events:none; }
/* WebGL "liquid light" fills the band (assets/js/cta.js); text stays above it */
.cta-fx{ position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; }
.cta-band > *:not(.cta-fx){ position:relative; z-index:2; }
.cta-band .h-md{ color:var(--cream); position:relative; }
.cta-band p{ color:rgba(250,248,243,.75); font-weight:300; max-width:44ch; margin:1rem auto 0; position:relative; }
.cta-band .cta-row{ margin-top:1.5rem; position:relative; }
.cta-band .btn--ghost{ color:var(--cream); border-color:rgba(250,248,243,.35); }
.cta-band .btn--ghost:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* --- booking options (start page) ------------------------------------- */
.book-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.book{ border:1px solid var(--line); border-radius:18px; padding:2rem; background:rgba(255,255,255,.5);
  display:flex; flex-direction:column; gap:.8rem; transition:transform .3s var(--ease), border-color .3s var(--ease); }
.book:hover{ transform:translateY(-3px); border-color:var(--amber); }
.book__tag{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); }
.book h3{ font-weight:600; font-size:1.5rem; }
.book p{ color:var(--ink-70); font-weight:300; flex:1; }
.book .btn{ align-self:flex-start; margin-top:.4rem; }
@media(max-width:760px){ .book-grid{ grid-template-columns:1fr; } }

/* ===== Kota-style stacking cards: calendar -> "drop us a line" =========== */
/* Each card is sticky; the next scrolls up and covers it while the outgoing
   one recedes + desaturates behind (scroll-driven, assets/js/stack.js). */
.stack{ position:relative; }
.stack__card{ position:sticky; top:clamp(1rem,6vh,4rem);
  width:min(100%, 1040px); margin-inline:auto;
  background:#fffdf8; border:1px solid var(--line); border-radius:28px;
  padding:clamp(1.6rem,4vw,3.25rem);
  box-shadow:0 40px 90px -55px rgba(22,20,15,.45);
  transform-origin:50% 30%; will-change:transform, filter; }
.stack__card + .stack__card{ margin-top:clamp(3rem,12vh,8rem); }
@media(max-width:760px){
  /* On phones the cards are taller than the screen, so the sticky-stack effect
     would let the next card slide up and hide the lower form fields. Drop the
     stacking here: each card sits in normal flow, full height, nothing covered. */
  .stack__card{ position:static; border-radius:20px; padding:1.4rem 1.1rem;
    transform:none !important; filter:none !important; }
  .stack__card + .stack__card{ margin-top:clamp(1.6rem,5vh,3rem); }
}

/* booking card — narrower so it hugs the calendar (no dead side space) */
.stack__card--cal{ width:min(100%, 780px); }
.book-cal__head{ text-align:center; margin:0 auto clamp(1rem,2.5vh,1.6rem); }
.book-cal__head .h-md{ white-space:nowrap; font-size:clamp(1.6rem,3vw,2.3rem); }
.book-cal__head p{ color:var(--ink-70); font-weight:300; margin-top:.5rem; font-size:1.05rem; }
.book-cal{ position:relative; width:min(100%, 640px); margin-inline:auto; }

/* --- the scheduler ------------------------------------------------------
   Calendly is a heavy third-party embed and we can't make their bundle
   smaller, so the box is never allowed to be empty while it arrives. The
   skeleton below sits on top until the iframe fires load (assets/js/cal.js),
   then they cross-fade. Height is pinned so nothing jumps on the swap. */
.cal{ position:relative; min-height:620px; border-radius:12px; overflow:hidden; }
/* initInlineWidget({parentElement}) appends a BARE, class-less <iframe> straight
   into this box — there is no .calendly-inline-widget wrapper to hang styles on.
   Left alone the iframe takes the browser default 150px and the calendar renders
   as an unusable letterbox, so it gets sized here explicitly. */
/* Calendly's own container carries the height inline; this just backs it up.
   Their CSS sizes the iframe inside it — do not size the iframe here. */
.cal .calendly-inline-widget{ min-width:320px; height:620px; }
/* their off-brand blue dot spinner: our skeleton already covers that window */
.cal .calendly-spinner{ display:none; }

/* the shape of a calendar, not a spinner: it reads as "your calendar is
   arriving", where a blank rectangle reads as "this page is broken" */
/* content is centred in the box rather than stacked at the top: the real widget
   is 620px tall and the placeholder shapes are not, so centring splits the
   slack evenly instead of leaving one dead half underneath */
.cal__skeleton{ position:absolute; inset:0; z-index:2; padding:1.7rem;
  display:flex; flex-direction:column; justify-content:center; gap:1.3rem;
  background:var(--cream); border:1px solid var(--line); border-radius:12px;
  /* visibility is delayed by the length of the fade, so the skeleton actually
     cross-fades out rather than popping, but still leaves the a11y tree */
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
  pointer-events:none; }   /* purely decorative: must never intercept a click */
.cal.is-ready .cal__skeleton, .cal.is-failed .cal__skeleton{ opacity:0; visibility:hidden; }
.cal__sk-body{ display:grid; grid-template-columns:1.35fr 1fr; gap:1.7rem; }
.cal__sk-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; }
.cal__sk-grid span{ aspect-ratio:1; border-radius:7px; }
.cal__sk-times{ display:flex; flex-direction:column; gap:.6rem; }
.cal__sk-times span{ height:38px; border-radius:8px; }
.cal__sk-title{ height:15px; width:38%; border-radius:999px; }
.cal__sk-bar{ height:10px; width:48%; border-radius:999px; margin-bottom:1.1rem; }
/* one shared sweep so the whole panel breathes together rather than flickering */
.cal__sk-title, .cal__sk-bar, .cal__sk-grid span, .cal__sk-times span{
  background:linear-gradient(100deg, rgba(22,20,15,.055) 0 40%, rgba(22,20,15,.105) 50%, rgba(22,20,15,.055) 60% 100%);
  background-size:230% 100%; animation:calShimmer 1.9s linear infinite; }
@keyframes calShimmer{ 0%{ background-position:150% 0; } 100%{ background-position:-50% 0; } }
@media(prefers-reduced-motion:reduce){
  .cal__sk-title, .cal__sk-bar, .cal__sk-grid span, .cal__sk-times span{ animation:none; }
}
.cal__note{ text-align:center; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--taupe); margin-top:.6rem; }
/* only surfaces if the embed genuinely can't load (blocked, offline, error).
   Sits in the same box the skeleton vacated, so the card never degrades to a
   620px empty rectangle with the way out hidden below the fold. */
.cal__fallback{ position:absolute; inset:0; z-index:3; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
  text-align:center; padding:1.7rem;
  background:var(--cream); border:1px solid var(--line); border-radius:12px; }
.cal.is-failed .cal__fallback{ display:flex; }
.cal__fallback p{ color:var(--ink-70); font-weight:300; }
@media(max-width:560px){
  .cal__sk-body{ grid-template-columns:1fr; }
  .cal__sk-times{ display:none; }
}
@media(max-width:520px){ .book-cal__head .h-md{ white-space:normal; } }
/* mobile-only "keep scrolling" cue under the booking card */
.scroll-cue{ display:none; }
@media(max-width:760px){
  .scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:.35rem; margin-top:1.6rem;
    color:var(--ink-50); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
  .scroll-cue__chev{ width:22px; height:22px; color:var(--amber); animation:scrollBob 1.6s var(--ease-out) infinite; }
}
@keyframes scrollBob{ 0%,100%{ transform:translateY(-2px); opacity:.55; } 50%{ transform:translateY(5px); opacity:1; } }
@media(prefers-reduced-motion:reduce){ .scroll-cue__chev{ animation:none; } }

/* form card (second in the stack) — intro top-aligned to the form, calmer title */
.stack__card--form .split{ align-items:start; }
.stack__card--form .h-md{ font-size:clamp(1.6rem,3vw,2.3rem); }
.stack__card--form .lede{ margin-top:1.1rem; }

/* pulsing cue down to the FAQ — large, centred in the form card's empty space */
.faq-cue{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.2rem;
  margin-top:clamp(2rem,7vh,4.5rem); text-decoration:none; color:var(--ink); }
.faq-cue__btn{ position:relative; flex:0 0 auto;
  width:clamp(130px,17vw,180px); height:clamp(130px,17vw,180px); display:grid; place-items:center; }
.faq-cue__fx{ position:absolute; inset:0; width:100%; height:100%; }
.faq-cue__arrow{ position:relative; width:clamp(42px,5vw,58px); height:clamp(42px,5vw,58px);
  color:var(--amber); animation:cueBob 1.8s var(--ease-out) infinite; }
@keyframes cueBob{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(5px); } }
.faq-cue__label{ font-size:1.02rem; line-height:1.55; color:var(--ink-70); }
.faq-cue__label em{ font-style:normal; font-weight:600; color:var(--ink); font-size:1.1rem;
  border-bottom:1px solid var(--line); transition:border-color .25s var(--ease); }
.faq-cue:hover .faq-cue__label em{ border-color:var(--amber); }

/* FAQ card (third in the stack) */
.faq__head{ text-align:center; margin:0 auto clamp(1.25rem,3vh,2rem); }
.faq__head .h-md{ font-size:clamp(1.6rem,3vw,2.3rem); }
.faq__head p{ color:var(--ink-70); font-weight:300; margin-top:.5rem; font-size:1.05rem; }
.faq{ max-width:820px; margin-inline:auto; }
.faq__item{ border:1px solid var(--line); border-radius:14px; background:rgba(22,20,15,.02);
  margin-bottom:.7rem; transition:border-color .3s var(--ease), background .3s var(--ease); }
.faq__item.open{ border-color:rgba(229,141,27,.55); background:rgba(229,141,27,.05); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:0; cursor:pointer; text-align:left; font:inherit; color:var(--ink);
  font-weight:500; font-size:clamp(1rem,1.5vw,1.12rem); padding:1.15rem 1.3rem; }
.faq__icon{ position:relative; flex:0 0 auto; width:18px; height:18px;
  transition:transform .35s var(--ease); }
.faq__icon::before, .faq__icon::after{ content:""; position:absolute; left:50%; top:50%;
  background:var(--amber); border-radius:2px; transition:transform .35s var(--ease); }
.faq__icon::before{ width:16px; height:2px; transform:translate(-50%,-50%); }
.faq__icon::after{ width:2px; height:16px; transform:translate(-50%,-50%); }
.faq__item.open .faq__icon::after{ transform:translate(-50%,-50%) scaleY(0); }  /* + -> - */
/* answer opens via grid-rows (no JS height measuring) */
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease-out); }
.faq__item.open .faq__a{ grid-template-rows:1fr; }
.faq__a-inner{ overflow:hidden; }
.faq__a p{ color:var(--ink-70); font-weight:300; line-height:1.6; padding:0 1.3rem 1.25rem; max-width:64ch; }
@media(prefers-reduced-motion:reduce){ .faq-cue__arrow{ animation:none; } }

/* Eastwood + — premium dark care-plan card: live amber caustics + 3D pointer tilt */
.plan-wrap{ perspective:1300px; }
.plan{ position:relative; overflow:hidden; width:min(100%,1040px); margin-inline:auto;
  background:var(--ink); color:var(--cream); border-radius:28px;
  padding:clamp(1.5rem,2.6vw,2.3rem) clamp(1.9rem,4vw,3.4rem); box-shadow:0 50px 110px -55px rgba(22,20,15,.65);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  transform-style:preserve-3d; transition:transform .25s var(--ease-out); will-change:transform; }
.plan__fx{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; }
/* soft scrim keeps the copy crisp over the moving light */
.plan::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(22,20,15,.8) 0%, rgba(22,20,15,.52) 55%, rgba(22,20,15,.36) 100%); }
.plan > *:not(.plan__fx){ position:relative; z-index:1; }
.plan__main{ grid-column:1; grid-row:1; }
.plan__list{ grid-column:2; grid-row:1; }
.plan__note{ grid-column:1 / -1; grid-row:2; }
.plan .h-md{ color:var(--cream); font-size:clamp(1.9rem,3.6vw,2.8rem); }
.plan .h-md .amber{ color:var(--amber); }
.plan__tag{ color:rgba(250,248,243,.82); font-weight:300; margin-top:.9rem; max-width:46ch; }
.plan__price{ display:flex; align-items:baseline; gap:.5rem; margin:1.5rem 0 .35rem; }
.plan__amt{ font-size:clamp(2.1rem,4.6vw,3.1rem); font-weight:500; letter-spacing:-.01em; line-height:1; color:var(--cream); }
.plan__cur{ font-size:.6em; font-weight:400; margin-right:.28em; color:rgba(250,248,243,.72); }
.plan__per{ color:rgba(250,248,243,.6); font-weight:400; }
.plan__anchor{ color:var(--amber); font-size:.9rem; font-weight:500; margin-bottom:1.5rem; }
.plan__list{ list-style:none; display:grid; gap:.95rem; }
.plan__list li{ position:relative; padding-left:2rem; color:rgba(250,248,243,.9); font-weight:300; line-height:1.4; }
.plan__list li::before{ content:""; position:absolute; left:4px; top:.3em; width:6px; height:11px;
  border:solid var(--amber); border-width:0 2px 2px 0; transform:rotate(45deg); }
.plan__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:.65rem; }
.plan__micro{ color:rgba(250,248,243,.55); font-size:.82rem; }
.plan__note{ grid-column:1 / -1; margin-top:.4rem; padding-top:1.3rem;
  border-top:1px solid rgba(250,248,243,.14); color:rgba(250,248,243,.55); font-size:.9rem; }
@media(max-width:760px){ .plan{ grid-template-columns:1fr; gap:1.4rem; transform:none !important; }
  .plan__main, .plan__list, .plan__note{ grid-column:1; grid-row:auto; } }

/* --- form -------------------------------------------------------------- */
.form-card{ background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:18px;
  padding:clamp(1.5rem,3vw,2.4rem); box-shadow:0 30px 60px -40px rgba(22,20,15,.25); }
.form{ display:grid; gap:1.15rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); }
.field input, .field textarea{ font:inherit; color:var(--ink); background:var(--cream);
  border:1px solid var(--line); border-radius:11px; padding:.95rem 1.1rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-30); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--amber);
  box-shadow:0 0 0 4px rgba(229,141,27,.14); }
.field textarea{ resize:vertical; min-height:130px; }
/* inline confirmation after the enquiry form emails us */
.form__thanks{ font-size:1.08rem; font-weight:400; color:var(--ink); line-height:1.6; padding:1.25rem 0; text-wrap:balance; }

/* --- footer ------------------------------------------------------------ */
.footer{ border-top:1px solid var(--line); padding:clamp(1.5rem,3vh,2.25rem) 0 2rem; background:var(--cream); }
.footer__top{ display:grid; grid-template-columns:1.1fr 2fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.footer__brand img{ height:30px; width:auto; }
.footer__brand p{ margin-top:1rem; max-width:32ch; color:var(--ink-70); font-weight:300; font-size:1rem; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.footer__col h4{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); margin-bottom:1rem; }
.footer__col a{ display:block; text-decoration:none; color:var(--ink-70); font-size:.95rem; padding:.28rem 0; transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--ink); }
.footer__wordmark{ margin:clamp(2.5rem,6vh,4rem) 0 clamp(1.5rem,4vh,2.5rem); }
.footer__wordmark img{ width:100%; height:auto; display:block; }
.footer__base{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap;
  margin-top:1.75rem; padding-top:1.75rem; border-top:1px solid var(--line); }
.footer__pay{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.footer__pay .lbl{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); margin-right:.3rem; }
.footer__pay img{ width:58px; height:38px; object-fit:contain; background:#fff; border:1px solid var(--line);
  border-radius:6px; padding:7px 10px; box-shadow:0 1px 3px rgba(22,20,15,.05); }
/* wide marks (Link, Amazon Pay) sit small under default padding — let them fill */
.footer__pay img.pay-lg{ padding:2px 4px; }
.footer__copy{ font-size:.78rem; color:var(--taupe); }
@media(max-width:760px){
  .footer__top{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr; gap:1.5rem 2rem; }
  /* clean vertical stack: payments, then the region switcher, then copyright */
  .footer__base{ flex-direction:column; align-items:flex-start; gap:1.6rem; }
  .footer__pay{ gap:.6rem; width:100%; }
  .footer__lang{ width:100%; padding-top:1.4rem; border-top:1px solid var(--line); }
  .footer__copy{ font-size:.74rem; }
}

/* --- prose (legal pages) — centred to match the hero ------------------- */
.prose{ max-width:64ch; margin-inline:auto; text-align:center; }
.prose p, .prose li{ color:var(--ink-70); font-weight:300; line-height:1.7; }
.prose h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:600; margin:2.4rem 0 .8rem; letter-spacing:-.01em; }
.prose p + p{ margin-top:1rem; }
.prose ul{ list-style:none; margin:.6rem 0 0; padding:0; }
.prose li{ margin:.3rem 0; }
.prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.prose .meta{ font-size:.82rem; color:var(--taupe); margin-bottom:2rem; }

/* ==========================================================================
   PAGE TRANSITION CURTAIN (Eastwood)
   ========================================================================== */
.page-veil{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; pointer-events:none;
  background:var(--cream); clip-path:inset(0 0 100% 0); will-change:clip-path; }
.page-veil::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 45%, rgba(229,141,27,.12), var(--cream) 72%); }
.page-veil__mark{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.5rem;
  opacity:0; transition:opacity 300ms var(--ease-out); }
/* wordmark with an amber shine sweeping across it */
.page-veil__logo-wrap{ position:relative; overflow:hidden; }
.page-veil__logo{ height:32px; width:auto; display:block; }
.page-veil__logo-wrap::after{ content:""; position:absolute; top:-12%; bottom:-12%; left:-70%; width:55%;
  background:linear-gradient(100deg, transparent, rgba(229,141,27,.55), transparent); transform:skewX(-16deg);
  animation:veilShine 1.5s var(--ease-out) infinite; }
@keyframes veilShine{ 0%{ left:-70%; } 65%,100%{ left:135%; } }
/* vibration pulse: concentric amber rings + breathing glow (no dot) */
.page-veil__pulse{ position:relative; width:96px; height:96px; }
.page-veil__pulse::before{ content:""; position:absolute; inset:0; margin:auto; width:66px; height:66px; border-radius:50%;
  background:radial-gradient(circle, rgba(229,141,27,.3), transparent 68%); animation:veilGlow 1.5s ease-in-out infinite; }
.page-veil__pulse i{ position:absolute; inset:0; margin:auto; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--amber); opacity:0; animation:veilPulse 1.5s var(--ease-out) infinite; }
.page-veil__pulse i:nth-child(2){ animation-delay:.5s; }
.page-veil__pulse i:nth-child(3){ animation-delay:1s; }
@keyframes veilPulse{ 0%{ transform:scale(.5); opacity:.75; } 100%{ transform:scale(3.4); opacity:0; } }
@keyframes veilGlow{ 0%,100%{ opacity:.5; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.08); } }
.page-veil.is-covering{ clip-path:inset(0 0 0 0); transition:clip-path 520ms var(--ease-out); }
.page-veil.is-enter-start{ clip-path:inset(0 0 0 0); transition:none; }
.page-veil.is-opening{ clip-path:inset(100% 0 0 0); transition:clip-path 640ms var(--ease-out); }
.page-veil.is-covering .page-veil__mark, .page-veil.is-enter-start .page-veil__mark{ opacity:1; }
.page-veil.is-opening .page-veil__mark{ opacity:0; transition-duration:220ms; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:820px){
  .split{ grid-template-columns:1fr; }
  .footer__top{ flex-direction:column; }
  .nav .menu{ display:none; position:absolute; top:100%; right:var(--edge); left:var(--edge);
    flex-direction:column; align-items:flex-start; gap:1.2rem; background:var(--cream);
    border:1px solid var(--line); border-radius:14px; padding:1.5rem; z-index:30; }
  .nav .menu.open{ display:flex; }
  .menu-toggle{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem; }
  .menu-toggle span{ width:26px; height:2px; background:var(--ink); display:block; }
}
@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
  .page-veil{ display:none !important; }
}