/* ==========================================================================
   asifali.in — Design System  v2
   Asif Ali · Web Design · Web Development · Digital Marketing · Lead Gen
   Vanilla CSS. No frameworks. Mobile-first.
   --------------------------------------------------------------------------
   01 Tokens        05 Layout        09 Hero        13 Work / Case studies
   02 Reset/Base    06 Buttons       10 Expertise   14 FAQ
   03 Type          07 Header        11 Services    15 Contact / Forms
   04 Utilities     08 Drawer        12 Process     16 Footer / Dock / Dialog
   ========================================================================== */

/* ==========================================================================
   00 · WEBFONTS (self-hosted)
   --------------------------------------------------------------------------
   Served from this origin instead of fonts.googleapis.com: two fewer DNS +
   TLS handshakes before any text can paint, and the files can be preloaded
   from the document head. One variable file covers weights 400-800.
   ========================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
}

/* ==========================================================================
   00 · METRIC-ADJUSTED FALLBACKS
   --------------------------------------------------------------------------
   The webfonts load async, so text first paints in a system font. Georgia is
   ~32% wider than Instrument Serif and Segoe UI ~5% narrower than Plus Jakarta
   Sans, which re-wrapped headings on arrival and cost about.html a 0.33 CLS.
   These faces scale the system fallback to the webfont's own measure, so the
   line breaks are already right before the real font swaps in.
   ========================================================================== */
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), local("Roboto");
  size-adjust: 105%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 76%;
  ascent-override: 122%;
  descent-override: 32%;
  line-gap-override: 0%;
}

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */
:root {
  /* — Brand ————————————————————————————————— */
  --gold-100: #FFF4DE;
  --gold-200: #FFE3AE;
  --gold-400: #FFC454;
  --gold-500: #EDA31C;
  --gold-600: #C67E06;
  --gold-700: #96600B;

  /* — Ink ——————————————————————————————————— */
  --ink-950: #0A0B0D;
  --ink-900: #101318;
  --ink-850: #171B22;
  --ink-800: #1E232B;
  --ink-700: #2B313A;
  --ink-600: #3D444E;

  /* — Paper ————————————————————————————————— */
  --white:    #FFFFFF;
  --paper-1:  #FBFAF7;
  --paper-2:  #F4F1EA;
  --paper-3:  #EBE7DE;

  /* — Semantic (light context is the default) ———————————— */
  --primary:        var(--gold-500);
  --primary-strong: #B87206;   /* gold-600 was 2.92:1 on --surface-2 */
  --primary-soft:   rgba(237, 163, 28, .13);
  --primary-line:   rgba(237, 163, 28, .34);
  /* Gold is 2.9:1 on paper — too light for small text. This is the text-safe
     gold (5.3:1 on paper-2, 5.28:1 on white); gold-500 stays for fills. */
  --gold-ink:       var(--gold-700);
  --secondary:      var(--ink-900);

  --bg:        var(--paper-1);
  --surface:   var(--white);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);

  --text:      #14171C;
  --text-2:    #565C66;
  --text-3:    #666C75;
  --line:      #E5E1D8;
  --line-2:    #D3CEC3;

  --wa: #157F45;       /* white on this is 5.0:1; #1FA855 was 3.1:1 */
  --wa-dark: #106536;

  /* — Radii ————————————————————————————————— */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* — Elevation ————————————————————————————— */
  --sh-1: 0 1px 2px rgba(10, 11, 13, .05);
  --sh-2: 0 4px 16px -6px rgba(10, 11, 13, .12);
  --sh-3: 0 18px 44px -22px rgba(10, 11, 13, .30);
  --sh-4: 0 36px 90px -40px rgba(10, 11, 13, .45);
  --sh-gold: 0 14px 34px -16px rgba(198, 126, 6, .55);

  /* — Type ——————————————————————————————————— */
  --f-sans: "Plus Jakarta Sans", "Jakarta Fallback", ui-sans-serif, system-ui,
            -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-serif: "Instrument Serif", "Instrument Fallback", ui-serif, Georgia,
             "Times New Roman", serif;

  --fs-hero:  clamp(2.1rem, 4.4vw, 3.35rem);     /* must outrank --fs-h2 */
  --fs-h2:    clamp(1.95rem, 4.1vw, 3.05rem);
  --fs-h3:    clamp(1.22rem, 1.9vw, 1.5rem);
  --fs-h4:    clamp(1.02rem, 1.4vw, 1.12rem);
  --fs-lede:  clamp(1.02rem, 1.35vw, 1.18rem);
  --fs-body:  1rem;
  --fs-sm:    .9rem;
  --fs-xs:    .8rem;
  --fs-2xs:   .72rem;

  /* — Rhythm ————————————————————————————————— */
  --gutter:  clamp(1.15rem, 4.4vw, 3.5rem);
  --shell:   1340px;
  --shell-w: 1400px;
  --sec-y:   clamp(3rem, 5.6vw, 5rem);
  --blk:     clamp(1.6rem, 2.8vw, 2.25rem);
  --gap:     clamp(.95rem, 1.6vw, 1.25rem);

  /* — Motion ————————————————————————————————— */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .16s var(--ease);
  --t: .3s var(--ease);
  --t-slow: .62s var(--ease);

  --header-h: 72px;
}

/* Dark context — remaps semantics only, so every component inherits it. */
.on-ink {
  --bg:        var(--ink-900);
  --surface:   var(--ink-850);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-700);
  --text:      #F5F4F1;
  --text-2:    rgba(255, 255, 255, .66);
  --text-3:    rgba(255, 255, 255, .54);
  --line:      rgba(255, 255, 255, .11);
  --line-2:    rgba(255, 255, 255, .2);
  --sh-2: 0 4px 16px -6px rgba(0, 0, 0, .5);
  --sh-3: 0 18px 44px -22px rgba(0, 0, 0, .7);
  --sh-4: 0 36px 90px -40px rgba(0, 0, 0, .85);
  color: var(--text);
  background: var(--bg);
}

/* ==========================================================================
   02 · RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* An inline icon with no sizing rule of its own falls back to the SVG
   default of 300x150 and wrecks the layout. This is the floor; every
   component rule below is more specific and still wins. */
svg { width: 1em; height: 1em; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Inline icons are stroke-drawn by default; brand glyphs opt out with
   fill="currentColor" stroke="none" presentation attributes on their paths. */
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

h1, h2, h3, h4, h5 { margin: 0; line-height: 1.12; font-weight: 800; letter-spacing: -.028em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary-strong); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--gold-200); color: var(--ink-950); }

/* ==========================================================================
   03 · TYPE PRIMITIVES
   ========================================================================== */
.serif {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.012em;
  color: var(--primary-strong);
}
.on-ink .serif { color: var(--gold-400); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--primary);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.sec-index {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .85rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sec-index em {
  font-style: normal;
  font-family: var(--f-serif);
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--primary-strong);
  line-height: 1;
}
.on-ink .sec-index em { color: var(--gold-400); }

.sec-title { font-size: var(--fs-h2); }
.sec-lede {
  font-size: var(--fs-lede);
  color: var(--text-2);
  max-width: 54ch;
  margin: 0;
}
.sec-head { margin-bottom: var(--blk); max-width: 62ch; }
.sec-head .sec-lede { margin-top: var(--gap); }

.sec-head--split {
  display: grid;
  gap: 1.4rem clamp(2rem, 5vw, 5rem);
  max-width: none;
  align-items: end;
}
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .sec-head--split .sec-lede { margin-top: 0; padding-bottom: .3rem; }
}

.lede { font-size: var(--fs-lede); color: var(--text-2); }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text);
  border-bottom: 1px solid var(--primary-line);
  padding-bottom: 2px;
  transition: gap var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.link-arrow svg { width: 15px; height: 15px; }
.link-arrow:hover { gap: .8rem; color: var(--primary-strong); border-color: var(--primary); }

.link-u { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.on-ink .link-u { color: var(--gold-400); }

/* ==========================================================================
   04 · UTILITIES
   ========================================================================== */

/* One rhythm scale for the per-page adjustments bodies used to do inline.
   Snap to a step; do not invent a new value. */
:root {
  --s-1: .5rem;
  --s-2: .75rem;
  --s-3: 1rem;
  --s-4: 1.4rem;
  --s-5: 1.75rem;
  --s-6: 2.5rem;
  --s-7: 3rem;
}
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mx-auto { margin-inline: auto; }
.gap-1 { gap: var(--s-1); }
.ai-center { align-items: center; }
.jc-center { justify-content: center; }
.ta-center { text-align: center; }
.ta-left { text-align: left; }
.measure-sm { max-width: 420px; }
.measure { max-width: 56ch; }
.measure-lg { max-width: 60ch; }
.measure-none { max-width: none; }
.fill-center { flex: 1; display: grid; place-items: center; }
.sprite { display: none; }

/* Footnote under a lede on an ink panel. */
.note-on-ink {
  font-size: var(--fs-sm);
  margin-top: var(--s-3);
  color: rgba(255, 255, 255, .72);
}

/* Confirmation mark on the thank-you page. */
.thanks__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(237, 163, 28, .16);
  color: var(--gold-400);
  margin: 0 auto var(--s-5);
}
.thanks__tick { width: 30px; height: 30px; }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed;
  top: .6rem; left: .6rem;
  z-index: 999;
  transform: translateY(-160%);
  background: var(--ink-900);
  color: #fff;
  padding: .65rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: var(--fs-sm);
  transition: transform var(--t);
}
.skip:focus { transform: none; color: #fff; }

.mt-blk { margin-top: var(--blk); }
.mt-sm  { margin-top: var(--gap); }
.tabnum { font-variant-numeric: tabular-nums; }

.icon { width: 1em; height: 1em; flex: none; }

/* Reveal on scroll. Scoped to .js so the content is visible if the script
   never runs — nothing on this site depends on JavaScript to be readable. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .66s var(--ease), transform .66s var(--ease);
}
.js [data-reveal="fade"] { transform: none; }
/* Slide-in from the right only where the gutter can absorb it; on narrow
   screens the offset would push the document wider than the viewport. */
.js [data-reveal="right"] { transform: translateY(18px); }
@media (min-width: 980px) { .js [data-reveal="right"] { transform: translateX(24px); } }
.js [data-reveal].is-in { opacity: 1; transform: none; }

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

/* ==========================================================================
   05 · LAYOUT
   ========================================================================== */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: var(--shell-w); }
.shell--narrow { max-width: 880px; }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(2rem, 3.6vw, 3rem); }
.section--paper { background: var(--surface-2); }

