/* ============================================================
   ZAAPART — Design tokens & base
   Type: Bricolage Grotesque (display) + Inter (body)
   Palette: pulled from the logo — ink black / signal violet / warm cream
   Style: Motion-Driven / Portfolio Grid
   ============================================================ */

:root{
  --ink:            #0c0b10;
  --ink-2:          #17151f;
  --ink-3:          #221f2e;
  --ink-70:         rgba(12,11,16,.72);
  --ink-55:         rgba(12,11,16,.58);
  --ink-30:         rgba(12,11,16,.3);
  --ink-16:         rgba(12,11,16,.16);
  --ink-12:         rgba(12,11,16,.12);
  --ink-08:         rgba(12,11,16,.08);

  --cream:          #f8f5ef;
  --cream-2:        #efe9dd;
  --paper:          #fffdf9;

  --violet:         #6c3ee0;
  --violet-2:       #8f6bf0;
  --violet-3:       #b49bf7;
  --violet-ink:     #4a26a8;
  --violet-tint:    rgba(108,62,224,.1);
  --violet-tint-20: rgba(108,62,224,.2);

  /* light-mode glass: kept at high opacity so cards stay readable on cream */
  --glass-bg:       rgba(255,253,249,.86);
  --glass-border:   rgba(12,11,16,.1);
  --glass-shadow:   0 20px 60px -22px rgba(12,11,16,.22);

  /* dark glass, used over the hero imagery and in the footer */
  --glass-dark:     rgba(18,16,26,.55);
  --glass-dark-brd: rgba(255,255,255,.14);

  --f-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --ease-out is an expo-out: perfect for transforms, too abrupt for colour.
     --ease-soft is the gentler curve every colour/background/border fade uses,
     so tints settle instead of snapping. Never swap one for the other. */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.33,.68,.32,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast: .26s;
  --t-mid: .4s;
  --t-slow: .6s;

  --container: 1360px;
  --edge: clamp(20px, 5vw, 64px);

  /* Section rhythm. Every top-level section pays --sec-y top AND bottom, so the
     gap between any two neighbours is always 2x it — one number to tune the
     whole page. --sec-y-tight is for sections that read as continuations of the
     one above (gallery inside .work, the form under its own CTA). */
  --sec-y: clamp(52px, 5.2vw, 82px);
  --sec-y-tight: clamp(30px, 3vw, 46px);
  --head-gap: clamp(32px, 3.6vw, 52px);   /* section heading -> its content */
  --header-h: 88px;          /* floating nav height + top offset — used to clear pinned content */

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  /* z-index scale — keep to these steps, no arbitrary values */
  --z-grain: 60;
  --z-nav: 70;
  --z-header: 80;
  --z-chat: 90;
  --z-enquiry: 92;
  --z-lightbox: 95;
  --z-cursor: 100;
  --z-preloader: 110;
  --z-skip: 120;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
html.no-lenis{ scroll-behavior:smooth; }

/* Cross-document view transitions. Supporting browsers cross-fade between the
   five pages instead of flashing white; everywhere else this rule is inert.
   Together with the once-per-session preloader this is what stops ordinary
   navigation from feeling like a full site reload. */
@view-transition{ navigation:auto; }
/* pages after the first: no loader, so ease the content in instead of a snap */
html.is-warm body{ animation:warmIn .38s var(--ease-out) both; }
@keyframes warmIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  html.is-warm body{ animation:none; }
  @view-transition{ navigation:none; }
}

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure,blockquote,fieldset,legend{ margin:0; padding:0; }
fieldset{ border:0; }
svg{ display:block; }
address{ font-style:normal; }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-body); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--violet-ink);
}
.eyebrow::before{ content:''; width:22px; height:1px; background: var(--violet); flex:0 0 auto; }
.eyebrow-light{ color:var(--violet-3); }
.eyebrow-light::before{ background:var(--violet-3); }

h1,h2,h3,.font-display{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; line-height:1.04; }

.section-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:var(--head-gap); }
.section-head h2{ font-size:clamp(32px,4.4vw,58px); max-width:17ch; }
.section-head p{ max-width:46ch; color:var(--ink-70); font-size:17px; line-height:1.65; }

/* ---------- utility ---------- */
.tag{
  display:inline-flex; align-items:center; padding:6px 14px; border-radius:99px;
  font-size:12.5px; font-weight:600; letter-spacing:.03em;
  background:var(--ink); color:var(--cream);
}
.tag.tag-new{ background:var(--violet); color:#fff; }
.tag.tag-frost{ background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border-radius:99px; font-weight:600; font-size:15px;
  white-space:nowrap; cursor:pointer; min-height:48px;
  transition:background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft), box-shadow var(--t-mid) var(--ease-soft);
}
.btn svg{ transition:transform .4s var(--ease-out); flex:0 0 auto; }
.btn:hover svg{ transform:translate(3px,-3px); }
.btn-primary{ background:var(--ink); color:var(--cream); }
.btn-primary:hover{ background:var(--ink-3); box-shadow:0 12px 30px -12px rgba(12,11,16,.6); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--ink-16); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--ink-08); }
.btn-violet{ background:var(--violet); color:#fff; }
.btn-violet:hover{ background:var(--violet-ink); box-shadow:0 12px 30px -12px rgba(108,62,224,.8); }
.btn-glass{
  background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.32);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn-glass:hover{ background:rgba(255,255,255,.22); border-color:#fff; }

.magnetic{ display:inline-block; }

/* ============================================================
   Custom cursor
   ============================================================ */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:var(--z-cursor);
  border-radius:50%; transform:translate(-50%,-50%); will-change:transform;
}
.cursor-dot{ width:7px; height:7px; background:var(--ink); }
.cursor-ring{
  width:38px; height:38px; border:1.5px solid var(--ink-30);
  transition:width var(--t-mid) var(--ease-out), height var(--t-mid) var(--ease-out), border-color var(--t-mid), background var(--t-mid);
}
.cursor-ring.is-active{ width:64px; height:64px; background:var(--violet-tint); border-color:var(--violet); }
.cursor-ring.is-view{ width:96px; height:96px; background:var(--ink); border-color:var(--ink); }
.cursor-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--cream); font-size:12px; font-weight:700; letter-spacing:.06em; opacity:0; transition:opacity var(--t-fast);
}
.cursor-ring.is-view .cursor-label{ opacity:1; }
body.cursor-light .cursor-dot{ background:var(--cream); }
body.cursor-light .cursor-ring{ border-color:rgba(255,255,255,.5); }
@media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ============================================================
   Preloader
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:var(--z-preloader);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream); overflow:hidden;
}

/* five ink panels form the backdrop, then lift away in sequence */
.pre-panels{ position:absolute; inset:0; display:flex; z-index:0; }
.pre-panels i{
  flex:1; background:var(--ink); display:block;
  transform:translateY(0);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.preloader.is-out .pre-panels i{ transform:translateY(-101%); }
.preloader.is-out .pre-panels i:nth-child(1){ transition-delay:0ms; }
.preloader.is-out .pre-panels i:nth-child(2){ transition-delay:70ms; }
.preloader.is-out .pre-panels i:nth-child(3){ transition-delay:140ms; }
.preloader.is-out .pre-panels i:nth-child(4){ transition-delay:210ms; }
.preloader.is-out .pre-panels i:nth-child(5){ transition-delay:280ms; }

.pre-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  width:min(62vw,560px);
  transition:opacity .45s var(--ease-soft), transform .6s var(--ease-out);
}
.preloader.is-out .pre-inner{ opacity:0; transform:translateY(-14px) scale(.97); }

/* the wordmark fills in from the left as loading progresses */
.pre-mark{ position:relative; width:100%; }
.pre-ghost{ width:100%; height:auto; opacity:.15; }
.pre-fill{
  position:absolute; inset:0; overflow:hidden; width:0%;
  transition:width .35s cubic-bezier(.33,1,.68,1);
}
.pre-fill img{
  width:min(62vw,560px); max-width:none; height:100%;
  object-fit:contain; object-position:left center;
  filter:drop-shadow(0 0 26px rgba(108,62,224,.55));
}

.pre-meta{
  width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:20px;
}
.pre-label{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(248,245,239,.45);
}
.pre-count{ font-family:var(--f-display); font-size:26px; color:var(--cream); line-height:1; }
.pre-count i{ font-style:normal; font-size:.55em; color:var(--violet-2); margin-left:2px; }

.pre-bar{ width:100%; height:2px; background:rgba(255,255,255,.14); position:relative; overflow:hidden; border-radius:99px; }
.pre-bar span{
  position:absolute; inset:0; width:0%; border-radius:99px;
  background:linear-gradient(90deg, var(--violet), var(--violet-3));
  transition:width .35s cubic-bezier(.33,1,.68,1);
}

@media (max-width:720px){
  .feat-grid{ grid-template-columns:1fr; }
  .cta-inner{ flex-direction:column; align-items:flex-start; gap:24px; }
  .cta-actions{ width:100%; }
  .cta-actions .btn{ width:100%; justify-content:center; }
  .pre-inner{ width:min(84vw,420px); gap:20px; }
  .pre-fill img{ width:min(84vw,420px); }
  .pre-label{ font-size:9.5px; letter-spacing:.16em; }
  .pre-count{ font-size:21px; }
}

/* ============================================================
   Header — adapts from dark (over hero) to light (on cream)
   ============================================================ */
.site-header{
  position:fixed; top:16px; left:0; right:0; z-index:var(--z-header);
  display:flex; justify-content:center;
  transition:top var(--t-mid) var(--ease-out);
}
.nav-inner{
  width:min(1200px, calc(100% - 32px));
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px 9px 22px; border-radius:99px;
  transition:background var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft), box-shadow var(--t-mid) var(--ease-soft);
}
.brand{ display:flex; align-items:center; }
.brand img{ height:30px; width:auto; transition:filter var(--t-mid) var(--ease-soft); }
.nav-links{ display:flex; gap:34px; }
.nav-links a{
  font-size:14px; font-weight:600; color:var(--ink-70); position:relative; padding:6px 0;
  transition:color var(--t-fast) var(--ease-soft);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--violet);
  transition:width .35s var(--ease-out);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta .btn{ padding:12px 22px; font-size:13.5px; min-height:44px; }
