/* ==========================================================================
   Simplicity Software & Systems — design system
   Type & rhythm modelled on edvantis.com (geometric display + Open Sans,
   100px section band). Gradient language from future-software.co.uk.
   ========================================================================== */

:root {
  /* Yellow leads, blue supports, white is the ground.
     Yellow carries the large surfaces — buttons, bands, icon tiles, the CTA
     block — always with ink text on top. Blue does the structural work:
     links, the dark sections, outlines, headings' cooler neighbours. */
  --yellow-400: #ffd65e;
  --yellow-500: #ffc42e;   /* the brand yellow */
  --yellow-600: #f0ad00;
  --yellow-100: #fff1cc;
  --yellow-50:  #fffaec;
  /* Yellow can never be text on white (fails contrast at every size).
     This is the one yellow-ish tone dark enough to set type in: 5.6:1. */
  --yellow-ink: #8a5e00;

  --blue-700: #0a3170;
  --blue-600: #0f4bad;
  --blue-500: #1565e0;
  --blue-400: #4a90f0;
  --blue-300: #93c0f9;
  --blue-100: #dfeafd;
  --blue-50:  #f1f6fe;

  /* neutrals, very slightly warm so they sit with the yellow */
  --ink:        #14110a;
  --ink-2:      #3d3626;
  --ink-3:      #6b6350;
  --ink-4:      #9c9484;
  --line:       #e8e3d6;
  --line-soft:  #f2efe6;
  --surface:    #ffffff;
  --surface-2:  #fffaec;
  --surface-3:  #fff1cc;

  /* type */
  --display: "Jost", "Century Gothic", Futura, -apple-system, sans-serif;
  --body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* rhythm — edvantis uses a flat 100px band */
  --section-y: clamp(64px, 8vw, 100px);
  --gutter: clamp(20px, 4vw, 32px);
  --maxw: 1280px;
  --nav-h: 88px;
  /* one bar height per breakpoint — it never animates, matching edvantis */

  /* gradients — yellow is the hero gradient now, blue the deep one */
  --grad-brand: linear-gradient(135deg, #ffd65e 0%, #ffc42e 46%, #f0ad00 100%);
  --grad-brand-soft: linear-gradient(135deg, #ffe08a 0%, #ffc42e 100%);
  --grad-deep: linear-gradient(135deg, #1565e0 0%, #0f4bad 48%, #0a3170 100%);
  --grad-text: linear-gradient(100deg, #14110a 0%, #14110a 38%, #f0ad00 82%, #ffc42e 100%);
  --grad-accent: linear-gradient(120deg, #ffc42e 0%, #ffd97a 100%);

  --shadow-sm: 0 1px 2px rgba(20, 17, 10, .05), 0 2px 8px rgba(20, 17, 10, .04);
  --shadow-md: 0 4px 12px rgba(20, 17, 10, .06), 0 12px 32px rgba(20, 17, 10, .07);
  --shadow-lg: 0 10px 24px rgba(20, 17, 10, .08), 0 30px 70px rgba(120, 88, 0, .14);
  --shadow-brand: 0 4px 14px rgba(240, 173, 0, .38), 0 12px 32px rgba(240, 173, 0, .22);

  /* Emil Kowalski's curves — the built-in CSS easings are too weak to read
     as intentional. Entering/exiting uses ease-out; on-screen movement
     uses ease-in-out. Never ease-in on UI. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease: cubic-bezier(.23, 1, .32, 1);

  /* durations: UI stays under 300ms */
  --t-press: 140ms;
  --t-fast: 180ms;
  --t-base: 240ms;
  --t-panel: 280ms;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
  /* `clip` rather than `hidden`: it trims the stray sub-pixel overflow
     without turning the root into a scroll container, which would break
     the fixed header and sticky positioning. Older engines fall back to
     the body rule below. */
  overflow-x: clip;
}

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* the header is fixed and opaque, so every page's content starts below it */
main { padding-top: var(--nav-h); }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--yellow-400); color: var(--ink); }

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

.skip-link {
  position: absolute; left: 16px; top: 16px; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transform: translateY(-140%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------- typography */

h1, h2, h3, h4, h5 { font-family: var(--display); color: var(--ink); }

/* edvantis: h1 48/56 w300 · h2 40/48 w400 · h3 20/28 w600 Open Sans */
.h-display {
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.1; font-weight: 300; letter-spacing: -.02em;
}
h1, .h1 {
  font-size: clamp(34px, 4.6vw, 48px);
  line-height: 1.17; font-weight: 300; letter-spacing: -.015em;
}
h2, .h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.2; font-weight: 400; letter-spacing: -.012em;
}
h3, .h3 {
  font-family: var(--body);
  font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -.005em;
}
h4 { font-family: var(--body); font-size: 16px; line-height: 1.5; font-weight: 700; }

.lede { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: var(--ink-3); }

.prose p { margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { margin: 44px 0 16px; }
.prose h3 { margin: 32px 0 12px; }
.prose ul { margin: 0 0 20px; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--grad-brand-soft);
}
.prose a { color: var(--yellow-ink); text-decoration: underline; text-underline-offset: 3px; }

.eyebrow {
  font-family: var(--body);
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow-ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px; flex: none;
  background: var(--grad-brand-soft);
}
.eyebrow--plain::before { display: none; }
.eyebrow--light { color: var(--yellow); }
.eyebrow--light::before { background: var(--yellow); }
.eyebrow--onmedia { color: rgba(255,255,255,.9); }
.eyebrow--onmedia::before { background: rgba(255,255,255,.7); }

/* gradient headline treatment — future-software.co.uk */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.grad-text--pure {
  background: var(--grad-brand-soft);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------------ layout */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }
.wrap--mid { max-width: 1080px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 72px); }
.section--flush-top { padding-top: clamp(24px, 3vw, 40px); }
.section--alt { background: var(--surface-2); }
.section--ink { background: var(--ink); color: rgba(255, 255, 255, .74); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink .lede { color: rgba(255, 255, 255, .72); }

.sec-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head h2 { margin-bottom: 18px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--split {
  max-width: none; display: grid; gap: 24px 56px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
}
@media (max-width: 900px) { .sec-head--split { grid-template-columns: 1fr; align-items: start; } }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------- ambient gradient blooms
   The soft coloured light lifting off the page on future-software.co.uk.
   Decorative only.                                                          */

.bloom { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bloom > i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); opacity: .5;
  animation: drift 22s var(--ease) infinite alternate;
}
.bloom .b1 { width: 46vw; height: 46vw; left: -14vw; top: -18vw; background: radial-gradient(circle, rgba(255, 214, 94,.55), transparent 68%); }
.bloom .b2 { width: 40vw; height: 40vw; right: -12vw; top: 8%; background: radial-gradient(circle, rgba(255, 196, 46,.30), transparent 68%); animation-delay: -8s; }
.bloom .b3 { width: 52vw; height: 38vw; left: 22%; bottom: -22vw; background: radial-gradient(circle, rgba(240, 173, 0,.42), transparent 70%); animation-delay: -14s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3vw, -3vw, 0) scale(1.12); }
}

.section > .wrap { position: relative; z-index: 1; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body);
  font-size: 15px; font-weight: 600; line-height: 1;
  padding: 15px 28px;
  border-radius: 8px;
  background: var(--ink); color: #fff;
  text-decoration: none;
  border: 1.6px solid transparent;
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
  white-space: nowrap;
}
.btn svg { flex: none; transition: transform var(--t-base) var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
/* press feedback: the interface has to feel like it heard you */
.btn:active { transform: translateY(0) scale(.97); transition-duration: var(--t-press); }

/* gradient primary — the future-software CTA */
.btn--primary { background: var(--grad-brand); color: var(--ink); box-shadow: var(--shadow-brand); }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-brand-soft); opacity: 0; transition: opacity var(--t-panel) var(--ease-out);
}
.btn--primary:hover::after { opacity: 1; }
.btn--primary:hover { box-shadow: 0 10px 26px rgba(240, 173, 0,.34), 0 22px 54px rgba(240, 173, 0,.24); }
.btn--primary:hover svg { transform: translateX(3px); }

