/* ==========================================================================
   HaqVeer — Dispatch system stylesheet
   Approved design: "Dispatch — film-led investigation, graphite & teal-ink"

   This file holds ONLY what Elementor Free cannot express through its own
   controls: keyframes, film-grain and letterbox layers, scroll-driven
   reveals, the hover-to-cut switcher, and the Fluent Forms skin.

   Every colour and type value below reads from the Elementor Global Kit
   custom properties. Change the Kit, not this file.

   CONTENTS
     01  Token bridge
     02  Base
     03  Keyframes
     04  Motion utilities
     05  Film layers (grain / letterbox / ken burns / crossfade)
     06  Pills and chips
     07  Hairline lists
     08  Front switcher (hover-to-cut)
     09  Media wells and cards
     10  Meters and scrub bars
     11  Device mockup
     12  Header and footer
     13  Fluent Forms skin
     14  Responsive
     15  Accessibility
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  TOKEN BRIDGE
   Local aliases so this stylesheet stays readable, with hard fallbacks in
   case the Kit CSS has not been generated yet.
   -------------------------------------------------------------------------- */
:root {
  --hq-graphite:   var(--e-global-color-primary, #0B0D10);
  --hq-tealink:    var(--e-global-color-secondary, #0E3B3A);
  --hq-white:      var(--e-global-color-text, #FFFFFF);
  --hq-accent:     var(--e-global-color-accent, #FF5900);
  --hq-accent-hi:  var(--e-global-color-accenthi, #FF8B46);
  --hq-panel:      var(--e-global-color-panel, #14181D);
  --hq-bezel:      var(--e-global-color-bezel, #191C20);
  --hq-ink-muted:  var(--e-global-color-inkmuted, #5B6675);
  --hq-body:       var(--e-global-color-body, rgba(255,255,255,.72));
  --hq-meta:       var(--e-global-color-metatext, rgba(255,255,255,.68));
  --hq-hairline:   var(--e-global-color-hairline, rgba(255,255,255,.16));
  --hq-hairline-hi:var(--e-global-color-hairlinehi, rgba(255,255,255,.30));
  --hq-glass:      var(--e-global-color-glass, rgba(255,255,255,.09));
  --hq-shade:      var(--e-global-color-shade, rgba(0,0,0,.34));

  --hq-mono: var(--e-global-typography-meta-font-family, 'JetBrains Mono'), ui-monospace, monospace;
  --hq-sans: var(--e-global-typography-text-font-family, 'Geist'), system-ui, sans-serif;

  --hq-ease: cubic-bezier(.2,.8,.2,1);
  --hq-ease-film: cubic-bezier(.16,.84,.24,1);
  --hq-gutter: 56px;
  --hq-radius-card: 12px;
  --hq-radius-panel: 14px;

  /* The one film treatment applied to every temporary photograph. Removing
     this line returns all imagery to full colour. */
  --hq-film: grayscale(1) contrast(1.12) brightness(.86);
}

/* --------------------------------------------------------------------------
   02  BASE
   -------------------------------------------------------------------------- */
body {
  background: var(--hq-graphite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Twenty Twenty-Five constrains post content to the theme content width and
   adds flow margins between top-level blocks. Elementor sections are designed
   edge to edge, so the content wrapper is released here. */
main .wp-block-post-content,
.entry-content.wp-block-post-content,
.wp-site-blocks > main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.wp-block-post-content > .elementor { margin: 0; }
.wp-site-blocks > * + *,
main.is-layout-flow > * + *,
.entry-content.is-layout-flow > * + * { margin-block-start: 0; }

/* Elementor headings and paragraphs carry theme margins that break the
   design's spacing rhythm; containers own all spacing instead. */
.elementor-widget-heading .elementor-heading-title { margin: 0; }
.elementor-widget-text-editor p:first-child { margin-top: 0; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* The theme uppercases and letter-spaces every button; the approved design
   uses sentence case Geist. */
.elementor-button,
.wp-block-button__link,
.wp-element-button {
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

.hq-mono { font-family: var(--hq-mono); }

/* Full-bleed section: cancels theme content constraints. */
.hq-bleed { width: 100%; max-width: none; }

/* --------------------------------------------------------------------------
   02b  GLOBAL KIT TYPE + COLOUR UTILITIES
   Elementor Free does not emit CSS for a widget whose typography is bound to a
   Global Kit style and left otherwise empty, so these classes consume the Kit's
   own custom properties instead. Nothing is hardcoded: change the value in the
   Elementor Global Kit and every element carrying the class follows, including
   the Kit's tablet and mobile overrides.
   -------------------------------------------------------------------------- */
.hq-t-display, .hq-t-display .elementor-heading-title {
  font-family: var(--e-global-typography-primary-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-primary-font-size);
  font-weight: var(--e-global-typography-primary-font-weight);
  line-height: var(--e-global-typography-primary-line-height);
  letter-spacing: var(--e-global-typography-primary-letter-spacing);
}
.hq-t-h2, .hq-t-h2 .elementor-heading-title {
  font-family: var(--e-global-typography-secondary-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-secondary-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  line-height: var(--e-global-typography-secondary-line-height);
  letter-spacing: var(--e-global-typography-secondary-letter-spacing);
}
.hq-t-h2xl, .hq-t-h2xl .elementor-heading-title {
  font-family: var(--e-global-typography-h2xl-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-h2xl-font-size);
  font-weight: var(--e-global-typography-h2xl-font-weight);
  line-height: var(--e-global-typography-h2xl-line-height);
  letter-spacing: var(--e-global-typography-h2xl-letter-spacing);
}
.hq-t-quote, .hq-t-quote .elementor-heading-title {
  font-family: var(--e-global-typography-quote-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-quote-font-size);
  font-weight: var(--e-global-typography-quote-font-weight);
  line-height: var(--e-global-typography-quote-line-height);
  letter-spacing: var(--e-global-typography-quote-letter-spacing);
}
.hq-t-front, .hq-t-front .elementor-heading-title {
  font-family: var(--e-global-typography-h3front-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-h3front-font-size);
  font-weight: var(--e-global-typography-h3front-font-weight);
  line-height: var(--e-global-typography-h3front-line-height);
  letter-spacing: var(--e-global-typography-h3front-letter-spacing);
}
.hq-t-card, .hq-t-card .elementor-heading-title {
  font-family: var(--e-global-typography-cardtitle-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-cardtitle-font-size);
  font-weight: var(--e-global-typography-cardtitle-font-weight);
  line-height: var(--e-global-typography-cardtitle-line-height);
  letter-spacing: var(--e-global-typography-cardtitle-letter-spacing);
}
.hq-t-row, .hq-t-row .elementor-heading-title {
  font-family: var(--e-global-typography-rowtitle-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-rowtitle-font-size);
  font-weight: var(--e-global-typography-rowtitle-font-weight);
  line-height: var(--e-global-typography-rowtitle-line-height);
}
.hq-t-lead, .hq-t-lead p, .hq-t-lead .elementor-heading-title {
  font-family: var(--e-global-typography-lead-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-lead-font-size);
  font-weight: var(--e-global-typography-lead-font-weight);
  line-height: var(--e-global-typography-lead-line-height);
}
.hq-t-body, .hq-t-body p {
  font-family: var(--e-global-typography-text-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  line-height: var(--e-global-typography-text-line-height);
}
.hq-t-bodysm, .hq-t-bodysm p, .hq-t-bodysm .elementor-heading-title {
  font-family: var(--e-global-typography-bodysm-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-bodysm-font-size);
  font-weight: var(--e-global-typography-bodysm-font-weight);
  line-height: var(--e-global-typography-bodysm-line-height);
}
.hq-t-stat, .hq-t-stat .elementor-heading-title, .hq-t-stat .elementor-counter-number-wrapper {
  font-family: var(--e-global-typography-statnum-font-family), var(--hq-sans);
  font-size: var(--e-global-typography-statnum-font-size);
  font-weight: var(--e-global-typography-statnum-font-weight);
  line-height: var(--e-global-typography-statnum-line-height);
  letter-spacing: var(--e-global-typography-statnum-letter-spacing);
}
.hq-t-meta, .hq-t-meta .elementor-heading-title, .hq-t-meta p {
  font-family: var(--e-global-typography-meta-font-family), var(--hq-mono);
  font-size: var(--e-global-typography-meta-font-size);
  font-weight: var(--e-global-typography-meta-font-weight);
  line-height: var(--e-global-typography-meta-line-height);
  letter-spacing: var(--e-global-typography-meta-letter-spacing);
}
.hq-t-metasm, .hq-t-metasm .elementor-heading-title, .hq-t-metasm .elementor-counter-title {
  font-family: var(--e-global-typography-metasm-font-family), var(--hq-mono);
  font-size: var(--e-global-typography-metasm-font-size);
  font-weight: var(--e-global-typography-metasm-font-weight);
  line-height: var(--e-global-typography-metasm-line-height);
  letter-spacing: var(--e-global-typography-metasm-letter-spacing);
  text-transform: var(--e-global-typography-metasm-text-transform);
}
.hq-t-eyebrow, .hq-t-eyebrow .elementor-heading-title {
  font-family: var(--e-global-typography-eyebrow-font-family), var(--hq-mono);
  font-size: var(--e-global-typography-eyebrow-font-size);
  font-weight: var(--e-global-typography-eyebrow-font-weight);
  line-height: var(--e-global-typography-eyebrow-line-height);
  letter-spacing: var(--e-global-typography-eyebrow-letter-spacing);
  text-transform: var(--e-global-typography-eyebrow-text-transform);
}

/* Colour utilities — same Kit-variable principle. */
.hq-c-white,    .hq-c-white .elementor-heading-title,    .hq-c-white p,    .hq-c-white .elementor-counter-number-wrapper { color: var(--e-global-color-text); }
.hq-c-body,     .hq-c-body .elementor-heading-title,     .hq-c-body p     { color: var(--e-global-color-body); }
.hq-c-meta,     .hq-c-meta .elementor-heading-title,     .hq-c-meta p, .hq-c-meta .elementor-counter-title { color: var(--e-global-color-metatext); }
.hq-c-accent,   .hq-c-accent .elementor-heading-title,   .hq-c-accent p   { color: var(--e-global-color-accent); }
.hq-c-graphite, .hq-c-graphite .elementor-heading-title, .hq-c-graphite p { color: var(--e-global-color-primary); }
.hq-c-ink,      .hq-c-ink .elementor-heading-title,      .hq-c-ink p      { color: var(--e-global-color-inkmuted); }

/* --------------------------------------------------------------------------
   03  KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes hqRise      { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes hqFade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes hqKen       { from { transform: scale(1.02); } to { transform: scale(1.16); } }
@keyframes hqCross     { 0%,40% { opacity: 1; } 50%,90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hqBar       { from { width: 0; } to { width: 100%; } }
@keyframes hqPulse     { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.6); } }
@keyframes hqGrain     { 0% { transform: translate(0,0); } 25% { transform: translate(-2%,1%); } 50% { transform: translate(1%,-2%); } 75% { transform: translate(-1%,-1%); } 100% { transform: translate(0,0); } }
@keyframes hqLine      { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hqLetterbox { from { height: 88px; } to { height: 34px; } }

/* --------------------------------------------------------------------------
   04  MOTION UTILITIES
   Scroll-driven where the browser supports animation-timeline, otherwise the
   element is simply present — never hidden.
   -------------------------------------------------------------------------- */
.hq-rise  { animation: hqRise 1s var(--hq-ease-film) both; }
.hq-fade  { animation: hqFade 1.2s both; }
.hq-d1 { animation-delay: .10s; }
.hq-d2 { animation-delay: .20s; }
.hq-d3 { animation-delay: .30s; }
.hq-d4 { animation-delay: .45s; }

@supports (animation-timeline: view()) {
  .hq-reveal {
    animation: hqRise .9s var(--hq-ease-film) both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }
  .hq-reveal-line {
    transform-origin: left;
    animation: hqLine 1.1s var(--hq-ease) both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }
}

/* --------------------------------------------------------------------------
   05  FILM LAYERS
   -------------------------------------------------------------------------- */

/* Any container carrying .hq-film-stage clips its media and stacks layers. */
.hq-film-stage { position: relative; overflow: hidden; background: #000; }
.hq-film-stage > .elementor-element { position: relative; z-index: 2; }

/* Photographs and video inside a film stage take the Dispatch grade. */
.hq-graded img,
.hq-graded video,
.hq-film-stage .hq-graded img { filter: var(--hq-film); }
.hq-graded-deep img,
.hq-graded-deep video { filter: grayscale(1) contrast(1.16) brightness(.76); }

/* Background video / image fills its container edge to edge.
   Specificity note: this must outrank `.hq-film-stage > .elementor-element`
   above, which would otherwise force the layer back into normal flow and
   collapse the video's aspect-ratio box to zero height. */
.hq-cover,
.hq-film-stage > .elementor-element.hq-cover,
.hq-device > .elementor-element.hq-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.hq-cover img,
.hq-cover video,
.hq-cover .elementor-widget-container,
.hq-cover .elementor-wrapper,
.hq-cover .e-hosted-video,
.hq-cover .elementor-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  padding: 0;
}

/* Second video crossfades over the first. */
.hq-crossfade { animation: hqCross 17s infinite; }

/* Ken Burns for a still. */
.hq-ken img { animation: hqKen 30s ease-in-out infinite alternate; }

/* Film grain — pure CSS, no image request. */
.hq-grain::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  opacity: .15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hqGrain 1.1s steps(4) infinite;
}

/* Cinematic vignette + top/bottom scrim over hero footage. */
.hq-scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 28%, rgba(0,0,0,.60)),
    linear-gradient(180deg, rgba(11,13,16,.72), transparent 32%, rgba(11,13,16,.94));
}

/* Single-direction scrim for the vision band. */
.hq-scrim-left::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11,13,16,.92), rgba(11,13,16,.20) 72%);
}

/* Bottom-only scrim for cards and media wells. */
.hq-scrim-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(11,13,16,.92));
}

/* Opening letterbox bars. */
.hq-letterbox::before,
.hq-letterbox::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  background: #000;
  pointer-events: none;
  animation: hqLetterbox 1.4s .2s var(--hq-ease-film) both;
}
.hq-letterbox::before { top: 0; }
.hq-letterbox::after  { bottom: 0; }

/* --------------------------------------------------------------------------
   06  PILLS AND CHIPS
   Elementor buttons carry these classes; the Kit supplies the accent pill.
   -------------------------------------------------------------------------- */
.hq-pill-ghost .elementor-button,
a.hq-pill-ghost {
  background: transparent;
  border: 1px solid var(--hq-hairline-hi);
  color: var(--hq-white);
  border-radius: 999px;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.hq-pill-ghost .elementor-button:hover,
a.hq-pill-ghost:hover {
  background: var(--hq-white);
  border-color: var(--hq-white);
  color: var(--hq-graphite);
}

.hq-pill-glass .elementor-button,
a.hq-pill-glass {
  background: var(--hq-glass);
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--hq-white);
  border-radius: 999px;
  transition: background .35s ease;
}
.hq-pill-glass .elementor-button:hover,
a.hq-pill-glass:hover { background: rgba(255,255,255,.18); }

.hq-pill-dark .elementor-button,
a.hq-pill-dark {
  background: var(--hq-graphite);
  border-color: var(--hq-graphite);
  color: var(--hq-white);
  border-radius: 999px;
  transition: background .35s ease;
}
.hq-pill-dark .elementor-button:hover,
a.hq-pill-dark:hover { background: var(--hq-accent); border-color: var(--hq-accent); }

/* Accent pill lift on hover (the Kit provides colour). */
.hq-pill-lift .elementor-button { transition: transform .35s var(--hq-ease), background .35s ease; }
.hq-pill-lift .elementor-button:hover { transform: translateY(-2px); }

/* Glass pill carrying the white circular play badge, as in the approved hero.
   Drawn in CSS so it needs no icon library. */
.hq-pill-glass .elementor-button { padding: 15px 26px 15px 15px; }
.hq-pill-glass .elementor-button::before {
  content: "\25B6";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--hq-white);
  color: var(--hq-graphite);
  font-size: 9px;
  line-height: 1;
}
.hq-pill-glass .elementor-button-icon { display: none; }

/* Plain underlined text link used for "All films & field reports" and
   "See all campaigns" — not a pill. */
.hq-textlink .elementor-button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hq-hairline-hi);
  border-radius: 0;
  padding: 0 0 4px;
  color: var(--hq-white);
  transition: border-color .35s ease, color .35s ease;
}
.hq-textlink .elementor-button:hover { border-color: var(--hq-white); color: var(--hq-white); }
.hq-textlink-muted .elementor-button { border-bottom-color: transparent; color: var(--hq-meta); }
.hq-textlink-muted .elementor-button:hover { color: var(--hq-white); }

/* Outlined status pill ("IN DEVELOPMENT"). */
.elementor-widget-heading.hq-pill-outline { display: inline-flex; width: auto; flex: 0 0 auto; }
:where(.hq-pill-outline, .hq-pill-outline .elementor-heading-title) {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--hq-hairline-hi);
  border-radius: 999px;
  color: var(--hq-white);
  background: transparent;
}

/* Per-front caption text for the media well, authored on the row and read by
   dispatch.js. Hidden from the layout, still editable in Elementor. */
.hq-front-caption { display: none !important; }

/* The Global Kit's button padding, background and border colour are more
   specific than the variant rules above, so every variant that departs from the
   Kit's primary pill is restated here at widget level. Values still come from
   Kit variables. */
.elementor-widget-button.hq-textlink .elementor-button {
  padding: 0 0 4px;
  font-size: 13.5px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hq-hairline-hi);
  border-radius: 0;
  color: var(--hq-white);
}
.elementor-widget-button.hq-textlink .elementor-button:hover { border-bottom-color: var(--hq-white); }
.elementor-widget-button.hq-textlink-muted .elementor-button { border-bottom-color: transparent; color: var(--hq-meta); }
.elementor-widget-button.hq-textlink-muted .elementor-button:hover { color: var(--hq-white); }

