/* ══════════════════════════════════════════════════════════════
   No Fault Design — public website design system
   One stylesheet, no build step, no external requests.
   ══════════════════════════════════════════════════════════════ */

/* ── typefaces ────────────────────────────────────────────────
   Bricolage Grotesque carries the display voice: it has a slight
   irregularity that keeps big headlines from looking like every
   other startup page. Plus Jakarta Sans reads underneath it —
   rounder and warmer than the usual grotesque, and it holds up at
   14px on a phone. Both are self-hosted variable fonts, so the
   content-security policy stays closed and nothing is requested
   from a third party.
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url("/assets/fonts/jakarta.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  /* palette taken from the logo gradient */
  --brand-1: #ff644e;
  --brand-2: #ff275d;
  --brand:   #fb3f57;
  --brand-ink: #c4123c;                 /* passes contrast on white */
  --gradient: linear-gradient(135deg, var(--brand-1), var(--brand-2));

  --ink: #14100f;
  --ink-soft: #33302e;
  --muted: #6b6663;
  --paper: #ffffff;
  --paper-soft: #faf8f7;
  --paper-warm: #f4efec;
  --night: #0d0b0b;
  --line: rgba(20, 16, 15, .11);
  --line-soft: rgba(20, 16, 15, .06);

  --font-display: "Bricolage", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(20,16,15,.04), 0 12px 32px rgba(20,16,15,.06);
  --shadow-lg: 0 2px 6px rgba(20,16,15,.05), 0 26px 60px rgba(20,16,15,.10);
  --radius: 18px;
  --wrap: 1180px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; background: var(--paper); color: var(--ink-soft);
  font-family: var(--font-body); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;                    /* nothing may scroll the page sideways */
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap.narrow { max-width: 900px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ── type scale ── */
h1, h2, h3, h4 {
  font-family: var(--font-display); color: var(--ink); margin: 0 0 .5em;
  font-weight: 700; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); font-weight: 800; line-height: 1.03; letter-spacing: -.042em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -.038em; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.38rem); letter-spacing: -.022em; line-height: 1.22; }
