/* ==========================================================================
   0. FONTS — Sora (headings) and Inter (body), both from fonts-library/, both variable.
   ========================================================================== */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/sora/sora-100-800-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-100-900-normal.woff2") format("woff2-variations");
}

/* ==========================================================================
   1. TOKENS
   Classical Soft — dark and gold. Started from styles/bold-creative/style.css, then retuned
   (SITE-PLAN §3): gold on near-black, Sora + Inter, medium radius, no overshoot, gold glow
   shadows. The admin sets --primary, --bg, --text and --font on :root right after this
   stylesheet loads; every other colour below is derived from those four with color-mix(), so
   the whole site turns over when the theme changes. Never hardcode a second brand colour
   outside this block.

   Size and space are fluid: clamp(min, preferred, max) grows smoothly between a phone (about
   360px) and a wide screen (about 1440px), so there are no breakpoints to tune.
   ========================================================================== */

:root {
  /* the four the admin overwrites — this design's own defaults */
  --primary: #e8c25a;
  --bg: #111114;
  --text: #f4efe2;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;

  /* the display family for headings (the kit falls back to --font when this is missing) */
  --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* derived colours — color-mix() only, never a new literal colour */
  --primary-hover: color-mix(in srgb, var(--primary) 78%, white);
  --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--bg));
  --muted: color-mix(in srgb, var(--text) 64%, var(--bg));
  --border: color-mix(in srgb, var(--text) 12%, var(--bg));
  --surface: color-mix(in srgb, var(--bg) 95%, var(--text));
  --surface-2: color-mix(in srgb, var(--bg) 90%, var(--text));
  --on-primary: color-mix(in srgb, black 88%, var(--primary));
  --glass: color-mix(in srgb, var(--text) 5%, transparent);
  --glass-2: color-mix(in srgb, var(--text) 9%, transparent);
  --hairline: color-mix(in srgb, var(--text) 14%, transparent);
  --glow: color-mix(in srgb, var(--primary) 24%, transparent);
  --glow-strong: color-mix(in srgb, var(--primary) 46%, transparent);

  /* fixed colours, never from the theme: a status badge stays green / amber / red whatever the
     brand colour is, and the lightbox / video overlays are always dark */
  --status-ok: #05683c;
  --status-ok-bg: #e6f5ee;
  --status-low: #92400e;
  --status-low-bg: #fef3c7;
  --status-out: #b42318;
  --status-out-bg: #fdeceb;
  --backdrop: rgba(10, 8, 6, 0.85);
  --on-backdrop: rgba(255, 255, 255, 0.9);
  --hero-shade-top: rgba(20, 16, 12, 0.25);
  --hero-shade-bottom: rgba(20, 16, 12, 0.6);

  /* layout */
  --container: 76rem;
  --gutter: clamp(1rem, 0.4rem + 2.8vw, 2.5rem);
  --section-y: clamp(4.5rem, 2.6rem + 7vw, 8.5rem);
  /* the sticky header's height: a guess until js/site.js measures it (and when JavaScript is off) */
  --header-h: 4.5rem;

  /* spacing scale — fluid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: clamp(0.875rem, 0.8rem + 0.35vw, 1.125rem);
  --space-4: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --space-5: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --space-6: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --space-7: clamp(3.5rem, 2.3rem + 5vw, 6.5rem);
  --space-8: clamp(4.5rem, 2.6rem + 7vw, 8.5rem);

  /* radius scale — medium: cards 20px, buttons pill */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --btn-radius: var(--radius-full);

  /* shadows — never grey: black depth and a faint gold glow */
  --shadow-sm: 0 1px 2px color-mix(in srgb, black 50%, transparent);
  --shadow-md: 0 14px 34px -14px var(--glow);
  --shadow-lg: 0 40px 80px -36px var(--glow-strong);

  /* type scale — fluid, about a 1.25–1.33 ratio */
  --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --text-xl: clamp(1.3rem, 1.15rem + 0.75vw, 1.7rem);
  --text-2xl: clamp(1.65rem, 1.3rem + 1.6vw, 2.35rem);
  --text-3xl: clamp(2rem, 1.4rem + 2.8vw, 3.3rem);
  --text-4xl: clamp(2.35rem, 1.5rem + 3.7vw, 4.25rem);
  --text-5xl: clamp(3rem, 1.6rem + 6vw, 6.25rem);
  --leading-tight: 1.06;
  --tracking-tight: -0.03em;
  --tracking-caps: 0.14em;

  /* motion — no overshoot anywhere; 0.5–0.7 s for the slow ones */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.45s;
  --duration-slow: 0.7s;
}

/* The text on a gold button follows the gold's own lightness, so a theme with a dark primary gets
   light text. Browsers without relative colours keep the dark fallback above. */
@supports (color: oklch(from red l c h)) {
  :root {
    --on-primary: oklch(from var(--primary) clamp(0.14, calc((0.64 - l) * 1000), 0.97) calc(c * 0.14) h);
  }
}

/* ==========================================================================
   2. BASE AND RESET
   ========================================================================== */

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

html {
  color-scheme: dark;
  /* smooth scrolling is the motion pack's Lenis; the browser's own stays off */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  /* clip, not hidden: nothing may push the page sideways, and sticky parts keep working */
  overflow-x: clip;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Falls back to --font when a style defines only one family — see fonts-library/FONTS.md. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display, var(--font));
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

p,
li,
blockquote {
  text-wrap: pretty;
}

/* Bangla needs more air: tight tracking breaks its joined letters and its marks need height. */
:lang(bn) {
  letter-spacing: 0;
}

:lang(bn) body {
  line-height: 1.85;
}

:lang(bn) :is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.35;
  letter-spacing: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

a {
  color: var(--primary);
  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--primary-hover);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Wide things (tables, code, wide images) scroll in place, never the page. */
pre,
table,
.overflow-x {
  max-width: 100%;
  overflow-x: auto;
}

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

::selection {
  background: color-mix(in srgb, var(--primary) 32%, transparent);
  color: var(--text);
}

/* Anchors (SITE-PLAN §4): a block the menu jumps to stops below the sticky header, never under it.
   The browser, scrollIntoView and Lenis all read scroll-margin-top. js/site.js focuses the block it
   scrolled to (tabindex -1), which needs no ring. */
main [id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-3));
}

/* With JavaScript off nothing measures the header, and its plain nav list wraps into 2–3 rows
   below the desktop breakpoint — so give the margin the height those rows really take. */
@media (max-width: 62rem) {
  html:not(.kit-js) { --header-h: 8.5rem; }
}

@media (max-width: 29.99rem) {
  html:not(.kit-js) { --header-h: 10.75rem; }
}

[tabindex="-1"]:focus {
  outline: none;
}

/* Every section is a container: its parts answer to the section's own width (@container), not
   to the window, so a section laid out in a narrow column or beside another still fits. */
:where(main > section, main > article) {
  container-type: inline-size;
}

/* Lenis (the motion pack's smooth scroll) asks for these two rules */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* js/site.js creates one of these after each form to announce data.message or data.error
   (DESIGN-CONTRACT.md → "Forms"). No new colour — an error just reads bolder. */
.formStatus {
  margin-top: var(--space-2);
  color: var(--muted);
}

.formStatus--error {
  color: var(--text);
  font-weight: 600;
}

/* Written by the engine after a paginated listing, with no CSS of its own — DESIGN-CONTRACT.md →
   "Collections". Styled here once for every listing section. */