.elementor-widget-button.hq-pill-glass .elementor-button {
  padding: 15px 26px 15px 15px;
  font-size: 14px;
  background: var(--hq-glass);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--hq-white);
}
.elementor-widget-button.hq-pill-glass .elementor-button:hover { background: rgba(255,255,255,.18); }

.elementor-widget-button.hq-pill-ghost .elementor-button {
  padding: 15px 28px;
  font-size: 13.5px;
  background: transparent;
  border: 1px solid var(--hq-hairline-hi);
  color: var(--hq-white);
}
.elementor-widget-button.hq-pill-ghost .elementor-button:hover {
  background: var(--hq-white);
  border-color: var(--hq-white);
  color: var(--hq-graphite);
}

.elementor-widget-button.hq-pill-dark .elementor-button {
  background: var(--hq-graphite);
  border-color: var(--hq-graphite);
  color: var(--hq-white);
}
.elementor-widget-button.hq-pill-dark .elementor-button:hover { background: var(--hq-accent); border-color: var(--hq-accent); }

/* Corner chips on media (FIELD REPORT / DOCUMENTARY / RTI TRAIL / duration).
   Applied to a Heading widget: the wrapper shrinks, the title carries the pill. */
.elementor-widget-heading.hq-chip { display: inline-flex; width: auto; flex: 0 0 auto; }
.elementor-widget-heading.hq-chip .elementor-heading-title,
.hq-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 4px;
  font-family: var(--hq-mono);
  font-weight: 600;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* Chip colour variants — match both a bare element and a Heading widget. */
