/* ---------- self-hosted fonts ----------
   Was two render-blocking round trips to fonts.googleapis.com before a
   single glyph could paint. Same files, served from our own origin, so
   they start downloading as soon as this stylesheet is parsed.
   unicode-range is kept intact: latin-ext is declared but only fetched
   if a page ever actually needs those glyphs. */
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/league-spartan-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/league-spartan-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/league-spartan-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/league-spartan-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/league-spartan-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/league-spartan-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/league-spartan-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/league-spartan-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/league-spartan-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/league-spartan-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/questrial-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/questrial-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ SMIK — Creative Intelligence Studio ============ */
:root {
  --ink: #06090F;
  --ink-2: #0A0F17;
  --ink-3: #101724;
  --ice: #BBE7FA;
  --ice-dim: rgba(187, 231, 250, 0.55);
  --line: rgba(187, 231, 250, 0.14);
  --white: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.55);
  --font-head: 'League Spartan', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  --font-body: 'ITC Avant Garde Gothic Pro', 'ITC Avant Garde Gothic', 'Century Gothic', 'Questrial', 'Avenir Next', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(1.25rem, 5vw, 5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--ice); }
::selection { background: var(--ice); color: var(--ink); }

/* headlines in League Spartan; body copy in Avant Garde */
h1, h2, h3, h4, h5, h6,
.hero__title, .section-title, .contact__title, .pillar__name,
.chapter__index, .founder__stat, .founder__quote,
.manifesto__text, .project--quote blockquote p,
.nav__logo, .footer__logo, .nav__link,
.section-eyebrow, .hero__eyebrow, .project__tag,
.marquee__track span, .principle__num, .cap__num {
  font-family: var(--font-head);
}

/* ---------- scroll progress ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200;
  background: transparent;
}
.progress span {
  display: block; height: 100%; width: 100%;
  background: var(--ice);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  background: linear-gradient(rgba(6, 9, 15, 0.85), rgba(6, 9, 15, 0));
  backdrop-filter: blur(0px);
  transition: transform 0.5s var(--ease), background 0.4s;
}
.nav.is-scrolled {
  background: rgba(6, 9, 15, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo { display: inline-flex; align-items: center; }
.smik-logo {
  height: 3.1rem; width: auto; display: block; overflow: visible;
  transition: transform 0.4s var(--ease), filter 0.4s;
}
/* pupils are CSS discs over the filled irises, so they can look around */
.smik-mark { position: relative; display: inline-block; line-height: 0; }
.smik-eye {
  position: absolute; top: 88.2%;
  width: 6.03%; aspect-ratio: 1;
  background: var(--ink); border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: eyeLook 5s var(--ease) infinite;
}
.smik-eye--l { left: 26.76%; }
.smik-eye--r { left: 73.13%; }
@keyframes eyeLook {
  0%, 14%   { transform: translate(-50%, -50%); }
  26%, 40%  { transform: translate(-50%, -92%); }   /* up */
  52%, 66%  { transform: translate(-50%, -8%); }    /* down */
  78%, 100% { transform: translate(-50%, -50%); }
}
.nav__logo:hover .smik-mark {
  transform: scale(1.04);
  filter: drop-shadow(0 0 14px rgba(187, 231, 250, 0.4));
}
.nav__logo .smik-mark { transition: transform 0.4s var(--ease), filter 0.4s; }

.nav__links { display: flex; gap: clamp(1rem, 2.5vw, 2.2rem); }
.nav__link {
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); position: relative;
  padding: 0.3rem 0;
  transition: color 0.3s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ice);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- mobile menu (hamburger) ----------
   Below 900px the "Let's talk" pill gives up the top-right corner to the
   burger; the pill returns as the CTA at the bottom of the open panel. */
.nav__logo, .nav__burger { position: relative; z-index: 2; }
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; color: var(--white);
  border: 1px solid rgba(187, 231, 250, 0.45);
  border-radius: 999px; cursor: pointer; padding: 0;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav__burger:hover { border-color: var(--ice); background: rgba(187, 231, 250, 0.08); }
.nav__burger:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.nav__burger-bars { position: relative; display: block; width: 18px; height: 11px; }
.nav__burger-bars i {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.35s var(--ease);
}
.nav__burger-bars i:nth-child(1) { top: 0; }
.nav__burger-bars i:nth-child(2) { bottom: 0; }
.nav.is-menu-open .nav__burger-bars i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav.is-menu-open .nav__burger-bars i:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
/* the nav auto-hides on scroll down — never while the menu is open */
.nav.is-menu-open { transform: none !important; }

/* lives outside <header> on purpose: the nav's backdrop-filter would otherwise
   become the containing block and trap this inside the header strip */
.navmenu {
  position: fixed; inset: 0; z-index: 99;   /* under the nav (100), over the page */
  display: flex;
  padding: 6rem var(--pad) 3rem;
  background: rgba(6, 9, 15, 0.97);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  /* on a short landscape phone the panel can outgrow the screen; let it
     scroll rather than push the first item off the top */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.navmenu[hidden] { display: none; }
.navmenu.is-open { opacity: 1; }
.navmenu__panel {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.2rem, 4vw, 1.9rem); text-align: center;
  /* auto margins centre it but, unlike align-items:center, still allow the
     top to be reached once the panel is taller than the screen */
  margin: auto;
}
.navmenu__link, .navmenu__cta {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), color 0.3s var(--ease);
}
.navmenu__link {
  font-family: var(--font-head);
  font-size: clamp(2rem, 11vw, 3rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.01em; color: var(--white);
}
.navmenu__link:hover { color: var(--ice); }
.navmenu__link:focus-visible { outline: 2px solid var(--ice); outline-offset: 6px; border-radius: 6px; }
.navmenu__cta { margin-top: 0.8rem; }
.navmenu.is-open .navmenu__link,
.navmenu.is-open .navmenu__cta { opacity: 1; transform: none; }
.navmenu.is-open .navmenu__link:nth-child(2) { transition-delay: 0.06s; }
.navmenu.is-open .navmenu__cta { transition-delay: 0.12s; }
body.nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav__burger { display: inline-flex; }
  .nav > .btn--small { display: none; }
}
@media (min-width: 901px) {
  .navmenu { display: none; }
}

/* ---------- buttons (micro-interactions) ---------- */
.btn {
  --btn-pad-y: 0.95rem; --btn-pad-x: 1.7rem;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid rgba(187, 231, 250, 0.45);
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--white);
  /* <button> inherits a light UA background; without this the white label
     on the form's submit button is invisible */
  background: transparent;
  font-family: var(--font-body);
  overflow: hidden;
  cursor: pointer;
  transition: color 0.35s var(--ease), border-color 0.35s;
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ice);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.btn:hover { color: var(--ink); border-color: var(--ice); }
.btn:hover::before { transform: translateY(0); }
.btn__arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn[href="#work"]:hover .btn__arrow { transform: translateY(4px); }
.btn--small { --btn-pad-y: 0.6rem; --btn-pad-x: 1.2rem; font-size: 0.75rem; }
.btn--big { --btn-pad-y: 1.3rem; --btn-pad-x: 2.6rem; font-size: 1rem; gap: 1rem; }

/* ---------- shared section bits ---------- */
section { padding: clamp(5rem, 12vh, 9rem) var(--pad); position: relative; }
.section-head { max-width: 1200px; margin: 0 auto clamp(2.5rem, 6vw, 5rem); }
.section-eyebrow {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ice);
  margin-bottom: 1.2rem;
}
.section-title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.section-sub { color: var(--muted); margin-top: 1.2rem; font-size: 1.05rem; max-width: 34rem; }
.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ice);
}