/* ==========================================================================
   06 · BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--ink-950);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.4rem;
  min-height: 46px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t),
              background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: none; }

.btn--primary { --btn-bg: var(--primary); --btn-fg: var(--ink-950); }
.btn--primary:hover { --btn-bg: var(--gold-400); box-shadow: var(--sh-gold); }

.btn--ink { --btn-bg: var(--ink-900); --btn-fg: #fff; }
.btn--ink:hover { --btn-bg: var(--ink-800); }
.on-ink .btn--ink { --btn-bg: #fff; --btn-fg: var(--ink-950); }
.on-ink .btn--ink:hover { --btn-bg: var(--paper-2); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-2); }
.btn--ghost:hover { --btn-bd: var(--text); box-shadow: none; }
/* Ghost button on a dark band that does not carry .on-ink. */
.btn--on-ink { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .25); }
.btn--on-ink:hover { --btn-bd: #fff; }

.btn--wa { --btn-bg: var(--wa); --btn-fg: #fff; }
.btn--wa:hover { --btn-bg: var(--wa-dark); }

.btn--sm { padding: .55rem 1.05rem; min-height: 38px; font-size: var(--fs-xs); }
.btn--lg { padding: 1rem 1.75rem; min-height: 54px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

/* Phones: the same buttons at desktop weight read as oversized slabs. */
@media (max-width: 619px) {
  .btn {
    gap: .45rem;
    padding: .66rem 1.05rem;
    min-height: 42px;
    font-size: var(--fs-xs);
  }
  .btn svg { width: 15px; height: 15px; }
  .btn--lg { padding: .72rem 1.15rem; min-height: 45px; font-size: var(--fs-sm); }
  .btn--sm { padding: .55rem .95rem; min-height: 44px; font-size: var(--fs-2xs); }
  .btn-row { gap: .55rem; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--t-fast), color var(--t-fast),
              background-color var(--t-fast), transform var(--t-fast);
}
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn:hover { transform: translateY(-2px); border-color: var(--text); color: var(--text); }
.iconbtn--wa:hover { background: var(--wa); border-color: var(--wa); color: #fff; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
}
.chip svg { width: 14px; height: 14px; color: var(--primary-strong); }
.chip-set { display: flex; flex-wrap: wrap; gap: .5rem; }

.tag {
  display: inline-block;
  padding: .28rem .6rem;
  border-radius: var(--r-xs);
  background: var(--primary-soft);
  color: var(--gold-ink);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.on-ink .tag { background: rgba(255, 196, 84, .16); color: var(--gold-400); }

/* ==========================================================================
   07 · HEADER
   ========================================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(251, 250, 247, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background-color var(--t), box-shadow var(--t);
}
.masthead.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(10, 11, 13, .5);
}

.masthead__inner {
  max-width: var(--shell-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand { display: inline-flex; align-items: center; gap: .62rem; margin-right: auto; }
.brand:hover { color: inherit; }
.brand__mark { width: 38px; height: 38px; flex: none; color: var(--gold-500); }
.brand__text { display: flex; flex-direction: column; line-height: 1.08; }
.brand__name {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
@media (max-width: 400px) { .brand__role { display: none; } }
.brand__role {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.nav { display: none; }
@media (min-width: 1240px) {
  .nav { display: flex; align-items: center; gap: .1rem; }
  .nav > a, .nav__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .58rem;
    border-radius: var(--r-sm);
    font-size: .855rem;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
    transition: color var(--t-fast);
  }
  .nav > a::after, .nav__trigger::after {
    content: "";
    position: absolute;
    left: .58rem; right: .58rem; bottom: .22rem;
    height: 1.5px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t);
  }
  .nav > a:hover, .nav__trigger:hover { color: var(--text); }
  .nav > a:hover::after,
  .nav > a.is-active::after,
  .nav__item:hover .nav__trigger::after,
  .nav__item:focus-within .nav__trigger::after,
  .nav__trigger.is-active::after { transform: scaleX(1); }
  .nav > a.is-active, .nav__trigger.is-active { color: var(--text); font-weight: 700; }

  .nav__item { position: relative; }
  .nav__trigger svg { width: 12px; height: 12px; transition: transform var(--t-fast); }
  .nav__item:hover .nav__trigger svg,
  .nav__item:focus-within .nav__trigger svg { transform: rotate(180deg); }

  .nav__menu {
    position: absolute;
    top: 100%;
    left: -.3rem;
    min-width: 268px;
    padding: .4rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
    z-index: 5;
  }
  .nav__item:hover .nav__menu,
  .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }

  .nav__menu a {
    display: block;
    padding: .55rem .7rem;
    border-radius: var(--r-sm);
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
    transition: background-color var(--t-fast), color var(--t-fast);
  }
  .nav__menu a span {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--text-3);
    margin-top: .1rem;
  }
  .nav__menu a:hover { background: var(--surface-2); color: var(--text); }
  .nav__menu hr { margin: .3rem .7rem; }
}

.masthead__actions { display: flex; align-items: center; gap: .5rem; }
.masthead__actions .btn { white-space: nowrap; }
.hide-sm { display: none; }
@media (min-width: 560px) { .hide-sm { display: inline-flex; } }
.hide-md { display: none; }
@media (min-width: 900px) { .hide-md { display: inline-flex; } }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color var(--t-fast);
}
.burger span { display: block; height: 1.6px; background: var(--text); border-radius: 2px; }
.burger span:last-child { width: 62%; }
.burger:hover { border-color: var(--text); }
@media (min-width: 1240px) { .burger { display: none; } }

/* ==========================================================================
   08 · DRAWER (mobile navigation)
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 13, .55);
  opacity: 0;
  transition: opacity var(--t);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--ink-900);
  color: #fff;
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.drawer__head .eyebrow { margin: 0; color: rgba(255, 255, 255, .5); }
.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;   /* matches the other close buttons */
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
}
.drawer__close svg { width: 18px; height: 18px; }
.drawer__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.drawer__nav { padding: .6rem var(--gutter) 1rem; }
.drawer__nav a {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .82rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}
.drawer__nav a i {
  font-style: normal;
  font-family: var(--f-serif);
  font-size: .95rem;
  color: var(--gold-400);
}
.drawer__nav a:hover { color: var(--gold-400); }
.drawer__sub { padding: .5rem 0 .7rem 1.85rem; display: grid; gap: .1rem; }
.drawer__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .35rem 0;
  border: 0;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .68);
}
.drawer__sub a::before { content: "\2014"; margin-right: .5rem; color: var(--gold-400); }

.drawer__foot {
  margin-top: auto;
  padding: 1rem var(--gutter) 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: grid;
  gap: .35rem;
}
.drawer__foot .contact-line {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: .6rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .72);
}
.drawer__foot .contact-line svg { width: 16px; height: 16px; color: var(--gold-400); }
.drawer__foot .contact-line a:hover { color: var(--gold-400); }

body.is-locked { overflow: hidden; }

/* ==========================================================================
   09 · HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.9rem, 3.4vw, 2.75rem) clamp(2rem, 3.6vw, 2.9rem);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 60% at 78% 6%, rgba(237, 163, 28, .16), transparent 62%),
    radial-gradient(46% 46% at 4% 92%, rgba(255, 196, 84, .10), transparent 66%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__grid {
  display: grid;
  gap: clamp(1.9rem, 3.8vw, 3.25rem);
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
}

.hero__flag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .9rem .4rem .45rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
}
.hero__flag b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--ink-950);
}
.hero__flag b svg { width: 13px; height: 13px; }

.hero__title {
  font-size: var(--fs-hero);
  letter-spacing: -.03em;
  line-height: 1.14;
  margin-bottom: .7rem;
}
.hero__title .line { display: block; }
.hero__title .serif { font-size: 1.1em; }

.hero__sub {
  font-size: clamp(.98rem, 1.2vw, 1.075rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 44ch;
  margin-bottom: .55rem;
  font-weight: 600;
}
.hero__copy { color: var(--text-2); font-size: var(--fs-sm); max-width: 52ch; margin-bottom: 1.25rem; }
.hero__copy b { color: var(--text); font-weight: 700; }

.hero__cta { margin-bottom: .9rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-2);
}
.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .34rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.hero__meta svg { width: 13px; height: 13px; color: var(--primary-strong); flex: none; }

/* Portrait */
.hero__figure { position: relative; max-width: 380px; margin-inline: auto; width: 100%; }
.hero__portrait {
  position: relative;
  border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--sh-4);
  isolation: isolate;
}
.hero__portrait img { width: 100%; }
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, transparent 52%, rgba(10, 11, 13, .5));
}
.hero__frame {
  position: absolute;
  inset: -14px -14px auto -14px;
  height: 62%;
  border: 1px solid var(--primary-line);
  border-radius: calc(var(--r-xl) + 12px) calc(var(--r-xl) + 12px) 0 0;
  border-bottom: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  /* The decorative frame must not poke past the viewport on small screens. */
  .hero__frame { inset: -10px 0 auto 0; border-radius: calc(var(--r-xl) + 6px) calc(var(--r-xl) + 6px) 0 0; }
}

.hero__badge {
  position: absolute;
  left: -6px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .95rem .6rem .65rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-3);
  max-width: calc(100% - 24px);
}
.hero__badge > svg { width: 26px; height: 26px; flex: none; }
@media (max-width: 700px) { .hero__badge { left: 0; } }
.hero__badge b { display: block; font-size: var(--fs-xs); font-weight: 800; color: var(--ink-950); line-height: 1.25; }
.hero__badge span { display: block; font-size: var(--fs-2xs); color: var(--text-2); }

/* Ticker */
.ticker {
  margin-top: clamp(1.4rem, 2.4vw, 1.9rem);
  padding-block: .85rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: ticker 42s linear infinite; }
.ticker ul { display: flex; align-items: center; }
.ticker li {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-2);
  white-space: nowrap;
}
.ticker li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker ul:last-child { display: none; }
  .ticker__track { flex-wrap: wrap; width: 100%; }
}

/* ==========================================================================
   09b · TRUST BAND
   ========================================================================== */
.trust { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust__item { background: var(--bg); padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.1rem, 2vw, 1.7rem); }
.trust__item b {
  display: block;
  font-family: var(--f-serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.trust__item b span { color: var(--primary-strong); }
.trust__item p { font-size: var(--fs-sm); color: var(--text-2); }

/* ==========================================================================
   10 · EXPERTISE — the growth stack
   ========================================================================== */
.stack { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) { .stack { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 clamp(2rem, 4vw, 3.5rem); } }

.stack__aside { align-self: start; }
@media (min-width: 1000px) { .stack__aside { position: sticky; top: calc(var(--header-h) + 2rem); } }
.stack__aside p { color: var(--text-2); font-size: var(--fs-sm); }

.layers { display: grid; gap: .8rem; }
.layer {
  position: relative;
  display: grid;
  gap: .9rem 1.4rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
@media (min-width: 720px) { .layer { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); align-items: start; } }
.layer:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }

.layer__no {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .5rem;
}
.layer__no em {
  font-style: normal;
  font-family: var(--f-serif);
  font-size: 1.25rem;
  letter-spacing: 0;
  color: var(--primary-strong);
}
.layer h3 { font-size: var(--fs-h4); margin-bottom: .3rem; }
.layer__what { font-size: var(--fs-sm); color: var(--text-2); }
.layer__skills { display: flex; flex-wrap: wrap; gap: .45rem; }
.layer__skills li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
}
.layer__skills li svg { width: 13px; height: 13px; color: var(--primary-strong); }

