/* ==========================================================================
   HELIOGRAPH — core stylesheet
   1.  Fonts
   2.  Design tokens
   3.  Reset & base
   4.  Typography
   5.  Layout primitives
   6.  Buttons & links
   7.  Forms
   8.  Header / navigation
   9.  Preloader, cursor, scroll progress
   10. Hero
   11. Marquee & clients
   12. Statistics
   13. Features
   14. Services
   15. Work / portfolio
   16. Case studies
   17. Testimonials
   18. Pricing
   19. FAQ
   20. Journal
   21. CTA & newsletter
   22. Footer
   23. Inner-page furniture
   24. About page
   25. Contact page
   26. 404
   27. Utilities
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/jakarta-200_800-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/jakarta-200_800-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-mono-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-mono-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-mono-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-mono-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2. Design tokens -------------------------------------------------------- */
:root{
  /* surfaces */
  --bg:#F4F1EC;
  --bg-sand:#EAE4D9;
  --surface:#FFFFFF;
  --surface-2:#FBF9F5;
  --deep:#0B0A09;
  --deep-2:#161311;
  --deep-3:#221D19;

  /* text */
  --ink:#14120F;
  --ink-2:#332E27;
  --muted:#6C655A;
  --muted-2:#7A7263;
  --on-deep:#F2EEE7;
  --on-deep-muted:#9A9285;

  /* lines */
  --line:#DED7CA;
  --line-2:#CFC6B6;
  --line-deep:rgba(242,238,231,.16);

  /* brand */
  --primary:#E4552B;
  --primary-deep:#C33F19;
  /* the orange at small sizes: --primary fails AA under 18px */
  --primary-ink:#A83512;
  --primary-soft:#FBE7DE;
  --secondary:#1B44D0;
  --accent:#0E9E96;

  /* status */
  --success:#1B8F5E;
  --warning:#B67F0C;
  --error:#CC3B24;

  /* spectrum — refracted light, warm to cool */
  --s1:#FF9A3C;
  --s2:#FF5C4D;
  --s3:#D6478E;
  --s4:#5A5FE0;
  --s5:#1798BE;
  --s6:#26AE86;
  --spectrum:linear-gradient(90deg,var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6));
  --spectrum-soft:linear-gradient(90deg,rgba(255,154,60,.85),rgba(255,92,77,.85),rgba(214,71,142,.85),rgba(90,95,224,.85),rgba(23,152,190,.85),rgba(38,174,134,.85));

  /* type */
  --font-display:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
  --font-sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-micro:clamp(.66rem,.62rem + .16vw,.75rem);
  --fs-sm:clamp(.82rem,.79rem + .16vw,.9rem);
  --fs-body:clamp(.98rem,.94rem + .22vw,1.09rem);
  --fs-lead:clamp(1.12rem,1.02rem + .5vw,1.45rem);
  --fs-h4:clamp(1.1rem,1rem + .5vw,1.35rem);
  --fs-h3:clamp(1.4rem,1.15rem + 1.1vw,2.1rem);
  --fs-h2:clamp(2.1rem,1.5rem + 2.8vw,4.2rem);
  --fs-h1:clamp(2.9rem,1.7rem + 5.4vw,7.4rem);
  --fs-mega:clamp(3.6rem,1.3rem + 10vw,11rem);

  /* space */
  --gutter:clamp(1.15rem,4vw,3rem);
  --wrap:84rem;
  --wrap-narrow:56rem;
  --band-y:clamp(4.5rem,9vw,8.5rem);
  --gap:clamp(1rem,2.2vw,2rem);

  /* form */
  --radius-xs:6px;
  --radius:14px;
  --radius-lg:24px;
  --radius-pill:999px;

  /* depth */
  --shadow-sm:0 1px 2px rgba(20,18,15,.05),0 2px 8px rgba(20,18,15,.04);
  --shadow:0 2px 6px rgba(20,18,15,.05),0 14px 34px -12px rgba(20,18,15,.14);
  --shadow-lg:0 4px 10px rgba(20,18,15,.05),0 34px 70px -22px rgba(20,18,15,.24);
  --shadow-glow:0 30px 90px -40px rgba(228,85,43,.55);

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur:.55s;

  --header-h:76px;
}

/* 3. Reset & base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Lenis drives scrolling; the class is added by js when it takes over */
}
html.lenis-on{scroll-behavior:auto}
html.lenis-on,html.lenis-on body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.62;
  letter-spacing:-.005em;
  /* clip (not hidden) — `hidden` silently disables Lenis smooth scrolling */
  overflow-x:clip;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}

img,picture,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
svg{fill:none}
/* Defensive default for inline icons: an <svg> with only a viewBox stretches
   to fill its container. Zero specificity, so any component rule wins. */
:where(svg:not([class])){width:1.15em;height:1.15em;flex:none}
::selection{background:var(--ink);color:var(--bg)}

:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:2px;
}
.deep :focus-visible,.band--deep :focus-visible{outline-color:var(--s1)}

.skip-link{
  position:fixed;top:0;left:50%;transform:translate(-50%,-140%);
  z-index:2000;background:var(--ink);color:var(--bg);
  padding:.7rem 1.3rem;border-radius:0 0 var(--radius-xs) var(--radius-xs);
  font-size:var(--fs-sm);font-weight:600;transition:transform .3s var(--ease);
}
.skip-link:focus-visible{transform:translate(-50%,0)}

/* 4. Typography ----------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.022em;
  line-height:.96;
}
.display em,.display i{font-style:italic}

h1,.h1{font-size:var(--fs-h1)}
h2,.h2{font-size:var(--fs-h2)}
h3,.h3{font-size:var(--fs-h3);line-height:1.14}
h4,.h4{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.018em}
.mega{font-size:var(--fs-mega);line-height:.86}

p{text-wrap:pretty}
.lead{
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--ink-2);
  letter-spacing:-.012em;
  font-weight:350;
}
.muted{color:var(--muted)}

/* Every dark surface, not just .band--deep — the hero, the page hero, the CTA,
   the 404 and the footer all paint on --deep, and generic text utilities have
   to flip with them or they render ink-on-ink. */
.band--deep .lead,
.hero .lead,
.page-hero .lead,
.cta .lead,
.notfound .lead,
.footer .lead{color:#CFC7B9}

.band--deep .muted,
.hero .muted,
.page-hero .muted,
.cta .muted,
.notfound .muted,
.footer .muted,
.menu .muted{color:var(--on-deep-muted)}

.band--deep .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta .eyebrow,
.notfound .eyebrow,
.footer .eyebrow{color:var(--on-deep-muted)}

.band--deep .text-sm,
.cta .text-sm,
.notfound .text-sm,
.footer .text-sm{color:inherit}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  line-height:1;
}
.eyebrow::before{
  content:"";
  width:1.6rem;height:1px;
  background:var(--spectrum);
  flex:none;
}
.eyebrow--plain::before{display:none}

.index-num{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.1em;
  color:var(--muted);
}

/* spectral text — applied to a wrapper, never to split-text children */
.spectra{
  background:var(--spectrum);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  padding-right:.06em;
}

.rule{height:1px;background:var(--line);border:0}
.band--deep .rule{background:var(--line-deep)}
.rule--spectrum{height:1px;background:var(--spectrum);opacity:.85}

/* 5. Layout primitives ---------------------------------------------------- */
.wrap{width:min(100% - var(--gutter) * 2,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - var(--gutter) * 2,var(--wrap-narrow));margin-inline:auto}
.wrap--wide{width:min(100% - var(--gutter) * 2,102rem);margin-inline:auto}

