/* ============================================================
   DENT TIME — SHARED NAV + FOOTER  (single source of truth)
   Linked by every page. Change here = updates site-wide.
   Uses var() with fallbacks so it works whether a page defines
   --font-h/--red (homepage) or --font-head/--accent (service pages).
   ============================================================ */
:root{
  --nv-font-h: var(--font-h, var(--font-head, 'Oswald','Impact',sans-serif));
  --nv-red:    var(--red, var(--accent, #e82020));
  --nv-muted:  var(--muted, rgba(255,255,255,.55));
  --nv-border: var(--border, rgba(255,255,255,.09));
}

/* ── NAV BAR ── */
/* height/position marked !important so this single source of truth wins
   over any page's own inline nav CSS (some legacy pages still define .nav) */
/* Solid background instead of backdrop-filter:blur — a blurred backdrop re-samples
   and re-blurs the scrolling content under the sticky header on EVERY frame. */
/* SCROLL-GROW = TRANSFORM-ONLY (desktop Chrome scroll fix).
   The old grow animated the sticky nav's HEIGHT 68->84, a layout property. Every
   frame of that 300ms transition reflowed the whole document, and desktop Chrome's
   scroll anchoring then re-adjusted the scroll position to compensate — eating the
   user's wheel input right at the top of the page ("sticks from the header, fine
   after"). Mobile was fine because the grow is disabled under 768px.
   Now the nav BOX is a constant 68px (zero reflow, ever). The visual bar is a
   ::before layer 84px tall, scaled to 68px at rest and scaleY(1) when scrolled,
   and the logo enlarges via transform:scale. Same look, GPU-only. */
.nav{position:sticky!important;top:0;left:0;right:0;z-index:100;padding:0 24px;height:68px!important;display:flex;align-items:center;justify-content:space-between;background:transparent;border-bottom:0;will-change:transform}
/* The bar's black DISSOLVES downward (eased multi-stop, no readable onset line, no
   border) so the menu melts into the page instead of ending on a hard edge. Solid
   behind the links row, fading only through the lower tail. */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:84px;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.98) 0,rgba(0,0,0,.97) 52%,rgba(0,0,0,.86) 68%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.22) 92%,rgba(0,0,0,0) 100%);transform:scaleY(.8095);transform-origin:top;transition:transform .3s ease;will-change:transform}
.nav.scrolled::before{transform:scaleY(1)}
.nav-logo{display:flex;align-items:center}
.nav-logo-img{height:46px!important;width:auto;display:block;flex-shrink:0;filter:drop-shadow(0 0 3px rgba(255,255,255,.4));transform-origin:left center;transition:transform .3s ease}
.nav.scrolled .nav-logo-img{transform:scale(1.3913)}

/* margin auto (with !important) centers the menu between logo and CTA on every
   page, overriding legacy per-page inline nav-links margins that left-aligned it */
