/* ============================================================
   Wassl · shared site stylesheet
   Used by every page (index.html, about.html, projects.html,
   projects/*.html). Keep this the single source of truth for
   look and feel; page-specific rules live at the bottom under
   their own comment headers.
   ============================================================ */

:root{
  --linen:#f9f7f3;
  --ink:#0d0d0d;
  --paper:#ffffff;
  --stone:#6e6a69;
  --pebble:#9a9796;
  --hair:rgba(13,13,13,0.10);
  --tilt:46deg;

  /* real project colours, pulled from each venture's own live brand.
     LA Fit confirmed from its live site. Oumre confirmed from its live
     site this round: --c-oumre is the real hero scrim colour, --c-oumre-2
     the real wordmark colour. No Fault has no live site to check yet
     (private pre-launch), so this is Z's own direction: an evening,
     candlelit-dinner palette, sampled from his own venue photo. SendLoco
     is now real too: Z supplied screenshots of the live site, so the deep
     slate ground and the electric blue accent are sampled from SendLoco's
     own hero rather than guessed from an app screenshot. Its third brand
     colour, a lime used on tags, is #99d148 if it is ever needed. */
  --c-lafit:#3a1f5c;      --c-lafit-2:#b98af0;
  --c-oumre:#4a1510;      --c-oumre-2:#a24419;
  --c-sendloco:#161c22;   --c-sendloco-2:#4ca1cc;
  --c-nofault:#3d2412;    --c-nofault-2:#c9793a;
  --c-gowassl:#4a3a1c;    --c-gowassl-2:#d9b568;
  /* the umbrella itself, used only by the projects and about hero banners,
     which are not any one venture's colour: ink with a soft parchment-gold
     glow, calm and neutral rather than borrowed from a project. */
  --c-wassl-2:#c9a876;

  /* muted versions of the same brands, used as the carousel colour block.
     Each is its project's own colour taken down to a soft mid-tone so the
     block sits calmly behind the photography instead of shouting over it. */
  --c-lafit-mut:#8e80a2;
  --c-oumre-mut:#a08076;
  --c-sendloco-mut:#7f909e;
  --c-nofault-mut:#a3907c;
  --c-gowassl-mut:#a39a7c;

  color-scheme: light;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--linen);
  color:var(--ink);
  font-family:'Outfit', -apple-system, 'Segoe UI', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
[hidden]{display:none!important;}
a{color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---------- nav ---------- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top,0px)) 28px 16px;
  background:rgba(249,247,243,0.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  border-bottom:1px solid transparent;
  transform:translateY(0);
}
.navbar.stuck{border-bottom-color:var(--hair);background:rgba(249,247,243,0.9);}
.brand{font-weight:700;font-size:1.06rem;letter-spacing:-0.03em;text-decoration:none;}
.navlinks{display:flex;gap:28px;align-items:center;}
.navlinks a{font-weight:500;font-size:0.9rem;text-decoration:none;color:var(--stone);}
.navlinks a:hover,.navlinks a.is-current{color:var(--ink);}
.navcta{
  font-weight:500;font-size:0.86rem;background:var(--ink);color:var(--linen)!important;
  padding:10px 20px;border-radius:9999px;text-decoration:none;white-space:nowrap;
}
@media (max-width:700px){
  .navbar{padding-left:20px;padding-right:20px;}
  .navlinks a:not(.navcta){display:none;}
}
/* on a phone the bar gets out of the way while you read and comes straight
   back the moment you scroll up, so "Get in touch" is never more than a
   flick away without it costing a strip of every screen */
@media (max-width:760px){
  .navbar.hidden{transform:translateY(-104%);}
}

/* ---------- page header (about / projects / detail pages) ---------- */
.pagehead{padding:calc(120px + env(safe-area-inset-top,0px)) 0 0;}
.pagehead .eyebrow{margin:0 0 14px;}
.pagehead h1{font-weight:600;font-size:clamp(2.2rem,5.4vw,3.8rem);letter-spacing:-0.05em;line-height:0.98;margin:0 0 18px;}
.pagehead p.lede{max-width:52ch;color:var(--stone);font-size:1.05rem;line-height:1.6;margin:0;}
.backlink{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:0.86rem;color:var(--stone);text-decoration:none;margin-bottom:22px;}
.backlink:hover{color:var(--ink);}