:where(.hq-chip-accent, .hq-chip-accent .elementor-heading-title)  { background: rgba(255,89,0,.92); color: var(--hq-white); }
:where(.hq-chip-white, .hq-chip-white .elementor-heading-title)    { background: rgba(255,255,255,.92); color: var(--hq-graphite); }
:where(.hq-chip-teal, .hq-chip-teal .elementor-heading-title)      { background: rgba(14,59,58,.95); color: var(--hq-white); }
:where(.hq-chip-dark, .hq-chip-dark .elementor-heading-title)      { background: rgba(0,0,0,.70); color: var(--hq-white); letter-spacing: normal; }
:where(.hq-chip-outline, .hq-chip-outline .elementor-heading-title) {
  background: rgba(255,89,0,.16);
  border: 1px solid rgba(255,89,0,.50);
  color: var(--hq-accent-hi);
  letter-spacing: .12em;
  padding: 6px 11px;
}
:where(.hq-chip-muted, .hq-chip-muted .elementor-heading-title) {
  background: rgba(255,255,255,.08);
  color: var(--hq-meta);
  letter-spacing: .12em;
  padding: 6px 11px;
}

/* Live dot. */
.hq-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hq-accent);
  animation: hqPulse 2.4s ease-in-out infinite;
}

/* Play badge. */
.hq-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.90);
  color: var(--hq-graphite);
  font-size: 10px;
}