.band{position:relative;padding-block:var(--band-y)}
.band--tight{padding-block:clamp(3rem,6vw,5rem)}
.band--sand{background:var(--bg-sand)}
.band--surface{background:var(--surface)}
.band--deep{background:var(--deep);color:var(--on-deep)}
.band--deep h1,.band--deep h2,.band--deep h3,.band--deep h4{color:var(--on-deep)}
.band--deep .lead{color:#CFC7B9}
.band--flush{padding-block:0}

/* a hairline of refracted light at the seam between light and dark bands */
.band--deep::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:var(--spectrum);opacity:.5;
}
.band--deep.band--seam-glow::after{
  content:"";position:absolute;inset-inline:0;top:0;height:220px;
  background:radial-gradient(60% 100% at 50% 0%,rgba(255,154,60,.16),transparent 70%);
  pointer-events:none;
}

.section-head{
  display:grid;
  gap:clamp(1rem,2vw,1.6rem);
  margin-bottom:clamp(2.4rem,5vw,4.5rem);
}
.section-head__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.section-head__title{max-width:22ch}
.section-head__aside{max-width:44ch;color:var(--muted);font-size:var(--fs-body)}
.band--deep .section-head__aside,
.hero .section-head__aside,
.page-hero .section-head__aside,
.cta .section-head__aside,
.notfound .section-head__aside{color:var(--on-deep-muted)}
.section-head--split{
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:64rem){
  .section-head--split{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    align-items:end;
    column-gap:clamp(2rem,5vw,6rem);
  }
}

.stack{display:grid;gap:var(--gap)}
.stack-sm{display:grid;gap:.6rem}
.cluster{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* media
   Every fixed-ratio crop box stretches its <picture> to fill, otherwise the
   inline picture box has auto height and the img's height:100% resolves to
   nothing. */
.media{
  position:relative;
  overflow:hidden;
  background:var(--bg-sand);
  border-radius:var(--radius);
}
picture{display:block}
.media > picture,
.work__media > picture,
.post__media > picture,
.case__media > picture,
.member__media > picture,
.quote__portrait > picture,
.page-hero__bg > picture,
.studio-map > picture,
.service__peek > picture{
  position:absolute;inset:0;width:100%;height:100%;
}
.media img,.media video{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.media--4x3{aspect-ratio:4/3}
.media--3x2{aspect-ratio:3/2}
.media--1x1{aspect-ratio:1/1}
.media--4x5{aspect-ratio:4/5}
.media--16x9{aspect-ratio:16/9}
.media--tall{aspect-ratio:3/4}
.media--wide{aspect-ratio:21/9}
.media--square-lg{aspect-ratio:1/1}

/* Parallax images are oversized and centred so the ±6% travel can never
   expose an edge inside the crop box. */
.media--parallax img,
.work__media--parallax img,
.post__media--parallax img{
  position:absolute;left:0;top:-12%;
  width:100%;height:124%;object-fit:cover;
}

figure{margin:0}
figcaption{
  margin-top:.85rem;font-size:var(--fs-sm);color:var(--muted);
  display:flex;gap:.6rem;align-items:baseline;
}
figcaption::before{content:"";width:.9rem;height:1px;background:var(--line-2);flex:none;transform:translateY(-.35em)}
.band--deep figcaption,.hero figcaption,.page-hero figcaption,
.cta figcaption,.notfound figcaption,.footer figcaption{color:var(--on-deep-muted)}
.band--deep figcaption::before,.cta figcaption::before,
.notfound figcaption::before,.footer figcaption::before{background:var(--line-deep)}

/* 6. Buttons & links ------------------------------------------------------ */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--bg);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:.92em 1.6em;
  border-radius:var(--radius-pill);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:-.005em;
  line-height:1;
  border:1px solid transparent;
  overflow:hidden;
  isolation:isolate;
  transition:color .4s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  white-space:nowrap;
  cursor:pointer;
}
.btn__label{position:relative;z-index:2;display:inline-block}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--spectrum);
  transform:translate3d(0,101%,0);
  transition:transform .5s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{transform:translate3d(0,0,0)}