h4 { font-size: 1.02rem; letter-spacing: -.02em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
.lead {
  font-size: clamp(1.04rem, 1.55vw, 1.24rem); line-height: 1.58;
  color: var(--muted); max-width: 60ch; text-wrap: pretty;
}
.eyebrow {
  display: inline-block; font-family: var(--font-body);
  font-size: .73rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--brand-ink); margin-bottom: 16px;
}
.gradient-text {
  background: var(--gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand);
}
.underline-mark {
  background-image: linear-gradient(var(--brand-1), var(--brand-2));
  background-repeat: no-repeat; background-size: 100% .18em; background-position: 0 88%;
  padding-inline: .04em;
}

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 30px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  text-align: center; line-height: 1.2;
  background: var(--gradient); color: #fff;
  box-shadow: 0 8px 22px rgba(251,63,87,.28);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .2s, color .2s;
}
.btn.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.light { background: #fff; color: var(--ink); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.btn.on-dark { background: none; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.42); }
.btn.sm { padding: 11px 21px; font-size: .9rem; }
.btn.block { width: 100%; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(251,63,87,.36); }
  .btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .btn.light:hover { box-shadow: 0 14px 30px rgba(0,0,0,.22); }
  .btn.on-dark:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px #fff; }
}
.btn:active { transform: translateY(0) scale(.985); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row.centre { justify-content: center; }

/* ── header ────────────────────────────────────────────────────
   On the home page the header floats over the dark hero, then
   turns solid once the hero scrolls away. Everywhere else it is
   solid from the start, because those pages open on white.
   ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: inset 0 -1px 0 var(--line-soft);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.brand img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.brand span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.025em; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 28px; }
.nav > a { font-size: .95rem; font-weight: 500; color: var(--ink-soft); position: relative; padding: 5px 0; }
/* the underline belongs to the text links only, never to the button */
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--gradient); transition: right .35s var(--ease);
}
.nav > a:not(.btn):hover::after,
.nav > a:not(.btn)[aria-current="page"]::after { right: 0; }
.nav > a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-foot { display: none; }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 10px; margin-right: -10px; color: var(--ink); line-height: 0;
}
.nav-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* floating-over-hero variant */
.site-header.over:not(.stuck) {
  background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header.over:not(.stuck) .brand,
.site-header.over:not(.stuck) .nav > a,
.site-header.over:not(.stuck) .nav-toggle { color: #fff; }
.site-header.over:not(.stuck) .nav > a { color: rgba(255,255,255,.86); }
.site-header.over:not(.stuck) .nav > a[aria-current="page"] { color: #fff; }
.site-header.over:not(.stuck) .brand img { box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.site-header.stuck { box-shadow: inset 0 -1px 0 var(--line-soft), 0 10px 30px rgba(20,16,15,.05); }

/* ── hero: home ───────────────────────────────────────────────
   A dark stage. If a video has been uploaded in the admin it is
   the background; otherwise the animated gradient below stands in,
   so the page never opens on an empty black box.
   ───────────────────────────────────────────────────────────── */
.hero-stage {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(var(--header-h) * -1);            /* header floats over it */
  padding: calc(var(--header-h) + clamp(72px, 12vw, 132px)) 0 clamp(56px, 8vw, 104px);
  background: var(--night); color: #fff;
  min-height: min(88vh, 780px); display: flex; align-items: center;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--night); }
/* the one rule that makes an arbitrary video "fit": fill the box, crop the excess */
.hero-media video,
.hero-media img.poster {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; filter: saturate(.92) contrast(1.04);
}
/* Legibility scrim: dark where the text sits, and a low warm wash that grades
   whatever footage is uploaded towards the brand rather than leaving it a
   colour of its own. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(64% 56% at 10% 40%, rgba(255,100,78,.1), transparent 70%),
    linear-gradient(to right, rgba(8,7,9,.9) 0%, rgba(8,7,9,.64) 44%, rgba(8,7,9,.3) 100%),
    linear-gradient(to top, rgba(8,7,9,.72) 0%, transparent 54%);
}
/* the animated stand-in is already dark, so it only needs enough scrim to
   settle the text — any more and the colour disappears entirely */
.hero-media.no-video::after {
  background:
    linear-gradient(to right, rgba(8,6,6,.72) 0%, rgba(8,6,6,.4) 46%, rgba(8,6,6,.12) 100%),
    linear-gradient(to top, rgba(8,6,6,.55) 0%, transparent 52%);
}
.hero-media.has-wall::after {
  z-index: 1;
  background:
    linear-gradient(to right, rgba(7,5,6,.96) 0%, rgba(7,5,6,.88) 40%, rgba(7,5,6,.76) 74%, rgba(7,5,6,.84) 100%),
    linear-gradient(to top, rgba(7,5,6,.86) 0%, rgba(7,5,6,.3) 62%),
    radial-gradient(84% 80% at 46% 44%, transparent 26%, rgba(3,2,4,.72) 100%);
}
/* ── hero background: the wall of work ───────────────────────
   When no video has been uploaded the hero is not a gradient. It is
   the studio's actual portfolio: columns of real project shots
   drifting past on a diagonal, at different speeds and directions,
   behind a heavy scrim. It says "we have built a lot of things"
   before a single word is read, and it cannot be mistaken for any
   other site because it is made of their own work.

   The images are the same files the page loads further down, so they
   cost one cache entry each rather than a fresh download, and every
   column animates transform only, which stays on the compositor. */
.hero-wall {
  position: absolute; inset: -18% -22%;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 22px; transform: rotate(-9deg) scale(1.08);
  opacity: .72;
}
.wall-col { display: grid; gap: 20px; align-content: start; will-change: transform; }
.wall-col:nth-child(1) { animation: wall-up 58s linear infinite; }
.wall-col:nth-child(2) { animation: wall-down 46s linear infinite; }
.wall-col:nth-child(3) { animation: wall-up 68s linear infinite; }
.wall-col:nth-child(4) { animation: wall-down 52s linear infinite; }
.wall-col img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.08);
  filter: saturate(.42) contrast(.92) brightness(.5) blur(1.5px);
}
/* each column holds its images twice, so -50% lands exactly on a repeat */
@keyframes wall-up   { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(0, -50%, 0); } }
@keyframes wall-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }

/* a warm light sweeping across the wall keeps it from looking static */
.hero-wall-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(48% 46% at 18% 26%, rgba(255,100,78,.4), transparent 68%),
    radial-gradient(44% 44% at 88% 78%, rgba(255,39,93,.34), transparent 70%);
  mix-blend-mode: screen;
  animation: glow-drift 30s var(--ease) infinite alternate;
}
@keyframes glow-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(5%, -4%, 0) scale(1.14); } }

@media (prefers-reduced-motion: reduce) {
  .wall-col, .hero-wall-glow { animation: none; }
  .wall-col:nth-child(even) { transform: translate3d(0, -22%, 0); }
}

/* Plain gradient stand-in, used only before any project has been added. */
.hero-fallback { position: absolute; inset: 0; overflow: hidden; background: #08070a; }
.hero-fallback span { position: absolute; will-change: transform; }
.hero-fallback .sheen {
  inset: -60% -30%;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255,100,78,.16), rgba(122,92,255,.13) 28%, rgba(255,39,93,.16) 52%,
    rgba(38,180,255,.1) 74%, rgba(255,100,78,.16));
  animation: sheen-spin 44s linear infinite;
}
.hero-fallback .orb { border-radius: 50%; }
.hero-fallback .o1 {
  width: 62vmax; height: 62vmax; left: -18vmax; top: -26vmax;
  background: radial-gradient(circle at 50% 50%, rgba(255,100,78,.72), rgba(255,100,78,0) 64%);
  animation: drift-a 26s var(--ease) infinite alternate;
}
.hero-fallback .o2 {
  width: 54vmax; height: 54vmax; right: -16vmax; bottom: -22vmax;
  background: radial-gradient(circle at 50% 50%, rgba(255,39,93,.66), rgba(255,39,93,0) 64%);
  animation: drift-b 32s var(--ease) infinite alternate;
}
.hero-fallback .o3 {
  width: 46vmax; height: 46vmax; right: 6vmax; top: -14vmax;
  background: radial-gradient(circle at 50% 50%, rgba(122,92,255,.52), rgba(122,92,255,0) 64%);
  animation: drift-c 22s var(--ease) infinite alternate;
}
.hero-fallback .o4 {
  width: 34vmax; height: 34vmax; left: 30%; bottom: -14vmax;
  background: radial-gradient(circle at 50% 50%, rgba(255,176,64,.34), rgba(255,176,64,0) 66%);
  animation: drift-d 36s var(--ease) infinite alternate;
}
@keyframes sheen-spin { to { transform: rotate(360deg); } }
@keyframes drift-a { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(11vw, 7vh, 0) scale(1.18); } }
@keyframes drift-b { from { transform: translate3d(0,0,0) scale(1.12); } to { transform: translate3d(-13vw,-8vh,0) scale(.92); } }
@keyframes drift-c { from { transform: translate3d(0,0,0) scale(.95); }  to { transform: translate3d(-9vw, 9vh, 0) scale(1.15); } }
@keyframes drift-d { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(14vw,-6vh, 0) scale(1.2); } }