.nav-burger{
  display:none; width:44px; height:44px; border-radius:50%;
  align-items:center; justify-content:center;
  transition:background var(--t-fast) var(--ease-soft);
}
.nav-burger:hover{ background:var(--ink-08); }
.nav-burger span,.nav-burger span::before,.nav-burger span::after{
  content:''; display:block; width:17px; height:1.6px; background:var(--ink); position:relative;
  transition:background var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out), opacity var(--t-fast);
}
.nav-burger span::before{ position:absolute; top:-5.5px; }
.nav-burger span::after{ position:absolute; top:5.5px; }
.nav-burger[aria-expanded="true"] span{ background:transparent; }
.nav-burger[aria-expanded="true"] span::before{ transform:translateY(5.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after{ transform:translateY(-5.5px) rotate(-45deg); }

/* the pill tightens up once you've scrolled off the hero */
.site-header.is-scrolled .nav-inner{
  background:var(--glass-bg);
  box-shadow:0 18px 44px -22px rgba(12,11,16,.35);
}

/* mobile dropdown panel */
.nav-links.is-open{
  display:flex; flex-direction:column; gap:4px;
  position:fixed; top:80px; left:16px; right:16px;
  background:var(--paper); padding:16px; border-radius:22px;
  box-shadow:0 24px 60px -20px rgba(12,11,16,.35); border:1px solid var(--ink-08);
  z-index:var(--z-header);
}
.nav-links.is-open a{ color:var(--ink); font-size:16px; padding:12px 10px; border-radius:12px; min-height:44px; display:flex; align-items:center; }
.nav-links.is-open a:hover{ background:var(--cream); }
.nav-links.is-open a::after{ display:none; }

/* the header "Start a Project" button is hidden on phones, so the open menu
   carries its own copy — desktop never renders it */
.nav-menu-cta{ display:none; }
.nav-links.is-open .nav-menu-cta{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:8px; padding:15px 20px; border-radius:99px; min-height:48px;
  background:var(--ink); color:var(--cream); font-size:15px; font-weight:600;
}
.nav-links.is-open .nav-menu-cta:hover{ background:var(--ink-3); }

/* ============================================================
   HERO — centred copy over an infinite tilted showreel
   ============================================================ */
.hero{ position:relative; background:var(--cream); }
.hero-stage{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate; text-align:center;
  padding-bottom:clamp(240px,32vh,350px);   /* clearance for the strip */
}

/* soft brand glow behind the headline */
.hero-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-glow i{ position:absolute; display:block; border-radius:50%; filter:blur(90px); }
.hero-glow i:nth-child(1){
  width:min(54vw,640px); aspect-ratio:1; left:50%; top:-14%;
  transform:translateX(-50%); background:rgba(108,62,224,.17);
}
.hero-glow i:nth-child(2){
  width:min(38vw,440px); aspect-ratio:1; right:5%; top:22%;
  background:rgba(143,107,240,.13);
}

.hero-content{
  position:relative; z-index:2; width:100%;
  padding-top:calc(var(--header-h) + 20px);
  display:flex; flex-direction:column; align-items:center;
}

.hero-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 18px; border-radius:99px;
  background:var(--glass-bg); border:1px solid var(--ink-12);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:12.5px; font-weight:600; color:var(--ink-70); letter-spacing:.02em;
}
.hero-pill-dot{
  width:7px; height:7px; border-radius:50%; background:var(--violet);
  box-shadow:0 0 0 0 rgba(108,62,224,.6); animation:pulseDot 2.4s infinite;
}

.hero-title{
  font-size:clamp(38px,7vw,88px); letter-spacing:-.035em; line-height:1.02;
  max-width:16ch; margin-top:26px;
}
.hero-title em{ font-style:normal; color:var(--violet); }
/* per-word mask reveal (words are wrapped by JS) */
.hero-title .w-mask{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; }
.hero-title .w-in{ display:inline-block; transition:transform .45s var(--ease-out), color .3s var(--ease-soft); }
.hero-title .w-mask:hover .w-in{ transform:translateY(-8px); color:var(--violet); }

.hero-sub{
  margin-top:24px; font-size:clamp(16px,1.5vw,18.5px);
  color:var(--ink-70); max-width:58ch; line-height:1.68;
}
.hero-actions{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-proof{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hero-proof .avatars{ display:flex; }
.hero-proof .avatars span{
  width:38px; height:38px; border-radius:50%; border:2px solid var(--cream); margin-left:-10px;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff;
}
.hero-proof .avatars span:first-child{ margin-left:0; }
.hero-proof p{ font-size:14px; color:var(--ink-70); }
.hero-proof strong{ color:var(--ink); }
.rating-chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:99px; font-size:13px;
  color:var(--ink-70); background:var(--paper); border:1px solid var(--ink-12);
}
.rating-chip strong{ color:var(--ink); }

/* ---------- infinite tilted showreel ---------- */
.hero-strip{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  height:clamp(240px,34vh,360px);
  display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 84%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 84%, transparent 100%);
  cursor:grab;
  touch-action:pan-y;   /* horizontal drag scrubs the reel, vertical still scrolls */
}
.hero-strip.is-dragging{ cursor:grabbing; }
.hero-strip-track{ display:flex; gap:18px; width:max-content; will-change:transform; padding:34px 0; }

.hero-card{
  position:relative; flex:0 0 auto; margin:0;
  width:clamp(128px,15vw,196px); aspect-ratio:3/4;
  border-radius:20px; overflow:hidden; opacity:1;
  box-shadow:0 20px 44px -20px rgba(12,11,16,.42);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), opacity .35s var(--ease-soft);
}
/* alternating tilt, straight out of the reference layout */
.hero-card:nth-child(odd){ transform:rotate(-2.5deg); }
.hero-card:nth-child(even){ transform:rotate(4deg) translateY(-12px); }
.hero-card img{ width:100%; height:100%; object-fit:cover; }
.hero-card figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:28px 12px 11px;
  font-size:11.5px; font-weight:600; color:#fff; text-align:left;
  background:linear-gradient(180deg, transparent, rgba(12,11,16,.88));
  opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease-out);
}
/* hovering the reel dims the deck; the hovered card straightens and lifts out */
.hero-strip:hover .hero-card{ opacity:.5; }
.hero-card:hover{
  transform:rotate(0deg) translateY(-16px) scale(1.07) !important;
  opacity:1 !important; z-index:2;
  box-shadow:0 36px 64px -18px rgba(12,11,16,.52);
}
.hero-card:hover figcaption{ opacity:1; transform:translateY(0); }

.hero-marquee{
  position:relative; background:var(--ink); border-top:1px solid rgba(255,255,255,.1);
  padding:22px 0; overflow:hidden; white-space:nowrap;
}
.marquee-track{ display:inline-flex; will-change:transform; }
.marquee-track span{
  font-family:var(--f-display); font-size:clamp(16px,2vw,22px); color:rgba(248,245,239,.42);
  display:inline-flex; align-items:center; gap:44px; padding-right:44px;
}
.marquee-track span i{ color:var(--violet-2); font-style:normal; }

/* ============================================================
   Stats band
   ============================================================ */
/* ============================================================
   Page hero — compact banner for every page except home
   Home keeps the full-height signature hero. These exist partly for looks and
   partly because without them the sub-pages had no <h1> at all, only section
   <h2>s. Height is deliberately short: this is a signpost, not a stage.
   ============================================================ */
.page-hero{
  position:relative; overflow:hidden; isolation:isolate;
  /* a built ground rather than a photo: the art carries the page, and there is
     no request that can fail or stock image that has to be replaced later */
  background:
    radial-gradient(120% 140% at 88% 18%, rgba(108,62,224,.34) 0%, transparent 58%),
    linear-gradient(160deg, #17151f 0%, #0c0b10 62%);
  color:var(--cream);
  /* MUST clear the fixed header or the crumb sits under the floating nav —
     same clipping class of bug the old pinned process section had. */
  padding-top:calc(var(--header-h) + clamp(26px,3.4vw,44px));
  padding-bottom:clamp(26px,3.4vw,44px);
  display:flex; align-items:center;
}
/* faint grid + glow, drawn not loaded */
.page-hero-media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.page-hero-media i:first-child{
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(90% 80% at 70% 40%, #000 20%, transparent 78%);
          mask-image:radial-gradient(90% 80% at 70% 40%, #000 20%, transparent 78%);
}
.page-hero-media i:last-child{
  position:absolute; right:-8%; top:-30%; width:52%; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle, rgba(143,107,240,.3), transparent 66%);
  filter:blur(30px);
}
.page-hero-inner{
  position:relative; width:100%;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,56px); align-items:center;
}
.ph-copy{ min-width:0; }
.ph-figure{ min-width:0; display:flex; justify-content:flex-end; }

/* the composed panel: a violet plate offset behind a real photograph, with two
   fact chips over it. Everything is square to the page — no rotation. */
.ph-stack{ position:relative; width:100%; max-width:440px; }
.ph-plate{
  position:absolute; inset:-14px -14px auto auto; width:72%; aspect-ratio:1.35;
  border-radius:var(--r-lg);
  background:linear-gradient(150deg, var(--violet) 0%, var(--violet-ink) 100%);
  opacity:.9;
}
.ph-shot{
  position:relative; margin:0; aspect-ratio:4/3;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 80px -32px rgba(0,0,0,.75);
}
.ph-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
/* brand tint over the photo so any image reads as ours rather than as stock */
.ph-shot::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(108,62,224,.34) 0%, transparent 46%),
             linear-gradient(0deg, rgba(12,11,16,.66) 0%, transparent 58%);
}
/* chips are solid ink, not glass — a measurable background is the only way the
   numbers stay legible over an image we do not control */
.ph-fact{
  position:absolute; z-index:2; display:flex; flex-direction:column; gap:2px;
  padding:11px 15px; border-radius:var(--r-sm);
  background:rgba(12,11,16,.9); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
}
.ph-fact strong{ font-family:var(--f-display); font-weight:600; font-size:19px; color:#fff; line-height:1; }
.ph-fact span{ font-size:11px; color:rgba(248,245,239,.72); line-height:1.3; }
.ph-fact-a{ left:-12px; bottom:34px; }
.ph-fact-b{ right:-10px; bottom:-14px; }
.ph-crumb{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:rgba(248,245,239,.7); margin-bottom:16px; }
.ph-crumb a{ color:rgba(248,245,239,.7); transition:color var(--t-mid) var(--ease-soft); }
.ph-crumb a:hover{ color:#fff; }
.ph-crumb span[aria-hidden]{ color:rgba(248,245,239,.4); }
.ph-crumb span[aria-current]{ color:#fff; }
.page-hero h1{
  font-size:clamp(28px,3.8vw,48px); color:#fff; max-width:17ch; line-height:1.07;
}
/* an <h2> used as a subline — the section <h2>s below still carry the outline */
.ph-sub{
  margin-top:14px; max-width:48ch;
  font-family:var(--f-body); font-size:clamp(14.5px,1.4vw,16.5px); font-weight:400;
  line-height:1.55; letter-spacing:0; color:rgba(248,245,239,.84);
}

@media (max-width:860px){
  /* photo below the copy, and smaller — it is support, not the headline */
  .page-hero-inner{ grid-template-columns:1fr; gap:30px; }
  .ph-figure{ justify-content:flex-start; }
  .ph-stack{ max-width:380px; }
}
@media (max-width:560px){
  /* the chips hang outside the panel; at this width that would touch the screen
     edge, so pull them inside and give the stack room to breathe */
  .ph-stack{ max-width:none; margin-inline:6px 10px; }
  .ph-plate{ inset:-10px -10px auto auto; }
  .ph-fact-a{ left:10px; bottom:12px; }
  .ph-fact-b{ right:10px; bottom:auto; top:12px; }
  .ph-fact{ padding:9px 13px; }
  .ph-fact strong{ font-size:17px; }
}

/* One paper card rather than four loose cells, so it reads as a considered
   object instead of a metrics strip.
   NO negative margin-top: the hero ends in the dark .hero-marquee services
   band, and lifting the card into that seam overlapped the scrolling text. */
.stats-band{ padding:var(--sec-y) 0; }
/* Two columns, not four equal cells: a claim on the left gives the numbers
   something to mean, and breaks the metronome of four identical blocks. */
.stats-card{
  position:relative; display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(26px,3vw,48px);
  padding:clamp(28px,3vw,42px) clamp(24px,2.6vw,40px);
  border-radius:var(--r-xl); background:var(--paper); border:1px solid var(--ink-08);
  box-shadow:0 30px 80px -40px rgba(12,11,16,.34);
}
/* hairline between the claim and the numbers, drawn rather than bordered so it
   can disappear cleanly when the card stacks */
.stats-lede{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.stats-lede::after{
  content:''; position:absolute; top:4px; bottom:4px; right:calc(clamp(26px,3vw,48px) / -2);
  width:1px; background:var(--ink-08);
}
.stats-kicker{
  display:flex; align-items:center; gap:9px; margin:0;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-55);
}
.stats-pip{ width:7px; height:7px; border-radius:50%; background:var(--violet); flex:0 0 auto; }
.stats-claim{
  font-family:var(--f-display); font-weight:500; font-size:clamp(19px,1.9vw,25px);
  line-height:1.32; letter-spacing:-.015em; color:var(--ink); margin:0;
}
.stats-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto;
  font-size:14px; font-weight:600; color:var(--violet-ink);
  padding-bottom:2px; border-bottom:1.5px solid var(--violet-tint-20); min-height:44px;
  transition:border-color var(--t-mid) var(--ease-soft), gap var(--t-mid) var(--ease-out);
}
.stats-link:hover{ border-color:var(--violet); gap:12px; }

.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,32px) clamp(20px,2.4vw,36px); }
.stat-item{ position:relative; display:flex; flex-direction:column; gap:8px; }
/* 500, not the display font's default 700 — at 58px bold reads as shouting */
.stat-item .num{
  font-family:var(--f-display); font-weight:500; letter-spacing:-.03em;
  font-size:clamp(32px,3vw,44px); line-height:1; color:var(--ink);
  display:flex; align-items:baseline; gap:1px;
}
.stat-item .num .suffix{ color:var(--violet); font-size:.5em; font-weight:600; }
.stat-item .label{ font-size:13.5px; color:var(--ink-70); max-width:22ch; line-height:1.5; }
/* the rule replaces the old hard cell borders — it fills violet on hover, which
   gives the band a reason to be interactive instead of a static row of digits */
.stat-rule{ display:block; height:2px; border-radius:2px; background:var(--ink-08); margin-top:4px; overflow:hidden; }
.stat-rule i{
  display:block; height:100%; width:22%; background:var(--violet); border-radius:2px;
  transition:width var(--t-slow) var(--ease-out);
}
.stat-item:hover .stat-rule i{ width:100%; }

/* ============================================================
   Manifesto
   ============================================================ */
.manifesto{ padding:var(--sec-y) 0; }
/* was .7fr/1.3fr with a 100px gutter under it and a 48px statement — the
   statement is the argument, not a headline, so it sits at reading size and
   the gap below it matches every other head -> content gap on the page. */
.manifesto-top{ display:grid; grid-template-columns:.44fr 1.56fr; gap:clamp(18px,2.6vw,44px); margin-bottom:var(--head-gap); align-items:start; }
.manifesto-statement{ font-size:clamp(23px,2.5vw,34px); line-height:1.36; letter-spacing:-.015em; font-weight:600; max-width:44ch; }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.pillar{
  padding:28px 26px 30px; border-radius:var(--r-lg); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--ink-08);
  box-shadow:0 18px 50px -28px rgba(12,11,16,.28);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color var(--t-mid) var(--ease-soft);
}
.pillar:hover{ transform:translateY(-6px); border-color:var(--violet-tint-20); box-shadow:0 28px 60px -28px rgba(12,11,16,.38); }
.pillar .idx{ font-family:var(--f-display); font-size:13px; color:var(--violet); letter-spacing:.08em; }
/* 24px, not 60 — the thumb is 74px tall so the heading clears it on its own.
   The old 60px was reserving room for a 96px thumb and left a visible hole. */
.pillar h3{ font-size:23px; margin-top:24px; }
.pillar .thumb{ position:absolute; top:0; right:0; width:74px; height:74px; border-radius:0 0 0 var(--r-lg); overflow:hidden; }
.pillar .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.pillar:hover .thumb img{ transform:scale(1.12); }
.pillar ul{ margin-top:16px; display:flex; flex-direction:column; gap:7px; }
.pillar li{ font-size:14px; color:var(--ink-70); display:flex; gap:8px; line-height:1.5; }
.pillar li::before{ content:'—'; color:var(--violet); flex:0 0 auto; }

