/* ============================================================
   SVNTO — homepage (Framer SVNTO-WEBSITE-2 recreation)
   Minimal editorial system: white paper, ink text, hairlines,
   black pill buttons, red reserved for the logo mark.
   studio.html keeps styles.css — this file is homepage-only.
   ============================================================ */
/* brand fonts — local Space Grotesk (from "new changes/fonts") */
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/SpaceGrotesk-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/SpaceGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/SpaceGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/SpaceGrotesk-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/SpaceGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #FBFBFA;
  --ink: #111111;
  --gray: #6B6B68;
  --gray-dim: #9A9A96;
  --hairline: #E6E6E2;
  --tile: #F4F4F2;
  --red: #EA0002;
  --radius: 14px;
  --gutter: 8vw;
  --font: "Space Grotesk", "Helvetica Neue", sans-serif;
  --logo-font: "Space Grotesk", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }

/* ---------- type helpers ---------- */
.k-label { /* small meta label */
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gray);
}
.k-h { /* section heading — SemiBold, ink, sized to the reference recordings */
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.2rem, 4.6vw, 4.3rem);
  letter-spacing: -0.02em; line-height: 1.04;
  color: var(--ink);
}
.badge { /* small pill badge (● Works 2026 / How we work?) */
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--ink);
  background: var(--tile); border-radius: 999px; padding: 7px 14px;
}
.badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.k-note { /* small right-hand note — subheading, Regular */
  font-size: 15px; font-weight: 400; color: var(--ink); max-width: 300px; line-height: 1.5;
}

/* ---------- buttons ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--red); color: #fff;
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  padding: 15px 28px; border-radius: 999px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.pill:hover { transform: translateY(-2px); opacity: 0.9; }
.pill i { font-style: normal; font-size: 12px; }
.tlink { /* text link with arrow */
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  transition: opacity 0.25s ease;
}
.tlink:hover { opacity: 0.6; }
.tlink i { font-style: normal; font-size: 12px; }


/* ---------- nav ---------- */
/* slim, light, integrated with the hero (reference: r6 navbar recording) */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center;
  padding: 13px var(--gutter);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(20, 20, 20, 0.06);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 var(--hairline);
}
.nav__logo { display: flex; align-items: center; gap: 7px; }
.nav__logo img { display: block; }
.nav__logo .logo-mark { height: 19px; width: auto; }
.nav__logo .logo-word { height: 20px; width: auto; }
.nav__links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav__links a {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
.nav__links a:hover { color: var(--red); text-decoration: underline; }
.nav__links a i { font-style: normal; font-size: 11px; }
.nav__burger {
  display: none; margin-left: auto;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: #fff;
}
.nav__burger span { width: 15px; height: 1.5px; background: var(--ink); transition: transform 0.3s ease; }
.nav__burger.is-open span:first-child { transform: translateY(3.2px) rotate(45deg); }
.nav__burger.is-open span:last-child { transform: translateY(-3.2px) rotate(-45deg); }

.mobmenu {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.mobmenu.is-open { opacity: 1; pointer-events: auto; }
.mobmenu a {
  font-size: clamp(1.8rem, 8vw, 3rem); font-weight: 500; text-transform: uppercase;
  letter-spacing: -0.02em; padding: 10px 0; border-bottom: 1px solid var(--hairline);
  opacity: 0; transform: translateY(20px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.mobmenu.is-open a { opacity: 1; transform: none; }
.mobmenu.is-open a:nth-child(2) { transition-delay: 0.05s; }
.mobmenu.is-open a:nth-child(3) { transition-delay: 0.1s; }
.mobmenu.is-open a:nth-child(4) { transition-delay: 0.15s; }
.mobmenu.is-open a:nth-child(5) { transition-delay: 0.2s; }

/* ---------- hero — full-viewport 3:4 image wall (r6 spec; motion ref: "New Header .mov") ----------
   Native scroll stays active: .herowrap is tall, .hero is sticky inside it, and the
   wall's zoom-out maps to scroll progress through the wrapper — no pin, no scroll lock. */
.herowrap { position: relative; height: 130vh; }
.hero {
  position: sticky; top: 0;
  width: 100%; height: 100vh; min-height: 620px;
  overflow: hidden; background: var(--bg);
}
.hero-gallery {
  position: absolute; inset: 0; z-index: 1;
  perspective: 1500px; perspective-origin: 50% 50%;
  /* the wall is draggable; overlays above it remain pointer-events: none */
  cursor: grab; touch-action: pan-y;
}
.hero-gallery.is-dragging { cursor: grabbing; }
.hero-gallery.is-dragging .htile img { transition: none; }
.hero__plane {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d; will-change: transform;
}
/* one flat panel of the curved wall. Centred on the plane origin by its own margins,
   then seated on the cylinder by its transform — so rotation happens about the barrel
   axis, not about the panel. Tiles inside carry no transform of their own. */
.hcol {
  position: absolute; left: 50%; top: 50%;
  width: var(--tileW, 232px);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
/* one gallery card — strict 3:4 image with its campaign mood beneath.
   Square corners and a flat frame, matching the reference recording. */
.htile {
  position: relative;
  width: 100%;
  margin-bottom: var(--tileGapY, 48px);
  background: var(--tile);
}
.htile img {
  /* height:auto is required — the width/height HTML attributes act as presentation
     hints and would otherwise pin height to 800px and cancel the aspect-ratio */
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  display: block;
  outline: 2px solid transparent; outline-offset: -2px;
  transition: outline-color 0.2s ease, filter 0.25s ease;
}
/* pointer over a picture → SVNTO-red border (recording hover state) */
.htile:hover img { outline-color: var(--red); filter: brightness(1.05); }
.htile figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  height: var(--capH, 22px); padding-top: 8px; line-height: 1;
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gray); font-weight: 500; white-space: nowrap;
}
.htile figcaption b { font-weight: 500; color: var(--gray-dim); }
.htile:hover figcaption { color: var(--red); }
/* readability: soft white radial behind the center content only — no dark overlay */
.hero__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: var(--veilA, 1);
  /* the central white circle was washing out the middle of the wall — removed.
     Only the top and bottom edge fades remain, so the nav and the page seam
     still have something to sit on. The headline carries its own halo. */
  background:
    linear-gradient(180deg, rgba(251, 251, 250, 0.6) 0%, rgba(251, 251, 250, 0) 14%),
    linear-gradient(0deg, rgba(251, 251, 250, 0.7) 0%, rgba(251, 251, 250, 0) 12%);
}
.hero__center {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--gutter); pointer-events: none;
}
.hero__center .pill, .hero__center .tlink { pointer-events: auto; }
.hero__title {
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.7rem, 3.5vw, 3.5rem);
  letter-spacing: -0.02em; line-height: 1.05;
  color: var(--ink); max-width: 780px;
  /* white halo so the heading stays readable over any tile behind it */
  text-shadow:
    0 0 18px rgba(255,255,255,0.95), 0 0 36px rgba(255,255,255,0.9),
    0 0 60px rgba(255,255,255,0.8), 0 0 96px rgba(255,255,255,0.65);
}
.hero__sub {
  position: relative;
  max-width: 440px; color: var(--ink); font-weight: 400; font-size: 15.5px; margin: 22px 0 28px;
  /* same halo the h1 gets, so the supporting line stays legible over any tile */
  text-shadow:
    0 0 14px rgba(255,255,255,0.98), 0 0 28px rgba(255,255,255,0.95),
    0 0 52px rgba(255,255,255,0.85), 0 0 84px rgba(255,255,255,0.7);
}
/* soft white pool behind the supporting line — the tiles below the heading were busy
   enough to swallow it. Sits under the text, above the wall, and never catches clicks. */
.hero__sub::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 150%; height: 320%;
  background: radial-gradient(ellipse at center,
    rgba(251,251,250,0.92) 0%, rgba(251,251,250,0.75) 38%,
    rgba(251,251,250,0.34) 66%, rgba(251,251,250,0) 100%);
  pointer-events: none;
}
.hero__ctas { display: flex; align-items: center; justify-content: center; gap: 22px; }
/* mouse indicator — click zooms the full frame in / out (recording bottom-center pill) */
.hero__mouse {
  position: absolute; left: 50%; bottom: 26px; z-index: 4;
  transform: translateX(-50%);
  width: 26px; height: 42px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: rgba(251, 251, 250, 0.6);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.hero__mouse span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 7px;
  margin-left: -2px; border-radius: 3px; background: var(--ink);
  animation: mousewheel 1.6s ease-in-out infinite;
}
.hero__mouse:hover { transform: translateX(-50%) scale(1.08); border-color: var(--red); }
.hero__mouse:hover span { background: var(--red); }
@keyframes mousewheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
html.is-static .hero__mouse span { animation: none; }
/* reduced motion / static QA: flat wall, normal flow, no tall scroll runway */
html.is-static .herowrap { height: auto; }
html.is-static .hero { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .herowrap { height: auto; }
  .hero { position: relative; }
  .hero__mouse span { animation: none; }
}

