/* ==========================================================================
   E&M — Events & Management
   Rebuilt 2026-08-12. The original stylesheet was not in the handover.

   Palette recovered from serve.py's debug page, which was written in the
   site's own colours: ink #050309, paper #f2efe9, gold #dcc08c, violet
   #8a6fb0. Type is Instrument Serif over Inter, per the shell's font link.

   Two constraints this file is written against, both enforced by verify.py:
     - no backdrop-filter anywhere. Each one re-blurs a slice of an
       animating canvas every frame (check 19).
     - the selectors it greps for are written with no space before the
       opening brace, because its parser is literal. Do not add one, and do
       not name those selectors in a comment either — the grep reads
       comments too, and a mention here matches ahead of the real rule.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root{
  --ink:#050309;
  --ink-2:#0b0714;
  --ink-3:#140d22;
  --paper:#f2efe9;
  --paper-dim:#a49db4;
  --gold:#dcc08c;
  --gold-deep:#a8874f;
  --violet:#8a6fb0;
  --violet-deep:#4a3568;
  --ok:#7ddc9a;
  --bad:#ff6b6b;

  --line:rgba(242,239,233,.14);
  --line-soft:rgba(242,239,233,.07);

  --nav-h:78px;
  --rail-h:64px;
  --gut:clamp(20px,5vw,72px);
  --maxw:1440px;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ROAD MODE palette. The reference is a pale sky, not the ink the rest of
     the site uses, so it lives in its own tokens. To put the road back on a
     dark ground, change these four and BG in js/scene.js — nothing else
     reads them. */
  --sky-hi:#f2f5fb;      /* near-white, top-left of the gradient */
  --sky-lo:#8fa8e8;      /* periwinkle, bottom-right */
  --ink-hard:#10131c;    /* headline / active nav on the sky */
  --ink-soft:#6b7488;    /* secondary text on the sky */
}

@view-transition{ navigation:auto; }

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--ink);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* Must live here, not on body. `overflow-x` on body forces its
     `overflow-y` to compute to `auto`, which makes body its own scroll
     container — the window stops being the scroller, window.scrollY pins
     to 0, and every scroll-driven thing on the site silently dies. */
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.7;
  min-height:100vh;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background:var(--gold); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ------------------------------------------------------------ typography */
.h-display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem,7.2vw,6.4rem);
  line-height:.96;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.h-lg{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.9rem,4.1vw,3.5rem);
  line-height:1.06;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.label{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.4rem;
}
.label::before{
  content:"";
  display:inline-block;
  width:26px; height:1px;
  background:var(--gold-deep);
  vertical-align:middle;
  margin-right:.85rem;
}

/* ---------------------------------------------------------------- layout */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.content{ position:relative; z-index:2; }
.sec{ padding-block:clamp(64px,10vw,150px); position:relative; }
.sec__head{ max-width:60ch; margin-bottom:clamp(34px,5vw,64px); }
.sec__intro{ color:var(--paper-dim); margin-top:1.1rem; font-size:1.03rem; }

/* --------------------------------------------------------- skip / a11y */
.skip{
  position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--gold); color:var(--ink);
  padding:.7rem 1.2rem; font-weight:600; border-radius:3px;
  transition:top .2s var(--ease);
}
.skip:focus{ top:16px; }

/* ------------------------------------------------------ fixed scenery */
/* These four sit over the whole viewport. Every one is click-through —
   an invisible full-screen layer that still catches a pointer is the bug
   verify.py check 4 exists to prevent. */
.gl{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(138,111,176,.20), transparent 58%),
    radial-gradient(90% 70% at 12% 92%, rgba(168,135,79,.13), transparent 62%),
    radial-gradient(70% 90% at 50% 50%, rgba(74,53,104,.16), transparent 70%),
    var(--ink);
}
.sparkles{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:.55;
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.readbar{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(var(--read,0)); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--violet));
  z-index:60; pointer-events:none;
}

