@charset "UTF-8";
/* ============================================================================
   SocialLab — design system
   Brand colours sampled directly from logo.png: purple #554696, orange #F7A600
   ========================================================================= */

/* ---------------------------------------------------------------- 1. FONTS */
/* Self-hosted variable fonts. latin-ext carries ə ğ ş İ — essential for AZ.
   Font choice is constrained by the schwa: ə U+0259 and Ə U+018F are the two
   most common letters on this site and many popular Latin webfonts ship
   without them, which makes the browser fall back mid-word for that one
   letter. Sora and Manrope were both dropped for exactly that reason (Sora has
   neither, Manrope lacks the capital). Verify any replacement covers BOTH
   codepoints before swapping it in — the failure is silent. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/jakarta-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/jakarta-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/grotesk-latin-ext.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/grotesk-latin.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- 2. TOKENS */
:root {
  /* Brand — sampled from the logo, do not drift from these two values. */
  --brand-purple: #554696;
  --brand-orange: #f7a600;

  /* Purple scale */
  --p-950: #14102b;
  --p-900: #1d1740;
  --p-850: #241d4f;
  --p-800: #2c2360;
  --p-700: #3d3180;
  --p-600: #554696;
  --p-500: #6b5bb0;
  --p-400: #8b7cc8;
  --p-300: #a79ad8;
  --p-200: #cfc7ea;
  --p-100: #e8e4f5;
  --p-50: #f5f3fb;

  /* Amber scale. NOTE: --brand-orange fails AA as text on white; use
     --amber-ink for orange-ish text on light surfaces, and reserve
     --brand-orange for graphics or for text on dark purple. */
  --amber-700: #8a5e00;
  --amber-ink: #a06f00;
  --amber-500: #f7a600;
  --amber-400: #ffb92e;
  --amber-300: #ffcd63;
  --amber-100: #fff1cf;
  --amber-50: #fff9ec;

  /* Ink / neutrals */
  --ink-900: #12101c;
  --ink-800: #211e2e;
  --ink-700: #3a3646;
  --ink-600: #524d61;
  --ink-500: #6b6779;
  --ink-400: #8d8899;
  --ink-300: #a9a5b5;
  --ink-200: #d5d2de;
  --line: #e7e5ee;
  --line-strong: #d3d0dd;

  --surface: #ffffff;
  --surface-alt: #faf9fc;
  --surface-tint: var(--p-50);

  /* Semantic */
  --text: var(--ink-800);
  --text-muted: var(--ink-500);
  --heading: var(--ink-900);
  --accent: var(--p-600);
  --accent-ink: var(--p-700);

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.3125rem);
  --fs-h4: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --fs-h3: clamp(1.375rem, 1vw + 1.1rem, 1.875rem);
  --fs-h2: clamp(1.75rem, 2.1vw + 1.2rem, 3rem);
  --fs-h1: clamp(2.25rem, 3.6vw + 1.3rem, 4.25rem);
  --fs-display: clamp(2.5rem, 5.2vw + 1rem, 5.75rem);

  /* Space — 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --section-y: clamp(3.5rem, 7vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 78rem;
  --maxw-prose: 44rem;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgb(20 16 43 / 0.06), 0 2px 8px rgb(20 16 43 / 0.04);
  --shadow: 0 4px 12px rgb(20 16 43 / 0.06), 0 16px 40px -12px rgb(20 16 43 / 0.12);
  --shadow-lg: 0 8px 24px rgb(20 16 43 / 0.08), 0 32px 64px -20px rgb(20 16 43 / 0.2);

  --ease: cubic-bezier(0.22, 0.68, 0.28, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 260ms;

  /* Fine grain overlay used on dark panels — inline so there is no extra
     network request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 3. RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* belt-and-braces against horizontal scroll on mobile */
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--p-600);
}
ul,
ol {
  padding: 0;
}
:target {
  scroll-margin-top: 7rem;
}
::selection {
  background: var(--p-600);
  color: #fff;
}

/* Focus: always visible, never removed. */
:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-dark :focus-visible,
.panel-dark :focus-visible {
  outline-color: var(--amber-400);
}

/* ------------------------------------------------------------ 4. TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.035em;
}
h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.028em;
}
h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.022em;
}
h4 {
  font-size: var(--fs-h4);
  letter-spacing: -0.015em;
}
p {
  text-wrap: pretty;
}
strong,
b {
  font-weight: 700;
  color: var(--ink-900);
}
small {
  font-size: var(--fs-sm);
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-600);
}
.muted {
  color: var(--text-muted);
}
.balance {
  text-wrap: balance;
}

/* Eyebrow / section label with an orange square bullet */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow::before {
  content: '';
  inline-size: 0.5em;
  block-size: 0.5em;
  background: var(--brand-orange);
  transform: skewX(-14deg);
  flex: none;
}
.on-dark .eyebrow,
.panel-dark .eyebrow {
  color: var(--amber-300);
}