/* specs strip below the hero */
.specstrip { padding: clamp(56px, 7vw, 96px) var(--gutter) 44px; }
.hero__specs { display: grid; max-width: 520px; margin: 0 auto; }
.hero__specs div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 13px 0; border-bottom: 1px solid var(--hairline);
}
.hero__specs div:first-child { border-top: 1px solid var(--hairline); }
.hero__specs dt { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); }
.hero__specs dd { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }

/* ---------- section scaffolding ---------- */
.sec { padding: clamp(48px, 5.5vw, 84px) var(--gutter); }
.sec__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.sec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(40px, 5vw, 72px); }

/* ---------- how we work ---------- */
.how { display: grid; grid-template-columns: 220px 1fr 60px; gap: 40px; align-items: start; }
.how__body p { font-size: 17px; max-width: 620px; line-height: 1.6; }
.how__ctas { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.how__num { text-align: right; font-size: 12px; color: var(--gray); }

/* ---------- client logos marquee (reference: Logos animation.mov) ---------- */
.lmq { padding: clamp(36px, 4vw, 56px) 0 clamp(28px, 3vw, 44px); }
.lmq__cap { text-align: center; font-size: 14.5px; font-weight: 400; color: var(--ink); padding: 0 var(--gutter); margin-bottom: 38px; }
.lmq__view {
  /* narrow strip matched to the caption line, not full page (reference: Logos animation.mov) */
  max-width: min(620px, 88vw); margin: 0 auto;
  overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.lmq__track { display: inline-flex; align-items: center; animation: lmq-crawl 46s linear infinite reverse; /* left → right, slow */ }
.lmq__set { display: inline-flex; align-items: center; gap: clamp(44px, 5vw, 72px); padding-right: clamp(44px, 5vw, 72px); }
.lmq__set img { height: clamp(26px, 2.6vw, 34px); width: auto; display: inline-block; }
@keyframes lmq-crawl { to { transform: translateX(-50%); } }
html.is-static .lmq__track { animation: none; }
@media (prefers-reduced-motion: reduce) { .lmq__track { animation: none; } }

/* ---------- projects header ("Latest works" reference layout) ---------- */
.pjhead { margin-bottom: clamp(36px, 4vw, 56px); }
.pjhead .badge { margin-bottom: 26px; }
.pjhead__title { font-size: clamp(3.2rem, 5.8vw, 5.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.pjhead__sub { margin-top: 20px; font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.pjhead__row { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 30px; }
.pjhead__team { display: flex; align-items: center; gap: 14px; }
.pjhead__avatars { display: flex; }
.pjhead__avatars img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--bg); display: block;
}
.pjhead__avatars img + img { margin-left: -12px; }
.pjhead__who { font-size: 12.5px; color: var(--gray); line-height: 1.35; }
.pjhead__who b { color: var(--ink); font-weight: 600; font-size: 14px; }

/* ---------- projects (Framer "Latest works" template style) ---------- */
.projects__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.proj { position: relative; }
.proj__media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1 / 0.96; background: var(--tile);
}
.proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.proj__media:hover img { transform: scale(1.045); }
/* centered ↗ pill — stays fixed in the middle of every box, shown on hover */
.proj__media::after {
  content: "↗";
  position: absolute; top: 50%; left: 50%;
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; color: var(--ink);
  display: grid; place-items: center;
  font-size: 20px; line-height: 1;
  box-shadow: 0 6px 30px rgba(17,17,17,0.18);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
}
.proj__media:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.proj__meta { padding: 14px 2px 16px; border-bottom: 1px solid var(--hairline); }
.proj__meta h3 { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }

/* ---------- capabilities — sticky stacking cards (reference: Capabilities.mov) ---------- */
.stack { display: grid; gap: 18px; }
.scard {
  position: sticky; top: 96px;
  display: grid; grid-template-columns: 0.42fr 0.58fr; gap: 40px;
  align-items: start;
  background: #F2F1EF; border-radius: 16px;
  padding: 18px;
  overflow: hidden; will-change: transform;
  /* equal heights (square media drives them) + opaque bg: cover fully hides the card below */
}
.scard__media { border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; align-self: start; }
.scard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scard__body { padding: 26px 34px 30px 0; display: flex; flex-direction: column; align-items: flex-start; }
.scard__num { font-size: 12.5px; color: var(--gray); margin-bottom: 14px; }
.scard__body h3 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px; }
.scard__body p { font-size: 15.5px; font-weight: 400; color: var(--ink); max-width: 520px; line-height: 1.6; }
.scard__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 26px; }
.scard__chips span {
  font-size: 12px; color: var(--ink); background: #fff; border: 1px solid var(--hairline);
  padding: 7px 13px; border-radius: 999px;
}
.caps__foot { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 60px; }
.caps__foot p { font-size: 14px; max-width: 320px; }

/* ---------- flow — workflow graph plate (video-style scale-in) ---------- */
.flow-graph {
  border-radius: var(--radius); overflow: hidden;
  background: #0E0D0C; will-change: transform;
}
.flow-graph img { width: 100%; height: auto; display: block; }

