/* Grayscale360 - wireframe styles (presentation artifact, not the build).
   Applies moodboard/direction.md: white, accent gradient on interactive
   elements only, hint of pink, Instrument Sans + Figtree, subtle motion.
   Fonts loaded from a CDN here for convenience; the real build self-hosts. */

:root {
  --paper: #ffffff;
  --ink: #050605;
  --ink-muted: #5b5c5b;
  --line: #e7e7e5;
  --accent-start: #e32482;
  --accent-end: #ec195d;
  --accent-solid: #e32482;
  --accent-gradient: linear-gradient(90deg, var(--accent-start), var(--accent-end));
  --accent-tint: #fce9f1;
  --cream: #f7f1e6;
  --slate: #eef1f3;
  --pink-wash: #fff7fa;
  /* The one alternate section background: every page runs white / this /
     white / this, hard-edged, so the magenta CTAs are what stand out. A
     warm neutral (not pink) on purpose - more pink read as too much. */
  --surface-alt: #f8eff2; /* was #f5f2f3; nudged pinker on request, still well short of the rejected #fcf0f5 wash */
  /* Accessibility-driven variants, derived from the locked tokens above
     rather than new raw hex values:
     --line-strong: for borders that must double as the sole visual boundary
     of a UI component (form inputs) — plain --line measures only 1.24:1 on
     white, well under WCAG 1.4.11's 3:1 non-text contrast minimum.
     --accent-solid-strong: for accent-solid text/numerals set on top of
     accent-tint — that pairing measures 3.73:1, under the 4.5:1 AA minimum
     for normal-size text. This darkened variant clears 4.5:1 on both
     accent-tint and white. */
  --line-strong: #868683;
  --accent-solid-strong: color-mix(in srgb, var(--accent-solid) 85%, black);

  --font-display: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 5rem;

  --section-pad: clamp(4.5rem, 3rem + 9vw, 9rem);
  --container: 72rem;
  --radius: 14px;
  --dur: 320ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Restrained ambient wash, not flat white */
  background:
    radial-gradient(60rem 40rem at 82% -10%, rgba(227, 36, 130, 0.05), transparent 70%),
    var(--paper);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; max-width: 62ch; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line); }
a:hover { text-decoration-color: var(--accent-solid); }

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

/* Wireframe scaffolding ---------------------------------------------------- */

.wf-note {
  max-width: var(--container);
  margin: 1.25rem auto 0;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--ink-muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.wf-label {
  position: absolute;
  top: 0.4rem;
  left: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c4c4c0;
}

.wf-tbc {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  margin-left: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-solid-strong);
  background: var(--accent-tint);
  border-radius: 999px;
  vertical-align: middle;
}

/* Presentation mode: hide all wireframe scaffolding for a clean view */
body.clean .wf-note,
body.clean .wf-label,
body.clean .wf-tbc { display: none !important; }

.pmode {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  padding: 0.55rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(5, 6, 5, 0.12);
  border-radius: 999px;
  cursor: pointer;
}
.pmode:hover { border-color: var(--accent-solid); }
@media print { .pmode { display: none; } }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Visually hidden but still announced — for real <label> elements kept for
   accessibility on fields styled to look placeholder-only (contact form). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}
.section--flush { padding-block: 0; }
.section--tight-top { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section--tight-bottom { padding-bottom: 0; }

.section__intro { color: var(--ink-muted); font-size: clamp(1.1rem, 0.9rem + 1vw, 1.4rem); max-width: 44ch; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
}

.accent {
  background-image: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--accent-solid);
  -webkit-text-fill-color: transparent;
}

/* Emphasised headline word/phrase — plain solid magenta text, no chip
   background (the boxed version felt out of place). */
.hl-mark {
  color: var(--accent-solid);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background-image: var(--accent-gradient);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
  transition: filter 0.25s ease, transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 14px 30px -14px rgba(227, 36, 130, 0.45); transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.985); }
/* Ghost button: no second brand hue exists to hover into (the palette is
   deliberately single-accent), so it inverts to the dark ink used
   everywhere else instead of reusing the same pink — keeps the two
   buttons visually distinct on hover rather than both going pink. */
.btn--ghost {
  background: none;
  background-image: none;
  color: var(--ink);
  border: 1px solid var(--line);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.btn--ghost:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #fff;
  filter: none;
  box-shadow: 0 14px 30px -14px rgba(5, 6, 5, 0.35);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: translateY(1px) scale(0.985); }
/* Over the hero photo a see-through ghost button disappears into the
   skyline: give it the nav pill's frosted glass so it reads as a button. */
.hero .btn--ghost {
  background-color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-color: rgba(5, 6, 5, 0.12);
  box-shadow: 0 10px 24px -16px rgba(5, 6, 5, 0.35);
}
.hero .btn--ghost:hover { background-color: var(--ink); border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); background-image: none; }

/* Navbar (ref-01: floating pill) --------------------------------------------*/

.nav-wrap {
  position: sticky;
  top: 0.9rem;
  z-index: 20;
  padding-inline: 1.25rem;
  margin-top: 0.9rem;
}
.nav {
  position: relative;
  max-width: 64rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(5, 6, 5, 0.07);
  border-radius: 999px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
}
.nav__logo { height: 30px; width: auto; display: block; }
.nav__links { display: none; align-items: center; gap: 0.35rem; }
.nav__links > a {
  padding: 0.4rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: 999px;
}
.nav__links > a:hover { color: var(--ink); background: var(--accent-tint); }
.nav__cta { display: none; }
.nav__menu {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.nav__burger,
.nav__burger::before,
.nav__burger::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), background-color 0.2s ease;
}
.nav__burger { position: relative; }
.nav__burger::before,
.nav__burger::after { position: absolute; left: 0; }
.nav__burger::before { top: -6px; }
.nav__burger::after { top: 6px; }
.nav-wrap.is-open .nav__burger { background: transparent; }
.nav-wrap.is-open .nav__burger::before { transform: translateY(6px) rotate(45deg); }
.nav-wrap.is-open .nav__burger::after { transform: translateY(-6px) rotate(-45deg); }

/* Services mega menu */
.nav__mega-wrap { position: static; }
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.nav__trigger svg { width: 12px; height: 12px; transition: transform 0.25s ease; }
.nav__mega-wrap.is-open .nav__trigger,
.nav__mega-wrap:focus-within .nav__trigger { color: var(--ink); background: var(--accent-tint); }
.nav__mega-wrap.is-open .nav__trigger svg,
.nav__mega-wrap:focus-within .nav__trigger svg { transform: rotate(180deg); }

.nav__mega {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 8px;
  width: min(92vw, 22rem);
  padding-top: 0.9rem;              /* hover bridge between trigger and panel */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, translate 0.28s var(--ease-out-expo), visibility 0.28s;
  z-index: 30;
}
.nav__mega-wrap.is-open .nav__mega,
.nav__mega-wrap:focus-within .nav__mega {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}
.nav__mega-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.6rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(5, 6, 5, 0.08);
  border-radius: 16px;
  box-shadow: 0 18px 50px -20px rgba(5, 6, 5, 0.2);
  overflow: hidden;
}
.nav__mega-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: 11px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.2;
  transition: background 0.2s ease;
}
.nav__mega-item:hover { background: var(--accent-tint); }
.nav__mega-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 0.2s ease, color 0.2s ease;
}
/* background-image (the gradient) can't be transitioned directly — it's
   not an animatable property, so swapping it on hover just snaps instead
   of fading. Layering it as an ::before and fading its opacity instead
   is the fix. */
.nav__mega-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--accent-gradient);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav__mega-icon svg { position: relative; z-index: 1; width: 17px; height: 17px; }
.nav__mega-item:hover .nav__mega-icon { border-color: transparent; color: #fff; }
.nav__mega-item:hover .nav__mega-icon::before { opacity: 1; }

@media (min-width: 60rem) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; }
  .nav__brand { justify-self: start; margin: 0; }
  .nav__links { display: flex; justify-self: center; }
  .nav__cta { display: inline-flex; justify-self: end; }
  .nav__menu { display: none; }
}

.nav__cta .btn__arrow { width: 13px; height: 13px; flex: none; }
.btn .btn__arrow { width: 13px; height: 13px; flex: none; margin-left: 0.1rem; transition: transform 0.3s var(--ease); }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }

/* Mobile: the hamburger opens a full-screen overlay menu */
@media (max-width: 59.99rem) {
  body.nav-open { overflow: hidden; }
  .nav-wrap.is-open { z-index: 40; }
  /* backdrop-filter makes .nav a containing block for fixed children; drop it
     while open so the overlay and CTA position against the viewport. Also let
     the pill fade out so only the logo and the X float over the overlay. */
  .nav-wrap.is-open .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  /* keep the logo and the X above the overlay so they stay tappable */
  .nav-wrap.is-open .nav__brand,
  .nav-wrap.is-open .nav__menu { position: relative; z-index: 32; }

  .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    inset: 0;
    z-index: 30;
    padding: clamp(5.5rem, 22vw, 8rem) 1.5rem 8rem;
    background:
      radial-gradient(60rem 40rem at 82% -10%, rgba(227, 36, 130, 0.05), transparent 70%),
      var(--paper);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s ease, visibility 0.26s;
  }
  .nav-wrap.is-open .nav__links { opacity: 1; visibility: visible; }

  .nav__links > a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    padding: 0.85rem 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }
  .nav__links > a:last-of-type { border-bottom: 1px solid var(--line); }

  /* Solutions: a small label, then its three links, listed first */
  .nav__mega-wrap { order: -1; }
  .nav__trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 0 0 0.4rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    pointer-events: none;
  }
  .nav__trigger svg { display: none; }
  .nav__mega {
    position: static;
    opacity: 1;
    visibility: visible;
    translate: none;
    width: auto;
    padding: 0;
  }
  .nav__mega-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  .nav__mega-item {
    padding: 0.85rem 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    border-radius: 0;
    border-top: 1px solid var(--line);
  }
  .nav__mega-item:hover { background: none; }
  .nav__mega-item:last-child { border-bottom: 1px solid var(--line); }
  .nav__mega-icon { display: none; }

  /* "Talk to us" pinned to the bottom of the overlay */
  .nav-wrap.is-open .nav__cta {
    display: inline-flex;
    justify-content: center;
    position: fixed;
    left: 1.5rem;
    right: 1.5rem;
    bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 31;
  }
}

/* Hero (ref: Originkit Hero 40) ------------------------------------------- */

.hero {
  position: relative;
  overflow: clip;
  /* The floating nav sits in its own row above this section, so its
     background (and the grain below) would otherwise stop short of the
     very top of the page, leaving a plain strip behind the nav. Pull the
     box up to start from the top and pad it back down by the same amount
     so the heading's position is unaffected — only the background bleeds
     further up, behind the nav. */
  margin-top: -4.5rem;
  padding-top: calc(clamp(2rem, 1rem + 4vw, 4rem) + 4.5rem);
  padding-bottom: clamp(4rem, 2.5rem + 9vw, 8rem);
  background:
    radial-gradient(48rem 34rem at 12% 112%, rgba(227, 36, 130, 0.04), transparent 70%);
}
/* Fine film grain over the hero, sits above the artwork, below the text.
   mix-blend-mode: multiply lets the noise darken into the wash beneath it
   instead of sitting on top as a flat grey layer (looked like dust on the
   light background before this). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: hero-grain-flicker 7s ease-in-out infinite;
}
.hero .container { position: relative; z-index: 2; width: 100%; }
/* Slow, smooth breathing pulse (not a flicker — a fast strobe read as
   alarming rather than "alive"). Opacity only, gentle ease-in-out. Shared by
   all grain instances (.hero, .shero--textured, .shero--tinted). */
@keyframes hero-grain-flicker {
  0%, 100% { opacity: 0.09; }
  50% { opacity: 0.13; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after, .shero--textured::after, .shero--tinted::after { animation: none; }
}

/* Hero art: a halftone dot cluster, bottom-left only for now. The
   top-right corner accent went through several attempts (literal logo-icon
   watermark, ambient glow, circuit graphic, floating diamonds, an outlined
   "360" numeral) without landing — paused rather than continuing to guess;
   revisit this corner later rather than as part of further hero tuning. */
.hero__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: clip; }
.hero__form { position: absolute; }
/* Background photo. The supplied image is already washed out on the left
   and top; the mask fades its bottom edge into the page so there is no
   hard line where the hero ends, and object-position keeps the skyline
   (right of centre) in view as narrower screens crop the sides. */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 60%;
  /* The supplied photo is heavily washed out already; add back some depth
     and colour, and only fade the last strip so the hero still hands off
     softly to the white page below. */
  filter: saturate(1.35) contrast(1.12) brightness(0.97);
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}
/* Soft white glow over the photo, centred on the text block, so the
   headline and intro stay readable where the skyline passes behind them
   (measured: every text line clears WCAG AA at 1440px and 375px, together
   with the darker hero grey below). Kept light: on a phone the glow covers
   most of the hero, so anything stronger washes the photo out. */
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 46% at 50% 45%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0) 100%);
}
/* Over a photo the standard muted grey (#5b5c5b) drops below 4.5:1 in
   places; use a darker grey for the hero's small text only. */
.hero .hero__lead > p,
.hero .hero__foot-scroll { color: #3d3e3d; }
/* Halftone dot cluster, masked into a soft irregular shape. */
.hero__form--bl {
  bottom: -16%;
  left: -12%;
  width: min(40vw, 460px);
  aspect-ratio: 1;
  background-image: radial-gradient(circle, rgba(227, 36, 130, 0.4) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(42% 62% at 30% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(42% 62% at 30% 40%, #000 20%, transparent 78%);
}
@media (max-width: 48rem) {
  .hero__form--bl { width: 58vw; bottom: -10%; left: -16%; }
}

/* ----- Hero load animation is driven by GSAP (see wireframe-home.html).
   CSS only sets up structure + a paint-time hide so there is no flash
   before the timeline runs. No-JS, no-GSAP and reduced-motion all fall
   through to the fully visible resting state below. */

.hero h1 .hl-line { display: block; overflow: hidden; padding: 0.1em 0 0.2em; margin: -0.1em 0 -0.2em; }
.hero h1 .hl-line > span { display: block; }

/* Paint-time hide, only while GSAP is expected to run */
html.preanim .hero h1 .hl-line > span,
html.preanim .hero .hero__badge,
html.preanim .hero__lead > p,
html.preanim .hero .hero__actions,
html.preanim .hero .hero__foot { opacity: 0; }
html.preanim .hero .hero__form { opacity: 0; } /* scoped to the home hero: only it has a JS timeline to reveal these */

/* Centred lead block, matching the Nomanik reference */
.hero__lead {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}
/* Status-style badge above the headline: outer pill is the plain glass
   container; the dot + bold location text sit in a smaller, lighter pill
   NESTED inside it (per the sketch — an inner capsule, not just a divider
   line); the muted CTA sits directly on the outer pill's background to its
   right, inside the same outer outline. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 1.5rem;
  padding: 4px;
  border-radius: 100px;
  background: rgba(252, 233, 241, 0.55);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 0.5px solid rgba(227, 36, 130, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 28px -16px rgba(227, 36, 130, 0.25);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1em;
}
.hero__badge-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.65);
}
.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-solid);
  box-shadow: 0 0 0 2px rgba(227, 36, 130, 0.22);
  flex: none;
}
.hero__badge-main { font-weight: 700; color: var(--ink); }
.hero__badge-cta {
  padding: 6px 12px;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero__badge-cta:hover { color: var(--ink); }
.hero h1 {
  font-size: clamp(2.4rem, 1.2rem + 4vw, 4rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 auto 1.75rem;
  text-wrap: balance;
}
.hero__lead > p {
  font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.3rem);
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 0 auto 2.5rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; justify-content: center; }
.hero__actions .btn { min-width: 20rem; justify-content: center; }

.hero__foot {
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.hero__foot-scroll { display: inline-flex; align-items: center; gap: 0.35rem; }
/* Small perpetual nudge on the arrow only — transform/opacity only (no
   layout thrash), paused for reduced-motion. */
.hero__foot-arrow { display: inline-block; animation: hero-scroll-bounce 1.6s ease-in-out infinite; }
@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__foot-arrow { animation: none; }
}

/* What we do - sticky rail + scrolling chapters.
   --cap-accent shifts along the brand gradient (magenta -> crimson) as the
   section is scrolled; GSAP sets it, CSS default is the magenta end. */
#what { --cap-accent: #e32482; }
.cap { display: grid; gap: 2rem; margin-top: 3rem; }
@media (min-width: 62rem) {
  .cap { grid-template-columns: 17rem 1fr; gap: 5rem; align-items: start; }
}

/* Rail */
.cap__rail { display: none; }
@media (min-width: 62rem) {
  .cap__rail {
    display: block;
    position: sticky;
    top: 7rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--line);
  }
}
.cap__indicator {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 3.4rem;
  border-radius: 2px;
  background: var(--cap-accent);
}
.cap__railitem {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}
.cap__ricon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-muted);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.cap__ricon svg { width: 17px; height: 17px; }
.cap__railitem:hover { color: var(--ink); }
.cap__railitem.is-active { color: var(--ink); }
.cap__railitem.is-active .cap__ricon {
  border-color: transparent;
  background: var(--cap-accent);
  color: #fff;
}

/* Panels / chapters */
.cap__panels { display: grid; }
.cap__panel {
  padding-block: clamp(2rem, 1.5rem + 4vw, 3.5rem);
  min-height: clamp(17rem, 36vh, 25rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cap__panel:first-child { border-top: 0; }
.cap__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 13px;
  margin-bottom: 1.25rem;
  color: var(--ink);
}
.cap__icon svg { width: 22px; height: 22px; }
.cap__panel h3 {
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.4rem);
  margin-bottom: 0.85rem;
}
.cap__rule {
  width: 3rem;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 1.25rem;
  background: var(--cap-accent);
  transform: scaleX(0.18);
  transform-origin: left;
  opacity: 0.5;
  transition: transform 0.55s var(--ease-out-expo), opacity 0.4s ease;
}
.cap__panel.is-active .cap__rule { transform: scaleX(1); opacity: 1; }
.cap__panel p { color: var(--ink-muted); margin-bottom: 1.25rem; max-width: 54ch; font-size: 1.02rem; }
.cap__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink);
}
.cap__link::after { content: " \2192"; color: var(--cap-accent); display: inline-block; transition: transform 0.2s ease; }
.cap__link:hover { color: var(--cap-accent); }
.cap__link:hover::after { transform: translateX(3px); }