/* ============================================================
   Portfolio (stacked pinned scroll)
   ============================================================ */
.work{ padding:var(--sec-y) 0; }
.work-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:var(--head-gap); flex-wrap:wrap; }
.work-filters{ display:flex; gap:10px; flex-wrap:wrap; }
.work-filters button{
  padding:11px 20px; border-radius:99px; border:1px solid var(--ink-12); font-size:13.5px; font-weight:600; color:var(--ink-70);
  min-height:44px; transition:background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft);
}
.work-filters button:hover{ background:var(--ink-08); color:var(--ink); border-color:var(--ink-30); }
.work-filters button.is-active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.stack{ position:relative; }
.stack-panel{ height:100vh; display:flex; align-items:center; padding:40px 0; }
.stack-panel-inner{
  width:100%; border-radius:var(--r-xl); overflow:hidden; position:relative;
  display:grid; grid-template-columns:1fr 1fr; min-height:78vh;
  box-shadow:0 40px 90px -30px rgba(12,11,16,.4);
}
.stack-panel:nth-child(even) .stack-panel-inner{ direction:rtl; }
.stack-panel:nth-child(even) .stack-info{ direction:ltr; }
.stack-media{ position:relative; overflow:hidden; }
.stack-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transform:scale(1.08); }
.stack-media .grain{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,11,16,0), rgba(12,11,16,.35)); }
.stack-info{
  background:var(--ink); color:var(--cream); padding:clamp(30px,4vw,64px);
  display:flex; flex-direction:column; justify-content:center;
}
.stack-info .idx{ font-family:var(--f-display); font-size:15px; color:var(--violet-2); }
.stack-info .cat{ margin-top:16px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:rgba(248,245,239,.62); }
.stack-info h3{ margin-top:14px; font-size:clamp(28px,3vw,44px); color:#fff; max-width:12ch; }
.stack-info p{ margin-top:18px; color:rgba(248,245,239,.76); font-size:15.5px; max-width:38ch; line-height:1.65; }
.stack-info .stats{ display:flex; gap:28px; margin-top:30px; flex-wrap:wrap; }
.stack-info .stats div{ display:flex; flex-direction:column; gap:2px; }
.stack-info .stats strong{ font-family:var(--f-display); font-size:22px; color:#fff; }
.stack-info .stats span{ font-size:12px; color:rgba(248,245,239,.7); }
.stack-info .tags{ display:flex; gap:8px; margin-top:26px; flex-wrap:wrap; }
.stack-info .tags span{ font-size:12px; padding:5px 12px; border-radius:99px; border:1px solid rgba(248,245,239,.24); color:rgba(248,245,239,.85); }
.stack-info .view{
  margin-top:32px; display:inline-flex; align-items:center; gap:10px; font-weight:600; color:#fff; width:fit-content;
  padding-bottom:3px; border-bottom:1.5px solid rgba(255,255,255,.3); transition:border-color var(--t-mid);
}
.stack-info .view:hover{ border-color:#fff; }
.stack-info .view svg{ transition:transform .4s var(--ease-out); }
.stack-info .view:hover svg{ transform:translate(4px,-4px); }

/* Gallery grid — 10 tiles, 2 of them double-height = 12 cells = exactly three
   rows of four. Changing the tile count breaks that; keep it a multiple of 4
   once the tall spans are counted, or the grid ends on a ragged row. */
.gallery{ padding:var(--sec-y) 0 0; }
/* explicit row height: the tile's <img> now lives inside an absolutely
   positioned .gallery-open button, so it no longer contributes any intrinsic
   height for the rows to size against. */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(168px,14.5vw,212px); gap:18px; }
.gallery-item{ position:relative; border-radius:var(--r-md); overflow:hidden; }
.gallery-item.tall{ grid-row:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease-out); }
.gallery-item:hover img{ transform:scale(1.08); }
/* the trigger fills the tile — the caption sits above it but must not eat the click */
.gallery-open{
  display:block; position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; background:none; cursor:pointer;
}
.gallery-open:focus-visible{ outline:3px solid var(--violet); outline-offset:-3px; border-radius:var(--r-md); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding:16px; color:#fff; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, transparent, rgba(12,11,16,.88));
  transform:translateY(8px); opacity:0; transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.gallery-item:hover .gallery-caption,
.gallery-item:focus-within .gallery-caption{ transform:translateY(0); opacity:1; }
/* portfolio panels carry the same "View" cursor, so they open the viewer too */
.media-open{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  padding:0; border:0; background:none; cursor:pointer;
}
.media-open:focus-visible{ outline:3px solid var(--violet); outline-offset:-4px; }
.gallery-caption strong{ font-size:14px; display:block; }
.gallery-caption span{ font-size:11.5px; color:rgba(255,255,255,.75); }

/* Reel */
.reel{ margin-top:60px; border-radius:var(--r-xl); overflow:hidden; position:relative; height:64vh; min-height:380px; background:var(--ink); }
.reel-frame{ position:absolute; inset:0; opacity:0; transition:opacity 1s var(--ease-in-out); }
.reel-frame.is-active{ opacity:1; }
.reel-frame img{ width:100%; height:100%; object-fit:cover; }
.reel-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,11,16,.82), transparent 52%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(22px,3vw,34px); color:#fff;
}
.reel-overlay .reel-top{ position:absolute; top:clamp(22px,3vw,34px); left:clamp(22px,3vw,34px); right:clamp(22px,3vw,34px); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.reel-title{ font-family:var(--f-display); font-size:clamp(19px,2.2vw,24px); }
.reel-copy{ font-size:13.5px; color:rgba(255,255,255,.78); margin-top:6px; max-width:56ch; }
.reel-play{
  width:52px; height:52px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft);
}
.reel-play:hover{ background:rgba(255,255,255,.2); border-color:#fff; }
.reel-progress{ display:flex; gap:6px; margin-top:18px; }
.reel-progress span{ flex:1; height:2.5px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; border-radius:99px; }
.reel-progress span i{ position:absolute; inset:0; background:#fff; width:0%; border-radius:99px; }
.reel-progress span.is-done i{ width:100%; }

/* ============================================================
   Services — true bento grid (6 columns)
   ============================================================ */
.services{ padding:var(--sec-y) 0; }
/* minmax(...,1fr): in an auto-height grid every 1fr row resolves to the
   tallest row's content, so all four bento rows come out the same height
   instead of 340/340/230/340. Per-card min-heights would fight this. */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; grid-auto-rows:minmax(var(--bento-row,258px),1fr); }

.bento-item{
  position:relative; overflow:hidden; border-radius:var(--r-lg); padding:26px;
  background:var(--paper); border:1px solid var(--ink-08);
  box-shadow:0 18px 50px -30px rgba(12,11,16,.3);
  /* flex-start, not flex-end: content hangs from the top of every card so the
     icon and heading line up across the row. .bento-go is absolute, and the
     extra bottom padding keeps copy from running under it. */
  display:flex; flex-direction:column; justify-content:flex-start; gap:0;
  padding-bottom:var(--bento-pb,66px);
  isolation:isolate;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color var(--t-mid) var(--ease-soft);
}
.bento-item:hover{ transform:translateY(-6px); box-shadow:0 34px 70px -30px rgba(12,11,16,.45); border-color:transparent; }
.bento-item.span-2{ grid-column:span 2; }
.bento-item.span-4{ grid-column:span 4; }
.bento-item.span-6{ grid-column:span 6; }
/* no per-card min-heights — the 1fr rows equalise heights for us */

/* photo layer — only feature cards carry one, and it is visible at rest */
.bento-item .bg-media{ position:absolute; inset:0; z-index:-2; }
.bento-item .bg-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.bento-item .bg-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(12,11,16,.95) 14%, rgba(12,11,16,.62) 68%, rgba(12,11,16,.42) 100%);
}
.bento-item.is-feature:hover .bg-media img{ transform:scale(1.07); }

/* Plain cards have no photo, so the fill is the hover. It settles in place
   rather than wiping up from the bottom — the old sweep read as dated.
   The 340ms fade still finishes BEFORE the copy turns white (400ms + 60ms
   delay), which is what stops white-on-white mid-transition. Do not slow it
   past the text transition or that bug comes back. */
.bento-item:not(.is-feature)::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(130% 130% at 18% 0%, var(--violet-ink) 0%, var(--ink) 64%);
  opacity:0; transform:scale(1.035);
  transition:opacity .34s var(--ease-soft), transform .55s var(--ease-out);
}
.bento-item:not(.is-feature):hover::after,
.bento-item:not(.is-feature):focus-visible::after{ opacity:1; transform:scale(1); }

.bento-item .tag{ position:absolute; top:24px; right:24px; z-index:2; }
.bento-body{ position:relative; z-index:1; }
.bento-item .icon{
  width:42px; height:42px; border-radius:12px; background:var(--violet-tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  transition:background var(--t-mid) var(--ease-soft);
}
.bento-item .icon svg{ width:21px; height:21px; stroke:var(--violet-ink); transition:stroke var(--t-mid) var(--ease-soft); }
.bento-item h3{ font-size:20px; }
.bento-item p{ font-size:14px; color:var(--ink-70); margin-top:8px; max-width:46ch; line-height:1.55; transition:color var(--t-mid) var(--ease-soft); }
/* every card carries these now, so they are what closes the card off — the
   cards without them used to leave an obvious hole above the arrow. */
.bento-list{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.bento-list li{
  font-size:11.5px; padding:4px 10px; border-radius:99px;
  border:1px solid var(--ink-12); color:var(--ink-70); transition:border-color var(--t-mid), color var(--t-mid);
}
.bento-link{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; width:fit-content;
  font-size:14px; font-weight:600; padding-bottom:3px; border-bottom:1.5px solid currentColor;
  transition:gap var(--t-mid) var(--ease-out);
}
.bento-link:hover{ gap:12px; }

/* Light type only where something dark is actually behind it: feature cards
   always, plain cards once the sweep has risen. The 60ms delay lets the fill
   lead the colour change so there is never a white-on-white frame. */
.bento-item h3,
.bento-item p,
.bento-item .icon,
.bento-item .icon svg,
.bento-item .bento-list li{
  transition:color var(--t-mid) var(--ease-soft) 60ms, background var(--t-mid) var(--ease-soft) 60ms,
             stroke var(--t-mid) var(--ease-soft) 60ms, border-color var(--t-mid) var(--ease-soft) 60ms;
}
.bento-item.is-feature h3,
.bento-item:hover h3,
.bento-item:focus-visible h3{ color:#fff; }
.bento-item.is-feature p,
.bento-item:hover p,
.bento-item:focus-visible p{ color:rgba(255,255,255,.84); }
.bento-item.is-feature .icon,
.bento-item:hover .icon,
.bento-item:focus-visible .icon{ background:rgba(255,255,255,.16); }
.bento-item.is-feature .icon svg,
.bento-item:hover .icon svg,
.bento-item:focus-visible .icon svg{ stroke:#fff; }
.bento-item.is-feature .bento-list li,
.bento-item:hover .bento-list li,
.bento-item:focus-visible .bento-list li{ border-color:rgba(255,255,255,.32); color:rgba(255,255,255,.88); }
.bento-item.is-feature .tag,
.bento-item:hover .tag,
.bento-item:focus-visible .tag{ background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.bento-item.is-feature .tag-new,
.bento-item:hover .tag-new,
.bento-item:focus-visible .tag-new{ background:var(--violet); color:#fff; }

/* arrow affordance — the whole card is a link, so it must look like one */
.bento-go{
  position:absolute; right:26px; bottom:26px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--cream);
  opacity:0; transform:translate(6px,6px) scale(.85);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), background var(--t-mid) var(--ease-soft);
}
.bento-item:hover .bento-go,
.bento-item:focus-visible .bento-go{ opacity:1; transform:none; background:var(--violet); }
.bento-item.is-feature .bento-go{ opacity:1; transform:none; background:rgba(255,255,255,.16); }
.bento-item.is-feature:hover .bento-go{ background:var(--violet); }
/* ============================================================
   Process — "How we work"
   The original paper-card design, but on a swipe rail instead of a pinned
   horizontal scrub. The cards were never the problem — the pin was, because
   it ate an extra screen-and-a-half of scroll to reveal five of them.
   Same mechanics as .why-rail: native overflow + scroll-snap, with arrows,
   dots and a progress bar layered on by initRail().
   ============================================================ */
.process{ padding:var(--sec-y) 0; }
.steps-rail{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.steps-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.steps-label{
  font-family:var(--f-display); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-55); margin:0;
}
.steps-nav{ display:flex; gap:10px; }
.steps-arrow{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--ink-12); color:var(--ink-70);
  transition:background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft),
             border-color var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.steps-arrow svg{ width:19px; height:19px; }
.steps-arrow:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); transform:scale(1.07); }
.steps-arrow:focus-visible{ outline:2.5px solid var(--violet); outline-offset:3px; }
.steps-arrow[disabled]{ opacity:.34; pointer-events:none; }

.steps-track{
  display:flex; gap:18px; margin:0; padding:4px 4px 8px; list-style:none;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.steps-track::-webkit-scrollbar{ display:none; }
.steps-track:focus-visible{ outline:2.5px solid var(--violet); outline-offset:4px; border-radius:var(--r-lg); }

.step-card{
  flex:0 0 clamp(258px,25%,310px); scroll-snap-align:start;
  padding:24px 22px 26px; border-radius:var(--r-lg);
  display:flex; flex-direction:column; gap:14px;
  background:var(--paper); border:1px solid var(--ink-12);
  box-shadow:0 18px 50px -34px rgba(12,11,16,.3);
  transition:border-color var(--t-mid) var(--ease-soft), box-shadow var(--t-mid) var(--ease-soft),
             transform var(--t-slow) var(--ease-out);
}
.step-card:hover{ transform:translateY(-5px); box-shadow:0 26px 60px -32px rgba(12,11,16,.4); }
.step-top{ display:flex; align-items:center; justify-content:space-between; }
/* ink-55 not ink-30 — at 38px this is large text and needs 3:1; ink-30 was 2.03:1 */
.step-num{ font-family:var(--f-display); font-weight:500; font-size:38px; line-height:1; color:var(--ink-55);
  transition:color var(--t-mid) var(--ease-soft); }
.step-dot{ width:10px; height:10px; border-radius:50%; background:var(--ink-12);
  transition:background var(--t-mid) var(--ease-soft), box-shadow var(--t-mid) var(--ease-soft); }
.step-body{ flex:1; }
.step-card h3{ font-size:20px; }
.step-card p{ font-size:13.5px; color:var(--ink-70); margin-top:8px; line-height:1.55; }
.step-card ul{ margin-top:12px; display:flex; flex-direction:column; gap:6px; list-style:none; padding:0; }
.step-card ul li{ font-size:12.5px; color:var(--ink-55); display:flex; gap:8px; line-height:1.45; }
.step-card ul li::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--violet);
  flex:0 0 auto; margin-top:7px; }