/* ---------- about + video ---------- */
.about { display: grid; grid-template-columns: 220px 1fr 60px; gap: 40px; align-items: start; }
.about__body p { font-size: 17px; max-width: 640px; line-height: 1.6; }
.about__ctas { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.about__num { text-align: right; font-size: 12px; color: var(--gray); }
.vplate { padding-top: 0; }
.vplate__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 2206 / 946; background: var(--tile); }
.vplate__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vplate__cap { position: absolute; left: 20px; bottom: 16px; color: #fff; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }

/* ---------- how we work — centered above the reel (reference recording) ---------- */
.howc { text-align: center; padding: clamp(44px, 5vw, 70px) var(--gutter) 30px; }
.howc .badge { margin-bottom: 22px; }
.howc__title { font-size: clamp(2.8rem, 5vw, 4.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.howc__sub { margin: 16px auto 0; max-width: 400px; font-size: 14px; color: var(--ink); line-height: 1.55; }

/* ---------- numbers — 4-stat row (reference recording) ---------- */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: start; padding-top: 30px; }
.nums__stat dt { font-size: clamp(1.8rem, 2.9vw, 2.7rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.nums__stat dd { font-size: 13px; color: var(--gray); margin-top: 12px; max-width: 210px; line-height: 1.5; }

/* ---------- testimonials ---------- */
.testi__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px; }
.testi__sub { margin-top: 18px; font-size: 14.5px; color: var(--gray); line-height: 1.55; max-width: 460px; }
.testi__arrows { display: flex; gap: 8px; }
.testi__arrows button {
  width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 14px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.testi__arrows button:hover { transform: scale(1.06); }
.testi__arrows button:disabled { opacity: 0.25; cursor: default; transform: none; }
.testi__view { overflow: hidden; }
.testi__track { display: flex; gap: 16px; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); }
.tcard {
  flex: none; width: min(340px, 78vw);
  background: var(--tile); border-radius: var(--radius);
  padding: 24px; min-height: 330px;
  display: flex; flex-direction: column;
}
.tcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.tcard__stars { font-size: 12px; letter-spacing: 2.5px; }
.tcard__idx { font-size: 12.5px; color: var(--gray); }
.tcard blockquote { font-size: 16.5px; line-height: 1.55; flex: 1; }
.tcard__who { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
/* REPLACE: initials chips with real reviewer photos when available */
/* .tcard__who span sets the role colour, so scope the avatar to win over it */
.tcard__who .tcard__ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600;
}
.tcard__who b { display: block; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.tcard__who span { font-size: 12.5px; color: var(--gray); }
.tcard--photo { padding: 0; position: relative; overflow: hidden; background: #222; }
.tcard--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.tcard--photo .tcard__top { position: absolute; top: 18px; left: 20px; right: 20px; color: #fff; z-index: 2; margin: 0; }
.tcard--photo .tcard__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 58px; height: 58px; border-radius: 50%; background: #fff;
}
.tcard--photo .tcard__play::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-38%, -50%);
  border-left: 13px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.tcard--photo figcaption { position: absolute; left: 20px; right: 20px; bottom: 18px; color: #fff; z-index: 2; }
.tcard--photo .tcard__pull { font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.tcard--photo figcaption b { display: block; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.tcard--photo figcaption span { font-size: 13px; opacity: 0.85; }
.tcard--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25), transparent 35%, transparent 60%, rgba(0,0,0,0.35)); }
.testi__foot { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 48px; }
.testi__foot .brands__stars { display: block; margin-bottom: 8px; }
.testi__foot p { font-size: 14px; max-width: 560px; }

/* ---------- plans ---------- */
.plans__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plan { background: var(--tile); border-radius: 16px; padding: 44px 44px 36px; position: relative; display: flex; flex-direction: column; }
.plan__pop { position: absolute; top: 22px; right: 26px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.plan h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; text-transform: uppercase; margin-bottom: 14px; }
.plan__desc { font-size: 15.5px; max-width: 380px; margin-bottom: 34px; }
.plan ul { list-style: none; display: grid; gap: 13px; margin-bottom: 40px; flex: 1; align-content: start; }
.plan ul li { display: flex; gap: 11px; align-items: baseline; font-size: 15px; }
.plan ul li::before {
  content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.4px solid var(--ink); font-size: 10px; display: grid; place-items: center;
  transform: translateY(2px);
}
.plan .pill { width: 100%; }

/* ---------- about page — meet the founders ---------- */
.ab-founders .badge { margin-bottom: 26px; }
.ab-founders__head { text-align: center; }
.ab-founders__title { font-size: clamp(3.4rem, 6vw, 5.6rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: clamp(36px, 4vw, 56px); text-align: center; }
.ab-founders__title em { font-style: normal; color: var(--red); }
.ab-founders__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.ab-founders__story p { font-size: 16px; line-height: 1.65; max-width: 520px; }
.ab-founders__story p + p { margin-top: 22px; }
.ab-founders__why { color: var(--red); font-weight: 600; margin-top: 40px !important; }
.ab-founders__people { display: grid; gap: 40px; }
.ab-person { display: grid; grid-template-columns: 150px 1fr; gap: 26px; align-items: center; }
.ab-person figure { border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1.3; background: var(--tile); }
.ab-person img { width: 100%; height: 100%; object-fit: cover; }
.ab-person p { font-size: 15px; line-height: 1.6; color: var(--ink); }
.ab-person b { font-weight: 600; }
@media (max-width: 900px) {
  .ab-founders__grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 560px) {
  .ab-person { grid-template-columns: 110px 1fr; gap: 18px; }
}

/* ---------- svnto founders ---------- */
.foundersec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 470px; }
.fcard__ph { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1.08; background: var(--tile); }
.fcard__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.fcard:hover .fcard__ph img { transform: scale(1.035); }
.fcard figcaption { padding: 14px 2px 16px; border-bottom: 1px solid var(--hairline); }
.fcard figcaption b { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.fcard figcaption span { font-size: 13px; color: var(--gray); margin-top: 3px; display: block; }

/* ---------- faq ---------- */
.faqsec { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items: start; }
.faqsec__aside .k-h { margin-top: 14px; }
.faqsec__nf { margin-top: 70px; }
.faqsec__nf h3 { font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.faqsec__nf p { font-size: 15px; max-width: 300px; margin-bottom: 26px; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:first-child summary { padding-top: 6px; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0;
  font-size: clamp(1.2rem, 1.8vw, 1.65rem); font-weight: 450;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { font-style: normal; font-weight: 300; font-size: 20px; flex: none; }
.faq details[open] summary i::before { content: "–"; }
.faq details:not([open]) summary i::before { content: "+"; }
.faq .faq__a { padding: 0 0 26px; font-size: 15.5px; color: var(--ink); max-width: 760px; line-height: 1.6; }
.faq details[open] .faq__a { animation: acc-in 0.4s cubic-bezier(0.22,1,0.36,1); }

/* ---------- journal ---------- */
.journal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.jcard__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 8.6; }
.jcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.jcard:hover .jcard__media img { transform: scale(1.04); }
.jcard__read { font-size: 13px; color: var(--gray); margin: 16px 0 6px; }
.jcard h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 450; line-height: 1.2; padding-bottom: 20px; border-bottom: 1px solid var(--hairline); margin-bottom: 16px; }

/* ---------- cta ---------- */
.cta { text-align: center; padding: clamp(64px, 7.5vw, 110px) var(--gutter); }
.cta .k-label { display: block; margin-bottom: 18px; }
.cta h2 {
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.4rem, 5.4vw, 5rem); letter-spacing: -0.02em; line-height: 1.06;
  color: var(--ink);
}
.cta p { margin: 22px auto 34px; font-size: 15.5px; max-width: 420px; }

/* ---------- footer ---------- */
.footer { padding: 40px var(--gutter) 34px; border-top: 1px solid var(--hairline); }
.footer__logo { display: block; height: clamp(28px, 4vw, 46px); width: auto; }
.footer__mid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin: 44px 0 56px; }
.footer__sub p { font-size: 15px; max-width: 240px; margin-bottom: 26px; }
.footer__talk { justify-self: end; text-align: right; }
.footer__talk p { font-size: 15px; max-width: 260px; margin-bottom: 18px; }
.footer__mail { font-size: clamp(17px, 2vw, 22px); font-weight: 600; letter-spacing: -0.01em; border-bottom: 1px solid var(--ink); padding-bottom: 4px; transition: opacity 0.2s ease; }
.footer__mail:hover { opacity: 0.55; }
@media (max-width: 760px) { .footer__talk { justify-self: start; text-align: left; } }
.footer__form { border-bottom: 1px solid var(--ink); display: flex; gap: 12px; padding-bottom: 8px; max-width: 340px; }
.footer__form input { flex: 1; border: 0; background: none; font: inherit; font-size: 14px; outline: none; color: var(--ink); }
.footer__form input::placeholder { color: var(--gray-dim); }
.footer__form button { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.footer__ok { font-size: 13px; color: var(--gray); margin-top: 10px; display: none; }
.footer__minis { display: grid; align-content: start; }
.footer__minis a {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
  transition: opacity 0.2s ease;
}
.footer__minis a:first-child { border-top: 1px solid var(--hairline); }
.footer__minis a:hover { opacity: 0.6; }
.footer__minis img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.footer__minis b { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.footer__minis span { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.footer__low { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 70px; }
.footer__addr { font-size: 14.5px; color: var(--ink); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__cols a { display: block; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; margin-bottom: 12px; transition: opacity 0.2s ease; }
.footer__cols a:hover { opacity: 0.55; }
.footer__base { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--hairline); padding-top: 22px; }
.footer__base p { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray); }
.footer__soc { display: flex; gap: 18px; }
.footer__soc a { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; transition: opacity 0.2s ease; }
.footer__soc a:hover { opacity: 0.55; }

/* ---------- project detail pages ---------- */
/* brand page head — everything stacks under the brand name */
.pd-head { padding: 140px var(--gutter) 40px; }
.pd-head h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; color: var(--red); }
.pd-meta { display: flex; gap: clamp(24px, 4vw, 60px); margin-top: 26px; }
.pd-meta div span { display: block; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; }
.pd-meta div b { font-size: 14.5px; font-weight: 600; }
.pd-head__cat { margin-top: 24px; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.pd-head__lede { margin-top: 14px; font-size: clamp(17px, 2vw, 21px); line-height: 1.5; max-width: 620px; }
.pd-links { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 30px; }
.pd-links div span { display: block; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
.pd-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pd-links a:hover { color: var(--red); border-color: var(--red); }
.pd-links a i { font-style: normal; font-size: 11px; }
.pd-hero { padding: 0 var(--gutter); }
.pd-hero figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 8.4; background: var(--tile); }
.pd-hero img, .pd-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-about { padding: clamp(40px, 4.5vw, 64px) var(--gutter); max-width: 720px; }
.pd-about p { font-size: 17px; line-height: 1.65; }
.pd-gallery { padding: 0 var(--gutter) 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pd-gallery figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1.05; }
/* brand pages shot at 4:5 (haut, monaps, qurratulain saqib, hamzeh) — matching the box
   to the source ratio means the frames show whole, with nothing cropped off */
.pd-gallery--45 figure { aspect-ratio: 4 / 5; }
.pd-gallery figure.pd-wide { grid-column: 1 / -1; aspect-ratio: 16 / 8.4; }
.pd-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.pd-gallery figure:hover img { transform: scale(1.035); }
.pd-next { padding: clamp(48px, 5.5vw, 84px) var(--gutter) 30px; }
.pd-next .sec__head { margin-bottom: 40px; }

/* ---------- reveals ---------- */
html.has-motion [data-reveal] { opacity: 0; transform: translateY(30px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 120px; }
  .how, .about { grid-template-columns: 1fr; gap: 18px; }
  .how__num, .about__num { display: none; }
  .projects__grid, .plans__grid, .journal__grid, .foundersec__grid { grid-template-columns: 1fr; }
  .proj__media, .proj:nth-child(2) .proj__media, .proj:nth-child(3) .proj__media { aspect-ratio: 16 / 11; }
  .faqsec { grid-template-columns: 1fr; gap: 40px; }
  .faqsec__nf { margin-top: 30px; }
  .nums { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .footer__mid, .footer__low { grid-template-columns: 1fr; gap: 40px; }
  .brands__grid { grid-template-columns: repeat(2, 1fr); }
  /* mobile: cards flow normally (no stacking) so content never clips */
  .scard { position: relative; top: 0; grid-template-columns: 1fr; gap: 20px; height: auto; }
  .scard__media { aspect-ratio: 1 / 1; }
  .scard__body { padding: 0 12px 16px; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .flowsec__grid { grid-template-columns: 1fr; }
  .step { border-left: 0; padding-left: 2px; padding-right: 0; }
  .testi__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

/* ---------- static QA (?static=1 / ?static=1&jump=<id>) ---------- */
html.is-static [data-reveal] { opacity: 1 !important; transform: none !important; }
html.is-static .nav { position: absolute; backdrop-filter: none; }
html.is-static .hero { padding-top: 150px; }
html.is-static .car__set figure { width: 280px; height: 350px; }
html.is-static .mobmenu a { opacity: 1; transform: none; transition: none; }
html.is-static .scard { position: relative; top: 0; }
@media (prefers-reduced-motion: reduce) {
  .car__track { animation: none; }
  html.has-motion [data-reveal] { opacity: 1; transform: none; }
  .faq details[open] .faq__a { animation: none; }
  .scard { position: relative; top: 0; }
}

/* ---------- stacked section heads (note under heading) ---------- */
.sec__head--stack { flex-direction: column; align-items: flex-start; gap: 18px; }
.sec__head--stack .k-note { max-width: 460px; }

/* ---------- hero typewriter ---------- */
.typewrap { display: inline-flex; align-items: baseline; }
#typeText { color: var(--red); }
.caret {
  display: inline-block; width: 3px; height: 0.92em; margin-left: 6px;
  background: var(--red); transform: translateY(0.12em);
  animation: caret-blink 1s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
html.is-static .caret { animation: none; }

/* ---------- cursor dot (studio-style, no glow) ---------- */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px;
  background: var(--red); border-radius: 50%;
  pointer-events: none; z-index: 99;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}
.cursor-dot.is-active { opacity: 1; }
.cursor-dot.is-hover { width: 36px; height: 36px; opacity: 0.32; }
html.is-static .cursor-dot { display: none; }
@media (pointer: coarse) { .cursor-dot { display: none; } }

/* ---------- footer social icon buttons ---------- */
.footer__soc--icons {
  display: flex; justify-content: flex-end; gap: 10px; margin: 30px 0 16px;
}
.footer__soc--icons a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hairline); background: #fff; color: var(--ink);
  display: grid; place-items: center;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.footer__soc--icons a:hover { transform: translateY(-2px); background: var(--red); border-color: var(--red); color: #fff; }
.footer__soc--icons svg { width: 18px; height: 18px; display: block; }
.footer__base { border-top: 1px solid var(--hairline); padding-top: 20px; }

/* ---------- contact page ---------- */
.ct-head { padding: 150px var(--gutter) 40px; border-bottom: 1px solid var(--hairline); margin: 0 0 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; flex-wrap: wrap; }
.ct-head__main { flex: 1 1 480px; max-width: 640px; }
.ct-head__main .ct-head__sub { max-width: 520px; }
.ct-head__facts { flex: 0 1 340px; min-width: 280px; margin-bottom: 42px; }
.ct-head__facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.ct-head__facts div:first-child { border-top: 1px solid var(--hairline); }
.ct-head__facts dt { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); }
.ct-head__facts dd { font-size: 13px; letter-spacing: 0.03em; font-weight: 600; text-align: right; }
.ct-head__facts dd a:hover { opacity: 0.6; }
.ct-head .badge { margin-bottom: 26px; }
.ct-head h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.ct-head__sub { margin-top: 22px; font-size: 16px; color: var(--gray); padding-bottom: 42px; }
.ct-body { display: grid; grid-template-columns: 0.38fr 0.62fr; gap: clamp(40px, 6vw, 100px); padding: clamp(44px, 5vw, 70px) var(--gutter) clamp(64px, 7vw, 100px); align-items: start; }
.ct-card { background: var(--tile); border-radius: 16px; padding: 34px 30px; display: grid; gap: 14px; justify-items: start; }
.ct-card__mark { height: 26px; width: auto; margin-bottom: 16px; }
.ct-card a { font-size: 15.5px; font-weight: 500; }
.ct-card a:hover { color: var(--red); }
.ct-card .ct-card__mail { font-size: 17px; font-weight: 600; }
.ct-card p { font-size: 14.5px; color: var(--gray); }
.ct-form h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 600; margin-bottom: 28px; }
.ct-form form { display: grid; gap: 18px; }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ct-form label { display: grid; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ct-form input, .ct-form textarea, .ct-form select {
  font: inherit; font-weight: 400; color: var(--ink);
  background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
  padding: 14px 16px; width: 100%; transition: border-color 0.2s ease;
}
.ct-form select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6B68' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 40px;
}
.ct-form textarea { min-height: 150px; resize: vertical; }
.ct-form input:focus, .ct-form textarea:focus, .ct-form select:focus { outline: none; border-color: var(--ink); }
.ct-form input::placeholder, .ct-form textarea::placeholder { color: var(--gray-dim); }
/* file input — the native control is hidden behind a styled dropzone label */
.ct-form input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ct-file {
  display: block; cursor: pointer; font-weight: 400; color: var(--gray);
  background: #fff; border: 1px dashed var(--hairline); border-radius: 12px;
  padding: 18px 16px; text-align: center; transition: border-color 0.2s ease, color 0.2s ease;
}
.ct-file:hover { border-color: var(--ink); color: var(--ink); }
.ct-file.has-file { border-style: solid; border-color: var(--ink); color: var(--ink); font-weight: 500; }
.ct-form .pill { justify-self: start; }
.ct-ok { display: none; margin-top: 18px; font-size: 15px; color: var(--ink); }
.ct-ok b { font-weight: 600; }
.ct-card__lede { font-size: 14.5px; line-height: 1.6; color: var(--ink) !important; }
@media (max-width: 900px) {
  .ct-body { grid-template-columns: 1fr; }
  .ct-form__row { grid-template-columns: 1fr; }
}

/* ---------- SVNTO Studio page (Flora-style node canvas) ---------- */
.st2-hero { padding: 170px var(--gutter) 60px; text-align: center; }
.st2-hero .badge { margin: 0 auto 26px; }
.st2-hero h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; }
.st2-hero__sub { margin: 24px auto 0; font-size: 16.5px; color: var(--gray); line-height: 1.6; max-width: 560px; }
.st2-hero__ctas { justify-content: center; margin-top: 34px; }

.st2-board {
  display: flex; align-items: stretch; gap: 0;
  padding: clamp(28px, 3.5vw, 52px);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background:
    radial-gradient(circle, rgba(17,17,17,0.11) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--tile);
  overflow-x: auto;
}
.st2-node {
  flex: 1 1 0; min-width: 190px;
  background: var(--bg); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 10px 30px rgba(17,17,17,0.05);
}
.st2-node__tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }
.st2-node figure { border-radius: 9px; overflow: hidden; aspect-ratio: 4 / 3; }
.st2-node img { width: 100%; height: 100%; object-fit: cover; }
.st2-node h3 { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.st2-node p { font-size: 12.5px; line-height: 1.5; color: var(--gray); }
.st2-link { flex: 0 0 clamp(18px, 3vw, 44px); position: relative; }
.st2-link::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1.5px;
  background: var(--ink); opacity: 0.35;
}
.st2-link::after {
  content: ""; position: absolute; top: 50%; right: 0; width: 7px; height: 7px;
  border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
  transform: translateY(-50%) rotate(45deg); opacity: 0.5;
}
.st2-graph { margin-top: 20px; }

.st2-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.st2-mod { background: var(--tile); border-radius: var(--radius); padding: 28px 26px 30px; }
.st2-mod span { font-size: 12px; color: var(--gray); letter-spacing: 0.06em; }
.st2-mod h3 { font-size: 18px; font-weight: 600; margin: 14px 0 10px; }
.st2-mod p { font-size: 14px; line-height: 1.55; color: var(--gray); }

.ct-card__lede { font-size: 14.5px; line-height: 1.6; color: var(--ink) !important; }
.st2-list { display: grid; gap: 9px; margin: 6px 0 10px; }
.st2-list li { font-size: 14px; padding-left: 20px; position: relative; }
.st2-list li::before { content: "+"; position: absolute; left: 0; color: var(--red); font-weight: 700; }

@media (max-width: 900px) {
  .st2-board { flex-direction: column; }
  .st2-node { min-width: 0; }
  .st2-link { flex-basis: 26px; min-height: 26px; }
  .st2-link::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .st2-link::after { left: 50%; right: auto; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
  .st2-mods { grid-template-columns: 1fr; }
}

/* ---------- blog page ---------- */
.bg-head { padding: 170px var(--gutter) 50px; border-bottom: 1px solid var(--hairline); text-align: center; }
.bg-head .badge { margin: 0 auto 26px; }
.bg-head h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; }
.bg-head__sub { margin: 22px auto 0; font-size: 16px; color: var(--gray); line-height: 1.6; max-width: 520px; padding-bottom: 10px; }
.bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bg-card { display: flex; flex-direction: column; gap: 12px; background: var(--tile); border-radius: var(--radius); padding: 18px 18px 24px; transition: transform 0.3s ease; }
.bg-card:hover { transform: translateY(-4px); }
.bg-card figure { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.bg-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.bg-card:hover img { transform: scale(1.04); }
.bg-card__meta { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); margin-top: 6px; }
.bg-card h2 { font-size: 18.5px; font-weight: 600; line-height: 1.3; }
.bg-card__lede { font-size: 14px; color: var(--gray); line-height: 1.55; flex: 1; }
.bg-posts { padding: 20px var(--gutter) 40px; display: grid; gap: clamp(48px, 6vw, 80px); }
.bg-post { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--hairline); padding-top: clamp(36px, 4vw, 56px); }
.bg-post h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 14px 0 22px; }
.bg-post p:not(.k-label) { font-size: 16px; line-height: 1.7; color: var(--ink); }
.bg-post p + p { margin-top: 18px; }
@media (max-width: 900px) { .bg-grid { grid-template-columns: 1fr; } }

/* ---------- article pages ---------- */
.art-head { padding: 150px var(--gutter) 0; max-width: 900px; margin: 0 auto; }
.art-head__meta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); margin-bottom: 22px; }
.art-cat { background: var(--tile); border-radius: 999px; padding: 6px 13px; color: var(--ink); font-weight: 500; }
.art-head h1 { font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.art-hero { max-width: 1100px; margin: clamp(36px, 4vw, 56px) auto 0; padding: 0 var(--gutter); }
.art-hero img { width: 100%; height: auto; aspect-ratio: 16 / 8.4; object-fit: cover; border-radius: var(--radius); }
.art-body { max-width: 720px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(20px, 3vw, 36px); }
.art-body p { font-size: 17px; line-height: 1.72; color: var(--ink); }
.art-body p + p { margin-top: 20px; }
.art-body h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: clamp(36px, 4vw, 52px) 0 16px; }
.art-body ul, .art-body ol { margin: 20px 0 0 20px; display: grid; gap: 10px; }
.art-body li { font-size: 16.5px; line-height: 1.6; }
.art-body blockquote {
  margin: clamp(32px, 4vw, 44px) 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--red);
  font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em;
}