.layer--outcome { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.layer--outcome .layer__no { color: rgba(255, 255, 255, .5); }
.layer--outcome .layer__no em { color: var(--gold-400); }
.layer--outcome .layer__what { color: rgba(255, 255, 255, .68); }
.layer--outcome .layer__skills li {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
}
.layer--outcome .layer__skills li svg { color: var(--gold-400); }

.stack__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .1rem 0;
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.stack__flow svg { width: 15px; height: 15px; color: var(--primary); }

/* Process page — the long half of each step, sitting beside the summary. */
.pstep > p { color: var(--text-2); }
.pstep > p + p { margin-top: .7rem; }

.pstep__lbl {
  margin-top: 1.1rem;
  margin-bottom: .5rem;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.pstep__need {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.1rem;
  padding: .75rem .9rem;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  font-size: var(--fs-sm);
  color: var(--text);
}
.pstep__need svg { flex: none; width: 16px; height: 16px; margin-top: .15rem; color: var(--gold-ink); }
.pstep__need b { color: var(--text); }

/* ==========================================================================
   AD & DASHBOARD SCREENSHOTS
   Used by the "Live ads" gallery on the case studies page, the Google Ads
   service page, and the campaign evidence block on a case study.
   ========================================================================== */
/* align-items:start so a short screenshot beside a tall one does not get
   stretched into a box with empty space under its caption. */
.shots { display: grid; align-items: start; gap: clamp(.9rem, 1.8vw, 1.4rem); }
@media (min-width: 640px)  { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A single screenshot should not sit in a third of the row. */
.shots--one { grid-template-columns: minmax(0, 1fr); max-width: 620px; }

.shot {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.shot:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.shot[data-lightbox] { cursor: zoom-in; }
.shot[data-lightbox]:hover { transform: translateY(-2px); }

.shot > picture { display: block; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  /* No fixed ratio here on purpose: a search-result screenshot and a wide
     dashboard are different shapes, and cropping a dashboard to a common
     ratio would cut off the chart. The width/height attributes on each
     image reserve the right box, so nothing jumps as they load. */
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.shot figcaption {
  padding: .7rem .9rem .8rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
  .shot[data-lightbox]:hover { transform: none; }
}

/* A chip that is a link — used for the topic jumps on the FAQ page. */
.chip--link { transition: border-color var(--t), color var(--t), background var(--t); }
.chip--link:hover,
.chip--link:focus-visible { border-color: var(--line-2); background: var(--surface-2); color: var(--text); }

/* ==========================================================================
   11 · SERVICES
   ========================================================================== */
.svc-cat { margin-top: clamp(2rem, 3.6vw, 3rem); }
.svc-cat:first-of-type { margin-top: 0; }

.svc-cat__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .7rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--line);
}
.svc-cat__head h3 {
  font-size: var(--fs-h4);
  letter-spacing: -.02em;
}
@media (max-width: 560px) {
  .svc-cat__head { flex-wrap: wrap; gap: .2rem .7rem; }
  .svc-cat__note { margin-left: 0; width: 100%; text-align: left; }
}
.svc-cat__note {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-weight: 600;
  margin-left: auto;
  text-align: right;
}
.svc-cat__no {
  font-family: var(--f-serif);
  font-size: 1.15rem;
  color: var(--gold-ink);
  line-height: 1;
}

.svc-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .svc-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.svc {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.svc:hover { border-color: var(--line-2); box-shadow: var(--sh-3); transform: translateY(-3px); }

.svc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 1rem;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.svc__icon svg { width: 21px; height: 21px; }

.svc h4 { font-size: var(--fs-h4); margin-bottom: .45rem; }
.svc__desc { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: .95rem; }

.svc__list { display: grid; gap: .38rem; margin-bottom: 1.25rem; }
.svc__list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: 1.5;
}
.svc__list svg { width: 14px; height: 14px; margin-top: .22rem; color: var(--primary-strong); }

.svc__foot {
  margin-top: auto;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  flex-wrap: wrap;
}
/* The "see all ten" tile has no list above it, so it needs no dividing rule. */
.svc__foot--flush { border-top: 0; padding-top: .3rem; }
/* Same tile, styled as an invitation rather than a service. */
.svc--dashed { background: var(--surface-2); border-style: dashed; justify-content: center; }


/* Service spotlight */
.spotlight {
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
  margin-top: clamp(2rem, 3.6vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border-radius: var(--r-lg);
  background: var(--ink-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.spotlight::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% 55%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(237, 163, 28, .22), transparent);
  pointer-events: none;
}
.spotlight > * { position: relative; }
@media (min-width: 900px) { .spotlight { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; } }
.spotlight h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: .9rem; }
.spotlight p { color: rgba(255, 255, 255, .7); }
.spotlight .eyebrow { color: rgba(255, 255, 255, .5); }

.deliverables { display: grid; gap: .55rem; }
.deliverables li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .95rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.deliverables svg { width: 16px; height: 16px; color: var(--gold-400); flex: none; }
.deliverables--grid { gap: .45rem; }
.deliverables--grid li { padding: .55rem .8rem; font-size: var(--fs-xs); }
@media (min-width: 560px) { .deliverables--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   11b · WHY WORK WITH ME
   ========================================================================== */
.why { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 700px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why__item { background: var(--surface); padding: clamp(1.3rem, 2.4vw, 1.75rem); transition: background-color var(--t); }
.why__item:hover { background: var(--bg); }
.why__item svg { width: 20px; height: 20px; color: var(--primary-strong); margin-bottom: .85rem; }
.why__item b { display: block; font-size: var(--fs-h4); font-weight: 800; letter-spacing: -.02em; margin-bottom: .4rem; }
.why__item h3 { font-size: var(--fs-h4); font-weight: 800; letter-spacing: -.02em; margin-bottom: .4rem; }
.why__item p { font-size: var(--fs-sm); color: var(--text-2); }

/* ==========================================================================
   12 · PROCESS
   ========================================================================== */
.process { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; counter-reset: step; }
@media (min-width: 700px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .process { grid-template-columns: repeat(3, 1fr); } }

.step {
  position: relative;
  background: var(--surface);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  transition: background-color var(--t);
}
.step:hover { background: var(--bg); }
.step__no {
  display: block;
  font-family: var(--f-serif);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--primary-strong);
  margin-bottom: .9rem;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--fs-h4); margin-bottom: .45rem; }
.step p { font-size: var(--fs-sm); color: var(--text-2); }
.step__tags { margin-top: .85rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.step__tags li {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: .2rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}

/* ==========================================================================
   13 · WORK
   ========================================================================== */
.work-grid { display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .work-grid { grid-template-columns: repeat(6, 1fr); } }

.proj {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.proj:hover { border-color: var(--line-2); box-shadow: var(--sh-3); transform: translateY(-3px); }
@media (min-width: 1080px) {
  .proj { grid-column: span 2; }
  .proj--wide { grid-column: span 3; }
}

.proj__media { position: relative; background: var(--surface-3); overflow: hidden; }
.proj__media img { width: 100%; aspect-ratio: 940 / 582; object-fit: cover; object-position: top center; transition: transform var(--t-slow); }
.proj:hover .proj__media img { transform: scale(1.035); }
.proj__type {
  position: absolute;
  top: .75rem; left: .75rem;
  padding: .3rem .65rem;
  border-radius: var(--r-xs);
  background: rgba(10, 11, 13, .82);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.proj__zoom {
  position: absolute;
  right: .75rem; bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  color: var(--ink-950);
  font-size: var(--fs-2xs);
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t), transform var(--t);
}
.proj__zoom svg { width: 13px; height: 13px; }
.proj:hover .proj__zoom, .proj:focus-within .proj__zoom { opacity: 1; transform: none; }

.proj__body { padding: clamp(1.15rem, 2.2vw, 1.5rem); display: flex; flex-direction: column; flex: 1; }
.proj__kicker {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .55rem;
}
.proj h3 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.proj p { font-size: var(--fs-sm); color: var(--text-2); }
.proj__svc { display: flex; flex-wrap: wrap; gap: .35rem; margin: .9rem 0 0; }
.proj__svc li {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-2);
  padding: .22rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
.proj__foot { margin-top: auto; padding-top: 1rem; }

/* Typographic project tile (no image available) */
.proj--stat .proj__media {
  aspect-ratio: 940 / 582;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--ink-900);
  color: #fff;
  text-align: center;
}
.proj--stat .proj__figure {
  font-family: var(--f-serif);
  font-size: clamp(3.4rem, 8vw, 5rem);
  line-height: 1;
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
}
.proj--stat .proj__figure small { font-size: .42em; }
.proj--stat .proj__cap { font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); max-width: 26ch; margin-top: .7rem; }

/* ==========================================================================
   13b · CASE STUDIES
   ========================================================================== */
.cases { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); }

.case {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.case__head {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .case__head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } }
.case__no {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .9rem;
}
.case__no em { font-style: normal; font-family: var(--f-serif); font-size: 1.35rem; letter-spacing: 0; color: var(--primary-strong); }
.case h3 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin-bottom: .7rem; }
.case__lede { color: var(--text-2); }

.case__facts { display: grid; gap: .8rem; }
@media (min-width: 480px) { .case__facts { grid-template-columns: repeat(2, 1fr); } }
.case__facts div { border-left: 2px solid var(--primary-line); padding-left: .8rem; }
.case__facts dt {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .15rem;
}
.case__facts dd { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }

.case__body { display: grid; gap: 1px; background: var(--line); }
@media (min-width: 760px) { .case__body { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .case__body { grid-template-columns: repeat(4, 1fr); } }
.case__block { background: var(--surface); padding: clamp(1.2rem, 2.4vw, 1.75rem); }
.case__block h4 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .75rem;
}
.case__block h4 svg { width: 15px; height: 15px; color: var(--primary-strong); }
.case__block p, .case__block li { font-size: var(--fs-sm); color: var(--text-2); }
.case__block ul { display: grid; gap: .4rem; }
.case__block li { display: flex; gap: .5rem; align-items: flex-start; }
.case__block li svg { width: 14px; height: 14px; margin-top: .25rem; color: var(--primary-strong); flex: none; }
.case__block--outcome { background: var(--ink-900); color: #fff; }
.case__block--outcome h4 { color: rgba(255, 255, 255, .5); }
.case__block--outcome h4 svg, .case__block--outcome li svg { color: var(--gold-400); }
.case__block--outcome p, .case__block--outcome li { color: rgba(255, 255, 255, .78); }
.case__block--outcome b { color: #fff; }

.case__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: 1rem clamp(1.3rem, 2.6vw, 2rem);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.case__svc { display: flex; flex-wrap: wrap; gap: .4rem; }
.case__svc li {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-2);
  padding: .25rem .6rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
}

/* ==========================================================================
   14 · FAQ
   ========================================================================== */
.faq-wrap { display: grid; gap: clamp(1.4rem, 2.6vw, 2.5rem); }
@media (min-width: 980px) { .faq-wrap { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }

/* The pages that put the accordion first want two equal columns instead:
   there the narrow track fell on the questions, which wrapped over two
   lines beside a half-empty card. Order stays as written in the markup. */
@media (min-width: 980px) {
  .faq-wrap--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.faq-aside { align-self: start; }
@media (min-width: 980px) { .faq-aside { position: sticky; top: calc(var(--header-h) + 2rem); } }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0;
  text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--text);
  transition: color var(--t-fast);
}
.faq__q:hover { color: var(--primary-strong); }
.faq__q > span { flex: 1; }
.faq__q i {
  position: relative;
  flex: none;
  width: 24px; height: 24px;
  margin-top: 1px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: background-color var(--t), border-color var(--t), transform var(--t);
}
.faq__q i::before, .faq__q i::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--t), opacity var(--t);
}
.faq__q i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] i { background: var(--primary); border-color: var(--primary); color: var(--ink-950); transform: rotate(180deg); }
.faq__q[aria-expanded="true"] i::after { opacity: 0; }
.faq__a { padding: 0 3rem 1.3rem 0; color: var(--text-2); font-size: var(--fs-sm); max-width: 78ch; }
.faq__a p + p { margin-top: .7rem; }

/* ==========================================================================
   15 · CTA BAND + CONTACT + FORMS
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  color: #fff;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto 30%;
  height: 150%;
  background: radial-gradient(closest-side, rgba(237, 163, 28, .2), transparent);
  pointer-events: none;
}
.cta-band__inner { position: relative; display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: center; }
.cta-band--form.section { padding-block: clamp(2.3rem, 3.8vw, 3.25rem); }
.cta-band--form .cta-band__inner { gap: clamp(1.5rem, 2.8vw, 2.75rem); align-items: start; }
@media (min-width: 900px) { .cta-band--form .cta-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); } }
@media (min-width: 900px) {
  .cta-band--form .cta-band__inner { align-items: stretch; }
  .cta-band--form .cta-band__inner > :first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: .35rem;
  }
  .cta-band--form .cta-band__inner > :first-child > .leadband__alt { margin-bottom: .2rem; }
}
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.cta-band h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1rem; }
.cta-band p { color: rgba(255, 255, 255, .7); max-width: 52ch; }
.cta-band .eyebrow { color: rgba(255, 255, 255, .52); }
.cta-points { display: grid; gap: .7rem; }
.cta-points li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .82);
}
.cta-points svg { width: 17px; height: 17px; color: var(--gold-400); margin-top: .15rem; flex: none; }

/* Contact */
.contact-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3.25rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }

.contact-list { display: grid; gap: .1rem; margin-top: 1.6rem; }
.contact-row {
  display: flex;
  gap: .95rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-row:first-child { border-top: 1px solid var(--line); }
.contact-row__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.contact-row__ico svg { width: 17px; height: 17px; }
.contact-row dt {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .15rem;
}
.contact-row dd { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.5; }
.contact-row dd a:hover { color: var(--primary-strong); }

.socials { display: flex; flex-wrap: wrap; gap: .5rem; }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-2);
  transition: all var(--t-fast);
}
.socials a svg { width: 16px; height: 16px; }
.socials a:hover { background: var(--ink-900); border-color: var(--ink-900); color: #fff; transform: translateY(-2px); }
.on-ink .socials a:hover { background: var(--primary); border-color: var(--primary); color: var(--ink-950); }

/* Form card */
.form-card {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-3);
}
.form-card > h3 { font-size: var(--fs-h3); margin-bottom: .45rem; }
.form-card > p { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 1.4rem; }

.form-grid { display: grid; gap: .9rem; }
@media (min-width: 560px) { .form-2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: grid; gap: .38rem; align-content: start; }
/* align-content: start -- in a two-column row, a field whose neighbour is
   showing a two-line error is stretched to match, and without this its
   own label and box slid down to the middle of the extra height. */
.field label { font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
.field label .req { color: var(--gold-ink); }
.field input, .field select, .field textarea {
  width: 100%;
  color: var(--text);
  padding: .78rem .95rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  min-height: 46px;
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23565C66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 15px;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field .err { font-size: var(--fs-2xs); font-weight: 600; color: #C62B2B; min-height: 0; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C62B2B; }
.field.has-error .err { min-height: 1em; }

.form-note { font-size: var(--fs-2xs); color: var(--text-3); text-align: center; margin-top: .9rem; }
.form-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

.consent { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-2xs); color: var(--text-3); }
.consent input { width: 16px; height: 16px; min-height: 0; margin-top: .18rem; accent-color: var(--gold-600); flex: none; padding: 0; }

/* ==========================================================================
   16 · FOOTER · DOCK · DIALOG
   ========================================================================== */
.site-footer { background: var(--ink-950); color: rgba(255, 255, 255, .68); padding-top: clamp(3rem, 6vw, 4.75rem); }
/* The footer grid lives in section 26. `.footer-top` no longer exists: it
   held eight children in a five-track grid, which left the last row three
   quarters empty. */

.footer-brand p { font-size: var(--fs-sm); max-width: 40ch; margin: 1rem 0 1.25rem; }
.footer-brand .brand__name, .footer-brand .brand__role { color: #fff; }
.footer-brand .brand__role { color: rgba(255, 255, 255, .5); }
.footer-brand .socials a { border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .7); }
.footer-brand .socials a:hover { background: var(--primary); border-color: var(--primary); color: var(--ink-950); }

.footer-col__title {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1rem;
}
.footer-col ul { display: grid; gap: .15rem; }
.footer-col a, .footer-col li { font-size: var(--fs-sm); }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; }
.footer-col .footer-contact li { display: flex; align-items: center; min-height: 40px; }
.footer-col a:hover { color: var(--gold-400); }
@media (min-width: 900px) {
  .footer-col ul { gap: .45rem; }
  .footer-col a, .footer-col .footer-contact li { min-height: 0; }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 0 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--fs-2xs);
}
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; gap: .5rem 1.1rem; flex-wrap: wrap; }
@media (max-width: 699px) {
  .footer-bottom { justify-content: flex-start; gap: .9rem; }
  .footer-bottom nav a { display: inline-flex; align-items: center; min-height: 34px; }
}

/* Dock */
.dock {
  position: fixed;
  right: clamp(.85rem, 2.2vw, 1.5rem);
  bottom: clamp(.85rem, 2.2vw, 1.5rem);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  align-items: center;
}
.dock.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(.75rem);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.dock { transition: opacity var(--t), transform var(--t), visibility var(--t); }
.dock__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  box-shadow: var(--sh-3);
  transition: transform var(--t-fast), box-shadow var(--t);
}
.dock__btn svg { width: 22px; height: 22px; }
.dock__btn:hover { transform: translateY(-3px) scale(1.04); }
.dock__wa { background: var(--wa); color: #fff; }
.dock__wa:hover { color: #fff; }
.dock__wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wa);
  animation: ping 2.6s var(--ease) infinite;
}
.dock__wa { position: relative; }
@keyframes ping {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .dock__wa::after { display: none; } }

.dock__call { background: var(--ink-900); color: #fff; }
.dock__call:hover { color: #fff; }
@media (min-width: 900px) { .dock__call { display: none; } }

.dock__top {
  width: 44px; height: 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.dock__top.is-on { opacity: 1; visibility: visible; transform: none; }

/* Mobile sticky action bar */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 79;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--t);
}
.actionbar.is-on { transform: none; }
.actionbar a, .actionbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .85rem .5rem;
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
}
.actionbar a svg, .actionbar button svg { width: 16px; height: 16px; }
.actionbar > *:first-child { color: var(--ink-950); background: var(--primary); }
@media (min-width: 700px) { .actionbar { display: none; } }
@media (max-width: 699px) {
  .dock { bottom: 4.4rem; gap: .45rem; }
  .site-footer { padding-bottom: 3.4rem; }
  /* the action bar already carries Call Now — one floating circle is enough */
  .dock__call { display: none; }
  .dock__btn { width: 46px; height: 46px; }
  .dock__btn svg { width: 20px; height: 20px; }
  .dock__top { width: 40px; height: 40px; }
}

/* Dialog */
dialog.modal {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(88dvh, 900px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-4);
  overflow: hidden;
}
dialog.modal::backdrop { background: rgba(10, 11, 13, .62); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: pop .28s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.3rem clamp(1.25rem, 3vw, 1.9rem) 1rem;
  border-bottom: 1px solid var(--line);
}
.modal__head h2 { font-size: var(--fs-h3); margin-bottom: .25rem; }
.modal__head p { font-size: var(--fs-xs); color: var(--text-2); margin: 0; }
.modal__close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;   /* 34px was under the touch-target guideline */
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-2);
}
.modal__close svg { width: 16px; height: 16px; }
.modal__close:hover { background: var(--surface-2); color: var(--text); }
.modal__body { padding: 1.25rem clamp(1.25rem, 3vw, 1.9rem) 1.5rem; overflow-y: auto; max-height: calc(88dvh - 90px); }

/* Lightbox */
dialog.lightbox {
  width: min(1100px, calc(100vw - 1.5rem));
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  overflow: visible;
}
dialog.lightbox figure { margin: 0; position: relative; }
dialog.lightbox::backdrop { background: rgba(10, 11, 13, .88); }
dialog.lightbox img {
  display: block;
  width: 100%;
  height: auto;
  /* Cap the height so a tall screenshot cannot push the close button off the
     screen, and so the caption underneath stays visible. */
  max-height: 78dvh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
}
dialog.lightbox figcaption { color: rgba(255, 255, 255, .8); font-size: var(--fs-sm); padding: .8rem .2rem 0; text-align: center; }
/* Sits INSIDE the top-right corner of the image. It used to sit 46px above
   it, which put it off the top of the screen on a tall image -- and it was
   plain white text, invisible against a light screenshot. The solid disc
   keeps it readable whatever is behind it. */
.lightbox__close {
  position: absolute;
  top: .65rem; right: .65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(10, 11, 13, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  transition: background var(--t), transform var(--t);
}
.lightbox__close:hover { background: var(--ink-900); transform: scale(1.06); }
.lightbox__close svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .lightbox__close:hover { transform: none; } }

/* Certifications */
.certs { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .certs { grid-template-columns: repeat(2, 1fr); } }
.cert {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
@media (min-width: 480px) { .cert { grid-template-columns: 180px minmax(0, 1fr); align-items: center; } }
.cert__frame { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.cert h3 { font-size: var(--fs-h4); margin: .3rem 0 .35rem; }
.cert p { font-size: var(--fs-xs); color: var(--text-2); }
.cert__issuer { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-strong); }

/* Alert / notice */
.notice {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .9rem 1.05rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  font-size: var(--fs-sm);
  color: var(--text);
}
.notice svg { width: 17px; height: 17px; color: var(--primary-strong); margin-top: .18rem; flex: none; }

/* ==========================================================================
   17 · INNER PAGES — page hero, service detail, rail
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  color: #fff;
  padding-block: clamp(2.25rem, 4.6vw, 3.75rem) clamp(2.25rem, 4.4vw, 3.5rem);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto 45%;
  height: 160%;
  background: radial-gradient(closest-side, rgba(237, 163, 28, .2), transparent);
  pointer-events: none;
}
.page-hero > * { position: relative; }
.page-hero h1 { font-size: clamp(2.05rem, 4.4vw, 3.15rem); letter-spacing: -.034em; margin-bottom: .9rem; }
.page-hero p.lede { color: rgba(255, 255, 255, .72); max-width: 60ch; }
.page-hero .eyebrow { color: rgba(255, 255, 255, .52); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.1rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
}
.crumbs a:hover { color: var(--gold-400); }
.crumbs span[aria-hidden] { opacity: .5; }

.svc-page { display: grid; gap: clamp(1.75rem, 3.2vw, 2.75rem); }
@media (min-width: 1000px) { .svc-page { grid-template-columns: 250px minmax(0, 1fr); } }

.svc-rail { align-self: start; }
@media (min-width: 1000px) { .svc-rail { position: sticky; top: calc(var(--header-h) + 1.75rem); } }
.svc-rail h2 {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .9rem;
}
.svc-rail ul { display: grid; gap: .1rem; border-left: 1px solid var(--line); }
.svc-rail a {
  display: block;
  padding: .42rem 0 .42rem .9rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.svc-rail a:hover, .svc-rail a.is-active { color: var(--text); border-left-color: var(--primary); }
@media (max-width: 999px) {
  .svc-rail ul { display: flex; flex-wrap: wrap; gap: .4rem; border-left: 0; }
  .svc-rail a {
    padding: .4rem .8rem;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: var(--fs-xs);
  }
  .svc-rail a:hover, .svc-rail a.is-active { border-color: var(--primary); border-left-color: var(--primary); }
}

.svc-detail { padding-block: clamp(1.9rem, 3.4vw, 2.75rem); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.svc-detail:first-child { border-top: 0; padding-top: 0; }
.svc-detail__top { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.svc-detail__top .svc__icon { margin-bottom: 0; }
.svc-detail h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); margin-bottom: .3rem; }
.svc-detail__cat {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary-strong);
}
.svc-detail__lede { font-size: var(--fs-lede); color: var(--text-2); max-width: 66ch; margin-bottom: 1.15rem; }

.svc-detail__grid { display: grid; gap: .9rem; margin-bottom: 1.25rem; }
@media (min-width: 780px) { .svc-detail__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }

.panel {
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.panel--soft { background: var(--surface-2); }

/* Checklist inside a panel: a status icon, then the line of copy. */
.ticks {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticks li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-2);
}
.ticks li > svg {
  width: 17px;
  height: 17px;
  margin-top: .18rem;
  color: var(--primary-strong);
}
.ticks li b, .ticks li strong { color: var(--text); font-weight: 700; }
/* Same list, opposite meaning: the things that will not happen. */
.ticks--no li > svg { color: var(--text-3); }
.panel h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1rem;
}
.panel h3 svg { width: 15px; height: 15px; color: var(--primary-strong); }

