/* ==========================================================================
   Tecon Group: public site stylesheet (all pages except HQ).
   Hand-rolled CSS, no framework, no build step, nothing loaded from elsewhere.

   Look (Oct 2026, from the showcase demo): near-black and white with the
   Tecon red, one weight of Montserrat at large sizes with tight negative
   tracking, sentence case, 18px rounded panels, pill buttons and a floating
   pill header. Motion is limited to scroll: reveals, the words of the
   statement lighting up, the trades sliding sideways, the process line
   filling and the review cards stacking. Nothing follows the mouse. Every
   page reads the same with JS off or prefers-reduced-motion on.

   Contrast (WCAG 2.x):
   - White on --red #ED1C24 is 4.38:1 (approved for buttons and large text).
   - Small links on white use --red-ink #C8161D (5.85:1) and are underlined.
   - Secondary text: #666 on white 5.7:1, on --mist 5.2:1; --grey-300 on
     --ink 9:1.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #ED1C24;
  --red-ink: #C8161D;
  --ink: #111111;
  --ink-2: #1A1A1A;
  --ink-3: #242424;
  --grey-600: #666666;
  --grey-300: #B3B3B3;
  --line: rgba(17, 17, 17, 0.1);
  --line-dark: rgba(255, 255, 255, 0.12);
  --paper: #FFFFFF;
  --mist: #F4F4F3;
  --teal-2: #11AEC0;
  --font: Montserrat, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --wrap: 1320px;
  --gut: clamp(1rem, 4vw, 2.5rem);
  --sec: clamp(5rem, 3rem + 7vw, 9rem);
  --r: 18px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fs-h1: clamp(2.75rem, 1.2rem + 6.4vw, 7.5rem);
  --fs-h2: clamp(2.1rem, 1.3rem + 3.4vw, 4.6rem);
  --fs-h3: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  --fs-lead: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; font-family: var(--font); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.55; letter-spacing: -0.01em; color: var(--ink); background: var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
svg { flex: none; }
h1, h2, h3 { font-weight: 400; margin: 0 0 0.5em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.045em; }
h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.03em; }
p { margin: 0 0 1em; }
b, strong { font-weight: 400; }
a { color: var(--red-ink); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--teal-2); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--red-ink); color: #fff; padding: 0.75rem 1rem; border-radius: 12px; }
.skip-link:focus { top: 1rem; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.section--flush { padding-top: 0; }
.section--mist { background: var(--mist); }
.head { max-width: 52rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.head--split > div { max-width: 52rem; }
.muted { color: var(--grey-600); }
.lead { font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -0.025em; }
.red { color: var(--red); }
.note { font-size: 0.8125rem; color: var(--grey-600); margin-top: 1.5rem; }
.small-h { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }
/* Small pill above a heading naming the section */
.kicker {
  display: inline-block; margin: 0 0 1.25rem; padding: 0.35rem 0.8rem; border-radius: 999px;
  font-size: 0.8125rem; letter-spacing: 0; color: var(--grey-600); background: var(--mist); border: 1px solid var(--line);
}
.kicker--dark { background: rgba(255,255,255,0.06); color: var(--grey-300); border-color: var(--line-dark); }
.section--mist .kicker { background: #fff; }

/* main sits above the footer so the footer can be revealed like a curtain */
main { position: relative; z-index: 1; background: var(--paper); border-radius: 0 0 28px 28px; }

/* ---------- Buttons and links ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px;
  padding: 0.75rem 1.4rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; font-size: 0.9375rem; line-height: 1; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pill svg { width: 1em; height: 1em; }
.pill--red { background: var(--red); color: #fff; }
.pill--red:hover { background: var(--ink); color: #fff; }
.pill--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.pill--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.pill--ghost-dark { background: transparent; color: var(--ink); border-color: var(--line); }
.pill--ghost-dark:hover { border-color: var(--ink); }
.pill--white { background: #fff; color: var(--ink); }
.pill--white:hover { background: var(--ink); color: #fff; }
.hero .pill--red:hover, .phero .pill--red:hover, .band .pill--red:hover, .hscroll .pill--red:hover, .dark-panel .pill--red:hover, .pano-wrap .pill--red:hover, .card-dark .pill--red:hover { background: #fff; color: var(--ink); }
.pill[disabled] { opacity: 0.6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.link { display: inline-flex; align-items: center; gap: 0.45rem; color: inherit; font-size: 0.9375rem; }
.link svg { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* ---------- Header: floating pill bar ---------- */
.bar {
  position: fixed; top: 12px; left: 0; right: 0; z-index: 700; margin-inline: auto; width: min(calc(100% - 24px), 1180px);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem; border-radius: 999px; color: #fff;
  transition: transform .45s var(--ease-out);
}
/* The glass lives on a pseudo element: a backdrop-filter on the bar itself would trap the
   phone menu (position: fixed) inside the bar's box. */
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(17,17,17,0.78); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
}
.bar.is-hidden { transform: translateY(-140%); }
.bar__brand { flex: none; }
.bar__brand img { width: 150px; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.menu li { position: relative; }
.menu a { display: flex; align-items: center; gap: 0.3rem; padding: 0.55rem 0.85rem; border-radius: 999px; color: #fff; text-decoration: none; font-size: 0.875rem; }
.menu > li > a { opacity: 0.82; }
.menu > li > a:hover, .menu > li > a[aria-current="page"], .menu > li.is-current > a { opacity: 1; background: rgba(255,255,255,0.08); }
.menu .chev { width: 10px; height: 10px; opacity: 0.7; }
.sub { list-style: none; margin: 0; padding: 0.5rem; }
.bar .pill { min-height: 40px; padding: 0.6rem 1.1rem; font-size: 0.875rem; }
.bar__call svg { width: 16px; height: 16px; }
.bar__toggle { display: none; }
@media (min-width: 961px) {
  .sub {
    position: absolute; top: calc(100% + 12px); left: 50%; min-width: 250px; border-radius: var(--r);
    background: var(--ink-2); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 24px 50px -20px rgba(0,0,0,0.6);
    opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity .2s, transform .25s var(--ease-out);
  }
  /* Bridges the gap between the link and its panel so the pointer can cross it */
  .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .sub a { border-radius: 12px; padding: 0.7rem 0.9rem; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .sub a:hover, .sub a[aria-current="page"] { background: rgba(255,255,255,0.08); }
  .sub small { font-size: 0.75rem; color: var(--grey-300); }
}
@media (max-width: 960px) {
  .bar__brand { margin-right: auto; }
  .bar__brand img { width: 120px; }
  .bar__toggle {
    display: grid; place-items: center; width: 44px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25);
    background: transparent; cursor: pointer; padding: 0;
  }
  .bar__toggle span[aria-hidden], .bar__toggle span[aria-hidden]::before, .bar__toggle span[aria-hidden]::after {
    display: block; width: 16px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease-out), background-color .2s;
  }
  .bar__toggle span[aria-hidden] { position: relative; }
  .bar__toggle span[aria-hidden]::before, .bar__toggle span[aria-hidden]::after { content: ""; position: absolute; left: 0; }
  .bar__toggle span[aria-hidden]::before { top: -5px; }
  .bar__toggle span[aria-hidden]::after { top: 5px; }
  .bar__toggle[aria-expanded="true"] span[aria-hidden] { background: transparent; }
  .bar__toggle[aria-expanded="true"] span[aria-hidden]::before { transform: translateY(5px) rotate(45deg); }
  .bar__toggle[aria-expanded="true"] span[aria-hidden]::after { transform: translateY(-5px) rotate(-45deg); }
  /* Without JS the menu stays a row of links under the logo */
  html:not(.js) .bar { flex-wrap: wrap; border-radius: 24px; }
  html:not(.js) .bar__nav { order: 3; width: 100%; overflow-x: auto; }
  html:not(.js) .sub { display: none; }
  .js .bar__nav {
    position: fixed; inset: 0; z-index: -1; display: none; overflow-y: auto; overscroll-behavior: contain;
    padding: 96px var(--gut) 2rem; background: var(--ink);
  }
  .js .bar__nav.is-open { display: block; animation: menuin .35s var(--ease-out); }
  .js .menu { flex-direction: column; gap: 0; max-width: 34rem; margin-inline: auto; }
  .js .menu > li { border-bottom: 1px solid var(--line-dark); }
  .js .menu > li > a { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); letter-spacing: -0.04em; padding: 0.85rem 0; border-radius: 0; opacity: 1; background: none; }
  .js .menu > li > a[aria-current="page"] { color: var(--red); }
  .js .menu .chev { display: none; }
  .js .sub { padding: 0 0 1rem; display: grid; gap: 0.1rem; }
  .js .sub a { padding: 0.45rem 0; color: var(--grey-300); font-size: 1rem; border-radius: 0; }
  .js .sub a[aria-current="page"] { color: #fff; }
  .js .sub small { display: none; }
  .menu__extra { display: grid; gap: 0.75rem; max-width: 34rem; margin: 2rem auto 0; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 961px) { .menu__extra { display: none; } }
html:not(.js) .menu__extra { display: none; }
@keyframes menuin { from { opacity: 0; } }
/* Logo, number and menu button still fit side by side on a 320px phone */
@media (max-width: 380px) {
  .bar { padding-left: 0.9rem; gap: 0.5rem; }
  .bar__brand img { width: 100px; }
  .bar .pill { padding-inline: 0.8rem; font-size: 0.8125rem; gap: 0.35rem; }
  .bar__call svg { width: 14px; height: 14px; }
  .bar__toggle { width: 40px; }
}
@media (max-width: 335px) { .bar__brand img { width: 88px; } .bar .pill { padding-inline: 0.65rem; } }

/* ---------- Home hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden;
  background: var(--ink); color: #fff; padding: 120px var(--gut) clamp(3rem, 6vw, 6rem);
}
.hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px circle at 68% 34%, rgba(237,28,36,0.2), transparent 62%); }
.hero__layers { position: absolute; inset: 0; pointer-events: none; }
.layer { position: absolute; margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.layer img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.layer--a { width: 34vw; aspect-ratio: 16/9; right: 6vw; top: 14vh; }
.layer--b { width: 15vw; aspect-ratio: 4/5; right: 39vw; top: 10vh; }
.layer--c { width: 20vw; aspect-ratio: 4/3; right: 14vw; top: 50vh; }
@media (max-width: 760px) { .layer--b, .layer--c { display: none; } .layer--a { width: 70vw; right: -10vw; top: 90px; opacity: 0.6; } }
.hero__inner { position: relative; max-width: var(--wrap); width: 100%; margin-inline: auto; }
.hero__pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.4rem 0.9rem 0.4rem 0.4rem; border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 0.875rem; color: var(--grey-300); }
.hero__pill b { white-space: nowrap; background: var(--red-ink); color: #fff; border-radius: 999px; padding: 0.1rem 0.6rem; }
.hero__title { font-size: clamp(3rem, 1.2rem + 8.6vw, 10rem); line-height: 0.92; letter-spacing: -0.06em; margin: 1.25rem 0 1.5rem; max-width: 12ch; }
.hero__sub { font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); line-height: 1.3; color: var(--grey-300); }
.hero__cue { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; translate: -50% 0; }
.hero__cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: cue 1.6s infinite var(--ease); }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 760px) { .hero__cue { display: none; } }
/* The hero settles in once on load */
.js .hero__inner > *, .js .phero__inner > * { animation: rise .9s var(--ease-out) both; }
.js .hero__inner > :nth-child(2), .js .phero__inner > :nth-child(2) { animation-delay: .08s; }
.js .hero__inner > :nth-child(3), .js .phero__inner > :nth-child(3) { animation-delay: .16s; }
.js .hero__inner > :nth-child(4), .js .phero__inner > :nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

.rotor { display: inline-grid; vertical-align: top; overflow: hidden; height: 1.3em; line-height: 1.3; color: #fff; }
.rotor span { grid-area: 1 / 1; transition: transform .7s var(--ease-out), opacity .5s; }
.js .rotor span { transform: translateY(100%); opacity: 0; }
.js .rotor span.is-on { transform: none; opacity: 1; }
.js .rotor span.is-off { transform: translateY(-100%); opacity: 0; }
html:not(.js) .rotor span:not(:first-child) { display: none; }

/* ---------- Inner page hero ---------- */
.phero {
  position: relative; overflow: hidden; color: #fff; padding-top: clamp(130px, 9rem + 4vw, 210px);
  background: var(--ink);
}
.phero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(640px circle at 82% 10%, rgba(237,28,36,0.18), transparent 62%); }
.phero__inner { position: relative; padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.phero h1 { font-size: var(--fs-h1); line-height: 0.95; letter-spacing: -0.055em; margin: 0 0 1.5rem; max-width: 14ch; }
.phero__lead { font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -0.025em; color: var(--grey-300); max-width: 40ch; }
.phero .actions { margin-top: 2rem; }
/* The photo straddles the dark hero and the white page below it */
.phero--media { background: linear-gradient(var(--ink) 0 calc(100% - clamp(70px, 6vw, 130px)), var(--paper) 0); }
.phero__media { position: relative; margin: 0 auto; }
.phero__media img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--r); }
@media (max-width: 760px) { .phero__media img { aspect-ratio: 16 / 10; } }
.crumbs ol { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8125rem; color: var(--grey-300); }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Marquee (moves only while the page scrolls) ---------- */
.marquee { overflow: hidden; background: var(--red); color: #fff; padding-block: 1.1rem; }
.marquee__track { display: flex; align-items: center; gap: 2rem; width: max-content; }
.marquee span { font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); letter-spacing: -0.04em; white-space: nowrap; }
.marquee i { width: 14px; height: 14px; border: 2px solid #fff; transform: rotate(45deg); flex: none; }

/* ---------- Statement + stats ---------- */
.statement { font-size: clamp(1.7rem, 1rem + 3vw, 4rem); line-height: 1.1; letter-spacing: -0.045em; max-width: 24ch; }
.js .statement .word { color: rgba(17,17,17,0.16); transition: color .3s; }
.js .statement .word.is-lit { color: var(--ink); }
.stats { list-style: none; margin: clamp(3rem, 6vw, 6rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; border-top: 1px solid var(--line); }
.stats li { padding-top: 1.5rem; }
.stats strong { display: block; font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 1; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.stats span { color: var(--grey-600); font-size: 0.9375rem; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.statement-wrap .actions { margin-top: 2.5rem; }

/* ---------- Trades: panels that slide sideways while you scroll ---------- */
.hscroll { background: var(--ink); color: #fff; position: relative; }
.hscroll__sticky { padding: var(--sec) 0; }
.hscroll__head { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.hscroll__track { display: grid; gap: 1.25rem; padding-inline: var(--gut); max-width: var(--wrap); margin-inline: auto; }
.panel { position: relative; border-radius: var(--r); overflow: hidden; background: var(--ink-2); display: grid; grid-template-columns: 1.1fr 1fr; min-height: 60vh; }
.panel__media { overflow: hidden; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; }
.panel__body { padding: clamp(1.5rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; }
.panel__body h3 { color: #fff; }
.panel__body p { color: var(--grey-300); max-width: 34ch; }
.panel__num { font-size: clamp(4rem, 3rem + 4vw, 8rem); line-height: 1; letter-spacing: -0.06em; color: rgba(255,255,255,0.12); margin-bottom: auto; }
.panel__icon { width: 56px; filter: brightness(0) invert(1); opacity: 0.9; }
.panel--cta { grid-template-columns: 1fr; background: var(--red-ink); }
.panel--cta .panel__body p { color: #fff; }
.panel--cta .panel__num { color: rgba(255,255,255,0.3); }
.panel--cta .pill { align-self: flex-start; }
.panel .link { color: #fff; }
@media (max-width: 760px) { .panel { grid-template-columns: 1fr; } .panel__media { aspect-ratio: 16/10; } }
/* Pinned mode (JS sets the section height from the track width) */
.hscroll.is-pinned .hscroll__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-block: 0; }
.hscroll.is-pinned .hscroll__track { display: flex; max-width: none; width: max-content; margin: 0; padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); }
.hscroll.is-pinned .panel { width: min(78vw, 980px); height: min(62vh, 620px); min-height: 0; flex: none; }
.hscroll.is-pinned .panel--cta { width: min(60vw, 520px); }
@media (max-width: 760px) { .hscroll.is-pinned .panel { width: 86vw; height: 66svh; grid-template-rows: 45% 1fr; } .hscroll.is-pinned .panel--cta { width: 86vw; } .hscroll.is-pinned .panel__media { aspect-ratio: auto; } .panel__num { font-size: 3rem; } }

/* Trade cards (services page): the same panels as a plain grid */
.trades { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.trades .panel { min-height: 0; }
.trades .panel__media { aspect-ratio: 16 / 10; }
@media (min-width: 761px) { .trades .panel__media { aspect-ratio: auto; min-height: 420px; } }

/* ---------- Services by category: accordion ---------- */
.hlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hlist__row { border-bottom: 1px solid var(--line); }
.hlist__btn {
  width: 100%; display: grid; grid-template-columns: 3.5rem 1fr auto 2.5rem; align-items: center; gap: 1rem;
  background: none; border: 0; padding: clamp(1.1rem, 2vw, 1.75rem) 0; text-align: left; cursor: pointer;
}
.hlist__n { color: var(--grey-600); font-size: 0.875rem; }
.hlist__t { font-size: clamp(1.5rem, 1rem + 2.6vw, 3.4rem); letter-spacing: -0.045em; line-height: 1.05; transition: transform .45s var(--ease-out), color .3s; }
.hlist__btn:hover .hlist__t, .hlist__btn[aria-expanded="true"] .hlist__t { transform: translateX(14px); color: var(--red-ink); }
.hlist__c { color: var(--grey-600); font-size: 0.875rem; }
.hlist__x { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); transition: background-color .3s, transform .45s var(--ease-out); }
.hlist__x::before, .hlist__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; translate: -50% -50%; }
.hlist__x::after { rotate: 90deg; }
.hlist__btn[aria-expanded="true"] .hlist__x { transform: rotate(45deg); background: var(--red); color: #fff; border-color: var(--red); }
.hlist__panel { display: grid; grid-template-rows: 1fr; }
.js .hlist__panel { grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.js .hlist__panel.is-open { grid-template-rows: 1fr; }
.hlist__panel > div { overflow: hidden; padding-left: 4.5rem; }
.hlist__panel p { color: var(--grey-600); margin-top: 0.25rem; max-width: 50ch; }
.hlist__panel .link { margin: 0 0 2rem; color: var(--ink); }
.chips { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--mist); font-size: 0.875rem; }
.section--mist .chips li { background: #fff; }
.section--mist .cat .chips li { background: var(--mist); }
@media (max-width: 760px) { .hlist__btn { grid-template-columns: 2rem 1fr auto 2.25rem; gap: 0.6rem; } .hlist__panel > div { padding-left: 0; } }
/* Without JS every category is shown open */
html:not(.js) .hlist__x { display: none; }

/* ---------- Photo band with copy ---------- */
.band { position: relative; min-height: 80vh; display: grid; align-items: center; overflow: hidden; background: #000; color: #fff; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.62) 45%, rgba(0,0,0,0.2) 100%); }
.band__inner { position: relative; z-index: 1; max-width: var(--wrap); width: 100%; margin-inline: auto; padding: var(--sec) var(--gut); }
.band__inner h2 { color: #fff; max-width: 14ch; }
.band__inner p { max-width: 40ch; color: rgba(255,255,255,0.86); }
.band__inner .actions { margin-top: 1.75rem; }
@media (max-width: 760px) { .band::after { background: rgba(0,0,0,0.66); } }

/* ---------- Split: copy beside a photo ---------- */
.split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--rev { grid-template-columns: 1.2fr 0.8fr; }
.split--rev .split__media { order: -1; }
.split__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.split__text .actions { margin-top: 1.75rem; }
@media (max-width: 900px) { .split, .split--rev { grid-template-columns: minmax(0, 1fr); } .split--rev .split__media { order: 0; } }

/* ---------- Process: the line fills as you scroll ---------- */
.dark-panel { background: var(--ink); color: var(--grey-300); margin-inline: clamp(0.5rem, 1.4vw, 1.25rem); border-radius: 24px; }
.dark-panel h2, .dark-panel h3 { color: #fff; }
.circuit { list-style: none; margin: 0; padding: 0 0 0 clamp(3.5rem, 8vw, 7rem); position: relative; display: grid; gap: clamp(3rem, 8vw, 7rem); }
/* The rail, and the red line filling it (--p is set while scrolling) */
.circuit::before, .circuit::after { content: ""; position: absolute; left: clamp(1.25rem, 3.2vw, 2.75rem); top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.12); }
.circuit::after { background: var(--red); transform-origin: top; transform: scaleY(var(--p, 1)); }
.node { display: grid; grid-template-columns: auto 1fr minmax(0, 0.9fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.node__n {
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 0.875rem;
  margin-left: calc(-1 * clamp(3.5rem, 8vw, 7rem) + clamp(1.25rem, 3.2vw, 2.75rem) - 27px);
  background: var(--ink); border: 1px solid rgba(255,255,255,0.2); transition: background-color .4s, border-color .4s, color .4s;
}
.node.is-on .node__n { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }
.node img { border-radius: 14px; aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.js .node > div, .js .node img { opacity: 0.35; transition: opacity .6s, transform .8s var(--ease-out); transform: translateY(20px); }
.js .node.is-on > div, .js .node.is-on img { opacity: 1; transform: none; }
@media (max-width: 760px) { .node { grid-template-columns: auto 1fr; } .node img { grid-column: 2; } .node__n { width: 44px; height: 44px; margin-left: calc(-1 * clamp(3.5rem, 8vw, 7rem) + clamp(1.25rem, 3.2vw, 2.75rem) - 21px); } }
.dark-panel .process-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--line-dark); }
.process-foot p { margin: 0; color: #fff; font-size: var(--fs-lead); letter-spacing: -0.03em; }

/* ---------- Licence and accreditation tiles ---------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { min-height: 180px; padding: 1.5rem; border-radius: var(--r); background: var(--mist); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.tile strong { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); letter-spacing: -0.04em; line-height: 1.05; }
.tile span { color: var(--grey-600); font-size: 0.9375rem; }
.tile--dark { background: var(--ink); color: #fff; }
.tile--dark span { color: var(--grey-300); }
.section--mist .tile:not(.tile--dark) { background: #fff; }
@media (max-width: 480px) { .tiles { gap: 0.6rem; } .tile { min-height: 128px; padding: 1.1rem; } .tile strong { font-size: 1.3rem; } .tile span { font-size: 0.8125rem; } }
@media (max-width: 335px) { .tiles { grid-template-columns: 1fr; } }

/* ---------- Partner ---------- */
.partner { background: var(--mist); }
.partner__inner { text-align: center; max-width: 60rem; }
.partner h2 { font-size: clamp(2rem, 1.2rem + 3.6vw, 5rem); }
.partner p.muted { max-width: 46ch; margin-inline: auto; }
.partner .actions { justify-content: center; margin-top: 1.5rem; }

/* ---------- Reviews: cards that stack as you scroll ---------- */
.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.stack__card {
  position: sticky; top: calc(90px + var(--i, 0) * 28px); min-height: min(70vh, 560px);
  display: grid; grid-template-columns: 1fr 1.1fr; border-radius: 24px; overflow: hidden; background: var(--mist);
  transform-origin: center top; box-shadow: 0 -10px 40px -20px rgba(0,0,0,0.25);
}
.stack__card img { width: 100%; height: 100%; object-fit: cover; }
.stack__card figure { margin: 0; padding: clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.stack__card blockquote { margin: 0; }
.stack__card blockquote p { font-size: clamp(1.2rem, 0.9rem + 1.2vw, 2rem); line-height: 1.25; letter-spacing: -0.03em; }
.stack__card figcaption { color: var(--grey-600); }
.stack__card figcaption b { display: block; color: var(--ink); font-size: 1.1rem; }
.stack__card--dark { background: var(--ink); color: #fff; }
.stack__card--dark figcaption { color: var(--grey-300); }
.stack__card--dark figcaption b { color: #fff; }
.stack__card--red { background: var(--red-ink); color: #fff; } /* body-size white text needs the darker red for 4.5:1 */
.stack__card--red figcaption, .stack__card--red figcaption b { color: #fff; }
@media (max-width: 760px) { .stack__card { grid-template-columns: 1fr; grid-template-rows: 180px auto; top: calc(80px + var(--i, 0) * 16px); min-height: 0; } }
.reviews-more { margin-top: 2.5rem; }

/* Full testimonials (testimonials page) */
.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.quote-card { margin: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); border-radius: 24px; overflow: hidden; background: var(--mist); }
.quote-card img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.quote-card > div { padding: clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.quote-card blockquote { margin: 0; }
.quote-card .pull { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.15; letter-spacing: -0.035em; margin-bottom: 1.25rem; }
.quote-card blockquote p:not(.pull) { color: var(--grey-600); max-width: 62ch; }
.quote-card figcaption b { display: block; font-size: 1.1rem; }
.quote-card figcaption { color: var(--grey-600); }
.quote-card--dark { background: var(--ink); color: #fff; }
.quote-card--dark blockquote p:not(.pull), .quote-card--dark figcaption { color: var(--grey-300); }
.quote-card--dark figcaption b { color: #fff; }
@media (max-width: 860px) { .quote-card { grid-template-columns: minmax(0, 1fr); } .quote-card img { min-height: 0; aspect-ratio: 16 / 9; } }

/* ---------- Client logos ---------- */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 760px) { .logos { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }
.logos li { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.logos img { width: 100%; aspect-ratio: 26 / 15; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter .4s, opacity .4s; }
.logos li:hover img { filter: none; opacity: 1; }
@media (hover: none) { .logos img { filter: none; opacity: 1; } }

/* ---------- Gallery ---------- */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(160px, 22vw, 300px); gap: 1rem; }
.g { border-radius: var(--r); overflow: hidden; }
.g--wide { grid-column: span 2; }
.g--tall { grid-row: span 2; }
.g button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--ink); cursor: zoom-in; overflow: hidden; }
.g img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease-out); }
.g button:hover img { scale: 1.04; }
.js .g { clip-path: inset(100% 0 0 0 round var(--r)); transition: clip-path 1.1s var(--ease-out); }
.js .g.is-in { clip-path: inset(0 0 0 0 round var(--r)); }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } .g--wide { grid-column: span 2; } .g--tall { grid-row: span 1; } }
.strips { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.strips li { border-radius: 10px; overflow: hidden; height: clamp(40px, 6vw, 80px); }
.strips img { width: 100%; height: 100%; object-fit: cover; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: #fff; }
.lightbox::backdrop { background: rgba(10,10,10,0.92); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 90vw; max-height: 78vh; border-radius: 14px; animation: zoomin .45s var(--ease-out); }
.lightbox__cap { position: absolute; bottom: 4vh; left: 0; right: 0; text-align: center; color: var(--grey-300); font-size: 0.9375rem; padding-inline: 4rem; }
.lightbox button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.4); color: #fff; font-size: 1.4rem; cursor: pointer; }
.lightbox button:hover { background: var(--red); border-color: var(--red); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 20px; top: 50%; translate: 0 -50%; }
@keyframes zoomin { from { opacity: 0; scale: 0.92; } }

/* ---------- Panorama (drag to look around) ---------- */
.pano-wrap { background: var(--ink); color: #fff; padding-block: var(--sec) 0; }
.pano-wrap h2 { color: #fff; }
.pano-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.pano-head p { color: var(--grey-300); margin: 0; }
.pano-rooms { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pano-rooms button { padding: 0.6rem 1rem; min-height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: transparent; cursor: pointer; font-size: 0.875rem; }
.pano-rooms button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.pano { position: relative; height: clamp(320px, 70vh, 720px); overflow: hidden; cursor: grab; touch-action: pan-y; }
.pano.is-grab { cursor: grabbing; }
.pano__track { display: flex; height: 100%; width: max-content; }
.pano__track img { height: 100%; width: auto; max-width: none; pointer-events: none; user-select: none; -webkit-user-select: none; }
.pano::after { content: "Drag to look around"; position: absolute; left: 50%; bottom: 20px; translate: -50% 0; padding: 0.5rem 1rem; border-radius: 999px; background: rgba(0,0,0,0.55); font-size: 0.8125rem; pointer-events: none; transition: opacity .4s; }
html:not(.js) .pano::after, .pano.is-used::after { opacity: 0; }
html:not(.js) .pano { overflow-x: auto; cursor: auto; }

/* ---------- Quote: contact card + form ---------- */
.quote { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
/* minmax(0, 1fr): a long email address can't widen the page on a small phone, which would push the fixed header off screen */
@media (max-width: 900px) { .quote { grid-template-columns: minmax(0, 1fr); } }
.card-dark { position: relative; padding: 2rem; border-radius: var(--r); background: var(--ink); color: #fff; margin-top: 2rem; }
@media (max-width: 359px) { .card-dark { padding: 1.25rem; } }
.card-dark a { color: #fff; }
.card-dark h2, .card-dark h3 { color: #fff; }
.contact-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.contact-lines li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.contact-lines svg { width: 20px; height: 20px; margin-top: 0.15rem; color: var(--red); }
.contact-lines .k { display: block; font-size: 0.8125rem; color: var(--grey-300); }
/* A long email address wraps rather than widening the page (which would push the fixed header off screen) */
.contact-lines a { overflow-wrap: anywhere; }
.copy { margin-left: 0.5rem; padding: 0.2rem 0.6rem; border: 0; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; font-size: 0.75rem; cursor: pointer; vertical-align: 0.1em; }
.copy:hover { background: #fff; color: var(--ink); }
html:not(.js) .copy { display: none; }
.quote__side .actions { margin-top: 1.5rem; }

.wizard, .form-card { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r); background: var(--mist); overflow: hidden; }
.wizard__bar { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 1rem; }
.wizard__bar span { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0.333)); transition: transform .5s var(--ease-out); }
.wizard__step-label { font-size: 0.8125rem; color: var(--grey-600); }
html:not(.js) .wizard__bar, html:not(.js) .wizard__step-label, html:not(.js) .wizard__nav [data-next], html:not(.js) .wizard__nav [data-prev] { display: none; }
.wizard__step { border: 0; margin: 0; padding: 0; min-width: 0; }
html:not(.js) .wizard__step + .wizard__step { margin-top: 2rem; }
.wizard__step legend, .form-card h2 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 1.25rem; padding: 0; }
.wizard__step.is-active { animation: stepin .5s var(--ease-out); }
@keyframes stepin { from { opacity: 0; transform: translateX(24px); } }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; border: 0; margin: 0; padding: 0; }
.choice--sm { grid-template-columns: repeat(2, max-content); margin-top: 0.5rem; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: block; padding: 1.1rem 1.2rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color .2s, background-color .2s, color .2s; }
.choice--sm span { padding: 0.7rem 1.1rem; border-radius: 999px; }
.choice label:hover span { border-color: var(--ink); }
.choice input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.choice input:focus-visible + span { outline: 3px solid var(--teal-2); outline-offset: 2px; }
@media (max-width: 480px) { .choice { grid-template-columns: 1fr; } }
.choice-label { display: block; font-size: 0.875rem; color: var(--grey-600); margin: 1rem 0 0; }
.field { display: block; margin-bottom: 0.9rem; }
.field > span { display: block; font-size: 0.875rem; color: var(--grey-600); margin-bottom: 0.35rem; }
.field input, .field textarea { width: 100%; font: inherit; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,174,192,0.35); }
.field [aria-invalid="true"] { border-color: var(--red-ink); }
.field small { display: block; font-size: 0.8125rem; color: var(--grey-600); margin: -0.15rem 0 0.4rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
.field__err { color: var(--red-ink); font-size: 0.875rem; margin: -0.4rem 0 0.8rem; }
.wizard__nav, .form-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.wizard__nav > span:empty { display: none; }
.wizard__nav > span:empty + .pill { margin-left: auto; }
.form-status { font-size: 0.875rem; color: var(--grey-600); margin: 1rem 0 0; min-height: 1.4em; }
.form-status:empty { margin: 0; min-height: 0; }
.form-status.is-error { color: var(--red-ink); }
.form-note { font-size: 0.8125rem; color: var(--grey-600); margin: 1rem 0 0; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-done { text-align: center; padding-block: 2rem; }
.form-done svg { width: 72px; margin: 0 auto 1rem; fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; }
.form-done circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .7s var(--ease-out) forwards; }
.form-done path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw .4s .55s var(--ease-out) forwards; }
.form-done h3 { margin-bottom: 0.4rem; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Inner page pieces ---------- */
.content { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 900px) { .content { grid-template-columns: minmax(0, 1fr); } }
.prose h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); margin-bottom: 0.6em; }
.prose h2:not(:first-child) { margin-top: 1.6em; }
.prose .prose__icon + h2 { margin-top: 0; }
.prose p { color: #333; max-width: 62ch; }
.prose p.lead { color: var(--ink); line-height: 1.4; }
.prose .actions { margin-top: 2rem; }
.prose__icon { display: block; width: 64px; margin-bottom: 1.5rem; }
.aside { display: grid; gap: 1rem; }
.aside .card-dark { margin-top: 0; }
.aside h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.card-mist { padding: 2rem; border-radius: var(--r); background: var(--mist); }
@media (max-width: 359px) { .card-mist { padding: 1.25rem; } }
.links-list { list-style: none; margin: 0; padding: 0; }
.links-list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-dark); color: #fff; text-decoration: none; }
.links-list li:last-child a { border-bottom: 0; }
.links-list a svg { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.links-list a:hover svg { transform: translateX(4px); }
.links-list a:hover { color: #fff; text-decoration: underline; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0.75rem; }
.ticks svg { width: 18px; height: 18px; margin-top: 0.2rem; color: var(--red); }
.big-number strong { display: block; font-size: clamp(4rem, 2rem + 6vw, 7rem); line-height: 1; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.big-number span { color: var(--grey-600); font-size: 0.9375rem; }

/* Legal pages (privacy policy, terms): long reading. The contents come first in the markup, so
   phones show them above the text; on wider screens they sit in the right column, sticky. The text
   has no reveal, so it reads straight away and prints whole. */
.legal-updated { margin: 0; font-size: 0.875rem; color: var(--grey-300); }
.legal__toc { grid-column: 2; grid-row: 1; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
.legal__body { grid-column: 1; grid-row: 1; }
@media (max-width: 900px) {
  .legal__toc, .legal__body { grid-column: auto; grid-row: auto; }
  .legal__toc { position: static; max-height: none; }
}
.legal__toc h2 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 1rem; }
.toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 0.75rem; padding: 0.4rem 0; color: var(--ink); text-decoration: none; font-size: 0.9375rem; line-height: 1.35; }
.toc a::before { content: counter(toc, decimal-leading-zero); min-width: 1.4rem; color: var(--grey-600); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--red-ink); text-decoration: underline; }
.legal__body > p:first-child { font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -0.025em; color: var(--ink); }
.legal__body h2 { font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.6rem); line-height: 1.08; }
.legal__body > h2:not(:first-child) { margin-top: 1.8em; }
.legal__body > h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.25; letter-spacing: -0.02em; margin: 1.6em 0 0.5em; }
.legal__body ul:not([class]) { max-width: 62ch; padding-left: 1.25em; color: #333; }
.legal__body ul:not([class]) li { margin-bottom: 0.5em; padding-left: 0.2em; }
.legal__body ul:not([class]) li::marker { color: var(--grey-600); }
.legal__summary { margin: 2.5rem 0; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r); background: var(--mist); }
.legal__summary ul:not([class]) { margin-bottom: 0; color: var(--ink); }
.legal__contact { max-width: 34rem; margin: 1.5rem 0; }
.legal__contact h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 1.25rem; }
@media print {
  .legal { display: block; }
  .legal__toc { display: none; }
}

/* Numbered cards (business objectives) */
.numbered { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: n; }
@media (max-width: 900px) { .numbered { grid-template-columns: repeat(2, 1fr); } }
.numbered li { counter-increment: n; padding: 1.5rem 1.5rem 1.75rem; border-radius: var(--r); background: #fff; line-height: 1.45; }
.numbered li::before { content: counter(n, decimal-leading-zero); display: block; margin-bottom: 2.5rem; font-size: 2.6rem; line-height: 1; letter-spacing: -0.05em; color: var(--red); }
@media (max-width: 560px) { .numbered { grid-template-columns: 1fr; } .numbered li::before { margin-bottom: 1rem; } }

/* Big feature line (partner) */
.feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.feature h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 5.4rem); margin: 0; }
.feature h2 em { font-style: normal; color: var(--red); }
.feature p { color: var(--grey-600); }
@media (max-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Service categories as cards (service pages) */
.cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; }
.cat { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r); background: #fff; }
.cat h3 { margin-bottom: 0.4rem; }
.cat p { color: var(--grey-600); max-width: 50ch; }
.cat .chips { margin: 1.25rem 0 0; }
.section:not(.section--mist) .cat { background: var(--mist); }
.section:not(.section--mist) .cat .chips li { background: #fff; }

/* Links to the other service pages */
.others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.others a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; padding: 1.5rem; border-radius: var(--r); background: var(--ink); color: #fff; text-decoration: none; font-size: var(--fs-h3); letter-spacing: -0.03em; line-height: 1.1; transition: background-color .25s; }
.others a:hover { background: var(--red); }
.others img { width: 48px; filter: brightness(0) invert(1); }
.others svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Call to action panel ---------- */
.cta { padding-block: 0 var(--sec); }
.cta__panel { position: relative; overflow: hidden; border-radius: 24px; background: var(--red); color: #fff; padding: clamp(2rem, 1rem + 5vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 2rem; align-items: end; }
.cta__panel h2 { margin: 0; max-width: 18ch; font-size: clamp(2rem, 1.2rem + 3vw, 4.2rem); }
.cta__panel .actions { justify-content: flex-end; }
.cta__panel .pill--ghost:hover { color: var(--red-ink); }
@media (max-width: 860px) { .cta__panel { grid-template-columns: minmax(0, 1fr); } .cta__panel .actions { justify-content: flex-start; } }

/* ---------- 404 ---------- */
.notfound { min-height: 100svh; display: grid; align-items: center; padding-bottom: clamp(3rem, 6vw, 6rem); }
.notfound__code { display: block; font-size: clamp(7rem, 3rem + 18vw, 18rem); line-height: 0.8; letter-spacing: -0.07em; color: var(--red); margin-bottom: 1.5rem; }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 0; background: var(--ink); color: var(--grey-300); }
/* Revealed like a curtain as the page lifts away (JS turns it on only when the footer fits the window) */
.foot.is-curtain { position: sticky; bottom: 0; }
.foot__inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(4rem, 8vw, 7rem) var(--gut) 1.5rem; }
.foot a { color: #fff; }
.foot h2 { font-size: 0.8125rem; letter-spacing: 0; color: var(--grey-300); margin: 0 0 1rem; text-transform: none; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.foot__cols { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 2rem 1.5rem; font-size: 0.9375rem; }
.foot__cols a { text-decoration: none; }
.foot__cols a:hover { text-decoration: underline; }
.foot__about img { width: 170px; margin-bottom: 1.25rem; }
.foot__about p { max-width: 26ch; }
@media (max-width: 1080px) { .foot__cols { grid-template-columns: repeat(3, 1fr); } .foot__about { grid-column: 1 / -1; } }
@media (max-width: 680px) { .foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 359px) { .foot__cols { grid-template-columns: 1fr; } }
.foot__word { font-size: clamp(5rem, 1rem + 19vw, 22rem); line-height: 0.85; letter-spacing: -0.06em; color: #fff; margin: clamp(2rem, 5vw, 4rem) 0 1rem; user-select: none; display: flex; justify-content: space-between; }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.25rem; font-size: 0.8125rem; }
.foot__bar p { margin: 0; }
.foot__bar ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot__top { display: inline-block; padding: 0.6rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); text-decoration: none; }
.foot__top:hover { background: #fff; color: var(--ink); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 960; translate: -50% 0; padding: 0.75rem 1.2rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.875rem; opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .4s var(--ease-out); pointer-events: none; }
.toast.is-on { opacity: 1; transform: none; }

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Reduced motion: everything static and fully visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js .node > div, .js .node img { transform: none; opacity: 1; }
  .js .statement .word { color: var(--ink); }
  .js .g { clip-path: none; }
  .js .rotor span { transform: none; opacity: 0; }
  .js .rotor span:first-child { opacity: 1; }
  .hero__cue span { opacity: 0.6; }
}

/* ---------- Print: the content, without the chrome ---------- */
@media print {
  body { background: #fff; }
  .bar, .skip-link, .hero__layers, .hero__cue, .marquee, .pano-wrap, .foot__word, .foot__top, .toast, .lightbox { display: none !important; }
  .hero, .phero, .hscroll, .dark-panel, .band, .foot { background: #fff !important; color: #000 !important; min-height: 0; padding-top: 1rem; }
  .hero *, .phero *, .hscroll *, .dark-panel *, .band *, .foot * { color: #000 !important; }
  .js [data-reveal], .js .node > div, .js .node img { opacity: 1; transform: none; }
  .js .statement .word { color: #000; }
  .stack__card { position: static; }
  .hscroll.is-pinned .hscroll__sticky { position: static; height: auto; }
}