/* ==========================================================================
   Self-hosted webfonts — served from our own origin so that no visitor IP
   ever reaches a third-party font CDN.

   Licences (full text in /fonts/):
     Clash Display, Supreme — Indian Type Foundry, Fontshare Free Licence
                              (LICENSE-Fontshare-FFL.txt)
     Fragment Mono          — SIL Open Font Licence 1.1
                              (LICENSE-FragmentMono-OFL.txt)

   DO NOT subset, re-compress, rename or format-convert these .woff2 files.
   The Fontshare Free Licence forbids modification of the font software; the
   files must stay byte-for-byte as supplied. Cache-bust via the ?v= query
   string only (see site/_headers).
   ========================================================================== */

@font-face{
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ClashDisplay-Medium.woff2?v=1') format('woff2');
}
@font-face{
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ClashDisplay-Semibold.woff2?v=1') format('woff2');
}
@font-face{
  font-family: 'Supreme';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Supreme-Regular.woff2?v=1') format('woff2');
}
@font-face{
  font-family: 'Supreme';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Supreme-Medium.woff2?v=1') format('woff2');
}
@font-face{
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/FragmentMono-Regular-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/FragmentMono-Regular-latin-ext.woff2?v=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   The Trusted Media Alliance — "The Accord" identity (direction H)
   Platinum paper · ink · cobalt signature. Clash Display / Supreme / Fragment Mono.
   ========================================================================== */

:root{
  --paper: #f5f3ee;
  --panel: #fcfbf8;
  --ink: #0f1218;
  --ink-soft: #3a404b;
  --ink-faint: #6a6f7a;
  --hair: #dad6cb;
  --hair-strong: #b9b4a5;
  --cobalt: #1f35d4;
  --cobalt-ink: #101c8f;
  --cobalt-tint: #8b9bff;
  --ok: #1e7f4f;
  --err: #b3261e;
  --display: 'Clash Display', 'Arial Black', sans-serif;
  --body: 'Supreme', 'Helvetica Neue', sans-serif;
  --mono: 'Fragment Mono', 'Courier New', monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4{ margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; }
p{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; height: auto; display: block; }
dl,dt,dd{ margin: 0; }

.wrap{ max-width: 1280px; margin: 0 auto; padding-left: 44px; padding-right: 44px; }

.sr-only{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cobalt); color: #fff; padding: 10px 18px;
  font-family: var(--mono); font-size: 12px;
}
.skip-link:focus{ left: 0; }

a:focus-visible, button:focus-visible{
  outline: 2px solid var(--cobalt); outline-offset: 3px;
}
.dmexco a:focus-visible, .dmexco button:focus-visible{ outline-color: var(--cobalt-tint); }

section[id]{ scroll-margin-top: 84px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; border: 1px solid transparent; border-radius: 0;
  font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
  padding: 13px 26px; background: var(--ink); color: var(--paper);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ background: var(--cobalt); color: #fff; }
.btn-cobalt{ background: var(--cobalt); color: #fff; }
.btn-cobalt:hover{ background: var(--cobalt-ink); }
.btn-line{ background: transparent; border-color: var(--hair-strong); color: var(--ink); }
.btn-line:hover{ background: transparent; border-color: var(--cobalt); color: var(--cobalt); }
.btn-small{ padding: 10px 18px; font-size: 13px; }
.btn-icon{ padding: 10px; gap: 0; }
.btn-icon svg{ width: 18px; height: 18px; display: block; fill: currentColor; }

/* The index ticker was retired from the site. Its rules are removed here; the
   brand book keeps a visual specimen of it, but that page carries its own
   inline styles and does not load this file. */

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  border-bottom: 1px solid var(--hair);
  background: rgba(245,243,238,0.92);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 40;
}
.header-inner{ display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.wordmark{ display: flex; align-items: center; gap: 14px; color: var(--ink); }
.wordmark-logo{ display: block; flex: none; height: 44px; width: auto; }
.main-nav{ display: flex; align-items: center; }
.nav-links{ display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.btn){
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); transition: color .15s ease;
}
.nav-links a:not(.btn):hover{ color: var(--cobalt); }
.nav-toggle{ display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ padding-top: 96px; position: relative; }
.kicker{
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cobalt); display: flex; align-items: center; gap: 14px;
}
.kicker::after{ content: ''; flex: 1; height: 1px; background: var(--hair); }
.hero-title{
  font-weight: 600; font-size: clamp(46px, 6.8vw, 104px);
  line-height: 0.99; letter-spacing: -0.02em; max-width: 1080px;
}
.hero-title .uline{ position: relative; white-space: nowrap; }
.hero-title .uline svg{ position: absolute; left: 0; bottom: -0.1em; width: 100%; height: 0.24em; overflow: visible; }
.hero-title .uline path{
  stroke: var(--cobalt); stroke-width: 6; fill: none; stroke-linecap: round;
  stroke-dasharray: 640; stroke-dashoffset: 640;
  animation: sign 1s .6s cubic-bezier(.6,0,.3,1) forwards;
}
@keyframes sign{ to{ stroke-dashoffset: 0; } }
.hero-cols{ margin-top: 44px; }
.hero-lede{ font-size: 19px; line-height: 1.68; color: var(--ink-soft); max-width: 580px; }
.hero-lede strong{ color: var(--ink); font-weight: 500; }
.hero-ctas{ display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* The accent stroke is the only <path> mounted directly under the wave's
   <svg> (every other stream line is wrapped in a <g>), so this targets it
   without touching tma-waves.js. Set just under the grey lines' own peak
   opacity (0.09 base x 0.6 intensity ~= 0.054) for a near-blended blue line. */
.hero[data-tma-wave="F1"] .tma-wave-svg > path{ opacity: 0.045; }

/* proof bar */
.proof-bar{
  margin-top: 72px; border-top: 1px solid var(--ink);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.proof-item{ padding: 24px 26px 30px 0; border-right: 1px solid var(--hair); }
.proof-item:last-child{ border-right: none; }
.proof-item + .proof-item{ padding-left: 26px; }
.proof-item b{ font-family: var(--display); font-weight: 600; font-size: 30px; display: block; margin-bottom: 4px; }
.proof-item b i{ font-style: normal; color: var(--cobalt); }
.proof-item span{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ==========================================================================
   Section heads
   ========================================================================== */
section{ padding-top: 96px; padding-bottom: 96px; }
.hero{ padding-bottom: 0; }
.section-head{ max-width: 820px; margin-bottom: 54px; }
.section-kicker{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 18px;
}
.section-head h2{ font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; }
.section-head h2 em{ font-style: normal; color: var(--cobalt); }
.section-head .lede{ margin-top: 18px; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }

/* ==========================================================================
   01 — Manifesto / problem
   ========================================================================== */
.manifesto{ background: var(--panel); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.problem-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}
.problem-card{ padding: 30px 30px 40px 0; border-right: 1px solid var(--hair); }
.problem-card:last-child{ border-right: none; }
.problem-card + .problem-card{ padding-left: 30px; }
.problem-card .num{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-faint);
  display: block; margin-bottom: 20px;
}
.problem-card h3{ font-size: 18.5px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.005em; }
.problem-card p{ font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.alliance-answer{
  margin-top: 56px; border: 1px solid var(--ink); padding: 26px 32px; background: var(--paper);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
}
.aa-label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cobalt); }
.aa-terms{ font-family: var(--display); font-weight: 600; font-size: clamp(17px, 2vw, 23px); letter-spacing: -0.005em; }

/* ==========================================================================
   02 — Companies / signatories
   ========================================================================== */
.company-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.company-card{
  background: var(--panel); border: 1px solid var(--hair); padding: 28px 28px 26px;
  /* subgrid: the five stacked blocks (logo / quote / list / pillar / actions)
     share row tracks across all three cards, so every row sits on the same line
     no matter how the text wraps. `.company-name` is sr-only (absolutely
     positioned) and is therefore NOT a grid item — do not count it.
     The span MUST equal the number of in-flow children: too many leaves dead
     space at the card foot, too few breaks cross-card alignment.
     Non-supporting browsers fall back to stacked auto rows. */
  display: grid; grid-template-rows: subgrid; grid-row: span 5;
  transition: border-color .15s ease, transform .15s ease;
}
.company-card:hover{ border-color: var(--cobalt); transform: translateY(-3px); }
.stamp{
  color: var(--cobalt); border: 1px solid var(--cobalt); padding: 4px 9px;
  letter-spacing: 0.18em; font-size: 9.5px; transform: rotate(-2deg); flex: none;
}
.company-logo-box{
  background: var(--ink); border: 1px solid var(--ink);
  padding: 20px 22px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center; min-height: 86px;
}
.company-logo{ max-height: 40px; width: auto; max-width: 100%; }
.company-quote{
  font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -0.005em;
  margin-bottom: 18px;
}
.check-list li{
  position: relative; padding-left: 24px; margin-bottom: 12px;
  font-size: 14px; line-height: 1.58; color: var(--ink-soft);
}
.check-list li strong{ color: var(--ink); font-weight: 500; }
.check-list li::before{
  content: ''; position: absolute; left: 0; top: 8px;
  width: 12px; height: 5px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}
.company-pillar-headline{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 8px 0 20px;
}
.company-actions{
  margin-top: auto; border-top: 1px solid var(--hair); padding-top: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.company-links{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.company-site{
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  border-bottom: 1px solid var(--hair-strong); padding-bottom: 1px;
}
.company-site:hover{ color: var(--cobalt); border-color: var(--cobalt); }

.proof-strip{
  margin-top: 54px; border: 1px solid var(--ink); background: var(--panel);
  padding: 26px 32px; position: relative;
}
/* Exhibits live inside .company-grid: DOM order (company → its exhibit) is the
   single-column reading order; the desktop column assignments below re-shelve
   them into a second row, each beneath its company. One DOM node serves both
   layouts — no per-breakpoint duplicates. */
.company-grid .proof-strip{ margin-top: 36px; }
@media (min-width: 1081px){
  .company-grid .proof-strip{ margin-top: 0; }
  /* Cards keep their subgrid span (rows 1–5); exhibits take row 6. The span on
     the explicit grid-row MUST stay 5 — see the subgrid note on .company-card. */
  .company-grid .company-card:nth-of-type(1){ grid-column: 1; grid-row: 1 / span 5; }
  .company-grid .company-card:nth-of-type(2){ grid-column: 2; grid-row: 1 / span 5; }
  .company-grid .company-card:nth-of-type(3){ grid-column: 3; grid-row: 1 / span 5; }
  .exhibit-a{ grid-column: 1; grid-row: 6; }
  .exhibit-b{ grid-column: 2; grid-row: 6; }
  .exhibit-c{ grid-column: 3; grid-row: 6; }
}
.exhibit-figure{ margin: 0; }
.exhibit-figure blockquote{ margin: 0; }
.exhibit-attrib{
  margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
}
.exhibit-source a{
  color: inherit; border-bottom: 1px solid var(--hair-strong); padding-bottom: 1px;
}
.exhibit-source a:hover{ color: var(--cobalt); border-color: var(--cobalt); }
.proof-strip-label{
  position: absolute; top: -9px; left: 28px; background: var(--panel); padding: 0 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-faint);
}
.proof-strip-body{ font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); max-width: 980px; }
.proof-strip-body strong{ color: var(--ink); font-weight: 500; }
.proof-src{ font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

/* ==========================================================================
   03 — Value
   ========================================================================== */
.value{ background: var(--panel); border-top: 1px solid var(--hair); }
.value-grid{ display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.value-card{ padding: 40px 44px 48px 0; border-right: 1px solid var(--hair); }
.value-card:last-child{ border-right: none; padding-left: 44px; }
.value-audience{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}
.value-headline{ font-size: 25px; margin-bottom: 18px; }
.value-card .check-list li{ font-size: 15px; }


/* ==========================================================================
   04 — DMEXCO (dark band)
   ========================================================================== */
.dmexco{ background: var(--ink); color: var(--paper); padding-top: 128px; padding-bottom: 128px; }
.section-head-dark h2{ color: #fff; font-size: clamp(38px, 4.6vw, 64px); }
.section-head-dark h2 em{ color: var(--cobalt-tint); }
.section-head-dark .section-kicker{ color: #7d8494; }
.dmexco-inner{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dmexco-facts{ display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(245,243,238,0.25); }
.dmexco-fact{ padding: 22px 20px 26px 0; border-bottom: 1px solid rgba(245,243,238,0.12); }
.dmexco-fact dt{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #7d8494; margin-bottom: 8px;
}
.dmexco-fact dd{ font-family: var(--display); font-weight: 600; font-size: 19px; color: #fff; }
.dmexco-booth p{ font-size: 16.5px; line-height: 1.68; color: #c8cdd8; margin: 18px 0 26px; }
.badge{
  display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cobalt-tint); border: 1px solid var(--cobalt-tint);
  padding: 6px 12px;
}
a.badge{ text-decoration: none; cursor: pointer; }
a.badge:hover{ color: var(--ink); background: var(--cobalt-tint); }

/* RSVP: filled by default (the other badge's hover treatment) so it
   reads as a button rather than an outline label. Sits on its own
   line under the booth-party text, aligned to the same left edge. */
.badge-rsvp{
  margin-top: 10px; color: var(--ink); background: var(--cobalt-tint);
}
.badge-rsvp:hover{ color: #fff; background: var(--cobalt); border-color: var(--cobalt); }

/* ==========================================================================
   05 — Contact
   ========================================================================== */
.contact-inner{ display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items: start; }
.contact-copy h2{ font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 16px; }
.contact-copy .lede{ font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.contact-copy .section-kicker{ margin-bottom: 16px; }
.contact-meta{ margin-top: 34px; border-top: 1px solid var(--hair); padding-top: 22px; }
.meta-label{
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}
.contact-meta a{ font-family: var(--display); font-weight: 500; font-size: 17px; }
.contact-meta a:hover{ color: var(--cobalt); }

/* convergence figure — not currently placed anywhere on the live site;
   kept dormant for future reuse (see brand-book.html). */
.converge{ width: 100%; max-width: 460px; margin: auto; }
.converge svg{ width: 100%; height: auto; display: block; }
.converge text{ font-family: var(--mono); font-size: 10px; letter-spacing: 2px; fill: var(--ink-faint); }
.converge path.thin{
  stroke: var(--ink); stroke-width: 2; fill: none; opacity: 0.85;
  stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw .9s ease forwards;
}
.converge path.t2{ animation-delay: .15s; }
.converge path.t3{ animation-delay: .3s; }
.converge path.heavy{
  stroke: var(--cobalt); stroke-width: 11; fill: none;
  stroke-dasharray: 140; stroke-dashoffset: 140;
  animation: draw .7s 1s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }

/* living diagram: a slow signal pulse per line, staggered, merging into the bar */
.converge path.pulse{
  stroke: var(--cobalt); stroke-width: 2.5; fill: none; opacity: 0.75;
  stroke-dasharray: 12 188; stroke-dashoffset: 12;
  animation: flow 5.5s linear infinite;
}
.converge path.p1{ animation-delay: 2.2s; }
.converge path.p2{ animation-delay: 4s; }
.converge path.p3{ animation-delay: 5.8s; }
.converge path.pulse-out{
  stroke: var(--cobalt-tint); stroke-width: 11; fill: none; opacity: 0.9;
  stroke-dasharray: 16 184; stroke-dashoffset: 16;
  animation: flow 5.5s linear infinite;
  animation-delay: 4.9s;
}
@keyframes flow{ to{ stroke-dashoffset: -188; } }

.lead-form-card{ background: var(--panel); border: 1px solid var(--ink); padding: 36px; position: relative; }
.form-routing{ display: none; margin-bottom: 20px; }
.form-routing.is-active{ display: block; }
.chip{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--cobalt); border: 1px solid var(--cobalt); padding: 7px 12px;
}
.chip button{
  background: none; border: none; cursor: pointer; color: var(--cobalt);
  font-size: 12px; padding: 0; line-height: 1;
}
.chip button:hover{ color: var(--ink); }

.hp-field{ position: absolute; left: -9999px; top: -9999px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field{ margin-bottom: 18px; display: flex; flex-direction: column; }
.field label{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.req{ color: var(--cobalt); }
.field input,
.field select,
.field textarea{
  font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 0;
  padding: 12px 14px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ min-height: 110px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt);
}
.field-error{ font-size: 12.5px; color: var(--err); margin-top: 6px; min-height: 1em; }
.cf-turnstile{ margin: 6px 0 4px; }
.form-footer{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.form-privacy{ font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); max-width: 380px; }
.form-status{ display: none; margin-top: 18px; padding: 14px 16px; font-size: 14.5px; line-height: 1.55; }
.form-status.is-visible{ display: block; }
.form-status.success{ border: 1px solid var(--ok); color: var(--ok); background: rgba(30,127,79,0.06); }
.form-status.error{ border: 1px solid var(--err); color: var(--err); background: rgba(179,38,30,0.05); }
.form-status a{ text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ border-top: 1px solid var(--hair); background: var(--paper); }
.footer-inner{
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding-top: 36px; padding-bottom: 36px; flex-wrap: wrap;
}
.footer-brand{ display: flex; align-items: center; gap: 18px; color: var(--ink); }
.footer-logo{ display: block; flex: none; height: 35px; width: auto; }
.footer-lines{ display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.footer-lines a:hover{ color: var(--cobalt); }
.footer-links{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ==========================================================================
   Reveals
   ========================================================================== */
[data-reveal]{ opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible{ opacity: 1; transform: none; }
.reveal-stagger.is-visible > *{ opacity: 1; transform: none; }
.reveal-stagger > *{ opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .15s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .25s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .35s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .45s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .55s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  [data-reveal], .reveal-stagger > *{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-title .uline path, .converge path.thin, .converge path.heavy{
    animation: none !important; stroke-dashoffset: 0 !important;
  }
  .converge path.pulse, .converge path.pulse-out{
    animation: none !important; opacity: 0 !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .company-grid{ grid-template-columns: 1fr; }
  .problem-grid{ grid-template-columns: 1fr 1fr; }
}
/* Alternating gutters exist ONLY in the 2-column tablet band. Below 561px the
   grid is single-column and no odd/even rule survives — cards share one left line. */
@media (max-width: 1080px) and (min-width: 561px){
  .problem-card{ border-right: none; }
  .problem-card:nth-child(odd){ border-right: 1px solid var(--hair); padding-right: 30px; padding-left: 0; }
  .problem-card:nth-child(even){ padding-left: 30px; }
}

@media (max-width: 900px){
  .wrap{ padding-left: 24px; padding-right: 24px; }
  .hero{ padding-top: 64px; }
  .proof-bar{ grid-template-columns: 1fr 1fr; }
  section{ padding-top: 72px; padding-bottom: 72px; }
  .value-grid{ grid-template-columns: 1fr; }
  .value-card{ border-right: none; border-bottom: 1px solid var(--hair); padding-left: 0 !important; padding-right: 0; }
  .value-card:last-child{ border-bottom: none; }
  .dmexco-inner{ grid-template-columns: 1fr; gap: 44px; }
  .contact-inner{ grid-template-columns: 1fr; gap: 44px; }
  .lead-form-card{ padding: 26px 20px; }
  .field-row{ grid-template-columns: 1fr; gap: 0; }

  /* mobile nav */
  .nav-toggle{
    display: block; background: none; border: 1px solid var(--hair-strong);
    width: 42px; height: 38px; position: relative; cursor: pointer;
  }
  .nav-toggle span:not(.sr-only){
    position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: var(--ink);
    transform: translateY(-50%);
  }
  .nav-toggle span:not(.sr-only)::before,
  .nav-toggle span:not(.sr-only)::after{
    content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink);
    transition: transform .2s ease;
  }
  .nav-toggle span:not(.sr-only)::before{ top: -7px; }
  .nav-toggle span:not(.sr-only)::after{ top: 7px; }
  .nav-links{
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--hair);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 24px 20px;
  }
  .nav-links a{ padding: 12px 0; width: 100%; border-bottom: 1px solid var(--hair); }
  .nav-links a.btn{ border-bottom: none; margin-top: 14px; width: auto; padding: 12px 22px; }
  .main-nav.is-open .nav-links{ display: flex; }
  body.nav-open{ overflow: hidden; }
}

/* Proof-bar alternating gutters: 2-column band only (561–900px). */
@media (max-width: 900px) and (min-width: 561px){
  .proof-item{ border-right: none; }
  .proof-item:nth-child(odd){ border-right: 1px solid var(--hair); padding-right: 22px; padding-left: 0; }
  .proof-item:nth-child(even){ padding-left: 22px; }
}

@media (max-width: 560px){
  .proof-bar{ grid-template-columns: 1fr; }
  .proof-item,
  .proof-item + .proof-item{ border-right: none; padding: 18px 0; border-bottom: 1px solid var(--hair); }
  .problem-grid{ grid-template-columns: 1fr; }
  .problem-card,
  .problem-card + .problem-card{ border-right: none; padding: 24px 0; border-bottom: 1px solid var(--hair); }
  .dmexco-facts{ grid-template-columns: 1fr; }
  .form-footer{ flex-direction: column; align-items: flex-start; }
}

/* Narrow phones: the Cloudflare Turnstile widget is a FIXED 300px box, so the
   form card cannot shrink below it. At the ≤900px paddings (.wrap 24 + card 20
   per side = 88px of chrome) the form needs a 388px viewport — meaning it was
   clipped on every 360px AND 375px phone, with body{overflow-x:hidden} hiding
   the scrollbar so the captcha could not be reached at all. Trimming the chrome
   to 52px keeps 308px of content at 360px. overflow-x on the captcha wrapper is
   the backstop for anything narrower still (e.g. 320px iPhone SE). */
@media (max-width: 420px){
  .wrap{ padding-left: 14px; padding-right: 14px; }
  .lead-form-card{ padding: 22px 12px; }
  .cf-turnstile{ overflow-x: auto; }
}

/* ---- Cookiebot chrome ---------------------------------------------------
   Cookiebot renders into the page DOM (not an iframe), so it is ours to style.

   1. The floating widget is position:fixed bottom-left, 48x48, z-index
      2147483631 — it sits directly on top of the footer wordmark on a phone.
      A vendor badge covering our own mark is the wrong look on a site whose
      pitch is restraint. Withdrawal is NOT affected: consent.js injects a
      "Cookie settings" link into the footer of every page that can load GA,
      and that is the Art. 7(3) control. Do not remove that link.

   2. On a phone the banner measured 543px of a 780px viewport — 70% of the
      screen. Measured breakdown: 57px Cookiebot header strip, 24px title,
      168px body copy, 141px footer, the rest padding. The header strip is
      pure vendor branding and carries no control, so it goes on small screens
      (permitted on the paid plan), and the padding is tightened. Desktop is
      left alone — there is no space problem there. */
#CookiebotWidget{ display: none !important; }

@media (max-width: 600px){
  #CybotCookiebotDialogHeader{ display: none !important; }
  #CybotCookiebotDialogBodyContent{ padding: 14px 16px !important; }
  #CybotCookiebotDialogBodyContentTitle{ margin-bottom: 6px !important; }
  #CybotCookiebotDialogBodyContentText{ font-size: 13px !important; line-height: 1.45 !important; }
  #CybotCookiebotDialogFooter{ padding: 10px 16px 14px !important; }
  #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton{ padding: 13px 16px !important; }
}