/* ------------------------------------------------------------- loader */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
body.is-entered .loader{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__fx{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.loader__inner{ position:relative; text-align:center; }
.loader__mark svg{ width:min(260px,52vw); height:auto; }
.loader__mark-text{
  font-family:var(--serif); font-size:76px; fill:none;
  stroke:var(--gold); stroke-width:.6;
  letter-spacing:.02em;
}
.loader__meter{ margin-top:1.6rem; display:grid; gap:.7rem; justify-items:center; }
.loader__bar{ width:min(220px,44vw); height:1px; background:var(--line); overflow:hidden; }
.loader__bar span{
  display:block; height:100%; width:0%;
  background:var(--gold); transition:width .3s linear;
}
.loader__count{
  font-size:.64rem; letter-spacing:.3em; color:var(--paper-dim);
  font-variant-numeric:tabular-nums;
}
.loader__count i{ font-style:normal; opacity:.5; }

/* ---------------------------------------------------------- custom cursor */
.cursor{
  position:fixed; top:0; left:0; z-index:300; pointer-events:none;
  mix-blend-mode:difference;
  transform:translate3d(-100px,-100px,0);
  will-change:transform;
}
.cursor__star{
  width:30px; height:30px; display:block;
  fill:var(--gold);
  transform:translate(-50%,-50%) scale(var(--cs,1)) rotate(var(--cr,0deg));
  transition:transform .3s var(--ease-out);
}
.cursor__star-x{ fill:var(--paper); }
.cursor__ring{
  position:absolute; top:0; left:0;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--gold-deep);
  transform:translate(-50%,-50%) scale(var(--crs,0));
  opacity:var(--cro,0);
  transition:transform .4s var(--ease-out),opacity .3s;
}
.cursor__label{
  position:absolute; top:26px; left:0;
  transform:translateX(-50%);
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
  opacity:var(--clo,0); transition:opacity .25s;
}
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* -------------------------------------------------------------- nav */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding-inline:var(--gut);
  /* A solid-to-transparent wash instead of a blur: same legibility, none
     of the per-frame cost of re-blurring the canvas underneath. */
  background:linear-gradient(180deg,rgba(5,3,9,.94) 0%,rgba(5,3,9,.72) 62%,transparent 100%);
}
.nav__logo{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--serif); font-size:1.5rem; letter-spacing:.02em;
  color:var(--paper);
}
.nav__logo:hover{ color:var(--gold); }
/* The mark inherits currentColor, so it inverts with the theme for free. */
.brandmark{
  width:1.5em; height:1.5em; flex:0 0 auto; display:block;
  overflow:visible;
}
.foot__mark{
  display:inline-flex; align-items:center; gap:.5rem;
}
.foot__mark .brandmark{ width:.85em; height:.85em; }
.nav__links{ display:flex; gap:2.1rem; margin-left:auto; }
.nav__links a{
  font-size:.74rem; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--paper-dim);
  position:relative; padding-block:.4rem;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease-out);
}
.nav__links a:hover,.nav__links a[aria-current]{ color:var(--paper); }
.nav__links a:hover::after,.nav__links a[aria-current]::after{
  transform:scaleX(1); transform-origin:0 50%;
}
.nav__cta{
  border:1px solid var(--gold-deep); color:var(--gold);
  padding:.62rem 1.35rem; border-radius:999px;
  font-size:.71rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.nav__cta:hover{ background:var(--gold); color:var(--ink); }

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
}

/* ------------------------------------------------------ mobile nav */
.navtoggle{
  position:fixed; top:calc(var(--nav-h)/2); right:var(--gut);
  transform:translateY(-50%);
  z-index:120; width:30px; height:18px; display:none;
}
.navtoggle span{
  position:absolute; left:0; width:100%; height:1.5px;
  background:var(--paper); transition:transform .4s var(--ease),opacity .3s;
}
.navtoggle span:nth-child(1){ top:0; }
.navtoggle span:nth-child(2){ top:8px; }
.navtoggle span:nth-child(3){ top:16px; }
.navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
@media (max-width:900px){ .navtoggle{ display:block; } }

.navmenu{
  position:fixed; inset:0; z-index:110;
  background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--gut);
  gap:2rem;
}
.navmenu[hidden]{ display:none; }
.navmenu nav{ display:grid; gap:.4rem; }
.navmenu nav a{
  font-family:var(--serif); font-size:clamp(2rem,9vw,3.2rem);
  line-height:1.16; color:var(--paper-dim);
}
.navmenu nav a[aria-current]{ color:var(--gold); }
.navmenu__foot{
  display:flex; gap:1.6rem; padding-top:1.6rem;
  border-top:1px solid var(--line);
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}

/* ------------------------------------------------------ back to top */
.totop{
  position:fixed; right:var(--gut); bottom:96px; z-index:45;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); color:var(--paper-dim);
  background:rgba(5,3,9,.7);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .4s,transform .4s var(--ease),color .3s,border-color .3s;
}
.totop.is-active{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ color:var(--gold); border-color:var(--gold-deep); }

/* -------------------------------------------------------- mobile cta */
.mobcta{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:none; grid-template-columns:repeat(3,1fr);
  background:var(--ink-2); border-top:1px solid var(--line);
}
.mobcta a{
  padding:1rem .5rem; text-align:center;
  font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--paper-dim);
}
.mobcta a.is-primary{ background:var(--gold); color:var(--ink); }
@media (max-width:760px){
  .mobcta{ display:grid; }
  .totop{ bottom:76px; }
}

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem; border-radius:999px;
  background:var(--gold); color:var(--ink);
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--gold);
  transition:transform .35s var(--ease-out),background .35s,color .35s,box-shadow .35s;
  will-change:transform;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px -12px rgba(220,192,140,.6);
}
.btn--ghost{
  background:transparent; color:var(--gold); border-color:var(--gold-deep);
}
.btn--ghost:hover{ background:rgba(220,192,140,.1); box-shadow:none; }