/* Signature device: skewed orange highlight behind a word, echoing the
   diagonal cut in the SocialLab logo mark. */
.mark {
  position: relative;
  display: inline-block;
  isolation: isolate;
  white-space: nowrap;
}
/* An underline rule rather than a solid fill: a filled highlight would put
   white heading text on #F7A600 (~2:1 contrast), which fails WCAG. The rule
   keeps the brand accent and leaves the text on its own background. */
.mark::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline: -0.06em;
  bottom: -0.02em;
  block-size: 0.16em;
  background: var(--brand-orange);
  transform: skewX(-14deg);
}
/* Thin variant for body-copy emphasis. */
.mark--line::after {
  block-size: 0.09em;
  bottom: 0.01em;
}
/* Solid fill — only safe where the text itself is dark. */
.mark--fill {
  padding-inline: 0.14em;
  color: var(--p-950);
}
.mark--fill::after {
  inset-inline: -0.02em;
  bottom: 0.02em;
  block-size: 0.92em;
  border-radius: 2px;
}
.txt-amber {
  color: var(--brand-orange);
}
.txt-purple {
  color: var(--p-400);
}

/* -------------------------------------------------------------- 5. LAYOUT */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide {
  max-width: 88rem;
}
.container--narrow {
  max-width: 56rem;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.section--alt {
  background: var(--surface-alt);
}
.section--tint {
  background: var(--surface-tint);
}

/* Dark panel: deep purple + radial glow + grain. Used for rhythm, sparingly. */
.panel-dark {
  position: relative;
  isolation: isolate;
  background: var(--p-950);
  color: var(--p-100);
  overflow: hidden;
}
.panel-dark h1,
.panel-dark h2,
.panel-dark h3,
.panel-dark h4 {
  color: #fff;
}
.panel-dark .lead {
  color: var(--p-200);
}
.panel-dark .muted {
  color: var(--p-300);
}
.panel-dark a {
  color: var(--amber-300);
}
.panel-dark a:hover {
  color: var(--amber-400);
}
.panel-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70rem 40rem at 12% -10%, rgb(85 70 150 / 0.55), transparent 60%),
    radial-gradient(50rem 34rem at 96% 8%, rgb(247 166 0 / 0.14), transparent 62%);
}
.panel-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Section heading block */
.sec-head {
  display: grid;
  gap: var(--sp-4);
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.sec-head--split {
  max-width: none;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 62rem) {
  .sec-head--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--sp-8);
  }
  .sec-head--split > :last-child {
    padding-bottom: 0.35rem;
  }
}

/* Generic responsive grids */
.grid {
  display: grid;
  gap: var(--sp-5);
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}
.stack {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}
.stack--lg {
  gap: var(--sp-6);
}
.flow > * + * {
  margin-top: var(--sp-4);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--p-950);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ 6. BUTTONS */
.btn {
  --btn-bg: var(--p-600);
  --btn-fg: #fff;
  --btn-bd: var(--p-600);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px rgb(85 70 150 / 0.55);
}
.btn:active {
  transform: translateY(0);
}
.btn svg {
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.btn:hover svg {
  transform: translateX(3px);
}

.btn--primary {
  --btn-bg: var(--p-600);
  --btn-bd: var(--p-600);
}
.btn--primary:hover {
  --btn-bg: var(--p-700);
  --btn-bd: var(--p-700);
}

/* Amber button: dark ink on amber keeps contrast strong (≈9:1). */
.btn--amber {
  --btn-bg: var(--brand-orange);
  --btn-bd: var(--brand-orange);
  --btn-fg: var(--p-950);
}
.btn--amber:hover {
  --btn-bg: var(--amber-400);
  --btn-bd: var(--amber-400);
  box-shadow: 0 10px 26px -10px rgb(247 166 0 / 0.6);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--p-700);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover {
  --btn-bd: var(--p-600);
  --btn-fg: var(--p-700);
  --btn-bg: var(--p-50);
  box-shadow: none;
}
.on-dark .btn--ghost,
.panel-dark .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgb(255 255 255 / 0.28);
}
.on-dark .btn--ghost:hover,
.panel-dark .btn--ghost:hover {
  --btn-bg: rgb(255 255 255 / 0.08);
  --btn-bd: rgb(255 255 255 / 0.5);
  --btn-fg: #fff;
}
/* Buttons must win over the dark-context link colours below. `.panel-dark a`
   and `.site-footer a` are (0,1,1) and would otherwise repaint button labels —
   which turned the amber CTA into amber-on-amber. Keep this rule after the
   variants and before .btn--lg. */