/* --------------------------------------------------------------------------
   07  HAIRLINE LISTS
   The white-paper rows and front rows share one rule set.
   -------------------------------------------------------------------------- */
.hq-hairlines > .elementor-element { border-top: 1px solid var(--hq-hairline); }
.hq-hairlines > .elementor-element:last-child { border-bottom: 1px solid var(--hq-hairline); }

.hq-row-slide { transition: padding-left .4s var(--hq-ease); }
.hq-row-slide:hover,
.hq-row-slide:focus-within { padding-left: 14px; }
.hq-row-slide-sm { transition: padding-left .4s ease; }
.hq-row-slide-sm:hover,
.hq-row-slide-sm:focus-within { padding-left: 10px; }

/* --------------------------------------------------------------------------
   08  FRONT SWITCHER (hover-to-cut)
   Rows drive a stack of stills. Touch devices tap instead of hover; the rows
   are real buttons so the keyboard works too.
   -------------------------------------------------------------------------- */
.hq-panel-stack { position: relative; }
.hq-panel-stack .hq-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
}
.hq-panel-stack .hq-panel.is-active { opacity: 1; }
.hq-panel-stack .hq-panel img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--hq-film);
}
/* Front rows. The class is `hq-front` — it must match the markup written by the
   Elementor container and the selectors used in dispatch.js. The row numbers are
   permanently Signal Orange in the approved design (set on the widget via
   hq-c-accent), so no active-state colour rule is needed here. */