.pager {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

.pager__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager__step,
.pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75em;
  padding: 0.45em 0.9em;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.pager__step:hover,
.pager__page:hover {
  background: var(--glass-2);
  border-color: var(--hairline);
  color: var(--text);
}

.pager__page.is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}

.pager__gap {
  color: var(--muted);
}

/* ==========================================================================
   3. THE KIT'S MOTION HELPERS
   data-animate: fade-up | fade-in | slide-left | slide-right | scale-in | clip-reveal |
   parallax | count-up | split-words | split-lines. data-animate-delay="0.2" (seconds) and
   data-animate-stagger="0.1" (on a parent) set the order.

   Where the browser can scroll-drive an animation (animation-timeline: view()), CSS does it all,
   with no script: an element is in its end state once it is in view, and a page whose JavaScript
   fails still shows everything as it is scrolled to. Elsewhere js/kit-head.js adds "kit-io" to
   <html> and js/kit.js reveals with IntersectionObserver instead; nothing is hidden for good (the
   failsafe below). With reduced motion, and on paper, every element shows its end state.
   Put data-animate on small things, and wrap them in overflow: clip rather than overflow: hidden
   (hidden makes the wrapper the scroller that the animation follows).
   ========================================================================== */

/* where each preset starts; the keyframes below play it to nothing */
[data-animate="fade-up"] { --kit-op: 0; --kit-tf: translateY(var(--space-4)); }
[data-animate="fade-in"] { --kit-op: 0; --kit-tf: none; }
[data-animate="slide-left"] { --kit-op: 0; --kit-tf: translateX(var(--space-5)); }
[data-animate="slide-right"] { --kit-op: 0; --kit-tf: translateX(calc(-1 * var(--space-5))); }
[data-animate="scale-in"] { --kit-op: 0; --kit-tf: scale(0.92); }
.kit-w { --kit-op: 0; --kit-tf: translateY(0.5em); display: inline-block; }

@keyframes kitIn {
  from { opacity: var(--kit-op, 1); transform: var(--kit-tf, none); }
  to { opacity: 1; transform: none; }
}
@keyframes kitClip {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0% 0); }
}
@keyframes kitParallax {
  from { transform: translateY(7%); }
  to { transform: translateY(-7%); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Scroll-driven: from just peeking in to half in. --kit-n (set by kit.js) pushes that later. */
  @supports (animation-timeline: view()) {
    :is([data-animate="fade-up"], [data-animate="fade-in"], [data-animate="slide-left"],
        [data-animate="slide-right"], [data-animate="scale-in"], .kit-w) {
      --kit-s: min(calc(var(--kit-n, 0) * 6%), 40%);
      animation: kitIn linear both;
      animation-timeline: view();
      animation-range: entry var(--kit-s) entry calc(var(--kit-s) + 50%);
    }
    [data-animate="clip-reveal"] {
      --kit-s: min(calc(var(--kit-n, 0) * 6%), 40%);
      animation: kitClip linear both;
      animation-timeline: view();
      animation-range: entry var(--kit-s) entry calc(var(--kit-s) + 50%);
    }
    [data-animate="parallax"] {
      animation: kitParallax linear both;
      animation-timeline: view();
    }
  }

  /* The first section is on screen at first paint, so it plays once on load instead. */
  main > section:first-of-type :is([data-animate="fade-up"], [data-animate="fade-in"],
      [data-animate="slide-left"], [data-animate="slide-right"], [data-animate="scale-in"], .kit-w) {
    animation: kitIn var(--duration-slow) var(--ease-standard) calc(var(--kit-n, 0) * 0.1s) both;
    animation-timeline: auto;
  }
  main > section:first-of-type [data-animate="clip-reveal"] {
    animation: kitClip var(--duration-slow) var(--ease-standard) calc(var(--kit-n, 0) * 0.1s) both;
    animation-timeline: auto;
  }

  /* No scroll-driven animations: kit.js adds .kit-in as an element comes into view. */
  html.kit-io :is([data-animate="fade-up"], [data-animate="fade-in"], [data-animate="slide-left"],
      [data-animate="slide-right"], [data-animate="scale-in"], .kit-w) {
    opacity: var(--kit-op);
    transform: var(--kit-tf);
    transition: opacity var(--duration-slow) var(--ease-standard) calc(var(--kit-n, 0) * 0.1s),
                transform var(--duration-slow) var(--ease-standard) calc(var(--kit-n, 0) * 0.1s);
  }
  html.kit-io [data-animate="clip-reveal"] {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--duration-slow) var(--ease-standard) calc(var(--kit-n, 0) * 0.1s);
  }
  html.kit-io .kit-in {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0% 0);
  }

  /* The failsafe: if kit.js never arrives (a file missing, a request blocked), kit.js never adds
     "kit-ready", and everything shows 2.5s in. kit-ready cancels it on a normal load. */
  @keyframes kitFailsafe {
    to { opacity: 1; transform: none; clip-path: inset(0 0 0% 0); }
  }
  html.kit-io:not(.kit-ready) :is([data-animate], .kit-w) {
    animation: kitFailsafe 0.01s linear 2.5s forwards;
  }
}

@media print {
  [data-animate], .kit-w {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* Page changes — cross-document View Transitions, no script. A browser without them just loads
   the next page. The header keeps still (view-transition-name: site-header) while the rest cross-fades. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-base);
  animation-timing-function: var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ==========================================================================
   4. SHARED PARTS — used by every page (documented in DESIGN-SYSTEM.md and SITE-PLAN §8)
   Buttons, eyebrow and section headings, cards, badges, the SVG mockup frame, the page hero
   and the closing banner. A section built later reuses these instead of inventing its own.
   ========================================================================== */

/* ---- icons: inline <svg class="icon"> with a 24x24 viewBox, stroked in currentColor ---- */
.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- buttons: .btn (gold) · .btn--ghost (hairline) · size .btn--sm / .btn--lg · .btn--arrow ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.55em;
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid var(--primary);
  border-radius: var(--btn-radius);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast),
              transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base);
}

.btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--on-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: none;
}

.btn--lg {
  padding: 1em 1.9em;
  font-size: calc(var(--text-base) * 1.04);
}

.btn--sm {
  padding: 0.6em 1.2em;
  font-size: var(--text-sm);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--hairline);
}

.btn--ghost:hover {
  background: var(--glass-2);
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  color: var(--text);
  box-shadow: none;
}

/* kept from the kit so a sample section still renders: a light button */
.btn--light {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.btn--light:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* an arrow written in CSS, so an editable link never carries markup */
.btn--arrow::after,
.textLink::after {
  content: "\2192";
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn--arrow:hover::after,
.textLink:hover::after {
  transform: translateX(0.2em);
}

/* a quiet link: gold, bold, an arrow */
.textLink {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.textLink:hover {
  color: var(--primary-hover);
}

/* ---- the small label above a heading, and the heading pair ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

:lang(bn) .eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

/* .sectionHead wraps an eyebrow, a .sectionTitle and (optionally) a .sectionLead */
.sectionHead {
  max-width: 44rem;
  margin-bottom: var(--space-6);
}

.sectionHead--center {
  margin-inline: auto;
  text-align: center;
}

.sectionHead--center .eyebrow {
  justify-content: center;
}

.sectionTitle {
  margin-top: var(--space-3);
  font-size: var(--text-3xl);
}

.sectionLead {
  max-width: 36em;
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-lg);
}

.sectionHead--center .sectionLead {
  margin-inline: auto;
}

/* ---- cards: dark glass, a hairline, a gold edge on hover. .card, .card--link, .iconBadge ---- */
.card,
.storyStep,
.slider__slide {
  position: relative;
  padding: var(--space-5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 6%, transparent), color-mix(in srgb, var(--text) 2%, transparent));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-base) var(--ease-out);
}

