/* ==========================================================================
   KIOO.Space — Creative Studio
   Stylesheet
   Structure:
   1.  Custom properties / design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout utilities
   5.  Cursor
   6.  Buttons & links
   7.  Header / navigation
   8.  Hero
   9.  Marquee
   10. Work grid + art blocks
   11. Services
   12. About
   13. Philosophy
   14. Process
   15. Contact / form
   16. Footer
   17. Case-study page
   18. Reveal / motion utilities
   19. Responsive
   20. Reduced motion / print
   ========================================================================== */

/* 1. Custom properties
   ========================================================================== */
:root{
  --c-black:#0a0a0a;
  --c-ink:#111111;
  --c-white:#ffffff;
  --c-off:#f3f2ec;
  --c-off-dim:#e8e6dd;
  --c-line:#d8d6cb;
  --c-accent:#0000fc;
  --c-accent-ink:#0000c9;
  --c-accent-soft:rgba(0,0,252,.08);

  /* Blue is the darkest primary, so the brand blue measures only 2.27:1 on
     ink — below the 3:1 WCAG floor even for large text — while scoring a
     healthy 7.78:1 on the off-white ground. This lifted tone is 4.7:1 on ink
     and is used for any accent *text* on a dark surface. It also reads less
     harshly on the wide-gamut OLED screens phones ship with, where a fully
     saturated sRGB blue gets mapped up and glows.
     Keep --c-accent for fills, borders and graphics. */
  --c-accent-on-dark:#5a6bff;

  /* #6b6a63 measures 4.84:1 on the off-white ground (passes AA) but only
     3.65:1 on ink, which fails. Dark sections use this lighter dim instead —
     5.7:1 on #0a0a0a. */
  --c-dim:#6b6a63;
  --c-dim-on-dark:#8a8a84;

  --bg:var(--c-off);
  --fg:var(--c-black);

  --font-display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Inter', 'Helvetica Neue', Arial, sans-serif;

  --container:1440px;
  --gutter:clamp(20px, 4vw, 56px);

  --ease:cubic-bezier(.16,.84,.28,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:.25s;
  --dur:.6s;
  --dur-slow:1s;

  --header-h:88px;
}

/* 2. Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
h1,h2,h3,h4,p,figure{ margin:0; }
::selection{ background:var(--c-accent); color:var(--c-white); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:3px;
}

.skip-link{
  position:absolute;
  left:12px; top:-60px;
  background:var(--c-black); color:var(--c-white);
  padding:12px 18px;
  z-index:1000;
  transition:top var(--dur-fast) var(--ease);
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.skip-link:focus{ top:12px; }

/* 3. Typography
   ========================================================================== */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.01em;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-black);
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--c-accent);
}
.eyebrow--light{ color:var(--c-off); }
.eyebrow--light::before{ background:var(--c-white); }

.display-1{ font-size:clamp(48px, 10.5vw, 168px); }
.display-2{ font-size:clamp(38px, 7vw, 112px); }
.h-section{ font-size:clamp(32px, 5.2vw, 76px); }
.h-card{ font-size:clamp(22px, 2.6vw, 34px); }

.lede{
  font-family:var(--font-body);
  font-size:clamp(16px, 1.6vw, 22px);
  line-height:1.5;
  font-weight:400;
  color:var(--c-ink);
}
.meta{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6b6a63;
}
.num{
  font-family:var(--font-display);
  font-weight:900;
  color:var(--c-accent);
}

/* 4. Layout utilities
   ========================================================================== */
