/* ============================================================
   assets/style.css
   Shared stylesheet used by every DealerGTM page.
   Consolidates CSS that is identical across all pages:
   - sticky "Book a Call" button
   - site navigation (#nav)
   - site footer (#footer)
   Page-specific styles remain inline on each page.
   ============================================================ */

/* ---- Sticky Book a Call button ---- */
  #sticky-book-call {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 1200;
    box-shadow: 0 10px 30px rgba(0,0,0,0.24);
  }
  @media (max-width: 640px) {
    #sticky-book-call {
      padding: 0.7rem 1.1rem;
      font-size: 0.82rem;
      right: 1rem;
      bottom: 1rem;
    }
  }

/* ---- Site navigation ---- */
    #nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: var(--brand-bg, #ffffff);
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
      font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    }

    #nav.scrolled {
      border-color: rgba(17, 17, 17, 0.08);
      box-shadow: 0 2px 20px rgba(17, 17, 17, 0.06);
    }

    #nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }

    #nav-logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      text-decoration: none;
      height: 40px;
    }

    #nav-logo img {
      height: 40px;
      width: auto;
      max-width: 180px;
      object-fit: contain;
      display: block;
    }

    #nav-links {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    #nav-links > li {
      position: relative;
    }

    #nav-links > li > a,
    #nav-links > li > button {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.5rem 0.75rem;
      font-family: var(--font-body, 'Inter', system-ui, sans-serif);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--brand-fg, #111111);
      text-decoration: none;
      background: none;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: color 0.2s ease, background 0.2s ease;
      white-space: nowrap;
      line-height: 1;
    }

    #nav-links > li > a:hover,
    #nav-links > li > button:hover {
      color: var(--brand-accent, #cd3e2d);
      background: rgba(205, 62, 45, 0.06);
    }

    #nav-links > li > a.active,
    #nav-links > li > button.active {
      color: var(--brand-accent, #cd3e2d);
    }

    .nav-dropdown-arrow {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    .nav-has-dropdown:hover .nav-dropdown-arrow,
    .nav-has-dropdown.open .nav-dropdown-arrow {
      transform: rotate(180deg);
    }

    .nav-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 260px;
      background: var(--brand-bg, #ffffff);
      border: 1px solid rgba(17, 17, 17, 0.08);
      border-radius: 10px;
      box-shadow: 0 8px 32px rgba(17, 17, 17, 0.1), 0 2px 8px rgba(17, 17, 17, 0.06);
      padding: 0.5rem;
      list-style: none;
      margin: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
      pointer-events: none;
    }

    .nav-has-dropdown:hover .nav-dropdown,
    .nav-has-dropdown.open .nav-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .nav-dropdown li a {
      display: block;
      padding: 0.55rem 0.9rem;
      font-family: var(--font-body, 'Inter', system-ui, sans-serif);
      font-size: 0.84rem;
      font-weight: 450;
      color: var(--brand-fg, #111111);
      text-decoration: none;
      border-radius: 6px;
      transition: color 0.2s ease, background 0.2s ease;
      line-height: 1.4;
    }

    .nav-dropdown li a:hover {
      color: var(--brand-accent, #cd3e2d);
      background: rgba(205, 62, 45, 0.06);
    }

    .nav-dropdown li a.active {
      color: var(--brand-accent, #cd3e2d);
      background: rgba(205, 62, 45, 0.06);
    }

    #nav-cta {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    #nav-cta a {
      display: inline-flex;
      align-items: center;
      padding: 0.55rem 1.25rem;
      background: var(--brand-accent, #cd3e2d);
      color: #ffffff;
      font-family: var(--font-body, 'Inter', system-ui, sans-serif);
      font-size: 0.875rem;
      font-weight: 600;
      text-decoration: none;
      border-radius: 7px;
      transition: background 0.2s ease, transform 0.15s ease;
      white-space: nowrap;
    }

    #nav-cta a:hover {
      background: var(--brand-accent-2, #942d20);
      transform: translateY(-1px);
    }

    #nav-mobile-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: none;
      border: none;
      cursor: pointer;
      border-radius: 6px;
      color: var(--brand-fg, #111111);
      transition: background 0.2s ease;
      flex-shrink: 0;
    }

    #nav-mobile-toggle:hover {
      background: rgba(17, 17, 17, 0.06);
    }

    #nav-mobile-toggle svg {
      width: 22px;
      height: 22px;
      display: block;
    }

    #nav-mobile-menu {
      display: none;
      position: fixed;
      top: 68px;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--brand-bg, #ffffff);
      overflow-y: auto;
      padding: 1rem 1.5rem 2rem;
      border-top: 1px solid rgba(17, 17, 17, 0.08);
      z-index: 999;
    }

    #nav-mobile-menu.open {
      display: block;
    }

    .nav-mobile-item {
      border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    }

    .nav-mobile-item:last-child {
      border-bottom: none;
    }

    .nav-mobile-link,
    .nav-mobile-parent-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.875rem 0;
      font-family: var(--font-body, 'Inter', system-ui, sans-serif);
      font-size: 1rem;
      font-weight: 500;
      color: var(--brand-fg, #111111);
      text-decoration: none;
      background: none;
      border: none;
      cursor: pointer;
      width: 100%;
      text-align: left;
      transition: color 0.2s ease;
    }

    .nav-mobile-link:hover,
    .nav-mobile-parent-link:hover {
      color: var(--brand-accent, #cd3e2d);
    }

    .nav-mobile-link.active,
    .nav-mobile-parent-link.active {
      color: var(--brand-accent, #cd3e2d);
    }

    .nav-mobile-parent-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0.875rem 0;
      font-family: var(--font-body, 'Inter', system-ui, sans-serif);
      font-size: 1rem;
      font-weight: 500;
      color: var(--brand-fg, #111111);
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      transition: color 0.2s ease;
    }

    .nav-mobile-parent-btn:hover {
      color: var(--brand-accent, #cd3e2d);
    }

    .nav-mobile-arrow {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      transition: transform 0.2s ease;
      color: currentColor;
    }

    .nav-mobile-item.open .nav-mobile-arrow {
      transform: rotate(180deg);
    }

    .nav-mobile-sub {
      display: none;
      padding: 0 0 0.5rem 1rem;
    }

    .nav-mobile-item.open .nav-mobile-sub {
      display: block;
    }

    .nav-mobile-sub a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 0;
      font-family: var(--font-body, 'Inter', system-ui, sans-serif);
      font-size: 0.9rem;
      font-weight: 450;
      color: var(--brand-fg, #111111);
      text-decoration: none;
      transition: color 0.2s ease;
      opacity: 0.8;
    }

    .nav-mobile-sub a::before {
      content: '';
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--brand-accent, #cd3e2d);
      flex-shrink: 0;
      opacity: 0.6;
    }

    .nav-mobile-sub a:hover {
      color: var(--brand-accent, #cd3e2d);
      opacity: 1;
    }

    .nav-mobile-sub a.active {
      color: var(--brand-accent, #cd3e2d);
      opacity: 1;
    }

    .nav-mobile-cta {
      margin-top: 1.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid rgba(17, 17, 17, 0.08);
    }

    .nav-mobile-cta a {
      display: block;
      text-align: center;
      padding: 0.875rem 1.5rem;
      background: var(--brand-accent, #cd3e2d);
      color: #ffffff;
      font-family: var(--font-body, 'Inter', system-ui, sans-serif);
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      border-radius: 8px;
      transition: background 0.2s ease;
    }

    .nav-mobile-cta a:hover {
      background: var(--brand-accent-2, #942d20);
    }

    @media (max-width: 900px) {
      #nav-links,
      #nav-cta {
        display: none;
      }

      #nav-mobile-toggle {
        display: flex;
      }
    }

    @media (min-width: 901px) {
      #nav-mobile-menu {
        display: none !important;
      }
    }

    /* ── ADDED: brand group (logo + MOTM credit line), tightened nav-links, sticky elements ── */
    #nav-brand-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 1px;
      flex-shrink: 0;
    }
    #nav-motm-line {
      display: inline-block;
      font-family: var(--font-body, 'Inter', system-ui, sans-serif);
      font-size: 0.66rem;
      font-weight: 500;
      color: var(--brand-fg-tertiary, #767676);
      text-decoration: none;
      white-space: nowrap;
      line-height: 1.2;
      transition: color 0.2s ease;
    }
    #nav-motm-line strong { font-weight: 700; color: var(--brand-fg, #111111); }
    #nav-motm-line:hover, #nav-motm-line:hover strong { color: var(--brand-accent, #cd3e2d); }

    #nav-links { gap: 0.1rem; }
    #nav-links > li > a,
    #nav-links > li > button {
      padding: 0.5rem 0.55rem;
      font-size: 0.8rem;
    }
    #nav-cta a { padding: 0.55rem 1rem; font-size: 0.82rem; }

    @media (max-width: 640px) {
      #nav-motm-line { font-size: 0.62rem; }
    }
  

/* ---- Site footer ---- */
    #footer {
      position: relative;
      z-index: 1;
      background: #111111;
      color: rgba(255, 255, 255, 0.75);
      font-family: var(--font-body, 'Inter', system-ui, sans-serif);
      padding: 4rem clamp(1.25rem, 5vw, 2.5rem) 2rem;
      margin-top: auto;
    }

    #footer-inner {
      max-width: 1280px;
      margin: 0 auto;
    }

    #footer-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 3rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    #footer-brand {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    #footer-logo {
      display: inline-block;
      height: 36px;
    }

    #footer-logo img {
      height: 36px;
      width: auto;
      max-width: 160px;
      object-fit: contain;
      display: block;
    }

    #footer-tagline {
      font-size: 0.875rem;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.55);
      max-width: 260px;
    }

    #footer-contact-list {
      list-style: none;
      margin: 0.5rem 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    #footer-contact-list li a {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.84rem;
      color: rgba(255, 255, 255, 0.55);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    #footer-contact-list li a:hover {
      color: var(--brand-accent, #cd3e2d);
    }

    #footer-contact-list li a svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      opacity: 0.6;
    }

    .footer-col-heading {
      font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.35);
      margin: 0 0 1.25rem;
    }

    .footer-col-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .footer-col-links li a {
      font-size: 0.875rem;
      color: rgba(255, 255, 255, 0.65);
      text-decoration: none;
      transition: color 0.2s ease;
      line-height: 1.4;
    }

    .footer-col-links li a:hover {
      color: var(--brand-accent, #cd3e2d);
    }

    #footer-bottom {
      padding-top: 1.75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    #footer-copyright {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.3);
    }

    #footer-accent-bar {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    #footer-accent-bar span {
      display: block;
      height: 3px;
      border-radius: 2px;
      background: var(--brand-accent, #cd3e2d);
    }

    #footer-accent-bar span:nth-child(1) { width: 24px; opacity: 1; }
    #footer-accent-bar span:nth-child(2) { width: 14px; opacity: 0.55; }
    #footer-accent-bar span:nth-child(3) { width: 8px; opacity: 0.28; }

    @media (max-width: 960px) {
      #footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
      }

      #footer-brand {
        grid-column: 1 / -1;
      }

      #footer-tagline {
        max-width: 100%;
      }
    }

    @media (max-width: 560px) {
      #footer {
        padding: 3rem 1.25rem 1.75rem;
      }

      #footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      #footer-brand {
        grid-column: auto;
      }

      #footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
      }
    }

    #footer-motm-line {
      display: inline-block;
      margin-top: 0.25rem;
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.45);
      text-decoration: none;
    }
    #footer-motm-line strong { color: rgba(255, 255, 255, 0.78); font-weight: 600; }
    #footer-motm-line:hover, #footer-motm-line:hover strong { color: var(--brand-accent, #cd3e2d); }
  


/* ---- Global image/svg/video reset (was duplicated inline on every page) ---- */
img,svg,video{max-width:100%;height:auto;display:block}

/* ---- Legacy hero override block (present on 28/29 pages; superseded by each
   page's own later .page-hero rules, kept here verbatim for zero visual change) ---- */

@media (prefers-reduced-motion: reduce) {

      .page-hero-bg { animation: none; }
}

@media (max-width: 640px) {

      .page-hero { min-height: 100svh; }

      .page-hero h1 { font-size: clamp(1.9rem, 7vw, 2.5rem); }
}



    /* ─── HERO ───────────────────────────────────────────────────────────── */
    .page-hero {
      position: relative;
      min-height: 92vh;
      display: flex;
      align-items: center;
      padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5rem));
      padding-bottom: clamp(4rem, 7vw, 7rem);
      overflow: hidden;
    }


    .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.75rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.025em;
      color: #ffffff;
      margin-bottom: 1.75rem;
      text-shadow: 0 2px 20px rgba(0,0,0,0.4);
    }


    .page-hero h1 .accent-word {
      color: var(--brand-accent);
    }


    .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/hero-channel-systems.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.03);
      animation: heroZoom 22s ease-in-out infinite alternate;
    }


    .page-hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(105deg, rgba(10,10,14,0.82) 0%, rgba(10,10,14,0.58) 55%, rgba(10,10,14,0.32) 100%),
        linear-gradient(to top, rgba(10,10,14,0.6) 0%, transparent 45%);
    }


    .page-hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
    }


    .page-hero-inner {
      max-width: 780px;
    }


    .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1.25rem;
      padding: 0.35rem 0.9rem;
      border: 1px solid rgba(205,62,45,0.5);
      border-radius: 2px;
      background: rgba(205,62,45,0.08);
    }


    .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
    }

@keyframes heroZoom {
      from { transform: scale(1.03); }
      to   { transform: scale(1.08); }
    }


/* ---- Split-band image fix (present on all pages) ---- */
.split-band{align-items:stretch}.split-image-col img{height:100%;object-fit:cover}

/* ---- Contact form popup/modal (CTA buttons open the existing on-page contact form here instead of navigating away) ---- */
.contact-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(17, 17, 17, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  overflow-y: auto;
}
.contact-modal-overlay[hidden] { display: none; }
.contact-modal-dialog {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 2.5rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}
.contact-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(17, 17, 17, 0.06);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.contact-modal-close:hover { background: rgba(17, 17, 17, 0.12); }
body.contact-modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .contact-modal-dialog { padding: 1.75rem 1.25rem; border-radius: 8px; }
}


/* ==================== about.html (scope: .page-about) ==================== */
/* ── TOKENS ─────────────────────────────────────────────────── */
html.page-about {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --canvas: #f7f6f5;
      --panel: #ffffff;
      --panel-alt: #f0efed;
      --panel-dark: #111111;
      --text-primary: #111111;
      --text-secondary: #555555;
      --text-tertiary: #888888;
      --border: rgba(17,17,17,0.10);
      --border-strong: rgba(17,17,17,0.18);

      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

      --container-max: 1200px;
      --container-wide: 1400px;
      --gap: clamp(1.5rem, 4vw, 3rem);
      --section-py: clamp(4rem, 8vw, 7rem);
    }
/* ── RESET ──────────────────────────────────────────────────── */
html.page-about *,
html.page-about *::before,
html.page-about *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-about { scroll-behavior: smooth; overflow-x: clip; }
html.page-about body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-about img,
html.page-about svg,
html.page-about video { max-width: 100%; height: auto; display: block; }
html.page-about a { color: inherit; text-decoration: none; }
html.page-about ul { list-style: none; }
/* ── PAGE FADE IN ───────────────────────────────────────────── */
html.page-about body { animation: pageFadeIn__page-about 0.5s var(--ease-out) both; }
@keyframes pageFadeIn__page-about { from { opacity: 0; } to { opacity: 1; } }
/* ── LAYOUT ─────────────────────────────────────────────────── */
html.page-about .container {
      width: 100%;
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-about .container--wide {
      max-width: var(--container-wide);
    }
/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
html.page-about h1,
html.page-about h2,
html.page-about h3,
html.page-about h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 700; }
html.page-about .display-xl {
      font-size: clamp(2.2rem, 5.5vw, 4rem);
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
html.page-about .display-lg {
      font-size: clamp(1.75rem, 3.5vw, 2.8rem);
      letter-spacing: -0.02em;
    }
html.page-about .display-md {
      font-size: clamp(1.4rem, 2.5vw, 2rem);
      letter-spacing: -0.015em;
    }
html.page-about .text-lg { font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
html.page-about .accent-word { color: var(--brand-accent); }
html.page-about .accent-underline {
      color: var(--brand-accent);
      text-decoration: underline;
      text-decoration-color: var(--brand-accent);
      text-underline-offset: 0.12em;
    }
/* ── BUTTONS ─────────────────────────────────────────────────── */
html.page-about .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      padding: 0.8rem 1.75rem;
      border-radius: 4px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.22s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
      min-height: 48px;
    }
html.page-about .btn:hover { transform: translateY(-2px); }
html.page-about .btn:active { transform: translateY(0); }
html.page-about .btn-primary {
      background: var(--brand-accent);
      color: #ffffff;
      border-color: var(--brand-accent);
    }
html.page-about .btn-primary:hover {
      background: var(--brand-accent-2);
      border-color: var(--brand-accent-2);
      box-shadow: 0 6px 24px rgba(205,62,45,0.28);
    }
html.page-about .btn-outline {
      background: transparent;
      color: var(--brand-accent);
      border-color: var(--brand-accent);
    }
html.page-about .btn-outline:hover {
      background: var(--brand-accent);
      color: #ffffff;
      box-shadow: 0 6px 24px rgba(205,62,45,0.22);
    }
html.page-about .btn-ghost-white {
      background: transparent;
      color: #ffffff;
      border-color: rgba(255,255,255,0.55);
    }
html.page-about .btn-ghost-white:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.9);
    }
@media (pointer: coarse) {
html.page-about .btn { min-height: 52px; }
}
/* ── KICKER ──────────────────────────────────────────────────── */
html.page-about .kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1.1rem;
    }
html.page-about .kicker--light {
      color: rgba(255,255,255,0.72);
    }
/* ── SECTION COMMON ─────────────────────────────────────────── */
html.page-about .section { padding-block: var(--section-py); }
html.page-about .section--alt { background: var(--canvas); }
html.page-about .section--dark {
      background: var(--panel-dark);
      color: #ffffff;
    }
/* ── HERO (page-hero skeleton) ───────────────────────────────── */
html.page-about .page-hero {
      position: relative;
      min-height: 88vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-block-start: 120px;
      overflow: hidden;
    }
html.page-about .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/about-hero-network.jpg');
      background-size: cover;
      background-position: center 40%;
      will-change: transform;
      animation: heroBgDrift__page-about 28s ease-in-out infinite alternate;
    }
@keyframes heroBgDrift__page-about {
      from { transform: scale(1.0) translateY(0); }
      to   { transform: scale(1.06) translateY(-16px); }
    }
html.page-about .page-hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(10,10,14,0.35) 0%, rgba(10,10,14,0.72) 60%, rgba(10,10,14,0.94) 100%),
        radial-gradient(ellipse 120% 80% at 50% 100%, rgba(10,10,14,0.6) 0%, transparent 70%);
    }
html.page-about .page-hero-content {
      position: relative;
      z-index: 2;
      padding-block: clamp(3.5rem, 7vw, 5.5rem) 0;
    }
html.page-about .page-hero-inner {
      max-width: 780px;
    }
html.page-about .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      margin-bottom: 1.1rem;
    }
html.page-about .page-hero h1 { color: #ffffff; }
html.page-about .page-hero-body {
      margin-block: 1.6rem 2rem;
      max-width: 62ch;
    }
html.page-about .page-hero-body p {
      color: rgba(255,255,255,0.82);
      font-size: clamp(1rem, 1.5vw, 1.1rem);
      line-height: 1.7;
    }
html.page-about .page-hero-body p + p { margin-top: 1em; }
html.page-about .page-hero-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      padding-bottom: 0.25rem;
    }
/* Hero stat row */
html.page-about .hero-stat-row {
      position: relative;
      z-index: 2;
      border-top: 1px solid rgba(255,255,255,0.12);
      margin-top: 3.5rem;
      background: rgba(10,10,14,0.55);
      backdrop-filter: blur(10px);
    }
html.page-about .hero-stat-row .container {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
    }
html.page-about .hero-stat {
      flex: 1 1 120px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 1.4rem 1.75rem;
      border-right: 1px solid rgba(255,255,255,0.10);
    }
html.page-about .hero-stat:last-child { border-right: none; }
html.page-about .hero-stat-value {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      color: var(--brand-accent);
      line-height: 1;
    }
html.page-about .hero-stat-label {
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      margin-top: 0.35rem;
    }
/* ── PHILOSOPHY SECTION ─────────────────────────────────────── */
html.page-about .philosophy-section { background: var(--canvas); }
html.page-about .philosophy-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
    }
html.page-about .philosophy-headline {
      position: sticky;
      top: 120px;
    }
html.page-about .philosophy-headline h2 { margin-bottom: 1.5rem; }
html.page-about .philosophy-accent-bar {
      width: 48px;
      height: 3px;
      background: var(--brand-accent);
      margin-bottom: 1.75rem;
      border-radius: 2px;
    }
html.page-about .philosophy-body p {
      color: var(--text-secondary);
      font-size: clamp(1rem, 1.4vw, 1.08rem);
      line-height: 1.75;
    }
html.page-about .philosophy-body p + p { margin-top: 1.2em; }
html.page-about .philosophy-principles {
      margin-top: 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
html.page-about .principle-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 1.4rem 1.6rem;
      display: flex;
      gap: 1.1rem;
      align-items: flex-start;
      transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    }
html.page-about .principle-card:hover {
      box-shadow: 0 8px 32px rgba(17,17,17,0.08);
      transform: translateY(-2px);
    }
html.page-about .principle-number {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--brand-accent);
      opacity: 0.25;
      line-height: 1;
      flex-shrink: 0;
      min-width: 2rem;
    }
html.page-about .principle-text strong {
      display: block;
      font-family: var(--font-display);
      font-size: 0.9375rem;
      font-weight: 600;
      margin-bottom: 0.35rem;
    }
html.page-about .principle-text p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }
/* ── APPROACH SECTION ───────────────────────────────────────── */
html.page-about .approach-section { background: var(--brand-bg); }
html.page-about .approach-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: center;
      margin-bottom: clamp(3.5rem, 6vw, 5rem);
    }
html.page-about .approach-intro-image {
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 16px 48px rgba(17,17,17,0.10);
      aspect-ratio: 4/3;
    }
html.page-about .approach-intro-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s var(--ease-out);
    }
html.page-about .approach-intro-image:hover img { transform: scale(1.04); }
html.page-about .approach-intro-copy h2 { margin-bottom: 1.25rem; }
html.page-about .approach-intro-copy p {
      color: var(--text-secondary);
      font-size: clamp(1rem, 1.4vw, 1.08rem);
      line-height: 1.75;
    }
html.page-about .approach-intro-copy p + p { margin-top: 1em; }
html.page-about .approach-note {
      margin-top: 1.75rem;
      padding: 1.2rem 1.5rem;
      background: rgba(205,62,45,0.06);
      border-left: 3px solid var(--brand-accent);
      border-radius: 0 4px 4px 0;
    }
html.page-about .approach-note p {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      line-height: 1.65;
      font-style: italic;
    }
/* Approach steps grid */
html.page-about .approach-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
html.page-about .step-card {
      background: var(--canvas);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 1.75rem;
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    }
html.page-about .step-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s var(--ease-out);
    }
html.page-about .step-card:hover::before { transform: scaleX(1); }
html.page-about .step-card:hover {
      box-shadow: 0 12px 36px rgba(17,17,17,0.09);
      transform: translateY(-3px);
    }
html.page-about .step-index {
      font-family: var(--font-display);
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--brand-accent);
      opacity: 0.15;
      line-height: 1;
      margin-bottom: 0.75rem;
    }
html.page-about .step-card h3 {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
      line-height: 1.3;
    }
html.page-about .step-card p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }
/* ── GLOBAL SECTION ─────────────────────────────────────────── */
html.page-about .global-section { background: var(--panel-dark); color: #ffffff; }
html.page-about .global-inner {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: clamp(3rem, 7vw, 6rem);
      align-items: start;
    }
html.page-about .global-headline-col h2 { color: #ffffff; margin-bottom: 1.25rem; }
html.page-about .global-headline-col .kicker { color: var(--brand-accent); }
html.page-about .global-accent-bar {
      width: 48px;
      height: 3px;
      background: var(--brand-accent);
      margin-bottom: 1.75rem;
      border-radius: 2px;
    }
html.page-about .global-body-col p {
      color: rgba(255,255,255,0.75);
      font-size: clamp(1rem, 1.4vw, 1.08rem);
      line-height: 1.75;
    }
html.page-about .global-body-col p + p { margin-top: 1.1em; }
html.page-about .global-regions {
      margin-top: 2.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
html.page-about .region-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 6px;
      padding: 1.5rem;
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
html.page-about .region-card:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(205,62,45,0.5);
    }
html.page-about .region-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(205,62,45,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
    }
html.page-about .region-icon svg { width: 18px; height: 18px; color: var(--brand-accent); }
html.page-about .region-card h3 {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 0.5rem;
    }
html.page-about .region-card p {
      font-size: 0.875rem;
      color: rgba(255,255,255,0.58);
      line-height: 1.6;
    }
html.page-about .global-note {
      margin-top: 1.5rem;
      padding: 1.2rem 1.4rem;
      background: rgba(205,62,45,0.1);
      border-left: 3px solid var(--brand-accent);
      border-radius: 0 4px 4px 0;
    }
html.page-about .global-note p {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.65);
      line-height: 1.6;
    }
/* ── CTA BAND ────────────────────────────────────────────────── */
html.page-about .cta-band { background: var(--canvas); }
html.page-about .cta-band-inner {
      max-width: 760px;
      margin-inline: auto;
      text-align: center;
    }
html.page-about .cta-band-inner h2 { margin-bottom: 1.25rem; }
html.page-about .cta-band-inner p {
      color: var(--text-secondary);
      font-size: clamp(1rem, 1.4vw, 1.1rem);
      line-height: 1.75;
      max-width: 65ch;
      margin-inline: auto;
    }
html.page-about .cta-band-actions {
      margin-top: 2.25rem;
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }
/* ── CONTACT FORM ────────────────────────────────────────────── */
html.page-about .contact-section { background: var(--brand-bg); }
html.page-about .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
    }
html.page-about .contact-info h2 { margin-bottom: 1rem; }
html.page-about .contact-info p {
      color: var(--text-secondary);
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: 1.5rem;
    }
html.page-about .contact-detail {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.9375rem;
      color: var(--text-secondary);
      margin-bottom: 0.75rem;
    }
html.page-about .contact-detail a {
      color: var(--brand-accent);
      transition: color 0.2s;
    }
html.page-about .contact-detail a:hover { color: var(--brand-accent-2); }
html.page-about .contact-detail-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(205,62,45,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
html.page-about .contact-detail-icon svg { width: 15px; height: 15px; color: var(--brand-accent); }
html.page-about .contact-form {
      background: var(--canvas);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: clamp(1.75rem, 4vw, 2.5rem);
    }
html.page-about .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
html.page-about .form-field { display: flex; flex-direction: column; margin-bottom: 1rem; }
html.page-about .form-field label {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--text-primary);
      margin-bottom: 0.45rem;
    }
html.page-about .form-field input,
html.page-about .form-field textarea {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--brand-fg);
      background: var(--panel);
      border: 1.5px solid var(--border-strong);
      border-radius: 4px;
      padding: 0.7rem 0.9rem;
      transition: border-color 0.2s, box-shadow 0.2s;
      outline: none;
      width: 100%;
    }
html.page-about .form-field input:focus,
html.page-about .form-field textarea:focus {
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-about .form-field textarea { min-height: 130px; resize: vertical; }
html.page-about .form-submit { margin-top: 0.5rem; }
html.page-about .form-submit .btn { width: 100%; }
html.page-about .form-msg {
      margin-top: 1rem;
      padding: 0.9rem 1rem;
      border-radius: 4px;
      font-size: 0.9rem;
      display: none;
    }
html.page-about .form-msg.success {
      background: rgba(34,139,34,0.08);
      border: 1px solid rgba(34,139,34,0.25);
      color: #226622;
      display: block;
    }
html.page-about .form-msg.error {
      background: rgba(205,62,45,0.08);
      border: 1px solid rgba(205,62,45,0.25);
      color: var(--brand-accent-2);
      display: block;
    }
/* ── SCROLL REVEAL ───────────────────────────────────────────── */
html.page-about .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    }
html.page-about .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-about .reveal-delay-1 { transition-delay: 0.1s; }
html.page-about .reveal-delay-2 { transition-delay: 0.2s; }
html.page-about .reveal-delay-3 { transition-delay: 0.3s; }
html.page-about .reveal-delay-4 { transition-delay: 0.4s; }
html.page-about .reveal-delay-5 { transition-delay: 0.5s; }
html.page-about .reveal.in.reveal-delay-1,
html.page-about .reveal.in.reveal-delay-2,
html.page-about .reveal.in.reveal-delay-3,
html.page-about .reveal.in.reveal-delay-4,
html.page-about .reveal.in.reveal-delay-5 { transition-delay: var(--rd, 0s); }
/* ── DIVIDER LINE ────────────────────────────────────────────── */
html.page-about .divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
      html.page-about .philosophy-inner { grid-template-columns: 1fr; }
      html.page-about .philosophy-headline { position: static; }
      html.page-about .approach-intro { grid-template-columns: 1fr; }
      html.page-about .approach-steps { grid-template-columns: 1fr 1fr; }
      html.page-about .global-inner { grid-template-columns: 1fr; }
      html.page-about .global-regions { grid-template-columns: 1fr 1fr; }
      html.page-about .contact-grid { grid-template-columns: 1fr; }
    }
@media (max-width: 620px) {
html.page-about .approach-steps { grid-template-columns: 1fr; }
html.page-about .global-regions { grid-template-columns: 1fr; }
html.page-about .form-row { grid-template-columns: 1fr; }
html.page-about .hero-stat { flex: 1 1 50%; }
}
@media (max-width: 400px) {
html.page-about .hero-stat { flex: 1 1 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.10); }
html.page-about .hero-stat:last-child { border-bottom: none; }
}
@media (max-height: 560px) {
html.page-about .page-hero { min-height: auto; }
}
/* ── REDUCED MOTION ──────────────────────────────────────────── */
html.page-about @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        animation-delay: 0.001ms !important;
        transition-delay: 0.001ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }
html.page-about body.paused *,
html.page-about body.paused *::before,
html.page-about body.paused *::after {
    animation-play-state: paused !important;
  }


/* ==================== case-studies.html (scope: .page-case-studies) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-case-studies {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-case-studies *,
html.page-case-studies *::before,
html.page-case-studies *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-case-studies { overflow-x: clip; scroll-behavior: smooth; }
html.page-case-studies body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-case-studies img,
html.page-case-studies svg,
html.page-case-studies video { max-width: 100%; height: auto; display: block; }
html.page-case-studies a { color: inherit; text-decoration: none; }
html.page-case-studies ul,
html.page-case-studies ol { list-style: none; }
html.page-case-studies button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-case-studies .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-case-studies .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-case-studies .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-case-studies .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-case-studies .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-case-studies .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-case-studies .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-case-studies .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-case-studies .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-case-studies .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-case-studies .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-case-studies .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-case-studies .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-case-studies .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-case-studies .btn { min-height: 44px; }
}
html.page-case-studies .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-case-studies .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-case-studies .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-case-studies .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-case-studies .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-case-studies .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-case-studies .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-case-studies .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url(../assets/cta-conversation.jpg);
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-case-studies .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-case-studies .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-case-studies .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-case-studies .page-hero-inner { max-width: 680px; }
html.page-case-studies .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-case-studies .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-case-studies .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-case-studies .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-case-studies .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-case-studies .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-case-studies .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-case-studies .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-case-studies .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-case-studies .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-case-studies .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-case-studies .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-case-studies 32s linear infinite;
      gap: 0;
    }
html.page-case-studies .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-case-studies .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-case-studies .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-case-studies {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-case-studies .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-case-studies #cs-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-case-studies .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-case-studies .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-case-studies .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-case-studies .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-case-studies .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-case-studies #di-approach { background: var(--brand-bg); }
html.page-case-studies .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-case-studies .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-case-studies .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-case-studies .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-case-studies .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-case-studies .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-case-studies .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-case-studies .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-case-studies .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-case-studies .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-case-studies .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-case-studies .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-case-studies #cs-deliverables { background: var(--brand-bg); }
html.page-case-studies .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-case-studies .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-case-studies .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-case-studies .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-case-studies .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-case-studies .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-case-studies .deliverable-card:hover::before { transform: scaleX(1); }
html.page-case-studies .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-case-studies .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-case-studies .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-case-studies #cs-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-case-studies #cs-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-case-studies .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-case-studies .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-case-studies .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-case-studies #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-case-studies .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-case-studies .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-case-studies .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-case-studies .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-case-studies .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-case-studies .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-case-studies .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-case-studies .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-case-studies .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-case-studies .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-case-studies .form-group.full { grid-column: 1 / -1; }
html.page-case-studies .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-case-studies .form-group input,
html.page-case-studies .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-case-studies .form-group input:focus,
html.page-case-studies .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-case-studies .form-group textarea { min-height: 110px; }
html.page-case-studies .form-submit { margin-top: 1.25rem; }
html.page-case-studies .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-case-studies .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-case-studies .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-case-studies .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-case-studies .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-case-studies @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-case-studies .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-case-studies .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-case-studies body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-case-studies 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-case-studies {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-case-studies body::before { animation: none; }
}
html.page-case-studies main,
html.page-case-studies section,
html.page-case-studies .container { position: relative; z-index: 1; }


/* ==================== contact.html (scope: .page-contact) ==================== */
/* ─── TOKENS ─────────────────────────────────────────────────────────── */
html.page-contact {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --canvas:        #ffffff;
      --panel:         #f5f5f5;
      --panel-mid:     #ececec;
      --panel-dark:    #1a1a1a;
      --text-primary:  #111111;
      --text-secondary:#555555;
      --border:        #e0e0e0;
      --accent:        #cd3e2d;
      --accent-hover:  #942d20;
      --accent-muted:  rgba(205,62,45,0.12);

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

      --space-xs:  0.5rem;
      --space-sm:  1rem;
      --space-md:  1.5rem;
      --space-lg:  2.5rem;
      --space-xl:  4rem;
      --space-2xl: 6rem;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;
    }
/* ─── RESET & BASE ───────────────────────────────────────────────────── */
html.page-contact *,
html.page-contact *::before,
html.page-contact *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-contact {
      overflow-x: clip;
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }
html.page-contact body {
      overflow-x: clip;
      background: var(--canvas);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      opacity: 0;
      animation: pageFadeIn__page-contact 0.5s var(--ease-out) forwards;
    }
@keyframes pageFadeIn__page-contact {
      to { opacity: 1; }
    }
html.page-contact img,
html.page-contact svg,
html.page-contact video {
      max-width: 100%;
      height: auto;
      display: block;
    }
html.page-contact a { color: inherit; text-decoration: none; }
html.page-contact ul,
html.page-contact ol { list-style: none; }
html.page-contact button { cursor: pointer; font: inherit; border: none; background: none; }
/* ─── SKIP LINK ──────────────────────────────────────────────────────── */
html.page-contact .skip-link {
      position: fixed;
      top: -100%;
      left: 1rem;
      z-index: 9999;
      background: var(--accent);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-weight: 600;
      transition: top 0.2s;
    }
html.page-contact .skip-link:focus { top: 1rem; }
/* ─── CONTAINER ──────────────────────────────────────────────────────── */
html.page-contact .container {
      width: 100%;
      max-width: 1200px;
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 3rem);
    }
/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────── */
html.page-contact h1,
html.page-contact h2,
html.page-contact h3,
html.page-contact h4,
html.page-contact h5 {
      font-family: var(--font-display);
      line-height: 1.15;
      font-weight: 700;
    }
html.page-contact .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 4rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
html.page-contact .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3.5vw, 2.75rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.015em;
    }
html.page-contact .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.5vw, 2rem);
      font-weight: 700;
      line-height: 1.2;
    }
html.page-contact .kicker {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
    }
html.page-contact .accent-word { color: var(--accent); }
/* ─── BUTTONS ────────────────────────────────────────────────────────── */
html.page-contact .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 1.75rem;
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.22s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-contact .btn:hover { transform: translateY(-2px); }
html.page-contact .btn:active { transform: translateY(0); }
html.page-contact .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html.page-contact .btn-primary {
      background: var(--accent);
      color: #fff;
    }
html.page-contact .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 6px 24px rgba(205,62,45,0.25); }
html.page-contact .btn-ghost {
      background: transparent;
      color: var(--accent);
      border: 1.5px solid var(--accent);
    }
html.page-contact .btn-ghost:hover { background: var(--accent-muted); }
html.page-contact .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,0.55);
    }
html.page-contact .btn-ghost-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
@media (pointer: coarse) {
html.page-contact .btn { min-height: 44px; }
}
/* ─── SECTION REVEAL ANIMATION ───────────────────────────────────────── */
html.page-contact .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    }
html.page-contact .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-contact .reveal-delay-1 { transition-delay: 0.1s; }
html.page-contact .reveal-delay-2 { transition-delay: 0.2s; }
html.page-contact .reveal-delay-3 { transition-delay: 0.3s; }
html.page-contact .reveal-delay-4 { transition-delay: 0.4s; }
html.page-contact .reveal-delay-5 { transition-delay: 0.5s; }
html.page-contact .reveal.in.reveal-delay-1,
html.page-contact .reveal.in.reveal-delay-2,
html.page-contact .reveal.in.reveal-delay-3,
html.page-contact .reveal.in.reveal-delay-4,
html.page-contact .reveal.in.reveal-delay-5 {
      /* delays respected via the individual declarations above */
    }
/* ─── PAGE HERO ──────────────────────────────────────────────────────── */
html.page-contact .page-hero {
      position: relative;
      min-height: 72vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      padding-top: 100px; /* clear fixed header */
    }
html.page-contact .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/contact-hero-bg.jpg');
      background-size: cover;
      background-position: center 30%;
      transform: scale(1.04);
      animation: heroBgSettle__page-contact 1.4s var(--ease-out) forwards;
    }
@keyframes heroBgSettle__page-contact {
      to { transform: scale(1); }
    }
html.page-contact .page-hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(10,10,18,0.52) 0%,
          rgba(10,10,18,0.65) 55%,
          rgba(10,10,18,0.88) 100%);
      pointer-events: none;
    }
html.page-contact .page-hero-content {
      position: relative;
      z-index: 2;
      padding-block: var(--space-2xl) var(--space-xl);
    }
html.page-contact .page-hero-inner {
      max-width: 720px;
    }
html.page-contact .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: var(--space-sm);
      opacity: 0;
      animation: kickerIn__page-contact 0.6s 0.2s var(--ease-out) forwards;
    }
@keyframes kickerIn__page-contact {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
html.page-contact .page-hero h1 {
      color: #fff;
      text-shadow: 0 2px 4px rgba(5,5,10,0.7), 0 8px 32px rgba(5,5,10,0.5);
      margin-bottom: var(--space-md);
      opacity: 0;
      animation: heroHeadIn__page-contact 0.7s 0.35s var(--ease-out) forwards;
    }
@keyframes heroHeadIn__page-contact {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
html.page-contact .page-hero-body {
      max-width: 62ch;
      opacity: 0;
      animation: heroBodyIn__page-contact 0.7s 0.55s var(--ease-out) forwards;
    }
@keyframes heroBodyIn__page-contact {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
html.page-contact .page-hero-body p {
      color: rgba(255,255,255,0.88);
      font-size: 1.05rem;
      line-height: 1.7;
      text-shadow: 0 1px 3px rgba(5,5,10,0.6);
      margin-bottom: var(--space-sm);
    }
html.page-contact .page-hero-body p:last-child { margin-bottom: 0; }
html.page-contact .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      margin-top: var(--space-lg);
      opacity: 0;
      animation: heroActionsIn__page-contact 0.6s 0.75s var(--ease-out) forwards;
    }
@keyframes heroActionsIn__page-contact {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
/* ─── FORM SECTION ───────────────────────────────────────────────────── */
html.page-contact #contact-form-section {
      background: var(--canvas);
      padding-block: var(--space-2xl);
    }
html.page-contact .form-layout {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: var(--space-xl);
      align-items: start;
    }
@media (max-width: 900px) {
html.page-contact .form-layout {
        grid-template-columns: 1fr;
      }
}
html.page-contact .form-section-header {
      margin-bottom: var(--space-lg);
    }
html.page-contact .form-section-header .kicker {
      display: block;
      margin-bottom: var(--space-xs);
    }
html.page-contact .form-section-header h2 {
      font-size: clamp(1.5rem, 2.5vw, 2.2rem);
      color: var(--text-primary);
      margin-bottom: var(--space-sm);
    }
html.page-contact .form-section-header p {
      color: var(--text-secondary);
      font-size: 0.95rem;
      max-width: 58ch;
      line-height: 1.7;
    }
/* Form card */
html.page-contact .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.5rem);
    }
html.page-contact .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem 1.25rem;
    }
@media (max-width: 600px) {
html.page-contact .form-grid { grid-template-columns: 1fr; }
}
html.page-contact .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
html.page-contact .form-group.full { grid-column: 1 / -1; }
html.page-contact .form-group label {
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
html.page-contact .form-group input,
html.page-contact .form-group select,
html.page-contact .form-group textarea {
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--text-primary);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0.65rem 0.9rem;
      width: 100%;
      transition: border-color 0.18s, box-shadow 0.18s;
      appearance: none;
      -webkit-appearance: none;
      outline: none;
    }
html.page-contact .form-group select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.85rem center;
      padding-right: 2.5rem;
      cursor: pointer;
    }
html.page-contact .form-group input:focus,
html.page-contact .form-group select:focus,
html.page-contact .form-group textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-muted);
    }
html.page-contact .form-group textarea {
      resize: vertical;
      min-height: 140px;
      line-height: 1.6;
    }
html.page-contact .form-group input::placeholder,
html.page-contact .form-group textarea::placeholder {
      color: #aaa;
    }
html.page-contact .form-submit-row {
      margin-top: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
html.page-contact .form-submit-row .btn-primary {
      padding: 0.85rem 2.25rem;
      font-size: 0.95rem;
    }
html.page-contact .form-note {
      font-size: 0.8rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }
html.page-contact .form-note a {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
html.page-contact .form-note a:hover { color: var(--accent-hover); }
/* Form status */
html.page-contact .form-status {
      display: none;
      margin-top: 1.25rem;
      padding: 1rem 1.25rem;
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      font-weight: 500;
      line-height: 1.5;
    }
html.page-contact .form-status.success {
      display: block;
      background: rgba(40, 160, 80, 0.1);
      border: 1px solid rgba(40, 160, 80, 0.3);
      color: #1a6630;
    }
html.page-contact .form-status.error {
      display: block;
      background: rgba(205, 62, 45, 0.08);
      border: 1px solid rgba(205, 62, 45, 0.3);
      color: var(--accent-hover);
    }
/* Sidebar details */
html.page-contact .contact-sidebar {
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
    }
html.page-contact .sidebar-block {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.75rem;
    }
html.page-contact .sidebar-block h3 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: var(--space-sm);
    }
html.page-contact .sidebar-block p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }
html.page-contact .sidebar-block p + p { margin-top: 0.5rem; }
html.page-contact .sidebar-email {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      color: var(--accent);
      font-size: 0.9rem;
      font-weight: 600;
      margin-top: 0.75rem;
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color 0.18s;
    }
html.page-contact .sidebar-email:hover { color: var(--accent-hover); }
html.page-contact .sidebar-divider {
      width: 2.5rem;
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
      margin-block: var(--space-sm);
    }
/* ─── WHAT TO EXPECT SECTION ─────────────────────────────────────────── */
html.page-contact #contact-context-section {
      background: var(--panel);
      padding-block: var(--space-2xl);
      border-top: 1px solid var(--border);
    }
html.page-contact .context-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
      align-items: start;
    }
@media (max-width: 840px) {
html.page-contact .context-inner { grid-template-columns: 1fr; }
}
html.page-contact .context-header .kicker {
      display: block;
      margin-bottom: var(--space-xs);
    }
html.page-contact .context-header h2 {
      font-size: clamp(1.4rem, 2.5vw, 2rem);
      color: var(--text-primary);
      margin-bottom: var(--space-sm);
    }
html.page-contact .context-header p {
      color: var(--text-secondary);
      font-size: 0.95rem;
      line-height: 1.75;
      max-width: 55ch;
    }
html.page-contact .context-header p + p {
      margin-top: 0.9rem;
    }
html.page-contact .context-pillars {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
html.page-contact .context-pillar {
      background: var(--canvas);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: var(--radius-sm);
      padding: 1.25rem 1.5rem;
      transition: box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out);
    }
html.page-contact .context-pillar:hover {
      box-shadow: 0 4px 20px rgba(0,0,0,0.07);
      transform: translateX(3px);
    }
html.page-contact .context-pillar h4 {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 0.35rem;
    }
html.page-contact .context-pillar p {
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ──────────────────────────────────── */
html.page-contact .env-grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.018;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
      background-size: 300px 300px;
    }
/* ─── REDUCED MOTION ─────────────────────────────────────────────────── */
html.page-contact @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        animation-delay: 0ms !important;
      }

      .reveal { opacity: 1; transform: none; }
      .page-hero-kicker,
      .page-hero h1,
      .page-hero-body,
      .page-hero-actions { opacity: 1; transform: none; animation: none; }
      .page-hero-bg { animation: none; transform: scale(1); }
    }


/* ==================== how-it-works.html (scope: .page-how-it-works) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-how-it-works {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-how-it-works *,
html.page-how-it-works *::before,
html.page-how-it-works *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-how-it-works { overflow-x: clip; scroll-behavior: smooth; }
html.page-how-it-works body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-how-it-works img,
html.page-how-it-works svg,
html.page-how-it-works video { max-width: 100%; height: auto; display: block; }
html.page-how-it-works a { color: inherit; text-decoration: none; }
html.page-how-it-works ul,
html.page-how-it-works ol { list-style: none; }
html.page-how-it-works button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-how-it-works .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-how-it-works .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-how-it-works .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-how-it-works .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-how-it-works .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-how-it-works .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-how-it-works .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-how-it-works .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-how-it-works .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-how-it-works .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-how-it-works .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-how-it-works .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-how-it-works .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-how-it-works .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-how-it-works .btn { min-height: 44px; }
}
html.page-how-it-works .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-how-it-works .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-how-it-works .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-how-it-works .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-how-it-works .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-how-it-works .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-how-it-works .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-how-it-works .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/services-lifecycle-diagram.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-how-it-works .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-how-it-works .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-how-it-works .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-how-it-works .page-hero-inner { max-width: 680px; }
html.page-how-it-works .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-how-it-works .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-how-it-works .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-how-it-works .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-how-it-works .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-how-it-works .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-how-it-works .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-how-it-works .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-how-it-works .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-how-it-works .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-how-it-works .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-how-it-works .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-how-it-works 32s linear infinite;
      gap: 0;
    }
html.page-how-it-works .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-how-it-works .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-how-it-works .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-how-it-works {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-how-it-works .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-how-it-works .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-how-it-works .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-how-it-works .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-how-it-works .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-how-it-works .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-how-it-works #di-approach { background: var(--brand-bg); }
html.page-how-it-works .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-how-it-works .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-how-it-works .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-how-it-works .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-how-it-works .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-how-it-works .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-how-it-works .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-how-it-works .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-how-it-works .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-how-it-works .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-how-it-works .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-how-it-works .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-how-it-works .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-how-it-works .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-how-it-works .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-how-it-works .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-how-it-works .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-how-it-works .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-how-it-works .deliverable-card:hover::before { transform: scaleX(1); }
html.page-how-it-works .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-how-it-works .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-how-it-works .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-how-it-works #hiw-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-how-it-works #hiw-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-how-it-works .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-how-it-works .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-how-it-works .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-how-it-works #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-how-it-works .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-how-it-works .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-how-it-works .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-how-it-works .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-how-it-works .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-how-it-works .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-how-it-works .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-how-it-works .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-how-it-works .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-how-it-works .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-how-it-works .form-group.full { grid-column: 1 / -1; }
html.page-how-it-works .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-how-it-works .form-group input,
html.page-how-it-works .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-how-it-works .form-group input:focus,
html.page-how-it-works .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-how-it-works .form-group textarea { min-height: 110px; }
html.page-how-it-works .form-submit { margin-top: 1.25rem; }
html.page-how-it-works .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-how-it-works .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-how-it-works .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-how-it-works .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-how-it-works .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-how-it-works @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-how-it-works .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-how-it-works .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── PROCESS STEPS (How It Works) ──────────────────────────────── */
html.page-how-it-works #hiw-process { background: var(--brand-fg); padding-block: clamp(4rem, 8vw, 7rem); }
html.page-how-it-works #hiw-process .section-kicker { color: var(--brand-accent); }
html.page-how-it-works #hiw-process h2 { color: #ffffff; }
html.page-how-it-works .process-intro { max-width: 68ch; color: rgba(255,255,255,0.72); margin-bottom: 3rem; font-size: 1.0625rem; line-height: 1.75; }
html.page-how-it-works .process-steps { display: flex; flex-direction: column; gap: 0; position: relative; }
html.page-how-it-works .process-steps::before {
      content: '';
      position: absolute;
      left: 28px; top: 40px; bottom: 40px;
      width: 2px;
      background: linear-gradient(to bottom, var(--brand-accent), rgba(205,62,45,0.15));
    }
html.page-how-it-works .process-step {
      display: grid;
      grid-template-columns: 60px 1fr;
      gap: 2rem;
      align-items: start;
      padding-block: 2rem;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      position: relative;
    }
html.page-how-it-works .process-step:last-child { border-bottom: none; }
html.page-how-it-works .process-step-num {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: rgba(205,62,45,0.15);
      border: 2px solid var(--brand-accent);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 1.125rem; font-weight: 700;
      color: var(--brand-accent);
      flex-shrink: 0;
      position: relative; z-index: 1;
    }
html.page-how-it-works .process-step-content h3 {
      font-family: var(--font-display);
      font-size: 1.1875rem; font-weight: 600;
      color: #ffffff; margin-bottom: 0.5rem;
    }
html.page-how-it-works .process-step-content p { font-size: 0.9375rem; color: rgba(255,255,255,0.7); line-height: 1.7; max-width: 62ch; }
html.page-how-it-works .process-closing { max-width: 68ch; color: rgba(255,255,255,0.72); margin-top: 3rem; font-size: 0.9375rem; line-height: 1.7; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; }
html.page-how-it-works .process-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
html.page-how-it-works .process-links a {
      font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
      color: var(--brand-accent);
      background: rgba(205,62,45,0.12);
      border: 1px solid rgba(205,62,45,0.3);
      padding: 0.4rem 0.9rem;
      border-radius: 100px;
    }
@media (max-width: 640px) {
html.page-how-it-works .process-steps::before { left: 20px; }
html.page-how-it-works .process-step { grid-template-columns: 44px 1fr; gap: 1.25rem; }
html.page-how-it-works .process-step-num { width: 44px; height: 44px; font-size: 0.9rem; }
}
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-how-it-works body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-how-it-works 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-how-it-works {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-how-it-works body::before { animation: none; }
}
html.page-how-it-works main,
html.page-how-it-works section,
html.page-how-it-works .container { position: relative; z-index: 1; }


/* ==================== index.html (scope: .page-index) ==================== */
/* ─── TOKENS ─────────────────────────────────────────────────────────── */
html.page-index {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --brand-muted: #f5f4f2;
      --brand-border: #e0ddd8;
      --brand-fg-secondary: #4a4a4a;
      --brand-fg-tertiary: #767676;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
      --radius: 4px;
      --radius-lg: 8px;
      --container: 1200px;
      --section-gap: clamp(5rem, 8vw, 9rem);
      --header-h: 72px;
    }
/* ─── RESET ──────────────────────────────────────────────────────────── */
html.page-index *,
html.page-index *::before,
html.page-index *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-index { overflow-x: hidden; scroll-behavior: smooth; }
html.page-index body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-index img,
html.page-index svg,
html.page-index video { max-width: 100%; height: auto; display: block; }
html.page-index a { color: inherit; text-decoration: none; }
html.page-index ul,
html.page-index ol { list-style: none; }
html.page-index button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── SKIP LINK ──────────────────────────────────────────────────────── */
html.page-index .skip-link {
      position: absolute; top: -100%; left: 1rem;
      background: var(--brand-fg); color: var(--brand-bg);
      padding: 0.5rem 1rem; border-radius: var(--radius);
      font-size: 0.875rem; z-index: 9999;
      transition: top 0.2s;
    }
html.page-index .skip-link:focus { top: 1rem; }
/* ─── CONTAINER ──────────────────────────────────────────────────────── */
html.page-index .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    }
/* ─── TYPOGRAPHY SCALE ───────────────────────────────────────────────── */
html.page-index .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 5vw, 4rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
html.page-index .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 3.5vw, 2.75rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
html.page-index .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.5vw, 2rem);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.015em;
    }
html.page-index .body-lg { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.7; }
html.page-index .body-md { font-size: 1rem; line-height: 1.7; }
html.page-index .body-sm { font-size: 0.875rem; line-height: 1.6; }
html.page-index .label {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
html.page-index .kicker {
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-accent);
    }
/* ─── BUTTONS ────────────────────────────────────────────────────────── */
html.page-index .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.875rem 2rem;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      border-radius: var(--radius);
      transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.22s var(--ease-out);
      text-shadow: none;
    }
html.page-index .btn-primary {
      background: var(--brand-accent);
      color: #fff;
    }
html.page-index .btn-primary:hover,
html.page-index .btn-primary:focus-visible {
      background: var(--brand-accent-2);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(205, 62, 45, 0.28);
    }
html.page-index .btn-outline {
      background: transparent;
      color: var(--brand-fg);
      border: 2px solid var(--brand-fg);
    }
html.page-index .btn-outline:hover,
html.page-index .btn-outline:focus-visible {
      background: var(--brand-fg);
      color: var(--brand-bg);
      transform: translateY(-2px);
    }
html.page-index .btn-ghost-white {
      background: rgba(255,255,255,0.12);
      color: #fff;
      border: 2px solid rgba(255,255,255,0.5);
    }
html.page-index .btn-ghost-white:hover,
html.page-index .btn-ghost-white:focus-visible {
      background: #fff;
      color: var(--brand-fg);
      transform: translateY(-2px);
    }
html.page-index :focus-visible {
      outline: 2px solid var(--brand-accent);
      outline-offset: 3px;
    }
@media (pointer: coarse) {
html.page-index .btn { min-height: 44px; }
}
/* ─── SECTION WRAPPER ────────────────────────────────────────────────── */
html.page-index .section { padding-block: var(--section-gap); }
html.page-index .section--muted { background: var(--brand-muted); }
html.page-index .section--dark {
      background: #111111;
      color: #f0ede8;
    }
html.page-index .section-header { margin-bottom: clamp(2.5rem, 4vw, 4rem); }
html.page-index .section-header .kicker { margin-bottom: 0.75rem; }
html.page-index .section-header p {
      max-width: 68ch;
      color: var(--brand-fg-secondary);
      margin-top: 1rem;
    }
html.page-index .section--dark .section-header p { color: rgba(240,237,232,0.7); }
/* ─── BACKGROUND ENVIRONMENT LAYER ──────────────────────────────────── */
html.page-index body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,0.03) 0%, transparent 70%);
      animation: envShift__page-index 60s ease-in-out infinite alternate;
    }
@keyframes envShift__page-index {
      from { opacity: 0.6; }
      to   { opacity: 1; }
    }
html.page-index main { position: relative; z-index: 1; }
/* ─── HERO ───────────────────────────────────────────────────────────── */
html.page-index .page-hero {
      position: relative;
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5rem));
      padding-bottom: clamp(4rem, 7vw, 7rem);
      overflow: hidden;
    }
html.page-index .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/hero-channel-systems.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.03);
      animation: heroZoom__page-index 22s ease-in-out infinite alternate;
    }
@keyframes heroZoom__page-index {
      from { transform: scale(1.03); }
      to   { transform: scale(1.08); }
    }
html.page-index .page-hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(105deg, rgba(10,10,14,0.82) 0%, rgba(10,10,14,0.58) 55%, rgba(10,10,14,0.32) 100%),
        linear-gradient(to top, rgba(10,10,14,0.6) 0%, transparent 45%);
    }
html.page-index .page-hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
    }
html.page-index .page-hero-inner {
      max-width: 780px;
    }
html.page-index .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1.25rem;
      padding: 0.35rem 0.9rem;
      border: 1px solid rgba(205,62,45,0.5);
      border-radius: 2px;
      background: rgba(205,62,45,0.08);
    }
html.page-index .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.75rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.025em;
      color: #ffffff;
      margin-bottom: 1.75rem;
      text-shadow: 0 2px 20px rgba(0,0,0,0.4);
    }
html.page-index .page-hero h1 .accent-word {
      color: var(--brand-accent);
    }
html.page-index .page-hero-body {
      color: rgba(240, 237, 232, 0.88);
      font-size: clamp(1rem, 1.5vw, 1.125rem);
      line-height: 1.75;
      max-width: 62ch;
      margin-bottom: 2.5rem;
      text-shadow: 0 1px 8px rgba(0,0,0,0.3);
    }
html.page-index .page-hero-body p + p { margin-top: 1.1em; }
html.page-index .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
    }
html.page-index .hero-stat-row {
      position: relative;
      z-index: 2;
      margin-top: auto;
      padding-top: 1.75rem;
      border-top: 1px solid rgba(240,237,232,0.15);
    }
html.page-index .hero-stat-row .container {
      display: flex;
      gap: 2.5rem;
      flex-wrap: wrap;
    }
html.page-index .hero-stat {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
html.page-index .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: #ffffff;
    }
html.page-index .hero-stat-label {
      font-size: 0.78rem;
      color: rgba(240,237,232,0.65);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
@media (max-width: 600px) {
html.page-index .hero-stat-row { display: none; }
}
/* ─── MARQUEE ────────────────────────────────────────────────────────── */
html.page-index .marquee-band {
      padding-block: 1.1rem;
      background: var(--brand-fg);
      overflow: hidden;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
html.page-index .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: marqueeScroll__page-index 36s linear infinite;
    }
@media (prefers-reduced-motion: reduce) {
html.page-index .marquee-track { animation: none; }
}
@keyframes marqueeScroll__page-index {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
html.page-index .marquee-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding-inline: 2.5rem;
      white-space: nowrap;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }
html.page-index .marquee-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
/* ─── PROBLEM SECTION ────────────────────────────────────────────────── */
html.page-index .problem-section { padding-block: var(--section-gap); background: var(--brand-muted); }
html.page-index .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-index .split-image-col {
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
    }
html.page-index .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-index .split-content-col { display: flex; flex-direction: column; justify-content: center; }
html.page-index .split-content-col .kicker { margin-bottom: 0.75rem; }
html.page-index .split-content-col h2 { margin-bottom: 1.5rem; }
html.page-index .problem-body p { color: var(--brand-fg-secondary); margin-bottom: 1.1em; max-width: 66ch; }
html.page-index .problem-body p:last-child { margin-bottom: 0; }
html.page-index .problem-body p strong {
      color: var(--brand-fg);
      font-weight: 600;
    }
@media (max-width: 860px) {
html.page-index .split-band { grid-template-columns: 1fr; }
html.page-index .split-image-col { min-height: 300px; }
html.page-index .split-image-col img { height: 300px; }
}
/* ─── WHO WE SERVE ───────────────────────────────────────────────────── */
html.page-index .audience-section { padding-block: var(--section-gap); }
html.page-index .audience-intro { max-width: 68ch; color: var(--brand-fg-secondary); margin-bottom: 3rem; }
html.page-index .audience-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.25rem;
    }
html.page-index .audience-card {
      background: var(--brand-muted);
      border: 1px solid var(--brand-border);
      border-radius: var(--radius-lg);
      padding: 1.75rem;
      position: relative;
      overflow: hidden;
      transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s;
    }
html.page-index .audience-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 100%;
      background: var(--brand-accent);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 0.28s var(--ease-out);
    }
html.page-index .audience-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); border-color: rgba(205,62,45,0.25); }
html.page-index .audience-card:hover::before { transform: scaleY(1); }
html.page-index .audience-card h3 {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 600;
      margin-bottom: 0.6rem;
      color: var(--brand-fg);
    }
html.page-index .audience-card p { font-size: 0.9375rem; color: var(--brand-fg-secondary); line-height: 1.65; }
html.page-index .audience-card.in { animation: cardIn__page-index 0.45s var(--ease-out) both; }
@keyframes cardIn__page-index {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
/* ─── SERVICES GRID ──────────────────────────────────────────────────── */
html.page-index .services-section { padding-block: var(--section-gap); background: var(--brand-muted); }
html.page-index .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
      gap: 1.25rem;
    }
html.page-index .service-card {
      background: var(--brand-bg);
      border: 1px solid var(--brand-border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      text-decoration: none;
      color: inherit;
      transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s;
      position: relative;
      overflow: hidden;
    }
html.page-index .service-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s var(--ease-out);
    }
html.page-index .service-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.1); border-color: rgba(205,62,45,0.2); }
html.page-index .service-card:hover::after { transform: scaleX(1); }
html.page-index .service-icon {
      width: 40px; height: 40px;
      background: rgba(205,62,45,0.1);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-index .service-icon svg { width: 20px; height: 20px; color: var(--brand-accent); }
html.page-index .service-card h3 {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--brand-fg);
    }
html.page-index .service-card p { font-size: 0.9rem; color: var(--brand-fg-secondary); line-height: 1.65; flex: 1; }
html.page-index .service-link-hint {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--brand-accent);
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-top: auto;
    }
html.page-index .service-link-hint svg { width: 14px; height: 14px; transition: transform 0.2s; }
html.page-index .service-card:hover .service-link-hint svg { transform: translateX(4px); }
/* ─── DIFFERENTIATORS ────────────────────────────────────────────────── */
html.page-index .diff-section { padding-block: var(--section-gap); }
html.page-index .diff-intro-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
      margin-bottom: 4rem;
    }
html.page-index .diff-intro-body { color: var(--brand-fg-secondary); max-width: 62ch; }
html.page-index .diff-right-img {
      border-radius: var(--radius-lg);
      overflow: hidden;
      height: 360px;
    }
html.page-index .diff-right-img img { width: 100%; height: 100%; object-fit: cover; }
html.page-index .diff-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.5rem;
    }
html.page-index .diff-item {
      padding: 1.75rem;
      border-radius: var(--radius-lg);
      border: 1px solid var(--brand-border);
      background: var(--brand-muted);
      transition: box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out);
    }
html.page-index .diff-item:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.07); transform: translateY(-3px); }
html.page-index .diff-item-num {
      font-family: var(--font-display);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--brand-accent);
      margin-bottom: 0.75rem;
    }
html.page-index .diff-item h3 {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: var(--brand-fg);
    }
html.page-index .diff-item p { font-size: 0.9rem; color: var(--brand-fg-secondary); line-height: 1.65; }
@media (max-width: 860px) {
html.page-index .diff-intro-row { grid-template-columns: 1fr; }
html.page-index .diff-right-img { height: 240px; }
}
/* ─── HOW IT WORKS ───────────────────────────────────────────────────── */
html.page-index .process-section {
      padding-block: var(--section-gap);
      background:
        linear-gradient(160deg, rgba(17,17,17,0.90) 0%, rgba(17,17,17,0.78) 45%, rgba(17,17,17,0.93) 100%),
        url('../assets/home-how-it-works-bg.jpg') center 30% / cover no-repeat;
      background-color: var(--brand-fg);
      color: #f0ede8;
    }
html.page-index .process-section .section-header .kicker { color: var(--brand-accent); }
html.page-index .process-section .section-header h2 { color: #ffffff; }
html.page-index .process-section .section-header p { color: rgba(240,237,232,0.7); }
html.page-index .process-intro { max-width: 68ch; color: rgba(240,237,232,0.72); margin-bottom: 3.5rem; font-size: 1.0625rem; line-height: 1.75; }
html.page-index .process-intro p + p { margin-top: 1em; }
html.page-index .process-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }
html.page-index .process-steps::before {
      content: '';
      position: absolute;
      left: 28px;
      top: 40px;
      bottom: 40px;
      width: 2px;
      background: linear-gradient(to bottom, var(--brand-accent), rgba(205,62,45,0.15));
    }
html.page-index .process-step {
      display: grid;
      grid-template-columns: 60px 1fr;
      gap: 2rem;
      align-items: start;
      padding-block: 2.25rem;
      border-bottom: 1px solid rgba(240,237,232,0.07);
      position: relative;
      transition: background 0.22s;
    }
html.page-index .process-step:last-child { border-bottom: none; }
html.page-index .process-step-num {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: rgba(205,62,45,0.15);
      border: 2px solid var(--brand-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--brand-accent);
      flex-shrink: 0;
      position: relative;
      z-index: 1;
      transition: background 0.22s, color 0.22s;
    }
html.page-index .process-step:hover .process-step-num {
      background: var(--brand-accent);
      color: #fff;
    }
html.page-index .process-step-content { padding-block: 0.5rem; }
html.page-index .process-step-content h3 {
      font-family: var(--font-display);
      font-size: 1.1875rem;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 0.5rem;
    }
html.page-index .process-step-content p { font-size: 0.9375rem; color: rgba(240,237,232,0.7); line-height: 1.7; max-width: 62ch; }
@media (max-width: 640px) {
html.page-index .process-steps::before { left: 20px; }
html.page-index .process-step { grid-template-columns: 44px 1fr; gap: 1.25rem; }
html.page-index .process-step-num { width: 44px; height: 44px; font-size: 0.9rem; }
}
/* ─── CTA BAND ───────────────────────────────────────────────────────── */
html.page-index .cta-band-section {
      position: relative;
      padding-block: clamp(5rem, 9vw, 9rem);
      overflow: hidden;
    }
html.page-index .cta-band-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/cta-conversation.jpg');
      background-size: cover;
      background-position: center;
    }
html.page-index .cta-band-scrim {
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, rgba(10,10,14,0.88) 0%, rgba(10,10,14,0.72) 60%, rgba(10,10,14,0.5) 100%);
    }
html.page-index .cta-band-content {
      position: relative;
      z-index: 2;
      max-width: 680px;
    }
html.page-index .cta-band-content .kicker { color: var(--brand-accent); margin-bottom: 1rem; }
html.page-index .cta-band-content h2 {
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 3.5vw, 3rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: #ffffff;
      margin-bottom: 1.5rem;
      text-shadow: 0 2px 20px rgba(0,0,0,0.3);
    }
html.page-index .cta-band-body {
      color: rgba(240,237,232,0.82);
      font-size: clamp(1rem, 1.4vw, 1.0625rem);
      line-height: 1.75;
      max-width: 58ch;
      margin-bottom: 2.25rem;
      text-shadow: 0 1px 8px rgba(0,0,0,0.2);
    }
html.page-index .cta-band-body p + p { margin-top: 1em; }
html.page-index .cta-band-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* ─── CONTACT FORM SECTION ───────────────────────────────────────────── */
html.page-index .contact-section { padding-block: var(--section-gap); background: var(--brand-muted); }
html.page-index .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 4rem;
      align-items: start;
    }
html.page-index .contact-info-col { padding-top: 0.5rem; }
html.page-index .contact-info-col h2 { margin-bottom: 1rem; }
html.page-index .contact-info-col .body-md { color: var(--brand-fg-secondary); max-width: 44ch; margin-bottom: 2.5rem; }
html.page-index .contact-detail-row {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
html.page-index .contact-detail {
      display: flex;
      align-items: flex-start;
      gap: 0.875rem;
    }
html.page-index .contact-detail-icon {
      width: 36px; height: 36px;
      background: rgba(205,62,45,0.1);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-index .contact-detail-icon svg { width: 16px; height: 16px; color: var(--brand-accent); }
html.page-index .contact-detail-text { font-size: 0.9375rem; color: var(--brand-fg-secondary); }
html.page-index .contact-detail-text a { color: var(--brand-accent); }
html.page-index .contact-detail-text a:hover { text-decoration: underline; }
html.page-index .contact-form-col {
      background: var(--brand-bg);
      border: 1px solid var(--brand-border);
      border-radius: var(--radius-lg);
      padding: 2.5rem;
    }
html.page-index .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
html.page-index .form-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
html.page-index .form-field label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--brand-fg);
    }
html.page-index .form-field input,
html.page-index .form-field textarea,
html.page-index .form-field select {
      width: 100%;
      padding: 0.75rem 1rem;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--brand-fg);
      background: var(--brand-bg);
      border: 1.5px solid var(--brand-border);
      border-radius: var(--radius);
      transition: border-color 0.2s, box-shadow 0.2s;
      outline: none;
    }
html.page-index .form-field input:focus,
html.page-index .form-field textarea:focus {
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-index .form-field textarea { min-height: 120px; resize: vertical; }
html.page-index .form-submit { margin-top: 0.5rem; }
html.page-index .form-submit .btn { width: 100%; justify-content: center; }
html.page-index .form-status {
      margin-top: 1rem;
      padding: 0.875rem 1rem;
      border-radius: var(--radius);
      font-size: 0.9rem;
      font-weight: 500;
      display: none;
    }
html.page-index .form-status.success {
      display: block;
      background: rgba(34,139,34,0.08);
      color: #226622;
      border: 1px solid rgba(34,139,34,0.25);
    }
html.page-index .form-status.error {
      display: block;
      background: rgba(205,62,45,0.08);
      color: var(--brand-accent-2);
      border: 1px solid rgba(205,62,45,0.25);
    }
@media (max-width: 860px) {
html.page-index .contact-grid { grid-template-columns: 1fr; }
html.page-index .form-row { grid-template-columns: 1fr; }
}
/* ─── SCROLL ENTRANCE SYSTEM ─────────────────────────────────────────── */
html.page-index .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    }
html.page-index .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-index .reveal-delay-1 { transition-delay: 0.08s; }
html.page-index .reveal-delay-2 { transition-delay: 0.16s; }
html.page-index .reveal-delay-3 { transition-delay: 0.24s; }
html.page-index .reveal-delay-4 { transition-delay: 0.32s; }
html.page-index .reveal-delay-5 { transition-delay: 0.40s; }
html.page-index .reveal-delay-6 { transition-delay: 0.48s; }
html.page-index .reveal-delay-7 { transition-delay: 0.56s; }
@media (prefers-reduced-motion: reduce) {
html.page-index .reveal,
html.page-index [class*="reveal-delay-"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
      }
html.page-index .page-hero-bg { animation: none; }
html.page-index body::before { animation: none; }
html.page-index .marquee-track { animation: none; }
}
/* ─── DIVIDERS ───────────────────────────────────────────────────────── */
html.page-index .drawn-line {
      display: block;
      width: 48px;
      height: 3px;
      background: var(--brand-accent);
      border-radius: 2px;
      margin-bottom: 1.5rem;
    }
html.page-index .section--dark .drawn-line { background: var(--brand-accent); }
/* ─── RESPONSIVE UTILITIES ───────────────────────────────────────────── */
html.page-index @media (max-width: 640px) {
      .page-hero { min-height: 100svh; }
      .page-hero h1 { font-size: clamp(1.9rem, 7vw, 2.5rem); }
      .audience-grid { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: 1fr; }
      .diff-grid { grid-template-columns: 1fr; }
      .contact-form-col { padding: 1.5rem; }
    }
html.page-index .faq-section { padding-block: var(--section-gap); }
html.page-index .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-index .faq-item { border-bottom: 1px solid var(--brand-border); padding-block: 1.5rem; }
html.page-index .faq-item:first-child { border-top: 1px solid var(--brand-border); }
html.page-index .faq-q {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: 0.6rem;
    }
html.page-index .faq-a { font-size: 0.9375rem; color: var(--brand-fg-secondary); line-height: 1.7; }
html.page-index body.paused *,
html.page-index body.paused *::before,
html.page-index body.paused *::after {
    animation-play-state: paused !important;
  }


/* ==================== industries-electrical-electronics.html (scope: .page-industries-electrical-electronics) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-industries-electrical-electronics {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-industries-electrical-electronics *,
html.page-industries-electrical-electronics *::before,
html.page-industries-electrical-electronics *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-industries-electrical-electronics { overflow-x: clip; scroll-behavior: smooth; }
html.page-industries-electrical-electronics body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-industries-electrical-electronics img,
html.page-industries-electrical-electronics svg,
html.page-industries-electrical-electronics video { max-width: 100%; height: auto; display: block; }
html.page-industries-electrical-electronics a { color: inherit; text-decoration: none; }
html.page-industries-electrical-electronics ul,
html.page-industries-electrical-electronics ol { list-style: none; }
html.page-industries-electrical-electronics button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-industries-electrical-electronics .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-industries-electrical-electronics .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-industries-electrical-electronics .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-industries-electrical-electronics .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-industries-electrical-electronics .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-industries-electrical-electronics .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-industries-electrical-electronics .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-industries-electrical-electronics .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-industries-electrical-electronics .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-industries-electrical-electronics .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-industries-electrical-electronics .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-industries-electrical-electronics .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-industries-electrical-electronics .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-industries-electrical-electronics .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-industries-electrical-electronics .btn { min-height: 44px; }
}
html.page-industries-electrical-electronics .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-industries-electrical-electronics .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-industries-electrical-electronics .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-industries-electrical-electronics .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-industries-electrical-electronics .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-industries-electrical-electronics .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-industries-electrical-electronics .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-industries-electrical-electronics .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/hero-territory-mapping.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-industries-electrical-electronics .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-industries-electrical-electronics .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-industries-electrical-electronics .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-industries-electrical-electronics .page-hero-inner { max-width: 680px; }
html.page-industries-electrical-electronics .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-industries-electrical-electronics .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-industries-electrical-electronics .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-industries-electrical-electronics .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-industries-electrical-electronics .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-industries-electrical-electronics .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-industries-electrical-electronics .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-industries-electrical-electronics .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-industries-electrical-electronics .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-industries-electrical-electronics .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-industries-electrical-electronics .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-industries-electrical-electronics .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-industries-electrical-electronics 32s linear infinite;
      gap: 0;
    }
html.page-industries-electrical-electronics .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-industries-electrical-electronics .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-industries-electrical-electronics .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-industries-electrical-electronics {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-electrical-electronics .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-industries-electrical-electronics #di-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-industries-electrical-electronics .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-industries-electrical-electronics .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-industries-electrical-electronics .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-industries-electrical-electronics .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-industries-electrical-electronics .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-industries-electrical-electronics #di-approach { background: var(--brand-bg); }
html.page-industries-electrical-electronics .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-industries-electrical-electronics .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-industries-electrical-electronics .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-industries-electrical-electronics .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-industries-electrical-electronics .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-industries-electrical-electronics .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-industries-electrical-electronics .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-industries-electrical-electronics .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-industries-electrical-electronics .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-industries-electrical-electronics .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-industries-electrical-electronics .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-industries-electrical-electronics .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-industries-electrical-electronics #di-deliverables { background: var(--canvas); }
html.page-industries-electrical-electronics .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-industries-electrical-electronics .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-industries-electrical-electronics .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-industries-electrical-electronics .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-industries-electrical-electronics .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-industries-electrical-electronics .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-industries-electrical-electronics .deliverable-card:hover::before { transform: scaleX(1); }
html.page-industries-electrical-electronics .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-industries-electrical-electronics .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-industries-electrical-electronics .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-industries-electrical-electronics #di-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-industries-electrical-electronics #di-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-industries-electrical-electronics .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-industries-electrical-electronics .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-industries-electrical-electronics .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-industries-electrical-electronics #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-industries-electrical-electronics .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-industries-electrical-electronics .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-industries-electrical-electronics .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-industries-electrical-electronics .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-industries-electrical-electronics .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-industries-electrical-electronics .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-industries-electrical-electronics .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-industries-electrical-electronics .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-industries-electrical-electronics .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-industries-electrical-electronics .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-industries-electrical-electronics .form-group.full { grid-column: 1 / -1; }
html.page-industries-electrical-electronics .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-industries-electrical-electronics .form-group input,
html.page-industries-electrical-electronics .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-industries-electrical-electronics .form-group input:focus,
html.page-industries-electrical-electronics .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-industries-electrical-electronics .form-group textarea { min-height: 110px; }
html.page-industries-electrical-electronics .form-submit { margin-top: 1.25rem; }
html.page-industries-electrical-electronics .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-industries-electrical-electronics .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-industries-electrical-electronics .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-industries-electrical-electronics .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-industries-electrical-electronics .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-industries-electrical-electronics @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-electrical-electronics .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-industries-electrical-electronics .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-industries-electrical-electronics body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-industries-electrical-electronics 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-industries-electrical-electronics {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-electrical-electronics body::before { animation: none; }
}
html.page-industries-electrical-electronics main,
html.page-industries-electrical-electronics section,
html.page-industries-electrical-electronics .container { position: relative; z-index: 1; }
html.page-industries-electrical-electronics .faq-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--canvas); border-top: 1px solid var(--border); }
html.page-industries-electrical-electronics .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-industries-electrical-electronics .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-industries-electrical-electronics .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-industries-electrical-electronics .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-industries-electrical-electronics .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== industries-industrial-automation-controls.html (scope: .page-industries-industrial-automation-controls) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls *,
html.page-industries-industrial-automation-controls *::before,
html.page-industries-industrial-automation-controls *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-industries-industrial-automation-controls { overflow-x: clip; scroll-behavior: smooth; }
html.page-industries-industrial-automation-controls body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-industries-industrial-automation-controls img,
html.page-industries-industrial-automation-controls svg,
html.page-industries-industrial-automation-controls video { max-width: 100%; height: auto; display: block; }
html.page-industries-industrial-automation-controls a { color: inherit; text-decoration: none; }
html.page-industries-industrial-automation-controls ul,
html.page-industries-industrial-automation-controls ol { list-style: none; }
html.page-industries-industrial-automation-controls button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-industries-industrial-automation-controls .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-industries-industrial-automation-controls .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-industries-industrial-automation-controls .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-industries-industrial-automation-controls .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-industries-industrial-automation-controls .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-industries-industrial-automation-controls .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-industries-industrial-automation-controls .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-industries-industrial-automation-controls .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-industries-industrial-automation-controls .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-industries-industrial-automation-controls .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-industries-industrial-automation-controls .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-industries-industrial-automation-controls .btn { min-height: 44px; }
}
html.page-industries-industrial-automation-controls .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-industries-industrial-automation-controls .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-industries-industrial-automation-controls .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-industries-industrial-automation-controls .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-industries-industrial-automation-controls .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-industries-industrial-automation-controls .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-industries-industrial-automation-controls .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/differentiators-structured-process.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-industries-industrial-automation-controls .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-industries-industrial-automation-controls .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-industries-industrial-automation-controls .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-industries-industrial-automation-controls .page-hero-inner { max-width: 680px; }
html.page-industries-industrial-automation-controls .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-industries-industrial-automation-controls .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-industries-industrial-automation-controls .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-industries-industrial-automation-controls .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-industries-industrial-automation-controls .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-industries-industrial-automation-controls .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-industries-industrial-automation-controls .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-industries-industrial-automation-controls .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-industries-industrial-automation-controls .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-industries-industrial-automation-controls .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-industries-industrial-automation-controls .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-industries-industrial-automation-controls 32s linear infinite;
      gap: 0;
    }
html.page-industries-industrial-automation-controls .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-industries-industrial-automation-controls .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-industries-industrial-automation-controls .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-industries-industrial-automation-controls {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-industrial-automation-controls .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-industries-industrial-automation-controls #iac-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-industries-industrial-automation-controls #iac-screening { background: var(--brand-bg); }
html.page-industries-industrial-automation-controls .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-industries-industrial-automation-controls .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-industries-industrial-automation-controls .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-industries-industrial-automation-controls .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-industries-industrial-automation-controls .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-industries-industrial-automation-controls #iac-approach { background: var(--brand-bg); }
html.page-industries-industrial-automation-controls .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-industries-industrial-automation-controls .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-industries-industrial-automation-controls .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-industries-industrial-automation-controls .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-industries-industrial-automation-controls .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-industries-industrial-automation-controls .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-industries-industrial-automation-controls .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-industries-industrial-automation-controls .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-industries-industrial-automation-controls .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-industries-industrial-automation-controls .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-industries-industrial-automation-controls .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-industries-industrial-automation-controls .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls #iac-deliverables { background: var(--canvas); }
html.page-industries-industrial-automation-controls .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-industries-industrial-automation-controls .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-industries-industrial-automation-controls .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-industries-industrial-automation-controls .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-industries-industrial-automation-controls .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-industries-industrial-automation-controls .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-industries-industrial-automation-controls .deliverable-card:hover::before { transform: scaleX(1); }
html.page-industries-industrial-automation-controls .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-industries-industrial-automation-controls .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-industries-industrial-automation-controls .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls #iac-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-industries-industrial-automation-controls #iac-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-industries-industrial-automation-controls .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-industries-industrial-automation-controls .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-industries-industrial-automation-controls .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-industries-industrial-automation-controls .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-industries-industrial-automation-controls .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-industries-industrial-automation-controls .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-industries-industrial-automation-controls .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-industries-industrial-automation-controls .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-industries-industrial-automation-controls .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-industries-industrial-automation-controls .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-industries-industrial-automation-controls .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-industries-industrial-automation-controls .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-industries-industrial-automation-controls .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-industries-industrial-automation-controls .form-group.full { grid-column: 1 / -1; }
html.page-industries-industrial-automation-controls .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-industries-industrial-automation-controls .form-group input,
html.page-industries-industrial-automation-controls .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-industries-industrial-automation-controls .form-group input:focus,
html.page-industries-industrial-automation-controls .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-industries-industrial-automation-controls .form-group textarea { min-height: 110px; }
html.page-industries-industrial-automation-controls .form-submit { margin-top: 1.25rem; }
html.page-industries-industrial-automation-controls .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-industries-industrial-automation-controls .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-industries-industrial-automation-controls .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-industries-industrial-automation-controls .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-industries-industrial-automation-controls .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-industries-industrial-automation-controls @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-industrial-automation-controls .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-industries-industrial-automation-controls .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-industries-industrial-automation-controls body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-industries-industrial-automation-controls 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-industries-industrial-automation-controls {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-industrial-automation-controls body::before { animation: none; }
}
html.page-industries-industrial-automation-controls main,
html.page-industries-industrial-automation-controls section,
html.page-industries-industrial-automation-controls .container { position: relative; z-index: 1; }
html.page-industries-industrial-automation-controls .faq-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--canvas); }
html.page-industries-industrial-automation-controls .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-industries-industrial-automation-controls .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-industries-industrial-automation-controls .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-industries-industrial-automation-controls .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-industries-industrial-automation-controls .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== industries-machinery-capital-equipment.html (scope: .page-industries-machinery-capital-equipment) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment *,
html.page-industries-machinery-capital-equipment *::before,
html.page-industries-machinery-capital-equipment *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-industries-machinery-capital-equipment { overflow-x: clip; scroll-behavior: smooth; }
html.page-industries-machinery-capital-equipment body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-industries-machinery-capital-equipment img,
html.page-industries-machinery-capital-equipment svg,
html.page-industries-machinery-capital-equipment video { max-width: 100%; height: auto; display: block; }
html.page-industries-machinery-capital-equipment a { color: inherit; text-decoration: none; }
html.page-industries-machinery-capital-equipment ul,
html.page-industries-machinery-capital-equipment ol { list-style: none; }
html.page-industries-machinery-capital-equipment button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-industries-machinery-capital-equipment .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-industries-machinery-capital-equipment .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-industries-machinery-capital-equipment .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-industries-machinery-capital-equipment .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-industries-machinery-capital-equipment .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-industries-machinery-capital-equipment .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-industries-machinery-capital-equipment .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-industries-machinery-capital-equipment .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-industries-machinery-capital-equipment .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-industries-machinery-capital-equipment .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-industries-machinery-capital-equipment .btn { min-height: 44px; }
}
html.page-industries-machinery-capital-equipment .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-industries-machinery-capital-equipment .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-industries-machinery-capital-equipment .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-industries-machinery-capital-equipment .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-industries-machinery-capital-equipment .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-industries-machinery-capital-equipment .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-industries-machinery-capital-equipment .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/hero-channel-systems.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-industries-machinery-capital-equipment .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-industries-machinery-capital-equipment .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-industries-machinery-capital-equipment .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-industries-machinery-capital-equipment .page-hero-inner { max-width: 680px; }
html.page-industries-machinery-capital-equipment .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-industries-machinery-capital-equipment .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-industries-machinery-capital-equipment .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-industries-machinery-capital-equipment .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-industries-machinery-capital-equipment .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-industries-machinery-capital-equipment .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-industries-machinery-capital-equipment .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-industries-machinery-capital-equipment .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-industries-machinery-capital-equipment .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-industries-machinery-capital-equipment .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-industries-machinery-capital-equipment .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-industries-machinery-capital-equipment 32s linear infinite;
      gap: 0;
    }
html.page-industries-machinery-capital-equipment .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-industries-machinery-capital-equipment .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-industries-machinery-capital-equipment .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-industries-machinery-capital-equipment {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-machinery-capital-equipment .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment #di-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-industries-machinery-capital-equipment .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-industries-machinery-capital-equipment .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-industries-machinery-capital-equipment .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-industries-machinery-capital-equipment .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-industries-machinery-capital-equipment .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment #di-approach { background: var(--brand-bg); }
html.page-industries-machinery-capital-equipment .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-industries-machinery-capital-equipment .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-industries-machinery-capital-equipment .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-industries-machinery-capital-equipment .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-industries-machinery-capital-equipment .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-industries-machinery-capital-equipment .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-industries-machinery-capital-equipment .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-industries-machinery-capital-equipment .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-industries-machinery-capital-equipment .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-industries-machinery-capital-equipment .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-industries-machinery-capital-equipment .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-industries-machinery-capital-equipment .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment #di-deliverables { background: var(--canvas); }
html.page-industries-machinery-capital-equipment .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-industries-machinery-capital-equipment .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-industries-machinery-capital-equipment .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-industries-machinery-capital-equipment .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-industries-machinery-capital-equipment .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-industries-machinery-capital-equipment .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-industries-machinery-capital-equipment .deliverable-card:hover::before { transform: scaleX(1); }
html.page-industries-machinery-capital-equipment .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-industries-machinery-capital-equipment .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-industries-machinery-capital-equipment .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment #di-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-industries-machinery-capital-equipment #di-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-industries-machinery-capital-equipment .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-industries-machinery-capital-equipment .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-industries-machinery-capital-equipment .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-industries-machinery-capital-equipment .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-industries-machinery-capital-equipment .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-industries-machinery-capital-equipment .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-industries-machinery-capital-equipment .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-industries-machinery-capital-equipment .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-industries-machinery-capital-equipment .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-industries-machinery-capital-equipment .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-industries-machinery-capital-equipment .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-industries-machinery-capital-equipment .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-industries-machinery-capital-equipment .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-industries-machinery-capital-equipment .form-group.full { grid-column: 1 / -1; }
html.page-industries-machinery-capital-equipment .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-industries-machinery-capital-equipment .form-group input,
html.page-industries-machinery-capital-equipment .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-industries-machinery-capital-equipment .form-group input:focus,
html.page-industries-machinery-capital-equipment .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-industries-machinery-capital-equipment .form-group textarea { min-height: 110px; }
html.page-industries-machinery-capital-equipment .form-submit { margin-top: 1.25rem; }
html.page-industries-machinery-capital-equipment .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-industries-machinery-capital-equipment .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-industries-machinery-capital-equipment .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-industries-machinery-capital-equipment .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-industries-machinery-capital-equipment .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-industries-machinery-capital-equipment @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-machinery-capital-equipment .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-industries-machinery-capital-equipment .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-industries-machinery-capital-equipment body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-industries-machinery-capital-equipment 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-industries-machinery-capital-equipment {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-machinery-capital-equipment body::before { animation: none; }
}
html.page-industries-machinery-capital-equipment main,
html.page-industries-machinery-capital-equipment section,
html.page-industries-machinery-capital-equipment .container { position: relative; z-index: 1; }
html.page-industries-machinery-capital-equipment .faq-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--canvas); border-top: 1px solid var(--border); }
html.page-industries-machinery-capital-equipment .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-industries-machinery-capital-equipment .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-industries-machinery-capital-equipment .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-industries-machinery-capital-equipment .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-industries-machinery-capital-equipment .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== industries-packaging-processing-equipment.html (scope: .page-industries-packaging-processing-equipment) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment *,
html.page-industries-packaging-processing-equipment *::before,
html.page-industries-packaging-processing-equipment *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-industries-packaging-processing-equipment { overflow-x: clip; scroll-behavior: smooth; }
html.page-industries-packaging-processing-equipment body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-industries-packaging-processing-equipment img,
html.page-industries-packaging-processing-equipment svg,
html.page-industries-packaging-processing-equipment video { max-width: 100%; height: auto; display: block; }
html.page-industries-packaging-processing-equipment a { color: inherit; text-decoration: none; }
html.page-industries-packaging-processing-equipment ul,
html.page-industries-packaging-processing-equipment ol { list-style: none; }
html.page-industries-packaging-processing-equipment button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-industries-packaging-processing-equipment .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-industries-packaging-processing-equipment .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-industries-packaging-processing-equipment .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-industries-packaging-processing-equipment .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-industries-packaging-processing-equipment .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-industries-packaging-processing-equipment .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-industries-packaging-processing-equipment .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-industries-packaging-processing-equipment .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-industries-packaging-processing-equipment .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-industries-packaging-processing-equipment .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-industries-packaging-processing-equipment .btn { min-height: 44px; }
}
html.page-industries-packaging-processing-equipment .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-industries-packaging-processing-equipment .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-industries-packaging-processing-equipment .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-industries-packaging-processing-equipment .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-industries-packaging-processing-equipment .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-industries-packaging-processing-equipment .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-industries-packaging-processing-equipment .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/hero-activation.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-industries-packaging-processing-equipment .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-industries-packaging-processing-equipment .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-industries-packaging-processing-equipment .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-industries-packaging-processing-equipment .page-hero-inner { max-width: 680px; }
html.page-industries-packaging-processing-equipment .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-industries-packaging-processing-equipment .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-industries-packaging-processing-equipment .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-industries-packaging-processing-equipment .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-industries-packaging-processing-equipment .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-industries-packaging-processing-equipment .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-industries-packaging-processing-equipment .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-industries-packaging-processing-equipment .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-industries-packaging-processing-equipment .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-industries-packaging-processing-equipment .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-industries-packaging-processing-equipment .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-industries-packaging-processing-equipment 32s linear infinite;
      gap: 0;
    }
html.page-industries-packaging-processing-equipment .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-industries-packaging-processing-equipment .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-industries-packaging-processing-equipment .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-industries-packaging-processing-equipment {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-packaging-processing-equipment .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment #ppe-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-industries-packaging-processing-equipment #ppe-screening { background: var(--brand-bg); }
html.page-industries-packaging-processing-equipment .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-industries-packaging-processing-equipment .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-industries-packaging-processing-equipment .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-industries-packaging-processing-equipment .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-industries-packaging-processing-equipment .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment #ppe-approach { background: var(--brand-bg); }
html.page-industries-packaging-processing-equipment .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-industries-packaging-processing-equipment .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-industries-packaging-processing-equipment .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-industries-packaging-processing-equipment .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-industries-packaging-processing-equipment .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-industries-packaging-processing-equipment .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-industries-packaging-processing-equipment .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-industries-packaging-processing-equipment .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-industries-packaging-processing-equipment .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-industries-packaging-processing-equipment .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-industries-packaging-processing-equipment .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-industries-packaging-processing-equipment .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment #ppe-deliverables { background: var(--canvas); }
html.page-industries-packaging-processing-equipment .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-industries-packaging-processing-equipment .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-industries-packaging-processing-equipment .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-industries-packaging-processing-equipment .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-industries-packaging-processing-equipment .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-industries-packaging-processing-equipment .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-industries-packaging-processing-equipment .deliverable-card:hover::before { transform: scaleX(1); }
html.page-industries-packaging-processing-equipment .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-industries-packaging-processing-equipment .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-industries-packaging-processing-equipment .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment #ppe-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-industries-packaging-processing-equipment #ppe-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-industries-packaging-processing-equipment .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-industries-packaging-processing-equipment .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-industries-packaging-processing-equipment .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-industries-packaging-processing-equipment .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-industries-packaging-processing-equipment .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-industries-packaging-processing-equipment .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-industries-packaging-processing-equipment .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-industries-packaging-processing-equipment .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-industries-packaging-processing-equipment .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-industries-packaging-processing-equipment .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-industries-packaging-processing-equipment .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-industries-packaging-processing-equipment .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-industries-packaging-processing-equipment .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-industries-packaging-processing-equipment .form-group.full { grid-column: 1 / -1; }
html.page-industries-packaging-processing-equipment .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-industries-packaging-processing-equipment .form-group input,
html.page-industries-packaging-processing-equipment .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-industries-packaging-processing-equipment .form-group input:focus,
html.page-industries-packaging-processing-equipment .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-industries-packaging-processing-equipment .form-group textarea { min-height: 110px; }
html.page-industries-packaging-processing-equipment .form-submit { margin-top: 1.25rem; }
html.page-industries-packaging-processing-equipment .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-industries-packaging-processing-equipment .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-industries-packaging-processing-equipment .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-industries-packaging-processing-equipment .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-industries-packaging-processing-equipment .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-industries-packaging-processing-equipment @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-packaging-processing-equipment .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-industries-packaging-processing-equipment .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-industries-packaging-processing-equipment body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-industries-packaging-processing-equipment 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-industries-packaging-processing-equipment {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-packaging-processing-equipment body::before { animation: none; }
}
html.page-industries-packaging-processing-equipment main,
html.page-industries-packaging-processing-equipment section,
html.page-industries-packaging-processing-equipment .container { position: relative; z-index: 1; }
html.page-industries-packaging-processing-equipment .faq-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--canvas); }
html.page-industries-packaging-processing-equipment .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-industries-packaging-processing-equipment .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-industries-packaging-processing-equipment .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-industries-packaging-processing-equipment .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-industries-packaging-processing-equipment .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== industries-precision-manufacturing-engineering.html (scope: .page-industries-precision-manufacturing-engineering) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering *,
html.page-industries-precision-manufacturing-engineering *::before,
html.page-industries-precision-manufacturing-engineering *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-industries-precision-manufacturing-engineering { overflow-x: clip; scroll-behavior: smooth; }
html.page-industries-precision-manufacturing-engineering body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-industries-precision-manufacturing-engineering img,
html.page-industries-precision-manufacturing-engineering svg,
html.page-industries-precision-manufacturing-engineering video { max-width: 100%; height: auto; display: block; }
html.page-industries-precision-manufacturing-engineering a { color: inherit; text-decoration: none; }
html.page-industries-precision-manufacturing-engineering ul,
html.page-industries-precision-manufacturing-engineering ol { list-style: none; }
html.page-industries-precision-manufacturing-engineering button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-industries-precision-manufacturing-engineering .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-industries-precision-manufacturing-engineering .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-industries-precision-manufacturing-engineering .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-industries-precision-manufacturing-engineering .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-industries-precision-manufacturing-engineering .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-industries-precision-manufacturing-engineering .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-industries-precision-manufacturing-engineering .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-industries-precision-manufacturing-engineering .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-industries-precision-manufacturing-engineering .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-industries-precision-manufacturing-engineering .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-industries-precision-manufacturing-engineering .btn { min-height: 44px; }
}
html.page-industries-precision-manufacturing-engineering .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-industries-precision-manufacturing-engineering .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-industries-precision-manufacturing-engineering .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-industries-precision-manufacturing-engineering .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-industries-precision-manufacturing-engineering .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-industries-precision-manufacturing-engineering .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-industries-precision-manufacturing-engineering .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/hero-activation.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-industries-precision-manufacturing-engineering .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-industries-precision-manufacturing-engineering .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-industries-precision-manufacturing-engineering .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-industries-precision-manufacturing-engineering .page-hero-inner { max-width: 680px; }
html.page-industries-precision-manufacturing-engineering .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-industries-precision-manufacturing-engineering .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-industries-precision-manufacturing-engineering .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-industries-precision-manufacturing-engineering .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-industries-precision-manufacturing-engineering .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-industries-precision-manufacturing-engineering .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-industries-precision-manufacturing-engineering .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-industries-precision-manufacturing-engineering .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-industries-precision-manufacturing-engineering .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-industries-precision-manufacturing-engineering .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-industries-precision-manufacturing-engineering .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-industries-precision-manufacturing-engineering 32s linear infinite;
      gap: 0;
    }
html.page-industries-precision-manufacturing-engineering .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-industries-precision-manufacturing-engineering .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-industries-precision-manufacturing-engineering .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-industries-precision-manufacturing-engineering {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-precision-manufacturing-engineering .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering #di-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-industries-precision-manufacturing-engineering .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-industries-precision-manufacturing-engineering .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-industries-precision-manufacturing-engineering .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-industries-precision-manufacturing-engineering .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-industries-precision-manufacturing-engineering .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering #di-approach { background: var(--brand-bg); }
html.page-industries-precision-manufacturing-engineering .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-industries-precision-manufacturing-engineering .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-industries-precision-manufacturing-engineering .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-industries-precision-manufacturing-engineering .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-industries-precision-manufacturing-engineering .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-industries-precision-manufacturing-engineering .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-industries-precision-manufacturing-engineering .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-industries-precision-manufacturing-engineering .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-industries-precision-manufacturing-engineering .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-industries-precision-manufacturing-engineering .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-industries-precision-manufacturing-engineering .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-industries-precision-manufacturing-engineering .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering #di-deliverables { background: var(--canvas); }
html.page-industries-precision-manufacturing-engineering .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-industries-precision-manufacturing-engineering .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-industries-precision-manufacturing-engineering .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-industries-precision-manufacturing-engineering .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-industries-precision-manufacturing-engineering .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-industries-precision-manufacturing-engineering .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-industries-precision-manufacturing-engineering .deliverable-card:hover::before { transform: scaleX(1); }
html.page-industries-precision-manufacturing-engineering .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-industries-precision-manufacturing-engineering .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-industries-precision-manufacturing-engineering .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering #di-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-industries-precision-manufacturing-engineering #di-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-industries-precision-manufacturing-engineering .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-industries-precision-manufacturing-engineering .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-industries-precision-manufacturing-engineering .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-industries-precision-manufacturing-engineering .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-industries-precision-manufacturing-engineering .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-industries-precision-manufacturing-engineering .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-industries-precision-manufacturing-engineering .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-industries-precision-manufacturing-engineering .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-industries-precision-manufacturing-engineering .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-industries-precision-manufacturing-engineering .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-industries-precision-manufacturing-engineering .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-industries-precision-manufacturing-engineering .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-industries-precision-manufacturing-engineering .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-industries-precision-manufacturing-engineering .form-group.full { grid-column: 1 / -1; }
html.page-industries-precision-manufacturing-engineering .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-industries-precision-manufacturing-engineering .form-group input,
html.page-industries-precision-manufacturing-engineering .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-industries-precision-manufacturing-engineering .form-group input:focus,
html.page-industries-precision-manufacturing-engineering .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-industries-precision-manufacturing-engineering .form-group textarea { min-height: 110px; }
html.page-industries-precision-manufacturing-engineering .form-submit { margin-top: 1.25rem; }
html.page-industries-precision-manufacturing-engineering .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-industries-precision-manufacturing-engineering .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-industries-precision-manufacturing-engineering .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-industries-precision-manufacturing-engineering .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-industries-precision-manufacturing-engineering .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-precision-manufacturing-engineering .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-industries-precision-manufacturing-engineering .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-industries-precision-manufacturing-engineering body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-industries-precision-manufacturing-engineering 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-industries-precision-manufacturing-engineering {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-precision-manufacturing-engineering body::before { animation: none; }
}
html.page-industries-precision-manufacturing-engineering main,
html.page-industries-precision-manufacturing-engineering section,
html.page-industries-precision-manufacturing-engineering .container { position: relative; z-index: 1; }


/* ==================== industries-pumps-valves-fluid-handling.html (scope: .page-industries-pumps-valves-fluid-handling) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling *,
html.page-industries-pumps-valves-fluid-handling *::before,
html.page-industries-pumps-valves-fluid-handling *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-industries-pumps-valves-fluid-handling { overflow-x: clip; scroll-behavior: smooth; }
html.page-industries-pumps-valves-fluid-handling body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-industries-pumps-valves-fluid-handling img,
html.page-industries-pumps-valves-fluid-handling svg,
html.page-industries-pumps-valves-fluid-handling video { max-width: 100%; height: auto; display: block; }
html.page-industries-pumps-valves-fluid-handling a { color: inherit; text-decoration: none; }
html.page-industries-pumps-valves-fluid-handling ul,
html.page-industries-pumps-valves-fluid-handling ol { list-style: none; }
html.page-industries-pumps-valves-fluid-handling button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-industries-pumps-valves-fluid-handling .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-industries-pumps-valves-fluid-handling .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-industries-pumps-valves-fluid-handling .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-industries-pumps-valves-fluid-handling .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-industries-pumps-valves-fluid-handling .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-industries-pumps-valves-fluid-handling .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-industries-pumps-valves-fluid-handling .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-industries-pumps-valves-fluid-handling .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-industries-pumps-valves-fluid-handling .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-industries-pumps-valves-fluid-handling .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-industries-pumps-valves-fluid-handling .btn { min-height: 44px; }
}
html.page-industries-pumps-valves-fluid-handling .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-industries-pumps-valves-fluid-handling .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-industries-pumps-valves-fluid-handling .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-industries-pumps-valves-fluid-handling .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-industries-pumps-valves-fluid-handling .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-industries-pumps-valves-fluid-handling .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-industries-pumps-valves-fluid-handling .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/hero-territory-mapping.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-industries-pumps-valves-fluid-handling .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-industries-pumps-valves-fluid-handling .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-industries-pumps-valves-fluid-handling .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-industries-pumps-valves-fluid-handling .page-hero-inner { max-width: 680px; }
html.page-industries-pumps-valves-fluid-handling .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-industries-pumps-valves-fluid-handling .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-industries-pumps-valves-fluid-handling .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-industries-pumps-valves-fluid-handling .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-industries-pumps-valves-fluid-handling .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-industries-pumps-valves-fluid-handling .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-industries-pumps-valves-fluid-handling .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-industries-pumps-valves-fluid-handling .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-industries-pumps-valves-fluid-handling .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-industries-pumps-valves-fluid-handling .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-industries-pumps-valves-fluid-handling .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-industries-pumps-valves-fluid-handling 32s linear infinite;
      gap: 0;
    }
html.page-industries-pumps-valves-fluid-handling .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-industries-pumps-valves-fluid-handling .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-industries-pumps-valves-fluid-handling .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-industries-pumps-valves-fluid-handling {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-pumps-valves-fluid-handling .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling #pv-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-industries-pumps-valves-fluid-handling .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-industries-pumps-valves-fluid-handling .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-industries-pumps-valves-fluid-handling .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-industries-pumps-valves-fluid-handling .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-industries-pumps-valves-fluid-handling .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling #pv-approach { background: var(--brand-bg); }
html.page-industries-pumps-valves-fluid-handling .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-industries-pumps-valves-fluid-handling .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-industries-pumps-valves-fluid-handling .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-industries-pumps-valves-fluid-handling .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-industries-pumps-valves-fluid-handling .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-industries-pumps-valves-fluid-handling .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-industries-pumps-valves-fluid-handling .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-industries-pumps-valves-fluid-handling .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-industries-pumps-valves-fluid-handling .approach-body a { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
html.page-industries-pumps-valves-fluid-handling .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-industries-pumps-valves-fluid-handling .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
html.page-industries-pumps-valves-fluid-handling a.approach-tag { transition: background .2s, color .2s; }
html.page-industries-pumps-valves-fluid-handling a.approach-tag:hover { background: var(--brand-accent); color: #fff; }
@media (max-width: 860px) {
html.page-industries-pumps-valves-fluid-handling .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-industries-pumps-valves-fluid-handling .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling #pv-segments { background: var(--canvas); }
html.page-industries-pumps-valves-fluid-handling #pv-screening { background: var(--brand-bg); }
html.page-industries-pumps-valves-fluid-handling .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-industries-pumps-valves-fluid-handling .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-industries-pumps-valves-fluid-handling .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-industries-pumps-valves-fluid-handling .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-industries-pumps-valves-fluid-handling .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-industries-pumps-valves-fluid-handling .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-industries-pumps-valves-fluid-handling .deliverable-card:hover::before { transform: scaleX(1); }
html.page-industries-pumps-valves-fluid-handling .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-industries-pumps-valves-fluid-handling .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-industries-pumps-valves-fluid-handling .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling #pv-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-industries-pumps-valves-fluid-handling #pv-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-industries-pumps-valves-fluid-handling .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-industries-pumps-valves-fluid-handling .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-industries-pumps-valves-fluid-handling .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── FAQ ───────────────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling #pv-faq { background: var(--canvas); }
html.page-industries-pumps-valves-fluid-handling .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-industries-pumps-valves-fluid-handling .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-industries-pumps-valves-fluid-handling .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-industries-pumps-valves-fluid-handling .faq-q {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: 0.6rem;
    }
html.page-industries-pumps-valves-fluid-handling .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-industries-pumps-valves-fluid-handling .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-industries-pumps-valves-fluid-handling .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-industries-pumps-valves-fluid-handling .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-industries-pumps-valves-fluid-handling .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-industries-pumps-valves-fluid-handling .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-industries-pumps-valves-fluid-handling .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-industries-pumps-valves-fluid-handling .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-industries-pumps-valves-fluid-handling .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-industries-pumps-valves-fluid-handling .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-industries-pumps-valves-fluid-handling .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-industries-pumps-valves-fluid-handling .form-group.full { grid-column: 1 / -1; }
html.page-industries-pumps-valves-fluid-handling .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-industries-pumps-valves-fluid-handling .form-group input,
html.page-industries-pumps-valves-fluid-handling .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-industries-pumps-valves-fluid-handling .form-group input:focus,
html.page-industries-pumps-valves-fluid-handling .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-industries-pumps-valves-fluid-handling .form-group textarea { min-height: 110px; }
html.page-industries-pumps-valves-fluid-handling .form-submit { margin-top: 1.25rem; }
html.page-industries-pumps-valves-fluid-handling .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-industries-pumps-valves-fluid-handling .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-industries-pumps-valves-fluid-handling .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-industries-pumps-valves-fluid-handling .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-industries-pumps-valves-fluid-handling .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-pumps-valves-fluid-handling .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-industries-pumps-valves-fluid-handling body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-industries-pumps-valves-fluid-handling 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-industries-pumps-valves-fluid-handling {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries-pumps-valves-fluid-handling body::before { animation: none; }
}
html.page-industries-pumps-valves-fluid-handling main,
html.page-industries-pumps-valves-fluid-handling section,
html.page-industries-pumps-valves-fluid-handling .container { position: relative; z-index: 1; }


/* ==================== industries.html (scope: .page-industries) ==================== */
/* ─── TOKENS ─────────────────────────────────────────────────── */
html.page-industries {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --canvas: #f8f6f3;
      --panel: #ffffff;
      --panel-alt: #f2f0ed;
      --text-primary: #111111;
      --text-secondary: #555555;
      --text-muted: #888888;
      --border: rgba(17,17,17,0.10);
      --shadow-sm: 0 2px 8px rgba(17,17,17,0.07);
      --shadow-md: 0 6px 24px rgba(17,17,17,0.10);
      --shadow-lg: 0 16px 48px rgba(17,17,17,0.12);
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;
      --ease-out: cubic-bezier(0.22,1,0.36,1);
      --ease-in-out: cubic-bezier(0.45,0,0.55,1);
      --header-h: 72px;
    }
/* ─── RESET & BASE ───────────────────────────────────────────── */
html.page-industries *,
html.page-industries *::before,
html.page-industries *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-industries { scroll-behavior: smooth; overflow-x: clip; }
html.page-industries body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-industries img,
html.page-industries svg,
html.page-industries video { max-width: 100%; height: auto; display: block; }
html.page-industries a { color: inherit; text-decoration: none; }
html.page-industries ul { list-style: none; }
html.page-industries button { cursor: pointer; font-family: inherit; }
/* ─── TYPOGRAPHY SCALE ───────────────────────────────────────── */
html.page-industries .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--brand-fg);
    }
html.page-industries .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3vw, 2.6rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
html.page-industries .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.2vw, 1.9rem);
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.015em;
    }
html.page-industries .text-lg { font-size: 1.125rem; line-height: 1.7; }
html.page-industries .text-sm { font-size: 0.875rem; line-height: 1.6; }
html.page-industries .text-xs { font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.04em; }
html.page-industries .accent-word { color: var(--brand-accent); }
html.page-industries .kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1rem;
    }
/* ─── LAYOUT ─────────────────────────────────────────────────── */
html.page-industries .container {
      width: min(1200px, 100% - 3rem);
      margin-inline: auto;
    }
html.page-industries .container-narrow {
      width: min(760px, 100% - 3rem);
      margin-inline: auto;
    }
html.page-industries .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-industries .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── BUTTONS ────────────────────────────────────────────────── */
html.page-industries .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      line-height: 1;
      padding: 0.875rem 1.75rem;
      border-radius: var(--radius-sm);
      border: 2px solid transparent;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.22s var(--ease-out),
                  color 0.22s var(--ease-out),
                  border-color 0.22s var(--ease-out),
                  transform 0.18s var(--ease-out),
                  box-shadow 0.22s var(--ease-out);
      text-shadow: none;
    }
html.page-industries .btn:hover { transform: translateY(-2px); }
html.page-industries .btn:active { transform: translateY(0); }
html.page-industries .btn-primary {
      background: var(--brand-accent);
      color: #ffffff;
      border-color: var(--brand-accent);
    }
html.page-industries .btn-primary:hover {
      background: var(--brand-accent-2);
      border-color: var(--brand-accent-2);
    }
html.page-industries .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border-color: var(--brand-fg);
    }
html.page-industries .btn-ghost:hover {
      background: var(--brand-fg);
      color: var(--brand-bg);
    }
html.page-industries .btn-ghost-white {
      background: transparent;
      color: #ffffff;
      border-color: rgba(255,255,255,0.6);
    }
html.page-industries .btn-ghost-white:hover {
      background: rgba(255,255,255,0.15);
      border-color: #ffffff;
    }
@media (pointer: coarse) {
html.page-industries .btn { min-height: 44px; }
}
/* ─── SKIP LINK ──────────────────────────────────────────────── */
html.page-industries .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      z-index: 9999;
      background: var(--brand-accent);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      font-weight: 600;
      transition: top 0.2s;
    }
html.page-industries .skip-link:focus { top: 1rem; }
/* ─── SHARED BACKGROUND ENVIRONMENT ─────────────────────────── */
html.page-industries body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(205,62,45,0.035) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(205,62,45,0.025) 0%, transparent 55%);
      pointer-events: none;
      z-index: 0;
    }
/* ─── HERO ───────────────────────────────────────────────────── */
html.page-industries .page-hero {
      position: relative;
      min-height: 88vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: var(--header-h);
      overflow: hidden;
    }
html.page-industries .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/wws-sectors.jpg');
      background-size: cover;
      background-position: center 40%;
      z-index: 0;
      transform: scale(1.04);
      animation: hero-drift__page-industries 22s ease-in-out infinite alternate;
    }
@keyframes hero-drift__page-industries {
      from { transform: scale(1.04) translateY(0); }
      to   { transform: scale(1.08) translateY(-1.5%); }
    }
html.page-industries .page-hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(160deg, rgba(8,8,12,0.72) 0%, rgba(8,8,12,0.50) 50%, rgba(8,8,12,0.68) 100%);
    }
html.page-industries .page-hero-content {
      position: relative;
      z-index: 2;
      padding-block: clamp(4rem, 8vw, 6rem);
    }
html.page-industries .page-hero-inner {
      max-width: 760px;
    }
html.page-industries .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1.25rem;
      padding: 0.35rem 0.75rem;
      border: 1px solid rgba(205,62,45,0.45);
      border-radius: var(--radius-sm);
      background: rgba(205,62,45,0.10);
    }
html.page-industries .page-hero .display-xl {
      color: #ffffff;
      text-shadow: 0 2px 24px rgba(8,8,12,0.55);
      margin-bottom: 1.5rem;
    }
html.page-industries .page-hero-body {
      max-width: 62ch;
    }
html.page-industries .page-hero-body p {
      color: rgba(255,255,255,0.84);
      font-size: 1.0625rem;
      line-height: 1.75;
      text-shadow: 0 1px 8px rgba(8,8,12,0.5);
      margin-bottom: 1rem;
    }
html.page-industries .page-hero-body p:last-child { margin-bottom: 0; }
html.page-industries .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
      margin-top: 2.25rem;
    }
/* hero stat row */
html.page-industries .hero-stat-row {
      position: relative;
      z-index: 2;
      border-top: 1px solid rgba(255,255,255,0.12);
      background: rgba(8,8,12,0.38);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
html.page-industries .hero-stat-row .container {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
    }
html.page-industries .hero-stat {
      flex: 1 1 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      padding: 1.25rem 1rem;
      border-right: 1px solid rgba(255,255,255,0.10);
    }
html.page-industries .hero-stat:last-child { border-right: none; }
html.page-industries .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1;
    }
html.page-industries .hero-stat-label {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.58);
      text-align: center;
    }
/* ─── MARQUEE ────────────────────────────────────────────────── */
html.page-industries .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: 0.875rem;
      position: relative;
      z-index: 1;
    }
html.page-industries .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: marquee-scroll__page-industries 38s linear infinite;
    }
html.page-industries .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
    }
html.page-industries .marquee-item {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.60);
    }
html.page-industries .marquee-sep {
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
@keyframes marquee-scroll__page-industries {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-industries .marquee-track { animation: none; }
}
/* ─── INTRO / CONNECTED SYSTEM ───────────────────────────────── */
html.page-industries .lifecycle-intro {
      background: var(--canvas);
      position: relative;
      overflow: hidden;
    }
html.page-industries .lifecycle-intro::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(205,62,45,0.04) 0%, transparent 50%);
      pointer-events: none;
    }
html.page-industries .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 5vw, 4rem);
      align-items: stretch;
    }
html.page-industries .split-image-col {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      min-height: 320px;
    }
html.page-industries .split-image-col img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-md);
    }
html.page-industries .split-content-col {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 1.25rem;
    }
html.page-industries .split-content-col h2 {
      margin-bottom: 0.25rem;
    }
html.page-industries .split-content-col p {
      color: var(--text-secondary);
      line-height: 1.75;
      max-width: 60ch;
    }
html.page-industries .chain-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 0.5rem;
    }
html.page-industries .chain-step {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 0.875rem 0;
      border-bottom: 1px solid var(--border);
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
    }
html.page-industries .chain-step:last-child { border-bottom: none; }
html.page-industries .chain-step.in { opacity: 1; transform: translateX(0); }
html.page-industries .chain-step-icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      background: var(--brand-accent);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 700;
      margin-top: 0.1rem;
    }
html.page-industries .chain-step-text {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }
html.page-industries .chain-step-text strong {
      color: var(--brand-fg);
      font-weight: 600;
      display: block;
      margin-bottom: 0.2rem;
      font-size: 0.9375rem;
    }
/* ─── SERVICES GRID ──────────────────────────────────────────── */
html.page-industries .services-grid-section {
      background: var(--brand-bg);
      position: relative;
    }
html.page-industries .services-grid-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(205,62,45,0.04) 0%, transparent 60%);
      pointer-events: none;
    }
html.page-industries .services-section-header {
      text-align: center;
      margin-bottom: clamp(2.5rem, 5vw, 4rem);
    }
html.page-industries .services-section-header h2 {
      margin-top: 0.5rem;
    }
html.page-industries .services-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
html.page-industries .service-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 2rem 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 0;
      box-shadow: var(--shadow-sm);
      transition: box-shadow 0.28s var(--ease-out),
                  transform 0.28s var(--ease-out),
                  border-color 0.28s var(--ease-out);
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(22px);
    }
html.page-industries .service-card.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-industries .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.32s var(--ease-out);
    }
html.page-industries .service-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      border-color: rgba(205,62,45,0.25);
    }
html.page-industries .service-card:hover::before {
      transform: scaleX(1);
    }
html.page-industries .service-card-number {
      font-family: var(--font-display);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1rem;
    }
html.page-industries .service-card h3 {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--brand-fg);
      margin-bottom: 0.875rem;
    }
html.page-industries .service-card p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.7;
      flex: 1;
      margin-bottom: 1.5rem;
    }
html.page-industries .service-card-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--brand-accent);
      text-decoration: none;
      margin-top: auto;
      transition: gap 0.2s var(--ease-out), color 0.2s var(--ease-out);
    }
html.page-industries .service-card-link:hover {
      color: var(--brand-accent-2);
      gap: 0.65rem;
    }
html.page-industries .service-card-link-arrow {
      display: inline-block;
      transition: transform 0.2s var(--ease-out);
    }
html.page-industries .service-card:hover .service-card-link-arrow {
      transform: translateX(3px);
    }
/* ─── CTA BAND ───────────────────────────────────────────────── */
html.page-industries .cta-band {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-industries .cta-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(205,62,45,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 10% 30%, rgba(205,62,45,0.10) 0%, transparent 55%);
      pointer-events: none;
    }
html.page-industries .cta-band-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 3rem;
      align-items: center;
    }
html.page-industries .cta-band-text h2 {
      color: #ffffff;
      margin-bottom: 1rem;
    }
html.page-industries .cta-band-text p {
      color: rgba(255,255,255,0.72);
      font-size: 1.0625rem;
      line-height: 1.7;
      max-width: 58ch;
    }
html.page-industries .cta-band-action {
      flex-shrink: 0;
    }
/* ─── CONTACT FORM ───────────────────────────────────────────── */
html.page-industries .contact-section {
      background: var(--canvas);
      position: relative;
    }
html.page-industries .contact-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(205,62,45,0.03) 0%, transparent 40%);
      pointer-events: none;
    }
html.page-industries .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
    }
html.page-industries .contact-info h2 {
      margin-bottom: 1rem;
    }
html.page-industries .contact-info > p {
      color: var(--text-secondary);
      line-height: 1.75;
      max-width: 46ch;
      margin-bottom: 2rem;
    }
html.page-industries .contact-detail {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
html.page-industries .contact-detail-icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      background: rgba(205,62,45,0.10);
      border: 1px solid rgba(205,62,45,0.20);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand-accent);
    }
html.page-industries .contact-detail-text {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      padding-top: 0.5rem;
    }
html.page-industries .contact-detail-text a {
      color: var(--brand-accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
html.page-industries .contact-form-wrap {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-industries .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
html.page-industries .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 1.125rem;
    }
html.page-industries .form-group label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.03em;
    }
html.page-industries .form-group input,
html.page-industries .form-group textarea {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0.75rem 1rem;
      width: 100%;
      transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
      outline: none;
    }
html.page-industries .form-group input::placeholder,
html.page-industries .form-group textarea::placeholder {
      color: var(--text-muted);
    }
html.page-industries .form-group input:focus,
html.page-industries .form-group textarea:focus {
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-industries .form-group textarea { resize: vertical; min-height: 120px; }
html.page-industries .form-submit-wrap { margin-top: 0.5rem; }
html.page-industries .form-status {
      margin-top: 1rem;
      padding: 0.875rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      font-weight: 500;
      display: none;
    }
html.page-industries .form-status.success {
      display: block;
      background: rgba(34,139,60,0.10);
      border: 1px solid rgba(34,139,60,0.25);
      color: #1a7a35;
    }
html.page-industries .form-status.error {
      display: block;
      background: rgba(205,62,45,0.08);
      border: 1px solid rgba(205,62,45,0.25);
      color: var(--brand-accent-2);
    }
/* ─── SCROLL ENTRANCE ANIMATIONS ────────────────────────────── */
html.page-industries .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    }
html.page-industries .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-industries .reveal-left {
      opacity: 0;
      transform: translateX(-28px);
      transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    }
html.page-industries .reveal-left.in {
      opacity: 1;
      transform: translateX(0);
    }
/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
      html.page-industries .services-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      html.page-industries .split-band {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      html.page-industries .split-image-col {
        min-height: 280px;
        position: relative;
      }
      html.page-industries .split-image-col img {
        position: relative;
        width: 100%;
        height: 280px;
        object-fit: cover;
      }
      html.page-industries .cta-band-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }
@media (max-width: 768px) {
html.page-industries .services-cards-grid {
        grid-template-columns: 1fr;
      }
html.page-industries .contact-grid {
        grid-template-columns: 1fr;
      }
html.page-industries .form-row {
        grid-template-columns: 1fr;
      }
html.page-industries .hero-stat { flex: 1 1 80px; }
}
@media (max-width: 480px) {
html.page-industries .page-hero-actions {
        flex-direction: column;
        align-items: flex-start;
      }
html.page-industries .hero-stat-row .container {
        justify-content: center;
      }
}
/* ─── FOCUS VISIBLE ──────────────────────────────────────────── */
html.page-industries :focus-visible {
      outline: 2px solid var(--brand-accent);
      outline-offset: 3px;
      border-radius: 2px;
    }
/* ─── REDUCED MOTION ─────────────────────────────────────────── */
html.page-industries @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .reveal, .reveal-left, .service-card, .chain-step {
        opacity: 1;
        transform: none;
      }
    }
html.page-industries body.paused *,
html.page-industries body.paused *::before,
html.page-industries body.paused *::after {
      animation-play-state: paused !important;
    }


/* ==================== insights.html (scope: .page-insights) ==================== */
/* ─── Brand tokens ─────────────────────────────────────────────── */
html.page-insights {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --canvas: #f7f6f5;
      --panel: #ffffff;
      --panel-alt: #f2f1ef;
      --border: rgba(17,17,17,0.10);
      --text-muted: #6b6b6b;
      --text-secondary: #444444;

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 14px;

      --header-h: 68px;
      --container-max: 1200px;
      --container-pad: clamp(1.25rem, 5vw, 3rem);
    }
/* ─── Reset ────────────────────────────────────────────────────── */
html.page-insights *,
html.page-insights *::before,
html.page-insights *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-insights { overflow-x: clip; scroll-behavior: smooth; }
html.page-insights body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
html.page-insights img,
html.page-insights svg,
html.page-insights video { max-width: 100%; height: auto; }
html.page-insights a { color: inherit; text-decoration: none; }
html.page-insights ul,
html.page-insights ol { list-style: none; }
html.page-insights button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── Skip link ─────────────────────────────────────────────────── */
html.page-insights .skip-link {
      position: absolute;
      top: -999px; left: 1rem;
      background: var(--brand-accent);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      z-index: 9999;
    }
html.page-insights .skip-link:focus { top: 1rem; }
/* ─── Container ─────────────────────────────────────────────────── */
html.page-insights .container {
      width: 100%;
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-pad);
    }
/* ─── Typography scale ──────────────────────────────────────────── */
html.page-insights .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.25rem, 5.5vw, 4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.02em;
    }
html.page-insights .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3.5vw, 2.75rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.018em;
    }
html.page-insights .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.375rem, 2.5vw, 2rem);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.015em;
    }
html.page-insights .label-sm {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
/* ─── Accent word ───────────────────────────────────────────────── */
html.page-insights .accent-word { color: var(--brand-accent); }
/* ─── Buttons ───────────────────────────────────────────────────── */
html.page-insights .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.75rem 1.75rem;
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      line-height: 1;
      transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out),
                  box-shadow 0.22s var(--ease-out), transform 0.18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-insights .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-insights .btn:active { transform: translateY(1px); }
html.page-insights .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 8px rgba(205,62,45,0.18);
    }
html.page-insights .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 18px rgba(205,62,45,0.28);
    }
html.page-insights .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      box-shadow: inset 0 0 0 1.5px var(--border);
    }
html.page-insights .btn-ghost:hover {
      background: var(--canvas);
      box-shadow: inset 0 0 0 1.5px rgba(17,17,17,0.22);
    }
html.page-insights .btn-ghost-white {
      background: transparent;
      color: #fff;
      box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45);
    }
html.page-insights .btn-ghost-white:hover {
      background: rgba(255,255,255,0.12);
      box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7);
    }
@media (pointer: coarse) {
html.page-insights .btn { min-height: 44px; }
}
/* ─── PAGE HERO ─────────────────────────────────────────────────── */
html.page-insights .page-hero {
      position: relative;
      min-height: 70vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      padding-top: var(--header-h);
    }
html.page-insights .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/insights-hero-bg.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.03);
      animation: hero-drift__page-insights 28s ease-in-out infinite alternate;
    }
@keyframes hero-drift__page-insights {
      from { transform: scale(1.03) translate(0, 0); }
      to   { transform: scale(1.06) translate(-1%, 0.5%); }
    }
html.page-insights .page-hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(10,10,12,0.38) 0%,
          rgba(10,10,12,0.54) 50%,
          rgba(10,10,12,0.82) 100%);
      pointer-events: none;
    }
html.page-insights .page-hero-content {
      position: relative;
      z-index: 2;
      padding-top: clamp(4rem, 10vh, 8rem);
      padding-bottom: 0;
    }
html.page-insights .page-hero-inner {
      max-width: 820px;
    }
html.page-insights .page-hero-kicker {
      display: inline-block;
      color: var(--brand-accent);
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 1.25rem;
    }
html.page-insights .page-hero h1 {
      color: #fff;
      margin-bottom: 1.5rem;
    }
html.page-insights .page-hero-body {
      max-width: 64ch;
      margin-bottom: 2.25rem;
    }
html.page-insights .page-hero-body p {
      color: rgba(255,255,255,0.82);
      font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
      line-height: 1.7;
    }
html.page-insights .page-hero-body p + p { margin-top: 1rem; }
html.page-insights .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
      margin-bottom: 0;
    }
/* Hero stat row */
html.page-insights .hero-stat-row {
      position: relative;
      z-index: 2;
      margin-top: 3rem;
      background: rgba(10,10,12,0.62);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,0.1);
    }
html.page-insights .hero-stat-row .container {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
    }
html.page-insights .hero-stat {
      flex: 1 1 120px;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding: 1.25rem 1.5rem;
      border-right: 1px solid rgba(255,255,255,0.08);
    }
html.page-insights .hero-stat:last-child { border-right: none; }
html.page-insights .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-insights .hero-stat-label {
      font-size: 0.75rem;
      font-weight: 500;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
@media (max-width: 600px) {
html.page-insights .hero-stat { padding: 1rem; }
html.page-insights .hero-stat-row .container { gap: 0; }
}
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-insights .marquee-band {
      background: var(--canvas);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      padding: 0.875rem 0;
    }
html.page-insights .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: marquee-scroll__page-insights 38s linear infinite;
    }
@keyframes marquee-scroll__page-insights {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-insights .marquee-track { animation: none; }
}
html.page-insights .marquee-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0 2rem;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
    }
html.page-insights .marquee-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--brand-accent);
      opacity: 0.55;
      flex-shrink: 0;
    }
/* ─── SECTION SHARED ────────────────────────────────────────────── */
html.page-insights .section {
      padding-block: clamp(4rem, 8vw, 6.5rem);
    }
html.page-insights .section-alt {
      background: var(--canvas);
    }
html.page-insights .section-label {
      color: var(--brand-accent);
      margin-bottom: 0.875rem;
    }
html.page-insights .section-heading {
      color: var(--brand-fg);
      margin-bottom: 1.25rem;
    }
html.page-insights .section-lede {
      color: var(--text-secondary);
      font-size: clamp(1rem, 1.5vw, 1.125rem);
      line-height: 1.7;
      max-width: 60ch;
      margin-bottom: 3rem;
    }
/* ─── BLOG LISTING ──────────────────────────────────────────────── */
html.page-insights #insights-listing { background: var(--brand-bg); }
html.page-insights .insights-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 2.75rem;
    }
html.page-insights .filter-btn {
      padding: 0.45rem 1.1rem;
      border-radius: 100px;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: transparent;
      color: var(--text-muted);
      box-shadow: inset 0 0 0 1.5px var(--border);
      transition: background 0.18s var(--ease-out), color 0.18s, box-shadow 0.18s;
      cursor: pointer;
    }
html.page-insights .filter-btn:hover,
html.page-insights .filter-btn.active {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: none;
    }
html.page-insights .filter-btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-insights .articles-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
      gap: 1.75rem;
    }
/* Placeholder / empty state */
html.page-insights .articles-empty {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 1.25rem;
      padding: 4rem 2rem;
      background: var(--canvas);
      border-radius: var(--radius-lg);
      border: 1.5px dashed var(--border);
    }
html.page-insights .articles-empty-icon {
      width: 48px;
      height: 48px;
      color: var(--brand-accent);
      opacity: 0.6;
    }
html.page-insights .articles-empty-heading {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--brand-fg);
    }
html.page-insights .articles-empty-body {
      max-width: 44ch;
      color: var(--text-muted);
      font-size: 0.9375rem;
      line-height: 1.65;
    }
/* Article card */
html.page-insights .article-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out);
    }
html.page-insights .article-card:hover {
      box-shadow: 0 8px 32px rgba(17,17,17,0.10);
      transform: translateY(-3px);
    }
html.page-insights .article-card-thumb {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
    }
html.page-insights .article-card-body {
      padding: 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
html.page-insights .article-card-meta {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
html.page-insights .article-card-tag {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: rgba(205,62,45,0.08);
      padding: 0.2rem 0.6rem;
      border-radius: 100px;
    }
html.page-insights .article-card-date {
      font-size: 0.8125rem;
      color: var(--text-muted);
    }
html.page-insights .article-card-title {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 600;
      line-height: 1.3;
      color: var(--brand-fg);
    }
html.page-insights .article-card-excerpt {
      font-size: 0.875rem;
      line-height: 1.65;
      color: var(--text-muted);
      flex: 1;
    }
html.page-insights .article-card-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--brand-accent);
      margin-top: 0.25rem;
      transition: gap 0.18s var(--ease-out);
    }
html.page-insights .article-card-link:hover { gap: 0.65rem; }
html.page-insights .article-card-link svg { flex-shrink: 0; }
/* ─── TOPICS STRIP ──────────────────────────────────────────────── */
html.page-insights #topics-strip {
      background: var(--canvas);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
html.page-insights .topics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
      gap: 1rem;
    }
html.page-insights .topic-chip {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 1rem 1.25rem;
      transition: border-color 0.18s, box-shadow 0.18s;
    }
html.page-insights .topic-chip:hover {
      border-color: var(--brand-accent);
      box-shadow: 0 2px 12px rgba(205,62,45,0.10);
    }
html.page-insights .topic-chip-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
html.page-insights .topic-chip-label {
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--brand-fg);
    }
/* ─── NEWSLETTER / CTA STRIP ────────────────────────────────────── */
html.page-insights #newsletter-strip {
      background: var(--brand-fg);
      color: #fff;
    }
html.page-insights .newsletter-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2rem;
      justify-content: space-between;
    }
html.page-insights .newsletter-copy { flex: 1 1 300px; }
html.page-insights .newsletter-copy h2 {
      font-family: var(--font-display);
      font-size: clamp(1.375rem, 2.5vw, 1.875rem);
      font-weight: 700;
      color: #fff;
      margin-bottom: 0.5rem;
    }
html.page-insights .newsletter-copy p {
      color: rgba(255,255,255,0.65);
      font-size: 0.9375rem;
      max-width: 44ch;
    }
html.page-insights .newsletter-form {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      flex: 0 1 auto;
    }
html.page-insights .newsletter-input {
      padding: 0.75rem 1.25rem;
      border-radius: var(--radius-sm);
      border: 1.5px solid rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.07);
      color: #fff;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      min-width: 220px;
      transition: border-color 0.18s;
    }
html.page-insights .newsletter-input::placeholder { color: rgba(255,255,255,0.38); }
html.page-insights .newsletter-input:focus {
      outline: none;
      border-color: var(--brand-accent);
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-insights #contact-section {
      background: var(--canvas);
    }
html.page-insights .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 4rem;
      align-items: start;
    }
@media (max-width: 800px) {
html.page-insights .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
html.page-insights .contact-info-block { display: flex; flex-direction: column; gap: 2rem; }
html.page-insights .contact-info-heading {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 700;
      line-height: 1.15;
      color: var(--brand-fg);
    }
html.page-insights .contact-info-body {
      color: var(--text-secondary);
      font-size: 0.9375rem;
      line-height: 1.7;
      max-width: 40ch;
    }
html.page-insights .contact-details { display: flex; flex-direction: column; gap: 0.75rem; }
html.page-insights .contact-detail-item {
      display: flex;
      align-items: baseline;
      gap: 0.65rem;
      font-size: 0.9375rem;
      color: var(--brand-fg);
    }
html.page-insights .contact-detail-item a {
      color: var(--brand-accent);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
html.page-insights .contact-detail-item a:hover { color: var(--brand-accent-2); }
html.page-insights .contact-detail-label {
      font-weight: 600;
      color: var(--text-muted);
      font-size: 0.8125rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      min-width: 52px;
    }
/* Form */
html.page-insights .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.5rem);
      box-shadow: 0 4px 32px rgba(17,17,17,0.06);
    }
html.page-insights .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
@media (max-width: 560px) {
html.page-insights .form-row { grid-template-columns: 1fr; }
}
html.page-insights .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 1rem;
    }
html.page-insights .form-group:last-of-type { margin-bottom: 0; }
html.page-insights .form-label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--brand-fg);
      letter-spacing: 0.02em;
    }
html.page-insights .form-input,
html.page-insights .form-textarea {
      width: 100%;
      padding: 0.7rem 1rem;
      border-radius: var(--radius-sm);
      border: 1.5px solid var(--border);
      background: var(--canvas);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 0.9375rem;
      transition: border-color 0.18s, box-shadow 0.18s;
      appearance: none;
    }
html.page-insights .form-input:focus,
html.page-insights .form-textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-insights .form-input::placeholder,
html.page-insights .form-textarea::placeholder { color: var(--text-muted); }
html.page-insights .form-textarea { resize: vertical; min-height: 120px; }
html.page-insights .form-submit-row {
      margin-top: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: wrap;
    }
html.page-insights .form-message {
      font-size: 0.875rem;
      font-weight: 500;
      display: none;
    }
html.page-insights .form-message.success { color: #1a7a3e; display: block; }
html.page-insights .form-message.error { color: var(--brand-accent); display: block; }
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-insights .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    }
html.page-insights .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-insights .reveal-delay-1 { transition-delay: 0.08s; }
html.page-insights .reveal-delay-2 { transition-delay: 0.16s; }
html.page-insights .reveal-delay-3 { transition-delay: 0.24s; }
html.page-insights .reveal-delay-4 { transition-delay: 0.32s; }
html.page-insights .reveal-delay-5 { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
html.page-insights .reveal,
html.page-insights .reveal-delay-1,
html.page-insights .reveal-delay-2,
html.page-insights .reveal-delay-3,
html.page-insights .reveal-delay-4,
html.page-insights .reveal-delay-5 {
        opacity: 1;
        transform: none;
        transition: none;
      }
html.page-insights .article-card { transition: none; }
html.page-insights .article-card:hover { transform: none; }
html.page-insights .page-hero-bg { animation: none; }
}
html.page-insights .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }
html.page-insights body.paused *,
html.page-insights body.paused *::before,
html.page-insights body.paused *::after {
      animation-play-state: paused !important;
    }


/* ==================== markets-asia-pacific.html (scope: .page-markets-asia-pacific) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-markets-asia-pacific {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-markets-asia-pacific *,
html.page-markets-asia-pacific *::before,
html.page-markets-asia-pacific *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-markets-asia-pacific { overflow-x: clip; scroll-behavior: smooth; }
html.page-markets-asia-pacific body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-markets-asia-pacific img,
html.page-markets-asia-pacific svg,
html.page-markets-asia-pacific video { max-width: 100%; height: auto; display: block; }
html.page-markets-asia-pacific a { color: inherit; text-decoration: none; }
html.page-markets-asia-pacific ul,
html.page-markets-asia-pacific ol { list-style: none; }
html.page-markets-asia-pacific button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-markets-asia-pacific .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-markets-asia-pacific .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-markets-asia-pacific .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-markets-asia-pacific .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-markets-asia-pacific .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-markets-asia-pacific .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-markets-asia-pacific .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-markets-asia-pacific .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-markets-asia-pacific .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-markets-asia-pacific .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-markets-asia-pacific .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-markets-asia-pacific .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-markets-asia-pacific .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-markets-asia-pacific .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-markets-asia-pacific .btn { min-height: 44px; }
}
html.page-markets-asia-pacific .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-markets-asia-pacific .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-markets-asia-pacific .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-markets-asia-pacific .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-markets-asia-pacific .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-markets-asia-pacific .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-markets-asia-pacific .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-markets-asia-pacific .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/hero-activation.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-markets-asia-pacific .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-markets-asia-pacific .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-markets-asia-pacific .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-markets-asia-pacific .page-hero-inner { max-width: 680px; }
html.page-markets-asia-pacific .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-markets-asia-pacific .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-markets-asia-pacific .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-markets-asia-pacific .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-markets-asia-pacific .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-markets-asia-pacific .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-markets-asia-pacific .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-markets-asia-pacific .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-markets-asia-pacific .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-markets-asia-pacific .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-markets-asia-pacific .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-markets-asia-pacific .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-markets-asia-pacific 32s linear infinite;
      gap: 0;
    }
html.page-markets-asia-pacific .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-markets-asia-pacific .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-markets-asia-pacific .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-markets-asia-pacific {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-asia-pacific .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-markets-asia-pacific #apac-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-markets-asia-pacific #apac-screening { background: var(--brand-bg); }
html.page-markets-asia-pacific .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-markets-asia-pacific .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-markets-asia-pacific .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-markets-asia-pacific .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-markets-asia-pacific .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-markets-asia-pacific #apac-approach { background: var(--brand-bg); }
html.page-markets-asia-pacific .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-markets-asia-pacific .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-markets-asia-pacific .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-markets-asia-pacific .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-markets-asia-pacific .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-markets-asia-pacific .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-markets-asia-pacific .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-markets-asia-pacific .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-markets-asia-pacific .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-markets-asia-pacific .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-markets-asia-pacific .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-markets-asia-pacific .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-markets-asia-pacific #apac-deliverables { background: var(--canvas); }
html.page-markets-asia-pacific .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-markets-asia-pacific .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-markets-asia-pacific .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-markets-asia-pacific .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-markets-asia-pacific .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-markets-asia-pacific .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-markets-asia-pacific .deliverable-card:hover::before { transform: scaleX(1); }
html.page-markets-asia-pacific .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-markets-asia-pacific .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-markets-asia-pacific .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-markets-asia-pacific #apac-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-markets-asia-pacific #apac-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-markets-asia-pacific .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-markets-asia-pacific .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-markets-asia-pacific .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-markets-asia-pacific #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-markets-asia-pacific .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-markets-asia-pacific .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-markets-asia-pacific .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-markets-asia-pacific .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-markets-asia-pacific .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-markets-asia-pacific .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-markets-asia-pacific .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-markets-asia-pacific .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-markets-asia-pacific .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-markets-asia-pacific .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-markets-asia-pacific .form-group.full { grid-column: 1 / -1; }
html.page-markets-asia-pacific .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-markets-asia-pacific .form-group input,
html.page-markets-asia-pacific .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-markets-asia-pacific .form-group input:focus,
html.page-markets-asia-pacific .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-markets-asia-pacific .form-group textarea { min-height: 110px; }
html.page-markets-asia-pacific .form-submit { margin-top: 1.25rem; }
html.page-markets-asia-pacific .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-markets-asia-pacific .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-markets-asia-pacific .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-markets-asia-pacific .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-markets-asia-pacific .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-markets-asia-pacific @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-asia-pacific .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-markets-asia-pacific .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-markets-asia-pacific body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-markets-asia-pacific 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-markets-asia-pacific {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-asia-pacific body::before { animation: none; }
}
html.page-markets-asia-pacific main,
html.page-markets-asia-pacific section,
html.page-markets-asia-pacific .container { position: relative; z-index: 1; }
html.page-markets-asia-pacific .faq-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--canvas); }
html.page-markets-asia-pacific .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-markets-asia-pacific .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-markets-asia-pacific .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-markets-asia-pacific .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-markets-asia-pacific .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== markets-europe.html (scope: .page-markets-europe) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-markets-europe {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-markets-europe *,
html.page-markets-europe *::before,
html.page-markets-europe *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-markets-europe { overflow-x: clip; scroll-behavior: smooth; }
html.page-markets-europe body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-markets-europe img,
html.page-markets-europe svg,
html.page-markets-europe video { max-width: 100%; height: auto; display: block; }
html.page-markets-europe a { color: inherit; text-decoration: none; }
html.page-markets-europe ul,
html.page-markets-europe ol { list-style: none; }
html.page-markets-europe button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-markets-europe .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-markets-europe .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-markets-europe .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-markets-europe .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-markets-europe .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-markets-europe .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-markets-europe .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-markets-europe .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-markets-europe .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-markets-europe .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-markets-europe .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-markets-europe .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-markets-europe .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-markets-europe .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-markets-europe .btn { min-height: 44px; }
}
html.page-markets-europe .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-markets-europe .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-markets-europe .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-markets-europe .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-markets-europe .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-markets-europe .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-markets-europe .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-markets-europe .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/differentiators-structured-process.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-markets-europe .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-markets-europe .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-markets-europe .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-markets-europe .page-hero-inner { max-width: 680px; }
html.page-markets-europe .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-markets-europe .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-markets-europe .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-markets-europe .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-markets-europe .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-markets-europe .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-markets-europe .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-markets-europe .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-markets-europe .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-markets-europe .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-markets-europe .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-markets-europe .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-markets-europe 32s linear infinite;
      gap: 0;
    }
html.page-markets-europe .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-markets-europe .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-markets-europe .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-markets-europe {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-europe .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-markets-europe #eu-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-markets-europe #eu-screening { background: var(--brand-bg); }
html.page-markets-europe .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-markets-europe .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-markets-europe .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-markets-europe .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-markets-europe .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-markets-europe #eu-approach { background: var(--brand-bg); }
html.page-markets-europe .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-markets-europe .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-markets-europe .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-markets-europe .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-markets-europe .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-markets-europe .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-markets-europe .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-markets-europe .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-markets-europe .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-markets-europe .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-markets-europe .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-markets-europe .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-markets-europe #eu-deliverables { background: var(--canvas); }
html.page-markets-europe .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-markets-europe .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-markets-europe .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-markets-europe .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-markets-europe .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-markets-europe .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-markets-europe .deliverable-card:hover::before { transform: scaleX(1); }
html.page-markets-europe .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-markets-europe .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-markets-europe .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-markets-europe #eu-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-markets-europe #eu-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-markets-europe .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-markets-europe .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-markets-europe .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-markets-europe #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-markets-europe .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-markets-europe .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-markets-europe .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-markets-europe .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-markets-europe .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-markets-europe .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-markets-europe .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-markets-europe .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-markets-europe .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-markets-europe .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-markets-europe .form-group.full { grid-column: 1 / -1; }
html.page-markets-europe .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-markets-europe .form-group input,
html.page-markets-europe .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-markets-europe .form-group input:focus,
html.page-markets-europe .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-markets-europe .form-group textarea { min-height: 110px; }
html.page-markets-europe .form-submit { margin-top: 1.25rem; }
html.page-markets-europe .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-markets-europe .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-markets-europe .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-markets-europe .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-markets-europe .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-markets-europe @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-europe .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-markets-europe .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-markets-europe body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-markets-europe 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-markets-europe {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-europe body::before { animation: none; }
}
html.page-markets-europe main,
html.page-markets-europe section,
html.page-markets-europe .container { position: relative; z-index: 1; }
html.page-markets-europe .faq-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--canvas); }
html.page-markets-europe .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-markets-europe .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-markets-europe .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-markets-europe .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-markets-europe .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== markets-middle-east-gcc.html (scope: .page-markets-middle-east-gcc) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-markets-middle-east-gcc {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-markets-middle-east-gcc *,
html.page-markets-middle-east-gcc *::before,
html.page-markets-middle-east-gcc *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-markets-middle-east-gcc { overflow-x: clip; scroll-behavior: smooth; }
html.page-markets-middle-east-gcc body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-markets-middle-east-gcc img,
html.page-markets-middle-east-gcc svg,
html.page-markets-middle-east-gcc video { max-width: 100%; height: auto; display: block; }
html.page-markets-middle-east-gcc a { color: inherit; text-decoration: none; }
html.page-markets-middle-east-gcc ul,
html.page-markets-middle-east-gcc ol { list-style: none; }
html.page-markets-middle-east-gcc button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-markets-middle-east-gcc .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-markets-middle-east-gcc .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-markets-middle-east-gcc .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-markets-middle-east-gcc .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-markets-middle-east-gcc .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-markets-middle-east-gcc .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-markets-middle-east-gcc .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-markets-middle-east-gcc .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-markets-middle-east-gcc .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-markets-middle-east-gcc .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-markets-middle-east-gcc .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-markets-middle-east-gcc .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-markets-middle-east-gcc .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-markets-middle-east-gcc .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-markets-middle-east-gcc .btn { min-height: 44px; }
}
html.page-markets-middle-east-gcc .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-markets-middle-east-gcc .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-markets-middle-east-gcc .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-markets-middle-east-gcc .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-markets-middle-east-gcc .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-markets-middle-east-gcc .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-markets-middle-east-gcc .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-markets-middle-east-gcc .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/hero-channel-systems.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-markets-middle-east-gcc .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-markets-middle-east-gcc .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-markets-middle-east-gcc .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-markets-middle-east-gcc .page-hero-inner { max-width: 680px; }
html.page-markets-middle-east-gcc .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-markets-middle-east-gcc .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-markets-middle-east-gcc .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-markets-middle-east-gcc .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-markets-middle-east-gcc .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-markets-middle-east-gcc .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-markets-middle-east-gcc .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-markets-middle-east-gcc .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-markets-middle-east-gcc .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-markets-middle-east-gcc .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-markets-middle-east-gcc .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-markets-middle-east-gcc .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-markets-middle-east-gcc 32s linear infinite;
      gap: 0;
    }
html.page-markets-middle-east-gcc .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-markets-middle-east-gcc .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-markets-middle-east-gcc .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-markets-middle-east-gcc {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-middle-east-gcc .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-markets-middle-east-gcc #mea-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-markets-middle-east-gcc #mea-screening { background: var(--brand-bg); }
html.page-markets-middle-east-gcc .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-markets-middle-east-gcc .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-markets-middle-east-gcc .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-markets-middle-east-gcc .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-markets-middle-east-gcc .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-markets-middle-east-gcc #mea-approach { background: var(--brand-bg); }
html.page-markets-middle-east-gcc .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-markets-middle-east-gcc .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-markets-middle-east-gcc .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-markets-middle-east-gcc .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-markets-middle-east-gcc .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-markets-middle-east-gcc .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-markets-middle-east-gcc .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-markets-middle-east-gcc .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-markets-middle-east-gcc .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-markets-middle-east-gcc .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-markets-middle-east-gcc .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-markets-middle-east-gcc .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-markets-middle-east-gcc #mea-deliverables { background: var(--canvas); }
html.page-markets-middle-east-gcc .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-markets-middle-east-gcc .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-markets-middle-east-gcc .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-markets-middle-east-gcc .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-markets-middle-east-gcc .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-markets-middle-east-gcc .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-markets-middle-east-gcc .deliverable-card:hover::before { transform: scaleX(1); }
html.page-markets-middle-east-gcc .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-markets-middle-east-gcc .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-markets-middle-east-gcc .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-markets-middle-east-gcc #mea-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-markets-middle-east-gcc #mea-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-markets-middle-east-gcc .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-markets-middle-east-gcc .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-markets-middle-east-gcc .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-markets-middle-east-gcc #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-markets-middle-east-gcc .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-markets-middle-east-gcc .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-markets-middle-east-gcc .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-markets-middle-east-gcc .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-markets-middle-east-gcc .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-markets-middle-east-gcc .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-markets-middle-east-gcc .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-markets-middle-east-gcc .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-markets-middle-east-gcc .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-markets-middle-east-gcc .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-markets-middle-east-gcc .form-group.full { grid-column: 1 / -1; }
html.page-markets-middle-east-gcc .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-markets-middle-east-gcc .form-group input,
html.page-markets-middle-east-gcc .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-markets-middle-east-gcc .form-group input:focus,
html.page-markets-middle-east-gcc .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-markets-middle-east-gcc .form-group textarea { min-height: 110px; }
html.page-markets-middle-east-gcc .form-submit { margin-top: 1.25rem; }
html.page-markets-middle-east-gcc .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-markets-middle-east-gcc .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-markets-middle-east-gcc .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-markets-middle-east-gcc .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-markets-middle-east-gcc .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-markets-middle-east-gcc @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-middle-east-gcc .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-markets-middle-east-gcc .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-markets-middle-east-gcc body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-markets-middle-east-gcc 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-markets-middle-east-gcc {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-middle-east-gcc body::before { animation: none; }
}
html.page-markets-middle-east-gcc main,
html.page-markets-middle-east-gcc section,
html.page-markets-middle-east-gcc .container { position: relative; z-index: 1; }
html.page-markets-middle-east-gcc .faq-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--canvas); }
html.page-markets-middle-east-gcc .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-markets-middle-east-gcc .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-markets-middle-east-gcc .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-markets-middle-east-gcc .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-markets-middle-east-gcc .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== markets-north-america.html (scope: .page-markets-north-america) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-markets-north-america {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-markets-north-america *,
html.page-markets-north-america *::before,
html.page-markets-north-america *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-markets-north-america { overflow-x: clip; scroll-behavior: smooth; }
html.page-markets-north-america body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-markets-north-america img,
html.page-markets-north-america svg,
html.page-markets-north-america video { max-width: 100%; height: auto; display: block; }
html.page-markets-north-america a { color: inherit; text-decoration: none; }
html.page-markets-north-america ul,
html.page-markets-north-america ol { list-style: none; }
html.page-markets-north-america button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-markets-north-america .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-markets-north-america .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-markets-north-america .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-markets-north-america .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-markets-north-america .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-markets-north-america .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-markets-north-america .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-markets-north-america .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-markets-north-america .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-markets-north-america .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-markets-north-america .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-markets-north-america .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-markets-north-america .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-markets-north-america .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-markets-north-america .btn { min-height: 44px; }
}
html.page-markets-north-america .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-markets-north-america .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-markets-north-america .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-markets-north-america .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-markets-north-america .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-markets-north-america .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-markets-north-america .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-markets-north-america .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/services-hero-bg.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-markets-north-america .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-markets-north-america .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-markets-north-america .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-markets-north-america .page-hero-inner { max-width: 680px; }
html.page-markets-north-america .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-markets-north-america .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-markets-north-america .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-markets-north-america .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-markets-north-america .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-markets-north-america .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-markets-north-america .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-markets-north-america .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-markets-north-america .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-markets-north-america .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-markets-north-america .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-markets-north-america .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-markets-north-america 32s linear infinite;
      gap: 0;
    }
html.page-markets-north-america .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-markets-north-america .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-markets-north-america .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-markets-north-america {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-north-america .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-markets-north-america #na-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-markets-north-america #na-screening { background: var(--brand-bg); }
html.page-markets-north-america .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-markets-north-america .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-markets-north-america .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-markets-north-america .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-markets-north-america .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-markets-north-america #na-approach { background: var(--brand-bg); }
html.page-markets-north-america .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-markets-north-america .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-markets-north-america .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-markets-north-america .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-markets-north-america .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-markets-north-america .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-markets-north-america .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-markets-north-america .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-markets-north-america .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-markets-north-america .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-markets-north-america .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-markets-north-america .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-markets-north-america #na-deliverables { background: var(--canvas); }
html.page-markets-north-america .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-markets-north-america .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-markets-north-america .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-markets-north-america .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-markets-north-america .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-markets-north-america .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-markets-north-america .deliverable-card:hover::before { transform: scaleX(1); }
html.page-markets-north-america .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-markets-north-america .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-markets-north-america .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-markets-north-america #na-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-markets-north-america #na-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-markets-north-america .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-markets-north-america .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-markets-north-america .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-markets-north-america #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-markets-north-america .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-markets-north-america .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-markets-north-america .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-markets-north-america .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-markets-north-america .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-markets-north-america .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-markets-north-america .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-markets-north-america .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-markets-north-america .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-markets-north-america .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-markets-north-america .form-group.full { grid-column: 1 / -1; }
html.page-markets-north-america .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-markets-north-america .form-group input,
html.page-markets-north-america .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-markets-north-america .form-group input:focus,
html.page-markets-north-america .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-markets-north-america .form-group textarea { min-height: 110px; }
html.page-markets-north-america .form-submit { margin-top: 1.25rem; }
html.page-markets-north-america .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-markets-north-america .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-markets-north-america .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-markets-north-america .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-markets-north-america .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-markets-north-america @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-north-america .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-markets-north-america .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-markets-north-america body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-markets-north-america 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-markets-north-america {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets-north-america body::before { animation: none; }
}
html.page-markets-north-america main,
html.page-markets-north-america section,
html.page-markets-north-america .container { position: relative; z-index: 1; }
html.page-markets-north-america .faq-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--canvas); }
html.page-markets-north-america .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-markets-north-america .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-markets-north-america .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-markets-north-america .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-markets-north-america .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== markets.html (scope: .page-markets) ==================== */
/* ─── TOKENS ─────────────────────────────────────────────────── */
html.page-markets {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --canvas: #f8f6f3;
      --panel: #ffffff;
      --panel-alt: #f2f0ed;
      --text-primary: #111111;
      --text-secondary: #555555;
      --text-muted: #888888;
      --border: rgba(17,17,17,0.10);
      --shadow-sm: 0 2px 8px rgba(17,17,17,0.07);
      --shadow-md: 0 6px 24px rgba(17,17,17,0.10);
      --shadow-lg: 0 16px 48px rgba(17,17,17,0.12);
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;
      --ease-out: cubic-bezier(0.22,1,0.36,1);
      --ease-in-out: cubic-bezier(0.45,0,0.55,1);
      --header-h: 72px;
    }
/* ─── RESET & BASE ───────────────────────────────────────────── */
html.page-markets *,
html.page-markets *::before,
html.page-markets *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-markets { scroll-behavior: smooth; overflow-x: clip; }
html.page-markets body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-markets img,
html.page-markets svg,
html.page-markets video { max-width: 100%; height: auto; display: block; }
html.page-markets a { color: inherit; text-decoration: none; }
html.page-markets ul { list-style: none; }
html.page-markets button { cursor: pointer; font-family: inherit; }
/* ─── TYPOGRAPHY SCALE ───────────────────────────────────────── */
html.page-markets .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--brand-fg);
    }
html.page-markets .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3vw, 2.6rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
html.page-markets .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.2vw, 1.9rem);
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.015em;
    }
html.page-markets .text-lg { font-size: 1.125rem; line-height: 1.7; }
html.page-markets .text-sm { font-size: 0.875rem; line-height: 1.6; }
html.page-markets .text-xs { font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.04em; }
html.page-markets .accent-word { color: var(--brand-accent); }
html.page-markets .kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1rem;
    }
/* ─── LAYOUT ─────────────────────────────────────────────────── */
html.page-markets .container {
      width: min(1200px, 100% - 3rem);
      margin-inline: auto;
    }
html.page-markets .container-narrow {
      width: min(760px, 100% - 3rem);
      margin-inline: auto;
    }
html.page-markets .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-markets .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── BUTTONS ────────────────────────────────────────────────── */
html.page-markets .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      line-height: 1;
      padding: 0.875rem 1.75rem;
      border-radius: var(--radius-sm);
      border: 2px solid transparent;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.22s var(--ease-out),
                  color 0.22s var(--ease-out),
                  border-color 0.22s var(--ease-out),
                  transform 0.18s var(--ease-out),
                  box-shadow 0.22s var(--ease-out);
      text-shadow: none;
    }
html.page-markets .btn:hover { transform: translateY(-2px); }
html.page-markets .btn:active { transform: translateY(0); }
html.page-markets .btn-primary {
      background: var(--brand-accent);
      color: #ffffff;
      border-color: var(--brand-accent);
    }
html.page-markets .btn-primary:hover {
      background: var(--brand-accent-2);
      border-color: var(--brand-accent-2);
    }
html.page-markets .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border-color: var(--brand-fg);
    }
html.page-markets .btn-ghost:hover {
      background: var(--brand-fg);
      color: var(--brand-bg);
    }
html.page-markets .btn-ghost-white {
      background: transparent;
      color: #ffffff;
      border-color: rgba(255,255,255,0.6);
    }
html.page-markets .btn-ghost-white:hover {
      background: rgba(255,255,255,0.15);
      border-color: #ffffff;
    }
@media (pointer: coarse) {
html.page-markets .btn { min-height: 44px; }
}
/* ─── SKIP LINK ──────────────────────────────────────────────── */
html.page-markets .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      z-index: 9999;
      background: var(--brand-accent);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      font-weight: 600;
      transition: top 0.2s;
    }
html.page-markets .skip-link:focus { top: 1rem; }
/* ─── SHARED BACKGROUND ENVIRONMENT ─────────────────────────── */
html.page-markets body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(205,62,45,0.035) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(205,62,45,0.025) 0%, transparent 55%);
      pointer-events: none;
      z-index: 0;
    }
/* ─── HERO ───────────────────────────────────────────────────── */
html.page-markets .page-hero {
      position: relative;
      min-height: 88vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: var(--header-h);
      overflow: hidden;
    }
html.page-markets .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/markets-hero-global-trade.jpg');
      background-size: cover;
      background-position: center 40%;
      z-index: 0;
      transform: scale(1.04);
      animation: hero-drift__page-markets 22s ease-in-out infinite alternate;
    }
@keyframes hero-drift__page-markets {
      from { transform: scale(1.04) translateY(0); }
      to   { transform: scale(1.08) translateY(-1.5%); }
    }
html.page-markets .page-hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(160deg, rgba(8,8,12,0.72) 0%, rgba(8,8,12,0.50) 50%, rgba(8,8,12,0.68) 100%);
    }
html.page-markets .page-hero-content {
      position: relative;
      z-index: 2;
      padding-block: clamp(4rem, 8vw, 6rem);
    }
html.page-markets .page-hero-inner {
      max-width: 760px;
    }
html.page-markets .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1.25rem;
      padding: 0.35rem 0.75rem;
      border: 1px solid rgba(205,62,45,0.45);
      border-radius: var(--radius-sm);
      background: rgba(205,62,45,0.10);
    }
html.page-markets .page-hero .display-xl {
      color: #ffffff;
      text-shadow: 0 2px 24px rgba(8,8,12,0.55);
      margin-bottom: 1.5rem;
    }
html.page-markets .page-hero-body {
      max-width: 62ch;
    }
html.page-markets .page-hero-body p {
      color: rgba(255,255,255,0.84);
      font-size: 1.0625rem;
      line-height: 1.75;
      text-shadow: 0 1px 8px rgba(8,8,12,0.5);
      margin-bottom: 1rem;
    }
html.page-markets .page-hero-body p:last-child { margin-bottom: 0; }
html.page-markets .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
      margin-top: 2.25rem;
    }
/* hero stat row */
html.page-markets .hero-stat-row {
      position: relative;
      z-index: 2;
      border-top: 1px solid rgba(255,255,255,0.12);
      background: rgba(8,8,12,0.38);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
html.page-markets .hero-stat-row .container {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
    }
html.page-markets .hero-stat {
      flex: 1 1 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      padding: 1.25rem 1rem;
      border-right: 1px solid rgba(255,255,255,0.10);
    }
html.page-markets .hero-stat:last-child { border-right: none; }
html.page-markets .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1;
    }
html.page-markets .hero-stat-label {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.58);
      text-align: center;
    }
/* ─── MARQUEE ────────────────────────────────────────────────── */
html.page-markets .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: 0.875rem;
      position: relative;
      z-index: 1;
    }
html.page-markets .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: marquee-scroll__page-markets 38s linear infinite;
    }
html.page-markets .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
    }
html.page-markets .marquee-item {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.60);
    }
html.page-markets .marquee-sep {
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
@keyframes marquee-scroll__page-markets {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-markets .marquee-track { animation: none; }
}
/* ─── INTRO / CONNECTED SYSTEM ───────────────────────────────── */
html.page-markets .lifecycle-intro {
      background: var(--canvas);
      position: relative;
      overflow: hidden;
    }
html.page-markets .lifecycle-intro::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(205,62,45,0.04) 0%, transparent 50%);
      pointer-events: none;
    }
html.page-markets .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 5vw, 4rem);
      align-items: stretch;
    }
html.page-markets .split-image-col {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      min-height: 320px;
    }
html.page-markets .split-image-col img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-md);
    }
html.page-markets .split-content-col {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 1.25rem;
    }
html.page-markets .split-content-col h2 {
      margin-bottom: 0.25rem;
    }
html.page-markets .split-content-col p {
      color: var(--text-secondary);
      line-height: 1.75;
      max-width: 60ch;
    }
html.page-markets .chain-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 0.5rem;
    }
html.page-markets .chain-step {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 0.875rem 0;
      border-bottom: 1px solid var(--border);
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
    }
html.page-markets .chain-step:last-child { border-bottom: none; }
html.page-markets .chain-step.in { opacity: 1; transform: translateX(0); }
html.page-markets .chain-step-icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      background: var(--brand-accent);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 700;
      margin-top: 0.1rem;
    }
html.page-markets .chain-step-text {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }
html.page-markets .chain-step-text strong {
      color: var(--brand-fg);
      font-weight: 600;
      display: block;
      margin-bottom: 0.2rem;
      font-size: 0.9375rem;
    }
/* ─── SERVICES GRID ──────────────────────────────────────────── */
html.page-markets .services-grid-section {
      background: var(--brand-bg);
      position: relative;
    }
html.page-markets .services-grid-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(205,62,45,0.04) 0%, transparent 60%);
      pointer-events: none;
    }
html.page-markets .services-section-header {
      text-align: center;
      margin-bottom: clamp(2.5rem, 5vw, 4rem);
    }
html.page-markets .services-section-header h2 {
      margin-top: 0.5rem;
    }
html.page-markets .services-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
html.page-markets .service-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 2rem 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 0;
      box-shadow: var(--shadow-sm);
      transition: box-shadow 0.28s var(--ease-out),
                  transform 0.28s var(--ease-out),
                  border-color 0.28s var(--ease-out);
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(22px);
    }
html.page-markets .service-card.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-markets .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.32s var(--ease-out);
    }
html.page-markets .service-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      border-color: rgba(205,62,45,0.25);
    }
html.page-markets .service-card:hover::before {
      transform: scaleX(1);
    }
html.page-markets .service-card-number {
      font-family: var(--font-display);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1rem;
    }
html.page-markets .service-card h3 {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--brand-fg);
      margin-bottom: 0.875rem;
    }
html.page-markets .service-card p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.7;
      flex: 1;
      margin-bottom: 1.5rem;
    }
html.page-markets .service-card-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--brand-accent);
      text-decoration: none;
      margin-top: auto;
      transition: gap 0.2s var(--ease-out), color 0.2s var(--ease-out);
    }
html.page-markets .service-card-link:hover {
      color: var(--brand-accent-2);
      gap: 0.65rem;
    }
html.page-markets .service-card-link-arrow {
      display: inline-block;
      transition: transform 0.2s var(--ease-out);
    }
html.page-markets .service-card:hover .service-card-link-arrow {
      transform: translateX(3px);
    }
/* ─── CTA BAND ───────────────────────────────────────────────── */
html.page-markets .cta-band {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-markets .cta-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(205,62,45,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 10% 30%, rgba(205,62,45,0.10) 0%, transparent 55%);
      pointer-events: none;
    }
html.page-markets .cta-band-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 3rem;
      align-items: center;
    }
html.page-markets .cta-band-text h2 {
      color: #ffffff;
      margin-bottom: 1rem;
    }
html.page-markets .cta-band-text p {
      color: rgba(255,255,255,0.72);
      font-size: 1.0625rem;
      line-height: 1.7;
      max-width: 58ch;
    }
html.page-markets .cta-band-action {
      flex-shrink: 0;
    }
/* ─── CONTACT FORM ───────────────────────────────────────────── */
html.page-markets .contact-section {
      background: var(--canvas);
      position: relative;
    }
html.page-markets .contact-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(205,62,45,0.03) 0%, transparent 40%);
      pointer-events: none;
    }
html.page-markets .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
    }
html.page-markets .contact-info h2 {
      margin-bottom: 1rem;
    }
html.page-markets .contact-info > p {
      color: var(--text-secondary);
      line-height: 1.75;
      max-width: 46ch;
      margin-bottom: 2rem;
    }
html.page-markets .contact-detail {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
html.page-markets .contact-detail-icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      background: rgba(205,62,45,0.10);
      border: 1px solid rgba(205,62,45,0.20);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand-accent);
    }
html.page-markets .contact-detail-text {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      padding-top: 0.5rem;
    }
html.page-markets .contact-detail-text a {
      color: var(--brand-accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
html.page-markets .contact-form-wrap {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-markets .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
html.page-markets .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 1.125rem;
    }
html.page-markets .form-group label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.03em;
    }
html.page-markets .form-group input,
html.page-markets .form-group textarea {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0.75rem 1rem;
      width: 100%;
      transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
      outline: none;
    }
html.page-markets .form-group input::placeholder,
html.page-markets .form-group textarea::placeholder {
      color: var(--text-muted);
    }
html.page-markets .form-group input:focus,
html.page-markets .form-group textarea:focus {
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-markets .form-group textarea { resize: vertical; min-height: 120px; }
html.page-markets .form-submit-wrap { margin-top: 0.5rem; }
html.page-markets .form-status {
      margin-top: 1rem;
      padding: 0.875rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      font-weight: 500;
      display: none;
    }
html.page-markets .form-status.success {
      display: block;
      background: rgba(34,139,60,0.10);
      border: 1px solid rgba(34,139,60,0.25);
      color: #1a7a35;
    }
html.page-markets .form-status.error {
      display: block;
      background: rgba(205,62,45,0.08);
      border: 1px solid rgba(205,62,45,0.25);
      color: var(--brand-accent-2);
    }
/* ─── SCROLL ENTRANCE ANIMATIONS ────────────────────────────── */
html.page-markets .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    }
html.page-markets .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-markets .reveal-left {
      opacity: 0;
      transform: translateX(-28px);
      transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    }
html.page-markets .reveal-left.in {
      opacity: 1;
      transform: translateX(0);
    }
/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
      html.page-markets .services-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      html.page-markets .split-band {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      html.page-markets .split-image-col {
        min-height: 280px;
        position: relative;
      }
      html.page-markets .split-image-col img {
        position: relative;
        width: 100%;
        height: 280px;
        object-fit: cover;
      }
      html.page-markets .cta-band-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }
@media (max-width: 768px) {
html.page-markets .services-cards-grid {
        grid-template-columns: 1fr;
      }
html.page-markets .contact-grid {
        grid-template-columns: 1fr;
      }
html.page-markets .form-row {
        grid-template-columns: 1fr;
      }
html.page-markets .hero-stat { flex: 1 1 80px; }
}
@media (max-width: 480px) {
html.page-markets .page-hero-actions {
        flex-direction: column;
        align-items: flex-start;
      }
html.page-markets .hero-stat-row .container {
        justify-content: center;
      }
}
/* ─── FOCUS VISIBLE ──────────────────────────────────────────── */
html.page-markets :focus-visible {
      outline: 2px solid var(--brand-accent);
      outline-offset: 3px;
      border-radius: 2px;
    }
/* ─── REDUCED MOTION ─────────────────────────────────────────── */
html.page-markets @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .reveal, .reveal-left, .service-card, .chain-step {
        opacity: 1;
        transform: none;
      }
    }
html.page-markets body.paused *,
html.page-markets body.paused *::before,
html.page-markets body.paused *::after {
      animation-play-state: paused !important;
    }


/* ==================== resources-distributor-vs-dealer-vs-agent.html (scope: .page-resources-distributor-vs-dealer-vs-agent) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent *,
html.page-resources-distributor-vs-dealer-vs-agent *::before,
html.page-resources-distributor-vs-dealer-vs-agent *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-resources-distributor-vs-dealer-vs-agent { overflow-x: clip; scroll-behavior: smooth; }
html.page-resources-distributor-vs-dealer-vs-agent body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-resources-distributor-vs-dealer-vs-agent img,
html.page-resources-distributor-vs-dealer-vs-agent svg,
html.page-resources-distributor-vs-dealer-vs-agent video { max-width: 100%; height: auto; display: block; }
html.page-resources-distributor-vs-dealer-vs-agent a { color: inherit; text-decoration: none; }
html.page-resources-distributor-vs-dealer-vs-agent ul,
html.page-resources-distributor-vs-dealer-vs-agent ol { list-style: none; }
html.page-resources-distributor-vs-dealer-vs-agent button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-resources-distributor-vs-dealer-vs-agent .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-resources-distributor-vs-dealer-vs-agent .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-resources-distributor-vs-dealer-vs-agent .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-resources-distributor-vs-dealer-vs-agent .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-resources-distributor-vs-dealer-vs-agent .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-resources-distributor-vs-dealer-vs-agent .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-resources-distributor-vs-dealer-vs-agent .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-resources-distributor-vs-dealer-vs-agent .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-resources-distributor-vs-dealer-vs-agent .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-resources-distributor-vs-dealer-vs-agent .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-resources-distributor-vs-dealer-vs-agent .btn { min-height: 44px; }
}
html.page-resources-distributor-vs-dealer-vs-agent .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-resources-distributor-vs-dealer-vs-agent .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-resources-distributor-vs-dealer-vs-agent .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-resources-distributor-vs-dealer-vs-agent .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-resources-distributor-vs-dealer-vs-agent .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-resources-distributor-vs-dealer-vs-agent .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-resources-distributor-vs-dealer-vs-agent .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/approach-process.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-resources-distributor-vs-dealer-vs-agent .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-resources-distributor-vs-dealer-vs-agent .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-resources-distributor-vs-dealer-vs-agent .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-resources-distributor-vs-dealer-vs-agent .page-hero-inner { max-width: 680px; }
html.page-resources-distributor-vs-dealer-vs-agent .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-resources-distributor-vs-dealer-vs-agent .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-resources-distributor-vs-dealer-vs-agent .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-resources-distributor-vs-dealer-vs-agent .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-resources-distributor-vs-dealer-vs-agent .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-resources-distributor-vs-dealer-vs-agent .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-resources-distributor-vs-dealer-vs-agent .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-resources-distributor-vs-dealer-vs-agent .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-resources-distributor-vs-dealer-vs-agent .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-resources-distributor-vs-dealer-vs-agent .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-resources-distributor-vs-dealer-vs-agent .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-resources-distributor-vs-dealer-vs-agent 32s linear infinite;
      gap: 0;
    }
html.page-resources-distributor-vs-dealer-vs-agent .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-resources-distributor-vs-dealer-vs-agent .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-resources-distributor-vs-dealer-vs-agent .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-resources-distributor-vs-dealer-vs-agent {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-resources-distributor-vs-dealer-vs-agent .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent #rvd-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-resources-distributor-vs-dealer-vs-agent .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-resources-distributor-vs-dealer-vs-agent .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-resources-distributor-vs-dealer-vs-agent .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-resources-distributor-vs-dealer-vs-agent .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-resources-distributor-vs-dealer-vs-agent .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent #di-approach { background: var(--brand-bg); }
html.page-resources-distributor-vs-dealer-vs-agent .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-resources-distributor-vs-dealer-vs-agent .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-resources-distributor-vs-dealer-vs-agent .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-resources-distributor-vs-dealer-vs-agent .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-resources-distributor-vs-dealer-vs-agent .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-resources-distributor-vs-dealer-vs-agent .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-resources-distributor-vs-dealer-vs-agent .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-resources-distributor-vs-dealer-vs-agent .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-resources-distributor-vs-dealer-vs-agent .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-resources-distributor-vs-dealer-vs-agent .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-resources-distributor-vs-dealer-vs-agent .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-resources-distributor-vs-dealer-vs-agent .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent #rvd-deliverables { background: var(--brand-bg); }
html.page-resources-distributor-vs-dealer-vs-agent .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-resources-distributor-vs-dealer-vs-agent .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-resources-distributor-vs-dealer-vs-agent .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-resources-distributor-vs-dealer-vs-agent .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-resources-distributor-vs-dealer-vs-agent .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-resources-distributor-vs-dealer-vs-agent .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-resources-distributor-vs-dealer-vs-agent .deliverable-card:hover::before { transform: scaleX(1); }
html.page-resources-distributor-vs-dealer-vs-agent .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-resources-distributor-vs-dealer-vs-agent .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-resources-distributor-vs-dealer-vs-agent .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent #rvd-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-resources-distributor-vs-dealer-vs-agent #rvd-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-resources-distributor-vs-dealer-vs-agent .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-resources-distributor-vs-dealer-vs-agent .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-resources-distributor-vs-dealer-vs-agent .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-resources-distributor-vs-dealer-vs-agent .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-resources-distributor-vs-dealer-vs-agent .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-resources-distributor-vs-dealer-vs-agent .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-resources-distributor-vs-dealer-vs-agent .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-resources-distributor-vs-dealer-vs-agent .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-resources-distributor-vs-dealer-vs-agent .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-resources-distributor-vs-dealer-vs-agent .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-resources-distributor-vs-dealer-vs-agent .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-resources-distributor-vs-dealer-vs-agent .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-resources-distributor-vs-dealer-vs-agent .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-resources-distributor-vs-dealer-vs-agent .form-group.full { grid-column: 1 / -1; }
html.page-resources-distributor-vs-dealer-vs-agent .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-resources-distributor-vs-dealer-vs-agent .form-group input,
html.page-resources-distributor-vs-dealer-vs-agent .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-resources-distributor-vs-dealer-vs-agent .form-group input:focus,
html.page-resources-distributor-vs-dealer-vs-agent .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-resources-distributor-vs-dealer-vs-agent .form-group textarea { min-height: 110px; }
html.page-resources-distributor-vs-dealer-vs-agent .form-submit { margin-top: 1.25rem; }
html.page-resources-distributor-vs-dealer-vs-agent .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-resources-distributor-vs-dealer-vs-agent .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-resources-distributor-vs-dealer-vs-agent .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-resources-distributor-vs-dealer-vs-agent .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-resources-distributor-vs-dealer-vs-agent .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-resources-distributor-vs-dealer-vs-agent .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-resources-distributor-vs-dealer-vs-agent body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-resources-distributor-vs-dealer-vs-agent 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-resources-distributor-vs-dealer-vs-agent {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-resources-distributor-vs-dealer-vs-agent body::before { animation: none; }
}
html.page-resources-distributor-vs-dealer-vs-agent main,
html.page-resources-distributor-vs-dealer-vs-agent section,
html.page-resources-distributor-vs-dealer-vs-agent .container { position: relative; z-index: 1; }
html.page-resources-distributor-vs-dealer-vs-agent .faq-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--canvas); }
html.page-resources-distributor-vs-dealer-vs-agent .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-resources-distributor-vs-dealer-vs-agent .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-resources-distributor-vs-dealer-vs-agent .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-resources-distributor-vs-dealer-vs-agent .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-resources-distributor-vs-dealer-vs-agent .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== resources-exclusive-vs-non-exclusive-distributor-agreement.html (scope: .page-resources-exclusive-vs-non-exclusive-distributor-agreement) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement *,
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement *::before,
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement { overflow-x: clip; scroll-behavior: smooth; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement img,
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement svg,
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement video { max-width: 100%; height: auto; display: block; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement a { color: inherit; text-decoration: none; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement ul,
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement ol { list-style: none; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .btn { min-height: 44px; }
}
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/differentiators-structured-process.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero-inner { max-width: 680px; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-resources-exclusive-vs-non-exclusive-distributor-agreement 32s linear infinite;
      gap: 0;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-resources-exclusive-vs-non-exclusive-distributor-agreement {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement #rex-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement #di-approach { background: var(--brand-bg); }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement #rex-deliverables { background: var(--brand-bg); }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .deliverable-card:hover::before { transform: scaleX(1); }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement #rex-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement #rex-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-group.full { grid-column: 1 / -1; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-group input,
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-group input:focus,
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-group textarea { min-height: 110px; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-submit { margin-top: 1.25rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-resources-exclusive-vs-non-exclusive-distributor-agreement 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-resources-exclusive-vs-non-exclusive-distributor-agreement {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement body::before { animation: none; }
}
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement main,
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement section,
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .container { position: relative; z-index: 1; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .faq-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--canvas); }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-resources-exclusive-vs-non-exclusive-distributor-agreement .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== services-channel-onboarding-activation.html (scope: .page-services-channel-onboarding-activation) ==================== */
/* ============================================================
       TOKENS & RESET
    ============================================================ */
html.page-services-channel-onboarding-activation {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --brand-fg-muted: #4a4a4a;
      --brand-fg-subtle: #767676;
      --brand-surface: #f5f5f5;
      --brand-surface-2: #ebebeb;
      --brand-border: #e0e0e0;

      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

      --container-max: 1160px;
      --container-pad: clamp(1.25rem, 5vw, 2.5rem);

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;

      --shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.04);
      --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.10), 0 16px 48px rgba(0,0,0,0.07);
    }
html.page-services-channel-onboarding-activation *,
html.page-services-channel-onboarding-activation *::before,
html.page-services-channel-onboarding-activation *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-services-channel-onboarding-activation {
      overflow-x: hidden;
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }
html.page-services-channel-onboarding-activation body {
      overflow-x: hidden;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      opacity: 0;
      animation: pageIn__page-services-channel-onboarding-activation 0.45s var(--ease-out) 0.05s forwards;
    }
@keyframes pageIn__page-services-channel-onboarding-activation {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
html.page-services-channel-onboarding-activation img,
html.page-services-channel-onboarding-activation svg,
html.page-services-channel-onboarding-activation video { max-width: 100%; height: auto; display: block; }
html.page-services-channel-onboarding-activation a { color: inherit; text-decoration: none; }
html.page-services-channel-onboarding-activation ul,
html.page-services-channel-onboarding-activation ol { list-style: none; }
/* ============================================================
       TYPOGRAPHY SCALE
    ============================================================ */
html.page-services-channel-onboarding-activation .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4.5vw, 3.25rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.02em;
    }
html.page-services-channel-onboarding-activation .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.2vw, 2.4rem);
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -0.018em;
    }
html.page-services-channel-onboarding-activation .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.2vw, 1.75rem);
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.01em;
    }
html.page-services-channel-onboarding-activation .label-sm {
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
    }
/* ============================================================
       LAYOUT UTILITIES
    ============================================================ */
html.page-services-channel-onboarding-activation .container {
      width: 100%;
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-pad);
    }
html.page-services-channel-onboarding-activation .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-services-channel-onboarding-activation .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ============================================================
       BUTTONS
    ============================================================ */
html.page-services-channel-onboarding-activation .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 600;
      line-height: 1;
      padding: 0.75rem 1.5rem;
      border-radius: var(--radius-sm);
      border: 2px solid transparent;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.22s var(--ease-out);
      white-space: nowrap;
    }
@media (pointer: coarse) {
html.page-services-channel-onboarding-activation .btn { min-height: 44px; }
}
html.page-services-channel-onboarding-activation .btn:focus-visible {
      outline: 3px solid var(--brand-accent);
      outline-offset: 3px;
    }
html.page-services-channel-onboarding-activation .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      border-color: var(--brand-accent);
    }
html.page-services-channel-onboarding-activation .btn-primary:hover {
      background: var(--brand-accent-2);
      border-color: var(--brand-accent-2);
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(205,62,45,0.28);
    }
html.page-services-channel-onboarding-activation .btn-ghost {
      background: transparent;
      color: var(--brand-accent);
      border-color: var(--brand-accent);
    }
html.page-services-channel-onboarding-activation .btn-ghost:hover {
      background: var(--brand-accent);
      color: #fff;
      transform: translateY(-1px);
    }
html.page-services-channel-onboarding-activation .btn-ghost-dark {
      background: transparent;
      color: var(--brand-fg);
      border-color: var(--brand-border);
    }
html.page-services-channel-onboarding-activation .btn-ghost-dark:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
    }
/* ============================================================
       ACCENT WORD
    ============================================================ */
html.page-services-channel-onboarding-activation .accent-word { color: var(--brand-accent); }
/* ============================================================
       KICKER
    ============================================================ */
html.page-services-channel-onboarding-activation .kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1rem;
    }
html.page-services-channel-onboarding-activation .kicker::before {
      content: '';
      display: block;
      width: 24px;
      height: 2px;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
/* ============================================================
       SECTION HEADER
    ============================================================ */
html.page-services-channel-onboarding-activation .section-header {
      margin-bottom: clamp(2.5rem, 5vw, 4rem);
    }
html.page-services-channel-onboarding-activation .section-header p {
      margin-top: 1rem;
      font-size: 1.0625rem;
      color: var(--brand-fg-muted);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-services-channel-onboarding-activation .section-header.centered {
      text-align: center;
    }
html.page-services-channel-onboarding-activation .section-header.centered p {
      margin-inline: auto;
    }
/* ============================================================
       SKIP LINK
    ============================================================ */
html.page-services-channel-onboarding-activation .skip-link {
      position: absolute;
      top: -999px;
      left: 1rem;
      z-index: 9999;
      background: var(--brand-accent);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      font-weight: 600;
    }
html.page-services-channel-onboarding-activation .skip-link:focus { top: 1rem; }
/* ============================================================
       PAGE-HERO (mandatory skeleton)
    ============================================================ */
html.page-services-channel-onboarding-activation .page-hero {
      position: relative;
      min-height: 88vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: clamp(6rem, 12vw, 9rem);
      padding-bottom: clamp(3rem, 6vw, 5rem);
      background: var(--brand-fg);
    }
html.page-services-channel-onboarding-activation .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/hero-activation.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      animation: heroBgSettle__page-services-channel-onboarding-activation 1.2s var(--ease-out) forwards;
    }
@keyframes heroBgSettle__page-services-channel-onboarding-activation {
      from { transform: scale(1.04); }
      to   { transform: scale(1.00); }
    }
html.page-services-channel-onboarding-activation .page-hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(105deg, rgba(10,10,14,0.88) 0%, rgba(10,10,14,0.62) 52%, rgba(10,10,14,0.35) 100%),
        radial-gradient(ellipse 120% 90% at 50% 45%, rgba(10,10,14,0) 35%, rgba(10,10,14,0.65) 100%);
      pointer-events: none;
    }
html.page-services-channel-onboarding-activation .page-hero-content {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      align-items: center;
    }
html.page-services-channel-onboarding-activation .page-hero-inner {
      max-width: 700px;
    }
html.page-services-channel-onboarding-activation .page-hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      margin-bottom: 1.1rem;
    }
html.page-services-channel-onboarding-activation .page-hero-kicker::before {
      content: '';
      display: block;
      width: 24px;
      height: 2px;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
html.page-services-channel-onboarding-activation .page-hero-inner .display-xl {
      color: #fff;
      margin-bottom: 1.5rem;
    }
html.page-services-channel-onboarding-activation .page-hero-body {
      color: rgba(255,255,255,0.82);
      font-size: 1.0625rem;
      line-height: 1.72;
      max-width: 62ch;
      margin-bottom: 2rem;
    }
html.page-services-channel-onboarding-activation .page-hero-body p + p { margin-top: 0.85rem; }
html.page-services-channel-onboarding-activation .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
    }
/* Hero entrance animations */
html.page-services-channel-onboarding-activation .page-hero-kicker,
html.page-services-channel-onboarding-activation .page-hero-inner .display-xl,
html.page-services-channel-onboarding-activation .page-hero-body,
html.page-services-channel-onboarding-activation .page-hero-actions {
      opacity: 0;
      transform: translateY(18px);
      animation: heroItemIn__page-services-channel-onboarding-activation 0.65s var(--ease-out) forwards;
    }
html.page-services-channel-onboarding-activation .page-hero-inner .display-xl { animation-delay: 0.18s; }
html.page-services-channel-onboarding-activation .page-hero-body { animation-delay: 0.32s; }
html.page-services-channel-onboarding-activation .page-hero-actions { animation-delay: 0.44s; }
@keyframes heroItemIn__page-services-channel-onboarding-activation {
      to { opacity: 1; transform: translateY(0); }
    }
/* Stat row */
html.page-services-channel-onboarding-activation .hero-stat-row {
      position: relative;
      z-index: 2;
      border-top: 1px solid rgba(255,255,255,0.12);
      padding-block: 1.5rem;
      margin-top: 2rem;
    }
html.page-services-channel-onboarding-activation .hero-stat-row .container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
    }
html.page-services-channel-onboarding-activation .hero-stat {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
html.page-services-channel-onboarding-activation .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-services-channel-onboarding-activation .hero-stat-label {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }
/* ============================================================
       PROBLEM STATEMENT SECTION
    ============================================================ */
html.page-services-channel-onboarding-activation #coa-problem {
      background: var(--brand-surface);
      border-top: 1px solid var(--brand-border);
    }
html.page-services-channel-onboarding-activation .problem-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 5vw, 5rem);
      align-items: start;
    }
html.page-services-channel-onboarding-activation .problem-left {}
html.page-services-channel-onboarding-activation .problem-left h2 {
      margin-bottom: 1.25rem;
    }
html.page-services-channel-onboarding-activation .problem-body {
      font-size: 1rem;
      color: var(--brand-fg-muted);
      line-height: 1.75;
    }
html.page-services-channel-onboarding-activation .problem-body p + p { margin-top: 1rem; }
html.page-services-channel-onboarding-activation .problem-callout {
      background: var(--brand-fg);
      color: #fff;
      border-radius: var(--radius-md);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      align-self: start;
      position: sticky;
      top: 7rem;
    }
html.page-services-channel-onboarding-activation .problem-callout-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--brand-accent);
    }
html.page-services-channel-onboarding-activation .problem-callout-items {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
html.page-services-channel-onboarding-activation .problem-callout-item {
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
    }
html.page-services-channel-onboarding-activation .problem-callout-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--brand-accent);
      flex-shrink: 0;
      margin-top: 0.45rem;
    }
html.page-services-channel-onboarding-activation .problem-callout-item p {
      font-size: 0.9375rem;
      line-height: 1.55;
      color: rgba(255,255,255,0.85);
    }
/* ============================================================
       APPROACH SECTION
    ============================================================ */
html.page-services-channel-onboarding-activation #coa-approach {
      background: var(--brand-bg);
    }
html.page-services-channel-onboarding-activation .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 5vw, 5rem);
      align-items: stretch;
    }
html.page-services-channel-onboarding-activation .split-image-col {
      border-radius: var(--radius-lg);
      overflow: hidden;
      min-height: 420px;
    }
html.page-services-channel-onboarding-activation .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
html.page-services-channel-onboarding-activation .split-content-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1.5rem;
    }
html.page-services-channel-onboarding-activation .split-content-col h2 { margin-bottom: 0.25rem; }
html.page-services-channel-onboarding-activation .approach-body {
      font-size: 1rem;
      color: var(--brand-fg-muted);
      line-height: 1.75;
    }
html.page-services-channel-onboarding-activation .approach-body p + p { margin-top: 1rem; }
html.page-services-channel-onboarding-activation .approach-pillars {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 0.5rem;
    }
html.page-services-channel-onboarding-activation .approach-pillar {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      padding: 1rem;
      background: var(--brand-surface);
      border-radius: var(--radius-md);
      border-left: 3px solid var(--brand-accent);
      transition: background 0.2s var(--ease-out);
    }
html.page-services-channel-onboarding-activation .approach-pillar:hover { background: var(--brand-surface-2); }
html.page-services-channel-onboarding-activation .approach-pillar-num {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--brand-accent);
      line-height: 1;
      flex-shrink: 0;
      padding-top: 0.1rem;
    }
html.page-services-channel-onboarding-activation .approach-pillar-text strong {
      display: block;
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: 0.2rem;
    }
html.page-services-channel-onboarding-activation .approach-pillar-text p {
      font-size: 0.875rem;
      color: var(--brand-fg-muted);
      line-height: 1.55;
    }
/* ============================================================
       DELIVERABLES SECTION
    ============================================================ */
html.page-services-channel-onboarding-activation #coa-deliverables {
      background: var(--brand-surface);
      border-top: 1px solid var(--brand-border);
      border-bottom: 1px solid var(--brand-border);
    }
html.page-services-channel-onboarding-activation .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
html.page-services-channel-onboarding-activation .deliverable-card {
      background: var(--brand-bg);
      border: 1px solid var(--brand-border);
      border-radius: var(--radius-md);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      box-shadow: var(--shadow-card);
      transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
    }
html.page-services-channel-onboarding-activation .deliverable-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-card-hover);
      border-color: rgba(205,62,45,0.25);
    }
html.page-services-channel-onboarding-activation .deliverable-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      background: rgba(205,62,45,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
html.page-services-channel-onboarding-activation .deliverable-icon svg {
      width: 20px;
      height: 20px;
      color: var(--brand-accent);
    }
html.page-services-channel-onboarding-activation .deliverable-card h3 {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--brand-fg);
      line-height: 1.3;
    }
html.page-services-channel-onboarding-activation .deliverable-card p {
      font-size: 0.9rem;
      color: var(--brand-fg-muted);
      line-height: 1.65;
    }
/* ============================================================
       CTA BAND
    ============================================================ */
html.page-services-channel-onboarding-activation #coa-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-services-channel-onboarding-activation #coa-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(205,62,45,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 10% 30%, rgba(205,62,45,0.07) 0%, transparent 65%);
      pointer-events: none;
    }
html.page-services-channel-onboarding-activation .cta-band-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: center;
    }
html.page-services-channel-onboarding-activation .cta-band-text h2 {
      color: #fff;
      margin-bottom: 1rem;
    }
html.page-services-channel-onboarding-activation .cta-band-text p {
      color: rgba(255,255,255,0.72);
      font-size: 1rem;
      line-height: 1.7;
      max-width: 60ch;
    }
html.page-services-channel-onboarding-activation .cta-band-action {
      flex-shrink: 0;
    }
html.page-services-channel-onboarding-activation .btn-ghost-white {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,0.35);
    }
html.page-services-channel-onboarding-activation .btn-ghost-white:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.7);
    }
/* ============================================================
       CONTACT FORM SECTION
    ============================================================ */
html.page-services-channel-onboarding-activation #contact-section {
      background: var(--brand-bg);
      border-top: 1px solid var(--brand-border);
    }
html.page-services-channel-onboarding-activation .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: clamp(3rem, 6vw, 6rem);
      align-items: start;
    }
html.page-services-channel-onboarding-activation .contact-info {}
html.page-services-channel-onboarding-activation .contact-info h2 { margin-bottom: 1rem; }
html.page-services-channel-onboarding-activation .contact-info-body {
      font-size: 1rem;
      color: var(--brand-fg-muted);
      line-height: 1.7;
      margin-bottom: 2rem;
    }
html.page-services-channel-onboarding-activation .contact-detail-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
      font-size: 0.9375rem;
      color: var(--brand-fg-muted);
    }
html.page-services-channel-onboarding-activation .contact-detail-item svg {
      width: 18px;
      height: 18px;
      color: var(--brand-accent);
      flex-shrink: 0;
    }
html.page-services-channel-onboarding-activation .contact-detail-item a {
      color: var(--brand-fg-muted);
      transition: color 0.2s;
    }
html.page-services-channel-onboarding-activation .contact-detail-item a:hover { color: var(--brand-accent); }
html.page-services-channel-onboarding-activation .contact-form-wrap {
      background: var(--brand-surface);
      border: 1px solid var(--brand-border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.5rem);
    }
html.page-services-channel-onboarding-activation .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
html.page-services-channel-onboarding-activation .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 1rem;
    }
html.page-services-channel-onboarding-activation .form-group label {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--brand-fg);
      letter-spacing: 0.01em;
    }
html.page-services-channel-onboarding-activation .form-group input,
html.page-services-channel-onboarding-activation .form-group textarea,
html.page-services-channel-onboarding-activation .form-group select {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--brand-fg);
      background: var(--brand-bg);
      border: 1.5px solid var(--brand-border);
      border-radius: var(--radius-sm);
      padding: 0.65rem 0.875rem;
      width: 100%;
      transition: border-color 0.2s, box-shadow 0.2s;
      line-height: 1.5;
      appearance: none;
    }
html.page-services-channel-onboarding-activation .form-group input:focus,
html.page-services-channel-onboarding-activation .form-group textarea:focus,
html.page-services-channel-onboarding-activation .form-group select:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-services-channel-onboarding-activation .form-group textarea {
      resize: vertical;
      min-height: 120px;
    }
html.page-services-channel-onboarding-activation .form-message {
      display: none;
      padding: 0.85rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      font-weight: 500;
      margin-top: 1rem;
    }
html.page-services-channel-onboarding-activation .form-message.success {
      display: block;
      background: rgba(34,197,94,0.1);
      border: 1px solid rgba(34,197,94,0.3);
      color: #166534;
    }
html.page-services-channel-onboarding-activation .form-message.error {
      display: block;
      background: rgba(205,62,45,0.08);
      border: 1px solid rgba(205,62,45,0.25);
      color: var(--brand-accent-2);
    }
/* ============================================================
       REVEAL ANIMATIONS
    ============================================================ */
html.page-services-channel-onboarding-activation .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    }
html.page-services-channel-onboarding-activation .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-services-channel-onboarding-activation .reveal-stagger > * {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
    }
html.page-services-channel-onboarding-activation .reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
html.page-services-channel-onboarding-activation .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: none; }
html.page-services-channel-onboarding-activation .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: none; }
html.page-services-channel-onboarding-activation .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: none; }
html.page-services-channel-onboarding-activation .reveal-stagger.in > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: none; }
html.page-services-channel-onboarding-activation .reveal-stagger.in > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: none; }
/* After stagger entrance finishes, zero out the delays so hover isn't sluggish */
html.page-services-channel-onboarding-activation .reveal-stagger.in > * {
      transition-delay: 0s;
    }
/* ============================================================
       MARQUEE
    ============================================================ */
html.page-services-channel-onboarding-activation .marquee-section {
      background: var(--brand-surface);
      border-top: 1px solid var(--brand-border);
      border-bottom: 1px solid var(--brand-border);
      padding-block: 1rem;
      overflow: hidden;
    }
html.page-services-channel-onboarding-activation .marquee-track {
      display: flex;
      width: max-content;
      animation: marqueeScroll__page-services-channel-onboarding-activation 36s linear infinite;
    }
@keyframes marqueeScroll__page-services-channel-onboarding-activation {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
html.page-services-channel-onboarding-activation .marquee-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding-inline: 2rem;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--brand-fg-subtle);
      white-space: nowrap;
    }
html.page-services-channel-onboarding-activation .marquee-item::after {
      content: '';
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--brand-accent);
      margin-left: 2rem;
    }
@media (prefers-reduced-motion: reduce) {
html.page-services-channel-onboarding-activation .marquee-track { animation: none; }
}
/* ============================================================
       DIVIDER LINE (decorative SVG)
    ============================================================ */
html.page-services-channel-onboarding-activation .section-divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 2.5rem;
    }
html.page-services-channel-onboarding-activation .section-divider-line {
      flex: 1;
      height: 1px;
      background: var(--brand-border);
    }
/* ============================================================
       BREADCRUMB
    ============================================================ */
html.page-services-channel-onboarding-activation .breadcrumb {
      padding-block: 0.875rem;
      border-bottom: 1px solid var(--brand-border);
      background: var(--brand-bg);
    }
html.page-services-channel-onboarding-activation .breadcrumb nav {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
html.page-services-channel-onboarding-activation .breadcrumb-item {
      font-size: 0.8rem;
      color: var(--brand-fg-subtle);
    }
html.page-services-channel-onboarding-activation .breadcrumb-item a {
      color: var(--brand-fg-subtle);
      transition: color 0.2s;
    }
html.page-services-channel-onboarding-activation .breadcrumb-item a:hover { color: var(--brand-accent); }
html.page-services-channel-onboarding-activation .breadcrumb-sep {
      font-size: 0.75rem;
      color: var(--brand-border);
    }
html.page-services-channel-onboarding-activation .breadcrumb-item.current { color: var(--brand-fg); font-weight: 500; }
/* ============================================================
       RESPONSIVE
    ============================================================ */
html.page-services-channel-onboarding-activation @media (max-width: 900px) {
      .problem-layout {
        grid-template-columns: 1fr;
      }
      .problem-callout {
        position: static;
      }
      .split-band {
        grid-template-columns: 1fr;
      }
      .split-image-col {
        min-height: 280px;
        order: -1;
      }
      .deliverables-grid {
        grid-template-columns: 1fr;
      }
      .cta-band-inner {
        grid-template-columns: 1fr;
      }
      .contact-layout {
        grid-template-columns: 1fr;
      }
    }
@media (max-width: 600px) {
html.page-services-channel-onboarding-activation .page-hero {
        min-height: 100svh;
      }
html.page-services-channel-onboarding-activation .form-row {
        grid-template-columns: 1fr;
      }
html.page-services-channel-onboarding-activation .hero-stat-row .container {
        gap: 1.25rem;
      }
}
/* ============================================================
       REDUCED MOTION
    ============================================================ */
html.page-services-channel-onboarding-activation @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0.01ms !important;
      }
      .reveal, .reveal-stagger > * {
        opacity: 1;
        transform: none;
      }
    }
html.page-services-channel-onboarding-activation .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-services-channel-onboarding-activation .faq-item { border-bottom: 1px solid var(--brand-border); padding-block: 1.5rem; }
html.page-services-channel-onboarding-activation .faq-item:first-child { border-top: 1px solid var(--brand-border); }
html.page-services-channel-onboarding-activation .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-services-channel-onboarding-activation .faq-a { font-size: 0.9375rem; color: var(--brand-fg-muted); line-height: 1.7; }
html.page-services-channel-onboarding-activation body.paused *,
html.page-services-channel-onboarding-activation body.paused *::before,
html.page-services-channel-onboarding-activation body.paused *::after {
      animation-play-state: paused !important;
    }


/* ==================== services-channel-partner-search.html (scope: .page-services-channel-partner-search) ==================== */
/* ─── Tokens ─────────────────────────────────────────── */
html.page-services-channel-partner-search {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --canvas: #f7f6f4;
      --panel: #ffffff;
      --text-primary: #111111;
      --text-secondary: #555555;
      --border: #e2e0dc;

      --space-xs: 0.5rem;
      --space-s: 1rem;
      --space-m: 1.5rem;
      --space-l: 2.5rem;
      --space-xl: 4rem;
      --space-2xl: 6rem;

      --radius: 4px;
      --radius-m: 8px;
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    }
/* ─── Reset & Base ───────────────────────────────────── */
html.page-services-channel-partner-search *,
html.page-services-channel-partner-search *::before,
html.page-services-channel-partner-search *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-services-channel-partner-search { overflow-x: clip; scroll-behavior: smooth; }
html.page-services-channel-partner-search body {
      overflow-x: clip;
      font-family: var(--font-body);
      background-color: var(--brand-bg);
      color: var(--brand-fg);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-services-channel-partner-search img,
html.page-services-channel-partner-search svg,
html.page-services-channel-partner-search video { max-width: 100%; height: auto; display: block; }
html.page-services-channel-partner-search a { color: inherit; text-decoration: none; }
html.page-services-channel-partner-search ul { list-style: none; }
/* ─── Skip link ──────────────────────────────────────── */
html.page-services-channel-partner-search .skip-link {
      position: absolute; top: -100%; left: 1rem;
      background: var(--brand-accent); color: #fff;
      padding: 0.5rem 1rem; border-radius: var(--radius);
      font-family: var(--font-body); font-size: 0.875rem;
      z-index: 9999; transition: top 0.2s;
    }
html.page-services-channel-partner-search .skip-link:focus { top: 1rem; }
/* ─── Layout ─────────────────────────────────────────── */
html.page-services-channel-partner-search .container {
      width: 100%;
      max-width: 1200px;
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 3rem);
    }
/* ─── Typography ─────────────────────────────────────── */
html.page-services-channel-partner-search .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
html.page-services-channel-partner-search .display-l {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 2.5rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.015em;
    }
html.page-services-channel-partner-search .display-m {
      font-family: var(--font-display);
      font-size: clamp(1.2rem, 2vw, 1.75rem);
      font-weight: 600;
      line-height: 1.2;
    }
html.page-services-channel-partner-search .section-kicker {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: var(--space-s);
      display: block;
    }
html.page-services-channel-partner-search .accent-word { color: var(--brand-accent); }
/* ─── Buttons ─────────────────────────────────────────── */
html.page-services-channel-partner-search .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4em;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      padding: 0.8rem 1.75rem;
      border-radius: var(--radius);
      border: 2px solid transparent;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), transform 0.18s var(--ease-out);
      white-space: nowrap;
    }
html.page-services-channel-partner-search .btn:hover { transform: translateY(-2px); }
html.page-services-channel-partner-search .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      border-color: var(--brand-accent);
    }
html.page-services-channel-partner-search .btn-primary:hover { background: var(--brand-accent-2); border-color: var(--brand-accent-2); }
html.page-services-channel-partner-search .btn-outline {
      background: transparent;
      color: var(--brand-accent);
      border-color: var(--brand-accent);
    }
html.page-services-channel-partner-search .btn-outline:hover { background: var(--brand-accent); color: #fff; }
html.page-services-channel-partner-search .btn-ghost-white {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,0.55);
    }
html.page-services-channel-partner-search .btn-ghost-white:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); }
@media (pointer: coarse) {
html.page-services-channel-partner-search .btn { min-height: 44px; }
}
/* ─── Page Hero ───────────────────────────────────────── */
html.page-services-channel-partner-search .page-hero {
      position: relative;
      min-height: 90vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-top: 120px;
      overflow: hidden;
    }
html.page-services-channel-partner-search .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/cps-hero-bg.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      animation: hero-settle__page-services-channel-partner-search 1.6s var(--ease-out) forwards;
    }
@keyframes hero-settle__page-services-channel-partner-search {
      from { transform: scale(1.08); }
      to   { transform: scale(1); }
    }
html.page-services-channel-partner-search .page-hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(10,10,14,0.55) 0%, rgba(10,10,14,0.3) 40%, rgba(10,10,14,0.78) 100%),
        radial-gradient(ellipse 110% 80% at 50% 60%, rgba(10,10,14,0) 30%, rgba(10,10,14,0.55) 100%);
    }
html.page-services-channel-partner-search .page-hero-content {
      position: relative;
      z-index: 2;
      padding-top: var(--space-2xl);
      padding-bottom: var(--space-xl);
      display: flex;
      align-items: flex-end;
    }
html.page-services-channel-partner-search .page-hero-inner {
      max-width: 820px;
    }
html.page-services-channel-partner-search .page-hero-kicker {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      display: inline-block;
      margin-bottom: var(--space-s);
      opacity: 0;
      animation: fade-up__page-services-channel-partner-search 0.7s 0.3s var(--ease-out) forwards;
    }
html.page-services-channel-partner-search .page-hero-inner h1 {
      color: #fff;
      text-shadow: 0 2px 8px rgba(10,10,14,0.5);
      opacity: 0;
      animation: fade-up__page-services-channel-partner-search 0.8s 0.45s var(--ease-out) forwards;
    }
html.page-services-channel-partner-search .page-hero-body {
      margin-top: var(--space-m);
      max-width: 62ch;
      opacity: 0;
      animation: fade-up__page-services-channel-partner-search 0.8s 0.62s var(--ease-out) forwards;
    }
html.page-services-channel-partner-search .page-hero-body p {
      color: rgba(255,255,255,0.88);
      font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
      line-height: 1.7;
      margin-bottom: var(--space-s);
      text-shadow: 0 1px 4px rgba(10,10,14,0.45);
    }
html.page-services-channel-partner-search .page-hero-body p:last-child { margin-bottom: 0; }
html.page-services-channel-partner-search .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-s);
      margin-top: var(--space-l);
      opacity: 0;
      animation: fade-up__page-services-channel-partner-search 0.7s 0.78s var(--ease-out) forwards;
    }
/* Hero stat row */
html.page-services-channel-partner-search .hero-stat-row {
      position: relative;
      z-index: 2;
      background: rgba(10,10,14,0.72);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,0.08);
    }
html.page-services-channel-partner-search .hero-stat-row .container {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
    }
html.page-services-channel-partner-search .hero-stat {
      flex: 1 1 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.25rem var(--space-m);
      border-right: 1px solid rgba(255,255,255,0.07);
      text-align: center;
    }
html.page-services-channel-partner-search .hero-stat:last-child { border-right: none; }
html.page-services-channel-partner-search .hero-stat-value {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 700;
      color: var(--brand-accent);
      line-height: 1;
    }
html.page-services-channel-partner-search .hero-stat-label {
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 500;
      color: rgba(255,255,255,0.55);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-top: 0.3rem;
    }
/* ─── Animations ──────────────────────────────────────── */
@keyframes fade-up__page-services-channel-partner-search {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes fade-in__page-services-channel-partner-search {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
html.page-services-channel-partner-search .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    }
html.page-services-channel-partner-search .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-services-channel-partner-search .reveal-delay-1 { transition-delay: 0.08s; }
html.page-services-channel-partner-search .reveal-delay-2 { transition-delay: 0.16s; }
html.page-services-channel-partner-search .reveal-delay-3 { transition-delay: 0.24s; }
html.page-services-channel-partner-search .reveal-delay-4 { transition-delay: 0.32s; }
html.page-services-channel-partner-search .reveal-delay-5 { transition-delay: 0.40s; }
/* ─── Section base ────────────────────────────────────── */
html.page-services-channel-partner-search .section {
      padding-block: clamp(3.5rem, 7vw, 5.5rem);
    }
html.page-services-channel-partner-search .section-alt { background: var(--canvas); }
html.page-services-channel-partner-search .section-header {
      margin-bottom: var(--space-xl);
    }
html.page-services-channel-partner-search .section-header h2 { margin-top: 0.4rem; }
html.page-services-channel-partner-search .section-header p {
      color: var(--text-secondary);
      max-width: 60ch;
      margin-top: var(--space-m);
      font-size: 1.0625rem;
      line-height: 1.7;
    }
/* ─── Problem Statement ───────────────────────────────── */
html.page-services-channel-partner-search #cps-problem .problem-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
      align-items: start;
    }
html.page-services-channel-partner-search #cps-problem .problem-col p {
      color: var(--text-secondary);
      font-size: 1rem;
      line-height: 1.75;
      margin-bottom: var(--space-m);
    }
html.page-services-channel-partner-search #cps-problem .problem-col p:last-child { margin-bottom: 0; }
html.page-services-channel-partner-search #cps-problem .problem-callout {
      background: var(--brand-fg);
      color: #fff;
      border-radius: var(--radius-m);
      padding: var(--space-l) var(--space-l);
      position: relative;
      overflow: hidden;
    }
html.page-services-channel-partner-search #cps-problem .problem-callout::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 4px; height: 100%;
      background: var(--brand-accent);
    }
html.page-services-channel-partner-search #cps-problem .problem-callout-label {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--brand-accent);
      margin-bottom: var(--space-s);
      display: block;
    }
html.page-services-channel-partner-search #cps-problem .problem-callout p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,0.82);
      margin-bottom: var(--space-m);
    }
html.page-services-channel-partner-search #cps-problem .problem-callout p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
html.page-services-channel-partner-search #cps-problem .problem-body { grid-template-columns: 1fr; }
}
/* ─── Approach / Split band ───────────────────────────── */
html.page-services-channel-partner-search .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
      align-items: stretch;
    }
html.page-services-channel-partner-search .split-image-col {
      border-radius: var(--radius-m);
      overflow: hidden;
      position: relative;
      min-height: 320px;
    }
html.page-services-channel-partner-search .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
    }
html.page-services-channel-partner-search .split-content-col { display: flex; flex-direction: column; justify-content: flex-start; }
html.page-services-channel-partner-search .process-phases { margin-top: var(--space-l); display: flex; flex-direction: column; gap: var(--space-m); }
html.page-services-channel-partner-search .process-phase {
      display: flex;
      gap: var(--space-m);
      align-items: flex-start;
    }
html.page-services-channel-partner-search .phase-number {
      flex-shrink: 0;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 50%;
      background: var(--brand-accent);
      color: #fff;
      font-family: var(--font-display);
      font-size: 0.85rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.1rem;
    }
html.page-services-channel-partner-search .phase-content h4 {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: 0.3rem;
    }
html.page-services-channel-partner-search .phase-content p {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }
@media (max-width: 768px) {
html.page-services-channel-partner-search .split-band { grid-template-columns: 1fr; }
html.page-services-channel-partner-search .split-image-col { min-height: 240px; position: relative; }
html.page-services-channel-partner-search .split-image-col img { position: absolute; }
}
/* ─── Deliverables ────────────────────────────────────── */
html.page-services-channel-partner-search #cps-deliverables .deliverables-intro {
      max-width: 60ch;
      color: var(--text-secondary);
      font-size: 1.0625rem;
      line-height: 1.7;
      margin-bottom: var(--space-xl);
    }
html.page-services-channel-partner-search .deliverables-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-m);
    }
html.page-services-channel-partner-search .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-m);
      padding: var(--space-l);
      position: relative;
      overflow: hidden;
      transition: border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out);
    }
html.page-services-channel-partner-search .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s var(--ease-out);
    }
html.page-services-channel-partner-search .deliverable-card:hover {
      border-color: rgba(205, 62, 45, 0.3);
      box-shadow: 0 8px 32px rgba(205,62,45,0.08);
      transform: translateY(-3px);
    }
html.page-services-channel-partner-search .deliverable-card:hover::before { transform: scaleX(1); }
html.page-services-channel-partner-search .deliverable-card.full-width { grid-column: 1 / -1; }
html.page-services-channel-partner-search .deliverable-icon {
      width: 2.25rem;
      height: 2.25rem;
      margin-bottom: var(--space-m);
      color: var(--brand-accent);
    }
html.page-services-channel-partner-search .deliverable-card h3 {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: var(--space-xs);
    }
html.page-services-channel-partner-search .deliverable-card p {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }
@media (max-width: 640px) {
html.page-services-channel-partner-search .deliverables-grid { grid-template-columns: 1fr; }
html.page-services-channel-partner-search .deliverable-card.full-width { grid-column: auto; }
}
/* ─── CTA Band ────────────────────────────────────────── */
html.page-services-channel-partner-search #cps-cta {
      background: var(--brand-fg);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
html.page-services-channel-partner-search #cps-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 70% at 60% 50%, rgba(205,62,45,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-services-channel-partner-search .cta-band-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--space-xl);
      align-items: center;
    }
html.page-services-channel-partner-search .cta-band-text h2 {
      color: #fff;
      margin-bottom: var(--space-m);
    }
html.page-services-channel-partner-search .cta-band-text p {
      max-width: 58ch;
      color: rgba(255,255,255,0.75);
      font-size: 1.0625rem;
      line-height: 1.7;
    }
html.page-services-channel-partner-search .cta-band-action { display: flex; gap: var(--space-s); flex-wrap: wrap; }
@media (max-width: 768px) {
html.page-services-channel-partner-search .cta-band-inner { grid-template-columns: 1fr; }
}
/* ─── Contact form ────────────────────────────────────── */
html.page-services-channel-partner-search #contact-section {
      background: var(--canvas);
    }
html.page-services-channel-partner-search .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
      align-items: start;
    }
html.page-services-channel-partner-search .contact-info h2 { margin-bottom: var(--space-m); }
html.page-services-channel-partner-search .contact-info p {
      color: var(--text-secondary);
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: var(--space-l);
    }
html.page-services-channel-partner-search .contact-detail {
      display: flex;
      align-items: center;
      gap: var(--space-s);
      font-size: 0.9375rem;
      color: var(--text-secondary);
      margin-bottom: var(--space-s);
    }
html.page-services-channel-partner-search .contact-detail a { color: var(--brand-accent); transition: color 0.18s; }
html.page-services-channel-partner-search .contact-detail a:hover { color: var(--brand-accent-2); }
html.page-services-channel-partner-search .contact-form-wrap {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-m);
      padding: var(--space-l);
    }
html.page-services-channel-partner-search .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-m);
    }
html.page-services-channel-partner-search .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-m); }
html.page-services-channel-partner-search .form-group:last-of-type { margin-bottom: 0; }
html.page-services-channel-partner-search .form-group label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--brand-fg);
      letter-spacing: 0.02em;
    }
html.page-services-channel-partner-search .form-group input,
html.page-services-channel-partner-search .form-group textarea {
      width: 100%;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: 0.7rem 0.9rem;
      transition: border-color 0.18s, box-shadow 0.18s;
      outline: none;
      resize: vertical;
    }
html.page-services-channel-partner-search .form-group input:focus,
html.page-services-channel-partner-search .form-group textarea:focus {
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-services-channel-partner-search .form-group textarea { min-height: 120px; }
html.page-services-channel-partner-search .form-submit { margin-top: var(--space-m); }
html.page-services-channel-partner-search .form-status {
      margin-top: var(--space-s);
      font-size: 0.9rem;
      line-height: 1.5;
      padding: 0.75rem 1rem;
      border-radius: var(--radius);
      display: none;
    }
html.page-services-channel-partner-search .form-status.success {
      display: block;
      background: rgba(34,197,94,0.1);
      color: #166534;
      border: 1px solid rgba(34,197,94,0.3);
    }
html.page-services-channel-partner-search .form-status.error {
      display: block;
      background: rgba(205,62,45,0.08);
      color: var(--brand-accent-2);
      border: 1px solid rgba(205,62,45,0.25);
    }
@media (max-width: 768px) {
html.page-services-channel-partner-search .contact-grid { grid-template-columns: 1fr; }
html.page-services-channel-partner-search .form-row { grid-template-columns: 1fr; }
}
/* ─── Marquee ─────────────────────────────────────────── */
html.page-services-channel-partner-search .marquee-section {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding-block: 0;
      overflow: hidden;
      background: var(--panel);
    }
html.page-services-channel-partner-search .marquee-track-wrap {
      display: flex;
      overflow: hidden;
      padding-block: 1.1rem;
    }
html.page-services-channel-partner-search .marquee-track {
      display: flex;
      gap: 0;
      animation: marquee-scroll__page-services-channel-partner-search 38s linear infinite;
      will-change: transform;
    }
html.page-services-channel-partner-search .marquee-item {
      display: flex;
      align-items: center;
      gap: var(--space-m);
      padding-inline: var(--space-l);
      white-space: nowrap;
      font-size: 0.78rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--text-secondary);
    }
html.page-services-channel-partner-search .marquee-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
@keyframes marquee-scroll__page-services-channel-partner-search {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
/* ─── In-page nav anchors ─────────────────────────────── */
html.page-services-channel-partner-search .section-nav {
      position: sticky;
      top: 72px;
      z-index: 10;
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
html.page-services-channel-partner-search .section-nav-inner {
      display: flex;
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
html.page-services-channel-partner-search .section-nav-inner::-webkit-scrollbar { display: none; }
html.page-services-channel-partner-search .section-nav-link {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-secondary);
      padding: 0.85rem 1.25rem;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
      transition: color 0.18s, border-color 0.18s;
    }
html.page-services-channel-partner-search .section-nav-link:hover,
html.page-services-channel-partner-search .section-nav-link.active {
      color: var(--brand-accent);
      border-bottom-color: var(--brand-accent);
    }
/* ─── Reduced motion ──────────────────────────────────── */
html.page-services-channel-partner-search @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
      }
      .page-hero-bg { transform: scale(1) !important; }
      .reveal { opacity: 1; transform: none; }
      .marquee-track { animation: none; }
    }
/* ─── Focus ───────────────────────────────────────────── */
html.page-services-channel-partner-search :focus-visible {
      outline: 2px solid var(--brand-accent);
      outline-offset: 3px;
    }
html.page-services-channel-partner-search .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-services-channel-partner-search .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-services-channel-partner-search .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-services-channel-partner-search .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-services-channel-partner-search .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== services-dealer-appointment.html (scope: .page-services-dealer-appointment) ==================== */
/* ─── TOKENS ─────────────────────────────────────────────── */
html.page-services-dealer-appointment {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --brand-fg-muted: #4a4a4a;
      --brand-fg-subtle: #767676;
      --brand-border: #e2e2e2;
      --brand-surface: #f7f7f7;
      --brand-surface-2: #efefef;

      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --space-xs: 0.5rem;
      --space-sm: 1rem;
      --space-md: 1.5rem;
      --space-lg: 2.5rem;
      --space-xl: 4rem;
      --space-2xl: 6rem;
      --space-3xl: 9rem;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

      --container-max: 1200px;
      --container-pad: clamp(1.25rem, 5vw, 2.5rem);
    }
/* ─── RESET ──────────────────────────────────────────────── */
html.page-services-dealer-appointment *,
html.page-services-dealer-appointment *::before,
html.page-services-dealer-appointment *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-services-dealer-appointment { scroll-behavior: smooth; overflow-x: clip; }
html.page-services-dealer-appointment body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-services-dealer-appointment img,
html.page-services-dealer-appointment svg,
html.page-services-dealer-appointment video { max-width: 100%; height: auto; display: block; }
html.page-services-dealer-appointment a { color: inherit; text-decoration: none; }
html.page-services-dealer-appointment ul { list-style: none; }
html.page-services-dealer-appointment button { font: inherit; cursor: pointer; border: none; background: none; }
/* ─── SKIP LINK ──────────────────────────────────────────── */
html.page-services-dealer-appointment .skip-link {
      position: absolute; top: -100%; left: 1rem;
      background: var(--brand-accent); color: #fff;
      padding: 0.5rem 1rem; border-radius: var(--radius-sm);
      font-size: 0.875rem; z-index: 9999;
      transition: top 0.2s;
    }
html.page-services-dealer-appointment .skip-link:focus { top: 1rem; }
/* ─── CONTAINER ──────────────────────────────────────────── */
html.page-services-dealer-appointment .container {
      width: 100%;
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-pad);
    }
/* ─── TYPOGRAPHY SCALE ───────────────────────────────────── */
html.page-services-dealer-appointment .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.25rem, 5vw, 3.75rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
html.page-services-dealer-appointment .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3.5vw, 2.75rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
html.page-services-dealer-appointment .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.5vw, 2rem);
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.015em;
    }
html.page-services-dealer-appointment .display-sm {
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 2vw, 1.35rem);
      font-weight: 600;
      line-height: 1.3;
    }
html.page-services-dealer-appointment .label-mono {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
html.page-services-dealer-appointment .body-lg { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; }
html.page-services-dealer-appointment .body-md { font-size: 1rem; line-height: 1.65; }
html.page-services-dealer-appointment .body-sm { font-size: 0.875rem; line-height: 1.6; }
/* ─── BUTTONS ────────────────────────────────────────────── */
html.page-services-dealer-appointment .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.75rem 1.625rem;
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      line-height: 1.2;
      text-decoration: none;
      transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
      white-space: nowrap;
    }
@media (pointer: coarse) {
html.page-services-dealer-appointment .btn { min-height: 44px; }
}
html.page-services-dealer-appointment .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      text-shadow: none;
    }
html.page-services-dealer-appointment .btn-primary:hover,
html.page-services-dealer-appointment .btn-primary:focus-visible {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 18px rgba(205,62,45,0.28);
    }
html.page-services-dealer-appointment .btn-outline {
      background: transparent;
      color: var(--brand-accent);
      border: 2px solid var(--brand-accent);
    }
html.page-services-dealer-appointment .btn-outline:hover,
html.page-services-dealer-appointment .btn-outline:focus-visible {
      background: var(--brand-accent);
      color: #fff;
    }
html.page-services-dealer-appointment .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 2px solid var(--brand-border);
    }
html.page-services-dealer-appointment .btn-ghost:hover,
html.page-services-dealer-appointment .btn-ghost:focus-visible {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
    }
html.page-services-dealer-appointment .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 2px solid rgba(255,255,255,0.55);
    }
html.page-services-dealer-appointment .btn-ghost-white:hover,
html.page-services-dealer-appointment .btn-ghost-white:focus-visible {
      border-color: #fff;
      background: rgba(255,255,255,0.12);
    }
html.page-services-dealer-appointment :focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
/* ─── KICKER ─────────────────────────────────────────────── */
html.page-services-dealer-appointment .kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1rem;
    }
/* ─── SECTION SPACING ────────────────────────────────────── */
html.page-services-dealer-appointment .section { padding-block: var(--space-2xl); }
html.page-services-dealer-appointment .section-lg { padding-block: var(--space-3xl); }
html.page-services-dealer-appointment .section-sm { padding-block: var(--space-xl); }
/* ─── ACCENT WORD ────────────────────────────────────────── */
html.page-services-dealer-appointment .accent-word { color: var(--brand-accent); }
/* ─────────────────────────────────────────────────────────── */
/* PAGE HERO                                                   */
/* ─────────────────────────────────────────────────────────── */
html.page-services-dealer-appointment .page-hero {
      position: relative;
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: calc(80px + var(--space-xl));
      padding-bottom: var(--space-2xl);
      overflow: hidden;
    }
html.page-services-dealer-appointment .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/da-hero-bg.jpg');
      background-size: cover;
      background-position: center 30%;
      transform: scale(1.04);
      animation: heroZoom__page-services-dealer-appointment 18s ease-out forwards;
      z-index: 0;
    }
@keyframes heroZoom__page-services-dealer-appointment {
      from { transform: scale(1.04); }
      to   { transform: scale(1.00); }
    }
html.page-services-dealer-appointment .page-hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(10,10,15,0.62) 0%, rgba(10,10,15,0.72) 55%, rgba(10,10,15,0.88) 100%);
      z-index: 1;
    }
html.page-services-dealer-appointment .page-hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
    }
html.page-services-dealer-appointment .page-hero-inner {
      max-width: 800px;
    }
html.page-services-dealer-appointment .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      margin-bottom: 1.25rem;
      border-left: 3px solid var(--brand-accent);
      padding-left: 0.75rem;
    }
html.page-services-dealer-appointment .page-hero h1 {
      color: #fff;
      text-shadow: 0 2px 24px rgba(5,5,10,0.5);
      margin-bottom: 1.75rem;
    }
html.page-services-dealer-appointment .page-hero-body {
      max-width: 64ch;
      margin-bottom: 2.25rem;
    }
html.page-services-dealer-appointment .page-hero-body p {
      color: rgba(255,255,255,0.82);
      font-size: clamp(1rem, 1.4vw, 1.0625rem);
      line-height: 1.72;
    }
html.page-services-dealer-appointment .page-hero-body p + p { margin-top: 1rem; }
html.page-services-dealer-appointment .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
    }
/* Stat row */
html.page-services-dealer-appointment .hero-stat-row {
      position: relative;
      z-index: 2;
      margin-top: var(--space-lg);
      border-top: 1px solid rgba(255,255,255,0.15);
    }
html.page-services-dealer-appointment .hero-stat-row .container {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
    }
html.page-services-dealer-appointment .hero-stat {
      flex: 1 1 160px;
      padding: 1.25rem 1.5rem;
      border-right: 1px solid rgba(255,255,255,0.12);
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
html.page-services-dealer-appointment .hero-stat:last-child { border-right: none; }
html.page-services-dealer-appointment .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.75rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-services-dealer-appointment .hero-stat-label {
      font-size: 0.75rem;
      font-weight: 500;
      color: rgba(255,255,255,0.6);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
/* Hero entrance animation */
html.page-services-dealer-appointment .page-hero-kicker,
html.page-services-dealer-appointment .page-hero h1,
html.page-services-dealer-appointment .page-hero-body,
html.page-services-dealer-appointment .page-hero-actions {
      opacity: 0;
      transform: translateY(22px);
      animation: heroFadeUp__page-services-dealer-appointment 0.8s var(--ease-out) forwards;
    }
html.page-services-dealer-appointment .page-hero h1 { animation-delay: 0.12s; }
html.page-services-dealer-appointment .page-hero-body { animation-delay: 0.24s; }
html.page-services-dealer-appointment .page-hero-actions { animation-delay: 0.36s; }
html.page-services-dealer-appointment .hero-stat-row { opacity: 0; animation: heroFadeUp__page-services-dealer-appointment 0.7s var(--ease-out) 0.52s forwards; }
@keyframes heroFadeUp__page-services-dealer-appointment {
      to { opacity: 1; transform: translateY(0); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-services-dealer-appointment .page-hero-kicker,
html.page-services-dealer-appointment .page-hero h1,
html.page-services-dealer-appointment .page-hero-body,
html.page-services-dealer-appointment .page-hero-actions,
html.page-services-dealer-appointment .hero-stat-row,
html.page-services-dealer-appointment .page-hero-bg { animation: none; opacity: 1; transform: none; }
}
/* ─────────────────────────────────────────────────────────── */
/* SERVICES MARQUEE                                            */
/* ─────────────────────────────────────────────────────────── */
html.page-services-dealer-appointment .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: 0.9rem;
      position: relative;
    }
html.page-services-dealer-appointment .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: marqueeScroll__page-services-dealer-appointment 38s linear infinite;
    }
html.page-services-dealer-appointment .marquee-track-inner {
      display: flex;
      gap: 0;
      white-space: nowrap;
    }
html.page-services-dealer-appointment .marquee-item {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding-inline: 1.5rem;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.72);
    }
html.page-services-dealer-appointment .marquee-dot {
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
@keyframes marqueeScroll__page-services-dealer-appointment {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-services-dealer-appointment .marquee-track { animation: none; }
}
/* ─────────────────────────────────────────────────────────── */
/* PROBLEM STATEMENT                                           */
/* ─────────────────────────────────────────────────────────── */
html.page-services-dealer-appointment #da-problem {
      background: var(--brand-surface);
      border-top: 1px solid var(--brand-border);
      border-bottom: 1px solid var(--brand-border);
    }
html.page-services-dealer-appointment .problem-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
      align-items: start;
    }
html.page-services-dealer-appointment .problem-heading-col { }
html.page-services-dealer-appointment .problem-body-col { }
html.page-services-dealer-appointment .problem-heading-col .kicker { margin-bottom: 1.25rem; }
html.page-services-dealer-appointment .problem-heading-col h2 { margin-bottom: 0; }
html.page-services-dealer-appointment .problem-body-col p { color: var(--brand-fg-muted); }
html.page-services-dealer-appointment .problem-body-col p + p { margin-top: 1.1rem; }
html.page-services-dealer-appointment .problem-callout {
      margin-top: var(--space-lg);
      padding: 1.5rem 1.75rem;
      background: var(--brand-bg);
      border-left: 4px solid var(--brand-accent);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }
html.page-services-dealer-appointment .problem-callout p {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--brand-fg);
      line-height: 1.45;
      margin: 0 !important;
    }
@media (max-width: 800px) {
html.page-services-dealer-appointment .problem-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}
/* ─────────────────────────────────────────────────────────── */
/* APPROACH — SPLIT BAND                                       */
/* ─────────────────────────────────────────────────────────── */
html.page-services-dealer-appointment #da-approach { background: var(--brand-bg); }
html.page-services-dealer-appointment .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
      align-items: stretch;
    }
html.page-services-dealer-appointment .split-image-col {
      border-radius: var(--radius-lg);
      overflow: hidden;
      min-height: 380px;
    }
html.page-services-dealer-appointment .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-services-dealer-appointment .split-content-col {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
html.page-services-dealer-appointment .split-content-col .kicker { margin-bottom: 1rem; }
html.page-services-dealer-appointment .split-content-col h2 { margin-bottom: 1.5rem; }
html.page-services-dealer-appointment .approach-steps { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }
html.page-services-dealer-appointment .approach-step {
      display: flex;
      gap: 1.125rem;
      align-items: flex-start;
    }
html.page-services-dealer-appointment .approach-step-num {
      flex-shrink: 0;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--brand-accent);
      color: #fff;
      font-family: var(--font-display);
      font-size: 0.875rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.1rem;
    }
html.page-services-dealer-appointment .approach-step-text strong {
      font-family: var(--font-display);
      font-size: 0.9375rem;
      font-weight: 600;
      display: block;
      margin-bottom: 0.25rem;
    }
html.page-services-dealer-appointment .approach-step-text p {
      font-size: 0.9rem;
      color: var(--brand-fg-muted);
      line-height: 1.6;
      margin: 0;
    }
html.page-services-dealer-appointment .split-content-col > p {
      color: var(--brand-fg-muted);
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: 0.9rem;
    }
@media (max-width: 860px) {
html.page-services-dealer-appointment .split-band { grid-template-columns: 1fr; }
html.page-services-dealer-appointment .split-image-col { min-height: 280px; }
}
/* ─────────────────────────────────────────────────────────── */
/* DELIVERABLES                                                */
/* ─────────────────────────────────────────────────────────── */
html.page-services-dealer-appointment #da-deliverables {
      background: var(--brand-surface);
      border-top: 1px solid var(--brand-border);
    }
html.page-services-dealer-appointment .deliverables-header {
      max-width: 640px;
      margin-bottom: var(--space-xl);
    }
html.page-services-dealer-appointment .deliverables-header .kicker { margin-bottom: 1rem; }
html.page-services-dealer-appointment .deliverables-header h2 { margin-bottom: 1rem; }
html.page-services-dealer-appointment .deliverables-header p { color: var(--brand-fg-muted); font-size: 1.0625rem; }
html.page-services-dealer-appointment .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
html.page-services-dealer-appointment .deliverable-card {
      background: var(--brand-bg);
      border: 1px solid var(--brand-border);
      border-radius: var(--radius-lg);
      padding: 2rem 1.75rem;
      position: relative;
      transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    }
html.page-services-dealer-appointment .deliverable-card:hover {
      box-shadow: 0 8px 32px rgba(0,0,0,0.08);
      border-color: var(--brand-accent);
      transform: translateY(-3px);
    }
html.page-services-dealer-appointment .deliverable-num {
      font-family: var(--font-display);
      font-size: 2.25rem;
      font-weight: 700;
      color: var(--brand-accent);
      opacity: 0.18;
      line-height: 1;
      margin-bottom: 1rem;
    }
html.page-services-dealer-appointment .deliverable-card h3 {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 600;
      line-height: 1.3;
      margin-bottom: 0.75rem;
      color: var(--brand-fg);
    }
html.page-services-dealer-appointment .deliverable-card p {
      font-size: 0.9rem;
      color: var(--brand-fg-muted);
      line-height: 1.65;
      margin: 0;
    }
html.page-services-dealer-appointment .deliverable-rule {
      position: absolute;
      top: 0; left: 1.75rem;
      width: 40px; height: 3px;
      background: var(--brand-accent);
      border-radius: 0 0 3px 3px;
    }
@media (max-width: 860px) {
html.page-services-dealer-appointment .deliverables-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
html.page-services-dealer-appointment .deliverables-grid { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────────────────── */
/* CTA BAND                                                    */
/* ─────────────────────────────────────────────────────────── */
html.page-services-dealer-appointment #da-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-services-dealer-appointment #da-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 100% at 60% 50%, rgba(205,62,45,0.14) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-services-dealer-appointment .cta-band-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: var(--space-md);
    }
html.page-services-dealer-appointment .cta-band-inner .kicker {
      color: rgba(255,255,255,0.55);
    }
html.page-services-dealer-appointment .cta-band-inner h2 {
      color: #fff;
      max-width: 680px;
    }
html.page-services-dealer-appointment .cta-band-inner p {
      color: rgba(255,255,255,0.7);
      max-width: 58ch;
      font-size: 1.0625rem;
      line-height: 1.7;
      margin-bottom: 0.5rem;
    }
html.page-services-dealer-appointment .cta-band-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
      justify-content: center;
    }
/* ─────────────────────────────────────────────────────────── */
/* CONTACT FORM                                                */
/* ─────────────────────────────────────────────────────────── */
html.page-services-dealer-appointment #da-contact {
      background: var(--brand-bg);
      border-top: 1px solid var(--brand-border);
    }
html.page-services-dealer-appointment .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: var(--space-xl);
      align-items: start;
    }
html.page-services-dealer-appointment .contact-info-col .kicker { margin-bottom: 1rem; }
html.page-services-dealer-appointment .contact-info-col h2 { margin-bottom: 1.25rem; }
html.page-services-dealer-appointment .contact-info-col p { color: var(--brand-fg-muted); margin-bottom: 1.5rem; }
html.page-services-dealer-appointment .contact-detail-list { display: flex; flex-direction: column; gap: 0.875rem; }
html.page-services-dealer-appointment .contact-detail {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }
html.page-services-dealer-appointment .contact-detail-icon {
      width: 36px; height: 36px; flex-shrink: 0;
      background: var(--brand-surface);
      border: 1px solid var(--brand-border);
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
    }
html.page-services-dealer-appointment .contact-detail-icon svg { width: 16px; height: 16px; }
html.page-services-dealer-appointment .contact-detail-text {
      font-size: 0.9rem;
      color: var(--brand-fg-muted);
      padding-top: 0.5rem;
    }
html.page-services-dealer-appointment .contact-detail-text a { color: var(--brand-accent); }
html.page-services-dealer-appointment .contact-detail-text a:hover { text-decoration: underline; }
html.page-services-dealer-appointment .contact-form-col { }
html.page-services-dealer-appointment .form-card {
      background: var(--brand-surface);
      border: 1px solid var(--brand-border);
      border-radius: var(--radius-lg);
      padding: 2.25rem 2rem;
    }
html.page-services-dealer-appointment .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
html.page-services-dealer-appointment .form-field {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 1rem;
    }
html.page-services-dealer-appointment .form-field:last-child { margin-bottom: 0; }
html.page-services-dealer-appointment .form-field label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--brand-fg);
      letter-spacing: 0.02em;
    }
html.page-services-dealer-appointment .form-field input,
html.page-services-dealer-appointment .form-field textarea {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--brand-fg);
      background: var(--brand-bg);
      border: 1.5px solid var(--brand-border);
      border-radius: var(--radius-sm);
      padding: 0.65rem 0.875rem;
      width: 100%;
      transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
      outline: none;
    }
html.page-services-dealer-appointment .form-field input:focus,
html.page-services-dealer-appointment .form-field textarea:focus {
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-services-dealer-appointment .form-field textarea { resize: vertical; min-height: 130px; }
html.page-services-dealer-appointment .form-submit-row {
      margin-top: 1.25rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
html.page-services-dealer-appointment .form-submit-row .btn { min-width: 180px; }
html.page-services-dealer-appointment .form-status {
      font-size: 0.875rem;
      font-weight: 500;
    }
html.page-services-dealer-appointment .form-status.success { color: #2a7a3b; }
html.page-services-dealer-appointment .form-status.error { color: var(--brand-accent); }
@media (max-width: 860px) {
html.page-services-dealer-appointment .contact-grid { grid-template-columns: 1fr; }
html.page-services-dealer-appointment .form-row { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────────────────── */
/* SCROLL REVEAL                                               */
/* ─────────────────────────────────────────────────────────── */
html.page-services-dealer-appointment .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    }
html.page-services-dealer-appointment .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-services-dealer-appointment .reveal-delay-1 { transition-delay: 0.08s; }
html.page-services-dealer-appointment .reveal-delay-2 { transition-delay: 0.18s; }
html.page-services-dealer-appointment .reveal-delay-3 { transition-delay: 0.28s; }
html.page-services-dealer-appointment .reveal-delay-4 { transition-delay: 0.38s; }
html.page-services-dealer-appointment .reveal-delay-5 { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
html.page-services-dealer-appointment .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
}
/* ─────────────────────────────────────────────────────────── */
/* BREADCRUMB / SERVICE NAV                                   */
/* ─────────────────────────────────────────────────────────── */
html.page-services-dealer-appointment .service-breadcrumb {
      background: var(--brand-bg);
      border-bottom: 1px solid var(--brand-border);
      padding-block: 0.875rem;
    }
html.page-services-dealer-appointment .breadcrumb-inner {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
html.page-services-dealer-appointment .breadcrumb-inner a,
html.page-services-dealer-appointment .breadcrumb-inner span {
      font-size: 0.8125rem;
      color: var(--brand-fg-subtle);
      transition: color 0.2s;
    }
html.page-services-dealer-appointment .breadcrumb-inner a:hover { color: var(--brand-accent); }
html.page-services-dealer-appointment .breadcrumb-inner .sep { color: var(--brand-border); }
html.page-services-dealer-appointment .breadcrumb-inner .current { color: var(--brand-fg); font-weight: 500; }
/* ─────────────────────────────────────────────────────────── */
/* BACKGROUND ENV LAYER                                        */
/* ─────────────────────────────────────────────────────────── */
html.page-services-dealer-appointment .env-grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.022;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 256px 256px;
    }
@media (prefers-reduced-motion: reduce) {
html.page-services-dealer-appointment .env-grain { display: none; }
}
html.page-services-dealer-appointment .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-services-dealer-appointment .faq-item { border-bottom: 1px solid var(--brand-border); padding-block: 1.5rem; }
html.page-services-dealer-appointment .faq-item:first-child { border-top: 1px solid var(--brand-border); }
html.page-services-dealer-appointment .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-services-dealer-appointment .faq-a { font-size: 0.9375rem; color: var(--brand-fg-muted); line-height: 1.7; }
html.page-services-dealer-appointment body.paused *,
html.page-services-dealer-appointment body.paused *::before,
html.page-services-dealer-appointment body.paused *::after {
      animation-play-state: paused !important;
    }


/* ==================== services-distributor-identification.html (scope: .page-services-distributor-identification) ==================== */
/* ─── BRAND TOKENS ─────────────────────────────────────────────── */
html.page-services-distributor-identification {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* extended palette */
      --canvas: #f9f8f7;
      --canvas-alt: #f2f0ee;
      --panel: #ffffff;
      --panel-raised: #f6f5f3;
      --border: rgba(17,17,17,.10);
      --border-strong: rgba(17,17,17,.18);
      --text-secondary: #5a5855;
      --text-tertiary: #8a8784;
      --accent-muted: rgba(205,62,45,.10);
      --accent-muted-strong: rgba(205,62,45,.18);
      --shadow-sm: 0 1px 4px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.04);
      --shadow-md: 0 4px 16px rgba(17,17,17,.08), 0 1px 4px rgba(17,17,17,.04);
      --shadow-lg: 0 12px 40px rgba(17,17,17,.10), 0 4px 12px rgba(17,17,17,.06);
      --ease-out: cubic-bezier(.22,.68,0,1.2);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --radius: 6px;
      --radius-lg: 12px;
      --container: 1200px;
      --header-h: 72px;
    }
/* ─── RESET & BASE ─────────────────────────────────────────────── */
html.page-services-distributor-identification *,
html.page-services-distributor-identification *::before,
html.page-services-distributor-identification *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-services-distributor-identification { overflow-x: clip; scroll-behavior: smooth; }
html.page-services-distributor-identification body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-services-distributor-identification img,
html.page-services-distributor-identification svg,
html.page-services-distributor-identification video { max-width: 100%; height: auto; display: block; }
html.page-services-distributor-identification a { color: inherit; text-decoration: none; }
html.page-services-distributor-identification ul,
html.page-services-distributor-identification ol { list-style: none; }
html.page-services-distributor-identification button { cursor: pointer; border: none; background: none; font: inherit; }
/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
html.page-services-distributor-identification .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
html.page-services-distributor-identification .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.018em;
    }
html.page-services-distributor-identification .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -.012em;
    }
html.page-services-distributor-identification .section-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brand-accent);
      display: inline-block;
      margin-bottom: .75rem;
    }
html.page-services-distributor-identification .section-intro {
      font-size: 1.08rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.7;
    }
html.page-services-distributor-identification .accent-word { color: var(--brand-accent); }
/* ─── LAYOUT UTILITIES ─────────────────────────────────────────── */
html.page-services-distributor-identification .container {
      width: min(100%, var(--container));
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
html.page-services-distributor-identification .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-services-distributor-identification .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── SKIP LINK ─────────────────────────────────────────────────── */
html.page-services-distributor-identification .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: .5rem 1rem; border-radius: var(--radius);
      font-weight: 600; font-size: .875rem;
      transition: top .2s;
    }
html.page-services-distributor-identification .skip-link:focus { top: 1rem; }
/* ─── BUTTONS ───────────────────────────────────────────────────── */
html.page-services-distributor-identification .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      padding: .75rem 1.6rem;
      border-radius: var(--radius);
      transition: background .22s var(--ease-in-out), color .22s, border-color .22s, box-shadow .22s, transform .18s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-services-distributor-identification .btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
html.page-services-distributor-identification .btn:active { transform: scale(.97); }
@media (pointer: coarse) {
html.page-services-distributor-identification .btn { min-height: 44px; }
}
html.page-services-distributor-identification .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(205,62,45,.28);
    }
html.page-services-distributor-identification .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,.38);
      transform: translateY(-1px);
    }
html.page-services-distributor-identification .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-services-distributor-identification .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: var(--accent-muted);
    }
html.page-services-distributor-identification .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
    }
html.page-services-distributor-identification .btn-ghost-white:hover {
      border-color: #fff;
      background: rgba(255,255,255,.12);
    }
/* ─── HERO ──────────────────────────────────────────────────────── */
html.page-services-distributor-identification .page-hero {
      position: relative;
      min-height: calc(100svh - var(--header-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: calc(var(--header-h) + 3rem);
      padding-bottom: 5rem;
      background: #1a1714;
    }
html.page-services-distributor-identification .page-hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image: url('../assets/di-hero-bg.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      transition: transform 12s ease-out;
    }
html.page-services-distributor-identification .page-hero.loaded .page-hero-bg { transform: scale(1); }
html.page-services-distributor-identification .page-hero-scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(110deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 50%, rgba(15,12,10,.30) 100%),
        linear-gradient(to bottom, rgba(15,12,10,.15) 0%, rgba(15,12,10,.50) 100%);
    }
html.page-services-distributor-identification .page-hero-content {
      position: relative; z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-services-distributor-identification .page-hero-inner { max-width: 680px; }
html.page-services-distributor-identification .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      margin-bottom: 1.1rem;
    }
html.page-services-distributor-identification .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.022em;
      color: #fff;
      text-shadow: 0 2px 24px rgba(10,8,6,.5);
      margin-bottom: 1.5rem;
    }
html.page-services-distributor-identification .page-hero-body {
      display: flex;
      flex-direction: column;
      gap: .85rem;
      margin-bottom: 2rem;
      max-width: 60ch;
    }
html.page-services-distributor-identification .page-hero-body p {
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(255,255,255,.78);
      text-shadow: 0 1px 6px rgba(10,8,6,.45);
    }
html.page-services-distributor-identification .page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* hero stat row */
html.page-services-distributor-identification .hero-stat-row {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: auto;
      padding-top: 1.75rem;
    }
html.page-services-distributor-identification .hero-stat-row .container { display: flex; flex-wrap: wrap; gap: 2rem; }
html.page-services-distributor-identification .hero-stat { display: flex; flex-direction: column; gap: .25rem; }
html.page-services-distributor-identification .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-services-distributor-identification .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
/* ─── MARQUEE ───────────────────────────────────────────────────── */
html.page-services-distributor-identification .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: .9rem;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html.page-services-distributor-identification .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll__page-services-distributor-identification 32s linear infinite;
      gap: 0;
    }
html.page-services-distributor-identification .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
html.page-services-distributor-identification .marquee-item {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
html.page-services-distributor-identification .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: .7;
    }
@keyframes marquee-scroll__page-services-distributor-identification {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-services-distributor-identification .marquee-track { animation: none; }
}
/* ─── PROBLEM SECTION ───────────────────────────────────────────── */
html.page-services-distributor-identification #di-problem {
      background: var(--canvas);
      border-bottom: 1px solid var(--border);
    }
html.page-services-distributor-identification .problem-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      max-width: 780px;
    }
html.page-services-distributor-identification .problem-heading-group { display: flex; flex-direction: column; gap: .5rem; }
html.page-services-distributor-identification .problem-body { display: flex; flex-direction: column; gap: 1.1rem; }
html.page-services-distributor-identification .problem-body p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-services-distributor-identification .problem-body p:first-child {
      font-size: 1.08rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
/* ─── APPROACH SECTION ──────────────────────────────────────────── */
html.page-services-distributor-identification #di-approach { background: var(--brand-bg); }
html.page-services-distributor-identification .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-services-distributor-identification .split-image-col {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      min-height: 320px;
      align-self: stretch;
    }
html.page-services-distributor-identification .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-services-distributor-identification .split-image-accent {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      background: var(--brand-accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .4rem .9rem;
      border-radius: 4px;
    }
html.page-services-distributor-identification .split-content-col { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
html.page-services-distributor-identification .approach-body { display: flex; flex-direction: column; gap: 1rem; }
html.page-services-distributor-identification .approach-body p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
html.page-services-distributor-identification .approach-body p:first-child { color: var(--brand-fg); font-weight: 500; }
html.page-services-distributor-identification .approach-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html.page-services-distributor-identification .approach-tag {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      padding: .35rem .85rem;
      border-radius: 100px;
    }
@media (max-width: 860px) {
html.page-services-distributor-identification .split-band { grid-template-columns: 1fr; gap: 2rem; }
html.page-services-distributor-identification .split-image-col { min-height: 240px; }
}
/* ─── DELIVERABLES ──────────────────────────────────────────────── */
html.page-services-distributor-identification #di-deliverables { background: var(--canvas); }
html.page-services-distributor-identification .deliverables-header { max-width: 640px; margin-bottom: 3rem; }
html.page-services-distributor-identification .deliverables-header p {
      font-size: 1.04rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: .75rem;
    }
html.page-services-distributor-identification .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-services-distributor-identification .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .25s var(--ease-in-out), border-color .25s, transform .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
html.page-services-distributor-identification .deliverable-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease-out);
      border-radius: 0 0 2px 2px;
    }
html.page-services-distributor-identification .deliverable-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-accent);
      transform: translateY(-2px);
    }
html.page-services-distributor-identification .deliverable-card:hover::before { transform: scaleX(1); }
html.page-services-distributor-identification .deliverable-number {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--brand-accent);
      text-transform: uppercase;
      margin-bottom: .6rem;
    }
html.page-services-distributor-identification .deliverable-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-fg);
      margin-bottom: .6rem;
      line-height: 1.3;
    }
html.page-services-distributor-identification .deliverable-text {
      font-size: .9rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
/* ─── CTA BAND ──────────────────────────────────────────────────── */
html.page-services-distributor-identification #di-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-services-distributor-identification #di-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 120% at 80% 50%, rgba(205,62,45,.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-services-distributor-identification .cta-band-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative; z-index: 1;
      max-width: 720px;
    }
html.page-services-distributor-identification .cta-band-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -.018em;
    }
html.page-services-distributor-identification .cta-band-inner p {
      font-size: 1.02rem;
      line-height: 1.72;
      color: rgba(255,255,255,.65);
      max-width: 60ch;
    }
/* ─── CONTACT FORM ──────────────────────────────────────────────── */
html.page-services-distributor-identification #contact-form-section { background: var(--canvas-alt); border-top: 1px solid var(--border); }
html.page-services-distributor-identification .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: start;
    }
html.page-services-distributor-identification .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
html.page-services-distributor-identification .contact-info h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.015em;
    }
html.page-services-distributor-identification .contact-info p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; }
html.page-services-distributor-identification .contact-detail {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .9rem;
      color: var(--brand-fg);
      font-weight: 500;
    }
html.page-services-distributor-identification .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--accent-muted);
      border: 1px solid var(--accent-muted-strong);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
html.page-services-distributor-identification .contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--brand-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.page-services-distributor-identification .contact-form-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-services-distributor-identification .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.page-services-distributor-identification .form-group { display: flex; flex-direction: column; gap: .4rem; }
html.page-services-distributor-identification .form-group.full { grid-column: 1 / -1; }
html.page-services-distributor-identification .form-group label {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-fg);
      text-transform: uppercase;
    }
html.page-services-distributor-identification .form-group input,
html.page-services-distributor-identification .form-group textarea {
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: .7rem 1rem;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
      resize: vertical;
    }
html.page-services-distributor-identification .form-group input:focus,
html.page-services-distributor-identification .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,.12);
    }
html.page-services-distributor-identification .form-group textarea { min-height: 110px; }
html.page-services-distributor-identification .form-submit { margin-top: 1.25rem; }
html.page-services-distributor-identification .form-status {
      margin-top: 1rem;
      font-size: .88rem;
      font-weight: 500;
      border-radius: var(--radius);
      padding: .75rem 1rem;
      display: none;
    }
html.page-services-distributor-identification .form-status.success { background: #edfaf2; color: #1a6b3c; border: 1px solid #a3dfbe; display: block; }
html.page-services-distributor-identification .form-status.error { background: #fef2f1; color: #8b1e14; border: 1px solid #f5bfba; display: block; }
@media (max-width: 860px) {
html.page-services-distributor-identification .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
html.page-services-distributor-identification .form-row { grid-template-columns: 1fr; }
}
/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
html.page-services-distributor-identification @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s var(--ease-in-out), transform .6s var(--ease-out);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 { transition-delay: .08s; }
      .reveal-delay-2 { transition-delay: .16s; }
      .reveal-delay-3 { transition-delay: .24s; }
      .reveal-delay-4 { transition-delay: .32s; }
      .reveal-delay-5 { transition-delay: .40s; }
      .reveal.in.reveal-delay-1 { transition-delay: .08s; }
      .reveal.in.reveal-delay-2 { transition-delay: .16s; }
      .reveal.in.reveal-delay-3 { transition-delay: .24s; }
      .reveal.in.reveal-delay-4 { transition-delay: .32s; }
      .reveal.in.reveal-delay-5 { transition-delay: .40s; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-services-distributor-identification .reveal { opacity: 1; transform: none; transition: none; }
}
/* ─── DIVIDER LINE ───────────────────────────────────────────────── */
html.page-services-distributor-identification .section-divider {
      width: 100%;
      height: 1px;
      background: var(--border);
    }
/* ─── BACKGROUND ENVIRONMENT LAYER ─────────────────────────────── */
html.page-services-distributor-identification body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(205,62,45,.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(205,62,45,.025) 0%, transparent 70%);
      animation: env-pulse__page-services-distributor-identification 60s ease-in-out infinite;
    }
@keyframes env-pulse__page-services-distributor-identification {
      0%, 100% { opacity: .7; }
      50% { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-services-distributor-identification body::before { animation: none; }
}
html.page-services-distributor-identification main,
html.page-services-distributor-identification section,
html.page-services-distributor-identification .container { position: relative; z-index: 1; }
html.page-services-distributor-identification .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-services-distributor-identification .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-services-distributor-identification .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-services-distributor-identification .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-services-distributor-identification .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== services-distributor-performance-management.html (scope: .page-services-distributor-performance-management) ==================== */
/* ============================================================
       BRAND TOKENS & RESET
    ============================================================ */
html.page-services-distributor-performance-management {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --canvas: #f7f6f5;
      --panel: #ffffff;
      --panel-alt: #f2f1ef;
      --panel-dark: #111111;
      --text-primary: #111111;
      --text-secondary: #555555;
      --text-tertiary: #888888;
      --border: rgba(17,17,17,0.10);
      --border-strong: rgba(17,17,17,0.18);

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

      --space-xs: 0.5rem;
      --space-sm: 1rem;
      --space-md: 1.5rem;
      --space-lg: 2.5rem;
      --space-xl: 4rem;
      --space-2xl: 6rem;
      --space-3xl: 8rem;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;
      --radius-xl: 24px;
    }
html.page-services-distributor-performance-management *,
html.page-services-distributor-performance-management *::before,
html.page-services-distributor-performance-management *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
html.page-services-distributor-performance-management {
      scroll-behavior: smooth;
      overflow-x: clip;
      font-size: 16px;
    }
html.page-services-distributor-performance-management body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      opacity: 0;
      animation: pageIn__page-services-distributor-performance-management 0.5s var(--ease-out) 0.05s forwards;
    }
@keyframes pageIn__page-services-distributor-performance-management {
      to { opacity: 1; }
    }
html.page-services-distributor-performance-management img,
html.page-services-distributor-performance-management svg,
html.page-services-distributor-performance-management video {
      max-width: 100%;
      height: auto;
    }
html.page-services-distributor-performance-management a {
      color: inherit;
      text-decoration: none;
    }
html.page-services-distributor-performance-management ul,
html.page-services-distributor-performance-management ol {
      list-style: none;
    }
/* ============================================================
       SKIP LINK
    ============================================================ */
html.page-services-distributor-performance-management .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      background: var(--brand-accent);
      color: #fff;
      padding: 0.75rem 1.25rem;
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.875rem;
      z-index: 10000;
      transition: top 0.2s;
    }
html.page-services-distributor-performance-management .skip-link:focus {
      top: 1rem;
    }
/* ============================================================
       CONTAINER
    ============================================================ */
html.page-services-distributor-performance-management .container {
      width: 100%;
      max-width: 1200px;
      margin-inline: auto;
      padding-inline: 1.5rem;
    }
/* ============================================================
       TYPOGRAPHY SCALE
    ============================================================ */
html.page-services-distributor-performance-management .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.25rem, 4.5vw, 3.75rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.03em;
    }
html.page-services-distributor-performance-management .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3.2vw, 2.75rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.025em;
    }
html.page-services-distributor-performance-management .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.375rem, 2.2vw, 1.875rem);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }
html.page-services-distributor-performance-management .display-sm {
      font-family: var(--font-display);
      font-size: clamp(1.125rem, 1.6vw, 1.375rem);
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -0.015em;
    }
html.page-services-distributor-performance-management .body-lg {
      font-size: clamp(1rem, 1.2vw, 1.125rem);
      line-height: 1.7;
    }
html.page-services-distributor-performance-management .kicker {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-accent);
    }
html.page-services-distributor-performance-management .accent-word {
      color: var(--brand-accent);
    }
/* ============================================================
       BUTTONS
    ============================================================ */
html.page-services-distributor-performance-management .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.875rem 1.75rem;
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      cursor: pointer;
      border: none;
      transition: background 0.2s var(--ease-out),
                  color 0.2s var(--ease-out),
                  transform 0.2s var(--ease-out),
                  box-shadow 0.2s var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
    }
html.page-services-distributor-performance-management .btn:hover {
      transform: translateY(-1px);
    }
html.page-services-distributor-performance-management .btn:active {
      transform: translateY(0);
    }
html.page-services-distributor-performance-management .btn:focus-visible {
      outline: 2px solid var(--brand-accent);
      outline-offset: 3px;
    }
html.page-services-distributor-performance-management .btn-primary {
      background: var(--brand-accent);
      color: #ffffff;
      box-shadow: 0 2px 12px rgba(205,62,45,0.25);
    }
html.page-services-distributor-performance-management .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,0.35);
    }
html.page-services-distributor-performance-management .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border: 1.5px solid var(--border-strong);
    }
html.page-services-distributor-performance-management .btn-ghost:hover {
      background: var(--panel-alt);
      border-color: var(--brand-fg);
    }
html.page-services-distributor-performance-management .btn-ghost-white {
      background: transparent;
      color: #ffffff;
      border: 1.5px solid rgba(255,255,255,0.45);
    }
html.page-services-distributor-performance-management .btn-ghost-white:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.75);
    }
@media (pointer: coarse) {
html.page-services-distributor-performance-management .btn { min-height: 44px; }
}
/* ============================================================
       HERO — PAGE-HERO SKELETON (MANDATORY STRUCTURE)
    ============================================================ */
html.page-services-distributor-performance-management .page-hero {
      position: relative;
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-top: 120px;
      padding-bottom: 0;
      overflow: hidden;
      background: #0f0e0d;
    }
html.page-services-distributor-performance-management .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/dpm-hero-network.jpg');
      background-size: cover;
      background-position: center 30%;
      transform: scale(1.03);
      animation: heroBgDrift__page-services-distributor-performance-management 18s ease-in-out infinite alternate;
    }
@keyframes heroBgDrift__page-services-distributor-performance-management {
      from { transform: scale(1.03) translateY(0); }
      to   { transform: scale(1.06) translateY(-12px); }
    }
html.page-services-distributor-performance-management .page-hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          170deg,
          rgba(10,9,8,0.55) 0%,
          rgba(10,9,8,0.35) 40%,
          rgba(10,9,8,0.72) 100%
        );
    }
html.page-services-distributor-performance-management .page-hero-content {
      position: relative;
      z-index: 2;
      padding-block: var(--space-2xl) var(--space-xl);
      display: flex;
      align-items: flex-end;
    }
html.page-services-distributor-performance-management .page-hero-inner {
      max-width: 780px;
    }
html.page-services-distributor-performance-management .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: var(--space-sm);
      opacity: 0;
      transform: translateY(14px);
      animation: heroItemIn__page-services-distributor-performance-management 0.7s var(--ease-out) 0.3s forwards;
    }
html.page-services-distributor-performance-management .page-hero-inner h1 {
      color: #ffffff;
      text-shadow: 0 2px 20px rgba(0,0,0,0.4);
      opacity: 0;
      transform: translateY(18px);
      animation: heroItemIn__page-services-distributor-performance-management 0.7s var(--ease-out) 0.45s forwards;
    }
html.page-services-distributor-performance-management .page-hero-body {
      margin-top: var(--space-md);
      opacity: 0;
      transform: translateY(14px);
      animation: heroItemIn__page-services-distributor-performance-management 0.7s var(--ease-out) 0.6s forwards;
    }
html.page-services-distributor-performance-management .page-hero-body p {
      max-width: 64ch;
      color: rgba(255,255,255,0.82);
      font-size: 1.0625rem;
      line-height: 1.7;
      text-shadow: 0 1px 8px rgba(0,0,0,0.5);
      margin-bottom: 0.85rem;
    }
html.page-services-distributor-performance-management .page-hero-body p:last-child {
      margin-bottom: 0;
    }
html.page-services-distributor-performance-management .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
      margin-top: var(--space-lg);
      opacity: 0;
      transform: translateY(12px);
      animation: heroItemIn__page-services-distributor-performance-management 0.7s var(--ease-out) 0.75s forwards;
    }
@keyframes heroItemIn__page-services-distributor-performance-management {
      to { opacity: 1; transform: translateY(0); }
    }
/* Hero stat row */
html.page-services-distributor-performance-management .hero-stat-row {
      position: relative;
      z-index: 2;
      background: rgba(10,9,8,0.72);
      backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-block: 1.25rem;
      opacity: 0;
      animation: heroItemIn__page-services-distributor-performance-management 0.7s var(--ease-out) 0.95s forwards;
    }
html.page-services-distributor-performance-management .hero-stat-row .container {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 2rem;
      align-items: center;
    }
html.page-services-distributor-performance-management .hero-stat {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
html.page-services-distributor-performance-management .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.375rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1;
    }
html.page-services-distributor-performance-management .hero-stat-label {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.52);
    }
@media (max-width: 600px) {
html.page-services-distributor-performance-management .hero-stat-row .container {
        gap: 0.75rem 1.5rem;
      }
html.page-services-distributor-performance-management .hero-stat-value {
        font-size: 1.15rem;
      }
}
/* ============================================================
       INDUSTRIES MARQUEE
    ============================================================ */
html.page-services-distributor-performance-management .marquee-band {
      background: var(--brand-fg);
      padding-block: 0.9rem;
      overflow: hidden;
      position: relative;
    }
html.page-services-distributor-performance-management .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: marqueeScroll__page-services-distributor-performance-management 38s linear infinite;
    }
@media (prefers-reduced-motion: reduce) {
html.page-services-distributor-performance-management .marquee-track {
        animation: none;
      }
}
@keyframes marqueeScroll__page-services-distributor-performance-management {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
html.page-services-distributor-performance-management .marquee-item {
      display: inline-flex;
      align-items: center;
      gap: 1.25rem;
      padding-inline: 2rem;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      white-space: nowrap;
    }
html.page-services-distributor-performance-management .marquee-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
/* ============================================================
       SECTION COMMON
    ============================================================ */
html.page-services-distributor-performance-management .section-pad {
      padding-block: var(--space-2xl);
    }
html.page-services-distributor-performance-management .section-pad-lg {
      padding-block: var(--space-3xl);
    }
html.page-services-distributor-performance-management .section-label {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1rem;
    }
html.page-services-distributor-performance-management .section-label::before {
      content: '';
      display: block;
      width: 18px;
      height: 2px;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
/* Reveal on scroll */
html.page-services-distributor-performance-management .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    }
html.page-services-distributor-performance-management .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-services-distributor-performance-management .reveal-delay-1 { transition-delay: 0.08s; }
html.page-services-distributor-performance-management .reveal-delay-2 { transition-delay: 0.16s; }
html.page-services-distributor-performance-management .reveal-delay-3 { transition-delay: 0.24s; }
html.page-services-distributor-performance-management .reveal-delay-4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
html.page-services-distributor-performance-management .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
}
/* ============================================================
       PROBLEM STATEMENT
    ============================================================ */
html.page-services-distributor-performance-management #dpm-problem {
      background: var(--canvas);
      position: relative;
    }
html.page-services-distributor-performance-management #dpm-problem::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--brand-accent) 0%, transparent 60%);
    }
html.page-services-distributor-performance-management .problem-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }
html.page-services-distributor-performance-management .problem-heading-col {
      position: sticky;
      top: 100px;
    }
html.page-services-distributor-performance-management .problem-body-col {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }
html.page-services-distributor-performance-management .problem-body-col p {
      font-size: 1.0625rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-services-distributor-performance-management .problem-body-col p:first-child {
      color: var(--text-primary);
      font-weight: 500;
    }
@media (max-width: 800px) {
html.page-services-distributor-performance-management .problem-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
html.page-services-distributor-performance-management .problem-heading-col {
        position: static;
      }
}
/* ============================================================
       APPROACH — SPLIT BAND
    ============================================================ */
html.page-services-distributor-performance-management #dpm-approach {
      background: var(--brand-bg);
    }
html.page-services-distributor-performance-management .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: stretch;
    }
html.page-services-distributor-performance-management .split-image-col {
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
      min-height: 400px;
    }
html.page-services-distributor-performance-management .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.8s var(--ease-out);
    }
html.page-services-distributor-performance-management .split-image-col:hover img {
      transform: scale(1.03);
    }
html.page-services-distributor-performance-management .split-content-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1.25rem;
    }
html.page-services-distributor-performance-management .split-content-col p {
      font-size: 1.0625rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
html.page-services-distributor-performance-management .split-content-col p:first-of-type {
      color: var(--text-primary);
    }
@media (max-width: 900px) {
html.page-services-distributor-performance-management .split-band {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
html.page-services-distributor-performance-management .split-image-col {
        min-height: 280px;
      }
}
/* ============================================================
       PROCESS STEPS
    ============================================================ */
html.page-services-distributor-performance-management .process-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 1.5rem;
    }
html.page-services-distributor-performance-management .process-step {
      display: flex;
      gap: 1.25rem;
      align-items: flex-start;
      padding-block: 1.25rem;
      border-top: 1px solid var(--border);
    }
html.page-services-distributor-performance-management .process-step:last-child {
      border-bottom: 1px solid var(--border);
    }
html.page-services-distributor-performance-management .step-num {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--brand-accent);
      color: #fff;
      font-family: var(--font-display);
      font-size: 0.8rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }
html.page-services-distributor-performance-management .step-content strong {
      display: block;
      font-family: var(--font-display);
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }
html.page-services-distributor-performance-management .step-content p {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }
/* ============================================================
       DELIVERABLES
    ============================================================ */
html.page-services-distributor-performance-management #dpm-deliverables {
      background: var(--canvas);
    }
html.page-services-distributor-performance-management .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5px;
      background: var(--border);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-top: 2.5rem;
    }
html.page-services-distributor-performance-management .deliverable-card {
      background: var(--panel);
      padding: 2.25rem 2rem;
      position: relative;
      transition: background 0.25s var(--ease-out);
    }
html.page-services-distributor-performance-management .deliverable-card:hover {
      background: #fdf9f8;
    }
html.page-services-distributor-performance-management .deliverable-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
html.page-services-distributor-performance-management .deliverable-icon svg {
      width: 24px;
      height: 24px;
      stroke: var(--brand-accent);
    }
html.page-services-distributor-performance-management .deliverable-card h3 {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
      margin-bottom: 0.75rem;
      letter-spacing: -0.01em;
    }
html.page-services-distributor-performance-management .deliverable-card p {
      font-size: 0.9375rem;
      line-height: 1.65;
      color: var(--text-secondary);
    }
@media (max-width: 700px) {
html.page-services-distributor-performance-management .deliverables-grid {
        grid-template-columns: 1fr;
      }
}
/* ============================================================
       CTA BAND
    ============================================================ */
html.page-services-distributor-performance-management #dpm-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-services-distributor-performance-management #dpm-cta::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(205,62,45,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-services-distributor-performance-management .cta-inner {
      max-width: 680px;
      margin-inline: auto;
      text-align: center;
    }
html.page-services-distributor-performance-management .cta-inner h2 {
      color: #ffffff;
      margin-bottom: 1.25rem;
    }
html.page-services-distributor-performance-management .cta-inner p {
      color: rgba(255,255,255,0.72);
      font-size: 1.0625rem;
      line-height: 1.7;
      max-width: 58ch;
      margin-inline: auto;
      margin-bottom: 2rem;
    }
/* ============================================================
       CONTACT FORM
    ============================================================ */
html.page-services-distributor-performance-management #contact-form-section {
      background: var(--brand-bg);
    }
html.page-services-distributor-performance-management .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 5rem;
      align-items: start;
    }
html.page-services-distributor-performance-management .contact-info h2 {
      margin-bottom: 1.25rem;
    }
html.page-services-distributor-performance-management .contact-info p {
      font-size: 1.0625rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-bottom: 2rem;
    }
html.page-services-distributor-performance-management .contact-detail {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
html.page-services-distributor-performance-management .contact-detail-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.9375rem;
      color: var(--text-secondary);
    }
html.page-services-distributor-performance-management .contact-detail-item svg {
      width: 16px;
      height: 16px;
      stroke: var(--brand-accent);
      flex-shrink: 0;
    }
html.page-services-distributor-performance-management .contact-detail-item a {
      color: var(--brand-accent);
      transition: color 0.18s;
    }
html.page-services-distributor-performance-management .contact-detail-item a:hover {
      color: var(--brand-accent-2);
    }
html.page-services-distributor-performance-management .form-card {
      background: var(--panel-alt);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 2.5rem;
    }
html.page-services-distributor-performance-management .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
html.page-services-distributor-performance-management .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
      margin-bottom: 1rem;
    }
html.page-services-distributor-performance-management .form-group:last-of-type {
      margin-bottom: 0;
    }
html.page-services-distributor-performance-management .form-group label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: 0.01em;
    }
html.page-services-distributor-performance-management .form-group input,
html.page-services-distributor-performance-management .form-group textarea {
      background: var(--panel);
      border: 1.5px solid var(--border-strong);
      border-radius: var(--radius-md);
      padding: 0.75rem 1rem;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--text-primary);
      transition: border-color 0.18s, box-shadow 0.18s;
      width: 100%;
    }
html.page-services-distributor-performance-management .form-group input::placeholder,
html.page-services-distributor-performance-management .form-group textarea::placeholder {
      color: var(--text-tertiary);
    }
html.page-services-distributor-performance-management .form-group input:focus,
html.page-services-distributor-performance-management .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-services-distributor-performance-management .form-group textarea {
      resize: vertical;
      min-height: 120px;
    }
html.page-services-distributor-performance-management .form-submit-row {
      margin-top: 1.25rem;
    }
html.page-services-distributor-performance-management .form-submit-row .btn {
      width: 100%;
      padding-block: 1rem;
    }
html.page-services-distributor-performance-management .form-status {
      margin-top: 0.875rem;
      font-size: 0.9rem;
      border-radius: var(--radius-md);
      padding: 0.75rem 1rem;
      display: none;
    }
html.page-services-distributor-performance-management .form-status.success {
      display: block;
      background: #f0fdf4;
      color: #166534;
      border: 1px solid #bbf7d0;
    }
html.page-services-distributor-performance-management .form-status.error {
      display: block;
      background: #fef2f2;
      color: #991b1b;
      border: 1px solid #fecaca;
    }
@media (max-width: 900px) {
html.page-services-distributor-performance-management .contact-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
}
@media (max-width: 600px) {
html.page-services-distributor-performance-management .form-row {
        grid-template-columns: 1fr;
      }
html.page-services-distributor-performance-management .form-card {
        padding: 1.5rem;
      }
}
/* ============================================================
       BACKGROUND ENVIRONMENT
    ============================================================ */
html.page-services-distributor-performance-management .bg-grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1000;
      opacity: 0.022;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 180px 180px;
    }
/* ============================================================
       RESPONSIVE ADJUSTMENTS
    ============================================================ */
html.page-services-distributor-performance-management @media (max-width: 768px) {
      .page-hero {
        min-height: 85vh;
      }
      .section-pad {
        padding-block: 3.5rem;
      }
      .section-pad-lg {
        padding-block: 4.5rem;
      }
    }
@media (max-height: 560px) {
html.page-services-distributor-performance-management .hero-stat-row { display: none; }
}
html.page-services-distributor-performance-management .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; margin-inline: auto; }
html.page-services-distributor-performance-management .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-services-distributor-performance-management .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-services-distributor-performance-management .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.6rem; }
html.page-services-distributor-performance-management .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }
html.page-services-distributor-performance-management body.paused *,
html.page-services-distributor-performance-management body.paused *::before,
html.page-services-distributor-performance-management body.paused *::after {
      animation-play-state: paused !important;
    }


/* ==================== services-partner-due-diligence.html (scope: .page-services-partner-due-diligence) ==================== */
/* ── Brand tokens ── */
html.page-services-partner-due-diligence {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --canvas: #f8f7f5;
      --panel: #ffffff;
      --panel-alt: #f2f1ef;
      --border: #e2e0dc;
      --text-primary: #111111;
      --text-secondary: #555250;
      --text-tertiary: #888480;

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

      --header-h: 72px;
      --radius: 6px;
      --radius-lg: 12px;
    }
/* ── Reset ── */
html.page-services-partner-due-diligence *,
html.page-services-partner-due-diligence *::before,
html.page-services-partner-due-diligence *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-services-partner-due-diligence img,
html.page-services-partner-due-diligence svg,
html.page-services-partner-due-diligence video { max-width: 100%; height: auto; display: block; }
html.page-services-partner-due-diligence { scroll-behavior: smooth; overflow-x: clip; }
html.page-services-partner-due-diligence body {
      overflow-x: clip;
      background: var(--canvas);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
/* ── Skip link ── */
html.page-services-partner-due-diligence .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      background: var(--brand-accent);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: var(--radius);
      font-weight: 600;
      z-index: 10000;
      transition: top 0.2s;
    }
html.page-services-partner-due-diligence .skip-link:focus { top: 1rem; }
/* ── Container ── */
html.page-services-partner-due-diligence .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }
/* ── Typography scale ── */
html.page-services-partner-due-diligence .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 4.5vw, 3.75rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.025em;
      color: var(--text-primary);
    }
html.page-services-partner-due-diligence .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3vw, 2.75rem);
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -0.02em;
    }
html.page-services-partner-due-diligence .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.2vw, 2rem);
      font-weight: 600;
      line-height: 1.28;
      letter-spacing: -0.015em;
    }
html.page-services-partner-due-diligence .text-lg { font-size: 1.125rem; line-height: 1.7; }
html.page-services-partner-due-diligence .text-sm { font-size: 0.875rem; }
html.page-services-partner-due-diligence .text-xs { font-size: 0.75rem; letter-spacing: 0.06em; }
html.page-services-partner-due-diligence .accent-word { color: var(--brand-accent); }
html.page-services-partner-due-diligence .accent-underline {
      color: var(--brand-accent);
      text-decoration: underline;
      text-decoration-color: var(--brand-accent);
      text-underline-offset: 4px;
    }
/* ── Buttons ── */
html.page-services-partner-due-diligence .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.75rem 1.75rem;
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
                  box-shadow 0.2s var(--ease-out), transform 0.15s var(--ease-out);
      white-space: nowrap;
    }
@media (pointer: coarse) {
html.page-services-partner-due-diligence .btn { min-height: 44px; }
}
html.page-services-partner-due-diligence .btn-primary {
      background: var(--brand-accent);
      color: #fff;
    }
html.page-services-partner-due-diligence .btn-primary:hover,
html.page-services-partner-due-diligence .btn-primary:focus-visible {
      background: var(--brand-accent-2);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(205, 62, 45, 0.28);
    }
html.page-services-partner-due-diligence .btn-ghost {
      background: transparent;
      color: var(--brand-accent);
      border: 1.5px solid var(--brand-accent);
    }
html.page-services-partner-due-diligence .btn-ghost:hover,
html.page-services-partner-due-diligence .btn-ghost:focus-visible {
      background: var(--brand-accent);
      color: #fff;
      transform: translateY(-1px);
    }
html.page-services-partner-due-diligence .btn-ghost-white {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,0.55);
    }
html.page-services-partner-due-diligence .btn-ghost-white:hover,
html.page-services-partner-due-diligence .btn-ghost-white:focus-visible {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.9);
    }
html.page-services-partner-due-diligence :focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
/* ══════════════════════════════════════════
       PAGE HERO
    ══════════════════════════════════════════ */
html.page-services-partner-due-diligence .page-hero {
      position: relative;
      min-height: min(90vh, 780px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: calc(var(--header-h) + 3.5rem);
      padding-bottom: 3.5rem;
      overflow: hidden;
    }
html.page-services-partner-due-diligence .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/pdd-hero-bg.jpg');
      background-size: cover;
      background-position: center;
      z-index: 0;
      transform: scale(1.04);
      animation: hero-drift__page-services-partner-due-diligence 22s ease-in-out infinite alternate;
    }
@keyframes hero-drift__page-services-partner-due-diligence {
      from { transform: scale(1.04) translate(0, 0); }
      to   { transform: scale(1.04) translate(-1%, 0.6%); }
    }
html.page-services-partner-due-diligence .page-hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        105deg,
        rgba(10,9,8,0.74) 0%,
        rgba(10,9,8,0.62) 55%,
        rgba(10,9,8,0.38) 100%
      );
    }
html.page-services-partner-due-diligence .page-hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-start;
    }
html.page-services-partner-due-diligence .page-hero-inner { max-width: 700px; }
html.page-services-partner-due-diligence .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: rgba(205,62,45,0.12);
      border: 1px solid rgba(205,62,45,0.28);
      border-radius: 2rem;
      padding: 0.3rem 0.9rem;
      margin-bottom: 1.4rem;
    }
html.page-services-partner-due-diligence .page-hero-inner h1 { color: #fff; margin-bottom: 1.5rem; }
html.page-services-partner-due-diligence .page-hero-body {
      max-width: 62ch;
      margin-bottom: 2.2rem;
    }
html.page-services-partner-due-diligence .page-hero-body p {
      font-size: 1.0625rem;
      color: rgba(255,255,255,0.82);
      line-height: 1.72;
    }
html.page-services-partner-due-diligence .page-hero-body p + p { margin-top: 1rem; }
html.page-services-partner-due-diligence .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
/* Hero stat row */
html.page-services-partner-due-diligence .hero-stat-row {
      position: relative;
      z-index: 2;
      margin-top: 3.5rem;
      border-top: 1px solid rgba(255,255,255,0.12);
    }
html.page-services-partner-due-diligence .hero-stat-row .container {
      display: flex;
      gap: 0;
    }
html.page-services-partner-due-diligence .hero-stat {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      padding: 1.5rem 1.25rem 0;
      border-left: 1px solid rgba(255,255,255,0.1);
    }
html.page-services-partner-due-diligence .hero-stat:first-child { border-left: none; }
html.page-services-partner-due-diligence .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-services-partner-due-diligence .hero-stat-label {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.55);
      font-weight: 500;
      letter-spacing: 0.02em;
    }
@media (max-width: 600px) {
html.page-services-partner-due-diligence .hero-stat-row .container { flex-wrap: wrap; }
html.page-services-partner-due-diligence .hero-stat { flex: 1 1 45%; }
html.page-services-partner-due-diligence .hero-stat:nth-child(2n+1) { border-left: none; }
}
/* ══════════════════════════════════════════
       SECTION COMMON
    ══════════════════════════════════════════ */
html.page-services-partner-due-diligence .section { padding: 5.5rem 0; }
html.page-services-partner-due-diligence .section-alt { background: var(--panel); }
html.page-services-partner-due-diligence .section-dark {
      background: var(--text-primary);
      color: #fff;
    }
html.page-services-partner-due-diligence .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1.1rem;
    }
html.page-services-partner-due-diligence .section-kicker::before {
      content: '';
      display: block;
      width: 22px; height: 2px;
      background: var(--brand-accent);
      border-radius: 1px;
    }
html.page-services-partner-due-diligence .section-intro { max-width: 60ch; }
html.page-services-partner-due-diligence .section-intro p { color: var(--text-secondary); font-size: 1.05rem; }
html.page-services-partner-due-diligence .section-intro p + p { margin-top: 0.9rem; }
/* ── Reveal animations ── */
html.page-services-partner-due-diligence .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    }
html.page-services-partner-due-diligence .reveal.in { opacity: 1; transform: translateY(0); }
html.page-services-partner-due-diligence .reveal-delay-1 { transition-delay: 0.1s; }
html.page-services-partner-due-diligence .reveal-delay-2 { transition-delay: 0.2s; }
html.page-services-partner-due-diligence .reveal-delay-3 { transition-delay: 0.32s; }
html.page-services-partner-due-diligence .reveal-delay-4 { transition-delay: 0.44s; }
@media (prefers-reduced-motion: reduce) {
html.page-services-partner-due-diligence .reveal { opacity: 1; transform: none; transition: none; }
}
/* ══════════════════════════════════════════
       PROBLEM STATEMENT SECTION
    ══════════════════════════════════════════ */
html.page-services-partner-due-diligence #pdd-problem { background: var(--canvas); }
html.page-services-partner-due-diligence .problem-lead {
      font-size: 1.05rem;
      color: var(--text-secondary);
      max-width: 62ch;
      line-height: 1.75;
    }
html.page-services-partner-due-diligence .problem-lead + .problem-lead { margin-top: 1rem; }
html.page-services-partner-due-diligence .risk-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.25rem;
      margin-top: 3rem;
    }
html.page-services-partner-due-diligence .risk-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.75rem;
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    }
html.page-services-partner-due-diligence .risk-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 100%;
      background: var(--brand-accent);
      border-radius: 2px 0 0 2px;
    }
html.page-services-partner-due-diligence .risk-card:hover {
      box-shadow: 0 8px 28px rgba(17,17,17,0.09);
      transform: translateY(-2px);
    }
html.page-services-partner-due-diligence .risk-card-title {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 0.65rem;
    }
html.page-services-partner-due-diligence .risk-card-body {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }
html.page-services-partner-due-diligence .problem-coda {
      margin-top: 2.75rem;
      padding: 1.75rem 2rem;
      background: rgba(205,62,45,0.05);
      border: 1px solid rgba(205,62,45,0.18);
      border-radius: var(--radius-lg);
      max-width: 72ch;
    }
html.page-services-partner-due-diligence .problem-coda p {
      font-size: 1rem;
      color: var(--text-primary);
      line-height: 1.7;
    }
html.page-services-partner-due-diligence .problem-coda strong { color: var(--brand-accent); }
/* ══════════════════════════════════════════
       APPROACH SECTION
    ══════════════════════════════════════════ */
html.page-services-partner-due-diligence #pdd-approach { background: var(--panel); }
html.page-services-partner-due-diligence .approach-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
      margin-top: 3rem;
    }
@media (max-width: 860px) {
html.page-services-partner-due-diligence .approach-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
html.page-services-partner-due-diligence .approach-image-wrap {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 12px 48px rgba(17,17,17,0.1);
    }
html.page-services-partner-due-diligence .approach-image-wrap img {
      width: 100%;
      height: auto;
      display: block;
    }
html.page-services-partner-due-diligence .approach-steps { display: flex; flex-direction: column; gap: 0; }
html.page-services-partner-due-diligence .approach-step {
      display: flex;
      gap: 1.25rem;
      padding: 1.4rem 0;
      border-bottom: 1px solid var(--border);
    }
html.page-services-partner-due-diligence .approach-step:last-child { border-bottom: none; }
html.page-services-partner-due-diligence .approach-step-num {
      flex-shrink: 0;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--brand-accent);
      color: #fff;
      font-family: var(--font-display);
      font-size: 0.8rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.1rem;
    }
html.page-services-partner-due-diligence .approach-step-body {}
html.page-services-partner-due-diligence .approach-step-title {
      font-family: var(--font-display);
      font-size: 0.975rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 0.35rem;
    }
html.page-services-partner-due-diligence .approach-step-text {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }
/* ══════════════════════════════════════════
       DELIVERABLES SECTION
    ══════════════════════════════════════════ */
html.page-services-partner-due-diligence #pdd-deliverables { background: var(--canvas); }
html.page-services-partner-due-diligence .deliverables-intro { max-width: 60ch; }
html.page-services-partner-due-diligence .deliverables-intro p { font-size: 1.05rem; color: var(--text-secondary); }
html.page-services-partner-due-diligence .deliverables-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }
html.page-services-partner-due-diligence .deliverable-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    }
html.page-services-partner-due-diligence .deliverable-card:hover {
      box-shadow: 0 8px 28px rgba(17,17,17,0.09);
      transform: translateY(-2px);
    }
html.page-services-partner-due-diligence .deliverable-icon {
      width: 40px; height: 40px;
      border-radius: var(--radius);
      background: rgba(205,62,45,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.1rem;
    }
html.page-services-partner-due-diligence .deliverable-icon svg {
      width: 20px; height: 20px;
      stroke: var(--brand-accent);
      fill: none;
      flex-shrink: 0;
    }
html.page-services-partner-due-diligence .deliverable-title {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 0.65rem;
    }
html.page-services-partner-due-diligence .deliverable-text {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }
/* ══════════════════════════════════════════
       CTA BAND
    ══════════════════════════════════════════ */
html.page-services-partner-due-diligence #pdd-cta {
      background: var(--text-primary);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
html.page-services-partner-due-diligence #pdd-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 60% at 80% 50%, rgba(205,62,45,0.14) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-services-partner-due-diligence .cta-band-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 700px;
    }
html.page-services-partner-due-diligence .cta-band-inner h2 { color: #fff; margin-bottom: 1.25rem; }
html.page-services-partner-due-diligence .cta-band-inner p {
      font-size: 1.05rem;
      color: rgba(255,255,255,0.75);
      line-height: 1.72;
      max-width: 58ch;
      margin-bottom: 2rem;
    }
/* ══════════════════════════════════════════
       CONTACT FORM SECTION
    ══════════════════════════════════════════ */
html.page-services-partner-due-diligence #contact-form-section { background: var(--panel); }
html.page-services-partner-due-diligence .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4.5rem;
      align-items: start;
    }
@media (max-width: 840px) {
html.page-services-partner-due-diligence .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
}
html.page-services-partner-due-diligence .contact-details-block {}
html.page-services-partner-due-diligence .contact-details-block h2 { margin-bottom: 1rem; }
html.page-services-partner-due-diligence .contact-details-block .contact-intro {
      font-size: 1rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-bottom: 2rem;
    }
html.page-services-partner-due-diligence .contact-detail-item {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
      font-size: 0.9375rem;
      color: var(--text-secondary);
    }
html.page-services-partner-due-diligence .contact-detail-label {
      font-weight: 600;
      color: var(--text-primary);
      min-width: 60px;
      font-size: 0.875rem;
    }
html.page-services-partner-due-diligence .contact-detail-item a {
      color: var(--brand-accent);
      text-decoration: none;
    }
html.page-services-partner-due-diligence .contact-detail-item a:hover { text-decoration: underline; }
html.page-services-partner-due-diligence .form-block {}
html.page-services-partner-due-diligence .form-block form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
html.page-services-partner-due-diligence .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
@media (max-width: 500px) {
html.page-services-partner-due-diligence .form-row { grid-template-columns: 1fr; }
}
html.page-services-partner-due-diligence .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
html.page-services-partner-due-diligence .form-group label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: 0.02em;
    }
html.page-services-partner-due-diligence .form-group input,
html.page-services-partner-due-diligence .form-group textarea,
html.page-services-partner-due-diligence .form-group select {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--text-primary);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: 0.65rem 0.9rem;
      transition: border-color 0.2s, box-shadow 0.2s;
      resize: none;
      width: 100%;
    }
html.page-services-partner-due-diligence .form-group input:focus,
html.page-services-partner-due-diligence .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.1);
    }
html.page-services-partner-due-diligence .form-group textarea { min-height: 130px; }
html.page-services-partner-due-diligence .form-submit { margin-top: 0.25rem; }
html.page-services-partner-due-diligence .form-msg {
      font-size: 0.9rem;
      padding: 0.75rem 1rem;
      border-radius: var(--radius);
      display: none;
    }
html.page-services-partner-due-diligence .form-msg.success {
      background: rgba(34,197,94,0.1);
      color: #166534;
      border: 1px solid rgba(34,197,94,0.25);
      display: block;
    }
html.page-services-partner-due-diligence .form-msg.error {
      background: rgba(205,62,45,0.08);
      color: var(--brand-accent-2);
      border: 1px solid rgba(205,62,45,0.2);
      display: block;
    }
/* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
html.page-services-partner-due-diligence #site-footer {
      background: #0d0d0b;
      color: rgba(255,255,255,0.55);
      padding: 3.5rem 0 2rem;
    }
html.page-services-partner-due-diligence .footer-inner {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }
html.page-services-partner-due-diligence .footer-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }
html.page-services-partner-due-diligence .footer-brand {}
html.page-services-partner-due-diligence .footer-logo-wrap {
      display: flex;
      align-items: center;
      height: 32px;
      margin-bottom: 0.75rem;
    }
html.page-services-partner-due-diligence .footer-logo-wrap img {
      height: 100%;
      width: auto;
      object-fit: contain;
      filter: brightness(0) invert(1);
      opacity: 0.85;
    }
html.page-services-partner-due-diligence .footer-tagline {
      font-size: 0.8125rem;
      max-width: 32ch;
      line-height: 1.6;
    }
html.page-services-partner-due-diligence .footer-links-cols {
      display: flex;
      gap: 3rem;
      flex-wrap: wrap;
    }
html.page-services-partner-due-diligence .footer-col {}
html.page-services-partner-due-diligence .footer-col-heading {
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      margin-bottom: 0.9rem;
    }
html.page-services-partner-due-diligence .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
html.page-services-partner-due-diligence .footer-col ul li a {
      font-size: 0.875rem;
      color: rgba(255,255,255,0.5);
      text-decoration: none;
      transition: color 0.2s;
    }
html.page-services-partner-due-diligence .footer-col ul li a:hover { color: #fff; }
html.page-services-partner-due-diligence .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.75rem;
      font-size: 0.8rem;
    }
html.page-services-partner-due-diligence .footer-legal-nav {
      display: flex;
      gap: 1.25rem;
      list-style: none;
    }
html.page-services-partner-due-diligence .footer-legal-nav a {
      color: rgba(255,255,255,0.35);
      text-decoration: none;
      font-size: 0.8rem;
      transition: color 0.2s;
    }
html.page-services-partner-due-diligence .footer-legal-nav a:hover { color: rgba(255,255,255,0.7); }
/* ══════════════════════════════════════════
       BACKGROUND ENVIRONMENT LAYER
    ══════════════════════════════════════════ */
html.page-services-partner-due-diligence body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      background:
        radial-gradient(ellipse 60% 40% at 90% 10%, rgba(205,62,45,0.025) 0%, transparent 70%),
        radial-gradient(ellipse 50% 35% at 10% 90%, rgba(205,62,45,0.018) 0%, transparent 65%);
      animation: env-shift__page-services-partner-due-diligence 60s ease-in-out infinite alternate;
    }
@keyframes env-shift__page-services-partner-due-diligence {
      from { opacity: 0.6; }
      to   { opacity: 1; }
    }
@media (prefers-reduced-motion: reduce) {
html.page-services-partner-due-diligence body::before { animation: none; }
html.page-services-partner-due-diligence .page-hero-bg { animation: none; }
}
/* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
html.page-services-partner-due-diligence @media (max-width: 640px) {
      .section { padding: 4rem 0; }
      .display-xl { font-size: clamp(1.9rem, 7vw, 2.6rem); }
      .hero-stat-row { margin-top: 2.5rem; }
    }
@media (max-height: 560px) {
html.page-services-partner-due-diligence .page-hero { min-height: unset; }
}
html.page-services-partner-due-diligence .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-services-partner-due-diligence .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-services-partner-due-diligence .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-services-partner-due-diligence .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-services-partner-due-diligence .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }
/* Pause support — must target all elements and pseudos */
html.page-services-partner-due-diligence body.paused *,
html.page-services-partner-due-diligence body.paused *::before,
html.page-services-partner-due-diligence body.paused *::after {
    animation-play-state: paused !important;
  }


/* ==================== services-territory-mapping.html (scope: .page-services-territory-mapping) ==================== */
/* ── TOKENS ─────────────────────────────────────────────────── */
html.page-services-territory-mapping {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --canvas: #ffffff;
      --panel: #f5f5f4;
      --panel-alt: #f0efee;
      --border: #e4e3e0;
      --text-primary: #111111;
      --text-secondary: #4b4b4b;
      --text-tertiary: #767676;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

      --header-h: 68px;
    }
/* ── RESET ──────────────────────────────────────────────────── */
html.page-services-territory-mapping *,
html.page-services-territory-mapping *::before,
html.page-services-territory-mapping *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-services-territory-mapping img,
html.page-services-territory-mapping svg,
html.page-services-territory-mapping video { max-width: 100%; height: auto; }
html.page-services-territory-mapping { scroll-behavior: smooth; overflow-x: clip; }
html.page-services-territory-mapping body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
/* ── LAYOUT ─────────────────────────────────────────────────── */
html.page-services-territory-mapping .container {
      width: 100%;
      max-width: 1160px;
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    }
/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
html.page-services-territory-mapping .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.1rem, 4.5vw, 3.4rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }
html.page-services-territory-mapping h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: var(--text-primary);
    }
html.page-services-territory-mapping h3 {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 600;
      line-height: 1.3;
      color: var(--text-primary);
    }
html.page-services-territory-mapping p {
      font-size: 1rem;
      line-height: 1.7;
      color: var(--text-secondary);
    }
html.page-services-territory-mapping .lede {
      font-size: 1.1rem;
      line-height: 1.65;
      color: var(--text-secondary);
      max-width: 64ch;
    }
/* ── ACCENT ─────────────────────────────────────────────────── */
html.page-services-territory-mapping .accent-word {
      color: var(--brand-accent);
    }
/* ── KICKER ─────────────────────────────────────────────────── */
html.page-services-territory-mapping .kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1.1rem;
    }
html.page-services-territory-mapping .kicker::before {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      background: var(--brand-accent);
      border-radius: 2px;
    }
/* ── BUTTONS ─────────────────────────────────────────────────── */
html.page-services-territory-mapping .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 600;
      padding: 0.75rem 1.6rem;
      border-radius: var(--radius-sm);
      text-decoration: none;
      border: 2px solid transparent;
      cursor: pointer;
      transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.2s var(--ease-out);
      min-height: 44px;
      white-space: nowrap;
    }
html.page-services-territory-mapping .btn:focus-visible {
      outline: 3px solid var(--brand-accent);
      outline-offset: 3px;
    }
html.page-services-territory-mapping .btn-primary {
      background: var(--brand-accent);
      color: #fff;
      border-color: var(--brand-accent);
    }
html.page-services-territory-mapping .btn-primary:hover {
      background: var(--brand-accent-2);
      border-color: var(--brand-accent-2);
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(205,62,45,0.22);
    }
html.page-services-territory-mapping .btn-outline {
      background: transparent;
      color: var(--brand-accent);
      border-color: var(--brand-accent);
    }
html.page-services-territory-mapping .btn-outline:hover {
      background: var(--brand-accent);
      color: #fff;
      transform: translateY(-1px);
    }
html.page-services-territory-mapping .btn-ghost-white {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,0.45);
    }
html.page-services-territory-mapping .btn-ghost-white:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.75);
      transform: translateY(-1px);
    }
html.page-services-territory-mapping .btn-ghost {
      background: transparent;
      color: var(--text-primary);
      border-color: var(--border);
    }
html.page-services-territory-mapping .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
    }
/* ── SKIP LINK ───────────────────────────────────────────────── */
html.page-services-territory-mapping .skip-link {
      position: fixed;
      top: -100%;
      left: 1rem;
      z-index: 9999;
      background: var(--brand-accent);
      color: #fff;
      padding: 0.6rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      font-weight: 600;
      text-decoration: none;
      transition: top 0.2s;
    }
html.page-services-territory-mapping .skip-link:focus { top: 1rem; }
/* ── HERO ────────────────────────────────────────────────────── */
html.page-services-territory-mapping .page-hero {
      position: relative;
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-top: var(--header-h);
      overflow: hidden;
    }
html.page-services-territory-mapping .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/hero-territory-mapping.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.03);
      transition: transform 8s var(--ease-out);
      z-index: 0;
    }
html.page-services-territory-mapping .page-hero.hero-loaded .page-hero-bg { transform: scale(1); }
html.page-services-territory-mapping .page-hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(to bottom, rgba(10,12,20,0.42) 0%, rgba(10,12,20,0.18) 38%, rgba(10,12,20,0.62) 72%, rgba(10,12,20,0.88) 100%),
        radial-gradient(ellipse 80% 70% at 60% 40%, rgba(10,12,20,0) 30%, rgba(10,12,20,0.36) 100%);
    }
html.page-services-territory-mapping .page-hero-content {
      position: relative;
      z-index: 2;
      padding-top: clamp(4rem, 10vh, 7rem);
      padding-bottom: 3rem;
    }
html.page-services-territory-mapping .page-hero-inner {
      max-width: 700px;
    }
html.page-services-territory-mapping .page-hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      margin-bottom: 1.1rem;
    }
html.page-services-territory-mapping .page-hero-kicker::before {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      background: var(--brand-accent);
      border-radius: 2px;
    }
html.page-services-territory-mapping .page-hero .display-xl { color: #fff; }
html.page-services-territory-mapping .page-hero-body {
      margin-top: 1.4rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
html.page-services-territory-mapping .page-hero-body p {
      color: rgba(255,255,255,0.82);
      font-size: 1.05rem;
      max-width: 62ch;
    }
html.page-services-territory-mapping .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 2rem;
    }
/* stat row */
html.page-services-territory-mapping .hero-stat-row {
      position: relative;
      z-index: 2;
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,0.12);
    }
html.page-services-territory-mapping .hero-stat-row .container {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
    }
html.page-services-territory-mapping .hero-stat {
      flex: 1 1 140px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 1.15rem 1.5rem;
      border-right: 1px solid rgba(255,255,255,0.1);
    }
html.page-services-territory-mapping .hero-stat:last-child { border-right: none; }
html.page-services-territory-mapping .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
html.page-services-territory-mapping .hero-stat-label {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.6);
      margin-top: 0.3rem;
      text-transform: uppercase;
    }
/* ── IN-PAGE NAV ─────────────────────────────────────────────── */
html.page-services-territory-mapping .page-subnav {
      position: sticky;
      top: var(--header-h);
      z-index: 100;
      background: var(--brand-fg);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
html.page-services-territory-mapping .subnav-inner {
      display: flex;
      align-items: center;
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
html.page-services-territory-mapping .subnav-inner::-webkit-scrollbar { display: none; }
html.page-services-territory-mapping .subnav-link {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 500;
      color: rgba(255,255,255,0.58);
      text-decoration: none;
      padding: 0.85rem 1.1rem;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      transition: color 0.18s, border-color 0.18s;
    }
html.page-services-territory-mapping .subnav-link:hover { color: rgba(255,255,255,0.9); }
html.page-services-territory-mapping .subnav-link.active { color: #fff; border-bottom-color: var(--brand-accent); }
/* ── SECTIONS ────────────────────────────────────────────────── */
html.page-services-territory-mapping .section { padding-block: clamp(4rem, 8vw, 6.5rem); }
html.page-services-territory-mapping .section-alt { background: var(--panel); }
html.page-services-territory-mapping .section-dark { background: var(--brand-fg); }
/* ── PROBLEM STATEMENT ────────────────────────────────────────── */
html.page-services-territory-mapping .problem-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
      margin-top: 2.5rem;
    }
html.page-services-territory-mapping .problem-col p + p { margin-top: 1.1rem; }
html.page-services-territory-mapping .problem-highlight {
      background: rgba(205,62,45,0.07);
      border-left: 3px solid var(--brand-accent);
      padding: 1.2rem 1.4rem;
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      margin-top: 2rem;
    }
html.page-services-territory-mapping .problem-highlight p {
      font-size: 0.95rem;
      font-style: italic;
      color: var(--text-primary);
    }
/* ── SPLIT BAND ───────────────────────────────────────────────── */
html.page-services-territory-mapping .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: stretch;
      margin-top: 2.5rem;
    }
html.page-services-territory-mapping .split-image-col {
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
    }
html.page-services-territory-mapping .split-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
html.page-services-territory-mapping .split-content-col {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
html.page-services-territory-mapping .split-content-col p + p { margin-top: 0; }
html.page-services-territory-mapping .split-content-col p { margin-bottom: 0; }
/* Process steps */
html.page-services-territory-mapping .process-steps {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 1rem;
    }
html.page-services-territory-mapping .process-step {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      padding: 1rem 1.1rem;
      background: var(--panel);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
html.page-services-territory-mapping .process-step:hover {
      border-color: rgba(205,62,45,0.3);
      box-shadow: 0 2px 12px rgba(205,62,45,0.07);
    }
html.page-services-territory-mapping .step-num {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--brand-accent);
      color: #fff;
      font-family: var(--font-display);
      font-size: 0.82rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
html.page-services-territory-mapping .step-text h4 {
      font-family: var(--font-display);
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.2rem;
    }
html.page-services-territory-mapping .step-text p {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.55;
    }
/* ── DELIVERABLES ────────────────────────────────────────────── */
html.page-services-territory-mapping .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
      margin-top: 2.5rem;
    }
html.page-services-territory-mapping .deliverable-card {
      background: var(--brand-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.75rem;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease-out);
    }
html.page-services-territory-mapping .deliverable-card:hover {
      border-color: rgba(205,62,45,0.28);
      box-shadow: 0 6px 28px rgba(17,17,17,0.07);
      transform: translateY(-2px);
    }
html.page-services-territory-mapping .deliverable-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-md);
      background: rgba(205,62,45,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      flex-shrink: 0;
    }
html.page-services-territory-mapping .deliverable-icon svg {
      width: 20px;
      height: 20px;
      color: var(--brand-accent);
    }
html.page-services-territory-mapping .deliverable-card h3 {
      font-size: 1rem;
      margin-bottom: 0.6rem;
    }
html.page-services-territory-mapping .deliverable-card p {
      font-size: 0.9rem;
      line-height: 1.6;
    }
/* ── CTA BAND ────────────────────────────────────────────────── */
html.page-services-territory-mapping #tm-cta {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-services-territory-mapping .cta-band-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: center;
    }
html.page-services-territory-mapping .cta-band-text h2 {
      color: #fff;
      margin-bottom: 1rem;
    }
html.page-services-territory-mapping .cta-band-text p {
      color: rgba(255,255,255,0.72);
      max-width: 58ch;
    }
html.page-services-territory-mapping .cta-band-actions {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      align-items: flex-end;
    }
/* CTA bg decoration */
html.page-services-territory-mapping .cta-bg-deco {
      position: absolute;
      top: -60px;
      right: -60px;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: rgba(205,62,45,0.07);
      pointer-events: none;
    }
/* ── CONTACT FORM ────────────────────────────────────────────── */
html.page-services-territory-mapping .contact-form-section {
      background: var(--panel);
    }
html.page-services-territory-mapping .contact-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
      margin-top: 2.5rem;
    }
html.page-services-territory-mapping .contact-details h3 {
      font-size: 1.05rem;
      margin-bottom: 0.5rem;
    }
html.page-services-territory-mapping .contact-details p {
      font-size: 0.9rem;
      color: var(--text-secondary);
    }
html.page-services-territory-mapping .contact-detail-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-top: 1.25rem;
    }
html.page-services-territory-mapping .contact-detail-row .detail-icon {
      width: 36px;
      height: 36px;
      background: rgba(205,62,45,0.1);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
html.page-services-territory-mapping .contact-detail-row .detail-icon svg { width: 16px; height: 16px; color: var(--brand-accent); }
html.page-services-territory-mapping .contact-detail-row a { color: var(--text-primary); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
html.page-services-territory-mapping .contact-detail-row a:hover { color: var(--brand-accent); }
html.page-services-territory-mapping form.contact-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      background: var(--brand-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
    }
html.page-services-territory-mapping .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
html.page-services-territory-mapping .field {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
html.page-services-territory-mapping .field label {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: 0.02em;
    }
html.page-services-territory-mapping .field input,
html.page-services-territory-mapping .field textarea {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--text-primary);
      background: var(--brand-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0.65rem 0.9rem;
      min-height: 44px;
      transition: border-color 0.18s, box-shadow 0.18s;
      outline: none;
      resize: vertical;
    }
html.page-services-territory-mapping .field input:focus,
html.page-services-territory-mapping .field textarea:focus {
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-services-territory-mapping .field textarea { min-height: 110px; }
html.page-services-territory-mapping .form-msg {
      font-size: 0.875rem;
      padding: 0.7rem 1rem;
      border-radius: var(--radius-sm);
      display: none;
    }
html.page-services-territory-mapping .form-msg.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; display: block; }
html.page-services-territory-mapping .form-msg.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; display: block; }
/* ── FOOTER ──────────────────────────────────────────────────── */
html.page-services-territory-mapping footer {
      background: var(--brand-fg);
      color: rgba(255,255,255,0.58);
      padding-block: clamp(2.5rem, 5vw, 4rem);
    }
html.page-services-territory-mapping .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 2rem;
    }
html.page-services-territory-mapping .footer-brand img {
      height: 32px;
      width: auto;
      object-fit: contain;
      margin-bottom: 1rem;
      filter: brightness(0) invert(1);
      opacity: 0.85;
    }
html.page-services-territory-mapping .footer-brand p {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.48);
      max-width: 30ch;
      line-height: 1.55;
    }
html.page-services-territory-mapping .footer-col h4 {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      margin-bottom: 0.9rem;
    }
html.page-services-territory-mapping .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
html.page-services-territory-mapping .footer-col ul li a {
      font-size: 0.875rem;
      color: rgba(255,255,255,0.58);
      text-decoration: none;
      transition: color 0.15s;
    }
html.page-services-territory-mapping .footer-col ul li a:hover { color: rgba(255,255,255,0.92); }
html.page-services-territory-mapping .footer-bottom {
      margin-top: 2.5rem;
      padding-top: 1.25rem;
      border-top: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
html.page-services-territory-mapping .footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.35); }
/* ── ENTRANCE ANIMATIONS ─────────────────────────────────────── */
html.page-services-territory-mapping .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
    }
html.page-services-territory-mapping .reveal.in {
      opacity: 1;
      transform: none;
    }
html.page-services-territory-mapping .reveal-delay-1 { transition-delay: 0.08s; }
html.page-services-territory-mapping .reveal-delay-2 { transition-delay: 0.16s; }
html.page-services-territory-mapping .reveal-delay-3 { transition-delay: 0.24s; }
html.page-services-territory-mapping .reveal-delay-4 { transition-delay: 0.32s; }
html.page-services-territory-mapping .reveal-delay-5 { transition-delay: 0.40s; }
html.page-services-territory-mapping .reveal-delay-6 { transition-delay: 0.48s; }
/* ── RESPONSIVE ──────────────────────────────────────────────── */
html.page-services-territory-mapping @media (max-width: 900px) {
      .problem-grid,
      .split-band,
      .contact-form-grid {
        grid-template-columns: 1fr;
      }
      .split-image-col {
        min-height: 260px;
        max-height: 340px;
      }
      .deliverables-grid {
        grid-template-columns: 1fr;
      }
      .cta-band-grid {
        grid-template-columns: 1fr;
      }
      .cta-band-actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
      .nav-links, .nav-cta { display: none; }
      .nav-hamburger { display: flex; }
    }
@media (max-width: 600px) {
html.page-services-territory-mapping .form-row { grid-template-columns: 1fr; }
html.page-services-territory-mapping .footer-grid { grid-template-columns: 1fr; }
html.page-services-territory-mapping .hero-stat { padding: 0.85rem 1rem; }
}
/* ── REDUCED MOTION ──────────────────────────────────────────── */
html.page-services-territory-mapping @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-delay: 0ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }
html.page-services-territory-mapping .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
html.page-services-territory-mapping .faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
html.page-services-territory-mapping .faq-item:first-child { border-top: 1px solid var(--border); }
html.page-services-territory-mapping .faq-q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--brand-fg); margin-bottom: 0.6rem; }
html.page-services-territory-mapping .faq-a { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }


/* ==================== services.html (scope: .page-services) ==================== */
/* ─── TOKENS ─────────────────────────────────────────────────── */
html.page-services {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      --canvas: #f8f6f3;
      --panel: #ffffff;
      --panel-alt: #f2f0ed;
      --text-primary: #111111;
      --text-secondary: #555555;
      --text-muted: #888888;
      --border: rgba(17,17,17,0.10);
      --shadow-sm: 0 2px 8px rgba(17,17,17,0.07);
      --shadow-md: 0 6px 24px rgba(17,17,17,0.10);
      --shadow-lg: 0 16px 48px rgba(17,17,17,0.12);
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;
      --ease-out: cubic-bezier(0.22,1,0.36,1);
      --ease-in-out: cubic-bezier(0.45,0,0.55,1);
      --header-h: 72px;
    }
/* ─── RESET & BASE ───────────────────────────────────────────── */
html.page-services *,
html.page-services *::before,
html.page-services *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-services { scroll-behavior: smooth; overflow-x: clip; }
html.page-services body {
      overflow-x: clip;
      background: var(--brand-bg);
      color: var(--brand-fg);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-services img,
html.page-services svg,
html.page-services video { max-width: 100%; height: auto; display: block; }
html.page-services a { color: inherit; text-decoration: none; }
html.page-services ul { list-style: none; }
html.page-services button { cursor: pointer; font-family: inherit; }
/* ─── TYPOGRAPHY SCALE ───────────────────────────────────────── */
html.page-services .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--brand-fg);
    }
html.page-services .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3vw, 2.6rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
html.page-services .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.2vw, 1.9rem);
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.015em;
    }
html.page-services .text-lg { font-size: 1.125rem; line-height: 1.7; }
html.page-services .text-sm { font-size: 0.875rem; line-height: 1.6; }
html.page-services .text-xs { font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.04em; }
html.page-services .accent-word { color: var(--brand-accent); }
html.page-services .kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1rem;
    }
/* ─── LAYOUT ─────────────────────────────────────────────────── */
html.page-services .container {
      width: min(1200px, 100% - 3rem);
      margin-inline: auto;
    }
html.page-services .container-narrow {
      width: min(760px, 100% - 3rem);
      margin-inline: auto;
    }
html.page-services .section-pad { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-services .section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ─── BUTTONS ────────────────────────────────────────────────── */
html.page-services .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      line-height: 1;
      padding: 0.875rem 1.75rem;
      border-radius: var(--radius-sm);
      border: 2px solid transparent;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.22s var(--ease-out),
                  color 0.22s var(--ease-out),
                  border-color 0.22s var(--ease-out),
                  transform 0.18s var(--ease-out),
                  box-shadow 0.22s var(--ease-out);
      text-shadow: none;
    }
html.page-services .btn:hover { transform: translateY(-2px); }
html.page-services .btn:active { transform: translateY(0); }
html.page-services .btn-primary {
      background: var(--brand-accent);
      color: #ffffff;
      border-color: var(--brand-accent);
    }
html.page-services .btn-primary:hover {
      background: var(--brand-accent-2);
      border-color: var(--brand-accent-2);
    }
html.page-services .btn-ghost {
      background: transparent;
      color: var(--brand-fg);
      border-color: var(--brand-fg);
    }
html.page-services .btn-ghost:hover {
      background: var(--brand-fg);
      color: var(--brand-bg);
    }
html.page-services .btn-ghost-white {
      background: transparent;
      color: #ffffff;
      border-color: rgba(255,255,255,0.6);
    }
html.page-services .btn-ghost-white:hover {
      background: rgba(255,255,255,0.15);
      border-color: #ffffff;
    }
@media (pointer: coarse) {
html.page-services .btn { min-height: 44px; }
}
/* ─── SKIP LINK ──────────────────────────────────────────────── */
html.page-services .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      z-index: 9999;
      background: var(--brand-accent);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      font-weight: 600;
      transition: top 0.2s;
    }
html.page-services .skip-link:focus { top: 1rem; }
/* ─── SHARED BACKGROUND ENVIRONMENT ─────────────────────────── */
html.page-services body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(205,62,45,0.035) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(205,62,45,0.025) 0%, transparent 55%);
      pointer-events: none;
      z-index: 0;
    }
/* ─── HERO ───────────────────────────────────────────────────── */
html.page-services .page-hero {
      position: relative;
      min-height: 88vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: var(--header-h);
      overflow: hidden;
    }
html.page-services .page-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../assets/services-hero-distribution-dock.jpg');
      background-size: cover;
      background-position: center 40%;
      z-index: 0;
      transform: scale(1.04);
      animation: hero-drift__page-services 22s ease-in-out infinite alternate;
    }
@keyframes hero-drift__page-services {
      from { transform: scale(1.04) translateY(0); }
      to   { transform: scale(1.08) translateY(-1.5%); }
    }
html.page-services .page-hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(160deg, rgba(8,8,12,0.72) 0%, rgba(8,8,12,0.50) 50%, rgba(8,8,12,0.68) 100%);
    }
html.page-services .page-hero-content {
      position: relative;
      z-index: 2;
      padding-block: clamp(4rem, 8vw, 6rem);
    }
html.page-services .page-hero-inner {
      max-width: 760px;
    }
html.page-services .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1.25rem;
      padding: 0.35rem 0.75rem;
      border: 1px solid rgba(205,62,45,0.45);
      border-radius: var(--radius-sm);
      background: rgba(205,62,45,0.10);
    }
html.page-services .page-hero .display-xl {
      color: #ffffff;
      text-shadow: 0 2px 24px rgba(8,8,12,0.55);
      margin-bottom: 1.5rem;
    }
html.page-services .page-hero-body {
      max-width: 62ch;
    }
html.page-services .page-hero-body p {
      color: rgba(255,255,255,0.84);
      font-size: 1.0625rem;
      line-height: 1.75;
      text-shadow: 0 1px 8px rgba(8,8,12,0.5);
      margin-bottom: 1rem;
    }
html.page-services .page-hero-body p:last-child { margin-bottom: 0; }
html.page-services .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
      margin-top: 2.25rem;
    }
/* hero stat row */
html.page-services .hero-stat-row {
      position: relative;
      z-index: 2;
      border-top: 1px solid rgba(255,255,255,0.12);
      background: rgba(8,8,12,0.38);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
html.page-services .hero-stat-row .container {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
    }
html.page-services .hero-stat {
      flex: 1 1 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      padding: 1.25rem 1rem;
      border-right: 1px solid rgba(255,255,255,0.10);
    }
html.page-services .hero-stat:last-child { border-right: none; }
html.page-services .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1;
    }
html.page-services .hero-stat-label {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.58);
      text-align: center;
    }
/* ─── MARQUEE ────────────────────────────────────────────────── */
html.page-services .marquee-band {
      background: var(--brand-fg);
      overflow: hidden;
      padding-block: 0.875rem;
      position: relative;
      z-index: 1;
    }
html.page-services .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: marquee-scroll__page-services 38s linear infinite;
    }
html.page-services .marquee-inner {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      padding-inline: 1.25rem;
      white-space: nowrap;
    }
html.page-services .marquee-item {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.60);
    }
html.page-services .marquee-sep {
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--brand-accent);
      flex-shrink: 0;
    }
@keyframes marquee-scroll__page-services {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
html.page-services .marquee-track { animation: none; }
}
/* ─── INTRO / CONNECTED SYSTEM ───────────────────────────────── */
html.page-services .lifecycle-intro {
      background: var(--canvas);
      position: relative;
      overflow: hidden;
    }
html.page-services .lifecycle-intro::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(205,62,45,0.04) 0%, transparent 50%);
      pointer-events: none;
    }
html.page-services .split-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 5vw, 4rem);
      align-items: stretch;
    }
html.page-services .split-image-col {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      min-height: 320px;
    }
html.page-services .split-image-col img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-md);
    }
html.page-services .split-content-col {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 1.25rem;
    }
html.page-services .split-content-col h2 {
      margin-bottom: 0.25rem;
    }
html.page-services .split-content-col p {
      color: var(--text-secondary);
      line-height: 1.75;
      max-width: 60ch;
    }
html.page-services .chain-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 0.5rem;
    }
html.page-services .chain-step {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 0.875rem 0;
      border-bottom: 1px solid var(--border);
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
    }
html.page-services .chain-step:last-child { border-bottom: none; }
html.page-services .chain-step.in { opacity: 1; transform: translateX(0); }
html.page-services .chain-step-icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      background: var(--brand-accent);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 700;
      margin-top: 0.1rem;
    }
html.page-services .chain-step-text {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }
html.page-services .chain-step-text strong {
      color: var(--brand-fg);
      font-weight: 600;
      display: block;
      margin-bottom: 0.2rem;
      font-size: 0.9375rem;
    }
/* ─── SERVICES GRID ──────────────────────────────────────────── */
html.page-services .services-grid-section {
      background: var(--brand-bg);
      position: relative;
    }
html.page-services .services-grid-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(205,62,45,0.04) 0%, transparent 60%);
      pointer-events: none;
    }
html.page-services .services-section-header {
      text-align: center;
      margin-bottom: clamp(2.5rem, 5vw, 4rem);
    }
html.page-services .services-section-header h2 {
      margin-top: 0.5rem;
    }
html.page-services .services-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
html.page-services .service-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 2rem 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 0;
      box-shadow: var(--shadow-sm);
      transition: box-shadow 0.28s var(--ease-out),
                  transform 0.28s var(--ease-out),
                  border-color 0.28s var(--ease-out);
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(22px);
    }
html.page-services .service-card.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-services .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--brand-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.32s var(--ease-out);
    }
html.page-services .service-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      border-color: rgba(205,62,45,0.25);
    }
html.page-services .service-card:hover::before {
      transform: scaleX(1);
    }
html.page-services .service-card-number {
      font-family: var(--font-display);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
      margin-bottom: 1rem;
    }
html.page-services .service-card h3 {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--brand-fg);
      margin-bottom: 0.875rem;
    }
html.page-services .service-card p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.7;
      flex: 1;
      margin-bottom: 1.5rem;
    }
html.page-services .service-card-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--brand-accent);
      text-decoration: none;
      margin-top: auto;
      transition: gap 0.2s var(--ease-out), color 0.2s var(--ease-out);
    }
html.page-services .service-card-link:hover {
      color: var(--brand-accent-2);
      gap: 0.65rem;
    }
html.page-services .service-card-link-arrow {
      display: inline-block;
      transition: transform 0.2s var(--ease-out);
    }
html.page-services .service-card:hover .service-card-link-arrow {
      transform: translateX(3px);
    }
/* ─── CTA BAND ───────────────────────────────────────────────── */
html.page-services .cta-band {
      background: var(--brand-fg);
      position: relative;
      overflow: hidden;
    }
html.page-services .cta-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(205,62,45,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 10% 30%, rgba(205,62,45,0.10) 0%, transparent 55%);
      pointer-events: none;
    }
html.page-services .cta-band-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 3rem;
      align-items: center;
    }
html.page-services .cta-band-text h2 {
      color: #ffffff;
      margin-bottom: 1rem;
    }
html.page-services .cta-band-text p {
      color: rgba(255,255,255,0.72);
      font-size: 1.0625rem;
      line-height: 1.7;
      max-width: 58ch;
    }
html.page-services .cta-band-action {
      flex-shrink: 0;
    }
/* ─── CONTACT FORM ───────────────────────────────────────────── */
html.page-services .contact-section {
      background: var(--canvas);
      position: relative;
    }
html.page-services .contact-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(205,62,45,0.03) 0%, transparent 40%);
      pointer-events: none;
    }
html.page-services .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
    }
html.page-services .contact-info h2 {
      margin-bottom: 1rem;
    }
html.page-services .contact-info > p {
      color: var(--text-secondary);
      line-height: 1.75;
      max-width: 46ch;
      margin-bottom: 2rem;
    }
html.page-services .contact-detail {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
html.page-services .contact-detail-icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      background: rgba(205,62,45,0.10);
      border: 1px solid rgba(205,62,45,0.20);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand-accent);
    }
html.page-services .contact-detail-text {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      padding-top: 0.5rem;
    }
html.page-services .contact-detail-text a {
      color: var(--brand-accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
html.page-services .contact-form-wrap {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 2.75rem);
      box-shadow: var(--shadow-md);
    }
html.page-services .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
html.page-services .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 1.125rem;
    }
html.page-services .form-group label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.03em;
    }
html.page-services .form-group input,
html.page-services .form-group textarea {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--brand-fg);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0.75rem 1rem;
      width: 100%;
      transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
      outline: none;
    }
html.page-services .form-group input::placeholder,
html.page-services .form-group textarea::placeholder {
      color: var(--text-muted);
    }
html.page-services .form-group input:focus,
html.page-services .form-group textarea:focus {
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-services .form-group textarea { resize: vertical; min-height: 120px; }
html.page-services .form-submit-wrap { margin-top: 0.5rem; }
html.page-services .form-status {
      margin-top: 1rem;
      padding: 0.875rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      font-weight: 500;
      display: none;
    }
html.page-services .form-status.success {
      display: block;
      background: rgba(34,139,60,0.10);
      border: 1px solid rgba(34,139,60,0.25);
      color: #1a7a35;
    }
html.page-services .form-status.error {
      display: block;
      background: rgba(205,62,45,0.08);
      border: 1px solid rgba(205,62,45,0.25);
      color: var(--brand-accent-2);
    }
/* ─── SCROLL ENTRANCE ANIMATIONS ────────────────────────────── */
html.page-services .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    }
html.page-services .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-services .reveal-left {
      opacity: 0;
      transform: translateX(-28px);
      transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    }
html.page-services .reveal-left.in {
      opacity: 1;
      transform: translateX(0);
    }
/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
      html.page-services .services-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      html.page-services .split-band {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      html.page-services .split-image-col {
        min-height: 280px;
        position: relative;
      }
      html.page-services .split-image-col img {
        position: relative;
        width: 100%;
        height: 280px;
        object-fit: cover;
      }
      html.page-services .cta-band-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }
@media (max-width: 768px) {
html.page-services .services-cards-grid {
        grid-template-columns: 1fr;
      }
html.page-services .contact-grid {
        grid-template-columns: 1fr;
      }
html.page-services .form-row {
        grid-template-columns: 1fr;
      }
html.page-services .hero-stat { flex: 1 1 80px; }
}
@media (max-width: 480px) {
html.page-services .page-hero-actions {
        flex-direction: column;
        align-items: flex-start;
      }
html.page-services .hero-stat-row .container {
        justify-content: center;
      }
}
/* ─── FOCUS VISIBLE ──────────────────────────────────────────── */
html.page-services :focus-visible {
      outline: 2px solid var(--brand-accent);
      outline-offset: 3px;
      border-radius: 2px;
    }
/* ─── REDUCED MOTION ─────────────────────────────────────────── */
html.page-services @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .reveal, .reveal-left, .service-card, .chain-step {
        opacity: 1;
        transform: none;
      }
    }
html.page-services body.paused *,
html.page-services body.paused *::before,
html.page-services body.paused *::after {
      animation-play-state: paused !important;
    }


/* ==================== who-we-serve.html (scope: .page-who-we-serve) ==================== */
/* ─── Brand Tokens ─────────────────────────────────────────── */
html.page-who-we-serve {
      --brand-bg: #ffffff;
      --brand-fg: #111111;
      --brand-accent: #cd3e2d;
      --brand-accent-2: #942d20;
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;

      /* Canvas tint — never pure white */
      --canvas: #f8f7f6;
      --canvas-mid: #f0efed;
      --canvas-dark: #1a1917;
      --panel: #ffffff;
      --panel-raised: #f5f4f2;
      --border: rgba(17,17,17,0.10);
      --border-strong: rgba(17,17,17,0.20);

      /* Text */
      --text-primary: #111111;
      --text-secondary: #555550;
      --text-muted: #888882;
      --text-on-dark: #f5f4f2;
      --text-on-dark-muted: rgba(245,244,242,0.70);

      /* Motion */
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --duration-fast: 200ms;
      --duration-mid: 380ms;
      --duration-slow: 600ms;

      /* Layout */
      --header-h: 68px;
      --container: 1180px;
      --gap: clamp(1.5rem, 4vw, 2.5rem);
    }
/* ─── Reset ────────────────────────────────────────────────── */
html.page-who-we-serve *,
html.page-who-we-serve *::before,
html.page-who-we-serve *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-who-we-serve {
      overflow-x: clip;
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }
html.page-who-we-serve body {
      overflow-x: clip;
      background: var(--canvas);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
html.page-who-we-serve img,
html.page-who-we-serve svg,
html.page-who-we-serve video { max-width: 100%; height: auto; display: block; }
html.page-who-we-serve a { color: inherit; text-decoration: none; }
html.page-who-we-serve ul,
html.page-who-we-serve ol { list-style: none; }
html.page-who-we-serve button { font: inherit; cursor: pointer; border: none; background: none; }
/* ─── Skip Link ────────────────────────────────────────────── */
html.page-who-we-serve .skip-link {
      position: fixed; top: -100%; left: 1rem; z-index: 9999;
      background: var(--brand-accent); color: #fff;
      padding: 0.5rem 1rem; border-radius: 4px;
      font-size: 0.875rem; font-weight: 600;
      transition: top var(--duration-fast);
    }
html.page-who-we-serve .skip-link:focus { top: 0.75rem; }
/* ─── Container ────────────────────────────────────────────── */
html.page-who-we-serve .container {
      width: min(var(--container), 100% - 2 * clamp(1rem, 5vw, 3rem));
      margin-inline: auto;
    }
/* ─── Typography Scale ─────────────────────────────────────── */
html.page-who-we-serve .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.02em;
    }
html.page-who-we-serve .display-lg {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3.2vw, 2.6rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.018em;
    }
html.page-who-we-serve .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.2vw, 1.9rem);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.015em;
    }
html.page-who-we-serve .kicker {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-accent);
    }
html.page-who-we-serve .lede {
      font-size: clamp(1rem, 1.6vw, 1.15rem);
      line-height: 1.7;
      color: var(--text-secondary);
      max-width: 64ch;
    }
html.page-who-we-serve .accent-word { color: var(--brand-accent); }
/* ─── Buttons ──────────────────────────────────────────────── */
html.page-who-we-serve .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      padding: 0.75rem 1.75rem;
      border-radius: 4px;
      transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
      text-shadow: none;
      white-space: nowrap;
      cursor: pointer;
      min-height: 44px;
    }
html.page-who-we-serve .btn:active { transform: translateY(1px); }
html.page-who-we-serve .btn-primary {
      background: var(--brand-accent);
      color: #fff;
    }
html.page-who-we-serve .btn-primary:hover {
      background: var(--brand-accent-2);
      box-shadow: 0 4px 20px rgba(205,62,45,0.28);
    }
html.page-who-we-serve .btn-secondary {
      background: transparent;
      color: var(--brand-accent);
      border: 2px solid var(--brand-accent);
    }
html.page-who-we-serve .btn-secondary:hover {
      background: var(--brand-accent);
      color: #fff;
    }
html.page-who-we-serve .btn-ghost {
      background: transparent;
      color: var(--text-primary);
      border: 1.5px solid var(--border-strong);
    }
html.page-who-we-serve .btn-ghost:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
    }
html.page-who-we-serve .btn-ghost-white {
      background: transparent;
      color: rgba(255,255,255,0.88);
      border: 1.5px solid rgba(255,255,255,0.35);
    }
html.page-who-we-serve .btn-ghost-white:hover {
      border-color: rgba(255,255,255,0.70);
      color: #fff;
      background: rgba(255,255,255,0.08);
    }
@media (pointer: coarse) {
html.page-who-we-serve .btn { min-height: 44px; }
}
/* ─── Section Shared ───────────────────────────────────────── */
html.page-who-we-serve .section { padding-block: clamp(4rem, 8vw, 7rem); }
html.page-who-we-serve .section-header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
html.page-who-we-serve .section-header .kicker { margin-bottom: 0.75rem; }
html.page-who-we-serve .section-header .display-lg { margin-bottom: 1rem; }
html.page-who-we-serve .section-header .lede { margin-top: 0.75rem; }
/* ─── PAGE HERO ────────────────────────────────────────────── */
html.page-who-we-serve .page-hero {
      position: relative;
      min-height: min(88vh, 780px);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-top: var(--header-h);
      overflow: hidden;
    }
html.page-who-we-serve .page-hero-bg {
      position: absolute; inset: 0;
      background-image: url('../assets/wws-hero-bg.jpg');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      animation: hero-bg-settle__page-who-we-serve 1.6s var(--ease-out) forwards;
    }
@keyframes hero-bg-settle__page-who-we-serve {
      from { transform: scale(1.04); }
      to   { transform: scale(1.00); }
    }
html.page-who-we-serve .page-hero-scrim {
      position: absolute; inset: 0;
      background:
        linear-gradient(
          175deg,
          rgba(17,17,14,0.18) 0%,
          rgba(17,17,14,0.54) 48%,
          rgba(17,17,14,0.82) 100%
        );
    }
html.page-who-we-serve .page-hero-content {
      position: relative; z-index: 2;
      padding-top: clamp(4rem, 10vw, 7rem);
      padding-bottom: clamp(2.5rem, 5vw, 4rem);
    }
html.page-who-we-serve .page-hero-inner { max-width: 780px; }
html.page-who-we-serve .page-hero-kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--brand-accent);
      background: rgba(205,62,45,0.12);
      border: 1px solid rgba(205,62,45,0.30);
      padding: 0.3rem 0.8rem;
      border-radius: 3px;
      margin-bottom: 1.25rem;
      opacity: 0;
      animation: fade-up 0.7s 0.15s var(--ease-out) forwards;
    }
html.page-who-we-serve .page-hero-inner .display-xl {
      color: #fff;
      text-shadow: 0 2px 12px rgba(17,17,14,0.5);
      margin-bottom: 1.5rem;
      opacity: 0;
      animation: fade-up 0.7s 0.28s var(--ease-out) forwards;
    }
html.page-who-we-serve .page-hero-body {
      opacity: 0;
      animation: fade-up 0.7s 0.42s var(--ease-out) forwards;
    }
html.page-who-we-serve .page-hero-body p {
      font-size: clamp(0.95rem, 1.5vw, 1.075rem);
      line-height: 1.72;
      color: rgba(245,244,242,0.85);
      max-width: 66ch;
    }
html.page-who-we-serve .page-hero-body p + p { margin-top: 1rem; }
html.page-who-we-serve .page-hero-actions {
      display: flex; flex-wrap: wrap; gap: 0.875rem;
      margin-top: 2.25rem;
      opacity: 0;
      animation: fade-up 0.7s 0.56s var(--ease-out) forwards;
    }
/* Hero stat row */
html.page-who-we-serve .hero-stat-row {
      position: relative; z-index: 2;
      background: rgba(17,17,14,0.55);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-block: 1.25rem;
    }
html.page-who-we-serve .hero-stat-row .container {
      display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem;
      align-items: center;
    }
html.page-who-we-serve .hero-stat {
      display: flex; align-items: baseline; gap: 0.5rem;
    }
html.page-who-we-serve .hero-stat-value {
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--brand-accent);
      line-height: 1;
    }
html.page-who-we-serve .hero-stat-label {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245,244,242,0.65);
    }
/* ─── Situations Section ────────────────────────────────────── */
html.page-who-we-serve .situations-section {
      background: var(--panel);
    }
html.page-who-we-serve .situations-intro {
      max-width: 72ch;
      margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    }
html.page-who-we-serve .situations-intro p {
      font-size: clamp(1rem, 1.5vw, 1.075rem);
      color: var(--text-secondary);
      line-height: 1.7;
      margin-top: 0.875rem;
    }
html.page-who-we-serve .situations-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
      gap: 1.25rem;
    }
html.page-who-we-serve .situation-card {
      background: var(--canvas);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 1.75rem 1.875rem;
      position: relative;
      overflow: hidden;
      transition:
        border-color var(--duration-mid) var(--ease-out),
        box-shadow var(--duration-mid) var(--ease-out),
        transform var(--duration-mid) var(--ease-out);
      opacity: 0;
      transform: translateY(24px);
    }
html.page-who-we-serve .situation-card.in {
      opacity: 1;
      transform: translateY(0);
    }
html.page-who-we-serve .situation-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 0;
      background: var(--brand-accent);
      transition: height var(--duration-slow) var(--ease-out);
    }
html.page-who-we-serve .situation-card:hover {
      border-color: rgba(205,62,45,0.25);
      box-shadow: 0 6px 32px rgba(17,17,14,0.09);
      transform: translateY(-2px);
    }
html.page-who-we-serve .situation-card:hover::before { height: 100%; }
html.page-who-we-serve .situation-card h3 {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.6rem;
      letter-spacing: -0.01em;
    }
html.page-who-we-serve .situation-card p {
      font-size: 0.9rem;
      line-height: 1.68;
      color: var(--text-secondary);
    }
html.page-who-we-serve .situation-number {
      font-family: var(--font-display);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--brand-accent);
      opacity: 0.65;
      margin-bottom: 0.875rem;
    }
/* ─── Sectors Section ───────────────────────────────────────── */
html.page-who-we-serve .sectors-section {
      background: var(--canvas);
      overflow: hidden;
    }
html.page-who-we-serve .sectors-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 5vw, 5rem);
      align-items: center;
    }
html.page-who-we-serve .sectors-image-col {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      aspect-ratio: 16 / 10;
    }
html.page-who-we-serve .sectors-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 8s var(--ease-out);
    }
html.page-who-we-serve .sectors-section:hover .sectors-image-col img {
      transform: scale(1.03);
    }
html.page-who-we-serve .sectors-content-col { }
html.page-who-we-serve .sectors-content-col .kicker { margin-bottom: 0.75rem; }
html.page-who-we-serve .sectors-content-col .display-md { margin-bottom: 1.25rem; }
html.page-who-we-serve .sectors-content-col p {
      font-size: 0.975rem;
      line-height: 1.72;
      color: var(--text-secondary);
    }
html.page-who-we-serve .sectors-content-col p + p { margin-top: 1rem; }
html.page-who-we-serve .sectors-principle {
      margin-top: 1.75rem;
      padding: 1.25rem 1.5rem;
      background: var(--panel);
      border-left: 3px solid var(--brand-accent);
      border-radius: 0 4px 4px 0;
    }
html.page-who-we-serve .sectors-principle p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      font-style: italic;
    }
/* ─── Regions Section ───────────────────────────────────────── */
html.page-who-we-serve .regions-section {
      background: var(--panel);
    }
html.page-who-we-serve .regions-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 5vw, 5rem);
      align-items: center;
    }
html.page-who-we-serve .regions-content-col .kicker { margin-bottom: 0.75rem; }
html.page-who-we-serve .regions-content-col .display-md { margin-bottom: 1.25rem; }
html.page-who-we-serve .regions-content-col p {
      font-size: 0.975rem;
      line-height: 1.72;
      color: var(--text-secondary);
    }
html.page-who-we-serve .regions-content-col p + p { margin-top: 1rem; }
html.page-who-we-serve .regions-highlights {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-top: 2rem;
    }
html.page-who-we-serve .region-chip {
      background: var(--canvas);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1rem 1.125rem;
      transition: border-color var(--duration-fast) var(--ease-out);
    }
html.page-who-we-serve .region-chip:hover { border-color: var(--brand-accent); }
html.page-who-we-serve .region-chip-label {
      font-family: var(--font-display);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.3rem;
    }
html.page-who-we-serve .region-chip-sub {
      font-size: 0.78rem;
      color: var(--text-muted);
      line-height: 1.4;
    }
html.page-who-we-serve .region-chip.highlighted {
      border-color: rgba(205,62,45,0.30);
      background: rgba(205,62,45,0.04);
    }
html.page-who-we-serve .region-chip.highlighted .region-chip-label { color: var(--brand-accent); }
html.page-who-we-serve .regions-image-col {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      aspect-ratio: 4 / 3;
    }
html.page-who-we-serve .regions-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
html.page-who-we-serve .regions-image-overlay {
      position: absolute;
      bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
      background: rgba(17,17,14,0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 4px;
      padding: 0.875rem 1.125rem;
      border: 1px solid rgba(255,255,255,0.08);
    }
html.page-who-we-serve .regions-image-overlay p {
      font-size: 0.8rem;
      color: rgba(245,244,242,0.80);
      line-height: 1.5;
    }
html.page-who-we-serve .regions-image-overlay strong {
      color: var(--brand-accent);
      font-weight: 600;
    }
/* ─── Marquee / Services Strip ─────────────────────────────── */
html.page-who-we-serve .marquee-section {
      background: var(--canvas-dark);
      padding-block: 1.125rem;
      overflow: hidden;
    }
html.page-who-we-serve .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: marquee-scroll__page-who-we-serve 36s linear infinite;
    }
@media (prefers-reduced-motion: reduce) {
html.page-who-we-serve .marquee-track { animation: none; }
}
@keyframes marquee-scroll__page-who-we-serve {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
html.page-who-we-serve .marquee-item {
      display: flex; align-items: center; gap: 1.25rem;
      padding-inline: 2rem;
      white-space: nowrap;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(245,244,242,0.50);
    }
html.page-who-we-serve .marquee-dot {
      width: 4px; height: 4px;
      background: var(--brand-accent);
      border-radius: 50%;
      opacity: 0.6;
      flex-shrink: 0;
    }
/* ─── CTA Band ──────────────────────────────────────────────── */
html.page-who-we-serve .cta-band {
      background: var(--canvas-dark);
      position: relative;
      overflow: hidden;
    }
html.page-who-we-serve .cta-band::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(205,62,45,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
html.page-who-we-serve .cta-band-inner {
      position: relative; z-index: 1;
      text-align: center;
      padding-block: clamp(4.5rem, 9vw, 7rem);
    }
html.page-who-we-serve .cta-band-inner .kicker { margin-bottom: 1rem; }
html.page-who-we-serve .cta-band-inner .display-lg {
      color: var(--text-on-dark);
      margin-bottom: 1.25rem;
    }
html.page-who-we-serve .cta-band-inner .lede {
      color: var(--text-on-dark-muted);
      margin-inline: auto;
      max-width: 60ch;
      font-size: clamp(0.975rem, 1.5vw, 1.075rem);
    }
html.page-who-we-serve .cta-band-actions {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 0.875rem;
      margin-top: 2.25rem;
    }
/* ─── Contact Form Section ──────────────────────────────────── */
html.page-who-we-serve .contact-section {
      background: var(--canvas);
    }
html.page-who-we-serve .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(3rem, 6vw, 6rem);
      align-items: start;
    }
html.page-who-we-serve .contact-details h2 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.5vw, 2rem);
      font-weight: 700;
      letter-spacing: -0.015em;
      margin-bottom: 1rem;
    }
html.page-who-we-serve .contact-details p {
      font-size: 0.975rem;
      color: var(--text-secondary);
      line-height: 1.7;
      max-width: 52ch;
    }
html.page-who-we-serve .contact-detail-list {
      margin-top: 2rem;
      display: flex; flex-direction: column; gap: 1rem;
    }
html.page-who-we-serve .contact-detail-item {
      display: flex; align-items: center; gap: 0.875rem;
    }
html.page-who-we-serve .contact-detail-icon {
      width: 36px; height: 36px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      color: var(--brand-accent);
    }
html.page-who-we-serve .contact-detail-text {
      font-size: 0.9rem;
      color: var(--text-secondary);
    }
html.page-who-we-serve .contact-form {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: clamp(1.75rem, 4vw, 2.5rem);
    }
html.page-who-we-serve .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
html.page-who-we-serve .form-group {
      display: flex; flex-direction: column; gap: 0.375rem;
      margin-bottom: 1rem;
    }
html.page-who-we-serve .form-group:last-of-type { margin-bottom: 0; }
html.page-who-we-serve .form-label {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.03em;
    }
html.page-who-we-serve .form-input,
html.page-who-we-serve .form-textarea {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--text-primary);
      background: var(--canvas);
      border: 1.5px solid var(--border);
      border-radius: 4px;
      padding: 0.65rem 0.875rem;
      width: 100%;
      transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
      min-height: 44px;
    }
html.page-who-we-serve .form-input:focus,
html.page-who-we-serve .form-textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px rgba(205,62,45,0.12);
    }
html.page-who-we-serve .form-textarea {
      resize: vertical;
      min-height: 120px;
      line-height: 1.6;
    }
html.page-who-we-serve .form-submit {
      width: 100%;
      margin-top: 1.375rem;
    }
html.page-who-we-serve .form-status {
      margin-top: 0.875rem;
      font-size: 0.875rem;
      font-weight: 500;
      border-radius: 4px;
      padding: 0.625rem 0.875rem;
      display: none;
    }
html.page-who-we-serve .form-status.success {
      display: block;
      background: rgba(22,163,74,0.10);
      color: #166534;
      border: 1px solid rgba(22,163,74,0.25);
    }
html.page-who-we-serve .form-status.error {
      display: block;
      background: rgba(205,62,45,0.08);
      color: var(--brand-accent-2);
      border: 1px solid rgba(205,62,45,0.25);
    }
/* ─── Divider ───────────────────────────────────────────────── */
html.page-who-we-serve .section-divider {
      height: 1px;
      background: var(--border);
      border: none;
      margin: 0;
    }
/* ─── Entrance Animations ───────────────────────────────────── */
html.page-who-we-serve @keyframes fade-up {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
html.page-who-we-serve .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
    }
html.page-who-we-serve .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
/* Stagger children */
html.page-who-we-serve .stagger-children > * {
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
    }
html.page-who-we-serve .stagger-children.in > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0ms; }
html.page-who-we-serve .stagger-children.in > *:nth-child(2) { opacity:1; transform:none; transition-delay: 70ms; }
html.page-who-we-serve .stagger-children.in > *:nth-child(3) { opacity:1; transform:none; transition-delay: 140ms; }
html.page-who-we-serve .stagger-children.in > *:nth-child(4) { opacity:1; transform:none; transition-delay: 210ms; }
html.page-who-we-serve .stagger-children.in > *:nth-child(5) { opacity:1; transform:none; transition-delay: 280ms; }
html.page-who-we-serve .stagger-children.in > *:nth-child(6) { opacity:1; transform:none; transition-delay: 350ms; }
html.page-who-we-serve .stagger-children.in > *:nth-child(7) { opacity:1; transform:none; transition-delay: 420ms; }
html.page-who-we-serve .stagger-children.in > *:nth-child(8) { opacity:1; transform:none; transition-delay: 490ms; }
html.page-who-we-serve .stagger-children.in > *:nth-child(n+9) { opacity:1; transform:none; transition-delay: 560ms; }
/* Situation cards stagger */
html.page-who-we-serve .situations-grid .situation-card {
      transition:
        opacity 0.55s var(--ease-out),
        transform 0.55s var(--ease-out),
        border-color var(--duration-mid) var(--ease-out),
        box-shadow var(--duration-mid) var(--ease-out);
    }
html.page-who-we-serve .situations-grid.stagger-in .situation-card:nth-child(1) { transition-delay:  30ms; }
html.page-who-we-serve .situations-grid.stagger-in .situation-card:nth-child(2) { transition-delay:  80ms; }
html.page-who-we-serve .situations-grid.stagger-in .situation-card:nth-child(3) { transition-delay: 130ms; }
html.page-who-we-serve .situations-grid.stagger-in .situation-card:nth-child(4) { transition-delay: 180ms; }
html.page-who-we-serve .situations-grid.stagger-in .situation-card:nth-child(5) { transition-delay: 230ms; }
html.page-who-we-serve .situations-grid.stagger-in .situation-card:nth-child(6) { transition-delay: 280ms; }
html.page-who-we-serve .situations-grid.stagger-in .situation-card:nth-child(7) { transition-delay: 330ms; }
html.page-who-we-serve .situations-grid.stagger-in .situation-card:nth-child(8) { transition-delay: 380ms; }
html.page-who-we-serve .situations-grid.stagger-in .situation-card:nth-child(9) { transition-delay: 430ms; }
html.page-who-we-serve .situations-grid.stagger-in .situation-card:nth-child(10) { transition-delay: 480ms; }
/* ─── Living ambient element: background grain ──────────────── */
html.page-who-we-serve body::after {
      content: '';
      position: fixed; inset: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
      opacity: 0.6;
      z-index: 1000;
    }
/* ─── Responsive ────────────────────────────────────────────── */
html.page-who-we-serve @media (max-width: 900px) {
      .sectors-inner,
      .regions-inner { grid-template-columns: 1fr; }
      .sectors-image-col { order: -1; }
      .regions-image-col { order: 1; }
      .regions-highlights { grid-template-columns: 1fr 1fr; }
    }
@media (max-width: 720px) {
html.page-who-we-serve .contact-grid { grid-template-columns: 1fr; }
html.page-who-we-serve .form-row { grid-template-columns: 1fr; }
html.page-who-we-serve .regions-highlights { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
html.page-who-we-serve .hero-stat-row .container { gap: 1rem 1.75rem; }
}
/* ─── Reduced Motion ────────────────────────────────────────── */
html.page-who-we-serve @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
      }
      .page-hero-bg { transform: none !important; }
      .reveal, .stagger-children > *, .situation-card {
        opacity: 1 !important;
        transform: none !important;
      }
    }
/* ─── Pause on hidden tab ────────────────────────────────────── */
html.page-who-we-serve body.paused *,
html.page-who-we-serve body.paused *::before,
html.page-who-we-serve body.paused *::after {
      animation-play-state: paused !important;
    }