.tick { display: grid; gap: .5rem; }
@media (min-width: 620px) { .tick--2 { grid-template-columns: repeat(2, 1fr); } }
.tick li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.tick svg { width: 15px; height: 15px; margin-top: .25rem; color: var(--primary-strong); flex: none; }
.tick b { color: var(--text); font-weight: 700; }

.svc-detail__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  padding-top: .3rem;
}

/* ==========================================================================
   18 · CAPABILITY PILLARS
   ========================================================================== */
.pillars {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 640px)  { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  transition: background-color var(--t);
}
.pillar:hover { background: var(--bg); color: inherit; }
.pillar__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: .95rem;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.pillar__ico svg { width: 19px; height: 19px; }
.pillar b { font-size: var(--fs-h4); font-weight: 800; letter-spacing: -.02em; margin-bottom: .35rem; }
.pillar > span { font-size: var(--fs-sm); color: var(--text-2); }
.pillar__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary-strong);
  transition: gap var(--t-fast);
}
.pillar__more svg { width: 13px; height: 13px; }
.pillar:hover .pillar__more { gap: .7rem; }

/* ==========================================================================
   19 · ABOUT
   ========================================================================== */
.about-grid { display: grid; gap: clamp(1.75rem, 3.2vw, 2.75rem); align-items: start; }
@media (min-width: 980px) { .about-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); } }

.about-lede { font-size: var(--fs-lede); color: var(--text-2); }
.about-lede b { color: var(--text); font-weight: 700; }

.creds { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.15rem; }
.cred {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.cred svg { width: 17px; height: 17px; color: var(--primary-strong); flex: none; }
.cred > span { color: var(--text); }
.cred > span > span { display: block; color: var(--text-3); font-weight: 600; }

.facts { margin-top: var(--blk); }
.facts > div {
  display: grid;
  gap: .12rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
}
.facts > div:last-child { border-bottom: 1px solid var(--line); }

/* Full-width variant: three columns under the about grid, so neither column
   is left with a long tail of empty space. */
.facts--row {
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
}
@media (min-width: 760px) { .facts--row { grid-template-columns: repeat(3, 1fr); } }
.facts--row > div { border-top: 0; padding: 1.1rem 0; }
.facts--row > div:last-child { border-bottom: 0; }
@media (max-width: 759px) {
  .facts--row > div + div { border-top: 1px solid var(--line); }
}
@media (min-width: 760px) {
  .facts--row > div + div { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2.4vw, 2rem); }
}
.facts dt {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.facts dd { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }

/* .facts was built for the light sections. Dropped into a dark page hero
   its greys land at 1.1:1 against the background — invisible. Remap them
   there rather than duplicating the component. */
.page-hero .facts,
.page-hero .facts > div,
.page-hero .facts--row > div + div { border-color: rgba(255, 255, 255, .14); }
.page-hero .facts dt { color: rgba(255, 255, 255, .58); }
.page-hero .facts dd { color: #fff; }

.statements {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 620px) { .statements { grid-template-columns: repeat(2, 1fr); } }
.statement { background: var(--surface); padding: clamp(1.2rem, 2.2vw, 1.65rem); }
.statement > span {
  display: block;
  font-family: var(--f-serif);
  font-size: 1.65rem;
  line-height: 1;
  color: var(--primary-strong);
  margin-bottom: .55rem;
}
.statement p { font-size: var(--fs-sm); color: var(--text-2); }
.statement em { font-style: italic; color: var(--text-3); }

.tabs {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .4rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.tablist button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .95rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-2);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.tablist button:hover { color: var(--text); }
.tablist button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.tabpanel { padding: clamp(1.15rem, 2.2vw, 1.65rem); }
.tabpanel p { font-size: var(--fs-sm); color: var(--text-2); }

.creed { display: grid; gap: .5rem; }
@media (min-width: 560px) { .creed { grid-template-columns: repeat(2, 1fr); } }
.creed li { display: flex; gap: .6rem; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.creed li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: .6rem;
  flex: none;
  border-radius: 50%;
  background: var(--primary);
}

.edu { display: grid; gap: 1rem; }
.edu li { display: flex; gap: .8rem; }
.edu svg { width: 18px; height: 18px; color: var(--primary-strong); margin-top: .2rem; flex: none; }
.edu b { display: block; font-size: var(--fs-sm); margin-bottom: .1rem; }
.edu span { font-size: var(--fs-xs); color: var(--text-2); }
/* The admin's sanitiser does not keep class= on a link -- correctly, it
   is a security boundary -- so a link in here is styled by where it is
   rather than by a class somebody has to type. */
.edu a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   20 · SERVICES PAGE — category bands
   ========================================================================== */
.svc-band { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.svc-band:first-child { margin-top: 0; }

.svc-band__head {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  padding-bottom: .7rem;
  margin-bottom: .4rem;
  border-bottom: 2px solid var(--text);
}
.svc-band__head em {
  font-style: normal;
  font-family: var(--f-serif);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--primary-strong);
}
.svc-band__head h2 { font-size: var(--fs-h3); letter-spacing: -.026em; }
.svc-band__head p {
  margin: 0 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
}
@media (max-width: 620px) { .svc-band__head p { margin-left: 0; width: 100%; } }

.svc-detail { position: relative; }
.svc-detail__ghost {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.2rem);
  right: 0;
  font-family: var(--f-serif);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--line);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.svc-detail > *:not(.svc-detail__ghost) { position: relative; z-index: 1; }

.svc-outcome {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-bottom: 1.15rem;
  padding: .85rem 1.05rem;
  border-left: 3px solid var(--primary);
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm);
}
.svc-outcome svg { width: 17px; height: 17px; color: var(--primary-strong); margin-top: .18rem; flex: none; }
.svc-outcome b { color: var(--text); }

.svc-rail__group {
  margin-top: 1rem;
  padding-left: .9rem;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.svc-rail__group:first-child { margin-top: 0; }
@media (max-width: 999px) { .svc-rail__group { display: none; } }

/* ==========================================================================
   21 · SHORT LEAD FORM · INLINE LEAD BANDS  (ad landing pages)
   ========================================================================== */

/* A form card that stays light no matter how dark the band behind it is. */
.form-card--light {
  --surface: #FFFFFF;
  --bg: var(--paper-1);
  --text: #14171C;
  --text-2: #565C66;
  --text-3: #666C75;
  --line: #E5E1D8;
  --line-2: #D3CEC3;
  background: #FFFFFF;
  border-color: #E5E1D8;
  color: #14171C;
}
.form-card--gold {
  border-color: var(--primary-line);
  box-shadow: 0 26px 60px -34px rgba(10, 11, 13, .6), 0 0 0 4px rgba(237, 163, 28, .1);
}

/* ---- head of a short form ---- */
.lead-head { display: grid; gap: .25rem; margin-bottom: .95rem; }
.lead-head .tag { justify-self: start; margin-bottom: .35rem; }
.lead-head h3,
.lead-head h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -.02em;
  color: var(--text);
}
.lead-head p { font-size: var(--fs-xs); color: var(--text-2); }

/* ---- the short form itself ---- */
.lead { display: grid; gap: .7rem; }
.lead .field label { font-size: var(--fs-2xs); letter-spacing: .01em; }
.lead .field input,
.lead .field select { min-height: 44px; padding-block: .68rem; }

.lead__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* side by side at every width */
  gap: .55rem;
  margin-top: .15rem;
}
.lead__actions .btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding-inline: .9rem;
  white-space: nowrap;
}
/* Phones: shrink the pair to fit the card rather than stacking it. */
@media (max-width: 519px) {
  .lead__actions { gap: .4rem; }
  .lead__actions .btn {
    gap: .32rem;
    padding: .68rem .45rem;
    min-height: 44px;
    font-size: var(--fs-xs);
    letter-spacing: -.012em;
  }
  .lead__actions .btn svg { width: 14px; height: 14px; }
}
@media (max-width: 359px) {
  .lead__actions .btn { font-size: var(--fs-2xs); padding-inline: .3rem; }
  .lead__actions .btn svg { width: 13px; height: 13px; }
}

.lead__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .7rem;
  margin-top: .75rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-3);
}
.lead__trust span { display: inline-flex; align-items: center; gap: .3rem; }
.lead__trust svg { width: 13px; height: 13px; color: var(--wa); flex: none; }

/* ---- inline lead band (repeatable mid-page capture) ---- */
.leadband {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  color: #fff;
  padding-block: clamp(2.1rem, 3.4vw, 2.9rem);
}
.leadband::before {
  content: "";
  position: absolute;
  inset: -55% -15% auto 42%;
  height: 190%;
  background: radial-gradient(closest-side, rgba(237, 163, 28, .22), transparent);
  pointer-events: none;
}
.leadband__inner {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 2.8vw, 2.75rem);
  align-items: start;
}
@media (min-width: 940px) {
  .leadband__inner { align-items: stretch; }
  .leadband__inner > :first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: .35rem;
  }
  .leadband__inner > :first-child > .leadband__alt { margin-bottom: .2rem; }
}
@media (min-width: 940px) {
  .leadband__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
}
.leadband h2 {
  font-size: clamp(1.6rem, 3.1vw, 2.35rem);
  letter-spacing: -.032em;
  margin-bottom: .75rem;
}
.leadband > * { position: relative; }
.leadband p { color: rgba(255, 255, 255, .72); max-width: 50ch; font-size: var(--fs-sm); }
.leadband .eyebrow { color: rgba(255, 255, 255, .5); }

.leadband__points {
  display: grid;
  gap: .5rem;
  margin-top: 1.15rem;
}
.leadband__points li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .8);
}
.leadband__points svg { width: 17px; height: 17px; color: var(--gold-400); margin-top: .16rem; flex: none; }

.leadband__alt {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.35rem;
}

/* ---- hero trust chips ---- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.35rem;
}
/* The dark-band chip. This used to be an unscoped `.chip` rule, which
   overrode the light default site-wide and made every chip on a light
   section white-on-white -- invisible, and only noticed once chips were
   used outside a dark hero. Scoped to the dark contexts it was written
   for. Do not un-scope it. */
.page-hero .chip,
.leadband .chip,
.cta-band .chip,
.on-ink .chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .82);
}
.page-hero .chip svg,
.leadband .chip svg,
.cta-band .chip svg,
.on-ink .chip svg { width: 14px; height: 14px; color: var(--gold-400); flex: none; }


