/* ==========================================================================
   Clear Mountain Marketing
   1. Design tokens
   2. Reset and base
   3. Utilities
   4. Header and navigation
   5. Buttons
   6. Hero
   7. Trust strip
   8. Section headings
   9. Service cards
   10. Tool marquee
   11. Process
   12. Reporting stats
   13. FAQ
   14. Contact form
   15. Interior page components
   16. Footer
   17. Breakpoints
   18. Motion and print
   ========================================================================== */

/* Self-hosted so the page makes no third-party request for type, and so the
   fonts get the same one-year cache as every other static asset. Poppins and
   Archivo are both SIL Open Font License. Only the weights the site actually
   uses are here: adding one means adding a file, not editing a URL.

   unicode-range is preserved from Google's own CSS, so a browser fetches the
   latin-ext file only if the page contains characters that need it. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivo-400-latin.woff2') 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: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivo-400-latin-ext.woff2') 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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/archivo-600-latin.woff2') 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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/archivo-600-latin-ext.woff2') 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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-700-latin.woff2') 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: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-700-latin-ext.woff2') 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;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500-latin.woff2') 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: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500-latin-ext.woff2') 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;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin.woff2') 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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin-ext.woff2') 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;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700-latin.woff2') 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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700-latin-ext.woff2') 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;
}


/* 1. Design tokens ======================================================== */

:root {
  /* Core palette */
  --obsidian: #23252F;
  --surface: #1A1C23;
  --white: #FFFFFF;
  --blue: #007AFF;
  --amber: #F0A202;
  --green: #34A853;

  /* Accessible variants.
     The brand blue (#007AFF) is roughly 4.0:1 on white, below the 4.5:1 WCAG AA
     threshold for normal text, so it is reserved for large text, fills, and
     decoration. These variants carry the text and focus work.
     Ratios below are calculated, not measured. Re-verify if a value changes. */
  --blue-text: #0B5ED7;    /* ~5.8:1 on white. Links, buttons, icons on light  */
  --blue-light: #5AA9FF;   /* ~6.2:1 on obsidian. Links and hover on dark      */
  --amber-text: #9A6400;   /* ~5.0:1 on white. Eyebrows on light               */
  /* --amber  ~7.2:1 on obsidian. Dark backgrounds only */
  /* --green  ~5.0:1 on obsidian. Dark backgrounds only */

  /* Ink */
  --ink: var(--obsidian);
  --ink-muted: #555863;    /* ~7.0:1 on white */
  --on-dark: var(--white);
  --on-dark-muted: color-mix(in srgb, var(--white) 78%, transparent);
  --hairline-dark: color-mix(in srgb, var(--white) 22%, transparent);

  /* Focus */
  --focus: var(--blue-text);

  /* Layout */
  --content-width: 1160px;
  --gutter: 24px;
  --header-h: 76px;
  --radius: 14px;
  --tap: 44px;            /* minimum touch target */

  /* Typography. Brand guide: Poppins for display and tracked labels,
     Archivo for body at 17px. Both families are on Google Fonts. */
  --font-display: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Motion */
  --dur: 180ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

/* 2. Reset and base ======================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1.0625rem;   /* 17px, per the brand type scale */
  line-height: 1.647;    /* 28/17 */
  -webkit-tap-highlight-color: color-mix(in srgb, var(--blue) 24%, transparent);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: 0;
  line-height: 1.06;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

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

/* Sections with a dark background need the light focus colour. */
.on-dark :focus-visible { outline-color: var(--amber); }

/* Anchor targets must clear the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* 3. Utilities ============================================================ */

.container {
  width: 100%;
  max-width: calc(var(--content-width) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: -100px;
  padding: 12px 18px;
  color: var(--white);
  background: var(--blue-text);
  border-radius: 6px;
  font-weight: 700;
}

.skip-link:focus { top: 16px; }

.section { padding: 104px 0; }
.section-tight { padding: 76px 0; }

.on-dark {
  color: var(--on-dark);
  background: var(--obsidian);
}

.on-surface {
  color: var(--on-dark);
  background: var(--surface);
}

/* 4. Header and navigation ================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--obsidian) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
}

/* Fallback for browsers without color-mix (pre-2023). */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--obsidian); }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
}

/* Brand minimum for the horizontal lockup is 120px wide. Below that the
   mark alone should be used instead. */