.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{
  position:relative;
  padding-block:clamp(64px, 11vw, 160px);
}
.section--tight{ padding-block:clamp(48px, 7vw, 96px); }
.section--dark{ background:var(--c-black); color:var(--c-off); }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:clamp(32px, 6vw, 88px);
  border-bottom:1px solid var(--c-line);
  padding-bottom:24px;
}
.section--dark .section-head{ border-color:#2a2a2a; }
.section-head__title{ max-width:70%; }
.section-head__note{
  max-width:320px;
  text-align:right;
  font-size:14px;
  color:#6b6a63;
}
.section--dark .section-head__note{ color:#9a9a95; }

.rule{ height:1px; background:var(--c-line); border:none; margin:0; }

/* Spacing + swatch utilities. These exist so no element needs a style="..."
   attribute — that is what lets the CSP ship without 'unsafe-inline'. */
.mt-20{ margin-top:20px; }
.mt-28{ margin-top:28px; }
.mt-32{ margin-top:32px; }
.sw-ink{ background:var(--c-black); }
.sw-paper{ background:var(--c-off); }
.sw-accent{ background:var(--c-accent); }

/* Film grain.
   Previously each art block carried its own inline <feTurbulence> filter over
   a full-bleed rect — seven live SVG filters per visit, re-rasterised whenever
   a card scaled on hover, which was the single biggest paint cost on the page.
   Here the same noise is generated once into a 120px tile that the browser
   decodes a single time and repeats, so it costs nothing to animate over. */
.grain,
.work-item__visual,
.cs-cover,
.about__figure{ position:relative; }
.grain::after,
.work-item__visual::after,
.cs-cover::after,
.about__figure::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.11;
  background-repeat:repeat;
  background-size:120px 120px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* 5. Cursor
   ========================================================================== */
/* Hiding the native cursor is gated on `.js-cursor`, which initCursor() adds
   only after it has successfully built the replacement. Without that gate a
   failed script — network error, CSP mistake, thrown exception — leaves the
   visitor with no cursor at all. */
@media (hover:hover) and (pointer:fine){
  .js-cursor body{ cursor:none; }
  .js-cursor a, .js-cursor button, .js-cursor input,
  .js-cursor textarea, .js-cursor select, .js-cursor [role="button"]{ cursor:none; }
}
.cursor{
  position:fixed;
  top:0; left:0;
  width:9px; height:9px;
  margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:var(--c-accent);
  pointer-events:none;
  z-index:9999;
  transform:translate3d(-100px,-100px,0);
  transition:opacity .2s var(--ease);
}
.cursor-ring{
  position:fixed;
  top:0; left:0;
  width:38px; height:38px;
  margin:-19px 0 0 -19px;
  border-radius:50%;
  border:1px solid var(--c-black);
  pointer-events:none;
  z-index:9998;
  transform:translate3d(-100px,-100px,0);
  transition:width .25s var(--ease-out), height .25s var(--ease-out),
             margin .25s var(--ease-out), border-color .25s ease,
             background .25s ease, opacity .2s ease;
}
.cursor-ring.is-hover{
  width:72px; height:72px;
  margin:-36px 0 0 -36px;
  background:var(--c-accent-soft);
  border-color:var(--c-accent);
}
.cursor-ring.is-dark{ border-color:var(--c-off); }
@media (hover:none), (pointer:coarse){
  .cursor, .cursor-ring{ display:none; }
}

/* 6. Buttons & links
   ========================================================================== */
.btn{
  --pad-x:28px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px var(--pad-x);
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid var(--c-black);
  background:var(--c-black);
  color:var(--c-white);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--c-accent); border-color:var(--c-accent); color:var(--c-white); }
.btn--ghost{ background:transparent; color:var(--c-black); }
.btn--ghost:hover{ background:var(--c-black); border-color:var(--c-black); color:var(--c-white); }
.btn--on-dark{ border-color:var(--c-off); color:var(--c-black); background:var(--c-off); }
.btn--on-dark:hover{ background:var(--c-accent); border-color:var(--c-accent); color:var(--c-white); }
.btn__arrow{ transition:transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.magnetic{ display:inline-block; }

.text-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding-bottom:2px;
  background-image:linear-gradient(var(--c-accent), var(--c-accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:background-size var(--dur-fast) var(--ease);
}
.text-link:hover{ background-size:100% 2px; color:var(--c-accent-ink); }

/* 7. Header / navigation
   ========================================================================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  padding-inline:var(--gutter);
  background:rgba(243,242,236,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:height var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.site-header.is-scrolled{
  height:64px;
  border-bottom-color:var(--c-line);
  background:rgba(243,242,236,.96);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:20px;
  letter-spacing:.02em;
  z-index:2;
}
.brand__mark{
  width:148px; height:auto;
  transition:width var(--dur-fast) var(--ease);
}
.site-header.is-scrolled .brand__mark{ width:118px; }
/* .mark-fg = letterforms (context-recolored). .mark-accent keeps its own blue. */
.brand__mark .mark-fg{ fill:var(--c-black); }

/* Header sitting over a dark hero: transparent + light until scrolled */
.site-header--over-dark{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:var(--c-off);
}
.site-header--over-dark .brand__mark .mark-fg{ fill:var(--c-off); }
.site-header--over-dark .nav-toggle span{ background:var(--c-off); }
.site-header--over-dark.is-scrolled{
  background:rgba(243,242,236,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--c-black);
}
.site-header--over-dark.is-scrolled .brand__mark .mark-fg{ fill:var(--c-black); }
.site-header--over-dark.is-scrolled .nav-toggle span{ background:var(--c-black); }
/* Accent-ink hover is a dark blue — unreadable on the dark hero, so lift it */
.site-header--over-dark .text-link:hover{ color:var(--c-white); }
.site-header--over-dark.is-scrolled .text-link:hover{ color:var(--c-accent-ink); }

.nav-desktop{
  display:flex;
  align-items:center;
  gap:clamp(20px, 3vw, 44px);
}
.nav-desktop a{
  position:relative;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:6px 0;
}
.nav-desktop a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:2px;
  background:var(--c-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-fast) var(--ease);
}
.nav-desktop a:hover::after,
.nav-desktop a.is-active::after{ transform:scaleX(1); }

.nav-cta{ display:flex; align-items:center; gap:22px; }

/* 44px, not 40 — the minimum comfortable touch target */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px; height:44px;
  margin-right:-10px;   /* keeps the bars optically aligned to the gutter */
  z-index:2;
}
.nav-toggle span{
  display:block;
  width:22px; height:2px;
  background:var(--c-black);
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-mobile{
  position:fixed;
  inset:0;
  background:var(--c-black);
  color:var(--c-off);
  z-index:850;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 var(--gutter);
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
}
.nav-mobile.is-open{ transform:translateY(0); }
.nav-mobile ul{ display:flex; flex-direction:column; gap:6px; }
.nav-mobile a{
  font-family:var(--font-display);
  font-size:clamp(38px, 12vw, 64px);
  font-weight:900;
  text-transform:uppercase;
  display:inline-block;
  padding:10px 0;
  border-bottom:1px solid #262626;
}
.nav-mobile__foot{
  margin-top:48px;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#9a9a95;
  font-size:13px;
}
.nav-mobile__foot a{ text-decoration:underline; }

/* 8. Hero
   ========================================================================== */
/* The hero is a dark plate so the animated triangle field behind it reads.
   Everything below the hero stays on the off-white ground. */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:calc(var(--header-h) + 24px);
  padding-bottom:48px;
  position:relative;
  overflow:hidden;
  background:var(--c-black);
  color:var(--c-off);
}
/* Triangle-field surface, injected by js/hero-bg.js.
   Fades up only once the renderer has actually attached, so a failed init
   leaves the plain black plate rather than a flash of empty canvas. */
.hero__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero.has-canvas .hero__canvas{ opacity:1; }
/* Legibility floor — applied whether or not the canvas ever initialises, so a
   bright patch of shader can never wash out the headline. */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.46) 34%, rgba(10,10,10,.1) 62%, rgba(10,10,10,.2) 100%),
    linear-gradient(to top, rgba(10,10,10,.7) 0%, rgba(10,10,10,0) 38%);
}
.hero > .wrap{ position:relative; z-index:2; }
.hero__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  margin-bottom:clamp(18px, 3vw, 34px);
}
.hero__index{
  display:flex;
  gap:6px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:900;
  color:#9a9a95;
}
.hero .eyebrow{ color:var(--c-off); }
.hero .eyebrow::before{ background:var(--c-accent); }
.hero__title{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(46px, 9.6vw, 158px);
  line-height:.9;
  letter-spacing:-.015em;
  margin:0;
}
.hero__title span{
  display:block;
  overflow:hidden;
}
.hero__title span em{
  display:inline-block;
  font-style:normal;
  transform:translateY(110%);
  transition:transform 1s var(--ease);
}
.hero__title span:nth-child(1) em{ transition-delay:.05s; }
.hero__title span:nth-child(2) em{ transition-delay:.16s; color:var(--c-accent-on-dark); }
.hero__title span:nth-child(3) em{ transition-delay:.27s; }
.hero.is-ready .hero__title em{ transform:translateY(0); }

