:root {
    /* Brand teal palette — aligned to the live ProTest palette (#104A55) */
    --blue-50: #E4F0F0;   /* pale teal tint for light backgrounds */
    --blue-100: #B9DADB;
    --blue-400: #3E8E96;
    --blue-600: #176C78;  /* primary brand teal (buttons, links) */
    --blue-800: #104A55;  /* teal — matches live holding page */
    --blue-900: #0C3A43;  /* teal-deep */
    --highlight: #2AC1DE;  /* mint accent */
    --teal-ink: #082A31;
    --green-50: #EAF3DE;
    --green-600: #3B6D11;
    --green-800: #27500A;
    --amber-50: #FAEEDA;
    --amber-600: #854F0B;
    --amber-800: #633806;
    --gray-50: #F3F1EC;
    --gray-100: #D3D1C7;
    --gray-600: #5F5E5A;
    --gray-800: #444441;
    --red-600: #A32D2D;
    --highlight-hover: #48D3EA; /* CTA hover — was hardcoded in 4 places */
    --white: #ffffff;
    --off-white: #F3F1EC;  /* paper */
    --text-primary: #1a1a18;
    --text-secondary: #5a5955;
    --text-tertiary: #6b6a66; /* darkened from #9a9893 — original failed WCAG AA contrast (~2.6:1) on light backgrounds */
    --border: rgba(0,0,0,0.1);
    --border-strong: rgba(0,0,0,0.18);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    /* Single reading measure. Body prose was running at 700, 720, 760 and
       820px depending on section — sometimes varying within one page. */
    --measure: 760px;
    --radius-xl: 20px;   /* the most-used radius on the site; previously a literal */
    --radius-pill: 999px;
    /* Typography — matches OTB Concrete brand system */
    --font-display: 'Barlow', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'DM Mono', monospace;
    /* Hero photograph (board-formed concrete) embedded as a data URI */
    --hero-img: url("hero.jpg");
    --hero-img-mobile: url("hero-mobile.jpg");
  }

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

  body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--off-white);
    -webkit-font-smoothing: antialiased;
  }

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

  html { scroll-padding-top: 96px; }


  /* BURGER + MOBILE MENU */
  .nav-burger {
    display: none;
    background: transparent;
    border: 0;
    padding: 10px;
    margin-left: auto;
    margin-right: 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    z-index: 101;
  }
  .nav-burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease;
  }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-mobile {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99;
    background: var(--blue-800);
    padding: 96px 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform: translateY(-102%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  }
  .nav-mobile.open { transform: translateY(0); }
  .nav-mobile a {
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    padding: 15px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .nav-mobile a:last-of-type { border-bottom: 0; }

  /* Mobile nav group ("Concrete maturity") — native <details> accordion, no extra JS needed */
  .nav-mobile-group { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .nav-mobile-group summary {
    color: #ffffff; list-style: none; cursor: pointer;
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em;
    font-size: 12px; padding: 15px 4px; display: flex; align-items: center;
    justify-content: space-between; gap: 8px;
  }
  .nav-mobile-group summary::-webkit-details-marker { display: none; }
  .nav-mobile-group summary::after {
    content: ''; width: 9px; height: 9px; flex-shrink: 0;
    border-right: 1.5px solid rgba(255,255,255,0.6); border-bottom: 1.5px solid rgba(255,255,255,0.6);
    transform: rotate(45deg); transition: transform 0.2s ease; margin-top: -3px;
  }
  .nav-mobile-group[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
  .nav-mobile-group a {
    display: block; padding: 13px 4px 13px 18px; font-size: 11.5px;
    color: rgba(255,255,255,0.72); border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-mobile-group a:last-of-type { border-bottom: 0; padding-bottom: 16px; }

  .nav-mobile .nav-mobile-login {
    margin-top: 14px;
    background: var(--highlight);
    color: var(--teal-ink);
    border-radius: 7px;
    text-align: center;
    padding: 13px;
    font-weight: 500;
    border-bottom: 0;
  }
  body.menu-open { overflow: hidden; }

  /* Site-wide mode: "monitoring" hides the maturity-only sections (The
     Science, British Standards) and the maturity-only caption under Why
     ProTest, since they don't apply to a pure temperature-monitoring visit. */
  body.mode-monitoring #the-science,
  body.mode-monitoring #british-standards,
  body.mode-monitoring #whyProtestP3 { display: none; }

  /* NAV — transparent over the hero, fades to solid on scroll (OTB-style) */
  /* Scoped to the page-level bar. As a bare `nav` selector this rule applied
     to any <nav> anywhere on the page — a footer nav inherited position:fixed
     and landed on top of the header. */
  body > nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    padding: 0 2rem;
    padding-left: max(2rem, calc((100% - 1200px) / 2));
    padding-right: max(2rem, calc((100% - 1200px) / 2));
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, height 0.35s ease;
  }
  /* Soft gradient at the very top keeps the logo + links legible over the photo */
  nav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(8,42,49,0.55), rgba(8,42,49,0));
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s ease;
  }
  nav.scrolled {
    background: var(--blue-800);
    height: 70px;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 2px 14px rgba(0,0,0,0.18);
  }
  nav.scrolled::before { opacity: 0; }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .nav-logo-img { height: 60px; width: 60px; display: block; flex-shrink: 0; transition: height 0.35s ease, width 0.35s ease; }
  nav.scrolled .nav-logo-img { height: 54px; width: 54px; }

  .nav-links { display: flex; align-items: center; gap: 2.5rem; }
  .nav-links > a {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    transition: color 0.2s;
    position: relative;
  }
  .nav-links > a::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    width: 0; height: 2px;
    background: var(--highlight);
    transition: width 0.25s ease;
  }
  .nav-links > a:hover { color: #ffffff; }
  .nav-links > a:hover::after { width: 100%; }
  .nav-links > a.highlight { color: #ffffff; }

  /* Nav dropdown — groups related sections (e.g. "Concrete maturity") under one menu */
  .nav-dropdown { position: relative; }
  .nav-dropdown-trigger {
    display: flex; align-items: center; gap: 5px;
    background: none; border: none; padding: 0; margin: 0;
    font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.82); cursor: pointer; transition: color 0.2s;
    position: relative;
  }
  /* Same animated underline as the top-level nav links, so the dropdown
     triggers behave identically to "Who's it for" / "Contact" on hover */
  .nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    width: 0; height: 2px;
    background: var(--highlight);
    transition: width 0.25s ease;
  }
  .nav-dropdown-trigger:hover { color: #ffffff; }
  .nav-dropdown-trigger:hover::after,
  .nav-dropdown.open .nav-dropdown-trigger::after { width: 100%; }
  .nav-dropdown-caret { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.2s ease; }
  .nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }
  .nav-dropdown-menu {
    display: none;
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
    min-width: 190px; background: var(--blue-800); border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1);
    padding: 6px; flex-direction: column; gap: 2px; z-index: 110;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: flex; }
  .nav-dropdown-menu a {
    font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.78); padding: 10px 12px;
    transition: color 0.15s;
  }
  .nav-dropdown-menu a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 6px; }

  .nav-actions { display: flex; gap: 8px; align-items: center; }

  .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-md); font-size: 13px; font-family: inherit; font-weight: 500; cursor: pointer; transition: opacity 0.15s, background 0.15s; border: none; }
  .btn-primary { background: var(--blue-600); color: white; }
  .btn-primary:hover { background: var(--blue-800); }
  .btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
  .btn-outline:hover { background: var(--off-white); }
  .btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }

  /* Nav-specific button overrides for the dark teal bar */
  nav .btn-outline { color: #ffffff; border-color: rgba(255,255,255,0.3); }
  nav .btn-outline:hover { background: rgba(255,255,255,0.1); }
  /* Log in: mint accent, matching the live holding page */
  nav .nav-actions .btn-outline[href*="app.protest.io"],
  nav .nav-actions .btn-primary[href*="app.protest.io"] {
    background: var(--highlight);
    border-color: var(--highlight);
    color: var(--teal-ink);
    box-shadow: 0 4px 16px rgba(42,193,222,0.28);
  }
  nav .nav-actions .btn-outline[href*="app.protest.io"]:hover,
  nav .nav-actions .btn-primary[href*="app.protest.io"]:hover {
    background: var(--highlight-hover);
    border-color: var(--highlight-hover);
    color: var(--teal-ink);
    box-shadow: 0 6px 22px rgba(42,193,222,0.45);
    transform: translateY(-1px);
  }
  nav .btn-primary { background: #ffffff; color: var(--blue-800); }
  nav .btn-primary:hover { background: rgba(255,255,255,0.85); }

  /* HERO — full-bleed concrete photo, copy pushed to the right (OTB-style) */
  .hero {
    position: relative;
    background: var(--blue-900) center / cover no-repeat;
    background-image: var(--hero-img);
    min-height: 660px;
    padding: 4rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    /* Top-anchored, NOT centred. With justify-content:center the copy only
       pins to the top padding while it is tall enough to overflow the 660px
       box; any page whose hero copy comes in shorter gets centred instead
       and the trust pill drifts down by half the slack. Anchoring makes the
       pill land at padding-top + 80px on every page regardless of copy
       length, and min-height still guarantees the floor. */
    justify-content: flex-start;
    overflow: hidden;
  }
  /* Scrim: heavier on the right for the copy, and along the bottom for the stats */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      /* left vignette: buries the hard column edge in the photograph */
      linear-gradient(90deg, rgba(8,42,49,0.62) 0%, rgba(8,42,49,0.34) 14%, rgba(8,42,49,0) 30%),
      linear-gradient(0deg, rgba(8,42,49,0.86) 0%, rgba(8,42,49,0.46) 18%, rgba(8,42,49,0.14) 40%),
      linear-gradient(270deg, rgba(8,42,49,0.74) 0%, rgba(8,42,49,0.52) 45%, rgba(8,42,49,0.34) 100%),
      linear-gradient(rgba(8,42,49,0.34), rgba(8,42,49,0.34));
  }

  .hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .hero-copy { max-width: 620px; padding-top: 80px; text-align: right; }
  /* Right-align the pieces that are flex containers or block elements */
  .hero-copy .hero-eyebrow { justify-content: flex-end; }
  .hero-copy .loader { margin-left: auto; margin-right: 0; }
  .hero-copy .hero-sub,
  .hero-copy p { margin-left: auto; margin-right: 0; }
  .hero-copy .hero-ctas { justify-content: flex-end; }

  /* Trust pill — credibility badge above the hero headline */
  .trust-pill {
    display: inline-flex; align-items: center; gap: 9px;
    background: #E4EDEE; border-radius: var(--radius-pill); padding: 10px 20px;
    font-family: var(--font-mono); text-transform: uppercase;
    letter-spacing: 0.12em; font-size: 11.5px; font-weight: 500;
    color: var(--blue-800); line-height: 1;
  }
  .trust-pill svg { width: 13px; height: 13px; flex-shrink: 0; }

  @media (max-width: 520px) {
    .trust-pill { font-size: 10px; letter-spacing: 0.07em; padding: 9px 15px; gap: 7px; text-align: left; }
    .trust-pill svg { width: 12px; height: 12px; }
  }

  /* Use-case pills: responsive grid below the copy */
  .hero-pills {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 24px auto 0;
  }
  .hero-pills .use-case-pills {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }
  .hero-pills .use-case-pills .badge-gray { text-align: center; justify-content: center; }
  @media (max-width: 960px) {
    .hero-pills .use-case-pills { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 520px) {
    .hero-pills .use-case-pills { grid-template-columns: repeat(2, 1fr); }
  }

  /* Stats overlaid on the bottom of the hero photo */
  .hero-stats {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 1.6rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.16);
    display: flex;
    justify-content: center;
    gap: 0;
  }

  /* Lean hero: copy only, no pill row and no stat strip underneath. With
     nothing below the CTA the 660px floor leaves dead photo, so height
     follows the content instead. Vertical position is handled by the
     top-anchoring on .hero above, so it matches the other pages. */
  .hero-lean { min-height: 0; padding-bottom: 3.25rem; }

  /* Light treatment for copy sitting over the photo */
  .hero h1, .hero-copy h1 { color: #ffffff; }
  .hero .hero-sub { color: rgba(255,255,255,0.82); }
  .hero h1 span { color: var(--highlight); }

  /* Hero primary CTA: mint highlight, matching the Log in button treatment */
  .hero-cta {
    background: var(--highlight) !important;
    border-color: var(--highlight) !important;
    color: var(--teal-ink) !important;
    box-shadow: 0 4px 16px rgba(42,193,222,0.28);
  }
  .hero-cta:hover {
    background: var(--highlight-hover) !important;
    border-color: var(--highlight-hover) !important;
    box-shadow: 0 6px 22px rgba(42,193,222,0.45);
    transform: translateY(-1px);
  }

  .hero .btn-outline {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    border-color: rgba(255,255,255,0.45);
  }
  .hero .btn-outline:hover { background: rgba(255,255,255,0.16); }
  .hero .use-case-pills .badge-gray {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    backdrop-filter: blur(2px);
  }
  .hero .badge-blue {
    background: rgba(255,255,255,0.92);
    color: var(--blue-800);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-xl);
  }
  .badge svg { width: 11px; height: 11px; stroke: currentColor; fill: none; flex-shrink: 0; }
  .badge-blue { background: var(--blue-50); color: var(--blue-800); }
  .badge-green { background: var(--green-50); color: var(--green-800); }
  .badge-gray { background: var(--gray-50); color: var(--gray-800); }
  .badge-amber { background: var(--amber-50); color: var(--amber-800); }

  .hero h1 {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.8px;
    margin: 14px 0 16px;
  }
  .hero-sub {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 420px;
    margin-bottom: 24px;
  }

  .hero-ctas { display: flex; gap: 10px; margin-bottom: 0; flex-wrap: wrap; }

  /* Loading bar */
  .loader{margin:2px 0 20px;max-width:100%}
  .loader-track{display:flex;gap:4px;padding:7px 8px;border:1.5px solid rgba(255,255,255,0.14);border-radius:var(--radius-pill)}
  .loader-seg{flex:1 1 0;height:18px;border-radius:3px;background:rgba(42,193,222,0.10);overflow:hidden;position:relative}
  .seg-fill{position:absolute;inset:0;width:0;background:var(--highlight);transition:width 0s linear}
  @media (max-width:560px){.loader-seg{height:15px}.loader-track{gap:3px}}

  .use-case-pills { display: flex; flex-wrap: wrap; gap: 7px; }

  /* DASHBOARD CARD */
  .dashboard-card {
    width: 280px;
    flex-shrink: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }

  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .dashboard-header span { font-size: 13px; font-weight: 500; }

  .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green-600);
    display: inline-block;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* Subtle "live" pulse for sensor halo rings on the slab drawing */
  @keyframes ptSensorPulse {
    0%, 60%, 100% { opacity: 0.25; transform: scale(1); }
    78% { opacity: 0.6; transform: scale(1.5); }
  }
  .pt-sensor-halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: ptSensorPulse 4.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .pt-sensor-halo { animation: none; opacity: 0.4; }
  }

  .metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .metric {
    background: var(--off-white);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
  }
  .metric-label { font-size: 10px; color: var(--text-tertiary); margin-bottom: 2px; }
  .metric-value { font-size: 20px; font-weight: 500; line-height: 1.2; }
  .metric-value small { font-size: 11px; color: var(--text-tertiary); font-weight: 400; }
  .metric-value.blue { color: var(--blue-600); }
  .metric-value.green { color: var(--green-600); }
  .metric-value.amber { color: var(--amber-600); }

  .chart-label { font-size: 10px; color: var(--text-tertiary); margin-bottom: 6px; font-family: 'DM Mono', monospace; }

  .mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 36px;
    margin-bottom: 10px;
  }
  .mini-chart div { flex: 1; border-radius: 2px; }

  .dashboard-footer {
    font-size: 11px;
    color: var(--green-600);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .dashboard-footer svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }

  .auto-report {
    margin-top: 10px;
    background: var(--green-50);
    border: 1px solid #C0DD97;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
  }
  .auto-report-title { font-size: 11px; font-weight: 500; color: var(--green-800); display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
  .auto-report-title svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
  .auto-report p { font-size: 11px; color: var(--green-600); }

  /* STAT BAR */
  .stat-bar {
    background: var(--blue-900);
    padding: 30px 2rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.09);
    display: flex;
    justify-content: center;
    gap: 0;
  }
  .stat-item {
    flex: 1;
    text-align: center;
    max-width: 220px;
  }
  .stat-item + .stat-item {
    border-left: 1px solid rgba(255,255,255,0.12);
  }
  .stat-value { font-size: 20px; font-weight: 500; color: var(--blue-50); }
  .stat-label { font-size: 11px; color: #9BCBCE; margin-top: 2px; }

  /* SECTIONS */
  section { border-bottom: 1px solid var(--border); }

  .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
  }

  .section-inner.bg-white { background: var(--white); }

  .section-tag { margin-bottom: 8px; }
  .section-tag .badge {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
  }
  .section-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 1.5rem; }
  .section-title::after {
    content: "";
    display: block;
    width: 48px; height: 3px;
    background: var(--highlight);
    border-radius: 2px;
    margin-top: 12px;
  }

  /* HOW IT WORKS */
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .step-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
  }

  .step-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

  .step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-800);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .step-title { font-size: 13px; font-weight: 500; }
  .step-body { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 16px; }

  .step-icon {
    background: var(--off-white);
    border-radius: var(--radius-sm);
    padding: 14px;
    text-align: center;
  }
  .step-icon svg { width: 28px; height: 28px; stroke-width: 1.5; fill: none; }

  /* THE SCIENCE */
  .science-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 2rem;
  }
  .science-step {
    flex: 1;
    min-width: 0;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
  }
  .science-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: var(--blue-50);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
  }
  .science-icon svg { width: 21px; height: 21px; stroke: var(--blue-600); fill: none; stroke-width: 1.6; }
  .science-step-title { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
  .science-step-body { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
  .science-flow-arrow {
    display: flex; align-items: center; justify-content: center;
    color: var(--blue-400); font-size: 24px;
    padding: 0 14px; flex-shrink: 0;
  }

  /* Cross-reference to OTB Concrete's separate mix-design/thermal-crack service —
     deliberately styled as a distinct "referral" card, not blended into PROTEST's
     own copy, since it's a different product on a different site (otbc.io). */
  .otb-crossref {
    max-width: var(--measure);
    background: var(--white);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 1.5rem;
  }
  .otb-crossref-label {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary);
    margin-bottom: 8px;
  }
  .otb-crossref-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 12px; }
  .otb-crossref-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 500; color: var(--blue-600);
  }
  .otb-crossref-link:hover { color: var(--blue-800); text-decoration: underline; }
  .otb-crossref-link svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* WHO IT'S FOR */
  .roles-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  .role-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .role-card:hover { border-color: var(--blue-400); box-shadow: 0 2px 10px rgba(23,108,120,0.1); }

  .role-icon {
    width: 34px; height: 34px;
    background: var(--off-white);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }
  .role-icon svg { width: 18px; height: 18px; stroke: var(--text-secondary); fill: none; stroke-width: 1.5; }
  .role-icon.blue-icon { background: var(--blue-50); }
  .role-icon.blue-icon svg { stroke: var(--blue-600); }

  .role-title { font-size: 13px; font-weight: 500; margin-bottom: 5px; }
  .role-body { font-size: 12px; color: var(--text-secondary); line-height: 1.55; }

  /* CONTEST BANNER */
  .contest-banner {
    background: var(--white);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.75rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  .contest-icon {
    width: 52px; height: 52px;
    background: var(--blue-50);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .contest-icon svg { width: 26px; height: 26px; stroke: var(--blue-600); fill: none; stroke-width: 1.5; }

  .contest-content { flex: 1; min-width: 0; }
  .contest-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
  .contest-title { font-size: 15px; font-weight: 500; }
  .contest-body { font-size: 13px; color: var(--text-secondary); line-height: 1.65; max-width: 540px; }

  /* CTA PANELS */
  .cta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--white);
  }

  .cta-panel { border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; }
  .cta-panel .btn { margin-top: auto; align-self: flex-start; }
  .cta-panel.featured { background: var(--blue-50); }
  .cta-panel.standard { background: var(--off-white); border: 1px solid var(--border); }
  .cta-panel svg { width: 22px; height: 22px; fill: none; stroke-width: 1.5; margin-bottom: 10px; display: block; }
  .cta-panel.featured svg { stroke: var(--blue-800); }
  .cta-panel.standard svg { stroke: var(--text-secondary); }
  .cta-title { font-size: 14px; font-weight: 500; margin-bottom: 5px; }
  .cta-panel.featured .cta-title { color: var(--blue-800); }
  .cta-body { font-size: 12px; line-height: 1.6; margin-bottom: 16px; flex: 1; }
  .callback-form { display: flex; flex-direction: column; gap: 8px; }
  .field-label { font-size: 12px; font-weight: 500; color: var(--text-primary); margin-bottom: -2px; }
  .callback-form input {
    font-family: inherit;
    font-size: 13px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--text-primary);
    width: 100%;
  }
  .callback-form input::placeholder { color: var(--text-tertiary); }
  .callback-form input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(23,108,120,0.15); }

  /* Scheduler */
  .sched-section-label { font-size: 12px; font-weight: 500; color: var(--text-primary); margin: 14px 0 8px; }
  .sched-dates { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .sched-date { flex: 0 0 auto; min-width: 60px; padding: 8px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--white); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
  .sched-date .d-dow { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
  .sched-date .d-day { font-size: 17px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
  .sched-date .d-mon { font-size: 10px; text-transform: uppercase; color: var(--text-tertiary); }
  .sched-date:hover { border-color: var(--blue-600); }
  .sched-date.sel { background: var(--blue-600); border-color: var(--blue-600); }
  .sched-date.sel .d-dow, .sched-date.sel .d-day, .sched-date.sel .d-mon { color: #fff; }
  .sched-date.active { background: var(--blue-600); border-color: var(--blue-600); }
  .sched-date.active .d-dow, .sched-date.active .d-day, .sched-date.active .d-mon { color: #fff; }
  .sched-date.has-sel:not(.active) { border-color: var(--blue-600); box-shadow: inset 0 0 0 1px var(--blue-600); }
  .sched-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .sched-slot { padding: 9px 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--white); cursor: pointer; font-size: 13px; color: var(--text-primary); text-align: center; transition: border-color .15s, background .15s, color .15s; }
  .sched-slot:hover { border-color: var(--blue-600); }
  .sched-slot.sel { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
  .sched-slot.unavail { opacity: .4; cursor: not-allowed; text-decoration: line-through; pointer-events: none; }
  .callback-form textarea { font-family: inherit; font-size: 13px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--white); color: var(--text-primary); width: 100%; resize: vertical; min-height: 66px; }
  .callback-form textarea::placeholder { color: var(--text-tertiary); }
  .callback-form textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(23,108,120,0.15); }
  .name-row { display: flex; gap: 8px; }
  .name-row > div { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .sched-day { margin-bottom: 12px; }
  .sched-day-label { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
  .sched-day-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

  /* MODAL */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,30,28,0.55);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: modalIn 0.18s ease-out;
  }
  @keyframes modalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .modal-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal-close:hover { color: var(--text-primary); }
  .modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--blue-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
  }
  .cta-panel.featured .cta-body { color: var(--blue-600); }
  .cta-panel.standard .cta-body { color: var(--text-secondary); }

  /* FOOTER — styled after OTB Concrete's footer */
  footer {
    position: relative;
    background: var(--blue-800);
    padding: 3rem 2rem 4.5rem;
    padding-bottom: max(4.5rem, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }
  .footer-brand { display: flex; align-items: center; gap: 14px; }
  .footer-logo { height: 52px; width: 52px; border-radius: var(--radius-md); display: block; flex-shrink: 0; }
  .footer-logo-lockup { height: 56px; width: auto; display: block; flex-shrink: 0; }
  .footer-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff; letter-spacing: 0.01em; line-height: 1.1; text-align: left; }
  .footer-brand-sub { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.5); text-align: left; margin-top: 2px; }

  .footer-address { font-size: 14px; color: rgba(255,255,255,0.92); line-height: 1.6; }
  .footer-address a { color: inherit; text-decoration: none; transition: color 0.2s; }
  .footer-address a:hover { color: var(--highlight); }

  .footer-email, .footer-linkedin {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; transition: color 0.2s;
  }
  .footer-email svg, .footer-linkedin svg { flex-shrink: 0; display: block; width: 16px; height: 16px; stroke: var(--highlight); fill: none; }
  .footer-linkedin svg { fill: var(--highlight); stroke: none; }
  .footer-email:hover, .footer-linkedin:hover { color: var(--highlight); }

  .footer-top {
    position: absolute;
    right: 2rem; bottom: 2rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .footer-top:hover { background: var(--highlight); color: var(--blue-800); }
  .footer-top svg { width: 18px; height: 18px; }

  /* WRAPPER for full-width sections */

  /* Dark sections — used as punctuation (statement + closing CTA), not alternation */
  .section-dark { background: var(--blue-800); border-bottom: 1px solid rgba(0,0,0,0.25); }
  .section-dark .section-title { color: #ffffff; }
  .section-dark .badge-blue { background: rgba(42,193,222,0.16); color: var(--highlight); }
  .section-dark .badge-amber { background: rgba(255,255,255,0.14); color: #ffffff; }
  .full-width-section { border-bottom: 1px solid var(--border); }
  .full-width-section.white { background: var(--white); }

  /* ── RESPONSIVE LAYOUT ── */
  @media (max-width: 860px) {
    /* Match the shorter mobile nav height so anchor-jumps (e.g. tapping
       "The Science" in the menu) land flush under the bar instead of
       leaving a gap that reveals the previous section behind it. */
    html { scroll-padding-top: 66px; }

    /* Nav: drop secondary links so the bar fits (Log in button stays) */
    nav { padding: 0 1.25rem; height: 66px; }
    nav.scrolled { height: 60px; }
    .nav-logo-img { height: 46px; width: 46px; }
    nav.scrolled .nav-logo-img { height: 46px; width: 46px; }
    .nav-links { display: none; }
    .nav-burger { display: flex; }
    .nav-actions { display: none; }

    /* Hero: copy spans the column, photo still fills the background.
       Swap in a smaller, more compressed image — phones don't need the
       full desktop-resolution photo, and this roughly halves the bytes
       downloaded over cellular for this section. */
    .hero { min-height: 620px; padding: 5.5rem 1.25rem 3rem; background-image: var(--hero-img-mobile); }
    /* Re-declared after .hero above, which resets the lean height */
    .hero-lean { min-height: 0; }
    .hero::before { background: linear-gradient(90deg, rgba(8,42,49,0.55) 0%, rgba(8,42,49,0.30) 16%, rgba(8,42,49,0) 34%), linear-gradient(180deg, rgba(8,42,49,0.46) 0%, rgba(8,42,49,0.34) 38%, rgba(8,42,49,0.82) 100%), linear-gradient(270deg, rgba(8,42,49,0.34) 0%, rgba(8,42,49,0.16) 70%, rgba(8,42,49,0.08) 100%), linear-gradient(rgba(8,42,49,0.40), rgba(8,42,49,0.40)); }
    .hero-content { justify-content: flex-end; }
    .hero-copy { max-width: 100%; width: 100%; text-align: right; padding-top: 0; }
    /* neutralise the inline max-widths so the copy reaches the right edge */
    .hero-copy .hero-sub, .hero-copy p { max-width: none !important; }
    .hero-copy .hero-eyebrow { justify-content: flex-end; }
    .hero-copy .loader { margin-left: auto; margin-right: 0; }
    .hero-copy .hero-sub, .hero-copy p { margin-left: auto; margin-right: 0; }
    .hero-copy .hero-ctas { justify-content: flex-end; }
    .hero h1 { font-size: 32px; }
    .hero-sub { max-width: none; }

    /* Hero stats: wrap into a 2x2 grid over the photo */
    .hero-stats { flex-wrap: wrap; gap: 16px 8px; margin-top: 1.25rem; padding-top: 1.25rem; }
    .hero-stats .stat-item { flex: 1 1 45%; max-width: none; }
    .hero-stats .stat-item + .stat-item { border-left: none; }

    /* Stat bar: wrap into a 2x2 grid */
    .stat-bar { flex-wrap: wrap; gap: 16px 8px; padding: 18px 1.25rem; }
    .stat-item { flex: 1 1 45%; max-width: none; }
    .stat-bar .stat-item + .stat-item { border-left: none; }

    /* Section padding */
    .section-inner { padding: 2.5rem 1.25rem; }

    /* Science flow: stack the three steps, drop the arrows */
    .science-flow { flex-direction: column; gap: 12px; }
    .science-flow-arrow { display: none; }

    /* Lower-carbon stats: single column */
    .carbon-block { padding: 1.5rem; }
    .carbon-stats { grid-template-columns: 1fr; }

    /* Credibility band & roles grid: 2 columns */
    .cred-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .roles-grid { grid-template-columns: 1fr; }

    /* CTA panels: single column */
    .cta-grid { grid-template-columns: 1fr; padding: 1.5rem; }

    /* Contest banner: a bit tighter */
    .contest-banner { padding: 1.5rem 1.25rem; }
  }

  @media (max-width: 520px) {
    .hero h1 { font-size: 28px; }

    /* Stat bar: one item per row */
    .stat-item { flex: 1 1 100%; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 10px; }
    .stat-item:first-child { border-top: none; padding-top: 0; }

    /* Hero stats stay 2-up here, so the whole first ROW needs no top border —
       otherwise item 2 draws a stray line just under the section's own
       border-top. Items 3-4 keep theirs as the row divider. */
    .hero-stats .stat-item:nth-child(-n+2) { border-top: none; padding-top: 0; }

    /* Credibility band & roles grid: single column */
    .cred-band, .roles-grid { grid-template-columns: 1fr; }
  }


    .hiw-wrap { max-width:1100px; margin:0 auto; }
    .hiw-steps { display:flex; align-items:flex-start; }
    .hiw-step { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
    .hiw-num-row { display:flex; align-items:center; gap:8px; }
    .hiw-num  { width:24px; height:24px; border-radius:50%; background:var(--blue-600); color:#ffffff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .hiw-lbl  { font-size:11px; font-weight:700; letter-spacing:0.09em; color:var(--blue-600); text-transform:uppercase; white-space:nowrap; }
    .hiw-circle { width:120px; height:120px; border-radius:50%; background:var(--blue-50); border:1.5px solid var(--blue-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .hiw-circle svg { width:70px; height:70px; color:var(--blue-600); }
    .hiw-arrow { align-self:center; flex-shrink:0; width:40px; display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--blue-400); line-height:1; }
    .hiw-desc { font-size:12px; color:var(--text-secondary); line-height:1.7; padding:0 6px; }

    @media (max-width: 860px) {
      .hiw-steps { flex-direction:column; gap:24px; }
      .hiw-step { align-items:flex-start; text-align:left; gap:10px; }
      .hiw-arrow { transform:rotate(90deg); align-self:flex-start; margin-left:18px; width:auto; }
      .hiw-circle { width:64px; height:64px; }
      .hiw-circle svg { width:46px; height:46px; }
      .hiw-desc { padding:0; }
    }

    /* ---------- Motion / dynamic ----------
       Fixed: these rules were previously trapped inside the mobile media query
       above (missing closing brace), so .reveal/.role-card hover-lift/fadeUp
       only ever applied under 860px. Moved out so they apply at all sizes. */
    @keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
    .hero-copy  { animation: fadeUp .8s cubic-bezier(.2,.6,.2,1) both; }
    .hero-pills { animation: fadeUp .8s cubic-bezier(.2,.6,.2,1) .16s both; }
    .hero-stats { animation: fadeUp .8s cubic-bezier(.2,.6,.2,1) .3s both; }

    .reveal { opacity:0; transform:translateY(22px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
    .reveal.in { opacity:1; transform:none; }

    .role-card, .cta-panel { transition: transform .25s ease, box-shadow .25s ease; }
    .role-card:hover { transform: translateY(-5px); }

    @media (prefers-reduced-motion: reduce) {
      .hero-copy, .hero-pills, .hero-stats { animation: none; }
      .reveal { opacity:1; transform:none; transition:none; }
      .role-card:hover { transform:none; }
    }

    /* ---------- How it works: maturity / temperature-monitoring toggle ---------- */
    .hiw-toggle {
      display: inline-flex; gap: 3px; padding: 3px;
      background: var(--gray-50); border: 1px solid var(--border);
      border-radius: var(--radius-pill); margin-bottom: 28px;
    }
    .hiw-toggle-btn {
      font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.08em;
      padding: 9px 16px; border-radius: var(--radius-pill); border: none; background: transparent;
      color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s;
    }
    .hiw-toggle-btn.active { background: var(--blue-600); color: #ffffff; }
    .hiw-toggle-btn:not(.active):hover { color: var(--text-primary); }
    .hiw-steps [data-flow="maturity-only"] { display: flex; }
    .hiw-steps [data-flow="monitoring-only"] { display: none; }
    .hiw-steps.mode-monitoring [data-flow="maturity-only"] { display: none; }
    .hiw-steps.mode-monitoring [data-flow="monitoring-only"] { display: flex; }
    @media (max-width: 860px) {
      .hiw-steps [data-flow="maturity-only"] { display: flex; }
      .hiw-steps [data-flow="monitoring-only"] { display: none; }
      .hiw-steps.mode-monitoring [data-flow="maturity-only"] { display: none; }
      .hiw-steps.mode-monitoring [data-flow="monitoring-only"] { display: flex; }
    }
  
  /* ── FAQ accordion ────────────────────────────────────────────────── */
  .faq-list { max-width: var(--measure); border-top: 1px solid var(--border); }
  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-item summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
      font-family: var(--font-body); font-size: 16.5px; font-weight: 500; color: var(--text-primary); line-height: 1.5; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { color: var(--blue-600); }
  .faq-item summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px;
      margin-top: -6px; border-right: 2px solid var(--blue-600); border-bottom: 2px solid var(--blue-600);
      transform: rotate(45deg); transition: transform 0.2s ease; }
  .faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
  .faq-item .faq-answer { padding: 0 40px 20px 0; }
  .faq-item .faq-answer p { margin: 0 0 0.85rem; color: var(--text-secondary); font-size: 15.5px; line-height: 1.75; }
  .faq-item .faq-answer p:last-child { margin-bottom: 0; }
  .faq-item .faq-answer a { color: var(--blue-600); font-weight: 500; }
  @media (max-width: 640px) {
    .faq-item summary { font-size: 15.5px; padding-right: 32px; }
    .faq-item .faq-answer { padding-right: 8px; }
  }

  /* ── Comparison table (cubes / generic maturity / PROTEST) ────────── */
  .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.5rem 0 1rem;
      border: 1px solid var(--border); border-radius: var(--radius-md);
      /* overflow-y, NOT the overflow shorthand. The shorthand clipped both axes,
         which silently cancelled the overflow-x:auto above it and made the
         PROTEST column unreachable on any viewport narrower than 720px. */
      overflow-y: hidden; }
  .compare-table { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; font-size: 14.5px; }
  .compare-table col.compare-label-col { width: 25%; }
  .compare-table col.compare-data-col { width: 25%; }
  .compare-table th, .compare-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
  .compare-table thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-tertiary); font-weight: 500; background: var(--off-white); border-bottom: 1px solid var(--border); }
  .compare-table thead th.compare-col-protest { color: #ffffff; background: var(--blue-800); border-bottom: 1px solid var(--blue-800); }
  .compare-table th.compare-row-label { color: var(--text-primary); font-weight: 500; font-family: var(--font-body);
      font-size: 14.5px; text-transform: none; letter-spacing: normal; background: var(--white); line-height: 1.4; }
  .compare-table td.compare-col-protest { background: #EAF6F8; }
  .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
  .compare-table td { color: var(--text-secondary); line-height: 1.55; }
  .compare-table .lead { font-weight: 600; }
  .compare-table .lead-no { color: var(--text-tertiary); }
  .compare-table .lead-mid { color: var(--text-primary); }
  .compare-table .lead-yes { color: var(--blue-600); }
  .compare-note { font-size: 13px; color: var(--text-tertiary); margin-top: 0.6rem; line-height: 1.6; }
  @media (max-width: 640px) {
    .compare-table { font-size: 13.5px; min-width: 660px; }
    .compare-table th, .compare-table td { padding: 12px 14px; }
  }


  /* ── Breadcrumb (interior-page hero, replaces the generic tagline) ──── */
  .crumb { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
      text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:12px; }
  .crumb a { color:rgba(255,255,255,0.78); text-decoration:none; }
  .crumb a:hover { color:var(--highlight); }

  /* ── Hardware grid ─────────────────────────────────────────────── */
  .hw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .hw-card { background:var(--white); border:1px solid var(--border);
      border-radius:var(--radius-md); padding:24px 26px; }
  .hw-tag { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.1em;
      font-size:10.5px; color:var(--blue-600); margin-bottom:10px; }
  .hw-card h3 { font-family:var(--font-display); font-weight:600; font-size:18px;
      color:var(--text-primary); margin-bottom:8px; }
  .hw-card p { font-size:14.5px; line-height:1.7; color:var(--text-secondary); margin:0; }

  .hw-grid-4 { grid-template-columns:repeat(4,1fr); gap:16px; }
  .hw-grid-4 .hw-card { padding:22px 20px; }
  .hw-grid-4 .hw-card h3 { font-size:17px; }
  .hw-grid-4 .hw-card p { font-size:14px; }
  @media (max-width:1100px){ .hw-grid-4 { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:900px){ .hw-grid { grid-template-columns:1fr; } }
  @media (max-width:640px){ .hw-grid-4 { grid-template-columns:1fr; } }
  /* ── Shared header ───────────────────────────────────────────── */
  .nav-links a.current { color:#fff; }
  .nav-links a.current::after { width:100%; }


  /* ── Path cards on the home page ─────────────────────────────── */
  .paths { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:0.5rem; }
  .path-card { display:block; text-decoration:none; background:var(--white);
      border:1px solid var(--border); border-radius:var(--radius-md); padding:28px 30px;
      transition:border-color .2s, box-shadow .2s, transform .2s; }
  .path-card:hover { border-color:var(--blue-600); box-shadow:0 10px 30px rgba(0,0,0,0.07);
      transform:translateY(-2px); }
  .path-card .badge { margin-bottom:14px; }
  .path-card h3 { font-family:var(--font-display); font-weight:700; font-size:22px;
      color:var(--blue-900); margin-bottom:9px; }
  .path-card p { font-size:15px; line-height:1.7; color:var(--text-secondary); margin-bottom:14px; }
  .path-card ul { list-style:none; margin:0 0 16px; padding:0; }
  .path-card li { position:relative; padding-left:18px; font-size:14px; line-height:1.65;
      color:var(--text-secondary); margin-bottom:4px; }
  .path-card li::before { content:''; position:absolute; left:2px; top:9px; width:5px; height:5px;
      border-radius:50%; background:var(--highlight); }
  .path-go { font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em;
      text-transform:uppercase; color:var(--blue-600); display:inline-flex; align-items:center; gap:7px; }
  .path-go svg { width:13px; height:13px; }

  /* ── Long-form article body ──────────────────────────────────── */
  .prose { max-width: var(--measure); }
  .prose h3 { font-family:var(--font-display); font-weight:600; font-size:19px;
      margin:1.9rem 0 0.55rem; color:var(--text-primary); }
  .prose p { margin-bottom:1.05rem; color:var(--text-secondary); font-size:16px; line-height:1.75; }
  .prose p strong { color:var(--text-primary); font-weight:500; }
  .prose ul { margin:0 0 1.15rem; padding:0; list-style:none; }
  .prose li { position:relative; padding-left:20px; margin-bottom:0.55rem;
      color:var(--text-secondary); font-size:16px; line-height:1.7; }
  .prose li::before { content:''; position:absolute; left:2px; top:11px; width:5px; height:5px;
      border-radius:50%; background:var(--highlight); }
  .prose li strong { color:var(--text-primary); font-weight:500; }

  .mech { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:1.5rem 0 1.75rem; }
  .mech-card { background:var(--off-white); border:1px solid var(--border);
      border-radius:var(--radius-md); padding:20px; }
  .mech-tag { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.1em;
      font-size:10.5px; color:var(--blue-600); margin-bottom:8px; }
  .mech-card h4 { font-family:var(--font-display); font-weight:600; font-size:16px;
      margin-bottom:7px; color:var(--text-primary); }
  .mech-card p { font-size:14.5px; line-height:1.65; margin:0; color:var(--text-secondary); }

  .callout { background:var(--blue-50); border-left:3px solid var(--blue-600);
      border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:18px 22px; margin:1.6rem 0; }
  .callout p { margin:0; font-size:15px; color:#12414a; line-height:1.7; }
  .callout p + p { margin-top:0.7rem; }

  .standards { background:var(--off-white); border:1px solid var(--border);
      border-radius:var(--radius-md); padding:22px 24px; margin:1.9rem 0; }
  .standards h4 { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.1em;
      font-size:11px; color:var(--blue-600); margin-bottom:12px; font-weight:500; }
  .standards dt { font-weight:500; font-size:14.5px; color:var(--text-primary); margin-top:11px; }
  .standards dt:first-child { margin-top:0; }
  .standards dd { margin:2px 0 0; font-size:14px; color:var(--text-secondary); line-height:1.6; }

  @media (max-width:760px){
    .paths { grid-template-columns:1fr; }
    .mech { grid-template-columns:1fr; }
  }

  /* ══════════════════════════════════════════════════════════════════════
     FOCUS VISIBILITY
     There was no :focus-visible rule anywhere, so keyboard users got the UA
     default — a 1px near-black outline, effectively invisible on the dark
     teal nav and on the teal buttons. One ring, offset so it clears rounded
     corners, in a colour that reads on both light and dark ground.
     ══════════════════════════════════════════════════════════════════════ */
  :focus-visible {
    outline: 3px solid var(--highlight);
    outline-offset: 2px;
    border-radius: 3px;
  }
  /* On the teal bar the mint ring can sit close in value; add a dark halo */
  nav :focus-visible,
  .hero :focus-visible,
  footer :focus-visible {
    outline-color: var(--highlight);
    box-shadow: 0 0 0 5px rgba(8,42,49,0.55);
  }
  /* Mouse users keep the clean look */
  :focus:not(:focus-visible) { outline: none; }

  /* ══════════════════════════════════════════════════════════════════════
     BUTTON SIZING
     The three contact-panel buttons rendered at 32 / 34 / 37px because two
     are <button> (line-height: normal) and one is <a> (line-height: 1.2),
     and because an inline style dropped them to 12px/8px padding. A fixed
     line-height makes the elements agree; min-height carries them over the
     44px touch minimum on small screens.
     ══════════════════════════════════════════════════════════════════════ */
  .btn { line-height: 1.2; text-decoration: none; }
  .cta-panel .btn { font-size: 13px; padding: 10px 16px; }

  @media (max-width: 860px) {
    .btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .cta-panel .btn { min-height: 44px; font-size: 14px; padding: 12px 18px; }
    .nav-burger { min-width: 44px; min-height: 44px; }
    .modal-close { width: 44px; height: 44px; margin: -8px -8px 0 0; }
    /* Footer links were 22px tall — pad the hit area without moving the text */
    .footer-email, .footer-linkedin, .footer-address a {
      display: inline-flex; align-items: center; min-height: 44px;
    }
  }

  /* ══════════════════════════════════════════════════════════════════════
     CONTACT MODALS
     openSchedule() / openCallback() were wired to onclick on every page but
     never defined, and no modal markup existed — both primary CTAs were dead
     site-wide.
     ══════════════════════════════════════════════════════════════════════ */
  .modal-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(8,42,49,0.62);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }
  .modal-backdrop.open { opacity: 1; visibility: visible; }

  .modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    width: 100%; max-width: 440px;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    padding: 28px 28px 24px;
    box-shadow: 0 24px 60px rgba(8,42,49,0.28);
    transform: translateY(12px);
    transition: transform .22s ease;
  }
  .modal-backdrop.open .modal { transform: none; }

  .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .modal h2 {
    font-family: var(--font-display); font-weight: 700; font-size: 22px;
    color: var(--text-primary); margin: 0 0 6px;
  }
  .modal-intro { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 18px; }

  .modal-close {
    flex-shrink: 0; width: 36px; height: 36px; margin: -6px -6px 0 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    border-radius: var(--radius-sm); color: var(--text-secondary);
  }
  .modal-close:hover { background: var(--off-white); color: var(--text-primary); }
  .modal-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

  .modal-field { margin-bottom: 14px; }
  .modal-field label {
    display: block; font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-secondary); margin-bottom: 6px;
  }
  .modal-field input, .modal-field textarea, .modal-field select {
    width: 100%; font-family: var(--font-body); font-size: 15px;
    color: var(--text-primary); background: var(--white);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 11px 12px; min-height: 44px;
  }
  .modal-field textarea { min-height: 92px; resize: vertical; }
  .modal-field input:focus, .modal-field textarea:focus, .modal-field select:focus {
    border-color: var(--blue-600);
  }
  .modal-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; }
  .modal-actions .btn { min-height: 44px; padding: 12px 20px; font-size: 14px; }
  .modal-note { font-size: 12px; color: var(--text-tertiary); margin: 14px 0 0; line-height: 1.5; }
  .modal-status { font-size: 14px; margin: 14px 0 0; line-height: 1.6; }
  .modal-status.ok { color: var(--green-600); }
  .modal-status.err { color: var(--red-600); }

  body.modal-open { overflow: hidden; }

  @media (max-width: 480px) {
    .modal { padding: 22px 20px 20px; max-width: none; }
    .modal h2 { font-size: 20px; }
  }

  /* ══════════════════════════════════════════════════════════════════════
     PRINT
     The scroll-reveal script sets opacity:0 on section titles, step cards,
     role cards and CTA panels until they intersect the viewport. Printing
     without scrolling the whole page first produced PDFs with every section
     heading missing. Engineers print these pages to attach to submissions,
     so this matters more here than it would elsewhere.
     ══════════════════════════════════════════════════════════════════════ */
  @media print {
    *, *::before, *::after {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }
    nav, .nav-mobile, .nav-burger, .footer-top,
    .modal-backdrop, .cta-panel .btn, .hero-ctas { display: none !important; }

    body { background: var(--white); }
    .hero {
      min-height: auto; background-image: none; background: var(--white);
      padding: 0 0 1.5rem; color: var(--text-primary);
    }
    .hero h1, .hero-copy h1 { color: var(--text-primary); }
    .hero .hero-sub, .hero-eyebrow { color: var(--text-secondary); }
    .trust-pill { border: 1px solid var(--border); color: var(--text-secondary); }

    .full-width-section { background: var(--white) !important; padding: 0.75rem 0; }
    .section-inner { max-width: none; padding: 0; }

    /* Let the comparison table print whole rather than clipped to one screen */
    .compare-wrap { overflow: visible !important; }
    .compare-table { min-width: 0 !important; font-size: 10pt; }

    /* Open every FAQ answer — collapsed <details> print blank */
    details { display: block; }
    details > summary { list-style: none; font-weight: 600; }
    details:not([open]) > *:not(summary) { display: revert !important; }

    h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
    .hiw-step, .role-card, .science-step, table, figure {
      break-inside: avoid; page-break-inside: avoid;
    }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    a[href^="#"]::after, a[href^="mailto"]::after { content: ""; }
  }

  /* ══════════════════════════════════════════════════════════════════════
     FOOTER NAV
     thermal-modelling and thermal-cracking are in the sitemap and linked
     from body copy, but were in neither the desktop nor the mobile nav —
     two of the strongest pages with no route to them. Adding them to the
     primary nav would make it seven items, so they live here instead.
     ══════════════════════════════════════════════════════════════════════ */
  .footer-nav {
    /* The site styles the bare `nav` element as the fixed top bar, so a
       <nav> anywhere else inherits position:fixed and lands over the header.
       Reset the positional properties explicitly rather than downgrading
       this to a <div> and losing the landmark. */
    position: static; top: auto; left: auto; right: auto; z-index: auto;
    height: auto; padding: 0; border-bottom: none; background: transparent;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px 20px; margin: 0 0 20px; max-width: 880px;
  }
  .footer-nav a {
    font-size: 13px; color: rgba(255,255,255,0.72);
    text-decoration: none; padding: 4px 0;
  }
  .footer-nav a:hover { color: var(--highlight); }
  .footer-nav a[aria-current="page"] { color: #ffffff; }

  /* Current page in the mobile menu — the desktop nav marked it, this didn't */
  .nav-mobile a.current { color: var(--highlight); }

  @media (max-width: 860px) {
    .footer-nav { gap: 0 18px; }
    .footer-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  }

  /* Large CTA — was an inline style repeated on 7 buttons across the site */
  .btn-lg { padding: 12px 24px; font-size: 14px; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .btn-lg { min-height: 48px; padding: 14px 24px; } }

  /* Keep every button the same box regardless of variant. .btn-primary had no
     border while .btn-outline had 1px, which is why the three contact buttons
     sat 2px apart even with identical padding. */
  .btn-primary { border: 1px solid transparent; }