/* Two/three column prose */
.split { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 48rem) { .split { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }

/* Who we work with: two background layers (pink upper band, plain lower
   area) with the cards grid pulled up via negative margin to straddle the
   boundary — real stacked blocks in DOM order, not a z-index trick, so the
   cards (painting after .who-hero) sit above it automatically wherever they
   overlap. Cards stay plain white per spec — no pink card background or
   border; the pink belongs to .who-hero behind them. */
.who-hero {
  padding-top: var(--section-pad);
  padding-bottom: clamp(3rem, 2rem + 5vw, 6rem);
}
.who-cards-band { padding-bottom: var(--section-pad); }
/* Tinted when it falls on an alternate slot in the page rhythm (Home). */
/* Top half of a two-part section: highlight only, no bottom shade, so there
   is no seam where it meets the cards band below. */
.who-hero--alt {
  background: radial-gradient(60rem 28rem at 12% 0%, rgba(255, 255, 255, 0.75), transparent 62%), var(--surface-alt);
}
.who-cards-band--alt { background: var(--surface-alt); }
/* The -7rem pull below outreaches .who-hero's padding-bottom, so an intro
   line under the heading would sit flush on the cards. Clear it (the pull
   is dropped under 40rem, so this only applies above that). */
@media (min-width: 40.01rem) {
  .who-hero .section__intro { margin-bottom: 2.5rem; }
}
.who {
  display: grid;
  gap: 1.25rem;
  margin-top: -7rem;
}
@media (min-width: 50rem) {
  .who { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (max-width: 40rem) {
  /* The straddle overlap (cards pulled up into the pink/white boundary)
     only has room to work on wider screens where .who-hero's own padding
     is generous. On a narrow phone that padding shrinks close to its
     floor, so the same pull crowded the cards right up against the intro
     text. Drop the pull entirely — .who-hero's own padding-bottom is
     already enough of a gap on its own; and since there's no more
     straddle to show off, carry the pink-wash all the way through
     .who-cards-band too, so the whole section reads as one continuous
     pink block on mobile instead of pink stopping partway down. */
  .who { margin-top: 0; }
  .who-hero {
    /* Both paddings inherit the same tokens used site-wide for a full
       section (--section-pad ≈ 5rem+ at this width, plus a ≈3rem bottom
       gap) — sized for a section that's the only thing on the page at
       that point, not for the top slice of a two-part block. Cut both
       down directly instead. */
    padding-top: 2.5rem;
    padding-bottom: 1.75rem;
    border-radius: 0;
  }
}
.who__card {
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  border: 10px solid var(--accent-tint);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 20px 40px -28px rgba(5, 6, 5, 0.18);
  transition: border-color 0.3s ease, transform 0.3s var(--ease);
}
.who__card:hover { transform: translateY(-3px); }
/* Photos ease in slightly on hover, inside their (overflow-clipped) frames. */
.cats__visual-front img, .svc__img img, .who__visual img, .donow-strip__visual img, .whyus__visual img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cats__card:hover .cats__visual-front img,
.svc__row:hover .svc__img img,
.who__card:hover .who__visual img,
.donow-strip__item:hover .donow-strip__visual img,
.donow-strip__item:focus-visible .donow-strip__visual img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .cats__visual-front img, .svc__img img, .who__visual img, .donow-strip__visual img, .whyus__visual img { transition: none; transform: none !important; }
}
/* The lit card: gradient icon only, per the mouse-follow swap in JS.
   Surface stays white — only the icon and border pick up the accent. */
/* Image placeholder, same convention as .cats__visual-front / .logos__item
   (dashed border, muted fill, generic photo icon) — no real photography
   dropped in yet. */
.who__visual {
  margin-top: 1.5rem;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #fafafa;
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}
.who__visual svg { width: 15%; height: 15%; }
.who__visual:has(img) { border: 0; background: none; overflow: hidden; }
.who__visual img { height: auto; aspect-ratio: 16 / 9; }
.who__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 1.1rem;
  color: var(--ink);
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.who__icon svg { width: 21px; height: 21px; }
.who__card.is-lit .who__icon {
  border-color: transparent;
  background-image: var(--accent-gradient);
  color: #fff;
}
.who__eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.35rem;
}
.who__title { margin: 0 0 0.6rem; }
.who__card > p { margin: 0 0 1.25rem; color: var(--ink-muted); }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--ink-muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.who__card.is-lit .tag { border-color: rgba(227, 36, 130, 0.22); }
/* Why Grayscale360 - problem/answer contrast + supporting reasons */
.why__contrast {
  display: grid;
  gap: 1rem;
  margin-top: 2.75rem;
}
@media (min-width: 54rem) {
  .why__contrast { grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; }
}
.why__box {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.why__box--usual { color: var(--ink-muted); background: #f7f7f6; }
.why__box--us { color: var(--ink); background: var(--accent-tint); border-color: transparent; }
.why__box p { margin: 0; }
.why__box-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6rem !important;
  color: var(--ink-muted);
}
.why__box--us .why__box-label { color: var(--ink); }
.why__arrow { display: grid; place-items: center; color: var(--ink-muted); }
.why__arrow svg { width: 68px; height: 22px; }
.why__arrow-line, .why__arrow-head { stroke-dasharray: 1; }
@media (max-width: 53.99rem) {
  .why__arrow svg { rotate: 90deg; }
}

.why__reasons {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 2rem + 3vw, 3.5rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 52rem) {
  .why__reasons { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.why__reason h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.why__reason p { margin: 0; font-size: 0.95rem; color: var(--ink-muted); }

/* About - text left, large offset image right that bleeds off the edge */
.about__eyebrow { margin: 0 0 0.5rem; }
.about__grid { display: grid; gap: 2.5rem; margin-top: 1.5rem; }
@media (min-width: 58rem) {
  .about__grid {
    grid-template-columns: 1fr minmax(15rem, 21rem);
    gap: 3.5rem;
    align-items: start;
  }
}

.about__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 60% at 72% 18%, rgba(227, 36, 130, 0.09), transparent 70%),
    repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(5, 6, 5, 0.028) 10px, rgba(5, 6, 5, 0.028) 11px),
    #f6f5f5;
}
@media (min-width: 58rem) {
  .about__media {
    margin-top: 1.5rem;
    margin-right: calc(-1 * clamp(0.5rem, 2vw, 2rem));   /* small bleed past the container edge */
    aspect-ratio: 4 / 5;
  }
}
.about__ph {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b0b0ac;
}
.about__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}

.about__lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 26ch;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.about__body {
  color: var(--ink-muted);
  max-width: 52ch;
  margin: 0 0 1.75rem;
}
.about__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
}
.about__link .btn__arrow {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.2s ease;
}
.about__link:hover { color: var(--accent-solid); }
.about__link:hover .btn__arrow { transform: translateX(4px); }

/* FAQ */
/* FAQ accordion (native <details> + GSAP height on open) */
.faq { margin-top: 2rem; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-solid); }
.faq__q:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 4px; border-radius: 3px; }
.faq__icon-wrap {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  /* Filled brand magenta with a white plus (client request); the plus
     turns to an x when the item is open. */
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(227, 36, 130, 0.55);
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease;
}
.faq__q:hover .faq__icon-wrap { transform: scale(1.08); box-shadow: 0 8px 18px -8px rgba(227, 36, 130, 0.65); }
.faq__icon { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out-expo); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { overflow: hidden; }
.faq__a p {
  margin: 0;
  padding-bottom: 1.5rem;
  color: var(--ink-muted);
  font-size: 0.98rem;
  max-width: 68ch;
}

