/* ============================================================
   FONT — Aeonik Regular (client-supplied, subset, inlined)
   ============================================================ */
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* light theme — Apple-style: pure white, soft grey surfaces, graphite text */
  --bg:        #FFFFFF;
  --fg:        #1D1D1F;
  --muted:     #6E6E73;
  --faint:     #A1A1A6;
  --line:      rgba(0, 0, 0, 0.10);
  --line-soft: rgba(0, 0, 0, 0.05);
  --surface:   #F5F5F7;
  --surface-2: #E8E8ED;
  --inv-bg:    #1D1D1F;
  --inv-fg:    #FFFFFF;
  --glass:     rgba(255, 255, 255, 0.72);
  --glass-line: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  --grain-op:  0.025;
  --sun-op:    1;
  --moon-op:   0;

  --gutter: clamp(18px, 4.2vw, 68px);
  --maxw: 1680px;

  --fs-hero:  clamp(2.85rem, 10.6vw, 10.5rem);
  --fs-h2:    clamp(2.1rem, 6.4vw, 5.75rem);
  --fs-h3:    clamp(1.4rem, 2.9vw, 2.4rem);
  --fs-lead:  clamp(1.02rem, 1.5vw, 1.35rem);
  --fs-body:  clamp(0.95rem, 1.02vw, 1.0625rem);
  --fs-label: 0.6875rem;

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io:  cubic-bezier(0.65, 0, 0.35, 1);

  /* home-page section auras (see HOME AURAS at the end of this file) */
  --au-char:   #EAE7DF;
  --au-navy:   #BFD3E2;
  --au-teal:   #A9CBD9;
  --au-orange: #FFB08A;
  --au-peach:  #FFD9B8;
  --au-op:     .5;
  --au-scrim:  rgba(255, 255, 255, .6);

  /* liquid glass (see LIQUID GLASS at the end of this file) */
  --lg-tint:   rgba(255, 255, 255, .45);
  --lg-tint-2: rgba(255, 255, 255, .65);
  --lg-edge:   rgba(0, 0, 0, .08);
  --lg-hi:     rgba(255, 255, 255, .95);
  --lg-lo:     rgba(0, 0, 0, .06);
  --lg-shadow: 0 10px 30px -14px rgba(0, 0, 0, .18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0B0B0A;
    --fg:        #FCFBF4;
    --muted:     #8C8C84;
    --faint:     #5C5C55;
    --line:      rgba(252, 251, 244, 0.16);
    --line-soft: rgba(252, 251, 244, 0.08);
    --surface:   #151513;
    --surface-2: #201F1C;
    --inv-bg:    #FCFBF4;
    --inv-fg:    #0B0B0A;
    --glass:     rgba(17, 17, 15, 0.66);
    --glass-line: rgba(252, 251, 244, 0.12);
    --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    --grain-op:  0.07;
    --sun-op:    0;
    --moon-op:   1;
    --au-char:   #2F2F2E;
    --au-navy:   #16405C;
    --au-teal:   #2C6A8A;
    --au-orange: #FF5A14;
    --au-peach:  #F6A15E;
    --au-op:     1;
    --au-scrim:  rgba(11, 11, 10, .55);
    --lg-tint:   rgba(255, 255, 255, .06);
    --lg-tint-2: rgba(255, 255, 255, .11);
    --lg-edge:   rgba(255, 255, 255, .14);
    --lg-hi:     rgba(255, 255, 255, .22);
    --lg-lo:     rgba(0, 0, 0, .35);
    --lg-shadow: 0 12px 34px -14px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --bg:        #0B0B0A;
  --fg:        #FCFBF4;
  --muted:     #8C8C84;
  --faint:     #5C5C55;
  --line:      rgba(252, 251, 244, 0.16);
  --line-soft: rgba(252, 251, 244, 0.08);
  --surface:   #151513;
  --surface-2: #201F1C;
  --inv-bg:    #FCFBF4;
  --inv-fg:    #0B0B0A;
  --glass:     rgba(17, 17, 15, 0.66);
  --glass-line: rgba(252, 251, 244, 0.12);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  --grain-op:  0.07;
  --sun-op:    0;
  --moon-op:   1;
  --au-char:   #2F2F2E;
  --au-navy:   #16405C;
  --au-teal:   #2C6A8A;
  --au-orange: #FF5A14;
  --au-peach:  #F6A15E;
  --au-op:     1;
  --au-scrim:  rgba(11, 11, 10, .55);
  --lg-tint:   rgba(255, 255, 255, .06);
  --lg-tint-2: rgba(255, 255, 255, .11);
  --lg-edge:   rgba(255, 255, 255, .14);
  --lg-hi:     rgba(255, 255, 255, .22);
  --lg-lo:     rgba(0, 0, 0, .35);
  --lg-shadow: 0 12px 34px -14px rgba(0, 0, 0, .6);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* width lock: the page only scrolls vertically. clip (unlike hidden) doesn't
   turn body into a scroll container, so position: sticky keeps working */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}
/* a vertical swipe can't drift sideways; pinch zoom stays allowed */
@media (pointer: coarse) {
  body { touch-action: pan-y pinch-zoom; }
}
/* main + footer are screen-wide, so clipping them on x contains every aura,
   glow, shape and offset without changing the look (clip keeps sticky) */
main, .foot { overflow-x: clip; }
/* above --maxw a .wrap main (legal pages, 404) is narrower than the screen
   and its 100vw aura has to reach the screen edges */
@media (min-width: 1681px) {
  main.wrap { overflow-x: visible; }
}
/* no overflow: clip (iOS < 16): hide overflow on the containers that hold no
   sticky element. Left out on purpose: .svc-blocks and .pf-stack (divs, not
   matched), the contact page's only section (:only-child) and the legal
   main.wrap (sticky TOC). overflow: hidden, not overflow-x: hidden — that
   would turn overflow-y into auto and could trap touch scrolling. */
@supports not (overflow: clip) {
  @media (max-width: 1680px) {
    main > section:not(:only-child),
    main > .hero-intro,
    .foot { overflow: hidden; }
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Aeonik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.55s var(--e-io), color 0.55s var(--e-io);
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

.eyebrow {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.display {
  font-size: var(--fs-hero);
  line-height: 0.9;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--muted);
  max-width: 34ch;
}

/* ============================================================
   ATMOSPHERE — grain + hairline grid
   ============================================================ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--grain-op);
  --gx: 0%;
  --gy: 0%;
}
.grain::before {
  content: "";
  position: absolute;
  inset: -150%;
  transform: translate3d(var(--gx), var(--gy), 0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
}

.rule-grid {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.rule-grid span {
  border-right: 1px solid var(--line-soft);
  position: relative;
}
.rule-grid span:last-child { border-right: 0; }
.rule-grid span::after {
  content: "+";
  position: absolute;
  top: 14px;
  right: -6px;
  font-size: 13px;
  line-height: 1;
  color: var(--line);
}
.rule-grid span:last-child::after { display: none; }
@media (max-width: 760px) { .rule-grid { display: none; } }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
}
#preloader .pl-mark {
  font-size: clamp(1.6rem, 5vw, 3.2rem);
  letter-spacing: -0.04em;
  line-height: 1;
  overflow: hidden;
}
#preloader .pl-mark span { display: inline-block; }
/* tagline under the mark: inside the same span, so it rises with it */
#preloader .pl-mark .pl-tag {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-label);
  line-height: 1.3;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
#preloader .pl-count {
  font-size: clamp(3.5rem, 16vw, 13rem);
  letter-spacing: -0.06em;
  line-height: 0.8;
  font-variant-numeric: tabular-nums;
}
#preloader .pl-bar {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px) + 5.5rem);
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}
#preloader .pl-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding-top: env(safe-area-inset-top, 0px);
  will-change: transform;
}
@media (pointer: coarse) {
  .nav { will-change: auto; }
}
/* touch phones/tablets: keep the whole header on screen while the mobile
   address bar slides in and out, with a small gap under the status bar */
@media (pointer: coarse) and (max-width: 1024px) {
  .nav {
    top: max(12px, env(safe-area-inset-top, 0px));
    padding-top: 0;
  }
}
.nav-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(16px, 2vw, 28px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}
.logo b { font-weight: 400; }
.logo em {
  font-style: normal;
  color: var(--muted);
}
.nav-actions { display: flex; align-items: center; gap: clamp(6px, 0.9vw, 11px); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  height: clamp(38px, 3.6vw, 46px);
  padding-inline: clamp(14px, 1.5vw, 22px);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  white-space: nowrap;
  transition: background-color 0.4s var(--e-out), color 0.4s var(--e-out), border-color 0.4s var(--e-out);
}
.pill:hover { background: var(--surface-2); }
.pill--solid {
  background: var(--inv-bg);
  color: var(--inv-fg);
  border-color: transparent;
}
.pill--solid:hover { background: var(--inv-bg); opacity: 0.86; }
.pill--icon {
  width: clamp(38px, 3.6vw, 46px);
  padding: 0;
  justify-content: center;
}

.theme-ico { width: 16px; height: 16px; overflow: visible; }
.theme-ico .sun { opacity: var(--sun-op); transition: opacity 0.4s var(--e-io); }
.theme-ico .moon { opacity: var(--moon-op); transition: opacity 0.4s var(--e-io); }
.theme-ico .sun circle { fill: currentColor; }
.theme-ico .sun line { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.theme-ico .moon path { fill: currentColor; }

/* MENU OVERLAY */
.menu {
  position: fixed;
  inset: 0;
  z-index: 480;
  background: var(--inv-bg);
  color: var(--inv-fg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--gutter) + 70px) var(--gutter) var(--gutter);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}
.menu[data-open="true"] { visibility: visible; }