.card:hover,
.card--link:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: 0 30px 60px -36px var(--glow-strong);
}

.card--link {
  cursor: pointer;
}

.card__title {
  font-size: var(--text-lg);
}

.card__body {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}

.iconBadge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.5rem;
}

/* ---- badges: .badge (neutral) · --live (a product you can try) · --soon (not yet) · --gold ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  padding: 0.3em 0.85em;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  background: var(--glass);
  color: color-mix(in srgb, var(--text) 84%, transparent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.badge--live {
  background: var(--status-ok-bg);
  border-color: transparent;
  color: var(--status-ok);
}

.badge--live::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}

.badge--soon {
  background: var(--status-low-bg);
  border-color: transparent;
  color: var(--status-low);
}

.badge--gold {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
  color: var(--primary);
}

/* ---- the SVG mockup frame: draw the product in images/mockups/*.svg, wrap it in .mockup.
        Default = a browser window; --device = a tablet bezel; --bare = the picture only. ---- */
.mockup {
  position: relative;
  margin: 0;
  overflow: clip;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
}

.mockup__bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 0.95rem;
  background: color-mix(in srgb, var(--text) 4%, var(--bg));
  border-bottom: 1px solid var(--border);
}

.mockup__bar i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 24%, transparent);
}

.mockup__bar i:first-child {
  background: var(--primary);
}

.mockup__screen {
  display: block;
  width: 100%;
  height: auto;
}

.mockup--device {
  padding: 0.55rem;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--text) 10%, var(--bg));
}

.mockup--device .mockup__screen {
  border-radius: calc(var(--radius-xl) - 0.55rem);
}

.mockup--bare {
  background: none;
}

/* ---- quiet grain and the soft gold glow behind a hero: add .grain to a section ---- */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/brand/grain.svg");
  opacity: 0.07;
  pointer-events: none;
}

/* ---- the page hero: .heroSplit (copy + picture) and .heroBigtype (type only) ---- */
.heroSplit {
  position: relative;
  isolation: isolate;
  padding: var(--space-6) var(--gutter) var(--section-y);
  overflow: clip;
}

.heroSplit::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34% -12% auto auto;
  width: 64rem;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 22%, transparent), transparent);
}

.heroSplit__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@container (min-width: 56rem) {
  .heroSplit__inner {
    grid-template-columns: 1.02fr 1fr;
    gap: var(--space-5);
  }
}

.heroSplit__title {
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--text-4xl);
}

.heroSplit__lead {
  max-width: 34em;
  margin-bottom: var(--space-5);
  font-size: var(--text-lg);
  color: var(--muted);
}

.heroSplit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.heroSplit__note {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}

.heroSplit__note .icon {
  color: var(--primary);
}

.heroSplit__image {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.heroBigtype {
  position: relative;
  isolation: isolate;
  padding: var(--space-7) var(--gutter) var(--space-6);
  overflow: clip;
}

.heroBigtype::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% auto auto -10%;
  width: 56rem;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 18%, transparent), transparent);
}

.heroBigtype__inner {
  max-width: var(--container);
  margin-inline: auto;
}

.heroBigtype__title {
  max-width: 14ch;
  margin-top: var(--space-3);
  font-size: var(--text-5xl);
  line-height: 1;
}

.heroBigtype__lead {
  max-width: 36em;
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  color: var(--muted);
}

/* ---- the closing banner (sections/cta-band): a glass panel under a gold glow, one or two links ---- */
.ctaBand {
  padding: var(--section-y) var(--gutter);
}

.ctaBand__inner {
  position: relative;
  isolation: isolate;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  overflow: clip;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(40rem 22rem at 50% -12%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  text-align: center;
}

.ctaBand__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/brand/grain.svg");
  opacity: 0.06;
  pointer-events: none;
}

.ctaBand__title {
  max-width: 20ch;
  font-size: var(--text-3xl);
}

.ctaBand__lead {
  max-width: 38em;
  color: var(--muted);
  font-size: var(--text-lg);
}

.ctaBand__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ==========================================================================
   5. HEADER AND FOOTER — the same on every page (direct children of <body>)
   ========================================================================== */

/* sections/header + header-dropdown — sticky dark glass. The header is not a section (it sits
   outside <main>), so its one breakpoint is a media query. */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--space-3) var(--gutter);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--border);
  view-transition-name: site-header;
}

.siteHeader__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.siteHeader__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  color: var(--text);
  font-family: var(--font-display, var(--font));
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.siteHeader__logo:hover {
  color: var(--text);
}

/* the official round "CS" logo: one 96 px WebP (about 5 KB), shown at 2.5rem so it stays sharp on a high-density screen */
.logoMark {
  flex: none;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.siteHeader__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.siteHeader__nav a {
  position: relative;
  padding-block: 0.4em;
  text-decoration: none;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--duration-fast);
}

.siteHeader__nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.siteHeader__nav a:hover {
  color: var(--text);
}

.siteHeader__nav a:hover::after,
.siteHeader__nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.siteHeader__nav a[aria-current="page"] {
  color: var(--text);
}

.siteHeader__actions {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.siteHeader__cta {
  padding: 0.65em 1.25em;
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* the dropdown (sections/header-dropdown): opens on hover and on keyboard focus, no script */
.siteNav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.siteNav__item {
  position: relative;
}

/* every top-level link is built the same way (a flex box, chevron or not), so Home, About, Work,
   Services and Products all sit on one line */
.siteNav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  line-height: 1.4;
}

.siteNav__item--sub > a::before {
  content: "";
  order: 2;
  width: 0.38em;
  height: 0.38em;
  margin-top: -0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast);
}

.siteNav__item--sub:hover > a::before,
.siteNav__item--sub:focus-within > a::before {
  transform: rotate(225deg) translate(-0.1em, -0.1em);
}

.siteNav__sub {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-4));
  z-index: 10;
  min-width: 15rem;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: color-mix(in srgb, var(--bg) 94%, var(--text));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-out), visibility 0s var(--duration-fast);
}

/* a bridge, so the pointer can cross the gap between the link and the list */
.siteNav__sub::before {
  content: "";
  position: absolute;
  inset: -0.8rem 0 auto;
  height: 0.8rem;
}

.siteNav__item:hover > .siteNav__sub,
.siteNav__item:focus-within > .siteNav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* After a click on an item the pointer is still over the list: js/site.js adds "is-dismissed" so the
   dropdown closes at once, and takes it off again when the pointer leaves. A wide screen only — in the
   phone's drawer the list is always open. */
@media (min-width: 62.01rem) {
  .siteNav__item.is-dismissed > .siteNav__sub {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition-delay: 0s, 0s, 0s;
  }
}

.siteNav__sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6em 0.85em;
  border-radius: var(--radius-md);
  color: var(--text);
}

.siteNav__sub a::after {
  display: none;
}

.siteNav__sub a:hover {
  background: var(--glass-2);
}

/* "Soon" beside Email Marketing, written in CSS so the menu link stays one plain link. It matches the
   end of the address (products.html#email-marketing, or /products#email-marketing once the engine has
   rewritten the link), not the whole of it. */