.panel-dark .btn,
.on-dark .btn,
.cta-band .btn,
.site-footer .btn {
  color: var(--btn-fg);
}

.btn--lg {
  min-height: 3.4rem;
  padding: 0.95rem 1.9rem;
  font-size: var(--fs-base);
}
.btn--block {
  width: 100%;
}

/* Text link with animated arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--accent-ink);
  text-decoration: none;
}
.link-arrow::after {
  content: '→';
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover {
  color: var(--p-600);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.link-arrow:hover::after {
  transform: translateX(4px);
}
.panel-dark .link-arrow {
  color: var(--amber-300);
}

/* --------------------------------------------------------------- 7. CARDS */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.card > :last-child {
  margin-top: auto;
}
.card--link:hover {
  border-color: var(--p-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.card h3,
.card h4 {
  letter-spacing: -0.02em;
}
.card p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.62;
}
/* Whole-card click target that keeps the heading as the accessible name. */
.card__hit {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card__hit:focus-visible {
  outline-offset: 3px;
}

/* Service card: index number + amber rule that grows on hover */
.svc {
  --i: '';
  overflow: hidden;
}
.svc::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 3px;
  block-size: 0;
  background: var(--brand-orange);
  transition: block-size 380ms var(--ease-out);
}
.svc--link:hover::before,
.svc--link:focus-within::before {
  block-size: 100%;
}
.svc__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--p-300);
  letter-spacing: 0.04em;
}
.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin-top: var(--sp-2);
}
.svc__tags li {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--p-50);
  border: 1px solid var(--p-100);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
}

/* Icon chip */
.chip-icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 10px;
  background: var(--p-50);
  border: 1px solid var(--p-100);
  color: var(--p-600);
  flex: none;
}
.chip-icon svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
}
.panel-dark .chip-icon {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.14);
  color: var(--amber-300);
}