.logo-lockup {
  display: block;
  width: 330px;
  height: auto;
  aspect-ratio: 620 / 120;
}

.logo-footer .logo-lockup { width: 310px; }



.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links {
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--white);
  font-size: .9rem;
}

.nav-links a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 10px;
  border-radius: 6px;
}

.nav-links a:hover { color: var(--blue-light); }

.nav-links a[aria-current="page"] {
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--amber);
}

.menu-toggle { display: none; }

/* 5. Buttons ============================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  color: var(--white);
  background: var(--blue-text);
  border: 1px solid var(--blue-text);
  border-radius: 6px;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.button:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--blue-text) 86%, var(--white));
}

.button-small {
  min-height: var(--tap);
  padding: 0 16px;
  font-size: .82rem;
}

.button-outline {
  color: var(--amber);
  background: transparent;
  border-color: var(--amber);
}

.button-outline:hover {
  color: var(--obsidian);
  background: var(--amber);
}

/* 6. Hero ================================================================= */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-dark);
  background: var(--obsidian);   /* shows through if the video never loads */
}

/* Background footage sits under a scrim. The scrim is weighted to the left, where
   the headline and body copy sit, so white text keeps its contrast over a bright
   sky. Verify contrast against the composited pixels, not against the tokens. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Tuned by measuring the composited pixels, not by eye. Heavy on the left where the
     copy sits, much lighter on the right so the skyline actually reads. Worst-case
     contrast for the hero text is about 6.7:1, against a 4.5:1 requirement. Lightening
     the left-hand stops further starts eating that margin. */
  background:
    linear-gradient(90deg,
      rgba(35, 37, 47, .92) 0%,
      rgba(35, 37, 47, .82) 34%,
      rgba(35, 37, 47, .42) 64%,
      rgba(35, 37, 47, .32) 100%),
    linear-gradient(180deg,
      rgba(35, 37, 47, .38) 0%,
      rgba(35, 37, 47, .14) 45%,
      rgba(35, 37, 47, .52) 100%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 48px;
  min-height: 650px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--amber-text);
  font-family: var(--font-display);
  font-size: .75rem;      /* 12px, brand label scale */
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.33;
  text-transform: uppercase;
}

.on-dark .eyebrow,
.on-surface .eyebrow,
.hero .eyebrow { color: var(--amber); }

.hero h1 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  letter-spacing: -.02em;
}

.hero-intro {
  max-width: 560px;
  margin: 0;
  color: var(--on-dark-muted);
  font-size: clamp(1rem, 1.45vw, 1.15rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
}

/* Hero graphic. Grid based so it reflows instead of overlapping on phones. */
.hero-art { display: grid; }

.art-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--blue) 16%, transparent),
    color-mix(in srgb, var(--surface) 70%, transparent)
  );
}

.art-chart {
  display: block;
  width: 100%;
  height: clamp(150px, 26vw, 210px);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  /* script.js reads this to colour the canvas, so the palette stays in CSS. */
  color: var(--green);
}


.art-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.art-card {
  padding: 16px;
  border: 1px solid var(--hairline-dark);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.art-card span {
  display: block;
  color: color-mix(in srgb, var(--white) 70%, transparent);
  font-size: .72rem;
}

.art-card strong {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-size: clamp(1.2rem, 3.2vw, 1.5rem);
  line-height: 1.15;
}

.art-card .bar {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 12px;
  background: var(--green);
}

.art-card + .art-card strong { color: var(--amber); }
.art-card + .art-card .bar { width: 68%; background: var(--amber); }

/* 7. Trust strip ========================================================== */

.trust-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 108px;
}

.trust-note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .81rem;
  font-weight: 600;
}

.trust-note span {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}

.trust-marks {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 20px;
  max-width: 550px;
  color: color-mix(in srgb, var(--white) 62%, transparent);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
}

/* 7b. Industries ========================================================== */

.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* The intro sits above the grid rather than inside it. It is not an industry, and as a
   grid cell it consumed one of the three columns, which forced the card count to 2, 5 or 8
   to fill the rows cleanly. Outside the grid the cards can be any multiple of three. */
.industry-intro {
  display: flex;
  flex-direction: column;
  max-width: 680px;
  padding: 0 0 30px;
}

.industry-intro p {
  margin: 0 0 18px;
  color: var(--ink-muted);
}