/* ---------- ambient section textures ---------- */
.manifesto, .philosophy, .people, .capabilities, .page-head { isolation: isolate; }
.sec-tex {
  position: absolute; inset: 0; z-index: -1;
  background-repeat: no-repeat;
  pointer-events: none;
}
.sec-tex--lines {
  background-image: url(../assets/bg/bg-lines.svg);
  background-size: cover; background-position: center right;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
}
.sec-tex--chevron {
  background-image: url(../assets/bg/bg-chevron.png);
  background-repeat: no-repeat;
  background-size: min(70%, 880px) auto;
  background-position: center 56%;
  opacity: 0.11;
  -webkit-mask-image: radial-gradient(145% 125% at 50% 56%, #000 48%, transparent 96%);
  mask-image: radial-gradient(145% 125% at 50% 56%, #000 48%, transparent 96%);
}
.sec-tex--waves {
  background-image: url(../assets/bg/bg-waves.svg);
  background-size: cover; background-position: center;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(90% 100% at 50% 50%, transparent 30%, #000 78%);
  mask-image: radial-gradient(90% 100% at 50% 50%, transparent 30%, #000 78%);
}
.sec-tex--rings {
  background-image: url(../assets/bg/bg-rings.svg);
  background-size: 900px auto; background-position: center 40%;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 42%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 60% at 50% 42%, #000 0%, transparent 75%);
}

/* ---------- reveal-on-scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(46px);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease),
    filter 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 7rem;
  overflow: hidden;
}
.hero__rings { position: absolute; inset: 0; pointer-events: none; }
.hero__rings span {
  position: absolute; top: 38%; left: 62%;
  border-radius: 50%;
  border: 1px solid rgba(187, 231, 250, 0.10);
  transform: translate(-50%, -50%);
  animation: ringPulse 7s var(--ease) infinite;
}
.hero__rings span:nth-child(1) { width: 22vw; height: 22vw; animation-delay: 0s; }
.hero__rings span:nth-child(2) { width: 40vw; height: 40vw; animation-delay: 0.6s; }
.hero__rings span:nth-child(3) { width: 58vw; height: 58vw; animation-delay: 1.2s; }
.hero__rings span:nth-child(4) { width: 76vw; height: 76vw; animation-delay: 1.8s; }
@keyframes ringPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
.hero__waves {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0.35;
}
.hero__waves .wave {
  stroke-dasharray: 3000; stroke-dashoffset: 3000;
  animation: drawWave 3.4s var(--ease) forwards;
  opacity: 0.5;
}
.hero__waves .wave:nth-child(1) { animation-delay: 0.2s; }
.hero__waves .wave:nth-child(2) { animation-delay: 0.35s; }
.hero__waves .wave:nth-child(3) { animation-delay: 0.5s; }
.hero__waves .wave:nth-child(4) { animation-delay: 0.65s; }
.hero__waves .wave:nth-child(5) { animation-delay: 0.8s; }
.hero__waves .wave:nth-child(6) { animation-delay: 0.95s; }
@keyframes drawWave { to { stroke-dashoffset: 0; } }

.hero__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; }
.hero__eyebrow {
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ice);
  display: flex; align-items: center; gap: 0.8rem;
  line-height: 1;
  margin-bottom: 2.2rem;
}
.tick { width: 9px; height: 9px; border-radius: 50%; background: var(--ice); animation: blink 2.4s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.hero__title {
  font-size: clamp(3.2rem, 11.5vw, 9.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
/* above 900px the brand icons sit beside the headline; the longer
   "The algorithm isn't your audience." needs a smaller scale to clear them */
@media (min-width: 901px) {
  .hero__title { font-size: clamp(3.2rem, 8.6vw, 8rem); }
}
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: inline-block; }
.hero__line--accent {
  color: transparent;
  -webkit-text-stroke: 2px var(--ice);
}
.hero__dot { color: var(--ice); -webkit-text-stroke: 0; }

.hero__foot {
  margin-top: 3rem;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2rem;
  justify-content: space-between;
}
.hero__sub { color: var(--muted); font-size: 1.08rem; line-height: 1.6; }

.hero__icons {
  position: absolute;
  right: clamp(1.5rem, 8vw, 8rem);
  top: 0; bottom: 0; margin: auto 0;
  height: max-content;
  z-index: 1;
  display: flex; flex-direction: column;
  gap: clamp(2rem, 4vw, 3.2rem);
}
.hero__iconset { display: flex; flex-direction: column; gap: 1rem; }
.hero__iconlabel {
  font-family: var(--font-head);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ice-dim);
  padding-left: 0.25rem;
}
.hero__iconrow { display: flex; gap: clamp(1rem, 2vw, 1.7rem); }
.hero__icon {
  width: clamp(42px, 4.5vw, 62px);
  height: clamp(42px, 4.5vw, 62px);
  display: grid; place-items: center;
  animation: floaty 6s ease-in-out infinite;
  transition: transform 0.4s var(--ease);
}
.hero__icon img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(187, 231, 250, 0.22));
}
.hero__icon:nth-child(2) { animation-delay: 0.5s; }
.hero__icon:nth-child(3) { animation-delay: 1s; }
.hero__iconset:last-child .hero__icon:nth-child(1) { animation-delay: 1.5s; }
.hero__iconset:last-child .hero__icon:nth-child(2) { animation-delay: 2s; }
.hero__iconset:last-child .hero__icon:nth-child(3) { animation-delay: 2.5s; }
.hero__icon:hover { transform: translateY(-6px) scale(1.08); }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.hero__scrollcue {
  position: absolute; bottom: 2.2rem; left: var(--pad);
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted);
}
.hero__scrollline { width: 3.4rem; height: 1px; background: var(--ice-dim); position: relative; overflow: hidden; }
.hero__scrollline::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ice);
  transform: translateX(-100%);
  animation: scrollSweep 2.2s var(--ease) infinite;
}
@keyframes scrollSweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* hero load-in */
[data-load] {
  opacity: 0; transform: translateY(30px);
  animation: loadIn 1s var(--ease) forwards;
}
.hero__line[data-load] { transform: none; animation: none; opacity: 1; }
.hero__line[data-load] > span {
  display: inline-block;
  transform: translateY(110%);
  animation: riseIn 1.1s var(--ease) forwards;
}
[data-load="1"] { animation-delay: 0.1s; }
[data-load="2"] > span { animation-delay: 0.25s; }
[data-load="3"] > span { animation-delay: 0.37s; }
[data-load="4"] > span { animation-delay: 0.49s; }
[data-load="5"] > span { animation-delay: 0.61s; }
[data-load="6"] { animation-delay: 0.95s; }
[data-load="7"] { animation-delay: 1.1s; animation-name: loadInFloat; }
[data-load="8"] { animation-delay: 1.3s; }
@keyframes loadIn { to { opacity: 1; transform: translateY(0); } }
@keyframes loadInFloat { to { opacity: 0.9; transform: translateY(0); } }
@keyframes riseIn { to { transform: translateY(0); } }

/* ---------- clients (thin, minimal ticker) ---------- */
.clients {
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(1.3rem, 3vw, 2rem) 0;
}
.clients__copy {
  text-align: center;
  color: var(--ice);
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-style: italic;
  margin: 0 var(--pad) clamp(1rem, 2vw, 1.5rem);
}
/* edge fades as static overlays, not a mask: a mask over a continuously
   animating track forces re-rasterisation every frame */