/* A form card inside a dark band must win over that band's typography. */
.leadband .form-card,
.cta-band .form-card,
.page-hero .form-card { color: var(--text); }
.leadband .form-card p,
.cta-band .form-card p,
.page-hero .form-card p { color: var(--text-2); }
.leadband .form-card .lead-head :is(h2, h3),
.cta-band .form-card .lead-head :is(h2, h3),
.page-hero .form-card .lead-head :is(h2, h3) { color: var(--text); }
.leadband .form-card .field label,
.cta-band .form-card .field label,
.page-hero .form-card .field label { color: var(--text); }
.leadband .form-card .lead__trust,
.cta-band .form-card .lead__trust,
.page-hero .form-card .lead__trust { color: var(--text-3); }
.leadband .form-card .form-note,
.cta-band .form-card .form-note,
.page-hero .form-card .form-note { color: var(--text-3); }
.leadband .form-card .err,
.cta-band .form-card .err,
.page-hero .form-card .err { color: #C62B2B; }

/* ---- landing-page hero: form sits right under the headline on mobile ---- */
.lp-hero { align-items: start; gap: clamp(1.75rem, 3.6vw, 2.75rem); }
.lp-hero__proof { min-width: 0; }
.lp-hero > .form-card,
.leadband, .cta-band { scroll-margin-top: calc(var(--header-h) + 1rem); }
@media (min-width: 980px) {
  .lp-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 440px); grid-template-rows: max-content 1fr; align-items: stretch; }
  .lp-hero__copy  { grid-column: 1; grid-row: 1; }
  .lp-hero__proof { grid-column: 1; grid-row: 2; }
  .lp-hero > .form-card { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .lp-hero__proof { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(1.1rem, 2vw, 1.6rem); }
}

/* ---- sticky in-page CTA strip (mobile, ad traffic) ---- */
.leadjump {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem var(--gutter);
  /* At scroll 0 this bar lands beside the floating dock; keep its
     buttons clear of the WhatsApp circle in every scroll position. */
  padding-right: calc(var(--gutter) + 3.5rem);
  background: rgba(10, 11, 13, .95);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: saturate(140%) blur(8px);
}
.leadjump b { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .01em; }
.leadjump .btn { padding: .5rem .9rem; font-size: var(--fs-2xs); min-height: 0; }
@media (min-width: 700px) { .leadjump { display: flex; } }
/* The bar exists to get you to the enquiry form. Once the form is on screen
   it is not just redundant, it is sitting on top of it -- it was covering
   the top of the closing CTA card and cutting the trust line in half.
   Opacity and visibility rather than display, because the bar is sticky and
   removing its box would shift the page it is stuck to. */
.leadjump { transition: opacity var(--t), visibility var(--t); }
.leadjump.is-tucked { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .leadjump { transition: none; } }

/* ==========================================================================
   22 · MEGA MENU · CASE STUDIES · PROSE PAGES
   ========================================================================== */

/* ---- mega menu ---------------------------------------------------------- */
.nav__item--mega { position: static; }

.megamenu {
  position: absolute;
  left: 50%;
  top: calc(100% + .5rem);
  transform: translate(-50%, 8px);
  width: min(1080px, calc(100vw - 2.5rem));
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 230px);
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: 60;
}
.nav__item--mega:hover .megamenu,
.nav__item--mega:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.megamenu__col { padding-inline: .5rem; min-width: 0; }
.megamenu__col + .megamenu__col { border-left: 1px solid var(--line); }
.megamenu__title {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
  padding: 0 .55rem .55rem;
}
.megamenu__col a {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .5rem .55rem;
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast);
}
.megamenu__col a:hover { background: var(--paper-2); }
.megamenu__col a svg { width: 17px; height: 17px; color: var(--primary-strong); margin-top: .12rem; flex: none; }
.megamenu__col a > span { display: grid; gap: .06rem; min-width: 0; }
.megamenu__col a b { font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
.megamenu__col a > span > span { font-size: var(--fs-2xs); color: var(--text-3); line-height: 1.4; }

.megamenu__aside {
  margin-left: .5rem;
  padding: 1.05rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--ink-950);
  color: #fff;
  display: grid;
  align-content: start;
  gap: .6rem;
}
/* A headline reads as a headline. The gold rule above it is the only
   decoration the card needs and it ties back to the brand accent. */
.megamenu__asidehead {
  position: relative;
  margin: 0;
  padding-top: .85rem;
  font-size: .97rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: #fff;
  text-transform: none;
}
.megamenu__asidehead::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 26px; height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
}
.megamenu__aside p { font-size: var(--fs-2xs); color: rgba(255, 255, 255, .7); line-height: 1.55; margin: 0; }

@media (max-width: 1239px) { .megamenu { display: none; } }

/* ---- drawer service groups ---------------------------------------------- */
.drawer__cat {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: .85rem 0 .3rem;
}
.drawer__cat:first-child { margin-top: .2rem; }

/* ---- footer contact list ------------------------------------------------ */
.footer-contact { display: grid; gap: .6rem; }
.footer-contact li { display: block; }
.footer-contact a, .footer-contact span {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, .68);
}
.footer-contact a:hover { color: #fff; }
@media (max-width: 899px) {
  .footer-contact a, .footer-contact span { min-height: 40px; align-items: center; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 36px; }
  .svc-rail a { padding-block: .7rem; }
  .brand { min-height: 44px; }
  .cs-panel li > a { display: flex; align-items: center; min-height: 40px; }
  .socials a { width: 40px; height: 40px; }
}
/* The drawer is touch-only: the link, not just its row, must be tappable. */
.drawer__foot .contact-line a { display: flex; align-items: center; min-height: 44px; }
.footer-contact svg { width: 15px; height: 15px; color: var(--gold-400); margin-top: .16rem; flex: none; }

/* ---- case study cards (index) ------------------------------------------- */
.cs-grid { display: grid; gap: clamp(1rem, 1.8vw, 1.4rem); }
@media (min-width: 760px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cs-card {
  --cs-pad: clamp(1.3rem, 2.4vw, 1.9rem);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: var(--cs-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cs-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% 55%;
  height: 150px;
  background: radial-gradient(closest-side, var(--primary-soft), transparent);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.cs-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--primary-line); }
.cs-card:hover::after { opacity: 1; }
.cs-card > * { position: relative; }

/* The whole card is one click target. For that, .cs-card__link::after has to
   stretch over the CARD, which means the card must be the nearest positioned
   ancestor -- so the h3 in between is deliberately left unpositioned. The
   hover glow then drops to z-index -1, and `isolation` keeps it inside the
   card so it sits above the background but under every bit of content. */
.cs-card { isolation: isolate; }
.cs-card::after { z-index: -1; }
.cs-card > h3 { position: static; }


/* Optional campaign screenshot at the top of a card. It bleeds to the card
   edges, so it needs to cancel the card padding. Cards without one are
   unchanged — the strip simply is not printed. */
.cs-card__media {
  position: relative;
  margin: calc(var(--cs-pad) * -1) calc(var(--cs-pad) * -1) .25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
}
.cs-card__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Letterboxed and anchored top-left: on a dashboard or a search result,
     the part worth seeing is always the top left. */
  aspect-ratio: 16 / 6;
  object-fit: cover;
  object-position: top left;
}
.cs-card__flag {
  position: absolute;
  top: .5rem;
  right: .5rem;
  padding: .22rem .5rem;
  border-radius: var(--r-xs);
  background: var(--ink-900);
  color: var(--gold-400);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cs-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cs-card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary-strong);
  flex: none;
}
.cs-card__ico svg { width: 20px; height: 20px; }
.cs-card__sector {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: right;
}
.cs-card h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.022em; }
.cs-card__place { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-3); }
.cs-card__place svg { width: 13px; height: 13px; color: var(--primary-strong); flex: none; }
.cs-card__site {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--gold-ink);
  letter-spacing: .005em;
}
.cs-card__site svg { width: 13px; height: 13px; flex: none; }
.cs-card p { font-size: var(--fs-sm); color: var(--text-2); }
.cs-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .3rem; }
.cs-card__tags span {
  padding: .26rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-2);
}
.cs-card .link-arrow { margin-top: .2rem; }
/* z-index lifts the hit area above the card's other children, which are
   all position:relative and would otherwise paint over it. Nothing else
   inside the card is interactive, so nothing is blocked. */
.cs-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Homepage: the six client builds, below the two written-out engagements. */
.cs-more { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cs-more__head {
  display: grid;
  gap: .6rem;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  margin-bottom: clamp(1.5rem, 2.6vw, 2.1rem);
}
@media (min-width: 880px) {
  .cs-more__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: end; }
}
.cs-more__title { font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: -.026em; }
.cs-more__head p { font-size: var(--fs-sm); color: var(--text-2); max-width: 56ch; margin: 0; }
/* Client work strip: lighter than a case-study card, because these link
   out to the live site rather than to a write-up. */
.clients {
  display: grid;
  gap: clamp(.8rem, 1.5vw, 1.15rem);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.client {
  display: grid;
  gap: .3rem;
  align-content: start;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.client:hover {
  border-color: var(--primary-line);
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.client__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: .55rem;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--gold-ink);
}
.client__ico svg { width: 18px; height: 18px; }
.client__sector {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.client__name { font-size: var(--fs-h4); letter-spacing: -.02em; }
.client__site { margin: .15rem 0 0; font-size: var(--fs-2xs); font-weight: 700; }
.client__site a { display: inline-flex; align-items: center; gap: .35rem; color: var(--gold-ink); }
.client__site a:hover { text-decoration: underline; text-underline-offset: 3px; }
.client__svc { margin: .35rem 0 0; font-size: var(--fs-2xs); color: var(--text-2); }

.cs-more__sub { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.cs-more__sub .eyebrow { display: block; margin-bottom: .9rem; }

.cs-more__foot {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.1rem);
}

/* ---- case study detail -------------------------------------------------- */
.cs-facts {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 1.6rem;
}
@media (min-width: 620px) { .cs-facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .cs-facts { grid-template-columns: repeat(4, 1fr); } }
.cs-facts > div { padding: .95rem 1.1rem; background: var(--ink-950); }
.cs-facts dt {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: .28rem;
}
.cs-facts dd { font-size: var(--fs-sm); font-weight: 700; color: #fff; }
.cs-facts dd a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; }

.cs-body { display: grid; gap: clamp(1.75rem, 3.2vw, 2.75rem); }
@media (min-width: 1000px) { .cs-body { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); } }

.cs-chapter { display: grid; gap: .7rem; padding-top: clamp(1.5rem, 2.6vw, 2.1rem); }
.cs-chapter + .cs-chapter { border-top: 1px solid var(--line); }
.cs-chapter:first-child { padding-top: 0; }
.cs-chapter__no {
  font-family: var(--f-serif);
  font-size: 2.1rem;
  font-style: italic;
  line-height: 1;
  color: var(--primary-strong);
}
.cs-chapter h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.026em; }
.cs-chapter p { color: var(--text-2); max-width: 68ch; }
.cs-chapter p + p { margin-top: .7rem; }
.cs-chapter ul { display: grid; gap: .5rem; margin-top: .35rem; }
.cs-chapter li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-2);
  max-width: 68ch;
}
.cs-chapter li svg { width: 16px; height: 16px; color: var(--primary-strong); margin-top: .2rem; flex: none; }
.cs-chapter li b { color: var(--text); font-weight: 700; }

