/* ============================================================
   DIGITAL APPEARANCE MARKETING — "SOFT SIGNAL"
   Cool light-grey canvas · white rounded cards · one lime accent ·
   Hanken Grotesk sentence-case headlines · mono micro-labels.
   Plain CSS, no build step. Tokens first.
   ============================================================ */
:root{
  --bg:      #EFEFED;
  --card:    #FFFFFF;
  --ink:     #101010;
  --ink-2:   #0C0C0C;
  --grey:    #8B8B87;   /* muted, but only clears AA on the DARK sections */
  --grey-2:  #55554F;
  /* --grey on paper measures 2.97:1 and on white 3.42:1, both under AA for
     small text. These two are the light-background equivalents. */
  --grey-aa:   #6C6C67;   /* 4.6:1 on paper, 5.3:1 on white */
  --lime-deep: #4F7A00;   /* lime that survives on a light background, 5.1:1 */
  --line:    rgba(16,16,16,.1);
  --line-w:  rgba(255,255,255,.14);
  --lime:    #98FE00;
  --lime-2:  #8AEB00;
  --lime-ink:#0E1500;

  --f-text: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --h2:    clamp(24px, 2.4vw + 8px, 40px);
  --step0: clamp(15px, .2vw + 14px, 16.5px);
  --label: clamp(10.5px, .75vw, 12px);

  --pad:  clamp(16px, 3.4vw, 52px);
  --maxw: 1360px;
  --r-lg: 26px;
  --r:    18px;
  --r-sm: 12px;

  --sh:    0 24px 60px -30px rgba(16,16,16,.18), 0 4px 14px -8px rgba(16,16,16,.08);
  --sh-lg: 0 44px 90px -40px rgba(16,16,16,.28);

  --ease: cubic-bezier(.22,1,.36,1);
  --dur:  .45s;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* Any author `display` outranks the browser's own [hidden] rule. Without
   this, a hidden overlay like the menu stays laid out at full size and
   quietly swallows every click on the page. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; scroll-padding-top:86px; }
/* The canvas is what the browser paints outside the page box: the rubber-band
   area at either end, and on iOS the strip behind its own chrome. With no
   background on html it inherits body's paper, which is why a white band sat
   above a black hero. Set only on the home page, which is dark top and bottom;
   the brief is a light page and keeps the paper. */
html.pg-dark{ background:#000; }   /* same black as theme-color, so no seam */
html,body{ overflow-x:hidden; overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-text); font-size:var(--step0); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
sup{ color:var(--lime-2); font-weight:700; }
::selection{ background:var(--lime); color:var(--lime-ink); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }
.svcs :focus-visible, .ft :focus-visible{ outline-color:var(--lime); }

.mono{
  font-family:var(--f-mono); font-size:var(--label); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
}
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lime); vertical-align:middle; flex-shrink:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:10px; left:10px; z-index:1200; padding:10px 18px;
  background:var(--ink); color:#fff; border-radius:999px; font-weight:600;
  transform:translateY(-300%); transition:transform .3s var(--ease);
}
.skip-link:focus{ transform:none; }

/* type */
.h2{ font-size:var(--h2); font-weight:600; line-height:1.22; letter-spacing:-.015em; max-width:24em; text-wrap:balance; }
.dim{ color:var(--grey-aa); font-weight:500; }
.label{ display:inline-flex; align-items:center; gap:10px; font-size:clamp(15px, 1.15vw, 17.5px); font-weight:600; letter-spacing:-.005em; }