.btn--dark { background: var(--ink); color: #fff; box-shadow: var(--shadow-md); }
.btn--dark:hover { background: #1b2942; }
.btn--dark:hover svg { transform: translateX(3px); }

.btn--outline { background: transparent; color: var(--yellow-ink); border-color: var(--yellow-600); }
.btn--outline:hover { background: var(--yellow-50); border-color: var(--yellow-ink); }

.btn--ghost { background: var(--surface-3); color: var(--ink); }
.btn--ghost:hover { background: var(--yellow-100); }

.btn--glass {
  background: rgba(255,255,255,.12); color: #fff;
  border-color: rgba(255,255,255,.38);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--glass:hover { background: rgba(255,255,255,.22); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--yellow-50); }

.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn--lg { padding: 18px 34px; font-size: 16px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* text link with sliding arrow */
.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--yellow-ink); text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}
.tlink svg { transition: transform var(--t-base) var(--ease-out); }
.tlink:hover { color: var(--ink); }
.tlink:hover svg { transform: translateX(4px); }
.tlink--light { color: var(--yellow-400); }
.tlink--light:hover { color: #fff; }

/* chips — future-software "Specialists in [x] [y]" row */
.chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--yellow-100); color: var(--ink);
  border: 1px solid rgba(240, 173, 0, .18);
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
a.chip:active { transform: translateY(0) scale(.97); }
a.chip:hover { transform: translateY(-2px); background: var(--yellow-600); color: #fff; box-shadow: var(--shadow-brand); }
.chip--grad { background: var(--grad-brand); color: var(--ink); border-color: transparent; box-shadow: 0 4px 14px rgba(240, 173, 0,.26); }
.chip--glass {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.chip--outline { background: transparent; color: var(--ink-3); border-color: var(--line); }

/* ================================================================== HEADER
   A solid white bar on every page, its own band above the hero rather than
   a transparent overlay tinted by whatever the video happens to be showing.
   Height is fixed per breakpoint (edvantis is a constant 88px) so nothing
   here animates layout; scrolling only adds a shadow.                     */

.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-panel) var(--ease-out), transform .45s var(--ease);
  /* No will-change here: it would make this element a containing block for
     the position:fixed mobile menu panel, collapsing it to the bar height. */
}
/* a thin brand rule along the top edge, so the bar reads as ours */
.site-header::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--yellow-ink) 0%, var(--yellow-500) 46%, var(--yellow) 100%);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(20, 17, 10, .07); }
.site-header.is-hidden { transform: translateY(-100%); }

/* the mega panels are positioned against this, not against their trigger, so
   they can never be pushed off the left or right edge of the viewport */
/* The bar spans the full width of the screen rather than sitting inside the
   1280px text column — brand hard left, actions hard right, links spread
   through the space between. The mega panels position against this. */
.nav {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 36px);
  width: 100%; max-width: none;
  padding-inline: clamp(20px, 3.2vw, 56px);
  position: relative;
}
/* the <nav> wrapper is the flex child, so the auto margins belong here —
   they centre the links and push the actions group to the far right */
.nav > nav { margin-inline: auto; }
.nav__menu { gap: clamp(2px, 1.1vw, 16px); }
.nav__link { padding-inline: clamp(10px, 1vw, 16px); }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand__mark { width: 34px; height: 34px; flex: none; transition: transform .5s var(--ease-out); }
.brand:hover .brand__mark { transform: rotate(90deg); }
.brand__name {
  font-family: var(--display); font-size: 21px; font-weight: 500;
  letter-spacing: -.01em; color: var(--ink); line-height: 1;
}
.brand__name em { font-style: normal; color: var(--yellow-600); }

.nav__menu { display: flex; align-items: center; gap: 4px; margin-inline: auto; }

.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: 15.5px; font-weight: 600; color: var(--ink-2);
  text-decoration: none; border-radius: 8px;
  position: relative;
  transition: color var(--t-base) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--grad-brand-soft);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-panel) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--yellow-ink); }
.nav__link:hover::after, .nav__item.is-open > .nav__link::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--yellow-ink); }
.nav__link.is-current::after { transform: scaleX(1); }
.nav__link .caret { transition: transform var(--t-panel) var(--ease-out); }
.nav__item.is-open .caret { transform: rotate(180deg); }


.nav__right { display: flex; align-items: center; gap: 16px; flex: none; }
.nav__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}
.nav__phone:hover { color: var(--yellow-ink); }