/* ---------- section shell ---------- */
section{padding:clamp(40px,6vw,86px) 0;scroll-margin-top:78px;}
.section-head{margin-bottom:clamp(22px,3.4vw,40px);}
.section-head .eyebrow{margin:0 0 12px;}
.section-head h2{font-weight:600;font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-0.045em;margin:0 0 12px;line-height:1.0;}
.section-head p{max-width:44ch;color:var(--stone);font-size:1.02rem;line-height:1.55;margin:0;}
.section-head.centred{text-align:center;}
.section-head.centred p{margin-left:auto;margin-right:auto;}
.eyebrow{font-weight:600;font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--pebble);margin:0 0 20px;}
hr.hair{border:none;border-top:1px solid var(--hair);margin:0;}
.btn{display:inline-block;font-family:inherit;font-weight:500;font-size:0.9rem;padding:12px 24px;border-radius:9999px;text-decoration:none;border:1px solid var(--hair);}
.btn-primary{background:var(--ink);color:var(--linen);border-color:var(--ink);}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.vlink{
  display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:0.94rem;
  text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--ink);padding-bottom:2px;
}

/* ================= HERO: tilted-disc galaxy ================= */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:30%;z-index:5;pointer-events:none;
  background:linear-gradient(to bottom,rgba(249,247,243,0) 0%,rgba(249,247,243,0.72) 55%,var(--linen) 100%);
}
.field{
  position:absolute;top:50%;left:50%;width:0;height:0;
  z-index:1;pointer-events:none;
  animation-play-state:var(--play,running);
}
.field *{animation-play-state:var(--play,running);}
.gtile{
  position:absolute;top:0;left:0;
  border-radius:14px;overflow:hidden;
  transform:translate(-50%,-50%);
  background:#eeeae4;
}
.gtile > *{width:100%;height:100%;object-fit:cover;display:block;}

.discwrap{position:absolute;top:0;left:0;perspective:2400px;}
.disc{position:absolute;top:0;left:0;}
.ringtilt{position:absolute;top:0;left:0;transform-style:preserve-3d;transform:rotateX(var(--tilt));}
.ring{position:absolute;top:0;left:0;transform-style:preserve-3d;
  animation:spinz var(--dur) linear infinite;animation-direction:var(--dir,normal);}
.arm{position:absolute;top:0;left:0;transform-style:preserve-3d;
  transform:rotateZ(var(--a)) translateX(var(--r));}
.face{position:absolute;top:0;left:0;transform-style:preserve-3d;
  animation:spinz var(--dur) linear infinite;animation-direction:var(--rdir,reverse);}
.flat{position:absolute;top:0;left:0;transform-style:preserve-3d;
  transform:rotateZ(calc(-1 * var(--a))) rotateX(calc(-1 * var(--tilt)));}
@keyframes spinz{ from{transform:rotateZ(0deg);} to{transform:rotateZ(360deg);} }

.veil{
  position:absolute;top:50%;left:50%;z-index:3;pointer-events:none;
  width:min(1120px,98vw);height:min(760px,82vh);transform:translate(-50%,-50%);
  background:radial-gradient(ellipse closest-side,
    rgba(249,247,243,0.94) 0%,
    rgba(249,247,243,0.86) 34%,
    rgba(249,247,243,0.44) 64%,
    rgba(249,247,243,0) 100%);
}
@media (prefers-reduced-motion: reduce){
  .ring,.face{animation:none!important;}
  html{scroll-behavior:auto;}
}