.clients-ticker { overflow: hidden; position: relative; }
.clients-ticker::before,
.clients-ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 12%; z-index: 2; pointer-events: none;
}
.clients-ticker::before { left: 0; background: linear-gradient(90deg, var(--ink-2), transparent); }
.clients-ticker::after { right: 0; background: linear-gradient(270deg, var(--ink-2), transparent); }
.clients-track {
  display: flex; align-items: center; gap: clamp(2.4rem, 5vw, 4rem);
  width: max-content;
  animation: ticker 38s linear infinite;
  will-change: transform;   /* own compositor layer: animate without repaint */
}
.clients-ticker:hover .clients-track { animation-play-state: paused; }
.clients-track img {
  height: clamp(16px, 2vw, 21px); width: auto;
  flex-shrink: 0;
  opacity: 0.42;
  transition: opacity 0.35s var(--ease);
}
.clients-track img:hover { opacity: 0.85; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- manifesto ---------- */
.manifesto {
  max-width: 1100px; margin: 0 auto;
  padding-block: clamp(6rem, 16vh, 11rem);
}
.manifesto__text {
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  font-weight: 600; line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 1.5rem;
}
.manifesto__text .w {
  color: rgba(255, 255, 255, 0.16);
  transition: color 0.35s linear;
}
.manifesto__text .w.lit { color: var(--white); }
.manifesto__text b .w.lit,
.manifesto__text .w.lit b { color: var(--ice); }
.manifesto__text b { font-weight: 700; }
.manifesto__text b .w { transition: color 0.35s linear; }

/* ---------- philosophy ---------- */
.philosophy { background: var(--ink-2); border-block: 1px solid var(--line); }
/* both pillars share a row on desktop — halves the section height */
.philosophy .pillar { margin: 0; }
.pillar__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.pillar__name {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
}
.pillar__name span { color: var(--ice); margin-left: 0.35rem; }
/* own row so both pillar heads are the same height and the rails line up */
.pillar__tag { color: var(--muted); font-size: 0.98rem; flex-basis: 100%; min-height: 2.9em; }
.philosophy__pillars {
  display: grid; gap: clamp(2rem, 4vw, 3.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  max-width: 1200px; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
}
.pillar__grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}
.principle {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.8rem 1.6rem 1.7rem;
  background: var(--ink);
  transition: transform 0.45s var(--ease), border-color 0.45s, background 0.45s;
}
.principle:hover {
  transform: translateY(-7px);
  border-color: rgba(187, 231, 250, 0.4);
  background: var(--ink-3);
}
.principle__num {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--muted);
  transition: color 0.35s;
}
.principle:hover .principle__num { color: var(--ice); }
.principle__icon {
  display: inline-flex; width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(187, 231, 250, 0.35);
  color: var(--ice);
  margin-bottom: 1.4rem;
  transition: transform 0.45s var(--ease), background 0.45s, box-shadow 0.45s;
}
.principle__icon svg { width: 22px; height: 22px; }
.principle:hover .principle__icon {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(187, 231, 250, 0.1);
  box-shadow: 0 0 0 6px rgba(187, 231, 250, 0.06);
}
.principle h4 { font-size: 1.28rem; font-weight: 700; margin-bottom: 0.6rem; }
.principle p { color: var(--muted); font-size: 0.98rem; }

/* ---------- people ---------- */
.founders {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.founder {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  transition: transform 0.5s var(--ease), border-color 0.5s;
}
.founder:hover { transform: translateY(-6px); border-color: rgba(187, 231, 250, 0.35); }
.founder__quote {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 600; line-height: 1.3;
  color: var(--ice);
  margin-bottom: 2rem;
  text-wrap: balance;
}
.founder__meta {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.3rem; margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}
.founder__meta h3 { font-size: 1.7rem; font-weight: 800; letter-spacing: 0.02em; }
.founder__role { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 0.3rem; }
.founder__stat { font-size: 2.6rem; font-weight: 800; color: var(--white); line-height: 1; }
.founder__stat em { font-size: 0.9rem; font-weight: 600; color: var(--ice); margin-left: 0.25rem; letter-spacing: 0.15em; text-transform: uppercase; }
.founder__bio { color: var(--muted); font-size: 0.98rem; }

/* ---------- capabilities ---------- */
.capabilities { background: var(--ink-2); border-block: 1px solid var(--line); }
.caps-scroller {
  position: relative;
  max-width: 1100px; margin: 0 auto;
  height: clamp(230px, 36vh, 360px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
.caps-reel {
  list-style: none; margin: 0; padding: 0;
  will-change: transform;
}
.cap-line {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  height: clamp(3rem, 6.6vh, 4.2rem);
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 3.4vw, 2.5rem); font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
  text-align: center; white-space: nowrap;
  will-change: filter, opacity;
}
.cap-line__n {
  font-size: 0.5em; font-weight: 700; letter-spacing: 0.1em;
  color: var(--ice); opacity: 0.75;
}
.cap-line.is-focus { color: var(--ice); }
.caps__note {
  max-width: 1200px; margin: 2.4rem auto 0;
  color: var(--muted); font-size: 1.05rem;
  text-align: center;
}
.caps__note strong { color: var(--ice); font-weight: 700; }

/* ---------- work ---------- */
.chapter {
  max-width: 1200px;
  margin: clamp(3.5rem, 9vw, 6.5rem) auto 2rem;
  display: flex; align-items: baseline; gap: 1.4rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.4rem;
}
.chapter:first-of-type { margin-top: 0; }
.chapter__index {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ice);
  line-height: 1;
}
.chapter__title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }
.chapter__sub { color: var(--muted); font-size: 0.95rem; margin-top: 0.4rem; }

.grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: 1.3rem;
  grid-template-columns: repeat(2, 1fr);
}
.project {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink-2);
  transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s;
}
.project:hover {
  transform: translateY(-8px);
  border-color: rgba(187, 231, 250, 0.45);
  box-shadow: 0 24px 60px -30px rgba(187, 231, 250, 0.25);
}
.project--wide { grid-column: span 2; }
.project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-3);
}
.project--wide .project__media { aspect-ratio: 21 / 9; }
.project__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease), opacity 0.6s var(--ease);
}
.project__alt {
  position: absolute; inset: 0; opacity: 0;
}
.project:hover .project__media img { transform: scale(1.055); }
.project:hover .project__alt { opacity: 1; }
.project__meta {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.2rem;
  padding: 1.4rem 1.5rem 1.5rem;
}
.project__meta h4 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.45rem; }
.project__meta p { color: var(--muted); font-size: 0.93rem; max-width: 40rem; }
.project__tag {
  flex-shrink: 0;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ice);
  border: 1px solid rgba(187, 231, 250, 0.4);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  transition: background 0.35s, color 0.35s, transform 0.35s var(--ease);
}
.project:hover .project__tag { background: var(--ice); color: var(--ink); transform: translateY(-2px); }

.project--quote {
  display: flex; align-items: center;
  background: linear-gradient(150deg, var(--ink-3), var(--ink-2));
  padding: clamp(1.8rem, 4vw, 3rem);
}
.project--quote blockquote p {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 800; text-transform: uppercase; line-height: 1.05;
  margin-bottom: 1.2rem;
}
.project--quote footer { color: var(--muted); font-size: 0.98rem; max-width: 26rem; }

/* ---------- contact ---------- */
.contact {
  text-align: center;
  padding-block: clamp(7rem, 18vh, 12rem);
  overflow: hidden;
}
.contact__rings { position: absolute; inset: 0; pointer-events: none; }
.contact__rings span {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(187, 231, 250, 0.09);
  transform: translate(-50%, -50%);
  animation: ringPulse 8s var(--ease) infinite;
}
.contact__rings span:nth-child(1) { width: 30vw; height: 30vw; }
.contact__rings span:nth-child(2) { width: 52vw; height: 52vw; animation-delay: 0.8s; }
.contact__rings span:nth-child(3) { width: 74vw; height: 74vw; animation-delay: 1.6s; }
.contact__title {
  font-size: clamp(2.6rem, 7.5vw, 5.6rem);
  font-weight: 800; text-transform: uppercase; line-height: 1.02;
  margin: 0.8rem 0 2.6rem;
  position: relative; z-index: 1;
}
.contact .btn { position: relative; z-index: 1; }