.industry-intro .card-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: auto;
  color: var(--blue-text);
  font-size: .9rem;
  font-weight: 700;
}

.industry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--obsidian);
  transition: transform var(--dur) var(--ease);
}

.industry-card::before {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 0;
  content: "";
  background: var(--amber);
  transition: height var(--dur) var(--ease);
}

.industry-card:hover { transform: translateY(-5px); }
.industry-card:hover::before { height: 6px; }

.industry-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 22px;
  color: var(--blue-text);
}

.industry-card h2 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  letter-spacing: -.02em;
}

.industry-card > p {
  margin: 0 0 20px;
  color: var(--ink-muted);
  font-size: .95rem;
}

.industry-card ul {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--obsidian) 16%, transparent);
}

.industry-card li {
  padding: 9px 0 9px 18px;
  position: relative;
  font-size: .95rem;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--obsidian) 10%, transparent);
}

.industry-card li:last-child { border-bottom: 0; }

.industry-card li::before {
  position: absolute;
  left: 0;
  color: var(--amber-text);
  content: "\2022";
  font-weight: 700;
}

/* 8. Section headings ===================================================== */

.section-heading {
  max-width: 650px;
  margin-bottom: 52px;
}

.section-heading h2 {
  margin-bottom: 17px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -.02em;
}

.section-heading > p:last-child {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink-muted);
}

.on-dark .section-heading > p:last-child,
.on-surface .section-heading > p:last-child { color: var(--on-dark-muted); }

/* 9. Service cards ======================================================== */

/* Four services, so two by two rather than three across with an orphan. The 800px
   breakpoint already collapses this to one column. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: 30px;
  border: 1px solid var(--obsidian);
  transition: transform var(--dur) var(--ease);
}

.service-card::before {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 0;
  content: "";
  background: var(--amber);
  transition: height var(--dur) var(--ease);
}

.service-card:hover { transform: translateY(-5px); }
.service-card:hover::before { height: 6px; }

.service-icon {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  margin-bottom: 37px;
  color: var(--blue-text);
  border: 1px solid var(--blue-text);
  border-radius: 8px;
  font-size: 1.55rem;
  font-weight: 700;
}

.service-card h3 {
  margin-bottom: 12px;
  font-size: 1.36rem;
}

.service-card p {
  margin: 0;
  font-size: .95rem;
  color: var(--ink-muted);
}

/* margin-top:auto is what does the work: both card types are flex columns, so the link
   is pushed to the bottom of whichever card it sits in. Cards in a row stretch to match
   the tallest, so without this the link floats up behind a short list and the row of
   links reads as ragged. Industry cards were missing it. */
.service-card .card-link,
.industry-card .card-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: auto;
  padding-top: 22px;
  color: var(--blue-text);
  font-size: .9rem;
  font-weight: 700;
}

.card-link span {
  display: inline-block;
  margin-left: 6px;
  transition: transform var(--dur) var(--ease);
}

.card-link:hover span { transform: translateX(4px); }

/* 10. Tool marquee ======================================================== */

/* The home page carousel reads as a divider band, not a full section, so it
   carries tighter padding and trims the top padding of the section after it. */
.marquee-band { padding: 56px 0; }
.marquee-band + .section { padding-top: 24px; }

.tool-marquee {
  overflow: hidden;
  border-top: 1px solid var(--obsidian);
  border-bottom: 1px solid var(--obsidian);
}

.tool-track {
  display: flex;
  width: max-content;
  animation: tool-scroll 32s linear infinite;
}

.tool-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 210px;
  min-height: 96px;
  padding: 0 28px;
  border-right: 1px solid var(--obsidian);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Vendor logos. Shown in each brand's own colours, which is both what the band is for and
   what the vendors' brand guidelines require: Google in particular does not permit recolouring
   its logos, and three of these five are Google properties.

   Height is set per logo rather than once for all of them. These files are structurally
   different lockups: Ahrefs is a single-line wordmark, the rest stack an icon above two lines
   of type. Normalising the bounding box would shrink the stacked wordmarks to the point of
   illegibility, so each is sized to bring its type to a comparable optical size instead. */
.tool-logo {
  width: auto;
  flex: none;
  height: 40px;
}

.tool-logo--wordmark { height: 20px; }