.menu.is-css-anim {
  transition: clip-path 0.65s var(--e-io), visibility 0s linear 0.65s;
}
.menu.is-css-anim[data-open="true"] {
  transition: clip-path 0.75s var(--e-io), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .menu.is-css-anim,
  .menu.is-css-anim[data-open="true"] { transition: none; }
}
.menu nav { display: flex; flex-direction: column; gap: clamp(2px, 0.6vw, 8px); }
.menu a {
  font-size: clamp(2.2rem, 8.5vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  opacity: 0.55;
  transition: opacity 0.4s var(--e-out);
}
.menu a:hover { opacity: 1; }
.menu a i {
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
}
.menu-foot {
  margin-top: clamp(28px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid rgba(252,251,244,0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  opacity: 0.6;
}
/* social links in the menu footer: small like the rest of that row, not
   the big page-link style from .menu a */
.menu-foot a {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  opacity: 1;
}
.menu-foot a:hover { opacity: 0.6; }
/* tagline: its own line above the email + socials */
.menu-foot .menu-tag { flex-basis: 100%; }
:root[data-theme="dark"] .menu-foot,
:root:not([data-theme="light"]) .menu-foot { border-top-color: rgba(0,0,0,0.16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .menu-foot { border-top-color: rgba(0,0,0,0.16); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(140px, 20vh, 260px);
  padding-bottom: clamp(28px, 4vw, 54px);
  z-index: 2;
}
/* Opening image is ordinary content without motion support. JS enables
   the pinned overlay only after its animation is ready. */
.hero-intro { position: relative; z-index: 2; }
.hero-intro-glow {
  position: absolute;
  inset: 0 0 auto;
  height: 100svh;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  pointer-events: none;
}
.hero-intro.is-live > .hero-intro-glow { height: 100%; z-index: 3; }
.hero-intro-image {
  --hero-intro-ink: #0D0D0C;
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.hero-intro-art { width: 100%; height: 100%; }
.hero-intro-art > picture { display: block; width: 100%; height: 100%; }
.hero-intro-art > picture > img { width: 100%; height: 100%; object-fit: cover; }
.hero-intro-mobile-decor { display: none; }
.hero-intro-copy {
  position: absolute;
  inset: 0;
  padding: clamp(22px, 3vw, 48px) var(--gutter);
  color: var(--hero-intro-ink);
  pointer-events: none;
}
.hero-intro-title {
  position: absolute;
  top: clamp(168px, 24vh, 228px);
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
}
.hero-intro-title > span {
  display: block;
  margin-bottom: .35em;
  font-size: clamp(.72rem, 1.2vw, 1rem);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-intro-title > strong {
  display: block;
  font-size: clamp(3.75rem, 6.4vw, 7.5rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.052em;
}
.hero-intro-focus {
  position: absolute;
  top: 60%;
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: clamp(1rem, 2.1vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}
/* 4-point sparkles between the focus words: slow shine, the two half a cycle apart */
.hero-intro-star {
  flex: none;
  width: .72em;
  height: .72em;
  fill: currentColor;
  animation: hero-star-shine 2.4s ease-in-out infinite;
}
.hero-intro-star ~ .hero-intro-star { animation-delay: -1.2s; }
@keyframes hero-star-shine {
  0%, 100% { transform: scale(.85) rotate(0deg); opacity: .7; }
  50% { transform: scale(1) rotate(20deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-intro-star { animation: none; }
}
html.perf-lite .hero-intro-star { animation: none; }
.hero-intro-cue {
  position: absolute;
  bottom: max(30px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  color: var(--hero-intro-ink);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .14em;
  white-space: nowrap;
}
.hero-intro-cue:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 640px) {
  .hero-intro-glow { background-image: url(../img/hero-intro-mobile-base.webp) !important; }
  .hero-intro-image { background: #FCFBF4; }
  .hero-intro-art {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(92vw, 42.5svh);
    height: auto;
    aspect-ratio: 1125 / 2436;
    transform: translate(-50%, -50%);
  }
  .hero-intro-art > picture > img { object-fit: contain; }
  .hero-intro-mobile-decor {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }
  .hero-decor {
    position: absolute;
    display: block;
    height: auto;
    object-fit: contain;
  }
  .hero-decor--wireframe { top: max(220px, 30%); left: 3%; width: 20%; }
  .hero-decor--swatches { top: max(300px, 42%); left: -1%; width: 14%; }
  .hero-decor--tools { top: max(340px, 52%); left: 3%; width: 12%; }
  .hero-decor--bag { top: max(220px, 30%); right: 2%; width: 24%; }
  .hero-decor--cart { top: max(300px, 42%); right: 3%; width: 22%; }
  .hero-decor--note { top: max(380px, 52%); right: 1%; width: 22%; }
  .hero-decor--cursor { top: max(410px, 62%); right: 4%; width: 12%; }
  .hero-intro-copy { z-index: 2; padding-top: 24px; }
  .hero-intro-cue { z-index: 2; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .hero-intro-title { top: clamp(172px, 24vh, 210px); }
  .hero-intro-title > strong { font-size: clamp(2.5rem, 11vw, 4rem); }
  .hero-intro-focus {
    top: 74px;
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: .58rem;
    line-height: 1;
    letter-spacing: .08em;
    white-space: nowrap;
  }
}
/* desktop/tablet: the artwork is shown whole (contain) on the site's own
   white, as large as fits between the focus line and the scroll cue */
@media (min-width: 641px) {
  .hero-intro-image { background: #FCFBF4; }
  /* the pinned overlay used to stretch to the (taller) hero behind it, which
     pushed the artwork, services row and scroll cue below the screen —
     keep it exactly one screen tall */
  html .hero-intro.is-live > .hero-intro-image { bottom: auto; height: 100svh; }
  /* top = focus line top + its 1em line + a gap; bottom = cue (30px + ~41px
     tall) + a 17px gap. The box spans the gutters; contain keeps the image
     whole and centred inside it, so it is limited by height or width */
  .hero-intro-art {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(clamp(168px, 24vh, 228px) + clamp(70px, 8.5vh, 96px) + clamp(.78rem, 1.05vw, 1.05rem) + clamp(24px, 3vh, 36px));
    bottom: 88px;
    width: auto;
    height: auto;
  }
  .hero-intro-art > picture > img { object-fit: contain; object-position: center; }
  .hero-intro-focus {
    top: calc(clamp(168px, 24vh, 228px) + clamp(70px, 8.5vh, 96px));
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .6em;
    font-size: clamp(.78rem, 1.05vw, 1.05rem);
    line-height: 1;
    letter-spacing: .1em;
    white-space: nowrap;
  }
}
.hero-intro.is-live { min-height: 100svh; }
.hero-intro.is-live > .hero { min-height: 100svh; }
.hero-intro.is-live > .hero-intro-image {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 3;
  will-change: clip-path;
  pointer-events: none;
}
.hero-stroke {
  position: absolute;
  top: clamp(90px, 14vh, 190px);
  left: 0; right: 0;
  height: clamp(200px, 38vh, 440px);
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}
.hero-stroke path {
  fill: none;
  stroke: var(--fg);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.32;
}
.hero-stroke path.thick {
  stroke-width: clamp(26px, 4vw, 54px);
  opacity: 0.075;
}
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3.5vw, 44px);
}
.hero h1 { margin-bottom: clamp(26px, 4vw, 52px); }
.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 40px;
  flex-wrap: wrap;
  padding-top: clamp(18px, 2.5vw, 30px);
  border-top: 1px solid var(--line);
}
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.scroll-cue svg { width: 11px; height: 16px; }
.scroll-cue path { stroke: currentColor; stroke-width: 1.4; fill: none; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.hero-actions .cta-btn { margin: 0; }
.hero-actions .hero-work-link {
  height: clamp(58px, 5vw, 72px);
  padding-inline: clamp(24px, 2.2vw, 34px);
  background: transparent;
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  letter-spacing: 0.14em;
}
.hero-actions .hero-work-link:hover { background: var(--surface); }
/* plain arrow, same size as the arrow inside .cta-btn-arw (38% of its circle) */
.hero-work-arw { display: inline-grid; place-items: center; }
.hero-work-arw svg { width: calc(clamp(40px, 3.6vw, 52px) * .38); height: calc(clamp(40px, 3.6vw, 52px) * .38); overflow: visible; }
.hero-work-arw path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .cta-btn { width: 100%; justify-content: space-between; }
  .hero-actions .hero-work-link { justify-content: center; }
}

@media (max-width: 640px) {
  .hero-intro.is-live > .hero,
  .hero {
    justify-content: flex-start;
    padding-top: clamp(250px, 34svh, 300px);
    padding-bottom: 24px;
  }
  .hero-stroke {
    top: clamp(62px, 8svh, 78px);
    left: -12%;
    right: -12%;
    height: clamp(270px, 42svh, 350px);
  }
  .hero-stroke path.thick { stroke-width: 38px; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-block: 1px solid var(--line);
  padding-block: clamp(14px, 1.8vw, 24px);
  overflow: hidden;
  position: relative;
  z-index: 2;
  background: var(--bg);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
  padding-right: clamp(20px, 3vw, 46px);
  font-size: clamp(1.15rem, 2.6vw, 2.35rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* spinning star separator */
.marquee-track span::after {
  content: "\2726";
  flex: none;
  font-family: 'Aeonik', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.55em;
  color: var(--fg);
  -webkit-text-stroke: 0;
  opacity: 0.55;
  animation: mq-spin 7s linear infinite;
}
@keyframes mq-spin { to { transform: rotate(360deg); } }

/* every word in its own face, alternating solid and outline */
.marquee-track span { transition: transform 0.45s var(--e-out); }
.marquee-track span:nth-child(6n+1) { font-family: 'Instrument Serif', serif; font-style: italic; letter-spacing: -0.01em; font-size: clamp(1.35rem, 3vw, 2.7rem); }
.marquee-track span:nth-child(6n+2) { font-family: 'Unbounded', sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(0.95rem, 2.1vw, 1.9rem); color: transparent; -webkit-text-stroke: 1.2px var(--fg); }
.marquee-track span:nth-child(6n+3) { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -0.04em; }
.marquee-track span:nth-child(6n+4) { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; color: transparent; -webkit-text-stroke: 1.1px var(--fg); }
.marquee-track span:nth-child(6n+5) { font-family: 'Syne', sans-serif; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; font-size: clamp(1rem, 2.2vw, 2rem); }
.marquee-track span:nth-child(6n+6) { font-family: 'Aeonik', sans-serif; color: transparent; -webkit-text-stroke: 1.2px var(--fg); }

/* hover: the word lights up in colour and lifts a little */
.marquee:hover .marquee-track span { opacity: 0.45; transition: opacity 0.4s var(--e-out), transform 0.45s var(--e-out); }
.marquee .marquee-track span:hover {
  opacity: 1;
  transform: scale(1.08) rotate(-2deg);
  color: transparent;
  -webkit-text-stroke: 0;
  background: linear-gradient(95deg, #ff5f3c, #ffb23f 30%, #3fd0ff 65%, #9b5cff);
  -webkit-background-clip: text;
  background-clip: text;
}
.marquee .marquee-track span:hover::after { opacity: 0.9; }

/* ============================================================
   SECTION HEAD
   ============================================================ */
.sec {
  padding-block: clamp(80px, 11vw, 190px);
  z-index: 2;
}
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: clamp(38px, 5.5vw, 84px);
}
.sec-head .lead { max-width: 40ch; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc { border-top: 1px solid var(--line); }
.svc-item { border-bottom: 1px solid var(--line); }
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px clamp(24px, 3vw, 56px);
  padding-block: clamp(20px, 2.6vw, 34px);
  cursor: pointer;
  transition: padding-inline 0.55s var(--e-out);
}
.svc-item:hover .svc-row { padding-inline: clamp(6px, 1.2vw, 20px); }
.svc-name {
  font-size: clamp(1.45rem, 3.6vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.svc-desc {
  color: var(--muted);
  max-width: 44ch;
  font-size: var(--fs-body);
}
.svc-plus {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.5s var(--e-out), background-color 0.5s var(--e-out), color 0.5s var(--e-out);
}
.svc-item:hover .svc-plus {
  transform: rotate(135deg);
  background: var(--inv-bg);
  color: var(--inv-fg);
}
.svc-plus svg { width: 12px; height: 12px; }
.svc-plus path { stroke: currentColor; stroke-width: 1.5; }
.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: clamp(18px, 2.4vw, 30px);
}
.svc-tags li {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
}
@media (max-width: 860px) {
  .svc-row { grid-template-columns: 1fr auto; }
  .svc-desc { grid-column: 1 / -1; }
}

/* cursor-following preview */
.svc-preview {
  position: fixed;
  top: 0; left: 0;
  width: clamp(190px, 17vw, 280px);
  aspect-ratio: 4 / 3;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface);
  will-change: transform;
}
.svc-preview > * { position: absolute; inset: 0; opacity: 0; }
@media (pointer: coarse) { .svc-preview { display: none; } }

/* ============================================================
   WORK
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.5vw, 58px) clamp(16px, 2.2vw, 34px);
}
@media (max-width: 720px) { .work-grid { grid-template-columns: minmax(0, 1fr); } }
.work-card { display: block; position: relative; }

.work-glow {
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 16 / 11;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  pointer-events: none;
}
/* single shared control for every ambient glow on the site (work cards,
   about-page founders glow, team photos) — edit blur/saturate/opacity
   here only, every glow reads from this one rule; each glow's own
   position/area stays in its own selector below. */
.work-glow,
.about-gallery-glow,
.team-glow,
.hero-intro-glow,
.contact-glow > img,
.svc-glow,
.Horizontal__media-glow {
  filter: blur(44px) saturate(1.7);
  opacity: 0.42;
}
@media (max-width: 720px) {
  /* smaller cards, so the halo is scaled down with them */
  .work-glow,
  .about-gallery-glow,
  .team-glow,
  .hero-intro-glow,
  .contact-glow > img,
  .svc-glow,
  .Horizontal__media-glow {
    filter: blur(28px) saturate(1.7);
    opacity: 0.36;
  }
}

.work-media {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16 / 11;
  background: var(--surface);
  max-width: 100%;
}
.work-media > .art {
  position: absolute;
  top: -9%; left: 0;
  width: 100%;
  height: 118%;
  max-width: none;
  will-change: transform;
}
.work-media > img.art { object-fit: cover; }

/* this one card holds a fixed graphic-design layout (locked-in text/logo),
   not a photo with breathing room, so it must not get the -9%/118% crop
   the other cards use for the scroll parallax — the whole design has to
   stay on screen */
.work-media--fit > img.art {
  top: 0;
  height: 100%;
  object-fit: contain;
}
/* object-fit:contain leaves letterbox bars, and the base .work-media
   `background: var(--surface)` painted those as a visible grey box around
   the artwork — and the same box showed through while the reveal panels
   were still closed. These cards carry full-bleed artwork of their own, so
   there's nothing for a surface plate to do here. */
.work-media--fit { background: transparent; }

.work-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid var(--line);
  margin-top: clamp(12px, 1.4vw, 18px);
}
.work-title {
  font-size: clamp(1.3rem, 2.4vw, 2.05rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.work-title .arw {
  display: inline-block;
  transform: translateX(-8px);
  opacity: 0;
  transition: transform 0.5s var(--e-out), opacity 0.5s var(--e-out);
}
.work-card:hover .work-title .arw { transform: none; opacity: 1; }
.work-tags {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: right;
}

/* ============================================================
   PROCESS (pinned horizontal on desktop)
   ============================================================ */
.proc-viewport { overflow: hidden; }
.proc-track {
  display: flex;
  gap: clamp(16px, 2vw, 30px);
  width: max-content;
  will-change: transform;
}
.proc-step {
  width: clamp(260px, 30vw, 430px);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(20px, 2.2vw, 34px);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 20px);
  min-height: clamp(280px, 34vw, 420px);
}
.proc-num {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.proc-step h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-top: auto;
  color: var(--fg);
}
.proc-step p { color: var(--fg); }
/* line art sits in the dead space between the copy and the step name — both it
   and the h3 take `margin-top: auto`, so the slack splits evenly between them.
   Left fully drawn here: if the GSAP CDN fails the art still reads, it just
   doesn't animate in. */
.proc-art {
  width: clamp(64px, 7vw, 100px);
  height: auto;
  margin-top: auto;
  color: var(--muted);
  overflow: visible;
  transition: color .45s ease;
}
.proc-step:hover .proc-art { color: var(--fg); }
/* big step number — replaced the line-art icons (fills the same slot) */
.proc-big {
  display: block;
  margin-top: auto;
  font-size: clamp(4.5rem, 8vw, 8rem);
  line-height: .82;
  letter-spacing: -0.065em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color .45s ease;
}
.proc-step:hover .proc-big { color: var(--fg); }
.proc-bar {
  height: 1px;
  background: var(--line);
  position: relative;
  margin-top: clamp(28px, 3.5vw, 48px);
}
.proc-bar i {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  display: block;
}
@media (max-width: 899px) {
  .proc-track {
    width: 100%;
    flex-direction: column;
  }
  .proc-step { width: 100%; min-height: 0; }
  .proc-step h3 { margin-top: 0; }
  .proc-art { margin-top: 0; }
  .proc-big { margin-top: 0; font-size: clamp(3.5rem, 16vw, 5rem); }
}

/* ============================================================
   TOOLKIT (draggable)
   ============================================================ */
.tool-viewport {
  overflow: hidden;
  cursor: grab;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.tool-viewport:active { cursor: grabbing; }
.tool-track {
  display: flex;
  gap: clamp(10px, 1.3vw, 18px);
  width: max-content;
  will-change: transform;
}
.tool {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: clamp(12px, 1.3vw, 18px) clamp(20px, 2.2vw, 32px);
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
  background: var(--surface);
  user-select: none;
}
.tool b {
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  letter-spacing: -0.03em;
}
.tool span {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.drag-hint {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--faint);
  margin-top: clamp(14px, 1.8vw, 22px);
}

/* ============================================================
   CTA
   ============================================================ */
.cta { text-align: center; }
.cta .display { margin-bottom: clamp(26px, 3.5vw, 48px); }
.cta-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: clamp(1.05rem, 2vw, 1.7rem);
  letter-spacing: -0.03em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  transition: border-color 0.4s var(--e-out);
}
.cta-mail:hover { border-bottom-color: var(--fg); }
.cta-meta {
  margin-top: clamp(26px, 3.5vw, 44px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
}

.cta-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: 100%;
  margin: clamp(26px, 3.2vw, 40px) auto 0;
  height: clamp(58px, 5vw, 72px);
  padding: 0 clamp(8px, 0.7vw, 11px) 0 clamp(24px, 2.2vw, 34px);
  border-radius: 999px;
  border: 1px solid var(--inv-bg);
  background: var(--inv-bg);
  color: var(--inv-fg);
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: color 0.45s var(--e-out);
}
.cta-btn-fill {
  position: absolute;
  left: 50%; top: 50%;
  width: 260%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bg);
  transform: translate(-50%, -50%) scale(0);
  z-index: -1;
  pointer-events: none;
}
.cta-btn-label { display: block; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap; }
.cta-btn-roll { display: block; }
.cta-btn-roll > span { display: block; }
.cta-btn-arw {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(40px, 3.6vw, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--inv-fg);
  color: var(--inv-bg);
  transition: background-color 0.45s var(--e-out), color 0.45s var(--e-out);
}
.cta-btn-arw svg { width: 38%; height: 38%; overflow: visible; }
.cta-btn-arw path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cta-btn.is-hover { color: var(--fg); }
.cta-btn.is-hover .cta-btn-arw { background: var(--fg); color: var(--bg); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 5vw, 76px) clamp(24px, 3vw, 40px);
  position: relative;
  z-index: 2;
  background: var(--bg);
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.foot h4, .foot h2 {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 16px;
}
.foot li + li { margin-top: 7px; }
.foot-sub {
  display: flex;
  border-bottom: 1px solid var(--line);
  gap: 10px;
  max-width: 360px;
}
.foot-sub input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  padding: 10px 0;
  font: inherit;
  color: var(--fg);
}
.foot-sub input::placeholder { color: var(--faint); }
.foot-sub button { padding: 10px 4px; }
.foot-sub svg { width: 20px; height: 13px; }
.foot-sub path { stroke: currentColor; stroke-width: 1.4; fill: none; }
.foot-bottom {
  margin-top: clamp(38px, 5vw, 70px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
}
.foot-bottom a { transition: color 0.3s var(--e-out); }
.foot-bottom a:hover { color: var(--fg); }

.legal-page {
  position: relative;
  z-index: 2;
  min-height: 70vh;
  padding-top: clamp(130px, 14vw, 210px);
  padding-bottom: clamp(80px, 10vw, 160px);
}
.legal-title {
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  margin: 28px 0 24px;
}
.legal-dot { color: var(--muted); }
.legal-note { color: var(--muted); }

/* ============================================================
   CURSOR
   ============================================================ */
.cursor, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 9500;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor, .cursor-ring { opacity: 0; }
.cursor { width: 7px; height: 7px; background: #FCFBF4; margin: -3.5px 0 0 -3.5px; }
.cursor-ring {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(252,251,244,0.55);
}
@media (pointer: coarse), (max-width: 760px) {
  .cursor, .cursor-ring { display: none; }
}

/* ============================================================
   REVEAL RESTING STATE — visible by default; JS animates from
   ============================================================ */
.line-mask { display: block; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .cursor, .cursor-ring { display: none; }
}

/* ---------- footer logo ---------- */
.foot-logo { margin-bottom: 16px; }
.foot-logo img {
  display: block;
  width: clamp(150px, 15vw, 205px);
  height: auto;
}
.foot-logo .on-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foot-logo .on-light { display: none; }
  :root:not([data-theme="light"]) .foot-logo .on-dark { display: block; }
}
:root[data-theme="dark"] .foot-logo .on-light { display: none; }
:root[data-theme="dark"] .foot-logo .on-dark { display: block; }
:root[data-theme="light"] .foot-logo .on-light { display: block; }
:root[data-theme="light"] .foot-logo .on-dark { display: none; }

/* ---------- header mark ---------- */
.nav-logo {
  position: relative;
  display: block;
  height: clamp(28px, 3vw, 34px);
  width: clamp(76px, 8vw, 92px);
  transition: width 0.55s var(--e-out);
}
.nav-logo .word,
.nav-logo .mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.nav-logo .mark { opacity: 0; visibility: hidden; }
.nav-logo img { display: block; height: 100%; width: auto; }
.nav-logo .on-dark { display: none; }

/* the menu overlay is the inverse of the page, so flip the mark while it is open */
body:has(#menu[data-open="true"]) .nav-logo .on-light { display: none; }
body:has(#menu[data-open="true"]) .nav-logo .on-dark { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-logo .on-light { display: none; }
  :root:not([data-theme="light"]) .nav-logo .on-dark { display: block; }
  :root:not([data-theme="light"]) body:has(#menu[data-open="true"]) .nav-logo .on-light { display: block; }
  :root:not([data-theme="light"]) body:has(#menu[data-open="true"]) .nav-logo .on-dark { display: none; }
}
:root[data-theme="dark"] .nav-logo .on-light { display: none; }
:root[data-theme="dark"] .nav-logo .on-dark { display: block; }
:root[data-theme="dark"] body:has(#menu[data-open="true"]) .nav-logo .on-light { display: block; }
:root[data-theme="dark"] body:has(#menu[data-open="true"]) .nav-logo .on-dark { display: none; }

:root[data-theme="light"] .nav-logo .on-light { display: block; }
:root[data-theme="light"] .nav-logo .on-dark { display: none; }
:root[data-theme="light"] body:has(#menu[data-open="true"]) .nav-logo .on-light { display: none; }
:root[data-theme="light"] body:has(#menu[data-open="true"]) .nav-logo .on-dark { display: block; }

/* ---------- header: full bar -> glass pill on scroll ---------- */
.nav-inner {
  border: 1px solid transparent;
  border-radius: 999px;
  transition:
    max-width 0.55s var(--e-out),
    padding 0.55s var(--e-out),
    margin-top 0.55s var(--e-out),
    gap 0.55s var(--e-out),
    background-color 0.45s var(--e-out),
    border-color 0.45s var(--e-out),
    box-shadow 0.45s var(--e-out);
}
.nav.is-pill .nav-inner {
  max-width: min(360px, calc(100% - var(--gutter) * 2));
  margin-top: clamp(10px, 1.2vw, 16px);
  padding: 7px 7px 7px 15px;
  gap: 10px;
  background: var(--glass);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}
.nav.is-pill .nav-logo { width: clamp(28px, 3vw, 34px); }
/* no-JS / no-GSAP fallback: swap instantly */
.nav.is-pill .nav-logo .word { opacity: 0; visibility: hidden; }
.nav.is-pill .nav-logo .mark { opacity: 1; visibility: visible; }

/* the menu overlay is its own surface — drop the glass while it is open */
body:has(#menu[data-open="true"]) .nav-inner {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 560px) {
  .nav.is-pill .nav-inner { max-width: calc(100% - var(--gutter) * 2); }
}
@media (max-width: 720px) {
  .nav.is-pill .nav-inner { max-width: calc(100% - var(--gutter) * 2); }
  .nav.is-pill .nav-logo { width: clamp(76px, 8vw, 92px); }
  .nav.is-pill .nav-logo .word { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .nav.is-pill .nav-logo .mark { opacity: 0 !important; visibility: hidden !important; }
  /* phones: the scrolled pill keeps the top bar's height */
  .nav.is-pill .nav-inner { padding-block: clamp(16px, 2vw, 28px); }
}
/* very small phones (down to 320px): shrink slightly instead of wrapping */
@media (max-width: 400px) {
  .nav.is-pill .nav-inner { padding: clamp(16px, 2vw, 28px) 5px clamp(16px, 2vw, 28px) 11px; gap: 7px; }
  .nav.is-pill .nav-logo { width: 72px; height: 28px; }
  .nav.is-pill .nav-actions { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-inner, .nav-logo { transition: none; }
}

/* ---------- pinned horizontal line ---------- */
.Horizontal {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  position: relative;
  z-index: 2;
}
.Horizontal__media-viewport {
  position: absolute;
  top: clamp(82px, 11vh, 130px);
  left: 0;
  right: 0;
}
.Horizontal__media-track {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: clamp(18px, 2.2vw, 38px);
  width: max-content;
  will-change: transform;
}
.Horizontal__media {
  width: clamp(240px, 22vw, 420px);
  aspect-ratio: 16 / 11;
  flex: none;
  margin: 0;
  position: relative;
  overflow: visible;
  will-change: transform;
}
.Horizontal__media-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  will-change: clip-path;
}
.Horizontal__media-glow {
  position: absolute;
  z-index: 0;
  inset: 8%;
  border-radius: 4px;
  background: var(--surface-2) center / cover no-repeat;
  pointer-events: none;
  will-change: transform, opacity;
}
.Horizontal__media-frame > img,
.Horizontal__media-ph {
  width: 100%;
  height: 100%;
}
.Horizontal__media-frame > img { object-fit: cover; }
.Horizontal__media-ph {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.Horizontal__text-viewport {
  position: absolute;
  top: 55%;
  left: 0;
  right: 0;
  overflow: visible;
}
.Horizontal__text {
  width: max-content;
  margin: 0;
  color: var(--fg);
  font-size: clamp(2.6rem, 9vw, 10rem);
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  will-change: transform;
  /* parks the line off the right edge so every character enters from the right */
  padding-left: 100vw;
}
/* rotated glyphs must not be clipped by the generated spans */
.Horizontal__text .word,
.Horizontal__text .char { overflow: visible; }

.Horizontal:not(.is-live) {
  height: auto;
  padding-block: clamp(80px, 11vw, 190px);
  padding-inline: var(--gutter);
}
.Horizontal:not(.is-live) .Horizontal__media-viewport,
.Horizontal:not(.is-live) .Horizontal__text-viewport {
  position: static;
}
.Horizontal:not(.is-live) .Horizontal__media-track {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  margin-bottom: clamp(42px, 7vw, 76px);
}
.Horizontal:not(.is-live) .Horizontal__media { width: auto; }
.Horizontal:not(.is-live) .Horizontal__text {
  width: 100%;
  padding-left: 0;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(2.1rem, 8vw, 5.75rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
}


/* ---------- service preview images ---------- */
#svcPreview > img { object-fit: cover; width: 100%; height: 100%; }


.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;
}

/* reuses .sec-head's flex row (heading left, lead right) instead of the
   old stacked layout — that layout capped the heading at a narrow ch width
   and "Tell us what you're building." wrapped into four cramped lines with
   a big dead gap to its right; here the heading gets the row's full share
   and only the lead is capped, same as every other section on the site */
.contact-head { margin-bottom: 0; }
.contact-head .lead { max-width: 42ch; }

.contact-grid {
  margin-top: clamp(44px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: start;
}

/* ---------- fields ---------- */
.cform-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 5vw, 68px);
}
.cform-group {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 40px);
}
.field { position: relative; border: 0; padding: 0; margin: 0; min-width: 0; }
/* the field's own GSAP scroll-reveal leaves a residual `transform` on every
   sibling field, and `transform` always starts a new stacking context — so
   the next field down paints over this one regardless of any z-index set
   inside it. Lift the whole field above its siblings while its dropdown is
   open, so the open listbox isn't hit-tested behind the field after it. */
.field:has(.select-wrap.is-open) { z-index: 30; }
.field > label,
.field > legend {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 12px;
  padding: 0;
}
.field > label i,
.field > legend i {
  font-style: normal;
  color: var(--faint);
  letter-spacing: 0.13em;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--fg);
  transition: border-color 0.45s var(--e-out);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-bottom-color: var(--fg); }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline: none; }

.field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

/* invalid state: heavier rule + message, no colour shift */
.field.is-invalid input,
.field.is-invalid textarea { border-bottom-color: var(--fg); border-bottom-width: 2px; }
.field-err {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--fg);
  margin-top: 8px;
  min-height: 0;
  display: none;
}
.field.is-invalid .field-err { display: block; }

/* ---------- service pills (checkbox group) ---------- */
.svc-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-check { position: relative; cursor: pointer; }
.pill-check input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  top: 0; left: 0;
  margin: 0;
  cursor: pointer;
}
.pill-check span {
  display: inline-flex;
  align-items: center;
  height: clamp(36px, 3.4vw, 44px);
  padding-inline: clamp(14px, 1.5vw, 20px);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  white-space: nowrap;
  transition: background-color 0.4s var(--e-out), color 0.4s var(--e-out), border-color 0.4s var(--e-out);
}
.pill-check:hover span { background: var(--surface-2); }
.pill-check input:checked + span {
  background: var(--inv-bg);
  color: var(--inv-fg);
  border-color: transparent;
}
.pill-check input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
.field--group.is-invalid .pill-check span { border-color: var(--fg); }

/* ---------- budget + currency ---------- */
.budget-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 16px;
  align-items: end;
}
.select-wrap { position: relative; }
.select-native { position: relative; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: var(--fs-label);
}
.select-native svg {
  position: absolute;
  right: 2px;
  bottom: 16px;
  width: 11px;
  height: 7px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.3;
  pointer-events: none;
}

/* ---------- custom dropdown (JS builds it, native select stays as fallback) ---------- */
.select-wrap.is-enhanced .select-native {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 2px 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--fg);
  text-align: left;
  transition: border-color 0.45s var(--e-out);
}
.dd-btn:hover,
.select-wrap.is-open .dd-btn { border-bottom-color: var(--fg); }
.dd-chev {
  width: 11px;
  height: 7px;
  flex: none;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.3;
}
.dd-list {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 100%;
  z-index: 40;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  box-shadow: var(--glass-shadow);
  display: none;
  transform-origin: 50% 0;
}
.select-wrap.is-open .dd-list { display: block; }
.dd-opt {
  padding: 9px 12px;
  border-radius: 4px;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: background-color 0.28s var(--e-out), color 0.28s var(--e-out);
}
.dd-opt:hover,
.dd-opt.is-active { background: var(--surface); color: var(--fg); }
.dd-opt[aria-selected="true"] { color: var(--fg); }
/* selected is marked with a dot, not a colour — nothing here may use hue */
.dd-opt::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0;
  flex: none;
}
.dd-opt[aria-selected="true"]::after { opacity: 1; }

/* ---------- honeypot: off-screen, never focusable by sight ---------- */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- submit ---------- */
.pill--lg {
  height: clamp(50px, 4.6vw, 62px);
  padding-inline: clamp(24px, 2.4vw, 38px);
}
.cform-foot {
  margin-top: clamp(32px, 4vw, 52px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
}
.cform-note {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--faint);
  max-width: 30ch;
}
.cform.is-sending .pill--lg { opacity: 0.55; pointer-events: none; }

.cform-status {
  margin-top: 22px;
  font-size: var(--fs-body);
  color: var(--muted);
  display: none;
}
.cform-status.is-shown { display: block; }

/* success panel replaces the form body */
.cform-done {
  display: none;
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3vw, 44px);
}
.cform.is-done .cform-rows,
.cform.is-done .cform-foot { display: none; }
.cform.is-done .cform-done { display: block; }
.cform-done h2 {
  font-size: var(--fs-h3);
  letter-spacing: -0.035em;
  margin-bottom: 14px;
}
.cform-done p { color: var(--muted); max-width: 42ch; }

/* ---------- aside: sticky visual + details ----------
   .contact-aside is a plain (tall) grid item. Giving it height:100% makes
   it match the row's used track size — which Grid resolves against the
   taller .cform sibling — so its child .contact-visual has real room to
   travel and stay stuck instead of un-sticking after a couple hundred
   px like a short box would. contact-info sits after the sticky visual in
   normal flow, so it surfaces once the form (and the sticky range) is
   nearly scrolled through. */
.contact-aside { height: 100%; display: flex; flex-direction: column; gap: clamp(12px, 2vw, 26px); }
.contact-visual {
  position: sticky;
  top: clamp(90px, 9vw, 120px);
}
.contact-frame {
  position: relative;
  isolation: isolate;
}
.contact-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: clip-path;
}
.contact-glow > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: opacity .65s var(--e-out);
}
.contact-glow > img:not(.is-active) { opacity: 0; }
.contact-media {
  margin: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
  height: calc(100vh - clamp(140px, 16vw, 210px));
  height: calc(100svh - clamp(140px, 16vw, 210px));
}
/* stacked, not swapped — JS crossfades .is-active via GSAP; this opacity
   pair is also the correct resting state with no JS at all (first slide
   marked is-active in the markup) */
.contact-media > img.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
}
.contact-media > img.art.is-active { opacity: 1; z-index: 1; }

.media-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  transform: translateY(-50%);
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 16px;
  border: 1px solid rgba(252, 251, 244, 0.14);
  background: rgba(17, 17, 15, 0.62);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}
.media-slots { position: relative; min-height: 62px; }
.media-slot {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.media-slot.is-active { opacity: 1; }
.media-slot h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: -0.03em;
  color: #FCFBF4;
  margin-bottom: 6px;
}
.media-slot p { color: rgba(252, 251, 244, 0.68); font-size: var(--fs-label); letter-spacing: 0.02em; }

.media-nums {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(14px, 1.8vw, 20px);
  padding-top: clamp(12px, 1.6vw, 18px);
  border-top: 1px solid rgba(252, 251, 244, 0.14);
}
.media-nums-track {
  position: absolute;
  left: 13px;
  right: 13px;
  top: calc(50% + 9px);
  height: 1px;
  background: rgba(252, 251, 244, 0.22);
  overflow: hidden;
}
.media-nums-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: #FCFBF4;
  transform: scaleX(0);
  transform-origin: 0% 50%;
}
.media-num {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 11, 10, 0.9);
  border: 1px solid rgba(252, 251, 244, 0.22);
  color: rgba(252, 251, 244, 0.55);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.4s var(--e-out), color 0.4s var(--e-out), border-color 0.4s var(--e-out);
}
.media-num.is-active { background: #FCFBF4; border-color: #FCFBF4; color: #0B0B0A; }

/* ---------- mobile-only: contact-info duplicated into the glass card ----------
   Hidden by default (desktop keeps the plain .contact-info list below the
   sticky visual, untouched) — shown instead of it under max-width:899px,
   see that media query below. Kept as a separate element rather than
   moving .contact-info in the DOM so nothing here can affect desktop. */
.media-contact { display: none; }

@media (prefers-reduced-motion: reduce) {
  .media-slot,
  .media-contact li { transition: none; }
}
@media (max-width: 560px) {
  /* stays centred in the image (the base rule's top:50% + translateY(-50%)
     does that) — only the side insets and padding tighten here. `bottom`
     must NOT be set alongside top: both together stretch an absolutely
     positioned box to span the gap between them, which is what left ~90px
     of dead space under the last row and dragged the oversized card up
     off-centre. */
  .media-card { left: 12px; right: 12px; padding: 16px; }
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  padding-left: calc(clamp(16px, 3vw, 28px) + clamp(18px, 2.2vw, 26px));
  margin-top: -20px;
}
.contact-info li { display: flex; flex-direction: column; gap: 8px; }
.contact-info p { color: var(--muted); }
.contact-info a { display: inline-block; width: fit-content; }
.contact-info a:hover { opacity: 0.7; }

/* Desktop only: the visual is sticky while this list continues in normal
   flow. Give the list its own opaque shelf so it cannot paint transparently
   over the still-pinned image/card when it enters the viewport. */
@media (min-width: 900px) {
  .contact-info {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: clamp(20px, 2vw, 30px);
    background: var(--bg);
  }
}

@media (max-width: 899px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-aside { height: auto; order: -1; gap: 0; }
  .contact-visual { position: sticky; top: 70px; z-index: 1; } /* clears the fixed nav (z-index:500) — GSAP's pin uses the matching offset below */

  .cform {
    position: relative;
    z-index: 3;
    background: var(--bg);
    margin-top: calc(-1 * clamp(30px, 5vw, 90px));
    padding-top: clamp(26px, 5vw, 40px);
  }
  /* Extend the form's opaque cover through the mobile side gutters. The
     pinned image glow otherwise remains visible as two coloured strips
     beside the form while it climbs over the image. */
  .cform::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--gutter));
    z-index: -1;
    background: var(--bg);
    pointer-events: none;
  }
  .contact-media { height: calc(100vh - 170px); min-height: 380px; }
  .contact-media { height: calc(100svh - 170px); } /* svh accounts for mobile browser chrome; vh above is the fallback for browsers that don't support it */
  .field-pair { grid-template-columns: minmax(0, 1fr); }

  /* room for the step description under the title — it was display:none
     below 560px before, cut off with no explanation; showing it again
     needs the stacked-slide wrapper tall enough for its two-line copy so
     the number track below doesn't jump between slides. */
  .media-slots { min-height: 80px; }

  .contact-info { display: none; }
  .media-contact {
    display: block;
    position: relative;
    min-height: 48px;
    margin-top: clamp(14px, 1.8vw, 20px);
    padding-top: clamp(12px, 1.6vw, 18px);
    border-top: 1px solid rgba(252, 251, 244, 0.14);
  }
  .media-contact li {
    position: absolute;
    inset: auto 0 auto 0;
    top: clamp(12px, 1.6vw, 18px); /* clears the border-top padding above */
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    will-change: transform, opacity;
  }
  .media-contact li.is-active { opacity: 1; }
  .media-contact .eyebrow { color: rgba(252, 251, 244, 0.55); font-size: 0.6875rem; }
  .media-contact a,
  .media-contact p { color: #FCFBF4; font-size: var(--fs-label); letter-spacing: 0.01em; }
  .media-contact p { color: rgba(252, 251, 244, 0.72); }
  .media-contact a { display: inline-block; width: fit-content; }
  .media-contact a:hover { opacity: 0.7; }
}
@media (max-width: 560px) {
  .budget-row { grid-template-columns: minmax(0, 1fr) 92px; }
}


.about-gallery-wrap {
  position: relative;
  height: 100vh;
  height: 100svh; /* pinned: svh doesn't change when the mobile address bar shows/hides */
  overflow: hidden;
}
/* a fine 12x24 track grid rather than 3x3 cells, so tiles can be placed
   as spans of different sizes with staggered edges instead of a tidy
   noticeboard. Grid stacks anything that shares tracks, in DOM order. */
.gallery {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(24, 1fr);
}
.gallery__item {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.gallery__item picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* full colour, deliberately — the founders gallery is the second
   intentional colour exception on the site (alongside the work-card
   ambient glow, see the WORK section above). Confirmed with the user:
   no grayscale on the founders' portrait OR the collage photography. */
.gallery__item-media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.gallery__item-media--top { object-position: center 30%; }

.gallery__item-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  padding: 12px;
}

/* resting collage (desktop) — this is what Flip measures FROM. Tiles at
   mixed sizes with staggered edges: the founders' photo across the top
   middle, a tall one down each side of it, and a band along the bottom,
   with a couple of deliberate dark slivers left showing between them.

   The founders' tile keeps the highest z-index, which is what leaves it
   standing on top once the Flip stacks every tile into the same box at
   the end of the scroll — so nothing else may be given a z-index above
   5, however the collage is rearranged. */
.gallery__item--2 { grid-column: 1 / 5;   grid-row: 1 / 14; }
.gallery__item--founders { grid-column: 5 / 9; grid-row: 1 / 14; z-index: 5; }
.gallery__item--1 { grid-column: 11 / -1; grid-row: 1 / 14; }
.gallery__item--6 { grid-column: 9 / 12;  grid-row: 3 / 15; }
.gallery__item--4 { grid-column: 1 / 6;   grid-row: 14 / -1; }
.gallery__item--3 { grid-column: 6 / 9;   grid-row: 14 / -1; }
.gallery__item--5 { grid-column: 9 / -1;  grid-row: 15 / -1; }

.gallery--final .gallery__item {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

@media (max-width: 640px) {
  .gallery {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(24, 1fr);
  }
  .gallery__item--1 { grid-column: 1 / 7;   grid-row: 1 / 8; }
  .gallery__item--3 { grid-column: 7 / -1;  grid-row: 1 / 10; }
  .gallery__item--4 { grid-column: 1 / 3;   grid-row: 8 / 19; }
  .gallery__item--5 { grid-column: 11 / -1; grid-row: 10 / 16; }
  .gallery__item--2 { grid-column: 4 / -1;  grid-row: 16 / -1; }
  .gallery__item--6 { grid-column: 1 / 7;   grid-row: 17 / -1; }
  .gallery__item--founders { grid-column: 3 / 11; grid-row: 8 / 17; }
}

.gallery-copy {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.gallery-copy-brand,
.gallery-copy-block,
.gallery-copy-role {
  position: absolute;
  color: #FCFBF4;
}
.gallery-copy-brand {
  top: clamp(96px, 13vh, 132px);
  left: var(--gutter);
  display: flex;
  flex-direction: column;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.gallery-copy-block {
  top: clamp(96px, 13vh, 132px);
  right: var(--gutter);
  max-width: clamp(200px, 22vw, 300px);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: rgba(252, 251, 244, 0.88);
}
.gallery-copy-role {
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
/* left-to-right composition of the current photo: the capped figure sits
   further back/higher in frame (Co. Founder, label sits higher), the
   bearded figure is forward/lower (Founder, label sits lower) — swap
   these two if a different photo or role mapping is used later */
.gallery-copy-role--co { left: 28%; top: 72%; }
.gallery-copy-role--founder { left: 65%; top: 87%; }

@media (max-width: 720px) {
  /* 641–720px still runs the desktop crop, which fills the frame edge to
     edge at this width and leaves the paragraph nowhere to sit — dropped
     rather than shrunk into illegibility. Phones (≤640px) get the
     portrait crop with its empty top, and show it again down there. */
  .gallery-copy-block { display: none; }
  .gallery-copy-brand { font-size: clamp(1.4rem, 6.5vw, 2rem); }
  .gallery-copy-role { font-size: clamp(1.15rem, 6vw, 1.7rem); }
  .gallery-copy-role--co { left: 8%; top: 60%; }
  .gallery-copy-role--founder { left: 44%; top: 78%; }
}

@media (max-width: 640px) {
  /* pin the photo to the bottom of the tile. Phones are not all the same
     shape: on one shorter than the file's own 1125x2436, cover trims
     vertically, and centred trimming would slide the pair downward out
     from under their labels. Anchoring the bottom edge means the trim
     comes off the empty red top instead, where nothing but the brand
     mark lives — and it has its own fixed offset from the top. */
  .gallery__item--founders .gallery__item-media { object-position: center bottom; }

  /* back on, under the brand mark, in the empty red the portrait crop
     leaves above their heads (on desktop it lives top-right instead).
     The offset is derived rather than guessed: the brand's own top, plus
     its two lines at line-height 1.05, plus a gap — so the two stay
     locked together at any width instead of drifting apart as the
     clamped brand size changes. Runs gutter to gutter, which keeps the
     copy to four lines and clear of their heads even on a short phone,
     where cover trims this empty top down. */
  .gallery-copy-block {
    display: block;
    top: calc(clamp(96px, 13vh, 132px) + 2.1 * clamp(1.4rem, 6.5vw, 2rem) + 18px);
    left: var(--gutter);
    right: var(--gutter);
    max-width: none;
    font-size: 0.7rem;
    line-height: 1.55;
  }

  /* measured from the bottom for the same reason — a `top` percentage
     drifts against the subjects the moment cover crops vertically, while
     the photo's bottom edge is now fixed. Each label sits on its own
     person's hoodie, and they step down left-to-right: the capped figure
     is further back and higher in frame, the bearded one forward and
     lower. "Founder" is anchored to the right edge rather than given a
     left offset, so it stays tucked into his side of the frame at any
     phone width. */
  .gallery-copy-role--co { left: 9%; top: auto; bottom: 25%; }
  .gallery-copy-role--founder { left: auto; right: 8%; top: auto; bottom: 10%; }
}

.about-gallery-wrap + .sec {
  position: relative;
  z-index: 0;
}
.about-gallery-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (max-width: 720px) {
  /* blur/opacity for this width come from the shared .work-glow,
     .about-gallery-glow rule above — only this glow's own area shrinks here */
  .about-gallery-glow { height: 110px; }
}

/* ---------- "Our story" body copy ---------- */
.about-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 62ch;
  margin-top: clamp(28px, 3.4vw, 44px);
  color: var(--fg);
  line-height: 1.7;
}

/* ---------- Capabilities (renamed from .mvv-* — same 3-up
   hairline-topped card recipe, now used for the six services on the
   about page instead of the deleted mission/vision/values section) ---------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 58px) clamp(22px, 2.6vw, 40px);
}
@media (max-width: 860px) { .cap-grid { grid-template-columns: minmax(0, 1fr); } }
.cap-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--line);
}
.cap-card .eyebrow { margin-bottom: 2px; }
.cap-card h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.cap-card > p { color: var(--muted); max-width: 36ch; }

.team-founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 40px);
  margin-top: clamp(24px, 3vw, 40px);
}
@media (max-width: 560px) { .team-founders { grid-template-columns: minmax(0, 1fr); } }

.team-pin-area.is-live {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-viewport { overflow: hidden; margin-top: clamp(40px, 5vw, 70px); }
.team-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
}
@media (max-width: 560px) { .team-track { grid-template-columns: minmax(0, 1fr); } }
.team-pin-area.is-live .team-track {
  display: flex;
  width: max-content;
  /* cancel .wrap's max-width/centering (still needed for the resting
     grid's own side gutters via .wrap's padding, kept) — left uncancelled,
     the track's rendered box gets clamped to --maxw and auto-centred
     inside the (wider) viewport, offsetting its resting position by half
     the leftover space. The horizontal scroll distance is calculated
     assuming a zero-offset start, so that offset silently ate into the
     travel and the last card never fully reached the viewport's edge. */
  max-width: none;
  margin-inline: 0;
  gap: clamp(16px, 2vw, 30px);
  will-change: transform;
}

.team-founder-card,
.team-card {
  position: relative;
}
.team-glow {
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  pointer-events: none;
}

.team-founder-card .team-media { aspect-ratio: 3 / 4; }
.team-card .team-media { aspect-ratio: 3 / 4; }
/* fixed card width only applies once the track is the horizontal flex
   strip — in the resting/mobile grid a fixed width would fight the
   grid's own column sizing and leave the card short of its cell */
.team-pin-area.is-live .team-track .team-card {
  width: clamp(220px, 22vw, 300px);
  flex-shrink: 0;
}

.team-media {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
  max-width: 100%;
}
.team-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  padding: 12px;
}
.team-meta {
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid var(--line);
  margin-top: clamp(12px, 1.4vw, 18px);
}
.team-name {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.team-role {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 4px;
}


/* clears the fixed nav — this page opens straight into a heading with no
   full-bleed hero above it */
.svc-hero { padding-top: clamp(120px, 16vh, 200px); }

/* ---------- hero: row of service icons (links to the blocks below) ----------
   Tighter bottom than a normal .sec so the icons sit under the heading and
   the first block's image starts to show before the fold. Phones keep the
   mobile-pass .sec rhythm (44px). */
.svc-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.svc-hero .sec-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.svc-icons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 32px);
}
.svc-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  white-space: nowrap;
  transition: color .35s var(--e-out);
}
.svc-icons img { width: clamp(56px, 5vw, 84px); height: auto; transition: transform .35s var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .svc-icons a:hover { color: var(--fg); }
  .svc-icons a:hover img { transform: translateY(-6px) rotate(-6deg); }
}
.svc-icons a:focus-visible { color: var(--fg); }
.svc-icons a:focus-visible img { transform: translateY(-6px) rotate(-6deg); }
/* perf lite: lift only, no rotation */
html.perf-lite .svc-icons a:hover img,
html.perf-lite .svc-icons a:focus-visible img { transform: translateY(-6px); }
@media (max-width: 720px) {
  .svc-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .svc-icons a { letter-spacing: 0.1em; }
  .svc-icons img { width: 52px; }
}

/* ---------- service block ----------
   Stacking-cards scroll: every block is `position: sticky; top: 0` inside
   .svc-blocks, so each one holds at the top of the screen while the NEXT
   one scrolls up and covers it, like a deck being dealt onto itself.

   Three things make it work and all three are load-bearing:
     - an opaque `background: var(--bg)` — without it you see straight
       through to the block underneath and the whole effect collapses;
     - `min-height: 100dvh`, so each card fills the screen it's holding;
     - `z-index: 2`, which puts the cards above the fixed .rule-grid
       overlay (z-index:1) exactly as `.sec` does. Equal z-index siblings
       still paint in DOM order, so each block covers the one before it.
   The last block never actually sticks — it's already at the end of its
   container — so the sections after it scroll on normally. */
.svc-blocks { position: relative; }
.svc-block {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 100dvh;
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: center;
  align-content: center;
  padding-block: clamp(96px, 12vh, 140px) clamp(40px, 6vh, 80px);
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  border-top: 1px solid var(--line);
  /* keeps the heading clear of the fixed nav when a quick-jump link lands */
  scroll-margin-top: 0;
}
/* even blocks mirror — copy left, visual right. One set of markup, the
   sides are swapped here rather than duplicated in the HTML. */
.svc-block:nth-of-type(even) .svc-visual { order: 2; }
.svc-block:nth-of-type(even) .svc-copy { order: 1; }

/* ---------- the visual: image + line-art accent as one composition ----------
   No `position: sticky` here — the whole block is the sticky element now
   (see above). Nesting a second sticky inside it would fight the stack. */
.svc-visual {
  position: relative;
  display: flex;
  flex-direction: column;
}

.svc-glow {
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 3 / 2;
  max-height: 52dvh;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  pointer-events: none;
}
.svc-shot {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  /* 3:2 matches the source mockups (1536x1024) exactly, so nothing is
     cropped away. If a future image comes in at a different ratio,
     object-fit: cover on the img absorbs it rather than letterboxing. */
  aspect-ratio: 3 / 2;
  /* the card has to fit the one screen it holds, so the shot is capped by
     viewport height as well as by its column width — object-fit on the img
     absorbs the ratio change when the cap is what's binding */
  max-height: 52dvh;
  background: var(--surface);
  transition: transform 0.6s var(--e-out);
}
.svc-shot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The reveal is this panel sliding off the image, NOT a clip-path on
   .svc-shot. That distinction is load-bearing: a fully clipped box counts
   as invisible to Chrome's native lazy-loading, so `clip-path: inset(0 0
   100%)` stopped the <img loading="lazy"> underneath it from ever being
   fetched — the image only started downloading once the reveal had already
   opened, which is exactly backwards. Sliding an opaque panel leaves the
   image unclipped and loading normally the whole time.
   At rest it's scaled to nothing, so with no JS the image is simply
   visible — the site-wide "resting state is already correct" rule. */
.svc-shot-wipe {
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  pointer-events: none;
}
/* the one hover move on this page, deliberately: a small lift on the
   whole shot. No parallax, no per-element motion stacked on top — the
   work has to stay easy to look at. */
.svc-visual:hover .svc-shot { transform: translateY(-6px); }

/* line art sits just under the image, tucked to the outer edge so the two
   read as a single composition rather than a stack. It never overlaps the
   photo — strokes over a photograph stop being legible. */
.svc-art {
  width: clamp(104px, 13vw, 180px);
  height: auto;
  align-self: flex-end;
  margin-top: clamp(12px, 1.6vw, 22px);
  /* --muted, not --faint. .proc-art gets away with --faint because it sits
     on a var(--surface) card; here the art sits directly on the page
     background, where --faint is almost invisible in dark mode. */
  color: var(--muted);
  /* required: the idle loops scale/translate past the viewBox */
  overflow: visible;
  transition: color 0.45s ease;
}
.svc-block:nth-of-type(even) .svc-art { align-self: flex-start; }
.svc-block:hover .svc-art { color: var(--fg); }

/* ---------- the copy column ---------- */
.svc-num {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.svc-heading {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-bottom: clamp(16px, 2vw, 26px);
}
.svc-body {
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.7;
  margin-bottom: clamp(26px, 3.4vw, 44px);
}
.svc-deliv-label { margin-bottom: 16px; }
.svc-deliverables {
  display: flex;
  flex-direction: column;
  max-width: 46ch;
}
.svc-deliverables li {
  padding-block: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-body);
}
.svc-deliverables li:first-child { border-top: 1px solid var(--line-soft); }

@media (max-width: 860px) {
  /* The stack stays ON here — same card-over-card scroll as desktop. That
     only works if a card's content fits the one screen it holds, so this
     block is a compaction pass, not a different layout: the image and the
     line art sit side by side in one row instead of stacked, the type
     steps down, and the deliverables go two-up. Everything below is in
     service of that single constraint. Measured against a ~800px-tall
     phone viewport with the nav clearance included. */
  .svc-block {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: clamp(16px, 3.5vw, 26px);
    padding-block: clamp(84px, 11vh, 104px) clamp(24px, 4vh, 40px);
    padding-inline: var(--gutter);
  }
  /* single column: image always above its copy, whichever side it took */
  .svc-block:nth-of-type(even) .svc-visual,
  .svc-block:nth-of-type(even) .svc-copy { order: 0; }

  /* image + art become one row — this is what buys back the vertical space
     the stack needs, and it reads as a tighter composition anyway */
  .svc-visual {
    flex-direction: row;
    align-items: flex-end;
    gap: clamp(10px, 2.5vw, 16px);
  }
  .svc-shot {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 30dvh;
  }
  /* glow tracks the shot's cap so the halo doesn't outgrow the image */
  .svc-glow { max-height: 30dvh; }
  .svc-art,
  .svc-block:nth-of-type(even) .svc-art {
    flex: none;
    width: clamp(84px, 24vw, 124px);
    margin-top: 0;
    align-self: flex-end;
  }

  .svc-num { margin-bottom: 8px; }
  .svc-heading { margin-bottom: clamp(8px, 2vw, 14px); }
  .svc-body {
    margin-bottom: clamp(14px, 3vw, 22px);
    line-height: 1.55;
  }
  .svc-deliv-label { margin-bottom: 10px; }
  /* two-up: six rows at one-per-line is the single biggest thing that
     pushes a card past the height of the screen it's holding */
  .svc-deliverables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(14px, 3vw, 24px);
    max-width: none;
  }
  .svc-deliverables li { padding-block: 7px; }
  .svc-deliverables li:nth-child(2) { border-top: 1px solid var(--line-soft); }
}

/* Phone widths keep the stack too — it's the same card-over-card scroll as
   desktop, just tighter. Everything here exists to hold a card inside one
   screen at ~390px wide: the shot gives up more height, the type and the
   deliverable rows tighten, and the body copy drops a step. Verified at
   390x844 and 426x856. Do not release the stack to static here — the
   effect is the point of the page. */
@media (max-width: 560px) {
  .svc-block {
    padding-block: clamp(78px, 10.5vh, 96px) clamp(18px, 3vh, 28px);
    gap: clamp(12px, 3vw, 18px);
  }
  .svc-shot,
  .svc-glow { max-height: 26dvh; }
  .svc-art,
  .svc-block:nth-of-type(even) .svc-art { width: clamp(74px, 22vw, 96px); }
  .svc-heading { font-size: clamp(1.55rem, 7.2vw, 2rem); }
  .svc-body {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: clamp(12px, 2.5vw, 16px);
  }
  .svc-deliv-label { margin-bottom: 8px; }
  .svc-deliverables li {
    padding-block: 6px;
    font-size: 0.85rem;
  }
}

.svc-reviews {
  /* above the fixed .rule-grid lines (z-index 1), same as .sec */
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(24px, 3vw, 40px) 0 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.svc-reviews-track {
  display: flex;
  width: max-content;
  animation: svc-marquee 55s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  .svc-reviews:hover .svc-reviews-track { animation-play-state: paused; }
}
.svc-reviews.is-touch-paused .svc-reviews-track { animation-play-state: paused; }
/* trim the big .sec top padding on the CTA that follows the reviews */
.svc-reviews + .cta { padding-top: clamp(50px, 6vw, 100px); }
@keyframes svc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-reviews { overflow-x: auto; }
  .svc-reviews-track { animation: none; }
}
.svc-review {
  flex: 0 0 clamp(280px, 24vw, 400px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 clamp(14px, 1.4vw, 24px) 0 0;
  padding: clamp(22px, 1.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease,
              box-shadow .5s ease, opacity .4s ease;
}
/* hover: the pointed card lifts, the rest of the row dims back
   (real hover devices only, so a tap never leaves a card stuck lifted) */
@media (hover: hover) and (pointer: fine) {
  .svc-reviews:hover .svc-review { opacity: .55; }
  .svc-reviews .svc-review:hover {
    opacity: 1;
    transform: translateY(-8px);
    border-color: var(--fg);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35);
  }
}
/* touch: no tap flash, no text selection on the cards */
@media (hover: none), (pointer: coarse) {
  .svc-review { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
.svc-review blockquote {
  margin: 0;
  font-size: clamp(0.92rem, 0.95vw, 1rem);
  line-height: 1.55;
  color: var(--fg);
}
.svc-review figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.svc-review-avatar {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--line);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) and (pointer: fine) {
  .svc-review:hover .svc-review-avatar { transform: scale(1.08); }
}
.svc-review-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-review-name { display: block; font-size: 0.95rem; letter-spacing: -0.01em; }
.svc-review-role { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 3px; }

/* ---------- client feedback ---------- */
.svc-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  margin-top: clamp(30px, 4vw, 54px);
}
@media (max-width: 860px) { .svc-quotes { grid-template-columns: minmax(0, 1fr); } }
.svc-quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.svc-quote blockquote {
  font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.015em;
}
.svc-quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.svc-quote-name { font-size: var(--fs-body); }
.svc-quote-role {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.svc-quote-ph {
  min-height: clamp(150px, 18vw, 210px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  padding: 12px;
}

/* page transition: new page opens under a panel that wipes up */
html.pt-enter::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: var(--fg);
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  animation: pt-reveal 0.95s cubic-bezier(0.76, 0, 0.24, 1) 0.08s forwards;
}
@keyframes pt-reveal { to { clip-path: inset(0 0 100% 0); } }
.pt-cover {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  background: var(--fg);
  color: var(--bg);
  clip-path: inset(100% 0 0 0);
  pointer-events: all;
  overflow: hidden;
}
.pt-word {
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  letter-spacing: -0.04em;
}
@media (prefers-reduced-motion: reduce) { html.pt-enter::after { display: none; } }

.mm-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9600;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

.mm-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mm-mask.is-open { overflow: visible; }
.mm-word { display: inline-block; will-change: transform; }

.nav .pill--solid:hover { opacity: 1; }
/* header "Let's talk": one look on every page, theme and state (top,
   scrolled pill, menu open) — cream button, thin light stroke, ink text */
.nav .nav-actions .pill--solid,
.nav .nav-actions .pill--solid:hover {
  background: #F9F8F2;
  color: #1D1D1F;
  border: 1px solid rgba(13, 13, 12, 0.12);
  border-radius: 99px;
  opacity: 1;
  visibility: visible;
}
@media (hover: hover) and (pointer: fine) {
  .nav .nav-actions .pill--solid:hover { background: #0D0D0C; color: #FCFBF4; }
}
.nb-label { display: block; height: 1.3em; line-height: 1.3em; overflow: hidden; }
.nb-roll, .nb-roll > span { display: block; }

/* homepage only (its logo links to #top): at the top the header sits on the
   always-cream intro image, so the text logo stays black in both themes */
.nav:not(.is-pill) .nav-logo[href="#top"] .word .on-light { display: block; }
.nav:not(.is-pill) .nav-logo[href="#top"] .word .on-dark { display: none; }

.aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--au-op);
}
.aura::before,
.aura::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero, #services, #work, #horizontal, #process, #studio, .foot { isolation: isolate; }
/* .wrap sections are capped at --maxw; the aura still spans the full
   viewport width so it never stops in a hard vertical edge */
.wrap > .aura {
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
}
.hero > :not(.aura):not(.shape),
#services > :not(.aura):not(.shape),
#work > :not(.aura):not(.shape),
#process > :not(.aura):not(.shape),
#studio > :not(.aura):not(.shape),
.foot > :not(.aura):not(.shape) { position: relative; z-index: 1; }
/* the wave stays absolutely placed, above the aura, under the copy */
.hero > .hero-stroke { position: absolute; z-index: 0; }
/* horizontal keeps its own absolute viewports; only lift them */
#horizontal > .Horizontal__media-viewport,
#horizontal > .Horizontal__text-viewport { z-index: 1; }
.Horizontal:not(.is-live) > .Horizontal__media-viewport,
.Horizontal:not(.is-live) > .Horizontal__text-viewport { position: relative; top: auto; }

/* ---------- HERO: organic blobs ---------- */
.aura--hero {
  --x1: 86%; --y1: 14%; --w1: 44vw; --h1: 30vw;
  --x2: 99%; --y2: 72%; --w2: 18vw; --h2: 14vw;
  --x3: 3%;  --y3: 100%; --w3: 30vw; --h3: 12vw;
  --x4: 58%; --y4: 6%;  --w4: 24vw; --h4: 15vw;
  --x5: 74%; --y5: 42%; --w5: 15vw; --h5: 11vw;
  --x6: 36%; --y6: -4%; --w6: 32vw; --h6: 14vw;
  --dx1: 0px; --dy1: 0px; --dx2: 0px; --dy2: 0px; --dx3: 0px; --dy3: 0px;
  --dx4: 0px; --dy4: 0px; --dx5: 0px; --dy5: 0px; --dx6: 0px; --dy6: 0px;
  --mx: 0px; --my: 0px;
  background:
    radial-gradient(var(--w1) var(--h1) at calc(var(--x1) + var(--dx1) + var(--mx)) calc(var(--y1) + var(--dy1) + var(--my)),
      color-mix(in srgb, var(--au-teal) 46%, transparent),
      color-mix(in srgb, var(--au-navy) 38%, transparent) 42%, transparent 100%),
    radial-gradient(var(--w2) var(--h2) at calc(var(--x2) + var(--dx2) - var(--mx) * .6) calc(var(--y2) + var(--dy2) - var(--my) * .6),
      color-mix(in srgb, var(--au-peach) 42%, transparent),
      color-mix(in srgb, var(--au-orange) 30%, transparent) 38%, transparent 100%),
    radial-gradient(var(--w3) var(--h3) at calc(var(--x3) + var(--dx3) + var(--mx) * .4) calc(var(--y3) + var(--dy3) + var(--my) * .4),
      color-mix(in srgb, var(--au-teal) 20%, transparent), transparent 100%),
    radial-gradient(var(--w4) var(--h4) at calc(var(--x4) + var(--dx4) + var(--mx) * 1.2) calc(var(--y4) + var(--dy4) + var(--my) * 1.2),
      color-mix(in srgb, var(--au-teal) 32%, transparent), transparent 100%),
    radial-gradient(var(--w5) var(--h5) at calc(var(--x5) + var(--dx5) - var(--mx) * .9) calc(var(--y5) + var(--dy5) - var(--my) * .9),
      color-mix(in srgb, var(--au-orange) 20%, transparent),
      color-mix(in srgb, var(--au-peach) 10%, transparent) 45%, transparent 100%),
    radial-gradient(var(--w6) var(--h6) at calc(var(--x6) + var(--dx6) + var(--mx) * .5) calc(var(--y6) + var(--dy6) + var(--my) * .5),
      color-mix(in srgb, var(--au-navy) 30%, transparent), transparent 100%);
}
/* second navy lobe so the top-right blob reads irregular, not round */
.aura--hero::before {
  background: radial-gradient(26vw 16vw at calc(var(--x1) - 14% - var(--dx1) + var(--mx) * .7) calc(var(--y1) + 12% + var(--dy2) + var(--my) * .7),
    color-mix(in srgb, var(--au-navy) 34%, transparent), transparent 100%);
}
/* scrim over the heading / foot band (left and bottom) */
.aura--hero::after {
  background:
    linear-gradient(to top, var(--au-scrim) 0%, var(--au-scrim) 18%, transparent 48%),
    linear-gradient(to right, var(--au-scrim) 0%, transparent 55%);
}

/* ---------- SERVICES: horizon line ---------- */
.aura--services {
  --hx: 50%; --hy: 94%; --hw: 80%; --hh: clamp(160px, 18vw, 320px);
  --ex: 96%; --ey: 94%; --es: clamp(60px, 7vw, 130px);
  background:
    radial-gradient(var(--es) calc(var(--es) * .55) at var(--ex) var(--ey),
      color-mix(in srgb, var(--au-orange) 55%, transparent), transparent 100%),
    radial-gradient(var(--hw) var(--hh) at var(--hx) var(--hy),
      color-mix(in srgb, var(--au-teal) 42%, transparent),
      color-mix(in srgb, var(--au-navy) 32%, transparent) 45%, transparent 100%);
  /* fade out at the section's bottom edge so it melts into Work */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* ---------- FEATURED WORK: stage spotlight ---------- */
.aura--work {
  --sx: 50%; --sy: -6%; --sw: 42%; --sh: 60%;
  --sy: 4%;
  background:
    radial-gradient(var(--sw) var(--sh) at var(--sx) var(--sy),
      color-mix(in srgb, var(--au-peach) 14%, transparent), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%);
}

/* ---------- HORIZONTAL: fluted glass fire ---------- */
.aura--horizontal {
  --fire-h: 38%;
  --rib: 7vw;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--au-orange) 50%, transparent) 0%,
    color-mix(in srgb, var(--au-peach) 22%, transparent) calc(var(--fire-h) * .45),
    transparent var(--fire-h));
}
/* vertical glass ribs, only over the fire band */
.aura--horizontal::before {
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--au-char) 60%, transparent) 0,
    transparent calc(var(--rib) * .2),
    color-mix(in srgb, var(--au-peach) 8%, transparent) calc(var(--rib) * .5),
    transparent calc(var(--rib) * .8),
    color-mix(in srgb, var(--au-char) 60%, transparent) var(--rib));
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 calc(var(--fire-h) * .6), transparent calc(var(--fire-h) + 8%));
          mask-image: linear-gradient(to top, #000 0%, #000 calc(var(--fire-h) * .6), transparent calc(var(--fire-h) + 8%));
}
/* static fallback: the heading sits at the bottom, so keep the fire low */
.Horizontal:not(.is-live) > .aura--horizontal { --fire-h: 16%; }
@media (max-width: 760px) { .aura--horizontal { --rib: 16vw; } }

/* ---------- PROCESS: diagonal beam ---------- */
.aura--process {
  --bx: 102%; --by: -2%; --bw: 14vw; --bh: 9vw;
  background:
    radial-gradient(var(--bw) var(--bh) at var(--bx) var(--by),
      color-mix(in srgb, var(--au-orange) 42%, transparent), transparent 100%),
    linear-gradient(to bottom right, transparent 34%,
      color-mix(in srgb, var(--au-navy) 26%, transparent) 44%,
      color-mix(in srgb, var(--au-teal) 22%, transparent) 50%,
      color-mix(in srgb, var(--au-navy) 26%, transparent) 56%,
      transparent 66%);
}

/* ---------- STUDIO: soft corner glow ---------- */
.aura--studio {
  --nx: 100%; --ny: 30%; --gx: 102%; --gy: 96%; --gs: 30vw;
  background:
    radial-gradient(var(--gs) calc(var(--gs) * .6) at var(--gx) var(--gy),
      color-mix(in srgb, var(--au-orange) 34%, transparent),
      color-mix(in srgb, var(--au-peach) 16%, transparent) 40%, transparent 100%),
    radial-gradient(40vw 34vw at var(--nx) var(--ny),
      color-mix(in srgb, var(--au-navy) 34%, transparent), transparent 100%);
}

/* ---------- FOOTER: split glow ---------- */
.aura--foot {
  --lx: -4%; --rx: 106%; --gy: 60%;
  background:
    radial-gradient(18% 70% at var(--rx) var(--gy),
      color-mix(in srgb, var(--au-orange) 42%, transparent),
      color-mix(in srgb, var(--au-peach) 20%, transparent) 35%, transparent 100%),
    radial-gradient(42% 90% at var(--lx) var(--gy),
      color-mix(in srgb, var(--au-teal) 26%, transparent),
      color-mix(in srgb, var(--au-navy) 22%, transparent) 40%, transparent 100%),
    linear-gradient(90deg, transparent 25%,
      color-mix(in srgb, var(--au-char) 30%, transparent) 50%, transparent 75%);
}

/* ---------- phones: smaller shapes, bright parts pushed clear of the stacked copy ---------- */
@media (max-width: 640px) {
  .aura--hero {
    --x1: 88%; --y1: 4%;  --w1: 70vw; --h1: 34vw;
    --x2: 102%; --y2: 20%; --w2: 30vw; --h2: 18vw;
    --w3: 50vw; --h3: 16vw;
    --x4: 50%; --y4: 2%;  --w4: 40vw; --h4: 16vw;
    --x5: 70%; --y5: 16%; --w5: 24vw; --h5: 12vw;
    --x6: 20%; --y6: -2%; --w6: 50vw; --h6: 14vw;
  }
  .aura--hero::after {
    background: linear-gradient(to top, var(--au-scrim) 0%, var(--au-scrim) 55%, transparent 72%);
  }
  .aura--services { --hw: 110%; --es: 60px; }
  .aura--work { --sw: 80%; --sh: 30%; }
  .aura--process { --bw: 30vw; --bh: 16vw; }
  .aura--studio { --gs: 60vw; }
  .aura--foot { --rx: 112%; --gy: 90%; }
}

.svc-row { border: 1px solid transparent; border-radius: 18px; }

.nav.is-pill .nav-inner,
.hero-actions .hero-work-link,
#studio .tool,
.svc-item:hover .svc-row {
  background: var(--lg-tint);
  border-color: var(--lg-edge);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--lg-hi),
    inset 0 -1px 0 var(--lg-lo),
    var(--lg-shadow);
}
.hero-actions .hero-work-link { border-style: solid; border-width: 1px; }
.hero-actions .hero-work-link:hover { background: var(--lg-tint-2); }
.svc-row { transition: padding-inline 0.55s var(--e-out), background-color 0.45s var(--e-out), border-color 0.45s var(--e-out), box-shadow 0.45s var(--e-out); }

/* Chromium: bend the backdrop through the SVG displacement filter */
.lg-refract .nav.is-pill .nav-inner,
.lg-refract .hero-actions .hero-work-link,
.lg-refract #studio .tool,
.lg-refract .svc-item:hover .svc-row {
  -webkit-backdrop-filter: url(#lgRefract) blur(10px) saturate(170%);
  backdrop-filter: url(#lgRefract) blur(10px) saturate(170%);
}

/* services cursor preview sits in a glass frame (plan step 4) */
.svc-preview {
  border-radius: 18px;
  background: var(--lg-tint);
  border: 1px solid var(--lg-edge);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--lg-hi),
    inset 0 -1px 0 var(--lg-lo),
    var(--lg-shadow);
}
.lg-refract .svc-preview {
  -webkit-backdrop-filter: url(#lgRefract) blur(10px) saturate(170%);
  backdrop-filter: url(#lgRefract) blur(10px) saturate(170%);
}
.svc-preview > * { inset: 8px; border-radius: 11px; }

#process.proc-live .proc-step { transition: border-color .5s var(--e-out); }
#process.proc-live .proc-step .proc-big { opacity: .6; transition: opacity .5s var(--e-out), color .45s ease; }
#process.proc-live .proc-step.is-active { border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
#process.proc-live .proc-step.is-active .proc-big { opacity: 1; }
#process.proc-live .proc-step.is-active .proc-big { color: var(--fg); }

#studio .tool { align-items: center; }
.tool-logo {
  flex: none;
  width: clamp(18px, 1.6vw, 24px);
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.tool-viewport { cursor: default; }
.tool-viewport:active { cursor: default; }
.tool-track.is-marquee {
  gap: 0;
  animation: tool-marquee 38s linear infinite;
}
.tool-track.is-marquee .tool { margin-right: clamp(10px, 1.3vw, 18px); }
.tool-viewport:hover .tool-track.is-marquee { animation-play-state: paused; }
.tool-viewport:has(.is-marquee) {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
@keyframes tool-marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ---------- CTA "Let's Talk" (home only): sunrise ----------
   Warm light rising from below the centred copy, with a cool haze in the
   two top corners. The brightest part sits under the section's bottom
   edge, clear of the heading and email. */
#contact { isolation: isolate; }
#contact > :not(.aura):not(.shape) { position: relative; z-index: 1; }
.aura--cta {
  --sx: 50%; --sy: 112%; --sw: 58%; --sh: 58%;
  --lx: 0%; --rx: 100%; --ny: 0%;
  background:
    radial-gradient(var(--sw) var(--sh) at var(--sx) var(--sy),
      color-mix(in srgb, var(--au-orange) 30%, transparent),
      color-mix(in srgb, var(--au-peach) 16%, transparent) 38%, transparent 100%),
    radial-gradient(34% 50% at var(--lx) var(--ny),
      color-mix(in srgb, var(--au-navy) 32%, transparent), transparent 100%),
    radial-gradient(34% 50% at var(--rx) var(--ny),
      color-mix(in srgb, var(--au-teal) 24%, transparent), transparent 100%);
}
@media (max-width: 640px) {
  .aura--cta { --sw: 110%; --sh: 40%; }
}

/* process cards: frosted glass. Deliberately NO refraction filter here —
   the section is pinned and scrolls sideways, and the SVG displacement
   is the heavy part. A lighter blur keeps that scroll smooth. */
#process .proc-step {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-color: var(--lg-edge);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    inset 0 1px 0 var(--lg-hi),
    inset 0 -1px 0 var(--lg-lo),
    var(--lg-shadow);
}
/* process shapes read as background accents behind the cards */
#process > .shape { opacity: .55; }

.shape {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: var(--ss);
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
@media (max-width: 640px) {
  .shape { width: calc(var(--ss) * .7); }
  .shape--mhide { display: none; }
}

.has-aura { isolation: isolate; }
.has-aura > :not(.aura):not(.shape) { position: relative; z-index: 1; }

/* hero: cool arc across the top, warm spark in the top-left corner */
.aura--svc-hero {
  --x1: 82%; --y1: -10%; --x2: 6%; --y2: -6%;
  background:
    radial-gradient(46vw 30vw at var(--x1) var(--y1),
      color-mix(in srgb, var(--au-teal) 40%, transparent),
      color-mix(in srgb, var(--au-navy) 30%, transparent) 45%, transparent 100%),
    radial-gradient(22vw 16vw at var(--x2) var(--y2),
      color-mix(in srgb, var(--au-orange) 34%, transparent),
      color-mix(in srgb, var(--au-peach) 16%, transparent) 45%, transparent 100%);
}

/* service cards: each has its own pair of colours, glowing from the
   corner on the image side (odd cards: left, even: right) */
.aura--svc-block {
  --gx: 0%; --gy: 100%; --hx: 0%; --hy: 0%;
  background:
    radial-gradient(48vw 46vh at var(--gx) var(--gy),
      color-mix(in srgb, var(--c1) 34%, transparent),
      color-mix(in srgb, var(--c2) 18%, transparent) 45%, transparent 100%),
    radial-gradient(28vw 28vh at var(--hx) var(--hy),
      color-mix(in srgb, var(--c3) 22%, transparent), transparent 100%);
}
.svc-block:nth-of-type(even) > .aura--svc-block { --gx: 100%; --hx: 100%; }
#graphic-design > .aura { --c1: var(--au-orange); --c2: var(--au-peach);  --c3: var(--au-navy); }
#video-editing  > .aura { --c1: var(--au-teal);   --c2: var(--au-navy);   --c3: var(--au-orange); }
#uiux-design    > .aura { --c1: var(--au-navy);   --c2: var(--au-teal);   --c3: var(--au-peach); }
#digital-media  > .aura { --c1: var(--au-orange); --c2: var(--au-teal);   --c3: var(--au-teal); }
#ecommerce      > .aura { --c1: var(--au-peach);  --c2: var(--au-orange); --c3: var(--au-navy); }
#web-design     > .aura { --c1: var(--au-teal);   --c2: var(--au-orange); --c3: var(--au-orange); }

/* reviews: a soft band of colour for the glass cards to sit on */
.svc-reviews { isolation: isolate; }
.aura--svc-reviews {
  --rx1: 12%; --rx2: 88%;
  background:
    radial-gradient(30% 70% at var(--rx1) 55%, color-mix(in srgb, var(--au-teal) 34%, transparent), transparent 100%),
    radial-gradient(30% 70% at var(--rx2) 45%, color-mix(in srgb, var(--au-orange) 30%, transparent), transparent 100%),
    radial-gradient(26% 60% at 50% 50%, color-mix(in srgb, var(--au-navy) 28%, transparent), transparent 100%);
}

/* glass: review cards */
.svc-reviews .svc-review {
  background: var(--lg-tint);
  border-color: var(--lg-edge);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--lg-hi),
    inset 0 -1px 0 var(--lg-lo),
    var(--lg-shadow);
}
.svc-reviews .svc-review { border-radius: 18px; }

@media (max-width: 860px) {
  /* one column, image on top: glow from the top corners */
  .aura--svc-block,
  .svc-block:nth-of-type(even) > .aura--svc-block { --gx: 85%; --gy: 0%; --hx: 10%; --hy: 0%; }
}


/* ---------- about ---------- */
.aura--about-cap {
  --ax: 104%; --ay: 40%; --bx: -4%; --by: 96%;
  background:
    radial-gradient(34vw 30vw at var(--ax) var(--ay),
      color-mix(in srgb, var(--au-orange) 26%, transparent),
      color-mix(in srgb, var(--au-peach) 12%, transparent) 45%, transparent 100%),
    radial-gradient(40vw 30vw at var(--bx) var(--by),
      color-mix(in srgb, var(--au-navy) 32%, transparent), transparent 100%);
}
.aura--about-team {
  --tx: 96%; --ty: 4%; --px: 0%;
  background:
    radial-gradient(40vw 28vw at var(--tx) var(--ty),
      color-mix(in srgb, var(--au-teal) 34%, transparent),
      color-mix(in srgb, var(--au-navy) 24%, transparent) 45%, transparent 100%),
    radial-gradient(30vw 24vw at var(--px) 70%,
      color-mix(in srgb, var(--au-peach) 20%, transparent), transparent 100%);
}
.team-pin-area { position: relative; }
.aura--about-strip {
  --s1: 18%; --s2: 84%;
  background:
    radial-gradient(38% 60% at var(--s1) 55%, color-mix(in srgb, var(--au-navy) 30%, transparent), transparent 100%),
    radial-gradient(30% 50% at var(--s2) 40%, color-mix(in srgb, var(--au-orange) 22%, transparent), transparent 100%);
}
/* capability cards become glass tiles */
.cap-card {
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--lg-edge);
  border-radius: 18px;
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), var(--lg-shadow);
}

/* ---------- portfolio ---------- */
.aura--pf-hero {
  --x1: 90%; --y1: 16%; --x2: 98%; --y2: 104%;
  background:
    radial-gradient(44vw 30vw at var(--x1) var(--y1),
      color-mix(in srgb, var(--au-teal) 40%, transparent),
      color-mix(in srgb, var(--au-navy) 30%, transparent) 45%, transparent 100%),
    radial-gradient(22vw 16vw at var(--x2) var(--y2),
      color-mix(in srgb, var(--au-orange) 30%, transparent),
      color-mix(in srgb, var(--au-peach) 14%, transparent) 45%, transparent 100%);
}
.aura--reel {
  --ry: 60%;
  background: radial-gradient(60% 50% at 50% var(--ry),
    color-mix(in srgb, var(--au-navy) 30%, transparent), transparent 100%);
}
/* portfolio featured cards: the old In focus colours, a different corner per card */
.aura--pf-card { --f1: 20%; }
.aura--pf-card-1 {
  background:
    radial-gradient(34vw 26vw at 104% var(--f1), color-mix(in srgb, var(--au-teal) 30%, transparent), transparent 100%),
    radial-gradient(34vw 22vw at -4% 96%, color-mix(in srgb, var(--au-navy) 28%, transparent), transparent 100%);
}
.aura--pf-card-2 {
  background:
    radial-gradient(30vw 24vw at -4% var(--f1), color-mix(in srgb, var(--au-orange) 24%, transparent), transparent 100%),
    radial-gradient(34vw 26vw at 104% 96%, color-mix(in srgb, var(--au-teal) 30%, transparent), transparent 100%);
}
.aura--pf-card-3 {
  background:
    radial-gradient(34vw 22vw at 104% calc(100% - var(--f1)), color-mix(in srgb, var(--au-navy) 28%, transparent), transparent 100%),
    radial-gradient(30vw 24vw at -4% 4%, color-mix(in srgb, var(--au-orange) 24%, transparent), transparent 100%);
}
.aura--pf-work {
  --wx: 100%;
  background:
    radial-gradient(40vw 30vw at var(--wx) 0%, color-mix(in srgb, var(--au-navy) 28%, transparent), transparent 100%),
    radial-gradient(30vw 24vw at 0% 100%, color-mix(in srgb, var(--au-peach) 18%, transparent), transparent 100%);
}
/* filter buttons become glass pills (the pressed one stays solid) */
.pf-filters button[aria-pressed="false"] {
  border-color: var(--lg-edge);
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo);
}

/* ---------- contact ---------- */
.aura--contact {
  --x1: 100%; --y1: -6%; --y2: 100%;
  background:
    radial-gradient(40vw 26vw at var(--x1) var(--y1),
      color-mix(in srgb, var(--au-teal) 36%, transparent),
      color-mix(in srgb, var(--au-navy) 26%, transparent) 45%, transparent 100%),
    radial-gradient(28vw 30vw at -6% var(--y2),
      color-mix(in srgb, var(--au-orange) 22%, transparent),
      color-mix(in srgb, var(--au-peach) 10%, transparent) 45%, transparent 100%);
}
/* service pills become glass (the checked one stays solid) */
.pill-check input:not(:checked) + span {
  border-color: var(--lg-edge);
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo);
}
.pill-check:hover input:not(:checked) + span,
.pf-filters button[aria-pressed="false"]:hover { background: var(--lg-tint-2); }

/* ---------- legal ---------- */
.aura--legal {
  --x1: 90%; --y1: 8%; --x2: 6%;
  background:
    radial-gradient(50vw 34vw at var(--x1) var(--y1),
      color-mix(in srgb, var(--au-teal) 34%, transparent),
      color-mix(in srgb, var(--au-navy) 26%, transparent) 45%, transparent 100%),
    radial-gradient(26vw 18vw at var(--x2) 100%,
      color-mix(in srgb, var(--au-peach) 24%, transparent), transparent 100%);
}

/* services cards on phones: the image sits on top, so the service shape
   moves beside the heading (right side, empty space) and grows a little */
@media (max-width: 860px) {
  .svc-block > .shape {
    left: auto;
    right: var(--gutter);
    top: 46%;
    width: clamp(60px, 17vw, 88px);
  }
}

.ab-stat, .val-card, .tl-card, .faq-item {
  border: 1px solid var(--lg-edge);
  border-radius: 18px;
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), var(--lg-shadow);
}

/* the founders glow band must stay absolutely placed inside .has-aura */
#story > .about-gallery-glow,
#capabilities > .about-gallery-glow { position: absolute; z-index: 0; }

/* auras */
.aura--about-story {
  --x1: 100%; --y1: 20%; --x2: -4%;
  background:
    radial-gradient(38vw 30vw at var(--x1) var(--y1), color-mix(in srgb, var(--au-teal) 32%, transparent), color-mix(in srgb, var(--au-navy) 22%, transparent) 45%, transparent 100%),
    radial-gradient(26vw 22vw at var(--x2) 100%, color-mix(in srgb, var(--au-orange) 22%, transparent), transparent 100%);
}
.aura--about-numbers {
  --nx: 20%; --ny: 80%;
  background:
    radial-gradient(40vw 28vw at var(--nx) var(--ny), color-mix(in srgb, var(--au-orange) 26%, transparent), color-mix(in srgb, var(--au-peach) 12%, transparent) 45%, transparent 100%),
    radial-gradient(36vw 26vw at 100% 20%, color-mix(in srgb, var(--au-navy) 30%, transparent), transparent 100%);
}
.aura--about-values {
  --vx: 96%; --vy: 70%;
  background:
    radial-gradient(40vw 30vw at var(--vx) var(--vy), color-mix(in srgb, var(--au-teal) 30%, transparent), transparent 100%),
    radial-gradient(28vw 22vw at 0% 30%, color-mix(in srgb, var(--au-peach) 18%, transparent), transparent 100%);
}
.aura--about-journey {
  --jx: 10%; --jy: 20%;
  background:
    radial-gradient(30vw 40vh at var(--jx) var(--jy), color-mix(in srgb, var(--au-navy) 32%, transparent), transparent 100%),
    radial-gradient(30vw 30vh at 100% 90%, color-mix(in srgb, var(--au-orange) 22%, transparent), transparent 100%);
}
.aura--about-clients {
  --cx1: 10%; --cx2: 90%;
  background:
    radial-gradient(30% 60% at var(--cx1) 70%, color-mix(in srgb, var(--au-teal) 30%, transparent), transparent 100%),
    radial-gradient(30% 60% at var(--cx2) 60%, color-mix(in srgb, var(--au-orange) 24%, transparent), transparent 100%);
}
.aura--about-faq {
  --qx: 100%; --qy: 30%;
  background:
    radial-gradient(36vw 30vw at var(--qx) var(--qy), color-mix(in srgb, var(--au-navy) 30%, transparent), transparent 100%),
    radial-gradient(26vw 22vw at 0% 100%, color-mix(in srgb, var(--au-peach) 18%, transparent), transparent 100%);
}

/* story */
.story-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
}
.story-quote {
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.story-text { display: flex; flex-direction: column; gap: 18px; color: var(--muted); max-width: 52ch; line-height: 1.7; }
@media (max-width: 860px) { .story-body { grid-template-columns: minmax(0, 1fr); } }

/* numbers */
.ab-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
.ab-stat { padding: clamp(22px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 10px; }
.ab-stat b {
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .9;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}
.ab-stat span { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .13em; color: var(--muted); }

/* values */
.val-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
@media (max-width: 1000px) { .val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .val-grid { grid-template-columns: minmax(0, 1fr); } }
.val-card { padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.val-shape { width: clamp(44px, 4vw, 60px); height: auto; margin-bottom: 10px; }
.val-card h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -0.03em; line-height: 1.15; }
.val-card p { color: var(--muted); }

/* capability cards: service shape top-right */
.cap-card { position: relative; }
.cap-shape {
  position: absolute;
  top: clamp(16px, 1.8vw, 24px);
  right: clamp(16px, 1.8vw, 24px);
  width: clamp(38px, 3.4vw, 52px);
  height: auto;
}

/* journey timeline */
.tl { position: relative; padding-left: clamp(34px, 5vw, 70px); }
.tl-list { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 32px); }
.tl-line {
  position: absolute;
  left: clamp(10px, 1.6vw, 22px);
  top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line);
}
.tl-line i {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--au-teal), var(--au-orange));
  transform-origin: 50% 0;
}
.tl-item { position: relative; display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr); gap: clamp(14px, 2vw, 32px); align-items: start; }
.tl-dot {
  position: absolute;
  left: calc(-1 * clamp(34px, 5vw, 70px) + clamp(10px, 1.6vw, 22px) - 6px);
  top: 14px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--fg);
  transition: background-color .5s var(--e-out), transform .5s var(--e-out);
}
.tl-year { font-size: clamp(1.4rem, 2.6vw, 2.4rem); letter-spacing: -0.04em; line-height: 1; padding-top: 6px; }
.tl-card { padding: clamp(18px, 2vw, 28px); }
.tl-card h3 { font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: -0.03em; margin-bottom: 6px; }
.tl-card p { color: var(--muted); }
/* with JS: milestones wait dimmed until the line reaches them */
.tl-live .tl-item > :not(.tl-dot) { opacity: .35; transition: opacity .5s var(--e-out); }
.tl-live .tl-item.is-on > :not(.tl-dot) { opacity: 1; }
.tl-live .tl-item.is-on .tl-dot { background: var(--au-orange); transform: scale(1.3); }
@media (max-width: 560px) { .tl-item { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* team: optional one-liner, shown on hover (empty = hidden) */
.team-note { color: var(--muted); font-size: .85rem; margin-top: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--e-out), opacity .5s var(--e-out); }
.team-note:empty { display: none; }
.team-founder-card:hover .team-note,
.team-card:hover .team-note { max-height: 4em; opacity: 1; }
@media (hover: none) { .team-note { max-height: none; opacity: 1; } }

/* clients marquee */
.client-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.client-track { display: flex; flex-wrap: wrap; gap: 14px; }
.client-track.is-marquee { flex-wrap: nowrap; width: max-content; gap: 0; animation: client-marquee 36s linear infinite; }
.client-viewport:hover .client-track.is-marquee { animation-play-state: paused; }
@keyframes client-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.client {
  flex: none;
  margin-right: clamp(12px, 1.4vw, 20px);
  padding: clamp(14px, 1.6vw, 22px) clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--lg-edge);
  border-radius: 999px;
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo);
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* faq */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.faq-item { padding: 0 clamp(18px, 2vw, 28px); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-block: clamp(18px, 2vw, 24px);
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
  letter-spacing: -0.02em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; flex: none; width: 14px; height: 14px; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.5px; background: currentColor;
  transition: transform .45s var(--e-out);
}
.faq-plus::after { transform: rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: rotate(0deg); }
.faq-item p { color: var(--muted); padding-bottom: clamp(18px, 2vw, 24px); max-width: 60ch; }

/* card hover: glass label rises from the bottom, image eases in */
.pf-grid .pf-media img { transition: transform .8s var(--e-out); }
.pf-grid .pf-project:hover .pf-media img { transform: scale(1.04); }
.pf-hover {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: .5em;
  padding: 10px 16px;
  border: 1px solid var(--lg-edge);
  border-radius: 999px;
  background: var(--lg-tint-2);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--lg-hi), var(--lg-shadow);
  color: var(--fg);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .13em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--e-out), transform .45s var(--e-out);
  pointer-events: none;
}
.pf-grid .pf-project:hover .pf-hover,
.pf-grid .pf-project:focus-visible .pf-hover { opacity: 1; transform: none; }
@media (hover: none) { .pf-hover { display: none; } }

/* reviews on portfolio: the glass cards reuse the services recipe */
#pf-reviews-head { padding-bottom: 0; }
#pfReviews + .cta { padding-top: clamp(50px, 6vw, 100px); }

/* project popup */
.pf-modal {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}
.pf-modal[hidden] { display: none; }
.pf-modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  transition: opacity .42s var(--e-out);
}
.pf-modal-panel {
  position: relative;
  width: min(1180px, 100%);
  max-height: min(88vh, 900px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--lg-edge);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--lg-hi), 0 30px 80px -30px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(30px) scale(.97);
  transition: opacity .42s var(--e-out), transform .42s var(--e-out);
}
.pf-modal.is-open .pf-modal-backdrop { opacity: 1; }
.pf-modal.is-open .pf-modal-panel { opacity: 1; transform: none; }
.pf-modal-panel.is-swapping .pf-modal-media img,
.pf-modal-panel.is-swapping .pf-modal-body > * { opacity: 0; }
.pf-modal-media { background: var(--surface); min-height: 0; }
.pf-modal-media img { width: 100%; height: 100%; object-fit: contain; transition: opacity .18s ease; }
.pf-modal-body {
  overflow-y: auto;
  padding: clamp(22px, 2.6vw, 38px);
  display: flex; flex-direction: column; gap: 16px;
}
.pf-modal-body > * { transition: opacity .18s ease; }
.pf-modal-top { display: flex; justify-content: space-between; align-items: center; }
.pf-modal-count { font-size: var(--fs-label); letter-spacing: .16em; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-modal-close {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--lg-edge);
  background: var(--lg-tint);
  display: grid; place-items: center;
  transition: transform .4s var(--e-out);
}
.pf-modal-close:hover { transform: rotate(90deg); }
.pf-modal-title { font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: .95; letter-spacing: -0.045em; }
.pf-modal-meta { display: flex; gap: 32px; margin: 0; }
.pf-modal-meta dt, .pf-modal-label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 4px; }
.pf-modal-meta dd { margin: 0; }
.pf-modal-text { color: var(--muted); line-height: 1.65; }
.pf-modal-deliv { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-modal-deliv li {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.pf-modal-review {
  margin: 4px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--lg-edge);
  border-radius: 16px;
  background: var(--lg-tint);
}
.pf-modal-review > p { line-height: 1.55; }
.pf-modal-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pf-modal-review img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.pf-modal-review cite { font-style: normal; font-size: .9rem; }
.pf-modal-actions { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-modal-nav { display: flex; gap: 8px; }
@media (max-width: 860px) {
  .pf-modal { padding: 0; place-items: end center; }
  .pf-modal-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 92svh;
    border-radius: 24px 24px 0 0;
  }
  .pf-modal-media { max-height: 36svh; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-modal-backdrop, .pf-modal-panel, .pf-hover, .pf-grid .pf-media img { transition: none; }
}

/* ============================================================
   MOBILE PASS (2026-09-26) — tighter vertical rhythm, no dead space,
   nothing overlapping. Where a gap cannot close, the content grows.
   ============================================================ */
@media (max-width: 640px) {
  /* section rhythm: 160px between sections -> ~88px */
  .sec { padding-block: 44px; }
  .sec-head { margin-bottom: 26px; }
  /* first section of a page still clears the fixed header */
  main > .sec:first-child { padding-top: 96px; }
  .Horizontal:not(.is-live) { padding-block: 44px; }
  .Horizontal:not(.is-live) .Horizontal__media-track { margin-bottom: 28px; }
  /* 8 images = 4 rows on a phone; 6 is plenty */
  .Horizontal:not(.is-live) .Horizontal__media:nth-child(n+7) { display: none; }

  /* home hero: centred in its screen instead of starting 250px down,
     with a bigger headline to fill it */
  .hero-intro.is-live > .hero,
  .hero { justify-content: center; padding-top: 96px; padding-bottom: 28px; }
  .hero .display { font-size: clamp(3rem, 13.5vw, 4.4rem); }
  .hero > .shape { top: 58px; left: auto; right: 5%; }

  /* studio: tools block follows the head directly */
  #studio > h3.h2 { margin-top: 0 !important; margin-bottom: 16px !important; }

  /* CTA: shapes move to the corners so they never sit under the heading */
  .cta > img.shape:nth-of-type(1) { top: 10px; left: 4%; }
  .cta > img.shape:nth-of-type(2) { top: auto; bottom: 10px; left: auto; right: 4%; }
  .cta .display { margin-bottom: 20px; }
  .cta-btn { margin-top: 22px; }
  .cta-meta { margin-top: 22px; }

  /* footer: services + elsewhere side by side */
  .foot { padding-block: 36px 22px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .foot-grid > :first-child,
  .foot-grid > :last-child { grid-column: 1 / -1; }
  .foot-bottom { margin-top: 26px; }

  /* services page */
  .svc-hero { padding-top: 96px; }
  .svc-reviews { padding-bottom: 20px; }
  /* the card's service shape sits on the image's top corner like a
     sticker — above the image, never over the copy */
  .svc-block > .shape {
    z-index: 2;
    top: 92px;
    right: 12px;
    left: auto;
    width: clamp(54px, 15vw, 70px);
  }

  /* about: values 2x2, team two-up */
  .val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .val-card { padding: 16px; gap: 8px; }
  .val-shape { width: 36px; margin-bottom: 4px; }
  .val-card h3 { font-size: 1rem; }
  .val-card p { font-size: .82rem; line-height: 1.45; }
  .team-founders,
  .team-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .team-name { font-size: 1rem; }
  .team-role { font-size: .58rem; letter-spacing: .08em; }
  .story-quote { font-size: clamp(1.5rem, 7vw, 2rem); }

  /* legal pages: no forced 70vh while they're this short */
  .legal-page { min-height: 0; padding-top: 100px; padding-bottom: 48px; }
}

/* services cards on tall phones: bigger image fills the empty card */
@media (max-width: 560px) and (min-height: 760px) {
  .svc-shot, .svc-glow { max-height: 34dvh; }
}
/* services cards on short phones: tighten so the card never overflows */
@media (max-width: 560px) and (max-height: 700px) {
  .svc-shot, .svc-glow { max-height: 22dvh; }
  .svc-body { font-size: .84rem; line-height: 1.45; }
  .svc-deliverables li { padding-block: 4px; font-size: .8rem; }
  .svc-heading { font-size: 1.45rem; }
}

/* contact: the two opaque "shelves" become glass, so the page gradient
   shows through instead of a flat box. They still blur whatever image
   passes underneath, which is what the solid colour was there for. */
@media (min-width: 900px) {
  .contact-info {
    margin-top: clamp(12px, 1.4vw, 18px);
    padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 28px);
    border: 1px solid var(--lg-edge);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 1px 0 var(--lg-hi), var(--lg-shadow);
  }
}
@media (max-width: 899px) {
  .cform { background: transparent; }
  .cform::before {
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border-top: 1px solid var(--lg-edge);
    border-radius: 22px 22px 0 0;
  }
}

.legal-page { min-height: 0; }
.legal-meta { color: var(--muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .14em; }
.legal-layout {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
  margin-top: clamp(36px, 5vw, 70px);
}
.legal-toc {
  position: sticky;
  top: 110px;
  padding: 22px;
  border: 1px solid var(--lg-edge);
  border-radius: 18px;
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), var(--lg-shadow);
}
.legal-toc ol { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 9px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { color: var(--muted); font-size: .9rem; transition: color .3s var(--e-out); display: flex; gap: .6em; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font-size: var(--fs-label); letter-spacing: .1em; padding-top: .25em; }
.legal-toc a:hover { color: var(--fg); }
.legal-body { max-width: 72ch; display: flex; flex-direction: column; }
.legal-sec { padding-block: clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.legal-sec:first-child { border-top: 0; padding-top: 0; }
.legal-sec h2 { font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 14px; }
.legal-sec p, .legal-sec li { color: var(--muted); line-height: 1.7; }
.legal-sec p + p { margin-top: 12px; }
.legal-sec strong { font-weight: 400; color: var(--fg); }
.legal-sec em { font-style: normal; color: var(--faint); }
.legal-sec ul { list-style: none; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.legal-sec ul li { position: relative; padding-left: 20px; }
.legal-sec ul li::before { content: ""; position: absolute; left: 0; top: .75em; width: 8px; height: 1px; background: var(--fg); }
.legal-sec a { color: var(--fg); border-bottom: 1px solid var(--line); transition: border-color .3s var(--e-out); }
.legal-sec a:hover { border-bottom-color: var(--fg); }
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
}
@media (max-width: 640px) {
  .legal-title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .legal-toc { display: none; }
  .legal-layout { margin-top: 24px; }
}

/* contact (desktop): the whole form sits in one glass card. Phones
   already get a glass sheet via .cform::before (see above). */
@media (min-width: 900px) {
  .cform {
    padding: clamp(28px, 3vw, 48px);
    border: 1px solid var(--lg-edge);
    border-radius: 24px;
    background: var(--lg-tint);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow:
      inset 0 1px 0 var(--lg-hi),
      inset 0 -1px 0 var(--lg-lo),
      var(--lg-shadow);
  }
}

@media (max-width: 640px) {
  .hero-intro-glow { background-image: url(../img/hero-intro-mobile-figure.webp) !important; background-size: contain; background-repeat: no-repeat; }
  .hero-intro-art {
    top: calc(clamp(172px, 24vh, 210px) + 52px);
    bottom: 158px;
    left: 3%;
    right: 3%;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    transform: none;
  }
  .hero-intro-art > picture > img { object-fit: contain; object-position: center bottom; }
  .hero-decor--wireframe { top: 0; left: 0; width: 20%; }
  .hero-decor--tools { top: 30%; left: 2%; width: 7%; }
  .hero-decor--note { top: 38%; right: 0; left: auto; width: 20%; }
  .hero-decor--cursor { top: 58%; right: 4%; left: auto; width: 10%; }
  .hero-decor--swatches { top: 54%; left: 0; width: 10%; }
  .hero-decor--bag { top: 4%; right: 2%; left: auto; width: 19%; }
}
/* short phones: pull the cue down a little so
   the cue never drops off the bottom edge */
@media (max-width: 640px) and (max-height: 720px) {
  .hero-intro-cue { bottom: calc(56px + env(safe-area-inset-bottom)); padding: 11px 18px; }
  .hero-intro-art { bottom: 136px; top: calc(clamp(160px, 23vh, 190px) + 46px); }
  .hero-intro-title { top: clamp(160px, 23vh, 190px); }
}

/* 404 page */
.nf-page { min-height: 70vh; }
.nf-text { color: var(--muted); max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
/* 404 line-art: currentColor strokes, so it follows the theme */
.nf-art {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto clamp(24px, 4vw, 48px);
  color: var(--fg);
  /* the idle float moves objects a few px past the viewBox */
  overflow: visible;
}

.pf-media { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; aspect-ratio: 16 / 11; }
.pf-media > img, .pf-media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-placeholder > span:not(.pf-reel-type) {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .12em;
}
/* sized so label + reel + note all fit in one screen */
.pf-reel-shell { position: relative; isolation: isolate; width: min(100%, calc((100dvh - 260px) * 16 / 9)); margin-inline: auto; }
.pf-reel-shell > .pf-reel-glow { display: block; transition: opacity .9s var(--e-out); }
.pf-reel-shell > .pf-reel-glow--live { width: 100%; height: 100%; opacity: 0; }
.pf-reel-shell.is-ambient > .pf-reel-glow--live { opacity: .55; }
.pf-reel-shell.is-ambient > .pf-reel-glow:not(.pf-reel-glow--live) { opacity: 0; }
.pf-reel { aspect-ratio: 16 / 9; transform-origin: center; width: 100%; }
.pf-reel > video { object-fit: contain; }
.pf-reel > .pf-placeholder { position: absolute; inset: 0; height: auto; transition: opacity .7s var(--e-out); }
.pf-reel-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(56px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 10%, transparent); backdrop-filter: blur(8px); color: var(--fg); display: grid; place-items: center; cursor: pointer; transition: opacity .7s var(--e-out), scale .4s var(--e-out); }
.pf-reel-play:hover { scale: 1.06; }
.pf-reel-play svg { width: 34%; fill: currentColor; margin-left: 8%; }
.pf-reel.is-playing > .pf-placeholder,
.pf-reel.is-playing > .pf-reel-play { opacity: 0; pointer-events: none; }

.pf-reel > .pf-video { position: absolute; inset: 0; background: transparent; }
.pf-reel.is-started { background: #000; }
.pf-reel.is-started > .pf-video { cursor: pointer; }
.pf-reel.is-started.is-paused > .pf-reel-play { opacity: 1; pointer-events: auto; }

/* Netflix-style pause screen: thumbnail (or the paused frame when there is
   no thumbnail yet) under a dark scrim, with the reel title back on top */
.pf-reel { --pp-thumb: none; }
.pf-reel.is-started.is-paused > .pf-placeholder {
  opacity: 1;
  pointer-events: none;
  background: var(--pp-thumb) center / cover no-repeat;
}
/* the thumbnail is white on the left, so the reel text stays black in both themes */
.pf-reel > .pf-placeholder { color: #0D0D0C; }
.pf-reel > .pf-placeholder > span { color: #0D0D0C; }

/* Netflix-style title block: title, meta line, one-liner, play pill */
.pf-reel-info { display: flex; flex-direction: column; align-items: flex-start; max-width: 46%; }
.pf-reel-info .pf-reel-type { color: #0D0D0C; }
.pf-reel-desc { margin-top: clamp(12px, 1.6vw, 22px); font-size: clamp(.82rem, 1vw, 1rem); line-height: 1.4; color: rgba(13, 13, 12, 0.72); max-width: 32ch; }
.pf-reel > .pf-reel-play { color: #0D0D0C; background: rgba(13, 13, 12, 0.08); border-color: rgba(13, 13, 12, 0.22); }

/* slow zoom on the thumbnail until the reel starts */
.pf-reel:not(.is-started) > .pf-video { animation: pp-drift 16s ease-in-out infinite alternate; }
@keyframes pp-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .pf-reel:not(.is-started) > .pf-video { animation: none; } }
.pf-reel-play { z-index: 2; }
.pf-reel.is-loading > .pf-reel-play { opacity: 0; pointer-events: none; }
.pp-spinner {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  width: clamp(56px, 6vw, 84px);
  aspect-ratio: 1;
  padding: 12px;
  translate: -50% -50%;
  scale: .7;
  border-radius: 50%;
  background: rgba(11, 11, 10, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--e-out), scale .45s var(--e-out);
}
.pf-reel.is-loading > .pp-spinner { opacity: 1; scale: 1; }
.pp-spinner svg { display: block; width: 100%; height: 100%; animation: pp-rot 1.1s linear infinite; }
.pp-spinner circle { fill: none; stroke-width: 2.5; }
.pp-spin-track { stroke: rgba(252, 251, 244, 0.18); }
.pp-spin-arc { stroke: #FCFBF4; stroke-linecap: round; animation: pp-dash 1.4s ease-in-out infinite; }
@keyframes pp-rot { to { rotate: 360deg; } }
@keyframes pp-dash {
  0% { stroke-dasharray: 1 126; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 80 126; stroke-dashoffset: -30; }
  100% { stroke-dasharray: 80 126; stroke-dashoffset: -125; }
}
@media (prefers-reduced-motion: reduce) { .pp-spin-arc { animation: none; stroke-dasharray: 60 126; } }

.pp-bar {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: rgba(11, 11, 10, 0.55);
  border: 1px solid rgba(252, 251, 244, 0.14);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: #FCFBF4;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .45s var(--e-out), transform .45s var(--e-out);
}
.pf-reel.is-started .pp-bar { opacity: 1; transform: none; pointer-events: auto; }
.pf-reel.is-started.is-idle .pp-bar { opacity: 0; transform: translateY(12px); pointer-events: none; }
.pf-reel.is-started.is-idle { cursor: none; }

.pp-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: inherit;
  transition: background-color .3s var(--e-out), transform .3s var(--e-out);
}
.pp-btn:hover { background: rgba(252, 251, 244, 0.12); }
.pp-btn:active { transform: scale(.9); }
.pp-btn:focus-visible, .pp-progress:focus-visible { outline: 2px solid #FCFBF4; outline-offset: 2px; }
.pp-btn svg { width: 20px; height: 20px; fill: currentColor; }
.pp-btn .pp-wave { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pp-i-pause, .pp-i-muted, .pp-i-exit { display: none; }
.pf-reel.is-playing-now .pp-i-play { display: none; }
.pf-reel.is-playing-now .pp-i-pause { display: block; }
.pf-reel.is-muted .pp-i-vol { display: none; }
.pf-reel.is-muted .pp-i-muted { display: block; }
.pf-reel.is-fs .pp-i-fs { display: none; }
.pf-reel.is-fs .pp-i-exit { display: block; }

.pp-time { flex: none; font-size: .72rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; padding: 0 6px; opacity: .9; }
.pp-sep { margin: 0 4px; opacity: .5; }

.pp-progress { position: relative; flex: 1 1 auto; height: 22px; cursor: pointer; touch-action: none; }
.pp-progress::before,
.pp-buffer,
.pp-fill {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  height: 3px;
  translate: 0 -50%;
  border-radius: 3px;
  transition: height .25s var(--e-out);
}
.pp-progress::before { right: 0; background: rgba(252, 251, 244, 0.2); }
.pp-buffer { width: 0; background: rgba(252, 251, 244, 0.35); }
.pp-fill { width: 0; background: #FCFBF4; }
.pp-thumb {
  position: absolute;
  top: 50%; left: 0;
  width: 13px; height: 13px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #FCFBF4;
  scale: 0;
  transition: scale .25s var(--e-out);
}
.pp-progress:hover::before, .pp-progress:hover .pp-buffer, .pp-progress:hover .pp-fill,
.pp-progress.is-drag::before, .pp-progress.is-drag .pp-buffer, .pp-progress.is-drag .pp-fill { height: 5px; }
.pp-progress:hover .pp-thumb, .pp-progress.is-drag .pp-thumb { scale: 1; }

.pp-vol { display: flex; align-items: center; }
.pp-vol-range {
  --vol: 100%;
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 3px;
  margin: 0;
  opacity: 0;
  border-radius: 3px;
  background: linear-gradient(to right, #FCFBF4 var(--vol), rgba(252, 251, 244, 0.25) var(--vol));
  cursor: pointer;
  transition: width .35s var(--e-out), opacity .35s var(--e-out), margin .35s var(--e-out);
}
.pp-vol:hover .pp-vol-range, .pp-vol:focus-within .pp-vol-range { width: 78px; opacity: 1; margin: 0 8px 0 2px; }
.pp-vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #FCFBF4; border: 0; }
.pp-vol-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #FCFBF4; border: 0; }

.pp-quality { position: relative; }
.pp-q-btn { width: auto; padding: 0 12px; border-radius: 999px; font-size: .68rem; letter-spacing: .1em; }
.pp-q-menu {
  position: absolute;
  right: 0; bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  min-width: 130px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(11, 11, 10, 0.82);
  border: 1px solid rgba(252, 251, 244, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .3s var(--e-out), transform .3s var(--e-out);
}
.pp-quality.is-open .pp-q-menu { opacity: 1; transform: none; pointer-events: auto; }
.pp-q-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  color: #FCFBF4;
  font-size: .78rem;
  text-align: left;
}
.pp-q-menu button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0; }
.pp-q-menu button[aria-checked="true"]::before { opacity: 1; }
.pp-q-menu button:hover { background: rgba(252, 251, 244, 0.1); }
.pp-q-menu small { font-size: .6rem; opacity: .6; letter-spacing: .1em; }

.pf-reel:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; clip-path: none !important; transform: none !important; }
.pf-reel:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; clip-path: none !important; transform: none !important; }
.pf-reel:fullscreen .pp-bar { left: 24px; right: 24px; bottom: 24px; }
.pf-placeholder { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 3vw, 40px); color: var(--muted); background: linear-gradient(135deg, transparent, var(--line-soft)); }
.pf-reel-type { font-size: clamp(2rem, 7vw, 7rem); letter-spacing: -.055em; line-height: .95; color: var(--fg); }
.pf-glow { display: none; position: absolute; inset: 0; z-index: -1; background: center / cover; filter: blur(44px) saturate(1.7); opacity: .42; transform: scale(1.01); pointer-events: none; }
@media (max-width: 640px) {
  .pf-reel-type { font-size: clamp(1.6rem, 9vw, 2.6rem); }
  .pf-reel-info { max-width: 60%; }
  .pf-reel-desc { display: none; }
  .pp-bar { left: 8px; right: 8px; bottom: 8px; gap: 2px; padding: 4px 6px 4px 4px; }
  .pp-btn { width: 32px; height: 32px; }
  .pp-btn svg { width: 17px; height: 17px; }
  .pp-vol-range, .pp-sep, .pp-dur { display: none; }
  .pp-time { font-size: .64rem; padding: 0 4px; }
  .pp-q-btn { padding: 0 8px; font-size: .6rem; }
  .pf-placeholder { padding: 14px; }
  .pf-placeholder > span:not(.pf-reel-type) { font-size: .55rem; }
  .pf-glow { filter: blur(28px) saturate(1.7); opacity: .36; }
}
html.perf-lite .pf-glow {
  filter: blur(24px) saturate(1.3);
  will-change: auto;
}

@media (max-width: 720px), (pointer: coarse) {
  .pf-reel { -webkit-tap-highlight-color: transparent; }
  .pp-bar { left: 6px; right: 6px; bottom: 6px; gap: 0; padding: 2px 4px 2px 2px; flex-wrap: nowrap; }
  .pp-btn { width: 40px; height: 40px; }
  .pp-btn svg { width: 18px; height: 18px; }
  .pp-vol-range, .pp-sep, .pp-dur { display: none; }
  .pp-time { font-size: .6rem; letter-spacing: 0; padding: 0 4px 0 2px; }
  .pp-progress { min-width: 24px; height: 40px; }
  .pp-q-btn { min-width: 40px; padding: 0 8px; font-size: .58rem; letter-spacing: .06em; white-space: nowrap; }
  .pp-q-menu { bottom: calc(100% + 6px); min-width: 104px; padding: 4px; border-radius: 12px; }
  .pp-q-menu button { padding: 5px 10px; font-size: .68rem; line-height: 1.2; }
}

/* liquid glass: plain blur, no saturate, no #lgRefract */
html.perf-lite .nav.is-pill .nav-inner,
html.perf-lite .hero-actions .hero-work-link,
html.perf-lite #studio .fact,
html.perf-lite #studio .tool,
html.perf-lite .svc-item:hover .svc-row,
html.perf-lite .svc-preview,
html.perf-lite #process .proc-step,
html.perf-lite .svc-index a:hover,
html.perf-lite .svc-reviews .svc-review,
html.perf-lite .pf-filters button[aria-pressed="false"],
html.perf-lite .pill-check input:not(:checked) + span,
html.perf-lite .cap-card {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (max-width: 899px) {
  html.perf-lite .cform::before {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
/* ambient image glows: lighter blur, still visible */
html.perf-lite .work-glow,
html.perf-lite .about-gallery-glow,
html.perf-lite .team-glow,
html.perf-lite .hero-intro-glow,
html.perf-lite .contact-glow > img,
html.perf-lite .svc-glow,
html.perf-lite .Horizontal__media-glow {
  filter: blur(24px) saturate(1.3);
  will-change: auto;
}
/* grain: static texture */
html.perf-lite .grain::before {
  transform: none !important;
  will-change: auto;
}
/* auras: painted as-is, no drift layer */
html.perf-lite .aura { will-change: auto; }

/* no blur behind anything, no blend modes */
html.perf-super *,
html.perf-super *::before,
html.perf-super *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}
/* glass without the blur: the existing stronger tint, same border/radius */
html.perf-super .hero-actions .hero-work-link,
html.perf-super #studio .tool,
html.perf-super .svc-item:hover .svc-row,
html.perf-super .svc-preview,
html.perf-super .svc-reviews .svc-review,
html.perf-super .cap-card,
html.perf-super .pf-filters button[aria-pressed="false"],
html.perf-super .pill-check input:not(:checked) + span,
html.perf-super .ab-stat,
html.perf-super .val-card,
html.perf-super .tl-card,
html.perf-super .faq-item,
html.perf-super .client,
html.perf-super .legal-toc,
html.perf-super .cform {
  background: var(--lg-tint-2);
}
/* the one exception to "no blur": the scrolled header pill gets a plain
   frosted glass (blur only, no saturate, no #lgRefract) with a 70% tint so
   text stays readable. Border, radius and shadow come from the normal
   rules. The menu overlay stays the solid --inv-bg surface as in full. */
html.perf-super .nav.is-pill .nav-inner {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
html.perf-super .pf-modal-backdrop,
html.perf-super .pf-modal-panel,
html.perf-super .contact-info,
html.perf-super .cform::before {
  background: var(--glass);
}
/* blurred image glows off (the images themselves stay) */
html.perf-super .work-glow,
html.perf-super .about-gallery-glow,
html.perf-super .team-glow,
html.perf-super .hero-intro-glow,
html.perf-super .contact-glow,
html.perf-super .svc-glow,
html.perf-super .Horizontal__media-glow,
html.perf-super .pf-glow {
  display: none !important;
}
/* auras: colours unchanged; instead of the custom-property drift, one
   slow opacity breath per aura (compositor-only), paused offscreen */
@keyframes perf-aura-breathe {
  from { opacity: var(--au-op); }
  to   { opacity: calc(var(--au-op) * 0.8); }
}
html.perf-super .aura { animation: perf-aura-breathe 9s ease-in-out infinite alternate; }
/* scroll-animated images get their own layer while their section is on
   screen; offscreen (.perf-off) every will-change is dropped */
html.perf-super .hero-intro-image,
html.perf-super .work-card,
html.perf-super .work-media,
html.perf-super .work-media .art,
html.perf-super .Horizontal__media,
html.perf-super .Horizontal__media-frame,
html.perf-super .pf-project .pf-media,
html.perf-super .pf-project .pf-media img,
html.perf-super .svc-shot-wipe,
html.perf-super .gallery__item {
  will-change: transform;
}
html.perf-super .perf-off,
html.perf-super .perf-off * {
  will-change: auto !important;
}
html.perf-super .perf-off,
html.perf-super .perf-off * {
  animation-play-state: paused !important;
}