/* contact form */
.contact-form {
  position: relative; z-index: 1;
  max-width: 620px; margin: 0 auto;
  text-align: left;
  display: grid; gap: 1.1rem;
  grid-template-columns: 1fr 1fr;
}
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }
/* country dial code sits beside the number so overseas clients can be reached */
.phone { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.6rem; }
.phone__code { text-align: center; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.contact-form label {
  font-family: var(--font-head);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ice);
}
.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem; color: var(--white);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  width: 100%;
  transition: border-color 0.3s, background 0.3s;
}
.contact-form textarea { resize: vertical; min-height: 3.4rem; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--ice);
  background: rgba(187, 231, 250, 0.05);
}
.contact-form input:user-invalid,
.contact-form textarea:user-invalid { border-color: rgba(249, 120, 120, 0.6); }
/* honeypot — hidden from people, catches bots that fill everything */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.field__err {
  color: #FF8B7B;
  font-size: 0.8rem; line-height: 1.4;
  margin-top: 0.4rem; min-height: 1.1em;
}
.contact-form .is-invalid {
  border-color: rgba(255, 139, 123, 0.75);
  background: rgba(255, 139, 123, 0.05);
}
.contact-form .is-invalid:focus { border-color: #FF8B7B; }
.contact-form__note.is-ok { color: var(--ice); }
.contact-form__note.is-err { color: #FF8B7B; }
.contact-form__note a { color: inherit; border-bottom: 1px solid currentColor; }
.contact-form button[type="submit"]:disabled { opacity: 0.55; cursor: wait; }

.contact-form__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: 0.4rem;
}
.contact-form .btn { cursor: pointer; }
.contact-form__note {
  color: var(--ice); font-size: 0.9rem; margin: 0;
  min-height: 1.2em;
}
@media (max-width: 620px) {
  .contact-form { grid-template-columns: 1fr; }
}

/* ---------- things we've learned: one-at-a-time spotlight ---------- */
.learned__deck { max-width: 1000px; margin: clamp(1.4rem, 3vw, 2.2rem) auto 0; }
/* all statements share one grid cell: height = tallest, so no layout shift */
.learned__stage {
  display: grid;
  font-size: clamp(1.5rem, 4.4vw, 3rem);
  /* the band the statements roll through — without this they'd travel over
     the eyebrow above and the tabs below */
  overflow: hidden;
}
/* Statements type themselves out a word at a time. Only the active line is
   in play; the rest sit at zero opacity in the same grid cell. */
.learned__q {
  grid-area: 1 / 1;
  font-family: var(--font-head);
  font-size: 1em; font-weight: 800;
  line-height: 1.12; letter-spacing: -0.01em;
  color: var(--white);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.learned__q.is-active { opacity: 1; }

/* Words are hidden outright rather than faded in place, so the line grows
   left-to-right the way typing does and the caret keeps pace with it. The
   hiding is scoped to .is-typewriter, which the script only sets once it is
   actually able to type — otherwise a JS failure would blank the section. */
.is-typewriter .learned__w { display: none; }
.is-typewriter .learned__w.is-typed {
  display: inline-block;
  animation: learnedWord 0.22s var(--ease) both;
}
.learned__caret { display: none; }
.is-typewriter .learned__caret { display: inline-block; }
@keyframes learnedWord {
  from { opacity: 0; transform: translateY(0.14em); }
  to   { opacity: 1; transform: none; }
}

.learned__caret {
  vertical-align: baseline;
  width: 0.07em; height: 0.82em;
  margin-left: 0.02em;
  background: var(--ice);
  translate: 0 0.06em;
  animation: learnedCaret 0.5s steps(1) infinite;   /* quick while typing */
}
/* once the line is complete the caret slows to a resting blink */
.learned__q.is-done .learned__caret { animation-duration: 1.1s; }
@keyframes learnedCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.learned__tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.learned__tab {
  border: 1px solid var(--line); border-radius: 999px;
  background: none; cursor: pointer;
  padding: 0.42rem 0.85rem;
  font-family: var(--font-head);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.learned__tab:hover { color: var(--white); border-color: rgba(187, 231, 250, 0.4); }
.learned__tab.is-active {
  color: var(--ink); background: var(--ice); border-color: var(--ice);
}
.learned__tab:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

/* ---------- capabilities: lede + offers ---------- */
.caps-lede {
  max-width: 860px; margin: 0 auto;
  display: grid; gap: 1rem; text-align: center;
}
.caps-lede p {
  color: var(--muted);
  font-size: clamp(0.98rem, 1.7vw, 1.1rem); line-height: 1.65;
}
.caps-lede .caps-lede__lead {
  color: var(--white);
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.35;
}
.offers {
  list-style: none;
  max-width: 1100px; margin: clamp(2.6rem, 6vw, 4.2rem) auto 0;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.offer {
  border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  transition: transform 0.5s var(--ease), border-color 0.5s;
}
.offer:hover { transform: translateY(-6px); border-color: rgba(187, 231, 250, 0.4); }
.offer__n {
  font-family: var(--font-head);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--ice); opacity: 0.7;
}
.offer h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700;
  margin: 0.9rem 0 0.6rem;
}
.offer p { color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
.caps-close { text-align: center; margin-top: clamp(2.6rem, 6vw, 4rem); }
.caps-close__line {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 3.2vw, 2.1rem); font-weight: 700;
  color: var(--white);
}
.caps-close__goal {
  color: var(--ice);
  font-size: clamp(1rem, 2vw, 1.2rem); margin-top: 0.7rem;
}

/* ---------- the allergy list ---------- */
/* same 1200px measure as .section-head so it lines up with Philosophy
   and Capabilities once the viewport is wider than the container */
.allergic { isolation: isolate; overflow: hidden; }
.allergic__inner { max-width: 1200px; margin: 0 auto; }

/* a drifting pollen field — the thing you'd actually be allergic to */
.sec-tex--dots {
  inset: -30% -12%;
  background-image:
    radial-gradient(circle, rgba(187, 231, 250, 1) 2.6px, transparent 2.8px),
    radial-gradient(circle, rgba(187, 231, 250, 0.85) 1.7px, transparent 1.9px),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 1.1px, transparent 1.3px);
  background-size: 132px 132px, 78px 78px, 51px 51px;
  background-position: 0 0, 41px 26px, 19px 63px;
  opacity: 0.42;
  animation: pollen 30s linear infinite;
}
@keyframes pollen { to { transform: translate3d(18px, -132px, 0); } }

/* a few spores drift free of the field, larger and slower */
.allergic__inner { position: relative; }
.spore {
  position: absolute; border-radius: 50%;
  background: var(--ice);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;              /* drift behind the chips, never across the words */
  filter: blur(0.3px);
  animation: sporeFloat var(--dur, 16s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes sporeFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.16; }
  50%      { transform: translate3d(var(--dx, 14px), var(--dy, -22px), 0) scale(1.35); opacity: 0.55; }
}

.allergic__title {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 4.4vw, 3rem);
  font-weight: 800; line-height: 1.1;
  margin-top: 0.7rem; max-width: 900px;
}
.allergens {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  max-width: 1000px;
}
.allergens li {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.7rem 1.3rem;
  font-family: var(--font-head);
  font-size: clamp(0.9rem, 1.6vw, 1.05rem); font-weight: 600;
  color: var(--muted); cursor: default;
  text-decoration: line-through 1.5px transparent;
  transition: color 0.35s, border-color 0.35s, text-decoration-color 0.35s;
}
.allergens li:hover {
  color: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.1);
  text-decoration-color: var(--ice);
  /* a small flinch, as if the chip reacted to being touched */
  animation: itch 0.42s var(--ease);
}
@keyframes itch {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30%      { transform: translate3d(-1.5px, 0, 0) rotate(-1.1deg); }
  65%      { transform: translate3d(1.5px, 0, 0) rotate(1.1deg); }
}

/* ---------- contact: a small warning ---------- */
.warning {
  position: relative; z-index: 1;
  max-width: 620px; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem);
  text-align: left;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid var(--ice);
}
.warning__label {
  font-family: var(--font-head);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ice); margin-bottom: 0.7rem;
}
.warning__text {
  color: var(--muted);
  font-size: clamp(0.95rem, 1.7vw, 1.05rem); line-height: 1.65;
}
.warning__kicker {
  color: var(--white);
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  margin-top: 0.8rem;
}