/* -------------------------------------------------------- page hero */
.sec--phero{ padding-top:calc(var(--nav-h) + clamp(56px,11vw,140px)); }
.phero__sub{
  max-width:56ch; margin-top:1.7rem;
  font-size:clamp(1rem,1.4vw,1.2rem); color:var(--paper-dim);
}
.phero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }
.phero__trust{
  display:flex; flex-wrap:wrap; gap:clamp(1.6rem,4vw,3.4rem);
  margin-top:3.2rem; padding-top:1.8rem; border-top:1px solid var(--line-soft);
}
.phero__trust li{ display:grid; gap:.2rem; }
.phero__trust b{
  font-family:var(--serif); font-size:1.9rem; font-weight:400; color:var(--gold);
}
.phero__trust span{
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-dim);
}

/* --------------------------------------------------------- marquee */
.marquee{
  overflow:hidden; padding-block:clamp(20px,3vw,38px);
  border-block:1px solid var(--line-soft);
  display:grid; gap:.4rem;
}
.marquee__row{ overflow:hidden; }
.marquee__track{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  will-change:transform;
}
.marquee__track span{
  font-family:var(--serif); font-size:clamp(1.5rem,3.6vw,2.9rem);
  color:var(--paper); opacity:.9; white-space:nowrap;
}
.marquee__row--alt .marquee__track span{
  color:transparent;
  -webkit-text-stroke:1px var(--gold-deep);
  opacity:.75;
}
.marquee__track i{ color:var(--gold); font-size:.7rem; font-style:normal; }

/* ----------------------------------------------------------- gcards */
.gcards{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.gcard{
  background:var(--ink);
  padding:clamp(1.6rem,3vw,2.6rem);
  display:grid; align-content:start; gap:.85rem;
  position:relative; overflow:hidden;
  transition:background .45s var(--ease);
}
.gcard::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(150deg,rgba(138,111,176,.16),transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
.gcard:hover{ background:var(--ink-2); }
.gcard:hover::before{ opacity:1; }
.gcard > *{ position:relative; }
.gcard__no{
  font-family:var(--serif); font-size:.95rem; color:var(--gold-deep);
  letter-spacing:.1em;
}
.gcard h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.25rem,2vw,1.65rem); line-height:1.2;
}
.gcard p{ color:var(--paper-dim); font-size:.95rem; }
.gcard__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.gcard__tags li{
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line);
  padding:.28rem .6rem; border-radius:999px;
}

/* ------------------------------------------------------------ gtiles */
.gtiles{
  display:grid; gap:clamp(14px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
}
.gtile{
  position:relative; margin:0; overflow:hidden;
  border:1px solid var(--line-soft);
  background:var(--ink-2);
}
.gtile img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/5;
  transition:transform 1.1s var(--ease-out);
}
.gtile:hover img{ transform:scale(1.045); }
.gtile figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem 1.3rem 1.15rem;
  display:grid; gap:.2rem;
  background:linear-gradient(0deg,rgba(5,3,9,.94),rgba(5,3,9,.55) 55%,transparent);
}
.gtile figcaption b{
  font-family:var(--serif); font-weight:400; font-size:1.3rem;
}
.gtile figcaption span{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}

/* flip tiles ------------------------------------------------------- */
.gtile--flip{ perspective:1400px; background:none; border:0; }
.gtile__inner{
  position:relative; transform-style:preserve-3d;
  transition:transform .9s var(--ease-out);
  aspect-ratio:4/5;
}
.gtile--flip:hover .gtile__inner,
.gtile--flip:focus-within .gtile__inner{ transform:rotateY(180deg); }
.gtile__face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden; border:1px solid var(--line-soft);
}
.gtile__face--front{ background:var(--ink-2); }
.gtile__face--back{
  transform:rotateY(180deg);
  background:linear-gradient(155deg,var(--ink-3),var(--ink));
  padding:clamp(1.3rem,2.4vw,2rem);
  display:grid; align-content:center; gap:.85rem;
}

/* ------------------------------------------------------------- work */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; }
.filter{
  padding:.5rem 1.15rem; border-radius:999px;
  border:1px solid var(--line);
  font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-dim);
  transition:color .3s,border-color .3s,background .3s;
}
.filter:hover{ color:var(--paper); }
.filter.is-active{ background:var(--gold); border-color:var(--gold); color:var(--ink); }

