/* Boulder AIR — combined page: redesign header, hero and "What we do" on top of the live site's sections.
   Loaded AFTER the live stylesheets (homepage_styles1.css, homepage_modern.css). Every redesign class here is
   prefixed rd- (or is a name the live CSS never uses: aqc-*, bento/bcard), and element rules are
   scoped under .rd, so neither stylesheet leaks into the other half of the page. */
:root {
  --nav-h: 80px;
  --peek: clamp(10rem, 30vh, 17rem); /* how much of the "What we do" panel shows over the hero */
  --reveal: clamp(8rem, 24vh, 15rem); /* how far the "What we do" panel overlaps the top of the Services mountains */
  --rd-navy: #0f2540;
  --rd-primary: #1a365d;
  --rd-primary-light: #2c5282;
  --rd-accent: #38b2ac;
  --rd-accent-dark: #2c9a94;
  --rd-gold: #d69e2e;
  --rd-bg: #f8fafc;
  --rd-text: #1e293b;
  --rd-muted: #64748b;
  --rd-border: #e2e8f0;
  --rd-shadow: 0 4px 12px rgba(0,0,0,.08);
  --rd-shadow-lg: 0 12px 40px rgba(0,0,0,.14);
  --rd-display: 'DM Serif Display', Georgia, serif;
  --rd-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
/* Sticky header covers the top of each section when jumping to it from the nav. */
section[id], .services-archives[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* Base, scoped to the redesign blocks */
.rd { font-family: var(--rd-body); color: var(--rd-text); line-height: 1.65; -webkit-font-smoothing: antialiased; }
.rd img { max-width: 100%; display: block; }
.rd h1, .rd h2, .rd h3 { font-family: var(--rd-display); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; color: var(--rd-navy); letter-spacing: normal; text-transform: none; }
.rd h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.rd h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.rd p { margin: 0 0 1em; }
.rd a:hover { text-decoration: none; }
.rd-container { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.rd-eyebrow { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-accent-dark); margin-bottom: .75rem; }
.rd-lead { font-size: 1.2rem; color: var(--rd-muted); max-width: 62ch; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 999; }

/* Header */
.rd-header { position: sticky; top: 0; z-index: 1000; margin-bottom: calc(-1 * var(--nav-h)); /* pull hero up underneath the glass nav */
  background: rgba(38,66,102,.72);
  backdrop-filter: blur(16px) saturate(110%); -webkit-backdrop-filter: blur(16px) saturate(110%);
  border-bottom: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 20px rgba(0,0,0,.15); }
.rd-header .rd-container { width: min(1400px, 100% - 2.5rem); display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.rd-logo img { height: clamp(38px, 5vw, 65px); width: auto; }
.rd-nav { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.rd-nav li { margin: 0; }
.rd-nav a { display: block; padding: .6rem 1.1rem; color: #fff; text-decoration: none; font-weight: 500; font-size: 1.1rem; letter-spacing: .02em; border-radius: 999px; transition: .15s; }
.rd-nav a:hover, .rd-nav a.is-active { color: #fff; background: rgba(255,255,255,.12); }
.rd-nav .rd-cta { background: var(--rd-accent); color: var(--rd-navy); margin-left: .5rem; }
.rd-nav .rd-cta:hover, .rd-nav .rd-cta.is-active { background: #4fd1c5; color: var(--rd-navy); }
.rd-nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; }
.rd-has-sub > a::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .4em; border-right: 2px solid rgba(255,255,255,.75); border-bottom: 2px solid rgba(255,255,255,.75); transform: translateY(-2px) rotate(45deg); }
.rd-submenu { list-style: none; margin: 0; padding: .5rem; }
.rd-submenu .rd-submenu-all { color: var(--rd-accent); font-weight: 700; }
.rd-submenu-sep { height: 1px; background: rgba(255,255,255,.15); margin: .35rem .5rem; }
@media (min-width: 1181px) {
  .rd-has-sub { position: relative; }
  .rd-has-sub .rd-submenu { position: absolute; top: 100%; left: 0; min-width: 220px; background: rgba(15,37,64,.97); backdrop-filter: blur(28px) saturate(120%); -webkit-backdrop-filter: blur(28px) saturate(120%); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; box-shadow: var(--rd-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s; }
  .rd-has-sub:hover .rd-submenu, .rd-has-sub:focus-within .rd-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .rd-submenu a { padding: .55rem .9rem; font-size: 1rem; white-space: nowrap; }
}
@media (max-width: 1180px) {
  .rd-logo img { height: 55px; }
  .rd-nav-toggle { display: block; }
  .rd-nav { position: absolute; top: var(--nav-h); left: 0; right: 0; background: rgba(15,37,64,.95); backdrop-filter: blur(28px) saturate(120%); -webkit-backdrop-filter: blur(28px) saturate(120%); border-bottom: 1px solid rgba(255,255,255,.2); flex-direction: column; align-items: stretch; padding: .5rem 1rem 1rem; display: none; }
  .rd-nav.open { display: flex; }
  .rd-nav .rd-cta { margin: .5rem 0 0; text-align: center; }
  .rd-has-sub > a::after { display: none; }
  .rd-submenu { display: none; }
  /* Phone/tablet menu: an arrow button next to Monitoring and Data expands their links in place */
  .rd-nav { max-height: calc(100svh - var(--nav-h)); overflow-y: auto; background: var(--rd-navy); } /* solid, so page text doesn't show through the longer menu */
  .rd-has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .rd-has-sub > a { flex: 1; }
  .rd-sub-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
  .rd-sub-toggle svg { width: .8rem; transition: transform .2s; }
  .rd-has-sub.sub-open .rd-sub-toggle svg { transform: rotate(180deg); }
  .rd-has-sub.sub-open .rd-submenu { display: block; flex-basis: 100%; margin: .15rem 0 .4rem 1rem; padding: .25rem 0 .25rem .75rem; border-left: 2px solid rgba(56,178,172,.5); }
  .rd-submenu a { font-size: 1rem; padding: .5rem .9rem; color: rgba(255,255,255,.85); }
  .rd-submenu-sep { margin: .3rem .9rem; }
}
@media (min-width: 1181px) { .rd-sub-toggle { display: none; } }

/* Buttons */
.rd-btn { display: inline-block; padding: .85rem 1.6rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: .95rem; line-height: 1.65; transition: .2s; border: 2px solid transparent; }
.rd-btn:hover { transform: translateY(-1px); }
.rd-btn-primary, .rd-btn-primary:hover { color: var(--rd-navy); }
.rd-btn-primary { background: var(--rd-accent); }
.rd-btn-primary:hover { background: #4fd1c5; }
.rd-btn-ghost, .rd-btn-ghost:hover { color: #fff; }
.rd-btn-ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); }
.rd-btn-ghost:hover { background: rgba(255,255,255,.22); }
.rd-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Hero: fills the screen; the "What we do" panel slides up over its bottom edge so visitors can see there is more below */
/* Hero stays pinned while the "What we do" panel slides up over it. --hero-stick is set by combined.js:
   0 normally, negative when the hero is taller than the screen so it pins at its bottom edge instead. */
.rd-stack { position: relative; }
.rd-hero { position: sticky; top: var(--hero-stick, 0px); z-index: 0; color: #fff; background: var(--rd-navy); overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
/* The video fills only the part of the hero above the "What we do" panel, anchored near the bottom of the frame,
   so the Flatirons show on the first screen instead of only sky. */
.rd-hero video { position: absolute; inset: 0 0 auto 0; width: 100%; height: calc(100% - var(--peek) + 28px); object-fit: cover; object-position: center 88%; opacity: .68; }
.rd-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,37,64,.8) 20%, rgba(15,37,64,.22)); }
.rd-hero .rd-container { position: relative; z-index: 1; padding: calc(var(--nav-h) + clamp(1.5rem, 5vh, 4rem)) 0 calc(var(--peek) + clamp(1.5rem, 4vh, 3rem)); }
.rd-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3rem; align-items: center; }
.rd-hero h1 { color: #fff; max-width: 24ch; font-size: clamp(2.2rem, min(5vw, 7vh), 3.6rem); }
.rd-hero .rd-lead { color: #dbe7f3; margin-bottom: 1.2rem; }
.rd-hero .rd-eyebrow { color: var(--rd-accent); }
.rd-tagline { font-weight: 700; letter-spacing: .04em; color: var(--rd-accent); margin-bottom: 2rem; }
/* Short laptop screens: compact the hero so the overlapping panel still shows above the fold. */
@media (max-height: 820px) and (min-width: 901px) {
  .rd-hero h1 { margin-bottom: .35em; }
  .rd-hero .rd-lead { margin-bottom: .6rem; }
  .rd-tagline { margin-bottom: 1.1rem; }
}

/* Air quality card (fed by ../js/regional_aqc.js, same element ids as the live badge) */
.aqc-card { position: relative; width: 270px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding: 1.6rem 1.4rem 1.4rem; color: #fff; text-decoration: none; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); border-radius: 22px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 40px rgba(0,0,0,.25); transition: background .2s, transform .2s; }
a.aqc-card:hover { color: #fff; background: rgba(255,255,255,.14); transform: translateY(-2px); }
.aqc-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.aqc-dial { position: relative; display: grid; place-items: center; width: 118px; height: 118px; margin: .3rem 0; }
.aqc-dot { grid-area: 1/1; width: 100%; height: 100%; border-radius: 50%; background: #cbd5e1; transition: background-color .4s; box-shadow: 0 0 28px rgba(255,255,255,.12); }
/* Pastel AQC scale. regional_aqc.js sets the standard EPA colors inline, so they are recolored here by matching that inline value. */
.aqc-dot[style*="rgb(0, 228, 0)"], .aqc-dot[style*="rgb(0,228,0)"] { background-color: rgb(134,225,160) !important; }
.aqc-dot[style*="rgb(255, 255, 0)"], .aqc-dot[style*="rgb(255,255,0)"] { background-color: rgb(247,232,132) !important; }
.aqc-dot[style*="rgb(255, 126, 0)"], .aqc-dot[style*="rgb(255,126,0)"] { background-color: rgb(250,183,120) !important; }
.aqc-dot[style*="rgb(255, 0, 0)"], .aqc-dot[style*="rgb(255,0,0)"] { background-color: rgb(244,125,125) !important; }
.aqc-dot[style*="rgb(143, 63, 151)"], .aqc-dot[style*="rgb(143,63,151)"] { background-color: rgb(214,90,104) !important; }
.aqc-dot[style*="rgb(126, 0, 35)"], .aqc-dot[style*="rgb(126,0,35)"] { background-color: rgb(168,84,108) !important; }
.aqc-dot { animation: aqc-pulse 2.6s ease-in-out infinite; }
@keyframes aqc-pulse { 0%, 100% { transform: scale(1.05); opacity: .8; filter: brightness(.88); } 50% { transform: scale(1); opacity: 1; filter: brightness(1.18); } }
.aqc-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; z-index: -1; filter: blur(7px); opacity: 0; animation: aqc-puff 2.6s ease-out infinite; pointer-events: none; }
@keyframes aqc-puff { 0%, 43.9% { transform: scale(1); opacity: 0; } 44% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aqc-dot, .aqc-dot::before { animation: none; } }
.aqc-dot::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #13294a; }
.aqc-value { grid-area: 1/1; position: relative; z-index: 1; font-family: var(--rd-display); font-size: 2.9rem; line-height: 1; }
.aqc-label { font-size: 1.15rem; font-weight: 700; }
.aqc-meta { display: flex; flex-direction: column; font-size: .8rem; color: rgba(255,255,255,.72); line-height: 1.45; }
.aqc-go { font-size: .82rem; font-weight: 700; color: var(--rd-accent); }
.aqc-demo { position: absolute; top: -11px; right: 14px; background: var(--rd-gold); color: #1e293b; font-size: .65rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
@media (max-width: 900px) {
  .rd-hero-grid { grid-template-columns: minmax(0,1fr); gap: 2rem; }
  /* Narrow screens: compact horizontal card shown first, above the headline, so the AQC is visible immediately. */
  .aqc-card { order: -1; width: min(100%, 420px); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 1.2rem; row-gap: .1rem; align-items: center; text-align: left; padding: 1rem 1.2rem; border-radius: 18px; }
  .aqc-kicker { grid-column: 1 / -1; margin-bottom: .5rem; }
  .aqc-dial { grid-row: 2 / 5; width: 84px; height: 84px; margin: 0; }
  .aqc-dot::after { inset: 6px; }
  .aqc-value { font-size: 2.1rem; }
  .aqc-label { grid-column: 2; align-self: end; font-size: 1.05rem; }
  .aqc-meta, .aqc-go { grid-column: 2; align-self: start; font-size: .78rem; }
  .aqc-demo { right: 12px; }
}

/* "What we do" panel overlapping the hero */
.rd-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.rd-overlap { position: relative; z-index: 2; margin-top: calc(-1 * var(--peek)); padding-top: clamp(1.6rem, 3vh, 2.25rem); background: var(--rd-bg); border-radius: 28px; margin-bottom: calc(-1 * var(--reveal)); box-shadow: 0 -18px 40px rgba(15,37,64,.28), 0 18px 40px rgba(15,37,64,.35); }
.rd-overlap::before { content: ""; position: absolute; top: .85rem; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: var(--rd-border); }
@media (max-width: 600px) { .rd-overlap { border-radius: 20px; } }
.rd-section-head { margin-bottom: 2.5rem; }

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(270px, auto); gap: 1.25rem; }
.b-a { grid-column: span 7; grid-row: span 2; } .b-b { grid-column: span 5; } .b-c { grid-column: span 5; }
.b-d, .b-e, .b-f { grid-column: span 4; }
.bcard { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: 22px; color: #fff; text-decoration: none; isolation: isolate; box-shadow: var(--rd-shadow); transition: transform .3s, box-shadow .3s; }
.bcard:hover { color: #fff; }
.bcard:hover, .bcard:focus-visible { transform: translateY(-4px); box-shadow: var(--rd-shadow-lg); }
.bcard:focus-visible { outline: 3px solid rgba(56,178,172,.7); outline-offset: 3px; }
.rd .bcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.rd .bcard:hover img, .rd .bcard:focus-visible img { transform: scale(1.07); }
.bshade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,37,64,.05) 0%, rgba(15,37,64,.6) 42%, rgba(15,37,64,.94) 100%); transition: background .4s; }
.bcard:hover .bshade { background: linear-gradient(180deg, rgba(15,37,64,.2) 0%, rgba(15,37,64,.72) 42%, rgba(15,37,64,.96) 100%); }
.btext { text-shadow: 0 1px 12px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: .35rem; padding: 1.6rem 1.7rem 1.5rem; max-width: 56ch; }
.bnum { align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .16em; color: var(--rd-accent); background: rgba(15,37,64,.7); padding: .2rem .65rem; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btitle { font-family: var(--rd-display); font-size: 1.7rem; line-height: 1.15; }
.b-a .btitle { font-size: clamp(2rem, 3vw, 2.6rem); }
.bdesc { color: rgba(255,255,255,.85); font-size: .96rem; line-height: 1.55; }
.bchips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.bchips i { font-style: normal; font-size: .75rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bgo { margin-top: .6rem; font-weight: 700; font-size: .9rem; color: var(--rd-accent); }
.bgo b { display: inline-block; transition: transform .25s; }
.bcard:hover .bgo b { transform: translateX(6px); }
@media (max-width: 860px) { .bento { grid-template-columns: 1fr; grid-auto-rows: minmax(260px, auto); } .b-a, .b-b, .b-c, .b-d, .b-e, .b-f { grid-column: auto; grid-row: auto; } .b-a { min-height: 380px; } }
@media (prefers-reduced-motion: reduce) { .bcard, .rd .bcard img, .bgo b { transition: none; } }

/* "I'm looking for…" quick links at the top of the overlapping panel */
.rd-quick { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); container-type: inline-size; }
.rd-quick-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-muted); margin-bottom: .55rem; }
.rd-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; } /* minmax(0, …): let text wrap instead of pushing the row off the edge */
.rd-quick-item { position: relative; background: #fff; border: 1px solid var(--rd-border); border-radius: 16px; box-shadow: var(--rd-shadow); transition: border-color .2s, box-shadow .2s, transform .2s; }
.rd-quick-item:hover, .rd-quick-pick[open] { border-color: var(--rd-accent); box-shadow: var(--rd-shadow-lg); transform: translateY(-2px); }
a.rd-quick-item, .rd-quick-item summary { display: flex; align-items: center; gap: .75rem; padding: .7rem .95rem; color: var(--rd-navy); text-decoration: none; cursor: pointer; }
.rd-quick-item summary { list-style: none; height: 100%; } /* fill the row height so a short box stays centered */
.rd-quick-item summary::-webkit-details-marker { display: none; }
.rd-quick-item > svg, .rd-quick-item summary > svg:first-child { flex: none; width: 2.2rem !important; height: 2.2rem; padding: .56rem; border-radius: 50%; background: rgba(56,178,172,.14); color: var(--rd-accent-dark); }
.rd-quick-item span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rd-quick-item b { font-size: .95rem; font-weight: 700; }
.rd-quick-item small { font-size: .78rem; color: var(--rd-muted); }
.rd-quick-caret { flex: none; margin-left: auto; width: .75rem; color: var(--rd-muted); transition: transform .2s; }
.rd-quick-pick[open] .rd-quick-caret { transform: rotate(180deg); }
.rd-quick-pick[open] { z-index: 10; } /* keep the open menu above the "What we do" cards below it */
.rd-quick-menu { position: absolute; z-index: 5; top: calc(100% + .4rem); left: 0; right: 0; list-style: none; margin: 0; padding: .4rem; background: #fff; border: 1px solid var(--rd-border); border-radius: 14px; box-shadow: var(--rd-shadow-lg); }
.rd-quick-menu a { display: block; padding: .55rem .8rem; border-radius: 9px; color: var(--rd-navy); font-weight: 600; font-size: .92rem; text-decoration: none; }
.rd-quick-menu a:hover, .rd-quick-menu a:focus-visible { background: rgba(56,178,172,.12); color: var(--rd-navy); }
@container (max-width: 66rem) { .rd-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 2x2 once four boxes get too narrow */
@media (max-width: 520px) { .rd-quick-grid { grid-template-columns: 1fr; gap: .6rem; } }

/* Footer sitemap: widens the live footer grid to brand + three link columns + visitor counter */
.footer-content.rd-sitemap { max-width: 1240px; }
.rd-sitemap .footer-info-grid { grid-template-columns: 1.4fr repeat(3, 1fr) auto; gap: 2.5rem; }
.rd-sitemap .footer-nav { gap: .15rem; }
.rd-sitemap .footer-link { font-size: .92rem; align-self: flex-start; }
@media (max-width: 1000px) {
  .rd-sitemap .footer-info-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .rd-sitemap .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .rd-sitemap .footer-info-grid { grid-template-columns: 1fr 1fr; }
}
.rd-sitemap + .footer-bottom-modern .footer-bottom-content { max-width: 1240px; padding: 0 var(--space-xl); } /* line up with the wider sitemap */

/* Services section: the hero video is pinned to the bottom of the screen behind this section (same size as in the
   hero, no zoom), with its sky faded into the navy so only the mountains show. The section's content scrolls over
   it like a layer on top, uncovering more of the mountains; the "What we do" panel above uncovers it the same way.
   clip-path on the wrapper limits the position:fixed video to this section's box. */
.rd-video-bg { position: relative; isolation: isolate; background: var(--rd-navy); }
/* The panel above covers the top var(--reveal) of this section; push the content down by the same amount, and
   land nav jumps where the panel has just cleared the mountains rather than at the section's (covered) top. */
.rd-video-bg > .container { margin-top: var(--reveal); }
#services.rd-video-bg { scroll-margin-top: calc(var(--nav-h) - var(--reveal)); }
.rd-fixed-bg { position: absolute; inset: 0; z-index: -1; clip-path: inset(0); pointer-events: none; }
.rd-fixed-bg video { position: fixed; left: 0; bottom: 0; width: 100%; height: 100vh; object-fit: cover; object-position: center bottom; opacity: .68;
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 60%); mask-image: linear-gradient(to bottom, transparent 30%, #000 60%); }
.rd-fixed-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,37,64,.8) 20%, rgba(15,37,64,.22)); }

/* Site metadata: shown directly (no toggle); a grid keeps the 9 links compact on wide screens */
#metadata .services-archives-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .75rem; max-width: 1000px; margin-inline: auto; }
#metadata .services-archives-links a { margin: 0; }

/* Publication search */
.rd-pubsearch { max-width: 680px; margin: 0 auto 2rem; text-align: center; }
.rd-pubsearch-box { display: flex; align-items: center; gap: .7rem; margin: 0; padding: .8rem 1.2rem; background: #fff; border: 1px solid var(--rd-border); border-radius: 999px; box-shadow: var(--rd-shadow); cursor: text; transition: border-color .2s, box-shadow .2s; }
.rd-pubsearch-box:focus-within { border-color: var(--rd-accent); box-shadow: 0 0 0 4px rgba(56,178,172,.15); }
.rd-pubsearch-box svg { color: var(--rd-muted); width: 1rem; }
.rd-pubsearch-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 1rem var(--rd-body); color: var(--rd-text); }
.rd-pubsearch-count { margin: .6rem 0 0; font-size: .85rem; color: var(--rd-muted); }
.rd-pubsearch-none { text-align: center; color: var(--rd-muted); padding: 2rem 0; }
.publications-container [hidden] { display: none !important; }
/* While searching, every year with a match is shown open, older years included (overrides the accordion's inline max-heights) */
.rd-searching .publication-year-content, .rd-searching .publications-archive-content { max-height: none !important; overflow: visible; }
.rd-searching .publication-year-content { padding: 1rem 0 1.5rem; }
.rd-searching .publications-archive-content .publication-year-accordion { opacity: 1; transform: none; }
.rd-searching .publications-archive-toggle, .rd-searching .publication-year-header svg { display: none; }
.rd-searching .publication-year-header { pointer-events: none; }
.publication-item mark { background: rgba(56,178,172,.25); color: inherit; padding: 0 .1em; border-radius: 3px; }
.rd-searching .publications-archive-wrapper, .rd-searching .publications-archive-content { margin: 0; padding: 0; border: 0; }
.rd-searching .publications-archive-wrapper::before, .rd-searching .publications-archive-wrapper::after { display: none; }

/* Services: all four offerings as a grid of cards (no tabs), using the live site's stacked image-over-text layout */
.rd-svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.rd-svc-grid .offerings-panel { flex-direction: column; min-height: 0; border-left: none; border-top: 4px solid var(--rd-accent); border-radius: 20px; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.rd-svc-grid .offerings-panel-image { width: 100%; height: 220px; order: -1; }
.rd-svc-grid .offerings-panel-image::before { display: none; }
.rd-svc-grid .offerings-panel-text { flex: 1; justify-content: flex-start; padding: 1.75rem 2rem 2rem; }
.rd-svc-grid .offerings-panel-desc { max-width: none; }
.rd-svc-grid .offerings-panel-actions { margin-top: auto; padding-top: .5rem; }
@media (max-width: 860px) { .rd-svc-grid { grid-template-columns: 1fr; } .rd-svc-grid .offerings-panel-image { height: 180px; } }

/* Services cards as frosted glass over the mountains, sliding in from alternating sides as they scroll into view
   (and back out when scrolled away). combined.js toggles .is-in; without JS or with reduced motion they just show. */
.rd-svc-grid { gap: 1.75rem; }
.rd-svc-grid .offerings-panel {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.18); border-top: 1px solid rgba(255,255,255,.35);
  border-radius: 24px; padding: .6rem;
  box-shadow: 0 20px 50px rgba(5,15,30,.35), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .8s cubic-bezier(.2,.75,.2,1), opacity .8s ease, border-color .3s, background .3s;
}
.rd-svc-grid .offerings-panel:hover { background: rgba(255,255,255,.12); border-color: rgba(56,178,172,.55); }
.rd-svc-grid .offerings-panel-image { border-radius: 18px; height: 210px; }
.rd-svc-grid .offerings-panel-image img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.rd-svc-grid .offerings-panel:hover .offerings-panel-image img { transform: scale(1.05); }
.rd-svc-grid .offerings-panel-image-overlay { background: linear-gradient(180deg, transparent 35%, rgba(15,37,64,.75)); }
.rd-svc-grid .offerings-panel-text { padding: 1.5rem 1.4rem 1.4rem; gap: .7rem; }
.rd-svc-grid .offerings-panel-number { color: var(--rd-accent); opacity: .9; font-size: .8rem; font-family: var(--rd-body); font-weight: 700; letter-spacing: .16em; margin: 0; }
.rd-svc-grid .offerings-panel-title { color: #fff; font-size: 1.6rem; }
.rd-svc-grid .offerings-panel-desc { color: rgba(255,255,255,.78); }
.rd-svc-grid .offerings-panel-actions { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); }
.rd-svc-grid .offerings-panel-actions .offering-cta-btn { order: 2; padding: .7rem 1.5rem; font-size: .92rem; box-shadow: 0 4px 18px rgba(56,178,172,.35); }
.section-dark .rd-svc-grid .offerings-detail-btn { color: rgba(255,255,255,.85); }
.section-dark .rd-svc-grid .offerings-detail-btn:hover { color: #fff; text-decoration-color: var(--rd-accent); }
/* Slide-in states */
.rd-reveal .rd-svc-grid .offerings-panel { opacity: 0; transform: translateX(-70px) scale(.97); }
.rd-reveal .rd-svc-grid .offerings-panel:nth-child(even) { transform: translateX(70px) scale(.97); }
.rd-reveal .rd-svc-grid .offerings-panel.is-in { opacity: 1; transform: none; }
.rd-reveal .rd-svc-grid .offerings-panel.is-in:nth-child(even) { transition-delay: .12s; }
@media (max-width: 860px) {
  .rd-reveal .rd-svc-grid .offerings-panel, .rd-reveal .rd-svc-grid .offerings-panel:nth-child(even) { transform: translateY(40px); }
  /* the :nth-child(even) rule above outranks plain .is-in, which left cards 2 and 4 stuck 40px low, over the next card */
  .rd-reveal .rd-svc-grid .offerings-panel.is-in, .rd-reveal .rd-svc-grid .offerings-panel.is-in:nth-child(even) { transform: none; }
}
.rd-svc-grid .offerings-detail-btn, .rd-svc-grid .offering-cta-btn { white-space: nowrap; }
@media (max-width: 420px) { .rd-svc-grid .offerings-panel-actions { flex-wrap: wrap; } .rd-svc-grid .offerings-panel-actions .offering-cta-btn { padding: .65rem 1.2rem; } }
/* Photo framing in the Services glass cards: anchor to the top so the tower top (with the hawk) and the
   publication's title are in view instead of the center of the image. */
.rd-svc-grid #offerings-panel-0 .offerings-panel-image img,
.rd-svc-grid #offerings-panel-1 .offerings-panel-image img { object-position: center top; }

/* Photo at the top of the "Learn More" drawer */
.rd-drawer-img { flex-shrink: 0; height: 200px; margin: 1.5rem var(--space-2xl, 3rem) 0; border-radius: 16px; overflow: hidden; background: #dfe7ee; }
.rd-drawer-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Phones: trim the hero (tagline + stats) so the "I'm looking for…" shortcuts come into view sooner */
@media (max-width: 600px) {
  .rd-tagline, .rd-hero .rd-eyebrow { display: none; }
  .rd-hero .rd-container { padding-top: calc(var(--nav-h) + 1rem); }
  .rd-hero-grid { gap: 1.25rem; }
  .rd-hero h1 { font-size: 1.85rem; margin-bottom: .4em; }
  .rd-hero .rd-lead { font-size: 1.02rem; margin-bottom: 1rem; }
  .aqc-card { padding: .8rem 1rem; }
  .aqc-kicker { margin-bottom: .25rem; }
  .aqc-dial { width: 70px; height: 70px; }
}
@media (max-width: 600px) { :root { --peek: clamp(10rem, 32vh, 16rem); } }

/* Services now sits directly above the (navy) Monitoring section: fade the mountains out at the bottom edge so there's no seam */
.rd-fixed-bg::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 2; background: linear-gradient(to bottom, transparent, #1a365d); }
#services.rd-video-bg + #monitoring { position: relative; z-index: 1; margin-top: -2px; } /* covers a sub-pixel sliver of the pinned video at the seam */
/* Short phones (e.g. iPhone SE): shrink the headline a bit more so the shortcut tiles still peek above the fold */
@media (max-width: 600px) and (max-height: 720px) {
  .rd-hero .rd-container { padding-top: calc(var(--nav-h) + .5rem); }
  .rd-hero h1 { font-size: 1.6rem; }
  .rd-hero .rd-lead { font-size: .95rem; }
  .aqc-dial { width: 60px; height: 60px; }
}

/* Desktop: bring the "What we do" photos up to the first screen so it's obvious there's more below.
   The panel peeks higher, the hero copy is a little tighter, and the section heading is a single line. */
@media (min-width: 901px) {
  :root { --peek: clamp(12rem, 40vh, 27rem); }
  .rd-hero .rd-container { padding-top: calc(var(--nav-h) + clamp(1rem, 3vh, 2.5rem)); padding-bottom: calc(var(--peek) + clamp(1rem, 2.5vh, 2rem)); }
  .rd-hero h1 { max-width: 30ch; font-size: clamp(2.2rem, min(3.7vw, 5.6vh), 3.1rem); margin-bottom: .35em; }
  .rd-hero .rd-lead { margin-bottom: .8rem; }
  .rd-tagline { margin-bottom: 1.3rem; }
  .rd-quick { margin-bottom: 1.75rem; }
  #what-we-do .rd-section-head { margin-bottom: 1.4rem; }
  #what-we-do .rd-section-head h2 { margin: 0; font-size: clamp(1.7rem, 2.3vw, 2.15rem); }
}

/* "Data & public reporting" card: two destinations (monitoring site pages, data & tools) shown as pill links */
.bgo-split { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.bgo-split a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border-radius: 999px; font-weight: 700; font-size: .88rem; color: #fff; text-decoration: none; text-shadow: none; background: rgba(56,178,172,.85); border: 1px solid rgba(255,255,255,.25); transition: background .2s; }
.bgo-split a + a { background: rgba(255,255,255,.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bgo-split a:hover, .bgo-split a:focus-visible { color: #fff; background: var(--rd-accent-dark); }
.bgo-split a + a:hover, .bgo-split a + a:focus-visible { background: rgba(255,255,255,.26); }
.bgo-split b { display: inline-block; transition: transform .25s; }
.bgo-split a:hover b { transform: translateX(4px); }

/* Expertise: closing link back to Services */
.rd-exp-cta { text-align: center; margin: 2.5rem 0 0; font-size: 1.05rem; color: var(--color-text-muted, #64748b); }
.rd-exp-cta a { margin-left: .35rem; font-weight: 700; color: var(--rd-accent-dark); text-decoration: none; border-bottom: 1px solid rgba(56,178,172,.45); padding-bottom: 2px; }
.rd-exp-cta a:hover { color: var(--rd-navy); border-color: var(--rd-navy); }

/* Desktop: everything a touch larger than the browser default (rem-based, so spacing grows with the text). */
@media (min-width: 901px) {
  html { font-size: 17px; }
  body { font-size: 1.125rem; } /* live CSS sets 18px */
}

/* Very wide / high-res screens: grow the whole page in proportion instead of leaving a small column
   in a sea of margin. Type and spacing are rem, so raising the root size scales them; the fixed-px
   widths and heights below are restated in rem (px / 16) so they scale with it. */
@media (min-width: 1760px) {
  /* 17px at a 1760x734 window, then half fixed / half screen-scaled (~21px at 2560, 26px cap by ~3600).
     The fixed half keeps browser zoom working on big screens; the vh term stops screens wider than
     ~2.4:1 (ultrawides) going oversized. */
  html { font-size: clamp(17px, calc(8.5px + min(.483vw, 1.16vh)), 26px); }
  :root { --nav-h: 5rem; }
  .rd-logo img { height: 4.0625rem; }
  .rd-container { width: min(72.5rem, 100% - 2.5rem); }
  .rd-header .rd-container { width: min(87.5rem, 100% - 2.5rem); }
  .bento { grid-auto-rows: minmax(16.875rem, auto); }
  .container, .nav-container { max-width: 87.5rem; }
  .section-header { max-width: 43.75rem; }
  .resources-grid-modern { max-width: 75rem; }
  .services-archives-links { max-width: 50rem; }
  #metadata .services-archives-links { max-width: 62.5rem; }
  .exp-video-content { max-width: 48.75rem; }
  .exp-slideshow { max-width: 42.5rem; }
  .publications-container, .news-list, .footer-team-frame, .footer-content, .footer-bottom-content { max-width: 56.25rem; }
  .footer-content.rd-sitemap, .rd-sitemap + .footer-bottom-modern .footer-bottom-content { max-width: 77.5rem; }
  .contact-form { max-width: 37.5rem; }
  .rd-pubsearch { max-width: 42.5rem; }
  .aqc-card { width: 16.875rem; }
  .aqc-dial { width: 7.375rem; height: 7.375rem; }
  .services-immersive { min-height: 43.75rem; }
  .services-card { max-width: 25rem; margin-left: max(3rem, (100vw - 87.5rem) / 2 + 2rem); } /* line up with the content column, not the screen edge */
}

/* Desktop: nothing smaller than 18px (sub/superscripts aside). max() keeps each item's own rem size,
   so it still grows with the root on big screens. */
@media (min-width: 901px) {
  .aqc-demo { font-size: max(18px, .65rem); }
  .resource-card-badge { font-size: max(18px, .7rem); }
  .aqc-kicker, .bnum { font-size: max(18px, .74rem); }
  .bchips i, .footer-team-label { font-size: max(18px, .75rem); }
  .rd-eyebrow, .rd-quick-label, .rd-quick-item small { font-size: max(18px, .78rem); }
  .rd-svc-grid .offerings-panel-number { font-size: max(18px, .8rem); }
  .aqc-go { font-size: max(18px, .82rem); }
  .section-eyebrow, .rd-pubsearch-count, .publications-archive-toggle .archive-years { font-size: max(18px, .85rem); }
  .bgo-split a { font-size: max(18px, .88rem); }
  .bgo, .resource-card-action span { font-size: max(18px, .9rem); }
  .rd-quick-menu a, .rd-sitemap .footer-link, .rd-svc-grid .offerings-panel-actions .offering-cta-btn { font-size: max(18px, .92rem); }
  .rd-btn, .rd-quick-item b, .resource-card-desc-modern { font-size: max(18px, .95rem); }
  .bdesc { font-size: max(18px, .96rem); }
  .rd-submenu a, .publications-archive-toggle, .news-archive-toggle, .form-submit,
  .offerings-tab, .offerings-tab i, .offerings-tab span, .offerings-panel-desc, .offering-badge, .offerings-detail-btn,
  .offerings-drawer-body, .expertise-tab, .service-item-text, .service-item-number, .services-card-eyebrow,
  .services-card-caption, .exp-ss-label, .exp-ss-caption, .exp-ss-counter, .exp-ss-nav-btn, .exp-video-badge,
  .news-item-date, .news-item-description, .news-archive-years, .publication-item, .publication-item a,
  .monitoring-card-location, .contact-item-label, .contact-item-value, .contact-item-value a, .form-group label,
  .form-group label .optional, .form-group input, .form-group textarea, .footer-heading, .footer-description,
  .footer-link, .footer-copyright-modern, .footer-credit-modern, .footer-copyright, .footer-credit { font-size: max(18px, 1rem); }
  .rd-exp-cta, .services-archives-links a { font-size: max(18px, 1.05rem); }
}