.hero__bottom{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(24px, 6vw, 80px);
  align-items:end;
  margin-top:clamp(28px, 5vw, 56px);
}
.hero__sub{
  font-size:clamp(16px, 1.7vw, 24px);
  max-width:32ch;
  color:#c9c8c1;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s;
}
.hero.is-ready .hero__sub{ opacity:1; transform:translateY(0); }

.hero__cta{
  display:flex;
  justify-content:flex-end;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s var(--ease) .65s, transform .8s var(--ease) .65s;
}
.hero.is-ready .hero__cta{ opacity:1; transform:translateY(0); }

/* Floating accent triangle — parallaxed by js/main.js. Always brand blue,
   so it deliberately carries no context recolor rule. */
.hero__mark{
  position:absolute;
  right:var(--gutter);
  top:18%;
  width:clamp(44px, 5vw, 78px);
  opacity:.95;
  z-index:2;
  pointer-events:none;
  will-change:transform;
}
.hero__scroll{
  position:absolute;
  left:var(--gutter);
  bottom:22px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9a9a95;
}
.hero__scroll-line{
  width:1px; height:34px;
  background:linear-gradient(var(--c-off), transparent);
  position:relative;
  overflow:hidden;
}
.hero__scroll-line::after{
  content:'';
  position:absolute; left:0; top:-100%;
  width:100%; height:100%;
  background:var(--c-accent);
  animation:scrollLine 1.8s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}