.siteNav__sub a[href$="#email-marketing"]::after {
  content: "Soon";
  display: inline-block;
  position: static;
  height: auto;
  padding: 0.1em 0.65em;
  border-radius: var(--radius-full);
  background: var(--status-low-bg);
  color: var(--status-low);
  font-size: var(--text-xs);
  font-weight: 700;
  transform: none;
  transition: none;
}

/* The toggle button and the collapsing drawer both need real JavaScript running to make
   sense, so both stay out of the way entirely until js/kit-head.js has added "kit-js" — without
   it (JavaScript off, or a vendor file missing) the nav is just the plain list above, wrapping
   naturally at any width. */
.siteHeader__menuBtn {
  display: none;
}

.siteHeader__menuIcon,
.siteHeader__menuIcon::before,
.siteHeader__menuIcon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.siteHeader__menuIcon {
  position: relative;
}

.siteHeader__menuIcon::before,
.siteHeader__menuIcon::after {
  content: "";
  position: absolute;
  left: 0;
}

.siteHeader__menuIcon::before {
  top: -6px;
}

.siteHeader__menuIcon::after {
  top: 6px;
}

@media (max-width: 62rem) {
  html.kit-js .siteHeader__menuBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    order: 2;
    padding: 0.55em 0.95em;
    background: none;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-full);
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
  }

  html.kit-js .siteHeader__inner {
    flex-wrap: wrap;
  }

  html.kit-js .siteHeader__logo,
  html.kit-js .siteHeader__actions {
    flex: none;
  }

  html.kit-js .siteHeader__logo {
    margin-right: auto;
  }

  html.kit-js .siteHeader__actions {
    order: 1;
  }

  html.kit-js .siteHeader__nav {
    display: none;
    order: 3;
    width: 100%;
    padding: var(--space-3) 0 var(--space-2);
  }

  html.kit-js .siteHeader__nav.is-open {
    display: flex;
  }

  html.kit-js .siteNav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
  }

  html.kit-js .siteHeader__nav a {
    font-size: var(--text-base);
  }

  html.kit-js .siteNav__sub {
    position: static;
    min-width: 0;
    padding: var(--space-1) 0 0 var(--space-3);
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  html.kit-js .siteNav__sub::before {
    display: none;
  }

  html.kit-js .siteNav__item--sub > a::before {
    display: none;
  }

  html.kit-js .siteNav__sub a {
    justify-content: flex-start;
    padding: 0.4em 0;
    color: var(--muted);
    font-size: var(--text-sm);
  }

  html.kit-js .siteNav__sub a:hover {
    background: none;
    color: var(--text);
  }
}

/* JavaScript off, narrow screen: the plain list gets its own row under the logo and the button */
@media (max-width: 62rem) {
  html:not(.kit-js) .siteHeader__inner {
    flex-wrap: wrap;
  }

  html:not(.kit-js) .siteHeader__logo,
  html:not(.kit-js) .siteHeader__actions {
    flex: none;
  }

  html:not(.kit-js) .siteHeader__logo {
    margin-right: auto;
  }

  html:not(.kit-js) .siteHeader__nav {
    order: 3;
    width: 100%;
  }
}

/* on a phone the button leaves the bar and joins the opened menu, so the bar keeps its room */
@media (max-width: 36rem) {
  html.kit-js .siteHeader__actions {
    display: none;
    order: 4;
    width: 100%;
    padding-bottom: var(--space-2);
  }

  html.kit-js .siteHeader.is-menu-open .siteHeader__actions {
    display: flex;
  }

  html.kit-js .siteHeader__cta {
    width: 100%;
    padding: 0.85em 1.2em;
    font-size: var(--text-base);
  }

  .siteHeader__menuLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: clip;
    clip-path: inset(50%);
  }
}

/* sections/footer */
.siteFooter {
  position: relative;
  padding: var(--space-7) var(--gutter) var(--space-5);
  background: color-mix(in srgb, var(--bg) 78%, black);
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.siteFooter__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
}

.siteFooter__grid {
  display: grid;
  gap: var(--space-5) var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.siteFooter__brand {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.siteFooter__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  color: var(--text);
  font-family: var(--font-display, var(--font));
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.siteFooter__logo:hover {
  color: var(--text);
}

.siteFooter__tagline {
  max-width: 24em;
  font-size: var(--text-sm);
}

.siteFooter__entity {
  max-width: 24em;
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--muted);
}

.siteFooter__contact {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.siteFooter__contact a {
  width: fit-content;
  color: var(--text);
  text-decoration: none;
}

.siteFooter__contact a:hover {
  color: var(--primary);
}

.siteFooter__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.siteFooter__social a {
  padding: 0.35em 0.9em;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}

.siteFooter__social a:hover {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  color: var(--primary);
}

.siteFooter__heading {
  margin-bottom: var(--space-3);
  color: var(--text);
  font-family: var(--font-display, var(--font));
  font-size: var(--text-sm);
  font-weight: 600;
}

.siteFooter__list {
  display: grid;
  gap: 0.55em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.siteFooter__list a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.siteFooter__list a:hover {
  color: var(--primary);
}

.siteFooter__list .badge {
  margin-left: 0.4em;
  padding: 0.1em 0.6em;
}

.siteFooter__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}

.siteFooter__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.siteFooter__legal a {
  color: var(--muted);
  text-decoration: none;
}

.siteFooter__legal a:hover {
  color: var(--primary);
}

@media (min-width: 52rem) {
  .siteFooter__grid {
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  }

  .siteFooter__brand {
    grid-column: auto;
  }
}

/* ---- lead capture (SITE-PLAN 5b): trust strip, micro-copy, the closing lead band with its short
   enquiry form, and the phone's sticky bar. The form's inputs are written by the engine as
   .formField… (DESIGN-CONTRACT.md → "Forms"); the raw label/input inside data-form-fields is styled
   the same, so a plain preview looks right too. ---- */

/* a line of proof close to a first button: figure in gold, words in full text colour */
.trustStrip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  font-size: var(--text-base);
  font-weight: 500;
}

.trustStrip li {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

.trustStrip strong {
  font-family: var(--font-display, var(--font));
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}

/* the small reassurance that sits right beside a button (what it costs, what happens next) */
.microcopy {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--muted);
  font-size: var(--text-sm);
}

.microcopy .icon {
  color: var(--primary);
}

.ctaLead {
  padding: var(--section-y) var(--gutter);
}

.ctaLead__inner {
  position: relative;
  isolation: isolate;
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  overflow: clip;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(40rem 22rem at 20% -12%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}

.ctaLead__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/brand/grain.svg");
  opacity: 0.06;
  pointer-events: none;
}

.ctaLead__title {
  max-width: 16ch;
  margin: var(--space-3) 0;
  font-size: var(--text-3xl);
}

.ctaLead__lead {
  max-width: 32em;
  color: var(--muted);
  font-size: var(--text-lg);
}

.ctaLead__points {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}

.ctaLead__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
}

.ctaLead__points .icon {
  margin-top: 0.2em;
  color: var(--primary);
}

.ctaLead__call {
  margin-top: var(--space-4);
  color: var(--muted);
}

.ctaLead__call a {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.leadForm {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg) 82%, black);
}

.leadForm__title {
  font-size: var(--text-xl);
}

/* name · email · phone · interest sit two by two once the form is wide enough; the message runs full width */
.leadForm [data-form-fields] {
  display: grid;
  gap: var(--space-3);
}

.leadForm [data-form-fields] > :last-child {
  grid-column: 1 / -1;
}