/* ---------- privacy / legal page ---------- */
.pp-head { padding: 150px var(--gutter) 40px; border-bottom: 1px solid var(--hairline); }
.pp-head .badge { margin-bottom: 26px; }
.pp-head h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.pp-updated { margin-top: 18px; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); }
.pp-body { padding: clamp(44px, 5vw, 72px) var(--gutter) clamp(64px, 7vw, 100px); }
.pp-body > div { max-width: 760px; margin: 0 auto; }
.pp-body p { font-size: 16.5px; line-height: 1.72; }
.pp-body p + p { margin-top: 18px; }
.pp-intro { font-size: 18px !important; }
.pp-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-weight: 600; letter-spacing: -0.01em; margin: clamp(38px, 4vw, 56px) 0 14px; }
.pp-body h3 { font-size: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); margin: 28px 0 12px; }
.pp-body ul { margin: 16px 0 0 20px; display: grid; gap: 11px; }
.pp-body li { font-size: 16px; line-height: 1.65; }
.pp-body li b { font-weight: 600; }
.pp-body blockquote {
  margin: 22px 0; padding: 22px 26px;
  background: var(--tile); border-left: 3px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 16.5px; line-height: 1.65; font-weight: 500;
}
.pp-contact { margin-top: 26px; }
.pp-contact div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.pp-contact div:first-child { border-top: 1px solid var(--hairline); }
.pp-contact dt { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); }
.pp-contact dd { font-size: 14.5px; font-weight: 600; text-align: right; }
.pp-contact dd a:hover { color: var(--red); }