.work{
  display:grid; gap:clamp(16px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  padding-inline:var(--gut);
  max-width:var(--maxw); margin-inline:auto;
}
.work__item{
  display:grid; gap:1.1rem;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
/* Filtered-out cards are removed from flow rather than greyed: verify.py
   check 13 rejects desaturating a photograph that is still on screen. */
.work__item.is-hidden{ display:none; }
.work__meta h3{
  font-family:var(--serif); font-weight:400; font-size:1.45rem;
}
.work__loc{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-top:.25rem;
}
.work__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.work__tags li{
  font-size:.6rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper-dim); border:1px solid var(--line-soft);
  padding:.24rem .55rem; border-radius:999px;
}

/* media flip ------------------------------------------------------- */
.media{ margin:0; perspective:1400px; }
.media__inner{
  position:relative; transform-style:preserve-3d;
  transition:transform .9s var(--ease-out);
  aspect-ratio:4/5;
}
.work__item:hover .media__inner,
.work__item:focus-within .media__inner{ transform:rotateY(180deg); }
.media__face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden; border:1px solid var(--line-soft);
}
.media__face--front{ background:var(--ink-2); }
.media__face--front img{ width:100%; height:100%; object-fit:cover; }
.media__face--back{
  transform:rotateY(180deg);
  background:linear-gradient(155deg,var(--ink-3),var(--ink));
  padding:clamp(1.3rem,2.4vw,2rem);
  display:grid; align-content:center; gap:.9rem;
}
.media__label{
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}
.media__brief{ font-size:.94rem; color:var(--paper); line-height:1.66; }
.media__stats{ display:flex; flex-wrap:wrap; gap:.4rem; }
.media__stats li{
  font-size:.6rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper-dim); border:1px solid var(--line);
  padding:.24rem .55rem; border-radius:999px;
}
.media__more{
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid var(--gold-deep);
  justify-self:start; padding-bottom:.2rem;
}

/* ------------------------------------------------------------- quick */
.quick{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:start;
}
.quick__copy p{ color:var(--paper-dim); margin-top:1.1rem; }
.quick__form{
  display:grid; gap:1rem;
  background:linear-gradient(155deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line-soft);
  padding:clamp(1.5rem,3vw,2.4rem);
}

/* ------------------------------------------------------------ fields */
.field{ display:grid; gap:.45rem; }
.field--full{ grid-column:1/-1; border:0; margin:0; padding:0; min-width:0; }
.field label,.field legend{
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-dim);
}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem;
  background:rgba(242,239,233,.04);
  border:1px solid var(--line);
  color:var(--paper); font-family:var(--sans); font-size:.95rem;
  border-radius:3px;
  transition:border-color .3s,background .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold-deep); background:rgba(242,239,233,.07);
}
.field textarea{ resize:vertical; min-height:110px; }
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--ink-2); color:var(--paper); }
.field__val{ color:var(--gold); font-weight:600; float:right; }

.field input[type=range]{
  -webkit-appearance:none; appearance:none;
  padding:0; height:2px; background:var(--line); border:0; border-radius:0;
}
.field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--gold); cursor:pointer; border:0;
}
.field input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--gold); cursor:pointer; border:0;
}

.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{ cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:.42rem .9rem; border-radius:999px;
  border:1px solid var(--line);
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper-dim);
  transition:background .3s,color .3s,border-color .3s;
}
.chip input:checked + span{
  background:var(--gold); border-color:var(--gold); color:var(--ink);
}
.chip input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }

/* -------------------------------------------------------------- form */
.form{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  max-width:900px;
}
.form__note{ font-size:.74rem; color:var(--paper-dim); margin-top:.7rem; }
.form__actions{ grid-column:1/-1; display:grid; justify-items:start; }
.form__ok{
  grid-column:1/-1;
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.2rem; border:1px solid var(--ok);
  background:rgba(125,220,154,.08); color:var(--ok);
}
.form__ok[hidden]{ display:none; }
.form__ok svg{ width:26px; height:26px; fill:none; stroke:var(--ok); stroke-width:3; }
/* the honeypot: present for bots, gone for people and screen readers */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{ border-color:var(--bad); }
.field__err{ font-size:.7rem; color:var(--bad); }

/* --------------------------------------------------------------- faq */
.faq{ max-width:80ch; border-top:1px solid var(--line-soft); }
.faq__item{ border-bottom:1px solid var(--line-soft); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:1.3rem 0; text-align:left;
  font-size:clamp(1rem,1.6vw,1.15rem); color:var(--paper);
  transition:color .3s;
}
.faq__q:hover{ color:var(--gold); }
.faq__q i{
  position:relative; flex:0 0 14px; width:14px; height:14px;
}
.faq__q i::before,.faq__q i::after{
  content:""; position:absolute; background:var(--gold);
  transition:transform .4s var(--ease);
}
.faq__q i::before{ top:50%; left:0; width:100%; height:1px; margin-top:-.5px; }
.faq__q i::after{ left:50%; top:0; height:100%; width:1px; margin-left:-.5px; }
.faq__item.is-open .faq__q i::after{ transform:scaleY(0); }
.faq__a{
  overflow:hidden; height:0;
  transition:height .45s var(--ease);
}
.faq__a p{
  padding-bottom:1.4rem; color:var(--paper-dim); max-width:70ch;
}