/* The accent must repeat on the same period as one half of the track. The marquee loops
   by translating -50% across two identical halves, so if the pattern does not line up with
   the half length the duplicate colours differently and the wrap becomes visible. Five
   platforms per half, so 5n+3 accents the third of each. Change this if the count changes. */
.tool-item:nth-child(5n+3) { color: var(--blue-text); }

@keyframes tool-scroll {
  to { transform: translateX(-50%); }
}

/* 11. Process ============================================================= */

.process-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: start;
  gap: 90px;
}

.process-grid .section-heading { margin: 0; }

.process-list {
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;
}

.process-list li {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 20px;
  padding: 25px 0;
  border-top: 1px solid var(--hairline-dark);
}

.process-list li:last-child { border-bottom: 1px solid var(--hairline-dark); }

.process-list .step {
  color: var(--amber);
  font-size: .83rem;
  font-weight: 700;
}

.process-list h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.process-list p {
  margin: 0;
  color: var(--on-dark-muted);
  font-size: .95rem;
}

/* 12. Reporting stats ===================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stat {
  padding: 8px 42px;
  border-left: 1px solid var(--hairline-dark);
}

.stat:first-child {
  padding-left: 0;
  border: 0;
}

.stat strong {
  display: block;
  color: var(--green);
  font-size: clamp(2.7rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.02em;
}

.stat span {
  display: block;
  margin-top: 14px;
  color: var(--on-dark-muted);
  font-size: .9rem;
  font-weight: 600;
}

/* 13. FAQ ================================================================= */

.faq-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 90px;
}

.faq-grid .section-heading { margin: 0; }

.faq-list { border-top: 1px solid var(--obsidian); }

.faq-list details { border-bottom: 1px solid var(--obsidian); }

.faq-list summary {
  position: relative;
  padding: 22px 40px 22px 0;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 4px;
  translate: 0 -50%;
  color: var(--blue-text);
  content: "+";
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}

.faq-list details[open] summary::after { content: "\2212"; }

.faq-list details p {
  max-width: 640px;
  margin: -2px 0 23px;
  color: var(--ink-muted);
  font-size: .95rem;
}

/* 14. Contact form ======================================================== */

/* One column: the copy sets up the form, then the form. Side by side made sense when the
   form was ours and could be sized to the column. The embedded form has a width Google
   controls, so a narrow column just squeezed it. */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

/* The intro shares the form's column rather than running to the full container width.
   Same 700px, same centring, so the two blocks share a left and right edge. The text
   inside stays left-aligned: centred prose is harder to read, and the alignment problem
   was the block sitting off to one side, not the text. */
.contact-grid > div:first-child {
  max-width: 700px;
  margin-inline: auto;
}

.contact-grid h1,
.contact-grid h2 {
  margin: 0 0 17px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -.02em;
}

.contact-intro {
  max-width: 440px;
  margin: 0;
  color: var(--on-dark-muted);
}

.contact-form {
  display: grid;
  gap: 18px;
  padding: 31px;
  color: var(--ink);
  background: var(--white);
  border-radius: var(--radius);
}

.contact-form label {
  display: grid;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* 16px minimum stops iOS Safari zooming the page on focus. */
.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--obsidian);
  border-radius: 0;
  font-family: inherit;
  line-height: 1.4;
  outline: 0;
}

.contact-form textarea {
  min-height: 96px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--blue-text);
  border-bottom-width: 2px;
  padding-bottom: 9px;
}