.leadForm [data-form-fields] label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
}

.leadForm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.leadForm__actions .btn {
  flex: 1 1 12rem;
}

.formField {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.formField__label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.formField__req {
  margin-left: 0.2em;
  color: var(--primary);
}

.formField__input,
.leadForm [data-form-fields] :is(input, textarea, select) {
  width: 100%;
  padding: 0.7em 0.95em;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 400;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.formField__input:focus-visible,
.leadForm [data-form-fields] :is(input, textarea, select):focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

textarea.formField__input,
.leadForm [data-form-fields] textarea {
  min-height: 5rem;
  resize: vertical;
}

.formField__help {
  color: var(--muted);
  font-size: var(--text-xs);
}

.formField--check {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.formField--check .formField__input {
  width: auto;
  accent-color: var(--primary);
}

@container (min-width: 56rem) {
  .ctaLead__inner {
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: var(--space-7);
    padding: var(--space-7) var(--space-6);
  }

  .leadForm {
    padding: var(--space-5);
  }
}

@container (min-width: 70rem) {
  .leadForm [data-form-fields] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 34rem) {
  .ctaLead__inner {
    padding-inline: var(--space-5);
  }
}

/* the sticky bar lives in the footer (so it is the same on every page) and shows on a phone only:
   WhatsApp and the main enquiry button. It slides in after the first screen where the browser can
   follow the scroll, and it steps out of the way while the menu is open or a form is being filled. */
.stickyBar {
  display: none;
}

.stickyBar__chat::before {
  content: "";
  flex: none;
  width: 1.2em;
  height: 1.2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4 4v-4H6.5A2.5 2.5 0 0 1 4 13.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4 4v-4H6.5A2.5 2.5 0 0 1 4 13.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 47.99rem) {
  .stickyBar {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(14px);
    transition: translate var(--duration-base) var(--ease-out);
  }

  .stickyBar .btn {
    padding: 0.75em 1.05em;
    font-size: var(--text-sm);
  }

  .stickyBar__cta {
    flex: 1;
  }

  body:has(.siteHeader.is-menu-open) .stickyBar,
  body:has(form:focus-within) .stickyBar {
    translate: 0 100%;
  }

  /* room under the last line of the footer, so the bar never covers it */
  .siteFooter {
    padding-bottom: calc(var(--space-5) + 4.25rem);
  }
}

@keyframes stickyBarIn {
  from { opacity: 0; transform: translateY(100%); visibility: hidden; }
  to { opacity: 1; transform: none; visibility: visible; }
}

@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .stickyBar {
      animation: stickyBarIn linear both;
      animation-timeline: scroll(root block);
      animation-range: 280px 520px;
    }
  }
}

/* ==========================================================================
   6. SECTIONS — paste each section's own section.css here, restyled, in the order the sections
   appear on the page. This file stays the page's only stylesheet. (Home uses: hero, marquee,
   bento, sticky-story, stats, process, slider, logos, faq and cta-band.)
   ========================================================================== */

/* ---- home hero: the headline, and a collage of two drawn product screens ---- */
.heroSplit--home .heroSplit__title {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem);
}

/* the headline is split into letters by js/site.js (SplitText). Until that has run it waits,
   invisible, so the letters can arrive one by one — but never for good: if the script is
   missing, the failsafe below shows it after 2.5s. Without JavaScript (no "kit-js") or with
   reduced motion it is simply there. */
@media (prefers-reduced-motion: no-preference) {
  html.kit-js [data-split-chars]:not(.is-split) {
    opacity: 0;
    animation: splitFailsafe 0.01s linear 2.5s forwards;
  }
}

@keyframes splitFailsafe {
  to { opacity: 1; }
}

.heroCollage {
  position: relative;
  width: 100%;
  max-width: 41rem;
  margin-inline: auto;
  aspect-ratio: 1.04;
}

.heroCollage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% 2% 2% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 30%, transparent), transparent);
  filter: blur(18px);
}

.heroCollage__main {
  position: absolute;
  top: 4%;
  left: 0;
  width: 90%;
}

.heroCollage__pos {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
}

.heroCollage__chip {
  position: absolute;
  top: 0;
  right: 2%;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1em 0.55em 0.65em;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  font-weight: 600;
}

.heroCollage__chip .icon {
  width: 1.7em;
  height: 1.7em;
  padding: 0.3em;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  stroke-width: 2.4;
}

/* ---- marquee: big words that scroll by themselves — CSS only. The track starts at the right
   edge and leaves by the left (100cqw is the section's own width); the negative delay starts it
   part-way, so the first view is never empty. It never pauses — not on hover, not on scroll
   (SITE-PLAN 5c); only reduced motion stops it. ---- */
.marquee {
  overflow: clip;
  padding-block: var(--space-5);
  border-block: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, black);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marqueeMove 44s linear -12s infinite;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-display, var(--font));
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.marquee__item:nth-child(even) span {
  color: color-mix(in srgb, var(--text) 34%, var(--bg));
}

.marquee__item::after {
  content: "";
  width: 0.34em;
  height: 0.34em;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 18px var(--glow-strong);
}

@keyframes marqueeMove {
  from { transform: translateX(100cqw); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: var(--gutter);
    gap: var(--space-3) var(--space-5);
    animation: none;
  }

  .marquee__item {
    gap: var(--space-5);
  }
}

/* ---- bento: six tiles on one grid. Each tile is a clean picture panel with the text underneath on
   the tile's own dark — never text over a picture (SITE-PLAN 5c). Title, one short line, one link;
   no status pills. The link is stretched over the whole tile. 1 column, 2 from 34rem, 3 from 56rem. ---- */
.bento {
  padding: var(--section-y) var(--gutter);
}

.bento__inner {
  max-width: var(--container);
  margin-inline: auto;
}

.bento__head {
  max-width: 44rem;
  margin-bottom: var(--space-6);
}

.bento__title {
  margin-top: var(--space-3);
  font-size: var(--text-3xl);
}

.bento__lead {
  max-width: 36em;
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-lg);
}

.bento__grid {
  display: grid;
  gap: var(--space-4);
}

.bentoTile {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: clip;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 6%, transparent), color-mix(in srgb, var(--text) 2%, transparent));
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}

.bentoTile:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 30px 60px -34px var(--glow-strong);
}

/* the picture panel: 16:10, its own soft gold-tinted dark; the picture is framed inside it */
.bentoTile__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: clip;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(24rem 14rem at 50% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 75%), var(--surface-2);
}

.bentoTile__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
  transition: transform var(--duration-slow) var(--ease-out);
}

/* a 4:3 drawn screen shows whole, with room around it */
.bentoTile__image--contain {
  object-fit: contain;
  object-position: 50% 50%;
  padding: var(--space-3);
}

/* a photograph (not a drawn screen) is framed from its middle */
.bentoTile__image--photo {
  object-position: 50% 40%;
}

.bentoTile:hover .bentoTile__image {
  transform: scale(1.04);
}

.bentoTile__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
}

/* a step under the section's other headings, so the longest name ("Classical Email Marketing") keeps one line */
.bentoTile__title {
  font-size: var(--text-lg);
}

.bentoTile__body {
  color: color-mix(in srgb, var(--text) 80%, transparent);
  font-size: var(--text-base);
}