/* ------------------------------------------------------------- 8. HEADER */
/* NOTE: do NOT put backdrop-filter (or filter, perspective, will-change:transform,
   contain:paint) on .site-header itself. Any of them makes the header a
   containing block for position:fixed descendants, and the mobile drawer is a
   fixed child of the header: its `inset: 4.5rem 0 0` would then resolve against
   the 4.5rem-tall header instead of the viewport, collapsing the open drawer to
   ~1px and making the burger menu look dead. The frosted effect therefore lives
   on ::before, which is not an ancestor of the drawer. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  pointer-events: none;
}
.site-header[data-stuck='true'] {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px -12px rgb(20 16 43 / 0.3);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 4.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: var(--radius-sm);
}
.brand img {
  block-size: 2.1rem;
  inline-size: auto;
}
@media (min-width: 62rem) {
  .brand img {
    block-size: 2.35rem;
  }
}

.nav {
  display: none;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover {
  color: var(--p-700);
  background: var(--p-50);
}
.nav__link[aria-current='page'],
.nav__link[data-active='true'] {
  color: var(--p-700);
}
.nav__link[aria-current='page']::after,
.nav__link[data-active='true']::after {
  content: '';
  position: absolute;
}
.nav__item {
  position: relative;
}
.nav__item > .nav__link[aria-current='page'] {
  background: var(--p-50);
}
.nav__caret {
  inline-size: 0.7rem;
  block-size: 0.7rem;
  transition: transform var(--dur) var(--ease);
}
.nav__item[data-open='true'] .nav__caret {
  transform: rotate(180deg);
}
.header__actions {
  display: none;
}
@media (min-width: 62rem) {
  .nav,
  .header__actions {
    display: block;
  }
  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
}

/* Mega-menu (desktop) */
.mega {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  translate: -50% 0;
  width: min(56rem, calc(100vw - 3rem));
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease),
    visibility 180ms;
}
.nav__item[data-open='true'] .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem var(--sp-4);
  list-style: none;
}
.mega__link {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.mega__link:hover {
  background: var(--p-50);
}
.mega__link strong {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.mega__link span {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.mega__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  margin-inline-end: -0.4rem;
  border-radius: 10px;
  color: var(--ink-900);
}
.nav-toggle:hover {
  background: var(--p-50);
}
.nav-toggle__bars {
  position: relative;
  inline-size: 1.3rem;
  block-size: 0.75rem;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  inline-size: 100%;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 240ms var(--ease), opacity 160ms var(--ease);
}
.nav-toggle__bars span:nth-child(1) {
  top: 0;
}
.nav-toggle__bars span:nth-child(2) {
  top: 50%;
  translate: 0 -50%;
}
.nav-toggle__bars span:nth-child(3) {
  bottom: 0;
}
[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(0.36rem) rotate(45deg);
}
[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-0.365rem) rotate(-45deg);
}

/* Hide the hamburger on desktop. This MUST come after the .nav-toggle base
   rule above — an identical-specificity rule declared later would otherwise
   win and leave the toggle visible alongside the full desktop nav. */
@media (min-width: 62rem) {
  .nav-toggle {
    display: none;
  }
}

/* Mobile drawer — designed for thumb reach, not a shrunken desktop nav. */
.drawer {
  position: fixed;
  inset: 4.5rem 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity 220ms var(--ease), transform 260ms var(--ease-out),
    visibility 260ms;
}
.drawer[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (min-width: 62rem) {
  .drawer {
    display: none;
  }
}
.drawer__body {
  padding: var(--sp-5) var(--gutter) var(--sp-6);
  display: grid;
  gap: var(--sp-2);
}
.drawer__list {
  list-style: none;
  display: grid;
  gap: 0.15rem;
}
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 3.25rem; /* generous touch target */
  padding: 0.75rem 0.25rem;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.drawer__link[aria-current='page'] {
  color: var(--p-700);
}
.drawer__disc {
  border-bottom: 1px solid var(--line);
}
.drawer__disc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 3.25rem;
  padding: 0.75rem 0.25rem;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
}
.drawer__disc > summary::-webkit-details-marker {
  display: none;
}
.drawer__disc > summary svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  color: var(--ink-400);
  transition: transform var(--dur) var(--ease);
  flex: none;
}
.drawer__disc[open] > summary svg {
  transform: rotate(180deg);
}
.drawer__sub {
  list-style: none;
  display: grid;
  gap: 0.1rem;
  padding: 0 0 var(--sp-4) 0.25rem;
}
.drawer__sub a {
  display: block;
  min-height: 2.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-600);
  text-decoration: none;
  background: var(--surface-alt);
}
.drawer__sub a:hover {
  color: var(--p-700);
  background: var(--p-50);
}
.drawer__cta {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.drawer__meta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.drawer__meta a {
  font-weight: 700;
  text-decoration: none;
}
body[data-nav-open='true'] {
  overflow: hidden;
}

/* -------------------------------------------------------------- 9. FOOTER */
.site-footer {
  background: var(--p-950);
  color: var(--p-200);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    60rem 30rem at 8% 0%,
    rgb(85 70 150 / 0.5),
    transparent 60%
  );
}
.site-footer a {
  color: var(--p-200);
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.footer__top {
  display: grid;
  gap: var(--sp-7);
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 48rem) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 68rem) {
  .footer__top {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}
.footer__brand img {
  block-size: 2.3rem;
  inline-size: auto;
}
.footer__about {
  max-width: 32ch;
  font-size: var(--fs-sm);
  color: var(--p-300);
  line-height: 1.6;
}
.footer__h {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-300);
  margin-bottom: var(--sp-4);
}
.footer__list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  font-size: var(--fs-sm);
}
.footer__social {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.footer__social a {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.16);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer__social a:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.4);
}
.footer__social svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: 0.8125rem;
  color: var(--p-300);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  list-style: none;
}

/* --------------------------------------------------------- 10. COMPONENTS */

/* Breadcrumbs */
.crumbs {
  padding-block: var(--sp-4);
  font-size: 0.8125rem;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  align-items: center;
  color: var(--ink-400);
}
.crumbs a {
  color: var(--ink-500);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--p-600);
  text-decoration: underline;
}
.crumbs li + li::before {
  content: '/';
  margin-inline-end: 0.4rem;
  color: var(--ink-300);
}
.crumbs [aria-current='page'] {
  color: var(--ink-700);
  font-weight: 600;
}
.panel-dark .crumbs ol {
  color: var(--p-300);
}
.panel-dark .crumbs a {
  color: var(--p-200);
}
.panel-dark .crumbs [aria-current='page'] {
  color: #fff;
}
.panel-dark .crumbs li + li::before {
  color: var(--p-500);
}

/* Page hero (inner pages) */
.page-hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
}
.page-hero__grid {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 62rem) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--sp-9);
    align-items: start;
  }
}
.page-hero h1 {
  max-width: 22ch;
}
.page-hero .lead {
  max-width: 54ch;
}