.contact-form input:user-invalid,
.contact-form textarea:user-invalid { border-color: #B3261E; }

.contact-form .button {
  width: fit-content;
  margin-top: 4px;
}

.form-note {
  margin: 0;
  color: var(--ink-muted);
  font-size: .78rem;
}

.form-status {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
}

.form-status:empty { display: none; }

/* The note belongs to the form, so it tracks the form rather than the copy above it. */
.contact-grid .form-note {
  max-width: 700px;
  margin-inline: auto;
}

/* Embedded Google Form.
   A cross-origin iframe cannot tell us its content height and Google sends no resize
   message, so the height is fixed here and the form scrolls inside it when it does not
   fit. Taller on narrow screens because the fields stack. The white ground is Google's,
   not ours: giving the wrapper the same colour stops the embed reading as a pale panel
   dropped onto a dark section. */
.gform-embed {
  display: block;
  width: 100%;
  /* Google caps its own content width, so a wider frame only adds white margin either
     side of the form. Capping it keeps the block proportionate to the copy above it,
     and centring it stops a 700px block sitting against the left edge of a 1160px
     container, which reads as misalignment rather than as a choice. */
  max-width: 700px;
  margin-inline: auto;
  height: 1480px;
  border: 0;
  border-radius: 10px;
  background: #fff;
}

@media (max-width: 900px) {
  .gform-embed { height: 1620px; }
}

@media (max-width: 560px) {
  .gform-embed { height: 1560px; }
}

/* Status colours are classes, not inline styles. The Content-Security-Policy runs
   without 'unsafe-inline', and keeping every colour in the stylesheet means nothing on
   the page depends on that staying permitted. Both are checked for contrast against the
   dark panel the form sits on. */
.form-status.is-error { color: #FF9A92; }
.form-status.is-ok { color: #7EE2A8; }

/* Honeypot. Moved off-screen rather than display:none, which some bots detect and
   skip. Hidden from assistive tech by aria-hidden on the wrapper, and taken out of
   the tab order on the input. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 15. Interior page components ============================================ */

.page-hero {
  color: var(--on-dark);
  background: var(--obsidian);
  padding: 76px 0 68px;
}

/* Blog index: filter pills and post cards ================================= */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

/* Real buttons, so they are keyboard reachable and announce their state. aria-pressed
   carries the selection for assistive tech; the class only carries the paint. */
.filter-pill {
  min-height: var(--tap);
  padding: 0 18px;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--obsidian) 26%, transparent);
  border-radius: 999px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.filter-pill:hover { color: var(--ink); border-color: var(--ink-muted); }

.filter-pill.is-active {
  color: var(--blue-text);
  border-color: var(--blue-text);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.post-card {
  padding: 28px;
  border: 1px solid var(--obsidian);
  border-radius: 10px;
  transition: transform var(--dur) var(--ease);
}

.post-card:hover { transform: translateY(-2px); }

.post-category {
  margin: 0 0 12px;
  color: var(--amber-text);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.post-title {
  margin: 0 0 12px;
  font-size: 1.32rem;
  letter-spacing: -.01em;
}

/* The whole card is not a link: a card-wide anchor swallows text selection and reads as
   one enormous link target. The title is the link, and the card is the hover affordance. */
.post-title a { color: var(--ink); }
.post-title a:hover { color: var(--blue-text); }

.post-excerpt {
  margin: 0 0 18px;
  color: var(--ink-muted);
  font-size: .97rem;
}

.post-meta {
  margin: 0;
  color: var(--ink-muted);
  font-size: .82rem;
}

.filter-empty {
  margin: 28px 0 0;
  color: var(--ink-muted);
}

/* Article pages =========================================================== */

.prose--article { max-width: 720px; }
.prose--article h2 { margin-top: 44px; }

.article-lede {
  font-size: 1.16rem;
  color: var(--ink);
}

.article-meta {
  margin: 0;
  color: var(--on-dark-muted);
  font-size: .88rem;
}

@media (max-width: 700px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card { padding: 22px; }
}

/* Team cards. Placeholder state is styled to look unfinished on purpose: a dashed
   border and an amber notice, so nobody mistakes it for finished work or ships it by
   accident. When the real bios land, drop .team-warning and the dashed rule. */
.team-warning {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  color: var(--ink-muted);
  font-size: .9rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.team-card {
  padding: 26px;
  border: 1px dashed color-mix(in srgb, var(--obsidian) 34%, transparent);
  border-radius: 10px;
}

.team-avatar {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
}

.team-card h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.team-role {
  margin: 0 0 12px;
  color: var(--amber-text);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.team-bio {
  margin: 0;
  color: var(--ink-muted);
  font-size: .95rem;
}

@media (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Pillar page banners.
   The image is a real <img> rather than a CSS background so the build can stamp a content
   hash onto its URL. Banner files are served immutable for a year; without a versioned URL,
   replacing one would never reach anyone who had already visited.

   A scrim sits between the image and the copy. The generated banners are already dark and
   quiet on the left, so this is lighter than the hero video's, but it is not optional: the
   headline is white and the image is not under our control once it is swapped. */
.page-hero--banner {
  position: relative;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.page-hero--banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(35, 37, 47, .97) 0%,
      rgba(35, 37, 47, .93) 34%,
      rgba(35, 37, 47, .62) 66%,
      rgba(35, 37, 47, .48) 100%);
}

.page-hero--banner > .container {
  position: relative;
  z-index: 1;
}

/* About: the mark itself, oversized and barely there. No scrim needed because it is drawn
   at low opacity on the existing background rather than over a photograph. */
.page-hero--mark {
  position: relative;
  overflow: hidden;
}

.page-hero-mark {
  position: absolute;
  top: 50%;
  right: -40px;
  width: 420px;
  height: auto;
  transform: translateY(-50%);
  opacity: .07;
}

.page-hero--mark > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .page-hero-mark { width: 300px; right: -70px; opacity: .05; }
}

@media (max-width: 700px) {
  .page-hero-mark { display: none; }
}

/* Below this the image is cropped so hard that the composition is lost and only its
   busiest part survives, which is the part that hurts legibility. Fall back to the flat
   background instead of shipping a worse version of the design. */
@media (max-width: 700px) {
  .page-hero-bg { display: none; }
  .page-hero--banner::after { display: none; }
}

.page-hero h1 {
  max-width: 900px;
  margin: 0 0 20px;
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  letter-spacing: -.02em;
}

.page-hero p {
  max-width: 640px;
  margin: 0;
  color: var(--on-dark-muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}

.breadcrumb {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: color-mix(in srgb, var(--white) 62%, transparent);
  font-size: .78rem;
}

.breadcrumb a { color: var(--blue-light); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; }

.prose {
  max-width: 720px;
}

.prose h2 {
  margin: 48px 0 14px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -.01em;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  margin: 32px 0 10px;
  font-size: 1.15rem;
}

.prose p,
.prose li {
  color: var(--ink-muted);
}

.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }

.prose a {
  color: var(--blue-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 72px;
  align-items: start;
}

.panel {
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--obsidian) 18%, transparent);
  border-radius: var(--radius);
  background: #F7F8FA;
}

.panel h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
}

.panel ul {
  padding-left: 18px;
  margin: 0;
  color: var(--ink-muted);
  font-size: .94rem;
}

.panel li + li { margin-top: 8px; }

.cta-band {
  color: var(--on-dark);
  background: var(--surface);
  padding: 72px 0;
}

.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cta-band h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: -.015em;
}

.cta-band p {
  max-width: 520px;
  margin: 12px 0 0;
  color: var(--on-dark-muted);
}

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.note-card {
  padding: 26px;
  border: 1px solid color-mix(in srgb, var(--obsidian) 18%, transparent);
  border-radius: var(--radius);
}

.note-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.note-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: .94rem;
}

.empty-state {
  padding: 40px;
  border: 1px dashed color-mix(in srgb, var(--obsidian) 30%, transparent);
  border-radius: var(--radius);
  text-align: center;
  color: var(--ink-muted);
}

.empty-state p { margin: 0 0 6px; }

/* 16. Footer ============================================================== */

.site-footer {
  color: var(--on-dark);
  background: var(--surface);
  padding-top: 70px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr .75fr .75fr 1.1fr;
  gap: 40px;
}

.footer-copy {
  max-width: 280px;
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--white) 66%, transparent);
  font-size: .9rem;
}