/* ---------- work: 3D perspective wall ---------- */
.wall {
  position: relative;
  height: clamp(560px, 88vh, 900px);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
  perspective: 1200px;
  perspective-origin: 50% 45%;
}
.wall__stage {
  position: absolute;
  top: 50%; left: 50%;
  width: 150%; height: 265%;
  display: flex; justify-content: center;
  gap: clamp(8px, 0.85vw, 14px);
  transform-style: preserve-3d;
  /* --z is driven by scroll in JS */
  transform: translate(-50%, -50%) rotateX(14deg) rotateZ(-13deg) translateZ(var(--z, -560px));
  will-change: transform;
}
.wall__col { flex: 1 1 0; min-width: 0; overflow: hidden; }
.wall__track {
  display: flex; flex-direction: column;
  animation: wallUp var(--dur, 44s) linear infinite;
  will-change: transform;
}
/* every other column drifts the other way for depth */
.wall__col:nth-child(even) .wall__track { animation-direction: reverse; }
/* margin (not gap) so translateY(-50%) lands exactly on the seam */
.wcard {
  position: relative;
  width: 100%; aspect-ratio: 9 / 16;
  margin-bottom: clamp(10px, 1.1vw, 18px);
  border-radius: clamp(8px, 0.9vw, 14px);
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.wcard img, .wcard video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@keyframes wallUp { to { transform: translate3d(0, -50%, 0); } }

/* vignette: keeps edges dark so the wall reads as depth, not a grid */
.wall__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 62% at 50% 46%, transparent 22%, rgba(6, 9, 15, 0.62) 68%, var(--ink) 96%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 14%, transparent 66%, rgba(6, 9, 15, 0.86) 88%, var(--ink) 100%);
}

@media (max-width: 900px) {
  .wall { height: clamp(460px, 72vh, 620px); perspective: 880px; }
  .wall__stage { width: 170%; height: 230%; }
  /* 8 tilted columns is too dense on a tablet */
  .wall__col:nth-child(n + 7) { display: none; }
}
@media (max-width: 560px) {
  .wall__stage { width: 210%; }
  .wall__col:nth-child(n + 5) { display: none; }
}

/* ---------- about page ---------- */
.nav__link.is-current { color: var(--ice); }
.page-head { padding-top: clamp(8rem, 20vh, 13rem); }
.page-title {
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  font-weight: 800; text-transform: uppercase; line-height: 1.02;
  margin-top: 0.8rem;
}
.essay { padding-top: 0; }
.essay__inner {
  max-width: 720px; margin: 0 auto;
  display: grid; gap: clamp(1.5rem, 3.4vw, 2.2rem);
}
.essay p {
  color: var(--muted);
  font-size: clamp(1rem, 1.9vw, 1.12rem); line-height: 1.75;
}
.essay .essay__lead {
  color: var(--white);
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.35;
}
.essay__list {
  list-style: none;
  display: grid; gap: 0.55rem;
  padding-left: clamp(1rem, 2.5vw, 1.7rem);
  border-left: 2px solid var(--line);
}
.essay__list li {
  font-family: var(--font-head); font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 2.1vw, 1.22rem); line-height: 1.4;
}
.essay .essay__aside {
  color: var(--ice);
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 1.22rem);
  margin-top: -0.9rem;
}
.essay .essay__beat {
  color: var(--white);
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.7rem, 5.2vw, 3.1rem);
  line-height: 1.08; letter-spacing: -0.01em;
}
.essay .essay__beat--sm { font-size: clamp(1.4rem, 3.6vw, 2.2rem); }
.essay .essay__close {
  color: var(--white);
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 2.2rem); line-height: 1.25;
  padding-top: clamp(1.1rem, 2.2vw, 1.7rem);
  border-top: 1px solid var(--line);
}
/* ---------- legal pages ----------
   The essay styles are pitched for the About page's prose. Legal documents
   need numbered headings, quieter bullets and tighter rhythm, so they get
   their own scoped layer rather than bending the essay ones out of shape. */
.legal .essay__inner { gap: clamp(1rem, 2.2vw, 1.35rem); }
.legal__date {
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ice);
}
.essay .legal__intro { color: rgba(255, 255, 255, 0.82); }
.legal__h {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.32rem);
  line-height: 1.3; color: var(--white);
  margin-top: clamp(1.3rem, 2.8vw, 2rem);
}
.legal__list {
  list-style: none;
  display: grid; gap: 0.55rem;
  padding-left: clamp(1rem, 2.5vw, 1.6rem);
  border-left: 2px solid var(--line);
}
.legal__list li {
  color: var(--muted);
  font-size: clamp(0.98rem, 1.85vw, 1.08rem); line-height: 1.65;
}
.legal strong { color: rgba(255, 255, 255, 0.9); font-weight: 700; }
.legal a:not(.legal__mail) {
  color: var(--ice);
  border-bottom: 1px solid rgba(187, 231, 250, 0.35);
}
.legal a:not(.legal__mail):hover { border-bottom-color: var(--ice); }
.essay .legal__contact {
  padding-top: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(0.6rem, 1.4vw, 1rem);
  border-top: 1px solid var(--line);
}

.about-cta { text-align: center; }
.about-cta__title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  font-weight: 800; text-transform: uppercase; line-height: 1.05;
  margin: 0.8rem 0 2.4rem;
}

/* ---------- philosophy: icon rail ----------
   Three nodes wired on one line. Hover/focus a node and its line replaces the
   caption below. Pure CSS — the copy lives inside each button, so it is in the
   DOM for search and screen readers whether or not anyone interacts. */
.rail__track {
  position: relative;
  display: flex; align-items: flex-start;
  gap: clamp(0.6rem, 3vw, 2.4rem);
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  padding-bottom: clamp(3.4rem, 6vw, 4rem);
  max-width: 560px;
}
/* the wire */
.rail__track::before {
  content: ""; position: absolute;
  left: 8%; right: 8%; top: clamp(23px, 3.4vw, 34px);
  height: 1px; background: var(--line); z-index: 0;
}
/* deliberately NOT positioned: the detail below is absolute and must anchor to
   .rail__track, not to its own button. In-flow children still paint over the wire. */