.btn:hover,.btn:focus-visible{color:#0B0A09}
.btn:active{transform:translateY(1px)}

.btn--light{--btn-bg:var(--bg);--btn-fg:var(--ink)}
.btn--outline{
  --btn-bg:transparent;--btn-fg:var(--ink);
  border-color:var(--line-2);
}
.btn--outline:hover,.btn--outline:focus-visible{border-color:transparent}
.btn--on-deep{--btn-bg:transparent;--btn-fg:var(--on-deep);border-color:var(--line-deep)}
.btn--on-deep:hover,.btn--on-deep:focus-visible{border-color:transparent;color:#0B0A09}
.btn--solid-light{--btn-bg:#F2EEE7;--btn-fg:#0B0A09}
.btn--sm{padding:.7em 1.15em;font-size:var(--fs-micro)}
.btn--lg{padding:1.05em 2em;font-size:var(--fs-body)}
.btn--block{display:flex;width:100%}

.btn__icon{position:relative;z-index:2;width:1em;height:1em;flex:none}
.btn__icon svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.6;fill:none}

/* magnetic wrapper — js translates .magnetic, css only handles the return */
.magnetic{display:inline-flex;will-change:transform}

/* inline arrow link */
.link{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:var(--fs-sm);
  padding-bottom:.22em;
  color:inherit;
}
.link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;
  transform-origin:right;transform:scaleX(1);
  transition:transform .45s var(--ease);
}
.link:hover::after,.link:focus-visible::after{
  transform-origin:left;
  animation:link-wipe .55s var(--ease);
}
.link svg{width:.85em;height:.85em;stroke:currentColor;stroke-width:1.8;fill:none;transition:transform .45s var(--ease)}
.link:hover svg{transform:translateX(.25em)}
.link--spectrum::after{background:var(--spectrum);height:2px}

/* 7. Forms ---------------------------------------------------------------- */
.field{position:relative;display:grid;gap:.45rem}
.field__label{
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.band--deep .field__label{color:var(--on-deep-muted)}
.field__control{
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xs);
  padding:.85rem 1rem;
  font-size:var(--fs-body);
  color:var(--ink);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);
  appearance:none;
}
textarea.field__control{min-height:9rem;resize:vertical;line-height:1.55}
select.field__control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236C655A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
  padding-right:2.6rem;cursor:pointer;
}
.field__control::placeholder{color:#A79E90}
.field__control:hover{border-color:var(--line-2)}
.field__control:focus{
  outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(20,18,15,.07);
}
.band--deep .field__control{
  background:rgba(255,255,255,.04);
  border-color:var(--line-deep);
  color:var(--on-deep);
}
.band--deep .field__control::placeholder{color:#7C7469}
.band--deep .field__control:focus{border-color:var(--s1);box-shadow:0 0 0 3px rgba(255,154,60,.16)}

.field__error{
  font-size:var(--fs-micro);color:var(--error);
  display:flex;align-items:center;gap:.35rem;
  min-height:1.1em;
  opacity:0;transform:translateY(-3px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.field.is-invalid .field__error{opacity:1;transform:none}
.field.is-invalid .field__control{border-color:var(--error);background:rgba(204,59,36,.035)}
.field.is-valid .field__control{border-color:var(--success)}

.form-grid{display:grid;gap:clamp(1rem,2vw,1.4rem)}
@media (min-width:48rem){
  .form-grid--2{grid-template-columns:1fr 1fr}
  .form-grid .span-2{grid-column:1/-1}
}

.checkfield{
  display:flex;gap:.75rem;align-items:flex-start;
  font-size:var(--fs-sm);color:var(--muted);
  cursor:pointer;line-height:1.5;
  /* never inherit the uppercase micro-label treatment */
  text-transform:none;letter-spacing:normal;font-family:var(--font-sans);
}
.checkfield input{
  appearance:none;flex:none;
  width:1.15rem;height:1.15rem;margin-top:.16rem;
  border:1px solid var(--line-2);border-radius:4px;
  background:var(--surface);cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.checkfield input:checked{background:var(--ink);border-color:var(--ink)}
.checkfield input:checked::after{
  content:"";display:block;width:100%;height:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4 5.8 10 11 4' stroke='%23F4F1EC' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;
}
.checkfield a{text-decoration:underline;text-underline-offset:2px}
.band--deep .checkfield{color:var(--on-deep-muted)}
.band--deep .checkfield input{background:rgba(255,255,255,.05);border-color:var(--line-deep)}
.band--deep .checkfield input:checked{background:var(--s1);border-color:var(--s1)}

.form-status{
  font-size:var(--fs-sm);
  display:flex;align-items:center;gap:.6rem;
  min-height:1.5em;
}
.form-status[data-state="error"]{color:var(--error)}
.form-status[data-state="success"]{color:var(--success)}
.band--deep .form-status[data-state="success"]{color:#57D39B}

/* success animation */
.form-success{
  display:grid;place-items:center;gap:1rem;text-align:center;
  padding:clamp(2rem,5vw,3.5rem) 1rem;
}
.form-success__mark{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--primary-soft);
}
.band--deep .form-success__mark{background:rgba(255,154,60,.14)}
.form-success__mark svg{width:28px;height:28px;stroke:var(--primary);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.form-success__mark svg path{stroke-dasharray:32;stroke-dashoffset:32;animation:check-draw .6s .1s var(--ease) forwards}

/* 8. Header / navigation -------------------------------------------------- */
.header{
  position:fixed;inset-inline:0;top:0;z-index:900;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:transform .5s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease),backdrop-filter .45s var(--ease);
  color:var(--on-deep);
}
.header__inner{
  width:min(100% - var(--gutter) * 2,102rem);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.header::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:var(--line-deep);opacity:0;transition:opacity .4s var(--ease);
}
.header.is-stuck{
  background:rgba(244,241,236,.82);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  color:var(--ink);
  box-shadow:0 1px 0 rgba(20,18,15,.06),0 14px 34px -26px rgba(20,18,15,.4);
}
.header.is-stuck::after{opacity:0;background:var(--line)}
.header.on-light{color:var(--ink)}

/* brand */
.brand{display:inline-flex;align-items:center;gap:.65rem;flex:none}
.brand__mark{width:26px;height:26px;flex:none;overflow:visible}
.brand__mark path,.brand__mark line{
  stroke:currentColor;stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.brand__mark .ray{stroke-width:1.6}
.brand__mark .ray-1{stroke:var(--s1)}
.brand__mark .ray-2{stroke:var(--s3)}
.brand__mark .ray-3{stroke:var(--s5)}
.brand__word{
  font-family:var(--font-sans);
  font-weight:700;font-size:.94rem;
  letter-spacing:.18em;text-transform:uppercase;
  line-height:1;
}
.brand:hover .brand__mark{animation:prism-tick .6s var(--ease)}

/* nav */
.nav{display:none}
@media (min-width:62rem){
  .nav{display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.5rem)}
}
.nav__link{
  position:relative;
  font-size:var(--fs-sm);font-weight:500;
  padding:.5rem .2rem;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:opacity .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:.2rem;right:.2rem;bottom:.15rem;height:1px;
  background:var(--spectrum);
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{font-weight:600}

.header__actions{display:flex;align-items:center;gap:.6rem}
.header__cta{display:none}
@media (min-width:48rem){.header__cta{display:inline-flex}}
.header .btn--on-deep{border-color:currentColor;opacity:.85}
.header.is-stuck .btn--on-deep,.header.on-light .btn--on-deep{color:var(--ink)}

/* burger */
.burger{
  position:relative;z-index:2;
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:var(--radius-pill);
  border:1px solid currentColor;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
@media (min-width:62rem){.burger{display:none}}
.burger__box{width:17px;height:11px;position:relative}
.burger__bar{
  position:absolute;left:0;width:100%;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.burger__bar:nth-child(1){top:0}
.burger__bar:nth-child(2){top:50%;margin-top:-.75px}
.burger__bar:nth-child(3){bottom:0}
.burger[aria-expanded="true"] .burger__bar:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] .burger__bar:nth-child(3){transform:translateY(-4.75px) rotate(-45deg)}

/* mobile menu */
.menu{
  position:fixed;inset:0;z-index:880;
  background:var(--deep);color:var(--on-deep);
  display:grid;grid-template-rows:var(--header-h) 1fr auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease),visibility .75s;
  visibility:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu__body{
  width:min(100% - var(--gutter) * 2,102rem);margin-inline:auto;
  align-self:center;padding-block:clamp(1.5rem,5vw,3rem);
  display:grid;gap:clamp(1.5rem,4vw,3rem);
}
.menu__list{display:grid;gap:clamp(.1rem,1vw,.4rem)}
.menu__item{overflow:hidden}
.menu__link{
  display:flex;align-items:baseline;gap:1rem;
  font-family:var(--font-display);
  font-size:clamp(2.3rem,11vw,4.4rem);
  line-height:1.14;letter-spacing:-.03em;
  transform:translateY(105%);
  transition:transform .7s var(--ease),color .35s var(--ease);
}
.menu.is-open .menu__link{transform:translateY(0)}
.menu__link .index-num{font-size:.62rem;color:var(--on-deep-muted);transform:translateY(-.9em)}
.menu__link:hover,.menu__link:focus-visible{color:var(--s1)}
.menu__meta{
  display:grid;gap:1.25rem;
  border-top:1px solid var(--line-deep);
  padding-top:clamp(1.2rem,3vw,2rem);
  font-size:var(--fs-sm);color:var(--on-deep-muted);
}
@media (min-width:40rem){.menu__meta{grid-template-columns:repeat(3,1fr)}}
.menu__meta a:hover{color:var(--on-deep)}
.menu__foot{
  width:min(100% - var(--gutter) * 2,102rem);margin-inline:auto;
  padding-block:1.4rem;
  border-top:1px solid var(--line-deep);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-muted);
}

/* 9. Preloader, cursor, scroll progress ----------------------------------- */
.preloader{
  position:fixed;inset:0;z-index:1200;
  background:var(--deep);color:var(--on-deep);
  display:grid;grid-template-rows:1fr auto;
  padding:var(--gutter);
  transition:opacity .5s var(--ease);
}
.preloader__center{
  display:grid;place-content:center;justify-items:center;gap:1.6rem;text-align:center;
}
.preloader__beam{
  position:relative;width:min(56vw,320px);height:2px;
  background:rgba(242,238,231,.14);overflow:hidden;border-radius:2px;
}
.preloader__beam span{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:var(--spectrum);
}
.preloader__word{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,5vw,2.6rem);letter-spacing:.02em;line-height:1;
}
.preloader__foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-deep-muted);
}
.preloader__pct{
  font-family:var(--font-mono);
  font-size:clamp(2.6rem,9vw,5rem);
  color:var(--on-deep);letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.preloader.is-done{pointer-events:none}

/* page-transition curtain, also used by the preloader exit */
.curtain{
  position:fixed;inset:0;z-index:1150;
  background:var(--deep);
  transform:translate3d(0,100%,0);
  pointer-events:none;
}
.curtain__edge{
  position:absolute;inset-inline:0;top:0;height:2px;
  background:var(--spectrum);
}

/* cursor */
/* Starts invisible: until the pointer moves there is no meaningful position
   to draw it at, and the default one is the top-left corner. */
.cursor{
  position:fixed;top:0;left:0;z-index:1100;
  pointer-events:none;
  mix-blend-mode:difference;
  display:none;
  opacity:0;
  transition:opacity .35s var(--ease);
}
.cursor.is-ready{opacity:1}
.cursor__dot{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  transition:width .35s var(--ease),height .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease);
}
.cursor__label{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:#0B0A09;opacity:0;
  transition:opacity .25s var(--ease);white-space:nowrap;
}
.cursor.is-active .cursor__ring{width:78px;height:78px;background:#fff;border-color:#fff}
.cursor.is-active .cursor__label{opacity:1}
.cursor.is-hidden{opacity:0 !important}
@media (hover:hover) and (pointer:fine) and (min-width:62rem){
  .has-cursor .cursor{display:block}
}

/* scroll progress */
.progress{
  position:fixed;inset-inline:0;top:0;z-index:950;
  height:2px;pointer-events:none;
}
.progress__bar{
  height:100%;width:100%;
  background:var(--spectrum);
  transform:scaleX(0);transform-origin:left;
}

.to-top{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  z-index:800;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:var(--bg);
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.to-top:hover{background:var(--primary)}

/* 10. Hero ---------------------------------------------------------------- */
.hero{
  position:relative;
  background:var(--deep);color:var(--on-deep);
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding-top:calc(var(--header-h) + clamp(1.5rem,5vh,4rem));
  padding-bottom:clamp(1.2rem,3vh,2.2rem);
  overflow:hidden;
  isolation:isolate;
}
/* The poster image sits behind the loop so reduced motion can drop the video
   without losing the picture. GSAP owns the transform on .hero__bg itself —
   the children only carry opacity. */
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg picture{position:absolute;inset:0;display:block}
.hero__bg video,.hero__bg img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.hero__bg img{opacity:.6}
.hero__bg video{opacity:.62}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 70% at 78% 40%,rgba(11,10,9,.1),rgba(11,10,9,.86) 78%),
    linear-gradient(180deg,rgba(11,10,9,.9) 0%,rgba(11,10,9,.35) 32%,rgba(11,10,9,.72) 78%,rgba(11,10,9,.97) 100%);
}
/* a beam of refracted light that tracks the pointer */
.hero__beam{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38rem 38rem at var(--mx,60%) var(--my,42%),
    rgba(255,154,60,.16),rgba(214,71,142,.1) 32%,rgba(90,95,224,.08) 52%,transparent 70%);
  transition:opacity .6s var(--ease);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

.hero__inner{
  width:min(100% - var(--gutter) * 2,102rem);margin-inline:auto;
  align-self:center;
  display:grid;gap:clamp(1.6rem,4vw,2.6rem);
  padding-block:clamp(1rem,4vh,3rem);
}
.hero__eyebrow{color:#C9C1B4}
.hero__title{
  font-family:var(--font-display);
  font-size:var(--fs-h1);
  font-weight:400;line-height:.94;letter-spacing:-.028em;
  max-width:17ch;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line > span{display:block}
.hero__title em{font-style:italic}
.hero__aside{
  display:grid;gap:1.6rem;
  max-width:38ch;
  justify-self:start;
}
@media (min-width:62rem){
  .hero__inner{
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    align-items:end;
    column-gap:clamp(2rem,5vw,6rem);
  }
  .hero__head{grid-column:1}
  .hero__aside{grid-column:2;justify-self:end;padding-bottom:.5rem}
}
.hero__lead{color:#CFC7B9;font-size:var(--fs-lead);line-height:1.5;font-weight:300}

.hero__foot{
  width:min(100% - var(--gutter) * 2,102rem);margin-inline:auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;
  border-top:1px solid var(--line-deep);
  padding-top:clamp(.9rem,2vw,1.4rem);
}
.hero__facts{
  display:flex;flex-wrap:wrap;gap:clamp(1.2rem,4vw,3.2rem);
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-deep-muted);
}
.hero__facts strong{color:var(--on-deep);font-weight:500}

.scroll-cue{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-deep-muted);
}
.scroll-cue__track{
  position:relative;width:1px;height:34px;background:var(--line-deep);overflow:hidden;
}
.scroll-cue__track::after{
  content:"";position:absolute;inset-inline:0;top:0;height:12px;
  background:var(--s1);
  animation:cue-drop 1.8s var(--ease-soft) infinite;
}

/* 11. Marquee & clients --------------------------------------------------- */
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;width:max-content;
  will-change:transform;
}
.marquee__group{
  display:flex;align-items:center;
  gap:clamp(2.5rem,6vw,5.5rem);
  padding-right:clamp(2.5rem,6vw,5.5rem);
  flex:none;
}
.client{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--muted);
  opacity:.72;
  transition:opacity .35s var(--ease),color .35s var(--ease);
  flex:none;
}
.client:hover{opacity:1;color:var(--ink)}
.client svg{height:clamp(20px,2.6vw,26px);width:auto;fill:currentColor;stroke:none}
.client__name{
  font-weight:700;font-size:clamp(.95rem,1.6vw,1.15rem);
  letter-spacing:.02em;white-space:nowrap;
}
.band--deep .client{color:var(--on-deep-muted)}
.band--deep .client:hover{color:var(--on-deep)}

/* 12. Statistics ---------------------------------------------------------- */
.stats{
  display:grid;gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
}
.band--deep .stats{background:var(--line-deep);border-color:var(--line-deep)}
@media (min-width:40rem){.stats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{
  background:var(--bg);
  padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1.1rem,2.5vw,2rem);
  display:grid;gap:.5rem;align-content:start;
  position:relative;overflow:hidden;
}
.band--sand .stat{background:var(--bg-sand)}
.band--deep .stat{background:var(--deep)}
.stat::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--spectrum);
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.stat:hover::after{transform:scaleX(1)}
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:.92;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:.06em;
}
.stat__suffix{font-size:.42em;letter-spacing:0}
.stat__label{font-size:var(--fs-sm);color:var(--muted);max-width:26ch}
.band--deep .stat__label{color:var(--on-deep-muted)}