.hero-copy{position:relative;z-index:10;text-align:center;padding:0 24px;max-width:820px;}
.hero h1{
  margin:0;font-weight:600;
  font-size:clamp(2.6rem,7.4vw,5.6rem);line-height:0.94;letter-spacing:-0.05em;
}
.hero p.lede{
  max-width:44ch;margin:24px auto 0;font-size:clamp(0.98rem,1.4vw,1.1rem);
  line-height:1.55;color:var(--stone);font-weight:400;
}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:32px 0 0;}

/* ================= PROJECTS: colour-block carousel ================= */
/* Modelled on the reference site: a heading, a muted colour block holding
   three images with a translucent pill across the middle, then the caption
   underneath. It is an ordinary section, so the page simply scrolls past it;
   the carousel advances on its own and can be driven by the arrows or dots. */
.band-section{padding-bottom:clamp(40px,5vw,72px);}
.band-outer{padding:0 clamp(16px,3vw,40px);}
/* The block is capped against the viewport height as well as its aspect
   ratio, so the heading, the block, the caption and the controls all land
   inside one screen instead of pushing the controls below the fold. */
.band{
  position:relative;max-width:1680px;margin:0 auto;
  border-radius:clamp(18px,2.4vw,30px);overflow:hidden;
  aspect-ratio:16/5.3;max-height:44svh;background:var(--c-gowassl-mut);
}
.bslide{
  position:absolute;inset:0;opacity:0;visibility:hidden;z-index:1;
  display:flex;align-items:center;justify-content:center;
  transform:translateX(0);transition:transform .7s cubic-bezier(.22,.75,.32,1);
  padding:clamp(18px,3vw,44px) clamp(20px,5vw,90px);
}
.bslide.active{opacity:1;visibility:visible;z-index:3;transform:translateX(0);}
/* held opaque underneath the incoming slide so the page never shows through */
.bslide.prev{opacity:1;visibility:visible;transition:none;z-index:1;transform:translateX(0);}
/* starting position for the incoming slide: opaque from frame one, only its
   position animates, so nothing ever blends with the slide it replaces */
.bslide.preenter{opacity:1;visibility:visible;transition:none;z-index:2;
  transform:translateX(var(--slide-dir,90px));}

.bshots{width:100%;height:100%;display:flex;align-items:center;justify-content:space-around;gap:clamp(12px,3vw,48px);}
.bshot{position:relative;flex:none;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.14);}
.bshot img{width:100%;height:100%;object-fit:cover;}
.bshot.s1{width:25%;height:94%;}
.bshot.s2{width:19%;height:70%;}
.bshot.s3{width:25%;height:94%;}
.bshot.ph{display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.45);background:rgba(255,255,255,.08);}
.bshot.ph span{font-size:.64rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-align:center;padding:0 10px;line-height:1.6;}

.bpill{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  display:inline-flex;align-items:center;gap:12px;
  width:min(560px,60%);padding:15px 26px;border-radius:9999px;
  background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:1rem;
}

.band-caption{position:relative;min-height:104px;margin-top:clamp(16px,2.2vw,26px);}
.bcap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:7px;
  text-decoration:none;text-align:center;opacity:0;pointer-events:none;transition:opacity .45s ease;}
.bcap.active{opacity:1;pointer-events:auto;}
.bcap-name{font-weight:600;font-size:1.02rem;letter-spacing:-0.02em;color:var(--ink);}
/* Oumre's own wordmark styling, from its live site */
.bcap-name.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:1.24rem;letter-spacing:.08em;}
.bcap-line{color:var(--stone);font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.5;max-width:46ch;}
.bcap-cta{font-weight:500;font-size:.88rem;color:var(--ink);
  border-bottom:1.5px solid var(--ink);padding-bottom:2px;margin-top:3px;}

.band-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(8px,1.4vw,16px);}
.bctrl{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:9999px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);
  cursor:pointer;padding:0;transition:border-color .25s ease;}
.bctrl:hover{border-color:var(--ink);}
.bdots{display:flex;gap:8px;align-items:center;}
.bdots button{width:26px;height:3px;border-radius:3px;border:none;padding:0;cursor:pointer;
  background:rgba(13,13,13,.16);transition:background .4s ease;}