/* ============================================================
   CONVERSION LAYER — additive only.
   Every rule below reuses the existing tokens (--ink / --red /
   --tile / --hairline / --gutter, .pill, .badge, .k-h, the
   .specstrip hairline rows). Nothing above this line changed.
   ============================================================ */

/* ---------- hero offer bar (FIX 1) ----------
   Sits under .hero__sub inside .hero__center, so it inherits the
   centred column. Same halo treatment as the sub, so it stays
   legible over the image wall. */
.offerbar {
  position: relative;
  max-width: 560px; margin: 0 0 26px;
  display: grid; gap: 9px; justify-items: center;
}
/* the same soft white pool .hero__sub gets — the wall behind is busy */
.offerbar::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 122%; height: 128%;
  background: radial-gradient(ellipse at center,
    rgba(251,251,250,0.94) 0%, rgba(251,251,250,0.82) 42%,
    rgba(251,251,250,0.38) 70%, rgba(251,251,250,0) 100%);
  pointer-events: none;
}
.offerbar__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.offerbar__tag { background: var(--red); color: #fff; font-weight: 600; }
.offerbar__tag span { background: #fff; }
.offerbar__line { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.offerbar__why { font-size: 12.5px; color: var(--gray); line-height: 1.5; max-width: 480px; }
/* price rows — the .specstrip hairline pattern, laid out inline */
.offerbar__price {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 3px;
}
.offerbar__price div {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--hairline); background: rgba(255,255,255,0.72);
  border-radius: 999px; padding: 7px 15px;
}
.offerbar__price dt { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); }
.offerbar__price dd { font-size: 12.5px; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600; }

/* ---------- repeated CTA row (FIX 6) ---------- */
.ctarow { display: flex; justify-content: center; margin-top: clamp(38px, 4.5vw, 62px); }
.specstrip .ctarow { margin-top: 34px; }
.caps__foot .pill { flex: none; }

/* ---------- identity statement above the logos (FIX 2) ---------- */
.lmq__ident {
  max-width: 780px; margin: 0 auto 30px; padding: 0 var(--gutter);
  text-align: center; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: var(--ink);
}

/* ---------- how it works (FIX 3) ---------- */
.hiw {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.hiw__step {
  border-top: 1px solid var(--ink); padding-top: 18px;
  display: grid; gap: 14px; align-content: start;
}
.hiw__num { font-size: 12.5px; letter-spacing: 0.06em; color: var(--gray); }
.hiw__step p { font-size: 15px; line-height: 1.6; color: var(--ink); }

/* ---------- what you stop paying for (FIX 4) ---------- */
.stops {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px;
}
.stops li {
  background: var(--tile); border-radius: var(--radius);
  padding: 22px 24px; font-size: 16px; font-weight: 500; line-height: 1.4;
}
.stops__close {
  margin-top: 30px; font-size: 15.5px; font-weight: 500; color: var(--ink);
}

/* ---------- price line inside a plan card ---------- */
.plan__price {
  display: grid; gap: 4px; margin: -18px 0 30px;
  padding-bottom: 22px; border-bottom: 1px solid var(--hairline);
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray);
}
.plan__price b {
  display: block; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600;
  letter-spacing: -0.01em; text-transform: none; color: var(--ink); margin-top: 2px;
}
.plan__price span { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--gray); line-height: 1.5; }

/* ---------- inline contact block (FIX 7) ----------
   Reuses .ct-form wholesale, so every input matches the contact page. */
.inct__grid { display: grid; grid-template-columns: 0.42fr 0.58fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.inct__copy .k-h { margin: 14px 0 20px; }
.inct__lede { font-size: 15.5px; line-height: 1.6; max-width: 420px; }
.inct__facts { max-width: 420px; margin: 30px 0; }
.inct__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 4px; }
.inct__wa { color: var(--ink); }
.inct__wa:hover { color: var(--red); opacity: 1; }
.inct__err { display: none; font-size: 13.5px; color: var(--red); }
.inct__err.is-shown { display: block; }
.ct-form.is-sending .pill { opacity: 0.55; pointer-events: none; }