/* 13. Features ------------------------------------------------------------ */
.features{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
@media (min-width:44rem){.features{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.features{grid-template-columns:repeat(3,1fr)}}
.feature{
  background:var(--surface);
  padding:clamp(1.5rem,3vw,2.3rem);
  display:grid;gap:.85rem;align-content:start;
  position:relative;
  transition:background-color .45s var(--ease);
  min-height:clamp(13rem,20vw,16rem);
}
.feature:hover{background:var(--surface-2)}
.feature__icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:10px;
  border:1px solid var(--line);
  color:var(--ink);
  margin-bottom:.35rem;
  transition:border-color .45s var(--ease),color .45s var(--ease),transform .45s var(--ease);
}
.feature__icon svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feature:hover .feature__icon{color:var(--primary);border-color:var(--primary);transform:translateY(-2px)}
.feature__title{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em}
.feature__text{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.feature__num{
  position:absolute;top:clamp(1.5rem,3vw,2.3rem);right:clamp(1.5rem,3vw,2.3rem);
  font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--muted-2);
}
/* price variant: the number leads the card instead of sitting in the corner */
.feature--price .feature__num{
  position:static;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.2vw,2.3rem);
  letter-spacing:-.025em;line-height:1;color:var(--ink);
}
.feature--price .feature__icon{
  position:absolute;top:clamp(1.5rem,3vw,2.3rem);right:clamp(1.5rem,3vw,2.3rem);
  margin:0;
}
/* exclusions read as absences, not as accents */
.checklist--out svg{stroke:var(--muted)}
.band--deep .checklist--out svg{stroke:var(--on-deep-muted)}
.checklist--out li{color:var(--muted)}
.band--deep .checklist--out li{color:var(--on-deep-muted)}
.checklist--out strong{color:var(--ink)}
.band--deep .checklist--out strong{color:var(--on-deep)}