.cs-aside { align-self: start; display: grid; gap: 1rem; }
@media (min-width: 1000px) { .cs-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.cs-panel {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.cs-panel h3 {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .7rem;
}
.cs-panel ul { display: grid; gap: .45rem; }
.cs-panel li a {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
}
.cs-panel li a:hover { color: var(--primary-strong); }
.cs-panel li svg { width: 14px; height: 14px; color: var(--primary-strong); flex: none; }

.cs-next {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.cs-next b { display: block; font-size: var(--fs-h3); letter-spacing: -.02em; }
.cs-next span { font-size: var(--fs-xs); color: var(--text-3); }

/* ---- long-form prose (legal pages) -------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  letter-spacing: -.022em;
  margin: 2rem 0 .6rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h3); margin: 1.4rem 0 .45rem; }
.prose p, .prose li { color: var(--text-2); }
.prose p + p { margin-top: .8rem; }
.prose ul, .prose ol { display: grid; gap: .45rem; margin: .7rem 0 0 1.1rem; }
.prose li { list-style: disc; font-size: var(--fs-sm); }
.prose ol li { list-style: decimal; }
.prose a { color: var(--primary-strong); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: 700; }
.prose h4 { font-size: var(--fs-sm); font-weight: 700; margin: 1.1rem 0 .35rem; }
/* A list inside a list. Same gap, indented once, and the marker changes
   so the two levels are told apart without a second colour. */
.prose li > ul, .prose li > ol { margin: .45rem 0 0 1.1rem; }
.prose li li { list-style: circle; }
.prose ol li li { list-style: lower-alpha; }
.prose blockquote {
  margin: 1rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--primary);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.prose hr {
  height: 1px; border: 0; background: var(--line);
  margin: 1.6rem 0;
}
.prose figure { margin: 1.2rem 0 0; }
.prose figure img {
  /* max-width, not width. The width and height attributes carry the
     file's real size; stretching a 480px portrait across a 74ch column
     would blow it up to twice its resolution. */
  display: block; max-width: 100%; height: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.prose figcaption {
  margin-top: .5rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.prose__updated {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  margin-bottom: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-3);
}
.prose__updated svg { width: 13px; height: 13px; color: var(--primary-strong); }

/* ---- shared service-page furniture -------------------------------------- */
.svc-hero__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }

.split { display: grid; gap: clamp(1.5rem, 2.8vw, 2.5rem); }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stack-cards { display: grid; gap: .75rem; }
.stack-card {
  display: grid;
  gap: .4rem;
  padding: clamp(1rem, 1.9vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.stack-card__head { display: flex; align-items: center; gap: .65rem; }
.stack-card__head svg { width: 18px; height: 18px; color: var(--primary-strong); flex: none; }
.stack-card b { font-size: var(--fs-base); letter-spacing: -.012em; }
.stack-card p { font-size: var(--fs-sm); color: var(--text-2); }

.kv { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.kv > div { display: grid; gap: .25rem; padding: .9rem 1.1rem; background: var(--surface); }
@media (min-width: 700px) { .kv > div { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 1rem; align-items: baseline; } }
.kv dt { font-size: var(--fs-xs); font-weight: 800; color: var(--text); }
.kv dd { font-size: var(--fs-sm); color: var(--text-2); }

/* ==========================================================================
   23. ANSWER BLOCK + DATA TABLE                          (2026 IA rebuild)
   ========================================================================== */

/* ---- .answer -------------------------------------------------------------
   The short, extractable answer that sits under every H1. It exists for two
   readers at once: a visitor who wants the point before committing to the
   page, and an answer engine deciding what to quote. It is referenced by
   the speakable cssSelector in the page's JSON-LD, so its class name is
   load-bearing -- renaming it silently breaks the structured data.
   ------------------------------------------------------------------------- */
.answer {
  margin: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  padding: clamp(.95rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.4rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
  max-width: 62ch;
}
.answer__label {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .4rem;
  font-size: var(--fs-2xs); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-ink);
}
.answer__label svg { width: 14px; height: 14px; flex: none; }
.answer > p:last-child {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}
/* On the dark bands the same block has to invert. */
.on-ink .answer, .cta-band .answer, .leadband .answer {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  border-left-color: var(--gold-400);
  box-shadow: none;
}
.on-ink .answer__label, .cta-band .answer__label, .leadband .answer__label { color: var(--gold-400); }
.on-ink .answer > p, .cta-band .answer > p, .leadband .answer > p { color: rgba(255, 255, 255, .78); }

/* ---- .dtable -------------------------------------------------------------
   Two-column comparison tables. Scrolls inside its own wrapper so the page
   itself never moves sideways on a phone -- the row header keeps its width
   so the comparison stays readable while it scrolls.
   ------------------------------------------------------------------------- */
.dtable-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.dtable {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.dtable thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  text-align: left;
  font-size: var(--fs-2xs); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text);
  padding: .7rem 1.05rem;
  border-bottom: 1px solid var(--line-2);
}
.dtable tbody th,
.dtable tbody td {
  padding: .85rem 1.05rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.dtable tbody th {
  text-align: left; font-weight: 800; color: var(--text);
  width: 30%; min-width: 150px;
}
.dtable tbody td { color: var(--text-2); line-height: 1.6; }
.dtable tbody tr:nth-child(even) th,
.dtable tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }

/* ---- misc ---------------------------------------------------------------- */
.lp-hero__copy > .chips { margin-top: clamp(1rem, 2vw, 1.35rem); }
.svc h3 > .link-u { color: inherit; }
.faq-aside .cs-panel p.small { color: var(--text-2); margin: 0 0 .9rem; }

/* ==========================================================================
   24. NAVIGATION FOR THE 2026 IA
   Eleven top-level menus, six of them mega. The panel width now follows
   the number of groups in the silo instead of being fixed at four.
   ========================================================================== */

@media (min-width: 1240px) {
  /* Eleven items need to be tighter than five did. */
  .nav { gap: 0; }
  .nav > a, .nav__trigger { padding: .5rem .48rem; font-size: .82rem; }
  .nav > a::after, .nav__trigger::after { left: .48rem; right: .48rem; }
}

/* ---- mega menu: width follows the silo ---------------------------------- */
/* The promo card is a fixed 250px in every panel. It was 210-230px, which
   is narrower than its own button label, and a card whose width changes
   with the silo beside it reads as an accident. The link columns give up
   about ten pixels each to pay for it. */
.megamenu--c2 { width: min(760px,  calc(100vw - 2.5rem)); grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 250px); }
.megamenu--c3 { width: min(940px,  calc(100vw - 2.5rem)); grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 250px); }
.megamenu--c4 { width: min(1120px, calc(100vw - 2.5rem)); grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 250px); }
.megamenu--c5 { width: min(1330px, calc(100vw - 2.5rem)); grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 250px); }

/* Menus at the right-hand end of the bar open right-aligned, so a wide
   panel cannot hang off the edge of the window. */
.nav__item--right .megamenu,
.nav__item--right .dropmenu { left: auto; right: var(--gutter); transform: translate(0, 8px); }
.nav__item--right:hover .megamenu,
.nav__item--right:focus-within .megamenu,
.nav__item--right:hover .dropmenu,
.nav__item--right:focus-within .dropmenu { transform: translate(0, 0); }

/* The counted overflow link at the foot of a long column. */
.megamenu__more {
  margin-top: .3rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--gold-ink);
}
.megamenu__more svg { width: 12px; height: 12px; color: currentColor; }

/* ---- plain dropdown (About, Portfolio, Insights) ------------------------ */
.nav__item--drop { position: relative; }
.dropmenu {
  position: absolute;
  left: 0;
  top: calc(100% + .5rem);
  transform: translate(0, 8px);
  width: min(320px, calc(100vw - 2.5rem));
  display: grid;
  gap: .05rem;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: 60;
}
.dropmenu--two { width: min(560px, calc(100vw - 2.5rem)); grid-template-columns: 1fr 1fr; }
.nav__item--drop:hover .dropmenu,
.nav__item--drop:focus-within .dropmenu { opacity: 1; visibility: visible; transform: translate(0, 0); }
.dropmenu a {
  display: block;
  padding: .5rem .6rem;
  border-radius: var(--r-sm);
}
.dropmenu a:hover { background: var(--paper-2); }
.dropmenu a > span { display: grid; gap: .06rem; min-width: 0; }
.dropmenu a b { font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
.dropmenu a > span > span { font-size: var(--fs-2xs); color: var(--text-3); line-height: 1.4; }
@media (max-width: 1239px) { .dropmenu { display: none; } }

/* ---- drawer: sections are disclosures, not one long list ---------------- */
.drawer__acc { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.drawer__accbtn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 0;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.drawer__accbtn i {
  font-style: normal;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--gold-400);
  flex: none;
  min-width: 1.5rem;
}
.drawer__accbtn > span { flex: 1 1 auto; min-width: 0; }
.drawer__accbtn > svg {
  width: 14px; height: 14px; flex: none;
  color: rgba(255, 255, 255, .55);
  transition: transform var(--t-fast);
}
.drawer__accbtn[aria-expanded="true"] > svg { transform: rotate(180deg); }
.drawer__accbtn:hover { color: var(--gold-400); }
.drawer__all {
  font-weight: 700;
  color: var(--gold-400) !important;
  margin-bottom: .25rem;
}
.drawer__all::before { content: none !important; }
.drawer__all svg { width: 12px; height: 12px; }

/* ==========================================================================
   25. PORTFOLIO & INSIGHTS FILTER CHIPS
   ========================================================================== */

.chip-set { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip--link {
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip--link:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--text); }
.chip--link.is-active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.chip--link.is-active .muted { color: rgba(255, 255, 255, .6); }
.chip--link .muted { font-variant-numeric: tabular-nums; }

/* The article and project cards carry a small category line above the title. */
.svc .eyebrow--plain { margin: 0 0 .35rem; font-size: var(--fs-2xs); color: var(--text-3); }
.svc .chips { gap: .35rem; }
.svc .chips .chip { font-size: var(--fs-2xs); padding: .22rem .5rem; }
.section--tight { padding-block: clamp(1.1rem, 2vw, 1.6rem); }

/* ---- the 1240-1439px band ------------------------------------------------
   The desktop nav appears at 1240px, but eleven top-level items plus the
   brand and the action cluster need about 1395px. Between those two widths
   the header overflowed the viewport on every page -- invisible on a 1440px
   monitor, and a sideways scroll on any ordinary laptop.

   Rather than push the whole nav into the drawer for laptop users, the two
   icon buttons are dropped in this band only (both actions remain in the
   floating dock and the footer) and the nav is tightened slightly. That
   recovers about 135px, which is enough.
   ------------------------------------------------------------------------- */
@media (min-width: 1240px) and (max-width: 1439px) {
  .masthead__actions .iconbtn { display: none; }
  .nav > a, .nav__trigger { padding: .5rem .36rem; font-size: .8rem; }
  .nav > a::after, .nav__trigger::after { left: .36rem; right: .36rem; }
  .masthead__inner { gap: .75rem; }
}

/* ==========================================================================
   26. HEADER & FOOTER — 2026 REDESIGN
   Three things were wrong, all of them visible in a screenshot:

     1. The About menu opened at x = -205. It is the second item in the bar,
        but it was being right-aligned because it has nine links, and a
        560px panel anchored to the right edge of a trigger 346px from the
        window edge hangs off the screen. Five of its nine links could not
        be clicked. Alignment now follows POSITION in the bar, not size.
     2. The footer put eight children into a five-track grid, so the second
        row held three columns and two empty cells. It is now a 4 x 2 grid
        with every cell filled, and all six silos are represented — Creative
        and Industries previously had no footer column at all.
     3. The closing call to action and the footer were both #0A0B0D with
        nothing between them, so the page ended in one undifferentiated
        slab of black. The CTA is now an inset card on the page background,
        which puts real daylight between the two.
   ========================================================================== */

/* ---- 26.1 · header: reclaim the space eleven items need ----------------- */
@media (min-width: 1240px) and (max-width: 1439px) {
  /* The strapline costs ~110px and repeats what the logotype already says.
     Dropping it in this band is what lets the nav items keep their padding
     instead of being squeezed to .36rem. */
  .brand__role { display: none; }
  .nav > a, .nav__trigger { padding: .5rem .5rem; font-size: .82rem; }
  .nav > a::after, .nav__trigger::after { left: .5rem; right: .5rem; }
}

@media (min-width: 1240px) {
  /* Hover gets a quiet pill; the gold rule is reserved for the section you
     are actually in, so the current section stays readable at a glance. */
  .nav > a, .nav__trigger {
    border-radius: var(--r-pill);
    transition: color var(--t-fast), background-color var(--t-fast);
  }
  .nav > a:hover,
  .nav__item:hover .nav__trigger,
  .nav__item:focus-within .nav__trigger { background: rgba(20, 23, 28, .05); }

  .nav > a::after, .nav__trigger::after {
    bottom: .3rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-500);
  }
  /* Hovering should not pretend to be the active state. */
  .nav > a:hover::after,
  .nav__item:hover .nav__trigger::after,
  .nav__item:focus-within .nav__trigger::after { transform: scaleX(0); }
  .nav > a.is-active::after, .nav__trigger.is-active::after { transform: scaleX(1); }
}