/* film grain over whichever background is in use */
.hero-grain {
  position: absolute; inset: -50%; z-index: 2; opacity: .42;
  mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation: grain-shift 1.1s steps(4) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-6%, 4%, 0); }
  50%  { transform: translate3d(4%, -6%, 0); }
  75%  { transform: translate3d(-4%, -4%, 0); }
  100% { transform: translate3d(6%, 5%, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-grain { display: none; } }

.hero-inner {
  position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(32px, 4vw, 60px); align-items: center;
}
.hero-copy { min-width: 0; }

/* real project shots, stacked and tilted — proof in the first screenful
   rather than a half-empty hero */
.hero-proof { position: relative; min-width: 0; height: clamp(340px, 34vw, 440px); }
.hero-proof figure {
  position: absolute; margin: 0; overflow: hidden; border-radius: 18px;
  background: #111; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.hero-proof img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.hero-proof figcaption {
  position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; color: #fff;
  font-size: .82rem; font-weight: 600; letter-spacing: -.01em;
  background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
}
.hero-proof figcaption small { display: block; font-weight: 500; opacity: .7; font-size: .76rem; }
.hero-proof .hp-back  { width: 72%; right: 0; top: 0; transform: rotate(3.2deg); }
.hero-proof .hp-front { width: 76%; left: 0; bottom: 0; transform: rotate(-2.6deg); }
@media (hover: hover) {
  .hero-proof figure { transition: transform .5s var(--ease); }
  .hero-stage:hover .hero-proof .hp-back  { transform: rotate(4.4deg) translateY(-6px); }
  .hero-stage:hover .hero-proof .hp-front { transform: rotate(-3.4deg) translateY(6px); }
}
.hero-stage h1 { color: #fff; max-width: 16ch; margin-bottom: 20px; }
.hero-stage .lead { color: rgba(255,255,255,.82); max-width: 52ch; font-size: clamp(1.06rem, 1.5vw, 1.22rem); }
.hero-stage .btn-row { margin-top: 32px; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92); font-size: .82rem; font-weight: 600; letter-spacing: -.01em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-kicker b {
  background: var(--gradient); color: #fff; font-weight: 700;
  padding: 3px 11px; border-radius: 999px; font-size: .74rem;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.22); flex: none; }
/* short reassurance line under the buttons */
.hero-assure {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px;
  list-style: none; padding: 0; font-size: .88rem; color: rgba(255,255,255,.72);
}
.hero-assure li { display: flex; align-items: center; gap: 8px; }
.hero-assure li::before { content: "✓"; color: #34d399; font-weight: 700; }

/* ── hero: inner pages ── */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 8vw, 96px) 0 clamp(30px, 4vw, 46px);
}
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 78vh; z-index: 0;
  background:
    radial-gradient(58% 58% at 22% 18%, rgba(255,100,78,.16), transparent 70%),
    radial-gradient(48% 48% at 82% 6%, rgba(255,39,93,.13), transparent 70%);
  /* the hero clips its overflow, so without this the glow ends in a hard
     horizontal seam across the page instead of fading out */
  mask-image: linear-gradient(to bottom, #000 34%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent 96%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { max-width: 17ch; }
.hero .lead { margin-top: 6px; }

/* ── sections ── */
section { padding: clamp(56px, 7.5vw, 100px) 0; }
section.tight { padding-top: clamp(20px, 3vw, 34px); }
.section-head { max-width: 64ch; margin-bottom: clamp(30px, 4vw, 50px); }
.section-head.centre { margin-inline: auto; text-align: center; }
.section-head.centre .lead { margin-inline: auto; }
.tint { background: var(--paper-soft); }
.warm { background: var(--paper-warm); }
.dark { background: var(--night); color: rgba(255,255,255,.74); }
.dark h2, .dark h3 { color: #fff; }
.dark .eyebrow { color: var(--brand-1); }
.dark .lead { color: rgba(255,255,255,.7); }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── proof band ───────────────────────────────────────────────
   Lifted onto the seam between the dark hero and the page so the
   two sections are joined rather than merely stacked. Each fact
   appears once here and nowhere else above the fold.
   ───────────────────────────────────────────────────────────── */
.proof { padding: 0; position: relative; z-index: 3; }
.proof-card {
  margin-top: clamp(-72px, -5vw, -44px); margin-bottom: clamp(28px, 4vw, 44px);
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 22px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.proof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-item {
  padding: clamp(24px, 3vw, 34px) clamp(18px, 2.4vw, 30px);
  border-left: 1px solid var(--line-soft);
}
.proof-item:first-child { border-left: 0; }
.proof-item .v {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1;
  letter-spacing: -.045em; color: var(--ink);
}
.proof-item .k {
  display: block; margin-top: 10px; font-size: .84rem; color: var(--muted);
  line-height: 1.35;
}
.proof-note {
  margin: 0; padding: 16px clamp(18px, 2.4vw, 30px);
  border-top: 1px solid var(--line-soft); background: var(--paper-soft);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: .88rem; color: var(--muted);
}
.proof-note span { display: block; position: relative; padding-left: 15px; }
.proof-note span::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gradient);
}
.proof-note b { color: var(--ink); font-weight: 700; }

/* ── cards ── *//* ── cards ── */
.card {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .96rem; }
.card .num {
  display: block; margin-bottom: 12px; font-size: .74rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--brand-ink);
}
.dark .card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1); box-shadow: none; }
.dark .card p { color: rgba(255,255,255,.68); }
.dark .card .num { color: var(--brand-1); }