/* ---- mega menu ---- */
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(.98);
  width: max-content; max-width: 92vw;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 26px;
  transform-origin: top center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast);
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }

.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 260px)); gap: 6px 10px; }
.mega__grid--1 { grid-template-columns: minmax(240px, 300px); }

.mega__link {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px; text-decoration: none;
  transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.mega__link:hover { background: var(--yellow-50); transform: translateX(3px); }
.mega__ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--yellow-100); color: var(--yellow-ink);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.mega__link:hover .mega__ic { background: var(--grad-brand); color: var(--ink); }
.mega__t { display: block; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.mega__d { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-3); margin-top: 4px; }

.mega__foot {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.mega__foot p { font-size: 13.5px; color: var(--ink-3); }

/* ---- mobile ---- */
.nav__burger {
  transition: transform var(--t-press) var(--ease-out);
  display: none; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--line);
  align-items: center; justify-content: center; gap: 5px; flex-direction: column;
  padding: 0;
  background: rgba(255, 255, 255, .6);
}
.nav__burger:active { transform: scale(.94); }
.nav__burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform var(--t-panel) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.nav__burger span:nth-child(2) { width: 18px; }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__phone { display: none; }
  .nav__menu { gap: 0; }
  .nav__link { padding: 10px 10px; font-size: 15px; }
}

@media (max-width: 980px) {
  :root { --nav-h: 68px; }
  .nav__burger { display: flex; }
  .nav__right .btn { display: none; }
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    padding: 18px var(--gutter) 40px;
    overflow-y: auto;
    margin: 0;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast);
  }
  body.menu-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
  body.menu-open { overflow: hidden; }
  .nav__item { border-bottom: 1px solid var(--line-soft); position: static; }
  .nav__link {
    width: 100%; justify-content: space-between;
    padding: 17px 4px; font-size: 17px; color: var(--ink);
  }
  .nav__link::after { display: none; }

  .mega {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    width: auto; max-width: none; border: 0; box-shadow: none; border-radius: 0;
    padding: 0 0 14px; background: transparent;
    display: none;
  }
  .nav__item.is-open .mega { display: block; transform: none; }
  .mega__grid, .mega__grid--1 { grid-template-columns: 1fr; }
  .mega__link { padding: 10px 4px; }
  .mega__foot { flex-direction: column; align-items: stretch; }
  .nav__mobile-cta { display: block; margin-top: 22px; }
}
@media (min-width: 981px) { .nav__mobile-cta { display: none; } }

/* ================================================================== HERO */

/* The bar is opaque, so the video starts below it rather than running
   underneath and tinting the navigation. */
.hero {
  position: relative;
  min-height: min(calc(100svh - var(--nav-h)), 760px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transform: scale(1.04);
  animation: heroZoom 24s var(--ease) infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1.04); } to { transform: scale(1.13); } }

/* Neutral black only — no brand tint, so the footage keeps its own colour.
   Two passes: one up from the base, one in from the left, because that is
   where the type sits. The right half of the frame stays untouched. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, .62) 0%,
      rgba(0, 0, 0, .34) 28%,
      rgba(0, 0, 0, .10) 54%,
      rgba(0, 0, 0, 0) 76%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, .58) 0%,
      rgba(0, 0, 0, .34) 28%,
      rgba(0, 0, 0, .08) 52%,
      rgba(0, 0, 0, 0) 68%
    );
}
/* On a phone the type covers most of the frame rather than a corner of it,
   so the whole picture needs holding back. Still neutral black, no tint. */
@media (max-width: 760px) {
  .hero__scrim {
    background:
      linear-gradient(
        to top,
        rgba(0, 0, 0, .74) 0%,
        rgba(0, 0, 0, .58) 34%,
        rgba(0, 0, 0, .40) 62%,
        rgba(0, 0, 0, .30) 100%
      );
  }
}
/* ---- the peeking character that invites the scroll ----
   Sits on the hero's bottom edge, half below it, so it reads as something
   waiting just out of sight in the next section. */
.peek {
  position: absolute; z-index: 4; bottom: 0;
  right: clamp(16px, 7vw, 116px);
  width: clamp(124px, 14vw, 176px);
  cursor: pointer; border: 0; background: none; padding: 0;
  line-height: 0;
  filter: drop-shadow(0 -6px 18px rgba(0, 0, 0, .32));
}
.peek svg { width: 100%; height: auto; overflow: visible; }

/* It hides below the edge and comes up to look, rather than standing there
   the whole time: a slow rise, a pause, a drop back down to the eyes, a
   second shorter look, then gone again. */
/* Holds back so the hero lands first, then starts its cycle. `backwards`
   makes the 0% frame apply during the delay, so it waits out of sight
   instead of sitting there visible until the animation begins. */
.peek {
  animation: peekCycle 11s var(--ease-in-out) 2s infinite backwards;
}
@keyframes peekCycle {
  0%, 6%    { transform: translateY(88%); }   /* out of sight */
  18%, 34%  { transform: translateY(0); }     /* full peek, held */
  44%       { transform: translateY(46%); }   /* sinks back to the eyes */
  54%, 64%  { transform: translateY(14%); }   /* second, smaller look */
  80%, 100% { transform: translateY(88%); }   /* gone */
}
/* hovering brings it up and keeps it there */
.peek:hover, .peek:focus-visible { animation-play-state: paused; transform: translateY(0); transition: transform var(--t-panel) var(--ease-out); }