.rail__node {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.rail__icon {
  width: clamp(46px, 6.8vw, 68px); aspect-ratio: 1;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--ink-2);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease),
              transform 0.4s var(--ease);
}
.rail__icon img { width: 54%; height: 54%; object-fit: contain; }
.rail__label {
  font-family: var(--font-head);
  font-size: clamp(0.7rem, 1.5vw, 0.82rem); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.rail__node:hover .rail__icon,
.rail__node:focus-visible .rail__icon,
.rail__node.is-active .rail__icon {
  border-color: var(--ice); background: var(--ink-3); transform: translateY(-4px);
}
.rail__node:hover .rail__label,
.rail__node:focus-visible .rail__label,
.rail__node.is-active .rail__label { color: var(--white); }
.rail__node:focus-visible { outline: none; }
.rail__node:focus-visible .rail__icon { box-shadow: 0 0 0 3px rgba(187, 231, 250, 0.35); }

/* every node's copy sits in the same slot under the wire */
.rail__detail {
  position: absolute; left: 0; right: 0;
  bottom: 0; text-align: left;
  color: var(--muted); font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.7vw, 1.02rem); line-height: 1.6;
  letter-spacing: normal; text-transform: none;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.rail__node.is-active .rail__detail,
.rail__node:hover .rail__detail,
.rail__node:focus-visible .rail__detail { opacity: 1; }
/* the cursor always wins: a previously tapped node lets go the moment the
   pointer is over the rail, so only one icon is ever lit */
.rail__track:hover .rail__node.is-active:not(:hover) .rail__detail { opacity: 0; }
.rail__track:hover .rail__node.is-active:not(:hover) .rail__icon {
  border-color: var(--line); background: var(--ink-2); transform: none;
}
.rail__track:hover .rail__node.is-active:not(:hover) .rail__label { color: var(--muted); }

@media (max-width: 560px) {
  .rail__track { padding-bottom: 5rem; }
}

/* touch devices get no hover, so the nodes must read as tappable on sight */
@media (pointer: coarse) {
  .rail__icon {
    border-color: rgba(187, 231, 250, 0.42);
    background: var(--ink-3);
    box-shadow: 0 0 0 4px rgba(187, 231, 250, 0.06);
  }
  .rail__label { color: rgba(255, 255, 255, 0.78); }
  .rail__node:active .rail__icon { transform: scale(0.92); border-color: var(--ice); }
  /* quiet pulse on the first icon so the row reads as interactive before any tap */
  .rail__node:first-child .rail__icon::after {
    content: ""; position: absolute; inset: -1px;
    border-radius: 50%; border: 1px solid var(--ice);
    animation: tapHint 2.6s var(--ease) infinite;
  }
  .rail__track:hover .rail__node:first-child .rail__icon::after,
  .rail__node.is-active:first-child .rail__icon::after { animation: none; opacity: 0; }
  .rail__icon { position: relative; }
  /* make room above the row so the hint never sits on an icon */
  .rail__track { padding-top: 1.75rem; }
  .rail__track::before { top: calc(1.75rem + clamp(23px, 3.4vw, 34px)); }
  .rail__track::after {
    content: "Tap an icon";
    position: absolute; left: 0; top: 0;
    font-family: var(--font-head);
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(187, 231, 250, 0.55);
  }
}
@keyframes tapHint {
  0%      { opacity: 0.9; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(1.45); }
}

/* ---------- responsive rhythm: tighter, faster on small screens ---------- */
@media (max-width: 760px) {
  section { padding: clamp(3.2rem, 8vh, 4.6rem) var(--pad); }
  .section-head { margin-bottom: clamp(1.6rem, 5vw, 2.4rem); }
  .hero { padding-top: 5.5rem; }
  /* shorter travel = snappier reveals, less dead space while scrolling */
  [data-reveal] { transform: translateY(26px); }
  [data-reveal] {
    transition-duration: 0.6s;
    transition-delay: calc(var(--d, 0) * 70ms);
  }
  .learned__deck { margin-top: 1.2rem; }
  .faq__groups { margin-top: clamp(1.8rem, 5vw, 2.4rem); gap: clamp(1.6rem, 5vw, 2.2rem); }
  .offers { margin-top: clamp(1.8rem, 5vw, 2.4rem); }
  .caps-lede { text-align: left; }
  .contact__rings { display: none; }
}

/* ---------- FAQ ---------- */
.faq__head { max-width: 860px; }
/* a full sentence as the heading — a notch down from the other section titles */
.faq__title { font-size: clamp(1.7rem, 4.6vw, 3.1rem); }
.faq__sub {
  color: var(--muted); margin-top: 1rem;
  font-size: clamp(1rem, 1.9vw, 1.12rem);
}
.faq__groups {
  display: grid; gap: clamp(2.2rem, 4.5vw, 3.4rem);
  margin-top: clamp(2.6rem, 5vw, 4rem);
  max-width: 900px;
}
.faq__group-name {
  font-family: var(--font-head);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ice); margin-bottom: 0.9rem;
}
.faq__item { border-top: 1px solid var(--line); }
.faq__group .faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; padding: clamp(1rem, 2vw, 1.35rem) 0;
  font-family: var(--font-head);
  font-size: clamp(1rem, 2vw, 1.22rem); font-weight: 700; line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--white); }
.faq__item[open] .faq__q { color: var(--white); }
.faq__q:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; }
/* plus that becomes a minus */
.faq__sign {
  position: relative; flex-shrink: 0;
  width: 16px; height: 16px; margin-top: 0.28em;
}
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--ice); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.faq__sign::before { width: 16px; height: 2px; }
.faq__sign::after { width: 2px; height: 16px; }
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a { padding: 0 0 clamp(1.1rem, 2.2vw, 1.5rem); max-width: 68ch; }
.faq__a p {
  color: var(--muted);
  font-size: clamp(0.98rem, 1.8vw, 1.08rem); line-height: 1.7;
}
.faq__a a { color: var(--ice); border-bottom: 1px solid rgba(187, 231, 250, 0.4); }
.faq__item[open] .faq__a { animation: faqIn 0.4s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
.faq__foot {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--ice);
}

/* ---------- work showcase page ---------- */
.work__cta { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }

.work-open { text-align: center; }
.work-open__title {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 4.6vw, 3rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -0.01em;
  margin-top: 1.1rem;
}
.work-open__title span { color: var(--ice); }
.work-open__sub {
  color: var(--muted);
  font-size: clamp(1rem, 1.9vw, 1.15rem); line-height: 1.65;
  max-width: 60ch; margin: clamp(1.1rem, 2.4vw, 1.6rem) auto 0;
}

.case {
  display: grid;
  grid-template-columns: minmax(260px, 33%) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
}
/* the brand pins while its story scrolls past */
.case__rail { position: sticky; top: clamp(6.5rem, 15vh, 9.5rem); align-self: start; }
/* the brand sits as a small-caps label; the stat carries the visual weight */
.case__eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ice);
}
.case__tag {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700; line-height: 1.2;
  margin-top: 0.7rem;
}
/* partner credit, deliberately quiet — a footnote, not a second headline */
.case__credit {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.5;
  margin-top: 0.55rem;
}
.metric { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.metric__val {
  font-family: var(--font-head);
  font-size: clamp(3.2rem, 7.5vw, 5.4rem);
  font-weight: 800; line-height: 1; color: var(--ice);
  display: flex; align-items: baseline;
}
.metric__unit { font-size: 0.5em; margin-left: 0.06em; }
/* the multiplication sign reads smaller than % at the same size */
.metric__unit--x { font-size: 0.62em; margin-left: 0.04em; }
.metric__quote {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800; line-height: 1.12; color: var(--white);
}
.metric__label {
  color: var(--muted); font-size: 0.9rem; line-height: 1.55;
  margin-top: 0.7rem; max-width: 30ch;
}
/* a second figure inside the label, pitched to echo the headline number */
.metric__hi {
  font-family: var(--font-head);
  font-weight: 800; font-size: 1.22em;
  color: var(--ice);
  letter-spacing: -0.01em;
}

/* JOY portrait stills sit in the slots the videos use elsewhere */
.joystill {
  aspect-ratio: 9 / 16;
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-3);
}
.joystill img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case__h {
  font-family: var(--font-head);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ice); margin-bottom: 0.9rem;
}
.case__block p {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.02rem, 1.9vw, 1.2rem); line-height: 1.7;
  max-width: 62ch;
}
.case__block + .case__block { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }

/* the line a skimmer reads even if they read nothing else */
.pullquote {
  margin-top: clamp(2rem, 4vw, 2.9rem);
  padding-left: clamp(1.1rem, 2.2vw, 1.8rem);
  border-left: 3px solid var(--ice);
  max-width: 54ch;
}
.pullquote p {
  font-family: var(--font-head);
  font-size: clamp(1.18rem, 2.5vw, 1.65rem);
  font-weight: 700; line-height: 1.32;
  color: var(--white);
}

/* media placeholders: labelled with the asset spec they expect */
.case__media {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
}
.ph {
  position: relative; overflow: hidden;
  border: 1px dashed rgba(187, 231, 250, 0.24);
  border-radius: clamp(10px, 1vw, 16px);
  background: linear-gradient(160deg, var(--ink-2), var(--ink-3));
  display: grid; place-items: center;
}
.ph::after {
  content: attr(data-ph);
  font-family: var(--font-head);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(187, 231, 250, 0.5);
  text-align: center; padding: 0 1rem;
}
.ph--wide { aspect-ratio: 16 / 9; grid-column: 1 / -1; }