/* 9. Marquee
   ========================================================================== */
.marquee{
  border-top:1px solid var(--c-black);
  border-bottom:1px solid var(--c-black);
  overflow:hidden;
  padding:16px 0;
  background:var(--c-off);
}
.marquee__track{
  display:flex;
  width:max-content;
  gap:56px;
  animation:marquee 26s linear infinite;
}
.marquee__track span{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(20px, 3vw, 34px);
  text-transform:uppercase;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:56px;
}
.marquee__track span::after{
  content:'\2022';
  color:var(--c-accent);
  margin-left:56px;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* 10. Work grid + art blocks
   ========================================================================== */
.work-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(20px, 3vw, 40px);
}
.work-item{
  grid-column:span 12;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  padding-block:clamp(28px, 4vw, 44px);
  border-top:1px solid var(--c-line);
  text-decoration:none;
}
.work-item:first-of-type{ border-top:1px solid var(--c-line); }
.work-item:nth-child(1){ grid-column:span 12; }
.work-item:nth-child(2){ grid-column:span 7; }
.work-item:nth-child(3){ grid-column:span 5; }
.work-item__row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
}
.work-item__index{
  font-family:var(--font-display);
  font-weight:900;
  font-size:14px;
  color:var(--c-accent);
}
.work-item__title{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(24px, 3.4vw, 46px);
  line-height:1;
  transition:transform var(--dur-fast) var(--ease);
}
.work-item__go{
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--c-black);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  flex:none;
}
.work-item__go svg{ width:16px; height:16px; }
.work-item__go svg path{ stroke:var(--c-black); transition:stroke var(--dur-fast) ease; }
.work-item:hover .work-item__go{ background:var(--c-accent); border-color:var(--c-accent); transform:rotate(45deg); }
.work-item:hover .work-item__go svg path{ stroke:var(--c-white); }
.work-item:hover .work-item__title{ transform:translateX(6px); color:var(--c-accent-ink); }

.work-item__visual{
  aspect-ratio:16/10;
  overflow:hidden;
  position:relative;
  background:var(--c-black);
}
.work-item:nth-child(3) .work-item__visual{ aspect-ratio:4/5; }
.work-item__visual svg{
  width:100%; height:100%;
  transition:transform .9s var(--ease-out);
}
.work-item:hover .work-item__visual svg{ transform:scale(1.06); }

.work-item__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  align-items:center;
}
.work-item__desc{
  max-width:52ch;
  color:#4b4a44;
  font-size:15px;
}
.tag{
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 10px;
  border:1px solid var(--c-line);
  color:#4b4a44;
}
/* Marks self-initiated work so it is never mistaken for a client engagement */
.tag--concept{
  border-color:var(--c-accent);
  color:var(--c-accent-ink);
}

.work-more{
  display:flex;
  justify-content:center;
  padding-top:clamp(32px, 5vw, 64px);
}

/* 11. Services
   ========================================================================== */