/* ---------- WhatsApp float (FIX 7) ---------- */
.wafloat {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 28px rgba(17,17,17,0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wafloat:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(17,17,17,0.28); }
.wafloat svg { width: 28px; height: 28px; display: block; }

/* ---------- sticky mobile CTA bar (FIX 7) ---------- */
.mobcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251,251,250,0.96); border-top: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.mobcta.is-on { transform: none; }
.mobcta__txt { font-size: 12.5px; color: var(--gray); white-space: nowrap; }
.mobcta__txt b { color: var(--ink); font-weight: 600; }
.mobcta .pill { padding: 12px 16px; font-size: 10.5px; letter-spacing: 0.04em; }
@media (max-width: 767px) {
  .mobcta { display: flex; }
  .wafloat { bottom: 78px; width: 48px; height: 48px; }
  .wafloat svg { width: 25px; height: 25px; }
}
@media (max-width: 380px) { .mobcta__txt { display: none; } .mobcta .pill { width: 100%; } }

/* ---------- conversion layer: responsive ---------- */
@media (max-width: 900px) {
  .hiw { grid-template-columns: 1fr 1fr; }
  .stops { grid-template-columns: 1fr 1fr; }
  .inct__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .hiw { grid-template-columns: 1fr; gap: 16px; }
  .stops { grid-template-columns: 1fr; }
  .stops li { padding: 18px 20px; font-size: 15px; }
  /* the hero carries more copy now — keep the offer and price inside one screen */
  .offerbar { max-width: 100%; margin-bottom: 20px; gap: 7px; }
  .offerbar__head { font-size: 13.5px; gap: 8px; }
  .offerbar__tag { font-size: 11px; padding: 6px 11px; }
  .offerbar__line { font-size: 12.5px; }
  .offerbar__why { font-size: 11.5px; line-height: 1.45; }
  .offerbar__price div { padding: 6px 12px; }
  .offerbar__price dt { font-size: 10px; }
  .offerbar__price dd { font-size: 11.5px; }
  .hero__ctas .pill { padding: 14px 22px; }
  .ctarow { margin-top: 34px; }
}
@media (max-width: 560px) {
  .offerbar__price { flex-direction: column; align-items: center; }
}
/* static QA / reduced motion: the sticky bar must not cover the page capture */
html.is-static .mobcta { display: none; }

/* ============================================================
   R8 — header rebuild + one-CTA cleanup (2026-08-05)
   Additive only: everything above this banner is untouched.
   ============================================================ */

/* ---- hero headline: two lines, sentence case, typed second line
        (reference: "Screen Recording 2026-08-05 at 11.14.39 PM.mov") ---- */
.hero__title--type {
  position: relative;
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  max-width: 900px;
}
/* the caret sits on its own even when the phrase is empty mid-cycle, so the
   headline block never changes height between phrases */
.hero__title--type .typewrap { min-height: 1.16em; }

/* ---- hero buttons: the launch offer + the single site CTA ---- */
.hero__ctas { flex-wrap: wrap; gap: 16px; margin-top: clamp(26px, 3vw, 40px); }
.pill--offer {
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  border: 1px solid var(--hairline);
  gap: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pill--offer:hover { opacity: 1; background: #fff; }
.pill__tag {
  background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 999px;
}

/* ---- rhythm through the spec strip → numbers → works → how it works ---- */
.specstrip { padding-top: clamp(40px, 4.6vw, 66px); padding-bottom: clamp(40px, 4.6vw, 66px); }
.nums { padding-top: clamp(40px, 4.6vw, 66px); padding-bottom: clamp(48px, 5.5vw, 84px); }
#projects { padding-top: clamp(48px, 5.5vw, 84px); padding-bottom: clamp(48px, 5.5vw, 84px); }
#how-it-works { padding-top: clamp(48px, 5.5vw, 84px); }

/* ---- closing block: contact content, then the one button ---- */
.inct__list { max-width: 420px; margin: 18px 0 4px; }
.inct__facts dd { text-transform: none; letter-spacing: 0.02em; }
.inct__facts dd a:hover { color: var(--red); }
.cta--only { padding-top: 0; padding-bottom: clamp(64px, 7.5vw, 110px); }

/* the "+" is the marker — the native disc was doubling up next to it */
.st2-list { list-style: none; padding-left: 0; }

/* ---- contact page: how-it-works block above the form ---- */
.ct-hiw { border-bottom: 1px solid var(--hairline); padding-bottom: clamp(48px, 5.5vw, 84px); }

/* ---- project detail pages: identical white space above and below every image —
        the gap between the header image and the grid now matches the grid gap ---- */
:root { --pd-gap: 20px; }
.pd-gallery { padding-top: 0; padding-bottom: var(--pd-gap); gap: var(--pd-gap); }
.pd-hero + .pd-gallery { padding-top: var(--pd-gap); }
.pd-next { padding-top: clamp(48px, 5.5vw, 84px); }

@media (max-width: 720px) {
  .hero__ctas { flex-direction: column; align-items: center; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
  .hero__ctas .pill { width: 100%; }
  /* the offer chip wraps to two lines at this width — keep it compact, not a slab */
  .pill--offer { flex-direction: column; gap: 9px; padding: 12px 18px; font-size: 11.5px; text-align: center; }
  .pill--offer .pill__tag { font-size: 10px; padding: 3px 9px; }
}

/* ============================================================
   R9 — all-caps headings, hero glow, inlined contact block (2026-08-06)
   ============================================================ */

/* every heading on the site runs in caps */
h1, h2, h3, h4, h5, h6 { text-transform: uppercase; }

/* soft white pool behind the hero headline — the wall behind it is busy and the
   text-shadow halo alone was not carrying the two big lines */
/* No pool element: a box of white behind the headline read as a rectangle over the
   wall. A dense, tight text-shadow stack hugs the glyphs instead — the halo follows
   the letterforms and fades out within a few pixels of them. */
.hero__title--type {
  /* caps run wider — let line 1 hold on one line on a desktop viewport */
  max-width: min(1120px, 90vw);
  /* tight first, soft last: the near layers do the legibility work right at the
     glyph edge, the far ones only take the hardest edges off the tiles behind */
  text-shadow:
    0 0 2px rgba(255,255,255,1),  0 0 4px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,1),  0 0 11px rgba(255,255,255,0.98),
    0 0 16px rgba(255,255,255,0.92), 0 0 24px rgba(255,255,255,0.78),
    0 0 34px rgba(255,255,255,0.5);
}
/* the pool has to clear the buttons too, so they sit on the same soft field */
.hero__ctas { position: relative; }

/* the contact block is the contact page inlined — it must not carry that page's
   150px header offset when it sits mid-document */
#contact-overview { padding-top: clamp(56px, 6vw, 92px); border-top: 1px solid var(--hairline); }

/* ============================================================
   R10 — pre-launch review fixes (2026-08-06)
   Accessibility, contrast, and the bits the audit turned up.
   ============================================================ */

/* --- keyboard focus was invisible everywhere: no :focus-visible rule existed and
       .ct-form killed the native outline outright --- */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}
.ct-form input:focus-visible,
.ct-form textarea:focus-visible,
.ct-form select:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-color: var(--ink);
}
.pill:focus-visible { outline-color: var(--ink); }

/* skip link — hidden until tabbed to */
.skip {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  transform: translateY(-160%); transition: transform 0.2s ease;
}
.skip:focus-visible { transform: none; }

/* --- placeholder text measured 2.73:1 against the page; AA needs 4.5:1 --- */
:root { --gray-dim: #767672; }

/* --- caps set at negative tracking fights itself; small caps headings need air --- */
h3, h4, h5, h6 { letter-spacing: 0.01em; }
.plan h3, .faq h3, .proj__meta h3 { letter-spacing: 0.02em; }

/* --- newsletter + form error slots --- */
.footer__err { margin-top: 10px; }
.ct-hint {
  display: block; font-style: normal; font-weight: 400;
  font-size: 12px; color: var(--gray); margin-top: 2px;
}

/* --- the inlined contact heading on the homepage is an h2 now, styled as the h1 was --- */
.ct-head__h {
  font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.05;
}

/* --- confidentiality note beside the upload field --- */
.ct-nda {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; color: var(--gray); line-height: 1.5;
  border-top: 1px solid var(--hairline); padding-top: 16px; margin-top: 4px;
}
.ct-nda b { color: var(--ink); font-weight: 600; }

/* --- cost table on the campaign-cost page --- */
.art-table { margin: 26px 0 4px; overflow-x: auto; }
.art-table table { width: 100%; border-collapse: collapse; min-width: 420px; }
.art-table th, .art-table td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; }
.art-table th { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); font-weight: 500; }
.art-table td:last-child, .art-table th:last-child { text-align: right; white-space: nowrap; }
.art-table tbody tr:last-child td { border-bottom: 0; }
.art-table__note { font-size: 13px !important; color: var(--gray); margin-top: 14px; line-height: 1.5; }