/* 14. Services ------------------------------------------------------------ */
.services{border-top:1px solid var(--line)}
.band--deep .services{border-color:var(--line-deep)}
.service{
  position:relative;
  display:block;
  border-bottom:1px solid var(--line);
  padding-block:clamp(1.4rem,3.2vw,2.4rem);
}
.band--deep .service{border-color:var(--line-deep)}
.service__row{
  display:grid;gap:.6rem 1.5rem;align-items:baseline;
  grid-template-columns:auto 1fr;
  position:relative;z-index:2;
}
@media (min-width:56rem){
  .service__row{grid-template-columns:5rem minmax(0,1.1fr) minmax(0,1fr) auto}
}
.service__num{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--muted);letter-spacing:.1em}
.service__title{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,4.2vw,3.1rem);line-height:1.02;letter-spacing:-.025em;
  font-weight:400;
  transition:transform .55s var(--ease),color .45s var(--ease);
  grid-column:2;
}
@media (min-width:56rem){.service__title{grid-column:auto}}
.service__text{
  font-size:var(--fs-sm);color:var(--muted);max-width:46ch;
  grid-column:2;
}
@media (min-width:56rem){.service__text{grid-column:auto;padding-top:.4rem}}
.band--deep .service__text{color:var(--on-deep-muted)}
.service__go{
  grid-column:2;
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  transition:color .4s var(--ease),transform .5s var(--ease);
}
@media (min-width:56rem){.service__go{grid-column:auto;justify-self:end}}
.service__go svg{width:.9em;height:.9em;stroke:currentColor;stroke-width:1.8;fill:none}
.service:hover .service__title{transform:translateX(clamp(.4rem,1.4vw,1.4rem));color:var(--primary)}
.band--deep .service:hover .service__title{color:var(--s1)}
.service:hover .service__go{color:var(--ink);transform:translateX(.3rem)}
.band--deep .service:hover .service__go{color:var(--on-deep)}

/* floating hover preview (desktop only, positioned by js) */
.service__peek{
  position:absolute;top:50%;right:clamp(6rem,14vw,14rem);
  width:clamp(180px,17vw,270px);aspect-ratio:4/5;
  border-radius:var(--radius);overflow:hidden;
  transform:translate(0,-50%) scale(.86);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),transform .55s var(--ease),visibility .45s;
  z-index:1;pointer-events:none;
  box-shadow:var(--shadow-lg);
}
.service__peek img{width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (min-width:62rem){
  .service:hover .service__peek{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1)}
}

/* 15. Work / portfolio ---------------------------------------------------- */
.filters{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.filter{
  padding:.5rem 1rem;border-radius:var(--radius-pill);
  border:1px solid var(--line);
  font-size:var(--fs-sm);font-weight:500;color:var(--muted);
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
}
.filter:hover{color:var(--ink);border-color:var(--line-2)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.work-grid{
  display:grid;gap:clamp(1.2rem,3vw,2.4rem);
  grid-template-columns:1fr;
}
@media (min-width:46rem){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:72rem){.work-grid--3{grid-template-columns:repeat(3,1fr)}}
.work-grid__item.is-filtered{display:none}

.work{
  position:relative;display:grid;gap:1rem;
  align-content:start;
}
.work__media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--bg-sand);
  aspect-ratio:4/3;
}
.work--tall .work__media{aspect-ratio:4/5}
.work--wide .work__media{aspect-ratio:16/10}
.work__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform .9s var(--ease),filter .6s var(--ease);
}
.work:hover .work__media img{transform:scale(1.07)}
.work__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(11,10,9,.5));
  opacity:0;transition:opacity .5s var(--ease);
}
.work:hover .work__media::after{opacity:1}
.work__tag{
  position:absolute;left:1rem;top:1rem;z-index:2;
  padding:.34rem .7rem;border-radius:var(--radius-pill);
  background:rgba(244,241,236,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  transform:translateY(-6px);opacity:0;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.work:hover .work__tag{opacity:1;transform:none}
.work__body{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.work__title{
  font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em;
  transition:color .35s var(--ease);
}
.work:hover .work__title{color:var(--primary)}
.band--deep .work:hover .work__title{color:var(--s1)}
.work__meta{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--muted);white-space:nowrap}
.work__desc{font-size:var(--fs-sm);color:var(--muted);max-width:42ch}
.band--deep .work__desc,.band--deep .work__meta{color:var(--on-deep-muted)}
/* whole-card hit area without nesting interactive elements */
.work__link::after{content:"";position:absolute;inset:0;z-index:3}

/* 16. Case studies -------------------------------------------------------- */
/* The rail's leading gutter lives on the track, so the scroll container needs
   a matching scroll-padding — without it, snap-align:start pulls the first
   card flush to the viewport edge and the gutter silently disappears. */
.cases{position:relative;--rail-pad:var(--gutter)}
@media (min-width:48em){
  .cases{--rail-pad:max(var(--gutter),calc((100vw - 102rem) / 2 + var(--gutter)))}
}
/* Default state is a native horizontal scroller — that is also the no-JS and
   small-screen experience. The pinned GSAP rail switches overflow off. */
.cases__viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--rail-pad);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cases__viewport::-webkit-scrollbar{display:none}
.cases__track{
  display:flex;gap:clamp(1.2rem,3vw,2.5rem);
  padding-inline:var(--rail-pad);
  will-change:transform;
}
.case{
  flex:none;
  width:min(84vw,30rem);
  display:grid;gap:1.3rem;align-content:start;
  scroll-snap-align:start;
}
@media (min-width:64rem){.case{width:min(46vw,34rem)}}
.case__media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:5/4;background:var(--deep-2);
}
.case__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.case:hover .case__media img{transform:scale(1.05)}
.case__index{
  position:absolute;top:1rem;right:1.1rem;z-index:2;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.1em;color:rgba(242,238,231,.85);
}
.case__title{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.025em}
.case__text{font-size:var(--fs-sm);color:var(--on-deep-muted);max-width:44ch}
.case__stats{
  display:flex;gap:clamp(1.2rem,3vw,2.4rem);flex-wrap:wrap;
  border-top:1px solid var(--line-deep);padding-top:1rem;
}
.case__stat{display:grid;gap:.15rem}
.case__stat b{
  font-family:var(--font-display);font-size:clamp(1.35rem,3vw,1.9rem);
  font-weight:400;letter-spacing:-.02em;line-height:1;
}
.case__stat span{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--on-deep-muted)}

.cases__nav{
  display:flex;align-items:center;gap:.6rem;
  margin-top:clamp(1.5rem,3vw,2.4rem);
}

/* While the rail is pinned the whole section is held on screen, so it has to
   fit the viewport at any height: the media cell takes whatever is left after
   the heading, the copy, the stats and the controls.
   Gated on .is-railed, which the motion layer adds only when it actually pins.
   Without it — reduced motion, no JavaScript, narrow screens — the cards keep
   their natural aspect ratio and the section grows normally. */