.bdots button.on{background:var(--ink);}
@media (max-width:820px){
  .band{aspect-ratio:4/3.1;max-height:40svh;}
  .bslide{padding:20px 16px;}
  .bshots{gap:10px;}
  .bshot.s1{width:31%;height:80%;}
  .bshot.s2{width:24%;height:60%;}
  .bshot.s3{width:31%;height:80%;}
  .bpill{width:80%;padding:12px 16px;font-size:.9rem;gap:9px;}
  .band-caption{min-height:118px;}
  .bcap-line{font-size:1rem;}
}

/* ---------- editorial rows (used on the projects hub page) ---------- */
.vrow{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  padding:52px 0;border-top:1px solid var(--hair);
}
.vrow:last-child{border-bottom:1px solid var(--hair);}
.vrow.flip .vmedia{order:2;}
.vrow.flip .vtext{order:1;}
.vmedia{border-radius:22px;overflow:hidden;aspect-ratio:6/5;position:relative;text-decoration:none;display:block;}
.vmedia img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.vrow:hover .vmedia img{transform:scale(1.045);}
.vindex{font-size:0.8rem;color:var(--pebble);font-weight:600;letter-spacing:0.06em;margin:0 0 14px;display:block;}
.vtext h3{font-weight:600;font-size:clamp(1.6rem,2.6vw,2.15rem);letter-spacing:-0.04em;line-height:1.06;margin:0 0 16px;}
.vtext h3 a{text-decoration:none;color:inherit;}
.vtext p{color:var(--stone);font-size:1rem;line-height:1.6;margin:0 0 22px;max-width:38ch;}
.vstatus{
  display:inline-block;font-size:0.72rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--stone);background:var(--paper);border:1px solid var(--hair);border-radius:9999px;
  padding:5px 12px;margin-bottom:16px;
}
.vlinks{display:flex;gap:20px;flex-wrap:wrap;}
@media (max-width:760px){
  .vrow{grid-template-columns:1fr;gap:24px;padding:36px 0;}
  .vrow.flip .vmedia,.vrow.flip .vtext{order:initial;}
  .vmedia{aspect-ratio:16/11;}
}