/* ---------- Unboxed: two columns, opposite directions ---------- */
.ubwall {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(10px, 1vw, 16px);
  border: 1px solid var(--line);
  background:
    url(../assets/bg/bg-chevron.png) center 55% / min(62%, 620px) auto no-repeat,
    radial-gradient(120% 100% at 50% 0%, var(--ink-3) 0%, var(--ink-2) 55%, var(--ink) 100%);
  background-blend-mode: soft-light, normal;
  isolation: isolate;
}
.ubwall__stage {
  position: absolute; inset: 0;
  display: flex; justify-content: center;
  gap: clamp(8px, 1.1vw, 16px);
  padding: 0 clamp(8px, 1.1vw, 16px);
}
.ubwall__col { flex: 1 1 0; min-width: 0; overflow: hidden; }
.ubwall__track {
  display: flex; flex-direction: column;
  animation: ubUp var(--dur, 46s) linear infinite;
  will-change: transform;
}
/* second column runs the same loop backwards, so it reads as downward */
.ubwall__col--down .ubwall__track { animation-direction: reverse; }
@keyframes ubUp { to { transform: translate3d(0, -50%, 0); } }
/* margin rather than gap, so -50% lands exactly on the seam */
.ubcard {
  width: 100%; aspect-ratio: 4 / 5;
  margin-bottom: clamp(8px, 1.1vw, 16px);
  border-radius: clamp(6px, 0.7vw, 11px);
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.ubcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 16:9 is the desktop slot; on a phone that leaves only slivers of each card */
@media (max-width: 760px) {
  .ubwall { aspect-ratio: 4 / 5; }
}
/* soften where cards enter and leave */
.ubwall__veil {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(to bottom, var(--ink) 0%, transparent 13%, transparent 87%, var(--ink) 100%),
    radial-gradient(ellipse 95% 88% at 50% 50%, transparent 62%, rgba(6, 9, 15, 0.32) 100%);
}

/* ---------- looping portrait video ---------- */
.loopvid {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--line);
}
.loopvid__v {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
}
.loopvid__v.is-front { opacity: 1; }
/* the crossfade pair blends via JS-driven opacity, so no transition here */
.loopvid--fade .loopvid__v { will-change: opacity; }

/* sound + play controls */
.vctrls {
  position: absolute; right: 0.6rem; bottom: 0.6rem;
  display: flex; gap: 0.45rem; z-index: 2;
}
.vbtn {
  width: 2.2rem; height: 2.2rem; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(6, 9, 15, 0.55);
  backdrop-filter: blur(8px);
  color: var(--white);
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.25s var(--ease);
}
.vbtn:hover { background: rgba(6, 9, 15, 0.8); border-color: var(--ice); color: var(--ice); }
.vbtn:active { transform: scale(0.92); }
.vbtn:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.vbtn svg { width: 1.05rem; height: 1.05rem; display: block; }
/* each button shows one of two glyphs depending on state */
.vbtn__off { display: none; }
.vbtn.is-off .vbtn__on { display: none; }
.vbtn.is-off .vbtn__off { display: block; }
/* when audio is blocked, draw attention to the unmute control */
.vbtn--sound.is-off { border-color: var(--ice); color: var(--ice); }
.loopvid--sound.is-muted .vbtn--sound {
  animation: soundNudge 2.8s var(--ease) infinite;
}
@keyframes soundNudge {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(187, 231, 250, 0); }
  85%           { box-shadow: 0 0 0 6px rgba(187, 231, 250, 0.18); }
}
@media (pointer: coarse) {
  .vbtn { width: 2.6rem; height: 2.6rem; }
  .vbtn svg { width: 1.2rem; height: 1.2rem; }
}

/* ---------- C3 creative reel ---------- */
.reel { grid-column: 1 / -1; }
.reel__frame {
  position: relative; display: grid;
  aspect-ratio: 16 / 9;
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--line);
  touch-action: pan-y;              /* let JS own horizontal swipes */
  cursor: grab;
  position: relative;
}
.reel__frame:active { cursor: grabbing; }
/* blurred fill behind the slide: art that isn't exactly 16:9 keeps its full
   frame instead of sitting between two dead bars. Nothing is cropped - the
   sharp image on top is still object-fit: contain. */
.reel__frame::before {
  content: ""; position: absolute; inset: -6%;
  background: var(--reel-bg) center / cover no-repeat;
  filter: blur(34px) saturate(1.15) brightness(0.5);
  opacity: 0.9;
  z-index: 0;
  transition: background-image 0.4s var(--ease);
}
.reel__slide { z-index: 1; }
.reel__dots { position: relative; z-index: 2; }
.reel__slide {
  /* absolute, not a grid cell: a grid row sizes to the image's intrinsic
     height and overflows the 16:9 frame, which clipped the top of each slide */
  position: absolute; inset: 0;
  /* contain, never cover — the 1600x900 layouts must stay whole */
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0;
  transform: scale(0.97);
  filter: blur(8px);
  transition: opacity 0.9s var(--ease), transform 1.4s var(--ease), filter 0.9s var(--ease);
}
/* same fade-through-blur the rest of the site reveals with */
.reel__slide.is-active { opacity: 1; transform: scale(1); filter: blur(0); }
.reel__dots {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.5rem; margin-top: 0.9rem;
}
.reel__dot {
  width: 26px; height: 3px; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(187, 231, 250, 0.22);
  cursor: pointer;
  transition: background 0.35s var(--ease), width 0.35s var(--ease);
}
.reel__dot:hover { background: rgba(187, 231, 250, 0.5); }
.reel__dot.is-active { background: var(--ice); width: 40px; }
.reel__dot:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
@media (pointer: coarse) {
  .reel__dot { height: 5px; }
}
.ph--tall { aspect-ratio: 9 / 16; }
.ph > span {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(187, 231, 250, 0.07) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: phSweep 3.6s ease-in-out infinite;
}
@keyframes phSweep { to { transform: translateX(100%); } }

.legal__mail {
  color: var(--ice); font-family: var(--font-head); font-weight: 600;
  border-bottom: 1px solid rgba(187, 231, 250, 0.4);
  transition: border-color 0.3s var(--ease);
}
.legal__mail:hover { border-color: var(--ice); }

.pattern { text-align: center; }
.pattern__title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 800; text-transform: uppercase;
  line-height: 1.05; margin-top: 0.7rem;
}
.pattern__line {
  color: var(--muted);
  font-size: clamp(1rem, 1.9vw, 1.15rem); line-height: 1.7;
  max-width: 58ch; margin: clamp(1.8rem, 3.5vw, 2.6rem) auto 0;
}
.pattern__kicker {
  color: var(--ice);
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  max-width: 24ch; margin: clamp(1rem, 2vw, 1.4rem) auto 0;
}
.pattern__cta { margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }

@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; gap: 2rem; }
  .case__rail { position: static; }
  .case__media { grid-template-columns: 1fr; }
  .ph--tall { aspect-ratio: 4 / 5; }
}

/* ---------- cookie consent ---------- */
.consent {
  position: fixed; z-index: 300;
  left: var(--pad); right: var(--pad); bottom: clamp(1rem, 3vw, 1.8rem);
  max-width: 640px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: rgba(10, 15, 23, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform: translateY(140%);
  transition: transform 0.6s var(--ease);
}
.consent.is-in { transform: translateY(0); }
.consent[hidden] { display: none; }
.consent__text {
  flex: 1 1 260px;
  color: var(--muted); font-size: 0.86rem; line-height: 1.55;
}
.consent__text a { color: var(--ice); border-bottom: 1px solid rgba(187, 231, 250, 0.4); }
.consent__actions { display: flex; gap: 0.55rem; flex: 0 0 auto; }
.consent__btn {
  font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.7rem 1.15rem;
  border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(187, 231, 250, 0.4);
  background: transparent; color: var(--white);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.consent__btn--no:hover { border-color: rgba(255, 255, 255, 0.6); }
.consent__btn--yes { background: var(--ice); color: var(--ink); border-color: var(--ice); }
.consent__btn--yes:hover { background: #fff; border-color: #fff; }
.consent__btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; transform: none; }
}

/* ---------- showcase grid + expanded viewer ---------- */
.scgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  margin-top: clamp(2rem, 4.5vw, 3.2rem);
  list-style: none;
}
/* no-JS / pre-measure fallback: even rows, media cropped to a 4:5 cell.
   The script swaps this for real spans once it knows each file's shape. */
.sccard { aspect-ratio: 4 / 5; }
.scgrid.is-masonry { grid-auto-rows: 8px; }
.scgrid.is-masonry .sccard { aspect-ratio: auto; grid-row-end: span var(--span, 40); }