.hq-front { cursor: pointer; }

/* --------------------------------------------------------------------------
   09  MEDIA WELLS AND CARDS
   -------------------------------------------------------------------------- */
.hq-well {
  position: relative;
  overflow: hidden;
  border-radius: var(--hq-radius-panel);
  background: var(--hq-panel);
}
.hq-card-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--hq-radius-card);
  background: var(--hq-panel);
}
.hq-card-media img { transition: transform .8s var(--hq-ease); }
.hq-card:hover .hq-card-media img,
.hq-card-media:hover img { transform: scale(1.05); }

.hq-panel-box {
  background: var(--hq-shade);
  border: 1px solid var(--hq-hairline);
  border-radius: var(--hq-radius-panel);
}
.hq-outline-card {
  border: 1px solid var(--hq-hairline);
  border-radius: var(--hq-radius-card);
  transition: border-color .4s ease;
}
.hq-outline-card:hover { border-color: rgba(255,89,0,.70); }

/* --------------------------------------------------------------------------
   10  METERS AND SCRUB BARS
   Used where an Elementor Progress Bar would add markup we do not need.
   -------------------------------------------------------------------------- */
.hq-meter { height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.hq-meter-sm { height: 5px; }
.hq-meter > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--hq-accent);
  transform-origin: left;
}
.hq-meter-white > span { background: var(--hq-white); }
@supports (animation-timeline: view()) {
  .hq-meter > span {
    animation: hqLine 1.1s var(--hq-ease) both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }
}

/* Elementor Progress Bar, restyled to the Dispatch meter. */
.hq-progress .elementor-progress-wrapper {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.14);
  box-shadow: none;
}
.hq-progress .elementor-progress-bar {
  background: var(--hq-accent);
  border-radius: 3px;
  height: 6px;
}
.hq-progress .elementor-progress-text { display: none; }
.hq-progress .elementor-progress-percentage {
  font-family: var(--hq-mono);
  font-size: 11px;
  color: var(--hq-meta);
}