/* ================= WORK WITH US: three panels ================= */
.workgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px);}
.workpanel{
  position:relative;border-radius:24px;overflow:hidden;min-height:clamp(380px,44vw,460px);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(22px,2.6vw,30px);color:#fff;
}
.workpanel.w1{background:linear-gradient(155deg,#5c4636,#8d7263);}
.workpanel.w2{background:linear-gradient(155deg,#4c584f,#7f8f85);}
.workpanel.w3{background:linear-gradient(155deg,#41525e,#6b7d8c);}
.wvisual{display:flex;align-items:center;justify-content:center;flex:1;padding:10px 0;}
.wcard{
  background:#fff;color:var(--ink);border-radius:16px;padding:18px 20px;width:min(240px,88%);
  box-shadow:0 14px 34px rgba(13,13,13,.24);
}
.wcard .wk{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pebble);margin:0 0 10px;}
.wcard .wv{font-size:.96rem;font-weight:500;letter-spacing:-.01em;margin:0 0 14px;line-height:1.35;}
.wrowline{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--hair);padding-top:11px;font-size:.82rem;color:var(--stone);}
.wtag{font-size:.7rem;font-weight:600;padding:4px 10px;border-radius:9999px;background:var(--ink);color:#fff;letter-spacing:.02em;}
.wtag.q{background:rgba(13,13,13,.07);color:var(--ink);}
.wjoin{display:flex;align-items:center;justify-content:center;}
.wjoin i{width:clamp(70px,7.6vw,100px);aspect-ratio:1/1;border-radius:22px;display:block;
  background:rgba(255,255,255,.94);box-shadow:0 12px 30px rgba(13,13,13,.2);}
.wjoin i:last-child{background:rgba(255,255,255,.5);margin-left:clamp(-32px,-3vw,-22px);box-shadow:none;}
.wfig{display:flex;align-items:baseline;gap:6px;}
.wfig b{font-size:1.9rem;font-weight:600;letter-spacing:-.04em;line-height:1;}
.wfig em{font-style:normal;font-size:.84rem;color:var(--stone);}
.wbody-wrap{text-align:left;}
.wcaption{margin:0 0 10px;font-weight:600;font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:-0.03em;}
.wbody{margin:0 0 18px;color:rgba(255,255,255,.78);font-size:0.94rem;line-height:1.55;max-width:34ch;}
.wpanel-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:0.9rem;
  color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.6);padding-bottom:2px;}
@media (max-width:860px){
  .workgrid{grid-template-columns:1fr;gap:22px;}
  .workpanel{min-height:340px;}
}

/* ================= PINNED PROCESS ================= */
/* The phone frame is gone. Each step now plays its own short silent loop in
   a plain rounded card, which is what the copy is actually about: how the
   group works, not an app screen. Only the visible clip ever plays. */
.process{position:relative;padding:0;}
.process-track{position:relative;}
.process-pin{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;overflow:hidden;
}
.process-inner{
  width:100%;max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(30px,6vw,80px);align-items:center;
}
.step-visual{
  position:relative;width:100%;max-width:330px;aspect-ratio:3/4;justify-self:center;
  border-radius:24px;overflow:hidden;background:#171310;
  box-shadow:0 30px 62px rgba(13,13,13,.22);
}
.svid{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.05);
  transition:opacity .7s ease, transform .9s cubic-bezier(.2,.7,.3,1);}
.svid.active{opacity:1;visibility:visible;transform:scale(1);}
.svid video{width:100%;height:100%;object-fit:cover;display:block;}
/* the side column must fill its grid track: when it is allowed to shrink to
   its own content the copy collapses to the width of the dots underneath it */
.process-side{width:100%;min-width:0;}
.process-copy{position:relative;min-height:300px;}
.pstep{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;pointer-events:none;}
.pstep.active{opacity:1;pointer-events:auto;}
.pstep .pnum,.pstep h3,.pstep p{opacity:0;transform:translateY(22px);}
.pstep.active .pnum{opacity:1;transform:translateY(0);transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.3,1);}
.pstep.active h3{opacity:1;transform:translateY(0);transition:opacity .55s ease .07s, transform .6s cubic-bezier(.2,.7,.3,1) .07s;}
.pstep.active p{opacity:1;transform:translateY(0);transition:opacity .6s ease .14s, transform .65s cubic-bezier(.2,.7,.3,1) .14s;}
.pstep .pnum{font-weight:600;font-size:0.68rem;color:var(--pebble);letter-spacing:0.2em;text-transform:uppercase;margin:0 0 16px;}
.pstep h3{font-weight:600;font-size:clamp(1.7rem,3.4vw,2.7rem);letter-spacing:-0.045em;margin:0 0 16px;line-height:1.02;max-width:17ch;}
.pstep p{color:var(--stone);font-size:clamp(0.98rem,1.3vw,1.08rem);line-height:1.6;max-width:40ch;margin:0;}
.pdots{display:flex;gap:7px;margin-top:24px;}
.pdots i{width:26px;height:3px;border-radius:3px;background:var(--hair);transition:background .4s ease;}
.pdots i.on{background:var(--ink);}
.process-head{position:absolute;top:0;left:0;right:0;z-index:2;padding-top:clamp(56px,8vw,90px);}
@media (max-width:860px){
  /* stack, and give the copy the full width of the column. The old rule
     centred the grid items instead, which sized the text block to its own
     content and squeezed every line down to a few words. */
  .process-inner{grid-template-columns:1fr;gap:clamp(16px,4vw,26px);
    align-content:center;text-align:center;}
  .step-visual{width:min(58vw,214px);max-width:none;margin:0 auto;border-radius:18px;}
  .process-copy{min-height:236px;text-align:center;}
  .pstep{justify-content:flex-start;}
  .pstep h3{max-width:none;font-size:clamp(1.45rem,5.8vw,2rem);margin-bottom:12px;}
  .pstep .pnum{margin-bottom:12px;}
  .pstep p{max-width:38ch;margin-left:auto;margin-right:auto;font-size:1rem;}
  .pdots{justify-content:center;margin-top:18px;}
}
@media (max-width:860px) and (max-height:750px){
  .step-visual{width:min(42vw,164px);}
  .process-copy{min-height:206px;}
}

/* ---------- about ---------- */
.about-wrap{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
@media (max-width:860px){.about-wrap{grid-template-columns:1fr;gap:28px;}}
.about-wrap h2{font-weight:600;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-0.045em;line-height:1.05;margin:0 0 20px;}
.about-wrap p{font-size:1.06rem;line-height:1.62;color:var(--stone);margin:0 0 16px;max-width:46ch;}
.about-media{border-radius:22px;overflow:hidden;aspect-ratio:4/5;}
.about-media img{width:100%;height:100%;object-fit:cover;}

/* ---------- project detail pages ---------- */
/* Each project hero is a photograph under its own brand colour, with the
   image drifting slower than the page as you scroll. The image layer is
   taller than the hero so it has room to move without exposing an edge. */
.detail-hero{
  position:relative;border-radius:0;overflow:hidden;color:#fff;
  padding:clamp(140px,16vw,180px) 0 clamp(56px,7vw,80px);
  background:var(--hero-tint,var(--ink));
}
.dh-bg{
  position:absolute;left:0;right:0;top:-14%;height:128%;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  will-change:transform;transform:translate3d(0,0,0);
}
/* the brand colour sits over the photograph rather than replacing it */
.dh-tint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--hero-tint,var(--ink));opacity:.78;mix-blend-mode:multiply;}
/* and a soft darkening from the left so the headline always has something to sit on */
.detail-hero::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg, rgba(8,6,5,.58) 0%, rgba(8,6,5,.22) 48%, rgba(8,6,5,0) 78%);
}
.detail-hero .wrap{position:relative;z-index:4;}
.detail-hero::before{
  content:'';position:absolute;inset:0;z-index:3;opacity:.34;pointer-events:none;
  background:radial-gradient(circle at 82% 14%, var(--hero-accent,transparent) 0%, transparent 62%);
}
@media (prefers-reduced-motion: reduce){
  .dh-bg{transform:none!important;top:0;height:100%;}
}
.detail-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:9999px;
  background:rgba(255,255,255,.14);font-size:.82rem;margin:0 0 20px;}