.footer-heading {
  margin: 0 0 17px;
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer li { font-size: .9rem; }

.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: color-mix(in srgb, var(--white) 76%, transparent);
}

.site-footer li a:hover { color: var(--blue-light); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 52px;
  /* padding-block, never the shorthand: this element also carries .container, whose
     inline padding is the page gutter. `padding: 21px 0` reset it to zero and put the
     footer's bottom row flush against both screen edges at every width. */
  padding-block: 21px;
  border-top: 1px solid color-mix(in srgb, var(--white) 13%, transparent);
  color: color-mix(in srgb, var(--white) 60%, transparent);
  font-size: .82rem;
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Utilities that exist so no element needs a `style` attribute. Inline styles would
   force `style-src 'unsafe-inline'` in the Content-Security-Policy; without them the
   policy can stay strict. Do not reintroduce inline styles. */

.t-blue { color: var(--blue-text); }
.t-blue-strong { color: var(--blue-text); font-weight: 600; }
.t-light { color: var(--blue-light); }
.t-light-strong { color: var(--blue-light); font-weight: 600; }
.stack-gap { margin-top: 24px; }
.panel-note { text-align: left; margin-bottom: 40px; }
.svg-sprite { position: absolute; width: 0; height: 0; }
.process-more { grid-column: 2; margin: 24px 0 0; }

@media (max-width: 980px) {
  .process-more { grid-column: 1; }
}


/* Cookie consent banner. Shown only where a choice is required, and only when
   analytics are configured. Non-modal: it sits above the page without blocking it. */

.consent {
  position: fixed;
  z-index: 60;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--on-dark);
  background: var(--surface);
  border-top: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
  padding-bottom: env(safe-area-inset-bottom);
}