/* ── work ── */
.work-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.work-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--ease); }
@media (hover: hover) { .work-card:hover img { transform: scale(1.045); } }
.work-card .meta {
  position: absolute; inset: auto 0 0 0; padding: 72px 24px 24px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.58) 42%, rgba(0,0,0,.2) 72%, transparent 100%);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.work-card .meta h3 { color: #fff; margin: 0 0 3px; font-size: 1.16rem; }
.work-card .meta span { font-size: .84rem; opacity: .82; }

/* alternating case-study rows */
.case { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.case + .case { margin-top: clamp(48px, 7vw, 86px); }
.case-media { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.case img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .7s var(--ease); }
@media (hover: hover) { .case-media:hover img { transform: scale(1.035); } }
.case:nth-child(even) .case-media { order: 2; }
.case h2 { font-size: clamp(1.6rem, 2.9vw, 2.2rem); }

/* ── case study pages ── */
.case-hero { padding-bottom: clamp(18px, 3vw, 30px); }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 18px; font-size: .84rem; color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand-ink); }
.crumbs span[aria-hidden] { opacity: .45; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.case-shot { margin: 0 0 clamp(28px, 4vw, 44px); }
.case-shot img {
  width: 100%; border-radius: 22px; box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-warm);
}

.case-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden;
  margin-bottom: clamp(32px, 4.5vw, 54px);
}
.case-facts > div { background: var(--paper); padding: 18px 20px; }
.case-facts .k {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.case-facts .v { display: block; margin-top: 6px; font-weight: 600; color: var(--ink); }

.case-body {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.case-body h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.case-body aside h3 { font-size: 1.05rem; margin-bottom: 12px; }
.case-outcome {
  margin-top: 22px; padding: 16px 20px; border-radius: 14px;
  background: var(--paper-warm); border-left: 3px solid var(--brand);
  color: var(--ink-soft);
}
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tick-list li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--ink-soft); }
.tick-list li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--brand); font-weight: 700; }

.inline-link {
  color: var(--brand-ink); font-weight: 600;
  box-shadow: inset 0 -1px 0 rgba(196,18,60,.32); word-break: break-word;
}
.inline-link:hover { box-shadow: inset 0 -2px 0 var(--brand-ink); }
.plain-link { color: inherit; }
@media (hover: hover) { .plain-link:hover { color: var(--brand-ink); } }
.card-go {
  display: block; margin-top: 16px; font-size: .88rem; font-weight: 700;
  color: var(--brand-ink);
}

/* ── products ── */
.product { display: flex; flex-direction: column; }
a.product { color: inherit; }
.product h3 { min-height: 2.44em; }
.product img { border-radius: 13px; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 18px; width: 100%; }
.product .btn-row { margin-top: auto; padding-top: 20px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.tags li {
  font-size: .78rem; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--paper-warm); color: var(--ink-soft); border: 1px solid var(--line-soft);
}

/* ── pricing ── */
.price-card { display: flex; flex-direction: column; }
.price-card.featured {
  border-color: rgba(251,63,87,.5);
  box-shadow: 0 2px 6px rgba(251,63,87,.1), 0 24px 50px rgba(251,63,87,.15);
}
.price-card .amount {
  font-family: var(--font-display); font-weight: 800; font-size: 2.2rem;
  letter-spacing: -.045em; color: var(--ink); margin: 8px 0 2px; line-height: 1;
}
.price-card .inr { font-size: .9rem; color: var(--muted); }
.price-card > p { margin-top: 12px; }
.price-card ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 9px; }
.price-card li { position: relative; padding-left: 26px; font-size: .93rem; color: var(--ink-soft); }
.price-card li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--brand); font-weight: 700; }
.price-card .btn { margin-top: auto; }
.badge {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  padding: 5px 11px; border-radius: 999px; background: var(--gradient); color: #fff;
  font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.price-note { margin-top: 20px; font-size: .9rem; color: var(--muted); text-align: center; }

/* ── steps ── */
.steps { counter-reset: step; display: grid; gap: 20px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.step .n {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--gradient); color: #fff; font-family: var(--font-display);
  font-weight: 800; font-size: 1rem;
}
.step h3 { margin-bottom: 4px; }
.step p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ── faq ── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 22px 46px 22px 0; font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; color: var(--brand); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding-bottom: 20px; margin: 0; max-width: 74ch; color: var(--muted); }