.step-time{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--violet-ink); padding:6px 12px; border-radius:99px; background:var(--violet-tint); width:fit-content;
}
.step-card.is-active{ border-color:var(--violet); box-shadow:0 24px 56px -32px rgba(108,62,224,.55); }
.step-card.is-active .step-num{ color:var(--violet); }
.step-card.is-active .step-dot{ background:var(--violet); box-shadow:0 0 0 5px var(--violet-tint); }

.steps-foot{ display:flex; align-items:center; gap:20px; }
.steps-dots{ display:flex; gap:9px; flex:0 0 auto; }
.steps-dot{
  width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  /* .48 clears the 3:1 UI-component floor on cream (WCAG 1.4.11); .28 was
     1.91:1 — that value came from the why-rail, which sits on dark ink. */
  background:rgba(12,11,16,.48); position:relative;
  transition:background var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.steps-dot::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:26px; height:44px; }
.steps-dot:hover{ background:var(--ink-55); }
.steps-dot.is-active{ background:var(--violet); transform:scale(1.45); }
.steps-dot:focus-visible{ outline:2.5px solid var(--violet); outline-offset:4px; }
.steps-progress{ flex:1 1 auto; height:2px; border-radius:2px; background:var(--ink-08); overflow:hidden; }
.steps-progress i{ display:block; height:100%; width:0; background:var(--violet); transition:width var(--t-mid) var(--ease-soft); }

/* ============================================================
   Before / After transformations
   ============================================================ */
/* One width for the whole section. Previously the heading ran the full 1360
   container while the tabs and stage were capped at 980, so the block read as
   misaligned. Everything now shares --ba-w, which also sets the stage height:
   at 16/9, 1040px wide is a 585px stage. Change --ba-w and it all follows. */
.transform{ padding:var(--sec-y) 0; --ba-w:1040px; }
.transform .section-head,
.ba-tabs,
.ba,
.ba-note{ max-width:var(--ba-w); margin-inline:auto; }

.ba-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:0 auto 20px; }
.ba-tabs button{
  padding:11px 20px; border-radius:99px; border:1px solid var(--ink-12);
  font-size:13.5px; font-weight:600; color:var(--ink-70); min-height:44px;
  transition:background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft);
}
.ba-tabs button:hover{ background:var(--ink-08); color:var(--ink); border-color:var(--ink-30); }
.ba-tabs button.is-active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.ba{ margin:0 auto; }
.ba-stage{
  --pos:50%;
  position:relative; width:100%; aspect-ratio:16/9;
  /* the max-height only bites on short viewports; on a normal screen the
     16/9 ratio governs, so the stage keeps a clean shape at --ba-w */
  min-height:260px; max-height:min(64vh,600px);
  border-radius:var(--r-lg); overflow:hidden; background:var(--ink);
  box-shadow:0 30px 70px -34px rgba(12,11,16,.5);
  touch-action:pan-y;
}
.ba-layer{ position:absolute; inset:0; }
.ba-layer img{ width:100%; height:100%; object-fit:cover; display:block; }
/* the "before" frame is deliberately muted — the colour returning is the point */
.ba-before img{ filter:saturate(.4) contrast(.94) brightness(.94); }
/* the "after" frame is revealed to the right of the handle */
.ba-after{ clip-path:inset(0 0 0 var(--pos)); }

.ba-chip{
  position:absolute; top:20px; z-index:3;
  padding:7px 14px; border-radius:99px; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(12,11,16,.55); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
.ba-chip-before{ left:20px; }
.ba-chip-after{ right:20px; background:rgba(108,62,224,.7); border-color:rgba(255,255,255,.28); }

.ba-handle{
  position:absolute; top:0; bottom:0; left:var(--pos); z-index:4;
  transform:translateX(-50%); pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.ba-line{ position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 18px rgba(0,0,0,.45); }
.ba-grip{
  position:relative; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ink);
  box-shadow:0 10px 28px rgba(12,11,16,.4);
  transition:transform var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft);
}
.ba-stage:hover .ba-grip{ transform:scale(1.08); background:var(--violet); color:#fff; }

/* a full-bleed range input drives the reveal: native drag, touch and
   arrow-key support for free, visually replaced by .ba-handle */
.ba-range{
  position:absolute; inset:0; z-index:5; width:100%; height:100%;
  margin:0; padding:0; opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
  touch-action:pan-y;   /* a vertical swipe over the image still scrolls the page */
}
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:60px; height:100vh; cursor:ew-resize; }
.ba-range::-moz-range-thumb{ width:60px; height:100vh; border:0; border-radius:0; cursor:ew-resize; }
.ba-range:focus-visible + .ba-meta{ outline:none; }
.ba-stage:focus-within .ba-grip{ box-shadow:0 0 0 4px var(--violet-tint), 0 10px 28px rgba(12,11,16,.4); }

.ba-meta{
  display:flex; align-items:flex-end; justify-content:space-between; gap:26px;
  flex-wrap:wrap; padding:24px 4px 0;
}
.ba-id strong{ display:block; font-family:var(--f-display); font-size:clamp(20px,2.4vw,28px); }
.ba-id span{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-55); }
.ba-stats{ display:flex; gap:28px; flex-wrap:wrap; }
.ba-stats div{ display:flex; flex-direction:column; gap:2px; }
.ba-stats strong{ font-family:var(--f-display); font-size:24px; color:var(--violet); }
.ba-stats span{ font-size:12.5px; color:var(--ink-70); }

.ba-note{ margin:18px auto 0; font-size:12.5px; color:var(--ink-55); font-style:italic; }

/* ============================================================
   Why Zaapart — dark section, comparison + numbered rows
   ============================================================ */
.studio{ padding:var(--sec-y) 0; background:var(--ink); color:var(--cream); }
.studio .section-head h2{ color:#fff; }
.studio .section-head p{ color:rgba(248,245,239,.72); }
.studio-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:var(--head-gap); flex-wrap:wrap; }
.studio-head-cta{ flex:0 0 auto; }

/* the usual way vs ours */
.why-compare{
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-xl); overflow:hidden;
  margin-bottom:40px; background:rgba(255,255,255,.03);
}
.wc-col{ padding:clamp(24px,2.4vw,32px); }
.wc-ours{ background:linear-gradient(160deg, rgba(108,62,224,.22), rgba(108,62,224,.06)); }
.wc-tag{
  display:inline-flex; padding:7px 14px; border-radius:99px; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,255,255,.1); color:rgba(248,245,239,.72); margin-bottom:22px;
}
.wc-tag-good{ background:var(--violet); color:#fff; }
.wc-col ul{ display:flex; flex-direction:column; gap:12px; }
.wc-col li{ display:flex; gap:12px; font-size:15px; line-height:1.6; }
.wc-usual li{ color:rgba(248,245,239,.62); }
.wc-usual li::before{
  content:''; flex:0 0 auto; width:16px; height:16px; margin-top:4px; border-radius:50%;
  border:1.5px solid rgba(248,245,239,.3);
  background:
    linear-gradient(45deg, transparent 44%, rgba(248,245,239,.5) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(248,245,239,.5) 44% 56%, transparent 56%);
}
.wc-ours li{ color:#fff; }
.wc-ours li::before{
  content:''; flex:0 0 auto; width:16px; height:16px; margin-top:4px; border-radius:50%;
  background:var(--violet);
  -webkit-mask:linear-gradient(#000,#000); mask:linear-gradient(#000,#000);
  box-shadow:inset 0 0 0 8px var(--violet);
  position:relative;
}
.wc-ours li::after{
  content:''; position:absolute; width:9px; height:5px; margin:8px 0 0 3.5px;
  border-left:1.8px solid #fff; border-bottom:1.8px solid #fff; transform:rotate(-45deg);
}
.wc-ours li{ position:relative; }
.wc-divider{
  display:flex; align-items:center; justify-content:center; padding:0 8px;
  border-left:1px solid rgba(255,255,255,.14); border-right:1px solid rgba(255,255,255,.14);
}
.wc-divider span{
  font-family:var(--f-display); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(248,245,239,.4);
}

/* The rail is only one card tall, so there is nothing for a sticky column to
   stick past — the media is a plain stretched panel now and matches the rail. */
.studio-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:34px; align-items:stretch; }
.studio-media{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  min-height:100%;
}
.studio-media img{ width:100%; height:100%; object-fit:cover; }
.studio-media-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(12,11,16,.92) 4%, rgba(12,11,16,.24) 46%, transparent 72%);
}
.studio-media .float-card{
  position:absolute; bottom:24px; left:24px; right:24px; padding:22px 24px; border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:14px;
  background:rgba(18,16,26,.55); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  color:#fff;
}
.float-row{ display:flex; align-items:baseline; gap:14px; }
.float-row strong{ font-family:var(--f-display); font-size:26px; color:#fff; flex:0 0 auto; min-width:82px; }
.float-row span{ font-size:13.5px; color:rgba(255,255,255,.8); line-height:1.5; }

/* ---- the six reasons, on a horizontal rail ----
   Scrolling is native overflow + scroll-snap, so swipe, trackpad and the
   keyboard all work before main.js runs. The arrows/dots/progress are
   progressive enhancement layered on top of that. */
.why-rail{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.why-rail-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.why-rail-label{
  font-family:var(--f-display); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(248,245,239,.5); margin:0;
}
.why-rail-nav{ display:flex; gap:10px; }
.why-arrow{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:rgba(248,245,239,.82);
  transition:background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft),
             border-color var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.why-arrow svg{ width:19px; height:19px; }
.why-arrow:hover{ background:var(--violet); border-color:var(--violet); color:#fff; transform:scale(1.07); }
.why-arrow:focus-visible{ outline:2px solid var(--violet-3); outline-offset:3px; }
.why-arrow[disabled]{ opacity:.32; pointer-events:none; }

.why-track{
  display:flex; gap:18px; margin:0; padding:2px 2px 6px; list-style:none;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.why-track::-webkit-scrollbar{ display:none; }
.why-track:focus-visible{ outline:2px solid var(--violet-3); outline-offset:4px; border-radius:var(--r-lg); }

.why-card{
  flex:0 0 clamp(250px, 42%, 320px); scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:26px 24px 28px; border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.035);
  transition:background var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft),
             transform var(--t-slow) var(--ease-out);
}
.why-card:hover{ background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.26); transform:translateY(-6px); }
.why-card.is-active{ border-color:var(--violet); background:linear-gradient(165deg, rgba(108,62,224,.2), rgba(108,62,224,.04)); }
/* .56, not the .42 the old rows used — on the lighter card fill that measured
   3.59:1, under the 4.5 floor. This is 5.7:1. */
.why-n{
  font-family:var(--f-display); font-size:13px; letter-spacing:.08em; color:rgba(248,245,239,.56);
  transition:color var(--t-mid) var(--ease-soft);
}
.why-card:hover .why-n,
.why-card.is-active .why-n{ color:var(--violet-3); }
.why-card h3{ font-size:19px; color:#fff; margin:0; }
.why-card p{ font-size:14.5px; color:rgba(248,245,239,.68); margin:0; line-height:1.6; }
.why-mark{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); color:rgba(248,245,239,.6);
  transition:background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.why-mark svg{ width:20px; height:20px; }
.why-card:hover .why-mark,
.why-card.is-active .why-mark{ background:var(--violet); color:#fff; transform:rotate(-6deg) scale(1.06); }

.why-rail-foot{ display:flex; align-items:center; gap:20px; }
.why-dots{ display:flex; gap:9px; flex:0 0 auto; }
.why-dot{
  width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  /* .38 clears the 3:1 floor for UI components (WCAG 1.4.11); .26 was 2.24:1 */
  background:rgba(255,255,255,.38);
  transition:background var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
  position:relative;
}
/* 44px hit area without a 44px dot — the dots sit on a 18px pitch and full-size
   targets would overlap and steal each other's taps. Same trick as .dot-nav. */
.why-dot::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:26px; height:44px; }
.why-dot:hover{ background:rgba(255,255,255,.5); }
.why-dot.is-active{ background:var(--violet-3); transform:scale(1.45); }
.why-dot:focus-visible{ outline:2px solid var(--violet-3); outline-offset:4px; }
.why-progress{ flex:1 1 auto; height:2px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; }
.why-progress i{ display:block; height:100%; width:0; background:var(--violet); transition:width var(--t-mid) var(--ease-soft); }

/* ============================================================
   Service index — the home page's "what we do"
   An editorial row list rather than a second bento: all 8 services stay
   visible, it is about half the height of a card grid, and it reads as a
   different object from the bento on services.html rather than a shrunken
   copy of it. Hovering a row floats that service's photo near the cursor.
   ============================================================ */
.svc-index{ padding:var(--sec-y) 0; }
.svc-list{ position:relative; border-top:1px solid var(--ink-12); }
.svc-row{
  position:relative; display:grid; align-items:center;
  grid-template-columns:auto minmax(0,1.05fr) minmax(0,1.35fr) auto;
  gap:clamp(14px,2.2vw,34px);
  padding:clamp(18px,2vw,24px) clamp(8px,1.4vw,18px);
  border-bottom:1px solid var(--ink-12);
  transition:padding-left var(--t-mid) var(--ease-out);
}
/* the violet wash rises behind the text rather than pushing it — no reflow */
.svc-row::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--violet-tint), transparent 72%);
  opacity:0; transition:opacity var(--t-mid) var(--ease-soft);
}
.svc-row::after{
  content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--violet); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.svc-row:hover::before,