@media (min-width:64rem){
  .cases.is-railed{
    display:flex;flex-direction:column;
    min-height:100svh;
    padding-block:clamp(2.25rem,5vh,4.5rem);
  }
  .cases.is-railed > .wrap--wide{flex:none}
  .cases.is-railed .section-head{margin-bottom:clamp(1.25rem,3vh,2.4rem)}
  .cases.is-railed .cases__viewport{flex:1 1 auto;min-height:0}
  .cases.is-railed .cases__track{height:100%;align-items:stretch}
  .cases.is-railed .case{
    height:100%;gap:clamp(.75rem,1.6vh,1.3rem);
    grid-template-rows:minmax(5rem,1fr) auto auto auto;
    align-content:stretch;
  }
  .cases.is-railed .case__media{aspect-ratio:auto;height:auto;min-height:0}
  /* the rail's controls sit at the bottom of a pinned viewport, exactly where
     the floating back-to-top button lives — keep the link clear of it */
  .cases.is-railed .cases__nav{margin-top:clamp(1rem,2.4vh,2rem);padding-right:4rem}
}
.cases__btn{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-deep);
  display:grid;place-items:center;color:var(--on-deep);
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),opacity .3s var(--ease);
}
.cases__btn:hover:not(:disabled){background:var(--on-deep);color:var(--deep);border-color:var(--on-deep)}
.cases__btn:disabled{opacity:.32;cursor:not-allowed}
.cases__btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cases__bar{
  flex:1;height:1px;background:var(--line-deep);margin-inline:1rem;position:relative;
}
/* the thumb is moved by js (scrub or scroll position) — no transition here,
   a scrubbed value must never be smoothed twice */
.cases__bar span{
  position:absolute;inset-block:-1px;left:0;height:3px;
  background:var(--spectrum);width:34%;
}

/* 17. Testimonials -------------------------------------------------------- */
.quotes{position:relative}
.quotes__viewport{position:relative;overflow:hidden}
.quote{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  align-items:center;
}
@media (min-width:56rem){
  .quote{grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}
}
.quote__portrait{
  position:relative;
  width:clamp(4.5rem,10vw,10rem);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:var(--bg-sand);flex:none;
}
.quote__portrait img{width:100%;height:100%;object-fit:cover}
.quote__body{display:grid;gap:1.4rem}
.quote__text{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,3.4vw,2.4rem);
  line-height:1.24;letter-spacing:-.022em;font-weight:400;
  text-wrap:pretty;
}
.quote__text::before{content:"\201C"}
.quote__text::after{content:"\201D"}
.quote__by{display:grid;gap:.15rem;font-size:var(--fs-sm)}
.quote__by b{font-weight:600}
.quote__by span{color:var(--muted)}
.band--deep .quote__by span{color:var(--on-deep-muted)}
.quote[hidden]{display:none !important}

.quotes__foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:clamp(1.8rem,4vw,3rem);
  border-top:1px solid var(--line);padding-top:1.2rem;flex-wrap:wrap;
}
.band--deep .quotes__foot{border-color:var(--line-deep)}
.quotes__dots{display:flex;gap:.5rem}
.quotes__dot{
  width:26px;height:2px;background:var(--line-2);
  transition:background-color .35s var(--ease);
}
.quotes__dot[aria-selected="true"]{background:var(--ink)}
.band--deep .quotes__dot{background:var(--line-deep)}
.band--deep .quotes__dot[aria-selected="true"]{background:var(--s1)}
.quotes__ctrl{display:flex;gap:.5rem}
.quotes__btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.quotes__btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.quotes__btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.band--deep .quotes__btn{border-color:var(--line-deep)}
.band--deep .quotes__btn:hover{background:var(--on-deep);color:var(--deep);border-color:var(--on-deep)}

/* 18. Pricing ------------------------------------------------------------- */
.plan-toggle{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:var(--surface);
}
.plan-toggle__btn{
  padding:.5rem 1.1rem;border-radius:var(--radius-pill);
  font-size:var(--fs-sm);font-weight:600;color:var(--muted);
  transition:background-color .35s var(--ease),color .35s var(--ease);
  white-space:nowrap;
}
.plan-toggle__btn[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

.plans{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
@media (min-width:52rem){.plans{grid-template-columns:repeat(3,1fr);align-items:start}}
.plan{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.2rem);
  display:grid;gap:1.3rem;align-content:start;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .45s var(--ease);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan--featured{
  background:var(--deep);color:var(--on-deep);border-color:var(--deep);
  box-shadow:var(--shadow-lg);
}
.plan--featured::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--spectrum);
}
.plan__badge{
  position:absolute;top:-.75rem;right:1.4rem;
  padding:.3rem .75rem;border-radius:var(--radius-pill);
  background:var(--primary-deep);color:#fff;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;
}
.plan__name{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em}
.plan__desc{font-size:var(--fs-sm);color:var(--muted);min-height:3em}
.plan--featured .plan__desc{color:var(--on-deep-muted)}
.plan__price{
  display:flex;align-items:baseline;gap:.4rem;
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;letter-spacing:-.03em;
}
.plan__price small{
  font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:500;
  color:var(--muted);letter-spacing:0;
}
.plan--featured .plan__price small{color:var(--on-deep-muted)}
.plan__price [data-price]{font-variant-numeric:tabular-nums}
/* a word instead of a figure needs less air to sit level with the numbers */
.plan__price--word{font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.02em}
.plan__list{display:grid;gap:.7rem;font-size:var(--fs-sm)}
.plan__list li{display:flex;gap:.65rem;align-items:flex-start;line-height:1.5}
.plan__list svg{
  width:1rem;height:1rem;flex:none;margin-top:.28rem;
  stroke:var(--primary);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.plan--featured .plan__list svg{stroke:var(--s1)}
.plan__list li.is-off{color:var(--muted);opacity:.65}
.plan__list li.is-off svg{stroke:currentColor}
.plan__foot{display:grid;gap:.7rem;padding-top:.3rem}
.plan__note{font-size:var(--fs-micro);color:var(--muted);text-align:center}
.plan--featured .plan__note{color:var(--on-deep-muted)}

.compare{
  width:100%;
  font-size:var(--fs-sm);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare th,.compare td{
  padding:.9rem 1rem;text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.compare thead th{
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  background:var(--surface-2);white-space:nowrap;
}
.compare tbody th{font-weight:500;color:var(--ink)}
.compare td{text-align:center;color:var(--muted);white-space:nowrap}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare tbody tr:hover td,.compare tbody tr:hover th{background:var(--surface-2)}
.compare .yes{color:var(--success)}
.compare .no{color:var(--line-2)}
.compare td svg{
  display:inline-block;width:17px;height:17px;
  stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-3px;
}

/* 19. FAQ ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.band--deep .faq{border-color:var(--line-deep)}
.faq__item{border-bottom:1px solid var(--line)}
.band--deep .faq__item{border-color:var(--line-deep)}
.faq__q{
  width:100%;text-align:left;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(1.1rem,2.4vw,1.6rem);
  font-size:var(--fs-h4);font-weight:500;letter-spacing:-.02em;
  color:inherit;
  transition:color .35s var(--ease);
}
.faq__q:hover{color:var(--primary)}
.band--deep .faq__q:hover{color:var(--s1)}
.faq__icon{
  position:relative;flex:none;width:20px;height:20px;margin-top:.3rem;
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;
  background:currentColor;border-radius:2px;
  transition:transform .45s var(--ease);
}
.faq__icon::after{transform:rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:rotate(0)}
.faq__a{
  overflow:hidden;height:0;
}
.faq__a-inner{
  padding-bottom:clamp(1.2rem,2.6vw,1.8rem);
  max-width:64ch;color:var(--muted);font-size:var(--fs-body);
}
.band--deep .faq__a-inner{color:var(--on-deep-muted)}
.faq__a-inner p + p{margin-top:.8rem}

/* 20. Journal ------------------------------------------------------------- */
/* anchored sections must clear the fixed header */
[id]{scroll-margin-top:calc(var(--header-h) + 1.5rem)}

.essay{
  display:grid;gap:1rem;
  padding-block:clamp(2rem,5vw,3.5rem);
}
.essay__meta{
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.essay__title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.05;
}
.essay__lede{
  font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2);
  font-weight:350;max-width:46ch;
}
.essay p{max-width:70ch}

.posts{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:46rem){.posts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:70rem){.posts--3{grid-template-columns:repeat(3,1fr)}}

.post{position:relative;display:grid;gap:1.1rem;align-content:start}
.post__media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:3/2;background:var(--bg-sand);
}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.post:hover .post__media img{transform:scale(1.06)}
.post__meta{
  display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.post__meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor}
.post__title{
  font-size:var(--fs-h4);font-weight:600;letter-spacing:-.022em;line-height:1.28;
  transition:color .35s var(--ease);
}
.post:hover .post__title{color:var(--primary)}
.post__excerpt{font-size:var(--fs-sm);color:var(--muted);max-width:46ch}
.post__link::after{content:"";position:absolute;inset:0;z-index:3}
.band--deep .post__meta,.band--deep .post__excerpt{color:var(--on-deep-muted)}
.band--deep .post:hover .post__title{color:var(--s1)}

.post--feature{gap:1.4rem}
@media (min-width:60rem){
  .post--feature{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,4vw,3.5rem)}
  .post--feature .post__media{aspect-ratio:4/3}
  .post--feature .post__body{display:grid;gap:1.1rem;align-content:center}
  .post--feature .post__title{font-size:var(--fs-h3)}
  .post--feature .post__excerpt{font-size:var(--fs-body);max-width:48ch}
}