/* the link sits at the foot of every tile, so the three links of a row line up */
.bentoTile__link {
  display: inline-flex;
  gap: 0.45em;
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.bentoTile__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bentoTile__link::after {
  content: "\2192";
  transition: transform var(--duration-fast) var(--ease-out);
}

.bentoTile:hover .bentoTile__link::after {
  transform: translateX(0.25em);
}

@container (min-width: 34rem) {
  .bento__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 56rem) {
  .bento__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5) var(--space-4);
  }
}

/* ---- sticky story: the introduction stays in view while the steps scroll past (CSS sticky).
   js/site.js only adds "is-live" on a wide screen, to dim the steps that are not in front. ---- */
.stickyStory {
  padding: var(--section-y) var(--gutter);
}

.stickyStory__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
}

.stickyStory__title {
  margin: var(--space-3) 0;
  font-size: var(--text-3xl);
}

.stickyStory__lead {
  max-width: 30em;
  margin-bottom: var(--space-5);
  color: var(--muted);
  font-size: var(--text-lg);
}

.stickyStory__intro .microcopy {
  margin-top: var(--space-3);
}

.stickyStory__steps {
  position: relative;
  display: grid;
  gap: var(--space-4);
}

.storyStep {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
}

.storyStep__number {
  font-family: var(--font-display, var(--font));
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary);
}

.storyStep__title {
  font-size: var(--text-xl);
}

.storyStep__body {
  max-width: 34em;
  color: var(--muted);
}

.storyStep__link {
  width: fit-content;
  margin-top: var(--space-1);
}

.storyStep__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: filter var(--duration-slow) var(--ease-out);
}

@container (min-width: 56rem) {
  .stickyStory__inner {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-7);
    align-items: start;
  }

  .stickyStory__intro {
    position: sticky;
    top: 7rem;
  }

  .stickyStory__steps {
    padding-left: var(--space-5);
  }

  /* the rail: a hairline down the left of the steps and a gold line that fills as they pass */
  .stickyStory__steps::before,
  .stickyStory__steps::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    border-radius: 2px;
  }

  .stickyStory__steps::before {
    background: var(--border);
  }

  .stickyStory__steps::after {
    background: var(--primary);
    box-shadow: 0 0 14px var(--glow-strong);
    transform: scaleY(var(--story-p, 0));
    transform-origin: top;
  }

  .storyStep {
    min-height: 27rem;
  }
}

/* "is-live" — set by js/site.js only when the intro is sticky and motion is allowed */
.stickyStory.is-live .storyStep:not(.is-active) .storyStep__image {
  filter: grayscale(0.7) brightness(0.62);
}

.stickyStory.is-live .storyStep.is-active {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  box-shadow: 0 40px 80px -48px var(--glow-strong);
}

/* ---- stats: three figures that count up (the real figure is already in the HTML). The figure stays
   close to its label in size (SITE-PLAN 5c): about 3rem against a label of at least 1.0625rem in full
   text colour, with an optional short second line. ---- */
.statsBand {
  padding: var(--space-6) var(--gutter);
  border-block: 1px solid var(--border);
  background:
    radial-gradient(48rem 18rem at 50% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%),
    var(--surface);
}

.statsBand__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-5) 0;
  text-align: center;
}

.statBlock {
  padding-inline: var(--space-5);
}

@container (min-width: 40rem) {
  .statBlock + .statBlock {
    border-left: 1px solid var(--border);
  }
}

.statBlock__number {
  margin-bottom: var(--space-1);
  font-family: var(--font-display, var(--font));
  font-size: clamp(2.25rem, 1.75rem + 1.9vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--primary);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 52%, white), var(--primary) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.statBlock__label {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.statBlock__note {
  max-width: 18em;
  margin: var(--space-1) auto 0;
  color: var(--muted);
  font-size: var(--text-base);
}

/* ---- process: numbers from a CSS counter. Wide: steps in a row joined by a line; narrow: a column. ---- */
.process {
  padding: var(--section-y) var(--gutter);
}

.process__inner {
  max-width: var(--container);
  margin-inline: auto;
}

.process__head {
  max-width: 40rem;
  margin-bottom: var(--space-6);
}

.process__title {
  margin-top: var(--space-3);
  font-size: var(--text-3xl);
}

.process__list {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.processStep {
  position: relative;
  padding-left: calc(3.25rem + var(--space-3));
  counter-increment: step;
}

.processStep::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-display, var(--font));
  font-weight: 700;
}

.processStep:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.625rem - 1px);
  top: 3.5rem;
  bottom: calc(-1 * var(--space-5) + 0.25rem);
  width: 0;
  border-left: 2px dashed color-mix(in srgb, var(--primary) 30%, transparent);
}

.processStep__title {
  margin-bottom: var(--space-1);
  padding-top: 0.6rem;
  font-size: var(--text-xl);
}

.processStep__body {
  max-width: 28em;
  color: var(--muted);
}

@container (min-width: 46rem) {
  .process__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }

  .processStep {
    padding: 4.75rem 0 0;
  }

  .processStep:not(:last-child)::after {
    left: 3.75rem;
    right: calc(-1 * var(--space-5) + 0.5rem);
    top: calc(1.625rem - 1px);
    bottom: auto;
    width: auto;
    height: 0;
    border-left: 0;
    border-top: 2px dashed color-mix(in srgb, var(--primary) 30%, transparent);
  }

  .processStep__title {
    padding-top: 0;
  }
}

/* ---- slider: a scroll-snap row. The browser does the swiping and scrolling; js/site.js wires the
   arrows and dots. overflow-x: auto on the track is what makes it the scroller; the section
   around it uses overflow: clip, not hidden. ---- */
.slider {
  padding: var(--section-y) 0;
  overflow: clip;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 92%, var(--text)) 18%, color-mix(in srgb, var(--bg) 92%, var(--text)) 82%, transparent);
}

.slider__inner {
  max-width: 44rem;
  margin: 0 auto var(--space-5);
  padding-inline: var(--gutter);
  text-align: center;
}

.slider__title {
  margin: var(--space-3) 0;
  font-size: var(--text-3xl);
}

.slider__lead {
  color: var(--muted);
  font-size: var(--text-lg);
}

.slider__track {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--gutter) var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  flex: none;
  width: min(23rem, 82cqi);
  scroll-snap-align: start;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
}

.slider__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
}

.slider__slideTitle {
  margin: 0 var(--space-2) var(--space-1);
  font-size: var(--text-lg);
}

.slider__slideBody {
  margin: 0 var(--space-2) var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Arrows and dots wait for the script (kit-head.js puts "kit-js" on <html>). */
.slider__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

html.kit-js .slider__controls {
  display: flex;
}

.slider__stage[data-fits] .slider__controls {
  display: none;
}

.slider__dots {
  display: flex;
  gap: var(--space-2);
}

.slider__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--hairline);
  cursor: pointer;
  transition: background var(--duration-fast), width var(--duration-base) var(--ease-out);
}

.slider__dots button[aria-current] {
  width: 26px;
  background: var(--primary);
}

.slider__arrow {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.slider__arrow:hover:not(:disabled) {
  background: var(--glass-2);
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
}

.slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.slider__more {
  margin-top: var(--space-5);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .slider__track {
    scroll-behavior: smooth;
  }
}

/* ---- logos: the label on the left, a 3x3 wall of client marks on the right. A mark is a flat
   white shape (filter), whatever colours its file has, so nine different logos sit quietly. ---- */
.logosStrip {
  padding: var(--space-7) var(--gutter);
}

.logosStrip__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.logosStrip__label {
  max-width: 16em;
  font-size: var(--text-2xl);
  font-weight: 600;
}

.logosStrip__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.logosStrip__item {
  display: grid;
  place-items: center;
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-base);
}