/* ------------------------------------------------------------- stats */
.stats{
  display:grid; gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
}
.stat{ display:grid; gap:.3rem; }
.stat b{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,5vw,4rem);
  color:var(--gold); line-height:1; font-variant-numeric:tabular-nums;
}
.stat i{ font-style:normal; color:var(--gold-deep); }
.stat span{
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-dim);
}
.stats__note{ margin-top:2rem; font-size:.78rem; color:var(--paper-dim); }

/* ------------------------------------------------------------ people */
.people{
  display:grid; gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  margin-top:clamp(2rem,4vw,3.4rem);
}
.person{
  border:1px solid var(--line-soft);
  background:linear-gradient(160deg,var(--ink-2),var(--ink));
  padding:clamp(1.6rem,3vw,2.4rem);
  display:grid; gap:.7rem; align-content:start;
}
.person__mark{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--gold-deep); color:var(--gold);
  font-family:var(--serif); font-size:1.3rem; letter-spacing:.04em;
  margin-bottom:.5rem;
}
.person h3{ font-family:var(--serif); font-weight:400; font-size:1.6rem; }
.person__role{
  font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.person p{ color:var(--paper-dim); font-size:.95rem; }
.person__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.6rem; }

/* -------------------------------------------------------------- tools */
.tools{ border:1px solid var(--line-soft); background:rgba(11,7,20,.7); }
.tools__tabs{
  display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line-soft);
}
.tools__tab{
  padding:1rem 1.5rem;
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-dim); position:relative;
  transition:color .3s;
}
.tools__tab::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0);
  transition:transform .4s var(--ease-out);
}
.tools__tab:hover{ color:var(--paper); }
.tools__tab.is-active{ color:var(--gold); }
.tools__tab.is-active::after{ transform:scaleX(1); }

.tool{ display:none; padding:clamp(1.4rem,3vw,2.4rem); }
.tool.is-active{ display:block; }
.tool__grid{
  display:grid; gap:clamp(1.6rem,4vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  align-items:start;
}
.tool__controls{ display:grid; gap:1.2rem; }
.tool__result{
  display:grid; gap:.55rem; justify-items:start;
  border:1px solid var(--line-soft);
  background:linear-gradient(160deg,var(--ink-3),var(--ink));
  padding:clamp(1.4rem,3vw,2rem);
}
.tool__label{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-dim);
}
.tool__figure{
  font-family:var(--serif); font-size:clamp(1.7rem,3.4vw,2.6rem);
  color:var(--gold); line-height:1.1;
}
.tool__per{ font-size:.85rem; color:var(--paper-dim); }
.tool__split{ display:grid; gap:.35rem; width:100%; margin:.7rem 0; }
.tool__split li{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.78rem; color:var(--paper-dim);
  padding-bottom:.35rem; border-bottom:1px solid var(--line-soft);
}
.tool__split li b{ color:var(--paper); font-weight:500; }
.tool__count{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.tool__filters{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  margin-bottom:1.6rem;
}
.donut{ width:150px; height:150px; margin-bottom:.6rem; }
.hamper{
  width:100%; aspect-ratio:16/9; margin-bottom:.6rem;
  border:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-content:center; justify-content:center;
  gap:.4rem; padding:.9rem;
  background:radial-gradient(70% 90% at 50% 20%,rgba(138,111,176,.2),transparent);
}
.hamper span{
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-deep);
  padding:.22rem .55rem; border-radius:999px;
}
.vlist{ display:grid; gap:.5rem; }
.vlist article{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.6rem 1.2rem;
  border:1px solid var(--line-soft); padding:1rem 1.2rem;
  transition:border-color .3s,background .3s;
}
.vlist article:hover{ border-color:var(--gold-deep); background:rgba(220,192,140,.04); }
.vlist h4{ font-family:var(--serif); font-weight:400; font-size:1.15rem; margin:0; }
.vlist p{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--paper-dim); }
.vlist b{ color:var(--gold); font-weight:500; font-size:.88rem; }

/* --------------------------------------------------------------- cta */
.cta{
  padding-block:clamp(70px,11vw,160px);
  text-align:center;
  border-top:1px solid var(--line-soft);
}
.cta__sub{
  max-width:52ch; margin:1.4rem auto 0; color:var(--paper-dim);
  font-size:clamp(1rem,1.3vw,1.15rem);
}
.cta__actions{
  display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.3rem;
}
.cta .label::before{ display:none; }