/* Aside fact panel used in service heroes */
.fact-panel {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.04);
  display: grid;
  gap: var(--sp-4);
}
.fact-panel h2 {
  font-size: var(--fs-h4);
}
.fact-list {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.fact-list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  color: var(--p-200);
}
/* The panel sits on the dark hero, so the global dark-ink <strong> disappears. */
.fact-list strong {
  color: var(--p-100);
}
.fact-list svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin-top: 0.28rem;
  color: var(--brand-orange);
  flex: none;
}

/* Check list on light surfaces */
.check-list {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}
.check-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.check-list svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-top: 0.28rem;
  color: var(--p-600);
  flex: none;
}
.check-list strong {
  display: block;
}
.check-list p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Numbered process with a connecting rail */
.process {
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: step;
}
.process > li {
  position: relative;
  counter-increment: step;
  padding: 0 0 var(--sp-6) 3.5rem;
}
.process > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--p-200);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--p-700);
  z-index: 1;
}
.process > li::after {
  content: '';
  position: absolute;
  inset-inline-start: 1.2rem;
  inset-block: 2.4rem 0;
  inline-size: 1.5px;
  background: linear-gradient(var(--p-200), var(--p-100));
}
.process > li:last-child {
  padding-bottom: 0;
}
.process > li:last-child::after {
  display: none;
}
.process h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
}
.process p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.panel-dark .process > li::before {
  background: var(--p-900);
  border-color: rgb(255 255 255 / 0.2);
  color: var(--amber-300);
}
.panel-dark .process > li::after {
  background: linear-gradient(rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.04));
}
.panel-dark .process p {
  color: var(--p-300);
}

/* Stat / figure block. Only ever used with real, verifiable content. */
.stat {
  display: grid;
  gap: 0.35rem;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--p-600);
}
.panel-dark .stat__num {
  color: var(--brand-orange);
}
.stat__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 26ch;
}
.panel-dark .stat__label {
  color: var(--p-300);
}

/* Client marquee */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--sp-6);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  display: grid;
  place-items: center;
  padding: 0.55rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-600);
  white-space: nowrap;
  background: var(--surface);
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Accordion FAQ built on <details> — works with zero JS. */
.faq {
  display: grid;
  gap: 0.6rem;
}
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.faq__item[open] {
  border-color: var(--p-200);
}
.faq__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 1.05rem 1.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
}
.faq__item > summary::-webkit-details-marker {
  display: none;
}
.faq__item > summary:hover {
  color: var(--p-700);
}
.faq__icon {
  position: relative;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-top: 0.3rem;
  flex: none;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 2px;
  border-radius: 2px;
  background: var(--p-600);
  transition: transform var(--dur) var(--ease);
}
.faq__icon::after {
  transform: rotate(90deg);
}
.faq__item[open] .faq__icon::after {
  transform: rotate(0deg);
}
.faq__body {
  padding: 0 1.25rem 1.25rem;
  color: var(--ink-600);
  font-size: var(--fs-sm);
  line-height: 1.68;
  max-width: 68ch;
}
.faq__body > * + * {
  margin-top: var(--sp-3);
}

