/* ConSurv theme. Concept B2 "Logo-led" (mockups/concept-b2/consurv.css), with the rotating photo hero, the ideas
   from B3, the judge fixes in BUILD-CONTRACT.md v2 and the v3 product photos and partner logos. Every color, font and size is a custom property in :root.
   Saira Italic is for display only (H1-H3, phone numbers, the finder title, task titles, the statement band, big
   buttons); small labels, chips, counts, breadcrumbs and the product quote rows use Instrument Sans 600, upright. */

/* ---------- Fonts: self-hosted latin subsets, SIL Open Font License (assets/fonts/OFL-*.txt) ---------- */
/* Saira Italic 800 at 87.5% width: headings, phone numbers, big buttons. The only preloaded file.
   The 125% cut (the logo's own width) is its own family, "Saira Wide", used only by the front page's statement band and photo
   labels. consurv.js loads it when the band comes within about a screen (a <noscript> @font-face covers no JavaScript), so it
   isn't part of the first load; until then the metric-matched 125% fallback below shows. */
@font-face {
  font-family: "Saira";
  font-style: italic;
  font-weight: 800;
  font-stretch: 87.5%;
  font-display: swap;
  src: url("../fonts/saira-italic-semicondensed-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans, weight axis only (400-700): body text and small labels. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched local fallbacks (measured in Chrome for B2), so the swap to the web fonts doesn't move anything. */
@font-face { font-family: "Saira Fallback"; font-style: italic; font-weight: 800; font-stretch: 87.5%; src: local("Arial Bold Italic"), local("Arial-BoldItalicMT"); size-adjust: 82.5%; ascent-override: 138%; descent-override: 53%; line-gap-override: 0%; }
@font-face { font-family: "Saira Fallback"; font-style: italic; font-weight: 800; font-stretch: 125%; src: local("Arial Bold Italic"), local("Arial-BoldItalicMT"); size-adjust: 113%; ascent-override: 101%; descent-override: 39%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 102%; ascent-override: 95%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 98.3%; ascent-override: 98.5%; descent-override: 25.5%; line-gap-override: 0%; }

:root {
  /* Color: the logo's black and compass blue on bright, cool grays */
  --c-ink: #0d1117;          /* black lettering of the logo */
  --c-ink-2: #3a4250;        /* secondary text */
  --c-muted: #566070;        /* labels, meta (5.3:1 on --c-bg-alt-2) */
  --c-line: #dde2e9;
  --c-line-2: #c3cad5;
  --c-field-line: #7a8392;   /* form field edges, 3.8:1 on white */
  --c-placeholder: #5d6676;
  --c-bg: #ffffff;
  --c-bg-alt: #f3f5f8;       /* light gray surface */
  --c-bg-alt-2: #e8ecf1;     /* footer and top bar */
  --c-blue: #1143a1;         /* compass blue, sampled from the logo, 9:1 on white */
  --c-blue-hover: #0b3483;
  --c-blue-deep: #0a2a66;    /* deep blue, kept for the editor palette; the In-House Service band uses --c-blue (Kendall, 2026-11-09) */
  --c-blue-tint: #e9effb;
  --c-blue-tint-2: #d3e0f7;
  --c-blue-bright: #5b8cff;  /* blue on black: 6:1 on --c-ink */
  --c-on-blue: #ffffff;
  --c-on-blue-2: #d6e2fa;    /* 7.3:1 on --c-blue, 11:1 on --c-blue-deep */
  --c-focus: #1143a1;
  --c-dark: #0d1117;
  --c-on-dark-2: #c4cad3;
  --c-todo-bg: #fff3cf;      /* owner-to-confirm placeholders */
  --c-todo-line: #c9950c;
  --c-todo-ink: #533a00;

  /* Type */
  --font-sans: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Saira", "Saira Fallback", "Arial Narrow", Arial, sans-serif;
  --font-wide: "Saira Wide", "Saira Fallback", Arial, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-h3: 1.375rem;
  --fs-h2: clamp(2rem, 1.35rem + 2.1vw, 3rem);
  --fs-h1: clamp(2.375rem, 1.3rem + 3.1vw, 3.875rem);
  --lh-tight: 1.02;
  --lh-body: 1.6;

  /* Shape: square, like stamped steel */
  --radius-sm: 3px;
  --radius: 3px;
  --radius-lg: 4px;
  --radius-pill: 6px;
  --radius-btn: 6px;          /* every button and chip: very slightly rounded (Kendall, 2026-11-07) */
  --shadow-sm: 0 1px 2px rgb(13 17 23 / .06);
  --shadow-md: 0 14px 30px -16px rgb(13 17 23 / .30);
  --shadow-lg: 0 30px 60px -28px rgb(8 33 82 / .55);

  /* Layout */
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(56px, 7vw, 104px);
  --header-h: 72px;

  /* The compass mark for CSS markers inside editable content (core blocks can't hold <svg><use>) */
  --compass-sm: url("../img/compass.svg");
  --compass-lg: url("../img/compass-watermark.svg");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 var(--fs-base)/var(--lh-body) var(--font-sans); -webkit-font-smoothing: antialiased; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-style: italic; font-weight: 800; font-stretch: 87.5%; line-height: var(--lh-tight); letter-spacing: 0; text-wrap: balance; }
/* No specificity, so the content flow spacing further down (":where(.entry, .cs-section, ...) > * + *") still spaces
   paragraphs and lists in the owner's block content. */
:where(p, ul, ol, dl, dd, figure) { margin: 0; }
ul[role="list"], ol[role="list"], .list-plain { list-style: none; padding: 0; }
a { color: var(--c-blue); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--c-blue-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
section[id], [id="categories"], .product-group { scroll-margin-top: calc(var(--header-h) + 12px); }
address { font-style: normal; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--c-blue); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-sm); font-weight: 600; }
.skip-link:focus { top: 12px; color: #fff; }

/* The compass star (sprite symbols #compass and #compass-sm) */
.mark { width: 1em; height: 1em; flex: none; color: var(--c-blue); fill: currentColor; stroke: none; }

/* Small uppercase label with the compass marker: Instrument Sans 600, upright (judge fix) */
.eyebrow, .cs-eyebrow { display: flex; align-items: center; gap: .5em; font: 600 var(--fs-xs)/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-blue); }
.eyebrow .mark { width: 1.35em; height: 1.35em; }
.cs-eyebrow::before { content: ""; flex: none; width: 1.35em; height: 1.35em; background: currentColor; -webkit-mask: var(--compass-sm) center / contain no-repeat; mask: var(--compass-sm) center / contain no-repeat; }
.plus { color: var(--c-blue); font-weight: 800; }
.nowrap { white-space: nowrap; }

/* Owner-to-confirm placeholder. Every one also has an HTML comment: NEEDS OWNER. */
.todo, .cs-todo { display: inline-block; background: var(--c-todo-bg); border: 1px dashed var(--c-todo-line); color: var(--c-todo-ink); font: 600 .78rem/1.45 var(--font-sans); padding: .3em .6em; border-radius: 2px; }
p.cs-todo { display: table; }

/* ---------- Buttons: heavy italic labels, like the phone line in the logo ---------- */
.btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .65em 1.2em; border: 2px solid transparent; border-radius: var(--radius-sm); font: italic 800 1.0625rem/1.15 var(--font-head); font-stretch: 87.5%; letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.btn, .wp-block-button__link { border-radius: var(--radius-btn); }
.btn .icon { width: 1.15em; height: 1.15em; stroke-width: 2; }
.btn--primary, .wp-block-button__link { background: var(--c-blue); color: var(--c-on-blue); }
.btn--primary:hover, .wp-block-button__link:hover { background: var(--c-blue-hover); color: var(--c-on-blue); }
/* No white-and-black buttons (Kendall): secondary buttons are solid blue like the primary ones. On blue or dark panels the
   context rules below switch them to white. */
.btn--secondary, .is-secondary > .wp-block-button__link, .is-style-outline > .wp-block-button__link { background: var(--c-blue); color: var(--c-on-blue); border-color: var(--c-blue); }
.btn--secondary:hover, .is-secondary > .wp-block-button__link:hover, .is-style-outline > .wp-block-button__link:hover { background: var(--c-blue-hover); border-color: var(--c-blue-hover); color: var(--c-on-blue); }
.btn--light { background: #fff; color: var(--c-blue); }
.btn--light:hover { background: var(--c-blue-tint); color: var(--c-blue-hover); }
.btn--outline-light { border-color: rgb(255 255 255 / .7); color: #fff; }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--c-blue); }
.btn--sm { min-height: 40px; padding: .45em .95em; font-size: .9375rem; }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow .icon { width: 1.05em; height: 1.05em; transition: transform .15s; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- Top bar: the footer's light gray, dark text (Kendall, 2026-11-07) ---------- */
.topbar { background: var(--c-bg-alt-2); color: var(--c-ink-2); font-size: var(--fs-xs); border-bottom: 1px solid var(--c-line-2); }
.topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem 1.5rem; min-height: 36px; padding-block: .3rem; }
.topbar__group { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; }
/* Fixed start for the address, so the body-font swap can't nudge it sideways. */
@media (min-width: 760px) { .topbar__group > .topbar__item:first-child { min-width: 19.75rem; } }
.topbar__item { display: inline-flex; align-items: center; gap: .45em; }
.topbar__item .icon { width: 1.1em; height: 1.1em; color: var(--c-blue); }
.topbar__item strong { color: var(--c-ink); font-weight: 600; }
.topbar a { color: var(--c-ink); text-decoration: none; }
.topbar a:hover { text-decoration: underline; color: var(--c-blue); }
.topbar__walkin { font-weight: 600; color: var(--c-ink); }
@media (max-width: 899.98px) { .topbar__walkin { display: none; } }

/* ---------- Header and navigation (stays white) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.site-header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); }
.brand { flex: none; display: block; border-radius: 2px; }
.brand img { width: 214px; height: auto; aspect-ratio: 480 / 112; }
.header-actions { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.header-phone { display: inline-flex; align-items: center; gap: .55rem; color: var(--c-ink); text-decoration: none; white-space: nowrap; padding: .4rem .2rem; }
.header-phone .icon { width: 36px; height: 36px; padding: 8px; border-radius: var(--radius-btn); background: var(--c-blue-tint); color: var(--c-blue); stroke-width: 2; }
.header-phone:hover { color: var(--c-blue); }
.header-phone__text small { display: block; font: 600 .6875rem/1.1 var(--font-sans); color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; }
.header-phone__text span { font: italic 800 1.3125rem/1.1 var(--font-head); font-stretch: 87.5%; letter-spacing: .01em; }
.nav-toggle { display: none; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .85rem; border: 2px solid var(--c-blue); border-radius: var(--radius-btn); background: var(--c-bg); color: var(--c-blue); font: italic 800 1rem/1 var(--font-head); font-stretch: 87.5%; cursor: pointer; }
.nav-toggle .icon { width: 1.3em; height: 1.3em; stroke-width: 2; }
.nav-toggle .icon--close { display: none; }
.nav-open .nav-toggle .icon--menu { display: none; }
.nav-open .nav-toggle .icon--close { display: block; }

.primary-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; }
.primary-nav__link { position: relative; display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: .5rem .8rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--c-ink); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.primary-nav__link:hover, .primary-nav__link[aria-expanded="true"] { color: var(--c-blue); }
.primary-nav__link[aria-current="page"], .primary-nav__link.is-current { color: var(--c-blue); }
.mega-toggle .icon { width: 1em; height: 1em; transition: transform .15s; }
.mega-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.primary-nav__cta { display: none; }

.mega { display: none; }
.mega-toggle[aria-expanded="true"] + .mega { display: block; }
.mega__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 2rem; padding-block: 1.75rem 2rem; }
.mega__title { margin-bottom: .6rem; padding-bottom: .45rem; border-bottom: 2px solid var(--c-ink); font: 600 .75rem/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mega__list a { display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem; margin-inline: -.55rem; border-radius: 2px; color: var(--c-ink); font-weight: 500; text-decoration: none; }
.mega__list a:hover { background: var(--c-blue-tint); color: var(--c-blue); }
.mega__list a[aria-current="page"] { color: var(--c-blue); font-weight: 700; }
.mega__list .icon { color: var(--c-blue); width: 1.3em; height: 1.3em; stroke-width: 1.6; }
.mega__promo { background: var(--c-bg-alt); border-top: 2px solid var(--c-blue); padding: 1.05rem 1.25rem 1.25rem; display: grid; gap: .5rem; align-content: start; }
.mega__promo .mega__title { border: 0; padding: 0; margin: 0; color: var(--c-blue); }
.mega__promo p { font-size: var(--fs-sm); color: var(--c-ink-2); }
.mega__promo .link-arrow { justify-self: start; }
.mega__jobs { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.mega__jobs a { display: inline-block; padding: .3rem .6rem; border: 1px solid var(--c-line-2); border-radius: 2px; background: #fff; font-size: .8125rem; font-weight: 600; color: var(--c-ink); text-decoration: none; }
.mega__jobs a:hover { border-color: var(--c-blue); color: var(--c-blue); }

@media (min-width: 1000px) {
  .primary-nav { margin-left: 1.25rem; }
  .has-mega { position: static; }
  .primary-nav__link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 4px; height: 3px; background: var(--c-blue); transform: scaleX(0) skewX(-20deg); transform-origin: left; transition: transform .15s; }
  .primary-nav__link:hover::after, .primary-nav__link[aria-expanded="true"]::after, .primary-nav__link.is-current::after, .primary-nav__link[aria-current="page"]::after { transform: scaleX(1) skewX(-20deg); }
  .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-bg); border-top: 1px solid var(--c-line); border-bottom: 3px solid var(--c-blue); box-shadow: 0 30px 50px -30px rgb(13 17 23 / .45); }
  html:not(.js) .has-mega:focus-within .mega { display: block; }
}
.header-quote { white-space: nowrap; }
/* Small laptops and tablets in landscape (1000-1279): full nav, tighter. */
@media (max-width: 1279.98px) and (min-width: 1000px) {
  .brand img { width: 176px; }
  .site-header__inner { gap: .75rem; }
  .primary-nav { margin-left: .25rem; }
  .header-phone__text small { display: none; }
  .header-phone .icon { display: none; }
  .header-phone__text span { font-size: 1.1875rem; }
  .primary-nav__link { padding-inline: .55rem; font-size: .9688rem; }
  .primary-nav__link::after { left: .55rem; right: .55rem; }
  .header-actions { gap: .5rem; }
}
@media (max-width: 1099.98px) and (min-width: 1000px) {
  .header-quote { padding-inline: .8em; }
}
/* Phone menu (below 1000px) */
@media (max-width: 999.98px) {
  :root { --header-h: 64px; }
  .brand img { width: 176px; }
  .nav-toggle { display: inline-flex; }
  .header-quote { display: none; }
  .header-phone { padding: 0; gap: .6rem; }
  .header-phone .icon { width: 44px; height: 44px; padding: 11px; background: var(--c-blue); color: #fff; }
  .header-phone__text small { display: none; }
  .header-phone__text span { font-size: 1.25rem; }
  .primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--c-bg); border-bottom: 3px solid var(--c-blue); box-shadow: var(--shadow-lg); max-height: calc(100vh - var(--nav-top, var(--header-h)) - 96px); max-height: calc(100dvh - var(--nav-top, var(--header-h)) - 96px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-open .action-bar { display: none; }
  .nav-open .primary-nav { display: block; }
  html:not(.js) .primary-nav { display: block; position: static; box-shadow: none; max-height: none; }
  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; max-width: 720px; margin-inline: auto; padding: .25rem var(--gutter) 1.25rem; }
  .primary-nav__link { width: 100%; justify-content: space-between; min-height: 52px; padding: .75rem .25rem; border-bottom: 1px solid var(--c-line); border-radius: 0; font: italic 800 1.25rem/1.1 var(--font-head); font-stretch: 87.5%; }
  .primary-nav__link:hover, .primary-nav__link[aria-expanded="true"] { background: none; }
  .mega__inner { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; padding: 1rem 0 1.25rem; border-bottom: 1px solid var(--c-line); }
  .mega__promo { display: none; }
  .mega__title { margin-bottom: .3rem; }
  .mega__list a { padding-block: .45rem; }
  /* Call (and Quote) at the top of the phone menu, so they're never below the fold of the panel (judge fix) */
  .primary-nav__cta { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .85rem 0 1rem; border-bottom: 1px solid var(--c-line); }
  html.nav-locked { overflow: hidden; }
}
/* Phone number beside the call icon on tablets (760-999), not just an icon (judge fix) */
@media (max-width: 759.98px) {
  .header-phone__text { display: none; }
}
/* Dimmed backdrop behind the open phone menu. Created by consurv.js; a tap closes the menu. */
.nav-scrim { position: fixed; inset: 0; z-index: 45; background: rgb(13 17 23 / .55); }
@media (min-width: 1000px) { .nav-scrim { display: none !important; } }
@media (max-width: 519.98px) {
  .primary-nav__cta { grid-template-columns: 1fr; }
}
@media (max-width: 359.98px) {
  .mega__inner { grid-template-columns: 1fr; }
  .brand img { width: 148px; }
  .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-toggle { padding-inline: .6rem; }
  .site-header__inner { gap: .5rem; }
}

/* ---------- Compass watermark ---------- */
.has-mark { position: relative; isolation: isolate; overflow: hidden; }
.watermark { position: absolute; z-index: -1; pointer-events: none; color: var(--c-blue); fill: currentColor; opacity: .075; }

/* ---------- Hero ---------- */
.hero { --compass-ring: var(--c-bg-alt); background: var(--c-bg-alt); padding-block: clamp(32px, 4.5vw, 64px) clamp(40px, 5vw, 76px); border-bottom: 1px solid var(--c-line); }
.hero .watermark { width: 1120px; height: 1120px; left: calc(50% + 150px); top: 50%; translate: -50% -50%; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero--solo .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero__title { font-size: var(--fs-h1); line-height: .98; margin: .8rem 0 1.1rem; max-width: 13.5em; }
.hero__lead { font-size: var(--fs-lg); color: var(--c-ink-2); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.75rem; }
/* Service offers under the hero buttons, compass-star bullets */
.hero__proof { list-style: none; margin: 1.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.hero__proof li { display: inline-flex; align-items: center; gap: .5rem; }
.hero__proof .mark { width: 1.3em; height: 1.3em; }
/* The visit card: address, hours, directions and the Google rating */
.visit-chip { display: flex; align-items: center; gap: .9rem; margin-top: 1.75rem; padding: .6rem .9rem .6rem .6rem; max-width: 480px; background: var(--c-bg); border-left: 4px solid var(--c-ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--c-line); }
.visit-chip img { width: 96px; height: 72px; object-fit: cover; border-radius: 2px; flex: none; }
.visit-chip__text { min-width: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-ink-2); }
.visit-chip__text strong { display: block; color: var(--c-ink); font: italic 800 1.0625rem/1.25 var(--font-head); font-stretch: 87.5%; }
.visit-chip__line { display: block; }
.visit-chip__links { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem 1rem; margin-top: .3rem; }
.visit-chip__links > a:first-child { font-weight: 600; }
/* Google rating link (stars in compass blue). Markup from the plugin's [cs_rating]. */
.rating, .cs-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; color: var(--c-ink); font-weight: 500; text-decoration: none; }
a.rating:hover, a.cs-rating:hover { text-decoration: underline; color: var(--c-blue); }
.rating__stars { display: inline-flex; gap: 1px; color: var(--c-blue); }
.rating__stars .icon, .rating__stars svg { width: 1em; height: 1em; fill: currentColor; stroke: none; }
.rating__stars .is-empty { opacity: .3; }
.rating__score { font-weight: 700; }
.rating--lg { font-size: 1rem; }
.rating--lg .rating__stars .icon, .rating--lg .rating__stars svg { width: 1.15em; height: 1.15em; }

/* Finder: "What are you working on?" as a solid compass-blue panel */
.finder { --compass-ring: var(--c-blue); position: relative; background: var(--c-blue); color: var(--c-on-blue); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(20px, 2.4vw, 30px); }
.finder :focus-visible { outline-color: #fff; }
.finder__title { display: flex; align-items: center; gap: .4em; font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem); color: #fff; }
.finder__title .mark { width: .95em; height: .95em; color: #fff; }
.finder__intro { color: var(--c-on-blue-2); font-size: var(--fs-sm); margin-top: .45rem; }
.finder__search { position: relative; margin-top: 1.1rem; }
.finder__label { display: block; margin-bottom: .4rem; font: 600 .75rem/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--c-on-blue-2); }
.finder__field { position: relative; }
.finder__field .icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--c-blue); pointer-events: none; stroke-width: 2.2; }
.finder__input { width: 100%; min-height: 54px; padding: .7rem 1rem .7rem 2.8rem; border: 2px solid #fff; border-radius: var(--radius-sm); background: #fff; font-size: 1.0625rem; color: var(--c-ink); -webkit-appearance: none; appearance: none; }
.finder__input::placeholder { color: var(--c-placeholder); opacity: 1; }
.finder__input:focus { border-color: var(--c-ink); }
.finder__input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.finder__results { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; right: 0; list-style: none; margin: 0; padding: .35rem; max-height: 380px; overflow-y: auto; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line-2); border-top: 3px solid var(--c-ink); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.finder__results a { display: block; padding: .55rem .7rem; border-radius: 2px; color: var(--c-ink); text-decoration: none; }
.finder__results a:hover, .finder__results a:focus-visible { background: var(--c-blue-tint); outline-color: var(--c-blue); outline-offset: -3px; }
.finder__results strong { display: block; font: italic 800 1.0625rem/1.25 var(--font-head); font-stretch: 87.5%; }
.finder__results span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-xs); color: var(--c-muted); }
.finder__results .finder__all a { color: var(--c-blue); font-weight: 600; font-size: var(--fs-sm); border-top: 1px solid var(--c-line); border-radius: 0; }
.finder__none { padding: .7rem; font-size: var(--fs-sm); color: var(--c-ink-2); }
/* The Service result: typing "repair", "calibration", "service"... (judge fix) */
.finder__results .finder__service { margin-bottom: .35rem; padding: .2rem .2rem .55rem; border-bottom: 1px solid var(--c-line); }
.finder__service > a { border-left: 3px solid var(--c-blue); border-radius: 0; }
.finder__results .finder__service span { white-space: normal; }
.finder__service-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; padding-left: .7rem; }
.finder__results .finder__service-actions a { display: inline-flex; align-items: center; gap: .35em; min-height: 40px; padding: .35rem .75rem; border: 1.5px solid var(--c-blue); background: #fff; color: var(--c-blue); font: 600 var(--fs-sm)/1.2 var(--font-sans); }
.finder__results .finder__service-actions a:first-child { background: var(--c-blue); color: #fff; }
.finder__results .finder__service-actions a:hover { background: var(--c-blue-hover); border-color: var(--c-blue-hover); color: #fff; }
.finder__service-actions .icon { width: 1.05em; height: 1.05em; stroke-width: 2; }
/* Job tiles: a ruled 2 x 3 grid on the blue, no boxes */
.finder__tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1px; margin-top: 1.15rem; list-style: none; padding: 0; overflow: hidden; border-top: 1px solid rgb(255 255 255 / .3); }
.finder__tasks li { box-shadow: -1px 0 0 rgb(255 255 255 / .3); border-bottom: 1px solid rgb(255 255 255 / .3); }
.task { display: flex; align-items: center; gap: .6rem; height: 100%; min-height: 70px; padding: .7rem .6rem; color: #fff; text-decoration: none; transition: background-color .15s, color .15s; }
.task:hover { background: rgb(255 255 255 / .1); color: #fff; }
.task.is-active { background: #fff; color: var(--c-ink); }
.task:focus-visible { outline-offset: -3px; }
.task__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; color: #fff; }
.task__icon .icon { width: 28px; height: 28px; stroke-width: 1.5; }
.task.is-active .task__icon { color: var(--c-blue); }
/* No orphans ("Site layout and / grade"): each title fits on one line from 1180px up (a narrower icon column here,
   the icon above the title at 1000-1279), with balanced lines as the fallback (judge fix) */
.task__title { display: block; font: italic 800 1.125rem/1.1 var(--font-head); font-stretch: 87.5%; text-wrap: balance; }
.task__count { display: block; margin-top: 3px; font-size: .78rem; font-weight: 500; color: var(--c-on-blue-2); }
.task.is-active .task__count { color: var(--c-muted); }
.finder__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: 1rem; font-size: var(--fs-sm); color: var(--c-on-blue-2); }
.finder__foot .link-arrow { color: #fff; }

/* Hero at 1000-1279: a narrower finder, a smaller headline that keeps three lines, both columns top-aligned. */
@media (max-width: 1279.98px) and (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 408px); gap: 40px; align-items: start; }
  .hero__title { font-size: clamp(2.5rem, .9rem + 2.65vw, 3.125rem); max-width: none; margin-top: .7rem; }
  .hero__lead { font-size: var(--fs-base); }
  .hero__actions { gap: .5rem; margin-top: 1.4rem; }
  .hero__actions .btn { padding-inline: .8em; font-size: 1rem; }
  .finder { padding: 22px 22px 18px; }
  .finder__title { font-size: 1.625rem; }
  .task { flex-direction: column; align-items: flex-start; gap: .4rem; padding: .7rem .6rem; }
  .task__title { font-size: 1.0625rem; }
  .hero .watermark { width: 980px; height: 980px; left: calc(100% - 300px); }
}
@media (max-width: 1099.98px) and (min-width: 1000px) {
  .hero__actions { gap: .4rem; }
  .hero__actions .btn { padding-inline: .7em; font-size: .9375rem; gap: .4em; }
}

/* ---------- Rotating photo hero (mockups/concept-b2/hero-rotate.css, ported as is; see HERO-ROTATE.md) ----------
   The photo behind the hero rotates through six photos (template-parts/hero.php, assets/js/hero-rotate.js). Each slide
   has its own art-directed crop, made for this layout:
   - 1000px and up: a 1600x800 file shown 1:1 on a fixed "stage". From 1280px the stage is centred on the page
     (stage x 640 = page centre); at 1000-1279px, where the finder sits at the right edge, it is anchored to the right
     instead. Either way the finder covers stage x ~760-1260, y ~130-680, and the photo shows in the gap left of the
     finder, above and below it, and to its right. The text column stays under a strong wash.
   - Under 1000px: a 4:3 crop as a band across the top of the hero, clear at the very top and washed behind the text. */
.hero .watermark { opacity: .05; }
.hero .finder { box-shadow: 0 18px 50px rgb(13 17 23 / .28); }
.hero .visit-chip { background: rgb(255 255 255 / .96); }

/* Slides */
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-slide { position: absolute; inset: 0; opacity: 0; }
.hero-slide.is-on { opacity: 1; }
/* The incoming slide fades in on top; the outgoing one stays fully opaque underneath until the fade ends,
   so the crossfade never dips toward the background colour. */
.hero-slide.is-top { z-index: 1; transition: opacity 1.2s ease-in-out; }
.hero-slide img { position: absolute; max-width: none; transform-origin: var(--zo, 1010px 400px); }
/* A very slow push-in while a slide is on screen: 1.2 s in + 7 s + 1.2 s out. Paused with the rotation. */
.hero-slide.is-zoom img { animation: hero-zoom 9.4s linear forwards; }
.hero__bg.is-paused .hero-slide img { animation-play-state: paused; }
@keyframes hero-zoom { from { transform: none; } to { transform: scale(1.04); } }

@media (min-width: 1000px) {
  /* height/top: 800px tall, centred on the hero; if the hero ever grows past 800px (big text zoom) it covers instead. */
  .hero-slide img { width: 1600px; height: max(800px, 100%); top: min(0px, calc(50% - 400px)); left: calc(100% - 1292px); object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 240px); mask-image: linear-gradient(90deg, transparent 0, #000 240px); }
}
@media (min-width: 1280px) { .hero-slide img { left: calc(50% - 640px); } }
/* Wider than the 1600px stage: fade its right edge into the page colour too. */
@media (min-width: 1921px) {
  .hero-slide img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 240px, #000 calc(100% - 200px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 240px, #000 calc(100% - 200px), transparent 100%); }
}
@media (max-width: 999.98px) {
  .hero-slide img { left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; transform-origin: var(--zo-m, 50% 20%); }
}

/* Wash (keeps every line of hero text at 4.5:1 or better over every slide; checked per pixel for the preview).
   Text needs: eyebrow (blue) about .76 over the darkest photo pixel, lead (#3a4250) about .72, headline and offers (ink)
   about .52. The stops sit just past where the text ends, so the photo shows only around the finder. */
.hero__bg::after { content: ""; position: absolute; inset: 0; z-index: 2; }
@media (min-width: 1280px) {
  /* Text ends by 50% + 25px at every width from 1280 up; the finder starts at 50% + 108-120px. */
  .hero__bg::after { background: linear-gradient(90deg, rgb(243 245 248 / .95) 0, rgb(243 245 248 / .9) calc(50% - 300px), rgb(243 245 248 / .78) calc(50% + 28px), rgb(243 245 248 / .45) calc(50% + 112px), rgb(243 245 248 / .3) calc(50% + 640px), rgb(243 245 248 / .26) 100%); }
}
@media (min-width: 1000px) and (max-width: 1279.98px) {
  /* The text column ends 480px from the right edge; the finder starts 440px from it. */
  .hero__bg::after { background: linear-gradient(90deg, rgb(243 245 248 / .95) 0, rgb(243 245 248 / .9) calc(100% - 800px), rgb(243 245 248 / .78) calc(100% - 478px), rgb(243 245 248 / .45) calc(100% - 440px), rgb(243 245 248 / .3) calc(100% - 32px), rgb(243 245 248 / .26) 100%); }
}
@media (max-width: 999.98px) {
  /* Phones and tablets: a clear strip at the top (where the controls sit), then a strong wash behind the text,
     fading to the page colour where the 4:3 band ends (75vw down). */
  .hero { padding-top: 56px; }
  .hero__bg::after { background: linear-gradient(180deg, rgb(243 245 248 / .28) 0, rgb(243 245 248 / .42) 32px, rgb(243 245 248 / .82) 50px, rgb(243 245 248 / .82) 46vw, rgb(243 245 248 / .93) 62vw, rgb(243 245 248 / 1) 75vw); }
}

/* Pause button + counter. Bottom right of the hero, lined up with the finder's right edge and clear of it; top right on
   phones and tablets, where the photo band is. */
.hero-rotator { position: absolute; z-index: 3; right: max(var(--gutter), calc(50% - 620px)); bottom: 18px; display: flex; align-items: center;
  padding: 3px .7rem 3px 3px; background: var(--c-blue); color: #fff; border-radius: var(--radius-btn); box-shadow: 0 4px 14px rgb(13 17 23 / .22);
  font: 600 .8125rem/1 var(--font-sans); }
.hero-rotator[hidden] { display: none; }
.hero-rotator__toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #fff; cursor: pointer; }
.hero-rotator__toggle:hover { background: rgb(255 255 255 / .16); }
.hero-rotator__toggle:focus-visible { outline: 2px solid #fff; outline-offset: -4px; box-shadow: 0 0 0 3px var(--c-focus); }
.hero-rotator__toggle .icon { width: 20px; height: 20px; stroke-width: 2.6; }
.hero-rotator__toggle .icon--play { display: none; fill: currentColor; stroke-width: 1.5; }
.hero-rotator__toggle[aria-pressed="true"] .icon--pause { display: none; }
.hero-rotator__toggle[aria-pressed="true"] .icon--play { display: block; }
.hero-rotator__count { padding-left: .3rem; color: #e6e9ef; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 999.98px) { .hero-rotator { top: 8px; bottom: auto; } }
/* The quote list's floating button (ConSurv Tools) sits at the bottom right on wide screens, right where the pause button
   is. While it shows, the pause button moves to the finder's left edge, so it's never covered. */
@media (min-width: 1000px) {
  html:has(.csql-fab:not([hidden])) .hero-rotator { right: auto; left: calc(100% - 440px); }
}
@media (min-width: 1280px) {
  html:has(.csql-fab:not([hidden])) .hero-rotator { left: min(calc(50% + 120px), calc(100% - 532px)); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section--alt { background: var(--c-bg-alt); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2.5rem; margin-bottom: 1.75rem; }
.section-head__text { max-width: 46rem; }
.section-head h2 { font-size: var(--fs-h2); margin-top: .55rem; }
.section-head p:not(.eyebrow) { color: var(--c-ink-2); margin-top: .7rem; }

/* ---------- Catalog: one ruled grid instead of 13 floating cards ---------- */
.catalog__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.1rem; }
.job-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { min-height: 40px; padding: .45rem .9rem; border: 1.5px solid var(--c-line-2); border-radius: var(--radius-pill); background: var(--c-bg); color: var(--c-ink); font: 600 .9375rem/1.2 var(--font-sans); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.chip:hover { border-color: var(--c-blue); }
.chip[aria-pressed="true"] { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.catalog__status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font: 600 .875rem/1.3 var(--font-sans); color: var(--c-muted); }
.catalog__clear { min-height: 32px; padding: .2rem .7rem; border: 1.5px solid var(--c-line-2); border-radius: var(--radius-btn); background: var(--c-bg); font: 600 var(--fs-xs)/1.2 var(--font-sans); color: var(--c-blue); cursor: pointer; }
.catalog__clear:hover { border-color: var(--c-blue); }

/* Rules: a 3px black top rule, then 1px dividers drawn in the column gap; the grid clips the outer edge. */
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1px; overflow: hidden; border-top: 3px solid var(--c-ink); }
.cat-card { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.35rem 1.35rem 1.15rem; background: var(--c-bg); box-shadow: -1px 0 0 var(--c-line-2); border-bottom: 1px solid var(--c-line-2); transition: background-color .15s; }
.cat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-blue); transform: scaleY(0); transform-origin: top; transition: transform .18s; }
.cat-card:hover { background: #f6f8fc; }
.cat-card:hover::before { transform: scaleY(1); }
.cat-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.cat-card__icon { display: block; width: 46px; height: 46px; color: var(--c-blue); flex: none; }
.cat-card__icon .icon { width: 46px; height: 46px; stroke-width: 1.3; }
.cat-card__title { font-size: 1.5rem; line-height: 1.05; }
.cat-card__title a { color: var(--c-ink); text-decoration: none; }
.cat-card__title a::after { content: ""; position: absolute; inset: 0; }
.cat-card__title a:focus-visible { outline: none; }
.cat-card:hover .cat-card__title a, .cat-card__title a[aria-current="page"] { color: var(--c-blue); }
.cat-card__desc { margin-top: .4rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-ink-2); }
.cat-card__brands { margin-top: .6rem; font-size: .75rem; font-weight: 600; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.cat-card__match { margin-top: .55rem; padding: .3rem .5rem; border-left: 3px solid var(--c-blue); background: var(--c-blue-tint); color: var(--c-blue-hover); font-size: var(--fs-xs); font-weight: 600; }
.cat-card__meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--c-line); font: 600 .875rem/1.2 var(--font-sans); color: var(--c-ink); }
.cat-card__meta .icon { color: var(--c-blue); stroke-width: 2.2; transition: transform .15s; }
.cat-card:hover .cat-card__meta .icon { transform: translateX(4px); }

.cat-help { --compass-ring: var(--c-blue-tint); position: relative; overflow: hidden; isolation: isolate; grid-column: span 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.6rem 1.75rem; background: var(--c-blue-tint); box-shadow: -1px 0 0 var(--c-line-2); border-bottom: 1px solid var(--c-line-2); }
.cat-help .watermark { width: 300px; height: 300px; right: -60px; top: 50%; translate: 0 -50%; opacity: .1; }
.cat-help h2, .cat-help h3 { font-size: 1.75rem; }
.cat-help p { margin-top: .35rem; color: var(--c-ink-2); font-size: var(--fs-sm); max-width: 32em; }
.cat-help__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.is-filtered .cat-help { grid-column: 1 / -1; }
.catalog__empty { margin-top: 1rem; padding: 1.25rem; border-left: 4px solid var(--c-blue); background: var(--c-bg-alt); display: grid; gap: .5rem; }

@media (max-width: 1099.98px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-help { grid-column: span 2; }
}
@media (max-width: 859.98px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-help { grid-column: span 1; }
}
@media (max-width: 599.98px) {
  .cat-grid { grid-template-columns: 1fr; column-gap: 0; }
  .cat-help { grid-column: 1 / -1; padding: 1.25rem; box-shadow: none; }
  .cat-card { flex-direction: row; align-items: center; gap: .9rem; padding: .85rem .5rem .85rem .75rem; box-shadow: none; }
  .cat-card__icon, .cat-card__icon .icon { width: 36px; height: 36px; }
  .cat-card__body { flex: 1; min-width: 0; }
  .cat-card__title { font-size: 1.3125rem; }
  .cat-card__desc { display: none; }
  .cat-card__brands { margin-top: .2rem; font-size: .7rem; }
  .cat-card__meta { margin: 0; padding: 0; border: 0; }
  .cat-card__meta span { display: none; }
  .catalog__bar { display: block; }
  .job-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scrollbar-width: none; }
  .job-chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .catalog__status { margin-top: .5rem; }
}
/* A full-width row (the help cell on the hub) */
.cat-grid--help { grid-template-columns: 1fr; margin-top: 2.5rem; }
.cat-grid--help .cat-help { grid-column: 1 / -1; }

/* ---------- Sales + Service + Supplies: compass-blue band, white lettering (Kendall: no black sections) ---------- */
.about { background: var(--c-bg); }
.statement { --compass-ring: var(--c-blue); background: var(--c-blue); color: #fff; padding-block: clamp(56px, 7vw, 100px) clamp(150px, 15vw, 210px); }
.statement .watermark { width: 760px; height: 760px; right: -150px; top: 50%; translate: 0 -50%; color: #fff; opacity: .08; }
.statement .eyebrow { color: var(--c-on-blue-2); }
.statement .eyebrow .mark { color: #fff; }
/* Wraps safely: balanced lines and a rem-based clamp, no nowrap and no hand-placed line breaks (judge fix). Each "+"
   is tied to the word after it in the markup, so a line can start with "+" but never end with one. The line is about
   13.7em wide at 125%, so it stays on one line wherever the container allows. */
.statement__title { margin-top: .9rem; font-family: var(--font-wide); font-size: clamp(2.25rem, 1rem + 5.4vw, 5.5rem); font-stretch: 125%; line-height: 1; letter-spacing: -.005em; color: #fff; text-wrap: balance; overflow-wrap: normal; }
.statement__title .plus { color: #a9c4ff; -webkit-text-fill-color: #a9c4ff; } /* 5.0:1 on --c-blue */
@media (forced-colors: active) {
  .statement__title, .statement__title .plus { -webkit-text-fill-color: CanvasText; background: none; }
}
.statement__lead { margin-top: 1.25rem; max-width: 46em; color: var(--c-on-blue-2); font-size: var(--fs-lg); }
.statement :focus-visible { outline-color: #fff; }
.trio-wrap { margin-top: clamp(-150px, -11vw, -110px); padding-bottom: var(--section-y); position: relative; }
.trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.trio__card { display: flex; flex-direction: column; }
.trio__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-bg-alt-2); border-radius: 2px; box-shadow: 0 24px 40px -24px rgb(13 17 23 / .6); }
.trio__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 1.15rem 0 0; }
.trio__body .trio__label { display: flex; align-items: center; gap: .5rem; padding-bottom: .55rem; border-bottom: 2px solid var(--c-ink); font: italic 800 1rem/1 var(--font-wide); font-stretch: 125%; letter-spacing: .02em; text-transform: uppercase; color: var(--c-ink); }
.trio__label .mark { width: 1.3em; height: 1.3em; }
.trio__body h3 { font-size: 1.5rem; margin-top: .25rem; }
.trio__body p { color: var(--c-ink-2); font-size: var(--fs-sm); }
.trio__body .link-arrow { margin-top: auto; padding-top: .35rem; }
@media (max-width: 859.98px) {
  .trio { grid-template-columns: 1fr; gap: 28px; }
  .trio__card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.25rem; align-items: start; }
  .trio__body { padding-top: 0; }
}
@media (max-width: 519.98px) {
  .trio__card { grid-template-columns: 1fr; gap: 0; }
  .trio__body { padding-top: 1rem; }
  .trio__img { aspect-ratio: 16 / 10; }
}

/* ---------- In-House Service: B3's full-bleed photo band in B2's look ---------- */
.service { background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line); }
.service-band { --compass-ring: var(--c-blue); position: relative; background: var(--c-blue); color: #fff; overflow: hidden; }
.service-band__photo { position: absolute; top: 0; bottom: 0; right: 0; width: 52%; clip-path: polygon(96px 0, 100% 0, 100% 100%, 0 100%); }
.service-band__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.service-band__inner { position: relative; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: 600px; padding-block: clamp(48px, 6vw, 88px); }
.service-band__panel { --compass-ring: var(--c-blue); align-self: center; overflow: visible; isolation: isolate; padding-right: clamp(16px, 3vw, 48px); }
.service-band__panel .watermark { width: 520px; height: 520px; left: -220px; top: -120px; color: #fff; opacity: .05; }
.service-band .eyebrow { color: var(--c-on-blue-2); }
.service-band .eyebrow .mark { color: #fff; }
.service-band h2 { font-size: var(--fs-h2); margin-top: .6rem; color: #fff; }
.service-band__panel > p:not(.eyebrow) { margin-top: 1rem; color: var(--c-on-blue-2); max-width: 34em; }
.service-band :focus-visible { outline-color: #fff; }
/* The two offers: a ruled list with compass-star bullets */
.offers { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; border-top: 1px solid rgb(255 255 255 / .28); }
.offer { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid rgb(255 255 255 / .28); }
.offer .mark { width: 30px; height: 30px; margin-top: 1px; color: #fff; }
.offer strong { display: block; font: italic 800 1.375rem/1.08 var(--font-head); font-stretch: 87.5%; }
.offer span { display: block; margin-top: .3rem; color: var(--c-on-blue-2); font-size: var(--fs-sm); line-height: 1.45; }
.walkin { margin-top: 1.4rem; }
.walkin h3 { font-size: 1.375rem; }
.walkin p { margin-top: .3rem; color: var(--c-on-blue-2); font-size: var(--fs-sm); }
.walkin__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1rem; }
/* The three services, as a ruled row under the band */
.service__detail { padding-block: clamp(40px, 5vw, 64px) var(--section-y); }
.service__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1px; overflow: hidden; border-top: 3px solid var(--c-ink); }
.service-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; padding: 1.35rem clamp(16px, 2vw, 28px) 1.4rem; box-shadow: -1px 0 0 var(--c-line-2); }
.service-item:first-child { padding-left: 0; }
.service-item__icon { display: grid; place-items: start center; width: 44px; color: var(--c-blue); }
.service-item__icon .icon { width: 40px; height: 40px; stroke-width: 1.4; }
.service-item h3 { font-size: 1.375rem; }
.service-item p { margin-top: .4rem; color: var(--c-ink-2); font-size: var(--fs-sm); }
.service__more { margin-top: 1.25rem; }
.service__note { margin-top: .9rem; }
@media (max-width: 1099.98px) and (min-width: 1000px) {
  .service-band__inner { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
  .service-band__photo { width: 46%; }
}
@media (max-width: 999.98px) {
  .service-band__photo { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); }
  .service-band__inner { grid-template-columns: 1fr; min-height: 0; padding-top: 1.75rem; }
  .service-band__panel { padding-right: 0; }
  .service-band__panel .watermark { display: none; }
  .service__list { grid-template-columns: 1fr; column-gap: 0; }
  .service-item, .service-item:first-child { padding: 1.2rem 0; box-shadow: none; border-bottom: 1px solid var(--c-line-2); }
}
@media (max-width: 599.98px) {
  .offer strong { font-size: 1.25rem; }
  .walkin__actions { display: grid; grid-template-columns: 1fr; }
  .service-item { grid-template-columns: 36px minmax(0, 1fr); gap: .85rem; }
  .service-item__icon, .service-item__icon .icon { width: 34px; height: 34px; }
  .service-item h3 { font-size: 1.25rem; }
}

/* ---------- Our Partners: the logo wall (template-parts/partners.php), B2's ruled grid ----------
   6 across on wide screens, 3 on tablets and phones. Logos are 2:1 tiles shown at most 180x90 CSS px; the last cell
   ("Don't see your logo above? Send it in") is compass blue and the whole cell opens the request form. */
.partners .section-head { margin-bottom: 1.5rem; }
.partner-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1px; overflow: hidden; border-top: 3px solid var(--c-ink); }
.partner-wall > li { position: relative; display: grid; place-items: center; min-width: 0; min-height: 128px; margin: 0; padding: 1rem; background: var(--c-bg); box-shadow: -1px 0 0 var(--c-line-2); border-bottom: 1px solid var(--c-line-2); text-align: center; }
.partner-wall__logo { width: 100%; max-width: 180px; height: auto; max-height: 90px; aspect-ratio: 2 / 1; object-fit: contain; }
.partner-wall__name { font: italic 800 1.125rem/1.1 var(--font-head); font-stretch: 87.5%; letter-spacing: .02em; text-transform: uppercase; color: var(--c-ink-2); overflow-wrap: anywhere; }
.partner-wall > .partner-wall__cta { background: var(--c-blue); color: #fff; }
.partner-wall__cta p { display: grid; justify-items: center; gap: .4rem; font-size: var(--fs-sm); line-height: 1.3; }
.partner-wall__cta strong { font: italic 800 1.125rem/1.1 var(--font-head); font-stretch: 87.5%; text-wrap: balance; }
.partner-wall__link { display: inline-flex; align-items: center; gap: .35em; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.partner-wall__link::after { content: ""; position: absolute; inset: 0; }
.partner-wall__link:hover { color: #fff; text-decoration-thickness: 2px; }
.partner-wall__link .icon { width: 1.05em; height: 1.05em; stroke-width: 2.2; transition: transform .15s; }
.partner-wall__cta:hover .partner-wall__link .icon { transform: translateX(3px); }
.partner-wall__cta:hover { background: var(--c-blue-hover); }
.partner-wall__link:focus-visible { outline: none; }
.partner-wall__link:focus-visible::after { outline: 3px solid #fff; outline-offset: -6px; }
.partners__foot { margin-top: 1.25rem; }
/* On the Brands page the wall sits right under the page header, then the page's own content */
.partners--page { padding-block: clamp(32px, 4.5vw, 56px) var(--section-y); }
.partners--page + .entry > .cs-section:first-child:not(.is-alt):not(.is-tint):not(.is-dark) { padding-top: 0; }
@media (max-width: 999.98px) { .partner-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599.98px) {
  .partner-wall > li { min-height: 88px; padding: .6rem; }
  .partner-wall__cta strong { font-size: 1rem; }
  .partner-wall__cta p { font-size: var(--fs-xs); }
}

/* ---------- Text brand list (cs-brand-wall in page content; the logo wall above replaces it on the home page) ---------- */
.brand-wall, .cs-brand-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1px; overflow: hidden; border-top: 3px solid var(--c-ink); }
.brand-wall li, .cs-brand-wall li { display: grid; place-items: center; min-height: 84px; margin: 0; padding: .75rem; box-shadow: -1px 0 0 var(--c-line-2); border-bottom: 1px solid var(--c-line-2); text-align: center; font: italic 800 1.125rem/1.1 var(--font-head); font-stretch: 87.5%; letter-spacing: .02em; text-transform: uppercase; color: var(--c-ink-2); }
.brand-wall .brand-wall__cta, .cs-brand-wall li:has(> a:only-child) { background: var(--c-blue); font: 700 var(--fs-sm)/1.3 var(--font-sans); text-transform: none; letter-spacing: 0; }
.brand-wall__cta a, .cs-brand-wall li > a:only-child { color: #fff; }
.brand-wall__cta a:focus-visible, .cs-brand-wall li > a:only-child:focus-visible { outline-color: #fff; outline-offset: 4px; }
@media (max-width: 999.98px) { .brand-wall, .cs-brand-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .brand-wall, .cs-brand-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brand-wall li, .cs-brand-wall li { min-height: 60px; font-size: 1rem; } }

/* ---------- Hours table (the plugin's [cs_hours]); the theme's script marks today in America/New_York ---------- */
.hours, .cs-hours { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours th, .hours td, .cs-hours th, .cs-hours td { padding: .34rem 0; border-bottom: 1px solid var(--c-line-2); }
.hours th, .cs-hours th { text-align: left; font-weight: 500; color: var(--c-ink-2); }
.hours td, .cs-hours td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr[data-days].is-today th, tr[data-days].is-today td { color: var(--c-ink); font-weight: 700; }
tr[data-days].is-today th::after { content: "Today"; margin-left: .5rem; padding: .1rem .4rem; border-radius: 2px; background: var(--c-blue); color: #fff; font: 700 .6875rem/1.4 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.cs-hours-note { margin-top: .6rem; font-size: var(--fs-sm); color: var(--c-ink-2); }
.cs-phone { font-weight: 600; white-space: nowrap; }
.cs-visit .cs-phone { font: italic 800 1.5rem/1.1 var(--font-head); font-stretch: 87.5%; color: var(--c-ink); text-decoration: none; }
.cs-visit .cs-phone:hover { color: var(--c-blue); text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-bg-alt-2); color: var(--c-ink); padding-top: clamp(48px, 6vw, 72px); font-size: var(--fs-sm); border-top: 1px solid var(--c-line-2); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 2rem; }
.footer__logo { width: 210px; height: auto; mix-blend-mode: multiply; }
.footer__slogan { margin-top: .9rem; font: italic 800 1.0625rem/1.2 var(--font-head); font-stretch: 87.5%; color: var(--c-ink); }
.footer__tag { margin-top: .5rem; color: var(--c-ink-2); max-width: 24em; }
.footer__title { margin-bottom: .75rem; padding-bottom: .4rem; border-bottom: 2px solid var(--c-ink); font: 600 .75rem/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer__list a { color: var(--c-ink); text-decoration: none; }
.footer__list a:hover { color: var(--c-blue); text-decoration: underline; }
.footer__phone { font: italic 800 1.125rem/1.2 var(--font-head); font-stretch: 87.5%; }
.footer__bottom { display: grid; gap: .75rem; margin-top: 3rem; padding-block: 1.5rem; border-top: 1px solid var(--c-line-2); color: var(--c-muted); font-size: .8125rem; }
.footer__bottom a { color: var(--c-ink-2); }
.footer__legal { max-width: 82em; font-size: .75rem; line-height: 1.55; }
@media (max-width: 999.98px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__about { grid-column: 1 / -1; }
}
@media (max-width: 459.98px) { .footer__grid { gap: 1.75rem 1.25rem; } }
@media (max-width: 339.98px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Phone action bar (call is always one thumb away) ---------- */
.action-bar { display: none; }
@media (max-width: 759.98px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .action-bar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: var(--c-bg); border-top: 1px solid var(--c-line-2); box-shadow: 0 -8px 24px -14px rgb(13 17 23 / .35); }
  .action-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: var(--radius-btn); border: 1.5px solid var(--c-blue); background: var(--c-blue); color: #fff; font: italic 800 .9375rem/1.1 var(--font-head); font-stretch: 87.5%; letter-spacing: .02em; text-decoration: none; }
  .action-bar a .icon { width: 1.3em; height: 1.3em; color: #fff; stroke-width: 2; }
  .action-bar .action-bar__call { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
  .action-bar .action-bar__call .icon { color: #fff; }
  .topbar__addr { display: none; }
}

/* ---------- Hero on tablets and phones ---------- */
@media (max-width: 999.98px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { max-width: 14em; }
  .hero .watermark { left: auto; right: -380px; top: 60px; translate: none; width: 900px; height: 900px; }
}
/* Phones: the finder on screen sooner; the visit card (address, hours, rating) stays near the top. The rotating hero's
   4:3 photo band, its wash and the 56px strip above the eyebrow are set with the slides above. */
@media (max-width: 759.98px) {
  .hero .watermark { width: 460px; height: 460px; right: -175px; top: -150px; }
  .hero__grid { gap: 28px; }
  .hero__title { font-size: clamp(2.125rem, 1.45rem + 3.2vw, 2.625rem); margin-block: .65rem .85rem; }
  .hero__lead { font-size: var(--fs-base); }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.25rem; }
  .hero__actions .btn:first-child { grid-column: 1 / -1; }
  .hero__actions .btn { padding-inline: .6rem; font-size: 1rem; }
  .visit-chip { margin-top: 1.25rem; max-width: none; align-items: flex-start; }
  .visit-chip img { width: 72px; height: 60px; }
  .hero__proof { flex-direction: column; gap: .45rem; margin-top: 1.1rem; }
  .finder, .hero .finder { margin-inline: calc(var(--gutter) * -1); border-radius: 0; box-shadow: none; }
  .task { flex-direction: column; align-items: flex-start; gap: .45rem; padding: .8rem .75rem; }
  .task__icon { width: 30px; height: 30px; }
  .task__icon .icon { width: 28px; height: 28px; }
}
@media (max-width: 519.98px) {
  .topbar__inner { justify-content: center; }
  .eyebrow__place { display: none; } /* the visit card right below has the address */
}
@media (max-width: 399.98px) {
  .topbar__label { display: none; }
}
@media (max-width: 379.98px) {
  .hero__title { font-size: 1.9375rem; }
}
/* 320-359: the H1 stays within four lines and the Call button clear of the action bar (judge fix) */
@media (max-width: 359.98px) {
  .hero__actions { grid-template-columns: 1fr; }
  .hero__title { font-size: 1.75rem; line-height: 1; }
  .hero__lead { font-size: var(--fs-sm); }
  .task__title { font-size: 1.0625rem; }
}

/* ---------- Inner page header ---------- */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; font: 600 .875rem/1.3 var(--font-sans); color: var(--c-muted); }
.crumbs li + li::before { content: "/"; margin-right: .3rem; color: var(--c-muted); }
.crumbs a { color: var(--c-ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--c-blue); text-decoration: underline; }
.crumbs [aria-current] { color: var(--c-ink); }
.page-hero { --compass-ring: var(--c-bg-alt); background: var(--c-bg-alt); padding-block: clamp(20px, 3vw, 28px) clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--c-line); }
.page-hero .watermark { width: 640px; height: 640px; right: -140px; top: 50%; translate: 0 -50%; }
.page-hero__body { max-width: 50rem; margin-top: clamp(20px, 3vw, 36px); }
.page-hero .crumbs + .page-hero__body { margin-top: clamp(20px, 3vw, 36px); }
.page-hero__body > .eyebrow { margin-bottom: .6rem; }
.page-hero__title { font-size: var(--fs-h1); line-height: .98; }
.page-hero__intro { margin-top: 1.1rem; color: var(--c-ink-2); }
.page-hero__intro > p:first-child, .page-hero__intro .cs-lede { font-size: var(--fs-lg); }
.page-hero__intro > * + * { margin-top: .8rem; }
.page-hero__lede { font-size: var(--fs-lg); color: var(--c-ink-2); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.page-hero--404 { padding-top: clamp(36px, 5vw, 64px); }
@media (max-width: 599.98px) {
  .page-hero__title { font-size: 2.375rem; }
  .page-hero__intro > p:first-child, .page-hero__intro .cs-lede, .page-hero__lede { font-size: var(--fs-base); }
  .page-hero__actions { display: grid; grid-template-columns: 1fr; gap: .5rem; }
}
@media (max-width: 359.98px) { .page-hero__title { font-size: 2.125rem; } }

/* ---------- Category page ---------- */
.cat-hero { --compass-ring: var(--c-bg-alt); background: var(--c-bg-alt); padding-block: clamp(20px, 3vw, 28px) clamp(32px, 4.5vw, 60px); border-bottom: 1px solid var(--c-line); }
.cat-hero .watermark { width: 760px; height: 760px; left: 40%; top: 50%; translate: -50% -50%; opacity: .05; }
.cat-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(20px, 3vw, 36px); }
.cat-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.cat-hero__head { display: flex; align-items: center; gap: 1.1rem; margin-top: .6rem; }
/* The compass mark from the logo in place of B2's rounded icon tile (B3's idea) */
.cat-hero__mark { width: 76px; height: 76px; flex: none; }
.cat-hero .eyebrow--plain { gap: 0; }
.cat-hero h1 { font-size: var(--fs-h1); line-height: .98; margin-top: .35rem; }
.cat-hero__lead { margin-top: 1.1rem; color: var(--c-ink-2); max-width: 40em; }
.cat-hero__lead > * + * { margin-top: .8rem; }
.cat-hero__lead > p:first-child, .cat-hero__lead .cs-lede { font-size: var(--fs-lg); }
:is(.cat-hero, .page-hero) .cs-note { background: var(--c-bg); }
.cat-hero__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.glance { padding: 1.2rem 1.35rem 1.25rem; background: var(--c-bg); border-top: 4px solid var(--c-blue); box-shadow: var(--shadow-md), 0 0 0 1px var(--c-line); }
.glance h2 { font-size: 1.5rem; }
.glance dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem 1rem; margin-top: .9rem; font-size: var(--fs-sm); }
.glance dt { font: 600 .75rem/1.9 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.glance dd { color: var(--c-ink); }
.glance__jump { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 2px solid var(--c-ink); display: grid; }
.glance__jump a { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .5rem; margin-inline: -.5rem; border-bottom: 1px solid var(--c-line); color: var(--c-ink); font-weight: 600; text-decoration: none; }
.glance__jump a:hover { background: var(--c-blue-tint); color: var(--c-blue); }
.glance__jump span { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-blue); }

.cat-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "side main"; gap: clamp(28px, 4vw, 56px); padding-block: clamp(32px, 4.5vw, 56px) var(--section-y); }
.cat-layout--solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
.cat-main { grid-area: main; min-width: 0; }
.cat-side { grid-area: side; align-self: start; position: sticky; top: calc(var(--header-h) + 20px); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding-bottom: 1rem; }
.toolbar__label { margin-right: .35rem; font: 600 .75rem/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); }
.brand-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.photo-note { margin-top: .1rem; }
.product-group { margin-top: 2.25rem; }
.product-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .75rem; }
.product-group__head h2 { font-size: 1.875rem; }
.product-group__head span { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
/* Product cards in a ruled grid (v3): a square photo, the brand, the model (the H3; the photo and the model are one button
   that opens the quick view), the old site's note, "+ Add to quote list", then a full-width "Request quote" row (B3's,
   upright). The photo sits in the button but is placed above the brand: its square is reserved in the card's top padding
   (a padding percentage is a share of the card's width), so every tile is the same size and nothing shifts as photos load. */
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1px; overflow: hidden; border-top: 3px solid var(--c-ink); }
.product { --px: 1.1rem; --gap-photo: .75rem; position: relative; display: flex; flex-direction: column; background: var(--c-bg); box-shadow: -1px 0 0 var(--c-line-2); border-bottom: 1px solid var(--c-line-2); }
.product__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; flex: 1; padding: calc(100% - var(--px) + var(--gap-photo)) var(--px) 0; }
.product__media { position: absolute; top: var(--px); left: var(--px); width: calc(100% - 2 * var(--px)); aspect-ratio: 1 / 1; display: block; overflow: hidden; background: #fff; }
.product__img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.product__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: var(--c-bg-alt); }
.product__placeholder-mark { width: 38%; height: 38%; color: var(--c-line-2); fill: currentColor; }
.product__brand { font: 600 .75rem/1.4 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--c-muted); }
.product__name { font-size: 1.5rem; line-height: 1.05; overflow-wrap: anywhere; }
.product__open { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
html:not(.js) .product__open { cursor: default; }
.product__open:hover .product__img { transform: scale(1.03); }
.product__open:hover .product__model { color: var(--c-blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
.product__open:focus-visible { outline: none; }
.product__open:focus-visible .product__media { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.product__open:focus-visible .product__model { color: var(--c-blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
/* "Quick view" shows over the photo on hover and keyboard focus, once the quick view script is running. CSS text, so it
   isn't part of the card's text (the button is named by its aria-label). */
.product__media::after { content: "Quick view"; content: "Quick view" / ""; position: absolute; left: 50%; bottom: 10px; translate: -50% 0; padding: .35rem .75rem; border-radius: var(--radius-btn); background: rgb(13 17 23 / .84); color: #fff; font: 600 .8125rem/1.2 var(--font-sans); letter-spacing: 0; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
html:not(.has-quick-view) .product__media::after { display: none; }
.product__open:hover .product__media::after, .product__open:focus-visible .product__media::after { opacity: 1; }
.product__note { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: 1.4; }
/* The add row takes the card's spare height, so "+ Add to quote list" lines up across a row whether or not a card has a note. */
.product__add-row { margin-top: auto; padding-top: .7rem; }
html.js .product__add-row + .product__quote { margin-top: 0; }
html:not(.js) .product__add-row { display: none; }
.product__add { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 40px; padding: .4rem .8rem; border: 1.5px solid var(--c-blue-tint-2); border-radius: var(--radius-btn); background: var(--c-blue-tint); color: var(--c-blue); font: 600 .875rem/1.2 var(--font-sans); text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.product__add:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.product__add .icon { width: 1.05em; height: 1.05em; stroke-width: 2.4; }
.product__add.is-added { background: var(--c-bg); border-color: var(--c-blue); }
.product__add.is-added:hover { background: var(--c-blue-tint); color: var(--c-blue-hover); }
.product__add.is-added .product__add-plus { display: none; }
.product__quote { margin-top: auto; padding-top: .9rem; }
.product__cta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 46px; padding: .35rem var(--px); border-top: 1px solid var(--c-line); color: var(--c-blue); font: 600 var(--fs-sm)/1.25 var(--font-sans); text-decoration: none; transition: background-color .15s, color .15s; }
.product__cta .icon { width: 1.1em; height: 1.1em; stroke-width: 2.2; transition: transform .15s; }
.product__cta:hover { background: var(--c-blue); color: #fff; }
.product__cta:hover .icon { transform: translateX(3px); }
.product__cta:focus-visible { outline-offset: -3px; }
.cat-ask { padding: 1.5rem 1.6rem; border-top: 3px solid var(--c-ink); background: var(--c-bg-alt); }
.cat-ask h2 { font-size: 1.875rem; }
.cat-ask p { margin-top: .5rem; color: var(--c-ink-2); max-width: 40em; }
.cat-ask__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }

.side-nav__title { margin: 0 0 .35rem; font: 600 .75rem/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.side-nav__group + .side-nav__group { margin-top: 1.1rem; }
.side-nav h2 { font-size: 1.375rem; margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 3px solid var(--c-ink); }
.side-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .05rem; }
.side-nav a { display: block; padding: .38rem .6rem; border-left: 2px solid var(--c-line); color: var(--c-ink-2); text-decoration: none; font-size: var(--fs-sm); }
.side-nav a:hover { color: var(--c-blue); border-left-color: var(--c-blue); background: var(--c-blue-tint); }
.side-nav a[aria-current="page"] { color: var(--c-blue); font-weight: 700; border-left: 4px solid var(--c-blue); background: var(--c-blue-tint); }
.side-nav--wide .side-nav__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.25rem 2rem; }
.side-nav--wide .side-nav__group + .side-nav__group { margin-top: 0; }
.lost__title { font-size: 1.875rem; margin-bottom: 1.25rem; }
.side-help { margin-top: 1.5rem; padding: 1rem 1.1rem; border-left: 4px solid var(--c-ink); background: var(--c-bg-alt); font-size: var(--fs-sm); }
.side-help strong { display: block; font: italic 800 1.125rem/1.2 var(--font-head); font-stretch: 87.5%; }
.side-help a[href^="tel"] { display: inline-block; margin-top: .35rem; font: italic 800 1.375rem/1.1 var(--font-head); font-stretch: 87.5%; color: var(--c-ink); text-decoration: none; }

.band-blue { --compass-ring: var(--c-blue); position: relative; overflow: hidden; isolation: isolate; background: var(--c-blue); color: var(--c-on-blue); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 2rem; align-items: center; margin-top: 3rem; }
.band-blue .watermark { width: 420px; height: 420px; right: -110px; top: 50%; translate: 0 -50%; color: #fff; opacity: .09; }
.band-blue .eyebrow { color: var(--c-on-blue-2); }
.band-blue .eyebrow .mark { color: #fff; }
.band-blue h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin-top: .45rem; }
.band-blue p:not(.eyebrow) { margin-top: .6rem; color: var(--c-on-blue-2); max-width: 40em; }
.band-blue__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.band-blue :focus-visible { outline-color: #fff; }
.related { margin-top: 3rem; }
.related h2 { font-size: 1.875rem; margin-bottom: .9rem; }
.cat-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-grid--related .cat-card { flex-direction: row; align-items: center; gap: .9rem; padding: .95rem 1rem; }
.cat-grid--related .cat-card__icon, .cat-grid--related .cat-card__icon .icon { width: 34px; height: 34px; }
.cat-grid--related .cat-card__body { flex: 1; min-width: 0; }
.cat-grid--related .cat-card__title { font-size: 1.3125rem; }
.cat-grid--related .cat-card__desc { margin-top: .15rem; font-size: var(--fs-xs); }
.cat-grid--related .cat-card__meta { margin: 0; padding: 0; border: 0; }

@media (max-width: 1279.98px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band-blue { grid-template-columns: 1fr; }
  .cat-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999.98px) {
  .cat-hero__grid { grid-template-columns: 1fr; }
  .cat-layout { grid-template-columns: 1fr; grid-template-areas: "main" "side"; }
  .cat-side { position: static; padding-top: 2rem; border-top: 1px solid var(--c-line); }
  .side-nav__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
  .side-nav__group + .side-nav__group { margin-top: 0; }
  .cat-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  /* Two compact cards per row on phones */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product { --px: .75rem; }
  .product { --gap-photo: .6rem; }
  .product__name { font-size: 1.25rem; }
  .product__note { font-size: var(--fs-xs); }
  .product__add { width: 100%; padding-inline: .45rem; font-size: .8125rem; }
  .product__quote { padding-top: .7rem; }
  .product__cta { min-height: 44px; font-size: .875rem; }
  .cat-grid--related { grid-template-columns: 1fr; }
  .cat-hero__actions { display: grid; grid-template-columns: 1fr; gap: .5rem; }
  .cat-hero__lead > p:first-child, .cat-hero__lead .cs-lede { font-size: var(--fs-base); }
  .cat-hero__head { gap: .85rem; }
  .cat-hero__mark { width: 56px; height: 56px; }
  .cat-hero h1 { font-size: 2.375rem; }
  .side-nav__cols { gap: 1.25rem 1rem; }
  .side-nav a { padding-inline: .5rem; }
  .product-group__head h2 { font-size: 1.625rem; }
}
@media (max-width: 359.98px) {
  .side-nav__cols { grid-template-columns: 1fr; }
  .cat-hero h1 { font-size: 2.125rem; }
  .product__name { font-size: 1.125rem; }
}

/* ---------- Products hub ---------- */
.hub { padding-block: clamp(32px, 4.5vw, 56px) var(--section-y); }
.hub__jump ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.hub__jump a { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .4rem .85rem; border: 1.5px solid var(--c-line-2); border-radius: 2px; color: var(--c-ink); font: 600 .9375rem/1.2 var(--font-sans); text-decoration: none; }
.hub__jump a:hover { border-color: var(--c-blue); color: var(--c-blue); }
.hub__jump span { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.hub__family { margin-top: 2.5rem; }
.hub__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .9rem; }
.hub__head h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); }
.hub__head span { font: 600 var(--fs-xs)/1.3 var(--font-sans); color: var(--c-muted); }
.hub__jobs { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line-2); }
.hub__jobs-title { font: 600 .75rem/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }

/* ---------- Page content: core blocks with the content classes from BUILD-CONTRACT.md ---------- */
/* Full-width bands lay themselves out; anything else at the top level sits in the page width. */
.entry > :not(.cs-section):not(.alignfull) { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.entry > :not(.cs-section):not(.alignfull):first-child { margin-top: clamp(32px, 4.5vw, 56px); }
.entry > :not(.cs-section):not(.alignfull):last-child { margin-bottom: var(--section-y); }
.entry--prose > * { max-width: 46rem; }
.entry--prose > :not(.cs-section):not(.alignfull) { width: min(100% - var(--gutter) * 2, 46rem); }
.entry--form > :not(.cs-section):not(.alignfull) { width: min(100% - var(--gutter) * 2, 68rem); }
.entry--front > :first-child { margin-top: 0; }
/* Content sits in the page width through the band's own side padding, so short blocks (a cs-todo) stay left-aligned. */
.cs-section { padding: var(--section-y) max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.entry > .cs-cta { margin-top: clamp(32px, 4vw, 56px); }
.entry > p.cs-todo { width: fit-content; margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.cs-section.is-alt { background: var(--c-bg-alt); }
.cs-section.is-tint { background: var(--c-blue-tint); }
.cs-section.is-dark { --compass-ring: var(--c-blue); background: var(--c-blue); color: #fff; } /* no black sections (Kendall): "dark" is compass blue */
.cs-section + .cs-section:not(.is-alt):not(.is-tint):not(.is-dark) { border-top: 1px solid var(--c-line); }
.cs-section.is-alt + .cs-section.is-alt { padding-top: 0; }

/* Flow spacing inside content. Classic themes get core's legacy Group markup, with a .wp-block-group__inner-container
   wrapper inside each Group, so every rule here also reaches through it. */
:where(.entry, .cs-section, .wp-block-group, .wp-block-group__inner-container, .wp-block-column, .cs-card, .cs-cta) > * + * { margin-top: 1rem; }
:where(.entry, .cs-section, .wp-block-group, .wp-block-group__inner-container, .wp-block-column) > :is(h2, h3, h4) { margin-top: 2.25rem; }
:where(.entry, .cs-section, .wp-block-group, .wp-block-group__inner-container, .wp-block-column) > :is(h2, h3, h4):first-child,
:where(.entry, .cs-section, .wp-block-group, .wp-block-group__inner-container, .wp-block-column) > :is(.cs-eyebrow, .eyebrow) + :is(h2, h3, h4) { margin-top: .55rem; }
:where(.entry, .cs-section, .wp-block-group, .wp-block-group__inner-container, .wp-block-column) > :is(h2, h3, h4) + * { margin-top: .75rem; }
/* Ruled lists, grids and button rows get more room than a paragraph */
:where(.cs-section, .wp-block-group__inner-container, .wp-block-column) > :is(.cs-offers, .cs-steps, .cs-brand-wall, .cs-trio, .wp-block-columns, .wp-block-buttons):not(:first-child) { margin-top: 1.75rem; }
:where(.cs-section, .wp-block-group__inner-container, .wp-block-column) > :is(.cs-offers, .cs-steps, .cs-brand-wall, .cs-trio, .wp-block-columns) + * { margin-top: 1.25rem; }
/* A white band straight under the page header doesn't need the full section spacing on top */
.page-hero + .entry > .cs-section:first-child:not(.is-alt):not(.is-tint):not(.is-dark) { padding-top: clamp(32px, 4.5vw, 56px); }
.entry h2, .cs-section h2 { font-size: var(--fs-h2); }
.entry h3, .cs-section h3 { font-size: var(--fs-h3); }
.entry h4, .cs-section h4 { font-size: 1.125rem; }
.entry--prose h2 { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem); }
.entry :is(ul, ol):not([class*="cs-"]):not(.wp-block-gallery) { padding-left: 1.3rem; }
.entry :is(ul, ol):not([class*="cs-"]) li + li { margin-top: .35rem; }
.entry p, .entry li { max-width: 46em; }
.entry .has-text-align-center { text-align: center; margin-inline: auto; }
.entry .has-text-align-right { text-align: right; }
.entry strong { font-weight: 700; }
.entry hr, .wp-block-separator { border: 0; border-top: 1px solid var(--c-line-2); margin-block: 2rem; }
.wp-block-separator.is-style-wide { border-top-width: 3px; border-top-color: var(--c-ink); }
.entry blockquote, .wp-block-quote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--c-blue); font-size: var(--fs-lg); color: var(--c-ink-2); }
.wp-block-quote cite { display: block; margin-top: .5rem; font-size: var(--fs-sm); font-style: normal; color: var(--c-muted); }
.entry table:not(.cs-hours):not(.hours), .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.wp-block-table { overflow-x: auto; }
.wp-block-table th, .wp-block-table td { padding: .55rem .75rem .55rem 0; border-bottom: 1px solid var(--c-line-2); text-align: left; vertical-align: top; }
.wp-block-table thead th { border-bottom: 2px solid var(--c-ink); font: 600 .75rem/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.wp-block-image img { border-radius: 2px; }
.wp-block-image figcaption, .wp-element-caption { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-2); }
.wp-block-image figcaption::before, .wp-element-caption::before { content: ""; flex: none; width: 1.2em; height: 1.2em; background: var(--c-blue); -webkit-mask: var(--compass-sm) center / contain no-repeat; mask: var(--compass-sm) center / contain no-repeat; }
.wp-block-image.aligncenter, .aligncenter { margin-inline: auto; text-align: center; }
.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.wp-block-details { border-top: 1px solid var(--c-line-2); border-bottom: 1px solid var(--c-line-2); padding-block: .75rem; }
.wp-block-details + .wp-block-details { border-top: 0; margin-top: 0; }
.wp-block-details summary { cursor: pointer; font: italic 800 1.1875rem/1.3 var(--font-head); font-stretch: 87.5%; }
.wp-block-details > :not(summary) { margin-top: .6rem; }
.wp-block-spacer { margin: 0 !important; }
.wp-block-embed iframe, .wp-block-video video { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Columns, buttons (block-library CSS isn't loaded, so the theme lays these out) */
.wp-block-columns { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-column.is-vertically-aligned-center { align-self: center; }
@media (max-width: 781.98px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-direction: column; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: auto !important; }
}
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-button { margin: 0; }
.wp-block-button.has-custom-width .wp-block-button__link { width: 100%; }
@media (max-width: 519.98px) {
  .wp-block-buttons { display: grid; grid-template-columns: 1fr; }
  .wp-block-button__link { width: 100%; }
}
.wp-block-group.has-background { padding: clamp(20px, 3vw, 36px); }

/* Content classes */
.cs-lede { font-size: var(--fs-lg); color: var(--c-ink-2); max-width: 40em; }
.cs-note { padding: .9rem 1.1rem; border-left: 4px solid var(--c-blue); background: var(--c-bg-alt); font-size: var(--fs-sm); color: var(--c-ink-2); }
.cs-section.is-alt .cs-note { background: var(--c-bg); }
/* Offer list: compass-star bullets; a <strong> at the start of an item becomes its title */
.cs-offers { list-style: none; margin-left: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); column-gap: 1px; overflow: hidden; border-top: 3px solid var(--c-ink); }
.cs-offers > li { position: relative; margin: 0 !important; padding: 1.1rem 1.25rem 1.2rem 3.4rem; box-shadow: -1px 0 0 var(--c-line-2); border-bottom: 1px solid var(--c-line-2); color: var(--c-ink-2); font-size: var(--fs-sm); max-width: none; }
.cs-offers > li::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 30px; height: 30px; background: var(--c-blue); -webkit-mask: var(--compass-sm) center / contain no-repeat; mask: var(--compass-sm) center / contain no-repeat; }
.cs-offers > li > strong:first-child { display: block; margin-bottom: .25rem; color: var(--c-ink); font: italic 800 1.3125rem/1.1 var(--font-head); font-stretch: 87.5%; }
/* Numbered steps */
.cs-steps { list-style: none; counter-reset: cs-step; margin-left: 0; padding: 0 !important; display: grid; border-top: 3px solid var(--c-ink); }
.cs-steps > li { counter-increment: cs-step; position: relative; margin: 0 !important; padding: 1rem 0 1.05rem 3.6rem; border-bottom: 1px solid var(--c-line-2); max-width: none; }
.cs-steps > li::before { content: counter(cs-step); position: absolute; left: 0; top: .85rem; width: 2.5rem; color: var(--c-blue); font: italic 800 2rem/1 var(--font-head); font-stretch: 87.5%; text-align: center; }
.cs-steps > li > strong:first-child { display: block; color: var(--c-ink); font: italic 800 1.25rem/1.15 var(--font-head); font-stretch: 87.5%; }
/* Checklist */
.cs-checklist { list-style: none; margin-left: 0; padding: 0 !important; display: grid; gap: .55rem; }
.cs-checklist > li { position: relative; margin: 0 !important; padding-left: 2rem; }
.cs-checklist > li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.3em; height: 1.3em; background: var(--c-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.8 2.8L16.3 9.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.8 2.8L16.3 9.5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Three photo cards */
.cs-trio { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
/* The cards sit inside core's .wp-block-group__inner-container (classic themes), so the content flow spacing's "* + *" would
   push cards 2 and 3 down; the grid gap does the spacing. */
.cs-trio > *, .cs-trio > .wp-block-group__inner-container > * { margin: 0 !important; }
.cs-trio > .wp-block-group__inner-container { display: contents; }
.cs-card { display: flex; flex-direction: column; }
.cs-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: var(--c-bg-alt-2); }
.cs-card :is(h2, h3) { font-size: 1.5rem; }
.cs-card p { color: var(--c-ink-2); font-size: var(--fs-sm); }
@media (max-width: 859.98px) { .cs-trio { grid-template-columns: 1fr; } }
/* Call band: heading, a line, buttons (B2's blue band) */
.cs-cta { --compass-ring: var(--c-blue); position: relative; overflow: hidden; isolation: isolate; background: var(--c-blue); color: var(--c-on-blue); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 44px) !important; }
.cs-section > .cs-cta { max-width: var(--wrap); }
.cs-cta::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -110px; top: 50%; translate: 0 -50%; background: #fff; opacity: .09; -webkit-mask: var(--compass-lg) center / contain no-repeat; mask: var(--compass-lg) center / contain no-repeat; pointer-events: none; }
.cs-cta :is(h2, h3) { color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.cs-cta p { color: var(--c-on-blue-2); max-width: 40em; }
.cs-cta a:not(.wp-block-button__link) { color: #fff; }
.cs-cta .wp-block-button__link { background: #fff; color: var(--c-blue); }
.cs-cta .wp-block-button__link:hover { background: var(--c-blue-tint); color: var(--c-blue-hover); }
.cs-cta .is-secondary > .wp-block-button__link { background: transparent; border-color: rgb(255 255 255 / .7); color: #fff; }
.cs-cta .is-secondary > .wp-block-button__link:hover { background: #fff; color: var(--c-blue); }
.cs-cta :focus-visible { outline-color: #fff; }
/* Dark section (once at most, never at the top) */
.cs-section.is-dark :is(h2, h3) { color: #fff; }
.cs-section.is-dark p { color: var(--c-on-blue-2); }
.cs-section.is-dark a:not(.wp-block-button__link) { color: #fff; }
.cs-section.is-dark .cs-eyebrow { color: var(--c-on-blue-2); }
.cs-section.is-dark .wp-block-button__link { background: #fff; border-color: #fff; color: var(--c-blue); }
.cs-section.is-dark .is-secondary > .wp-block-button__link { background: transparent; border-color: rgb(255 255 255 / .7); color: #fff; }
.cs-section.is-dark :focus-visible { outline-color: #fff; }
/* A Group with a faint compass watermark */
.has-compass { position: relative; isolation: isolate; overflow: hidden; }
.has-compass::before { content: ""; position: absolute; z-index: -1; width: min(640px, 80vw); aspect-ratio: 1; right: -140px; top: 50%; translate: 0 -50%; background: var(--c-blue); opacity: .075; -webkit-mask: var(--compass-lg) center / contain no-repeat; mask: var(--compass-lg) center / contain no-repeat; pointer-events: none; }
.cs-section.has-compass > * { position: relative; }
.is-dark.has-compass::before { background: #fff; opacity: .06; }
/* Visit: the plugin's [cs_address], [cs_hours], [cs_rating] beside a storefront photo */
.cs-visit .wp-block-columns { align-items: center; }
.cs-visit .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-bg-alt-2); }
/* The address and hours columns sit side by side only when both fit (core sets nowrap on columns) */
.cs-visit .wp-block-column .wp-block-columns { flex-direction: row; flex-wrap: wrap !important; align-items: start; gap: 1.5rem; margin-top: 1.5rem; padding-top: 1.35rem; border-top: 3px solid var(--c-ink); }
.cs-visit .wp-block-column .wp-block-columns > .wp-block-column { flex: 1 1 14.5rem; }
.cs-visit .wp-block-column .wp-block-column > :is(h3, h4) { margin-top: 1rem; margin-bottom: .45rem; font: 600 .75rem/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.cs-visit .wp-block-column .wp-block-column > :is(h3, h4):first-child { margin-top: 0; }
.cs-visit .wp-block-column .wp-block-column > :is(h3, h4) + * { margin-top: 0; }
.cs-visit .wp-block-buttons { margin-top: 1.75rem; }
.cs-visit .cs-rating, .cs-visit .rating { font-size: 1rem; }
.cs-visit .rating__stars svg { width: 1.15em; height: 1.15em; }
@media (max-width: 899.98px) {
  :is(.cs-visit, .cs-visit > .wp-block-group__inner-container) > .wp-block-columns { flex-direction: column; }
  :is(.cs-visit, .cs-visit > .wp-block-group__inner-container) > .wp-block-columns > .wp-block-column { flex-basis: auto !important; width: 100%; }
  .cs-visit .wp-block-image img { aspect-ratio: 16 / 9; }
}
/* Editor palette classes */
.has-cs-ink-color { color: var(--c-ink) !important; }
.has-cs-blue-color { color: var(--c-blue) !important; }
.has-cs-blue-deep-color { color: var(--c-blue-deep) !important; }
.has-cs-ink-2-color { color: var(--c-ink-2) !important; }
.has-cs-white-color { color: #fff !important; }
.has-cs-ink-background-color { background-color: var(--c-ink) !important; color: #fff; }
.has-cs-blue-background-color { background-color: var(--c-blue) !important; color: #fff; }
.has-cs-blue-deep-background-color { background-color: var(--c-blue-deep) !important; color: #fff; }
.has-cs-blue-tint-background-color { background-color: var(--c-blue-tint) !important; }
.has-cs-gray-background-color { background-color: var(--c-bg-alt) !important; }
.has-cs-white-background-color { background-color: #fff !important; }
.has-small-font-size { font-size: var(--fs-sm) !important; }
.has-normal-font-size { font-size: var(--fs-base) !important; }
.has-medium-font-size { font-size: var(--fs-lg) !important; }
.has-large-font-size { font-size: 1.75rem !important; }

/* Search results and the posts page */
.post-list { display: grid; gap: 1.5rem; margin-top: 0; }
.post-list h2 { font-size: 1.5rem; }
.post-list a { text-decoration: none; }
.nav-links { display: flex; gap: .5rem; margin-top: 2rem; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}