/* ------------------------------------------------------------- legal */
.legal{ max-width:72ch; margin-top:2.6rem; }
.legal h2{
  font-family:var(--serif); font-weight:400; font-size:1.5rem;
  color:var(--gold); margin-top:2.4rem; margin-bottom:.7rem;
}
.legal p{ color:var(--paper-dim); margin-bottom:1rem; }
.legal a{ color:var(--gold); border-bottom:1px solid var(--gold-deep); }
.legal__note{
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line-soft);
  font-size:.82rem; font-style:italic;
}

/* ------------------------------------------------------------ footer */
.foot{
  border-top:1px solid var(--line);
  padding-block:clamp(48px,7vw,86px) 2rem;
  background:linear-gradient(180deg,transparent,rgba(11,7,20,.85));
}
.foot__top{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);
}
.foot__mark{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3rem,8vw,6rem); line-height:.9; color:var(--gold);
}
.foot__cols{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));
}
.foot__cols h3{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.8rem; font-weight:600;
}
.foot__cols p{ color:var(--paper-dim); font-size:.9rem; line-height:2; }
.foot__cols a:hover{ color:var(--gold); }
.foot__bot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:clamp(2.4rem,5vw,4rem); padding-top:1.6rem;
  border-top:1px solid var(--line-soft);
  font-size:.72rem; color:var(--paper-dim);
}
@media (max-width:760px){
  .foot__top{ grid-template-columns:1fr; }
}

/* ======================================================================
   THE LOCKED HOME PAGE
   One pinned viewport, six chapters, driven by a tall scroll proxy.
   Contract (verify.py checks 10, 12, 15, 16, 17):
     proxy height = (chapters - 1) * PER + innerHeight, so the first and
     last chapters sit exactly at the two ends with no dead scroll.
   ====================================================================== */
.fixed-container{
  position:fixed; inset:0; z-index:2;
  overflow:hidden;
}
/* Nav and rail need protection from a bright panel drifting under them. */
.fixed-container::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    linear-gradient(180deg,rgba(5,3,9,.9) 0,transparent var(--nav-h)),
    linear-gradient(0deg,rgba(5,3,9,.9) 0,transparent var(--rail-h));
}
.scroll-proxy{ width:1px; pointer-events:none; }

/* Six chapters stack on the same pinned viewport. Off-chapters must be
   untouchable, not merely invisible: their paragraphs sit directly over the
   active chapter's buttons and will swallow the clicks. The script grants
   pointer-events back to whichever chapter is at rest. */
.chapter{
  position:absolute; inset:0;
  display:grid; align-content:center;
  padding:calc(var(--nav-h) + 4vh) var(--gut) calc(var(--rail-h) + 4vh);
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.chapter__inner{
  position:relative;
  width:100%; max-width:var(--maxw); margin-inline:auto;
}
/* The reading scrim. A lit panel behind body text measured 1.05:1 without
   it. Peaks at 82% directly behind the text and fades to nothing at the
   edges so it never reads as a box. */
.chapter__inner::before{
  content:""; position:absolute;
  inset:-6vh -6vw;
  pointer-events:none; z-index:-1;
  background:radial-gradient(78% 74% at 34% 50%,rgba(5, 3, 9, .82) 0%,rgba(5, 3, 9, .66) 46%,rgba(5, 3, 9, .28) 72%,transparent 100%);
}
.chapter .h-display{ max-width:16ch; }
.chapter__lede{
  max-width:52ch; margin-top:1.6rem;
  font-size:clamp(1rem,1.5vw,1.22rem); color:var(--paper-dim);
}
.chapter__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; }

/* A chapter carrying a grid needs tighter type than one carrying a
   headline, or it overruns the pinned viewport on short screens. */
.ch-grid{
  display:grid; gap:clamp(.8rem,1.6vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  margin-top:clamp(1.4rem,3vw,2.2rem);
}
.ch-grid li{
  border-left:1px solid var(--gold-deep);
  padding:.2rem 0 .2rem 1rem;
}
.ch-grid b{
  display:block; font-family:var(--serif); font-weight:400; font-size:1.2rem;
}
.ch-grid span{ font-size:.85rem; color:var(--paper-dim); }

.chapter.is-dense .h-display{ font-size:clamp(2rem,4.6vw,3.6rem); }
.chapter.is-dense .chapter__lede{ font-size:1rem; margin-top:1.1rem; }
.chapter:has(.ch-grid) .h-display{ font-size:clamp(2rem,4.8vw,3.9rem); }
.chapter:has(.ch-grid) .chapter__lede{ max-width:46ch; }

/* the chapter counter rail along the bottom */
.ch-rail{
  position:absolute; left:0; right:0; bottom:0; height:var(--rail-h);
  z-index:4;
  display:flex; align-items:center; gap:.8rem;
  padding-inline:var(--gut);
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-dim);
}
.ch-rail__track{ flex:1; height:1px; background:var(--line); position:relative; }
.ch-rail__fill{
  position:absolute; inset:0; background:var(--gold);
  transform:scaleX(var(--chp,0)); transform-origin:0 50%;
}
.ch-rail b{ color:var(--gold); font-weight:500; font-variant-numeric:tabular-nums; }