/* a small idle shift while it is up, so the hold does not look frozen */
.peek__body { animation: peekBob 3.4s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes peekBob {
  0%, 100% { transform: translateY(4px); }
  50%      { transform: translateY(0); }
}

/* blinking: shut for a beat, twice a cycle */
.peek__lid { transform-box: fill-box; transform-origin: center; animation: peekBlink 5.2s steps(1, end) infinite; }
@keyframes peekBlink {
  0%, 92%, 96%, 100% { transform: scaleY(0); }
  94%                { transform: scaleY(1); }
}

.peek__label {
  font-family: var(--body);
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  fill: rgba(255, 255, 255, .82);
}
.peek__arrow { transform-box: fill-box; transform-origin: center; animation: peekArrow 1.9s var(--ease-in-out) infinite; }
@keyframes peekArrow {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (max-width: 640px) { .peek { width: 100px; right: 12px; } }

/* ---- the same character, elsewhere on the site ---- */
.mascot { width: 100%; max-width: 230px; height: auto; overflow: visible; }
.mascot__body, .mascot__float { transform-box: fill-box; transform-origin: 50% 100%; }
.mascot__float { animation: mascotFloat 4.2s var(--ease-in-out) infinite; }
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-7px) rotate(1.5deg); }
}
.mascot__wave {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: mascotWave 2.4s var(--ease-in-out) infinite;
}
@keyframes mascotWave {
  0%, 60%, 100% { transform: rotate(0deg); }
  70%           { transform: rotate(-22deg); }
  80%           { transform: rotate(8deg); }
  90%           { transform: rotate(-14deg); }
}
.mascot__q { transform-box: fill-box; transform-origin: center; animation: mascotQ 3s var(--ease-in-out) infinite; }
@keyframes mascotQ {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(-6px); opacity: 1; }
}
.mascot-wrap { display: flex; justify-content: center; padding-top: 8px; }
.mascot-wrap--404 { justify-content: flex-start; padding: 0 0 8px; }
.mascot-wrap--404 .mascot { max-width: 150px; }

.hero__inner {
  position: relative; z-index: 3; color: #fff;
  padding-block: clamp(56px, 7vw, 92px) clamp(64px, 8vw, 108px);
  width: 100%;
}
.hero__title {
  color: #fff;
  margin: 20px 0 22px;
  max-width: 16ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .35);
}
.hero__title .soft { color: var(--yellow-400); }
.hero__sub {
  font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.62;
  max-width: 54ch; color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 20px rgba(0, 0, 0, .3);
  margin-bottom: 32px;
}
.hero__actions { margin-bottom: 40px; }
.hero__chips { border-top: 1px solid rgba(255,255,255,.16); padding-top: 26px; }

/* page hero for interior pages */
.page-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(44px, 6vw, 76px) clamp(52px, 6vw, 80px);
  background: linear-gradient(180deg, var(--yellow-50) 0%, #fff 100%);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 820px; }
.page-hero h1 { margin: 18px 0 20px; }
.page-hero .lede { max-width: 62ch; }
.page-hero .btn-row { margin-top: 32px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-4); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--yellow-ink); }
.crumbs span[aria-current] { color: var(--yellow-ink); font-weight: 600; }

/* ============================================================== COMPONENTS */