/* Quote / testimonial. Rendered only when a real, attributable quote exists. */
.quote {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.quote figcaption {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.quote figcaption strong {
  display: block;
  color: var(--ink-900);
}

/* Editorial placeholder — used instead of inventing data or fake imagery. */
.placeholder {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  border: 1.5px dashed var(--p-200);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(
    -45deg,
    var(--p-50),
    var(--p-50) 10px,
    #fff 10px,
    #fff 20px
  );
  color: var(--ink-500);
  font-size: var(--fs-sm);
}
.placeholder strong {
  font-family: var(--font-display);
  color: var(--p-700);
}
.placeholder--media {
  aspect-ratio: 16 / 10;
}
.panel-dark .placeholder {
  border-color: rgb(255 255 255 / 0.2);
  background: rgb(255 255 255 / 0.03);
  color: var(--p-300);
}
.panel-dark .placeholder strong {
  color: var(--amber-300);
}

/* Prose — long-form service & article body copy */
.prose {
  max-width: var(--maxw-prose);
  font-size: var(--fs-base);
  line-height: 1.72;
  color: var(--ink-700);
}
.prose > * + * {
  margin-top: var(--sp-4);
}
.prose h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-8);
  scroll-margin-top: 7rem;
}
.prose h3 {
  font-size: var(--fs-h4);
  margin-top: var(--sp-6);
  scroll-margin-top: 7rem;
}
.prose h2 + *,
.prose h3 + * {
  margin-top: var(--sp-3);
}
.prose ul,
.prose ol {
  padding-inline-start: 1.15rem;
  display: grid;
  gap: 0.55rem;
}
.prose li::marker {
  color: var(--p-400);
}
.prose li > strong:first-child {
  color: var(--ink-900);
}
.prose a {
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--p-300);
  text-underline-offset: 0.2em;
}
.prose a:hover {
  text-decoration-color: var(--p-600);
}
.prose blockquote {
  margin-block: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-inline-start: 3px solid var(--brand-orange);
  background: var(--amber-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink-800);
}
.prose blockquote p {
  margin: 0;
}
.prose figure {
  margin-block: var(--sp-6);
}
.prose figcaption {
  margin-top: var(--sp-3);
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prose thead th {
  text-align: start;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  border-bottom: 2px solid var(--line-strong);
  padding: 0.7rem 0.8rem;
}
.prose tbody td {
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0.8rem;
  vertical-align: top;
}
.prose tbody tr:nth-child(odd) {
  background: var(--surface-alt);
}
/* Wide content must scroll in its own box, never the page. */
.table-scroll {
  overflow-x: auto;
  margin-block: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.table-scroll table {
  min-width: 34rem;
}
.table-scroll thead th {
  background: var(--surface-alt);
}

/* Key-takeaway callout inside prose */
.callout {
  display: grid;
  gap: var(--sp-2);
  margin-block: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--p-100);
  border-radius: var(--radius-lg);
  background: var(--p-50);
}
.callout__label {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.callout p,
.callout ul {
  font-size: var(--fs-sm);
  color: var(--ink-700);
  margin: 0;
}

/* Sticky in-page table of contents (article/service sidebar) */
.article-layout {
  display: grid;
  gap: var(--sp-8);
}
@media (min-width: 68rem) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--sp-9);
    align-items: start;
  }
  .article-layout > aside {
    position: sticky;
    top: 6rem;
  }
}
.toc {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}
.toc__h {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--sp-3);
}
.toc ol {
  list-style: none;
  display: grid;
  gap: 0.1rem;
  counter-reset: toc;
}
.toc a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-600);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.toc a:hover {
  color: var(--p-700);
  background: var(--p-50);
}
.toc a[data-current='true'] {
  color: var(--p-700);
  border-inline-start-color: var(--brand-orange);
  background: var(--p-50);
}

/* Article meta row */
.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: 0.8125rem;
  color: var(--p-300);
}
.art-meta__dot::before {
  content: '•';
  margin-inline-end: var(--sp-4);
  color: var(--p-500);
}
.tag {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--p-50);
  border: 1px solid var(--p-100);
  color: var(--accent-ink);
  text-decoration: none;
}
.panel-dark .tag {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.16);
  color: var(--amber-300);
}