/* ---- without JavaScript the pinned page must become an ordinary one.
   Both of these are required; chapters left absolutely positioned would
   stack on top of each other and the page would read as one blur. */
html.no-js .fixed-container{
  position:static; overflow:visible; height:auto;
}
html.no-js .chapter{
  position:static; opacity:1; transform:none;
  pointer-events:auto;
  min-height:auto; padding-block:clamp(48px,8vw,96px);
  border-bottom:1px solid var(--line-soft);
}
html.no-js .scroll-proxy,
html.no-js .ch-rail{ display:none; }
html.no-js .loader{ display:none; }

/* ==========================================================================
   ROAD MODE — the home page as a single 3D scene
   When the scene is live, the chapter copy stops being a layer in FRONT of
   the 3D and becomes part OF it: scene.js reads the text out of these very
   elements and renders it into the world. The markup stays in the DOM so
   the page still has its content for crawlers, for screen readers, and for
   anyone without WebGL — it is only made invisible, never removed.
   ========================================================================== */
/* --- Site-wide light theme, switched on only when the scene is running ---
   Every page shares the sky, so the palette has to invert with it. These are
   token overrides, not new rules: the whole stylesheet is written against
   --ink / --paper / --line, so flipping them here re-themes all nine pages.
   Without WebGL the site stays on its original dark ground, untouched. */
html.has-scene{
  --ink:#eef1f8;
  --ink-2:#e7ecf7;
  --ink-3:#dee5f3;
  --paper:#10131c;
  --paper-dim:#5c6579;
  /* #8a6a2f measured 4.44:1 on the pale ground — just under AA, and it is
     the colour on every eyebrow, chip, tab and ghost button. Darkened until
     it clears 4.5. */
  --gold:#73571f;
  --gold-deep:#8a6a2f;
  --violet:#4a3f7a;
  --line:rgba(16,19,28,.18);
  --line-soft:rgba(16,19,28,.09);
  --veil:rgba(238,241,248,.90);
  --veil-soft:rgba(238,241,248,.72);
}
html.has-scene body{ background:transparent; }

/* The hardcoded darks. These were literal rgba() rather than tokens, so the
   flip above cannot reach them and each needs an explicit light value. */
html.has-scene .nav{
  background:linear-gradient(180deg,var(--veil) 0%,var(--veil-soft) 62%,transparent 100%);
}
html.has-scene .totop{ background:var(--veil); }
html.has-scene .tools{ background:var(--veil-soft); }
html.has-scene .foot{
  background:linear-gradient(180deg,transparent,var(--veil));
}
html.has-scene .field input,
html.has-scene .field select,
html.has-scene .field textarea{ background:rgba(16,19,28,.045); }
html.has-scene .field input:focus,
html.has-scene .field select:focus,
html.has-scene .field textarea:focus{ background:rgba(16,19,28,.07); }
html.has-scene .plabel{ background:var(--veil); }
/* A light stand-in for the sky. The theme class is now set before paint from
   a WebGL capability test, so it is on a fraction earlier than the canvas
   has anything in it — and if scene.js fails outright, this is what remains
   rather than the dark nebula the dark theme paints. */