/* ============================================================
   R11 — header glow, full wall reveal, alignment (2026-08-06)
   ============================================================ */

/* --- footer wordmark now sits flush with the copy beneath it.
       (The PNG carried ~10% transparent padding on each side, which pushed the
       glyphs inward; the file has been trimmed, so the edge is the edge.) --- */
.footer__logo { margin-left: 0; }

/* --- about page: ranged left, not centred --- */
.ab-intro { text-align: left; }
.ab-intro .howc__sub { margin-left: 0; margin-right: 0; max-width: 560px; }
.ab-founders__head { text-align: left; }
.ab-founders__title { text-align: left; }

/* --- "Meet the Founders" matched to "We're a small team…" --- */
.ab-founders__title { font-size: clamp(2.8rem, 5vw, 4.4rem); line-height: 1.12; }

/* --- testimonials: on a desktop row all four cards share the width, as in the
       reference. Below that the track goes back to being a fixed-width scroller
       and the arrows take over. --- */
@media (min-width: 1100px) {
  .testi__track { gap: 20px; }
  .tcard { width: auto; flex: 1 1 0; min-width: 0; }
}

/* ============================================================
   R12 — mobile parity + hero glow (2026-08-06)
   ============================================================ */

/* --- stronger halo, still only on the glyphs. More layers close in rather than a
       wider radius, so it reads as light coming off the letters, not a panel. --- */
.hero__title--type {
  text-shadow:
    0 0 2px  rgba(255,255,255,1),    0 0 4px  rgba(255,255,255,1),
    0 0 6px  rgba(255,255,255,1),    0 0 9px  rgba(255,255,255,1),
    0 0 13px rgba(255,255,255,1),    0 0 18px rgba(255,255,255,0.97),
    0 0 25px rgba(255,255,255,0.9),  0 0 34px rgba(255,255,255,0.74),
    0 0 46px rgba(255,255,255,0.5);
}
/* the offer chip and the caret sit in the same field, so give them the same treatment */
.hero__title--type .caret { box-shadow: 0 0 12px rgba(255,255,255,0.9); }

/* --- MOBILE PARITY --------------------------------------------------------
   The three overrides below undo earlier mobile-only shrinking so phones get
   the desktop treatment. Each one re-states the desktop value rather than
   removing the old rule, so the original mobile block stays intact above. --- */

@media (max-width: 720px) {
  /* 1 — buttons keep their desktop size instead of shrinking to fit */
  .hero__ctas .pill,
  .ctarow .pill,
  .mobcta .pill {
    padding: 15px 28px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    width: auto;
  }
  .hero__ctas { width: auto; max-width: 100%; }
  .pill--offer {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 12px; padding: 15px 24px; font-size: 12.5px; max-width: 100%;
  }
  .pill--offer .pill__tag { font-size: 10.5px; padding: 4px 10px; }
}

@media (max-width: 900px) {
  /* 2 — project cards keep the desktop crop, so every tile is the same shape
         instead of the first three going wide and the rest not */
  .proj__media,
  .proj:nth-child(2) .proj__media,
  .proj:nth-child(3) .proj__media { aspect-ratio: 1 / 0.96; }

  /* 3 — capabilities cards stack and recede on phones exactly as on desktop.
         They were pinned to `position: relative` here, which killed the effect;
         the media is shortened so a whole card still fits above the fold. */
  .scard { position: sticky; top: 80px; }
  .scard__media { aspect-ratio: 16 / 11; }
  .scard__body { padding: 0 6px 14px; }
  .scard__body p { font-size: 14.5px; }
  .scard__chips { padding-top: 18px; }
}

/* --- SVNTO Studio: the canvas / blocks sections are a coming-soon panel for now --- */
.st2-soon { display: grid; place-items: center; }
.st2-soon__panel {
  background: var(--tile); border-radius: 20px;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px);
  text-align: center; max-width: 760px; width: 100%;
}
.st2-soon__panel .badge { margin-bottom: 26px; }
.st2-soon__panel .k-h { margin-bottom: 20px; }
.st2-soon__note {
  font-size: 15.5px; line-height: 1.65; color: var(--gray);
  max-width: 520px; margin: 0 auto;
}
/* the hero's bottom padding was sized for a CTA row that is no longer there */
.st2-hero { padding-bottom: 12px; }
.st2-soon { padding-top: clamp(40px, 5vw, 68px); }

/* ============================================================
   R13 — a little more headline glow, matched mobile hero buttons
   ============================================================ */

/* Same approach as before — extra layers stacked close in rather than a bigger
   radius, so it stays a halo on the letters and never becomes a panel. */
.hero__title--type {
  text-shadow:
    0 0 2px  rgba(255,255,255,1),    0 0 4px  rgba(255,255,255,1),
    0 0 6px  rgba(255,255,255,1),    0 0 9px  rgba(255,255,255,1),
    0 0 12px rgba(255,255,255,1),    0 0 16px rgba(255,255,255,1),
    0 0 21px rgba(255,255,255,0.99), 0 0 27px rgba(255,255,255,0.95),
    0 0 35px rgba(255,255,255,0.86), 0 0 45px rgba(255,255,255,0.7),
    0 0 58px rgba(255,255,255,0.5);
}

/* --- mobile: the two hero buttons become a matched pair — same width, same
       height, one line each. The offer chip only fits on one line at desktop
       type size if its tracking and side padding come in slightly, so those are
       the two things that give; the font size stays at the desktop 12.5px. --- */
@media (max-width: 720px) {
  .hero__ctas { width: 100%; max-width: 340px; }
  /* the offer pill carries a chip, which makes its line box taller than plain
     text — a shared min-height makes the pair exactly equal */
  .hero__ctas .pill { width: 100%; min-height: 56px; }
  .pill--offer {
    flex-direction: row; flex-wrap: nowrap; justify-content: center;
    gap: 10px; padding: 15px 18px;
    font-size: 12.5px; letter-spacing: 0.02em;
    /* flex-wrap alone only stops the chip and the label splitting onto two rows —
       the label text still wrapped inside its own line box */
    white-space: nowrap;
  }
  .pill--offer .pill__tag { font-size: 10.5px; padding: 4px 8px; letter-spacing: 0.03em; }
}
/* below ~360px there is genuinely not enough room for both on one line — let the
   chip wrap rather than overflow the screen */
@media (max-width: 359px) {
  .pill--offer { flex-wrap: wrap; white-space: normal; gap: 8px; }
}

/* ============================================================
   R14 — feathered headline glow, single CTA, left-ranged headings
   ============================================================ */

/* A long, smooth alpha ramp instead of a few strong steps: each layer is only a
   little dimmer and a little wider than the one before, so the halo dissolves into
   the wall with no visible edge. It follows the glyphs, never a box. */
.hero__title--type {
  text-shadow:
    0 0 1px  rgba(255,255,255,1),    0 0 3px  rgba(255,255,255,1),
    0 0 5px  rgba(255,255,255,1),    0 0 8px  rgba(255,255,255,1),
    0 0 11px rgba(255,255,255,1),    0 0 15px rgba(255,255,255,0.99),
    0 0 20px rgba(255,255,255,0.97), 0 0 26px rgba(255,255,255,0.93),
    0 0 33px rgba(255,255,255,0.87), 0 0 41px rgba(255,255,255,0.78),
    0 0 51px rgba(255,255,255,0.66), 0 0 63px rgba(255,255,255,0.52),
    0 0 78px rgba(255,255,255,0.37), 0 0 96px rgba(255,255,255,0.22),
    0 0 118px rgba(255,255,255,0.1);
}

/* one button, centred */
.hero__ctas--single { justify-content: center; }
@media (max-width: 720px) {
  .hero__ctas--single { width: auto; max-width: 100%; }
  .hero__ctas--single .pill { width: auto; min-height: 0; }
}

/* --- every heading ranges left, except the hero, which stays centred --- */
.howc, .st2-hero, .cta, .ct-head, .lmq__cap, .st2-soon__panel { text-align: left; }
.howc__sub, .st2-hero__sub, .st2-soon__note, .cta p { margin-left: 0; margin-right: 0; }
.howc__title, .st2-hero h1, .cta h2, .st2-soon__panel .k-h { text-align: left; }
.testi__head, .ab-founders__head, .ab-founders__title { text-align: left; }
.st2-soon { place-items: stretch; }
.st2-soon__panel { max-width: 100%; }
.cta--only, .hero__center, .hero__title, .hero__ctas { text-align: center; }
.lmq__cap { padding-left: var(--gutter); padding-right: var(--gutter); }
.footer__talk { text-align: left; }