.nav-links{display:flex;align-items:center;gap:30px;margin:0 auto!important}
.nav-link,.nav-links>a{font-family:var(--nv-font-h);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--nv-muted);background:none;border:none;padding:0;cursor:pointer;transition:color .2s;text-decoration:none;white-space:nowrap}
.nav-links>a:hover,.nav-link:hover,.nav-item--has-dropdown:hover .nav-link{color:#fff}

.nav-cta{font-family:var(--nv-font-h);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:11px 22px;background:linear-gradient(170deg,#f52a2a 0%,#e82020 50%,#c91c1c 100%);color:#fff;border-radius:3px;text-decoration:none;transition:background .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.15)}
.nav-cta:hover{background:linear-gradient(170deg,#f83232 0%,#c41818 100%)}

.nav-item{position:relative}
/* invisible bridge across the gap between trigger and dropdown so the
   menu does not close while the mouse travels down to a service link */
.nav-item--has-dropdown::after{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:18px;display:none}
.nav-item--has-dropdown:hover::after,.nav-item--has-dropdown.open::after{display:block}
.nav-link{display:flex;align-items:center;gap:6px}
.nav-chevron{transition:transform .2s;flex-shrink:0}
.nav-item--has-dropdown:hover .nav-chevron,.nav-item--has-dropdown.open .nav-chevron{transform:rotate(180deg)}

/* dropdown */
.nav-dropdown{display:none;position:absolute;top:calc(100% + 14px);left:-20px;background:linear-gradient(168deg,rgba(20,14,22,.985),rgba(10,12,22,.985));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 10px 12px;min-width:540px;z-index:1000;box-shadow:0 26px 70px rgba(0,0,0,.78),0 0 0 1px rgba(232,32,32,.10)}
.nav-dropdown::after{content:"";position:absolute;left:0;top:0;width:42%;height:2px;border-radius:14px 0 0 0;background:linear-gradient(90deg,var(--nv-red,#e82020),transparent)}
.nav-dropdown::before{content:"";position:absolute;top:-6px;left:24px;width:10px;height:10px;background:#0d0d0d;border-left:1px solid rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);transform:rotate(45deg)}
.nav-item--has-dropdown:hover .nav-dropdown,.nav-item--has-dropdown.open .nav-dropdown{display:grid;grid-template-columns:1fr 1fr;gap:1px 14px;align-content:start}
.nav-dropdown-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:9px;font-family:var(--nv-font-h);font-size:13.5px;font-weight:500;letter-spacing:.045em;text-transform:uppercase;color:rgba(255,255,255,.88);transition:color .18s,background .18s,transform .18s;text-decoration:none;line-height:1.25}
.nav-dropdown-link:hover{color:#fff;background:rgba(232,32,32,.14);transform:translateX(3px)}
.nav-dropdown-link::after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:0;height:16px;border-radius:0 3px 3px 0;background:var(--nv-red,#e82020);transition:width .18s}
.nav-dropdown-link:hover::after{width:3px}
.nav-dropdown-link.nav-active{color:#fff;background:rgba(232,32,32,.2)}
.nav-dropdown-link.nav-active::after{width:3px}
/* flat dropdown: group labels, featured hub, indented children */
.nav-dropdown-label{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:14px 14px 6px;font-family:var(--nv-font-h);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);pointer-events:none}
.nav-dropdown-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent)}
.nav-dropdown-label:first-child{padding-top:4px}
.nav-dropdown-link--hub{grid-column:1/-1;color:#fff;font-weight:700;font-size:14.5px;background:rgba(255,255,255,.05);margin-bottom:2px}
.nav-hub-tag{font-family:var(--nv-font-h);font-size:7.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(232,32,32,.18);color:var(--nv-red);padding:2px 5px;border-radius:2px;margin-left:8px}
.nav-dropdown-link--child{padding-left:14px;font-size:13px;color:rgba(255,255,255,.8)}
.nav-dropdown-link--child::before{content:none}
.nav-dropdown-link{position:relative}

/* nested submenu */
.nav-item--has-submenu{position:relative}
.nav-submenu{display:none;position:absolute;top:0;left:100%;background:#0d0d0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:8px 0;min-width:190px;z-index:1001;box-shadow:0 16px 40px rgba(0,0,0,.7);flex-direction:column}
.nav-item--has-submenu:hover .nav-submenu{display:flex}
.nav-dropdown-link--has-sub .nav-sub-arrow{opacity:.45;flex-shrink:0;transition:opacity .15s}
.nav-item--has-submenu:hover .nav-dropdown-link--has-sub .nav-sub-arrow{opacity:1}

/* hamburger */
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.nav-hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:1px;transition:all .3s}

/* mobile */
@media(max-width:768px){
  .nav-links{display:none}
  /* FIX 2026-07-28 (second pass): bottom:0 did NOT work here. An ancestor of the
     nav carries a transform, which makes IT the containing block for a fixed
     element instead of the viewport, so bottom:0 resolved against the 117px
     header and the panel came out 49px tall (117 minus the 68px top). Viewport
     units are immune to that, so the height is stated explicitly. dvh second so
     it wins where supported and mobile browser chrome does not clip the list. */
  /* FIX 2026-07-28: the open mobile menu was rgba(0,0,0,.97) and only as tall as
     its own items, so the hero headline ghosted through the panel at 3 percent
     and the page showed below it. On the homepage that made the menu unreadable.
     Fully opaque now, and it covers from the header to the bottom of the screen,
     with its own scroll when the list is longer than the viewport. */
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:68px;left:0;right:0;height:calc(100vh - 68px);height:calc(100dvh - 68px);background:#05070d;z-index:999;padding:16px 0 32px;border-bottom:1px solid rgba(255,255,255,.08);gap:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  /* Rows are full width and left aligned. Before this, the dropdown parent
     (SERVICES) sat left while every plain link below it centred itself, because
     the flex column inherited align-items:center from the desktop bar. It read
     as two different menus stacked together, and the divider rules under each
     item were different widths for the same reason. */
  .nav-links.open{align-items:stretch}
  /* Scroll affordance. With the services group expanded the list runs past the
     screen, and a flat cut at the bottom edge reads as the end of the menu. A
     short fade says there is more below without adding a scrollbar. */
  .nav-links.open::after{content:"";position:fixed;left:0;right:0;bottom:0;height:56px;pointer-events:none;background:linear-gradient(180deg,transparent,#05070d 78%);z-index:1000}
  /* Group heading inside the open menu, so the services block reads as a section
     rather than a run of links that happen to be indented. */
  .nav-links.open .nav-dropdown-label{text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:rgba(255,255,255,.42)}
  /* Comfortable tap targets. 14px vertical was under the 44px minimum once the
     font sat on one line. */
  .nav-links.open .nav-link,.nav-links.open .nav-dropdown-link,.nav-links.open>a{min-height:52px;align-items:center}
  .nav-links.open .nav-link,.nav-links.open .nav-dropdown-link,.nav-links.open>a{display:flex;width:100%;justify-content:flex-start;text-align:left;padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.07);font-size:1rem;color:rgba(255,255,255,.75);letter-spacing:.06em}
  .nav-links.open .nav-item--has-dropdown .nav-dropdown{display:none;position:static;background:rgba(255,255,255,.035);border:none;border-radius:0;padding:0;margin:0;box-shadow:none;min-width:auto;width:100%;align-self:stretch;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-links.open .nav-item--has-dropdown .nav-dropdown::before{display:none}
  .nav-links.open .nav-item--has-dropdown.open .nav-dropdown{display:flex;flex-direction:column}
  .nav-links.open .nav-item--has-dropdown{width:100%;align-items:stretch}
  .nav-links.open .nav-item--has-dropdown .nav-link{width:100%;justify-content:space-between;padding:14px 24px}
  /* mobile flat dropdown spacing */
  .nav-links.open .nav-dropdown{grid-template-columns:1fr;padding:0;margin:0;border:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;min-width:auto;width:100%;background:rgba(255,255,255,.035)}
  .nav-links.open .nav-dropdown::after{display:none}
  .nav-links.open .nav-dropdown-label{display:flex;padding:14px 24px 6px;font-size:10.5px;border-bottom:none;color:rgba(255,255,255,.5)}
  .nav-links.open .nav-dropdown-link--child{padding-left:38px;font-size:1rem;color:rgba(255,255,255,.85)}
  .nav-links.open .nav-dropdown-link{border-radius:0}
  .nav-links.open .nav-dropdown-link--child::before{left:28px}
  .nav-links.open .nav-item--has-submenu .nav-submenu{display:none;position:static;background:rgba(255,255,255,.03);border:none;border-radius:0;padding:0;box-shadow:none;flex-direction:column}
  .nav-links.open .nav-item--has-submenu.open .nav-submenu{display:flex}
  .nav-links.open .nav-submenu .nav-dropdown-link{padding-left:40px;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.04)}
  .nav-hamburger{display:flex}
  .nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
  .nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
  /* no grow on mobile: keep the bar at rest scale and the logo unscaled */
  .nav.scrolled::before{transform:scaleY(.8095)}
  .nav.scrolled .nav-logo-img{transform:none}
}

/* ── FOOTER ── */
.footer{background:var(--bg-3,#0a0a0a);border-top:1px solid var(--nv-border);padding:72px 0 40px}
.footer .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-brand .nav-logo{margin-bottom:14px}
.footer-brand .nav-logo-img{height:70px}
.footer-brand p{font-size:14px;font-weight:300;color:var(--nv-muted);line-height:1.7;max-width:300px}
.footer-col h4{font-family:var(--nv-font-h);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:18px}
.footer-col a{display:block;font-size:14px;font-weight:300;color:rgba(255,255,255,.55);margin-bottom:10px;transition:color .2s;text-decoration:none}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding-top:28px;border-top:1px solid var(--nv-border);font-size:13px;font-weight:300;color:var(--muted-2,rgba(255,255,255,.3))}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ============================================================
   LIGHT SECTION THEME (black/white balance) — add class
   "section--light" to any <section>. Flips the design tokens
   so var()-based children adapt, plus catch-alls for the
   service-page template's hardcoded-white elements.
   ============================================================ */
.section--light{
  background:#f4f4f5!important;
  border-top:1px solid rgba(0,0,0,.07)!important;
  color:#16161c;
  /* token flips so var()-driven children adapt automatically.
     Covers both naming conventions used across the site templates. */
  --text:#16161c;--muted:#55555f;--muted-2:rgba(0,0,0,.42);
  --border:rgba(0,0,0,.1);--card:#ffffff;--bg:#f4f4f5;--bg-2:#ececef;--bg-3:#e7e7eb;
  --text-muted:#55555f;--card-bg:#ffffff;--line:rgba(0,0,0,.1);--ink:#16161c;--paper:#f4f4f5;
}
.section--light h1,.section--light h2,.section--light h3,.section--light h4{color:#16161c}
.section--light h1 em,.section--light h2 em,.section--light h3 em{color:var(--nv-red)}
.section--light p{color:#52525c}
.section--light strong,.section--light b{color:#16161c}
.section--light .eyebrow{color:var(--nv-red)}
.section--light .eyebrow::before{background:var(--nv-red)}
/* cards / panels */
.section--light .review,.section--light .mistake__visual,.section--light .price-card,.section--light .faq-item{background:#fff!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 12px 34px rgba(0,0,0,.08)}
.section--light .price-card--featured{border-color:var(--nv-red)!important}
/* reviews */
.section--light .review__text{color:#3a3a42}
.section--light .review__author,.section--light .reviews__meta{color:#86868f}
.section--light .stars,.section--light .review__stars{color:#f5a623}
/* comparison rows */
.section--light .mistake__row{border-bottom-color:rgba(0,0,0,.08)}
.section--light .mistake__row-label{color:#86868f}
.section--light .mistake__row-bad{color:#b15a5a}
.section--light .mistake__row-good{color:#16161c}
.section--light .mistake__visual-label{color:var(--nv-red)}
/* pricing */
.section--light .price-title,.section--light .price-range{color:#16161c}
.section--light .price-sub,.section--light .price-list li{color:#52525c}
.section--light .price-badge{color:var(--nv-red)}
/* faq accordion */
.section--light .faq-q span{color:#16161c}
.section--light .faq-q,.section--light .faq-a{color:#3a3a42}
.section--light .faq-q svg{stroke:#16161c}
/* outline buttons would vanish on light — give them dark strokes */
.section--light .btn-outline{border-color:rgba(0,0,0,.28);color:#2a2a30}
.section--light .btn-outline:hover{border-color:#16161c;color:#16161c}
/* ── hub page (paintless-dent-repair) custom components ── */
.section--light .section-eyebrow{color:var(--nv-red)}
.section--light .review-card{background:#fff!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 12px 34px rgba(0,0,0,.08)}
.section--light .review-card__text{color:#3a3a42}
.section--light .review-card__author{color:#86868f}
.section--light .review-card__stars{color:#f5a623}
.section--light .cities-col,.section--light .cities-col li{color:#52525c}
.section--light .cities-col a{color:#3a3a42}
.section--light .cities-col h3,.section--light .cities-col strong{color:#16161c}
.section--light .faq-item{background:#fff!important;border-color:rgba(0,0,0,.1)!important}
.section--light .faq-q__text,.section--light .faq-num{color:#16161c}
.section--light .faq-q__icon{color:#16161c;stroke:#16161c}
.section--light .faq-a,.section--light .faq-a__inner,.section--light .faq-a *{color:#3a3a42}
.section--light .faq-price-row{border-bottom-color:rgba(0,0,0,.08)}
.section--light .faq-price-row__label{color:#86868f}
.section--light .faq-price-row__value{color:#16161c}

/* ── Reviews floating card (Trustindex widget container, shared) ── */
.reviews-float-card{max-width:1400px;margin:0 auto;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:16px;padding:14px clamp(12px,2.5vw,28px);box-shadow:0 28px 60px rgba(0,0,0,.15),0 6px 16px rgba(0,0,0,.07)}
@media(max-width:600px){.reviews-float-card{border-radius:12px;padding:10px 12px}}

/* ── Full-bleed hero action photo, blended from the left (service pages) ──
   Scoped to .hero--photo so the homepage hero is never affected.
   Photo fills the whole hero; a left-to-right black gradient keeps the
   headline readable and melts the photo in with no hard column seam. */
.hero--photo{position:relative;overflow:hidden}
.hero--photo>.hero__photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;z-index:0}
.hero--photo>.hero__photo-blend{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.88) 22%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.25) 74%,rgba(0,0,0,.45) 100%),
             linear-gradient(0deg,rgba(0,0,0,.5) 0%,transparent 46%)}
.hero--photo .hero__left{position:relative;z-index:2;background:transparent!important}
.hero--photo .hero__left::after{display:none!important}
.hero--photo .hero__right{position:relative;z-index:2;background:transparent!important;overflow:visible}
.hero--photo .hero__photo-tag{z-index:3}
@media(max-width:768px){
  /* on mobile the text overlays the whole photo — darken uniformly for legibility */
  .hero--photo>.hero__photo-blend{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.72) 100%)}
}

/* ------------------------------------------------------------
   RED HEADINGS ON A LIGHT SECTION
   .glow is a metallic gradient tuned for a dark background. Its
   brightest stop is #ff7a88, which is nearly white, and it carries
   heavy black drop-shadows to lift it off dark. Put that on #f4f4f5
   and the light stops vanish while the shadows go muddy, which is
   why red headings read washed out on the light sections.

   Same idea, re-tuned: the ramp tops out at #ff4757 instead of
   #ff7a88, the dark stops go deeper, and the shadow becomes a thin
   contact shadow instead of a black halo. The dark-section .glow is
   untouched.
   ------------------------------------------------------------ */
.section--light .glow{
  background:linear-gradient(150deg,#8e0010 0%,#b80015 16%,#d80020 30%,#ff4757 46%,#e00020 58%,#b80015 78%,#8e0010 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-text-stroke:.35px rgba(80,0,8,.4);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.16));
}
.section--light h2 .glow{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.16)) drop-shadow(0 0 16px rgba(216,0,32,.14));
}

/* ------------------------------------------------------------
   LIGHT SECTION MEETING A PHOTO BAND
   PhotoBand masks its own image to transparent at the top and
   bottom so it dissolves instead of ending in a straight line. That
   assumes the page behind it is dark. Following a light section the
   image dissolved into the dark page background while the section
   above it was near-white, so the feather produced the exact hard
   line it exists to prevent.

   Painting the band's own top with the light colour and fading that
   out lets the photo emerge from the light section instead of from
   a dark strip underneath it. Same in reverse when a light section
   follows a band.
   ------------------------------------------------------------ */
.section--light + .photoband{
  background:linear-gradient(180deg,#f4f4f5 0%,#f4f4f5 6%,rgba(244,244,245,.92) 14%,rgba(244,244,245,.55) 24%,rgba(244,244,245,0) 38%)!important;
}
.photoband:has(+ .section--light){
  background:linear-gradient(0deg,#f4f4f5 0%,#f4f4f5 5%,rgba(244,244,245,.92) 13%,rgba(244,244,245,.5) 23%,rgba(244,244,245,0) 36%)!important;
}
/* Both neighbours light: fade at each end. :has() is unsupported in a
   handful of older browsers, where this degrades to the top fade only,
   which is the edge that shows. */
.section--light + .photoband:has(+ .section--light){
  background:linear-gradient(180deg,#f4f4f5 0%,rgba(244,244,245,.92) 13%,rgba(244,244,245,0) 34%,rgba(244,244,245,0) 66%,rgba(244,244,245,.92) 87%,#f4f4f5 100%)!important;
}

/* ------------------------------------------------------------
   MOBILE MENU DENSITY
   Measured on a 375x812 phone: 1,219px of menu inside a 743px
   window, so 1.64 screens. The services were the part you had to
   scroll for, which is backwards, since they are the pages people
   are actually looking for.

   The service list becomes two columns and the rows tighten. The
   group labels still span the full width so the grouping survives.
   Everything now fits without scrolling on a standard phone, and
   the whole menu still scrolls for shorter screens.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .nav-links.open .nav-item--has-dropdown.open .nav-dropdown{
    display:grid;grid-template-columns:1fr 1fr;column-gap:0;
  }
  .nav-links.open .nav-dropdown-label{
    grid-column:1/-1;padding:10px 24px 4px;font-size:9.5px;
  }
  .nav-links.open .nav-dropdown-link--child{
    min-height:40px;padding:9px 10px 9px 24px;font-size:.88rem;letter-spacing:.02em;line-height:1.25;
  }
  .nav-links.open .nav-dropdown-link--child::before{display:none}
  /* the hub row stays full width, it is the parent of the rest */
  .nav-links.open .nav-dropdown-link--hub{grid-column:1/-1;min-height:42px;padding:10px 24px}
  /* top-level rows tighten a little too */
  .nav-links.open>a,.nav-links.open .nav-item--has-dropdown .nav-link{min-height:44px;padding:11px 24px}

  /* The six top-level links go two-up as well. Services keeps the full width
     because it is a parent, not a peer. Together with the two-column service
     list this brings the whole menu inside one screen on a standard phone. */
  .nav-links.open{display:grid;grid-template-columns:1fr 1fr;align-content:start}
  .nav-links.open .nav-item--has-dropdown{grid-column:1/-1}
  .nav-links.open>a{min-height:42px;padding:10px 24px;font-size:.92rem}
  .nav-links.open>a:nth-of-type(odd){border-right:1px solid rgba(255,255,255,.07)}
}

/* ── READ PROGRESS ─────────────────────────────────────────────────────────
   Injected by chrome.js on long pages only. Sits above the sticky nav at
   top:0 because 162 pages already use top:68px for the jump rail. */
.read-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:101;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,#ff3a3a,#e82020 60%,#c81a1a);
  box-shadow:0 0 10px rgba(232,32,32,.55);
  pointer-events:none; will-change:transform;
}
@media(prefers-reduced-motion:reduce){ .read-progress{ box-shadow:none } }