html.has-scene .gl{
  background:linear-gradient(135deg,var(--sky-hi) 0%,#dfe6f7 45%,var(--sky-lo) 100%);
}
html.has-scene .sparkles{ display:none; }
html.has-scene .grain{ opacity:.025; mix-blend-mode:multiply; }
html.has-scene .loader{ background:var(--ink); }
html.has-scene .loader__mark-text{ stroke:var(--gold-deep); }
/* The custom cursor inverts against a pale ground, so it stops being a
   difference blend and becomes a plain dark mark. */
html.has-scene .cursor{ mix-blend-mode:normal; }
html.has-scene .cursor__star{ fill:var(--paper); }
html.has-scene .cursor__star-x{ fill:var(--gold); }

html.has-scene body[data-page="home"]{
  background:var(--sky-lo);
}
html.has-scene .fixed-container .chapter{
  opacity:0 !important;
  pointer-events:none !important;
}
html.has-scene .fixed-container .ch-rail{ display:none; }
/* the canvas is the page now, so let it own the full stacking context */
html.has-scene body[data-page="home"] .gl{ z-index:0; background:none; }
html.has-scene body[data-page="home"] .grain,
html.has-scene body[data-page="home"] .sparkles{ display:none; }

/* --- fixed chrome, the only HTML that stays in front (as the reference) --- */
.road-ui{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  font-family:var(--sans);
}
.road-ui a,.road-ui button{ pointer-events:auto; cursor:pointer; }
/* Below the nav, not behind it. At the top of the viewport this stack ran
   straight through the WORK/WEDDINGS/ENQUIRE row. */
.road-index{
  position:absolute; top:calc(var(--nav-h) + 22px); right:clamp(18px,3vw,40px);
  display:grid; gap:.1rem; justify-items:end; text-align:right;
}
.road-index button{
  font-size:clamp(.8rem,1.1vw,1rem);
  font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-soft); padding:.1rem 0;
  transition:color .3s var(--ease);
}
.road-index button:hover{ color:var(--ink-hard); }
.road-index button[aria-current="true"]{ color:var(--ink-hard); }
.road-mark{
  position:absolute; left:clamp(18px,3vw,40px); bottom:clamp(16px,2.5vw,32px);
  font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--ink-hard); letter-spacing:.01em;
}
.road-links{
  position:absolute; right:clamp(18px,3vw,40px); bottom:clamp(18px,2.6vw,34px);
  display:flex; gap:clamp(.9rem,2vw,1.6rem); align-items:center;
}
.road-links a{
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .3s var(--ease);
}
.road-links a:hover{ color:var(--ink-hard); }
.road-cta{
  border:1px solid var(--ink-soft); border-radius:999px;
  padding:.5rem 1.1rem; color:var(--ink-hard) !important;
}
.road-cta:hover{ background:var(--ink-hard); color:var(--sky-hi) !important; }
@media (max-width:900px){ .road-ui{ display:none; } }

/* ------------------------------------------------- 3D scene HTML labels ---
   Labels tracked to 3D node positions by screen-space projection. No
   backdrop-filter: it re-blurs a slice of the animating canvas every frame
   and verify.py rejects it (check 19). A solid alpha reads the same here
   because everything behind it is already dark. */
.labels{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  overflow:hidden;
}
.plabel{
  position:absolute; top:0; left:0;
  display:grid; gap:.2rem;
  padding:.6rem 1.1rem;
  background:rgba(11,7,20,.82);
  border:1px solid var(--line);
  border-radius:999px;
  white-space:nowrap;
  opacity:0;
  transition:opacity .35s var(--ease);
  will-change:transform,opacity;
}
.plabel b{
  font-family:var(--serif); font-weight:400; font-size:1rem; color:var(--paper);
}
.plabel span{
  font-size:.56rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}

/* ---------------------------------------------------- scroll-driven bits */
/* Progress rail, driven by the scroll timeline where it is supported.
   Purely decorative: the script sets --read as well, so nothing depends
   on this landing. */
@supports (animation-timeline:scroll()){
  .readbar{
    animation:readgrow linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes readgrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* Stills drift very slowly instead of sitting dead still. Paused when the
   tile is off screen so it costs nothing while you are elsewhere. */
@keyframes kenburns{
  from{ transform:scale(1) translate3d(0,0,0); }
  to{ transform:scale(1.07) translate3d(0,-1.4%,0); }
}
.gtile img,.media__face--front img{
  --kb-time:26s;
  animation:kenburns var(--kb-time) var(--ease) infinite alternate;
  animation-play-state:paused;
}
.gtile.is-in img,.work__item.is-in .media__face--front img{
  animation-play-state:running;
}
.gtile:nth-child(2n) img{ --kb-time:32s; }
.gtile:nth-child(3n) img{ --kb-time:38s; }
.work__item:nth-child(2n) .media__face--front img{ --kb-time:34s; }
.work__item:nth-child(3n) .media__face--front img{ --kb-time:29s; }

/* ---------------------------------------------------------- reveals */
[data-reveal]{
  opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
[data-reveal].is-in{ opacity:1; transform:translate3d(0,0,0); }

[data-split] .ln{ display:block; overflow:hidden; }
[data-split] .ln > span{
  display:block; transform:translate3d(0,105%,0);
  transition:transform .95s var(--ease-out);
}
[data-split].is-in .ln > span{ transform:translate3d(0,0,0); }
[data-split].is-in .ln:nth-child(2) > span{ transition-delay:.07s; }
[data-split].is-in .ln:nth-child(3) > span{ transition-delay:.14s; }
[data-split].is-in .ln:nth-child(4) > span{ transition-delay:.21s; }

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  [data-split] .ln > span{ transform:none; }
  .gtile img,.media__face--front img{ animation:none; }
  .cursor{ display:none; }
  .gtile--flip:hover .gtile__inner,
  .work__item:hover .media__inner{ transform:none; }
}

/* ------------------------------------------------------------- print */
@media print{
  .nav,.navtoggle,.navmenu,.mobcta,.totop,.loader,.cursor,
  .gl,.sparkles,.grain,.readbar{ display:none !important; }
  body{ background:#fff; color:#000; }
}