.services{ border-top:1px solid var(--c-line); }
.service-row{
  display:grid;
  grid-template-columns:80px 1fr auto;
  align-items:center;
  gap:24px;
  padding:clamp(22px, 3.4vw, 40px) 0;
  border-bottom:1px solid var(--c-line);
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.service-row::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--c-black);
  transform:translateX(-101%);
  transition:transform .5s var(--ease-out);
  z-index:0;
}
.service-row:hover::before, .service-row.is-active::before{ transform:translateX(0); }
.service-row > *{ position:relative; z-index:1; }
.service-row__num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:16px;
  color:var(--c-accent);
  transition:color var(--dur-fast) ease;
}
.service-row__body h3{
  font-size:clamp(28px, 4.6vw, 62px);
  transition:color var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.service-row__desc{
  max-height:0;
  overflow:hidden;
  opacity:0;
  color:#9a9a95;
  font-size:15px;
  max-width:52ch;
  transition:max-height .5s var(--ease), opacity .4s ease, margin-top .5s ease;
}
.service-row:hover .service-row__desc, .service-row.is-active .service-row__desc{
  max-height:80px;
  opacity:1;
  margin-top:10px;
}
.service-row:hover .service-row__num, .service-row.is-active .service-row__num{ color:var(--c-accent-on-dark); }
.service-row:hover h3, .service-row.is-active h3{ color:var(--c-white); transform:translateX(10px); }
.service-row__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  max-width:280px;
  justify-content:flex-end;
  color:#6b6a63;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:right;
  transition:color var(--dur-fast) ease;
}
.service-row:hover .service-row__list, .service-row.is-active .service-row__list{ color:#c9c8c1; }
.service-row__glyph{
  position:absolute;
  right:12%;
  top:50%;
  width:64px; height:64px;
  transform:translateY(-50%) scale(.6) rotate(-8deg);
  opacity:0;
  transition:opacity .4s ease, transform .5s var(--ease-out);
  pointer-events:none;
}
.service-row__glyph path, .service-row__glyph circle, .service-row__glyph rect, .service-row__glyph line{
  stroke:var(--c-accent);
}
.service-row:hover .service-row__glyph, .service-row.is-active .service-row__glyph{
  opacity:1;
  transform:translateY(-50%) scale(1) rotate(0deg);
}

/* 12. About
   ========================================================================== */
.about{
  display:grid;
  grid-template-columns:.6fr 1fr;
  gap:clamp(24px, 6vw, 90px);
  align-items:start;
}
.about__figure{
  aspect-ratio:1/1.1;
  background:var(--c-black);
  position:relative;
  overflow:hidden;
}
.about__figure svg{ width:100%; height:100%; }
.about__stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:40px;
}
.about__stats div b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(28px, 3.4vw, 44px);
  font-weight:900;
  color:var(--c-accent);
}
.about__stats div span{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b6a63;
}
.about__body p{ margin-bottom:20px; }
.about__body p:last-child{ margin-bottom:0; }

/* 13. Philosophy
   ========================================================================== */
.philosophy{ background:var(--c-black); color:var(--c-off); }
.manifesto{
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 2vw, 18px);
}
.manifesto__line{
  overflow:hidden;
}
.manifesto__line span{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(30px, 6.6vw, 96px);
  line-height:1.02;
  opacity:.16;
  transform:translateX(-2%);
  transition:opacity .9s var(--ease), transform .9s var(--ease), color .9s var(--ease);
}
.manifesto__line.is-visible span{ opacity:1; transform:translateX(0); }
.manifesto__line:nth-child(2) span{ color:var(--c-accent-on-dark); text-align:right; }
.manifesto__line:nth-child(2){ text-align:right; }
.manifesto__line:nth-child(4) span{ padding-left:8vw; }

/* 14. Process
   ========================================================================== */