/* ── cta band ── */
.cta {
  position: relative; overflow: hidden; border-radius: 26px; text-align: center;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  background: var(--night); color: #fff;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 68% at 18% 0%, rgba(255,100,78,.34), transparent 70%),
    radial-gradient(50% 60% at 86% 100%, rgba(255,39,93,.3), transparent 70%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; }
.cta p { max-width: 54ch; margin-inline: auto; color: rgba(255,255,255,.78); }
.cta .btn-row { justify-content: center; margin-top: 28px; }
.cta .fine { margin-top: 20px; font-size: .87rem; color: rgba(255,255,255,.62); }

/* ── forms ── */
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px;
  transition: border-color .2s, box-shadow .2s;
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; 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='%236b6663' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); outline: none; box-shadow: 0 0 0 4px rgba(251,63,87,.12);
}
.field textarea { min-height: 132px; resize: vertical; }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 14px; }
.alert-ok, .alert-err { border-radius: 12px; padding: 14px 16px; font-size: .94rem; margin-bottom: 18px; }
.alert-ok { background: #ecfdf3; color: #05603a; border: 1px solid #abefc6; }
.alert-err { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }

/* ── contact aside ── */
.contact-card { display: flex; align-items: center; gap: 14px; }
.contact-card .ic {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--paper-warm); color: var(--brand-ink);
}
.contact-card .ic svg { width: 20px; height: 20px; fill: currentColor; }
.contact-card h3 { margin: 0 0 2px; font-size: 1rem; }
.contact-card p { margin: 0; font-size: .93rem; word-break: break-word; }

/* ── footer ── */
.site-footer { background: var(--night); color: rgba(255,255,255,.68); padding: 66px 0 30px; }
.site-footer h4 {
  color: #fff; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  font-family: var(--font-body); font-weight: 700; margin-bottom: 16px;
}
.site-footer a { color: rgba(255,255,255,.68); transition: color .2s; }
.site-footer a:hover { color: #fff; }
.site-footer .brand span { color: #fff; }
.site-footer .cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 36px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .93rem; }
.site-footer .blurb { margin-top: 14px; max-width: 34ch; font-size: .93rem; }
.site-footer .bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; font-size: .85rem;
}

/* ── floating email button ── */
.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 20px; border-radius: 999px;
  background: var(--gradient); color: #fff; font-size: .92rem; font-weight: 700;
  box-shadow: 0 12px 30px rgba(251,63,87,.36);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover: hover) { .fab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(251,63,87,.44); } }
.fab svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ── reveal on scroll ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 0; transform: translateY(20px); } }