/* Closing CTA band (ref-02) -------------------------------------------------*/

.cta {
  position: relative;
  overflow: clip;
  background-color: var(--accent-start);
  /* Centred composition: soft light from top-centre, gentle depth at the
     bottom corners, over the brand gradient. */
  background-image:
    radial-gradient(50% 70% at 50% 0%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 70%),
    /* 8% shade held flat behind the text block (fading out beyond it) so
       white body text clears 4.5:1 on the magenta; edges stay pure brand. */
    radial-gradient(var(--cta-shade-w) 45% at 50% 58%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 58%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(60% 80% at 0% 100%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0) 60%),
    var(--accent-gradient);
  color: #fff;
  text-align: center;
  padding-block: clamp(4.5rem, 3rem + 7vw, 8rem);
}
.cta { --cta-shade-w: 50%; }
@media (max-width: 40rem) { .cta { --cta-shade-w: 95%; } } /* text spans the width on phones */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Faint concentric rings rising from bottom-centre: echoes the rounded
     sheets and quietly nods at "360"; masked so they fade before the text. */
  background: repeating-radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.09) 0 1px, rgba(255, 255, 255, 0) 1px 48px);
  -webkit-mask-image: radial-gradient(75% 95% at 50% 100%, #000 25%, transparent 72%);
  mask-image: radial-gradient(75% 95% at 50% 100%, #000 25%, transparent 72%);
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.17;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.cta .container { position: relative; z-index: 1; }
.cta__rule {
  display: block;
  width: 2.75rem;
  height: 2px;
  margin: 0 auto 1.4rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: center;
}
.cta h2 {
  color: #fff;
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
}
.cta__title {
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.cta__title > span { display: inline-block; will-change: transform; }
.cta__sub { margin: 1.1rem auto 0; color: #fff; font-size: 1.08rem; max-width: 46ch; }
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
  margin-top: 2.5rem;
}
.cta__actions .btn--light {
  transition: transform 0.35s var(--ease-back), box-shadow 0.35s ease, filter 0.2s ease;
}
.cta__actions .btn--light:hover { box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5); }
.cta__actions .btn--light:active { transform: translateY(1px) scale(0.985); }
.cta__actions .btn--light .btn__arrow {
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform 0.3s var(--ease-out-expo);
}
.cta__actions .btn--light:hover .btn__arrow { transform: translate(2px, -2px); }
.cta__ghost {
  position: relative;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding-bottom: 0.22rem;
  background-image: linear-gradient(#fff, #fff);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: background-size 0.3s var(--ease-out-expo);
}
.cta__ghost::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
}
.cta__ghost:hover,
.cta__ghost:focus-visible { background-size: 100% 1.5px; }
.cta__ghost:active { opacity: 0.8; }
.cta__actions .btn--light:focus-visible,
.cta__ghost:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Footer */
.footer { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding-block: clamp(3rem, 2rem + 4vw, 4.5rem); }
.footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.3); }
.footer a:hover { text-decoration-color: var(--accent-start); }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 46rem) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } }
.footer__logo {
  height: 36px;
  width: auto;
  display: block;
  margin-bottom: 1.1rem;
  /* Wordmark PNG is solid black on transparent (built for a light
     background) — inverted to solid white for this dark footer, per
     the reference layout using a plain white lockup here too. */
  filter: brightness(0) invert(1);
}
.footer__tagline { margin: 0 0 1.25rem; max-width: 36ch; line-height: 1.6; font-size: 0.92rem; }
.footer__socials { display: flex; gap: 0.75rem; }
.footer__socials a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease;
}
.footer__socials a:hover { background: rgba(255, 255, 255, 0.18); }
.footer__socials svg { width: 17px; height: 17px; }
.footer nav { display: grid; gap: 0.55rem; font-size: 0.92rem; align-content: start; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { text-decoration: underline; }
.footer__navhead {
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer__bottom p { margin: 0; }
.footer__bottom-links { display: flex; gap: 1.5rem; }

/* ============ Inner pages (services, about, contact) ============ */

.hero--inner {
  position: relative;
  overflow: clip;
  padding-top: clamp(2rem, 1rem + 4vw, 4rem);
  padding-bottom: clamp(3rem, 2rem + 6vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.hero--inner .container { position: relative; z-index: 1; }
.crumb {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
}
.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: var(--accent-solid); }
.hero--inner h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin: 0 0 1.25rem;
}
.hero--inner h1 .hl-line { display: block; overflow: hidden; padding: 0.1em 0 0.2em; margin: -0.1em 0 -0.2em; }
.hero--inner h1 .hl-line > span { display: block; }
.hero--inner__intro {
  font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.3rem);
  color: var(--ink-muted);
  max-width: 52ch;
  margin: 0;
}
.hero--inner__mark {
  position: absolute;
  right: -6%;
  top: 50%;
  translate: 0 -50%;
  width: min(38vw, 420px);
  opacity: 0.06;
  pointer-events: none;
}

/* Problem / narrative section */
.prose h2 { margin-bottom: 0.9rem; }
.prose p { max-width: 62ch; color: var(--ink-muted); }
.prose p + p { margin-top: 0.9rem; }

/* What we deliver - 2-up components */
.deliver { display: grid; gap: 1px; margin-top: 2.5rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 48rem) { .deliver { grid-template-columns: 1fr 1fr; } }
.deliver__item { background: var(--paper); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.deliver__item h3 { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.5rem; font-size: 1.1rem; }
.deliver__item h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background-image: var(--accent-gradient); flex: none; }
.deliver__item p { margin: 0; color: var(--ink-muted); font-size: 0.98rem; }

/* Deep-dive with numbered steps */
.deep { margin-top: 2.5rem; padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); background: var(--accent-tint); border-radius: var(--radius); }
.deep h3 { margin-bottom: 0.6rem; }
.deep > p { max-width: 60ch; color: var(--ink-muted); }
.deep__steps { list-style: none; margin: 1.25rem 0 0; padding: 0; counter-reset: step; display: grid; gap: 0.9rem; }
.deep__steps li { counter-increment: step; padding-left: 2.4rem; position: relative; color: var(--ink-muted); font-size: 0.98rem; }
.deep__steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  color: var(--ink);
}
.deep__steps strong { color: var(--ink); font-weight: 600; }

/* How we work - numbered stages */
.stages { display: grid; gap: 0; margin-top: 2.5rem; border-top: 1px solid var(--line); }
.stages__item {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem) { .stages__item { grid-template-columns: 5rem 1fr; align-items: start; } }
.stages__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--line);
  -webkit-text-stroke: 1px var(--ink-muted);
}
.stages__item h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.stages__item p { margin: 0; color: var(--ink-muted); font-size: 0.98rem; max-width: 58ch; }

/* Section start-a-conversation (inner, not the band) */
.startconv { margin-top: 3rem; }
.startconv p { max-width: 52ch; color: var(--ink-muted); }
.startconv__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.25rem; }

/* About page (full) */
.abt__lead { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 30ch; }
.abt__points { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 52rem) { .abt__points { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.abt__points p { margin: 0; color: var(--ink-muted); font-size: 0.98rem; }
.abt__points strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.3rem; }

/* Contact page */
.contact__grid { display: grid; gap: 3rem; margin-top: 2rem; }
@media (min-width: 52rem) { .contact__grid { grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; } }
.contact__rows { display: grid; gap: 1.5rem; margin-top: 2rem; }
.contact__row { display: flex; align-items: flex-start; gap: 1rem; }
.contact__row p { margin: 0; line-height: 1.6; }
.contact__icon { display: flex; flex: none; color: var(--accent-solid); padding-top: 0.15rem; }
.contact__icon svg { width: 22px; height: 22px; }
.contact__form { display: grid; gap: 1rem; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 0.95rem;
  width: 100%;
  padding: 1rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
}
.field textarea { min-height: 9rem; border-radius: 28px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }
.field select:invalid, .field select option[value=""] { color: var(--ink-muted); }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent-solid); outline-offset: 1px; }
.contact__submit {
  width: 100%;
  justify-content: center;
  background-image: none;
  background: var(--ink);
  padding: 1.05rem 1.6rem;
}
.contact__submit:hover { filter: brightness(1.3); box-shadow: 0 14px 30px -14px rgba(5, 6, 5, 0.45); }
.map {
  margin-top: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
}
.map iframe { display: block; width: 100%; aspect-ratio: 16 / 7; border: 0; }
/* Full-bleed variant: breaks out of .container to span the viewport edge
   to edge, so rounded corners/side borders (meant for an inset card)
   are dropped — a flush strip reads cleaner at full width. */
.map--full { margin-top: 0; border-left: 0; border-right: 0; border-radius: 0; }
.map--full iframe { aspect-ratio: 16 / 5; }