/* Hero timeline scrub. */
.hq-scrub { flex: 1; height: 2px; background: rgba(255,255,255,.20); display: block; }
.hq-scrub > span { display: block; height: 2px; background: var(--hq-accent); animation: hqBar 21s linear infinite; }

/* Accent rule above a statement. */
.hq-rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--hq-accent);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   11  DEVICE MOCKUP
   -------------------------------------------------------------------------- */
.hq-device {
  position: relative;
  width: 330px;
  height: 668px;
  border-radius: 44px;
  background: #000;
  border: 9px solid var(--hq-bezel);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.90);
  overflow: hidden;
}
.hq-device::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 30%, rgba(0,0,0,.86));
}
.hq-device > .elementor-element { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   12  HEADER AND FOOTER (Site Editor template parts)
   -------------------------------------------------------------------------- */
.hq-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 34px var(--hq-gutter);
  background: transparent;
  transition: background .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
.hq-header.is-stuck {
  position: fixed;
  padding: 16px var(--hq-gutter);
  background: rgba(11,13,16,.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hq-hairline);
}
.hq-header a { color: rgba(255,255,255,.78); text-decoration: none; }
.hq-header a:hover { color: var(--hq-white); }
.hq-wordmark,
.hq-header .wp-block-site-title a,
.hq-header .wp-block-site-title a:hover {
  font-family: var(--hq-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--hq-white);
}
/* Header CTA: hairline ghost pill, not the theme's accent button. */
.hq-header .wp-block-button__link,
.hq-header .wp-element-button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  color: var(--hq-white);
  font-family: var(--hq-sans);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  padding: 10px 20px;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.hq-header .wp-block-button__link:hover,
.hq-header .wp-element-button:hover {
  background: var(--hq-white);
  border-color: var(--hq-white);
  color: var(--hq-graphite);
}
.hq-header .wp-block-navigation { gap: 26px; }
.hq-header .wp-block-navigation-item__content {
  font-family: var(--hq-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
}
.hq-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--hq-graphite);
  padding: 56px var(--hq-gutter);
}
.hq-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 28px; }

