@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Barlow-400.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Barlow-500.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Barlow-600.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/BarlowCondensed-500.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/BarlowCondensed-600.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/BarlowCondensed-700.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IBMPlexMono-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexMono-500.woff2) format('woff2');}

/* ============ RESET ============ */
  #app, #app *, #app *::before, #app *::after { box-sizing: border-box; margin: 0; padding: 0; }
  #app { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  #app img, #app svg { display: block; max-width: 100%; }
  #app ul, #app ol { list-style: none; }
  #app a { color: inherit; text-decoration: none; }
  #app button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  #app input, #app select, #app textarea { font: inherit; color: inherit; }

  /* ============ TOKENS ============ */
  #app {
    --ground:   #F5F8FC;
    --surface:  #FFFFFF;
    --panel:    #0F3059;
    --ink:      #152233;
    --ink-soft: #4B5C6F;
    --line:     #D9E2EC;
    --amber:    #2764AE;   /* accent on light */
    --amber-hi: #8FBCEE;   /* accent on navy */
    --navy:     #0F3059;
    --amber-dn: #1F569B;
    --blue:     #1B4E8C;
    --slat-1:   #2E6FBE;
    --slat-2:   #1B4E8C;
    --radius:   4px;
    --radius-lg: 8px;
    --shadow-sm: 0 1px 2px rgba(15,48,89,.4);
    --shadow:    0 2px 6px rgba(15,48,89,.42), 0 16px 34px -18px rgba(15,48,89,.7);
    --shadow-lg: 0 4px 10px rgba(15,48,89,.45), 0 30px 60px -24px rgba(15,48,89,.8);
    --ring:      0 0 0 3px rgba(39,100,174,.35);
    --s-section: clamp(64px,8.5vw,116px);
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
  }

  #app h1, #app h2, #app h3 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
  }
  #app h1 { font-size: clamp(44px, 8vw, 92px); }
  #app h2 { font-size: clamp(30px, 4.5vw, 52px); }
  #app h3 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; }
  #app .eyebrow {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--amber);
    display: inline-flex; align-items: center; gap: 9px;
  }
  #app .eyebrow::before { content:""; width:22px; height:1.5px; background:currentColor; opacity:.6; flex:none; }
  #app p { color: var(--ink-soft); }
  #app a.inline-link { color: var(--blue); border-bottom: 1px solid transparent; }
  #app a.inline-link:hover { border-bottom-color: var(--blue); }

  /* ============ LAYOUT HELPERS ============ */
  #app .wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
  #app .section { padding-block: var(--s-section); position: relative; }
  #app .section-panel { background: var(--panel); }
  #app .section-panel h1, #app .section-panel h2, #app .section-panel h3 { color: #fff; }
  #app .section-panel p, #app .section-panel li { color: rgba(255,255,255,.82); }
  #app .section-panel strong { color: #fff; }
  #app .section-panel .eyebrow { color: var(--amber-hi); }
  #app .section-panel .facts { color: rgba(255,255,255,.9); }
  #app .section-panel .facts strong { color: var(--amber-hi); }
  #app .section-panel .sibling-link { color: var(--amber-hi); }
  #app .section-panel table.spec-table { color: rgba(255,255,255,.86); }
  #app .section-panel table.spec-table th { color: var(--amber-hi); }
  #app .section-panel table.spec-table td { border-color: rgba(255,255,255,.14); }
  #app .section-panel table.spec-table tbody tr:nth-child(even) { background: rgba(255,255,255,.05); }
  #app .section-panel .spec-num { color: var(--amber-hi); }
  #app .section-surface { background: var(--surface); }

  /* Hazard stripe divider */
  #app .hazard {
    height: 4px;
    width: 100%;
    background-image: repeating-linear-gradient(45deg, var(--navy) 0 10px, transparent 10px 20px);
    opacity: 0.55;
  }

  /* Visually hidden */
  #app .vh {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0; padding: 0; margin: -1px;
  }

  /* ============ CONCEPT RIBBON ============ */
  #app .concept-ribbon {
    position: fixed;
    top: 10px; left: 10px;
    z-index: 500;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: rgba(255,255,255,0.82);
    border: 1px solid var(--line);
    padding: 4px 8px;
    border-radius: 3px;
    pointer-events: none;
  }

  /* ============ HEADER / NAV ============ */
  #app header.site-header {
    position: sticky; top: 0; z-index: 200;
    background: rgba(245,248,252,0.82);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  #app header.site-header.scrolled { background: rgba(245,248,252,0.94); border-bottom-color: var(--line); box-shadow: 0 18px 34px -28px rgba(15,48,89,.9); }
  #app .nav-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding-block: 14px;
  }
  #app .brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
    font-size: 19px; color: var(--ink);
  }
  #app .brand .mark { width: 30px; height: 30px; color: var(--amber); flex-shrink: 0; }
  #app .brand small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; font-weight: 400; }
  #app nav.primary-nav { display: flex; align-items: center; gap: 6px; }
  #app nav.primary-nav a {
    white-space: nowrap;
    font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-soft); padding: 0 13px; height: 40px; border-radius: var(--radius);
    display: flex; align-items: center; position: relative;
    transition: color .2s ease, background .2s ease;
  }
  #app nav.primary-nav a::after { content:""; position:absolute; left:13px; right:13px; bottom:6px; height:2px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
  #app nav.primary-nav a:hover { color: var(--ink); background: rgba(39,100,174,.08); }
  #app nav.primary-nav a:hover::after { transform: scaleX(1); }
  #app nav.primary-nav a[aria-current="page"] { color: var(--ink); background: rgba(39,100,174,.12); }
  #app nav.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
  #app .header-cta {
    display: flex; align-items: center; gap: 14px;
  }
  #app .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em;
    padding: 0 22px; height: 48px; border-radius: var(--radius); cursor: pointer; white-space: nowrap;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  }
  #app .btn:active { transform: translateY(1px) scale(.995); }
  #app .btn:focus-visible { outline: none; box-shadow: var(--ring); }
  #app .btn-sm { height: 40px; padding: 0 16px; font-size: 12px; }
  #app .btn-lg { height: 56px; padding: 0 28px; font-size: 14px; }
  #app .btn-lg svg { width: 18px; height: 18px; }
  #app .btn-amber { background: var(--amber); color: #FFFFFF; font-weight: 600; box-shadow: 0 1px 2px rgba(15,48,89,.4), 0 12px 26px -14px rgba(39,100,174,.7); }
  #app .btn-amber:hover { background: #2E6FBE; transform: translateY(-2px); box-shadow: 0 2px 5px rgba(15,48,89,.45), 0 18px 34px -14px rgba(39,100,174,.8); }
  #app .btn-ghost { background: transparent; border: 1px solid var(--amber); color: var(--amber); }
  #app .btn-ghost:hover { background: rgba(39,100,174,0.12); transform: translateY(-2px); border-color: #2E6FBE; color: #2E6FBE; }
  #app .btn-phone-header { display: none; }
  #app .hamburger {
    display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 3px; color: var(--ink);
  }
  #app .hamburger svg { width: 20px; height: 20px; }

  #app .mobile-nav {
    display: none;
    position: fixed; inset: 0; top: 0; z-index: 300;
    background: var(--ground);
    padding: 24px;
    flex-direction: column; gap: 20px;
  }
  #app .mobile-nav.open { display: flex; }
  #app .mobile-nav .top-row { display: flex; justify-content: space-between; align-items: center; }
  #app .mobile-nav a { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; letter-spacing: 0.02em; padding: 10px 0; border-bottom: 1px solid var(--line); min-height: 44px; display: flex; align-items: center; }

  /* ============ FOCUS ============ */
  #app a:focus-visible, #app button:focus-visible, #app input:focus-visible, #app select:focus-visible, #app textarea:focus-visible {
    outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px;
  }

  /* ============ HERO ============ */
  #app .hero {
    position: relative;
    min-height: min(92vh, 820px);
    display: flex; align-items: flex-end;
    overflow: hidden;
    background: var(--ground);
  }
  #app .hero-bay {
    position: absolute; inset: 0;
    background-color: #EAF1F9;
    background-image:
      linear-gradient(rgba(39,100,174,.22) 1px, transparent 1px),
      linear-gradient(90deg, rgba(39,100,174,.22) 1px, transparent 1px);
    background-size: 42px 42px;
    background-position: center;
  }
  #app .hero-floor-glow {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--amber);
    box-shadow: 0 0 40px 10px rgba(39,100,174,0.35);
  }
  #app .door-track { position: absolute; inset: 0; overflow: hidden; z-index: 5; }
  #app .door-curtain {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(var(--slat-1) 0 22px, var(--slat-2) 22px 26px);
    transform-origin: top center;
    animation: roll-up 2.3s cubic-bezier(.7,.05,.2,1) 0.15s both;
  }
  #app .door-curtain::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.30) 48%, transparent 62%);
    mix-blend-mode: overlay;
  }
  #app .door-curtain::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
    background: var(--amber);
  }
  #app .door-rail { position: absolute; top: 0; bottom: 0; width: 14px; background: var(--surface); border-inline: 1px solid var(--line); z-index: 6; }
  #app .door-rail.left { left: 0; } #app .door-rail.right { right: 0; }

  @keyframes roll-up {
    0%   { transform: scaleY(1); }
    62%  { transform: scaleY(0.16); filter: brightness(1.15); }
    100% { transform: scaleY(0); filter: brightness(1); }
  }

  #app .hero-content {
    position: relative; z-index: 10;
    padding-block: clamp(48px, 8vw, 96px) clamp(32px, 6vw, 56px);
    width: 100%;
  }
  #app .hero-content .eyebrow { display: inline-block; margin-bottom: 14px; }
  #app .hero-content h1 { max-width: 16ch; opacity: 0; transform: translateY(18px); animation: rise 0.7s ease 1.9s forwards; }
  #app .hero-dek { max-width: 62ch; font-size: clamp(16px, 2vw, 19px); margin-top: 20px; color: var(--ink-soft); opacity: 0; transform: translateY(18px); animation: rise 0.7s ease 2.1s forwards; }
  #app .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; opacity: 0; transform: translateY(18px); animation: rise 0.7s ease 2.3s forwards; }
  #app .hero-replay {
    margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-soft); opacity: 0.55; border: 1px dashed var(--line); padding: 6px 10px; border-radius: 3px;
  }
  #app .hero-replay:hover { opacity: 1; color: var(--amber); border-color: var(--amber); }
  #app .hero-replay svg { width: 13px; height: 13px; }

  @keyframes rise { to { opacity: 1; transform: translateY(0); } }

  #app .spec-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
  #app .spec-strip div {
    font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 16px 18px; border-right: 1px solid var(--line); color: var(--ink-soft);
  }
  #app .spec-strip div:last-child { border-right: 0; }
  #app .spec-strip strong { color: var(--amber); display: block; font-size: 11px; letter-spacing: 0.06em; margin-bottom: 3px; }

  /* ============ REVEAL ============ */
  #app .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
  #app .reveal.in { opacity: 1; transform: translateY(0); }

  /* ============ CARD GRID: SERVICES OVERVIEW ============ */
  #app .grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
  #app .service-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
    padding: 26px; display: flex; flex-direction: column; gap: 14px;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  #app .service-card:hover { border-color: var(--amber); transform: translateY(-3px); }
  #app .service-card .icon { width: 40px; height: 40px; color: var(--amber); }
  #app .service-card h3 { font-size: 19px; }
  #app .service-card p { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
  #app .service-card .goto { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); margin-top: auto; }

  /* ============ COST BAND ============ */
  #app .truth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
  #app .truth-card { border-left: 2px solid var(--amber); padding-left: 18px; }
  #app .truth-card .num { font-family: var(--font-mono); color: var(--amber); font-size: 13px; }
  #app .truth-card p { color: var(--ink); font-size: 16px; margin-top: 8px; }

  /* ============ MAINTENANCE SPEC TABLE ============ */
  #app .spec-table-wrap { margin-top: 40px; border: 1px solid var(--line); border-radius: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #app .spec-table-wrap table.spec-table { min-width: 520px; }
  #app table.spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13.5px; }
  #app table.spec-table th, #app table.spec-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); }
  #app table.spec-table th { background: var(--panel); color: var(--amber); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 500; }
  #app table.spec-table tbody tr:last-child td { border-bottom: 0; }
  #app table.spec-table tbody tr:nth-child(even) { background: rgba(39,100,174,0.045); }
  #app table.spec-table td.note { color: var(--ink-soft); }
  #app table.spec-table .cite { color: var(--blue); }

  /* ============ TRUST STRIP ============ */
  #app .trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
  #app .trust-strip .facts { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
  #app .trust-strip .facts strong { color: var(--amber); }

  /* ============ CTA BAND ============ */
  #app .cta-band { background: linear-gradient(115deg, #1B4E8C, #2E6FBE 55%, var(--amber)); color: #fff; text-align: center; }
  #app .cta-band h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
  #app .cta-band p { color: rgba(255,255,255,.82); }
  #app .cta-band .btn-amber { background: #fff; color: var(--navy); margin-top: 26px; box-shadow: 0 12px 30px -14px rgba(15,48,89,.6); }
  #app .cta-band .btn-amber:hover { background: #EAF2FC; color: var(--navy); }
  #app .cta-band .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
  #app .cta-band .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

  /* ============ SERVICE BLOCKS (services page) ============ */
  #app .service-block { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding-block: clamp(48px, 7vw, 84px); border-top: 1px solid var(--line); }
  #app .service-block:first-of-type { border-top: 0; }
  #app .service-block:nth-of-type(even) .block-art { order: 2; }
  #app .block-copy h2 { margin-bottom: 18px; }
  #app .block-copy p { margin-bottom: 14px; }
  #app .signs-list { margin-top: 20px; border-top: 1px dashed var(--line); padding-top: 16px; }
  #app .signs-list .eyebrow { display: block; margin-bottom: 10px; }
  #app .signs-list li { position: relative; padding-left: 20px; margin-bottom: 8px; color: var(--ink-soft); font-size: 15px; }
  #app .signs-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--amber); }
  #app .block-art { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 30px; }
  #app .block-art svg { width: 100%; height: auto; }
  #app .alt-caption { display: none; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); margin-top: 10px; }
  #app .annotate .alt-caption { display: block; }

  /* ============ AREAS HUB ============ */
  #app .areas-intro { max-width: 72ch; }
  #app .map-wrap { margin-top: 48px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 24px; }
  #app .map-wrap svg { width: 100%; height: auto; }
  #app .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
  #app .city-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
    transition: border-color .26s ease, transform .26s ease, box-shadow .26s ease; }
  #app .city-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .32s ease; }
  #app .city-card:hover { border-color: rgba(39,100,174,.5); transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  #app .city-card:hover::before { transform: scaleX(1); }
  #app .city-card h3 { font-size: 22px; }
  #app .city-card p { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
  #app .city-card .goto { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); margin-top: 4px; }

  /* ============ SERVICE AREA MAP ============ */
  #app .map-wrap { margin-top: 44px; background: linear-gradient(165deg,#FFFFFF,#EDF3FA); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(16px,2.2vw,28px); box-shadow: var(--shadow); }
  #app .map-svg { width: 100%; height: auto; display: block; }
  #app .map-water { fill: url(#gWaterC); }
  #app .map-shore { fill: none; stroke: #A9C6E4; stroke-width: 2; }
  #app .map-escarp { fill: none; stroke: #B9C6D4; stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }
  #app .map-route { fill: none; stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; opacity: .6; }
  #app .map-route-glow { fill: none; stroke: var(--amber); stroke-width: 10; stroke-linecap: round; opacity: .1; }
  #app .map-ring { fill: none; stroke: var(--amber); stroke-width: 1.1; stroke-dasharray: 3 8; opacity: .22; }
  #app .map-legend { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }
  #app .map-city { cursor: pointer; }
  #app .map-city .mc-hit { fill: transparent; }
  #app .map-city .mc-dot { fill: #FFFFFF; stroke: var(--amber); stroke-width: 2.6; transition: r .25s ease, stroke-width .25s ease; }
  #app .map-city .mc-label { font-family: var(--font-mono); font-size: 12.5px; fill: var(--ink); letter-spacing: .05em; text-transform: uppercase; transition: fill .2s ease; }
  #app .map-city:hover .mc-dot, #app .map-city:focus-visible .mc-dot { r: 9; stroke-width: 3.4; }
  #app .map-city:hover .mc-label, #app .map-city:focus-visible .mc-label { fill: var(--amber); font-weight: 600; }
  #app .map-city:focus-visible { outline: none; }
  #app .map-city.is-base .mc-dot { fill: var(--amber); stroke: #FFFFFF; stroke-width: 3; }
  #app .map-city.is-base .mc-label { fill: var(--amber); font-weight: 700; }
  #app .mc-pulse { fill: none; stroke: var(--amber); stroke-width: 2; opacity: 0; animation: mcPulseC 3.2s ease-out infinite; }
  @keyframes mcPulseC { 0%{opacity:.5;r:9} 70%{opacity:0;r:30} 100%{opacity:0;r:30} }
  #app .map-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); letter-spacing: .03em; min-height: 44px; }
  #app .map-readout b { color: var(--amber); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
  #app .map-readout .mr-note { font-family: var(--font-body); letter-spacing: 0; font-size: 14px; }
  #app .map-readout .goto { margin-left: 8px; color: var(--blue); }

  #app .map-corridor { display: none; list-style: none; margin: 0; padding: 0; }
  #app .mcor-item { position: relative; }
  #app .mcor-item a { display: flex; align-items: flex-start; gap: 16px; padding: 14px 4px; }
  #app .mcor-item::before { content:""; position:absolute; left:9px; top:0; bottom:0; width:2px; background:var(--line); }
  #app .mcor-item:first-child::before { top: 26px; }
  #app .mcor-item:last-child::before { bottom: calc(100% - 26px); }
  #app .mcor-dot { width:20px; height:20px; border-radius:50%; background:var(--surface); border:2.5px solid var(--amber); flex:none; margin-top:3px; position:relative; z-index:1; }
  #app .mcor-item.is-base .mcor-dot { background:var(--amber); box-shadow:0 0 0 5px rgba(39,100,174,.16); }
  #app .mcor-body { display:flex; flex-direction:column; gap:3px; }
  #app .mcor-body b { font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:18px; color:var(--ink); display:flex; align-items:center; gap:9px; }
  #app .mcor-body b em { font-family:var(--font-mono); font-style:normal; font-size:11px; letter-spacing:.12em; color:#FFFFFF; background:var(--amber); padding:3px 7px; border-radius:100px; }
  #app .mcor-body > span { font-family:var(--font-body); font-size:14px; color:var(--ink-soft); line-height:1.5; text-transform:none; }
  #app .mcor-item a:hover .mcor-body b { color: var(--amber); }

  /* ============ BREADCRUMB ============ */
  #app .breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 28px; }
  #app .breadcrumb a { color: var(--ink-soft); }
  #app .breadcrumb a:hover { color: var(--amber); }
  #app .breadcrumb .sep { margin-inline: 8px; color: var(--line); }
  #app .breadcrumb [aria-current] { color: var(--amber); }

  /* ============ CITY PAGE ============ */
  #app .city-hero h1 { margin-top: 16px; max-width: 20ch; }
  #app .city-hero p.lede { max-width: 70ch; margin-top: 20px; font-size: 17px; }
  #app .fact-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
  #app .fact-card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 22px; }
  #app .fact-card .tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber); display: block; margin-bottom: 10px; }
  #app .fact-card p { color: var(--ink); font-size: 14.5px; }
  #app .city-services { margin-top: 44px; }
  #app .city-services ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; margin-top: 18px; }
  #app .city-services a { font-family: var(--font-mono); font-size: 14px; color: var(--blue); border-bottom: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
  #app .city-services a:hover { border-bottom-color: var(--blue); }
  #app .city-services a svg { width: 14px; height: 14px; flex-shrink: 0; }
  #app .city-cta { margin-top: 48px; padding: 30px; background: var(--panel); border-radius: 4px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
  #app .cross-links { margin-top: 20px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
  #app .cross-links a { color: var(--blue); }

  /* ============ CONTACT ============ */
  #app .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; margin-top: 44px; }
  #app .hours-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 14px; margin-top: 18px; }
  #app .hours-table td { padding: 10px 0; border-bottom: 1px solid var(--line); }
  #app .hours-table td:last-child { text-align: right; color: var(--ink); }
  #app .contact-detail { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-mono); font-size: 14.5px; }
  #app .contact-detail a { color: var(--blue); }
  #app .contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 28px; }
  #app .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
  #app .form-row label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
  #app .form-row input, #app .form-row select, #app .form-row textarea {
    background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; color: var(--ink); min-height: 44px;
  }
  #app .form-row textarea { min-height: 100px; resize: vertical; }
  #app .form-note { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin-bottom: 18px; }
  #app .map-mini { margin-top: 28px; }

  /* ============ FOOTER ============ */
  #app footer.site-footer { background: var(--panel); border-top: 1px solid var(--line); }
  #app footer.site-footer .footer-grid p, #app footer.site-footer .footer-grid li { color: rgba(255,255,255,.76); }
  #app footer.site-footer .footer-grid a { color: rgba(255,255,255,.78); }
  #app footer.site-footer .footer-grid a:hover { color: #fff; }
  #app footer.site-footer .footer-brand span { color: #fff; }
  #app footer.site-footer .footer-bottom { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.14); }
  #app footer.site-footer .sibling-link { color: var(--amber-hi); }
  #app footer.site-footer .social-row a { border-color: rgba(255,255,255,.25); }
  #app footer.site-footer .social-row a:hover { border-color: var(--amber-hi); background: rgba(255,255,255,.07); }
  #app footer.site-footer .social-row svg { color: #fff; }
  #app .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 36px; padding-block: 56px; }
  #app .footer-grid h4 { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber-hi); margin-bottom: 16px; }
  #app .footer-grid p, #app .footer-grid li { font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
  #app .footer-grid a { color: var(--ink-soft); }
  #app .footer-grid a:hover { color: var(--ink); }
  #app .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  #app .footer-brand .mark { width: 26px; height: 26px; color: var(--amber); }
  #app .footer-brand span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 17px; }
  #app .social-row { display: flex; gap: 12px; margin-top: 14px; }
  #app .social-row a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 3px; }
  #app .social-row a:hover { border-color: var(--amber); color: var(--amber); }
  #app .social-row svg { width: 16px; height: 16px; }
  #app .sibling-link { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 13px; color: var(--blue); }
  #app .footer-bottom { border-top: 1px solid var(--line); padding-block: 18px; text-align: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }

  /* ============ ANNOTATE MODE ============ */
  #app.annotate [data-chip] { position: relative; outline: 1px dashed var(--amber); outline-offset: 4px; border-radius: 2px; }
  #app.annotate [data-chip]::after {
    content: attr(data-chip);
    position: absolute; top: -22px; left: 0;
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--panel); color: var(--amber); border: 1px solid var(--amber);
    padding: 2px 7px; white-space: nowrap; z-index: 45; pointer-events: none;
  }

  /* ============ UNDER THE HOOD TOGGLE + DRAWER ============ */
  #app .hood-toggle { background: var(--navy) !important; color: #fff !important; border-color: transparent !important;
    position: fixed; right: 20px; bottom: 20px; z-index: 400;
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 30px;
    padding: 12px 18px; min-height: 44px;
    font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em;
    box-shadow: 0 6px 24px rgba(15,48,89,0.4);
  }
  #app .hood-toggle svg { width: 18px; height: 18px; color: var(--amber-hi); }
  #app .hood-toggle[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(143,188,238,.4); }
  #app .drawer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 399;
    max-height: 45vh; overflow-y: auto;
    background: var(--panel); border-top: 1px solid var(--amber);
    padding: 24px; box-shadow: 0 -8px 30px rgba(15,48,89,0.5);
    transform: translateY(100%); transition: transform 0.3s ease;
  }
  #app .drawer.open { transform: translateY(0); }
  #app .drawer h3 { font-size: 15px; color: var(--amber-hi); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; margin-top: 20px; }
  #app .drawer h3:first-child { margin-top: 0; }
  #app .drawer p.drawer-value { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--surface); padding: 10px 14px; border-radius: 3px; border: 1px solid var(--line); }
  #app .drawer pre { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 14px; overflow-x: auto; line-height: 1.6; }
  #app .drawer .jk { color: var(--amber); }
  #app .drawer .js { color: #1F569B; }
  #app .drawer .jn { color: #2E6B45; }
  #app .drawer .jb { color: #A8321F; }
  #app .drawer .jz { color: var(--ink-soft); }

  /* ============ REDUCED MOTION ============ */
  @media (prefers-reduced-motion: reduce) {
    #app .door-curtain { animation: none !important; transform: scaleY(0); }
    #app .hero-content h1, #app .hero-dek, #app .hero-actions { animation: none !important; opacity: 1; transform: none; }
  }
  /* Once the intro has played, pin the hero in its final state so the
     load-time keyframes don't restart every time the router re-shows home. */
  #app.settled .door-curtain { animation: none !important; transform: scaleY(0); }
  #app.settled .hero-content h1, #app.settled .hero-dek, #app.settled .hero-actions {
    animation: none !important; opacity: 1; transform: none;
    #app .reveal { transition: none; opacity: 1; transform: none; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1024px) {
    #app .grid-6 { grid-template-columns: repeat(2, 1fr); }
    #app .spec-strip { grid-template-columns: repeat(2, 1fr); }
    #app .truth-grid { grid-template-columns: 1fr; gap: 30px; }
    #app .service-block { grid-template-columns: 1fr; }
    #app .service-block:nth-of-type(even) .block-art { order: 0; }
    #app .footer-grid { grid-template-columns: 1fr 1fr; }
    #app .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  }
  @media (max-width: 980px) {
    #app nav.primary-nav { display: none; }
  }
  @media (max-width: 760px) {
    #app .hamburger { display: flex; }
    #app .header-cta .btn-ghost { display: none; }
    #app .grid-6 { grid-template-columns: 1fr; }
    #app .grid-3 { grid-template-columns: 1fr; }
    #app .fact-row { grid-template-columns: 1fr; }
    #app .city-services ul { grid-template-columns: 1fr; }
    #app .spec-strip { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    #app .wrap { padding-inline: 16px; }
    #app .footer-grid { grid-template-columns: 1fr; padding-block: 40px; }
    #app .spec-strip { grid-template-columns: 1fr; }
    #app .city-cta { flex-direction: column; align-items: flex-start; }
  }