.map-ph {
  margin-top: 2.5rem;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(5,6,5,0.028) 10px, rgba(5,6,5,0.028) 11px),
    #f6f5f5;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #b0b0ac;
}

/* Motion: subtle, once, respects reduced-motion --------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   v2 - nine-section "Solutions" template components
   Applies the approved copy restructure. Keeps the pink system.
   ============================================================ */

/* Solution-page hero: crumb + h1 + subheading + service meta row */
.shero { position: relative; padding-block: clamp(3.5rem, 2.5rem + 7vw, 7rem) clamp(2.5rem, 2rem + 4vw, 4.5rem); }
/* About hero only: the same ambient wash + grain treatment already built for
   the homepage hero (.hero), reused here rather than invented fresh, so this
   one hero gets real presence without turning every inner-page hero (Contact,
   solution pages) the same way. No logo/brand mark used as texture here -
   the dotted cluster on the right is a plain geometric pattern instead. */
.shero--textured, .shero--tinted {
  overflow: clip;
  /* Flat pink-wash (same tone .who-hero already uses), not a top-to-bottom
     gradient — a gradient here means picking one end to be closer to white,
     and either end being white either leaves a stark white patch up near
     the nav or makes the border-radius below invisible against the plain-
     white section after it. The radial corner highlight alone gives it a
     soft, non-flat feel without that trade-off. */
  background:
    radial-gradient(46rem 32rem at 84% -14%, rgba(227, 36, 130, 0.08), transparent 70%),
    var(--pink-wash);
  border-radius: 0 0 2rem 2rem;
  /* Same nav-overlap fix as .hero: bleed the wash+grain up behind the
     floating nav instead of stopping at this section's own top edge and
     leaving a white sliver above it. margin-top pulls the background up
     by exactly the amount padding-top adds back, so the heading itself
     doesn't move — only the background extends further up, behind the
     nav — which is why this doesn't change the visible height. */
  margin-top: -4.5rem;
  padding-top: calc(clamp(3.5rem, 2.5rem + 7vw, 7rem) + 4.5rem);
}
.shero__dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(227, 36, 130, 0.4) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(42% 62% at 92% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(42% 62% at 92% 40%, #000 20%, transparent 78%);
  /* Slow diagonal drift — moves exactly one tile (26px) over the full
     duration, so the loop is seamless. Linear, not eased, since an
     ease-in-out on a repeating loop would visibly stutter at the seam. */
  animation: dots-drift 6s linear infinite;
}
@keyframes dots-drift {
  from { background-position: 0 0; }
  to { background-position: 78px 78px; }
}
/* Mobile: smaller and tucked into the bottom-right corner, clear of the
   heading/paragraph column, and static — no drift, so the small viewport
   stays calm rather than busy. */
@media (max-width: 40rem) {
  .shero__dots {
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(38% 55% at 88% 92%, #000 15%, transparent 75%);
    mask-image: radial-gradient(38% 55% at 88% 92%, #000 15%, transparent 75%);
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shero__dots { animation: none; }
}
.shero--textured::after, .shero--tinted::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: hero-grain-flicker 7s ease-in-out infinite;
}
.shero--textured .container, .shero--tinted .container { position: relative; z-index: 2; }
.shero .crumb { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 1.1rem; }
.shero .crumb a { color: var(--ink-muted); text-underline-offset: 2px; }
.shero h1 { font-size: clamp(2.4rem, 1.55rem + 4.4vw, 4.6rem); max-width: 15ch; }
.shero__sub { margin-top: 1.4rem; font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.3rem); color: var(--ink-muted); max-width: 46ch; }
.shero__meta {
  margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted);
}

/* Contrasting band wrapper (problem section, how-we-work section) */
/* Alternate (tinted) sections. Three quiet layers so the tint reads as a
   surface rather than a flat fill: a 1px hairline on each edge, soft light
   (highlight top-left, faint warm shade bottom-right), and a faint
   blueprint grid in one corner (::before) that dissolves toward the
   content. No extra colour: all neutral, per the "too much pink" call. */
.band,
.who-hero--alt,
.who-cards-band--alt {
  --surface-alt-bg:
    radial-gradient(60rem 28rem at 12% 0%, rgba(255, 255, 255, 0.75), transparent 62%),
    radial-gradient(52rem 30rem at 92% 100%, rgba(120, 96, 88, 0.05), transparent 70%),
    var(--surface-alt);
  position: relative;
  isolation: isolate;
}
.band { background: var(--surface-alt-bg); }
.band:not(.band--pink-wash)::before,
.who-hero--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(5, 6, 5, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 6, 5, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  border-radius: inherit;
  -webkit-mask-image: radial-gradient(38rem 24rem at 100% 0%, #000, transparent 72%);
  mask-image: radial-gradient(38rem 24rem at 100% 0%, #000, transparent 72%);
}
/* Distinct from the plain grey .band above — used for Who we work with,
   which sits right before the (pre-existing) grey-banded How we deliver
   section, so it needs its own colour rather than sharing the same grey
   and merging into one block. Cream is a permanent second background tone
   in the palette now (added alongside white/pink-tint/grey), not a one-off. */
.band--cream { background: var(--cream); }
.band--slate { background: var(--slate); }
/* Trial: one banded section as an inset rounded panel instead of the
   usual full-bleed strip (border-radius is invisible edge-to-edge, so the
   background needs side margins to reveal it). If this reads well, the
   other bands can move to the same treatment for consistency. */
.band--panel { margin-inline: 1.5rem; border-radius: 28px; overflow: hidden; }
@media (min-width: 40rem) { .band--panel { margin-inline: 3rem; } }
@media (min-width: 64rem) { .band--panel { margin-inline: clamp(3rem, 8vw, 9rem); } }
.band--pink-wash { background: var(--pink-wash); position: relative; }
/* Two coloured bands back to back would merge into one block: keep a
   strip of page white between them. */
.band + .band { margin-top: var(--s5); }
/* Same fine film-grain technique as the hero (see .hero::after), just
   without the breathing animation — a calmer, static texture so this
   supporting section doesn't compete with the hero for attention. No
   overflow:hidden here, since .whyus__card straddles below this band's
   bottom edge and would otherwise get clipped. */
.band--pink-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
/* Halftone dot cluster, same technique and irregular-blob mask as the
   hero's dot cluster (.hero__form--bl) — a plain geometric texture, not a
   shaped brand mark. Tucked into the bottom-left corner. */
.band--pink-wash::before {
  content: "";
  position: absolute;
  left: -3%;
  bottom: -10%;
  width: min(24vw, 300px);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--accent-solid) 1.6px, transparent 1.7px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(42% 62% at 30% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(42% 62% at 30% 40%, #000 20%, transparent 78%);
}
.band--pink-wash > .section { position: relative; z-index: 2; }

.pclose { margin-top: 2.5rem; color: var(--ink-muted); font-size: 1.05rem; max-width: 42ch; }
@media (min-width: 48rem) { .pclose { margin-left: auto; width: 50%; } }
/* Boxed variant: a callout note rather than a plain trailing line. */
.pclose--box {
  background: var(--slate);
  border-left: 1.5px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.75rem;
  width: auto;
  max-width: 100%;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow-x: auto;
}
@media (max-width: 40rem) { .pclose--box { white-space: normal; } }

/* "The problem" — interactive split-screen chapter picker. Left: heading,
   intro line, and a 3-item chapter nav. Right: a label/position header, a
   stage holding three absolutely-stacked scenes (only one visible at a
   time — the standing generic image placeholder with a small corner
   numeral, not a bespoke illustration per chapter: the actual illustration
   content for 4 pages x 3 states each isn't signed off yet), and a caption
   row. Driven by _wireframe.js: click, prev/next, left/right arrow keys
   (only while the section is in view), a wheel-nudge while hovering it
   (page scroll isn't blocked), and a GSAP ScrollTrigger pin on desktop
   that holds the section in place for one extra scroll length, advancing
   chapters as you scroll through it. White/black/soft-grey, with the
   site's single pink accent on the active chapter's rule and arrow only. */
.problem-fit { display: grid; }
@media (min-width: 64rem) {
  .problem-fit { grid-template-columns: minmax(21rem, 0.85fr) minmax(28rem, 1.15fr); min-height: calc(100vh - 88px); align-content: center; }
}
.problem-fit__copy {
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) clamp(1.75rem, 1.25rem + 2vw, 2.75rem) clamp(1.75rem, 1.25rem + 2vw, 2.75rem) 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 64rem) { .problem-fit__copy { border-right: 1px solid var(--line); } }
.problem-fit__copy h2 { margin: 0; max-width: 16ch; }
.problem-fit__copy .section__intro { margin: 1.5rem 0 0; max-width: 34ch; font-size: 0.95rem; }
.problem-fit__nav { display: grid; margin-top: auto; padding-top: 2.5rem; }
.problem-fit__btn {
  position: relative;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  padding: 1rem 0;
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-muted);
  font-family: var(--font-body);
  transition: color 0.3s ease;
}
.problem-fit__btn:last-child { border-bottom: 1px solid var(--line); }
.problem-fit__btn::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-solid);
  transition: width 0.4s var(--ease-out-expo);
}
.problem-fit__btn:hover { color: var(--ink); }
.problem-fit__btn.is-active { color: var(--ink); }
.problem-fit__btn.is-active::before { width: 100%; }
.problem-fit__num { font-size: 0.75rem; letter-spacing: 0.04em; }
.problem-fit__title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.problem-fit__arrow {
  display: flex;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: var(--accent-solid);
}
.problem-fit__arrow svg { width: 13px; height: 13px; }
.problem-fit__btn.is-active .problem-fit__arrow { opacity: 1; transform: translateX(0); }