/* ══ responsive ══════════════════════════════════════════════ */
@media (max-width: 1020px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-proof { display: none; }
}
@media (max-width: 1000px) {
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-body { grid-template-columns: minmax(0, 1fr); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 30px 24px; }
  .site-footer .cols > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .nav-toggle { display: block; }

  /* ── mobile menu ────────────────────────────────────────────
     A full-screen panel in the brand's dark, not a white list.
     Items are set in the display face at a size worth tapping,
     arrive staggered, and the panel ends with the one action the
     visitor is actually there for. */
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; display: none;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 14px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--night); color: #fff;
  }
  .nav::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(70% 45% at 12% 0%, rgba(255,100,78,.22), transparent 68%),
      radial-gradient(62% 42% at 96% 100%, rgba(255,39,93,.2), transparent 70%);
  }
  .nav.open { display: flex; }
  .nav > * { position: relative; z-index: 1; }

  .nav > a:not(.btn) {
    display: flex; align-items: center; justify-content: space-between;
    padding: 17px 2px; font-family: var(--font-display); font-weight: 700;
    font-size: 1.6rem; letter-spacing: -.03em; color: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .nav > a:not(.btn)::after {
    content: "→"; position: static; right: auto; bottom: auto;
    width: auto; height: auto; background: none; opacity: .3;
    font-family: var(--font-body); font-size: 1rem; transition: none;
  }
  .nav > a:not(.btn)[aria-current="page"] { color: #fff; }
  .nav > a:not(.btn)[aria-current="page"]::after { content: "●"; color: var(--brand-1); opacity: 1; font-size: .6rem; }
  .nav > a.btn { display: none; }          /* replaced by the richer CTA below */

  /* staggered entry — each item arrives just behind the one above it */
  .nav.open > a:not(.btn), .nav.open .nav-foot {
    animation: nav-in .42s var(--ease) both;
  }
  .nav.open > a:nth-of-type(1) { animation-delay: .04s; }
  .nav.open > a:nth-of-type(2) { animation-delay: .08s; }
  .nav.open > a:nth-of-type(3) { animation-delay: .12s; }
  .nav.open > a:nth-of-type(4) { animation-delay: .16s; }
  .nav.open > a:nth-of-type(5) { animation-delay: .20s; }
  .nav.open .nav-foot { animation-delay: .26s; }
  @keyframes nav-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  .nav-foot { display: block; margin-top: auto; padding-top: 26px; }
  .nav-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 20px; border-radius: 16px; background: var(--gradient); color: #fff;
    box-shadow: 0 14px 34px rgba(251,63,87,.34);
  }
  .nav-cta b { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
  .nav-cta small { display: block; font-size: .82rem; opacity: .84; font-weight: 500; }
  .nav-cta svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .nav-mail {
    display: block; margin-top: 16px; font-size: .98rem; font-weight: 600;
    color: rgba(255,255,255,.9); word-break: break-word;
  }
  .nav-meta { margin: 8px 0 0; font-size: .82rem; color: rgba(255,255,255,.5); }

  /* The panel is dark, so the bar above it has to be too.
     Clearing backdrop-filter is not cosmetic: an element with a backdrop
     filter becomes the containing block for fixed-position descendants, so
     while it was set the menu resolved "inset: 64px 0 0 0" against the 64px
     header and collapsed into a thin strip. */
  .site-header.nav-is-open,
  .site-header.over.nav-is-open:not(.stuck) {
    background: var(--night); box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .site-header.nav-is-open .brand,
  .site-header.nav-is-open .nav-toggle { color: #fff; }
  .site-header.nav-is-open .brand span { color: #fff; }

  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-item:nth-child(odd) { border-left: 0; }
  .proof-item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .case { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case:nth-child(even) .case-media { order: 0; }
  .hero-stage { min-height: 0; padding-bottom: clamp(48px, 9vw, 72px); }
  .hero-stage h1 { max-width: 100%; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 20px; }
  .g4 { grid-template-columns: minmax(0, 1fr); }
  .proof-card { margin-top: -28px; border-radius: 18px; }
  .proof-note { flex-direction: column; gap: 9px; font-size: .85rem; }
  /* Two columns for the short link lists rather than one long stack, the
     brand block spanning both, and a properly separated bottom bar. */
  .site-footer { padding: 48px 0 84px; }
  .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .site-footer .cols > div:first-child { grid-column: 1 / -1; }
  .site-footer .blurb { max-width: 42ch; }
  .site-footer h4 { margin-bottom: 12px; font-size: .7rem; }
  .site-footer ul { gap: 9px; font-size: .9rem; }
  .site-footer .cols > div:last-child { grid-column: 1 / -1; }
  .site-footer .cols > div:last-child ul {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
  }
  .site-footer .bottom {
    margin-top: 32px; padding-top: 18px; gap: 8px;
    flex-direction: column; align-items: flex-start;
    font-size: .8rem; line-height: 1.5;
  }
  .btn { width: 100%; }
  .btn.sm, .nav .btn { width: auto; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .product .btn-row .btn, .price-card .btn { width: 100%; }
  .hero-assure { gap: 6px 18px; font-size: .84rem; }
  .fab { right: 14px; bottom: 14px; height: 50px; padding: 0 17px; font-size: .88rem; }
}