/* Post / case cards */
.post-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
}
.post-card__media {
  aspect-ratio: 16 / 9;
  background: var(--p-50);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-out);
}
.post-card--link:hover .post-card__media img {
  transform: scale(1.04);
}
.post-card__body {
  display: grid;
  gap: var(--sp-3);
  padding: clamp(1.15rem, 2vw, 1.6rem);
}
.post-card__body h3 {
  font-size: var(--fs-h4);
}
.post-card__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* Case-study index tile: type-led, not a bare image gallery */
.case-tile {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: clamp(1.35rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.case-tile:hover {
  border-color: var(--p-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.case-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.case-tile__sector {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.case-tile h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.028em;
}
.case-tile__svcs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}
.case-tile__svcs li {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.24rem 0.62rem;
}

/* Client roster grid (names, since we have no permission-cleared logo set) */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.roster > li {
  list-style: none;
  display: grid;
  place-items: center;
  min-height: 5rem;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-600);
  text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.roster > li:hover {
  background: var(--p-50);
  color: var(--p-700);
}

/* Contact detail rows */
.contact-rows {
  display: grid;
  gap: 0;
  list-style: none;
}
/* Rows are <div> children of the <dl> — the only wrapper HTML allows there. */
.contact-row {
  display: flex;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.contact-row:first-child {
  padding-top: 0;
}
.contact-rows dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 0.3rem;
}
.contact-rows dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.contact-rows dd a {
  text-decoration: none;
  color: inherit;
}
.contact-rows dd a:hover {
  color: var(--p-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.contact-rows dd small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 0.25rem;
  letter-spacing: 0;
}

/* Form */
.form {
  display: grid;
  gap: var(--sp-4);
}
.field {
  display: grid;
  gap: 0.4rem;
}
.field > label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-800);
}
.field .req {
  color: var(--amber-ink);
}
.field .hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.input,
.select,
.textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-base);
  color: var(--ink-900);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.6;
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--ink-300);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--p-600);
  box-shadow: 0 0 0 3px rgb(85 70 150 / 0.16);
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 1px;
}
.field-row {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 40rem) {
  .field-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.form__note {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Final CTA band */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--p-900);
  color: #fff;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(48rem 26rem at 15% 110%, rgb(247 166 0 / 0.22), transparent 60%),
    radial-gradient(52rem 30rem at 88% -20%, rgb(107 91 176 / 0.6), transparent 62%);
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.04;
  pointer-events: none;
}
.cta-band__inner {
  display: grid;
  gap: var(--sp-6);
  padding-block: clamp(3rem, 6.5vw, 6rem);
}
@media (min-width: 62rem) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--sp-9);
    align-items: center;
  }
}
.cta-band h2 {
  font-size: var(--fs-h2);
  max-width: 24ch;
}
.cta-band p {
  color: var(--p-200);
  max-width: 46ch;
  margin-top: var(--sp-4);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
@media (min-width: 62rem) {
  .cta-band__actions {
    justify-content: flex-end;
  }
}

/* Related services strip */
.related {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.related__item {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.related__item:hover {
  border-color: var(--p-300);
  background: var(--p-50);
}
.related__item strong {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  letter-spacing: -0.02em;
}
.related__item p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Pill filter row (portfolio / blog) */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filters a {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-600);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.filters a:hover {
  border-color: var(--p-400);
  color: var(--p-700);
}
.filters a[aria-current='true'] {
  background: var(--p-950);
  border-color: var(--p-950);
  color: #fff;
}

/* 404 */
.error-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 12rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 2px var(--p-300);
}

/* ------------------------------------------------------- 10b. HOMEPAGE HERO */
.hero {
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem);
}
/* Oversized brand mark as a quiet watermark — a real brand asset rather than
   decorative stock imagery. */
.hero__watermark {
  position: absolute;
  z-index: -1;
  inset-inline-end: -6%;
  inset-block-start: -8%;
  inline-size: min(46rem, 62vw);
  opacity: 0.05;
  transform: rotate(-8deg);
  pointer-events: none;
}
@media (max-width: 48rem) {
  .hero__watermark {
    inline-size: 34rem;
    inset-inline-end: -30%;
    inset-block-start: auto;
    inset-block-end: -6%;
    opacity: 0.045;
  }
}
.hero__title {
  font-size: var(--fs-display);
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 20ch;
}
.hero__lower {
  display: grid;
  gap: var(--sp-7);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
@media (min-width: 62rem) {
  .hero__lower {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--sp-9);
    align-items: start;
  }
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (max-width: 30rem) {
  /* On the smallest screens a full-width stacked pair converts better than
     two cramped side-by-side pills. */
  .hero__actions {
    display: grid;
  }
  .hero__actions .btn {
    width: 100%;
  }
}
.hero__caps {
  display: grid;
  gap: 0;
  list-style: none;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}
.hero__caps li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: 0.7rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  font-size: var(--fs-sm);
  color: var(--p-200);
}
.hero__caps a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.hero__caps a:hover {
  color: #fff;
}
.hero__caps svg {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--brand-orange);
  flex: none;
}
.hero__note {
  margin-top: var(--sp-4);
  font-size: 0.8125rem;
  color: var(--p-300);
}

/* Figures row — only ever fed verifiable counts. */
.figures {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* Industries list — editorial rows rather than yet another card grid. */
.sectors {
  display: grid;
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.sectors > li {
  display: grid;
  gap: var(--sp-2) var(--sp-6);
  padding-block: clamp(1.25rem, 2.5vw, 1.85rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 54rem) {
  .sectors > li {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: baseline;
  }
}
.sectors h3 {
  font-size: var(--fs-h4);
}
.sectors p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.sectors__ev {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
}
.sectors__ev li {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.58rem;
}

/* Two-up feature row with an offset accent panel */
.split {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-9);
    align-items: center;
  }
  .split--wide-left {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}
.accent-panel {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--p-50);
  border: 1px solid var(--p-100);
}
.accent-panel::before {
  content: '';
  position: absolute;
  inset-inline-start: clamp(1.5rem, 3vw, 2.5rem);
  inset-block-start: 0;
  inline-size: 3.5rem;
  block-size: 4px;
  background: var(--brand-orange);
  transform: skewX(-16deg);
}

/* ------------------------------------------------------------- 11. MOTION */
/* Reveal-on-scroll. Elements are visible by default and only hidden once JS
   confirms it will observe them — content is never trapped behind JS. */
[data-reveal] {
  opacity: 1;
}
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .marquee__track {
    animation: none;
    transform: none;
  }
}