.process-list{
  border-top:1px solid var(--c-line);
}
.process-item{
  border-bottom:1px solid var(--c-line);
}
.process-item__head{
  width:100%;
  display:grid;
  grid-template-columns:70px 1fr 40px;
  align-items:center;
  gap:20px;
  padding:clamp(20px, 3vw, 32px) 0;
  text-align:left;
  background:none;
  border:none;
}
.process-item__num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:15px;
  color:#9a9a95;
  transition:color var(--dur-fast) ease;
}
.process-item.is-active .process-item__num{ color:var(--c-accent); }
.process-item__title{
  font-size:clamp(24px, 3.4vw, 44px);
  transition:transform var(--dur-fast) var(--ease);
}
.process-item.is-active .process-item__title{ transform:translateX(10px); }
.process-item__plus{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--c-black);
  position:relative;
  flex:none;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) ease;
}
.process-item__plus::before, .process-item__plus::after{
  content:'';
  position:absolute;
  background:var(--c-black);
  transition:background var(--dur-fast) ease;
}
.process-item__plus::before{ left:50%; top:9px; bottom:9px; width:1px; margin-left:-.5px; }
.process-item__plus::after{ top:50%; left:9px; right:9px; height:1px; margin-top:-.5px; }
.process-item.is-active .process-item__plus{ transform:rotate(45deg); background:var(--c-black); }
.process-item.is-active .process-item__plus::before,
.process-item.is-active .process-item__plus::after{ background:var(--c-white); }

.process-item__panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .55s var(--ease);
}
.process-item.is-active .process-item__panel{ max-height:260px; }
.process-item__panel-in{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;
  padding-bottom:clamp(20px, 3vw, 36px);
}
.process-item__panel-in p{
  max-width:60ch;
  color:#4b4a44;
}
.process-item__bar{
  height:2px;
  background:var(--c-line);
  margin-top:-1px;
}
.process-item__bar i{
  display:block;
  height:100%;
  width:0;
  background:var(--c-accent);
  transition:width .6s var(--ease);
}
.process-item.is-active .process-item__bar i{ width:100%; }

/* 15. Contact / form
   ========================================================================== */
.contact{ background:var(--c-black); color:var(--c-off); }
.contact__head{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-bottom:clamp(40px, 6vw, 88px);
}
.contact__title{
  font-size:clamp(38px, 8vw, 108px);
}
.contact__title em{ font-style:normal; color:var(--c-accent-on-dark); }
.contact-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(32px, 5vw, 80px);
}
.contact__info dl{ display:flex; flex-direction:column; gap:22px; }
.contact__info dt{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9a9a95;
  margin-bottom:6px;
}
.contact__info dd{
  margin:0;
  font-size:clamp(16px, 1.4vw, 20px);
}
.contact__info a{
  border-bottom:1px solid #333;
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.contact__info a:hover{ color:var(--c-accent-on-dark); border-color:var(--c-accent-on-dark); }
.contact__social{
  display:flex;
  gap:16px;
  margin-top:40px;
}

.field{
  position:relative;
  margin-bottom:30px;
}
.field label{
  display:block;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9a9a95;
  margin-bottom:10px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid #3a3a3a;
  color:var(--c-off);
  padding:10px 2px;
  font-size:17px;
  transition:border-color var(--dur-fast) ease;
}
.field select{ appearance:none; -webkit-appearance:none; }
.field select option{ background:var(--c-black); color:var(--c-off); }
.field textarea{ resize:vertical; min-height:100px; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--c-accent);
  outline:none;
}
.field--select{ position:relative; }
.field--select::after{
  content:'';
  position:absolute;
  right:4px; top:44px;
  width:9px; height:9px;
  border-right:1px solid #9a9a95;
  border-bottom:1px solid #9a9a95;
  transform:rotate(45deg);
  pointer-events:none;
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 28px;
}
/* Consent checkbox — ties the form to the lawful basis in privacy.html */
.field--consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.field--consent input{
  width:18px;
  height:18px;
  flex:none;
  margin-top:2px;
  accent-color:var(--c-accent);
}
.field--consent label{
  margin:0;
  font-size:13px;
  line-height:1.5;
  letter-spacing:0;
  text-transform:none;
  color:var(--c-dim-on-dark);
}
.field--consent label a{
  color:var(--c-off);
  border-bottom:1px solid #3a3a3a;
}
.field--consent label a:hover{ color:var(--c-accent-on-dark); border-color:var(--c-accent-on-dark); }

.form-error{
  margin-bottom:22px;
  padding:14px 16px;
  border-left:3px solid var(--c-accent);
  background:rgba(0,0,252,.08);
  font-size:14px;
  color:var(--c-off);
}
.form-error a{ color:var(--c-off); border-bottom:1px solid var(--c-accent); }
.form-error[hidden]{ display:none; }