.problem-fit__visual {
  position: relative;
  min-width: 0;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.25rem;
}
.problem-fit__accordion { display: none; }
.problem-fit__acc .problem-fit__num { margin-right: 0.5rem; font-size: 0.72rem; color: var(--ink-muted); font-family: var(--font-body); font-weight: 600; }
.problem-fit__acc-visual {
  margin: 0 0 1.5rem;
  aspect-ratio: 16 / 10;
  background: #fafafa;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}
.problem-fit__acc-visual svg { width: 18%; height: 18%; }
.problem-fit__acc-visual:has(img) { border: 0; overflow: hidden; position: relative; }
/* Pin the photo to its frame: these frames are grid-centred, so a plain
   height:100% image would size to its own ratio and spill past the frame. */
.problem-fit__scene img,
.problem-fit__acc-visual img,
.cats__visual-front img { position: absolute; inset: 0; }
.problem-fit__head { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.78rem; color: var(--ink-muted); }
.problem-fit__label { text-transform: uppercase; letter-spacing: 0.08em; }
.problem-fit__pos b { color: var(--ink); font-weight: 600; }
.problem-fit__stage { position: relative; min-height: 18rem; }
.problem-fit__scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.45s var(--ease-out-expo);
  border-radius: var(--radius);
  background: #fafafa;
  border: 1px dashed var(--line);
  color: var(--ink-muted);
}
.problem-fit__scene.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.problem-fit__scene svg { width: 20%; height: 20%; }
/* Real photo: fill the stage, drop the dashed placeholder chrome, and put
   the chapter number on a white chip so it stays legible over the image. */