.detail-hero h1{font-weight:600;font-size:clamp(2.2rem,5.6vw,4rem);letter-spacing:-0.05em;line-height:0.98;margin:0 0 16px;}
.detail-hero p.lede{max-width:52ch;color:rgba(255,255,255,.8);font-size:1.05rem;line-height:1.6;margin:0 0 26px;}
.storyboard{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 12px;}
.sb-shot{border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--paper);border:1px solid var(--hair);}
.sb-shot img{width:100%;height:100%;object-fit:cover;}
.sb-shot.ph{display:flex;align-items:center;justify-content:center;background:#efece6;}
.sb-shot.ph span{font-size:.72rem;color:var(--pebble);text-align:center;padding:0 14px;line-height:1.5;
  font-weight:500;letter-spacing:.04em;text-transform:uppercase;}
@media (max-width:700px){.storyboard{grid-template-columns:1fr 1fr;}.storyboard .sb-shot:last-child{grid-column:1/-1;}}
.detail-body{max-width:64ch;}
.detail-body p{font-size:1.04rem;line-height:1.68;color:var(--stone);margin:0 0 18px;}
.detail-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-radius:22px;border:1px solid var(--hair);padding:clamp(22px,3vw,32px);margin-top:34px;
}
.detail-cta .dc-text b{display:block;font-size:1.1rem;font-weight:600;letter-spacing:-0.02em;margin:0 0 4px;}
.detail-cta .dc-text span{color:var(--stone);font-size:.92rem;}