.form-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-top:8px;
}
.form-note{ font-size:12px; color:var(--c-dim-on-dark); max-width:38ch; }
.btn[disabled]{ opacity:.55; pointer-events:none; }

.confirm{
  display:none;
  padding:48px 0;
}
.confirm.is-visible{ display:block; }
.confirm h3{ font-size:clamp(28px, 4vw, 46px); margin-bottom:14px; }
.confirm p{ color:#9a9a95; max-width:52ch; }
.contact-form.is-hidden{ display:none; }

/* 16. Footer
   ========================================================================== */
.site-footer{
  background:var(--c-black);
  color:var(--c-off);
  border-top:1px solid #262626;
  padding-block:clamp(40px, 6vw, 64px) 24px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  flex-wrap:wrap;
  padding-bottom:clamp(32px, 5vw, 56px);
}
.footer-brand__mark{ width:224px; margin-bottom:18px; }
.footer-brand__mark .mark-fg{ fill:var(--c-off); }
.footer-brand p{ max-width:34ch; color:#9a9a95; }
.footer-cols{
  display:flex;
  gap:clamp(32px, 6vw, 90px);
  flex-wrap:wrap;
}
.footer-col h4{
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-dim-on-dark);
  margin-bottom:16px;
  font-weight:700;
}
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14px; color:#d9d8d2; transition:color var(--dur-fast) ease; }
.footer-col a:hover{ color:var(--c-accent-on-dark); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding-top:22px;
  border-top:1px solid #262626;
  font-size:12px;
  color:var(--c-dim-on-dark);
}
.back-to-top{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9a9a95;
}
.back-to-top:hover{ color:var(--c-accent-on-dark); }

/* 17. Case-study page
   ========================================================================== */
.cs-hero{
  padding-top:calc(var(--header-h) + 40px);
  padding-bottom:clamp(32px, 5vw, 64px);
}
.cs-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-bottom:22px;
}
.cs-hero__title{ font-size:clamp(38px, 8vw, 118px); max-width:16ch; }
.cs-hero__lede{ max-width:60ch; margin-top:24px; }
.cs-hero__facts{
  display:grid;
  grid-template-columns:repeat(4, auto);
  gap:24px;
  margin-top:clamp(32px, 5vw, 56px);
  padding-top:24px;
  border-top:1px solid var(--c-line);
}
.cs-hero__facts dt{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#6b6a63; margin-bottom:6px; }
.cs-hero__facts dd{ margin:0; font-weight:600; }

.cs-cover{
  aspect-ratio:16/8;
  background:var(--c-black);
  overflow:hidden;
}
.cs-cover svg{ width:100%; height:100%; }

.cs-block{
  display:grid;
  grid-template-columns:.32fr .68fr;
  gap:clamp(24px, 5vw, 64px);
  padding-block:clamp(40px, 6vw, 80px);
  border-top:1px solid var(--c-line);
}
.cs-block__label{ font-size:13px; }
.cs-block__body p{ margin-bottom:18px; max-width:70ch; }
.cs-block__body p:last-child{ margin-bottom:0; }
.cs-block__body ul{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.cs-block__body li{ padding-left:20px; position:relative; max-width:64ch; }
.cs-block__body li::before{
  content:'';
  position:absolute; left:0; top:.6em;
  width:8px; height:1px;
  background:var(--c-accent);
}

.cs-gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(16px, 2.4vw, 28px);
  margin-top:8px;
}
.cs-gallery figure{ margin:0; background:var(--c-black); overflow:hidden; }
.cs-gallery figure svg{ width:100%; height:100%; }
.cs-gallery figcaption{ margin-top:10px; font-size:12px; color:#6b6a63; }
.cs-gallery .g-a{ grid-column:span 4; aspect-ratio:4/3; }
.cs-gallery .g-b{ grid-column:span 2; aspect-ratio:3/4; }
.cs-gallery .g-c{ grid-column:span 3; aspect-ratio:1/1; }
.cs-gallery .g-d{ grid-column:span 3; aspect-ratio:1/1; }
.cs-gallery .g-e{ grid-column:span 6; aspect-ratio:16/7; }

.cs-swatches{ display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }
.cs-swatch{ display:flex; flex-direction:column; gap:8px; }
.cs-swatch i{ display:block; width:88px; height:88px; }
.cs-swatch span{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#6b6a63; }

.cs-type-sample{
  border:1px solid var(--c-line);
  padding:clamp(24px, 4vw, 44px);
  margin-top:18px;
}
.cs-type-sample b{ display:block; font-family:var(--font-display); font-size:clamp(30px,5vw,64px); text-transform:uppercase; }
.cs-type-sample span{ font-size:12px; color:#6b6a63; letter-spacing:.08em; text-transform:uppercase; }

.cs-results{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.cs-results div b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(30px, 4vw, 54px);
  color:var(--c-accent);
}
.cs-results div span{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#6b6a63; }

.cs-next{
  padding-block:clamp(48px, 8vw, 100px);
  border-top:1px solid var(--c-line);
  text-align:center;
  display:block;
}
.cs-next .meta{ display:block; margin-bottom:14px; }
.cs-next__title{
  font-size:clamp(36px, 8vw, 110px);
  transition:letter-spacing var(--dur-fast) var(--ease), color var(--dur-fast) ease;
}
.cs-next:hover .cs-next__title{ letter-spacing:.02em; color:var(--c-accent-ink); }

/* 18. Reveal / motion utilities
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal-group] [data-reveal]:nth-child(1){ transition-delay:0s; }
[data-reveal-group] [data-reveal]:nth-child(2){ transition-delay:.08s; }
[data-reveal-group] [data-reveal]:nth-child(3){ transition-delay:.16s; }
[data-reveal-group] [data-reveal]:nth-child(4){ transition-delay:.24s; }

/* 19. Responsive
   ========================================================================== */
@media (max-width:1100px){
  .about{ grid-template-columns:1fr; }
  .about__figure{ order:-1; aspect-ratio:16/9; }
  .contact-grid{ grid-template-columns:1fr; }
  .cs-block{ grid-template-columns:1fr; }
  .cs-hero__facts{ grid-template-columns:repeat(2, auto); }
}
@media (max-width:900px){
  .nav-desktop, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .work-item:nth-child(2), .work-item:nth-child(3){ grid-column:span 12; }
  .work-item:nth-child(3) .work-item__visual{ aspect-ratio:16/10; }
  .service-row{ grid-template-columns:50px 1fr; }
  .service-row__list{ display:none; }
  .service-row__glyph{ display:none; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .section-head__note{ text-align:left; max-width:100%; }
  .footer-top{ flex-direction:column; }
}
@media (max-width:720px){
  /* The eyebrow and the index together exceed a phone's width, and
     space-between gives them nowhere to go — stack instead of overflowing. */
  .hero__top{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .hero__index{ font-size:11px; }

  /* Long words must be allowed to break rather than push the layout wide */
  .hero__title, .work-item__title, .cs-hero__title,
  .contact__title, .manifesto__line span{ overflow-wrap:break-word; }

  .field-row{ grid-template-columns:1fr; }
  .cs-gallery .g-a, .cs-gallery .g-b, .cs-gallery .g-c, .cs-gallery .g-d, .cs-gallery .g-e{ grid-column:span 6; aspect-ratio:4/3; }
  .cs-hero__facts{ grid-template-columns:1fr 1fr; }
  .hero__bottom{ grid-template-columns:1fr; }
  .hero__cta{ justify-content:flex-start; }
  .hero__mark{ display:none; }
  .process-item__head{ grid-template-columns:40px 1fr 34px; }
  .process-item__panel-in{ grid-template-columns:1fr; }
  .marquee__track{ animation-duration:16s; }
}
@media (max-width:480px){
  :root{ --header-h:72px; }
  .brand__mark{ width:120px; }
  .site-header.is-scrolled .brand__mark{ width:100px; }
  .work-item__row{ grid-template-columns:auto 1fr auto; }
  .work-item__title{ font-size:clamp(22px, 8vw, 34px); }
}

/* On a short viewport (phone in landscape) the hero content is vertically
   centred and would collide with the fixed scroll cue — drop the cue. */
@media (max-height:620px){
  .hero__scroll{ display:none; }
  .hero{ padding-block:calc(var(--header-h) + 16px) 32px; }
}

/* 20. Reduced motion / print
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .hero__title em{ transform:none !important; }
}