.problem-fit__scene:has(img) { border: 0; overflow: hidden; }
.problem-fit__scene img,
.problem-fit__acc-visual img,
.svc__img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.problem-fit__scene:has(img) .problem-fit__bignum {
  z-index: 1;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 0.85rem;
}
.problem-fit__bignum {
  position: absolute;
  left: 1.25rem;
  top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--line);
}
.problem-fit__caption { margin: 0; border-top: 1px solid var(--line); padding-top: 1rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.problem-fit__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.problem-fit__prog { display: flex; align-items: center; gap: 0.6rem; }
.problem-fit__step {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  background: none;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.problem-fit__step svg { width: 15px; height: 15px; }
.problem-fit__step:hover { background: var(--accent-tint); border-color: var(--accent-tint); }
@media (prefers-reduced-motion: reduce) {
  .problem-fit__btn::before, .problem-fit__arrow, .problem-fit__scene { transition: none; }
}
/* Below 64rem the interactive chapter-picker (nav + scroll-pinned visual
   + prev/next foot) is swapped for a plain accordion instead — a timed
   auto-advance can't give a reliable reading pace and pinning stacked
   content doesn't work as a scroll effect at that width, so the visitor
   sets their own pace. Placed last so it wins over each part's own base
   display rule declared earlier (equal specificity, so source order
   decides). Reuses .faq__item/<details> as-is for the row/border/
   icon-rotate styling; only the extra placeholder image needs its own
   rule (declared further up). */
@media (max-width: 63.9375rem) {
  .problem-fit__nav, .problem-fit__visual, .problem-fit__foot { display: none; }
  .problem-fit__accordion { display: block; margin-top: 1.75rem; border-top: 1px solid var(--line); }
}

/* Three services: each a white card on the section's tinted band, giving
   real depth against the background instead of flush editorial rows.
   The image placeholder bleeds flush to the card's own edges (left on
   desktop, top on mobile) and stretches to fill the row, rather than
   sitting inset as a small boxed thumbnail. No 01/02/03 — the sequence
   lives in "how the three connect". */
.svc { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.svc__row {
  display: grid;
  gap: 1.1rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -28px rgba(5, 6, 5, 0.18);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svc__row:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -24px rgba(5, 6, 5, 0.24); }
@media (prefers-reduced-motion: reduce) { .svc__row { transition: none; } }
@media (min-width: 44rem) {
  .svc__row { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.svc__img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fafafa;
  border-radius: var(--radius) var(--radius) 0 0;
  display: grid; place-items: center;
  color: var(--ink-muted);
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
@media (min-width: 44rem) {
  .svc__img { aspect-ratio: auto; height: 100%; border-radius: var(--radius) 0 0 var(--radius); }
  .svc__row { min-height: 24rem; }
}
.svc__img:has(img) { overflow: hidden; }
.svc__body { display: flex; flex-direction: column; justify-content: center; gap: 0.65rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
@media (min-width: 44rem) { .svc__body { padding-left: 0; } }
.svc__body h3 { margin: 0; font-size: 1.3rem; }
.svc__line { margin: 0; color: var(--ink-muted); font-size: 1rem; max-width: 52ch; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.svc__tag {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-muted); background: #f2f1ef; border: 1px solid var(--line); border-radius: 999px; padding: 0.28rem 0.62rem; white-space: nowrap;
}
.svc__focus {
  margin: 0.4rem 0 0;
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em;
  font-size: 1.08rem; line-height: 1.4; color: var(--ink); max-width: 46ch;
}

/* How the three connect: three nodes joined by an explicit arrow rather
   than a shared progress line/dot — that reads as a process rail, which
   "How we work" already uses elsewhere on this page. The arrow visualises
   connection/dependency between the three, not steps to complete. */
.flow { margin-top: 2.5rem; display: grid; gap: 2.75rem; }
@media (min-width: 48rem) { .flow { grid-template-columns: repeat(3, 1fr); gap: 0 3rem; } }
.flow__node {
  position: relative;
  background: var(--paper);
  border: 10px solid var(--accent-tint);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
.flow__node:not(:last-child)::after {
  content: "\2193";
  position: absolute;
  left: 0; right: 0; bottom: -2.5rem;
  text-align: center;
  font-size: 1.15rem;
  color: var(--ink-muted);
  line-height: 1;
}
@media (min-width: 48rem) {
  .flow__node:not(:last-child)::after {
    content: "\2192";
    left: auto; right: -2.55rem; bottom: auto; top: 50%;
    transform: translateY(-50%);
  }
}
.flow__icon { display: flex; color: var(--ink); margin-bottom: 0.9rem; }
.flow__icon svg { width: 1.75rem; height: 1.75rem; }
.flow__t { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.flow__l { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }

/* Why Grayscale360: narrative left (sits directly on the slate band), a
   white card of pillars right. The card straddles the band's bottom edge —
   same layered depth technique as .who__card, just with one card instead of
   two, and against a single flat band instead of a two-tone split. */
.whyus { display: grid; gap: 2.25rem; margin-top: 2rem; }
@media (min-width: 56rem) { .whyus { grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; } }
.whyus__lead { margin: 0; color: var(--ink-muted); font-size: 1.05rem; max-width: 48ch; }
.whyus__visual {
  margin-top: 1.5rem;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #fafafa;
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}
.whyus__visual svg { width: 15%; height: 15%; }
.whyus__visual:has(img) { border: 0; background: none; overflow: hidden; }
.whyus__visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.whyus__card {
  background: var(--paper);
  border: 10px solid var(--accent-tint);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  box-shadow: 0 20px 40px -28px rgba(5, 6, 5, 0.18);
}
.whyus__pillar { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.whyus__pillar:first-child { padding-top: 0; }
.whyus__pillar:last-child { border-bottom: none; padding-bottom: 0; }
.whyus__pillar-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; }
.whyus__pillar b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.whyus__pillar p { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }
.whyus__pillar-icon { display: flex; flex: none; color: var(--ink); }
.whyus__pillar-icon svg { width: 1.25rem; height: 1.25rem; }

/* How we work: four numbered steps.
   Default (".steps4"): staggered rhythm on wider viewports — items 2 and 4
   sit lower than 1 and 3, with a thin divider marking each new column —
   instead of a perfectly even row.
   Rail variant (".steps4.steps4-rail"): a horizontal line connects the four
   numerals like a timeline, drawing in on scroll (see _wireframe.js), with
   each numeral's dot lighting up as the line reaches it. */
.steps4__head--center { text-align: center; max-width: 42rem; margin-inline: auto; }
.steps4__head--center .section__intro { margin: 1rem auto 0; }
.steps4 { display: grid; gap: 1.75rem 1.25rem; margin-top: 2.5rem; }
@media (min-width: 40rem) { .steps4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .steps4 { grid-template-columns: repeat(var(--steps4-cols, 4), 1fr); } }
@media (min-width: 40rem) {
  .steps4:not(.steps4-rail) .steps4__item:nth-child(2),
  .steps4:not(.steps4-rail) .steps4__item:nth-child(4) { margin-top: 2.25rem; }
}
@media (min-width: 40rem) and (max-width: 67.9375rem) {
  .steps4:not(.steps4-rail) .steps4__item:nth-child(even) { border-left: 1px solid var(--line); padding-left: 1.25rem; }
}
@media (min-width: 68rem) {
  .steps4:not(.steps4-rail) .steps4__item:not(:first-child) { border-left: 1px solid var(--line); padding-left: 1.5rem; }
}
.steps4__n { font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 0.6rem; }
.steps4__item h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.steps4__item p { margin: 0; color: var(--ink-muted); font-size: 0.92rem; }

/* Rail variant: numbered node sits ON the connecting line, clear of the card
   beneath it (icon + centered copy inside the card, with a gap separating
   the two so the line never touches the card's edge). The line itself only
   draws in at the single-row (4-col) width; below that the nodes and cards
   still show, just stacked with no line between them. */
.steps4-rail .steps4__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.steps4-rail .steps4__n { display: none; }
.steps4-rail .steps4__node {
  position: relative;
  z-index: 1;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: 999px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--paper);
  margin-bottom: 1.5rem;
  transition: background-color 0.3s ease;
}
.steps4-rail .steps4__item.is-lit .steps4__node { background: var(--accent-solid); }
.steps4-rail .steps4__item { align-self: stretch; }
.steps4-rail .steps4__card {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  box-shadow: 0 20px 40px -28px rgba(5, 6, 5, 0.18);
}
.steps4-rail .steps4__icon { display: flex; justify-content: center; margin-bottom: 1.25rem; color: var(--ink); }
.steps4-rail .steps4__icon svg { width: 2.25rem; height: 2.25rem; }
.steps4-rail { position: relative; }
.steps4-rail__line { display: none; }
@media (min-width: 68rem) {
  .steps4-rail__line {
    display: block;
    position: absolute;
    top: 1.625rem;
    left: -1.5rem;
    right: -1.5rem;
    height: 2px;
    background: var(--line);
    overflow: hidden;
  }
  .steps4-rail__line-fill {
    position: absolute;
    inset: 0;
    background: var(--accent-gradient);
    transform-origin: left;
    transform: scaleX(0);
  }
}
/* Mobile (single-column): still reads as a timeline instead of a bare list —
   a vertical connector between each node and the next, sized off each
   item's own %-height so it works regardless of card content length and
   never needs a fixed total-list height (no overflow risk, unlike a single
   line spanning the whole stack would have). Drawn with ::before (paints
   before the node and card in DOM order) so it sits behind both without
   needing any z-index. Static, not scroll-drawn — the existing is-lit
   class (already toggled by the horizontal rail's scroll logic) still
   colors the segment once its item has scrolled past. */
@media (max-width: 39.9375rem) {
  /* z-index: 0 (not just position: relative) makes the item its own
     stacking context, so the connector's negative z-index is contained
     here — it paints above the item's own (transparent) background but
     below the item's normal-flow content (the card), instead of escaping
     to some distant ancestor's stacking context. */
  .steps4-rail .steps4__item { position: relative; z-index: 0; }
  .steps4-rail .steps4__item:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 1.625rem;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    height: calc(100% + 1.75rem);
    background: var(--line);
  }
  .steps4-rail .steps4__item.is-lit:not(:last-child)::before { background: var(--accent-solid); }
}

/* "How we deliver" (vertical variant): a vertical line + numbered node per
   step, each step a full icon-panel card. Connector reuses the same
   %-height ::before trick as steps4-rail's mobile fallback (sized off
   each item's own height, so it needs no fixed total-list height).
   Steps not yet scrolled to sit blurred/greyed; scrolling to one sharpens
   it and colors its node + trailing connector segment (see _wireframe.js). */
.deliverv { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 2rem; }
.deliverv__item { position: relative; z-index: 0; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.25rem; align-items: start; }
.deliverv__item:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 1.375rem;
  left: 1.375rem;
  width: 2px;
  margin-left: -1px;
  height: calc(100% + 2rem);
  background: var(--line);
  transition: background-color 0.4s ease;
}
.deliverv__item.is-lit:not(:last-child)::before { background: linear-gradient(to bottom, var(--accent-start), var(--accent-end)); }
.deliverv__rail { display: flex; justify-content: center; }
.deliverv__node {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 0 0 6px var(--paper);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.deliverv__item.is-lit .deliverv__node {
  background: var(--accent-gradient);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 11px rgba(227, 36, 130, 0.14);
}
.deliverv__card {
  display: grid;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -30px rgba(5, 6, 5, 0.22);
  transition: border-color 0.4s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 40rem) { .deliverv__card { grid-template-columns: 12rem 1fr; align-items: center; } }
.deliverv__visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--accent-tint);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--accent-solid-strong);
  transition: background-color 0.5s ease, color 0.5s ease;
}
/* Same fine film-grain technique as the hero/pink-wash band (see
   .hero::after), static (no breathing animation — too small an element
   for it to read as anything but jittery). */
.deliverv__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.deliverv__visual svg { position: relative; z-index: 2; width: 34%; height: 34%; }
/* Illustration in place of the icon: fill the panel edge to edge. */
.deliverv__visual--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deliverv__body h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.deliverv__body p { margin: 0; color: var(--ink-muted); }
.deliverv__item.is-lit .deliverv__card {
  border-color: rgba(227, 36, 130, 0.45);
  box-shadow: 0 26px 50px -30px rgba(227, 36, 130, 0.28);
  transform: translateY(-2px);
}
.deliverv__visual--img img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.deliverv__card:hover .deliverv__visual--img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .deliverv__item::before, .deliverv__node, .deliverv__card, .deliverv__visual, .deliverv__visual--img img { transition: none; }
  .deliverv__item.is-lit .deliverv__card, .deliverv__card:hover .deliverv__visual--img img { transform: none; }
}

/* "What we do" header: heading+intro+categories line on the left, a plain
   ghost button on the right (fills the whitespace a capped-width intro
   paragraph otherwise leaves on wide viewports). Reuses the existing
   .btn--ghost styling as-is rather than a one-off treatment. */
.what__head { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-end; justify-content: space-between; }
.what__head-main { flex: 1 1 28rem; }
.what__head-cta { flex: none; }

/* Home: four category cards */
.cats { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 52rem) { .cats { grid-template-columns: repeat(3, 1fr); } }

/* Logo strip: placeholder. Title, description and marks undecided (lorem ipsum). */
.logos__desc { margin: 0 0 1.75rem; color: var(--ink-muted); max-width: 52ch; }
/* Logo marquee: two identical groups side by side, the track slides left
   by exactly one group's width and loops, so the seam never shows. Each
   group carries trailing padding equal to the gap to keep spacing even
   across the join. Edges fade out instead of cutting logos off hard. */
.logos__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logos__track { display: flex; width: max-content; animation: logos-scroll 40s linear infinite; }
.logos__group { display: flex; gap: 0.9rem; padding-right: 0.9rem; align-items: center; }
@keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; width: auto; }
  .logos__group { flex-wrap: wrap; }
  .logos__group[aria-hidden] { display: none; }
  .logos__marquee { -webkit-mask-image: none; mask-image: none; }
}
.logos__item {
  flex: none;
  width: 8.5rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #fafafa;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Card structure follows a supplied reference's layout/proportions
   precisely (padding, radius, numeral scale, text max-width, generous
   pre-image spacing, asymmetric bleeding image composition) with our own
   content substituted in — not redesigned from scratch. */
.cats__card {
  display: flex; flex-direction: column; gap: 0.7rem; padding: 2.25rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 28px;
  overflow: hidden;
  position: relative;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cats__card:hover {
  background: var(--accent-tint);
  border-color: var(--accent-tint);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(227, 36, 130, 0.35);
}
/* Icon + giant faded number, overlapping (number behind, icon in front,
   both left-aligned) — reuses the same ICONS set already used elsewhere
   (solution pages / who-we-work-with), so each category keeps one
   consistent icon across the whole site. */
.cats__top { position: relative; height: 3rem; }
.cats__num {
  position: absolute;
  top: 0;
  left: -0.02em;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.5rem;
  line-height: 1;
  color: rgba(5, 6, 5, 0.055);
  user-select: none;
}
.cats__icon { position: relative; z-index: 1; color: var(--ink); display: inline-flex; transition: transform 0.3s var(--ease), color 0.25s ease; }
.cats__card:hover .cats__icon { transform: scale(1.12); color: var(--accent-solid); }
.cats__icon svg { width: 28px; height: 28px; }
.cats__card h3 { position: relative; z-index: 1; margin: 0.5rem 0 0; font-size: 1.4rem; line-height: 1.2; }
.cats__line { margin: 0; max-width: 90%; color: var(--ink-muted); font-size: 0.92rem; }
.cats__link { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; text-decoration: none; color: var(--ink); }
.cats__link::after { content: " \2192"; color: var(--ink); display: inline-block; transition: transform 0.2s ease; }
.cats__card:hover .cats__link::after { transform: translateX(3px); }
/* Large gap before the image block, then an asymmetric bleeding
   composition: both panels escape the card's own padding via negative
   margins (so they can reach/cross the actual card edge) and get cleanly
   cropped by the card's overflow:hidden + rounded corner, matching the
   reference's cropped-photo-stack look. Placeholder panels, not a
   fabricated product screenshot — same dashed-border language as the
   logo strip (.logos__item) since there's no real imagery yet. */
.cats__visual {
  position: relative;
  flex: 1;
  min-height: 11rem;
  margin: 2rem -2.25rem -2.25rem -2.25rem;
}
.cats__visual-front {
  position: absolute;
  z-index: 1;
  right: -1rem;
  bottom: -1rem;
  width: 82%;
  aspect-ratio: 16 / 11;
  border-radius: 16px;
  background: #fafafa;
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
  box-shadow: 0 20px 36px -26px rgba(5, 6, 5, 0.3);
  color: var(--ink-muted);
  rotate: -2deg;
}
.cats__visual-front svg { width: 20%; height: 20%; }
/* Real photo in place of the dashed placeholder: drop the placeholder
   chrome, fill the tilted panel and crop to it. */
.cats__visual-front:has(img) { border: 0; background: none; overflow: hidden; }
.cats__visual-front img,
.who__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Generic two-column text block (home who-we-work-with, about) */
.cols2 { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 48rem) { .cols2 { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
.cols2 h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.cols2 p { margin: 0; color: var(--ink-muted); }

/* About: what we do now, four text items */
.donow { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 44rem) { .donow { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } }
.donow p { margin: 0; color: var(--ink-muted); }
.donow b { color: var(--ink); }
.donow a { color: var(--ink); text-underline-offset: 3px; }

/* About "What we do now": filmstrip, text captioned directly on
   the image (dark scrim), description revealed on hover/focus only. */
.donow-strip { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 52rem) { .donow-strip { grid-template-columns: repeat(3, 1fr); } }
.donow-strip__item {
  position: relative;
  display: block;
  /* Landscape to match the photos (all supplied landscape); a portrait
     frame cropped away most of each picture. */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fafafa;
  border: 1px dashed var(--line);
  color: inherit;
  text-decoration: none;
}
.donow-strip__visual { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-muted); }
.donow-strip__visual svg { width: 22%; height: 22%; }
.donow-strip__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.donow-strip__item:has(img) { border: 0; }
/* Subject sits on the right of the frame (e.g. the smart city camera). */
.donow-strip__visual img.photo--right { object-position: 85% 50%; }
.donow-strip__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.25rem 1.25rem 1.5rem;
  background: linear-gradient(to top, rgba(5, 6, 5, 0.72), rgba(5, 6, 5, 0) 70%);
  color: #fff;
  display: flex;
  flex-direction: column;
}
.donow-strip__title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.donow-strip__body {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}
.donow-strip__item:hover .donow-strip__body,
.donow-strip__item:focus-visible .donow-strip__body { max-height: 8rem; opacity: 1; margin-top: 0.5rem; }
/* Touch devices have no hover-before-tap state, so a tap goes straight to
   the link and the description would never be seen — show it plainly
   instead of gating it behind an interaction that doesn't exist here. */
@media (hover: none) {
  .donow-strip__body { max-height: 8rem; opacity: 1; margin-top: 0.5rem; }
}


/* About: "Where we started" filmstrip (website -> system -> network -> facility).
   Reuses the same tinted image-placeholder treatment as .svc__img elsewhere,
   so it reads as "real photography goes here" rather than another icon-based
   motif duplicating "What we do now" below it. */
.trace { margin-top: 2.75rem; display: flex; align-items: center; gap: 1.25rem; }
.trace__step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-align: center; }
.trace__img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fafafa;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out-expo), border-color 0.3s ease;
}
.trace__step:hover .trace__img { transform: translateY(-3px); border-color: var(--line-strong); }
.trace__img:has(img) { border: 0; overflow: hidden; }
.trace__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trace__label { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.trace__arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-top: -1.65rem; /* offsets the label's height below the image, so the arrow centres on the image itself */
  width: 1.75rem;
  height: 1.75rem;
  color: var(--ink-muted);
}
/* Mobile: a single stacked column instead of a 2-up wrap — the 50%-basis
   wrap was fragile (large aspect-ratio 4:3 image placeholders at half width
   still read as oversized and left an awkward gap), so this trades the
   side-by-side pairing for a plain, reliably-full-width sequence. */