.consent-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  max-width: calc(var(--content-width) + (var(--gutter) * 2));
  margin-inline: auto;
  padding: 18px max(var(--gutter), env(safe-area-inset-left));
}

.consent-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
}

.consent-text {
  max-width: 68ch;
  margin: 0;
  color: var(--on-dark-muted);
  font-size: .9rem;
  line-height: 1.5;
}

.consent-text a { color: var(--blue-light); text-decoration: underline; text-underline-offset: 3px; }

.consent-actions {
  display: flex;
  flex: none;
  gap: 10px;
}

/* Reject carries the same visual weight as Accept: same size, same fill, same font,
   differing only in colour. Regulators treat a quiet outlined "reject" beside a bold
   "accept" as nudging, so neither is given prominence here. */
.consent-reject {
  color: var(--on-dark);
  background: color-mix(in srgb, var(--white) 16%, transparent);
  border-color: color-mix(in srgb, var(--white) 16%, transparent);
}

.consent-reject:hover {
  background: color-mix(in srgb, var(--white) 26%, transparent);
  border-color: color-mix(in srgb, var(--white) 26%, transparent);
}

/* 17. Breakpoints ========================================================= */

@media (max-width: 980px) {
  .process-grid,
  .faq-grid,
  .contact-grid,
  .split { grid-template-columns: 1fr; gap: 40px; }

  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-intro { padding: 0 0 24px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* Navigation collapses earlier than the rest of the layout: five links plus
   the CTA button stop fitting well below about 960px. */
@media (max-width: 960px) {
  :root { --header-h: 68px; }

  /* The lockup wordmark is two lines, so the sub-word gets small quickly.
     Keep it as large as the header allows beside the hamburger. */
  .logo-lockup { width: 244px; }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: var(--tap);
    height: var(--tap);
    padding: 0 9px;
    color: var(--white);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }

  .menu-toggle span:not(.sr-only) {
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu {
    position: absolute;
    top: 100%;              /* sits flush under the header and its border */
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 18px max(var(--gutter), env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid color-mix(in srgb, var(--white) 13%, transparent);
    overscroll-behavior: contain;
  }

  .nav-menu.is-open { display: flex; }

  .nav-links {
    flex-direction: column;
    gap: 2px;
  }

  .nav-links a {
    min-height: 52px;
    padding: 0 12px;
    font-size: 1rem;
  }

  .nav-links a[aria-current="page"] {
    background: color-mix(in srgb, var(--white) 8%, transparent);
    box-shadow: inset 3px 0 0 var(--amber);
  }

  .nav-menu .button { width: 100%; }
}

@media (max-width: 800px) {
  :root { --gutter: 18px; }

  /* Narrow screens crop hard into the footage, so the scrim needs to be flatter
     and heavier to keep the copy readable across the whole width. */
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(35, 37, 47, .82) 0%,
        rgba(35, 37, 47, .70) 45%,
        rgba(35, 37, 47, .84) 100%);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    /* Same reason as .footer-bottom: .container supplies the gutter on this element,
       and the shorthand was zeroing it, so the hero copy ran edge to edge on phones. */
    padding-block: 72px 56px;
    gap: 40px;
  }

  .hero-art { max-width: 520px; }

  .trust-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
    padding: 27px 0;
  }

  .trust-marks {
    width: 100%;
    max-width: none;
  }

  .section { padding: 72px 0; }
  .section-tight { padding: 56px 0; }
  .marquee-band { padding: 40px 0; }
  .marquee-band + .section { padding-top: 16px; }
  .section-heading { margin-bottom: 37px; }
  .service-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }

  .stats { grid-template-columns: 1fr; gap: 27px; }

  .stat,
  .stat:first-child {
    padding: 0 0 27px;
    border: 0;
    border-bottom: 1px solid var(--hairline-dark);
  }

  .stat:last-child { padding-bottom: 0; border: 0; }

  .cta-band-inner { flex-direction: column; align-items: flex-start; }

  .page-hero { padding: 56px 0 52px; }

  .consent-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .consent-actions { justify-content: stretch; }
  .consent-actions .button { flex: 1; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { padding-top: 55px; }
  .footer-bottom { margin-top: 40px; }
}

