/* 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: #f4f4f3; /* neutral light grey (27 Sep): pink is kept for accents only in the black + pink look. Was #f8eff2. */
  /* 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);
  /* Were referenced across the file but never defined, so those
     transitions silently fell back to no easing / no animation. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 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. */
  /* Pull up by the nav row's full footprint (0.9rem sticky offset + ~64px
     bar = ~78px); -4.5rem (72px) left a 6px white strip above the hero. */
  margin-top: -5rem;
  padding-top: calc(clamp(2rem, 1rem + 4vw, 4rem) + 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: -5rem; /* see .hero: -4.5rem left a 6px white strip */
  padding-top: calc(clamp(3.5rem, 2.5rem + 7vw, 7rem) + 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; }
/* About hero (30 Sep): a large flat-pink brand mark on the right, and three
   fact pills under the intro */
.shero { overflow: hidden; }
.ahero { position: absolute; z-index: 1; pointer-events: none; right: clamp(-2rem, 4vw - 3rem, 4rem); top: 50%; translate: 0 -46%; width: clamp(24rem, 16rem + 22vw, 38rem); }
.ahero .ahero__svg { position: relative; inset: auto; display: block; width: 100%; height: auto; overflow: visible; }
.ca-pink--r { fill: #b81c6a; }
.ahero__pin-body { fill: var(--accent-solid); } .ahero__pin-dot { fill: #fff; }
.ahero__body-c { fill: #8d8e8c; } .ahero__body-c-top { fill: #a19d9f; } .ahero__head-c { fill: #d2d2ce; }
.ahero__body-g { fill: #c21d70; } .ahero__body-g-top { fill: #f0439a; } .ahero__head-g { fill: #f7c5da; }
.ahero__leg { fill: #6b6c6a; } .ahero__table { fill: #d9d9d5; } .ahero__table-top { fill: #fff; }
.ahero__bubble path { fill: #fff; filter: drop-shadow(0 4px 8px rgba(5, 6, 5, 0.14)); }
.ahero__bubble--g path { fill: var(--accent-solid); }
.ahero__q { fill: #8d8e8c; font: 800 13px var(--font-display); }
.ahero__tick { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ahero__label rect { fill: #fff; stroke: rgba(5, 6, 5, 0.08); }
.ahero__label text { fill: var(--ink); font: 700 9px var(--font-body); }
.ahero__label--g rect { fill: var(--accent-solid); stroke: none; } .ahero__label--g text { fill: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .ahero__bubble--c { animation: ca-bob 3.4s ease-in-out infinite; }
  .ahero__bubble--g { animation: ca-bob 3.4s ease-in-out 1.7s infinite; }
}
.ahero__tag-text { fill: var(--ink); font: 700 10px var(--font-body); }
@media (prefers-reduced-motion: no-preference) { .ahero__pin { animation: ca-bob 2.8s ease-in-out infinite; } }
@media (max-width: 63.99rem) { .ahero { display: none; } }
.shero__facts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.shero__facts li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(227, 36, 130, 0.18); font-size: 0.9rem; font-weight: 600; color: var(--ink); backdrop-filter: blur(6px); }
.shero__facts svg { width: 1.05rem; height: 1.05rem; color: var(--accent-solid); }
/* Solution heroes (30 Sep): drawing on the right, service links as pills */
.ahero .ca { position: relative; inset: auto; display: block; width: 100%; height: auto; overflow: visible; }
.ahero--sol { width: clamp(24rem, 14rem + 26vw, 40rem); }
.shero__facts--links li { padding: 0; }
.shero__facts--links a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; color: inherit; text-decoration: none; border-radius: inherit; transition: background-color 0.2s ease, color 0.2s ease; }
.shero__facts--links li { transition: border-color 0.2s ease, translate 0.2s ease; }
.shero__facts--links li:hover { border-color: var(--accent-solid); translate: 0 -2px; }
.shero__facts--links a:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
@media (min-width: 64rem) { .shero:has(.ahero--sol) .shero__sub, .shero:has(.ahero--sol) h1 { max-width: 34rem; } }
.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(5, 6, 5, 0.035), 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;
}
.pfs { display: none; min-width: 0; }
@media (max-width: 63.9375rem) { .problem-fit { grid-template-columns: minmax(0, 1fr); } }
/* The problem section is flush (no padding) for the full-height desktop picker; on phones
   give it room so the next section's rounded edge doesn't tuck over the counter and dots. */
@media (max-width: 63.9375rem) { .section--flush:has(.problem-fit) { padding-bottom: calc(var(--sheet-r) + clamp(2.5rem, 2rem + 3vw, 3.5rem)); } }  /* keep the swipe track from widening the column */
.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;
  /* Chapter change: the new photo wipes in from the right over the old one,
     which stays put underneath until the wipe has finished. */
  clip-path: inset(0 0 0 100% round var(--radius));
  transition: clip-path 0s linear 0.75s, opacity 0s linear 0.75s;  /* leaving: hold, then snap away */
  border-radius: var(--radius);
  background: #fafafa;
  border: 1px dashed var(--line);
  color: var(--ink-muted);
}
.problem-fit__scene.is-active { z-index: 1; opacity: 1; pointer-events: auto; clip-path: inset(0 0 0 0 round var(--radius)); transition: clip-path 0.75s var(--ease-out-expo), opacity 0s; }
.problem-fit__scene img { transform: scale(1.08); transition: transform 1.1s var(--ease-out-expo); }
.problem-fit__scene.is-active img { transform: scale(1); }
.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; }
  .pfs { display: block; margin-top: 1.75rem; }
}
/* Phones/tablets: swipe cards. The track bleeds to the screen edges (undoing
   the container's 1.5rem gutter) so the next card visibly peeks in. */
.pfs__track {
  display: flex;
  gap: 0.85rem;
  margin-inline: -1.5rem;
  padding: 0.25rem 1.5rem 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.5rem;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pfs__track::-webkit-scrollbar { display: none; }
.pfs__track:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: -2px; border-radius: 12px; }
.pfs__card {
  flex: 0 0 min(84%, 24rem);
  margin: 0;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 36px -28px rgba(5, 6, 5, 0.3);
}
.pfs__img { position: relative; aspect-ratio: 4 / 3; background: #fafafa; }
.pfs__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pfs__num {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font: 600 0.8rem/1.4 var(--font-display);
}
.pfs__card figcaption { display: grid; gap: 0.35rem; padding: 1rem 1.1rem 1.2rem; }
.pfs__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.pfs__cap { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.pfs__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.pfs__count { font-size: 0.85rem; color: var(--ink-muted); }
.pfs__count b { color: var(--ink); font-weight: 600; }
.pfs__dots { display: flex; }
.pfs__dot { position: relative; width: 28px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.pfs__dot::before {   /* the visible dot; the button itself is the larger tap area */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 999px;
  background: #d4d1d2;
  transition: width 0.3s var(--ease), margin 0.3s var(--ease), background 0.3s ease;
}
.pfs__dot.is-active::before { width: 22px; margin-left: -11px; background: var(--accent-solid); }
.pfs__dot:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: -4px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .pfs__dot::before { transition: none; } }

/* 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 {
  display: none;  /* replaced by .flow__wire */
  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%);
  }
}
/* How the three connect: a wire from each node to the next, with pink dots
   travelling along it (down on phones, across on wider screens). */
.flow__wire {
  position: absolute;
  left: 50%;
  bottom: calc(-2.75rem - 10px);
  width: 2px;
  height: 2.75rem;
  margin-left: -1px;
  background: repeating-linear-gradient(to bottom, #d9d6d7 0 4px, transparent 4px 8px);
}
.flow__wire::after {   /* arrowhead */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  margin-left: -4px;
  border-right: 2px solid #bdb8ba;
  border-bottom: 2px solid #bdb8ba;
  transform: rotate(45deg);
}
.flow__wire i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--accent-solid);
  box-shadow: 0 0 0 3px rgba(227, 36, 130, 0.18), 0 0 10px 2px rgba(227, 36, 130, 0.4);
  opacity: 0;
  animation: flow-dot-y 2.2s linear infinite;
}
.flow__wire i + i { animation-delay: 1.1s; }
@keyframes flow-dot-y { 0% { top: -4px; opacity: 0; } 15%, 80% { opacity: 1; } 100% { top: calc(100% - 4px); opacity: 0; } }
@media (min-width: 48rem) {
  .flow__wire {
    left: auto;
    right: calc(-3rem - 10px);
    top: 50%;
    bottom: auto;
    width: 3rem;
    height: 2px;
    margin: -1px 0 0;
    background: repeating-linear-gradient(to right, #d9d6d7 0 4px, transparent 4px 8px);
  }
  .flow__wire::after { left: auto; right: 0; bottom: auto; top: 50%; margin: -4px 0 0; transform: rotate(-45deg); }
  .flow__wire i { left: 0; top: 50%; margin: -4px 0 0; animation-name: flow-dot-x; }
  @keyframes flow-dot-x { 0% { left: -4px; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: calc(100% - 4px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .flow__wire i { display: none; }
  .problem-fit__scene, .problem-fit__scene img { transition: none; }
}
.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%; }
/* Drawn scene in place of the photo (29 Sep): still, no movement. */
.deliverv__visual--art { background: radial-gradient(circle, rgba(5, 6, 5, 0.08) 1px, transparent 1.4px) 0 0 / 12px 12px, #fff; border: 6px solid var(--accent-tint); }
.deliverv__visual--art::after { display: none; }
.deliverv__visual--art .ca { position: absolute; inset: 0; width: 100%; height: 100%; }
.ca--still, .ca--still * { animation: none !important; transition: none !important; }
.ca-progress { fill: #e2e2df; }
.ca-sign { fill: none; stroke: var(--accent-solid); stroke-width: 1.6; stroke-linecap: round; }
.ca-tick-bg { fill: var(--accent-solid); } .ca-tick { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ca-key { fill: none; stroke: #8d8e8c; stroke-width: 2.2; stroke-linecap: round; } .ca-key circle:first-child { fill: #d2d2ce; }
/* 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 70s 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); } }
@media (min-width: 52rem) { .donow-strip:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .cats.cats--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* About: Who is Grayscale360, a pink cube that turns a face per scroll step */
.who360 { --s: clamp(13rem, 10rem + 10vw, 19rem); --ry: 0deg; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 56rem) { .who360 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; min-height: min(78vh, 44rem); } }
@media (max-width: 55.99rem) { .who360 { gap: 1.5rem; } .who360__stage { order: 1; min-height: calc(var(--s) * 1.55); } .who360__copy { display: contents; } .who360__list { order: 2; margin-top: 0; } }
.who360__list { display: grid; gap: 0.35rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.who360__li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: baseline; padding: 0.85rem 1rem; border-radius: 14px; color: var(--ink-muted); transition: background-color 0.35s ease, color 0.35s ease; }
.who360__li b { color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.who360__n { font: 700 0.8rem/1 var(--font-display); color: #c4c4c1; transition: color 0.35s ease; }
.who360__li.is-on { background: var(--accent-tint); color: var(--ink); }
.who360__li { cursor: pointer; } .who360__li:hover:not(.is-on) { background: var(--surface-alt); }
.who360__li:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.who360__li.is-on .who360__n { color: var(--accent-solid); }
.who360__stage { position: relative; display: grid; place-items: center; min-height: calc(var(--s) * 1.8); perspective: 1600px; }
.who360__cube { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(calc(var(--ry) - 24deg)); }
.who360__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; padding: 1.6rem; color: #fff; border-radius: 6px;
  background: linear-gradient(150deg, #f0439a, #e32482 55%, #b81c6a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transform: rotateY(calc(var(--i) * 90deg)) translateZ(calc(var(--s) / 2)); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.who360__face b { font: 700 clamp(1.25rem, 1rem + 0.8vw, 1.6rem)/1.15 var(--font-display); }
.who360__face span { font-size: 0.95rem; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }
.who360__face .who360__fn { position: absolute; top: 1.3rem; left: 1.6rem; font: 700 0.85rem/1 var(--font-display); color: rgba(255, 255, 255, 0.75); }
.who360__face--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(150deg, #f7a8cc, #f48dbb); }
.who360__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: #8f1552; }
.who360__shadow { position: absolute; left: 50%; bottom: 4%; width: calc(var(--s) * 1.2); height: calc(var(--s) * 0.22); translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(227, 36, 130, 0.28), transparent); filter: blur(6px); }
.who360__dots { position: absolute; bottom: 0; left: 50%; translate: -50% 0; display: flex; gap: 0.5rem; }
.who360__dots i { width: 8px; height: 8px; border-radius: 50%; background: #d9d9d5; transition: background-color 0.3s ease, width 0.3s ease; }
.who360__dots i.is-on { width: 22px; border-radius: 999px; background: var(--accent-solid); }
.who360.is-auto .who360__cube { transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
@media (prefers-reduced-motion: reduce) { .who360.is-auto .who360__cube { transition: none; } }
/* Solution pages: the problem as three still cards (30 Sep) */
.pcards { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 52rem) { .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 51.99rem) {
  .pcards { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; scrollbar-width: thin; }
  .pcard { scroll-snap-align: start; }
}
.pcard { padding: 1rem 1rem 1.6rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 18px 38px -28px rgba(5, 6, 5, 0.3); }
.pcard h3 { margin: 0.5rem 0.75rem 0; font-size: 1.2rem; line-height: 1.3; }
.ca-search { fill: #fff; stroke: var(--accent-solid); stroke-width: 1.2; }
.ca-ticket { fill: var(--accent-solid); }
/* Solution pages: services as Z layout rows with drawn scenes (30 Sep) */
.svc.svc--z { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
.svc--z .svc__row--z { display: grid; gap: 1.5rem; align-items: center; padding: 0; background: none; border: 0; box-shadow: none; position: static; }
@media (min-width: 56rem) {
  .svc--z .svc__row--z { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .svc--z .svc__row--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .svc--z .svc__row--flip .svc__img--art { order: 2; }
}
.svc--z .svc__img--art { position: relative; aspect-ratio: 16 / 10; height: auto; border-radius: 28px; overflow: hidden; border: 10px solid var(--accent-tint);
  background: radial-gradient(circle, rgba(5, 6, 5, 0.08) 1px, transparent 1.4px) 0 0 / 14px 14px, #fff; }
.svc--z .svc__img--art .ca { position: absolute; inset: 0; width: 100%; height: 100%; }
.svc--z .svc__row--z:hover .ca { transform: translateY(-4px) scale(1.02); }
.svc.svc--z .svc__body { padding: 0; margin: 0; }
.svc__num { margin: 0 0 0.6rem; font: 700 0.85rem/1 var(--font-display); color: var(--accent-solid); letter-spacing: 0.04em; }
.svc--z .svc__body h3 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); }
/* Why it matters: drawn cards, no tilt */
.cats__card--static { cursor: default; }
.svca-badge { fill: var(--accent-solid); filter: drop-shadow(0 4px 8px rgba(227, 36, 130, 0.35)); }
.svca-photo rect:first-child { fill: #fff; stroke: var(--accent-solid); stroke-width: 1.6; filter: drop-shadow(0 6px 10px rgba(5, 6, 5, 0.15)); }
.svca-photo__img { fill: #d2d2ce; }
.svca-photo text { fill: var(--ink); font: 700 7px var(--font-body); }
.svca-speed { stroke: var(--accent-solid); stroke-width: 2; stroke-linecap: round; }
/* Solution pages: services bento, night mode (30 Sep). One big tile and two
   small ones; black tiles with a pink glow, drawings recoloured dark. */
.svc.svc--bento { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 60rem) {
  .svc.svc--bento { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .svc--bento .svc__tile--big { grid-row: span 2; }
}
.svc--bento .svc__tile { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 28px; color: #fff;
  background: radial-gradient(28rem 18rem at 70% 18%, rgba(227, 36, 130, 0.28), transparent 70%), #0b0c0b;
  box-shadow: 0 30px 60px -36px rgba(5, 6, 5, 0.6); }
.svc--bento .svc__tile:hover { transform: translateY(-4px); box-shadow: 0 36px 70px -34px rgba(227, 36, 130, 0.45); }
.svc--bento .svc__img--art { position: relative; aspect-ratio: 16 / 10; height: auto; flex: none; border: 0; border-radius: 0; background: none; }
.svc--bento .svc__tile:not(.svc__tile--big) .svc__img--art { aspect-ratio: 16 / 7; }
@media (min-width: 60rem) { .svc--bento .svc__tile--big .svc__img--art { aspect-ratio: auto; flex: 1; min-height: 20rem; } }
.svc--bento .svc__img--art .ca { position: absolute; inset: 0; width: 100%; height: 100%; }
.svc--bento .svc__tile:hover .ca { transform: translateY(-4px) scale(1.03); }
.svc--bento .svc__body { padding: 0.25rem clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.5rem, 1rem + 1.5vw, 2.25rem); margin: 0; }
.svc--bento .svc__tile--big .svc__body { margin-top: auto; }
.svc--bento .svc__num { color: #f48dbb; }
.svc--bento h3 { color: #fff; }
.svc--bento .svc__tile--big h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.svc--bento .svc__tile:not(.svc__tile--big) h3 { font-size: 1.3rem; }
.svc--bento .svc__line { color: rgba(255, 255, 255, 0.72); }
.svc--bento .svc__tag { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.78); }
.svc--bento .svc__focus { color: #fff; }
.svc--bento .svc__focus .fw { color: inherit !important; }
/* 1 Oct: tags on every tile, a touch smaller on the two small ones */
.svc--bento .svc__tile:not(.svc__tile--big) .svc__tags { gap: 0.3rem; }
.svc--bento .svc__tile:not(.svc__tile--big) .svc__tag { font-size: 0.68rem; padding: 0.3rem 0.65rem; }
/* night palette for the drawings inside the bento */
.svc--bento .ca-base-top { fill: #1f201f; } .svc--bento .ca-base-l { fill: #161716; } .svc--bento .ca-base-r { fill: #111211; }
.svc--bento .ca-d-top { fill: #3a3b3a; } .svc--bento .ca-d-l { fill: #0b0c0b; } .svc--bento .ca-d-r { fill: #050605; }
.svc--bento .ca-g-top { fill: #4a4b4a; } .svc--bento .ca-g-l { fill: #333433; } .svc--bento .ca-g-r { fill: #262726; }
.svc--bento .ca-w-top { fill: #3e3f3e; } .svc--bento .ca-w-l { fill: #2c2d2c; } .svc--bento .ca-w-r { fill: #222322; }
.svc--bento .ca-page { fill: #161716; } .svc--bento .ca-bar { fill: #262726; } .svc--bento .ca-bar-dot { fill: #4a4b4a; }
.svc--bento .ca-old, .svc--bento .ca-card, .svc--bento .ca-block { fill: #333433; }
.svc--bento .ca-old-line, .svc--bento .ca-line { fill: #4a4b4a; }
.svc--bento .ca-btn { fill: #f0439a; } .svc--bento .ca-hero-line { fill: #fff; }
.svc--bento .ca-card--on { fill: #f0439a; }
.svc--bento .ca-shadow { fill: rgba(227, 36, 130, 0.22); }
.svc--bento .ca-pink, .svc--bento .ca-p-l, .svc--bento .ca-p-top { filter: drop-shadow(0 0 6px rgba(240, 67, 154, 0.8)); }
.svc--bento .ca-sketch { stroke: #f48dbb; }
.svc--bento .ca-tree { fill: #3a3b3a; } .svc--bento .ca-tree-hi { fill: #4a4b4a; } .svc--bento .ca-trunk { stroke: #4a4b4a; }
.svc--bento .ca-screen { fill: #161716; }
.svc--bento .ca-c-top { fill: #454645; } .svc--bento .ca-c-l { fill: #313231; } .svc--bento .ca-c-r { fill: #262726; }
.svc--bento .ca-glass, .svc--bento .ca-glass--r, .svc--bento .ca-louvre, .svc--bento .ca-shutter { fill: #555655; }
.svc--bento .ca-road { fill: #2a2b2a; } .svc--bento .ca-zebra, .svc--bento .ca-lane { fill: #8d8e8c; }
.svc--bento .ca-pole, .svc--bento .ca-frame, .svc--bento .ca-lattice, .svc--bento .ca-jib, .svc--bento .ca-tripod, .svc--bento .ca-scaffold { stroke: #a19d9f; }
.svc--bento .ca-fence, .svc--bento .ca-cable { stroke: #6b6c6a; }
.svc--bento .hs-cam-top { fill: #d2d2ce; } .svc--bento .hs-cam-l { fill: #a19d9f; } .svc--bento .hs-cam-r { fill: #8d8e8c; }
.svc--bento .ca-lamp { fill: #fff; filter: drop-shadow(0 0 6px rgba(240, 67, 154, 0.9)); }
.svc--bento .ca-pool, .svc--bento .ca-beam { fill: rgba(240, 67, 154, 0.45); }
.svc--bento .ca-note { fill: #3a3b3a; } .svc--bento .ca-plan-box { fill: rgba(240, 67, 154, 0.08); }
.svca-badge-ring { fill: none; stroke: var(--accent-solid); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
/* Bento motion (30 Sep): gentle loops, stopped for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .svc--bento .ca-pink, .svc--bento .ca-p-l, .svc--bento .ca-p-top { animation: svca-glow 3.2s ease-in-out infinite; }
  .svc--bento .ca-sketch { stroke-dasharray: 3 3; animation: ca-ghost 0.7s linear infinite; }
  .svc--bento .hs-cam-iris, .svc--bento .ca-ticket { animation: ca-blink 1.4s steps(1) infinite; }
  .svc--bento .ca-lamp { animation: svca-flicker 4s ease-in-out infinite; }
  .svc--bento .ca-car--late { animation-delay: 3s; }
  .svc--bento .svca-zoom { animation: svca-zoom 2.6s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
  .svc--bento .svca-speed { stroke-dasharray: 6 6; animation: ca-ghost 0.4s linear infinite; }
  .svca-badge-ring { animation: hc-ping 2.2s ease-out infinite; }
  .svc--bento .ca-screen, .svc--bento .ca-card--on { animation: svca-glow 3.2s ease-in-out 1.6s infinite; }
  .svc--bento .ahero__head-g { animation: ca-bob 3s ease-in-out infinite; }
}
@keyframes svca-glow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(240, 67, 154, 0.5)); } 50% { filter: drop-shadow(0 0 9px rgba(240, 67, 154, 1)); } }
@keyframes svca-flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.55; } 50% { opacity: 1; } 53% { opacity: 0.7; } }
@keyframes svca-zoom { 0% { transform: translate(-40px, -23px); opacity: 0; } 20% { opacity: 1; } 70%, 100% { transform: translate(0, 0); opacity: 1; } }
/* About: mission and vision, side by side */
.mv { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .mv { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.mv__item { position: relative; padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); border-radius: var(--radius); background: var(--surface-alt); overflow: hidden; }
.mv__item::before { content: ""; position: absolute; left: 0; top: 1.75rem; bottom: 1.75rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent-gradient); }
.mv__text { margin: 0.75rem 0 0; font: 600 clamp(1.2rem, 1rem + 0.8vw, 1.55rem)/1.35 var(--font-display); letter-spacing: -0.01em; }
/* Mission and vision inside the dark name section */
.section--dial .mv { position: relative; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.section--dial .mv__item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(6px); }
.section--dial .mv__item .eyebrow { color: #f48dbb; }
.mv__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.1rem; border-radius: 14px; background: var(--accent-gradient); color: #fff; box-shadow: 0 10px 24px -10px rgba(227, 36, 130, 0.7); }
.mv__icon svg { width: 1.5rem; height: 1.5rem; }
.section--dial .mv__text { color: #fff; }
/* About: where we started, three blocks with drawn scenes */
.started3 { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 52rem) { .started3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.started3__item { padding: 1rem 1rem 1.75rem; border-radius: var(--radius); background: var(--paper); box-shadow: 0 18px 38px -28px rgba(5, 6, 5, 0.3); }
.started3__art { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) - 6px); overflow: hidden; border: 6px solid var(--accent-tint); background: radial-gradient(circle, rgba(5, 6, 5, 0.08) 1px, transparent 1.4px) 0 0 / 12px 12px, #fff; }
.started3__art .ca { position: absolute; inset: 0; width: 100%; height: 100%; }
.started3__n { display: block; margin: 1.25rem 0.75rem 0; font: 700 0.8rem/1 var(--font-display); color: var(--accent-solid); }
.started3__item h3 { margin: 0.5rem 0.75rem 0.45rem; font-size: 1.2rem; }
.started3__item p { margin: 0 0.75rem; color: var(--ink-muted); font-size: 0.97rem; }
/* What we do now with drawn scenes */
.donow-strip__visual--art { background: radial-gradient(circle, rgba(5, 6, 5, 0.08) 1px, transparent 1.4px) 0 0 / 12px 12px, #fff; }
/* Drawn cards: picture on top, words below it (no dark overlay), like the
   Our services cards on Home. */
.donow-strip__item:has(.donow-strip__visual--art) { aspect-ratio: auto; display: flex; flex-direction: column; border: 6px solid var(--accent-tint); background: var(--paper); box-shadow: 0 18px 38px -28px rgba(5, 6, 5, 0.3); transition: translate 0.25s ease; }
.donow-strip__item:has(.donow-strip__visual--art):hover { translate: 0 -4px; }
.donow-strip .donow-strip__visual--art { position: relative; inset: auto; display: block; aspect-ratio: 16 / 10; }
.donow-strip .donow-strip__visual--art .ca { position: absolute; inset: 0; width: 100%; height: 100%; }
.donow-strip__item:has(.donow-strip__visual--art) .donow-strip__caption { position: static; padding: 1.4rem 1.5rem 1.6rem; background: none; color: var(--ink); }
.donow-strip__item:has(.donow-strip__visual--art) .donow-strip__title { font-size: 1.3rem; }
.donow-strip__item:has(.donow-strip__visual--art) .donow-strip__title::after { content: " \2192"; color: var(--accent-solid); }
.donow-strip__item:has(.donow-strip__visual--art) .donow-strip__body { max-height: none; opacity: 1; margin-top: 0.5rem; color: var(--ink-muted); font-size: 0.97rem; }
/* About: What you can expect from us (29 Sep), three commitments */
.expect { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 52rem) { .expect { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.expect__item { padding: 1.75rem; border: 6px solid var(--accent-tint); border-radius: var(--radius); background: var(--paper); box-shadow: 0 16px 34px -26px rgba(5, 6, 5, 0.25); }
.expect__icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--accent-tint); color: var(--accent-solid); }
.expect__icon svg { width: 1.4rem; height: 1.4rem; }
.expect__item h3 { margin: 1.1rem 0 0.5rem; font-size: 1.2rem; line-height: 1.25; }
.expect__item p { margin: 0; color: var(--ink-muted); font-size: 0.97rem; }
.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;
  /* Darker, taller scrim (client: "darker"): holds ~78% behind the text and
     only fades above the heading, so bright skies can't wash it out. */
  padding: 4rem 1.25rem 1.5rem;
  background: linear-gradient(to top, rgba(5, 6, 5, 0.85) 0%, rgba(5, 6, 5, 0.78) 55%, rgba(5, 6, 5, 0) 100%);
  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.92);
  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;
  /* Thin white ring keeps it crisp over photos, pink and magenta sections. */
  box-shadow: 0 0 0 3px #fff, 0 14px 34px -12px rgba(5, 6, 5, 0.4);
  transition: padding 0.32s var(--ease-out-expo), opacity 0.3s ease, translate 0.4s var(--ease-out-expo);
}
.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; }
}
/* Chat-bubble prompt above the button: "Have a question? Text us on
   WhatsApp." Tail points down at the button. Opened once per visit. */
.wa__bubble {
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.1rem + 56px + 14px);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  max-width: min(17rem, calc(100vw - 2.2rem));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 18px 40px -18px rgba(5, 6, 5, 0.35);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-back);
}
.wa__bubble.is-open { opacity: 1; transform: none; pointer-events: auto; }
.wa__bubble::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.wa__bubble-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0.25rem 0.9rem 1rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-body);
}
.wa__bubble-title { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.wa__bubble-text { font-size: 0.88rem; color: var(--ink-muted); }
.wa__bubble-link:hover .wa__bubble-text { color: var(--accent-solid-strong); }
.wa__bubble-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;  /* full touch target */
  height: 44px;
  margin: 0.1rem 0.1rem 0 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 999px;
}
.wa__bubble-close svg { width: 16px; height: 16px; }
.wa__bubble-close:hover { color: var(--ink); background: rgba(5, 6, 5, 0.05); }
.wa__bubble-link:focus-visible, .wa__bubble-close:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .wa__bubble { transition: none; transform: none; } }
/* Quick-message panel: opens from the button, pre-fills a WhatsApp chat. */
.wa__panel {
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.1rem + 56px + 14px);
  z-index: 51;
  width: min(22rem, calc(100vw - 2.2rem));
  max-height: calc(100dvh - 1.1rem - 56px - 14px - 1rem);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px 20px 6px 20px;
  box-shadow: 0 24px 60px -24px rgba(5, 6, 5, 0.4);
  font-family: var(--font-body);
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.3s var(--ease-out-expo);
}
.wa__panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.wa__panel-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 0.4rem 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.wa__panel-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
}
.wa__panel-icon svg { width: 21px; height: 21px; }
.wa__panel-title { margin: 0.1rem 0 0.2rem; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.wa__panel-sub { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-muted); }
.wa__panel-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -0.35rem;
  border: 0;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 999px;
}
.wa__panel-close svg { width: 18px; height: 18px; }
.wa__panel-close:hover { color: var(--ink); background: rgba(5, 6, 5, 0.05); }
.wa__form { display: grid; gap: 0.85rem; padding: 1rem 1.1rem 1.1rem; }
.wa__field { display: grid; gap: 0.35rem; }
.wa__field label { font-size: 0.82rem; font-weight: 600; }
.wa__field input, .wa__field select, .wa__field textarea {
  font: inherit;
  font-size: 1rem;  /* 16px stops iOS zooming into the field */
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
.wa__field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.45; }
.wa__field input:focus, .wa__field select:focus, .wa__field textarea:focus { outline: 2px solid #25d366; outline-offset: 1px; border-color: transparent; }
.wa__field [aria-invalid="true"] { border-color: #c62828; }
.wa__err { font-size: 0.8rem; color: #c62828; }
.wa__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  margin-top: 0.2rem;
  border: 0;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.wa__submit:hover { background: #1ebe5a; }
.wa__submit:active { transform: scale(0.98); }
.wa__submit-icon { display: grid; }
.wa__submit-icon svg { width: 20px; height: 20px; }
.wa__note { margin: 0; text-align: center; font-size: 0.78rem; color: var(--ink-muted); }
.wa__panel-close:focus-visible, .wa__submit:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wa__panel { transition: none; transform: none; } }
@media print { .wa, .wa__bubble, .wa__panel { display: none; } }

/* ---------- Home hero, layers variant ----------------------------------
   Headline left, always two lines (sized to its column with container
   units: line 2 is ~12.9em wide); a small pink cube with grey frames built
   up around it on the right (build_v2.py, hero_core_svg). Pink is kept to
   "the problem" and the cube. */
.hero--layers { background: radial-gradient(48rem 34rem at 12% 112%, rgba(227, 36, 130, 0.035), transparent 70%); }
.hero__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); gap: 2.5rem; } }
.hero--layers .hero__lead { max-width: none; margin: 0; text-align: left; container-type: inline-size; }
.hero--layers h1 { font-size: min(3.6rem, 100cqi / 13.2); margin-left: 0; text-wrap: nowrap; }
.hero--layers h1 .hl-line { white-space: nowrap; }
.hero--layers h1 .accent { display: inline; }
.hero--layers .hero__lead > p { margin-left: 0; color: var(--ink-muted); }
.hero--layers .hero__actions { justify-content: flex-start; }
.hero--layers .hero__actions .btn { min-width: 0; }
@media (max-width: 40rem) { .hero--layers .hero__actions .btn { width: 100%; } }
.hero__stack { position: relative; width: min(100%, 17rem); margin-inline: auto; }
.hero__stack-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Phones and tablets: the stack becomes a faint watermark behind the intro
   and buttons, bleeding off the right edge, instead of a block under them. */
@media (max-width: 59.99rem) {
  .hero__grid { position: relative; }
  .hero--layers .hero__lead { position: relative; z-index: 1; }
  .hero__stack {
    position: absolute;
    z-index: 0;
    top: 9.5rem;
    right: -4.5rem;
    width: min(68vw, 19rem);
    margin: 0;
    pointer-events: none;
  }
  /* on the drawing, not the wrapper: the hero load timeline fades the wrapper to 1 */
  .hero__stack .hero__stack-svg { opacity: 0.11; }
}
@media (max-width: 40rem) { .hero__stack { top: 5.25rem; right: -3.75rem; } }

/* Texture: a faint isometric grid at the same 30 degree angles as the ring
   stack, strongest behind the drawing and fading out before the text. */
.hero__iso {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='40'%3E%3Cpath d='M0 0L69.28 40M0 40L69.28 0' stroke='%23050605' stroke-opacity='0.12' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size: 69.28px 40px;
  background-position: center;
  -webkit-mask-image: radial-gradient(60% 75% at 78% 45%, #000 0%, rgba(0, 0, 0, 0.55) 40%, transparent 78%);
  mask-image: radial-gradient(60% 75% at 78% 45%, #000 0%, rgba(0, 0, 0, 0.55) 40%, transparent 78%);
}
@media (max-width: 59.99rem) {
  .hero__iso {
    -webkit-mask-image: radial-gradient(75% 45% at 90% 45%, #000 0%, transparent 80%);
    mask-image: radial-gradient(75% 45% at 90% 45%, #000 0%, transparent 80%);
  }
}
.hc-top { fill: #3a3b3a; }
.hc-left { fill: #1c1d1c; }
.hc-right { fill: #0b0c0b; }
.hc-core-top { fill: #f48dbb; }
.hc-core-l { fill: var(--accent-solid); }
.hc-core-r { fill: #b81c6a; }
/* "Your problem" tag: pink pill with a live dot above the stack, a flowing
   leader line down to the cube, and a ping on the cube (desktop only). */
.hc-tag { filter: drop-shadow(0 8px 14px rgba(227, 36, 130, 0.35)); }
.hc-tag__pill { fill: url(#hc-tag-grad); }
.hc-tag__text { fill: #fff; font: 600 13.5px var(--font-body); letter-spacing: 0.01em; }
.hc-tag__live { fill: #fff; }
.hc-tag__live-ring { fill: none; stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: hc-live 1.8s ease-out infinite; }
.hc-tag__line { stroke: var(--accent-solid); stroke-width: 1.6; stroke-dasharray: 3 4; animation: hc-flow 0.9s linear infinite; }
.hc-tag__dot { fill: #fff; stroke: var(--accent-solid); stroke-width: 2.2; }
.hc-tag__ping { fill: none; stroke: var(--accent-solid); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hc-ping 2.2s ease-out infinite; }
@keyframes hc-flow { to { stroke-dashoffset: -14; } }
@keyframes hc-live { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes hc-ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(4.2); opacity: 0; } }
.hero--layers.is-paused :is(.hc-tag__live-ring, .hc-tag__line, .hc-tag__ping) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hc-tag__live-ring, .hc-tag__line, .hc-tag__ping { animation: none; } .hc-tag__ping, .hc-tag__live-ring { display: none; } }
.hc-tag2 { filter: drop-shadow(0 8px 14px rgba(5, 6, 5, 0.28)); }
.hc-tag2__pill { fill: var(--ink); }
.hc-tag2__text { fill: #fff; font: 600 13.5px var(--font-body); letter-spacing: 0.01em; }
.hc-tag2__icon { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.hc-tag2__line { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 3 4; animation: hc-flow-up 0.9s linear infinite; }
@keyframes hc-flow-up { to { stroke-dashoffset: 14; } }
.hero--layers.is-paused .hc-tag2__line { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hc-tag2__line { animation: none; } }
@media (max-width: 59.99rem) { .hc-tag { display: none; } }
.hc-shadow { fill: rgba(5, 6, 5, 0.05); filter: blur(10px); }
.hc-glow { fill: rgba(227, 36, 130, 0.14); filter: blur(14px); animation: hc-glow 4s ease-in-out infinite; }
@keyframes hc-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.hero--layers.is-paused .hc-glow { animation-play-state: paused; }
html.preanim .hero__stack { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hc-glow { animation: none; } }

/* ---------- Icons: drawn in on scroll, then a small idle motion ----------
   _wireframe.js ("Icons") sets up the line drawing and adds .ico--live once
   an icon has drawn; .is-off pauses it while off screen. Most icons float a
   pixel or two; a few move in their own way. Skipped in the nav, FAQ,
   WhatsApp and footer, and entirely under reduced motion. */
svg.ico--live { animation: ico-float 4.8s ease-in-out var(--ico-d, 0s) infinite; }
svg.ico--live.is-off, svg.ico--live.is-off * { animation-play-state: paused; }
@keyframes ico-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes ico-spin { to { transform: rotate(360deg); } }
@keyframes ico-ping { 0% { transform: scale(0.7); opacity: 1; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ico-flicker { 0%, 86%, 100% { opacity: 1; } 89% { opacity: 0.25; } 92% { opacity: 1; } 95% { opacity: 0.4; } }
@keyframes ico-grow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.72); } }
@keyframes ico-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes ico-nudge { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-9deg); } 94% { transform: rotate(7deg); } 97% { transform: rotate(-3deg); } }
svg.ico--live:is([data-ico="gear"], [data-ico="loop"], [data-ico="lifering"]) { transform-origin: 50% 50%; animation: ico-spin 10s linear infinite; }
svg.ico--live[data-ico="loop"] { animation-duration: 6s; }
svg.ico--live[data-ico="clock"] path { transform-origin: 12px 12px; animation: ico-spin 8s linear infinite; }
svg.ico--live[data-ico="radar"] circle:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: ico-ping 2.6s ease-out infinite; }
svg.ico--live[data-ico="bolt"] { animation: ico-flicker 4s linear var(--ico-d, 0s) infinite; }
svg.ico--live[data-ico="chart"] path:first-of-type { transform-box: fill-box; transform-origin: 50% 100%; animation: ico-grow 3s ease-in-out infinite; }
svg.ico--live:is([data-ico="network"], [data-ico="pin"]) circle { transform-box: fill-box; transform-origin: center; animation: ico-dot 2.4s ease-in-out infinite; }
svg.ico--live[data-ico="network"] circle:nth-of-type(2) { animation-delay: 0.8s; }
svg.ico--live[data-ico="network"] circle:nth-of-type(3) { animation-delay: 1.6s; }
svg.ico--live:is([data-ico="wrench"], [data-ico="key"], [data-ico="phone"], [data-ico="step_design"]) { transform-origin: 50% 50%; animation: ico-nudge 5s ease-in-out var(--ico-d, 0s) infinite; }
@media (prefers-reduced-motion: reduce) { svg.ico--live, svg.ico--live * { animation: none !important; } }

/* ---------- Our services, photo cards (SERVICES_STYLE = "photo") --------
   One visual per card: a straight, full-width photo on top, then title,
   line and link. No icon, no ghost number, no tilt. The whole card is the
   link (stretched ::before on .cats__link--stretch). */
.cats--photo { align-items: stretch; }
/* The row rises as one (data-rise on .cats), so the cards stay level. The
   hover lift uses `translate`, not `transform`, so it never fights GSAP. */
.cats__card--photo { padding: 0; gap: 0; transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, translate 0.25s ease; }
.cats__card--photo:hover { transform: none; translate: 0 -4px; }
/* Photos are about 16:9; 16:10 keeps nearly all of each one. The -1px
   margin lets the photo cover the card border so it sits edge to edge. */
.cats__media { position: relative; aspect-ratio: 16 / 10; margin: -1px -1px 0; border-radius: 28px 28px 0 0; overflow: hidden; background: var(--surface-alt); }
.cats__media img { object-position: var(--pos, 50% 50%); }
.cats__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.cats__card--photo:hover .cats__media img { transform: scale(1.04); }
.cats__body { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; padding: 1.6rem 1.75rem 1.75rem; }
.cats__card--photo h3 { margin: 0; }
.cats__card--photo .cats__line { max-width: none; }
.cats__card--photo .cats__link { margin-top: auto; padding-top: 0.4rem; }
.cats__link--stretch::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.cats__link--stretch:focus-visible { outline: none; }
.cats__card--photo:has(.cats__link--stretch:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.cats__more { margin: 1.75rem auto 0; max-width: none; text-align: center; color: var(--ink-muted); font-size: 0.95rem; }
.cats__more a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.cats__more a:hover { color: var(--accent-solid); }
@media (prefers-reduced-motion: reduce) {
  .cats__card--photo:hover { translate: none; }
  .cats__media img { transition: none; }
  .cats__card--photo:hover .cats__media img { transform: none; }
}

/* Photo treatment (build_v2.py SERVICES_PHOTO_FX = "mono"): photos sit in
   black and white and turn to colour on hover or keyboard focus, with a
   pink line along the bottom edge. Touch screens have no hover, so JS adds
   .is-lit to the card nearest the middle of the screen instead. */
.cats--mono .cats__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent-solid); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cats--mono .cats__media img { filter: grayscale(1) contrast(1.05); transition: filter 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.cats--mono .cats__card:hover .cats__media img,
.cats--mono .cats__card:focus-within .cats__media img,
.cats--mono .cats__card.is-lit .cats__media img { filter: none; }
.cats--mono .cats__card:hover .cats__media::after,
.cats--mono .cats__card:focus-within .cats__media::after,
.cats--mono .cats__card.is-lit .cats__media::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .cats--mono .cats__media img, .cats--mono .cats__media::after { transition: none; }
}

/* Our services card art (SERVICES_STYLE = "art"): drawn isometric scenes
   on a soft dotted panel, same palette as the hero. */
.cats__media--art { background: radial-gradient(circle, rgba(5, 6, 5, 0.09) 1px, transparent 1.4px) 0 0 / 16px 16px, var(--surface-alt); }
.ca { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.cats__card--photo:hover .ca { transform: translateY(-4px) scale(1.02); }
.ca-base-top { fill: #fff; } .ca-base-l { fill: #e2e2df; } .ca-base-r { fill: #d2d2ce; }
.ca-d-top { fill: #3a3b3a; } .ca-d-l { fill: #1c1d1c; } .ca-d-r { fill: #0b0c0b; }
.ca-g-top { fill: #8d8e8c; } .ca-g-l { fill: #6b6c6a; } .ca-g-r { fill: #545553; }
.ca-w-top { fill: #fff; } .ca-w-l { fill: #e9e9e6; } .ca-w-r { fill: #d6d6d2; }
.ca-p-top { fill: #f48dbb; } .ca-p-l { fill: var(--accent-solid); } .ca-p-r { fill: #b81c6a; }
.ca-shadow { fill: rgba(5, 6, 5, 0.1); filter: blur(3px); }
.ca-page { fill: #fff; } .ca-pink { fill: var(--accent-solid); } .ca-dot { fill: #fff; }
.ca-block { fill: #d9d9d6; } .ca-line { fill: #b9bab7; } .ca-card { fill: #ececea; } .ca-card--on { fill: #f9c5dc; }
.ca-road { fill: #3a3b3a; } .ca-lane { fill: #fff; opacity: 0.7; } .ca-win { fill: #d2d2ce; }
.ca-pole { stroke: #1c1d1c; stroke-width: 3; stroke-linecap: round; }
.ca-lamp { fill: #fff; stroke: var(--accent-solid); stroke-width: 2; }
.ca-beam { fill: rgba(227, 36, 130, 0.14); } .ca-pool { fill: rgba(227, 36, 130, 0.28); }
.ca-led { fill: var(--accent-solid); }
.ca-slot { fill: #3a3b3a; } .ca-door { fill: #f9c5dc; } .ca-floor { fill: #ececea; }
.ca-frame { stroke: #1c1d1c; stroke-width: 2.4; stroke-linecap: round; }
.ca-plan { stroke: #b9bab7; stroke-width: 2; stroke-dasharray: 4 4; }
.ca-mile { fill: #fff; stroke: #8d8e8c; stroke-width: 1.6; }
.ca-pole--thin { stroke-width: 2; } .ca-flag { fill: var(--accent-solid); }
.ca-marker__dot { fill: var(--accent-solid); } .ca-marker__ring { fill: rgba(227, 36, 130, 0.2); }
/* Real-world detail (scale-model look): concrete, glass, trees, street and site furniture */
.ca-c-top { fill: #ececea; } .ca-c-l { fill: #d9d9d5; } .ca-c-r { fill: #c9c9c4; }
.ca-glass-top { fill: #d6dade; } .ca-glass-l { fill: rgba(170, 180, 188, 0.55); } .ca-glass-r { fill: rgba(150, 160, 168, 0.55); }
.ca-glass { fill: #aeb6bd; } .ca-glass--r { fill: #98a1a8; }
.ca .hs-car-top, .ca .hs-car-l { stroke: none; }
.ca-tree { fill: #cfd1cc; } .ca-tree-hi { fill: #ececea; } .ca-trunk { stroke: #9a9b98; stroke-width: 2; stroke-linecap: round; }
.ca-keys { fill: #e2e2df; } .ca-screen { fill: #fff; }
.ca-mug { fill: #c21d70; } .ca-mug-top { fill: var(--accent-solid); }
.ca-steam { fill: none; stroke: #b9bab7; stroke-width: 1.4; stroke-linecap: round; opacity: 0.8; }
.ca-pot { fill: #d2d2ce; } .ca-pot-top { fill: #8d8e8c; }
.ca-zebra { fill: #fff; opacity: 0.9; } .ca-awning { fill: var(--accent-solid); } .ca-ad { fill: #f48dbb; }
.ca-louvre { fill: #c9c9c4; } .ca-louvre--r { fill: #b9bab5; }
.ca-shutter { fill: #d6d6d2; } .ca-shutter-line { fill: #b9bab7; }
.ca-fan { fill: #3a3b3a; stroke: #6b6c6a; stroke-width: 1; }
.ca-lattice { stroke: #1c1d1c; stroke-width: 1.8; } .ca-lattice--thin { stroke-width: 1; }
.ca-jib { stroke: #1c1d1c; stroke-width: 2.6; stroke-linecap: round; }
.ca-cable { stroke: #3a3b3a; stroke-width: 1; transform-box: fill-box; transform-origin: top; }
.ca-fence { stroke: #9a9b98; stroke-width: 1.3; }
/* "Starting new, or improving" scenes */
.who__visual--art { position: relative; overflow: hidden; border: 0; background: radial-gradient(circle, rgba(5, 6, 5, 0.09) 1px, transparent 1.4px) 0 0 / 16px 16px, var(--surface-alt); }
/* Starting new, or improving: Z layout (SOI_LAYOUT = "z"). Two rows, text
   and picture swapping sides, no card boxes. */
.soi--alt { background: radial-gradient(60rem 28rem at 12% 0%, rgba(255, 255, 255, 0.75), transparent 62%), var(--surface-alt); }
.soi__rows { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.soi__row { display: grid; gap: 1.75rem; align-items: center; }
.soi__art { order: -1; }   /* phones: picture first, then the words and button */
@media (min-width: 56rem) { .soi__row:not(.soi__row--flip) .soi__art { order: 0; } }
@media (min-width: 56rem) {
  .soi__row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 1rem + 4vw, 5.5rem); }
  .soi__row--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .soi__row--flip .soi__art { order: -1; }
}
.soi__kicker { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.soi__kicker span { display: grid; place-items: center; min-width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--accent-tint); color: var(--accent-solid); font: 700 0.8rem/1 var(--font-display); letter-spacing: 0; }
.soi__title { margin: 0 0 0.75rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.soi__body { margin: 0; max-width: 34rem; color: var(--ink-muted); }
.soi__text .who__steps { max-width: 30rem; margin-top: 1.75rem; }
.soi__text .who__cta { margin-top: 1.75rem; }
.soi__art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 28px; border: 10px solid var(--accent-tint); background: radial-gradient(circle, rgba(5, 6, 5, 0.09) 1px, transparent 1.4px) 0 0 / 16px 16px, #fff; box-shadow: 0 30px 60px -40px rgba(5, 6, 5, 0.35); }
.soi:not(.soi--alt) .soi__art { background-color: var(--surface-alt); box-shadow: none; }
.soi__art .ca { width: 100%; height: 100%; }
.soi__row:hover .ca { transform: translateY(-4px) scale(1.02); }

/* What happens first: three numbered steps joined by a line */
.who__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; position: relative; }
.who__steps::before { content: ""; position: absolute; top: 0.8rem; left: 0.8rem; right: 33%; height: 1px; background: repeating-linear-gradient(90deg, var(--accent-solid) 0 4px, transparent 4px 8px); }
.who__steps { align-items: start; }
.who__steps li { position: relative; display: grid; align-content: start; justify-items: start; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.who__step-n { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent-solid); color: var(--accent-solid); font: 700 0.75rem/1 var(--font-display); }
.who__steps li:last-child .who__step-n { background: var(--accent-solid); color: #fff; }
.who__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem; padding: 0.7rem 1.15rem; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: background-color 0.2s ease, translate 0.2s ease; }
.who__cta:hover { background: var(--accent-solid); translate: 0 -2px; }
.who__cta:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; }
.who__card { display: flex; flex-direction: column; }
.who__card .who__cta { align-self: flex-start; margin-top: auto; }
.who__card:has(.who__cta) .who__visual { margin-bottom: 1.25rem; }
/* Finder: the stage picked on a "Starting new / improving" card */
.finder__pre { margin: -0.4rem 0 1rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.72); }
.finder__pre b { color: #f48dbb; font-weight: 600; }
.finder__pre-clear { margin-left: 0.1rem; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.who__visual--art .ca { width: 100%; height: 100%; }   /* beats the 15% placeholder-icon size */
.who__card:hover .ca { transform: translateY(-4px) scale(1.02); }
.ca-bp-grid { stroke: #f9c5dc; stroke-width: 0.8; }
.ca-bp-plan { fill: none; stroke: var(--accent-solid); stroke-width: 1.6; }
.ca-bp-fill { fill: rgba(227, 36, 130, 0.14); }
.ca-ghost { stroke: var(--accent-solid); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0.75; }
.ca-stake { stroke: #6b6c6a; stroke-width: 1.6; stroke-linecap: round; }
.ca-scaffold { stroke: #8d8e8c; stroke-width: 1.8; stroke-linecap: round; } .ca-scaffold--thin { stroke-width: 1; }
.ca-mag-lens { fill: rgba(255, 255, 255, 0.45); } .ca-mag-ring { fill: none; stroke: #1c1d1c; stroke-width: 3.5; }
.ca-mag-handle { stroke: #1c1d1c; stroke-width: 5; stroke-linecap: round; }
.ca-rebar { stroke: var(--accent-solid); stroke-width: 0.9; opacity: 0.7; }
.ca-string { stroke: var(--accent-solid); stroke-width: 0.8; }
.ca-tripod { stroke: #3a3b3a; stroke-width: 1.5; stroke-linecap: round; }
.ca-laser { stroke: var(--accent-solid); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ca-bp-sheet { fill: #fff; }
.ca-drone-body { fill: #1c1d1c; } .ca-drone-arm { stroke: #1c1d1c; stroke-width: 1.8; } .ca-rotor { fill: rgba(5, 6, 5, 0.25); }
.ca-scan { fill: rgba(227, 36, 130, 0.14); }
/* Website scenes */
.ca-bar { fill: #ececea; } .ca-bar-dot { fill: #c9c9c4; }
.ca-hero-line { fill: #fff; opacity: 0.85; }
.ca-plan-box { fill: rgba(227, 36, 130, 0.05); stroke: var(--accent-solid); stroke-width: 1; stroke-dasharray: 3 3; }
.ca-note { fill: #e2e2df; } .ca-note--p { fill: #f48dbb; }
.ca-old { fill: #d2d2ce; } .ca-old-line { fill: #c3c3be; }
.ca-scanglow { fill: rgba(227, 36, 130, 0.12); }
.ca-bar-chart { fill: #c9c9c4; } .ca-bar-chart--on { fill: var(--accent-solid); }
.ca-grow { transform-box: fill-box; transform-origin: bottom; }
/* word tags on the Starting new / improving pictures */
.ca-tag { filter: drop-shadow(0 4px 8px rgba(5, 6, 5, 0.16)); }
.ca-tag__line { stroke: var(--accent-solid); stroke-width: 1; stroke-dasharray: 2 2; }
.ca-tag__dot { fill: #fff; stroke: var(--accent-solid); stroke-width: 1.4; }
.ca-tag__pill { fill: #fff; }
.ca-tag__n { fill: var(--accent-solid); }
.ca-tag__num { fill: #fff; font: 700 7.5px var(--font-display); }
.ca-tag__text { fill: var(--ink); font: 600 9.5px var(--font-body); }
/* phones (5 Oct): the labels stay, the pill grows in place so it reads at about 13px */
@media (max-width: 40rem) { .ca-tag__p { transform-box: fill-box; transform-origin: center; scale: 1.3; } }
.ca-page--old { fill: #f1f1ef; }
.ca-broken { stroke: #b9bab7; stroke-width: 1; }
.ca-gap__ring { fill: none; stroke: var(--accent-solid); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.ca-gap__dot { fill: var(--accent-solid); } .ca-gap__mark { fill: #fff; font: 700 5px var(--font-body); }
.ca-arrow { fill: none; stroke: var(--accent-solid); stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; }
.ca-arrow-head { fill: none; stroke: var(--accent-solid); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca-wall { fill: #fff; } .ca-sketch { stroke: var(--accent-solid); stroke-width: 1.2; stroke-dasharray: 2 2; }
.ca-btn { fill: #1c1d1c; }
.ca-divide { stroke: #1c1d1c; stroke-width: 2; } .ca-handle { fill: #fff; stroke: #1c1d1c; stroke-width: 2; }
.ca-handle-arrows { fill: none; stroke: #1c1d1c; stroke-width: 1.2; stroke-linecap: round; }
.ca-fill, .ca-note-pop { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ca-cable { animation: ca-cable 4.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .ca-steam { animation: ca-steam 2.8s ease-in-out infinite; }
  .ca-steam--2 { animation-delay: 1.4s; }
  .ca-mag { animation: ca-mag 5s ease-in-out infinite; }
  .ca-drone { animation: ca-bob 3s ease-in-out infinite; }
  .ca-scanline { animation: ca-scanline 3.2s ease-in-out infinite; }
  .ca-split { animation: ca-split 4s ease-in-out infinite; }
  .ca-gap__ring { animation: hc-ping 2s ease-out infinite; animation-delay: var(--d, 0s); }
  .ca-arrow { animation: ca-ghost 0.8s linear infinite; }
  .ca-plan-box { animation: ca-ghost 1.4s linear infinite; }
  .ca-tag { opacity: 0; }
  .soi__row.is-seen .ca-tag { animation: ca-tag-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--d, 0s); }
  .ca-fill { animation: ca-fill 4.5s ease-in-out infinite; }
  .ca-note-pop { animation: ca-pop 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-delay: var(--d, 0s); }
  .ca-grow { animation: ca-grow 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; animation-delay: var(--d, 0s); }
  .ca-scan { animation: ca-glow 1.6s ease-in-out infinite; } .ca-scan--2 { animation-delay: 0.8s; }
  .ca-laser { animation: ca-ghost 0.9s linear infinite; }
  .ca-rotor { animation: ca-blink 0.2s steps(1) infinite; }
  .ca-ghost { animation: ca-ghost 1.2s linear infinite; }
  .ca-bob { animation: ca-bob 3.2s ease-in-out infinite; }
  .ca-car { animation: ca-car 6s linear infinite; }
  .ca-beam, .ca-pool { animation: ca-glow 3s ease-in-out infinite; }
  .ca-led { animation: ca-blink 1.6s steps(1) infinite; }
  .ca-stack--2 { animation: ca-drop 4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .ca-drop { animation: ca-drop 4.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .ca-marker { animation: ca-plan 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
}
@keyframes ca-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ca-mag { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(52px, 30px); } }
@keyframes ca-ghost { to { stroke-dashoffset: -8; } }
@keyframes ca-scanline { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }
@keyframes ca-grow { 0%, 10% { transform: scaleY(0.2); } 45%, 100% { transform: scaleY(1); } }
@keyframes ca-split { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, 6px); } }
@keyframes ca-fill { 0%, 15% { opacity: 0; } 40%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ca-pop { 0%, 8% { transform: scale(0.6); opacity: 0; } 22%, 100% { transform: scale(1); opacity: 1; } }
@keyframes ca-tag-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ca-cable { 0%, 15% { transform: scaleY(var(--k, 0.8)); } 35%, 100% { transform: scaleY(1); } }
@keyframes ca-steam { 0% { transform: translateY(3px); opacity: 0; } 30% { opacity: 0.8; } 100% { transform: translateY(-6px); opacity: 0; } }
@keyframes ca-car { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(104px, 60px); opacity: 0; } }
@keyframes ca-glow { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes ca-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }
@keyframes ca-plan { 0%, 10% { transform: translate(0, 0); } 30%, 38% { transform: translate(23px, 13px); } 58%, 66% { transform: translate(46px, 26px); } 86%, 100% { transform: translate(91px, 53px); } }
@keyframes ca-drop { 0%, 15% { transform: translateY(-18px); opacity: 0; } 35%, 85% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }

/* ---------- Problem finder (home, under Our services) ------------------ */
.finder {
  display: grid;
  gap: 1.5rem 3rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 24px;
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section--finder .finder { margin-top: 0; }   /* its own section since 29 Sep */
.section.section--finder { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); scroll-margin-top: 5.5rem; }
.section--finder .finder { scroll-margin-top: 6.5rem; }
.finder::before {   /* faint isometric grid, as in the hero */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='40'%3E%3Cpath d='M0 0L69.28 40M0 40L69.28 0' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent 75%);
  mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent 75%);
  pointer-events: none;
}
.finder > * { position: relative; }
@media (min-width: 56rem) { .finder { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.finder .eyebrow { color: #f48dbb; }
.finder h3 { margin: 0.4rem 0 1.25rem; color: #fff; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; }
.finder__progress { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; max-width: 14rem; }
.finder__progress span { display: block; height: 100%; width: 33%; border-radius: inherit; background: var(--accent-gradient); transition: width 0.5s var(--ease); }
.finder__stage { display: grid; }
.finder__step { grid-area: 1 / 1; animation: finder-in 0.45s var(--ease) both; }
@keyframes finder-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.finder__q { margin: 0 0 1rem; font-weight: 600; font-size: 1.05rem; }
.finder__q span { display: inline-block; margin-right: 0.5rem; padding: 0.2rem 0.55rem; border-radius: 99px; background: rgba(255, 255, 255, 0.1); font-size: 0.75rem; color: rgba(255, 255, 255, 0.75); vertical-align: 0.1em; }
.finder__opts { display: grid; gap: 0.6rem; }
@media (min-width: 40rem) { .finder__step[data-step="1"] .finder__opts { grid-template-columns: 1fr 1fr; } }
/* odd one out ("Something else") spans the row */
@media (min-width: 40rem) { .finder__step[data-step="1"] .finder__opt:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.finder__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.8rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.finder__opt:hover { border-color: var(--accent-solid); background: rgba(227, 36, 130, 0.12); transform: translateY(-2px); }
.finder__opt:focus-visible { outline: 2px solid #f48dbb; outline-offset: 2px; }
.finder__opt-arrow { color: #f48dbb; transition: translate 0.2s ease; }
.finder__opt:hover .finder__opt-arrow { translate: 3px 0; }
.finder__back { margin-top: 1rem; min-height: 44px; padding: 0 0.25rem; border: 0; background: none; color: rgba(255, 255, 255, 0.7); font: inherit; font-size: 0.9rem; cursor: pointer; }
.finder__back:hover { color: #fff; }
.finder__kicker { margin: 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #f48dbb; }
.finder__svc:focus { outline: none; }  /* focused by script only, to move screen readers to the result */
.finder__svc { margin: 0.4rem 0 0.6rem; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.finder__line { margin: 0; color: rgba(255, 255, 255, 0.78); line-height: 1.6; }
.finder__note { margin: 0.6rem 0 0; color: rgba(255, 255, 255, 0.78); line-height: 1.6; }
/* Five-tap check (30 Sep) */
.finder__opts[hidden] { display: none; }   /* only the chosen area's list shows */
@media (min-width: 40rem) { .finder--check .finder__opts:not(.finder__opts--areas) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.finder--check .finder__opt:not(.finder__area) { min-height: 0; padding: 0.7rem 1rem; font-size: 0.93rem; }
.finder--check .finder__opts { gap: 0.5rem; }
.finder__opts--areas { grid-template-columns: minmax(0, 1fr); }
.finder__area { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; }
.finder__area-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--accent-gradient); color: #fff; }
.finder__area-icon svg { width: 1.3rem; height: 1.3rem; }
.finder__area-t { display: grid; gap: 0.15rem; text-align: left; }
.finder__area-t b { font-size: 1.05rem; }
.finder__area-t small { color: rgba(255, 255, 255, 0.62); font-size: 0.85rem; }
.finder__sum { display: grid; gap: 0.35rem; margin: 0.6rem 0 1.25rem; padding: 0.9rem 1rem; list-style: none; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.finder__sum li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; font-size: 0.88rem; }
.finder__sum span { color: rgba(255, 255, 255, 0.6); }
.finder__sum b { color: #fff; font-weight: 600; text-align: right; }
.finder--check .finder__svc { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); }
.finder__hook { margin-top: 1.25rem; padding: 1.25rem 1.3rem; border-radius: 16px; background: linear-gradient(135deg, rgba(227, 36, 130, 0.28), rgba(227, 36, 130, 0.08)); border: 1px solid rgba(240, 67, 154, 0.45); }
.finder__hook-t { margin: 0; font: 700 1.1rem/1.3 var(--font-display); color: #fff; }
.finder__hook-b { margin: 0.35rem 0 0; color: rgba(255, 255, 255, 0.82); line-height: 1.55; }
.finder__site { display: grid; gap: 0.35rem; margin-top: 0.9rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.finder__site[hidden] { display: none; }
.finder__site input { min-height: 44px; padding: 0 0.9rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.3); color: #fff; font: inherit; font-size: 1rem; }
.finder__site input:focus { outline: 2px solid #f48dbb; outline-offset: 1px; }
.finder__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }
.finder .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.finder .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .finder__step { animation: none; } .finder__progress span, .finder__opt { transition: none; } }

/* ---------- Hero scene (HERO_STACK = "scene") ----------------------------
   Dark platform so it stands out from the light page; objects reuse the
   card-art palette (.ca-*). Bigger than the ring stack, and it bleeds a
   little past the grid column on wide screens. */
/* 50 | 50 with the headline (29 Sep): the scene fills its half. */
@media (min-width: 60rem) {
  .hero--layers:has(.hero__stack--scene) .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .hero__stack--scene { width: 100%; max-width: 38rem; margin: 0 -1rem 0 auto; }
}
.ca-hs-top { fill: #1c1d1c; } .ca-hs-l { fill: #111211; } .ca-hs-r { fill: #050605; }
.hs-shadow { fill: rgba(5, 6, 5, 0.16); filter: blur(14px); }
.hs-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.hs-rim { fill: none; stroke: rgba(227, 36, 130, 0.55); stroke-width: 1.4; }
.hs-trace { fill: none; stroke: rgba(227, 36, 130, 0.35); stroke-width: 2; stroke-linejoin: round; }
.hs-pulse { fill: none; stroke: #f48dbb; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 200; stroke-dashoffset: 10; }
.hs-pad { fill: var(--accent-solid); }
.hs-glow { fill: rgba(227, 36, 130, 0.35); filter: blur(18px); }
.hs-vent { fill: #3a3b3a; }
.hs-slab { fill: #2c2d2c; }
.hs-frame { stroke: #d2d2ce; stroke-width: 2.4; stroke-linecap: round; }
.hs-road { fill: #3a3b3a; }
.hs-car-top { fill: #fff; } .hs-car-l { fill: #e9e9e6; } .hs-car-r { fill: #d2d2ce; }
.hs-car-glass { fill: #2c2d2c; } .hs-car-head { fill: #fff6c9; } .hs-car-tail { fill: var(--accent-solid); }
.hs-cam-top { fill: #fff; } .hs-cam-l { fill: #e9e9e6; } .hs-cam-r { fill: #c9c9c5; } .hs-cam-hood { fill: #b9bab7; }
.hs-cam-lens { fill: #0b0c0b; stroke: #8d8e8c; stroke-width: 1; } .hs-cam-iris { fill: var(--accent-solid); }
.hs-car__wheel { fill: #0b0c0b; } .hs-car__hub { fill: #8d8e8c; } .hs-car__shadow { fill: rgba(0, 0, 0, 0.35); filter: blur(2px); }
.hs-pole { stroke: #d2d2ce; stroke-width: 2.6; stroke-linecap: round; }
.hs-flagpole { stroke: #d2d2ce; stroke-width: 1.8; }
.hs .ca-plan { stroke: #8d8e8c; }
.hs .ca-mile { fill: #2c2d2c; stroke: #b9bab7; }
@media (prefers-reduced-motion: no-preference) {
  .hs-pulse { animation: hs-pulse 2.6s linear infinite; }
  .hs-part[data-i="1"] .hs-pulse:nth-of-type(4) { animation-delay: 0.65s; }
  .hs-part[data-i="1"] .hs-pulse:nth-of-type(6) { animation-delay: 1.3s; }
  .hs-part[data-i="1"] .hs-pulse:nth-of-type(8) { animation-delay: 1.95s; }
  .hs-cube { animation: ca-bob 3.2s ease-in-out infinite; }
  .hs-glow { animation: hc-glow 4s ease-in-out infinite; }
  .hs .hs-light { animation: ca-glow 3s ease-in-out infinite; }
  .hs .ca-led { animation: ca-blink 1.6s steps(1) infinite; }
  .hs-car { animation: hs-car 5.5s linear infinite; }
  .hs-drop { animation: ca-drop 4.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .hs-marker { animation: hs-plan 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  .hero--layers.is-paused .hs * { animation-play-state: paused; }
}
@keyframes hs-pulse { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -150; } }
@keyframes hs-car { 0% { transform: translate(0, 0); opacity: 0; } 8%, 85% { opacity: 1; } 100% { transform: translate(78px, 45px); opacity: 0; } }
@keyframes hs-plan { 0%, 12% { transform: translate(0, 0); } 35%, 45% { transform: translate(15px, 9px); } 68%, 76% { transform: translate(30px, 18px); } 95%, 100% { transform: translate(47px, 27px); } }

/* ---------- Hero stack: tilt towards the pointer, click to rebuild -------- */
.hero__stack-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 20px; }
.hero__stack-btn:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 6px; }
.hero__stack-hint {
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  translate: -50% 6px;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 600 0.72rem/1 var(--font-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, translate 0.3s var(--ease);
}
@media (hover: hover) and (min-width: 60rem) {
  .hero__stack:hover .hero__stack-hint { opacity: 1; translate: -50% 0; }
}
@media (max-width: 59.99rem), (prefers-reduced-motion: reduce) { .hero__stack-hint { display: none; } .hero__stack-btn { cursor: default; } }

/* ---------- "360" easter egg: the logo turns a full 360 ------------------- */
.nav__logo, .footer__logo { transform-origin: 50% 50%; }
.is-spin360 { animation: spin360 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes spin360 { from { transform: perspective(600px) rotateY(0); } to { transform: perspective(600px) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-spin360 { animation: none; } }

/* ---------- Solution pages: stacking service cards ----------------------
   Desktop with enough height: each photo card sticks just under the nav,
   a little lower than the one before, so they pile up like a deck as you
   scroll; _wireframe.js ("Service deck") eases the covered card back. */
@media (min-width: 60rem) and (min-height: 46rem) {
  .svc--stack { gap: 2.5rem; }
  .svc--stack .svc__row { position: sticky; top: 6.5rem; }
  .svc--stack .svc__row:nth-child(2) { top: 7.75rem; }
  .svc--stack .svc__row:nth-child(3) { top: 9rem; }
  .svc--stack .svc__row:nth-child(4) { top: 10.25rem; }
  .svc--stack .svc__row:hover { transform: none; }
  .svc--stack .svc__row { transition: box-shadow 0.3s ease; }  /* no transform transition: it would lag the scroll-scrubbed scale */
}

/* Focus line: words fill from grey to black as it scrolls into view, then
   the last word gets a pink underline (_wireframe.js, "Focus lines"). */
.svc__focus .fw:last-child {
  background: linear-gradient(var(--accent-solid), var(--accent-solid)) 0 100% / 0% 2px no-repeat;
  transition: background-size 0.6s var(--ease);
}
.svc__focus.is-done .fw:last-child { background-size: 100% 2px; }

/* How we work rail: a glowing head rides the front of the fill, and each
   step card lifts with a pink edge as the line reaches it. */
.steps4-rail__head { display: none; }
@media (min-width: 68rem) {
  .steps4-rail__head {
    display: block;
    position: absolute;
    z-index: 0;
    top: calc(1.625rem - 6px);
    left: -1.5rem;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--accent-solid);
    box-shadow: 0 0 0 5px rgba(227, 36, 130, 0.18), 0 0 20px 4px rgba(227, 36, 130, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .steps4-rail.is-moving .steps4-rail__head { opacity: 1; }
}
.steps4-rail .steps4__card { transition: transform 0.5s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease; }
.steps4-rail .steps4__item.is-lit .steps4__card {
  transform: translateY(-6px);
  border-color: rgba(227, 36, 130, 0.35);
  box-shadow: 0 26px 46px -26px rgba(227, 36, 130, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .steps4-rail .steps4__card, .svc__focus .fw:last-child { transition: none; }
}

/* ---------- Why it matters: tilt cards with a light sweep ---------------
   Desktop pointer: _wireframe.js ("Tilt cards") tilts the card towards the
   cursor and moves the glare with it. The transform is GSAP's, so the
   card's own CSS transform transition is switched off here. */
.cats--tilt .cats__card { transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.cats--tilt .cats__card:hover { transform: none; }
.tilt-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(22rem 22rem at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.cats--tilt .cats__card.is-tilting .tilt-glare { opacity: 1; }
@media (hover: none) {
  .cats--tilt .cats__card { transition: transform 0.2s ease, background-color 0.25s ease; }
  .cats--tilt .cats__card:active { transform: translateY(-3px); }
}

/* ---------- Why Grayscale360: the promises get ticked one by one --------- */
.whyus__card { position: relative; }
/* Lessons layout (WHYUS_STYLE = "lessons"): three big lines on the left,
   the promises card kept in view beside them on wide screens. */
.whyus__lessons { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 4rem); }
.whyus__lesson { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: baseline; margin: 0; }
.whyus__lesson-n { font: 700 0.85rem/1 var(--font-display); color: var(--accent-solid); letter-spacing: 0.04em; }
.whyus__lesson-t { font: 600 clamp(1.45rem, 1rem + 1.7vw, 2.35rem)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--ink); max-width: 22ch; }
.whyus__lesson-t .fw { transition: color 0.15s linear; }
.whyus__lesson.is-done .whyus__lesson-t .fw:last-child { background: linear-gradient(var(--accent-solid), var(--accent-solid)) 0 92% / 100% 3px no-repeat; }
/* Heading beside the approved "We started in digital work" paragraph */
.whyus__head { display: grid; gap: 1rem 4rem; align-items: start; }
@media (min-width: 56rem) { .whyus__story { padding-top: 0.35rem; } }   /* first line level with the heading */
@media (min-width: 56rem) { .whyus__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.whyus__head h2 { margin: 0; }
.whyus__story { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--ink-muted); max-width: 52ch; }
/* Faint brand mark: flat light pink, bleeding off the left edge behind the lessons */
.whyus__mark {
  position: absolute; z-index: -1; pointer-events: none;
  left: clamp(-16rem, -12vw, -6rem); bottom: clamp(-6rem, -4vw, -2rem);
  width: clamp(24rem, 18rem + 22vw, 42rem); height: auto;
  filter: url(#g360-pink); opacity: 0.08;
}
.whyus__mark-filter { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 40rem) { .whyus__mark { width: 22rem; left: auto; right: -8rem; bottom: -3rem; opacity: 0.06; } }
.band:has(.whyus__mark) { overflow: hidden; }
/* No grid texture on this band (29 Sep) */
.band--plain::before { display: none; }
/* ---------- "Turn it 360" name dial (Home) --------------------------------
   --p goes 0 to 1 as the dial turns 0 to 360 degrees (_wireframe.js "Name
   dial"): colour floods into the logo, the ring and the "360". */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --a { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.section--dial { position: relative; overflow: hidden; }
.section--dial::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40rem 30rem at 72% 50%, rgba(227, 36, 130, 0.12), transparent 70%); opacity: var(--p, 0); }
.section--dial:has(.ndial) { isolation: isolate; }
.ndial { --p: 0; --a: 0deg; display: grid; gap: 2.5rem; align-items: center; }
.ndial.is-easing { transition: --p 0.9s cubic-bezier(0.65, 0, 0.35, 1), --a 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
@media (min-width: 56rem) { .ndial { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
@media (min-width: 56rem) { .ndial--flip .ndial__stage { order: -1; } }   /* About: dial left, words right (Z layout) */
.ndial__copy h2 { margin: 0.4rem 0 0; font-size: clamp(2.6rem, 1.8rem + 3.2vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; }
.ndial__360 { color: color-mix(in srgb, var(--accent-solid) calc(var(--p) * 100%), #a19d9f); }
.ndial__prompt { margin-top: 1.25rem; }
.ndial__reveal { margin-top: 1.5rem; animation: wflip-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ndial__reveal[hidden] { display: none; }
.ndial__meaning { margin: 0; font: 600 clamp(1.25rem, 1rem + 0.8vw, 1.6rem)/1.35 var(--font-display); max-width: 30ch; }
.ndial__meaning-body { margin: 0.75rem 0 1.4rem; max-width: 44ch; color: var(--ink-muted); font-size: 1.02rem; line-height: 1.6; }
.ndial__again { display: block; }
.ndial__meaning--todo { color: var(--accent-solid); font-size: 1.05rem; font-weight: 500; border: 1px dashed var(--accent-solid); border-radius: 12px; padding: 0.9rem 1rem; }
.ndial__again { margin-top: 1rem; padding: 0; border: 0; background: none; font: 600 0.92rem var(--font-body); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ndial__stage { display: grid; justify-items: center; gap: 1rem; }
.ndial__dial { position: relative; width: min(100%, 22rem); aspect-ratio: 1; border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.ndial__dial:active { cursor: grabbing; }
.ndial__dial:focus-visible { outline: 3px solid var(--accent-solid); outline-offset: 8px; }
.ndial__track { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--accent-solid) calc(var(--p) * 360deg), #e2e2df 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px)); }
.ndial__face { position: absolute; inset: 0; width: 100%; height: 100%; }
.ndial__tick { stroke: #c9c9c4; stroke-width: 1; } .ndial__tick--major { stroke: #8d8e8c; stroke-width: 1.6; }
.ndial__deg { fill: #a19d9f; font: 600 7px var(--font-body); }
.ndial__logo { position: absolute; inset: 27%; width: 46%; height: 46%; pointer-events: none;
  transform: rotate(var(--a)); filter: grayscale(calc(1 - var(--p))) opacity(calc(0.4 + 0.6 * var(--p))); }
.ndial__knob { position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
.ndial__knob span { position: absolute; top: -10px; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-solid); box-shadow: 0 6px 16px -6px rgba(227, 36, 130, 0.6); }
.ndial__readout { margin: 0; font: 700 clamp(2rem, 1.6rem + 1.4vw, 2.8rem)/1 var(--font-display); color: color-mix(in srgb, var(--accent-solid) calc(var(--p) * 100%), #a19d9f); font-variant-numeric: tabular-nums; }
.ndial.is-complete .ndial__knob span { animation: ndial-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); background: var(--accent-solid); }
.ndial.is-complete .ndial__dial::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent-solid); animation: ndial-ring 1s ease-out forwards; pointer-events: none; }
@keyframes ndial-pop { 50% { transform: scale(1.35); } }
@keyframes ndial-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.25); } }
/* Dark panel (29 Sep): black with faint rings rippling out from the dial;
   the pink glow grows as the dial turns. */
.section.section--dial { background: #0b0c0b; color: #fff; border-radius: 0; margin-inline: 0; }
/* Drag hint: curved arrow round the top right of the dial, gone once touched */
.ndial__hint { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity 0.4s ease; }
.ndial__hint-arc { fill: none; stroke: #f0439a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 5; }
.ndial__hint-head { fill: none; stroke: #f0439a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ndial__hint-tag rect { fill: #f0439a; }
.ndial__hint-tag text { fill: #fff; font: 700 8px var(--font-body); letter-spacing: 0.04em; }
.ndial.is-touched .ndial__hint { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ndial__hint-arc { animation: ndial-flow 0.9s linear infinite; }
  .ndial__hint { animation: ndial-nudge 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
}
@keyframes ndial-flow { to { stroke-dashoffset: -10; } }
@keyframes ndial-nudge { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } }
/* Three stages that light up as the dial passes them */
.ndial__stages { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.ndial__stages li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem 0.5rem 0.55rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; font-weight: 600; transition: all 0.35s ease; }
.ndial__stages li span { display: grid; place-items: center; min-width: 2.6rem; height: 1.7rem; padding: 0 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); font: 700 0.72rem/1 var(--font-display); transition: all 0.35s ease; }
.ndial__stages li.is-on { color: #fff; border-color: rgba(240, 67, 154, 0.6); background: rgba(227, 36, 130, 0.14); }
.ndial__stages li.is-on span { background: var(--accent-solid); color: #fff; }
.ndial.is-complete .ndial__stages { display: none; }
.section--dial::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at var(--dx, 70%) var(--dy, 50%), rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(48rem 34rem at var(--dx, 70%) var(--dy, 50%), #000 10%, transparent 75%);
  mask-image: radial-gradient(48rem 34rem at var(--dx, 70%) var(--dy, 50%), #000 10%, transparent 75%); }
.section--dial::after { background: radial-gradient(34rem 26rem at var(--dx, 70%) var(--dy, 50%), rgba(227, 36, 130, 0.38), transparent 70%); }
@media (max-width: 55.99rem) { .section--dial { --dx: 50%; --dy: 68%; } }
.section--dial .wf-label { color: rgba(255, 255, 255, 0.5); }
.section--dial .eyebrow { color: #f48dbb; }
.section--dial h2 { color: #fff; }
.section--dial .ndial__360 { color: color-mix(in srgb, #f0439a calc(var(--p) * 100%), #5c5d5b); }
.section--dial .section__intro { color: rgba(255, 255, 255, 0.7); }
.section--dial .ndial__meaning { color: #fff; }
.section--dial .ndial__meaning-body { color: rgba(255, 255, 255, 0.72); }
.section--dial .ndial__again { color: #fff; }
.section--dial .ndial__track { background: conic-gradient(var(--accent-solid) calc(var(--p) * 360deg), #2a2b2a 0); }
.section--dial .ndial__tick { stroke: #3e3f3e; } .section--dial .ndial__tick--major { stroke: #8d8e8c; }
.section--dial .ndial__deg { fill: #8d8e8c; }
.section--dial .ndial__logo { filter: grayscale(calc(1 - var(--p))) brightness(calc(1.6 - 0.6 * var(--p))) opacity(calc(0.55 + 0.45 * var(--p))); }
.section--dial .ndial__readout { color: color-mix(in srgb, #f0439a calc(var(--p) * 100%), #5c5d5b); }
.section--dial .ndial__knob span { border-color: #f0439a; box-shadow: 0 0 0 6px rgba(227, 36, 130, 0.18), 0 8px 18px -6px rgba(227, 36, 130, 0.7); }
.section--dial .ndial__dial:focus-visible { outline-color: #f48dbb; }
@media (prefers-reduced-motion: reduce) {
  .ndial.is-easing { transition: none; }
  .ndial__reveal, .ndial.is-complete .ndial__knob span, .ndial.is-complete .ndial__dial::after { animation: none; }
}
/* Flip cards (WHYUS_FLIP): lesson on the front, our answer on the back */
.wflips { display: grid; gap: 1.25rem; margin-top: 2.5rem; perspective: 1400px; }
@media (min-width: 52rem) { .wflips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 51.99rem) { .wflips .wflip { min-height: 13rem; } }
.wflip { position: relative; display: block; width: 100%; min-height: 17rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wflip:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 4px; border-radius: var(--radius); }
.wflip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1); }
.wflip.is-flipped .wflip__inner { transform: rotateY(180deg); }
.wflip__face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.75rem; border-radius: var(--radius); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.wflip__front { background: var(--ink); color: #fff; box-shadow: 0 24px 44px -30px rgba(5, 6, 5, 0.6); }
.wflip__back { transform: rotateY(180deg); background: var(--paper); border: 6px solid var(--accent-tint); box-shadow: 0 24px 44px -30px rgba(227, 36, 130, 0.45); }
.wflip__n { font: 700 0.85rem/1 var(--font-display); color: #f48dbb; letter-spacing: 0.04em; }
.wflip__lesson { margin-top: 1rem; font: 600 clamp(1.2rem, 0.95rem + 0.75vw, 1.5rem)/1.22 var(--font-display); letter-spacing: -0.01em; }
.wflip__hint { margin-top: auto; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.wflip__hint span { display: inline-block; color: #f48dbb; font-size: 1.1rem; }
.wflip:hover .wflip__hint span { animation: wflip-spin 0.6s ease; }
.wflip__icon { display: flex; color: var(--accent-solid); }
.wflip__icon svg { width: 1.75rem; height: 1.75rem; }
.wflip__title { margin-top: 1rem; font: 600 1.3rem/1.2 var(--font-display); }
.wflip__text { margin-top: 0.5rem; color: var(--ink-muted); font-size: 0.97rem; line-height: 1.55; }
.wflip__back .whyus__tick { position: absolute; top: 1.4rem; right: 1.4rem; }
.wflip.is-flipped .whyus__tick { background: var(--accent-gradient); border-color: transparent; }
.wflip.is-flipped .whyus__tick path { stroke-dashoffset: 0; transition-delay: 0.45s; }
/* a hint of the card lifting on hover, before it is turned */
@media (hover: hover) { .wflip:not(.is-flipped):hover .wflip__inner { transform: rotateY(-8deg) translateY(-4px); } }
.wflips__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; min-height: 3.2rem; }
.wflips__count { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }
.wflips__count b { color: var(--accent-solid); }
.wflips__done { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; animation: wflip-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wflips__done[hidden] { display: none; }
.wflips__done p { margin: 0; font: 600 1.15rem/1.3 var(--font-display); }
@keyframes wflip-spin { to { transform: rotate(360deg); } }
@keyframes wflip-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wflip__inner { transition: none; transform: none !important; }
  .wflip__face { transition: opacity 0.2s ease; }
  .wflip__back { transform: none; opacity: 0; }
  .wflip.is-flipped .wflip__back { opacity: 1; }
  .wflip.is-flipped .wflip__front { opacity: 0; }
  .wflips__done { animation: none; }
}
/* Paired rows: lesson | arrow | promise card, three equal rows */
.whyus.whyus--pairs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2.5rem; }
.whyus__pair { display: grid; gap: 1rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.whyus__pair:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 56rem) {
  .whyus__pair { grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); gap: 2rem; padding: 2rem 0; }
}
.whyus--pairs .whyus__lesson-t { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem); max-width: 24ch; }
.whyus__arrow { display: none; color: #c4c4c1; transition: color 0.3s ease, translate 0.3s ease; }
.whyus__arrow svg { width: 1.6rem; height: 1.6rem; }
@media (min-width: 56rem) { .whyus__arrow { display: inline-flex; } }
.whyus__pair.is-done .whyus__arrow { color: var(--accent-solid); translate: 4px 0; }
.whyus__pair .whyus__promise { margin: 0; padding: 1.25rem 1.4rem; border: 6px solid var(--accent-tint); border-radius: var(--radius); background: var(--paper); box-shadow: 0 16px 34px -26px rgba(5, 6, 5, 0.25); }
.whyus__promise .whyus__pillar-head { display: flex; align-items: center; gap: 0.6rem; }
.whyus__promise .whyus__tick { margin-left: auto; }
.whyus__promise p { margin: 0.4rem 0 0; color: var(--ink-muted); font-size: 0.95rem; }
.whyus__pair.is-done .whyus__lesson-t .fw:last-child { background: linear-gradient(var(--accent-solid), var(--accent-solid)) 0 92% / 100% 3px no-repeat; }
.whyus__pillar-head { width: 100%; }
.whyus__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: auto;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.whyus__tick svg { width: 0.95rem; height: 0.95rem; }
.whyus__tick path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.45s ease 0.1s; }
.whyus__pillar.is-ticked .whyus__tick { background: var(--accent-gradient); border-color: transparent; }
.whyus__pillar.is-ticked .whyus__tick path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .whyus__tick, .whyus__tick path, .tilt-glare { transition: none; }
}

/* ---------- Solution pages: hero labels jump to their card ------------- */
.shero__meta a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--accent-solid), var(--accent-solid)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.35s var(--ease), color 0.2s ease; }
.shero__meta a:hover, .shero__meta a:focus-visible { color: var(--ink); background-size: 100% 1.5px; }
.svc__row { scroll-margin-top: 6.5rem; }
@media (min-width: 60rem) and (min-height: 46rem) {
  .svc--stack .svc__row:nth-child(2) { scroll-margin-top: 7.75rem; }
  .svc--stack .svc__row:nth-child(3) { scroll-margin-top: 9rem; }
}
.svc__row.is-flash { animation: svc-flash 1.4s ease-out; }
@keyframes svc-flash { 0% { box-shadow: 0 0 0 0 rgba(227, 36, 130, 0.55), 0 20px 40px -28px rgba(5, 6, 5, 0.18); } 100% { box-shadow: 0 0 0 18px rgba(227, 36, 130, 0), 0 20px 40px -28px rgba(5, 6, 5, 0.18); } }

/* ---------- Reading progress bar (solution pages) ---------------------- */
.readbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; pointer-events: none; }
.readbar span { display: block; height: 100%; background: var(--accent-gradient); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Page loader (first page of a visit) --------------------------
   Hidden by html.no-loader on later pages and under reduced motion. The
   failsafe animation hides it after 4s even if the script never runs. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #fff;
  clip-path: inset(0 0 0 0);
  animation: loader-failsafe 0s linear 3s forwards;
}
.no-loader .loader { display: none; }
.loader.is-done { clip-path: inset(0 0 100% 0); transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1); }
@keyframes loader-failsafe { to { visibility: hidden; opacity: 0; } }
.loader__inner { display: flex; align-items: center; gap: 0.3rem; transition: opacity 0.3s ease, transform 0.5s ease; }
.loader.is-done .loader__inner { opacity: 0; transform: translateY(-24px); }
/* The G icon file has generous white space around the mark, so it is sized
   a little larger and pulled in towards the wordmark. */
.loader__icon { width: 96px; height: 96px; margin-right: -0.5rem; animation: loader-icon-in 0.25s ease both, loader-spin 0.85s cubic-bezier(0.65, 0, 0.35, 1) 0.1s both; }
@keyframes loader-icon-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes loader-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.loader__logo { width: 225px; height: auto; clip-path: inset(0 100% 0 0); animation: loader-wipe 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards; }
@keyframes loader-wipe { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 30rem) { .loader__icon { width: 72px; height: 72px; } .loader__logo { width: 170px; } }

/* ---------- Home: digital presence (one big screen) ----------------------
   Tabs above a device; each tab plays a short scene on the screen. Base
   styles are each scene's finished state; the motion only runs with
   motion allowed. Screen contents size with the screen (cqi units). */
.dp { display: grid; gap: 1.75rem 4rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "cards"; }
@media (min-width: 60rem) {
  /* screen on the left, words on the right (29 Sep) */
  .dp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "stage head" "stage cards"; align-items: start; }
}
.dp__head { grid-area: head; }
.dp__head h2 { margin-top: 0.4rem; }
.dp__stage { grid-area: stage; align-self: center; min-width: 0; }
.dp__cards { grid-area: cards; display: grid; }
.dp__tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.dp__tabs::-webkit-scrollbar { display: none; }
.dp__tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 600 0.9rem/1 var(--font-body);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.dp__tab span { font: 600 0.72rem/1 var(--font-display); color: var(--ink-muted); }
.dp__tab:hover { border-color: var(--ink); }
.dp__tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.dp__tab.is-active span { color: #f48dbb; }
.dp__tab:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; }
.dp__tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent-gradient); }
.dp.is-auto .dp__tab.is-active::after { animation: dp-progress 6s linear forwards; }
@keyframes dp-progress { to { width: 100%; } }
/* three long service names on one line each, no scrolling (30 Sep) */
@media (min-width: 60rem) { .dp__tabs { gap: 0.4rem; } .dp__tab { flex: 1 1 auto; justify-content: center; gap: 0.4rem; padding: 0 0.6rem; white-space: nowrap; font-size: clamp(0.7rem, 0.05rem + 1.05vw, 0.86rem); } }
@media (min-width: 60rem) and (max-width: 90rem) { .dp__tab span { display: none; } }
.dp__device { padding: 10px; border-radius: 20px; background: var(--ink); box-shadow: 0 34px 70px -34px rgba(5, 6, 5, 0.5); }
.dp__bar { display: flex; align-items: center; gap: 6px; padding: 3px 6px 10px; }
.dp__bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3b3a; }
.dp__bar i:first-child { background: var(--accent-solid); }
.dp__url { flex: 0 1 55%; margin-left: 10px; padding: 5px 12px; border-radius: 999px; background: #242524; color: #a19d9f; font: 500 0.72rem/1 var(--font-body); }
.dp__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 11px; background: #fff; container-type: inline-size; }
.dp-scene { position: absolute; inset: 0; padding: 6cqi 7cqi; font-family: var(--font-body); color: var(--ink); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s 0.35s; }
.dp-scene.is-active { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }

/* 1 - search: the query types in, "Your business" rises to the top */
.dps-q { display: flex; align-items: center; gap: 2cqi; height: 9cqi; padding: 0 3cqi; border: 1px solid #e3e0e1; border-radius: 99px; box-shadow: 0 6px 16px -10px rgba(5, 6, 5, 0.25); font-size: 3.1cqi; }
.dps-q svg { flex: none; width: 3.6cqi; height: 3.6cqi; color: #9d999b; }
.dps-typed { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 60cqi; padding-right: 0.4cqi; border-right: 2px solid var(--accent-solid); }
.dps-list { position: relative; height: 38cqi; margin-top: 4.5cqi; }
.dps-r { position: absolute; left: 0; right: 0; height: 8.4cqi; display: grid; align-content: center; gap: 1cqi; padding: 0 2.6cqi; border: 1.5px solid transparent; border-radius: 1.8cqi; }
.dps-r i { display: block; height: 1.2cqi; border-radius: 99px; background: #ebe9ea; }
.dps-r .l1 { width: 42%; background: #d9d6d7; }
.dps-r .l2 { width: 24%; }
.dps-r .l3 { width: 72%; }
.dps-r--you { top: 0; background: #fdeaf2; border-color: var(--accent-solid); box-shadow: 0 10px 24px -14px rgba(227, 36, 130, 0.55); }
.dps-r--a { top: 9.6cqi; }
.dps-r--b { top: 19.2cqi; }
.dps-r--c { top: 28.8cqi; }
.dps-you-t { font: 700 2.7cqi/1.1 var(--font-display); }
.dps-you-u { font-size: 2cqi; color: var(--accent-solid-strong); }

/* 1 - website (30 Sep): a small site builds itself, then a visitor clicks "Get in touch" */
.dp-scene--site { padding: 0; display: grid; grid-template-rows: auto 1fr auto; }
.dpw-nav { display: flex; align-items: center; gap: 3cqi; padding: 2.6cqi 5cqi; border-bottom: 1px solid #efedee; }
.dpw-logo { display: flex; align-items: center; gap: 1.2cqi; font: 700 2.5cqi/1 var(--font-display); }
.dpw-logo b { width: 3.2cqi; height: 3.2cqi; border-radius: 0.9cqi; background: var(--accent-gradient); }
.dpw-links { display: flex; gap: 2.4cqi; margin-left: auto; }
.dpw-links i { width: 6cqi; height: 1.1cqi; border-radius: 99px; background: #dcd9da; }
.dpw-btn { justify-self: start; display: inline-block; padding: 1.5cqi 3cqi; border-radius: 99px; background: var(--accent-solid); color: #fff; font: 600 2.1cqi/1 var(--font-body); }
.dpw-btn--sm { padding: 1.1cqi 2.2cqi; background: var(--ink); font-size: 1.8cqi; }
.dpw-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4cqi; align-items: center; padding: 3.5cqi 5cqi 2cqi; }
.dpw-copy { display: grid; gap: 1.5cqi; }
.dpw-copy i { display: block; height: 1.3cqi; border-radius: 99px; background: #e6e3e4; }
.dpw-copy i.h1 { height: 3.4cqi; width: 92%; background: var(--ink); }
.dpw-copy i.h2 { height: 3.4cqi; width: 64%; background: var(--accent-solid); margin-bottom: 1cqi; }
.dpw-copy i.short { width: 70%; }
.dpw-copy .dpw-btn { margin-top: 1.6cqi; }
.dpw-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2cqi; background: linear-gradient(180deg, #fdeaf2, #fff6fa); }
.dpw-sun { position: absolute; right: 18%; top: 18%; width: 7cqi; height: 7cqi; border-radius: 50%; background: #f7a8cb; }
.dpw-hill { position: absolute; bottom: -10%; border-radius: 50% 50% 0 0; }
.dpw-hill--a { left: -10%; width: 80%; height: 55%; background: #f48dbb; }
.dpw-hill--b { right: -15%; width: 85%; height: 42%; background: var(--accent-solid); }
.dpw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqi; padding: 1.5cqi 5cqi 4cqi; }
.dpw-card { display: grid; gap: 1.2cqi; padding: 2.2cqi; border: 1px solid #ebe8e9; border-radius: 1.8cqi; }
.dpw-ic { width: 4cqi; height: 4cqi; border-radius: 1cqi; background: #fdeaf2; box-shadow: inset 0 0 0 0.8cqi #fdeaf2, inset 0 0 0 2cqi var(--accent-solid); }
.dpw-card i { display: block; height: 1.1cqi; border-radius: 99px; background: #e6e3e4; }
.dpw-card i.short { width: 60%; }
.dpw-cursor { position: absolute; left: 16cqi; top: 37cqi; width: 4.2cqi; height: 4.2cqi; opacity: 0; pointer-events: none; }
.dpw-cursor svg { width: 100%; height: 100%; display: block; }

/* 2 - AI workflow: a form comes in, AI routes it, a tick lands */
.dpa { display: grid; grid-template-columns: 1.4fr 0.45fr auto 0.45fr 1.25fr; align-items: center; height: 100%; }
.dpa-form { display: grid; gap: 1.8cqi; padding: 3cqi; border: 1px solid #e6e3e4; border-radius: 2cqi; box-shadow: 0 12px 26px -18px rgba(5, 6, 5, 0.35); }
.dpa-form b { font: 700 2.6cqi/1 var(--font-display); }
.dpa-form i { display: block; height: 3.2cqi; border-radius: 1cqi; background: #f1f0f0; }
.dpa-form i.short { width: 55%; background: #f7c9dd; }
.dpa-line { height: 2px; background: repeating-linear-gradient(90deg, var(--accent-solid) 0 1.2cqi, transparent 1.2cqi 2.2cqi); transform-origin: 0 50%; }
.dpa-ai { display: grid; place-items: center; width: 11cqi; height: 11cqi; border-radius: 50%; background: var(--accent-gradient); color: #fff; font: 700 3.4cqi/1 var(--font-display); box-shadow: 0 0 0 2cqi rgba(227, 36, 130, 0.12); }
.dpa-dest { display: grid; gap: 2cqi; }
.dpa-d { display: flex; align-items: center; justify-content: space-between; gap: 1cqi; padding: 2.1cqi 2.4cqi; border: 1px solid #e6e3e4; border-radius: 1.6cqi; font-size: 2.4cqi; font-weight: 600; color: #8f8b8d; }
.dpa-d--pick { border-color: var(--accent-solid); background: #fdeaf2; color: var(--ink); }
.dpa-tick { display: grid; place-items: center; width: 3.4cqi; height: 3.4cqi; border-radius: 50%; background: var(--accent-solid); color: #fff; }
.dpa-tick svg { width: 2.2cqi; height: 2.2cqi; }

/* 3 - content: posts pop onto the month, then one is published */
.dpc { display: grid; grid-template-columns: 1.25fr 1fr; gap: 5cqi; align-items: center; height: 100%; }
.dpc-cal { padding: 2.6cqi; border: 1px solid #e6e3e4; border-radius: 2cqi; }
.dpc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2cqi; font: 700 2.6cqi/1 var(--font-display); }
.dpc-head span { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: var(--accent-solid); }
.dpc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1cqi; }
.dpc-grid span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 0.8cqi; background: #f3f2f2; }
.dpc-grid i { width: 72%; height: 72%; border-radius: 0.6cqi; background: var(--accent-gradient); }
.dpc-card { overflow: hidden; border: 1px solid #e6e3e4; border-radius: 2cqi; box-shadow: 0 14px 30px -20px rgba(5, 6, 5, 0.35); }
.dpc-img { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #fbd3e4, #f6e4ec 60%, #fff); }
.dpc-body { display: grid; gap: 1.4cqi; padding: 2.4cqi; }
.dpc-body i { display: block; height: 1.3cqi; border-radius: 99px; background: #e6e3e4; }
.dpc-body i.short { width: 60%; }
.dpc-chip { justify-self: start; margin-top: 0.4cqi; padding: 0.8cqi 1.6cqi; border-radius: 99px; background: #fdeaf2; color: var(--accent-solid-strong); font-size: 1.9cqi; font-weight: 700; }

/* 4 - smart city: one light fails, is reported, then fixed */
.dpm { display: grid; grid-template-columns: 1.6fr 1fr; gap: 4cqi; align-items: center; height: 100%; }
.dpm-map { position: relative; height: 100%; overflow: hidden; border-radius: 2cqi; background: #f1f0f0; }
.dpm-road { position: absolute; background: #fff; }
.dpm-road--h { left: 0; right: 0; top: 45%; height: 5cqi; transform: translateY(-50%); }
.dpm-road--v { top: 0; bottom: 0; left: 56%; width: 5cqi; transform: translateX(-50%); }
.dpm-l { position: absolute; width: 2.8cqi; height: 2.8cqi; border-radius: 50%; background: #ffc83d; box-shadow: 0 0 0 1.4cqi rgba(255, 200, 61, 0.28); transform: translate(-50%, -50%); }
.dpm-toast { position: relative; min-height: 18cqi; }
.dpm-s { position: absolute; inset: 0; display: grid; align-content: center; grid-template-columns: auto 1fr; gap: 0.6cqi 1.6cqi; padding: 3cqi; border: 1px solid #e6e3e4; border-radius: 2cqi; background: #fff; box-shadow: 0 14px 30px -20px rgba(5, 6, 5, 0.35); }
.dpm-s b { font: 700 2.5cqi/1.2 var(--font-display); }
.dpm-s small { grid-column: 2; font-size: 1.9cqi; color: #8f8b8d; }
.dpm-dot { grid-row: span 2; align-self: center; width: 2.6cqi; height: 2.6cqi; border-radius: 50%; }
.dpm-s--fault { opacity: 0; }
.dpm-s--fault .dpm-dot { background: #e5484d; }
.dpm-s--fixed .dpm-dot { background: #34c170; }

@media (prefers-reduced-motion: no-preference) {
  .dp-scene--1.is-active .dps-typed { animation: dps-type 1.1s steps(16) both; }
  .dp-scene--1.is-active .dps-r--you { animation: dps-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both; }
  .dp-scene--1.is-active :is(.dps-r--a, .dps-r--b, .dps-r--c) { animation: dps-down 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both; }
  @keyframes dps-type { from { max-width: 0; } }
  @keyframes dps-up { from { transform: translateY(28.8cqi); background: #fff; border-color: transparent; box-shadow: none; } }
  @keyframes dps-down { from { transform: translateY(-9.6cqi); } }

  .dp-scene--site.is-active :is(.dpw-nav, .dpw-copy, .dpw-img, .dpw-card) { animation: dpw-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .dp-scene--site.is-active .dpw-copy { animation-delay: 0.3s; }
  .dp-scene--site.is-active .dpw-img { animation-delay: 0.55s; }
  .dp-scene--site.is-active .dpw-card:nth-child(1) { animation-delay: 0.85s; }
  .dp-scene--site.is-active .dpw-card:nth-child(2) { animation-delay: 0.95s; }
  .dp-scene--site.is-active .dpw-card:nth-child(3) { animation-delay: 1.05s; }
  .dp-scene--site.is-active .dpw-cursor { animation: dpw-cursor 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both; }
  .dp-scene--site.is-active .dpw-copy .dpw-btn { animation: dpw-click 0.4s ease-out 2.9s both; }
  @keyframes dpw-in { from { opacity: 0; transform: translateY(3cqi); } }
  @keyframes dpw-cursor { 0% { opacity: 0; transform: translate(40cqi, 12cqi); } 20% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  @keyframes dpw-click { 50% { transform: scale(0.92); box-shadow: 0 0 0 1.4cqi rgba(227, 36, 130, 0.25); } }

  .dp-scene--2.is-active .dpa-form { animation: dpa-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .dp-scene--2.is-active .dpa-line--1 { animation: dpa-draw 0.45s ease-out 0.6s both; }
  .dp-scene--2.is-active .dpa-ai { animation: dpa-think 0.8s ease-in-out 1s both; }
  .dp-scene--2.is-active .dpa-line--2 { animation: dpa-draw 0.45s ease-out 1.7s both; }
  .dp-scene--2.is-active .dpa-d--pick { animation: dpa-pick 0.5s ease-out 2.1s both; }
  .dp-scene--2.is-active .dpa-tick { animation: dpa-tick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s both; }
  @keyframes dpa-in { from { opacity: 0; transform: translateX(-8cqi); } }
  @keyframes dpa-draw { from { transform: scaleX(0); } }
  @keyframes dpa-think { 0% { transform: scale(0.6); opacity: 0.4; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
  @keyframes dpa-pick { from { border-color: #e6e3e4; background: #fff; color: #8f8b8d; } }
  @keyframes dpa-tick { from { transform: scale(0); } }

  .dp-scene--3.is-active .dpc-grid i { animation: dpc-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .dp-scene--3.is-active .dpc-grid span:nth-child(4) i { animation-delay: 0.3s; }
  .dp-scene--3.is-active .dpc-grid span:nth-child(10) i { animation-delay: 0.7s; }
  .dp-scene--3.is-active .dpc-grid span:nth-child(18) i { animation-delay: 1.1s; }
  .dp-scene--3.is-active .dpc-grid span:nth-child(25) i { animation-delay: 1.5s; }
  .dp-scene--3.is-active .dpc-card { animation: dpc-card 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2s both; }
  .dp-scene--3.is-active .dpc-chip { animation: dpa-tick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 2.6s both; }
  @keyframes dpc-pop { from { transform: scale(0); } }
  @keyframes dpc-card { from { opacity: 0; transform: translateY(5cqi); } }

  .dp-scene--4.is-active .dpm-l--fault { animation: dpm-fault 3.6s linear both; }
  .dp-scene--4.is-active .dpm-s--fault { animation: dpm-show-fault 3.6s linear both; }
  .dp-scene--4.is-active .dpm-s--fixed { animation: dpm-show-fixed 3.6s linear both; }
  @keyframes dpm-fault {
    0%, 18% { background: #ffc83d; box-shadow: 0 0 0 1.4cqi rgba(255, 200, 61, 0.28); }
    22%, 62% { background: #e5484d; box-shadow: 0 0 0 2.2cqi rgba(229, 72, 77, 0.25); }
    68%, 100% { background: #ffc83d; box-shadow: 0 0 0 1.4cqi rgba(255, 200, 61, 0.28); }
  }
  @keyframes dpm-show-fault { 0%, 22% { opacity: 0; transform: translateY(2cqi); } 28%, 62% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; } }
  @keyframes dpm-show-fixed { 0%, 66% { opacity: 0; transform: translateY(2cqi); } 72%, 100% { opacity: 1; transform: none; } }
}

/* Cards beside the device: one at a time once JS runs (all stack without it). */
.dp__card {
  grid-area: 1 / 1;
  padding: 1.6rem 1.6rem 1.4rem;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(5, 6, 5, 0.03), 0 18px 40px -26px rgba(5, 6, 5, 0.3);
}
.dp:not(.is-js) .dp__card { grid-area: auto; }
.dp:not(.is-js) .dp__cards { gap: 1rem; }
.dp.is-js .dp__card { transition: opacity 0.35s ease, translate 0.45s var(--ease); }
.dp.is-js .dp__card:not(.is-active) { opacity: 0; translate: 0 10px; visibility: hidden; pointer-events: none; }
.dp__kicker { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); }
.dp__kicker span { display: grid; place-items: center; min-width: 2rem; height: 1.6rem; padding: 0 0.45rem; border-radius: 999px; background: var(--accent-tint); color: var(--accent-solid-strong); font-family: var(--font-display); }
.dp__card h3 { margin: 0 0 0.5rem; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; }
.dp__card > p:not(.dp__kicker) { margin: 0; color: var(--ink-muted); line-height: 1.6; }
.dp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.dp__tag { font-size: 0.85rem; font-weight: 600; }
.dp__more { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; font-weight: 600; font-size: 0.92rem; color: var(--accent-solid-strong); text-decoration: none; }
.dp__more span { transition: translate 0.25s var(--ease); }
.dp__more:hover span { translate: 3px 0; }
@media (max-width: 40rem) { .dp__card { padding: 1.3rem 1.25rem 1.1rem; } .dp__device { padding: 7px; border-radius: 16px; } .dp__bar { padding-bottom: 7px; } }
@media (prefers-reduced-motion: reduce) { .dp.is-js .dp__card, .dp-scene, .dp__tab { transition: 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));
}

/* ---------- Phone / tablet breathing room (<=48rem) -------------------
   Measured at 375px before this: 13px heading-to-text, 16-20px between
   stacked cards, 24px card padding and ~62px visible above each heading
   (82px padding minus the 20px sheet tuck). Desktop is untouched. */
@media (max-width: 48rem) {
  :root { --section-pad: 6rem; }
  h2 { margin-bottom: 1rem; }
  .section__intro { margin-top: 0; }
  .cats, .who, .svc, .donow-strip { gap: 1.5rem; }
  .deliverv { gap: 2.5rem; }
  .deliverv__item:not(:last-child)::before { height: calc(100% + 2.5rem); }
  .deliverv__card { padding: 1.75rem; }
  .who__card { padding: 1.75rem; }
  .faq__q { padding-block: 1.4rem; }
  /* Left-align the "How we work" heading on phones: it sits above
     left-aligned steps, and wrapped centred text reads raggedly. */
  .steps4__head--center { text-align: left; margin-inline: 0; }
  .steps4__head--center .section__intro { margin: 1rem 0 0; }
}

/* ---------- Smart safe city (home, 30 Sep) --------------------------------
   Below Digital presence, laid out like the old town map: heading and card on
   the left, the town with four numbered pins on the right. Every device links
   to the data centre. Tap a pin (or the drawing) and that part lights up in
   pink; nothing moves on its own. The Day / Night switch turns the whole
   section dark, with the traffic lights, lamps and windows glowing. */
.section.section--city { transition: background-color 0.7s ease, color 0.7s ease; }
.cn { display: grid; gap: 1.5rem 3rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "cards"; }
@media (min-width: 60rem) {
  .cn { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "head head" "cards map"; align-items: center; }
}
.cn__head { grid-area: head; }
.cn__head h2 { margin-top: 0.4rem; }
.cn__map { grid-area: map; position: relative; align-self: center; width: 100%; justify-self: center; padding-top: 1rem; }
.cn__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cn__cards { grid-area: cards; display: grid; }
.cn__card { grid-area: 1 / 1; }
.cn:not(.is-js) .cn__card { grid-area: auto; }
.cn:not(.is-js) .cn__cards { gap: 1rem; }
.cn.is-js .cn__card { transition: opacity 0.35s ease, translate 0.45s var(--ease), background 0.7s ease; }
.cn.is-js .cn__card:not(.is-active) { opacity: 0; translate: 0 10px; visibility: hidden; pointer-events: none; }

/* pins: 44px, anchored at their bottom tip */
.cn__pin { position: absolute; width: 44px; height: 44px; margin: -52px 0 0 -22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50% 50% 50% 4px; rotate: -45deg; background: #fff; color: var(--accent-solid-strong); box-shadow: 0 0 0 2px var(--accent-solid), 0 10px 22px -10px rgba(227, 36, 130, 0.6); font: 600 0.8rem/1 var(--font-display); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, translate 0.35s var(--ease-back), scale 0.35s var(--ease-back); }
.cn__pin span { rotate: 45deg; }
@media (hover: hover) { .cn__pin:hover { translate: 0 -3px; } }
.cn__pin.is-active { background: var(--accent-gradient); color: #fff; translate: 0 -3px; scale: 1.08; }
.cn__pin:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 40rem) {
  .cn__pin { width: 38px; height: 38px; margin: -46px 0 0 -19px; font-size: 0.72rem; }
  .cn__pin::before { content: ""; position: absolute; inset: -5px; }
}

/* day / night switch, top right of the town */
.cn__time { position: absolute; top: 0; right: 0; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1rem 0 0.8rem; border: 0; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(5, 6, 5, 0.08), 0 10px 24px -14px rgba(5, 6, 5, 0.4); font: 600 0.82rem/1 var(--font-body); cursor: pointer; transition: background 0.3s ease, color 0.3s ease; }
.cn__time:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; }
.cn__time-ico { display: grid; }
.cn__time-ico svg { width: 18px; height: 18px; }
.cn__time-ico--sun { display: none; }
@media (max-width: 40rem) { .cn__map { padding-top: 3.5rem; } .cn__time { min-height: 40px; padding: 0 0.8rem 0 0.65rem; font-size: 0.75rem; } }

/* the town by day: greys with pink kept for the picked part */
.cn .tm-ground { fill: #fff; }
.cn .tm-slab-l { fill: #ebeaea; }
.cn .tm-slab-r { fill: #dddbdc; }
.cn .tm-road { fill: #eceaeb; }
.cn .tm-dash { stroke: #fff; stroke-width: 2; stroke-dasharray: 7 7; stroke-linecap: round; }
.cn .tm-zebra { fill: #fff; }
.cn .tm-park { fill: #eef3ee; }
.cn .tm-top { fill: #fff; stroke: #e2e0e1; stroke-width: 0.8; stroke-linejoin: round; }
.cn .tm-dc-top { fill: #f9f9f9; }
.cn .tm-left { fill: #f1f0f0; }
.cn .tm-right { fill: #e0dedf; }
.cn .tm-win--left { fill: #d8d5d6; }
.cn .tm-win--right { fill: #cbc7c9; }
.cn .tm-vent { fill: #d4d1d2; }
.cn .tm-vent--r { fill: #c8c4c6; }
.cn .tm-shadow { fill: rgba(5, 6, 5, 0.07); }
.cn .tm-trunk { stroke: #b3afb1; stroke-width: 2; }
.cn .tm-tree { fill: #d3e0d4; }
.cn .tm-tree-hi { fill: #e3ece3; }
.cn .tm-pole { stroke: #9d999b; stroke-width: 2; stroke-linecap: round; }
.cn .tm-lamp { fill: #7f777b; }
.cn .tm-glow { fill: #ffe9a6; opacity: 0; }
.cn .tm-car-top { fill: #4a4b4a; }
.cn .tm-car-l { fill: #2f302f; }
.cn .tm-car-r { fill: #232423; }
.cn .tm-car2-top { fill: #d6d4d5; }
.cn .tm-car2-l { fill: #c2bfc0; }
.cn .tm-car2-r { fill: #b1adaf; }
.cn .tm-cam-top { fill: #6d6569; }
.cn .tm-cam-l { fill: #544d51; }
.cn .tm-cam-r { fill: #443e41; }
.cn .tm-led { fill: #c9ddd0; }
.cn-lens { fill: #f48dbb; }
.cn-cone { fill: var(--accent-solid); opacity: 0; transition: opacity 0.4s ease; }
.cn-mast { stroke: #9d999b; stroke-width: 2.5; stroke-linecap: round; }
.cn-sig { fill: #d4d1d2; }
.cn-sig--grn { fill: #34c170; }
.cn .tm-beam { fill: var(--accent-solid); opacity: 0; transition: opacity 0.4s ease; }
.cn .tm-flash { display: none; }
.cn-ticket { opacity: 0; transition: opacity 0.4s ease; }
.cn-ticket rect { fill: #fff; stroke: var(--accent-solid); stroke-width: 1.5; }
.cn-ticket path { stroke: var(--accent-solid); stroke-width: 1.6; stroke-linecap: round; fill: none; }

/* links to the data centre: faint dashes, solid pink for the picked part */
.cn-link { fill: none; stroke: #e8a9c6; stroke-width: 1.3; stroke-dasharray: 3 5; transition: stroke 0.4s ease, stroke-width 0.4s ease; }
.cn-flow { display: none; }
.cn-node { fill: #e8a9c6; transition: fill 0.4s ease; }
.cn-link.is-lit { stroke: var(--accent-solid); stroke-width: 2; stroke-dasharray: none; }
.cn-node.is-lit { fill: var(--accent-solid); }
.cn-hub__dot { fill: var(--accent-solid); stroke: #fff; stroke-width: 2; }
.cn-hub__ring { fill: rgba(227, 36, 130, 0.12); stroke: none; }
.cn-hub__ring--2 { display: none; }

/* the picked part */
.cn .tm-zone :is(.tm-top, .tm-left, .tm-right, .tm-win, .tm-vent, .tm-glow, .tm-led, .cn-sig) { transition: fill 0.45s ease, opacity 0.45s ease; }
.cn .tm-zone.is-lit .tm-top { fill: #fde8f1; stroke: #f4c6da; }
.cn .tm-zone.is-lit .tm-left { fill: #f9dbe8; }
.cn .tm-zone.is-lit .tm-right { fill: #f0c9da; }
.cn .tm-zone.is-lit .tm-win--left, .cn .tm-zone.is-lit .tm-vent { fill: #f2c3d7; }
.cn .tm-zone.is-lit .tm-win--right, .cn .tm-zone.is-lit .tm-vent--r { fill: #e8b3ca; }
.cn .tm-zone.is-lit :is(.tm-cam-top, .tm-car-top) { fill: #f48dbb; }
.cn .tm-zone.is-lit :is(.tm-cam-l, .tm-car-l) { fill: #e0619f; }
.cn .tm-zone.is-lit :is(.tm-cam-r, .tm-car-r) { fill: #c24785; }
.cn .tm-zone.is-lit .cn-cone { opacity: 0.16; }
.cn .tm-zone.is-lit .tm-beam { opacity: 0.2; }
.cn .tm-zone.is-lit .cn-ticket { opacity: 1; }
.cn .tm-zone.is-lit .tm-glow { opacity: 0.9; }
.cn .tm-zone.is-lit .tm-glow--fault { opacity: 0; }
.cn .tm-zone.is-lit .tm-led { fill: #34c170; }
.cn .tm-zone.is-lit .cn-sig--red { fill: #ff5a5f; }
.cn .tm-zone.is-lit .cn-sig--grn { fill: #d4d1d2; }
.cn .tm-halo { fill: url(#tm-halo-grad); opacity: 0; transition: opacity 0.5s ease; }
.cn .tm-zone.is-lit .tm-halo { opacity: 1; }
.cn .tm-hit { cursor: pointer; transition: transform 0.4s var(--ease); }
.cn .tm-hit.is-lit { transform: translateY(-4px); }
@media (hover: hover) { .cn .tm-hit:hover { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .cn .tm-hit, .cn .tm-zone *, .cn__pin, .cn.is-js .cn__card { transition: none; } }
.cn-tag rect { fill: var(--ink); }
.cn-tag text { fill: #fff; font: 600 14px var(--font-body); }
.cn-tag__ico { fill: none; stroke: #f48dbb; stroke-width: 1.8; stroke-linejoin: round; }
.cn-tag__tail { fill: var(--ink); }
.cn-bloom { opacity: 0; transition: opacity 0.6s ease; }
.cn-bloom--red { fill: #ff5a5f; }
.cn-bloom--amb { fill: #ffc83d; }
.cn-bloom--grn { fill: #34c170; }

/* ---- night: the whole section goes dark and the lights pop ---- */
.section--city.is-night { background-color: #0b0c0b; color: #fff; }
.section--city.is-night h2 { color: #fff; }
.section--city.is-night .cn__card { background: #17181a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.section--city.is-night .cn__card h3, .section--city.is-night .dp__tag { color: #fff; }
.section--city.is-night .cn__card .dp__kicker { color: rgba(255, 255, 255, 0.65); }
.section--city.is-night .cn__card .dp__kicker span { background: rgba(227, 36, 130, 0.2); color: #f48dbb; }
.section--city.is-night .dp__foot { border-top-color: rgba(255, 255, 255, 0.12); }
.section--city.is-night .dp__more { color: #f48dbb; }
.section--city.is-night .cn__pin:not(.is-active) { background: #1d1e22; color: #f48dbb; }
.section--city.is-night .eyebrow { color: #f48dbb; }
.section--city.is-night .section__intro, .section--city.is-night .cn__card > p:not(.dp__kicker) { color: rgba(255, 255, 255, 0.72); }
.section--city.is-night .cn__time { background: #1d1e22; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.section--city.is-night .cn__time-ico--moon { display: none; }
.section--city.is-night .cn__time-ico--sun { display: grid; color: #ffd66e; }
.cn__svg :is(polygon, ellipse, circle, line, path, rect) { transition: fill 0.7s ease, stroke 0.7s ease, opacity 0.7s ease; }
.is-night .cn .tm-ground { fill: #2a2b30; }
.is-night .cn .tm-slab-l { fill: #1b1c20; }
.is-night .cn .tm-slab-r { fill: #131417; }
.is-night .cn .tm-road { fill: #3a3b41; }
.is-night .cn .tm-dash { stroke: #5c5d63; }
.is-night .cn .tm-zebra { fill: #55565c; }
.is-night .cn .tm-park { fill: #28332d; }
.is-night .cn .tm-top { fill: #45464d; stroke: #55565d; }
.is-night .cn .tm-dc-top { fill: #3e3f46; }
.is-night .cn .tm-left { fill: #36373d; }
.is-night .cn .tm-right { fill: #2b2c31; }
.is-night .cn .tm-win--left { fill: #ffd27a; }
.is-night .cn .tm-win--right { fill: #efbd5c; }
.is-night .cn .tm-win:nth-of-type(3n) { fill: #4a4b52; }
.is-night .cn .tm-vent { fill: #55565d; }
.is-night .cn .tm-vent--r { fill: #4a4b52; }
.is-night .cn .tm-tree { fill: #3c5646; }
.is-night .cn .tm-tree-hi { fill: #4a6a55; }
.is-night .cn .tm-trunk, .is-night .cn .tm-pole, .is-night .cn .cn-mast { stroke: #6e6f76; }
.is-night .cn .tm-shadow { fill: rgba(0, 0, 0, 0.3); }
.is-night .cn .tm-lamp { fill: #fff1c2; }
.is-night .cn .tm-glow { fill: #ffd66e; opacity: 0.85; }
.is-night .cn .tm-zone.is-lit .tm-glow--fault { opacity: 0; }
.is-night .cn .tm-car2-top { fill: #7a7b82; }
.is-night .cn .tm-car2-l { fill: #606168; }
.is-night .cn .tm-car2-r { fill: #515258; }
.is-night .cn .tm-led { fill: #4ade80; }
.is-night .cn .cn-sig { fill: #2a2b30; }
.is-night .cn .cn-sig--grn { fill: #6dffa6; }
.is-night .cn .cn-bloom--grn { opacity: 0.95; }
.is-night .cn .tm-zone.is-lit .cn-sig--red { fill: #ff8a8d; }
.is-night .cn .tm-zone.is-lit .cn-sig--grn { fill: #2a2b30; }
.is-night .cn .tm-zone.is-lit .cn-bloom--red { opacity: 0.95; }
.is-night .cn .tm-zone.is-lit .cn-bloom--grn { opacity: 0; }
.is-night .cn .cn-link { stroke: rgba(244, 141, 187, 0.4); }
.is-night .cn .cn-link.is-lit { stroke: #f48dbb; }
.is-night .cn .cn-node { fill: rgba(244, 141, 187, 0.6); }
.is-night .cn .cn-node.is-lit { fill: #f48dbb; }
.is-night .cn .tm-zone.is-lit .tm-top { fill: #7a3a58; stroke: #a0507a; }
.is-night .cn .tm-zone.is-lit .tm-left { fill: #66304a; }
.is-night .cn .tm-zone.is-lit .tm-right { fill: #55283e; }
.is-night .cn .tm-zone.is-lit .tm-win--left { fill: #ffd27a; }
.is-night .cn .tm-zone.is-lit .tm-win--right { fill: #efbd5c; }
.is-night .cn .cn-tag rect, .is-night .cn .cn-tag__tail { fill: #fff; }
.is-night .cn .cn-tag text { fill: var(--ink); }
.is-night .cn .cn-tag__ico { stroke: var(--accent-solid); }
@media (prefers-reduced-motion: reduce) { .section.section--city, .cn__svg * { transition: none !important; } }
.cn-pool { fill: #ffd66e; opacity: 0; transition: opacity 0.7s ease; }
.is-night .cn .cn-pool { opacity: 0.28; }
.is-night .cn .tm-zone.is-lit .cn-pool--fault { opacity: 0; }
/* at night the signal boxes stay dark so their lamps stand out */
.is-night .cn .tm-zone.is-lit[data-zone="2"] :is(.tm-cam-top, .tm-cam-l, .tm-cam-r) { fill: #1d1e22; }
.is-night .cn .cn-bloom--grn { opacity: 1; }
/* the dome over the town: smart enforcement covering everything */
.cn-dome, .cn-dome__back, .cn-tag { pointer-events: none; }
.cn-dome__glass { fill: url(#cn-dome-grad); }
.cn-dome__edge { fill: none; stroke: #f0a3c6; stroke-width: 1.6; }
.cn-dome__rim { fill: none; stroke: #f0a3c6; stroke-width: 1.4; }
.cn-dome__back { fill: none; stroke: #f4c6da; stroke-width: 1.2; stroke-dasharray: 4 6; }
.cn-dome__band { fill: none; stroke: #f4c6da; stroke-width: 1; stroke-dasharray: 2 6; }
.cn-dome__shine { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: 0.8; }
.cn-dome.is-lit .cn-dome__edge, .cn-dome.is-lit .cn-dome__rim { stroke: var(--accent-solid); stroke-width: 2; }
.is-night .cn .cn-dome__edge, .is-night .cn .cn-dome__rim { stroke: rgba(244, 141, 187, 0.75); }
.is-night .cn .cn-dome__back, .is-night .cn .cn-dome__band { stroke: rgba(244, 141, 187, 0.35); }
.is-night .cn .cn-dome__shine { stroke: rgba(255, 255, 255, 0.25); }
/* building detail (30 Sep): shopfronts, floor bands, glass towers, roofs */
.cn .cn-walk { fill: #f6f5f5; }
.cn .cn-path { fill: #f4f1ea; }
.cn .cn-shop--l { fill: #cfe0e6; }
.cn .cn-shop--r { fill: #bcd0d7; }
.cn .cn-door { fill: #6d6569; }
.cn .cn-band--l { fill: #e8e5e6; }
.cn .cn-band--r { fill: #d6d3d4; }
.cn .cn-glass.tm-win--left { fill: #dbe7ec; }
.cn .cn-glass.tm-win--right { fill: #c6d6dc; }
.cn .cn-mull { stroke: #fff; stroke-width: 1; opacity: 0.8; }
.cn .cn-roof { fill: #f1f0f0; }
.cn .cn-unit-top { fill: #f4f3f3; }
.cn .tm-zone.is-lit .cn-shop--l, .cn .tm-zone.is-lit .cn-glass.tm-win--left { fill: #f6cfe0; }
.cn .tm-zone.is-lit .cn-shop--r, .cn .tm-zone.is-lit .cn-glass.tm-win--right { fill: #eab8ce; }
.cn .tm-zone.is-lit .cn-roof { fill: #fbdcea; }
.is-night .cn .cn-walk { fill: #33343a; }
.is-night .cn .cn-path { fill: #3a3a36; }
.is-night .cn .cn-shop--l { fill: #ffe3a3; }
.is-night .cn .cn-shop--r { fill: #f5cf7e; }
.is-night .cn .cn-door { fill: #2a2b30; }
.is-night .cn .cn-band--l, .is-night .cn .cn-band--r { fill: #2b2c31; }
.is-night .cn .cn-glass.tm-win--left { fill: #3c4a5a; }
.is-night .cn .cn-glass.tm-win--right { fill: #33404e; }
.is-night .cn .cn-mull { stroke: #ffd27a; opacity: 0.45; }
.is-night .cn .cn-roof { fill: #3a3b41; }
.is-night .cn .hs-car-top { fill: #8a8b92; }
.is-night .cn .hs-car-l { fill: #6a6b72; }
.is-night .cn .hs-car-r { fill: #57585e; }
.is-night .cn .hs-car-head { fill: #fff3b0; }
/* day with more contrast (30 Sep: the first day palette felt too light) */
.cn .tm-ground { fill: #f1f0f0; }
.cn .tm-slab-l { fill: #d9d6d7; }
.cn .tm-slab-r { fill: #c4c0c2; }
.cn .tm-road { fill: #d6d3d4; }
.cn .cn-walk { fill: #e8e6e7; }
.cn .tm-zebra { fill: #f7f6f6; }
.cn .tm-park { fill: #d9e8da; }
.cn .tm-tree { fill: #a9c9ad; }
.cn .tm-tree-hi { fill: #c4dcc6; }
.cn .tm-top { fill: #fbfbfb; stroke: #d6d3d4; }
.cn .tm-dc-top { fill: #f4f3f3; }
.cn .tm-left { fill: #e3e0e1; }
.cn .tm-right { fill: #c6c2c4; }
.cn .tm-win--left { fill: #b4c8d1; }
.cn .tm-win--right { fill: #9cb3be; }
.cn .cn-glass.tm-win--left { fill: #bfd3db; }
.cn .cn-glass.tm-win--right { fill: #a3bac4; }
.cn .cn-shop--l { fill: #a9c4cf; }
.cn .cn-shop--r { fill: #90adba; }
.cn .cn-band--l { fill: #d2cfd0; }
.cn .cn-band--r { fill: #b3afb1; }
.cn .cn-roof { fill: #e9e7e8; }
.cn .tm-vent { fill: #bdb9bb; }
.cn .tm-vent--r { fill: #aaa6a8; }
.cn .cn-dome__edge, .cn .cn-dome__rim { stroke: #e37fb0; }
.cn .cn-dome__back, .cn .cn-dome__band { stroke: #efb2cd; }
.cn .cn-link { stroke: #e58cb5; }
.cn .tm-halo { opacity: 0; }
.cn .tm-zone.is-lit .tm-halo { opacity: 0.6; }
.is-night .cn .tm-zone.is-lit .tm-halo { opacity: 1; }
/* ---- the town moves (30 Sep): cars drive through, data pulses along the
   links to the data centre, the traffic lights cycle, the data centre's
   lights blink and the dome shimmers. Paused off screen (.is-paused) and
   still under reduced motion. ---- */
.cn-flow { display: block; fill: none; stroke: var(--accent-solid); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 5 95; opacity: 0.8; }
.cn-flow.is-lit { stroke-width: 3.2; opacity: 1; }
.is-night .cn .cn-flow { stroke: #ffd1e6; }
.cn-hub__pulse { fill: none; stroke: var(--accent-solid); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .cn-flow { animation: cn-flow 3.2s linear infinite; }
  .cn-drive { animation: cn-drive 11s linear infinite; }
  .cn-drive--2 { animation-delay: -5.5s; }
  .cn .cn-sig--red { animation: cn-red 6s steps(1) infinite; }
  .cn .cn-sig--amb { animation: cn-amb 6s steps(1) infinite; }
  .cn .cn-sig--grn { animation: cn-grn 6s steps(1) infinite; }
  .cn .cn-bloom--red { animation: cn-bred 6s steps(1) infinite; }
  .cn .cn-bloom--grn { animation: cn-bgrn 6s steps(1) infinite; }
  .cn .tm-led { animation: cn-led 1.6s steps(1) infinite; }
  .cn .tm-led:nth-child(3n) { animation-delay: -0.5s; }
  .cn .tm-led:nth-child(3n + 1) { animation-delay: -1.1s; }
  .cn-hub__pulse { animation: cn-hub 2.6s ease-out infinite; }
  .cn-dome__shine { animation: cn-shine 5s ease-in-out infinite; }
  .cn .tm-zone.is-lit .tm-glow--fault { animation: cn-fault 4.5s linear infinite; }
  .cn.is-paused :is(.cn-flow, .cn-drive, .cn-sig, .cn-bloom, .tm-led, .cn-hub__pulse, .cn-dome__shine, .tm-glow) { animation-play-state: paused; }
}
@keyframes cn-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes cn-drive { 0% { transform: translate(0, 0); opacity: 0; } 4%, 90% { opacity: 1; } 100% { transform: translate(416px, 240px); opacity: 0; } }
@keyframes cn-red { 0%, 44% { fill: #ff5a5f; } 45%, 100% { fill: #d4d1d2; } }
@keyframes cn-amb { 0%, 44% { fill: #d4d1d2; } 45%, 54% { fill: #ffc83d; } 55%, 100% { fill: #d4d1d2; } }
@keyframes cn-grn { 0%, 54% { fill: #d4d1d2; } 55%, 100% { fill: #34c170; } }
@keyframes cn-bred { 0%, 44% { opacity: 0.9; } 45%, 100% { opacity: 0; } }
@keyframes cn-bgrn { 0%, 54% { opacity: 0; } 55%, 100% { opacity: 0.9; } }
@keyframes cn-led { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.3; } }
@keyframes cn-hub { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes cn-shine { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }
@keyframes cn-fault { 0%, 14% { opacity: 0.9; } 16% { opacity: 0.1; } 19% { opacity: 0.8; } 22%, 52% { opacity: 0; } 58%, 100% { opacity: 0.9; } }
/* blooms only show at night; by day the cycle is carried by the lamps */
.section--city:not(.is-night) .cn-bloom { visibility: hidden; }
.is-night .cn .cn-sig--red, .is-night .cn .cn-sig--amb, .is-night .cn .cn-sig--grn { animation-name: cn-red-n; }
.is-night .cn .cn-sig--amb { animation-name: cn-amb-n; }
.is-night .cn .cn-sig--grn { animation-name: cn-grn-n; }
@keyframes cn-red-n { 0%, 44% { fill: #ff8a8d; } 45%, 100% { fill: #2a2b30; } }
@keyframes cn-amb-n { 0%, 44% { fill: #2a2b30; } 45%, 54% { fill: #ffd66e; } 55%, 100% { fill: #2a2b30; } }
@keyframes cn-grn-n { 0%, 54% { fill: #2a2b30; } 55%, 100% { fill: #6dffa6; } }
/* heading centred above; card and town side by side under it */
/* centred from tablet up; left-aligned on phones like the other sections */
@media (min-width: 40.01rem) { .cn__head { text-align: center; max-width: 44rem; margin-inline: auto; } .cn__head .section__intro { margin-inline: auto; } }
@media (min-width: 60rem) { .cn__cards { align-self: center; } }
/* phones: the dome's name sits above the town as a badge, clear of the pins */
.cn__tag-m { display: none; }
@media (max-width: 40rem) {
  .cn .cn-tag { display: none; }
  .cn__tag-m { display: flex; align-items: center; gap: 0.4rem; width: max-content; margin: 0 auto 0.75rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--ink); color: #fff; font: 600 0.8rem/1 var(--font-body); }
  .cn__tag-m svg { width: 15px; height: 15px; color: #f48dbb; }
  .section--city.is-night .cn__tag-m { background: #fff; color: var(--ink); }
  .section--city.is-night .cn__tag-m svg { color: var(--accent-solid); }
}
.cn__town { position: relative; }

/* ---------- Digital presence: Before / After (30 Sep) ----------------------
   A switch in the browser bar swaps each tab's screen for how that topic
   often looks today: a dated website, requests re-typed from an inbox, an
   empty content calendar. */
/* the switch sits under the screen: a big two-way toggle with a sliding thumb */
.dp__ba { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 1.1rem; }
.dp__ba-hint { font-size: 0.88rem; font-weight: 600; color: var(--ink-muted); }
.dp__ba-track { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 12px 26px -18px rgba(5, 6, 5, 0.4); }
.dp__ba-track button { position: relative; z-index: 1; min-height: 44px; min-width: 6.5rem; padding: 0 1.3rem; border: 0; border-radius: 999px; background: none; color: var(--ink-muted); font: 700 0.95rem/1 var(--font-body); cursor: pointer; transition: color 0.3s ease; }
.dp__ba-track button[aria-pressed="true"] { color: #fff; }
.dp__ba-track button:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.dp__ba-thumb { position: absolute; top: 4px; bottom: 4px; left: 50%; width: calc(50% - 4px); border-radius: 999px; background: var(--accent-gradient); box-shadow: 0 8px 18px -8px rgba(227, 36, 130, 0.7); transition: left 0.35s var(--ease), background 0.35s ease; }
.dp.is-before .dp__ba-thumb { left: 4px; background: #6d6569; box-shadow: 0 8px 18px -8px rgba(5, 6, 5, 0.5); }
/* a label on the screen says which version is showing */
.dp__state { margin-left: auto; padding: 5px 11px; border-radius: 99px; font: 700 0.68rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.dp__state--after { background: var(--accent-solid); color: #fff; }
.dp__state--before { background: #6d6569; color: #fff; display: none; }
.dp.is-before .dp__state--before { display: block; }
.dp.is-before .dp__state--after { display: none; }
.dp.is-before .dp__device { box-shadow: 0 34px 70px -34px rgba(5, 6, 5, 0.5), 0 0 0 3px #b9b5b7; }
@media (prefers-reduced-motion: reduce) { .dp__ba-thumb { transition: none; } }
.dp:not(.is-before) .dp-scene--b, .dp.is-before .dp-scene:not(.dp-scene--b) { display: none; }

/* 1 - the dated website */
.dp-scene--old { padding: 0; display: grid; grid-template-rows: auto 1fr auto; background: #efede4; font-family: "Times New Roman", Times, serif; color: #333; }
.dpo-head { display: grid; justify-items: center; gap: 0.6cqi; padding: 2.4cqi; background: linear-gradient(#7d8a97, #5d6975); color: #fff; }
.dpo-head b { font-size: 4.2cqi; letter-spacing: 0.3em; text-shadow: 1px 1px 0 #222; }
.dpo-head span { font-size: 2.2cqi; font-style: italic; }
.dpo-body { display: grid; grid-template-columns: 22% 1fr; gap: 2cqi; padding: 2.4cqi 3cqi; }
.dpo-nav { display: grid; gap: 1.6cqi; align-content: start; padding: 1.6cqi; background: #dcd8c8; border: 1px solid #b9b4a0; }
.dpo-nav i { display: block; height: 1cqi; width: 80%; background: #2a3fbf; border-bottom: 1px solid #2a3fbf; opacity: 0.75; }
.dpo-main { display: grid; grid-template-columns: 40% 1fr; gap: 2cqi; align-items: start; }
.dpo-img { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 2px dashed #b0aa94; background: #e4e0d0; color: #c0392b; font: 700 6cqi/1 Arial, sans-serif; }
.dpo-text { display: grid; gap: 1cqi; }
.dpo-text i { display: block; height: 0.8cqi; background: #9a968a; }
.dpo-text i:nth-child(3n) { width: 70%; }
.dpo-text i:nth-child(4n) { width: 85%; }
.dpo-foot { display: flex; justify-content: space-between; align-items: center; padding: 1.4cqi 3cqi; border-top: 1px solid #c9c4b0; font-size: 1.9cqi; color: #6e6a5e; }
.dpo-uc { padding: 0.6cqi 1.4cqi; background: repeating-linear-gradient(45deg, #f2c94c 0 1.2cqi, #333 1.2cqi 2.4cqi); color: #fff; font: 700 1.8cqi/1 Arial, sans-serif; text-shadow: 0 0 3px #000; }

/* 2 - requests re-typed by hand from a crowded inbox */
.dpb { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4cqi; align-items: center; height: 100%; }
.dpi { border: 1px solid #e6e3e4; border-radius: 2cqi; overflow: hidden; }
.dpi-h { display: flex; align-items: center; justify-content: space-between; padding: 2cqi 2.4cqi; background: #f5f4f4; font: 700 2.5cqi/1 var(--font-display); }
.dpi-h span { padding: 0.6cqi 1.3cqi; border-radius: 99px; background: #d9534f; color: #fff; font-size: 1.9cqi; }
.dpi-r { display: grid; gap: 0.9cqi; padding: 1.8cqi 2.4cqi; border-top: 1px solid #efeded; }
.dpi-r b { font-size: 2cqi; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpi-r i { display: block; height: 1cqi; width: 70%; border-radius: 99px; background: #e6e3e4; }
.dpk { position: relative; display: grid; gap: 1.6cqi; }
.dpk-f { display: grid; gap: 1cqi; padding: 1.8cqi 2.2cqi; border: 1px dashed #c9c5c7; border-radius: 1.6cqi; background: #fafafa; }
.dpk-f b { font-size: 2cqi; color: #8f8b8d; }
.dpk-f i { display: block; height: 1.2cqi; border-radius: 99px; background: #e0dddf; }
.dpk-f i.short { width: 55%; }
.dpk-wait { justify-self: end; padding: 0.9cqi 1.8cqi; border-radius: 99px; background: #f3f2f2; color: #8f8b8d; font-size: 1.9cqi; font-weight: 700; }

/* 3 - an empty month and a stale post */
.dpc--old .dpc-head span { background: #c9c5c7; }
.dpc--old .dpc-img { background: linear-gradient(135deg, #dcdadb, #eeeded); filter: grayscale(1); }
.dpc--old .dpc-chip { background: #f3f2f2; color: #8f8b8d; }

@media (prefers-reduced-motion: no-preference) {
  .dp-scene--b.is-active > * { animation: dp-b-in 0.5s ease-out both; }
  @keyframes dp-b-in { from { opacity: 0; transform: translateY(2cqi); } }
}
@media (max-width: 40rem) { .dp__ba-hint { display: none; } }

/* ---------- Home hero: the dial (30 Sep, Nikki) ----------------------------
   The name dial moved up into the hero, on the light background. Three
   service nodes sit on the ring at 120, 240 and 360 degrees and light up as
   the knob passes; at 360 the ring closes: connected end to end. */
@media (min-width: 60rem) {
  .hero--layers:has(.hero__stack--dial) .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; }
}
.hero__stack.hero__stack--dial { position: relative; top: auto; right: auto; width: 100%; max-width: 26rem; margin: 0 auto; pointer-events: auto; opacity: 1; }
.ndial--hero { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.ndial--hero .ndial__dial { width: min(100%, 20rem); }
.ndial--hero .ndial__readout { display: none; }
.ndial--hero .ndial__prompt { margin: 0.5rem 0 0; font-size: 0.98rem; color: var(--ink-muted); }
.ndial--hero .ndial__track { background: conic-gradient(var(--accent-solid) calc(var(--p) * 360deg), #e4e2e3 0); }
.ndial--hero .ndial__logo { filter: grayscale(calc(1 - var(--p))) opacity(calc(0.35 + 0.65 * var(--p))); }
.ndial__nodes { position: absolute; inset: 0; pointer-events: none; }
.ndial__node { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.ndial__node > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; color: #a19d9f; box-shadow: 0 0 0 2px #e4e2e3, 0 8px 18px -10px rgba(5, 6, 5, 0.35); transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, scale 0.35s var(--ease-back); }
.ndial__node svg { width: 20px; height: 20px; }
.ndial__node.is-on > span { background: var(--accent-gradient); color: #fff; box-shadow: 0 0 0 4px rgba(227, 36, 130, 0.18), 0 10px 20px -8px rgba(227, 36, 130, 0.6); scale: 1.08; }
.ndial--hero .ndial__knob span { width: 26px; height: 26px; margin-left: -13px; top: -6px; }
/* the three services as badges; tap one to turn the dial to it */
.ndial__stages--svc { justify-content: center; margin: 0.25rem 0 0; }
.ndial__stages--svc li { padding: 0; border: 0; background: none; }
.ndial__stages--svc button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.4rem 1rem 0.4rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-muted); font: 600 0.9rem/1 var(--font-body); cursor: pointer; transition: all 0.35s ease; }
.ndial__bico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f3f2f2; color: #a19d9f; transition: all 0.35s ease; }
.ndial__bico svg { width: 16px; height: 16px; }
.ndial__stages--svc li.is-on button { border-color: rgba(227, 36, 130, 0.5); color: var(--ink); background: var(--accent-tint); }
.ndial__stages--svc li.is-on .ndial__bico { background: var(--accent-solid); color: #fff; }
.ndial__stages--svc button:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.ndial--hero.is-complete .ndial__stages { display: flex; }
.ndial--hero .ndial__reveal { margin-top: 0.25rem; }
.ndial--hero .ndial__meaning { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: var(--accent-solid-strong); max-width: none; }
.ndial--hero .ndial__again { margin: 0.5rem auto 0; }
.ndial--hero.is-complete .ndial__nodes .ndial__node > span { animation: ndial-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (max-width: 59.99rem) {
  .hero__stack.hero__stack--dial { margin-top: 1rem; }
  .hero__stack--dial .ndial__dial { width: min(78vw, 18rem); }
}
.ndial.ndial--hero { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.ndial--hero .ndial__stage { width: 100%; }
.hero__stack.hero__stack--dial { max-width: 30rem; }
.ndial__node { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.ndial__node svg { width: 18px; height: 18px; }
.ndial__stages--svc { flex-wrap: nowrap; gap: 0.45rem; }
.ndial__stages--svc button { padding: 0.35rem 0.85rem 0.35rem 0.4rem; font-size: 0.85rem; white-space: nowrap; }
.ndial__bico { width: 28px; height: 28px; }
@media (max-width: 26rem) { .ndial__stages--svc { flex-wrap: wrap; } }

/* ---------- Home hero: one line, end to end (1 Oct) ------------------------
   A tangled line pulls straight into a conveyor; a cube rides through the
   four steps and the line closes into a ring (360). Driven by one progress
   value in _wireframe.js ("Hero flow"); without JS it rests on the finished
   state. */
/* stacked (1 Oct): text, buttons, then the journey across the full width */
.hero--layers:has(.hero__stack--flow) .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.hero--layers:has(.hero__stack--flow) .hero__lead { width: 100%; text-align: center; max-width: 52rem; margin-inline: auto; }
.hero--layers:has(.hero__stack--flow) .hero__lead > p { margin-inline: auto; max-width: 40rem; }
.hero--layers:has(.hero__stack--flow) .hero__actions { justify-content: center; }
.hero--layers:has(.hero__stack--flow) .hero__badge { margin-inline: auto; }
.hero__stack.hero__stack--flow { position: relative; top: auto; right: auto; width: 100%; max-width: none; margin: 0 auto; pointer-events: auto; opacity: 1; }
.hflow__stage { position: relative; }
.hflow__svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; cursor: grab; }
.hflow__svg:active { cursor: grabbing; }
.hf-rail { fill: none; stroke: #e4e2e3; stroke-width: 6; stroke-linecap: round; }
.hf-line { fill: none; stroke: var(--accent-solid); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.hf-line--mess { stroke-width: 3; }
.hf-gate__lamp { fill: #e4e2e3; transition: fill 0.3s ease; }
.hf-gate.is-on .hf-gate__lamp { fill: var(--accent-solid); }
.hf-gate.is-done .hf-gate__lamp { fill: #f4a3c7; }
.hf-logo { opacity: 0.25; filter: grayscale(1); transition: opacity 0.5s ease, filter 0.5s ease; }
.hflow.is-closed .hf-logo { opacity: 1; filter: none; }
.hf-node circle { fill: #fff; stroke: #e4e2e3; stroke-width: 2; transition: fill 0.4s ease, stroke 0.4s ease; }
.hf-node svg { color: #a19d9f; transition: color 0.4s ease; }
.hflow.is-closed .hf-node circle { fill: var(--accent-solid); stroke: #fff; }
.hflow.is-closed .hf-node svg { color: #fff; }
/* the cube and its five looks */
.hf-c { opacity: 0; transition: opacity 0.25s ease; }
.hflow[data-look="0"] .hf-c--mess, .hflow[data-look="1"] .hf-c--assess, .hflow[data-look="2"] .hf-c--plan,
.hflow[data-look="3"] .hf-c--build, .hflow[data-look="4"] .hf-c--done { opacity: 1; }
.hf-c--mess polygon { stroke: #fff; stroke-width: 1; }
.hf-c--mess .hf-c__t { fill: #f48dbb; } .hf-c--mess .hf-c__l { fill: #e32482; } .hf-c--mess .hf-c__r { fill: #b81c6a; }
.hf-c--assess .hf-c__t { fill: #f48dbb; } .hf-c--assess .hf-c__l { fill: #e32482; } .hf-c--assess .hf-c__r { fill: #b81c6a; }
.hf-c--plan polygon { fill: rgba(227, 36, 130, 0.06); stroke: var(--accent-solid); stroke-width: 1.4; stroke-dasharray: 3 3; }
.hf-c--build .hf-c__t { fill: #f3f2f2; } .hf-c--build .hf-c__l { fill: #d6d3d4; } .hf-c--build .hf-c__r { fill: #b3afb1; }
.hf-c--done .hf-c__t { fill: #f9b6d3; } .hf-c--done .hf-c__l { fill: #e32482; } .hf-c--done .hf-c__r { fill: #a3155b; }
.hf-lens, .hf-parts, .hf-tick { opacity: 0; transition: opacity 0.25s ease; }
.hf-lens circle { fill: rgba(255, 255, 255, 0.7); stroke: var(--ink); stroke-width: 2; }
.hf-lens path { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.hf-parts rect { fill: #8d8a8b; }
.hf-tick circle { fill: #fff; stroke: var(--accent-solid); stroke-width: 1.5; }
.hf-tick path { fill: none; stroke: var(--accent-solid); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hflow[data-look="1"] .hf-lens, .hflow[data-look="3"] .hf-parts, .hflow[data-look="4"] .hf-tick { opacity: 1; }
.hflow.is-closed .hf-cube { opacity: 0; }
.hf-cube { transition: opacity 0.3s ease; }
/* stations: labels under the gates; on phones they become small dots */
.hflow__stops { position: absolute; inset: 0; pointer-events: none; }
.hflow__stop { position: absolute; top: 85%; transform: translateX(-50%); min-height: 44px; padding: 0.35rem 0.6rem; border: 0; border-radius: 999px; background: none; color: var(--ink-muted); font: 600 0.85rem/1 var(--font-body); white-space: nowrap; cursor: pointer; pointer-events: auto; transition: color 0.25s ease, background 0.25s ease; }
.hflow__stop:hover, .hflow__stop.is-on { color: var(--ink); background: var(--accent-tint); }
.hflow__stop:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
/* caption card under the drawing */
.hflow__caps { display: grid; max-width: 26rem; margin: 0.4rem auto 0; text-align: center; }
.hflow__cap { grid-area: 1 / 1; margin: 0; opacity: 0; translate: 0 6px; transition: opacity 0.3s ease, translate 0.3s ease; }
.hflow__cap.is-on { opacity: 1; translate: 0 0; }
.hflow__cap b { display: block; font: 700 1.05rem/1.3 var(--font-display); color: var(--ink); }
.hflow__cap[data-i="5"] b { color: var(--accent-solid-strong); }
.hflow__cap span { display: block; margin-top: 0.25rem; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 59.99rem) {
  .hero__stack.hero__stack--flow { margin-top: 1.5rem; }
}
@media (max-width: 40rem) {
  .hflow__stop { top: 84%; width: 44px; padding: 0; background: none; }
  .hflow__stop span { display: block; width: 14px; height: 5px; margin: 0 auto; border-radius: 3px; background: #d6d3d4; font-size: 0; color: transparent; }
  .hflow__stop.is-on span { background: var(--accent-solid); }
  .hflow__stop:hover, .hflow__stop.is-on { background: none; }
  .hflow__caps { min-height: 4.6rem; padding: 0.8rem 1rem; border-radius: 14px; background: var(--accent-tint); }
}
/* bolder (1 Oct): thicker line, stations as soft white arches */
.hf-line { stroke-width: 5; }
.hf-line--mess { stroke-width: 4; }
.hf-rail { stroke-width: 9; stroke: #ebe9ea; }
.hflow__stop { font-size: 0.92rem; }
.hf-node circle { r: 17; }
.hf-ghost { fill: none; stroke: #d6d3d4; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
/* labels (1 Oct): numbered steps, "Your problem" on the scribble, the three
   services named on the ring */
.hflow__stop span { display: inline-flex; align-items: center; gap: 0.35rem; }
.hflow__stop i { font: 700 0.7rem/1 var(--font-display); font-style: normal; color: var(--accent-solid); }
.hflow__tags { position: absolute; inset: 0; pointer-events: none; }
.hflow__tag { position: absolute; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: #fff; color: var(--ink-muted); font: 600 0.82rem/1 var(--font-body); white-space: nowrap; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -12px rgba(5, 6, 5, 0.35); transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.hflow__tag--problem { transform: translate(-50%, -100%); background: var(--accent-gradient); color: #fff; box-shadow: 0 10px 22px -10px rgba(227, 36, 130, 0.6); }
.hflow__tag--problem b { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.hflow__tag--problem::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #e5277f; transform: rotate(45deg); border-radius: 2px; }
.hflow:not([data-look="0"]) .hflow__tag--problem { background: #fff; color: var(--accent-solid-strong); box-shadow: 0 0 0 1px rgba(227, 36, 130, 0.35); }
.hflow:not([data-look="0"]) .hflow__tag--problem b { background: var(--accent-solid); }
.hflow:not([data-look="0"]) .hflow__tag--problem::after { background: #fff; box-shadow: 1px 1px 0 rgba(227, 36, 130, 0.35); }
.hflow__tag--l { transform: translate(-100%, -50%); }
.hflow__tag--t { transform: translate(-50%, -80%); }
.hflow__tag--r { transform: translate(0, -50%); }
.hflow.is-closed .hflow__tag--svc { color: #fff; background: var(--ink); box-shadow: none; }
@media (max-width: 40rem) {
  .hflow__tag { padding: 0.25rem 0.5rem; font-size: 0.62rem; }
  .hflow__tag--problem b { width: 5px; height: 5px; }
  .hflow__stop i { display: none; }
}
/* phones: the service names move from the ring to a row under the drawing */
.hflow__legend { display: none; }
@media (max-width: 40rem) {
  .hflow__tag--svc { display: none; }
  .hflow__legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; }
  .hflow__legend span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink-muted); font: 600 0.78rem/1 var(--font-body); transition: all 0.3s ease; }
  .hflow__legend svg { width: 14px; height: 14px; color: var(--accent-solid); }
  .hflow.is-closed .hflow__legend span { background: var(--ink); color: #fff; box-shadow: none; }
  .hflow.is-closed .hflow__legend svg { color: #f48dbb; }
}
@media (max-width: 40rem) { .hflow__tag--problem { transform: translate(-22%, -100%); } .hflow__tag--problem::after { left: 22%; } }
/* full width (1 Oct): the journey uses the whole hero width, labels scale up with it */
@media (min-width: 60rem) {
  .hflow__stop { font-size: 1rem; }
  .hflow__stop i { font-size: 0.78rem; }
  .hflow__tag { padding: 0.5rem 1rem; font-size: 0.95rem; }
  .hflow__cap b { font-size: 1.25rem; }
  .hflow__cap span { font-size: 1.05rem; }
  .hflow__caps { max-width: 34rem; }
}
/* ---- Hero flow, second pass (1 Oct): flat token instead of the cube,
   stations as soft tiles with their step icon, a longer run to a bigger
   ring, service names tight to their icons ---- */
.hf-gate__box { fill: #fff; stroke: #e4e2e3; stroke-width: 2; transition: stroke 0.3s ease, fill 0.3s ease; }
.hf-gate__ico svg { color: #b3afb1; transition: color 0.3s ease; }
.hf-gate.is-on .hf-gate__box { stroke: var(--ink); stroke-width: 2.5; }
.hf-gate.is-on .hf-gate__ico svg { color: var(--ink); }
.hf-gate.is-done .hf-gate__box { stroke: #f4a3c7; fill: #fff7fa; }
.hf-gate.is-done .hf-gate__ico svg { color: var(--accent-solid); }
.hf-t { opacity: 0; transition: opacity 0.25s ease; }
.hflow[data-look="0"] .hf-t--mess, .hflow[data-look="1"] .hf-t--assess, .hflow[data-look="2"] .hf-t--plan,
.hflow[data-look="3"] .hf-t--build, .hflow[data-look="4"] .hf-t--done { opacity: 1; }
.hf-t rect { fill: var(--accent-solid); }
.hf-t__g { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hf-t__lens circle { fill: rgba(255, 255, 255, 0.85); stroke: var(--ink); stroke-width: 2; }
.hf-t__lens path { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.hf-t--plan rect { fill: #fff; stroke: var(--accent-solid); stroke-width: 2; stroke-dasharray: 4 4; }
.hf-t--plan .hf-t__g { stroke: var(--accent-solid); }
.hf-t--build rect { fill: var(--ink); }
.hf-t--build .hf-t__g { stroke: #f48dbb; stroke-width: 2; }
.hf-t--done rect { fill: var(--accent-solid); filter: drop-shadow(0 6px 10px rgba(227, 36, 130, 0.45)); }
.hf-node circle { r: 19; }
.hflow__tag--l { transform: translate(-100%, -50%); }
.hflow__tag--t { transform: translate(-50%, -100%); }
.hflow__tag--r { transform: translate(0, -50%); }
.hflow__stop { top: auto; transform: translate(-50%, 0); }
@media (max-width: 40rem) { .hflow__stop { transform: translate(-50%, -10%); } }
/* ---- Hero flow, third pass (1 Oct): centred on the ring. Problem on the
   left, through the four steps, into the 360 ring in the middle, then three
   lines fan out to the services on the right. Glow, a spark leading the
   token, ripples and a logo spin when the ring closes. ---- */
.hf-line { stroke: url(#hf-grad); filter: drop-shadow(0 0 5px rgba(227, 36, 130, 0.35)); }
.hf-line--mess { stroke: var(--accent-solid); }
.hf-rail { stroke: #ebe9ea; stroke-width: 8; }
.hf-aura { fill: url(#hf-glow); opacity: 0; transition: opacity 0.8s ease; }
.hflow.is-closed .hf-aura { opacity: 1; }
.hf-spark { fill: #fff; stroke: var(--accent-solid); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(227, 36, 130, 0.9)); }
.hflow.is-closed .hf-spark, .hflow[data-look="0"] .hf-spark { opacity: 0; }
.hf-branch { fill: none; stroke: url(#hf-grad); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px rgba(227, 36, 130, 0.3)); }
.hf-node { opacity: 0.35; transition: opacity 0.4s ease; }
.hf-node circle:not(.hf-node__halo) { fill: #fff; stroke: #e4e2e3; stroke-width: 2; transition: fill 0.4s ease, stroke 0.4s ease; }
.hf-node__halo { fill: rgba(227, 36, 130, 0.12); opacity: 0; transform-box: fill-box; transform-origin: center; }
.hf-node svg { color: #a19d9f; transition: color 0.4s ease; }
.hf-node.is-on { opacity: 1; }
.hf-node.is-on circle:not(.hf-node__halo) { fill: var(--accent-solid); stroke: #fff; }
.hf-node.is-on svg { color: #fff; }
.hf-node.is-on .hf-node__halo { opacity: 1; }
.hflow__tag--svc { opacity: 0.45; transition: opacity 0.4s ease, background 0.4s ease, color 0.4s ease; }
.hflow__tag--svc.is-on { opacity: 1; background: var(--ink); color: #fff; box-shadow: none; }
.hflow.is-closed .hflow__tag--svc:not(.is-on) { background: #fff; color: var(--ink-muted); }
.hflow__tag--ring { transform: translate(-50%, 0); padding: 0.3rem 0.7rem; font: 700 0.8rem/1 var(--font-display); color: var(--ink-muted); background: #fff; opacity: 0.7; }
.hflow.is-closed .hflow__tag--ring { background: var(--accent-solid); color: #fff; opacity: 1; box-shadow: 0 8px 18px -8px rgba(227, 36, 130, 0.6); }
.hf-ripple { fill: none; stroke: var(--accent-solid); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hf-logo { transform-box: fill-box; transform-origin: center; }
.hf-gate__box { filter: drop-shadow(0 8px 14px rgba(5, 6, 5, 0.06)); }
.hf-gate.is-on .hf-gate__box { filter: drop-shadow(0 12px 20px rgba(5, 6, 5, 0.16)); }
.hf-gate.is-on .hf-gate__ico { animation: hf-bob 0.9s ease-in-out infinite; transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .hflow.is-closed .hf-ripple { animation: hf-ripple 2.2s ease-out infinite; }
  .hflow.is-closed .hf-ripple--2 { animation-delay: 1.1s; }
  .hflow.is-closed .hf-logo { animation: hf-spin 1.1s cubic-bezier(0.34, 1.3, 0.64, 1) both; }
  .hf-node.is-on .hf-node__halo { animation: hf-halo 1.8s ease-out infinite; }
}
@keyframes hf-ripple { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes hf-spin { from { transform: rotate(-360deg) scale(0.6); } to { transform: none; } }
@keyframes hf-halo { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes hf-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (max-width: 40rem) { .hflow__tag--ring { font-size: 0.6rem; padding: 0.2rem 0.45rem; } }
/* earlier passes set r and colours on every node circle; pin them down here */
.hflow .hf-node circle { r: 21; }
.hflow .hf-node .hf-node__halo { r: 30; fill: rgba(227, 36, 130, 0.14); stroke: none; }
.hflow .hf-node:not(.is-on) circle:not(.hf-node__halo) { fill: #fff; stroke: #e4e2e3; }
.hflow .hf-node:not(.is-on) svg { color: #a19d9f; }
@media (min-width: 60rem) { .hflow__stop { font-size: 0.92rem; padding-inline: 0.5rem; } }
/* a perfectly flat path has no height: the glow uses the drawing's own space so it still shows */
.hflow .hf-line--belt { filter: none; }
/* full bleed (1 Oct): the journey runs edge to edge across the hero */
.hero--layers { overflow-x: clip; }
.hero__stack.hero__stack--flow { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; }
.hflow__caps, .hflow__legend { padding-inline: 1rem; }
.hf-line--mess { stroke-width: 3.5; }
.hf-alert circle { fill: var(--accent-solid); filter: drop-shadow(0 4px 8px rgba(227, 36, 130, 0.5)); }
.hf-alert path { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.hf-alert { transition: opacity 0.3s ease; }
.hflow:not([data-look="0"]) .hf-alert { opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
  .hflow[data-look="0"] .hf-alert { animation: hf-shake 0.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes hf-shake { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 75% { rotate: 12deg; } }
/* ---- Hero flow, bigger and grounded (1 Oct): about 1.6x the size, sitting
   on a faint horizon line and floor glow that run the full width, so the
   journey belongs to the hero instead of floating in it ---- */
.hf-floor { fill: url(#hf-floor); }
.hf-horizon { fill: none; stroke: url(#hf-horizon); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.hf-line { stroke-width: 7; }
.hf-line--mess { stroke-width: 5; }
.hf-rail { stroke-width: 12; }
.hf-branch { stroke-width: 5; }
.hf-gate__box { stroke-width: 2.5; }
.hf-gate.is-on .hf-gate__box { stroke-width: 3; }
.hf-ghost { stroke-width: 2.5; stroke-dasharray: 3 9; }
.hf-spark { stroke-width: 4; }
.hflow .hf-node circle { r: 31; }
.hflow .hf-node .hf-node__disc { r: 31; }
.hflow .hf-node .hf-node__halo { r: 44; }
.hf-alert circle { r: 17; }
.hflow__stage { margin-top: -0.5rem; }
.hflow__caps { margin-top: 0.2rem; }
@media (min-width: 60rem) {
  .hflow__stop { font-size: 1.02rem; }
  .hflow__stop i { font-size: 0.8rem; }
  .hflow__tag { padding: 0.55rem 1.1rem; font-size: 1rem; }
  .hflow__tag--ring { font-size: 0.9rem; padding: 0.35rem 0.8rem; }
}
@media (min-width: 60rem) { .hflow__caps { margin-top: 1.4rem; } }

/* ---------- Home hero: the ink line (1 Oct, A + B) ---------------------------
   One fine near-black line: a coil that unwinds, four quiet markers, a circle.
   Dots gather onto the circle and turn pink, the only colour in the drawing.
   Same stacked hero as the flow version; the drawing runs the full width. */
.hero--layers:has(.hero__stack--line) .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.hero--layers:has(.hero__stack--line) .hero__lead { width: 100%; text-align: center; max-width: 52rem; margin-inline: auto; }
.hero--layers:has(.hero__stack--line) .hero__lead > p { margin-inline: auto; max-width: 40rem; }
.hero--layers:has(.hero__stack--line) .hero__actions { justify-content: center; }
.hero--layers:has(.hero__stack--line) .hero__badge { margin-inline: auto; }
.hero__stack.hero__stack--line { position: relative; top: auto; right: auto; width: 100vw; max-width: none; margin: 0 0 0 calc(50% - 50vw); pointer-events: auto; opacity: 1; }
.hline__stage { position: relative; max-width: 96rem; margin-inline: auto; padding-inline: clamp(0.5rem, 3vw, 3rem); }
.hline__svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; cursor: grab; }
.hline__svg:active { cursor: grabbing; }
.hl-base { fill: none; stroke: #e7e5e6; stroke-width: 1.5; }
.hl-line { fill: none; stroke: #232423; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hl-ring { fill: none; stroke: #232423; stroke-width: 2.2; stroke-linecap: round; transition: stroke 0.6s ease; }
.hline.is-closed .hl-ring { stroke: var(--accent-solid); }
.hl-mark { fill: #fff; stroke: #c9c6c7; stroke-width: 2; transition: fill 0.3s ease, stroke 0.3s ease; }
.hl-mark.is-done { fill: #232423; stroke: #232423; }
.hl-mark.is-on { fill: var(--accent-solid); stroke: var(--accent-solid); }
.hl-tip { fill: var(--accent-solid); }
.hline.is-closed .hl-tip { opacity: 0; }
.hl-dot { fill: #c9c6c7; transition: fill 0.4s ease; }
.hl-dot.is-set { fill: var(--accent-solid); }
.hl-logo { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); transform: scale(0.85); }
.hline.is-closed .hl-logo { opacity: 1; transform: none; }
/* labels: small, set like an annotated drawing */
.hline__labels { position: absolute; inset: 0 clamp(0.5rem, 3vw, 3rem); pointer-events: none; }
.hline__note, .hline__stop, .hline__svc { position: absolute; }
.hline__note { transform: translate(0, -100%); font: 600 0.72rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.hline__stop { transform: translateX(-50%); display: grid; justify-items: center; gap: 0.3rem; min-width: 44px; min-height: 44px; padding: 0.2rem 0.4rem; border: 0; background: none; cursor: pointer; pointer-events: auto; color: var(--ink-muted); font: 500 0.95rem/1.1 var(--font-body); }
.hline__stop i { font: 600 0.72rem/1 var(--font-display); font-style: normal; letter-spacing: 0.08em; color: #a19d9f; transition: color 0.3s ease; }
.hline__stop span { padding-bottom: 0.2rem; border-bottom: 1.5px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; }
.hline__stop.is-on { color: var(--ink); }
.hline__stop.is-on i { color: var(--accent-solid); }
.hline__stop.is-on span { border-color: var(--accent-solid); }
.hline__stop.is-done { color: var(--ink); }
.hline__stop:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; border-radius: 6px; }
.hline__svc { transform: translate(0, -50%); font: 600 0.95rem/1 var(--font-body); color: var(--ink); opacity: 0; translate: -6px 0; transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.hline__svc::before { content: ""; display: inline-block; width: 18px; height: 1.5px; margin-right: 0.5rem; vertical-align: middle; background: var(--accent-solid); }
.hline__svc.is-on { opacity: 1; translate: 0 0; }
.hline__svc-row { display: none; }
.hline__caps { display: grid; max-width: 34rem; margin: 1.4rem auto 0; padding-inline: 1rem; text-align: center; }
.hline__cap { grid-area: 1 / 1; margin: 0; opacity: 0; translate: 0 6px; transition: opacity 0.35s ease, translate 0.35s ease; }
.hline__cap.is-on { opacity: 1; translate: 0 0; }
.hline__cap b { display: block; font: 600 1.1rem/1.3 var(--font-display); color: var(--ink); }
.hline__cap[data-i="5"] b { color: var(--accent-solid-strong); }
.hline__cap span { display: block; margin-top: 0.3rem; color: var(--ink-muted); font-size: 1rem; line-height: 1.55; }
@media (max-width: 40rem) {
  .hline__stop { font-size: 0; gap: 0; }
  .hline__stop i { font-size: 0.62rem; }
  .hline__stop span { display: none; }
  .hline__note { font-size: 0.55rem; }
  .hline__svc { display: none; }
  .hline__svc-row { display: flex; justify-content: center; gap: 1rem; margin: 1.6rem 0 0; font: 600 0.8rem/1 var(--font-body); color: var(--ink-muted); }
  .hline.is-closed .hline__svc-row { color: var(--accent-solid-strong); }
  .hl-line, .hl-ring { stroke-width: 3.5; }
  .hl-dot { r: 4; }
}
@media (prefers-reduced-motion: reduce) { .hline__cap, .hline__svc, .hl-logo, .hl-ring, .hl-dot, .hl-mark { transition: none; } }

/* ---------- Home hero: the end-to-end model, at night (1 Oct) --------------
   The model is the hero: it climbs from the bottom left to a round 360
   platform top right, on a charcoal night. Text sits in the open top-left
   corner; a small caption card bottom left narrates each step. */
.hero--layers:has(.hero__stack--dio) { background: #0f1012; color: #fff; }
.hero--layers:has(.hero__stack--dio)::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42rem 30rem at 78% 22%, rgba(227, 36, 130, 0.16), transparent 70%), radial-gradient(60rem 30rem at 30% 110%, rgba(255, 255, 255, 0.04), transparent 70%); }
.hero--layers:has(.hero__stack--dio) .hero__art, .hero--layers:has(.hero__stack--dio) .hero__foot { display: none; }
.hero--layers:has(.hero__stack--dio) .container { position: relative; }
.hero--layers:has(.hero__stack--dio) .hero__grid { position: relative; display: block; min-height: clamp(50rem, calc(100vh + 1rem), 66rem); }
.hero--layers:has(.hero__stack--dio) .hero__lead { position: relative; z-index: 2; max-width: 46rem; padding-top: clamp(0.5rem, 3vh, 2rem); }
.hero--layers:has(.hero__stack--dio) h1 { color: #fff; font-size: clamp(1.9rem, 0.9rem + 2.3vw, 3rem); }
.hero--layers:has(.hero__stack--dio) h1 .hl-line { white-space: nowrap; }
.hero--layers:has(.hero__stack--dio) .hero__lead > p { color: rgba(255, 255, 255, 0.7); }
.hero--layers:has(.hero__stack--dio) .hero__badge { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.hero--layers:has(.hero__stack--dio) .hero__badge-main { color: #fff; }
.hero--layers:has(.hero__stack--dio) .hero__badge-cta { color: rgba(255, 255, 255, 0.7); }
.hero--layers:has(.hero__stack--dio) .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.hero--layers:has(.hero__stack--dio) .btn--ghost:hover { background: #fff; color: var(--ink); }
.hero__stack.hero__stack--dio { position: absolute; inset: 0; width: auto; max-width: none; margin: 0; opacity: 1; pointer-events: none; }
.dio { position: absolute; inset: 0; }
/* sized by width (1 Oct): the model spans most of the hero and sits along the bottom right */
.dio__stage { position: absolute; top: auto; left: auto; right: -9vw; bottom: -3rem; width: min(84vw, 88rem); aspect-ratio: 1064 / 616; pointer-events: auto; }
.dio__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dio__panel { position: absolute; right: 0; bottom: clamp(1.5rem, 5vh, 3rem); z-index: 2; width: min(22rem, 38%); padding: 1rem 1.1rem 0.9rem; border-radius: 16px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); pointer-events: auto; }
.dio__caps { display: grid; }
.dio__cap { grid-area: 1 / 1; margin: 0; opacity: 0; translate: 0 6px; transition: opacity 0.35s ease, translate 0.35s ease; }
.dio__cap.is-on { opacity: 1; translate: 0 0; }
.dio__cap b { display: block; font: 600 1rem/1.3 var(--font-display); color: #fff; }
.dio__cap[data-i="5"] b { color: #f48dbb; }
.dio__cap span { display: block; margin-top: 0.3rem; color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; line-height: 1.5; }
.dio__dots { display: flex; gap: 0.35rem; margin-top: 0.8rem; }
.dio__dot { position: relative; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.dio__dot::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); transition: background 0.3s ease; }
.dio__dot.is-done::before { background: rgba(244, 141, 187, 0.55); }
.dio__dot.is-on::before { background: var(--accent-solid); }
.dio__dot:focus-visible { outline: 2px solid #f48dbb; outline-offset: 2px; border-radius: 4px; }
@media (max-width: 59.99rem) {
  .hero--layers:has(.hero__stack--dio) .hero__grid { min-height: 0; }
  .hero__stack.hero__stack--dio, .dio, .dio__stage, .dio__panel { position: relative; inset: auto; }
  .dio__stage { width: 112%; left: -6%; right: auto; top: auto; bottom: auto; margin-top: 0.5rem; aspect-ratio: 1064 / 616; }
  .dio__theme { top: -3rem; }
  .dio__panel { width: auto; bottom: auto; margin-top: 0.5rem; }
}

/* the night model */
.dk-tile-t { fill: #2b2c32; stroke: #3b3c43; stroke-width: 1; }
.dk-tile-l { fill: #212227; } .dk-tile-r { fill: #18191c; }
.dk-obj-t { fill: #4a4b53; } .dk-obj-l { fill: #3a3b42; } .dk-obj-r { fill: #2e2f35; }
.dk-dark-t { fill: #1c1d21; } .dk-dark-l { fill: #141518; } .dk-dark-r { fill: #101113; }
.dk-dc-t { fill: #41424a; } .dk-dc-l { fill: #34353c; } .dk-dc-r { fill: #292a30; }
.dk-bldg-t { fill: #44454d; } .dk-bldg-l { fill: #36373e; } .dk-bldg-r { fill: #2b2c32; }
.dk-cam-t { fill: #8a8b92; } .dk-cam-l { fill: #6e6f76; } .dk-cam-r { fill: #57585e; }
.dk-person-t { fill: #7a7b83; } .dk-person-l { fill: #62636b; } .dk-person-r { fill: #4e4f56; }
.dk-head { fill: #b9b5b7; }
.dk-pink-t { fill: #f7a8cb; } .dk-pink-l { fill: #e32482; } .dk-pink-r { fill: #b01b66; }
.dk-rail { fill: none; stroke: #1b1c20; stroke-width: 13; stroke-linecap: round; }
.dk-track { fill: none; stroke: var(--accent-solid); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 100 100; filter: drop-shadow(0 0 6px rgba(227, 36, 130, 0.8)); }
.dk-cable { fill: none; stroke: #8f8a8c; stroke-width: 3.2; stroke-linecap: round; }
.dk-cable-thin { stroke: #8f8a8c; stroke-width: 1.5; }
.dk-screen { fill: #1b2129; transition: fill 0.5s ease; }
.dk-screen-line { stroke: #2b333d; stroke-width: 3; stroke-linecap: round; transition: stroke 0.5s ease; }
.dk-screen--broken { fill: #202127; }
.dk-crack { stroke: #cfcbcd; stroke-width: 1.6; }
.dk-alert circle { fill: var(--accent-solid); } .dk-alert path { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.dk-lens circle { fill: rgba(255, 255, 255, 0.08); stroke: #6e6f76; stroke-width: 3; transition: stroke 0.4s ease; }
.dk-lens path { stroke: #6e6f76; stroke-width: 4; stroke-linecap: round; transition: stroke 0.4s ease; }
.dk-blueprint { fill: #1f2e43; transition: fill 0.4s ease; }
.dk-bp-line { stroke: #3d5a80; stroke-width: 2; stroke-linecap: round; transition: stroke 0.4s ease; }
.dk-win { fill: #2e2f35; transition: fill 0.4s ease; }
.dk-crane { stroke: #7a7b83; stroke-width: 3; stroke-linecap: round; }
.dk-folder-f { fill: #6e6f76; transition: fill 0.4s ease; }
.dk-tick { opacity: 0; transition: opacity 0.4s ease; }
.dk-tick circle { fill: var(--accent-solid); } .dk-tick path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dk-vent { fill: #26272c; }
.dk-led { fill: #3a4a40; transition: fill 0.4s ease; }
.dk-pole { stroke: #6e6f76; stroke-width: 3; stroke-linecap: round; }
.dk-lamp { fill: #5a5b62; transition: fill 0.4s ease; }
.dk-lamp-glow { fill: url(#dk-lamp-g); opacity: 0; transition: opacity 0.6s ease; }
.dk-plat-top { fill: #2b2c32; stroke: #3b3c43; stroke-width: 1; }
.dk-plat-side { fill: #1c1d21; }
.dk-ring { fill: none; stroke: #4a3140; stroke-width: 3; stroke-dasharray: 6 8; transition: stroke 0.6s ease; }
.dk-glow { fill: url(#dk-glow-g); opacity: 0; transition: opacity 0.8s ease; }
.dio-cube { transition: opacity 0.3s ease; }

/* a scene lights up while the cube is there, and stays lit once passed */
.dio-scene.is-on .dk-lens circle, .dio-scene.is-on .dk-lens path { stroke: #fff; }
.dio-scene:is(.is-on, .is-done)[data-i="1"] .dk-screen { fill: #cfe3ff; }
.dio-scene:is(.is-on, .is-done) .dk-blueprint { fill: #3a1f33; }
.dio-scene:is(.is-on, .is-done) .dk-bp-line { stroke: #f48dbb; }
.dio-scene:is(.is-on, .is-done) .dk-win { fill: #ffd27a; }
.dio-scene:is(.is-on, .is-done) .dk-folder-f { fill: var(--accent-solid); }
.dio-scene:is(.is-on, .is-done) .dk-tick { opacity: 1; }
.dio-scene[data-i="0"].is-done { opacity: 0.55; transition: opacity 0.6s ease; }
/* the finish: the ring closes, the three services switch on */
.dio.is-closed .dk-ring { stroke: var(--accent-solid); stroke-dasharray: none; filter: drop-shadow(0 0 8px rgba(227, 36, 130, 0.9)); }
.dio.is-closed .dk-glow { opacity: 1; }
.dio.is-closed .dio-fin .dk-screen { fill: #cfe3ff; }
.dio.is-closed .dk-screen-line { stroke: #8fb4e6; }
.dio.is-closed .dk-lamp { fill: #fff1c2; }
.dio.is-closed .dk-lamp-glow { opacity: 1; }
.dio.is-closed .dk-led { fill: #4ade80; }
.dio.is-closed .dio-cube { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .dio-scene[data-i="0"]:not(.is-done) .dk-alert { animation: dk-pulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .dio-scene.is-on .dk-lens { animation: dk-sweep 1.6s ease-in-out infinite; }
  .dio-scene.is-on .dk-load { animation: dk-lower 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .dio.is-closed .dk-led { animation: dk-blink 1.4s steps(1) infinite; }
  .dio.is-closed .dk-led:nth-of-type(odd) { animation-delay: -0.6s; }
}
@keyframes dk-pulse { 50% { transform: scale(1.18); } }
@keyframes dk-sweep { 0%, 100% { translate: 0 0; } 50% { translate: -22px 10px; } }
@keyframes dk-lower { 0%, 100% { translate: 0 -10px; } 50% { translate: 0 8px; } }
@keyframes dk-blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .dio__cap, .dk-screen, .dk-ring, .dk-glow { transition: none; } }
/* brighter night greys so the scenes read */
.dk-tile-t { fill: #33343b; stroke: #45464e; } .dk-tile-l { fill: #26272c; } .dk-tile-r { fill: #1c1d21; }
.dk-obj-t { fill: #5c5d66; } .dk-obj-l { fill: #494a52; } .dk-obj-r { fill: #3a3b42; }
.dk-bldg-t { fill: #55565f; } .dk-bldg-l { fill: #45464e; } .dk-bldg-r { fill: #373840; }
.dk-dc-t { fill: #50515a; } .dk-dc-l { fill: #41424a; } .dk-dc-r { fill: #34353c; }
.dk-plat-top { fill: #33343b; stroke: #45464e; } .dk-plat-side { fill: #212227; }
.dk-cable { stroke: #b0abad; }
.dk-crane, .dk-pole { stroke: #8f8f97; }
.hero--layers:has(.hero__stack--dio) .hero__lead > p { max-width: 30rem; }
@media (max-width: 40rem) { .hero--layers:has(.hero__stack--dio) h1 .hl-line { white-space: normal; } }
/* the finish (1 Oct): the three services wired to one hub, named, and "End to end" over the platform */
.dk-link { stroke: #4a3140; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.18s + 0.2s), stroke 0.4s ease; }
.dk-link-end { fill: #4a3140; transition: fill 0.4s ease calc(var(--k) * 0.18s + 0.5s); }
.dk-hub { fill: #4a3140; stroke: #0f1012; stroke-width: 3; transition: fill 0.4s ease; }
.dio.is-closed .dk-link { stroke: var(--accent-solid); stroke-dashoffset: 0; }
.dio.is-closed .dk-link-end, .dio.is-closed .dk-hub { fill: var(--accent-solid); }
.dk-tag rect { fill: #fff; }
.dk-tag text { fill: var(--ink); font: 600 13px var(--font-body); }
.dk-tag { opacity: 0; translate: 0 8px; transition: opacity 0.5s ease calc(var(--k) * 0.18s + 0.5s), translate 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.18s + 0.5s); }
.dk-tag--main rect { fill: var(--accent-solid); }
.dk-tag--main text { fill: #fff; font-size: 15px; letter-spacing: 0.02em; }
.dio.is-closed .dk-tag { opacity: 1; translate: 0 0; }
/* compare switch (wireframe only) */
.dio__theme { position: absolute; top: 0; right: 0; z-index: 3; min-height: 36px; padding: 0 0.9rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #fff; font: 600 0.8rem/1 var(--font-body); cursor: pointer; pointer-events: auto; }
.hero--light .dio__theme { color: var(--ink); border-color: var(--line); background: #fff; }

/* ---- light version of the hero, for comparing ---- */
.hero--layers.hero--light:has(.hero__stack--dio) { background: #f6f5f5; color: var(--ink); }
.hero--light:has(.hero__stack--dio)::before { background: radial-gradient(42rem 30rem at 78% 22%, rgba(227, 36, 130, 0.08), transparent 70%); }
.hero--light:has(.hero__stack--dio) h1 { color: var(--ink); }
.hero--light:has(.hero__stack--dio) .hero__lead > p { color: var(--ink-muted); }
.hero--light:has(.hero__stack--dio) .hero__badge { background: #fff; border-color: var(--line); }
.hero--light:has(.hero__stack--dio) .hero__badge-main { color: var(--ink); }
.hero--light:has(.hero__stack--dio) .hero__badge-cta { color: var(--ink-muted); }
.hero--light:has(.hero__stack--dio) .btn--ghost { color: var(--ink); border-color: var(--line); background: #fff; }
.hero--light .dio__panel { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -26px rgba(5, 6, 5, 0.3); }
.hero--light .dio__cap b { color: var(--ink); }
.hero--light .dio__cap[data-i="5"] b { color: var(--accent-solid-strong); }
.hero--light .dio__cap span { color: var(--ink-muted); }
.hero--light .dio__dot::before { background: #e4e2e3; }
.dio--lm .dk-tile-t { fill: #fff; stroke: #e2e0e1; } .dio--lm .dk-tile-l { fill: #ebe9ea; } .dio--lm .dk-tile-r { fill: #d8d5d6; }
.dio--lm .dk-obj-t { fill: #f1f0f0; } .dio--lm .dk-obj-l { fill: #d9d6d7; } .dio--lm .dk-obj-r { fill: #c4c0c2; }
.dio--lm .dk-bldg-t, .dio--lm .dk-dc-t { fill: #f4f3f3; } .dio--lm .dk-bldg-l, .dio--lm .dk-dc-l { fill: #dedbdc; } .dio--lm .dk-bldg-r, .dio--lm .dk-dc-r { fill: #c9c5c7; }
.dio--lm .dk-dark-t { fill: #6d6569; } .dio--lm .dk-dark-l, .dio--lm .dk-dark-r { fill: #544d51; }
.dio--lm .dk-plat-top { fill: #fff; stroke: #e2e0e1; } .dio--lm .dk-plat-side { fill: #dcd9da; }
.dio--lm .dk-rail { stroke: #e2e0e1; }
.dio--lm .dk-cable, .dio--lm .dk-cable-thin { stroke: #8f8a8c; }
.dio--lm .dk-crane, .dio--lm .dk-pole { stroke: #9d999b; }
.dio--lm .dk-screen, .dio--lm .dk-screen--broken { fill: #3a3b42; }
.dio--lm .dk-crack { stroke: #fff; }
.dio--lm .dk-vent { fill: #c4c0c2; }
.dio--lm .dk-win { fill: #cbd6de; }
.dio--lm .dk-blueprint { fill: #d9e3ef; } .dio--lm .dk-bp-line { stroke: #7f9cc0; }
.dio--lm .dk-lens circle { fill: rgba(255, 255, 255, 0.6); stroke: #6d6569; } .dio--lm .dk-lens path { stroke: #6d6569; }
.dio--lm .dk-folder-f { fill: #9d999b; }
.dio--lm .dk-person-t { fill: #d9d6d7; } .dio--lm .dk-person-l { fill: #b3afb1; } .dio--lm .dk-person-r { fill: #9d999b; }
.dio--lm .dk-head { fill: #6d6569; }
.dio--lm .dk-led { fill: #c9ddd0; }
.dio--lm .dk-lamp { fill: #7f777b; }
.dio--lm .dk-ring, .dio--lm .dk-link { stroke: #efc3d7; }
.dio--lm .dk-link-end, .dio--lm .dk-hub { fill: #efc3d7; }
.dio--lm .dk-hub { stroke: #fff; }
.dio--lm .dk-tag--svc rect { fill: var(--ink); } .dio--lm .dk-tag--svc text { fill: #fff; }
.dio--lm .dk-glow { opacity: 0; }
.dio--lm.is-closed .dk-glow { opacity: 0.5; }
.dio--lm.is-closed .dk-ring, .dio--lm.is-closed .dk-link { stroke: var(--accent-solid); }
.dio--lm.is-closed .dk-link-end, .dio--lm.is-closed .dk-hub { fill: var(--accent-solid); }
/* hero: no intro paragraph, the model tells it (1 Oct) */
.hero--layers:has(.hero__stack--dio) .hero__lead > p { display: none; }
.hero--layers:has(.hero__stack--dio) .hero__actions { margin-top: 2rem; }
/* meet us: the consultant in pink, a question and an answer */
.dk-us .dk-person-t { fill: #f7a8cb; } .dk-us .dk-person-l { fill: #e32482; } .dk-us .dk-person-r { fill: #b01b66; }
.dk-bubble rect, .dk-bubble > path:first-of-type { fill: #fff; }
.dk-bubble text { fill: var(--ink); font: 700 14px var(--font-display); }
.dk-bubble__tick { fill: none; stroke: var(--accent-solid); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dk-bubble--us { opacity: 0; transition: opacity 0.4s ease; }
.dio-scene:is(.is-on, .is-done) .dk-bubble--us { opacity: 1; }
.dio-scene[data-i="1"]:not(.is-on):not(.is-done) .dk-bubble--you { opacity: 0.6; }
.dio--lm .dk-bubble rect, .dio--lm .dk-bubble > path:first-of-type { fill: var(--ink); }
.dio--lm .dk-bubble text { fill: #fff; }
/* 1 Oct: intro paragraph back, caption box gone */
.hero--layers:has(.hero__stack--dio) .hero__lead > p { display: block; max-width: 30rem; }
.hero--layers:has(.hero__stack--dio) .hero__actions { margin-top: 0; }
/* step caption: plain text, no box (1 Oct) */
.dio__panel { display: block; padding: 0 0 0 1rem; border-radius: 0; background: none; box-shadow: none; border-left: 2px solid var(--accent-solid); }
.hero--light .dio__panel { background: none; box-shadow: none; }
/* "End to end" in the Smart enforcement style */
.dk-tag--main rect { fill: #fff; }
.dk-tag--main text { fill: var(--ink); font: 600 14px var(--font-body); letter-spacing: 0; }
.dk-tag__ico { fill: none; stroke: var(--accent-solid); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero--light .dk-tag--main rect { fill: var(--ink); }
.hero--light .dk-tag--main text { fill: #fff; }
.hero--light .dk-tag__ico { stroke: #f48dbb; }
/* light model on black: the service labels stay white */
.dio--lm .dk-tag--svc rect { fill: #fff; } .dio--lm .dk-tag--svc text { fill: var(--ink); }
.hero--light .dk-tag--svc rect { fill: var(--ink); } .hero--light .dk-tag--svc text { fill: #fff; }
/* light model on black: keep the hub ring's edge dark */
.dio--lm .dk-hub { stroke: #0f1012; }
.dio-scene.is-done .dk-bubble--us { opacity: 0; }
/* the problem cube, and you (the client) walking with the consultant (1 Oct) */
.dk-prob-t { fill: #6d6569; } .dk-prob-l { fill: #544d51; } .dk-prob-r { fill: #443e41; }
.dio--lm .dk-prob-t { fill: #6d6569; } .dio--lm .dk-prob-l { fill: #544d51; } .dio--lm .dk-prob-r { fill: #443e41; }
.dk-crack-f { fill: none; }
.dio .dk-prob-r + * .dk-crack, .dio-scene[data-i="0"] .dk-crack { stroke: var(--accent-solid); stroke-width: 2; }
.dio.is-closed .dio-cube { opacity: 1; }
.dio-cube .dk-person-t { fill: #d9d6d7; } .dio-cube .dk-person-l { fill: #b3afb1; } .dio-cube .dk-person-r { fill: #9d999b; }
.dio-cube .dk-head { fill: #b9b5b7; }
.dio-scene[data-i="0"].is-done { opacity: 0.7; }
/* stations are the services (1 Oct): each lights up and stays lit once reached */
.dk-screen-bar { fill: #2b333d; transition: fill 0.5s ease; }
.dk-screen-img { fill: #2b333d; transition: fill 0.5s ease; }
.dio-scene:is(.is-on, .is-done)[data-i="2"] .dk-screen { fill: #eef4ff; }
.dio-scene:is(.is-on, .is-done)[data-i="2"] .dk-screen-bar { fill: var(--accent-solid); }
.dio-scene:is(.is-on, .is-done)[data-i="2"] .dk-screen-img { fill: #f7a8cb; }
.dio-scene:is(.is-on, .is-done)[data-i="2"] .dk-screen-line { stroke: #9aa7b8; }
.dio-scene:is(.is-on, .is-done)[data-i="3"] .dk-lamp { fill: #fff1c2; }
.dio-scene:is(.is-on, .is-done)[data-i="3"] .dk-lamp-glow { opacity: 1; }
.dk-cam-led { fill: #5a5b62; }
.dio-scene:is(.is-on, .is-done)[data-i="3"] .dk-cam-led { fill: var(--accent-solid); }
.dio-scene:is(.is-on, .is-done)[data-i="4"] .dk-led { fill: #4ade80; }
@media (prefers-reduced-motion: no-preference) { .dio-scene:is(.is-on, .is-done)[data-i="4"] .dk-led { animation: dk-blink 1.4s steps(1) infinite; } }
.dk-stag { opacity: 0; translate: 0 8px; transition: opacity 0.45s ease, translate 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.dk-stag.is-on { opacity: 1; translate: 0 0; }
.dk-arc { fill: none; stroke: var(--accent-solid); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 5px rgba(227, 36, 130, 0.6)); transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.2s); }
.dio.is-closed .dk-arc { stroke-dashoffset: 0; }
.dk-logo { opacity: 0.35; filter: grayscale(1); transition: opacity 0.6s ease, filter 0.6s ease; }
.dio.is-closed .dk-logo { opacity: 1; filter: none; }
.dio__panel { bottom: 0; width: min(19rem, 26%); }
@media (max-width: 59.99rem) { .dio__panel { width: auto; bottom: auto; } }
.dk-tag--main text { font-size: 14px; font-weight: 700; }
.dk-tag--main .dk-tag__sub { font-size: 12px; font-weight: 500; fill: var(--ink-muted); }
.hero--light .dk-tag--main .dk-tag__sub { fill: rgba(255, 255, 255, 0.7); }
/* the first section tucks over the dark hero with rounded corners, like the rest of the page */
.hero--layers:has(.hero__stack--dio) { padding-bottom: calc(var(--sheet-r) + 2rem); }
main > .hero--layers:has(.hero__stack--dio) + :is(section, div) { position: relative; z-index: 2; margin-top: calc(-1 * var(--sheet-r)); border-radius: var(--sheet-r) var(--sheet-r) 0 0; }
/* the Grayscale360 office on the finish platform */
.dk-office-t { fill: #3a3b42; } .dk-office-l { fill: #2b2c32; } .dk-office-r { fill: #212227; }
.dio--lm .dk-office-t { fill: #f4f3f3; } .dio--lm .dk-office-l { fill: #dedbdc; } .dio--lm .dk-office-r { fill: #c9c5c7; }
.dk-owin { fill: #4a5563; transition: fill 0.5s ease; }
.dio--lm .dk-owin { fill: #b9c7d2; }
.dk-owin--r { opacity: 0.85; }
.dio.is-closed .dk-owin { fill: #ffd27a; }
.dk-odoor { fill: var(--accent-solid); }
.dk-osign { fill: #1c1d21; stroke: var(--accent-solid); stroke-width: 2; }
.dio--lm .dk-osign { fill: #fff; }
.dk-logo { opacity: 0.55; filter: grayscale(1); }
.dio.is-closed .dk-logo { opacity: 1; filter: none; }
/* ---- header over the black hero (1 Oct): dark glass, white logo and links ---- */
.nav__logo--white { display: none; }
.nav-wrap.is-dark .nav__logo:not(.nav__logo--white) { display: none; }
.nav-wrap.is-dark .nav__logo--white { display: block; }
.nav-wrap .nav { transition: background-color 0.3s ease, border-color 0.3s ease; }
.nav-wrap.is-dark .nav { background: rgba(22, 23, 26, 0.72); border-color: rgba(255, 255, 255, 0.12); }
.nav-wrap.is-dark .nav__links > a, .nav-wrap.is-dark .nav__trigger { color: rgba(255, 255, 255, 0.78); }
.nav-wrap.is-dark .nav__links > a:hover, .nav-wrap.is-dark .nav__trigger:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-wrap.is-dark .nav__menu { border-color: rgba(255, 255, 255, 0.2); }
.nav-wrap.is-dark .nav__burger, .nav-wrap.is-dark .nav__burger::before, .nav-wrap.is-dark .nav__burger::after { background: #fff; }
.nav-wrap.is-dark.is-open .nav__burger { background: transparent; }
/* the intro on two lines */
@media (min-width: 60rem) { .hero--layers:has(.hero__stack--dio) .hero__lead > p { max-width: 47rem; } .hero--layers:has(.hero__stack--dio) .hero__lead { max-width: 52rem; } }
/* the model follows the buttons in the flow (1 Oct), so the gap under them is the same on every screen */
@media (min-width: 60rem) {
  .hero--layers:has(.hero__stack--dio) .hero__grid { min-height: 0; }
  .hero__stack.hero__stack--dio { position: relative; inset: auto; }
  .hero__stack--dio .dio { position: relative; inset: auto; }
  .hero__stack--dio .dio__stage { position: relative; inset: auto; width: min(84vw, 88rem); margin: -9rem -9vw -3rem auto; }
  .hero__stack--dio .dio__panel { position: absolute; right: 0; bottom: 3rem; }
}
/* the intro breaks after "digital systems," on wide screens (1 Oct) */
.br-wide { display: none; }
@media (min-width: 60rem) { .br-wide { display: inline; } .hero--layers:has(.hero__stack--dio) .hero__lead > p { max-width: none; } }
/* narrower desktops: the model sits closer in, and the step text goes under it */
@media (min-width: 60rem) and (max-width: 84.99rem) {
  .hero__stack--dio .dio__stage { margin-right: -2vw; }
  .hero__stack--dio .dio__panel { position: relative; right: auto; bottom: auto; width: auto; max-width: 30rem; margin: 0.5rem 0 0 auto; }
}
/* light / dark switch: bottom left of the hero, clear of the header (1 Oct) */
.hero--layers .hero__grid > .dio__theme { top: 0; right: 0; left: auto; bottom: auto; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 1rem; }
.hero--layers .hero__grid > .dio__theme::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(90deg, #fff 50%, #0f1012 50%); box-shadow: 0 0 0 1.5px currentColor; }
@media (max-width: 59.99rem) { .hero--layers .hero__grid > .dio__theme { position: static; justify-self: start; margin-top: 1rem; min-height: 36px; padding: 0 0.8rem; } }
/* phones: a taller window for the following camera */
@media (max-width: 59.99rem) { .hero__stack--dio .dio__stage { aspect-ratio: 1.05; width: 100%; left: 0; } }
/* Our services on the grey band (1 Oct): cards lift off the grey, drawing panels get their own tint */
#services .cats__card { border-color: rgba(5, 6, 5, 0.06); box-shadow: 0 1px 0 rgba(5, 6, 5, 0.03), 0 18px 40px -28px rgba(5, 6, 5, 0.28); }
#services .cats__media--art { background: radial-gradient(120% 90% at 50% 100%, #fde8f1, #fff7fa 70%); border-bottom: 1px solid rgba(227, 36, 130, 0.08); }
/* data centre card (1 Oct): project management, maintain, repair */
.cats .ca-tag { opacity: 1 !important; animation: none !important; }
.ca-badge rect, .ca-badge circle { fill: #fff; stroke: var(--accent-solid); stroke-width: 1.5; }
.ca-badge__top { stroke: var(--accent-solid); stroke-width: 1.5; }
.ca-badge__tick { fill: none; stroke: var(--accent-solid); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca-badge__wrench { fill: none; stroke: var(--accent-solid); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ca-rack { fill: #6b6c70; }
.ca-rack-led { fill: #4ade80; }
/* data centre card actions: checklist, open cabinet, wrench, sparks */
.ca-clip { fill: #fff; stroke: #8d8e8c; stroke-width: 1; }
.ca-clip-tick { fill: none; stroke: var(--accent-solid); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ca-door { fill: #4a4b50; stroke: #2c2d30; stroke-width: 0.8; }
.ca-fault { fill: #e5484d; }
.ca-wrench { stroke: #3a3b40; stroke-width: 2.6; stroke-linecap: round; }
.ca-wrench-head { fill: none; stroke: #3a3b40; stroke-width: 2; }
.ca-sparks line { stroke: var(--accent-solid); stroke-width: 1.6; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .ca-sparks { animation: ca-spark 1.2s steps(2) infinite; }
  .ca-fault { animation: ca-fault 2.4s steps(1) infinite; }
}
@keyframes ca-spark { 50% { opacity: 0.2; } }
@keyframes ca-fault { 0%, 60% { fill: #e5484d; } 61%, 100% { fill: #4ade80; } }
.ca-panel { fill: #1c1d21; }
/* data centre card: repair made obvious (1 Oct) - work zone, fault badge red ! to green tick */
.ca-work { fill: rgba(227, 36, 130, 0.12); stroke: rgba(227, 36, 130, 0.45); stroke-width: 0.8; stroke-dasharray: 3 2; }
.ca-fix__bg { fill: #22a35a; stroke: #fff; stroke-width: 1.6; }
.ca-fix__ring { fill: none; stroke: #e5484d; stroke-width: 1.4; opacity: 0; }
.ca-fix__mark, .ca-fix__tick { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ca-fix__mark { opacity: 0; }
.ca-sparks line { stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .ca-fix__bg { animation: ca-fix-bg 2.4s steps(1) infinite; }
  .ca-fix__mark { animation: ca-fix-on 2.4s steps(1) infinite; }
  .ca-fix__tick { animation: ca-fix-off 2.4s steps(1) infinite; }
  .ca-fix__ring { transform-box: fill-box; transform-origin: center; animation: ca-fix-ring 2.4s ease-out infinite; }
  .ca-fix { animation: ca-fix-bob 2.4s ease-in-out infinite; }
}
@keyframes ca-fix-bg { 0%, 60% { fill: #e5484d; } 61%, 100% { fill: #22a35a; } }
@keyframes ca-fix-on { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes ca-fix-off { 0%, 60% { opacity: 0; } 61%, 100% { opacity: 1; } }
@keyframes ca-fix-ring { 0%, 30% { opacity: 0.9; transform: scale(0.8); } 58% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; transform: scale(0.8); } }
@keyframes ca-fix-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
/* five-tap check: each problem names the service it points to (1 Oct) */
.finder__opt-t { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; text-align: left; }
.finder__opt-svc { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #f48dbb; line-height: 1.2; }
.finder__opt--svc:hover .finder__opt-svc { color: #fff; }
/* real client logos (images/logos/, 1 Oct): one ink colour, sized by the build
   so each has the same visual weight; no boxes, just even spacing */
.logos__group:has(.logos__item--img) { gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); padding-right: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.logos__item--img { width: auto; height: 5.5rem; padding: 0; border: 0; background: none; }
.logos__item--img img { display: block; max-width: none; height: auto; opacity: 0.62; transition: opacity 0.25s ease; }
.logos__item--img:hover img { opacity: 1; }
@media (max-width: 40rem) { .logos__item--img img { zoom: 0.72; } }
/* ---- hero on phones (5 Oct, iPhone 15 Pro): bigger model, readable labels ---- */
.dio__end { display: none; }
@media (max-width: 59.99rem) {
  .hero__stack--dio .dio__stage { width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: 0.95; }
  .dk-tag__in { transform-box: fill-box; transform-origin: center; scale: var(--lab, 1); transition: scale 0.3s ease; }
  /* zoomed out at the finish: the station pills would overlap, the badge below says it instead */
  .dio.is-out .dk-tag--svc, .dio.is-out .dk-tag--main { opacity: 0 !important; }
  .dio__end { display: flex; align-items: center; gap: 0.6rem; position: absolute; left: 50%; top: 0.75rem; translate: -50% 6px; margin: 0;
    padding: 0.6rem 1rem 0.6rem 0.7rem; border-radius: 14px; background: #fff; color: var(--ink); white-space: nowrap;
    box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6); font-size: 0.8rem; line-height: 1.3; color: var(--ink-muted);
    opacity: 0; transition: opacity 0.4s ease, translate 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
  .dio__end b { display: block; font: 700 0.95rem/1.25 var(--font-body); color: var(--ink); }
  .dio__end svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--accent-solid); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .dio.is-out.is-closed .dio__end { opacity: 1; translate: -50% 0; }
  .hero--light .dio__end { background: var(--ink); color: rgba(255, 255, 255, 0.7); }
  .hero--light .dio__end b { color: #fff; }
  .hero--light .dio__end svg { stroke: #f48dbb; }
  .dio__cap b { font-size: 1.15rem; }
  .dio__cap span { font-size: 1rem; }
}
/* ---- Smart safe city, zone version (5 Oct): boundary on the ground + pavement network ---- */
.cn-ring { fill: rgba(227, 36, 130, 0.035); stroke: var(--accent-solid); stroke-width: 1.6; stroke-dasharray: 8 6; stroke-linejoin: round; opacity: 0.75; }
.cn-net { fill: none; stroke: #eaa2c3; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cn--zone .cn-link--g { stroke: transparent; stroke-width: 4.5; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; }
.cn--zone .cn-link--g.is-lit { stroke: var(--accent-solid); }
.cn--zone .cn-node { fill: #fff; stroke: #e58cb5; stroke-width: 2; }
.cn--zone .cn-node.is-lit { fill: var(--accent-solid); stroke: #fff; }
.cn--zone .cn-node--dc { fill: var(--accent-solid); stroke: #fff; }
.cn--zone .cn-links--g { pointer-events: none; }
/* the tapped spot shows through its line, the buildings stay grey */
.cn--zone .tm-zone.is-lit .tm-win--left, .cn--zone .tm-zone.is-lit .tm-vent { fill: #d8d5d6; }
.cn--zone .tm-zone.is-lit .tm-win--right, .cn--zone .tm-zone.is-lit .tm-vent--r { fill: #cbc7c9; }
.is-night .cn--zone .cn-ring { stroke: #f48dbb; fill: rgba(244, 141, 187, 0.05); }
.is-night .cn--zone .cn-net { stroke: rgba(244, 141, 187, 0.35); }
.is-night .cn--zone .cn-link--g.is-lit { stroke: #f48dbb; }
.is-night .cn--zone .cn-node { fill: #1d1e22; stroke: #f48dbb; }
.is-night .cn--zone .cn-node.is-lit { fill: #f48dbb; }
.cn-net--stub { stroke-width: 2.5; }
/* phones: the zone town runs edge to edge so the pins have room (5 Oct) */
@media (max-width: 40rem) {
  .cn--zone .cn__town { width: 100vw; margin-left: calc(50% - 50vw); margin-top: -1.5rem; }
  .cn--zone .cn__pin { width: 36px; height: 36px; margin: -43px 0 0 -18px; font-size: 0.7rem; }
}
/* taps on phones (5 Oct): a bigger invisible target round each pin, no
   double-tap zoom delay, no grey flash, no hover lift stuck after a tap */
.cn__pin, .cn__town, .cn__time { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cn__pin::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.cn__pin.is-active { z-index: 2; }
@media (hover: none) { .cn .tm-hit { -webkit-tap-highlight-color: transparent; } }
/* ---- Smooth on phones (5 Oct) ----
   Anything off screen stops animating; on touch screens the costly effects go:
   blurred glass behind moving drawings, the pulsing grain, drifting dots and
   blur or glow filters inside the drawings (phones redraw those every frame). */
.is-off, .is-off * { animation-play-state: paused !important; }
@media (max-width: 60rem), (hover: none) {
  .nav, .hero .btn--ghost { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav { background: rgba(255, 255, 255, 0.95); }
  .nav-wrap.is-dark .nav { background: rgba(22, 23, 26, 0.95); }
  .hero .btn--ghost { background-color: rgba(255, 255, 255, 0.94); }
  .hero::after, .shero--textured::after, .shero--tinted::after { display: none; }
  .shero__dots { animation: none; }
  :is(.ca-shadow, .hs-shadow, .hs-glow, .hs-car__shadow, .hc-shadow, .hc-glow) { filter: none; }
  .ca-shadow { fill: rgba(5, 6, 5, 0.06); }
  .hs-car__shadow { fill: rgba(0, 0, 0, 0.18); }
  :is(.ca-tag, .ahero__bubble path, .svca-badge, .svca-photo rect, .hf-line, .hf-spark, .hf-branch, .hf-gate__box, .hf-alert circle, .hf-t--done rect,
      .dk-track, .dk-arc, .dk-ring, .svc--bento .ca-pink, .svc--bento .ca-p-l, .svc--bento .ca-p-top, .svc--bento .ca-lamp) { filter: none !important; }
  .ca-tag__pill { stroke: rgba(5, 6, 5, 0.12); stroke-width: 0.8; }
  .cn-pool { filter: none; }
  .is-night .cn .cn-pool { opacity: 0.16; }
  .svc--bento :is(.ca-pink, .ca-p-l, .ca-p-top, .ca-screen, .ca-card--on) { animation: none !important; }
}
/* contact form (5 Oct): sending state, result message, WhatsApp alternative */
.contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact__submit:disabled { opacity: 0.6; cursor: progress; }
.contact__status { margin: 0; padding: 0.8rem 1rem; border-radius: 12px; font-size: 0.95rem; background: var(--surface-alt, #f4f4f2); }
.contact__status.is-ok { background: #e9f7ef; color: #166534; }
.contact__status.is-err { background: #fdecec; color: #9b1c1c; }
.contact__alt { margin: 0; font-size: 0.95rem; color: var(--ink-muted); }
.contact__alt a { color: var(--accent-solid-strong); font-weight: 600; }