/* 21. CTA & newsletter ---------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;
  background:var(--deep);color:var(--on-deep);
  isolation:isolate;
}
.cta__aurora{
  position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(34% 44% at 22% 32%,rgba(255,154,60,.5),transparent 62%),
    radial-gradient(30% 40% at 68% 26%,rgba(214,71,142,.42),transparent 64%),
    radial-gradient(36% 46% at 52% 74%,rgba(23,152,190,.38),transparent 66%),
    radial-gradient(28% 36% at 84% 66%,rgba(38,174,134,.32),transparent 64%);
  filter:blur(48px);
  opacity:.55;
  will-change:transform,translate;
}
.cta__grain{
  position:absolute;inset:0;z-index:-1;opacity:.3;pointer-events:none;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.cta__inner{
  display:grid;gap:clamp(1.6rem,4vw,2.6rem);
  justify-items:center;text-align:center;
  padding-block:clamp(4rem,10vw,8rem);
}
.cta__title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-h1);line-height:.96;letter-spacing:-.028em;
  max-width:16ch;
}
.cta__lead{max-width:48ch;color:#CFC7B9;font-size:var(--fs-lead);font-weight:300}
.cta__meta{
  display:flex;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap;justify-content:center;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-deep-muted);
  padding-top:.6rem;
}
.cta__meta a:hover{color:var(--on-deep)}

.newsletter{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  align-items:center;
}
@media (min-width:58rem){
  .newsletter{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,5rem)}
}
.newsletter__form{display:grid;gap:.9rem}
.newsletter__row{
  display:flex;gap:.6rem;flex-wrap:wrap;
}
.newsletter__row .field{flex:1 1 16rem}
.newsletter__row .btn{flex:none}

/* 22. Footer -------------------------------------------------------------- */
.footer{
  background:var(--deep);color:var(--on-deep);
  position:relative;overflow:hidden;
  padding-top:clamp(3rem,7vw,5.5rem);
}
.footer::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:var(--spectrum);opacity:.55;
}
.footer__grid{
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
@media (min-width:52rem){
  .footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
}
/* Below the desktop breakpoint the link columns pair up two per row rather
   than forming one long stack. The brand block keeps the full width, and the
   columns get their own tighter gaps so two fit at 320px without crowding. */
@media (max-width:51.999rem){
  .footer__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(1.15rem,4vw,2.5rem);
    row-gap:clamp(1.9rem,5vw,3rem);
  }
  .footer__brand{grid-column:1 / -1}
  .footer__col{min-width:0}
}
/* Under 480px a half column is too narrow for an email address or a phone
   number, which then break mid-value. The contact block takes the row it was
   already sitting alone on; the two nav columns stay paired. */
@media (max-width:29.999rem){
  .footer__col--contact{grid-column:1 / -1}
}
.footer__brand{display:grid;gap:1.1rem;align-content:start;max-width:34ch}
.footer__blurb{color:var(--on-deep-muted);font-size:var(--fs-sm)}
.footer__col{display:grid;gap:.85rem;align-content:start}
.footer__head{
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-deep-muted);
}
.footer__list{display:grid;gap:.6rem;font-size:var(--fs-sm)}
.footer__list a{
  display:inline-flex;align-items:center;gap:.45rem;
  color:#C9C1B4;transition:color .3s var(--ease),transform .35s var(--ease);
}
.footer__list a:hover{color:var(--on-deep);transform:translateX(3px)}
.footer__wordmark{
  padding-block:clamp(1rem,3vw,2rem);
  border-top:1px solid var(--line-deep);
}
.footer__wordmark svg{width:100%;height:auto;display:block;overflow:visible}
.footer__wordmark svg text{
  fill:none;stroke:rgba(242,238,231,.34);stroke-width:.6;
  font-family:var(--font-sans);font-weight:800;
  letter-spacing:-.02em;
}
.footer__bar{
  border-top:1px solid var(--line-deep);
  padding-block:1.3rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-deep-muted);
}
.footer__bar a:hover{color:var(--on-deep)}
.footer__legal{display:flex;gap:1.2rem;flex-wrap:wrap}

.socials{display:flex;gap:.5rem}
.social{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-deep);
  display:grid;place-items:center;color:#C9C1B4;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.social:hover{background:var(--on-deep);color:var(--deep);border-color:var(--on-deep);transform:translateY(-2px)}
.social svg{width:16px;height:16px;fill:currentColor;stroke:none}

.contact-lines{display:grid;gap:.5rem;font-size:var(--fs-sm)}
/* An address or a long email has to be allowed to wrap: in the paired footer
   columns these sit in roughly half the width they used to have. */
.contact-lines a{
  display:inline-flex;align-items:flex-start;gap:.55rem;color:#C9C1B4;
  transition:color .3s var(--ease);
  overflow-wrap:anywhere;
}
.contact-lines a:hover{color:var(--on-deep)}
.contact-lines svg{
  width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;
  flex:none;margin-top:.28em;
}
.contact-lines .whatsapp svg{fill:currentColor;stroke:none}

/* 23. Inner-page furniture ------------------------------------------------ */
.page-hero{
  position:relative;
  background:var(--deep);color:var(--on-deep);
  padding-top:calc(var(--header-h) + clamp(3rem,9vw,7rem));
  padding-bottom:clamp(2.5rem,7vw,5.5rem);
  overflow:hidden;isolation:isolate;
}
.page-hero__bg{position:absolute;inset:0;z-index:-2}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.page-hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,10,9,.85),rgba(11,10,9,.6) 45%,rgba(11,10,9,.95));
}
.page-hero__inner{display:grid;gap:clamp(1.1rem,2.5vw,1.8rem)}
.page-hero__title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-h1);line-height:.95;letter-spacing:-.028em;max-width:16ch;
}
.page-hero__lead{max-width:52ch;color:#CFC7B9;font-size:var(--fs-lead);font-weight:300}
.page-hero__foot{
  display:flex;gap:clamp(1.2rem,4vw,3rem);flex-wrap:wrap;
  margin-top:clamp(.8rem,2vw,1.4rem);
  padding-top:clamp(1rem,2.4vw,1.6rem);
  border-top:1px solid var(--line-deep);
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-muted);
}
.page-hero__foot strong{color:var(--on-deep);font-weight:500}