/* ---------- contact ---------- */
/* The invented galaxy is gone. This is the hero's own orbiting disc, built
   small and dark, so the page opens and closes on the same motif. */
.contact{
  position:relative;color:var(--linen);border-radius:28px;overflow:hidden;isolation:isolate;
  padding:clamp(70px,10vw,120px) clamp(24px,6vw,64px);text-align:center;
  min-height:clamp(400px,48vw,560px);
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 74% 74% at 50% 46%, #2a221a 0%, #171310 46%, #0d0b0a 82%);
}
.contact-field{
  position:absolute;top:50%;left:50%;width:0;height:0;z-index:1;pointer-events:none;
  animation-play-state:var(--play,running);filter:saturate(.92) brightness(1.02) contrast(1.04);
}
.contact-field *{animation-play-state:var(--play,running);}
.contact-field .gtile{background:#2a2622;border-radius:10px;}
.contact-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 34% 38% at 50% 50%,
      rgba(13,11,10,.96) 0%, rgba(13,11,10,.9) 44%,
      rgba(13,11,10,.55) 72%, rgba(13,11,10,0) 100%),
    linear-gradient(to bottom,
      rgba(13,11,10,.82) 0%, rgba(13,11,10,0) 26%,
      rgba(13,11,10,0) 74%, rgba(13,11,10,.82) 100%);
}
.contact-inner{position:relative;z-index:3;}
@media (max-width:760px){
  /* the headline fills almost the whole box here, so the disc drops back and
     the scrim under the type gets firmer: legibility wins over decoration */
  .contact-field{opacity:.6;}
  .contact-veil{
    background:
      radial-gradient(ellipse 66% 42% at 50% 50%,
        rgba(13,11,10,.97) 0%, rgba(13,11,10,.94) 54%,
        rgba(13,11,10,.62) 82%, rgba(13,11,10,.18) 100%),
      linear-gradient(to bottom,
        rgba(13,11,10,.86) 0%, rgba(13,11,10,0) 26%,
        rgba(13,11,10,0) 74%, rgba(13,11,10,.86) 100%);
  }
}
.contact h2{font-weight:600;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-0.045em;margin:0 0 18px;line-height:1.0;}
.contact p{color:rgba(249,247,243,0.7);font-size:1.04rem;max-width:44ch;margin:0 auto 32px;line-height:1.55;}
.contact .btn-primary{background:var(--linen);color:var(--ink);border-color:var(--linen);}

/* ---------- footer ---------- */
footer{padding:56px 0 calc(40px + env(safe-area-inset-bottom,0px));}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px;}
.footer-brand .brand{display:block;margin-bottom:10px;}
.footer-brand p{color:var(--stone);font-size:.9rem;line-height:1.55;max-width:32ch;margin:0;}
.footer-col h4{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pebble);margin:0 0 14px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{text-decoration:none;color:var(--stone);font-size:.92rem;}
.footer-col a:hover{color:var(--ink);}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--pebble);font-size:0.82rem;}
.footer-row a{text-decoration:none;color:var(--pebble);}
.footer-row a:hover{color:var(--stone);}
/* registered office. Deliberately the address only: the registry code would
   be a one-click route to the register entry, which names the owner. */
.footer-addr{color:var(--pebble);}
@media (max-width:620px){ .footer-row{flex-direction:column;align-items:flex-start;gap:8px;} }
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr;gap:26px;}
}

/* ============================================================
   Premium interaction layer (round 7)
   Four small, deliberate touches, shared by every page via this file
   and js/site.js: a one-time scroll reveal on headings/cards/photos,
   a word-by-word resolve-into-focus entrance on the big hero headlines,
   a soft trailing cursor accent on pointer devices, and a magnetic pull
   on primary buttons. Every one of them is inert under
   prefers-reduced-motion, and the cursor/magnetic touches are inert on
   touch devices, where they would not make sense.
   ============================================================ */