.svc-row:focus-visible::before{ opacity:1; }
.svc-row:hover::after,
.svc-row:focus-visible::after{ transform:scaleX(1); }
.svc-row:hover{ padding-left:clamp(16px,2.2vw,30px); }

.svc-n{
  font-family:var(--f-display); font-weight:500; font-size:13px; letter-spacing:.1em;
  color:var(--ink-55); transition:color var(--t-mid) var(--ease-soft);
}
.svc-row:hover .svc-n{ color:var(--violet); }
.svc-name{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(20px,2.4vw,30px); line-height:1.1; color:var(--ink);
}
.svc-tags{ font-size:13.5px; color:var(--ink-70); line-height:1.5; }
.svc-go{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--ink-12); color:var(--ink);
  transition:background var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft),
             color var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.svc-go svg{ width:15px; height:15px; }
.svc-row:hover .svc-go{ background:var(--violet); border-color:var(--violet); color:#fff; transform:rotate(45deg) scale(1.06); }

/* cursor-following preview. pointer-events:none so it can never eat a click,
   and it only ever appears for fine pointers (see the hover:none block below) */
.svc-peek{
  position:absolute; top:0; left:0; z-index:2; margin:0; pointer-events:none;
  width:clamp(190px,17vw,250px); aspect-ratio:4/3;
  border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(12,11,16,.55);
  opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity .32s var(--ease-out), transform .42s var(--ease-out);
  will-change:transform;
}
.svc-peek img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-peek.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.svc-foot{ display:flex; justify-content:center; margin-top:clamp(26px,3vw,40px); }

@media (hover:none), (pointer:coarse){
  /* no cursor to follow, and the arrow must read as tappable at rest */
  .svc-peek{ display:none; }
  .svc-row:hover{ padding-left:clamp(8px,1.4vw,18px); }
}
@media (max-width:860px){
  .svc-row{ grid-template-columns:auto minmax(0,1fr) auto; gap:14px 16px; }
  .svc-tags{ grid-column:2 / 4; font-size:13px; }
}
@media (max-width:560px){
  .svc-row{ padding:16px 4px; }
  .svc-n{ font-size:12px; }
  /* stays a 44px target — it is the only tappable thing in the row besides
     the row itself, and shrinking it below the minimum is not worth the pixels */
  .svc-go{ width:40px; height:40px; }
  .svc-row{ min-height:64px; }
}

/* ============================================================
   Featured work — home-page teaser linking through to work.html
   ============================================================ */
.featured{ padding:var(--sec-y) 0; }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--ink-08);
  box-shadow:0 18px 50px -30px rgba(12,11,16,.3);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color var(--t-mid) var(--ease-soft);
}
.feat-card:hover{ transform:translateY(-6px); box-shadow:0 30px 64px -30px rgba(12,11,16,.42); border-color:var(--violet-tint-20); }
.feat-media{ aspect-ratio:4/3; overflow:hidden; }
.feat-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease-out); }
.feat-card:hover .feat-media img{ transform:scale(1.06); }
.feat-body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:6px; }
.feat-cat{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-55); }
.feat-card h3{ font-size:21px; }
.feat-stats{ display:flex; gap:20px; margin-top:8px; flex-wrap:wrap; }
.feat-stats span{ font-size:13px; color:var(--ink-70); }
.feat-stats strong{ font-family:var(--f-display); font-weight:500; font-size:17px; color:var(--ink); }
.feat-go{
  position:absolute; right:18px; top:18px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--cream);
  opacity:0; transform:scale(.85);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.feat-card:hover .feat-go,
.feat-card:focus-visible .feat-go{ opacity:1; transform:scale(1); }

/* ============================================================
   CTA band — closes services / work / studio, sends people to contact
   ============================================================ */
.cta-band{ padding:var(--sec-y) 0; }
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap;
  padding:clamp(30px,4vw,54px); border-radius:var(--r-xl);
  background:var(--ink); color:var(--cream);
}
.cta-copy{ max-width:54ch; }
.cta-copy h2{ color:#fff; font-size:clamp(26px,3.2vw,40px); margin-top:14px; }
.cta-copy p{ margin-top:14px; color:rgba(248,245,239,.72); font-size:15.5px; line-height:1.6; }
.cta-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cta-phone{
  display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px;
  color:rgba(248,245,239,.88); min-height:44px;
  transition:color var(--t-mid) var(--ease-soft);
}
.cta-phone:hover{ color:var(--violet-3); }

/* ============================================================
   Testimonials — auto-scrolling marquee
   ============================================================ */
.testimonials{ padding:var(--sec-y) 0; overflow:hidden; }
.t-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:var(--head-gap); flex-wrap:wrap; }
.t-score{ display:flex; flex-direction:column; gap:8px; }
.t-stars{ display:flex; gap:4px; color:var(--violet); }
.t-stars svg{ width:19px; height:19px; }
.t-score p{ font-size:14px; color:var(--ink-70); }
.t-score strong{ color:var(--ink); }

.t-marquee{ position:relative; }
/* soft fade at both edges so cards enter and leave gracefully */
.t-marquee::before,.t-marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(40px,8vw,130px); z-index:2; pointer-events:none;
}
.t-marquee::before{ left:0; background:linear-gradient(90deg, var(--cream), transparent); }
.t-marquee::after{ right:0; background:linear-gradient(270deg, var(--cream), transparent); }
.t-row{ display:flex; gap:22px; width:max-content; will-change:transform; padding:6px var(--edge); }
.t-card{
  flex:0 0 min(84vw,400px); padding:32px; border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--ink-08);
  box-shadow:0 18px 50px -32px rgba(12,11,16,.3);
  display:flex; flex-direction:column; gap:20px;
  transition:transform .45s var(--ease-out), border-color var(--t-mid) var(--ease-soft), box-shadow .45s var(--ease-out);
}
.t-card:hover{ transform:translateY(-5px); border-color:var(--violet-tint-20); box-shadow:0 28px 60px -30px rgba(12,11,16,.4); }
.t-mark{ width:30px; height:30px; color:var(--violet); opacity:.28; flex:0 0 auto; }
.t-card .t-copy{ font-size:16px; line-height:1.65; color:var(--ink); flex:1; }
.t-person{ display:flex; align-items:center; gap:14px; }
.t-avatar{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; color:#fff; font-size:15px; flex:0 0 auto;
}
.t-person > span:last-child{ display:flex; flex-direction:column; }
.t-person strong{ font-size:14.5px; }
.t-person span span{ font-size:12.5px; color:var(--ink-70); }

/* ============================================================
   Contact
   ============================================================ */
.contact{ padding:var(--sec-y) 0 0; }
/* 76px was bigger than the hero and made the panels below look stranded.
   Capped at 54 so the CTA leads the section without dwarfing it. */
.contact-cta{ margin-bottom:var(--head-gap); max-width:820px; }
.contact-cta h2{ font-size:clamp(30px,4.2vw,54px); margin-top:16px; }
.contact-cta p{ margin-top:16px; font-size:16.5px; color:var(--ink-70); max-width:56ch; line-height:1.6; }

/* stretch, not start — the two panels used to end at different heights,
   which is the misalignment that made the section look unfinished. */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:20px; padding-bottom:var(--sec-y); align-items:stretch; }