.masthead__actions { gap: .45rem; }

/* ---- 26.2 · panels never leave the window ------------------------------ */
/* A mega menu's parent is position:static, so `right: var(--gutter)` there
   resolves against the masthead — the window edge, which is what we want.
   A drop menu's parent is position:relative, so the same value resolves
   against a 65px-wide trigger and throws the panel off the screen. Anchor
   it to the trigger's own right edge instead. */
.nav__item--right .dropmenu { left: auto; right: 0; }

/* ---- 26.3 · mega menu: calmer, shorter --------------------------------- */
.megamenu { padding: 1.5rem 1.35rem 1.4rem; }
/* Full-height rules between six columns made the panel read as a
   spreadsheet. One short rule under each title lines up across the panel
   and separates the columns without drawing six vertical lines. */
.megamenu__col + .megamenu__col { border-left: 0; }
.megamenu__col { padding-inline: .4rem; }
.megamenu__title {
  padding: 0 .55rem .5rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.megamenu__col a { padding: .48rem .55rem; }
.megamenu__more { padding: .45rem .55rem; margin-top: .15rem; }

/* The card is a grid item, so it is as tall as the tallest link column
   next to it — five or six rows. The copy is three lines. Laying it out as
   a column with the actions pushed to the foot uses that height instead of
   leaving a large empty rectangle under the button, which is what made the
   panel look unfinished. */
.megamenu__aside {
  margin-left: .85rem;
  padding: 1.3rem 1.25rem;
  border-radius: var(--r-md);
  background:
    radial-gradient(closest-side at 78% 0%, rgba(237, 163, 28, .22), transparent),
    var(--ink-950);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-content: initial;
}
.megamenu__aside__top { display: grid; gap: .6rem; justify-items: stretch; }
.megamenu__aside__top .btn { margin-top: .45rem; }
.megamenu__aside__foot { margin-top: auto; }

/* Full width, one line. The label is the SHORT one from nav-data.php, and
   the card is now wide enough to hold it -- a pill wrapped onto two lines
   stops looking like a button and starts looking like a mistake. */
.megamenu__aside .btn {
  width: 100%;
  justify-content: center;
  gap: .45rem;
  padding: .72rem 1rem;
  min-height: 0;
  font-size: .78rem;
  line-height: 1.25;
  white-space: nowrap;
}
.megamenu__aside .btn svg { width: 14px; height: 14px; flex: none; }

/* .link-arrow's underline runs the full width of whatever holds it, so in
   a narrow card it read as a stray rule under a wrapped line. A rule ABOVE
   the link is a divider, which is what it was trying to be. */
.megamenu__asidelink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .9rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--gold-400);
  transition: color var(--t-fast);
}
.megamenu__asidelink svg { width: 13px; height: 13px; flex: none; }
.megamenu__asidelink:hover { color: #fff; }

/* ---- 26.4 · drop menu -------------------------------------------------- */
.dropmenu { padding: .6rem; border-radius: var(--r-md); }
.dropmenu a { padding: .52rem .65rem; }
/* A two-column GRID fills across — item 1 left, item 2 right, item 3 left —
   so a nine-item menu reads 1,2 / 3,4 / 5,6 instead of top to bottom. CSS
   columns fill down the first column and then the second, which is the
   order a reader expects from a list, and they balance the halves without
   PHP having to count the rows. */
.dropmenu--two { display: block; columns: 2; column-gap: .3rem; }
.dropmenu--two a { break-inside: avoid; }

/* ==========================================================================
   26.5 · CLOSING CALL TO ACTION — an inset card, not a second footer
   ========================================================================== */
/* Every .cta-band on the site is a CLOSING call to action — the mid-page
   one is .leadband — so this applies to all of them, including the home
   page's "Free consultation · No obligation" block, which is the one that
   sat flush against the footer in the same #0A0B0D with no seam. */
.cta-band {
  background: transparent;
  color: var(--text);
  overflow: visible;
}
/* The glow was an absolutely-positioned pseudo clipped by the section. The
   dark surface has moved inside, so the glow moves with it as a background
   layer — no pseudo to escape the rounded corners. */
.cta-band::before { content: none; }
.cta-band.section { padding-block: clamp(2.4rem, 4.4vw, 4.25rem); }

.cta-band > .shell {
  position: relative;
  overflow: hidden;
  /* .shell's own padding-inline has become the card's INNER padding, so
     the outer gutter has to be re-created as width. Without this the card
     runs edge to edge on a phone and stops reading as a card at all. */
  width: calc(100% - 2 * var(--gutter));
  color: #fff;
  border-radius: clamp(18px, 2.2vw, 32px);
  /* The inline padding is the gutter, so text inside the card starts on
     exactly the same line as the footer's text and every other section on
     the page. A hand-picked value put it 10px adrift, which reads as three
     different left edges stacked down the page. The max() keeps the card
     from feeling cramped on a phone, where the gutter is only ~17px. */
  padding: clamp(1.8rem, 3.4vw, 3.1rem) max(var(--gutter), 1.35rem);
  background:
    radial-gradient(closest-side at 64% -20%, rgba(237, 163, 28, .22), transparent),
    var(--ink-950);
  box-shadow: var(--sh-4);
}

/* ==========================================================================
   26.6 · FOOTER
   ========================================================================== */
.site-footer { padding-top: 0; }

.footer-lead {
  display: grid;
  gap: clamp(1.9rem, 3.4vw, 2.4rem);
  padding-block: clamp(2.2rem, 3.8vw, 3rem) clamp(1.8rem, 2.8vw, 2.2rem);
}
/* 1.4fr against 1fr gave the brand a 665px column holding 46ch of text, so
   roughly 200px of it was always empty and the two columns looked like they
   had drifted apart. Near-equal tracks and a smaller gap close that up. */
@media (min-width: 900px) {
  .footer-lead {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}
/* The two columns will never be the same height -- the brand block is
   205px and the contact block 257px. Rather than leave 52px of nothing
   under the socials, stretch the column and drop the socials to the
   bottom, so they finish on the same line as the button opposite. An
   alignment reads as intent; a gap reads as a mistake. */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer-brand p { max-width: 44ch; }
@media (min-width: 900px) {
  .footer-lead { align-items: stretch; }
  .footer-brand .socials { margin-top: auto; padding-top: 1.4rem; }
}
/* Pushed to the foot so it finishes on the same line as the socials in the
   column opposite, whichever of the two happens to be taller. */
.footer-reach .btn { margin-top: auto; }
@media (max-width: 899px) { .footer-reach .btn { margin-top: .6rem; } }

.footer-reach { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.footer-reach .footer-col__title { margin-bottom: 0; }

/* Two across, not five down. As a single column this was five short lines
   of text in a 570px-wide box, which left most of the box empty and made
   the whole footer read as taller than it needed to be. The address is two
   lines and far wider than the rest, so it takes the full row. */
.footer-contact { display: grid; gap: 0 clamp(1rem, 2.5vw, 2.25rem); width: 100%; }
/* Column flow, not row flow. Filling across put phone and email side by
   side and then left a hole where the two-line address could not fit; going
   DOWN each column gives phone / email / WhatsApp on the left and the
   address / hours on the right, which is also the order you would read
   them in. */
/* CSS columns, not a grid. A two-column grid shares row heights between
   the columns, so the two-line address stretched row 1 and left a 46px gap
   under the phone number while the rows beneath it sat 29px apart. Columns
   flow independently, so the spacing inside each stays even, and they
   balance the five items without being told where to break. */
@media (min-width: 560px) {
  .footer-contact {
    display: block;
    columns: 2;
    column-gap: clamp(1rem, 2.5vw, 2.25rem);
  }
  .footer-contact li { break-inside: avoid; }
}
.footer-contact li { display: block; min-width: 0; }
/* .28rem, not .42rem. Five single-line rows at 43px apart read as a list
   someone forgot to finish styling rather than a deliberate rhythm. */
.footer-contact a,
.footer-contact__static {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .28rem 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: .22rem; color: var(--gold-400); }
.footer-contact a:hover { color: var(--gold-400); }
@media (max-width: 899px) {
  .footer-contact a, .footer-contact__static { padding-block: .55rem; }
}

/* Eight columns, four tracks: two full rows and no orphan. */
.footer-grid {
  display: grid;
  gap: clamp(1.6rem, 2.6vw, 2.1rem) clamp(1.2rem, 2.2vw, 2rem);
  padding-block: clamp(1.9rem, 3.2vw, 2.7rem);
  border-top: 1px solid rgba(255, 255, 255, .09);
}
/* Two then four. Never three: eight columns in three tracks is 3 + 3 + 2,
   which re-creates the ragged last row this grid exists to fix. */
@media (min-width: 420px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.footer-col__all {
  color: var(--gold-400);
  font-weight: 700;
  gap: .35rem;
}
.footer-col__all svg { width: 12px; height: 12px; flex: none; }
.footer-col__all:hover { color: #fff; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .09); }

/* ==========================================================================
   27. PHOTO BLOCK
   The 'photo' block reuses .shots / .shot from the case-study galleries.
   Only the portrait case needs anything new: a 4:5 photograph at the 620px
   single-shot width is 775px tall, which pushes everything after it off the
   screen.
   ========================================================================== */
.shots--portrait { max-width: 400px; }
.shots--portrait .shot img { border-bottom: 0; }
.shots--portrait .shot figcaption { border-top: 1px solid var(--line); }

/* An FAQ answer is now edited in a box that can produce a list or a
   sub-heading, and .faq__a is a <div>, so both are valid there. */
.faq__a ul, .faq__a ol { display: grid; gap: .4rem; margin: .6rem 0 0 1.1rem; }
.faq__a li { list-style: disc; }
.faq__a ol li { list-style: decimal; }
.faq__a li li { list-style: circle; }
.faq__a ol li li { list-style: lower-alpha; }
.faq__a li > ul, .faq__a li > ol { margin: .4rem 0 0 1.1rem; }
.faq__a h3, .faq__a h4 { font-size: var(--fs-sm); font-weight: 700; margin: .9rem 0 .3rem; }
.faq__a p + p { margin-top: .7rem; }
.faq__a blockquote {
  margin: .7rem 0 0; padding-left: 1rem;
  border-left: 2px solid var(--primary);
  color: var(--text-2);
}

/* A table written in the editor. The site's own comparison block has its
   own responsive markup; this is for a table typed into a Text section
   or an FAQ answer, where the only mobile strategy that survives is to
   let it scroll rather than squash. */
.prose table, .faq__a table {
  width: 100%;
  margin: 1.1rem 0 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  display: block;
  overflow-x: auto;
}
.prose table th, .prose table td,
.faq__a table th, .faq__a table td {
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prose table th, .faq__a table th { background: var(--paper-2, #F4F1EA); font-weight: 700; }
.prose pre, .faq__a pre {
  margin: 1rem 0 0; padding: .8rem .9rem;
  background: var(--paper-2, #F4F1EA);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  white-space: pre-wrap;
}
.prose h5, .prose h6 { font-size: var(--fs-sm); font-weight: 700; margin: 1rem 0 .3rem; }