/* ---------- scroll reveal ---------- */
/* JS adds .reveal on load, then .is-in once the element has crossed into
   view; --rd is a per-element stagger delay JS sets inline so siblings in
   the same group settle in one after another rather than all at once. */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.16,.8,.24,1) var(--rd,0ms),
             transform .8s cubic-bezier(.16,.8,.24,1) var(--rd,0ms);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:translateY(0);}

/* ---------- headline word-reveal ---------- */
/* JS wraps each word of a marked headline in .word > .word-inner and adds
   .split-ready once the split is built (so the browser never paints the
   untouched, unsplit line first); .split-in starts the stagger. Overflow
   is hidden on the outer span so each word rises out of its own line
   rather than the whole block fading, and a light blur resolves into
   focus with it. */
.split-ready .word{display:inline-block;overflow:hidden;vertical-align:top;}
.split-ready .word-inner{
  display:inline-block;
  transform:translateY(115%);opacity:0;filter:blur(6px);
  transition:transform .9s cubic-bezier(.16,.8,.24,1) var(--wd,0ms),
             opacity .7s ease var(--wd,0ms),
             filter .7s ease var(--wd,0ms);
}
.split-in .word-inner{transform:translateY(0);opacity:1;filter:blur(0);}

/* ---------- cursor accent ---------- */
/* A small trailing dot, never a replacement for the real cursor. Blend
   difference so it reads on both the light pages and the dark detail
   heroes without needing its own colour logic. */
.cursor-dot{
  position:fixed;top:0;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:var(--linen);mix-blend-mode:difference;
  pointer-events:none;z-index:9999;opacity:0;
  transition:opacity .25s ease, width .32s cubic-bezier(.2,.8,.2,1),
             height .32s cubic-bezier(.2,.8,.2,1), margin .32s cubic-bezier(.2,.8,.2,1);
}
.cursor-dot.is-active{opacity:1;}
.cursor-dot.is-hover{width:42px;height:42px;margin:-21px 0 0 -21px;}
@media (hover:none),(pointer:coarse){.cursor-dot{display:none;}}

/* ---------- magnetic buttons ---------- */
/* Transform is set directly by JS on mousemove (no transition while the
   pointer is over the button, so it tracks instantly) and only eased back
   to rest on mouseleave, where JS re-enables this transition. */
.btn,.navcta,.bctrl{transition:transform .4s cubic-bezier(.2,.8,.2,1);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .split-ready .word-inner{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;}
  .cursor-dot{display:none!important;}
  .btn,.navcta,.bctrl{transition:none!important;}
}

/* ================= round 8: built-by tags, footer legal column, legal pages ================= */
.built-tag{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.55);margin:-8px 0 0;}
.vbuilt{display:block;font-size:.82rem;font-weight:500;color:var(--pebble);margin:-8px 0 22px;}
.legal-body h2{font-weight:600;font-size:1.28rem;letter-spacing:-0.01em;color:var(--ink);margin:40px 0 14px;}
.legal-body h2:first-of-type{margin-top:0;}
.legal-body ul{margin:0 0 18px;padding-left:1.15em;color:var(--stone);}
.legal-body li{font-size:1.04rem;line-height:1.68;margin-bottom:8px;}
.legal-meta{color:var(--pebble);font-size:.85rem;margin:-8px 0 30px;}

/* ---------- round 12: script-built contact controls ---------- */
/* Buttons stand in for the old mailto links. The reset has zero specificity
   so .btn, .wpanel-link and the footer rules below still win. */
:where(button[data-mail-u]){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;}
.footer-col .mailbtn{color:var(--stone);font-size:.92rem;}
.footer-col .mailbtn:hover{color:var(--ink);}
.footer-row .mailbtn{color:var(--pebble);font-size:.82rem;}
.footer-row .mailbtn:hover{color:var(--stone);}
.legal-body .mailbtn-body{font-weight:500;text-decoration:underline;text-underline-offset:3px;}
[data-mail-u]:focus-visible,.legal-body a:focus-visible,.footer-col a:focus-visible{outline:2px solid currentColor;outline-offset:3px;}