.crumbs{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-muted);
}
.crumbs a{transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--on-deep)}
.crumbs span[aria-current]{color:var(--on-deep)}

/* two-column editorial block */
.duo{
  display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
@media (min-width:58rem){
  .duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,5rem)}
  .duo--reverse .duo__media{order:2}
  .duo--wide-media{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
.duo__body{display:grid;gap:1.2rem;align-content:center}

.checklist{display:grid;gap:.75rem;font-size:var(--fs-sm)}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.55}
.checklist svg{width:1rem;height:1rem;flex:none;margin-top:.3rem;stroke:var(--primary);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.band--deep .checklist svg{stroke:var(--s1)}

/* process / timeline */
.steps{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.band--deep .steps{background:var(--line-deep);border-color:var(--line-deep)}
@media (min-width:44rem){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.steps--4{grid-template-columns:repeat(4,1fr)}}
.step{
  background:var(--bg);padding:clamp(1.5rem,3vw,2.4rem) clamp(1.1rem,2.4vw,2rem);
  display:grid;gap:.8rem;align-content:start;
}
.band--surface .step{background:var(--surface)}
.band--sand .step{background:var(--bg-sand)}
.band--deep .step{background:var(--deep)}
.step__num{
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.14em;color:var(--primary-ink);
}
.band--deep .step__num{color:var(--s1)}
.step__title{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em}
.step__text{font-size:var(--fs-sm);color:var(--muted)}
.band--deep .step__text{color:var(--on-deep-muted)}

/* 24. About page ---------------------------------------------------------- */
.timeline{display:grid;gap:0;border-top:1px solid var(--line)}
.band--deep .timeline{border-color:var(--line-deep)}
.tl{
  display:grid;gap:.5rem 2rem;
  padding-block:clamp(1.3rem,3vw,2.2rem);
  border-bottom:1px solid var(--line);
  align-items:start;
}
.band--deep .tl{border-color:var(--line-deep)}
@media (min-width:52rem){.tl{grid-template-columns:8rem minmax(0,1fr) minmax(0,1.2fr)}}
.tl__year{
  font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);
  line-height:1;letter-spacing:-.02em;
}
.tl__title{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em}
.tl__text{font-size:var(--fs-sm);color:var(--muted)}
.band--deep .tl__text{color:var(--on-deep-muted)}

/* the case-note variant carries a media column and an outcome strip */
.tl--case{gap:1.2rem 2.5rem;padding-block:clamp(2rem,4vw,3.2rem)}
@media (min-width:62rem){
  .tl--case{grid-template-columns:minmax(0,.68fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem)}
}
.tl__body{display:grid;gap:.75rem;align-content:start}
.tl__body .index-num{letter-spacing:.11em;text-transform:uppercase}
.tl--case .tl__title{font-size:var(--fs-h3);font-weight:500}
/* the stat strip is styled for the dark rail by default — restate it on light */
.band:not(.band--deep) .case__stats{border-top-color:var(--line)}
.band:not(.band--deep) .case__stat span{color:var(--muted)}

.team{display:grid;gap:clamp(1.2rem,3vw,2rem)}
@media (min-width:38rem){.team{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.team{grid-template-columns:repeat(3,1fr)}}
.member{display:grid;gap:1rem;align-content:start}
.member__media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:4/5;background:var(--bg-sand);
}
.member__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:filter .6s var(--ease),transform .8s var(--ease);
}
.member:hover .member__media img{filter:grayscale(0) contrast(1);transform:scale(1.04)}
.member__media::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:3px;
  background:var(--spectrum);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.member:hover .member__media::after{transform:scaleX(1)}
.member__name{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em}
.member__role{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.member__bio{font-size:var(--fs-sm);color:var(--muted)}
.band--deep .member__role,.band--deep .member__bio{color:var(--on-deep-muted)}

/* values as a masonry-safe column layout (grid-auto-rows masonry is gap-dependent) */
.values{columns:1;column-gap:clamp(1rem,2.4vw,1.6rem)}
@media (min-width:44rem){.values{columns:2}}
@media (min-width:70rem){.values{columns:3}}
.value{
  break-inside:avoid;
  display:grid;gap:.7rem;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.3rem,2.6vw,1.9rem);
  margin-bottom:clamp(1rem,2.4vw,1.6rem);
  transition:border-color .4s var(--ease),transform .5s var(--ease);
}
.value:hover{border-color:var(--line-2);transform:translateY(-3px)}
.value__k{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--primary-ink)}
.value__title{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em}
.value__text{font-size:var(--fs-sm);color:var(--muted)}

/* 25. Contact page -------------------------------------------------------- */
.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:62rem){.contact-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.contact-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2.2rem);
  display:grid;gap:1rem;align-content:start;
}
.contact-card__k{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact-card__v{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em}
.contact-card a{transition:color .3s var(--ease)}
.contact-card a:hover{color:var(--primary)}

.studio-map{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:16/10;background:var(--deep-2);
}
.studio-map img{width:100%;height:100%;object-fit:cover;opacity:.68}
.studio-map__pin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
}
.studio-map__pin b{
  position:relative;z-index:2;
  width:12px;height:12px;border-radius:50%;background:var(--s1);
  box-shadow:0 0 0 4px rgba(255,154,60,.28);
}
.studio-map__pin i{
  position:absolute;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--s1);
  animation:ping 2.4s var(--ease-soft) infinite;
}
.studio-map__label{
  position:absolute;left:1rem;bottom:1rem;
  padding:.5rem .9rem;border-radius:var(--radius-pill);
  background:rgba(11,10,9,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--on-deep);
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;
}

/* 26. 404 ----------------------------------------------------------------- */
.notfound{
  min-height:100svh;position:relative;overflow:hidden;
  background:var(--deep);color:var(--on-deep);
  display:grid;place-items:center;
  padding-top:var(--header-h);
  isolation:isolate;
}
.notfound__inner{
  display:grid;gap:clamp(1.2rem,3vw,2rem);justify-items:center;text-align:center;
  padding-block:clamp(3rem,10vw,6rem);
}
.notfound__code{
  font-family:var(--font-display);
  font-size:clamp(6rem,26vw,20rem);line-height:.8;letter-spacing:-.04em;
}
.notfound__links{
  display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;
  font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-deep-muted);
  padding-top:.8rem;
}
.notfound__links a{position:relative;padding-bottom:.25em}
.notfound__links a::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--spectrum);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.notfound__links a:hover{color:var(--on-deep)}
.notfound__links a:hover::after{transform:scaleX(1);transform-origin:left}

/* copy-to-clipboard affordance */
.copy-btn{
  display:inline-grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
  flex:none;
}
.copy-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.copy-btn:hover{color:var(--ink);border-color:var(--line-2)}
.copy-btn.is-copied{background:var(--success);border-color:var(--success);color:#fff}

/* 27. Utilities ----------------------------------------------------------- */
.sr-only{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.text-center{text-align:center}
.text-sm{font-size:var(--fs-sm)}
.text-micro{font-size:var(--fs-micro)}
.mt-0{margin-top:0}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.6rem}
.mt-4{margin-top:2.4rem}
.mt-5{margin-top:clamp(2.5rem,6vw,4.5rem)}
.max-40{max-width:40ch}
.max-52{max-width:52ch}
.max-64{max-width:64ch}
.justify-center{justify-content:center}
.items-center{align-items:center}
.flex-between{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.relative{position:relative}
.full-bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}
.tabular{font-variant-numeric:tabular-nums}
.no-wrap{white-space:nowrap}