/* --- marquee (client / tech logos) --- */
.marquee { overflow: hidden; position: relative; --marquee-dur: 34s; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--surface-2), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--surface-2), transparent); }
.marquee--onwhite::before { background: linear-gradient(90deg, #fff, transparent); }
.marquee--onwhite::after { background: linear-gradient(270deg, #fff, transparent); }
.marquee__track { display: flex; width: max-content; animation: slide var(--marquee-dur) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: clamp(36px, 5vw, 68px); padding-right: clamp(36px, 5vw, 68px); }
.marquee__item {
  font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: .01em;
  color: var(--ink-4); white-space: nowrap;
  transition: color var(--t-panel) var(--ease-out);
}
.marquee:hover .marquee__item { color: var(--ink-3); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- expertise / process: numbered accordion (wezom 01/ 02/) --- */
.numlist { border-top: 1px solid var(--line); }
.numrow { border-bottom: 1px solid var(--line); }
.numrow__head {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 34px);
  width: 100%; text-align: left;
  padding: clamp(22px, 2.6vw, 30px) 0;
  transition: color var(--t-base) var(--ease-out);
}
.numrow__n {
  font-family: var(--display); font-size: 14px; font-weight: 500; letter-spacing: .08em;
  color: var(--yellow-500); flex: none; width: 42px;
  transition: color var(--t-base) var(--ease-out);
}
.numrow__t {
  font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 400;
  line-height: 1.2; letter-spacing: -.01em; color: var(--ink); flex: 1;
  transition: transform var(--t-panel) var(--ease-out), color var(--t-base) var(--ease-out);
}
.numrow__toggle {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--line); color: var(--yellow-ink);
  transition: background var(--t-panel) var(--ease-out), border-color var(--t-panel) var(--ease-out),
              color var(--t-panel) var(--ease-out), transform .4s var(--ease);
}
.numrow__head:active .numrow__toggle { transform: scale(.94); }
.numrow__head:hover .numrow__t { transform: translateX(6px); color: var(--yellow-ink); }
.numrow__head:hover .numrow__toggle { border-color: var(--yellow-500); background: var(--yellow-50); }
.numrow.is-open .numrow__toggle { background: var(--grad-brand); border-color: transparent; color: var(--ink); transform: rotate(45deg); }
.numrow.is-open .numrow__n { color: var(--yellow-ink); }

.numrow__panel { overflow: hidden; height: 0; transition: height .45s var(--ease); }
.numrow__body {
  padding: 0 0 clamp(26px, 3vw, 36px) calc(42px + clamp(16px, 3vw, 34px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px 48px;
}
.numrow__body p { color: var(--ink-3); max-width: 62ch; margin-bottom: 20px; }
.numrow__tags { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
@media (max-width: 820px) {
  .numrow__body { grid-template-columns: 1fr; padding-left: 0; }
}

/* --- feature / service cards --- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 2.6vw, 32px);
  text-decoration: none;
  display: flex; flex-direction: column;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, var(--yellow-50) 0%, rgba(255,255,255,0) 58%);
  opacity: 0; transition: opacity var(--t-base) var(--ease-out);
}
a.card:hover, .card--hoverable:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(240, 173, 0, .28);
}
a.card:hover::before, .card--hoverable:hover::before { opacity: 1; }
.card__ic {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 22px;
  display: grid; place-items: center;
  background: var(--yellow-100); color: var(--yellow-ink);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
a.card:hover .card__ic, .card--hoverable:hover .card__ic {
  background: var(--grad-brand); color: var(--ink); transform: scale(1.04) rotate(-3deg);
}
.card h3 { margin-bottom: 11px; }
.card p { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.card__foot { margin-top: auto; padding-top: 22px; }
.card--alt { background: var(--surface-2); border-color: transparent; }

/* --- stats (wezom numbers) --- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.stat { background: #fff; padding: clamp(26px, 3vw, 36px); }
.section--ink .stats { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.14); }
.section--ink .stat { background: var(--ink); }
.stat__n {
  font-family: var(--display); font-size: clamp(36px, 4.4vw, 52px); font-weight: 300;
  line-height: 1; letter-spacing: -.02em; margin-bottom: 12px;
  background: var(--grad-deep); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* on the navy band the figures go yellow — far more legible than blue on
   blue, and it is where the accent colour does the most work */
.section--ink .stat__n { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; }
.stat__l { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.section--ink .stat__l { color: rgba(255,255,255,.66); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- case study cards --- */
.case {
  position: relative; display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; text-decoration: none;
  background: var(--ink); min-height: 340px;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.case:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.case__bg { position: absolute; inset: 0; background: var(--grad-deep); }
.case__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 80% 0%, rgba(255,255,255,.22), transparent 60%),
              linear-gradient(to top, rgba(5, 14, 30,.86) 10%, rgba(5, 14, 30,.18) 70%);
  transition: opacity .45s var(--ease);
}
.case--accent .case__bg { background: linear-gradient(145deg, #ffc42e 0%, #3d86dd 50%, #0a3170 100%); }
.case--deep .case__bg { background: linear-gradient(140deg, #0f4bad 0%, #0d1626 100%); }
.case__inner { position: relative; z-index: 1; padding: clamp(24px, 2.6vw, 32px); display: flex; flex-direction: column; height: 100%; }
.case__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: auto; }
.case__tag {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.case h3 { color: #fff; font-size: clamp(18px, 1.8vw, 22px); margin: 28px 0 20px; max-width: 24ch; }
.case__metrics { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); }
.case__metric strong {
  display: block; font-family: var(--display); font-size: 26px; font-weight: 400;
  color: #fff; line-height: 1.1; margin-bottom: 5px;
}
.case__metric span { font-size: 12.5px; color: rgba(255,255,255,.7); }

/* --- testimonials --- */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(26px, 2.8vw, 34px);
  display: flex; flex-direction: column;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.quote__stars { display: flex; gap: 3px; color: var(--yellow); margin-bottom: 20px; }
.quote p { font-size: 15.5px; line-height: 1.68; color: var(--ink-2); margin-bottom: 26px; }
.quote__who { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.quote__av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--grad-brand); color: var(--ink);
  font-family: var(--display); font-size: 16px; font-weight: 500;
}
.quote__n { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.quote__r { font-size: 13px; color: var(--ink-3); }

/* --- tabs --- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.tab {
  padding: 10px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); background: #fff;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.tab:hover { border-color: var(--yellow-500); color: var(--yellow-ink); }
.tab:active { transform: scale(.97); }
.tab.is-active { background: var(--grad-brand); color: var(--ink); border-color: transparent; box-shadow: 0 4px 14px rgba(240, 173, 0,.26); }
.tabpanel[hidden] { display: none; }

/* --- industries --- */
.ind {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 24px; border-radius: 16px; text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--t-panel) var(--ease-out), border-color var(--t-panel) var(--ease-out), transform var(--t-panel) var(--ease-out);
}
.ind:hover { background: #fff; border-color: var(--line); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.ind__ic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--yellow-100); color: var(--yellow-ink); transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.ind:hover .ind__ic { background: var(--grad-brand); color: var(--ink); }
.ind h3 { font-size: 17px; margin-bottom: 7px; }
.ind p { font-size: 14px; line-height: 1.55; color: var(--ink-3); }

/* --- FAQ / accordion --- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; text-align: left; padding: 24px 0;
  font-family: var(--display); font-size: clamp(17px, 1.6vw, 20px); font-weight: 400;
  color: var(--ink); line-height: 1.4;
  transition: color var(--t-base) var(--ease-out);
}
.faq__q:hover { color: var(--yellow-ink); }
.faq__q:active .faq__ic { transform: scale(.94); }
.faq__ic {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--yellow-ink);
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.faq__item.is-open .faq__ic { background: var(--grad-brand); border-color: transparent; color: var(--ink); transform: rotate(45deg); }
.faq__a { overflow: hidden; height: 0; transition: height .4s var(--ease); }
.faq__a > div { padding-bottom: 26px; max-width: 70ch; color: var(--ink-3); }
.faq__a p + p { margin-top: 14px; }

/* --- pricing (interlaced.io core packages) --- */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.price-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .price-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .price-grid, .price-grid--2, .price-grid--4 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

.plan {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(26px, 2.8vw, 34px);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan--featured {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-brand) border-box;
  border: 1.6px solid transparent;
}
.plan--featured:hover { transform: translateY(-7px); }
.plan__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--grad-accent); color: var(--ink); box-shadow: 0 4px 14px rgba(255, 196, 46, .45);
  white-space: nowrap;
}
.plan__name { font-family: var(--display); font-size: 24px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.plan__pitch { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); min-height: 66px; }
.plan__price { margin: 24px 0 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__cur { font-family: var(--display); font-size: 17px; font-weight: 500; color: var(--ink-3); }
.plan__amt {
  font-family: var(--display); font-size: clamp(34px, 3.6vw, 44px); font-weight: 300;
  line-height: 1; letter-spacing: -.02em; color: var(--ink);
}
.plan--featured .plan__amt {
  background: var(--grad-deep); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.plan__per { font-size: 14px; color: var(--ink-3); }
.plan__meta { font-size: 13px; color: var(--ink-4); margin-bottom: 22px; }
.plan__inherit {
  font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 14px;
  padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.plan__feats { display: grid; gap: 13px; margin-bottom: 28px; }
.plan__feats li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.plan__tick {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--yellow-100); color: var(--yellow-ink);
}
.plan--featured .plan__tick { background: var(--grad-brand); color: var(--ink); }
.plan__cta { margin-top: auto; }

/* add-on cards */
.addon {
  display: flex; gap: 20px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(24px, 2.6vw, 30px);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.addon:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.addon__ic { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--yellow-100); color: var(--yellow-ink); }
.addon__tag {
  display: inline-block; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--yellow);
}
.addon h3 { margin-bottom: 9px; }
.addon p { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); margin-bottom: 14px; }
.addon__price { font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--ink); }
.addon__price small { font-family: var(--body); font-size: 13px; font-weight: 400; color: var(--ink-3); }

/* comparison table */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.cmp thead th {
  font-family: var(--display); font-size: 16px; font-weight: 500; color: var(--ink);
  background: var(--surface-2); position: sticky; top: 0;
}
.cmp tbody th { font-weight: 600; color: var(--ink-2); }
.cmp td { text-align: center; color: var(--ink-3); }
.cmp td.yes { color: var(--yellow-ink); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp tbody tr:hover { background: var(--yellow-50); }

/* --- step / process cards --- */
/* The 1px gap draws the separators. The container stays white rather than
   line-coloured so a row that does not divide evenly leaves whitespace, not
   a grey block; the separators come from each cell's own outline instead. */
.steps { display: grid; gap: 1px; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
.step { background: #fff; padding: clamp(24px, 2.6vw, 32px); transition: background var(--t-panel) var(--ease-out); box-shadow: 0 0 0 1px var(--line); }
.step:hover { background: var(--yellow-50); }
.step--cta { background: var(--yellow-50); display: flex; flex-direction: column; justify-content: center; }
.step--cta:hover { background: var(--yellow-100); }
.step--cta h3 { margin-bottom: 14px; }
.step__n {
  font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: .1em;
  color: var(--yellow-500); margin-bottom: 18px;
}
.step h3 { font-size: 18px; margin-bottom: 10px; }
.step p { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }

/* --- CTA band --- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: 26px;
  background: var(--grad-brand);
  padding: clamp(40px, 5vw, 72px) clamp(26px, 4vw, 64px);
  color: var(--ink);
  isolation: isolate;
}
.cta-band::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background:
    radial-gradient(60% 120% at 88% 8%, rgba(255, 255, 255, .45), transparent 62%),
    radial-gradient(52% 100% at 6% 96%, rgba(240, 173, 0, .5), transparent 62%);
}

/* The band's texture is the brand's own spark, scattered and drifting —
   not a tiled hairline grid, which is a generated-UI tell and says nothing
   about this company. Decorative, behind the text, ink at low opacity. */
.cta-band__art {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.cta-band__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-band__art .spark {
  fill: rgba(20, 17, 10, .16);
  transform-box: fill-box; transform-origin: center;
  animation: ctaSpark 9s var(--ease-in-out) infinite;
}
.cta-band__art .spark:nth-child(2n)  { fill: rgba(20, 17, 10, .1); animation-duration: 12s; animation-delay: -3s; }
.cta-band__art .spark:nth-child(3n)  { fill: rgba(255, 255, 255, .3); animation-duration: 14s; animation-delay: -6s; }
.cta-band__art .spark:nth-child(5n)  { animation-duration: 11s; animation-delay: -1.5s; }
@keyframes ctaSpark {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%      { transform: translateY(-10px) rotate(45deg) scale(1.12); }
}

/* two slow rings, so the panel has structure as well as texture */
.cta-band__rings { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cta-band__rings i {
  position: absolute; display: block; border-radius: 50%;
  border: 1.6px solid rgba(20, 17, 10, .16);
}
.cta-band__rings i:nth-child(1) {
  width: 340px; height: 340px; right: -90px; top: -120px;
  animation: ctaRing 30s var(--ease-in-out) infinite alternate;
}
.cta-band__rings i:nth-child(2) {
  width: 220px; height: 220px; right: 40px; bottom: -90px;
  border-color: rgba(20, 17, 10, .12);
  animation: ctaRing 24s var(--ease-in-out) infinite alternate-reverse;
}
@keyframes ctaRing {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-26px, 18px, 0) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-band__art .spark, .cta-band__rings i { animation: none; }
}
.cta-band h2 { color: var(--ink); max-width: 20ch; margin-bottom: 18px; }
.cta-band p { color: rgba(20, 17, 10, .74); max-width: 56ch; font-size: 17px; line-height: 1.65; margin-bottom: 32px; }
.cta-band .eyebrow { color: rgba(20, 17, 10, .62); margin-bottom: 18px; }
.cta-band .eyebrow::before { background: rgba(20, 17, 10, .45); }
/* the band is yellow, so the glass button needs ink, not white, on it */
.cta-band .btn--glass {
  background: rgba(20, 17, 10, .05); color: var(--ink);
  border-color: rgba(20, 17, 10, .32); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.cta-band .btn--glass:hover { background: rgba(20, 17, 10, .1); border-color: rgba(20, 17, 10, .5); }

/* --- traits: four short claims, carried by the icon rather than a paragraph */
.trait {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(22px, 2.4vw, 28px);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.trait:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.trait__ic {
  width: 48px; height: 48px; border-radius: 13px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--grad-brand); color: var(--ink);
}
.trait h3 { font-size: 17px; line-height: 1.35; margin-bottom: 7px; }
.trait p { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }

/* --- work cards: the product's own screen, not a decorative gradient --- */
.workcard {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.workcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(240, 173, 0, .5); }
.workcard:active { transform: translateY(-1px) scale(.99); }

.workcard__shot {
  display: block; position: relative;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.workcard__shot img {
  width: 100%; height: 100%; object-fit: cover;
  /* phone captures are tall; show the top, which is where each app's own
     header and headline live */
  object-position: top center;
  transition: transform 420ms var(--ease-out);
}
.workcard:hover .workcard__shot img { transform: scale(1.035); }
.workcard__glyph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--grad-brand); color: var(--ink);
}

.workcard__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.workcard__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.workcard__tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2);
}
.workcard__tag--live { background: var(--grad-brand); color: var(--ink); }
.workcard h3 { font-size: 18px; margin-bottom: 9px; }
.workcard p { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }

/* --- product showcase --- */
.product {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 68px);
}
.product + .product { border-top: 1px solid var(--line-soft); }
.product--flip > *:first-child { order: 2; }
@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; gap: 32px; }
  .product--flip > *:first-child { order: 0; }
}
.product__sub {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--yellow-ink);
}
.product__media { display: flex; justify-content: center; }

/* a phone screenshot sits in a device frame so tall images do not have to be
   cropped to fit a landscape card */
.phone {
  width: min(280px, 100%);
  border-radius: 34px;
  padding: 9px;
  background: linear-gradient(160deg, #2b2822, #14110a);
  box-shadow: var(--shadow-lg);
}
.phone img { width: 100%; height: auto; border-radius: 26px; display: block; }

.framed {
  width: 100%; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.framed img { width: 100%; height: auto; display: block; }

.product__glyph {
  width: min(240px, 100%); aspect-ratio: 1; border-radius: 28px;
  display: grid; place-items: center;
  background: var(--grad-brand); color: var(--ink);
  box-shadow: var(--shadow-lg);
}

/* --- article cards (insights) --- */
.post {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(240, 173, 0,.28); }
.post__thumb { height: 168px; background: var(--grad-brand); position: relative; overflow: hidden; }
.post__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 20% 10%, rgba(255,255,255,.3), transparent 58%);
}
.post--b .post__thumb { background: linear-gradient(140deg, #0f4bad, #0d1626); }
.post--c .post__thumb { background: linear-gradient(140deg, #ffc42e, #1565e0); }
.post--d .post__thumb { background: linear-gradient(140deg, #1565e0, #93c0f9); }
.post__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post__meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow-ink); margin-bottom: 14px; }
.post__meta time { color: var(--ink-4); font-weight: 600; letter-spacing: .04em; }
.post h3 { font-size: 17.5px; line-height: 1.4; margin-bottom: 11px; }
.post p { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); margin-bottom: 18px; }
.post__foot { margin-top: auto; font-size: 13px; color: var(--ink-4); }

/* --- contact form --- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field label .req { color: var(--yellow-600); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 15px; color: var(--ink);
  padding: 14px 16px; border-radius: 10px;
  border: 1.5px solid var(--line); background: #fff; width: 100%;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--yellow-500);
  box-shadow: 0 0 0 4px rgba(240, 173, 0, .12);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6779' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.form__note { font-size: 13px; color: var(--ink-4); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface-2); border-radius: 20px; padding: clamp(26px, 3vw, 34px); }
/* dt/dd must sit directly inside the div that is the dl's child, so the icon
   lives inside the dt rather than as a sibling span. */
.contact-line { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-line:last-child { border-bottom: 0; }
.contact-line dt {
  display: flex; align-items: center; gap: 13px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 8px;
}
.contact-line__ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: #fff; color: var(--yellow-ink); box-shadow: var(--shadow-sm); }
.contact-line dd { font-size: 15.5px; color: var(--ink); font-weight: 600; padding-left: 51px; }
.contact-line dd a { text-decoration: none; }
.contact-line dd a:hover { color: var(--yellow-ink); }

/* --- split media block --- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--flip > *:first-child { order: 2; }
@media (max-width: 900px) { .split--flip > *:first-child { order: 0; } }
/* On a phone the decorative panel is just another screen of scrolling before
   the words that matter, so it steps out entirely. */
@media (max-width: 760px) { .split__media { display: none; } }
.split__media {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--grad-brand);
  box-shadow: var(--shadow-lg);
}
.split__media img, .split__media video { width: 100%; height: 100%; object-fit: cover; }
.split__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(100% 80% at 15% 5%, rgba(255,255,255,.2), transparent 60%);
  pointer-events: none;
}
/* branded summary panel used where a photograph would otherwise repeat */
.factpanel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 22px; padding: clamp(28px, 3vw, 38px);
  background: var(--grad-brand); color: rgba(20, 17, 10, .72);
  box-shadow: var(--shadow-lg);
}
.factpanel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(62% 100% at 88% 6%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(54% 92% at 4% 98%, rgba(240, 173, 0, .48), transparent 62%);
}
.factpanel h3 { color: var(--ink); margin-bottom: 22px; }
.factpanel dl { display: grid; gap: 0; }
.factpanel dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(20, 17, 10, .58); margin-bottom: 6px;
}
.factpanel dd {
  font-family: var(--display); font-size: clamp(19px, 2vw, 23px); font-weight: 400;
  line-height: 1.3; color: var(--ink);
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid rgba(20, 17, 10, .16);
}
.factpanel dd:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

.checklist { display: grid; gap: 14px; margin: 26px 0 32px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.checklist__tick { width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px; display: grid; place-items: center; background: var(--yellow-100); color: var(--yellow-ink); }

/* ================================================================== FOOTER
   The page does not stop at a dark slab — it melts into the landscape the
   site opened with. A white-to-transparent gradient dissolves the page
   background into the artwork, so the columns sit in the pale sky and the
   scene is fully revealed by the time you reach the bottom.               */

.site-footer {
  position: relative;
  margin-top: clamp(72px, 10vw, 120px);
  padding-top: clamp(64px, 9vw, 112px);
  min-height: 940px;
  background-image: url("../hero-image.webp");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  overflow: hidden;
  color: var(--ink-2);
}
/* the melt */
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Holds enough white behind the columns and the legal row to keep them
     readable, then lets go so the last third is pure artwork. */
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 16%,
    rgba(255, 255, 255, .96) 30%,
    rgba(255, 255, 255, .88) 46%,
    rgba(255, 255, 255, .74) 58%,
    rgba(255, 255, 255, .34) 70%,
    rgba(255, 255, 255, 0) 82%
  );
}
.site-footer > * { position: relative; z-index: 2; }

.footer-top {
  padding-block: 0 clamp(36px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px;
}
@media (max-width: 980px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } }

.footer-brand .brand__name { color: var(--ink); }
.footer-brand p { font-size: 14.5px; line-height: 1.65; margin: 20px 0 24px; max-width: 38ch; color: var(--ink-2); }
.footer-reg { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 40ch; }

.socials { display: flex; gap: 10px; margin-bottom: 24px; }
.socials a {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--line);
  color: var(--ink-2);
  transition: background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.socials a:hover { background: var(--grad-brand); border-color: transparent; color: var(--ink); transform: translateY(-3px); }
.socials a:active { transform: translateY(-1px) scale(.96); }

.fcol .fcol__h {
  color: var(--ink); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px;
}
.fcol ul { display: grid; gap: 12px; }
.fcol a {
  font-size: 14.5px; color: var(--ink-2); text-decoration: none; display: inline-block;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.fcol a:hover { color: var(--yellow-ink); transform: translateX(3px); }

.footer-bottom {
  padding-block: 24px; border-top: 1px solid rgba(20, 17, 10, .14);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 13.5px; color: var(--ink); font-weight: 500;
}
.footer-bottom a { color: var(--ink); text-decoration: none; font-weight: 600; }
.footer-bottom a:hover { color: var(--yellow-ink); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }

/* On a phone the footer stacks into one tall column — far taller than the
   artwork — so overlaying it would bury the links. Instead the content keeps
   a clean white ground and the scene becomes a band beneath it, masked so the
   page still dissolves into the landscape rather than butting against it. */
@media (max-width: 760px) {
  .site-footer {
    background-image: none;
    min-height: 0;
    margin-top: clamp(56px, 12vw, 80px);
    padding-top: 8px;
  }
  .site-footer::before { display: none; }
  .site-footer::after {
    content: "";
    display: block;
    height: 320px;
    margin-top: 28px;
    background-image: url("../footer-portrait.webp");
    background-size: cover;
    background-position: center 26%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
  }
  .footer-bottom { border-top-color: var(--line); }
}

/* ================================================== scroll reveal + motion */

[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal="fade"] { transform: none; }
[data-reveal][data-reveal="left"] { transform: translateX(-24px); }
[data-reveal][data-reveal="right"] { transform: translateX(24px); }
[data-reveal].is-in { transform: none; }

.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(1) { transition-delay: .00s; }
.stagger.is-in > *:nth-child(2) { transition-delay: .07s; }
.stagger.is-in > *:nth-child(3) { transition-delay: .14s; }
.stagger.is-in > *:nth-child(4) { transition-delay: .21s; }
.stagger.is-in > *:nth-child(5) { transition-delay: .28s; }
.stagger.is-in > *:nth-child(6) { transition-delay: .35s; }
.stagger.is-in > *:nth-child(7) { transition-delay: .42s; }
.stagger.is-in > *:nth-child(8) { transition-delay: .49s; }
.stagger.is-in > *:nth-child(9) { transition-delay: .56s; }
.stagger.is-in > *:nth-child(10) { transition-delay: .63s; }

/* hero entrance */
.hero__inner > * { animation: riseIn .9s var(--ease-out) both; }
.hero__inner > *:nth-child(1) { animation-delay: .10s; }
.hero__inner > *:nth-child(2) { animation-delay: .20s; }
.hero__inner > *:nth-child(3) { animation-delay: .30s; }
.hero__inner > *:nth-child(4) { animation-delay: .40s; }
.hero__inner > *:nth-child(5) { animation-delay: .50s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* scroll progress bar */
/* scaleX rather than width so the bar updates on the compositor */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 101;
  background: var(--grad-deep);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], .stagger > *, .hero__inner > * { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .hero__media { animation: none; transform: none; }
  /* the character stays up rather than cycling in and out */
  .peek { animation: none; transform: translateY(0) !important; }
}

/* ================================================================= onboard */

html.ss-onboarding body { overflow: hidden; }

/* The gate only exists while the root carries .ss-onboarding, which the
   inline head script strips before first paint for anyone who has already
   answered. Without this the markup painted on every single load and was
   only torn down once the deferred script ran — which is the dark flash
   you saw whenever you clicked the logo. */
.onboard { display: none; }

html.ss-onboarding .onboard {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--ink);
  padding: 24px;
  overflow-y: auto;
  transition: opacity .6s var(--ease), visibility .6s;
}
.onboard::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 12% 8%, rgba(240, 173, 0,.55), transparent 62%),
    radial-gradient(46% 58% at 88% 92%, rgba(255, 196, 46,.26), transparent 62%);
}
html.ss-onboarding .onboard.is-hidden { opacity: 0; visibility: hidden; }
.onboard__inner { position: relative; width: 100%; max-width: 470px; }
.onboard__brand { display: flex; align-items: center; gap: 11px; justify-content: center; margin-bottom: 26px; }
.onboard__brand .brand__name { color: #fff; }
.onboard__card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px; padding: clamp(24px, 4vw, 34px);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.onboard__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow-400); margin-bottom: 12px; }
.onboard__q { font-size: 27px; line-height: 1.2; font-weight: 300; color: #fff; margin-bottom: 10px; }
.onboard__sub { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.62); margin-bottom: 26px; }
.onboard__group { margin-bottom: 18px; }
.onboard__label { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); margin-bottom: 8px; }
.onboard__field { position: relative; }
.onboard__field > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.5); pointer-events: none; }
.onboard__select {
  appearance: none; width: 100%;
  font-family: var(--body); font-size: 15px; color: #fff;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.16); border-radius: 10px;
  padding: 14px 44px 14px 16px;
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.onboard__select:focus { outline: none; border-color: var(--yellow-500); background: rgba(255,255,255,.1); }
.onboard__select option, .onboard__select optgroup { color: #0d1626; background: #fff; }
.onboard__btn {
  width: 100%; margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 600; padding: 15px 24px; border-radius: 10px;
  background: var(--grad-brand); color: var(--ink);
  box-shadow: var(--shadow-brand);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.onboard__btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.onboard__btn:not(:disabled):hover { transform: translateY(-2px); }
.onboard__status { text-align: center; font-size: 12.5px; color: rgba(255,255,255,.45); margin-top: 14px; }
.onboard__foot { text-align: center; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.42); margin-top: 22px; }
.onboard__foot b { color: rgba(255,255,255,.6); font-weight: 600; }
.onboard__skip {
  display: block; margin: 14px auto 0; font-size: 13px; color: rgba(255,255,255,.5);
  text-decoration: underline; text-underline-offset: 3px; background: none; border: 0;
}
.onboard__skip:hover { color: rgba(255,255,255,.8); }

.spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ misc helpers */
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.small { font-size: 13.5px; }
.note {
  background: var(--yellow-50); border: 1px solid var(--yellow-100);
  border-radius: 12px; padding: 20px 24px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2);
}
.note strong { color: var(--ink); }

/* --------------------------------------------------- sideways on a phone
   Stacking six work cards, ten industries and three testimonials turns the
   phone into a mile of scrolling. On small screens these become a snapping
   horizontal rail instead, bleeding to both edges so the next card peeks
   and it is obvious there is more. Untouched on desktop, where they stay
   ordinary grids. */
@media (max-width: 760px) {
  .hscroll {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll > * {
    flex: 0 0 80%;
    min-width: 0;
    scroll-snap-align: start;
  }
  /* the stat band reads better as two rows than a rail */
  .hscroll--wide > * { flex-basis: 88%; }
}