/* pills & chips */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-weight:600; font-size:14.5px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pill--dark{ background:var(--ink); color:#fff; }
.pill--dark:hover{ background:#262626; transform:translateY(-2px); }
.pill--paper{ background:#fff; color:var(--ink); }
.pill--paper:hover{ background:var(--lime); color:var(--lime-ink); }
.pill--line{ border:1px solid var(--line); align-self:flex-start; margin-top:auto; }
.pill--line:hover{ border-color:var(--ink); }
/* lime with the near-black ink the rest of the site pairs it with: white on
   this green measures about 1.3:1, which is unreadable */
.pill--lime{ background:var(--lime); color:var(--lime-ink); font-weight:700; }
.pill--lime:hover{ background:var(--lime-2); transform:translateY(-2px); }
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; flex-shrink:0; font-size:15px;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip--lime{ background:var(--lime); color:var(--lime-ink); }
.chip--ink{ background:var(--ink); color:#fff; width:30px; height:30px; font-size:12px; }
.chip--ghost{ border:1px solid var(--line); color:var(--ink); background:#fff; }
a.chip:hover, .hd__cta:hover .chip, .sec__cta:hover .chip{ transform:translate(2px,-2px); }
.tag{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  color:var(--grey-2); font-size:10.5px;
}

/* reveals */
.js [data-cascade], .js [data-r]{ opacity:0; transform:translateY(22px); }
.js [data-cascade].in, .js [data-r].in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:calc(var(--i, 0) * 90ms);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js [data-cascade], .js [data-r]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   STICKY BAR  ·  floats in once the hero has scrolled away
   ============================================================ */
.snav{
  position:fixed; z-index:300;
  top:clamp(10px, 1.6vh, 18px); left:50%;
  width:min(1100px, calc(100% - 2 * var(--pad)));
  display:flex; align-items:center; gap:14px;
  padding:6px 6px 6px 18px; border-radius:999px;
  /* proper glass: let the page show through and lean on the blur, rather
     than a near-solid white panel that just looks like a bar */
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),      /* lit top edge reads as glass */
    inset 0 -1px 0 rgba(16,16,16,.04),
    0 14px 34px -24px rgba(16,16,16,.45);
  /* parked just above the viewport until the hero is behind you */
  transform:translate(-50%, calc(-100% - clamp(10px, 1.6vh, 18px)));
  opacity:0; pointer-events:none;
  transition:transform .55s var(--ease), opacity .4s var(--ease);
}
.snav.is-on{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
.snav__brand{ display:inline-flex; flex:0 0 auto; }
.snav__brand img{ height:22px; width:auto; transition:opacity var(--dur) var(--ease); }
/* Pinned to the bar's own centre rather than auto-margined. Auto margins
   centre the links in the space LEFT OVER, so the wider button group on the
   right dragged them about 47px off true centre. */
.snav__links{
  /* the links carry their own padding now, and the gap has to clear two sets
     of brackets when the hovered link sits next to the current one */
  display:flex; gap:clamp(4px, 1.3vw, 20px);
  position:absolute; left:50%; transform:translateX(-50%);
}
.snav__links a{
  position:relative; font-weight:600; font-size:14px; color:var(--grey-2);
  padding:7px 11px; transition:color var(--dur) var(--ease);
}
/* the same four corner brackets as the full screen menu, scaled to the bar,
   so hover and "you are here" read identically in both navs */
.snav__links a::before, .snav__links a::after,
.snav__links a span::before, .snav__links a span::after{
  content:""; position:absolute; width:7px; height:7px;
  border:1.4px solid currentColor; opacity:0;
  transition:opacity .28s var(--ease), transform .36s var(--ease);
}
.snav__links a::before{ top:0; left:0; border-right:0; border-bottom:0; transform:translate(4px, 4px); }
.snav__links a::after{ bottom:0; right:0; border-left:0; border-top:0; transform:translate(-4px, -4px); }
.snav__links a span::before{ top:0; right:0; border-left:0; border-bottom:0; transform:translate(-4px, 4px); }
.snav__links a span::after{ bottom:0; left:0; border-right:0; border-top:0; transform:translate(4px, -4px); }

.snav__links a[aria-current]{ color:var(--ink); }
.snav__links a[aria-current]::before, .snav__links a[aria-current]::after,
.snav__links a[aria-current] span::before, .snav__links a[aria-current] span::after,
.snav__links a:focus-visible::before, .snav__links a:focus-visible::after,
.snav__links a:focus-visible span::before, .snav__links a:focus-visible span::after{
  opacity:1; transform:none;
}
@media (hover:hover){
  .snav__brand:hover img{ opacity:.65; }
  .snav__links a:hover{ color:var(--ink); }
  .snav__links a:hover::before, .snav__links a:hover::after,
  .snav__links a:hover span::before, .snav__links a:hover span::after{
    opacity:1; transform:none;
  }
}
.snav__cta{ display:flex; align-items:center; gap:7px; flex:0 0 auto; margin-left:auto; }
.snav__demo{ padding:7px 15px; font-size:13px; line-height:1.25; }

/* ---------- burger ---------- */
.burger{
  position:relative; width:32px; height:32px; flex:0 0 auto;
  border:0; border-radius:50%; cursor:pointer; padding:0;
  background:var(--ink);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.burger > span[aria-hidden]{
  position:absolute; left:50%; top:50%; width:15px; height:1.6px;
  background:#fff; transform:translate(-50%,-50%); border-radius:2px;
}
.burger > span[aria-hidden]::before,
.burger > span[aria-hidden]::after{
  content:""; position:absolute; left:0; width:100%; height:100%;
  background:inherit; border-radius:2px;
}
.burger > span[aria-hidden]::before{ top:-5px; }
.burger > span[aria-hidden]::after{ top:5px; }
.burger--light{ background:rgba(255,255,255,.16); backdrop-filter:blur(6px); }
@media (hover:hover){
  .burger:hover{ transform:scale(1.06); }
  .burger--light:hover{ background:rgba(255,255,255,.28); }
}
/* The burger only earns its place once the inline links are gone. While the
   links are on show it would be a second door to the same room. */
.hnav__cta .burger,
.snav__cta .burger{ display:none; }

/* ============================================================
   FULL SCREEN MENU
   ============================================================ */
.menu{
  position:fixed; inset:0; z-index:400;
  display:flex; flex-direction:column;
  padding:clamp(16px, 2.4vw, 30px) var(--pad) clamp(22px, 3vh, 36px);
  background:rgba(239,239,237,.72);
  backdrop-filter:blur(26px) saturate(130%);
  -webkit-backdrop-filter:blur(26px) saturate(130%);
  opacity:0; transition:opacity .4s var(--ease);
}
.menu.is-on{ opacity:1; }
.menu__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.menu__brand{ color:var(--grey-2); }
.menu__close{
  display:grid; place-items:center; width:40px; height:40px;
  border:0; border-radius:50%; background:none; cursor:pointer;
  font-size:17px; color:var(--ink);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (hover:hover){
  .menu__close:hover{ background:rgba(16,16,16,.07); transform:rotate(90deg); }
}

.menu__nav{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(2px, .8vh, 10px);
}
.menu__nav a{
  position:relative; display:inline-block; padding:.1em .62em;
  font-weight:700; letter-spacing:-.02em; line-height:1.16;
  font-size:clamp(30px, 7.4vw, 62px); text-transform:uppercase;
  color:var(--ink);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color var(--dur) var(--ease);
}
.menu.is-on .menu__nav a{ opacity:1; transform:none; }
.menu.is-on .menu__nav a:nth-child(1){ transition-delay:.06s; }
.menu.is-on .menu__nav a:nth-child(2){ transition-delay:.11s; }
.menu.is-on .menu__nav a:nth-child(3){ transition-delay:.16s; }
.menu.is-on .menu__nav a:nth-child(4){ transition-delay:.21s; }
.menu.is-on .menu__nav a:nth-child(5){ transition-delay:.26s; }
.menu.is-on .menu__nav a:nth-child(6){ transition-delay:.31s; }
/* The one coloured item. Lime type on the pale menu backdrop measured about
   1.6:1 and all but disappeared, so it is a lime marker highlight with the
   dark ink instead: same brand colour, 14.7:1, impossible to miss. */
.menu__nav a:last-child{
  color:var(--lime-ink);
  background:var(--lime);
  border-radius:10px;
  padding-inline:.42em;
}

/* four corner brackets, drawn from two pseudo elements on the link and two
   on its span, so the marks can fly out to the corners on hover or on the
   section you are actually in */
.menu__nav a::before, .menu__nav a::after,
.menu__nav a span::before, .menu__nav a span::after{
  content:""; position:absolute; width:15px; height:15px;
  border:1.7px solid currentColor; opacity:0;
  transition:opacity .3s var(--ease), transform .42s var(--ease);
}
.menu__nav a::before{ top:0; left:0; border-right:0; border-bottom:0; transform:translate(7px, 7px); }
.menu__nav a::after{ bottom:0; right:0; border-left:0; border-top:0; transform:translate(-7px, -7px); }
.menu__nav a span::before{ top:0; right:0; border-left:0; border-bottom:0; transform:translate(-7px, 7px); }
.menu__nav a span::after{ bottom:0; left:0; border-right:0; border-top:0; transform:translate(7px, -7px); }

.menu__nav a[aria-current]::before, .menu__nav a[aria-current]::after,
.menu__nav a[aria-current] span::before, .menu__nav a[aria-current] span::after,
.menu__nav a:focus-visible::before, .menu__nav a:focus-visible::after,
.menu__nav a:focus-visible span::before, .menu__nav a:focus-visible span::after{
  opacity:1; transform:none;
}
@media (hover:hover){
  .menu__nav a:hover::before, .menu__nav a:hover::after,
  .menu__nav a:hover span::before, .menu__nav a:hover span::after{
    opacity:1; transform:none;
  }
}

.menu__foot{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  color:var(--grey-aa);
}
.menu__foot a{ transition:color var(--dur) var(--ease); }
@media (hover:hover){ .menu__foot a:hover{ color:var(--ink); } }

body.is-locked{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .snav, .menu, .menu__nav a,
  .menu__nav a::before, .menu__nav a::after,
  .menu__nav a span::before, .menu__nav a span::after{ transition-duration:.01ms; }
  .menu__nav a{ transform:none; }
  .burger:hover, .menu__close:hover{ transform:none; }
}

/* ============================================================
   HERO CARD
   ============================================================ */
.hero{ padding:0; }
.hero__card{
  position:relative; border-radius:0; overflow:hidden; isolation:isolate;
  min-height:100vh;
  min-height:100svh;                /* true full-screen hero, edge to edge */
  display:flex; flex-direction:column;
}
/* bottom fade — the wordmark's letterforms wash out into white at the card base;
   fades to near-white (not page grey) so the rounded corners still read */
.hero__card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:26%; z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.08) 30%,
    rgba(255,255,255,.22) 52%,
    rgba(255,255,255,.45) 72%,
    rgba(255,255,255,.72) 88%,
    #FBFBFA 100%);
}
.hero__media{
  position:absolute; inset:0; z-index:0;
  /* fallback field while the video/poster loads */
  background:linear-gradient(180deg, #3A3A34 0%, #23231F 60%, #171713 100%);
}
.hero__vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
/* the still that guarantees the knockout always has a picture to bite into,
   even where the video layer cannot be blended with. Sits directly under the
   video and is pinned along with it, so the two never disagree. */
.hero__poster{
  position:absolute; inset:0; z-index:0;
  background:url("../assets/hero-poster.jpg") center/cover no-repeat;
}
/* contrast scrim — keeps nav/headline/chips legible over the footage */
.hero__media::before{
  content:""; position:absolute; inset:0; z-index:1;
  /* the radial sits behind the headline. It is weighted a little heavier now
     because the knocked-out bubble blends with whatever is behind it, and a
     bright patch of footage would otherwise bleach the lime away. */
  background:
    linear-gradient(180deg, rgba(8,8,8,.42), rgba(8,8,8,.1) 26%, transparent 48%),
    radial-gradient(84% 58% at 50% 56%, rgba(8,8,8,.42), transparent 78%);
}
.hero__media::after{
  content:""; position:absolute; inset:0; z-index:1; opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* --- in-card nav --- */
.hnav{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:clamp(14px, 2vw, 24px) clamp(16px, 2.4vw, 32px);
}
.hnav__brand img{ height:30px; width:auto; }
.hnav__links{
  display:flex; gap:clamp(14px, 2.6vw, 38px);
  position:absolute; left:50%; transform:translateX(-50%);
}
.hnav__links a{
  color:rgba(255,255,255,.85); font-weight:500; font-size:14.5px; padding:8px 2px;
  transition:color var(--dur) var(--ease);
}
.hnav__links a:hover{ color:#fff; }
.hnav__cta{ display:flex; gap:9px; }
.hpill{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:9px 18px; font-weight:600; font-size:13.5px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hpill--ghost{ border:1px solid rgba(255,255,255,.55); color:#fff; }
.hpill--ghost:hover{ background:rgba(255,255,255,.15); }
/* Lime at rest, white on hover. The two states are simply swapped from where
   they started: the demo is the one thing we want clicked, so it should be
   wearing the brand colour before anyone touches it, not as a reward for
   hovering. Both states carry dark text, so both clear AA on their own fill. */
.hpill--solid{ background:var(--lime); color:var(--lime-ink); }
.hpill--solid:hover{ background:#fff; color:var(--ink); transform:translateY(-2px); }
.hpill--big{ padding:12px 24px; font-size:14.5px; }

/* --- meta row: trust cluster + glass card + rail --- */
.hero__meta{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding:clamp(10px, 1.6vh, 20px) clamp(16px, 2.4vw, 32px) 0;
}
.avatars{ display:flex; align-items:center; gap:14px; color:#fff; font-size:13px; line-height:1.45; }
.avatars p{ border-left:1px solid rgba(255,255,255,.4); padding-left:14px; }
.avatars__row{ display:inline-flex; }
.avatars__row img, .avatars__row i{
  width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.9);
  object-fit:cover; background:#fff;
}
.avatars__row img + img, .avatars__row img + i{ margin-left:-12px; }
.avatars__row i{
  position:relative;
}
.avatars__row i::after{
  content:"20+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; color:var(--ink);
}
.hero__aside{ display:flex; gap:12px; align-items:flex-start; }
.glass{
  max-width:330px; text-align:right; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:var(--r-sm); padding:16px 18px;
}
.glass__t{ font-weight:700; font-size:17px; margin-bottom:6px; }
.glass__d{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.88); }
.glass__more{
  display:inline-block; margin-top:8px; font-size:12.5px; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.5); transition:border-color var(--dur) var(--ease);
}
.glass__more:hover{ border-color:#fff; }
.rail{
  display:flex; flex-direction:column; gap:4px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:999px; padding:8px 6px;
}
.rail a{
  width:32px; height:32px; border-radius:50%; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rail a:hover{ background:#fff; color:var(--ink); }
.rail svg{ width:15px; height:15px; }

/* --- pill-highlight headline --- */
/* No z-index here on purpose. A positioned element with a z-index forms a
   stacking context, which would cut the pill's blend off from the video
   behind it. Positioned + z-index:auto still paints after .hero__media, and
   the nav (z-index:3) and the bottom fade (z-index:2) still sit above. */
.hero__title{
  position:relative; margin:auto 0; align-self:center; text-align:center;
  color:#fff; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(38px, 6.4vw, 100px); line-height:1.08;
  text-shadow:0 12px 40px rgba(16,16,16,.25);
  min-height:2.3em;                       /* reserve both lines while the typewriter runs */
}
.hero__title .type{ display:block; }
/* Reserves a line so the composition does not jump as characters land, but
   min-height rather than height: on a phone the longer message wraps to
   three lines, and a fixed height let it spill over the chips below. */
.hero__title .type > span{ display:block; min-height:1.14em; }
/* each line reserves its final width (JS) and fills left→right, so the
   centred composition never jitters as characters land */
.hero__title .ln{ display:inline-block; text-align:left; max-width:100%; }

/* typewriter caret — retro block cursor */
.caret{
  display:inline-block; width:.46em; height:.78em; background:#fff;
  margin-left:.06em; margin-right:-.52em;   /* cancels its own advance: zero layout impact */
  vertical-align:-.02em;
  animation:caretblink .85s steps(1) infinite;
}
/* empty pill: hide the bubble but KEEP its padding so the line width never shifts */
.pillw.pillw--wait{ background:transparent; text-shadow:none; }
/* untyped remainder — occupies its real space, just invisible */
.gh{ visibility:hidden; }
@keyframes caretblink{ 50%{ opacity:0; } }
.caret.solid{ animation:none; opacity:1; }   /* steady while typing, blinks at rest */

/* CRT power-on — vertical bloom + brightness flash */
@media (prefers-reduced-motion:no-preference){
  .js .hero__media{ animation:crt-on .8s var(--ease) .1s both; transform-origin:50% 52%; }
}
@keyframes crt-on{
  0%{ transform:scaleY(.006); filter:brightness(3.4) saturate(.4); }
  45%{ transform:scaleY(1.015); filter:brightness(1.7) saturate(.85); }
  100%{ transform:none; filter:none; }
}

/* drifting scanlines over the footage */
.hero__scan{
  position:absolute; left:0; right:0; top:0; height:200%; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
  opacity:.5; will-change:transform;
  animation:scan-drift 8s linear infinite;
}
@keyframes scan-drift{ to{ transform:translateY(-50%); } }

/* gentle idle float on the glass card */
@media (prefers-reduced-motion:no-preference){
  .glass{ animation:floaty 6.5s ease-in-out 2.2s infinite; }
}
@keyframes floaty{ 50%{ transform:translateY(-7px); } }

@media (prefers-reduced-motion:reduce){
  .caret{ display:none; }
  .hero__scan{ animation:none; }
}

/* cascade elements release their transitions once settled (scroll engine writes inline styles) */
.js [data-cascade].settled{ transition:none; }
/* Knockout: the word is punched out of the lime bubble so the footage shows
   through the letterforms.
   There is no CSS that masks live text out of its own background, so this
   blends the whole pill with what is behind it: black screens to exactly the
   backdrop (the letters become holes) while lime screens to lime over the
   dark footage. It only works because .hero__title carries no z-index, so
   nothing isolates the pill from the video. */
/* Default: a solid lime bubble with the dark ink the rest of the site pairs
   with lime. This is what the demo page headline uses, over pale paper. */
.pillw{
  font-style:normal; background:var(--lime); color:var(--lime-ink);
  display:inline-block; line-height:.86;                 /* shorter bubble, same width */
  border-radius:999px; padding:.17em .34em .05em;
  text-shadow:none;
}
/* In the hero the word is knocked out so the scene shows through it.
   This used mix-blend-mode:lighten, and that turned out to be undependable.
   Blending needs the compositor to sample what is painted behind the element,
   and iOS repeatedly would not: any layer promotion around the video severed
   it and the black letters were left sitting on the lime. It rendered
   perfectly in Chromium and in WebKit headless every single time, so nothing
   short of the physical phone ever caught it.
   So the letters are no longer holes hoping to see through. They are PAINTED
   with the picture, via background-clip:text, and JS keeps that picture lined
   up with the hero behind them so it reads as one continuous image. No
   blending, no compositor behaviour to depend on, one code path everywhere.
   Scoped to the hero: the demo page keeps the solid lime bubble above. */
/* The letters are holes, so nothing paints them: JS masks the word out of the
   bubble and the page underneath shows through. The text still has to be here
   to hold the width and to be read aloud, it just draws nothing. */
.hero__title .pillw__t{ color:transparent; -webkit-text-fill-color:transparent; }
/* Until the mask is cut, and anywhere masks are unavailable, the word must be
   readable rather than a blank lime lozenge. */
.hero__title .pillw:not([style*="mask"]) .pillw__t{
  color:var(--lime-ink); -webkit-text-fill-color:var(--lime-ink);
}
@supports not ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){
  .hero__title .pillw__t{ color:var(--lime-ink); -webkit-text-fill-color:var(--lime-ink); }
}

/* --- bottom row: chips + consult corner --- */
.hero__foot{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  padding:0 clamp(16px, 2.4vw, 32px) clamp(18px, 2.6vh, 30px);
}
.facil{ color:#fff; }
.facil > p{ font-weight:700; font-size:clamp(17px, 1.5vw, 22px); margin-bottom:14px; }
.facil ul{ display:flex; flex-wrap:wrap; gap:9px; max-width:440px; }
.facil li{
  border-radius:999px; padding:9px 18px; font-weight:600; font-size:13.5px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.facil li:hover{ background:#fff; color:var(--ink); }
/* No lime "Free demo" chip here any more. This list is what we do; the demo is
   the call to action sitting right beside it, and saying it twice in one glance
   spent the emphasis twice over. */
.hero__consult{
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  max-width:44ch; text-align:right; font-size:13px; line-height:1.5;
  color:rgba(255,255,255,.92);
}
.hero__consult p{ color:rgba(255,255,255,.94); text-shadow:0 1px 14px rgba(16,16,16,.4); }  /* caption sits above the button, over the darker zone */

/* social chip row */
.socials{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(10px, 1.4vw, 18px);
  padding:clamp(16px, 2.4vh, 26px) var(--pad) 0;   /* hero is full-bleed; row keeps its own gutters */
}
.socials a{
  display:flex; align-items:center; justify-content:center; gap:11px;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 10px;
  font-weight:600; font-size:14px; background:transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.socials a:hover{ background:#fff; border-color:transparent; transform:translateY(-2px); box-shadow:var(--sh); }
.soc__ic{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.soc__ic svg{ width:16px; height:16px; }
.socials a:hover .soc__ic{ background:var(--lime); color:var(--lime-ink); }

/* ============================================================
   SECTIONS shared
   ============================================================ */
.sec{ max-width:calc(var(--maxw) + 2 * var(--pad)); margin-inline:auto; padding:clamp(56px, 9vh, 104px) var(--pad) 0; }
.sec__head{ display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1fr); gap:clamp(18px, 3vw, 60px); align-items:start; }
.sec__head .h2{ justify-self:start; }
.sec__sub{ grid-column:2; color:var(--grey-2); max-width:52ch; margin-top:10px; font-size:14.5px; }
.sec__cta{ display:inline-flex; align-items:center; gap:6px; margin-top:clamp(20px, 3vh, 30px); }

/* ============================================================
   PROJECT INDEX — minimal numerals, mockup reveals on hover
   ============================================================ */
.idx{
  display:grid; grid-template-columns:repeat(2, 1fr);
  margin-top:clamp(26px, 4vh, 48px);
  border-top:1px solid var(--line);
}
.idx__item{
  position:relative; isolation:isolate; overflow:hidden;
  aspect-ratio:16/9;                        /* matches the mockups — no cropping */
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px clamp(16px, 1.8vw, 28px);
  transition:background var(--dur) var(--ease);
}
.idx__item:nth-child(odd):not(.idx__item--wide){ border-right:1px solid var(--line); }
.idx__item:nth-child(-n+4){ border-bottom:1px solid var(--line); }

/* 05 spans both columns at exactly the height of a normal row: a half-width
   cell is 16/9, so a full-width one at 32/9 lands on the same height.
   That shows half the mockup's height. The GIG screen runs from 3.4% to
   66.5%, taller than the 50% window, so some of it has to go: top-aligning
   keeps the laptop's top edge and the site's nav whole and puts the single
   cut along the bottom, which reads as the machine running out of frame.
   A centred crop would slice it top and bottom instead. */
.idx__item--wide{ grid-column:1 / -1; aspect-ratio:32/9; }
.idx__item--wide .idx__panel img{ object-position:center top; }
.idx__item--wide .idx__no{ font-size:clamp(84px, 9vw, 168px); }

/* revealed mockup */
.idx__panel{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  opacity:0; transition:opacity .5s var(--ease);
}
.idx__panel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.05); transition:transform 1.1s var(--ease);
}
.idx__panel::after{                      /* keeps the numeral + caption legible */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,8,.28), rgba(8,8,8,.12) 45%, rgba(8,8,8,.62));
}
.idx__item:focus-visible .idx__panel{ opacity:1; }
/* hover states only where a real pointer exists — touch uses .is-open, so a tap
   can toggle it back off instead of getting stuck on sticky :hover */
@media (hover:hover){
  .idx__item:hover .idx__panel{ opacity:1; }
  .idx__item:hover .idx__panel img{ transform:scale(1); }
  /* A translucent numeral rather than an outlined one.
     -webkit-text-stroke miters the glyph outline, and at the acute terminals
     of 1, 4, 5 and 7 that miter spikes into a visible arrowhead. CSS exposes
     no stroke-linejoin for text, so no stroke width, weight, font or
     text-rendering value avoids it. Letting the footage read through a
     translucent fill gives the same see-through feel with no joins at all. */
  .idx__item:hover .idx__no{ color:rgba(255,255,255,.34); }
  .idx__item:hover .idx__name{ color:#fff; }
  .idx__item:hover .idx__sub{ color:rgba(255,255,255,.75); }
}

/* numeral */
.idx__no{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(84px, 9vw, 168px); font-weight:300; line-height:1;
  letter-spacing:-.02em; color:var(--ink);
  transition:color .45s var(--ease), transform .55s var(--ease);
  pointer-events:none;
}
.idx__item:focus-visible .idx__no{ color:rgba(255,255,255,.34); }

/* caption */
.idx__foot{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.idx__txt{ display:flex; flex-direction:column; gap:3px; }
.idx__name{ font-size:15.5px; font-weight:600; line-height:1.25; transition:color .45s var(--ease); }
.idx__sub{ font-size:12.5px; color:var(--grey-aa); transition:color .45s var(--ease); }
.idx__item:focus-visible .idx__name{ color:#fff; }
.idx__item:focus-visible .idx__sub{ color:rgba(255,255,255,.75); }

/* touch: no hover — tapping a cell plays the same reveal (JS toggles .is-open) */
@media (hover:none){
  .idx__item.is-open .idx__panel{ opacity:1; }
  .idx__item.is-open .idx__no{ color:rgba(255,255,255,.34); }   /* same as hover */
  .idx__item.is-open .idx__name{ color:#fff; }
  .idx__item.is-open .idx__sub{ color:rgba(255,255,255,.75); }
  .idx__item.is-open .idx__panel img{ transform:scale(1); }
}
@media (max-width:620px){
  .idx{ grid-template-columns:1fr; }
  /* one column, so every cell is already full width: 05 goes back to the
     mockups' own 16/9 rather than staying a thin strip */
  .idx__item--wide{ aspect-ratio:16/9; }
  .idx__item--wide .idx__panel img{ object-position:center center; }
  .idx__item{ border-right:0; border-bottom:1px solid var(--line); }
}
@media (prefers-reduced-motion:reduce){
  .idx__panel img{ transition:none; transform:none; }
}

/* ============================================================
   PROJECTS GRID (legacy — kept for reference styling)
   ============================================================ */
.projgrid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2.4vw, 30px);
  margin-top:clamp(24px, 4vh, 40px);
}
.proj{ display:block; }
.proj__media{
  position:relative; aspect-ratio:16/9.6; border-radius:var(--r); overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--paper-2, #E7E7E4);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.proj__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.proj:hover .proj__media{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.proj:hover .proj__media img{ transform:scale(1.045); }

/* --- hover overlay: uppercase brand name, lime rule, view cue --- */
.proj__over{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:22px; text-align:center;
  background:linear-gradient(180deg, rgba(8,8,8,.62), rgba(8,8,8,.82));
  opacity:0; transition:opacity .4s var(--ease);
}
.proj:hover .proj__over, .proj:focus-visible .proj__over{ opacity:1; }
.proj__name{
  font-weight:700; text-transform:uppercase; letter-spacing:-.005em; line-height:1.02;
  font-size:clamp(19px, 2.15vw, 33px); color:#fff; max-width:14ch;
  transform:translateY(14px); transition:transform .55s var(--ease) .04s;
}
.proj__rule{
  width:0; height:2px; background:var(--lime);
  transition:width .55s var(--ease) .12s;
}
.proj__scope{
  color:rgba(255,255,255,.72); font-size:10.5px;
  transform:translateY(12px); opacity:0;
  transition:transform .55s var(--ease) .16s, opacity .45s var(--ease) .16s;
}
.proj__go{
  display:inline-flex; align-items:center; gap:7px; margin-top:4px;
  background:var(--lime); color:var(--lime-ink); font-weight:400;
  border-radius:999px; padding:8px 15px; font-size:10.5px; letter-spacing:.12em;
  transform:translateY(14px); opacity:0;
  transition:transform .55s var(--ease) .2s, opacity .45s var(--ease) .2s;
}
.proj__go i{ font-style:normal; transition:transform var(--dur) var(--ease); }
.proj:hover .proj__go i{ transform:translate(2px,-2px); }
.proj:hover .proj__name, .proj:focus-visible .proj__name{ transform:none; }
.proj:hover .proj__rule, .proj:focus-visible .proj__rule{ width:52px; }
.proj:hover .proj__scope, .proj:hover .proj__go,
.proj:focus-visible .proj__scope, .proj:focus-visible .proj__go{ transform:none; opacity:1; }

/* touch devices: no hover — the caption row below already names the project */
@media (hover:none){ .proj__over{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .proj__name, .proj__rule, .proj__scope, .proj__go{ transition:none; }
}
.proj__mark{ height:34px; width:auto; opacity:.85; }
.proj__mark--ink{ opacity:.9; }
.proj__media--sage{ background:radial-gradient(80% 90% at 70% 20%, rgba(152,254,0,.2), transparent 55%), linear-gradient(160deg, #6E7A68, #2F352C 80%); }
.proj__media--steel{ background:radial-gradient(90% 100% at 30% 15%, rgba(255,255,255,.3), transparent 55%), linear-gradient(160deg, #9EA2A6, #4A4E52 80%); }
.proj__media--ink{ background:radial-gradient(80% 90% at 75% 80%, rgba(152,254,0,.16), transparent 55%), linear-gradient(160deg, #2C2C2A, #101010 80%); }
.proj__media--lime{ background:radial-gradient(90% 110% at 75% 10%, #C6FF5E, transparent 60%), linear-gradient(160deg, var(--lime), #74C400 85%); }
.proj__row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:14px 4px 0;
}
.proj__row h3{ font-size:16.5px; font-weight:600; }

/* ============================================================
   PROOF PANEL
   ============================================================ */
.card{ background:var(--card); border-radius:var(--r); box-shadow:var(--sh); }
.proof{
  display:grid; gap:clamp(14px, 2vw, 24px);
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas:"big media" "sm big2" "sm big2";
  margin-top:clamp(24px, 4vh, 40px);
}
.proof{
  grid-template-areas:none; grid-template-columns:repeat(6, 1fr);
  align-items:stretch;
}
/* top-left: the signature offer */
.proof__big{ grid-column:1 / 5; position:relative; padding:clamp(22px, 3vw, 36px); }
.proof__big h3{ font-size:clamp(20px, 2vw, 28px); font-weight:600; margin:52px 0 10px; max-width:14ch; }
.proof__big p{ color:var(--grey-2); max-width:52ch; font-size:14.5px; }
/* the DA mark rather than a tick: it says who built this, which a generic
   checkmark did not */
.proof__ic{ position:absolute; left:clamp(22px, 3vw, 36px); top:clamp(20px, 2.6vw, 30px); }
.proof__ic img{ height:clamp(27px, 2.6vw, 33px); width:auto; display:block; opacity:.9; }
.proof__go{ position:absolute; right:clamp(18px, 2.4vw, 28px); top:clamp(18px, 2.4vw, 28px); }

/* dark proof pills */
.proof__pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(18px, 3vh, 28px); }
.ppill{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:#fff; border-radius:999px;
  padding:7px 18px 7px 7px; font-size:12.5px; font-weight:500;
}
.ppill__tick{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:var(--lime); color:var(--lime-ink);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}
.ppill__avs{ display:inline-flex; flex-shrink:0; }
.ppill__avs img{
  width:24px; height:24px; border-radius:50%; object-fit:cover;
  border:2px solid var(--ink); background:#fff;
}
.ppill__avs img + img{ margin-left:-9px; }

/* right: tall image spanning both rows, caption up top */
.proof__media{
  grid-column:5 / 7; grid-row:1 / 3;
  border-radius:var(--r); overflow:hidden; position:relative; min-height:300px;
  background:url("../assets/panel-code.jpg") center/cover no-repeat, #16180F;
  display:flex; align-items:flex-start;
}
.proof__media::before{                      /* scrim only behind the caption */
  content:""; position:absolute; left:0; right:0; top:0; height:44%;
  background:linear-gradient(180deg, rgba(8,8,8,.72), transparent);
}
.proof__media-cap{
  position:relative; margin:clamp(16px, 2vw, 24px);
  color:#fff; font-size:13.5px; line-height:1.45; max-width:30ch; font-weight:500;
  text-shadow:0 2px 12px rgba(16,16,16,.5);
}

/* bottom-left pair */
.proof__sm{ padding:clamp(18px, 2.4vw, 28px); display:flex; flex-direction:column; gap:6px; }
.proof__sm--a{ grid-column:1 / 3; }
.proof__sm--b{ grid-column:3 / 5; }
.proof__sm h4{ font-size:clamp(18px, 1.7vw, 23px); font-weight:600; line-height:1.15; }
.proof__h2{ margin-top:clamp(14px, 2.4vh, 22px); }
.proof__note{ color:var(--grey-2); font-size:13.5px; }
.proof__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:16px;
  font-weight:600; font-size:14px; width:fit-content;
  transition:gap var(--dur) var(--ease);
}
.proof__link:hover{ gap:12px; }
.proof__inset{
  margin-top:auto; border-radius:var(--r-sm); overflow:hidden; min-height:120px; flex:1;
  background:url("../assets/panel-desk.jpg") center/cover no-repeat, #0E0F0C;
}

/* ============================================================
   SERVICES — dark rounded
   ============================================================ */
.svcs{ padding:clamp(56px, 9vh, 104px) var(--pad) 0; max-width:calc(var(--maxw) + 2 * var(--pad)); margin-inline:auto; }
.svcs__inner{
  background:var(--ink-2); color:#fff; border-radius:var(--r-lg);
  padding:clamp(26px, 4vw, 56px);
}
.sec__head--dark .label{ color:#fff; }
.sec__head--dark .dim{ color:rgba(255,255,255,.45); }
.sec__cta--in{ grid-column:2; }
.svc{ margin-top:clamp(26px, 4vh, 44px); }
.svc__row{
  display:grid; grid-template-columns:auto minmax(0, .55fr) minmax(0, 1fr) auto;
  gap:clamp(14px, 2.6vw, 44px); align-items:center;
  padding:clamp(18px, 3vh, 28px) 0; border-top:1px solid var(--line-w);
}
.svc__no{
  width:34px; height:34px; border-radius:50%; background:var(--lime); color:var(--lime-ink);
  display:inline-flex; align-items:center; justify-content:center; font-weight:500;
}
.svc__t{ font-size:clamp(19px, 1.9vw, 26px); font-weight:600; }
.svc__mid p{ color:rgba(255,255,255,.72); font-size:14px; max-width:46ch; }
.svc__chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.svc__chips span{
  background:rgba(255,255,255,.1); border-radius:999px; padding:6px 13px;
  font-size:11px; color:rgba(255,255,255,.75);
}
.svc__thumb{
  width:clamp(90px, 9.5vw, 140px); aspect-ratio:4/3; border-radius:var(--r-sm); overflow:hidden;
  transition:transform var(--dur) var(--ease);
}
.svc__row:hover .svc__thumb{ transform:scale(1.05) rotate(-1.5deg); }
/* real photography, numbered to match the rows: 01 websites … 05 systems.
   Every subject sits centred in frame, so a plain centre crop is enough. */
.svc__thumb--a{ background:url("../assets/svc-websites.jpg")  center/cover no-repeat, #15160F; }
.svc__thumb--b{ background:url("../assets/svc-branding.jpg")  center/cover no-repeat, #3F4348; }
.svc__thumb--c{ background:url("../assets/svc-seo.jpg")       center/cover no-repeat, #6FBF00; }
.svc__thumb--d{ background:url("../assets/svc-marketing.jpg") center/cover no-repeat, #1E201A; }
.svc__thumb--e{ background:url("../assets/svc-systems.jpg")   center/cover no-repeat, #121410; }

/* ============================================================
   GALLERY
   ============================================================ */
.gal{
  display:grid; grid-template-columns:1fr 1.06fr 1fr; gap:clamp(14px, 2vw, 24px);
  margin-top:clamp(24px, 4vh, 40px); align-items:start;
}
.gal__col{ display:flex; flex-direction:column; gap:clamp(14px, 2vw, 24px); }
.gal__col--mid{ margin-top:clamp(14px, 2.4vw, 30px); }
.gal__card{ padding:12px; }
.gal__k{
  display:flex; align-items:center; gap:9px; padding:4px 4px 12px;
  font-weight:600; font-size:14px;
}
.gal__k i{ margin-left:auto; color:var(--grey-aa); font-size:9.5px; }
.gal__k--c{ justify-content:center; gap:10px; }
.gal__media{
  position:relative; overflow:hidden;
  border-radius:var(--r-sm); aspect-ratio:16/11;
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; background-color:#22241F;
}
.gal__media--tall{ aspect-ratio:3/3.6; }
.gal__media--sage { background-image:url("../assets/gal-brand.jpg"); }
.gal__media--ink  { background-image:url("../assets/gal-ui.jpg"); }
.gal__media--steel{ background-image:url("../assets/gal-portfolio.jpg"); }
.gal__media--lime { background-image:url("../assets/gal-showcase.jpg"); }
.gal__media--dusk { background-image:url("../assets/gal-experimental.jpg"); }

/* DA Portfolio card — SHINE2U screen recording darkened behind the mark.
   The clip is portrait 9:16 and the card is 3:3.6, so only ~67% of the video
   height fits. The source has burned-in social captions at 5.9-8.3%,
   76.2-77.5% and 85.5-99.4%, leaving a clean band of 67.9% — almost exactly
   the window, with no room for error. Sizing the video 112% and centring it
   shrinks the window to ~60% and lands it at 12-72%, clear of every caption
   by ~3.8% top and bottom. */
.gal__vid{
  position:absolute; top:50%; left:50%;
  width:112%; height:112%;
  transform:translate(-50%, -50%);
  object-fit:cover; object-position:center 26%;
  z-index:0; pointer-events:none;
}
.gal__media--tall::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,8,8,.58), rgba(8,8,8,.72));
}
.gal__media--tall .proj__mark{
  position:relative; z-index:2; height:clamp(40px, 4.4vw, 62px);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.gal__cap{ padding:12px 6px 6px; color:var(--grey-2); font-size:13px; max-width:34ch; }

/* ============================================================
   FAQ
   ============================================================ */
.faq__grid{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(20px, 3.4vw, 60px); align-items:start; }
.faq__left{ display:flex; flex-direction:column; gap:16px; }
/* Editing-desk photo behind the mark.
   Landscape 16:9 going into a 0.88 portrait card. Scaling to 120% of the card
   height crops top and bottom (the blown-out window sits in the top rows), and
   84% across lands the window at x 49-91%, y 10-93%: the laptop screen with
   its colour wheels, preview and timeline. */
.faq__media{
  position:relative; overflow:hidden;
  width:min(300px, 80%); aspect-ratio:3/3.4; border-radius:var(--r); margin-top:auto;
  background:url("../assets/faq-desk.jpg") 84% 60% / auto 120% no-repeat, #22241F;
  display:flex; align-items:center; justify-content:center;
}
/* This shot averages ~174/255 across every crop, far brighter than a photo
   this card usually carries, so the overlay is weighted harder than a normal
   scrim to bring it back to the dark surface the mark needs. */
.faq__media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 70% at 68% 22%, rgba(152,254,0,.18), transparent 62%),
    linear-gradient(165deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.86) 55%, rgba(8,8,8,.91) 100%);
}
.faq__media img{
  position:relative; z-index:1; height:44px; width:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.faq__list{ display:flex; flex-direction:column; gap:12px; }
.qa{
  background:var(--card); border-radius:var(--r-sm); box-shadow:var(--sh);
  padding:4px 18px;
}
.qa summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:15px 0; font-weight:600; font-size:15px;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa__ic{ position:relative; width:14px; height:14px; flex-shrink:0; }
.qa__ic::before, .qa__ic::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--ink);
  transition:transform var(--dur) var(--ease);
}
.qa__ic::before{ width:14px; height:1.6px; }
.qa__ic::after{ width:1.6px; height:14px; }
.qa[open] .qa__ic::after{ transform:rotate(90deg); }
.qa p{ color:var(--grey-2); font-size:14px; padding:0 0 16px; max-width:60ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.ft{
  margin-top:clamp(60px, 10vh, 120px);
  background:#0A0A0A; color:#F2F2F0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:clamp(10px, 2vh, 24px) var(--pad) 22px; overflow:hidden;
}
.ft > *{ max-width:var(--maxw); margin-inline:auto; }
/* oversized wordmark strip — runs edge to edge and is clipped top, bottom and sides */
.ft__band{
  max-width:none;                                  /* break out of the footer's max-width */
  margin-inline:calc(-1 * var(--pad));
  margin-top:clamp(18px, 3vh, 34px);
  margin-bottom:calc(-1 * clamp(10px, 2vh, 22px)); /* let it run off the bottom of the page */
  height:clamp(62px, 12.4vw, 200px);               /* shorter than the type: crops the letterforms */
  overflow:hidden;
  display:flex; align-items:center;
}
.ft__band span{
  flex:0 0 auto; white-space:nowrap;
  font-weight:700; letter-spacing:-.03em; line-height:1;
  font-size:clamp(86px, 17vw, 275px);   /* band height tracks this at ~0.73 to keep the crop */
  color:rgba(242,242,240,.3);
  animation:ftband 34s linear infinite;
}
@keyframes ftband{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){
  .ft__band span{ animation:none; transform:translateX(-14%); }
}
.label--light{ color:#fff; }
/* brand mark, sits in the clear space above the divider.
   the wrapper takes the .ft > * centred column so the mark lines up with the
   copy below it; the link itself stays tight around the logo. */
.ft__top{ padding-top:clamp(6px, 1.4vh, 16px); }
.ft__logo{ display:inline-block; transition:opacity var(--dur) var(--ease); }
.ft__logo img{ height:clamp(30px, 3.2vw, 40px); width:auto; display:block; }
@media (hover:hover){
  .ft__logo:hover{ opacity:.62; }
}
.ft__grid{
  display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .5fr) minmax(0, .8fr);
  gap:clamp(24px, 4vw, 70px);
  padding:clamp(30px, 5vh, 56px) 0; border-top:1px solid var(--line-w); margin-top:clamp(26px, 4vh, 48px);
}
.ft__h{ font-size:clamp(20px, 2vw, 30px); font-weight:600; max-width:18ch; margin-top:12px; }
.ft__form{
  display:flex; align-items:center; gap:8px; margin-top:20px;
  background:rgba(255,255,255,.07); border:1px solid var(--line-w); border-radius:999px;
  padding:6px 6px 6px 20px; max-width:380px;
}
.ft__form input{ flex:1; background:none; border:0; outline:none; color:#fff; min-width:0; }
.ft__form input::placeholder{ color:rgba(255,255,255,.4); }
.ft__form .chip{ border:0; cursor:pointer; }
.ft__form .chip:hover{ transform:translate(2px,-2px); }
.ft__fine{ color:rgba(255,255,255,.4); margin-top:12px; letter-spacing:.06em; }
.ft__col{ display:flex; flex-direction:column; gap:9px; font-size:14.5px; }
.ft__k{ color:rgba(255,255,255,.45); margin-bottom:8px; }
.ft__col a{ width:fit-content; transition:color var(--dur) var(--ease); }
.ft__col a:hover{ color:var(--lime); }
.ft__mail{ overflow-wrap:anywhere; }
.ft__col p{ color:rgba(255,255,255,.65); }
.ft__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  /* .4 white on this near-black measured 3.77:1, under AA for small text */
  border-top:1px solid var(--line-w); padding-top:18px; color:rgba(255,255,255,.56);
}
.ft__base a{ color:rgba(255,255,255,.72); transition:color var(--dur) var(--ease); }
.ft__base a:hover{ color:var(--lime); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hd__nav{ position:static; transform:none; }
  .svc__row{ grid-template-columns:auto 1fr auto; }
  .svc__mid{ grid-column:1 / -1; grid-row:2; }
  .gal{ grid-template-columns:1fr 1fr; }
  .gal__col--mid{ grid-column:1 / -1; grid-row:2; margin-top:0; }
  .proof__big{ grid-column:1 / 4; }
  .proof__media{ grid-column:4 / 7; grid-row:1 / 3; }
  .proof__sm--a{ grid-column:1 / 3; }
  .proof__sm--b{ grid-column:3 / 4; }
}
@media (max-width:1024px){
  /* the inline links go, so the burger and the full screen menu take over */
  .hnav__links{ display:none; }
  .snav__links{ display:none; }
  /* links are gone from both navs, so the burger takes over in both */
  .hnav__cta .burger{ display:block; width:38px; height:38px; }
  .snav__cta .burger{ display:block; }
  .glass{ max-width:270px; }
}
@media (max-width:520px){
  .snav{ padding-left:15px; gap:10px; }
  .snav__demo{ display:none; }        /* the menu carries it at this width */
}
@media (max-width:760px){
  .sec__head{ grid-template-columns:1fr; }
  .sec__sub{ grid-column:1; }
  .sec__cta--in{ grid-column:1; }
  .projgrid{ grid-template-columns:1fr; }
  .socials{ grid-template-columns:1fr 1fr; }
  .hero__meta{ flex-direction:column; }
  .hero__aside{ align-self:flex-end; }
  .glass{ display:none; }
  /* a touch smaller, and with room beneath it: the longer headline runs to
     three lines on a narrow screen and must not crowd the chips */
  .hero__title{ font-size:clamp(29px, 8.2vw, 46px); margin-bottom:clamp(14px, 3vh, 26px); }
  .hero__foot{ flex-direction:column; align-items:flex-start; }
  .hero__consult{ align-items:flex-start; text-align:left; }
  .hnav__cta .hpill--ghost{ display:none; }
  .proof__big{ grid-column:1 / -1; }
  .proof__media{ grid-column:1 / -1; grid-row:auto; min-height:240px; }
  .proof__sm--a, .proof__sm--b{ grid-column:1 / -1; }
  .svc__row{ grid-template-columns:auto 1fr; }
  .svc__thumb{ display:none; }
  .gal{ grid-template-columns:1fr; }
  .faq__grid{ grid-template-columns:1fr; }
  .faq__media{ display:none; }
  .ft__grid{ grid-template-columns:1fr; gap:26px; }
}