.logosStrip__item:hover {
  background: var(--glass);
}

.logosStrip__logo {
  width: auto;
  max-width: 100%;
  height: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem);
  filter: brightness(0) invert(1);
  opacity: 0.66;
  transition: opacity var(--duration-base);
}

.logosStrip__item:hover .logosStrip__logo {
  opacity: 1;
}

@container (min-width: 52rem) {
  .logosStrip__inner {
    grid-template-columns: 0.7fr 1.3fr;
    gap: var(--space-7);
  }
}

/* ---- faq: native <details>/<summary>; opening a question needs no JavaScript at all ---- */
.faq {
  padding: var(--section-y) var(--gutter);
}

.faq__inner {
  max-width: 52rem;
  margin-inline: auto;
}

.faq__title {
  max-width: 20ch;
  margin: var(--space-3) auto var(--space-6);
  font-size: var(--text-3xl);
  text-align: center;
}

.faq__head {
  display: grid;
  justify-items: center;
}

.faq__list {
  border-top: 1px solid var(--border);
}

.faqItem {
  border-bottom: 1px solid var(--border);
}

.faqItem__summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  list-style: none;
}

.faqItem__summary::-webkit-details-marker {
  display: none;
}

.faqItem__summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1;
  color: var(--primary);
  transition: transform var(--duration-base) var(--ease-out);
}

.faqItem[open] .faqItem__summary::after {
  transform: rotate(45deg);
}

.faqItem__category {
  flex: none;
  min-width: 7.25rem;
  padding: 0.2em 0.75em;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.faqItem__answer {
  max-width: 42em;
  padding-bottom: var(--space-4);
  color: var(--muted);
}

.faq__more {
  margin-top: var(--space-5);
  text-align: center;
}

/* a phone: the label sits above the question, the plus beside it */
@media (max-width: 40rem) {
  .faqItem__summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2) var(--space-3);
    align-items: center;
  }

  .faqItem__category {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
  }

  .faqItem__question {
    grid-column: 1;
    grid-row: 2;
  }

  .faqItem__summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .bentoTile,
  .bentoTile__image,
  .stickyBar {
    transition: none;
  }

  .btn:hover,
  .bentoTile:hover .bentoTile__image {
    transform: none;
  }
}

/* ==========================================================================
   7. PRODUCTS AND SERVICES PAGES (SITE-PLAN §4, Session 2)
   One .offer block per product or service — the id on its root is the anchor the menu jumps to —
   plus the short waitlist form of the one product that is not live yet. Documented in DESIGN-SYSTEM.md.
   ========================================================================== */

/* ---- inner-page hero: the same .heroSplit as Home, a step smaller than Home's headline ---- */
.heroSplit--page .heroSplit__title {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
}

/* ---- offer: the words and a picture side by side. The copy comes first in the HTML and on a phone;
   from 56rem the picture sits on the left, or on the right with .offer--reverse. .offer--tint lays a
   faint band behind the block, so a run of blocks has a rhythm. ---- */
.offer {
  padding: var(--space-6) var(--gutter);
}

.offer--tint {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 93%, var(--text)) 16%, color-mix(in srgb, var(--bg) 93%, var(--text)) 84%, transparent);
}

.offer__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
  grid-template-areas: "content" "media";
  align-items: center;
}

.offer__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* the product's or service's own line icon and name: told apart by icon, never by colour */
.offer__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display, var(--font));
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.offer__name .iconBadge {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  font-size: 1.35rem;
}

.offer__title {
  max-width: 18ch;
  font-size: clamp(1.9rem, 1.35rem + 2vw, 2.75rem);
}

.offer__body {
  max-width: 32em;
  color: color-mix(in srgb, var(--text) 80%, transparent);
}

/* three to six short points, one line each at desktop width, written at near-equal length */
.offer__points {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}

.offer__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
}

.offer__points .icon {
  margin-top: 0.2em;
  color: var(--primary);
}

.offer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}

.offer__media {
  grid-area: media;
  position: relative;
  isolation: isolate;
  min-width: 0;
}

/* a soft gold glow behind the picture */
.offer__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -5% -8% -5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 22%, transparent), transparent);
  filter: blur(24px);
}

/* a photograph (not a drawn screen): its own frame, no text over it */
.offer__photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* a 4:3 tablet screen is taller than the 16:10 windows, so it is kept narrower */
.offer__media .mockup--device {
  max-width: 27rem;
  margin-inline: auto;
}

@container (min-width: 56rem) {
  .offer__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    grid-template-areas: "media content";
    gap: var(--space-7);
  }

  .offer--reverse .offer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    grid-template-areas: "content media";
  }
}

/* ---- waitlist: one email field and a button on a line, for the product that is not live yet.
   The engine rewrites the inputs inside [data-form-fields] as .formField…, so both are styled. ---- */
.waitlist {
  width: 100%;
  max-width: 32rem;
}

.waitlist__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.waitlist [data-form-fields] {
  flex: 1 1 15rem;
}

.waitlist [data-form-fields] label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
}

.waitlist .formField__input,
.waitlist [data-form-fields] input {
  width: 100%;
  padding: 0.8em 1em;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 400;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.waitlist .formField__input:focus-visible,
.waitlist [data-form-fields] input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.waitlist .btn {
  flex: none;
}

.offer__aside {
  max-width: 32em;
  color: var(--muted);
  font-size: var(--text-sm);
}

.offer__aside .textLink {
  margin-top: var(--space-1);
}

/* ==========================================================================
   7. SESSION 3 — Contact, Work, About, legal pages and 404
   The parts below are used by contact.html, portfolio.html, portfolio-detail.html, about.html,
   privacy-policy.html, terms-conditions.html and 404.html. Same tokens, same cards, same buttons.
   ========================================================================== */

/* ---- a type-only hero that sits a step lower than the big one: the work page and the legal pages ---- */
.heroBigtype--page {
  padding-bottom: var(--space-5);
}

.heroBigtype--page .heroBigtype__title {
  max-width: 18ch;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
  line-height: var(--leading-tight);
}

.heroBigtype--page .heroBigtype__lead {
  max-width: 38em;
  margin-top: var(--space-4);
}

.heroBigtype__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.heroBigtype .trustStrip {
  max-width: 30rem;
}

.heroBigtype .microcopy {
  margin-top: var(--space-3);
}

/* ---- the prose block: a rich-text body (a case study, a legal page). Headings, paragraphs, lists. ---- */
.prose {
  color: color-mix(in srgb, var(--text) 86%, var(--bg));
  font-size: var(--text-base);
  line-height: 1.75;
}

.prose > * + * {
  margin-top: var(--space-3);
}

.prose h2 {
  margin-top: var(--space-6);
  font-size: var(--text-2xl);
  color: var(--text);
}

.prose h3 {
  margin-top: var(--space-5);
  font-size: var(--text-xl);
  color: var(--text);
}

.prose h2 + *,
.prose h3 + * {
  margin-top: var(--space-2);
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose li::marker {
  color: var(--primary);
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

.prose a {
  overflow-wrap: anywhere;
}

/* ---- contact: the page's one job is the enquiry. Copy and the ways to reach us on the left, the short
   form on the right (the same five fields as the lead band, so the engine keeps one config). ---- */
.contactSection {
  position: relative;
  isolation: isolate;
  padding: var(--space-6) var(--gutter) var(--section-y);
  overflow: clip;
}

.contactSection::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% auto auto -14%;
  width: 56rem;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 20%, transparent), transparent);
}