/* -------------------------------------------------------------- 12. PRINT */
@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .drawer,
  .marquee,
  .toc {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  .panel-dark {
    background: #fff !important;
    color: #000 !important;
  }
  .panel-dark h1,
  .panel-dark h2 {
    color: #000 !important;
  }
  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #555;
  }
}

/* ------------------------------------------------------------------ brands */
/* Logo wall. Client logos arrive in every shape and every background colour,
   so each sits on its own white plate at a fixed box height — that is what
   makes a mixed set read as one grid. Names stay visible under the mark
   because several logos are wordless. */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none;
}
.logo-wall__item {
  list-style: none;
}
.logo-wall__link {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sp-3);
  align-content: center;
  justify-items: center;
  min-height: 9.5rem;
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.logo-wall__link:hover,
.logo-wall__link:focus-visible {
  background: var(--p-50);
}
.logo-wall__link--flat {
  cursor: default;
}
.brand-logo__img {
  display: block;
  inline-size: 100%;
  block-size: 3.25rem;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.logo-wall__link:hover .brand-logo__img,
.logo-wall__link:focus-visible .brand-logo__img,
.logo-wall__link--flat .brand-logo__img {
  filter: none;
  opacity: 1;
}
.logo-wall__name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink-500);
  text-align: center;
}
.logo-wall__link:hover .logo-wall__name {
  color: var(--p-700);
}

/* Brand card — a featured brand with a page of its own. */
.brand-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.brand-card:hover {
  border-color: var(--p-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.brand-card__logo {
  display: grid;
  place-items: center;
  min-height: 8rem;
  padding: var(--sp-5);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.brand-card__logo .brand-logo__img {
  block-size: 4.25rem;
  filter: none;
  opacity: 1;
}
.brand-card__body {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
}
.brand-card__body h3 {
  font-size: var(--fs-h4);
  letter-spacing: -0.025em;
}
.brand-card__meta {
  font-size: var(--fs-sm);
}
/* Sits above .card__hit so the profile link stays independently clickable. */
.brand-card__ig {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-500);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.brand-card__ig:hover {
  color: var(--p-700);
  border-color: var(--p-300);
}

/* Logo plate inside the dark page hero — most marks are dark on transparent. */
.fact-panel__logo {
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: #fff;
}
.fact-panel__logo img {
  max-inline-size: 100%;
  max-block-size: 5rem;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

/* Brand media archive: portrait-first, because every asset is a social post. */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--sp-5);
}
.media-tile {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-3);
  margin: 0;
}
/* `contain`, not `cover`: these are finished ad creatives with type set into
   them, and cropping to a uniform box would cut the message. The fixed 4/5
   box keeps the grid even; portrait posts fill it, square posts letterbox. */
.media-tile__asset {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-alt);
  display: block;
}
.media-tile--video .media-tile__asset {
  background: #14102b;
  border-color: transparent;
}
.media-tile__cap {
  display: grid;
  gap: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-500);
}
.media-tile__kind {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* Logo variant of the home-page marquee. */
.marquee__item--logo {
  padding: 0.5rem 1.1rem;
  min-inline-size: 8.5rem;
}
.marquee__item--logo img {
  inline-size: 100%;
  block-size: 2.25rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.marquee__item--logo:hover img {
  filter: none;
  opacity: 1;
}

/* A handful of client logos are drawn in white on transparent. On the white
   tile every other logo needs they are invisible, so their tile flips dark.
   The flag lives in the data (brands.mjs `onDark`), checked per mark. */
.logo-wall__link--dark,
.brand-card__logo--dark {
  background: var(--ink-900);
}
.logo-wall__link--dark .logo-wall__name {
  color: var(--p-200);
}
.logo-wall__link--dark:hover,
.logo-wall__link--dark:focus-visible {
  background: #241d4d;
}
.logo-wall__link--dark:hover .logo-wall__name {
  color: #fff;
}
.fact-panel__logo--dark {
  background: var(--ink-900);
}
/* The strip is monochrome anyway, so a white-on-transparent mark does not
   need a dark pill here — greyscaling it first, then inverting, turns the
   white type black and leaves coloured parts as mid-grey. That keeps every
   pill the same colour instead of punching two black holes in the row. */
.marquee__item--logo.is-dark img {
  filter: grayscale(1) invert(1);
}