.sccard__btn {
  position: relative; display: block;
  width: 100%; height: 100%; padding: 0;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden; cursor: pointer;
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
}
.sccard__btn:hover { transform: translateY(-4px); border-color: rgba(187, 231, 250, 0.5); }
.sccard__btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.sccard__m { width: 100%; height: 100%; object-fit: cover; display: block; }
/* play glyph fades out once the tile is actually rolling */
.sccard__play {
  position: absolute; left: 50%; top: 50%;
  width: clamp(34px, 4vw, 48px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(6, 9, 15, 0.35);
  border-radius: 999px;
  backdrop-filter: blur(3px);
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.sccard__play svg { width: 45%; height: 45%; margin-left: 6%; }
.sccard.is-playing .sccard__play { opacity: 0; }

.scview {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 11, 0.97);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.scview[hidden] { display: none; }
.scview.is-open { opacity: 1; }
body.sc-open { overflow: hidden; }

/* One scroll-snapping row. Each slide is only as wide as its own media, so
   whatever is left of the viewport is filled by the neighbours peeking in —
   a fixed slide width would park a portrait clip's neighbours off-screen.
   The 50% side padding is what lets the first and last items reach centre. */
.scview__rail {
  display: flex; align-items: center;
  gap: clamp(0.8rem, 2.4vw, 2rem);
  width: 100%; height: 100%;
  padding-inline: 50%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* deliberately no `scroll-behavior: smooth` — it animates every programmatic
     scroll, and an interrupted one strands the rail between snap points. The
     script asks for smooth per call instead. */
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.scview__rail::-webkit-scrollbar { display: none; }
.scslide {
  flex: 0 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center;
}
.scslide__m {
  max-width: 84vw; max-height: 82vh;
  width: auto; height: auto;
  display: block;
  border-radius: clamp(10px, 1vw, 18px);
  background: var(--ink-3);
  opacity: 0.35;
  transition: opacity 0.4s var(--ease);
}
.scslide.is-active .scslide__m { opacity: 1; }

.scview__btn {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s;
}
.scview__btn:hover { background: rgba(187, 231, 250, 0.14); border-color: var(--ice); }
.scview__btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.scview__btn svg { width: 21px; height: 21px; }
.scview__close { top: clamp(0.9rem, 2.5vw, 1.6rem); right: clamp(0.9rem, 2.5vw, 1.6rem); }
.scview__sound { top: clamp(0.9rem, 2.5vw, 1.6rem); right: calc(clamp(0.9rem, 2.5vw, 1.6rem) + 58px); }
.scview__sound .scview__off { display: none; }
.scview__sound.is-off .scview__on { display: none; }
.scview__sound.is-off .scview__off { display: block; }
/* nothing to mute on a still — the control goes quiet rather than lying */
.scview__sound[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }
.scview__nav { top: 50%; transform: translateY(-50%); }
.scview__nav--prev { left: clamp(0.5rem, 2vw, 1.4rem); }
.scview__nav--next { right: clamp(0.5rem, 2vw, 1.4rem); }
.scview__nav[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }
.scview__count {
  position: absolute; left: 50%; bottom: clamp(0.9rem, 2.5vw, 1.5rem);
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.2em; color: var(--muted);
}

@media (max-width: 760px) {
  .scgrid { grid-template-columns: repeat(2, 1fr); }
  /* on a phone the media should take the room the arrows no longer need */
  .scslide__m { max-width: 92vw; max-height: 76vh; }
  .scview__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sccard__play { opacity: 1 !important; }
}

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 2.4rem var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  justify-content: space-between;
}
.footer__logo { display: inline-flex; align-items: center; }
.footer__logo .smik-logo { height: 2.8rem; }
/* the copyright drops to its own centred row so quick links can share the top */
.footer__copy {
  flex-basis: 100%; text-align: center;
  color: var(--muted); font-size: 0.8rem;
}
.footer__meta { display: flex; align-items: center; gap: 0.6rem 1.6rem; flex-wrap: wrap; }
.footer__quick { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.footer__quick-label {
  font-family: var(--font-head);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ice);
}
.footer__quick a {
  color: var(--muted); font-size: 0.8rem;
  transition: color 0.3s var(--ease);
}
.footer__quick a:hover { color: var(--ice); }
.footer__quick a:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; }
.footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.footer__social svg { width: 17px; height: 17px; display: block; }
.footer__social:hover { color: var(--ice); border-color: var(--ice); background: rgba(187, 231, 250, 0.08); }
.footer__social:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
/* legal links take their own row under the footer's main line */
.footer__legal {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 1.5rem; justify-content: center;
  padding-top: 1.3rem; margin-top: 0.3rem;
  border-top: 1px solid var(--line);
}
.footer__legal a {
  color: var(--muted); font-size: 0.8rem;
  transition: color 0.3s var(--ease);
}
.footer__legal a:hover { color: var(--ice); }
.footer__legal a:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; }
/* Reopens the consent banner. Hidden until the script confirms it is wired up,
   so it can never sit there as a control that does nothing. */
.footer__cookies { display: none; }
.has-consent-control .footer__cookies {
  display: inline;
  padding: 0; border: 0; background: none;
  font-family: inherit; font-size: 0.8rem;
  color: var(--muted); cursor: pointer;
  transition: color 0.3s var(--ease);
}
.footer__cookies:hover { color: var(--ice); }
.footer__cookies:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; }
.footer__entity {
  flex-basis: 100%; text-align: center;
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.74rem; letter-spacing: 0.04em;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .grid { grid-template-columns: 1fr; }
  .project--wide { grid-column: span 1; }
  .project--wide .project__media { aspect-ratio: 16 / 10; }
  .hero__icons {
    position: static; transform: none;
    flex-direction: row; flex-wrap: wrap; gap: 1.6rem 2.4rem;
    margin-top: 2.4rem; opacity: 0.9;
  }
  .hero__iconlabel { font-size: 0.68rem; }
  .footer { justify-content: center; text-align: center; }
  .footer__meta { justify-content: center; width: 100%; }
}

/* ---------- tablet: fill the 620–900 gap ---------- */
@media (min-width: 621px) and (max-width: 900px) {
  .caps-scroller { height: clamp(200px, 34vh, 300px); }
  .founders { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr 1fr; }
}

/* Note: content-visibility was evaluated for offscreen paint-shedding but
   removed — on this scroll-driven layout it caused scroll-anchoring drift
   (jumpy scrollbar), which hurts the seamless-scroll goal more than it helps. */

/* ---------- perf-lite: touch / low-core / low-memory devices ----------
   Blur is the most GPU-costly filter on mobile — drop it, keep motion. */
@media (pointer: coarse) {
  [data-reveal] {
    filter: none;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  [data-reveal].is-in { filter: none; }
}
.perf-lite [data-reveal] {
  filter: none !important;
  transition: opacity 0.6s var(--ease), transform 0.55s var(--ease) !important;
}
.perf-lite [data-reveal].is-in { filter: none !important; }
.perf-lite .nav { backdrop-filter: none; background: rgba(6, 9, 15, 0.92); }
.perf-lite .cap-line { will-change: opacity; }        /* not filter */
.perf-lite .sec-tex { display: none; }                /* skip decorative textures */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-load], .hero__line[data-load] > span {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .manifesto__text .w { color: var(--white); }
  .smik-eye { animation: none; }
  .sec-tex--dots { animation: none; }
  .ubwall__track { animation: none !important; }
  .allergens li:hover { animation: none; }
  .reel__slide { transition: opacity 0.01ms; transform: none; filter: none; }
  /* wall holds still, but stays legible as a flat gallery */
  .wall__track { animation: none !important; }
  .wall__stage {
    transform: translate(-50%, -50%) rotateX(0deg) rotateZ(0deg) translateZ(0) !important;
    width: 100%; height: auto;
  }
  /* deck can't cycle — stack every statement so none are hidden */
  .learned__stage { display: block; overflow: visible; font-size: clamp(1rem, 2.5vw, 1.3rem); }
  .learned__q {
    opacity: 1 !important; transform: none !important; filter: none !important;
    margin-bottom: 0.65rem;
  }
  /* nothing types — every word is simply there, and the caret goes away */
  .learned__w { display: inline-block !important; animation: none !important; }
  .learned__caret { display: none; }
  .learned__tabs { display: none; }
  /* show every capability as a static list, no scroll or blur */
  .caps-scroller {
    height: auto; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .caps-reel { transform: none !important; }
  .cap-line {
    filter: none !important; opacity: 1 !important;
    color: var(--white);
  }
}