/* --- the campaign plates and hero films are 1920x1080, so stop cropping them --- */
.pd-hero figure { aspect-ratio: 16 / 9; }
.pd-gallery figure.pd-wide { aspect-ratio: 16 / 9; }

/* --- the five brief questions --- */
.ct-form__lead {
  font-size: 17px; font-weight: 500; color: var(--ink);
  padding-bottom: 18px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px;
}

/* ============================================================
   R15 — glow behind the heading (not around the glyphs)
   ============================================================ */

/* A soft luminous field sitting behind the headline, sized to the heading's own
   box. It is an ellipse, not a rectangle, and it reaches full transparency well
   before the corners — plus a heavy blur — so there is no edge anywhere. The
   per-glyph shadow drops right back so the type reads as sitting ON light rather
   than being outlined by it. */
.hero__title--type::before {
  content: ""; position: absolute; z-index: -1;
  inset: -16% -7%;
  background: radial-gradient(ellipse 62% 54% at 50% 50%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.95) 28%,
    rgba(255, 255, 255, 0.80) 46%,
    rgba(255, 255, 255, 0.52) 62%,
    rgba(255, 255, 255, 0.26) 76%,
    rgba(255, 255, 255, 0.08) 89%,
    rgba(255, 255, 255, 0) 100%);
  filter: blur(20px);
  pointer-events: none;
}
/* light touch only — enough to keep the letterforms crisp on top of the field */
.hero__title--type {
  text-shadow:
    0 0 3px rgba(255,255,255,0.95),
    0 0 8px rgba(255,255,255,0.8),
    0 0 18px rgba(255,255,255,0.55);
}

/* the client line stays centred */
.lmq__cap { text-align: center; }

/* ============================================================
   R16 — bigger glow field, Studio page spacing after the panel
   ============================================================ */

/* Same soft ellipse, a noticeably larger field. The gradient stops are unchanged —
   growing the box is what grows the glow, so the falloff stays as smooth as it was. */
.hero__title--type::before {
  inset: -46% -20%;
  filter: blur(28px);
}

/* --- SVNTO Studio: the hero now runs straight into the request form, so the
       padding that was tuned around the coming-soon panel is retuned here --- */
.st2-hero { padding-bottom: clamp(40px, 5vw, 72px); }
#request { padding-top: clamp(48px, 5.5vw, 80px); border-top: 1px solid var(--hairline); }

/* ============================================================
   R17 — blurred backdrop instead of a white glow, one heading size
   ============================================================ */

/* The field behind the headline now BLURS what is behind it rather than washing it
   white. The soft edge comes from a mask, not from the fill, so it feathers away
   with no boundary — same footprint as the white version it replaces. */
.hero__title--type::before {
  inset: -46% -20%;
  background: rgba(255, 255, 255, 0.22);   /* just enough lift to hold black type */
  filter: none;
  backdrop-filter: blur(22px) saturate(0.92);
  -webkit-backdrop-filter: blur(22px) saturate(0.92);
  -webkit-mask-image: radial-gradient(ellipse 60% 52% at 50% 50%,
    #000 0%, #000 34%, rgba(0,0,0,0.85) 52%, rgba(0,0,0,0.55) 68%,
    rgba(0,0,0,0.25) 82%, rgba(0,0,0,0.06) 93%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 52% at 50% 50%,
    #000 0%, #000 34%, rgba(0,0,0,0.85) 52%, rgba(0,0,0,0.55) 68%,
    rgba(0,0,0,0.25) 82%, rgba(0,0,0,0.06) 93%, transparent 100%);
}

/* ---- one size for every display heading on the site ----
   Card and list titles (blog cards, project tiles, plan cards, FAQ rows,
   testimonial names) are deliberately NOT in this list — at display size they
   would break the grids they sit in. */
:root { --h-display: clamp(2rem, 4.4vw, 4rem); }

.hero__title--type,
.k-h,
.howc__title,
.cta h2,
.ab-founders__title,
.pjhead__title,
.pd-head h1,
.ct-head h1,
.ct-head__h,
.st2-hero h1,
.art-head h1,
.ct-form h2 {
  font-size: var(--h-display);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

@media (max-width: 720px) {
  /* smaller on a phone, and held off the edges */
  :root { --h-display: clamp(1.45rem, 7vw, 2.3rem); }
  .hero__title--type { max-width: 88vw; }
  .k-h, .howc__title, .cta h2, .ab-founders__title, .pjhead__title,
  .pd-head h1, .ct-head h1, .ct-head__h, .st2-hero h1, .art-head h1 { max-width: 100%; }

  /* the capability stills are square — 16/11 was cutting their tops and bottoms off */
  .scard__media { aspect-ratio: 1 / 1; }
}
/* square media makes the card taller, so it sticks a little higher and the padding
   comes in — a whole card still clears the fold on a 812px screen */
@media (max-width: 900px) {
  .scard { top: 64px; padding: 14px; }
  .scard__chips { padding-top: 14px; }
}

/* ============================================================
   R18 — white glow back (bigger), one-line phone heading,
         sticky bar trimmed, menu from the top
   ============================================================ */

/* ---- the white field is back, and larger than the version it replaces.
        A soft-light ellipse centred on the heading box, transparent well before
        the corners and blurred, so it reads as light rather than a panel. ---- */
.hero__title--type::before {
  content: ""; position: absolute; z-index: -1;
  inset: -56% -24%;
  background: radial-gradient(ellipse 58% 50% at 50% 50%,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.94) 26%,
    rgba(255,255,255,0.84) 42%,
    rgba(255,255,255,0.62) 56%,
    rgba(255,255,255,0.38) 68%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0.05) 91%,
    rgba(255,255,255,0) 100%);
  filter: blur(26px);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}
/* enough shadow to keep the letter edges clean where the field thins out,
   not so much that it reads as a stroke */
.hero__title--type {
  text-shadow:
    0 0 4px rgba(255,255,255,0.98),
    0 0 10px rgba(255,255,255,0.9),
    0 0 20px rgba(255,255,255,0.7),
    0 0 34px rgba(255,255,255,0.45);
}

@media (max-width: 720px) {
  /* ---- headings small enough that line 1 of the hero holds on ONE line.
          Same token drives every display heading, so the whole site follows. ---- */
  :root { --h-display: clamp(0.85rem, 4.85vw, 1.6rem); }   /* floor low enough that 360px phones still hold line 1 */
  .hero__title--type { max-width: 94vw; }

  /* the field is proportionally taller on a phone — two short lines, not one long one */
  .hero__title--type::before { inset: -105% -16%; filter: blur(22px); }

  /* ---- sticky bar: no strapline, button on the left, one line of text ---- */
  .mobcta { justify-content: flex-start; gap: 0; padding-left: 16px; }
  .mobcta__txt { display: none; }
  .mobcta .pill {
    width: auto; min-height: 0;
    padding: 13px 22px; font-size: 11.5px; letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* ---- mobile menu starts at the top instead of floating in the middle ---- */
  .mobmenu {
    justify-content: flex-start;
    padding-top: calc(var(--nav-h, 76px) + 12px);
    overflow-y: auto;
  }
  .mobmenu a { font-size: clamp(1.5rem, 6.6vw, 2.2rem); }
}

/* ============================================================
   R19 — article pages range left and justify (2026-08-08)
   ============================================================ */

/* The article column was centred in the viewport. It now starts at the page
   gutter like every other page, and the body copy is justified. */
.art-head,
.art-body { margin-left: 0; margin-right: 0; text-align: left; }
.art-head { max-width: 980px; }
.art-body { max-width: 1040px; }   /* wider column so justification doesn't gape */
.art-body p,
.art-body li { text-align: justify; text-justify: inter-word; hyphens: auto; }
.art-body h2,
.art-head h1,
.art-head__meta { text-align: left; }
.art-hero { margin-left: 0; margin-right: 0; max-width: 1180px; }
/* the article hero is a 16:9 card now, matching the new blog images */
.art-hero img { aspect-ratio: 16 / 9; }

/* justification needs room to breathe — leave it ragged on a phone */
@media (max-width: 720px) {
  .art-body p, .art-body li { text-align: left; hyphens: manual; }
}

/* the blog cards carry 16:9 art now, so stop cropping them to 4:3 */
.bg-card figure { aspect-ratio: 16 / 9; }

/* the blog index header ranges left like the rest of the site */
.bg-head { text-align: left; }
.bg-head h1 { text-align: left; font-size: var(--h-display); line-height: 1.12; letter-spacing: -0.015em; }
.bg-head__sub { margin-left: 0; margin-right: 0; max-width: 620px; }