.contact-info{
  align-self:start;
  padding:clamp(26px,2.6vw,34px); border-radius:var(--r-xl);
  background:var(--ink); color:var(--cream);
  display:flex; flex-direction:column; gap:20px;
}
/* Keep contact details compact now that the map is removed. */
.contact-info .wa-btn{ margin-top:auto; }
.contact-info .row{ display:flex; flex-direction:column; gap:4px; }
.contact-info .row span{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:rgba(248,245,239,.62); }
.contact-info .row a,.contact-info .row p{ font-size:16.5px; font-weight:600; line-height:1.5; }
.contact-info .row a{ transition:color var(--t-fast) var(--ease-soft); }
.contact-info .row a:hover{ color:var(--violet-3); }
.wa-btn{
  display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#0b2e17;
  padding:15px 24px; border-radius:99px; font-weight:700; width:fit-content; min-height:48px;
  transition:background var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.wa-btn:hover{ background:#1fb855; transform:translateY(-2px); }

.contact-form{
  padding:clamp(26px,2.6vw,34px); border-radius:var(--r-xl);
  background:var(--paper); border:1px solid var(--ink-08);
  box-shadow:0 24px 60px -34px rgba(12,11,16,.34);
  display:flex; flex-direction:column;
}
.form-lead{
  font-size:13.5px; color:var(--ink-70); line-height:1.55;
  margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--ink-08);
}
.form-lead strong{ color:var(--ink); white-space:nowrap; }

.chip-set{ margin-bottom:20px; }
.chip-set legend{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-55); margin-bottom:11px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center;
  padding:10px 15px; border-radius:99px; border:1px solid var(--ink-12);
  font-size:13px; font-weight:600; color:var(--ink-70); min-height:44px;
  transition:background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft);
}
.chip:hover{ border-color:var(--ink-30); background:var(--cream); color:var(--ink); }
.chip.is-active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-55); margin-bottom:7px; }
.field label span{ color:var(--violet); }
/* 16px is not a style choice: iOS Safari zooms the whole page when a focused
   input is under 16px, which then leaves the layout off-centre. */
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:var(--r-sm); border:1px solid var(--ink-12); background:var(--cream);
  font-family:var(--f-body); font-size:16px; color:var(--ink);
  transition:border-color var(--t-mid) var(--ease-soft), box-shadow var(--t-mid) var(--ease-soft), background var(--t-mid) var(--ease-soft);
}
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--ink-30); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--violet); background:var(--paper); box-shadow:0 0 0 4px var(--violet-tint);
}
.field textarea{ resize:vertical; min-height:84px; }
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:#d92d20; background:#fff5f4; }
.field-error{ font-size:12.5px; color:#b42318; margin-top:7px; min-height:0; display:none; }
.field.has-error .field-error{ display:block; }

/* honeypot — visually gone, still reachable by bots */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:18px; border-top:1px solid var(--ink-08);
  flex-wrap:wrap; gap:14px;
}
.form-note{ font-size:12.5px; color:var(--ink-55); }
.form-status{ margin-top:16px; font-size:14px; font-weight:500; display:none; padding:14px 16px; border-radius:var(--r-sm); line-height:1.5; }
.form-status.is-ok{ display:block; background:rgba(46,204,113,.12); color:#15803d; border:1px solid rgba(46,204,113,.34); }
.form-status.is-bad{ display:block; background:#fff5f4; color:#b42318; border:1px solid rgba(217,45,32,.3); }
.btn[aria-busy="true"]{ opacity:.65; pointer-events:none; }

/* ============================================================
   Lightbox — full-size image viewer
   Opened from .gallery-open and .media-open. Closes on Esc, backdrop click
   or the corner button; arrow keys move within the trigger's data-lb-group.
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:var(--z-lightbox);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,56px);
  padding-top:max(clamp(16px,4vw,56px), env(safe-area-inset-top, 0px));
  padding-bottom:max(clamp(16px,4vw,56px), env(safe-area-inset-bottom, 0px));
  opacity:0; transition:opacity .3s var(--ease-soft);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lb-backdrop{ position:absolute; inset:0; background:rgba(8,7,11,.93); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); cursor:zoom-out; }

.lb-stage{
  position:relative; z-index:1; margin:0; max-width:min(1200px,100%); max-height:100%;
  display:flex; flex-direction:column; gap:16px; align-items:center;
  transform:scale(.97); opacity:0;
  transition:transform .38s var(--ease-out), opacity .38s var(--ease-out);
}
.lightbox.is-open .lb-stage{ transform:scale(1); opacity:1; }
.lb-imgwrap{ position:relative; display:flex; align-items:center; justify-content:center; min-height:120px; min-width:120px; }
.lb-stage img{
  display:block; max-width:100%; max-height:calc(100vh - 210px); max-height:calc(100dvh - 210px);
  width:auto; height:auto; object-fit:contain;
  border-radius:var(--r-md); box-shadow:0 40px 100px -30px rgba(0,0,0,.7);
  opacity:0; transition:opacity .3s var(--ease-soft);
}
.lb-stage img.is-loaded{ opacity:1; }
.lb-spinner{
  position:absolute; width:34px; height:34px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.22); border-top-color:#fff;
  animation:lbspin .7s linear infinite;
}
.lb-spinner.is-hidden{ display:none; }
@keyframes lbspin{ to{ transform:rotate(360deg); } }

.lb-meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  width:100%; max-width:820px; color:#fff; flex-wrap:wrap;
}
.lb-id{ display:flex; flex-direction:column; gap:3px; }
.lb-id strong{ font-family:var(--f-display); font-size:19px; font-weight:600; }
.lb-id > span{ font-size:13px; color:rgba(255,255,255,.66); }
.lb-count{ font-size:13px; color:rgba(255,255,255,.66); font-variant-numeric:tabular-nums; }

.lb-btn{
  position:absolute; z-index:2; cursor:pointer;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  /* .4 border clears the 3:1 floor for UI component boundaries (1.4.11);
     .24 measured 2.03:1 against the backdrop. */
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.4); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.lb-btn svg{ width:21px; height:21px; }
.lb-btn:hover{ background:rgba(255,255,255,.22); border-color:#fff; transform:scale(1.07); }
.lb-btn:focus-visible{ outline:2.5px solid var(--violet-3); outline-offset:3px; }
.lb-btn[disabled]{ opacity:.3; pointer-events:none; }
/* display:flex above would otherwise defeat the hidden attribute */
.lb-btn[hidden]{ display:none; }
.lb-close{ top:clamp(14px,2.4vw,26px); right:clamp(14px,2.4vw,26px); top:max(clamp(14px,2.4vw,26px), env(safe-area-inset-top, 0px)); }
.lb-nav{ top:50%; margin-top:-26px; }
.lb-prev{ left:clamp(10px,2.2vw,26px); }
.lb-next{ right:clamp(10px,2.2vw,26px); }

/* the custom cursor must not sit over the viewer */
body.lb-open .cursor-dot,
body.lb-open .cursor-ring{ display:none; }

@media (max-width:720px){
  .lb-stage img{ max-height:calc(100dvh - 240px); }
  .lb-nav{ top:auto; bottom:max(14px, env(safe-area-inset-bottom, 0px)); margin-top:0; width:48px; height:48px; }
  .lb-prev{ left:22%; }
  .lb-next{ right:22%; }
  .lb-meta{ justify-content:center; text-align:center; padding-bottom:64px; }
  .lb-id{ align-items:center; }
}

/* ============================================================
   Quick enquiry — edge tab + slide-in panel
   Deliberately NOT the contact-page form: that one is a light paper card with
   room to think; this is a dark, short, get-it-sent panel. Same validation and
   WhatsApp handoff underneath (initEnquiryForm), different clothes.
   The tab sits mid-right so it never collides with the chat FAB bottom-right.
   ============================================================ */
.enquiry-tab{
  position:fixed; top:50%; z-index:var(--z-enquiry);
  right:calc(0px + env(safe-area-inset-right, 0px));
  transform:translateY(-50%);
  /* NO overflow:hidden — it clipped the pulse ring mid-expand. The gradient and
     the sheen are both clipped by border-radius on their own boxes instead. */
  padding:0; border:0; cursor:pointer; isolation:isolate;
  display:block; min-width:46px;
  border-radius:var(--r-md) 0 0 var(--r-md);
  /* the gradient is oversized and slid by the animation below — that drift is
     the "colour motion", and it costs one compositor property, not a repaint */
  background:linear-gradient(135deg, var(--violet-ink) 0%, var(--violet) 34%, #a06bff 58%, var(--violet) 82%, var(--violet-ink) 100%);
  background-size:280% 280%;
  animation:etDrift 9s ease-in-out infinite;
  box-shadow:-12px 0 34px -14px rgba(108,62,224,.7);
  transition:box-shadow var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.enquiry-tab::before{
  content:''; position:absolute; inset:1px; border-radius:inherit; z-index:1; pointer-events:none;
  border:1px solid rgba(255,255,255,.22);
}
@keyframes etDrift{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
/* a single light sweep that crosses the tab every few seconds */
.et-sheen{
  position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  background-size:240% 240%;
  animation:etSheen 4.6s ease-in-out infinite;
}
@keyframes etSheen{
  0%,62%{ background-position:120% 0; }
  92%,100%{ background-position:-40% 0; }
}
/* writing-mode:vertical-rl swaps the axes, so LOGICAL padding is used on
   purpose: inline = top/bottom here, block = left/right. Using the physical
   shorthand meant the two numbers silently swapped roles. */
.et-inner{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:11px;
  padding-inline:20px; padding-block:14px;
  writing-mode:vertical-rl;
  color:#fff; font-family:var(--f-body); font-size:13px; font-weight:700;
  letter-spacing:.06em; line-height:1;
  text-shadow:0 1px 8px rgba(12,11,16,.35);
}
.et-label{ display:block; }
.et-icon{ position:relative; width:19px; height:19px; flex:0 0 auto; align-self:center; }
.et-icon svg{
  position:absolute; inset:0; width:19px; height:19px; transform:rotate(90deg);
  transition:opacity var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
/* the plus is the resting state; the speech bubble takes over on hover */
.et-icon svg:last-child{ opacity:0; transform:rotate(90deg) scale(.7); }
.enquiry-tab:hover .et-icon svg:first-child{ opacity:0; transform:rotate(180deg) scale(.7); }
.enquiry-tab:hover .et-icon svg:last-child{ opacity:1; transform:rotate(90deg) scale(1); }
/* the dot that says "we actually answer this" */
.et-pulse{ position:relative; width:7px; height:7px; border-radius:50%; background:#fff; flex:0 0 auto; align-self:center; }
.et-pulse::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:#fff;
  animation:etPing 2.4s var(--ease-out) infinite;
}
@keyframes etPing{
  0%  { transform:scale(1); opacity:.75; }
  70%,100%{ transform:scale(3.2); opacity:0; }
}
.enquiry-tab:hover{ transform:translateY(-50%) translateX(-4px); box-shadow:-18px 0 44px -14px rgba(108,62,224,.9); }
.enquiry-tab:focus-visible{ outline:2.5px solid var(--violet-3); outline-offset:3px; }
body.qe-open .enquiry-tab{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .enquiry-tab{ animation:none; background:var(--violet); }
  .et-sheen{ display:none; }
  .et-pulse::after{ animation:none; }
}

.qe-scrim{
  position:fixed; inset:0; z-index:calc(var(--z-enquiry) - 1);
  background:rgba(8,7,11,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s var(--ease-soft);
}
.qe-scrim[hidden]{ display:none; }
.qe-scrim.is-open{ opacity:1; }

.quick-enquiry{
  position:fixed; top:0; right:0; bottom:0; z-index:var(--z-enquiry);
  width:min(420px,100%);
  display:flex; flex-direction:column; gap:16px;
  padding:clamp(22px,2.6vw,30px);
  padding-top:max(clamp(22px,2.6vw,30px), env(safe-area-inset-top, 0px));
  padding-bottom:max(clamp(22px,2.6vw,30px), env(safe-area-inset-bottom, 0px));
  background:var(--ink-2); color:var(--cream);
  border-left:1px solid rgba(255,255,255,.1);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.7);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform .42s var(--ease-out);
}
.quick-enquiry[hidden]{ display:none; }
.quick-enquiry.is-open{ transform:translateX(0); }

.qe-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.qe-kicker{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet-3); margin:0 0 8px;
}
.qe-title{ font-size:26px; color:#fff; margin:0; }
.qe-close{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
  transition:background var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.qe-close svg{ width:19px; height:19px; }
.qe-close:hover{ background:rgba(255,255,255,.2); transform:rotate(90deg); }
.qe-close:focus-visible{ outline:2.5px solid var(--violet-3); outline-offset:3px; }
.qe-lead{ font-size:13.5px; line-height:1.55; color:rgba(248,245,239,.72); margin:0; }

.qe-form{ display:flex; flex-direction:column; gap:0; }
.qe-chipset{ margin-bottom:18px; }
.qe-chipset legend{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(248,245,239,.6); margin-bottom:10px;
}
.qe-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.qe-chip{
  display:inline-flex; align-items:center; cursor:pointer; min-height:44px;
  padding:10px 15px; border-radius:99px; font-size:13px; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:rgba(248,245,239,.82);
  transition:background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft);
}
.qe-chip:hover{ background:rgba(255,255,255,.14); color:#fff; }
.qe-chip.is-active{ background:var(--violet); border-color:var(--violet); color:#fff; }
.qe-chip:focus-visible{ outline:2.5px solid var(--violet-3); outline-offset:3px; }

/* the dark panel needs its own field skin — the page fields are cream-on-paper */
.quick-enquiry .field label{ color:rgba(248,245,239,.66); }
.quick-enquiry .field label span{ color:var(--violet-3); }
.quick-enquiry .field input,
.quick-enquiry .field textarea{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff;
}
.quick-enquiry .field input::placeholder,
/* .55, not .4 — placeholders are text and .4 measured 3.50:1 on the panel fill */
.quick-enquiry .field textarea::placeholder{ color:rgba(248,245,239,.55); }
.quick-enquiry .field input:hover,
.quick-enquiry .field textarea:hover{ border-color:rgba(255,255,255,.34); }
.quick-enquiry .field input:focus,
.quick-enquiry .field textarea:focus{
  background:rgba(255,255,255,.1); border-color:var(--violet-2); box-shadow:0 0 0 4px rgba(108,62,224,.28);
}
.quick-enquiry .field.has-error input,
.quick-enquiry .field.has-error textarea{ border-color:#ff8a80; background:rgba(255,138,128,.1); }
.quick-enquiry .field-error{ color:#ffb4ac; }

.qe-submit{ width:100%; justify-content:center; margin-top:4px; }
.qe-status{ margin-top:14px; font-size:13.5px; line-height:1.5; padding:12px 14px; border-radius:var(--r-sm); display:none; }
.qe-status.is-ok{ display:block; background:rgba(46,204,113,.16); color:#8ef0b4; border:1px solid rgba(46,204,113,.4); }
.qe-status.is-bad{ display:block; background:rgba(255,138,128,.14); color:#ffb4ac; border:1px solid rgba(255,138,128,.4); }
.qe-alt{ margin-top:16px; font-size:13px; color:rgba(248,245,239,.6); text-align:center; }
.qe-alt a{ color:var(--violet-3); font-weight:600; }

@media (max-width:560px){
  /* vertical text in a 44px column is unreadable on a phone — become a pill */
  /* vertical text in a 46px column is unreadable on a phone — become a pill.
     Bottom-LEFT, because the Zappy FAB owns bottom-right. */
  .enquiry-tab{
    top:auto; bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    right:auto; left:calc(16px + env(safe-area-inset-left, 0px));
    transform:none; border-radius:99px; min-width:0;
    max-width:calc(100vw - 108px);   /* never run under the chat FAB */
  }
  .enquiry-tab:hover{ transform:translateY(-2px); }
  /* axes are back to normal here, so the logical values swap back too */
  .et-inner{ writing-mode:horizontal-tb; padding-inline:20px; padding-block:13px; min-height:46px; }
  .et-icon svg{ transform:none; }
  .et-icon svg:last-child{ transform:scale(.7); }
  .enquiry-tab:hover .et-icon svg:first-child{ transform:rotate(90deg) scale(.7); }
  .enquiry-tab:hover .et-icon svg:last-child{ transform:none; }
  .quick-enquiry{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .quick-enquiry{ transition:none; }
}

/* visible keyboard focus ring (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2.5px solid var(--violet); outline-offset:3px; border-radius:4px;
}
.btn:focus-visible{ outline-offset:4px; }
.hero-card:focus-visible{ outline:2.5px solid var(--violet); outline-offset:4px; }

/* skip link (WCAG 2.4.1) */
.skip-link{
  position:fixed; top:-70px; left:16px; z-index:var(--z-skip); background:var(--ink); color:var(--cream);
  padding:14px 20px; border-radius:99px; font-weight:600; font-size:14px; transition:top var(--t-mid) var(--ease-out);
}
.skip-link:focus{ top:16px; }

/* ============================================================
   Footer — dark close to the page
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--cream); padding:80px 0 26px; position:relative; overflow:hidden; }
.footer-cta{
  display:flex; justify-content:space-between; align-items:flex-end; gap:34px; flex-wrap:wrap;
  padding-bottom:56px; margin-bottom:56px; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-cta h2{ font-size:clamp(26px,3.4vw,44px); color:#fff; margin-top:18px; line-height:1.16; }

.footer-top{ display:grid; grid-template-columns:1.5fr .8fr .8fr .9fr; gap:40px; margin-bottom:56px; }
.footer-brand .brand{ margin-bottom:20px; }
.footer-brand .brand img{ height:34px; filter:brightness(0) invert(1); }
.footer-brand p{ font-size:14.5px; color:rgba(248,245,239,.7); max-width:34ch; line-height:1.65; }
.footer-contact{ margin-top:18px; font-size:13.5px; color:rgba(248,245,239,.56); line-height:1.75; }
.footer-contact a{ color:rgba(248,245,239,.85); transition:color var(--t-fast) var(--ease-soft); }
.footer-contact a:hover{ color:var(--violet-3); }
.footer-col h3{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:rgba(248,245,239,.5); margin-bottom:18px; font-family:var(--f-body); font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
/* nudge on hover uses transform, not padding — padding reflows the column */
.footer-col a{
  display:inline-block; font-size:14.5px; color:rgba(248,245,239,.74); padding:3px 0;
  transition:color var(--t-fast) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.footer-col a:hover{ color:#fff; transform:translateX(5px); }
.status-pill{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(248,245,239,.74);
  margin-top:22px; padding:8px 14px; border-radius:99px; border:1px solid rgba(255,255,255,.16);
}
.status-pill i{ width:7px; height:7px; border-radius:50%; background:#2ecc71; display:inline-block; box-shadow:0 0 0 0 rgba(46,204,113,.6); animation:pulseDot 2.4s infinite; }
@keyframes pulseDot{ 70%{ box-shadow:0 0 0 8px rgba(46,204,113,0); } 100%{ box-shadow:0 0 0 0 rgba(46,204,113,0); } }

/* oversized sign-off — the real logo wordmark, recoloured for the dark footer.
   Masked to a vertical fade so it reads as a watermark sinking into the page
   rather than a second logo competing with the one above it. */
.footer-wordmark{ margin:0 0 20px; padding:0 var(--edge); }
.footer-wordmark img{
  width:100%; max-width:1100px; height:auto; margin:0 auto; display:block;
  opacity:.5; user-select:none; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.12) 76%, transparent 100%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.12) 76%, transparent 100%);
}

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom small{ font-size:12.5px; color:rgba(248,245,239,.5); }
.to-top{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:rgba(248,245,239,.8);
  padding:9px 18px; min-height:44px; border-radius:99px; border:1px solid rgba(255,255,255,.16);
  transition:background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft);
}
.to-top:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.4); }
.to-top svg{ transition:transform var(--t-mid) var(--ease-out); }
.to-top:hover svg{ transform:translateY(-3px); }

/* ============================================================
   Chatbot
   ============================================================ */
.chat-fab{
  position:fixed; right:24px; bottom:24px; z-index:var(--z-chat);
  width:60px; height:60px; border-radius:50%;
  background:var(--violet); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 40px -12px rgba(108,62,224,.75);
  transition:transform var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease-soft);
}
.chat-fab:hover{ transform:translateY(-3px) scale(1.04); background:var(--violet-ink); }
.chat-fab .chat-fab-close{ display:none; }
.chat-fab.is-open .zappy-fab{ display:none; }
.chat-fab.is-open .chat-fab-close{ display:block; }

/* ---------- Zappy, the studio mascot ---------- */
.zappy{ display:block; overflow:visible; }
.zappy-fab{ width:34px; height:37px; }
.zappy-head{ width:29px; height:31px; }
.chat-fab:hover .zappy-fab{ animation:zappyBounce .6s var(--ease-out); }
@keyframes zappyBounce{ 0%,100%{ transform:translateY(0) rotate(0); } 35%{ transform:translateY(-4px) rotate(-7deg); } 70%{ transform:translateY(0) rotate(4deg); } }

.zappy-eye{ transform-box:fill-box; transform-origin:center; animation:zappyBlink 4.6s infinite; }
.zappy-eye:nth-of-type(2){ animation-delay:.04s; }
@keyframes zappyBlink{ 0%,92%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.1); } }

.zappy-bulb{ fill:#b49bf7; transform-box:fill-box; transform-origin:center; animation:zappyBulb 2.4s var(--ease-in-out) infinite; }
.zappy-fab .zappy-bulb{ fill:#fff; }
@keyframes zappyBulb{ 0%,100%{ opacity:.55; transform:scale(.86); } 50%{ opacity:1; transform:scale(1.14); } }

.zappy-spark{ transform-box:fill-box; transform-origin:center; animation:zappySpark 3.2s var(--ease-in-out) infinite; }
@keyframes zappySpark{ 0%,100%{ opacity:.35; transform:scale(.7) rotate(0deg); } 50%{ opacity:1; transform:scale(1) rotate(90deg); } }
.chat-fab-ping{
  position:absolute; inset:0; border-radius:50%; border:2px solid var(--violet);
  animation:chatPing 2.6s var(--ease-out) infinite; pointer-events:none;
}
.chat-fab.is-open .chat-fab-ping{ display:none; }
@keyframes chatPing{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(1.65); opacity:0; } }

.chat-panel{
  position:fixed; right:24px; bottom:96px; z-index:var(--z-chat);
  width:min(384px, calc(100vw - 32px)); max-height:min(620px, calc(100dvh - 130px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--ink-12); border-radius:22px;
  box-shadow:0 34px 80px -24px rgba(12,11,16,.45);
  transform-origin:bottom right;
}
.chat-panel[hidden]{ display:none; }
.chat-panel.is-animating-in{ animation:chatIn .34s var(--ease-out); }
@keyframes chatIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }

.chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 16px; background:var(--ink); color:var(--cream); flex:0 0 auto;
}
.chat-ident{ display:flex; align-items:center; gap:11px; }
.chat-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--cream);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.chat-ident strong{ display:block; font-family:var(--f-display); font-size:15.5px; }
.chat-status{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:rgba(248,245,239,.68); }
.chat-status i{ width:6px; height:6px; border-radius:50%; background:#2ecc71; }
.chat-close{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--cream);
  margin-right:-6px;   /* keeps the 44px target without visually padding the header */
  transition:background var(--t-fast) var(--ease-soft);
}
.chat-close:hover{ background:rgba(255,255,255,.14); }

.chat-log{
  flex:1 1 auto; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px;
  background:var(--cream); scrollbar-width:thin; scrollbar-color:var(--ink-16) transparent;
}
.chat-log::-webkit-scrollbar{ width:6px; }
.chat-log::-webkit-scrollbar-thumb{ background:var(--ink-16); border-radius:99px; }
.chat-msg{
  max-width:86%; padding:12px 15px; border-radius:16px; font-size:14px; line-height:1.55;
  animation:msgIn .3s var(--ease-out);
}
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.chat-msg.from-bot{ align-self:flex-start; background:var(--paper); border:1px solid var(--ink-08); border-bottom-left-radius:5px; }
.chat-msg.from-user{ align-self:flex-end; background:var(--ink); color:var(--cream); border-bottom-right-radius:5px; }
.chat-msg strong{ font-weight:600; }
.chat-msg a{ color:var(--violet-ink); text-decoration:underline; font-weight:600; }
.chat-msg.from-user a{ color:var(--violet-3); }
.chat-msg ul{ margin:8px 0 0; display:flex; flex-direction:column; gap:5px; }
.chat-msg li{ padding-left:14px; position:relative; }
.chat-msg li::before{ content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--violet); }

.chat-typing{ display:flex; gap:4px; align-items:center; padding:14px 15px; }
.chat-typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-30); animation:typing 1.2s infinite; }
.chat-typing i:nth-child(2){ animation-delay:.16s; }
.chat-typing i:nth-child(3){ animation-delay:.32s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }

.chat-quick{ display:flex; flex-wrap:wrap; gap:7px; padding:12px 16px 0; background:var(--cream); flex:0 0 auto; }
.chat-quick button{
  font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:99px; min-height:44px;
  border:1px solid var(--violet-tint-20); background:var(--paper); color:var(--violet-ink);
  transition:background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.chat-quick button:hover{ background:var(--violet); border-color:var(--violet); color:#fff; }

.chat-input{ display:flex; gap:8px; padding:12px 16px; background:var(--cream); flex:0 0 auto; }
.chat-input input{
  flex:1; padding:12px 14px; border-radius:99px; border:1px solid var(--ink-12); background:var(--paper);
  font-size:14px; transition:border-color var(--t-mid) var(--ease-soft), box-shadow var(--t-mid) var(--ease-soft);
}
.chat-input input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-tint); }
.chat-input button{
  width:44px; height:44px; border-radius:50%; background:var(--violet); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:background var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
.chat-input button:hover{ background:var(--violet-ink); transform:scale(1.05); }

.chat-handoff{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px; font-size:13px; font-weight:600; background:#25D366; color:#0b2e17; flex:0 0 auto;
  transition:background var(--t-mid) var(--ease-soft);
}
.chat-handoff:hover{ background:#1fb855; }

/* ============================================================
   Grain overlay
   ============================================================ */
.grain-overlay{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.032; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Section dot-nav
   ============================================================ */
.dot-nav{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:var(--z-nav);
  display:flex; flex-direction:column; gap:16px;
}
.dot-nav a{
  position:relative; width:9px; height:9px; border-radius:50%;
  background:rgba(12,11,16,.48);   /* 3.37:1 on cream — clears the 3:1 UI-component floor (WCAG 1.4.11) */
  transition:background var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out);
}
/* invisible hit area around each 9px dot — 24px tall, just under the 25px
   pitch, so neighbouring targets widen without overlapping each other */
.dot-nav a::before{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:24px; border-radius:12px;
}
.dot-nav a::after{
  content:attr(data-label); position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:11.5px; font-weight:600; color:var(--ink); background:var(--paper); padding:5px 10px; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--t-fast); box-shadow:0 6px 16px rgba(12,11,16,.14);
}
.dot-nav a:hover::after{ opacity:1; }
.dot-nav a:hover{ background:var(--ink-30); }
.dot-nav a.is-active{ background:var(--violet); transform:scale(1.4); }
.dot-nav.on-dark a{ background:rgba(255,255,255,.28); }
.dot-nav.on-dark a.is-active{ background:var(--violet-3); }
@media (max-width:1180px){ .dot-nav{ display:none; } }

/* portfolio index counter — bottom LEFT so it never collides with the chat button */
.stack-counter{
  position:fixed; left:26px; bottom:26px; z-index:var(--z-nav); padding:10px 16px; border-radius:99px;
  font-family:var(--f-display); font-size:13px; color:var(--ink); opacity:0; transition:opacity var(--t-mid);
  pointer-events:none;
}
.stack-counter.is-visible{ opacity:1; }
.stack-counter .cur{ color:var(--violet); }
@media (max-width:1180px){ .stack-counter{ display:none; } }

/* scroll-reveal base state */
[data-reveal]{ opacity:0; transform:translateY(34px); }
[data-reveal-scale]{ opacity:0; transform:scale(.95); }

/* image fallback */
.img-fallback{ background:linear-gradient(135deg, var(--violet-tint) 0%, var(--cream-2) 60%); }

/* ============================================================
   Responsive
   Breakpoints
     1180  small laptop     — side rails go away
     1080  tablet landscape — two-column layouts collapse
      860  tablet portrait  — bento to 2-up, headings tighten
      720  phone            — single column, pins become swipe rails
      560  small phone      — padding + type step down
      400  compact phone    — buttons wrap, last squeeze
     short-landscape        — phone held sideways
   ============================================================ */

/* ---------- notch / home-indicator safe areas (viewport-fit=cover) ----------
   These are unconditional: env() resolves to 0px on hardware without insets. */
.site-header{ top:calc(env(safe-area-inset-top, 0px) + 14px); }
.container,
.t-row,
.footer-wordmark{
  padding-left:calc(var(--edge) + env(safe-area-inset-left, 0px));
  padding-right:calc(var(--edge) + env(safe-area-inset-right, 0px));
}
.chat-fab{
  right:calc(24px + env(safe-area-inset-right, 0px));
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
}
.chat-panel{
  right:calc(24px + env(safe-area-inset-right, 0px));
  bottom:calc(96px + env(safe-area-inset-bottom, 0px));
  max-height:min(620px, calc(100dvh - 130px - env(safe-area-inset-bottom, 0px)));
}
.skip-link:focus{ top:calc(env(safe-area-inset-top, 0px) + 16px); }
.dot-nav{ right:calc(26px + env(safe-area-inset-right, 0px)); }
.stack-counter{
  left:calc(26px + env(safe-area-inset-left, 0px));
  bottom:calc(26px + env(safe-area-inset-bottom, 0px));
}

/* ---------- touch devices ----------
   Every affordance that only appears on :hover is unreachable with a finger.
   On touch we show it at rest instead, and neutralise the lift/sweep effects
   that iOS Safari otherwise latches on after a tap and never releases. */
@media (hover:none){
  /* captions were invisible until hover — that hid the project names entirely */
  .hero-card figcaption{ opacity:1; transform:none; }
  .hero-strip:hover .hero-card{ opacity:1; }
  .gallery-caption{ opacity:1; transform:translateY(0); }

  /* the bento sweep flips copy to white; without a real hover it would strand
     white text on a near-white card, so the resting light state is pinned */
  .bento-item:hover{ transform:none; box-shadow:0 18px 50px -30px rgba(12,11,16,.3); border-color:var(--ink-08); }
  .bento-item:not(.is-feature):hover::after{ opacity:0; }
  .bento-item:not(.is-feature):hover h3{ color:var(--ink); }
  .bento-item:not(.is-feature):hover p{ color:var(--ink-70); }
  .bento-item:not(.is-feature):hover .icon{ background:var(--violet-tint); }
  .bento-item:not(.is-feature):hover .icon svg{ stroke:var(--violet-ink); }
  .bento-item:not(.is-feature):hover .bento-list li{ border-color:var(--ink-12); color:var(--ink-70); }
  .bento-item:not(.is-feature):hover .tag{ background:var(--ink); color:var(--cream); }
  /* the card is a link, so the arrow must be visible without hovering */
  .bento-go{ opacity:1; transform:none; }
  .bento-item:not(.is-feature):hover .bento-go{ background:var(--ink); }

  /* no lift on tap */
  .pillar:hover,.t-card:hover,.wa-btn:hover,.chat-fab:hover{ transform:none; }
  .gallery-item:hover img,.pillar:hover .thumb img,.bento-item.is-feature:hover .bg-media img{ transform:none; }
  .footer-col a:hover{ transform:none; }
  .ba-stage:hover .ba-grip{ transform:none; background:#fff; color:var(--ink); }
  .dot-nav a::after{ display:none; }
}

@media (max-width:1180px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px; }
}

@media (max-width:1080px){
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  :root{ --header-h:80px; }

  /* PROCESS — one card per swipe below this; arrows give way to dots */
  .step-card{ flex-basis:min(76vw,300px); }
  .hero-content{ padding-top:calc(var(--header-h) + 16px); }
  .manifesto-top{ grid-template-columns:1fr; gap:26px; }
  .pillars{ grid-template-columns:1fr; }
  .stack-panel-inner{ grid-template-columns:1fr; }
  .stack-media{ min-height:280px; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }

  /* bento collapses to a 2-column rhythm */
  .bento{ grid-template-columns:repeat(2,1fr); --bento-row:236px; }
  .bento-item.span-2,.bento-item.span-4,.bento-item.span-6{ grid-column:span 2; }

  .studio-grid{ grid-template-columns:1fr; gap:26px; }
  .studio-media{ min-height:0; height:400px; }
  /* stacked, the rail has the full width — show more of the next card */
  .why-card{ flex-basis:clamp(250px, 34%, 310px); }
  .contact-grid{ grid-template-columns:1fr; }

  /* comparison panel stacks; the "vs" rule turns horizontal */
  .why-compare{ grid-template-columns:1fr; }
  .wc-divider{
    border-left:0; border-right:0;
    border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14);
    padding:12px 0;
  }
}

/* ---------- tablet portrait ---------- */
@media (max-width:860px){
  .section-head{ margin-bottom:44px; }
  .section-head h2{ max-width:20ch; }
  .work-head,.t-head,.studio-head{ align-items:flex-start; gap:24px; }
  .work-head .section-head,.t-head .section-head,.studio-head .section-head{ width:100%; }

  .bento{ grid-auto-rows:minmax(200px,auto); gap:14px; }
  .bento-item{ padding:26px; --bento-pb:72px; }

  .reel{ height:52vh; min-height:340px; }
  .contact-cta{ margin-bottom:48px; }
  .contact-grid{ padding-bottom:80px; }
}

/* ---------- phone ---------- */
@media (max-width:720px){
  .nav-links{ display:none; }
  .nav-links.is-open{ display:flex; }
  .nav-burger{ display:flex; }
  .nav-cta .btn{ display:none; }
  .nav-inner{ width:calc(100% - 24px); padding:9px 10px 9px 18px; }
  .brand img{ height:26px; }
  /* the menu must never grow past the screen — it scrolls instead */
  .nav-links.is-open{
    top:calc(env(safe-area-inset-top, 0px) + 76px);
    left:calc(12px + env(safe-area-inset-left, 0px));
    right:calc(12px + env(safe-area-inset-right, 0px));
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 100px);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav-links.is-open .nav-menu-cta{ display:flex; }

  .hero-stage{ min-height:auto; padding-top:28px; padding-bottom:clamp(200px,30vh,250px); }
  .hero-strip{ height:clamp(200px,30vh,250px); }
  .hero-title{ max-width:none; margin-top:20px; }
  .hero-sub{ margin-top:18px; }
  .hero-proof{ margin-top:28px; gap:12px; }
  .hero-actions{ margin-top:28px; gap:10px; width:100%; }
  .hero-actions .btn{ width:100%; }
  .hero-actions .magnetic{ width:100%; }

  /* the claim sits above the numbers rather than beside them, and the divider
     that separated the two columns has nothing left to divide */
  .stats-card{ grid-template-columns:1fr; gap:24px; }
  .stats-lede::after{ display:none; }
  .stats-lede{ gap:12px; }
  .stats-link{ margin-top:0; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .stat-item .label{ max-width:none; }

  /* WORK — the pinned 100vh stack is dropped for a plain scrolling list.
     Four viewport-tall pinned panels do not survive a short phone screen,
     and main.js skips the pin below this width to match. */
  .stack{ display:flex; flex-direction:column; gap:20px; }
  .stack-panel{ height:auto; min-height:0; display:block; padding:0; }
  .stack-panel-inner{ min-height:0; border-radius:var(--r-lg); box-shadow:0 24px 60px -34px rgba(12,11,16,.4); }
  .stack-media{ position:relative; min-height:0; aspect-ratio:4/3; }
  .stack-media img{ transform:none; }
  .stack-info{ padding:28px 24px 30px; }
  .stack-info h3{ max-width:none; }
  .stack-info p{ max-width:none; }
  .stack-info .stats{ gap:20px; margin-top:24px; }
  .stack-info .view{ margin-top:26px; }

  .bento{ grid-template-columns:1fr; grid-auto-rows:auto; --bento-row:auto; }
  .bento-item.span-2,.bento-item.span-4,.bento-item.span-6{ grid-column:span 1; }
  .bento-item{ min-height:200px; }
  .bento-item p{ max-width:none; }

  .gallery-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:clamp(150px,26vw,190px); }
  .gallery-item.tall{ grid-row:span 1; }
  .reel{ height:auto; min-height:440px; }

  .steps-nav{ display:none; }
  .step-card{ flex-basis:min(82vw,310px); padding:22px 20px 24px; }

  .ba-stage{ aspect-ratio:4/5; min-height:0; }
  .ba-grip{ width:44px; height:44px; }
  .ba-chip{ top:14px; font-size:10.5px; padding:6px 11px; }
  .ba-chip-before{ left:14px; } .ba-chip-after{ right:14px; }
  .ba-stats{ gap:22px; }
  .ba-meta{ padding-top:18px; gap:18px; }

  .studio-head{ margin-bottom:40px; }
  .studio-head-cta,.studio-head-cta .btn{ width:100%; }
  .why-compare{ margin-bottom:40px; }
  /* phones: one card per swipe, and the arrows give way to dots + swiping */
  .why-card{ flex-basis:min(78vw,320px); padding:24px 20px 26px; }
  .why-rail-nav{ display:none; }
  .wc-col li{ font-size:14.5px; }

  .t-card{ flex:0 0 min(86vw,360px); padding:26px; }

  .form-row{ grid-template-columns:1fr; }
  .contact-info,.contact-form{ padding:26px; }
  .contact-grid{ padding-bottom:70px; }
  .form-foot{ gap:16px; }
  .form-foot .magnetic,.form-foot .btn{ width:100%; }

  .site-footer{ padding:64px 0 20px; }
  .footer-top{ grid-template-columns:1fr; gap:32px; }
  .footer-cta{ padding-bottom:40px; margin-bottom:40px; }
  .footer-cta .btn{ width:100%; }
  .footer-cta .magnetic{ width:100%; }
  .footer-bottom{ justify-content:flex-start; }

  .chat-fab{
    right:calc(16px + env(safe-area-inset-right, 0px));
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:56px; height:56px;
  }
  .chat-panel{
    right:calc(8px + env(safe-area-inset-right, 0px));
    left:calc(8px + env(safe-area-inset-left, 0px));
    bottom:calc(80px + env(safe-area-inset-bottom, 0px));
    width:auto;
    max-height:calc(100dvh - 108px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
  }
  /* iOS zooms the page when a focused input is under 16px */
  .chat-input input{ font-size:16px; }
  /* a long chip set would otherwise squeeze the transcript to nothing */
  .chat-quick{ max-height:116px; overflow-y:auto; overscroll-behavior:contain; }
}

/* ---------- small phone ---------- */
@media (max-width:560px){
  :root{ --edge:18px; }
  .section-head{ gap:16px; margin-bottom:36px; }
  .section-head p{ font-size:15.5px; }
  .eyebrow{ font-size:12px; }

  .hero-pill{ font-size:11.5px; padding:8px 14px; }
  .hero-sub{ font-size:15.5px; line-height:1.6; }
  .hero-proof{ flex-direction:column; align-items:center; gap:14px; }

  .manifesto-statement{ line-height:1.28; }
  .pillar{ padding:28px 22px; }
  .pillar h3{ font-size:21px; margin-top:22px; }
  .pillar .thumb{ width:66px; height:66px; }

  .work-filters{ gap:8px; }
  .work-filters button{ padding:10px 16px; font-size:13px; }
  .stack-info{ padding:24px 20px 26px; }
  .stack-info .stats{ gap:16px 22px; }
  .stack-info .tags{ margin-top:20px; }

  .bento-item{ padding:24px 22px; --bento-pb:66px; }
  .bento-item h3{ font-size:20px; }
  .bento-go{ right:20px; bottom:20px; width:36px; height:36px; }
  .bento-item .bento-body{ padding-right:44px; }
  .bento-item .tag{ top:20px; right:20px; }

  .gallery-grid{ gap:12px; }
  .reel{ margin-top:40px; min-height:380px; }
  .reel-copy{ display:none; }   /* the overlay is too shallow to carry it here */


  .ba-tabs{ gap:8px; }
  .ba-tabs button{ padding:10px 16px; font-size:13px; }
  .ba-stats{ gap:18px; }
  .ba-stats strong{ font-size:21px; }

  .why-card h3{ font-size:17.5px; }
  .wc-col{ padding:24px 20px; }

  .t-card{ flex:0 0 min(88vw,330px); padding:24px; }
  .t-card .t-copy{ font-size:15px; }

  .contact-info,.contact-form{ padding:22px 20px; }
  .contact-cta p{ font-size:16.5px; }
  .contact-info .row a,.contact-info .row p{ font-size:15.5px; }
  /* stacked here, so the map no longer needs to stretch to match a sibling */

  .chat-panel{ border-radius:18px; }
  .chat-msg{ max-width:92%; }
}

/* ---------- compact phone (iPhone SE and friends) ---------- */
@media (max-width:400px){
  :root{ --edge:15px; }
  /* nowrap is what pushes long labels off a 320px screen */
  .btn{ white-space:normal; text-align:center; padding:15px 20px; font-size:14.5px; }
  .hero-title{ font-size:33px; letter-spacing:-.03em; }
  .stat-item .num{ font-size:31px; }
  .stat-item .label{ font-size:12.5px; }
  .bento-item{ padding:22px 18px; --bento-pb:62px; }
  .stack-info{ padding:22px 18px 24px; }
  .stack-info .stats{ gap:14px 18px; }
  .stack-info .stats strong{ font-size:20px; }
  .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:180px; }
  .why-card{ flex-basis:86vw; padding:22px 18px 24px; }
  .contact-info,.contact-form{ padding:20px 16px; }
  .chip{ padding:10px 13px; font-size:13px; }
  .footer-col a{ font-size:14px; }
}

/* ---------- phone held sideways ----------
   100svh minus a 240px strip leaves no room for the headline, so the hero
   drops the reel height and lets the section size to its content. */
@media (max-height:560px) and (orientation:landscape){
  .hero-stage{ min-height:auto; padding-top:20px; padding-bottom:190px; }
  .hero-strip{ height:180px; }
  .hero-card{ width:clamp(110px,13vw,150px); }
  .hero-title{ font-size:clamp(30px,5.4vw,46px); margin-top:16px; }
  .hero-sub{ margin-top:14px; font-size:15px; }
  .hero-actions,.hero-proof{ margin-top:20px; }
  .stack-panel{ height:auto; }
  .stack-panel-inner{ min-height:0; }
  .reel{ height:auto; min-height:300px; }
  .chat-panel{ max-height:calc(100dvh - 96px); }
  .nav-links.is-open{ max-height:calc(100dvh - 92px); }
}

/* ============================================================
   Reduced motion — kill every non-essential animation
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],[data-reveal-scale]{ opacity:1 !important; transform:none !important; }
  .hero-pill-dot{ animation:none; }
  .chat-fab-ping{ display:none; }
  .status-pill i{ animation:none; }
  .t-row{ transform:none !important; }
  .t-marquee{ overflow-x:auto; }
  .zappy-eye,.zappy-bulb,.zappy-spark{ animation:none; }
  .hero-title .w-mask:hover .w-in{ transform:none; }
  .hero-strip{ overflow-x:auto; }
  .hero-strip-track{ transform:none !important; }
}