.hq-footer {
  background: var(--hq-graphite);
  color: var(--hq-meta);
  font-family: var(--hq-mono);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hq-footer a { color: var(--hq-meta); text-decoration: none; }
.hq-footer a:hover { color: var(--hq-accent-hi); }
.hq-footer-links {
  font-family: var(--hq-sans);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   13  FLUENT FORMS SKIN
   -------------------------------------------------------------------------- */
.hq-form .frm-fluent-form .ff-el-input--label label {
  font-family: var(--hq-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hq-meta);
}
.hq-form .frm-fluent-form input[type=text],
.hq-form .frm-fluent-form input[type=email],
.hq-form .frm-fluent-form input[type=tel],
.hq-form .frm-fluent-form input[type=url],
.hq-form .frm-fluent-form select,
.hq-form .frm-fluent-form textarea {
  font-family: var(--hq-sans);
  font-size: 15px;
  color: var(--hq-white);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--hq-hairline);
  border-radius: 999px;
  padding: 15px 22px;
  box-shadow: none;
  transition: border-color .3s ease, background .3s ease;
}
.hq-form .frm-fluent-form textarea { border-radius: 18px; }
.hq-form .frm-fluent-form input:focus,
.hq-form .frm-fluent-form select:focus,
.hq-form .frm-fluent-form textarea:focus {
  border-color: var(--hq-accent);
  background: rgba(255,255,255,.09);
  outline: none;
}
.hq-form .frm-fluent-form ::placeholder { color: rgba(255,255,255,.42); }
.hq-form .frm-fluent-form .ff-btn-submit {
  font-family: var(--hq-sans);
  font-weight: 600;
  font-size: 14.5px;
  background: var(--hq-accent);
  color: var(--hq-white);
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  transition: transform .35s var(--hq-ease), background .35s ease;
}
.hq-form .frm-fluent-form .ff-btn-submit:hover { background: var(--hq-accent-hi); transform: translateY(-2px); }
.hq-form .frm-fluent-form .ff-el-form-check-label { color: var(--hq-body); font-family: var(--hq-sans); }
.hq-form .frm-fluent-form .ff-el-is-error .text-danger { font-family: var(--hq-mono); font-size: 11px; }

/* Newsletter form on the white CTA band. */
/* Newsletter form on the white CTA band — one email field beside the button,
   matching the approved design. */
.hq-form-inline .frm-fluent-form .ff-el-group { margin-bottom: 0; }
.hq-form-inline .frm-fluent-form .ff-t-cell,
.hq-form-inline .frm-fluent-form .ff-el-input--label { }
.hq-form-inline .frm-fluent-form > .ff-el-group,
.hq-form-inline .frm-fluent-form .ff-el-group.ff-text-left {
  display: block;
}
.hq-form-inline .frm-fluent-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hq-form-inline .frm-fluent-form .ff-el-group:first-of-type { flex: 1 1 330px; min-width: 260px; }
.hq-form-inline .frm-fluent-form .ff-el-input--label { display: none; }
.hq-form-inline .frm-fluent-form input[type=email] { width: 100%; height: 54px; }
.hq-form-inline .frm-fluent-form .ff-el-group.ff_submit_btn_wrapper { flex: 0 0 auto; margin: 0; }
.hq-form-inline .frm-fluent-form .ff-btn-submit { height: 54px; padding: 0 30px; }

.hq-form-light .frm-fluent-form input[type=text],
.hq-form-light .frm-fluent-form input[type=email] {
  color: var(--hq-graphite);
  background: transparent;
  border-color: rgba(11,13,16,.18);
}
.hq-form-light .frm-fluent-form ::placeholder { color: #8B939E; }
.hq-form-light .frm-fluent-form .ff-el-input--label label { color: var(--hq-ink-muted); }
.hq-form-light .frm-fluent-form .ff-btn-submit { background: var(--hq-graphite); }
.hq-form-light .frm-fluent-form .ff-btn-submit:hover { background: var(--hq-accent); }

/* --------------------------------------------------------------------------
   14  RESPONSIVE
   Breakpoints match the Elementor Kit: tablet <=1024, mobile <=767.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --hq-gutter: 40px; }
  .hq-device { width: 300px; height: 608px; }
}

@media (max-width: 767px) {
  :root { --hq-gutter: 24px; }
  .hq-header { padding: 20px var(--hq-gutter); }
  .hq-device { width: 270px; height: 548px; border-radius: 38px; }
  .hq-letterbox::before,
  .hq-letterbox::after { animation: none; height: 0; }
  /* Hover-only affordances are pointless on touch. */
  .hq-row-slide:hover,
  .hq-row-slide-sm:hover { padding-left: 0; }
  .hq-hide-mobile { display: none !important; }
}

@media (hover: none) {
  .hq-hover-hint { display: none; }
}

/* --------------------------------------------------------------------------
   15  ACCESSIBILITY
   -------------------------------------------------------------------------- */
:where(a, button, [role="tab"], input, select, textarea):focus-visible {
  outline: 2px solid var(--hq-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.hq-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--hq-accent);
  color: var(--hq-white);
  font-family: var(--hq-mono);
  font-size: 12px;
}
.hq-skip-link:focus { left: var(--hq-gutter); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hq-letterbox::before,
  .hq-letterbox::after { height: 0; }
  .hq-panel-stack .hq-panel.is-active { opacity: 1; }
}

/* --------------------------------------------------------------------------
   16  HERO RAIL
   The "On this page" list is a fixed-size column at the right edge; it must
   never wrap or be squeezed by the headline block.
   -------------------------------------------------------------------------- */
.hq-rail { flex: 0 0 auto; white-space: nowrap; }
.hq-rail a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hq-scrub-row { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   17  GRID TEMPLATES
   Elementor Free's grid container only offers "n equal columns" and defaults to
   two rows, and a flex child's Width control is overridden by its own
   e-con-full class. The approved design uses specific asymmetric templates, so
   they are declared here and applied as one class per section. Values are taken
   verbatim from the approved Dispatch markup.
   -------------------------------------------------------------------------- */
.e-grid[class*="hq-grid-"] { --e-con-grid-template-rows: auto; }

.hq-grid-1-600  { --e-con-grid-template-columns: 1fr 600px; }   /* seven fronts   */
.hq-grid-1-620  { --e-con-grid-template-columns: 1fr 620px; }   /* get involved   */
.hq-grid-1-1    { --e-con-grid-template-columns: 1fr 1fr; }     /* white papers   */
.hq-grid-13-1   { --e-con-grid-template-columns: 1.3fr 1fr; }   /* dashboard      */
.hq-grid-3      { --e-con-grid-template-columns: repeat(3, 1fr); }
.hq-grid-4      { --e-con-grid-template-columns: repeat(4, 1fr); }
.hq-grid-auto-340 { --e-con-grid-template-columns: 1fr 340px; } /* section header  */
.hq-grid-auto-380 { --e-con-grid-template-columns: 1fr 380px; }
.hq-grid-1-auto { --e-con-grid-template-columns: 1fr auto; }    /* white-paper row */
.hq-grid-52-1   { --e-con-grid-template-columns: 52px 1fr; }    /* front row       */

@media (max-width: 1024px) {
  .hq-grid-1-600, .hq-grid-1-620, .hq-grid-1-1, .hq-grid-13-1,
  .hq-grid-auto-340, .hq-grid-auto-380 { --e-con-grid-template-columns: 1fr; }
  .hq-grid-3 { --e-con-grid-template-columns: repeat(2, 1fr); }
  .hq-grid-4 { --e-con-grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .hq-grid-3, .hq-grid-4 { --e-con-grid-template-columns: 1fr; }
  .hq-grid-52-1 { --e-con-grid-template-columns: 40px 1fr; }
}

/* --------------------------------------------------------------------------
   18  STAT BAND
   -------------------------------------------------------------------------- */
.hq-stat .elementor-counter { text-align: left; }
.hq-stat .elementor-counter-number-wrapper { justify-content: flex-start; display: flex; }
.hq-stat .elementor-counter-title {
  margin-top: 12px;
  font-family: var(--e-global-typography-metasm-font-family), var(--hq-mono);
  font-size: var(--e-global-typography-metasm-font-size);
  font-weight: var(--e-global-typography-metasm-font-weight);
  letter-spacing: var(--e-global-typography-metasm-letter-spacing);
  text-transform: uppercase;
  text-align: left;
  color: var(--e-global-color-metatext);
}
/* --------------------------------------------------------------------------
   19  ELEMENTOR HEADER AND FOOTER  (templates "HQ – Header v1" / "HQ – Footer v1")

   A parallel implementation of section 12 for the Elementor rebuild. Section 12
   targets Gutenberg block markup (.wp-block-navigation, .wp-element-button);
   these rules target Elementor widget markup for the same visual result. Every
   value is copied from section 12 so the two are pixel-identical.

   Namespaced .hq-eheader / .hq-efooter so nothing here can affect the live
   Site Editor header and footer while both implementations coexist. Once the
   Elementor templates are activated, section 12 can be retired.

   Classes defined here:
     .hq-eheader        header root  — absolute over the hero, fixed when stuck
     .hq-eheader.is-stuck   compacted, blurred graphite bar past 120px scroll
     .hq-eheader.is-open    mobile overlay menu revealed
     .hq-elogo          logo image wrapper, fixed 120px basis
     .hq-enav           inline nav list (Icon List widget)
     .hq-ecta           hairline ghost CTA pill (Button widget)
     .hq-enavtoggle     hamburger, mobile only (Button widget)
     .hq-efooter        footer root — single mono bar
   -------------------------------------------------------------------------- */
.hq-eheader {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: transparent;
  transition: background .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
.hq-eheader.is-stuck {
  position: fixed;
  background: rgba(11,13,16,.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hq-hairline);
}
/* Padding lives here rather than on the widget so the stuck state can override
   it without !important. Both selectors carry .e-con because Elementor's own
   `.e-con { padding: 10px }` default has equal specificity and loads later. */
.e-con.hq-eheader { padding: 34px var(--hq-gutter); }
.e-con.hq-eheader.is-stuck { padding: 16px var(--hq-gutter); }

/* Link colour matches the live header's computed value, which comes from the
   theme's link colour rather than section 12's rule. Bound to the Kit's "body"
   and "text" colours, which are those exact values. */
.hq-eheader a { color: var(--e-global-color-body); text-decoration: none; }
.hq-eheader a:hover { color: var(--e-global-color-text); }

/* Logo — matches the 120px column basis of the live header. */
.hq-elogo { flex: 0 0 auto; }
.hq-elogo img { display: block; width: 120px; height: auto; }

/* Navigation — Icon List widget in inline view. */
.hq-enav .elementor-icon-list-items { gap: 26px; }
.hq-enav .elementor-icon-list-item { margin: 0; }
.hq-enav .elementor-icon-list-icon { display: none; }
.hq-enav .elementor-icon-list-text {
  padding: 0;
  font-family: var(--hq-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
}

/* CTA — hairline ghost pill. */
.hq-ecta .elementor-button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  color: var(--hq-white);
  font-family: var(--hq-sans);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  padding: 10px 20px;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.hq-ecta .elementor-button:hover {
  background: var(--hq-white);
  border-color: var(--hq-white);
  color: var(--hq-graphite);
}

/* Hamburger — hidden on desktop, shown below the tablet breakpoint. */
.hq-enavtoggle { display: none; }
.hq-enavtoggle .elementor-button {
  background: transparent;
  border: 0;
  padding: 6px;
  color: var(--hq-white);
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 1024px) {
  .hq-enavtoggle { display: block; }

  /* Nav becomes a full-screen graphite overlay, matching section 12. */
  .hq-eheader .hq-enav {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    padding: 56px var(--hq-gutter);
    background: var(--hq-graphite);
    overflow-y: auto;
  }
  .hq-eheader.is-open .hq-enav { display: block; }
  .hq-eheader.is-open .hq-enav .elementor-icon-list-items {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .hq-eheader.is-open .hq-enav .elementor-icon-list-text { font-size: 28px; }
  .hq-eheader.is-open .hq-enavtoggle { position: relative; z-index: 80; }
}

/* Footer — single mono bar. Children inherit, exactly as the block version. */
.hq-efooter {
  background: var(--hq-graphite);
  color: var(--hq-meta);
  font-family: var(--hq-mono);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hq-efooter .elementor-heading-title {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.hq-efooter a { color: var(--hq-meta); text-decoration: none; }
.hq-efooter a:hover { color: var(--hq-accent-hi); }