#app .concept-ribbon{ top:auto !important; bottom:14px; left:14px; }

  @media (max-width: 760px) {
    #app .map-svg { display: none; }
    #app .map-corridor { display: block; }
    #app .map-wrap { padding: 8px 14px; }
    #app .map-readout { padding-top: 14px; }
    #app .map-readout > b, #app .map-readout .mr-note { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    #app .mc-pulse { animation: none; opacity: 0; }
  }

  #app .truth-card p { color: rgba(255,255,255,.84); }
  #app .truth-card .num { color: var(--amber-hi); }
  #app .truth-card strong { color: #fff; }
  @media (max-width: 1220px) {
    #app .header-cta .btn-ghost { display: none; }
  }
  @media (max-width: 1080px) {
    #app .brand .brand-div small { display: none; }
    #app nav.primary-nav a { padding: 0 10px; }
  }

  /* ===== TEXT ON NAVY SURFACES (fact cards, city CTA, spec heads, trust strip) ===== */
  #app .fact-card p, #app .city-cta p { color: rgba(255,255,255,.84); }
  #app .fact-card strong, #app .city-cta strong { color: #fff; }
  #app .fact-card h3, #app .fact-card h2, #app .city-cta h3, #app .city-cta h2 { color: #fff; }
  #app .fact-card .tag, #app .fact-card .eyebrow, #app .city-cta .eyebrow { color: var(--amber-hi); }
  #app .fact-card .spec-num, #app .fact-card .fact-num { color: var(--amber-hi); }
  #app .fact-card { border-color: rgba(255,255,255,.14); }
  #app .city-cta .btn-amber { background: #fff; color: var(--navy); }
  #app .city-cta .btn-amber:hover { background: #EAF2FC; color: var(--navy); }
  #app .city-cta .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
  #app .city-cta .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
  #app table.spec-table th { color: var(--amber-hi); }
  #app .trust-strip .facts strong { color: var(--amber); }
  #app .section-panel .trust-strip .facts { color: rgba(255,255,255,.9); }
  #app .section-panel .trust-strip .facts strong { color: var(--amber-hi); }
  #app select, #app input, #app textarea { background: #fff !important; color: var(--ink) !important; border-color: var(--line) !important; }
  #app select option { color: var(--ink); }

  @media (max-width: 760px) { #app .wrap { padding-inline: 20px; } }

  /* ============ CLIENT MARQUEE (hero trust strip) ============ */
  #app .client-marquee { margin-top: 26px; border-top: 1px solid rgba(15,48,89,.12); padding-top: 16px; }
  #app .mq-label { display: block; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-soft); opacity: .85; margin-bottom: 12px; }
  #app .mq-viewport {
    position: relative; overflow: hidden;
    /* fade both edges into the hero rather than hard-cutting the strip */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  #app .mq-track {
    display: flex; align-items: center; gap: 44px;
    list-style: none; margin: 0; padding: 0; width: max-content;
    animation: mq-scroll 42s linear infinite;
  }
  #app .mq-viewport:hover .mq-track { animation-play-state: paused; }
  #app .mq-item {
    font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; font-size: 23px; white-space: nowrap; line-height: 1;
  }
  #app .mq-item.is-real { color: var(--navy); opacity: .72; }
  #app .mq-item.is-slot {
    color: var(--ink-soft); opacity: .38; font-weight: 600; font-size: 14px;
    letter-spacing: .12em; border: 1px dashed rgba(15,48,89,.28);
    border-radius: 3px; padding: 7px 14px;
  }
  @keyframes mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    #app .mq-track { animation: none; }
    #app .mq-viewport { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  }
  @media (max-width: 760px) {
    #app .client-marquee { margin-top: 20px; padding-top: 14px; }
    #app .mq-track { gap: 30px; animation-duration: 34s; }
    #app .mq-item { font-size: 20px; }
    #app .mq-item.is-slot { font-size: 12.5px; padding: 6px 11px; }
    /* keep the strip clear of the viewport-anchored hood toggle */
    #app .mq-viewport { margin-right: 60px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 86%, transparent 100%); }
  }

  /* ===== MOBILE HEADER FIT (was clipping the CTA and hamburger) ===== */
  #app .header-cta .btn svg { width: 17px; height: 17px; flex: none; }
  @media (max-width: 760px) {
    #app .header-cta .btn-amber .btn-label { display: none; }
    #app .header-cta .btn-amber { width: 48px; padding: 0; gap: 0; }
    #app .header-cta { gap: 8px; }
    #app .nav-row { gap: 10px; }
  }
  @media (max-width: 420px) {
    #app .brand .brand-div { font-size: 14px; padding-left: 9px; }
    #app .brand img.mark, #app .logo-chip img { height: 30px; }
    #app .header-cta .btn-amber { width: 44px; }
  }
  @media (max-width: 340px) {
    #app .brand .brand-div { display: none; }
  }

  /* ===== FIXED CHROME MUST NOT SIT ON CONTENT ===== */
  @media (max-width: 560px) {
    #app .hood-toggle span { display: none; }
    #app .hood-toggle { padding: 13px; }
  }
  @media (max-width: 760px) {
    #app .hero { min-height: auto; }                  /* 92vh left dead space above the copy */
    #app .concept-ribbon { position: static !important; margin: 10px auto 0; display: table; }
    #app .hero-content { padding-bottom: 72px; }
    #app .map-wrap { padding-bottom: 68px; }          /* clears the hood toggle */
    #app .map-readout { padding-bottom: 4px; }
  }

  /* ============ BRAND LOGO ============ */
  #app .brand img.mark { width: auto; height: 42px; flex-shrink: 0; mix-blend-mode: multiply; }
  #app .brand .brand-div { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 18px; color: var(--amber);
    padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--line); line-height: 1.1; }
  #app .brand .brand-div small { color: var(--ink-soft); white-space: nowrap; }
  #app .footer-logo { display: inline-flex; background: #fff; border-radius: 8px; padding: 7px 11px; }
  #app .footer-logo img { height: 34px; width: auto; display: block; }
  #app footer.site-footer .footer-brand span:last-child { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--amber-hi); font-size: 16px; }
  @media (max-width: 480px) {
    #app .brand img.mark { height: 34px; }
    #app .brand .brand-div { font-size: 15px; padding-left: 9px; }
  }

  /* ============ MOBILE OPTIMISATION ============ */
  @media (max-width: 980px) {
    /* thumb-sized targets on every tappable line */
    #app .breadcrumb a { display:inline-flex; align-items:center; min-height:40px; }
    #app .footer-grid li a { display:flex; align-items:center; min-height:44px; }
    #app .footer-grid p a { display:inline-flex; align-items:center; min-height:44px; }
    #app .city-services li a, #app .serviced-list li a { display:flex; align-items:center; min-height:44px; }
    #app .cross-links a { display:inline-flex; align-items:center; min-height:44px; }
    #app .footer-contact a, #app footer p a { display:inline-flex; align-items:center; min-height:44px; }
    #app .sibling-link { display:flex; align-items:center; min-height:48px; }
    #app .card-link, #app .goto { display:inline-flex; align-items:center; min-height:44px; }
    #app .contact-detail a { display:inline-flex; align-items:center; min-height:44px; }
    #app .hero-replay { min-height:44px; padding-inline:14px; }
    #app .brand small { font-size:11.5px; letter-spacing:.07em; }
    #app .social-row a { width:44px; height:44px; }
    #app .brand { min-height:44px; }
  }
  @media (max-width: 760px) {
    #app .cta-band .btn, #app .hero-actions .btn { width:100%; }
    #app .hero-actions { gap:10px; }
    #app .section-head { margin-bottom:24px; }
  }
  @media (max-width: 400px) {
    #app .btn-lg { height:52px; padding:0 18px; font-size:13px; }
    #app .spec-strip { grid-template-columns:1fr 1fr; }
  }

  /* ============ PRODUCTION BUILD ADDITIONS ============ */
  /* brand mark: the wordmark is in the image, so no text lockup beside it */
  #app .brand img.mark { width: auto; height: 52px; mix-blend-mode: normal; }
  #app .footer-logo { background: #fff; border-radius: 8px; padding: 8px 12px; }
  #app .footer-logo img { height: 44px; width: auto; }
  @media (max-width: 480px) { #app .brand img.mark { height: 40px; } }
  #app .page-updated { white-space: nowrap; }

  /* inline source citations: a real link beside the claim */
  #app a.cite-link { color: var(--amber); text-decoration: underline; text-decoration-color: rgba(39,100,174,.4); text-underline-offset: 3px; }
  #app a.cite-link:hover { text-decoration-color: var(--amber); }
  #app .section-panel a.cite-link { color: var(--amber-hi); text-decoration-color: rgba(143,188,238,.5); }

  /* long-form service / city pages */
  #app .prose { max-width: 70ch; }
  #app .prose h2 { margin-top: 42px; }
  #app .prose h2:first-child { margin-top: 0; }
  #app .prose p { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
  #app .prose ul { margin-top: 12px; display: grid; gap: 8px; }
  #app .prose ul li { padding-left: 22px; position: relative; font-size: 15.5px; line-height: 1.5; }
  #app .prose ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 3px; background: var(--amber); }
  #app .two-col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
  #app .two-col .aside { position: sticky; top: 96px; display: grid; gap: 16px; }
  #app .aside-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--amber); padding: 22px 24px; }
  #app .aside-card h3 { font-size: 20px; margin-bottom: 8px; }
  #app .aside-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
  #app .aside-card .btn { width: 100%; margin-top: 14px; }
  #app .aside-card ul { display: grid; gap: 6px; margin-top: 10px; }
  #app .aside-card ul a { font-size: 14.5px; color: var(--amber); font-weight: 600; }
  #app .steps { counter-reset: step; display: grid; gap: 14px; margin-top: 16px; }
  #app .steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--line); padding: 16px 18px; }
  #app .steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--amber); padding-top: 3px; }
  #app .steps li b { display: block; font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }
  #app .steps li span { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
  #app .art-frame { background: var(--surface); border: 1px solid var(--line); padding: 22px; }
  #app .where-strip { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); line-height: 1.9; }
  #app .where-strip a { color: var(--amber); font-weight: 600; }
  #app .contact-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--amber); padding: 28px 30px; display: grid; gap: 12px; }
  #app .contact-card h3 { margin-bottom: 4px; }
  #app .contact-card p { font-size: 15px; color: var(--ink-soft); }
  #app .contact-card .btn { justify-content: center; }
  @media (max-width: 900px) { #app .two-col { grid-template-columns: 1fr; } #app .two-col .aside { position: static; } }

  /* ============ POST-CHECK FIXES ============ */
  /* the H1 now carries the keyword phrase, so it runs longer than the old punchline */
  #app .hero-content h1 { font-size: clamp(40px, 5.4vw, 72px); max-width: 18ch; }
  /* steps: the ::before marker owns column 1 for both rows; title and copy stack in column 2 */
  #app .steps li::before { grid-row: 1 / span 2; }
  #app .steps li b, #app .steps li span { grid-column: 2; }
  /* thumb-sized link lists on small screens (inline prose links are exempt, per WCAG 2.5.8) */
  @media (max-width: 980px) {
    #app .where-strip a, #app .aside-card ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
    #app .breadcrumb a { padding: 0 6px; margin-left: -6px; }
  }
  #app .hero-content h1 { font-size: clamp(38px, 4.8vw, 64px); max-width: 20ch; }
  #app .map-mini text { font-family: var(--font-mono); }

  /* ============ AUTHORIZED DEALER STRIP ============ */
  #app .dealer-strip { margin-top: 28px; padding: 22px 26px; background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; align-items: center; }
  #app .dealer-strip ul { display: flex; flex-wrap: wrap; gap: 8px 10px; }
  #app .dealer-strip li { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); padding: 7px 12px; border: 1px solid var(--line); background: var(--ground); }
  #app .dealer-strip li small { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); margin-left: 6px; }
  #app .dealer-strip p { grid-column: 1 / -1; font-size: 14px; color: var(--ink-soft); }
  @media (max-width: 760px) { #app .dealer-strip { grid-template-columns: 1fr; } }
  /* narrow phones: the hours table and the long email button must shrink, not clip */
  #app .contact-grid > * { min-width: 0; }
  @media (max-width: 420px) {
    #app .hours-table { font-size: 12.5px; table-layout: fixed; }
    #app .hours-table td:last-child { white-space: normal; }
    #app .contact-detail { font-size: 13.5px; }
    #app .contact-detail span, #app .contact-detail a { overflow-wrap: anywhere; }
    #app .contact-card { padding: 22px 18px; }
    #app .contact-card .btn { white-space: normal; height: auto; min-height: 48px; padding: 12px 14px; line-height: 1.25; text-align: center; font-size: 12.5px; }
  }

  /* ============ TRUST STRIP IN THE FIRST VIEWPORT ============ */
  /* hero content is a column so the strip can be re-ordered per breakpoint */
  #app .hero-content { display: flex; flex-direction: column; align-items: flex-start; }
  #app .hero-content > * { flex: none; }
  #app .client-marquee { width: 100%; max-width: 720px; }
  /* short desktop/laptop screens: tighten the hero so the strip lands above the fold */
  @media (min-width: 981px) and (max-height: 900px) {
    #app .hero-content { padding-block: 40px 34px; }
    #app .hero-content h1 { font-size: clamp(36px, 4.2vw, 52px); }
    #app .hero-dek { margin-top: 14px; font-size: clamp(15.5px, 1.6vw, 17px); }
    #app .hero-actions { margin-top: 20px; }
    #app .client-marquee { margin-top: 18px; padding-top: 12px; }
    #app .hero-replay { margin-top: 14px; }
    #app .hero { min-height: 0; }
  }
  /* phones: the strip moves ABOVE the buttons (the header call button keeps the CTA visible) */
  @media (max-width: 980px) {
    #app .client-marquee { order: 4; margin-top: 18px; padding-top: 12px; }
    #app .hero-actions { order: 5; margin-top: 20px; }
    #app .hero-replay { order: 6; }
    #app .hero-content { padding-block: 34px 44px; }
    #app .hero-dek { margin-top: 12px; }
  }
  /* very small phones: one more notch so the strip at least crests the fold */
  @media (max-width: 400px) {
    #app .hero-content { padding-block: 26px 36px; }
    #app .hero-content h1 { font-size: clamp(30px, 9.4vw, 36px); }
    #app .hero-dek { font-size: 15px; }
    #app .hero-actions { margin-top: 16px; gap: 8px; }
    #app .client-marquee { margin-top: 14px; padding-top: 10px; }
  }
  /* flex children must never outgrow the hero column */
  #app .hero-content > * { max-width: 100%; min-width: 0; }
  @media (max-width: 760px) {
    #app .hero-actions { align-self: stretch; }
    #app .hero-actions .btn { white-space: normal; height: auto; min-height: 52px; line-height: 1.25; padding: 12px 16px; text-align: center; }
  }
  /* the hero call button drops "the service line" on narrow phones so the number breathes */
  @media (max-width: 480px) {
    #app .btn-longlabel { display: none; }
    #app .hero-actions .btn { font-size: 13.5px; letter-spacing: .05em; }
  }

  /* ============ GIVING LINE ============ */
  #app .give-line { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); }
  #app .give-line p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 72ch; }
  #app .give-line strong { color: var(--amber-hi); font-weight: 600; }

  /* the H1 wraps at the container like every other page title, not at a narrow ch box */
  #app .hero-content h1 { max-width: 100%; }
  /* footer credit link gets a thumb-sized hit area on phones */
  @media (max-width: 980px) {
    #app .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  }

  /* ===== FOOTER COMPRESSION ON PHONES (2026-09-02) =====
     Below 480px the footer stacked ~22 tap-height links in one column and
     scrolled forever. Two-column link lists halve the height; tap targets
     stay at 44px. */
  @media (max-width: 480px) {
    #app .footer-grid { gap: 26px; padding-block: 34px 26px; }
    #app .footer-grid ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
    #app .footer-grid h4 { margin-bottom: 8px; }
    #app .footer-grid p, #app .footer-grid li { margin-bottom: 4px; }
    #app .footer-bottom { padding-block: 14px; font-size: 11px; line-height: 1.8; }
  }

  /* ---------------------------------------------------------------------------
     SOURCE CITATIONS.  Added 7 September 2026.

     This site had 21 source LINKS and zero visible citations: real anchors pointing at
     primary sources, sitting inside running sentences, with nothing to say the document
     had been read or when. The residential site puts a dated source line under the claim;
     this site shipped four days before that discipline existed and never got the component.

     Why it is not cosmetic: Bing ranks cited content above uncited and ties the same bar to
     Copilot grounding eligibility, and the observed AI-citation pattern is that a visible
     date, a visible publisher and on-page citations only work together. Citations with no
     date read as abandoned research.

     Same shape as the residential component, in this site's own palette.
     --------------------------------------------------------------------------- */
  /* This site spaces prose with margin-TOP on p (14px), not margin-bottom, so a negative top
     margin here does not tighten anything, it overlaps the paragraph above by exactly its own
     value. Caught by the overlap audit at every width. 8px is deliberately less than the 14px
     between paragraphs, which is what visually binds a source to the claim it belongs to. The
     next paragraph brings its own 14px, so this needs no bottom margin. */
  #app .cite{display:block;margin:8px 0 0;padding-left:16px;
    border-left:2px solid var(--line);
    font-family:var(--font-mono);font-size:12.5px;line-height:1.6;color:var(--ink-soft);}
  #app .cite a{color:var(--ink-soft);text-decoration:underline;
    text-decoration-color:rgba(39,100,174,.45);text-underline-offset:2px;}
  #app .cite a:hover,#app .cite a:focus-visible{color:var(--amber);text-decoration-color:var(--amber);}
  /* on the dark navy panels the muted ink disappears, so lift it there */
  #app .section-panel .cite,#app .panel-dark .cite{color:rgba(255,255,255,.72);
    border-left-color:rgba(255,255,255,.22);}
  #app .section-panel .cite a,#app .panel-dark .cite a{color:rgba(255,255,255,.8);}
  #app .section-panel .cite a:hover,#app .panel-dark .cite a:hover{color:var(--amber-hi);}
  @media (max-width:620px){
    #app .cite{font-size:12px;padding-left:13px;}
  }

  /* ---------------------------------------------------------------------------
     GUIDES.  Added 7 September 2026.

     The call strip exists because of a measured fault on the residential site: guide
     pages put their call card in an aside that stacks below the article on phones, so
     the first way to reach anybody sat six to eight screens down. One line and one
     48px button directly under the standfirst fixes that on every guide from day one.
     --------------------------------------------------------------------------- */
  #app .guide-help{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;
    margin:20px 0 0;padding:14px 18px;border-left:3px solid var(--amber);
    border-radius:0 6px 6px 0;background:#fff;border-top:1px solid var(--line);
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
  #app .guide-help p{margin:0;flex:1 1 16rem;min-width:0;font-size:15px;line-height:1.55;color:var(--ink-soft);}
  #app .guide-help .btn{flex:0 0 auto;}
  @media (max-width:560px){ #app .guide-help .btn{width:100%;text-align:center;} }

  /* hub cards: same idiom as the service cards, question as the heading */
  #app .guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;}
  #app .guide-card{display:flex;flex-direction:column;gap:10px;background:#fff;
    border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:8px;
    padding:24px 24px 20px;color:inherit;text-decoration:none;
    transition:transform .22s ease,box-shadow .22s ease;}
  #app .guide-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,32,54,.10);}
  #app .guide-card h2{font-size:19px;line-height:1.3;margin:0;}
  #app .guide-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
  #app .guide-card .gc-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--amber);}
  #app .guide-card .goto{margin-top:auto;padding-top:6px;font-family:var(--font-mono);
    font-size:12px;color:var(--amber);}