.contactSection__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@container (min-width: 56rem) {
  .contactSection__inner {
    grid-template-columns: 1fr 1.08fr;
    gap: var(--space-7);
  }
}

.contactSection__title {
  margin: var(--space-3) 0 var(--space-4);
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
}

.contactSection__lead {
  max-width: 32em;
  color: var(--muted);
  font-size: var(--text-lg);
}

.contactSection__points {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}

.contactSection__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
}

.contactSection__points .icon {
  margin-top: 0.2em;
  color: var(--primary);
}

.contactList {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.contactList__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass);
}

.contactList__item .iconBadge {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  font-size: 1.35rem;
}

.contactList__text {
  min-width: 0;
}

.contactList__label {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
}

.contactList__item a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contactList__item a:hover {
  color: var(--primary);
}

.contactSection .leadForm {
  box-shadow: var(--shadow-lg);
}

/* ---- work: the listing (a page-level section, not a data-section) and the cards in it ---- */
.portfolioListing {
  padding: var(--space-5) var(--gutter) var(--section-y);
}

.portfolioListing__inner {
  max-width: var(--container);
  margin-inline: auto;
}

.portfolioListing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-4);
}

@container (min-width: 34rem) {
  .portfolioListing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 56rem) {
  .portfolioListing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.projectCard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.projectCard__media {
  aspect-ratio: 1;
  overflow: clip;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.projectCard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projectCard:hover .projectCard__media,
.projectCard:focus-within .projectCard__media {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
  .projectCard__media img {
    transition: transform var(--duration-slow) var(--ease-out);
  }

  .projectCard:hover .projectCard__media img {
    transform: scale(1.035);
  }
}

.projectCard__title {
  font-size: var(--text-xl);
}

.projectCard__title a {
  color: var(--text);
  text-decoration: none;
}

/* the title link covers the whole card, so a click anywhere opens the case study */
.projectCard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.projectCard__title a:hover {
  color: var(--text);
}

.projectCard__title a:focus-visible {
  outline: none;
}

.projectCard:has(.projectCard__title a:focus-visible) .projectCard__media {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.projectCard__body {
  color: var(--muted);
  font-size: var(--text-base);
}

.projectCard__more {
  margin-top: auto;
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.projectCard__more::after {
  content: "\2192";
  margin-left: 0.45em;
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .projectCard:hover .projectCard__more::after {
    transform: translateX(0.2em);
  }
}

/* ---- work: one case study (the detail template). Header and facts on the left, pictures on the right
   from 56rem; on a phone: header, pictures, facts, then the story. ---- */
.projectDetail {
  padding: var(--space-6) var(--gutter) var(--section-y);
}

.projectDetail__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-5);
}

@container (min-width: 56rem) {
  .projectDetail__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas:
      "head media"
      "facts media"
      "body media";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-7);
    row-gap: var(--space-5);
    align-items: start;
  }

  .projectDetail__header { grid-area: head; }
  .projectDetail__media { grid-area: media; position: sticky; top: calc(var(--header-h) + var(--space-4)); }
  .projectDetail__facts { grid-area: facts; }
  .projectDetail__body { grid-area: body; }
}

.projectDetail__header h1 {
  margin: var(--space-3) 0;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
}

.projectDetail__summary {
  max-width: 30em;
  margin-bottom: var(--space-4);
  color: var(--muted);
  font-size: var(--text-lg);
}

.projectDetail__media {
  display: grid;
  gap: var(--space-4);
}

.projectDetail__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.projectDetail__facts {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass);
}

@container (min-width: 34rem) {
  .projectDetail__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.projectDetail__facts dt {
  color: var(--muted);
  font-size: var(--text-sm);
}

.projectDetail__facts dd {
  font-weight: 600;
}

.projectDetail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---- about: the story with two portrait photos, and the software-and-services pair ---- */
.aboutStory {
  padding: var(--section-y) var(--gutter);
}

.aboutStory__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@container (min-width: 56rem) {
  .aboutStory__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-7);
  }
}

.aboutStory__title {
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--text-3xl);
}

.aboutStory__content .prose {
  max-width: 36em;
}

.aboutStory__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.aboutStory__photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.aboutStory__photo:nth-child(2) {
  margin-top: var(--space-6);
  object-position: 50% 48%;
}

.aboutFit {
  padding: var(--section-y) var(--gutter);
}

.aboutFit__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
}

.aboutFit__grid {
  display: grid;
  gap: var(--space-4);
}

@container (min-width: 48rem) {
  .aboutFit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fitPanel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(28rem 14rem at 0% -10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%),
    var(--glass);
}

.fitPanel .iconBadge {
  margin-bottom: 0;
}

.fitPanel__title {
  font-size: var(--text-2xl);
}

.fitPanel__body {
  color: var(--muted);
}

.fitPanel__list ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fitPanel__list li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.fitPanel__list a {
  display: block;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.fitPanel__list a:hover {
  color: var(--primary);
}

.fitPanel .textLink {
  margin-top: auto;
  align-self: flex-start;
}

.aboutFit__aside {
  max-width: 44em;
  margin-inline: auto;
  color: var(--muted);
  text-align: center;
}

/* ---- legal pages: one narrow column of prose under the type hero ---- */
.legalBody {
  padding: var(--space-5) var(--gutter) var(--section-y);
}

.legalBody__inner {
  max-width: 48rem;
  margin-inline: auto;
}

.legalBody__meta {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-sm);
}

.legalBody__contact {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.legalBody__contact h2 {
  font-size: var(--text-2xl);
}

.legalBody__contact p {
  margin-top: var(--space-2);
  color: var(--muted);
}

.legalBody__contact .contactList {
  margin-top: var(--space-4);
}

/* ---- 404 ---- */
.notFound {
  position: relative;
  isolation: isolate;
  padding: var(--space-7) var(--gutter) var(--section-y);
  overflow: clip;
  text-align: center;
}

.notFound::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% 0 auto;
  margin-inline: auto;
  width: 56rem;
  max-width: 100%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 20%, transparent), transparent);
}

.notFound__inner {
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.notFound__code {
  font-family: var(--font-display, var(--font));
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--primary);
}

.notFound__title {
  font-size: var(--text-3xl);
}

.notFound__lead {
  max-width: 34em;
  color: var(--muted);
  font-size: var(--text-lg);
}

.notFound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.notFound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

/* ---- 8. Reduced motion, one safety net (Session 4) ----
   Every hover/open transition above (arrows, card lift, menu underline, dropdown, FAQ plus, sticky bar)
   becomes instant for a visitor who asks for less motion. Colour changes stay visible; they just do not glide. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---- 9. Quick-upload parts (Session 5): form messages and a case-study card without a page ---- */
/* js/site.js writes the answer of the form handler into .formStatus (inside the form when the page has one); without JavaScript the handler answers with a page. */
.formStatus {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

.formStatus:empty {
  display: none;
}

.formStatus:not(:empty) {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--status-ok-bg);
  color: var(--status-ok);
  font-weight: 600;
}

.formStatus--error:not(:empty) {
  background: var(--status-out-bg);
  color: var(--status-out);
}

/* a card whose case study is not written yet: a picture and a line, no link, no hover */
.projectCard--static:hover .projectCard__media {
  border-color: var(--hairline);
  box-shadow: none;
}

.projectCard--static:hover .projectCard__media img {
  transform: none;
}