@media (max-width: 36rem) {
  .trace { flex-direction: column; align-items: stretch; }
  .trace__arrow { display: none; }
}

/* Contact: reply line under the form button */

/* Floating WhatsApp button ------------------------------------------------- */
.wa {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  height: 56px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 34px -12px rgba(5, 6, 5, 0.4);
  transition: padding 0.32s var(--ease-out-expo), opacity 0.3s ease;
}
.wa__icon { display: grid; place-items: center; width: 56px; height: 56px; flex: none; }
.wa__icon svg { width: 27px; height: 27px; }
.wa__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  transition: max-width 0.32s var(--ease-out-expo), opacity 0.24s ease, margin 0.32s var(--ease-out-expo);
  opacity: 0;
}
.wa:hover, .wa:focus-visible { padding-right: 1.3rem; }
.wa:hover .wa__label, .wa:focus-visible .wa__label { max-width: 12rem; opacity: 1; margin-left: -0.2rem; }
.wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  animation: wa-ping 3s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-ping {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
}
.wa.is-hidden { opacity: 0; translate: 0 130%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .wa, .wa__label { transition: none; }
  .wa::after { animation: none; }
  .wa.is-hidden { opacity: 1; translate: none; pointer-events: auto; }
}
@media print { .wa { display: none; } }

/* ---------- Stacked sheets ----------------------------------------------
   Every section after the first starts as a rounded sheet tucked over the
   one above (same 32px radius as the inner-page heroes' rounded bottom), so
   each white / tint change reads as a layered edge rather than a flat cut.
   Later sections paint over earlier ones by DOM order (all positioned).
   Skipped: the section right after a hero (heroes have their own shape) and
   .who-cards-band (the second half of the "Starting new" section). */
:root { --sheet-r: 32px; }
@media (max-width: 40rem) { :root { --sheet-r: 20px; } }
main > :is(section, div):not(.who-cards-band, .hero, .shero) {
  position: relative;
  margin-top: calc(-1 * var(--sheet-r));
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
}
/* Heroes keep their own shape; the first section after one sits flush. */
main > :is(.hero, .shero) + :is(section, div) { margin-top: 0; border-radius: 0; }
/* White sheets need a solid fill to cover the section they tuck over.
   Tinted ones (.band, *--alt) already have theirs. */
main > section.section,
main > .who-hero:not(.who-hero--alt),
main > .who-cards-band:not(.who-cards-band--alt) { background-color: var(--paper); }
main ~ .cta {
  margin-top: calc(-1 * var(--sheet-r));
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
}

/* Page end: the closing section (or, on Contact, the last section) rounds
   off at the bottom and the dark footer tucks up underneath it, so the
   curve shows against the footer. */
:root { --end-r: calc(var(--sheet-r) * 1.5); }
main ~ .cta,
main:not(:has(~ .cta)) > :last-child {
  position: relative;
  z-index: 1;
  border-bottom-left-radius: var(--end-r);
  border-bottom-right-radius: var(--end-r);
}
/* Contact's edge-to-edge map: clip it to the rounded corners. */
main:not(:has(~ .cta)) > :last-child { overflow: clip; }
.footer {
  position: relative;
  z-index: 0;
  margin-top: calc(-1 * var(--end-r));
  padding-top: calc(clamp(3rem, 2rem + 4vw, 4.5rem) + var(--end-r));
}