/* Phones ==================================================================
   Below this width the page stops being a narrower desktop and becomes its own
   layout. The 800px block above collapses the grids to one column, which is
   correct but not sufficient: stacked full-width blocks separated by desktop
   spacing read as one long undifferentiated column. Three things change here.

   Decoration is dropped rather than stacked. Spacing tightens, because 72px
   between sections is a quarter of a phone screen spent on nothing. And actions
   become full width, so they read as deliberate targets instead of as leftovers
   of a horizontal row. */
@media (max-width: 560px) {

  /* The hero art is aria-hidden decoration and costs roughly half a screen before
     any content, pushing the first real section well past the fold. It earns its
     place on a desktop, where it sits beside the copy rather than under it. */
  .hero-art { display: none; }

  .hero-grid {
    padding-block: 52px 44px;
    gap: 0;                       /* only one child remains once the art is gone */
  }

  .hero h1 {
    margin-bottom: 18px;
    font-size: 2.3rem;            /* the clamp floor is 2.6rem, which is a line too many here */
  }

  .hero-intro { font-size: 1rem; }

  /* Equal, full-width targets. Auto-width buttons of different lengths stacked to
     the left look like a wrapped row rather than a considered mobile action set. */
  .hero-actions { margin-top: 26px; gap: 10px; }
  .hero-actions .button { width: 100%; }

  /* Section rhythm. Tighter, and the heading block no longer eats a third of the
     screen before the content it introduces. */
  .section { padding: 52px 0; }
  .section-tight { padding: 44px 0; }
  .cta-band { padding: 52px 0; }
  .section-heading { margin-bottom: 26px; }

  .section-heading h2 {
    margin-bottom: 12px;
    font-size: 1.85rem;           /* clamp floor is 2rem and never scales down on a phone */
  }

  .section-heading > p:last-child { font-size: .97rem; }

  .service-card { padding: 22px; }

  .service-card h3 {
    margin-bottom: 8px;
    font-size: 1.22rem;
  }

  /* The number column is a fixed 68px on desktop, which is a fifth of the usable width
     on a phone and squeezes the step copy into a narrow ragged measure. Sizing it to its
     content keeps the number aligned with the heading and gives the text back ~56px. */
  .process-list li {
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 20px 0;
  }

  /* 37px under a 45px icon is desktop breathing room. Stacked on a phone it is just
     height, three times over. */
  .service-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    font-size: 1.3rem;
  }

  .stats { gap: 20px; }
  .stat, .stat:first-child { padding-bottom: 20px; }

  .cta-band-inner { gap: 20px; }
  .cta-band-inner .button { width: 100%; }

  /* Every primary action on a phone is a full-width target. Mixed auto-width buttons
     left-aligned under full-width fields read as an afterthought. */
  .contact-form .button { width: 100%; }
}

@media (max-width: 520px) {
  .trust-marks {
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: flex-start;
    font-size: .74rem;
  }

  .field-row { grid-template-columns: 1fr; }
  .contact-form { padding: 22px; }
  /* auto, not a fixed column: the number only needs its own width, and on a 375px
     screen a 44px gutter costs the step copy a word per line. */
  .process-list li { grid-template-columns: auto 1fr; gap: 12px; }
  .panel { padding: 22px; }
  /* .tool-item, not .tool-track span: the marquee items became .tool-item when the
     logos went in, which left this rule matching nothing. */
  .tool-item { min-width: 168px; min-height: 84px; }
}

/* 18. Motion and print ==================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .tool-track { animation: none; }
}

@media print {
  .site-header,
  .menu-toggle,
  .cta-band,
  .tool-marquee,
  .hero-art { display: none; }

  body { color: #000; background: #fff; }
  .hero, .page-hero, .on-dark, .on-surface, .site-footer { color: #000; background: #fff; }
  .section { padding: 24px 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}