/* ===== Storefront design system =====
   Premium tokens in :root; every color/size derives from them. Legacy token names
   are aliased to the new palette so admin/account/table/form pages recolor for free. */
:root {
  /* JAA Contractors palette (Phase 2 rebrand) — canonical tokens, matches mockup/JAA-HOME.html
     exactly. Every legacy alias below is repointed to these so admin recolor + every downstream
     component (built against the old bronze/paper names) repaints for free, no call-site changes. */
  --hivis:      #EDB420;   /* JAA logo yellow — primary accent */
  --hivis-deep: #C9950E;
  --girder:     #17191C;   /* charcoal — dark chrome + body ink */
  --girder-2:   #212429;
  --steel:      #5B5F64;   /* muted secondary text */
  --steel-light:#8A8E93;
  --concrete:   #E9E6E0;   /* page background */
  --concrete-2: #DEDAD2;
  --surface:    #ffffff;
  --line:       #D5D1C9;
  --line-dark:  #33373C;

  --f-disp: 'Archivo',system-ui,'Segoe UI',sans-serif;
  --f-body: 'Inter',system-ui,'Segoe UI',sans-serif;
  --f-mono: 'Inter',system-ui,'Segoe UI',sans-serif;   /* label/data alias — sans, no typewriter anywhere */
  --pad: clamp(24px, 5vw, 90px);   /* full-width band side padding */
  --wrap: 1440px;

  /* Legacy aliases (older admin/account/form/table classes reference these names) */
  --paper:   var(--concrete);
  --ink:     var(--girder);
  --stone:   var(--concrete-2);
  --mut:     var(--steel);
  --bronze:  var(--hivis);
  --bronze-d:var(--hivis-deep);
  --char:    var(--girder);   /* dark chrome — topbar + admin sidebar */
  --accent-dark: var(--hivis);   /* accent color for use on dark chrome */
  --sage:    #4E5A4C;
  --bg: var(--paper);
  --accent: var(--bronze);
  --font-body: var(--f-body);
  --font-mono: var(--f-mono);
}

* { box-sizing: border-box; }
/* Guard: never allow a horizontal scroll on any device. `clip` blocks sideways
   overflow without creating a scroll container (so sticky/position stay intact). */
html { overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--f-body);
  /* Sticky footer: full-height flex column so main grows and the footer stays at the bottom. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  max-width: 100%;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--f-disp); font-weight: 800; margin: 0; letter-spacing: -.015em; }
:focus-visible { outline: 3px solid var(--bronze); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 4vw, 72px); }
.mono { font-family: var(--f-mono); }
.eyebrow {
  font: 600 11px/1.4 var(--f-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-d);
  margin: 0 0 10px;
}

/* ---- Full-bleed content shell ---- */
.site-main { flex: 1 0 auto; }               /* grows to pin the footer */
.page { padding-top: 26px; padding-bottom: 72px; }  /* default (non-full-bleed) page wrapper — bottom gap before footer */

/* ---- Top contact bar + header ---- */
.topbar { background: var(--girder); color: #CFD2D6; font: 600 12.5px var(--f-body); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 40px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.topbar span { font-size: 12.5px; letter-spacing: .02em; }
.topbar b { color: #fff; }
.topbar .sep { color: var(--steel); margin: 0 12px; }
.header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; }
/* The header row can run wider than the 1200px body wrap (matches the mockup) and must NEVER
   wrap to a second line — logo + nav always share one row on desktop. */
.header .wrap { max-width: var(--wrap); display: flex; align-items: center; gap: 28px; min-height: 80px; flex-wrap: nowrap; position: relative; }
.logo { font-family: var(--f-disp); font-weight: 800; font-size: 21px; letter-spacing: -.01em; margin-right: 8px; flex: none; }
.logo b { color: var(--bronze); }
.header .logo-img { height: 30px; width: auto; flex: none; }
.mainnav { display: flex; flex: 1; justify-content: center; align-items: stretch; align-self: stretch; gap: 28px; font-weight: 600; font-size: 14.5px; flex-wrap: nowrap; }
.header-cta { flex: none; padding: 10px 18px; }
.tb-link { color: #fff; font-weight: 700; }
.tb-link:hover { color: var(--hivis); }
.mainnav > .nav-top { position: relative; }
.mainnav a { white-space: nowrap; }
.mainnav a:hover { color: var(--bronze-d); }
.mainnav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--hivis); }
.mainnav > a.btn { align-self: center; padding: 10px 16px; flex: none; }
/* Mega menu: a CONTAINED, warm card bounded to the header content (not edge-to-edge), opened on
   hover AND keyboard focus (:focus-within), collapsing to a plain stacked list inside the mobile
   menu, and degrading to links with no JS. */
.nav-item { display: flex; align-items: center; }
/* Catalog entry that appears ONLY inside the mobile menu. Needs a.nav-mobile-only (0,2,1) to beat
   .mainnav > .nav-top (0,2,0) below — otherwise it leaks onto desktop and Catalog shows twice. */
.mainnav a.nav-mobile-only { display: none; }
.mainnav > .nav-top, .nav-item > .nav-top { display: inline-flex; align-items: center; height: 100%; }
.has-mega > .nav-top::after { content: ""; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; }
.mega { position: absolute; left: 0; right: 0; top: calc(100% + 9px); background: #FBF8F1; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 26px 50px rgba(36,27,18,.16); padding: 22px 24px 26px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 40; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; }  /* hover bridge over the float gap */
.nav-item:hover > .mega, .nav-item:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-in { display: block; }
.mega-split { display: grid; grid-template-columns: 1fr 258px; gap: 30px; align-items: stretch; }
.mega-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mega-head a { font-weight: 700; font-size: 14px; color: var(--bronze); }
/* Product-line grid with material swatches */
.mega-grid-sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 14px; }
.mega-grid-sw a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; font-weight: 600; font-size: 15px; color: var(--ink); border-radius: 3px; }
.mega-grid-sw a:hover { background: #fff; color: var(--bronze-d); }
.mega-sw { width: 38px; height: 38px; flex: none; border: 1px solid var(--line); border-radius: 3px; display: block; }
/* Featured rail */
.mega-feature { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mega-feature p { color: var(--mut); font-size: 13.5px; line-height: 1.5; margin: 0; }
.mega-feature .btn { text-align: center; }
.mega-feature .btn.ghost { margin-top: -4px; }
/* The broad `.mainnav a:hover { color: bronze }` would tint these buttons' text into their own
   fill on hover — pin proper contrast for the CTAs. */
.mega-feature .btn.bronze { color: #fff; }
.mega-feature .btn.bronze:hover { background: var(--char); color: #fff; }
.mega-feature .btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Capabilities & Resources cards */
.mega-cap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.mega-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 16px; }
.mega-cap a, .mega-res a { display: block; padding: 12px 14px; border: 1px solid transparent; border-radius: 3px; }
.mega-cap a:hover, .mega-res a:hover { border-color: var(--line); background: #fff; }
.mega .mt { display: block; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.mega .mt:hover, .mega-cap a:hover .mt, .mega-res a:hover .mt { color: var(--bronze-d); }
.mega .mb { display: block; font-size: 13px; color: var(--mut); line-height: 1.42; }
/* Mobile nav toggle (no-JS checkbox hack) — hidden on desktop, revealed under 900px */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav-burger { display: none; width: 44px; height: 44px; margin-left: auto; cursor: pointer; position: relative; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after { position: absolute; left: 10px; width: 24px; height: 2px; background: var(--ink); transition: transform .15s ease, opacity .15s ease; }
.nav-burger span { top: 21px; }
.nav-burger span::before { content: ""; top: -7px; }
.nav-burger span::after { content: ""; top: 7px; }
.nav-toggle:checked ~ .nav-burger span { background: transparent; }
.nav-toggle:checked ~ .nav-burger span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span::after { transform: translateY(-7px) rotate(-45deg); }
.hspace { flex: 1; }
.hsearch { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: #fff; padding: 9px 13px; min-width: 210px; color: var(--mut); font-size: 14px; }
.hsearch:hover { border-color: var(--bronze); }
.hicons { display: flex; gap: 18px; font-weight: 600; font-size: 14px; }
.hicons a:hover { color: var(--bronze); }

/* ---- Footer ---- */
/* Bare presentation chrome (no-login shared spec book): brand + document, nothing to wander into. */
.header-bare .wrap { justify-content: space-between; gap: 16px; }
.bare-tag { font: 700 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.footer.footer-bare { background: transparent; color: var(--mut); padding: 0; margin-top: 44px; }
.footer.footer-bare .base { border-top: 1px solid var(--line); margin-top: 0; padding: 18px 0; color: var(--mut); font-size: 13px; }
.footer { background: var(--girder); color: #AEB2B7; padding: 64px 0 0; font-size: 14px; }
.footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 30px; padding-bottom: 44px; }
.footer .logo { color: #fff; margin-bottom: 16px; }
.footer .logo b { color: var(--accent-dark); }
.footer .blurb { color: #9DA1A6; margin-top: 12px; max-width: 34ch; line-height: 1.7; }
.footer h5 { font: 600 12px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--steel-light); margin: 0 0 18px; }
.footer a { display: block; padding: 5px 0; color: #C4C8CC; font-size: 14.5px; }
.footer a:hover { color: var(--hivis); }
.footer .base { border-top: 1px solid var(--line-dark); margin-top: 0; padding: 22px 0; color: var(--steel); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.footer .legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer .legal-links a { display: inline; padding: 0; color: var(--steel); }
.footer .legal-links a:hover { color: #fff; }
/* Newsletter signup — footer box, posts to /newsletter, fires newsletter_subscribed. */
.nl { display: flex; gap: 8px; margin-top: 14px; }
.nl input { flex: 1; background: var(--girder-2); border: 1px solid var(--line-dark); color: #fff; padding: 11px 13px; font-family: inherit; font-size: 14px; }
.nl input::placeholder { color: var(--steel); }
.nl button { background: var(--hivis); color: var(--girder); border: 0; font-weight: 700; padding: 0 18px; cursor: pointer; }
.nl button:hover { background: var(--hivis-deep); }
.nl-msg { margin-top: 10px; font-size: 13px; }
.nl-msg.ok { color: #fff; }
.nl-msg.error { color: #F3B9A3; }

/* ---- Portal (admin + client): sidebar + content ---- */
.portal { flex: 1 0 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr) 344px; min-height: 100vh; }
.portal.no-rail { grid-template-columns: 250px minmax(0, 1fr); }
.p-side { background: var(--char); color: #CFC7B8; display: flex; flex-direction: column; padding: 20px 0 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.p-brand { font-family: var(--f-disp); font-weight: 600; font-size: 21px; color: #fff; padding: 0 22px 16px; }
.p-brand b { color: var(--accent-dark); }
.p-user { padding: 0 22px 16px; margin: 0 0 6px; border-bottom: 1px solid #3a352e; font-size: 14px; color: #fff; }
.p-user span { display: block; font: 700 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #8C8474; margin-top: 3px; }
.p-nav { flex: 1 0 auto; padding: 8px 0; }
.p-nav h5 { font: 700 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #8C8474; margin: 18px 22px 6px; }
.p-nav a { display: block; padding: 8px 22px; color: #CFC7B8; font-size: 14px; border-left: 3px solid transparent; }
.p-nav a:hover { background: #2b2721; color: #fff; }
.p-nav a.active { background: #2b2721; color: #fff; border-left-color: var(--bronze); }
.p-side-foot { padding: 14px 22px 0; margin-top: 10px; border-top: 1px solid #3a352e; }
.p-side-foot a { color: #8C8474; font-size: 13px; display: block; padding: 6px 0; }
.p-side-foot a:hover { color: #fff; }
.p-logout { background: transparent; color: #CFC7B8; border: 1px solid #4a453d; padding: 9px 14px; width: 100%; margin-top: 8px; font-weight: 600; }
.p-logout:hover { background: #2b2721; color: #fff; }
.p-main { background: var(--paper); min-width: 0; }
.p-content { padding: 28px 44px 64px; max-width: none; }

/* Right rail — permanent shell furniture. Reserved for global Alerts + Activity (wired later);
   a page may also dock context here. Fills the far-right space; tucks away on narrow screens. */
.p-rail { background: #fff; border-left: 1px solid var(--line); height: 100vh; position: sticky; top: 0; overflow-y: auto; padding: 26px 22px; }
.rail-panel { margin-bottom: 28px; }
.rail-panel:last-child { margin-bottom: 0; }
.rail-panel > h4 { font: 700 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rail-empty { color: var(--mut); font-size: 13px; line-height: 1.5; }
.rail-feed { list-style: none; margin: 0; padding: 0; }
.rail-feed li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.rail-feed li:last-child { border-bottom: 0; }
.rail-feed .rf-time { display: block; color: var(--mut); font-size: 11px; margin-top: 2px; }
.rail-alert { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.rail-alert:last-child { border-bottom: 0; }
.rail-alert .rf-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); margin-top: 5px; }
.rail-more { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--bronze-d); }
.p-content h1 { font-size: 30px; margin: 0 0 4px; }
.p-content > p:first-of-type { color: var(--mut); }
.p-sub { color: var(--mut); margin: 0 0 8px; }

/* Dashboard stat cards */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; margin: 24px 0 8px; }
.stat-card { background: #fff; border: 1px solid var(--line); padding: 20px; display: block; }
.stat-card:hover { border-color: var(--bronze); }
.stat-card b { display: block; font-family: var(--f-disp); font-size: 34px; line-height: 1; color: var(--ink); }
.stat-card .lbl { display: block; font-weight: 700; font-size: 14px; margin: 10px 0 4px; color: var(--ink); }
.stat-card .desc { color: var(--mut); font-size: 13px; }

/* Mobile admin drawer: hidden/inert on desktop, activated in the ≤820px block below. */
.p-drawer-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.p-topbar, .p-backdrop { display: none; }

/* Rail tucks away before the layout gets tight; nav + main stay. */
@media (max-width: 1240px) { .portal { grid-template-columns: 250px minmax(0, 1fr); } .p-rail { display: none; } }
@media (max-width: 820px) {
  /* auto 1fr so the top bar stays content-height (grid's align-content:normal
     would otherwise stretch it) and the main panel fills the viewport. */
  .portal { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* Compact sticky bar so page content starts at the top, not below the whole menu. */
  .p-topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 45;
    background: var(--char); color: #fff; padding: 10px 14px; }
  .p-topbrand { font-family: var(--f-disp); font-weight: 600; font-size: 18px; color: #fff; }
  .p-topbrand b { color: var(--accent-dark); }
  .p-burger { display: inline-flex; width: 42px; height: 42px; cursor: pointer; position: relative; flex: none; }
  .p-burger span, .p-burger span::before, .p-burger span::after { content: ""; position: absolute; left: 9px;
    width: 24px; height: 2px; background: #fff; transition: transform .18s ease, opacity .18s ease; }
  .p-burger span { top: 20px; }
  .p-burger span::before { top: -7px; }
  .p-burger span::after { top: 7px; }
  /* Sidebar becomes an off-canvas drawer. */
  .p-side { position: fixed; top: 0; left: 0; bottom: 0; width: 274px; max-width: 84vw; height: 100vh;
    z-index: 60; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.55); }
  .p-drawer-cb:checked ~ .portal .p-side { transform: translateX(0); }
  .p-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transition: opacity .2s ease; }
  .p-drawer-cb:checked ~ .portal .p-backdrop { opacity: 1; visibility: visible; }
  /* When open, morph the burger into an X. */
  .p-drawer-cb:checked ~ .portal .p-burger span { background: transparent; }
  .p-drawer-cb:checked ~ .portal .p-burger span::before { transform: translateY(7px) rotate(45deg); }
  .p-drawer-cb:checked ~ .portal .p-burger span::after { transform: translateY(-7px) rotate(-45deg); }
  .p-content { padding: 22px 16px; }
  /* Continuous view-transition names fight the fixed drawer on navigation — off on mobile. */
  .p-side, .p-main { view-transition-name: none; }
}

/* ---- Material image box (real photo, or SVG texture fallback) ---- */
.img { position: relative; overflow: hidden; background: var(--stone); }
.img > svg, .img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Product PHOTOS show whole on a white mat — vendor shots come in every shape (wide slabs on
   racks, tall doors) and cropping them loses the product. Texture fallbacks still fill. */
.pcard .img > img, .detail-media .img > img, .detail-gallery .img > img { object-fit: contain; background: #fff; }
.pcard .img:has(> img), .detail-media .img:has(> img), .detail-gallery .img:has(> img) { background: #fff; }
.img .tag { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(26,23,18,.82); color: #FAF6EE; font: 700 10px var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; }
.ratio-1 { aspect-ratio: 1/1; }
.ratio-43 { aspect-ratio: 4/3; }
.ratio-56 { aspect-ratio: 5/6; }
.ratio-169 { aspect-ratio: 16/9; }

/* ---- Buttons ---- */
.btn, button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--paper);
  border: 0; font: 700 14px var(--f-body); padding: 12px 22px; cursor: pointer;
}
.btn:hover, button:hover { background: var(--char); }
/* Bronze/yellow fill needs DARK text for contrast (the accent is now a bright hi-vis yellow,
   not the old dark brick) — every existing .btn.bronze call site repaints correctly for free. */
.btn.bronze, .btn-accent { background: var(--bronze); color: var(--girder); }
.btn.bronze:hover, .btn-accent:hover { background: var(--bronze-d); color: var(--girder); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
/* Ghost button on a dark background (hero, dark panels) — light text/border instead of dark. */
.btn.ghost.on-dark { color: #fff; border-color: #fff; }
.btn.ghost.on-dark:hover { background: rgba(255,255,255,.1); color: #fff; }
/* Dark-fill button — the CTA-band "Get a quote" action on the yellow band. */
.btn.dark { background: var(--girder); color: #fff; }
.btn.dark:hover { background: var(--girder-2); color: #fff; }
.btn.big { padding: 15px 28px; font-size: 15px; }

/* ============================================================================
   Back-office control primitives — scoped to .p-content (admin + client portal).
   The storefront layout is separate and untouched. Built by lib/ui.php
   (ui_btn / ui_post / ui_pill). Kinds: primary, default, quiet, danger, icon. Size: .sm.
   Every real admin button is a .btn (emitted by the helpers); component buttons that carry
   their own class (.cms-tab, media pickers, etc.) keep their own styling.
   ============================================================================ */
.p-content .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  font: 600 13px var(--f-body); padding: 8px 14px; line-height: 1.15;
  border-radius: 5px; cursor: pointer; text-decoration: none;
  align-self: center; white-space: nowrap; vertical-align: middle;
}
.p-content .btn:hover { background: var(--paper); border-color: var(--mut); color: var(--ink); }
/* primary — bronze fill, the one main action of a view. Legacy .btn-accent/.bronze map here. */
.p-content .btn.primary, .p-content .btn.bronze, .p-content .btn-accent {
  background: var(--bronze); border-color: var(--bronze); color: #fff;
}
.p-content .btn.primary:hover, .p-content .btn.bronze:hover, .p-content .btn-accent:hover {
  background: var(--bronze-d); border-color: var(--bronze-d); color: #fff;
}
/* quiet — borderless muted text; inline & row actions. Legacy portal .ghost maps here. */
.p-content .btn.quiet, .p-content .btn.ghost {
  background: transparent; border-color: transparent; color: var(--mut); padding: 6px 8px;
}
.p-content .btn.quiet:hover, .p-content .btn.ghost:hover {
  background: transparent; border-color: transparent; color: var(--ink);
}
/* danger — quiet until you reach for it. */
.p-content .btn.danger { background: transparent; border-color: transparent; color: var(--mut); padding: 6px 8px; }
.p-content .btn.danger:hover { background: transparent; border-color: transparent; color: #b3261e; }
/* icon — square, icon-only (reorder arrows, etc.). */
.p-content .btn.icon { width: 30px; height: 30px; padding: 0; color: var(--mut); }
.p-content .btn.icon:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
/* size */
.p-content .btn.sm { padding: 5px 10px; font-size: 12px; }
.p-content .btn.icon.sm { width: 26px; height: 26px; padding: 0; }

/* ============================================================================
   Operator-workspace layout primitives (page_head / admin_cols / .dtable / admin_actions
   in lib/ui.php). Pages COMPOSE these — no page writes its own layout CSS.
   ============================================================================ */
/* Page header: title left, the page's primary action(s) pinned right. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 6px; }
.page-head h1 { margin: 0; }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
/* Two-column workspace: wide main + a docked aside that fills the space (stacks on narrow). */
.admin-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; margin-top: 22px; }
.admin-cols > .ac-main { min-width: 0; }
.admin-cols > .ac-aside { position: sticky; top: 20px; }
.admin-cols > .ac-aside .admin-block,
.admin-cols > .ac-aside .card-form { margin: 0; }
.admin-cols > .ac-aside .sgrid { grid-template-columns: 1fr; }
.admin-cols > .ac-aside .inline-form { flex-wrap: wrap; }
.admin-cols > .ac-aside .inline-form input,
.admin-cols > .ac-aside input:not([type=checkbox]):not([type=radio]),
.admin-cols > .ac-aside textarea,
.admin-cols > .ac-aside select { max-width: none; width: 100%; }
@media (max-width: 1080px) { .admin-cols { grid-template-columns: 1fr; } .admin-cols > .ac-aside { position: static; } }
/* Data table: full-width list; the last cell holds all row actions on ONE row. */
.dtable { width: 100%; border-collapse: collapse; background: #fff; }
.dtable th { text-align: left; font: 400 11px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 11px 16px; border-bottom: 1px solid var(--line); }
.dtable td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable .dt-actions { text-align: right; white-space: nowrap; width: 1%; }
.dtable .dt-actions .row-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
/* First column absorbs slack so secondary columns (Shown / actions) group at the right, no mid-gap. */
.dtable th:first-child, .dtable td:first-child { width: 100%; }
.dtable td:not(:first-child), .dtable th:not(:first-child) { white-space: nowrap; }
/* Mobile: a data table becomes a stack of cards — no horizontal overflow, actions never cut off. */
@media (max-width: 820px) {
  .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; width: auto; }
  .dtable tr:first-child { display: none; }                 /* header row */
  .dtable tr { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 12px 14px; margin-bottom: 10px; }
  .dtable td { border: 0; padding: 3px 0; white-space: normal; }
  .dtable td:first-child { width: auto; margin-bottom: 4px; }
  .dtable .dt-actions { text-align: left; width: auto; padding-top: 8px; }
  .dtable .dt-actions .row-actions { justify-content: flex-start; flex-wrap: wrap; gap: 4px; }
  /* Complex non-card tables (orders, products) scroll sideways instead of breaking the page. */
  .p-content > .admin-block { overflow-x: auto; }
}

/* ---- Hero ---- */
.hero { padding: 60px 0 40px; }
.hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: start; }
.hero h1 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -.015em; margin: 14px 0 18px; max-width: 20ch; text-wrap: balance; }
.hero p:not(.eyebrow) { font-size: 19px; color: var(--mut); max-width: 46ch; margin: 0 0 26px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }   /* button-pair primitive — reused everywhere */
.hero .cta { margin-bottom: 28px; }
.stats { display: flex; gap: 30px; border-top: 1px solid var(--line); padding-top: 18px; flex-wrap: wrap; }
.stat b { display: block; font-family: var(--f-disp); font-size: 20px; }
.stat span { font: 600 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 180px 130px 130px; gap: 14px; overflow: hidden; min-width: 0; }
.collage .img:nth-child(1) { grid-row: span 2; }
.collage .img:nth-child(4) { grid-column: span 2; }

/* Hero-tile slideshow (2+ slide images rotate inside the large tile). Slides crossfade over the
   dark tile background; reduced motion = first slide only. */
.img.slides { background: #140d08; }
.img .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; opacity: 0; }
.img .slide:first-child { opacity: 1; }
.slides-2 .slide { animation: heroFade2 12s infinite; }
.slides-3 .slide { animation: heroFade3 18s infinite; }
.slides-4 .slide { animation: heroFade4 24s infinite; }
.slides-5 .slide { animation: heroFade5 30s infinite; }
.img .slide:nth-child(2) { animation-delay: 6s; }
.img .slide:nth-child(3) { animation-delay: 12s; }
.img .slide:nth-child(4) { animation-delay: 18s; }
.img .slide:nth-child(5) { animation-delay: 24s; }
@keyframes heroFade2 { 0% { opacity: 1; } 42% { opacity: 1; } 50% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes heroFade3 { 0% { opacity: 1; } 28% { opacity: 1; } 33% { opacity: 0; } 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes heroFade4 { 0% { opacity: 1; } 21% { opacity: 1; } 25% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes heroFade5 { 0% { opacity: 1; } 17% { opacity: 1; } 20% { opacity: 0; } 97% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .img .slide { animation: none; }
}
/* Linked hero tiles are anchors — keep the box model identical to the div version. */
a.img { display: block; }

/* Homepage video section — muted, autoplaying, looping. Set the URL in Site pages → Home. */
.homevideo .hv-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); background: #140d08; }
.homevideo .hv-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Overlay to settle bright footage against the cream page. Darkness set per-page ("Overlay strength"
   in the page's video section). ONE rule covers every video container site-wide. */
.homevideo .hv-frame::after { content: ""; position: absolute; inset: 0;
  z-index: 1; pointer-events: none; background: rgba(20,13,8, var(--hvov, .15)); }
/* Editor-only locator: shows in the CMS live preview where the video band will land once a URL is set. */
.homevideo .hv-placeholder { border: 2px dashed var(--line); aspect-ratio: 16 / 9; display: flex;
  align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--mut); font-size: 15px; }

/* Play/expand affordance on every ambient video. Hidden without JS (the button would be dead);
   assets/site.js stamps .js on <html> and moves the video into the lightbox on click. */
.vid-expand { display: none; }
.js .vid-expand { display: grid; place-items: center; position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55);
  background: rgba(20,13,8,.55); color: #fff; cursor: pointer; z-index: 2; padding: 0;
  transition: transform .15s ease, background .15s ease; }
.js .vid-expand:hover { transform: scale(1.08); background: rgba(20,13,8,.78); }
.vid-expand svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.video-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(10,7,4,.92);
  display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 48px); }
.video-lightbox .vl-stage { width: min(1200px, 100%); }
.video-lightbox video { width: 100%; max-height: 86vh; display: block; background: #000; }
.video-lightbox .vl-close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; background: none; color: #fff; opacity: .8;
  cursor: pointer; padding: 0; }
.video-lightbox .vl-close svg { width: 22px; height: 22px; display: block; }
.video-lightbox .vl-close:hover { opacity: 1; }
.video-lightbox .vl-stage img { width: 100%; max-height: 86vh; object-fit: contain; display: block; background: #000; }
.detail-media .img img, .detail-gallery a.img { cursor: zoom-in; }
body.vl-open { overflow: hidden; }

/* Option pills (e.g. Size on a slab page): radio buttons styled as selectable chips. */
.optgroup { margin: 0 0 14px; }
.optlabel { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mut); margin-bottom: 6px; }
.optpills { display: flex; gap: 8px; flex-wrap: wrap; }
.optpill { position: relative; border: 2px solid var(--line); background: #fff; padding: 9px 14px;
  cursor: pointer; font-size: 14px; color: var(--ink); }
.optpill input { position: absolute; opacity: 0; width: 0; height: 0; }
.optpill:has(input:checked) { border-color: var(--bronze); background: #F7EEEA; }
.optpill .optprice { color: var(--mut); font-size: 12px; margin-left: 6px; }

/* Labeled blocks on the product detail (Description / Specifications). */
.detail-block { margin-top: 20px; }
.detail-label { display: block; font: 700 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mut); margin-bottom: 8px; }
/* Clickable tag chips ("Browse similar") — pill affordance, clearly a link. */
.browse-similar { margin-top: 16px; }
.tagchips { display: flex; gap: 8px; flex-wrap: wrap; }
.tagchip { border: 1.5px solid var(--line); background: #fff; padding: 7px 12px; font-size: 13px;
  font-weight: 600; color: var(--ink); transition: border-color .12s ease, background .12s ease; }
.tagchip:hover { border-color: var(--bronze); background: #F7EEEA; }

/* Optional card image on a text card (e.g. a care topic with a featured image set). */
.value > a.img { display: block; margin-bottom: 12px; }
/* Inline field warning (e.g. a social link pasted into an mp4 field). */
.field-warn { margin: 6px 0 0; font-size: 13px; color: #8A2E1C; background: #F7E8E4;
  border: 1px solid #E4C4BA; padding: 8px 10px; border-radius: 6px; }
/* Range/slider field in the page editor. */
.cms-range .cms-range-row { display: flex; align-items: center; gap: 12px; }
.cms-range input[type=range] { flex: 1; accent-color: var(--bronze); }
.cms-range output { font: 700 13px var(--f-body); color: var(--ink); min-width: 3ch; text-align: right; }

/* ---- Section + heading ---- */
.section { padding: 54px 0; }
.section.alt { background: var(--stone); }
.shead { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 26px; }
.shead h2 { font-size: 32px; letter-spacing: -.01em; }
.shead a { font-weight: 700; font-size: 14px; color: var(--bronze); border-bottom: 1.5px solid var(--bronze); padding-bottom: 2px; white-space: nowrap; }

/* ---- Category showcase ---- */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---- Solutions / capability cards ---- */
.solgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.boards .img { aspect-ratio: 4/3; }
.board-cap { margin-top: 10px; font-weight: 600; color: var(--ink); }
.solcard { border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
.solcard:hover { border-color: var(--bronze); }
.solcard .img { aspect-ratio: 16/9; }
.solcard .body { padding: 18px 20px 20px; }
.solcard h3 { font-size: 21px; margin: 0 0 6px; }
.solcard .mode { font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bronze); margin: 0 0 8px; }
.solcard p { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; }

/* ---- Admin product manager: actions + filter bar ---- */
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.filterbar input[type=search], .filterbar select { padding: 8px 11px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); width: auto; }
.filterbar input[type=search] { flex: 1 1 240px; min-width: 200px; }
.filterbar select { flex: 0 0 auto; min-width: 150px; }
.filterbar button { flex: 0 0 auto; padding: 8px 16px; }
.pager .off { color: var(--mut); opacity: .55; }
.bulkbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); }
.bulkbar select, .bulkbar input { padding: 7px 10px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); width: auto; }
.bulkbar .sel-count { font: 700 12px var(--f-mono); letter-spacing: .04em; color: var(--mut); margin-right: 4px; }
.bulkbar button { padding: 7px 16px; }
.cbcol { width: 34px; text-align: center; }
.cell-edit { width: 82px; border: 1px solid transparent; background: transparent; font: inherit; color: var(--ink); padding: 4px 6px; }
.cell-edit.narrow { width: 56px; }
.cell-edit:hover { border-color: var(--line); background: #fff; }
.cell-edit:focus { border-color: var(--bronze); background: #fff; outline: none; }
.inline-save { display: flex; gap: 12px; align-items: center; margin: 12px 0 4px; }
.inline-save .hint { margin: 0; }
.healthlist { list-style: none; margin: 8px 0 0; padding: 0; }
.healthlist li { padding: 7px 12px; margin: 5px 0; border-left: 3px solid var(--line); background: #fff; font-size: 14px; }
.healthlist .h-error { border-left-color: #B4472E; }
.healthlist .h-warn { border-left-color: var(--bronze); }
.healthlist .h-info { border-left-color: var(--mut); color: var(--mut); }
.mp-wrap { max-width: 420px; }
.gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.gallery-thumbs img { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.detail-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.detail-gallery .img { margin: 0; }

/* ---- Client project workspace ---- */
.proj-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.fulfill { border: 1px solid var(--line); background: #fff; padding: 14px 16px; margin: 10px 0; }
.fulfill-top { font-size: 14px; margin-bottom: 10px; }
.fulfill-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; counter-reset: step; }
.fulfill-strip li { flex: 1 1 0; min-width: 90px; text-align: center; font-size: 11.5px; color: var(--mut); padding: 8px 4px 0; border-top: 3px solid var(--line); position: relative; }
.fulfill-strip li.done { color: var(--ink); border-top-color: var(--bronze); }
.fulfill-strip li.now { color: var(--bronze-d); font-weight: 700; border-top-color: var(--bronze); }
.release-line { margin: 12px 0 0; font-size: 14px; color: var(--ink); }
.rl-label { font: 700 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-right: 8px; }
.release-form input[type=date] { max-width: 150px; }
.timeline { list-style: none; margin: 6px 0 0; padding: 0; }
.timeline li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.timeline li:first-child { border-top: 0; }
.timeline .tl-when { color: var(--mut); font-size: 12px; margin-right: 10px; }

/* ---- Account overview cards ---- */
.acct-cards { grid-template-columns: repeat(4, 1fr); margin-top: 22px; }
.acct-contact { margin-top: 28px; max-width: 460px; }
@media (max-width: 900px) { .acct-cards { grid-template-columns: 1fr 1fr; } }

/* ---- Capability "how we deliver" pipeline ---- */
.lede { font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 760px; margin: 0 0 26px; }
.pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pipeline li { background: var(--paper); padding: 22px 22px 24px; position: relative; }
.pipeline .pnum { font: 700 12px var(--f-mono); letter-spacing: .12em; color: var(--bronze); }
.pipeline h3 { font-size: 19px; margin: 8px 0 6px; }
.pipeline p { color: var(--mut); font-size: 14.5px; margin: 0; }
@media (max-width: 860px) { .pipeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pipeline { grid-template-columns: 1fr; } }
.deliver-teaser { text-align: center; max-width: 840px; margin: 0 auto; }
.deliver-teaser .lede { margin: 12px auto 22px; }

/* ---- Locations (service-area index) ---- */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.loc-card { background: #fff; border: 1px solid var(--line); padding: 20px 22px; }
.loc-card h3 { font-size: 21px; margin: 0 0 12px; }
.loc-card h3 span { font: 700 11px var(--f-mono); letter-spacing: .08em; color: var(--mut); margin-left: 8px; }
.loc-card ul { list-style: none; margin: 0; padding: 0; }
.loc-card li { padding: 5px 0; border-top: 1px solid var(--line); }
.loc-card li:first-child { border-top: 0; }
.loc-card a { color: var(--ink); font-size: 14.5px; }
.loc-card a:hover { color: var(--bronze); }
@media (max-width: 900px) { .loc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .loc-grid { grid-template-columns: 1fr; } }

/* ---- Editorial split ---- */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: center; }
.split.reverse { grid-template-columns: .9fr 1.1fr; }
.split.reverse .split-media { order: 2; }
.split .img { aspect-ratio: 4/3; }
.split h2 { font-size: 36px; line-height: 1.06; margin: 12px 0 14px; }
.split p:not(.eyebrow) { font-size: 17px; color: var(--mut); margin: 0 0 20px; }
.split ul { margin: 0 0 22px; padding-left: 18px; color: var(--mut); }
.split li { margin: 6px 0; }

/* ---- Product cards ---- */
.prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prods.wide { grid-template-columns: repeat(3, 1fr); }
.pcard { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.pcard:hover { border-color: var(--bronze); }
.pcard .img { aspect-ratio: 1/1; }
.pcard .b { padding: 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pcard .dept { font: 700 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.pcard .desc { font-size: 13px; line-height: 1.45; color: var(--mut); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .sku { font: 11px var(--f-mono); letter-spacing: .05em; color: var(--mut); }
.pcard .name { font-family: var(--f-body); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); }
.pcard .chip { align-self: flex-start; font: 600 11px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--sage); border: 1px solid #C9D0C5; padding: 3px 8px; }
.pcard .made { color: var(--bronze); border-color: #E2CBAF; }
.pcard .price { margin-top: auto; font-family: var(--f-disp); font-size: 22px; font-variant-numeric: tabular-nums; }
.pcard .trade { margin-top: auto; font: 700 11px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--bronze); }
.pcard .buy { margin-top: 10px; text-align: center; padding: 10px; font-weight: 700; font-size: 13px; border: 1.5px solid var(--ink); }
.pcard .buy:hover { background: var(--ink); color: var(--paper); }

/* ---- Value strip ---- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.value svg { width: 30px; height: 30px; stroke: var(--bronze); fill: none; stroke-width: 1.6; margin-bottom: 12px; }
.value h3 { font-family: var(--f-body); font-weight: 700; font-size: 15px; margin: 0 0 5px; }
.value p { margin: 0; font-size: 14px; color: var(--mut); }

/* ---- Dark band ---- */
.band { background: var(--bronze); color: #fff; padding: 60px 0; }
.band .wrap { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.band .eyebrow { color: rgba(255,255,255,.72); }
.band h2 { font-size: 38px; line-height: 1.05; margin: 8px 0 0; max-width: 20ch; color: #fff; }
.band p:not(.eyebrow) { color: rgba(255,255,255,.85); margin: 12px 0 0; max-width: 46ch; }
.band .cta-wrap { margin-left: auto; }
.band .btn.bronze, .band .btn-accent { background: #fff; color: var(--bronze); }
.band .btn.bronze:hover, .band .btn-accent:hover { background: var(--paper); color: var(--bronze-d); }

/* ---- Shop layout (facets + grid) ---- */
.shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 30px; align-items: start; }
.facet { background: #fff; border: 1px solid var(--line); padding: 18px; }
.facet h3 { margin: 22px 0 12px; font: 700 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.facet h3:first-child { margin-top: 0; }
.facet .check { display: block; margin: 7px 0; font-size: 14px; }
.facet a.check { color: var(--mut); padding-left: 14px; }
.facet a.check:hover { color: var(--bronze); }
.facet a.check.active { color: var(--ink); font-weight: 700; }
/* Collapsible facet — the toggle only appears on mobile (see the 900px block); on desktop the body is always shown. */
.facet-toggle-cb { position: absolute; opacity: 0; width: 1px; height: 1px; }
.facet-toggle { display: none; }
.facet-body { display: block; }
.pager { display: flex; gap: 10px; margin: 28px 0; font-family: var(--f-mono); }
.pager a, .pager span { padding: 7px 13px; border: 1px solid var(--line); background: #fff; }
.pager .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Product detail ---- */
.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.detail-media .img { aspect-ratio: 4/3; }
.detail-desc { color: var(--mut); margin-top: 16px; }
/* Sticky on desktop so price / size / add-to-quote stay in view while the sheet scrolls; the
   offset clears the 78px sticky header, and sticky releases at the end of the grid. */
.spec-panel { background: #fff; border: 1px solid var(--line); padding: 26px; position: sticky; top: 94px; }
.spec-panel h1 { font-size: 28px; margin: 6px 0 10px; line-height: 1.12; }
.price-big { font-family: var(--f-disp); font-weight: 500; font-size: 34px; margin: 10px 0 6px; }
.gate-note { color: var(--mut); font-size: 13px; margin-top: 6px; }
.chip-trade { display: inline-block; background: var(--stone); color: var(--bronze); font: 700 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; background: transparent; }
.spec-table th { text-align: left; font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 8px 28px 8px 0; border-bottom: 1px solid var(--line); width: 1%; white-space: nowrap; }
.spec-table td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line); }

/* ---- Forms ---- */
input, select, textarea {
  font: 14px var(--f-body);
  border: 1px solid var(--line);
  background: #fff;
  padding: 11px 13px;
  width: 100%;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--bronze); outline: none; }
label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 13px; }
label.check { font-weight: 400; }
label.check input { width: auto; margin-right: 6px; }
.stack-form { max-width: 620px; }
.p-content .stack-form { max-width: 880px; }   /* admin forms (item + CMS editor) get room — wider URL/SEO fields */
.inline-form { display: flex; gap: 8px; margin-top: 12px; }
.inline-form input { max-width: 280px; }
.config-form { margin-top: 14px; }
.config-form label { margin: 10px 0 4px; }
.config-note { font-size: 12px; color: var(--mut); margin-top: 3px; }
.config-note .mono { letter-spacing: .04em; }
.error { background: #fff; border: 1px solid var(--ink); padding: 11px 15px; font-weight: 600; }
.hint { color: var(--mut); font-size: 13px; }
.qty-input { max-width: 90px; }
.thumb-preview { max-width: 160px; border: 1px solid var(--line); margin-top: 8px; }

/* ---- Tables + admin/account (recolored via tokens) ---- */
h1 { font-size: 30px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th { text-align: left; font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
th, td { padding: 13px 18px; border-bottom: 1px solid var(--line); }
.admin-block { margin: 30px 0; }
.admin-block h2 { font-size: 20px; margin: 0 0 14px; }
fieldset { border: 1px solid var(--line); padding: 12px 15px 14px; margin: 14px 0; background: #fff; }
legend { font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 0 6px; }
fieldset label.check { display: inline-block; margin: 5px 18px 5px 0; }
.area-pick { margin-top: 8px; max-height: 220px; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 8px; }
.area-pick label.check { display: inline-block; width: 220px; margin: 4px 0; }
.topic-pick label.check { display: block; width: auto; }
.topic-pick label.check-written { opacity: .55; }
.area-capability { margin: 28px 0; padding: 22px 24px; background: #fff; border-top: 3px solid var(--bronze); }
.area-capability h2 { margin-bottom: 8px; }
.area-capability .cta { margin-top: 16px; }
.care-list { margin: 6px 0 14px; padding-left: 20px; }
.care-list li { margin: 7px 0; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 26px 0 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.admin-nav a { font-weight: 700; font-size: 14px; }
.admin-nav a:hover { color: var(--bronze); }
.build { color: var(--mut); font-family: var(--f-mono); font-size: 11px; margin-top: 40px; }
.status-banner { background: #fff; border: 1px solid var(--line); padding: 14px 18px; margin-bottom: 22px; border-radius: 5px; }
.status-banner.ok { border-color: var(--bronze); background: #F7EEEA; }
.status-banner .eyebrow { margin-bottom: 4px; }
.msg-body { white-space: pre-wrap; }
.invoice-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 18px; }
.invoice-head .brand-print { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 20px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hero .grid, .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .cats, .prods, .prods.wide, .values, .footer .cols, .solgrid, .boards { grid-template-columns: 1fr 1fr; }
  .shop-layout { grid-template-columns: 1fr; }
  /* Facet becomes a collapsed accordion so products are visible immediately, not buried under 40+ departments. */
  .facet { padding: 0; }
  .facet-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; font: 700 13px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
  .facet-toggle::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--bronze); border-bottom: 2px solid var(--bronze); transform: rotate(45deg); transition: transform .15s ease; margin-top: -3px; }
  .facet-toggle-cb:checked ~ .facet-toggle::after { transform: rotate(-135deg); margin-top: 3px; }
  .facet-body { display: none; padding: 0 16px 16px; }
  .facet-toggle-cb:checked ~ .facet-body { display: block; }
  .facet-body h3:first-child { margin-top: 4px; }
  .product-detail { grid-template-columns: 1fr; }
  .spec-panel { position: static; }
  .hsearch { display: none; }
  .header .wrap { position: relative; }
  .nav-burger { display: block; }
  /* Once the menu is a burger, the top bar is just logo + burger. Account actions (.hicons)
     move into the menu (.nav-mobile-only), so the header can never crowd or clip. */
  .hicons { display: none; }
  /* On mobile the standalone CTA hides; the burger menu carries its own Get-a-quote + Log in. */
  .header-cta { display: none; }
  .nav-burger { margin-left: auto; }
  .mainnav a.nav-mobile-only { display: block; height: auto; font-weight: 700; }
  .mainnav a.btn.nav-mobile-only { display: block; margin: 10px clamp(20px, 4vw, 72px) 4px; text-align: center; }
  .mainnav { display: none; align-self: auto; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-left: 0; border-bottom: 1px solid var(--line); box-shadow: 0 14px 26px rgba(36,27,18,.12); padding: 4px 0 10px; z-index: 30; max-height: calc(100vh - 60px); overflow-y: auto; }
  .nav-toggle:checked ~ .mainnav { display: flex; }
  .mainnav a { padding: 13px clamp(20px, 4vw, 72px); border-top: 1px solid var(--line); font-size: 16px; }
  /* Mega panels flatten into the stacked mobile menu: titles only, no hover, always shown. */
  .nav-item { display: block; }
  .nav-item > .nav-top { display: block; height: auto; font-weight: 700; }
  .has-mega > .nav-top::after { display: none; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; background: none; padding: 0; }
  .mega::before { display: none; }
  .mega .mega-in, .mega-split { display: block; padding: 0; max-width: none; }
  .mega-head { display: none; }
  .mega-grid-sw, .mega-cap, .mega-res { display: block; }
  .mega-sw { width: 26px; height: 26px; }
  .mega .mt { margin-bottom: 0; font-weight: 600; font-size: 15px; }
  .mega .mb { display: none; }
  .mega-grid-sw a, .mega-cap a, .mega-res a { display: flex; align-items: center; gap: 12px; padding: 11px clamp(36px, 8vw, 92px); border: 0; border-radius: 0; border-top: 1px solid var(--line); background: none; }
  .mega-cap a, .mega-res a { display: block; }
  /* The Products featured rail is redundant on mobile (Apply/Contact are already in the menu). */
  .mega-feature { display: none; }
  .band .wrap { flex-direction: column; align-items: flex-start; }
  .band .cta-wrap { margin-left: 0; }
}
@media (max-width: 560px) {
  /* Products stay 2-up even on phones — a single full-width column makes each card's 1:1 image enormous. */
  .cats, .values, .footer .cols, .solgrid, .boards { grid-template-columns: 1fr; }
  .prods, .prods.wide { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wrap { padding: 0 20px; }
}

@media print {
  .topbar, .header, .footer, .no-print { display: none !important; }
  body { background: #fff; }
  .page { padding-top: 0; }
}

/* ---- CMS page editor (Content / SEO tabs + live preview) ---- */
.cms-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cms-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 14px 0 24px; }
.cms-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 18px; margin-bottom: -1px; font: 600 14px var(--f-body); color: var(--mut); cursor: pointer; }
.cms-tab:hover { color: var(--ink); }
.cms-tab.is-active { color: var(--ink); border-bottom-color: var(--bronze); }
.cms-panel[hidden] { display: none; }
.cms-imgfield { margin: 0 0 18px; }
.cms-imgfield .cms-upload { display: block; margin-top: 6px; font-size: 13px; color: var(--mut); }
.thumb-preview { display: block; max-width: 240px; border: 1px solid var(--line); border-radius: 6px; margin-top: 10px; }
.cms-seo-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 30px; align-items: start; }

/* Two-pane live editor: fields on the left, the real page rendered live on the right. */
.cms-editor { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 28px; align-items: start; }
.cms-edit { min-width: 0; }
.cms-editor .cms-seo-grid, .cms-editor .sgrid { grid-template-columns: 1fr; }   /* narrow left column: stack fields */
.cms-editor .card-form { margin: 0; }
.cms-live { position: sticky; top: 18px; }
.cms-live-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cms-live-label { font: 700 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.cms-live-status { font-size: 12px; color: var(--bronze); }
.cms-live-open { margin-left: auto; font-size: 13px; }
.cms-live-frame { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff;
  height: calc(100vh - 132px); position: relative; }
.cms-live-frame iframe { border: 0; display: block; background: #fff; transform-origin: top left; }
/* Flash a field when you click its element in the preview (reverse locate). */
.cms-field-hit, .cms-field-hit input, .cms-field-hit textarea { outline: 2px solid var(--bronze); outline-offset: 2px; }
label.cms-field-hit { border-radius: 3px; box-shadow: 0 0 0 3px rgba(168,67,42,.16); }

/* Draggable gallery thumbnail strip under the Images field. */
.img-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 2px; }
.img-chip { position: relative; width: 84px; height: 84px; border: 1px solid var(--line); background: var(--stone);
  overflow: hidden; cursor: grab; border-radius: 3px; }
.img-chip img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; pointer-events: none; }
.img-chip.dragging { opacity: .4; }
.img-chip.drop-into { outline: 2px solid var(--bronze); outline-offset: -2px; }
.img-badge { position: absolute; left: 0; bottom: 0; right: 0; background: rgba(168,67,42,.92); color: #fff;
  font: 700 9px var(--f-body); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 2px 0; }
.img-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: rgba(35,25,15,.78); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.img-x:hover { background: var(--bronze-d); }

/* Admin guide & documentation. */
.guide { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; }
.guide-toc { position: sticky; top: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.guide-toc .gt-title { font: 700 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 0 0 8px; }
.guide-toc a { display: block; padding: 6px 10px; border-left: 2px solid var(--line); color: var(--mut); border-radius: 0 3px 3px 0; }
.guide-toc a:hover { color: var(--ink); border-left-color: var(--bronze); background: #fff; }
.guide-body { max-width: 820px; }
.guide-body .lead { font-size: 18px; line-height: 1.55; color: var(--char); margin: 0 0 8px; }
.guide-body h2 { font-family: var(--f-disp); font-size: 24px; margin: 40px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.guide-body h3 { font-family: var(--f-disp); font-size: 18px; margin: 24px 0 6px; }
.guide-body p, .guide-body li { line-height: 1.65; color: var(--ink); }
.guide-body ul, .guide-body ol { margin: 8px 0 8px; padding-left: 22px; }
.guide-body li { margin: 0 0 6px; }
.guide-body code { background: var(--stone); padding: 1px 5px; border-radius: 3px; font-size: 13px; }
.guide-defs { margin: 8px 0; }
.guide-defs dt { font-weight: 700; margin-top: 12px; }
.guide-defs dd { margin: 2px 0 0; color: var(--ink); line-height: 1.6; }
@media (max-width: 900px) {
  .guide { grid-template-columns: 1fr; gap: 20px; }
  .guide-toc { position: static; flex-flow: row wrap; }
  .guide-toc a { border-left: 0; border: 1px solid var(--line); border-radius: 3px; }
}

/* Launch-readiness checklist. */
.launch-score { display: inline-flex; align-items: baseline; gap: 8px; margin: 4px 0 18px; }
.launch-score b { font-family: var(--f-disp); font-weight: 800; font-size: 34px; color: var(--ink); }
.launch-score span { color: var(--mut); font-size: 14px; }
.launch-list { list-style: none; margin: 0; padding: 0; }
.launch-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.launch-list li:first-child { border-top: 0; }
.lc-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; }
.lc-ok .lc-icon { background: #2e7d46; }
.lc-warn .lc-icon { background: var(--bronze); }
.lc-info .lc-icon { background: var(--mut); font-style: italic; }
.lc-body { flex: 1; min-width: 0; }
.lc-label { display: block; font-weight: 600; }
.lc-detail { display: block; font-size: 13.5px; color: var(--mut); }

/* Saved package templates on the quote list. */
.saved-packages { margin: 20px 0 30px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
.saved-packages h2 { font-size: 18px; margin: 0 0 4px; }
.saved-list { list-style: none; margin: 12px 0 0; padding: 0; }
.saved-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.sp-name { font-weight: 600; }
.sp-actions { display: flex; gap: 8px; }
.save-package { margin-top: 16px; gap: 8px; }

/* City page internal-link mesh. */
.area-projects { margin: 40px 0; }
.area-explore { margin: 40px 0; padding: 30px 0; border-top: 1px solid var(--line); }
.explore-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.explore-cols h3 { font-family: var(--f-disp); font-weight: 700; font-size: 15px; margin: 0 0 12px; }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { margin: 0 0 8px; }
.link-list a { font-size: 14.5px; color: var(--ink); }
.link-list a:hover { color: var(--bronze-d); }
@media (max-width: 640px) { .explore-cols { grid-template-columns: 1fr; gap: 22px; } }

/* City page "Serving {city} and nearby" metro cross-links (Phase 8a). */
.area-nearby { margin: 0 0 40px; padding: 24px 0; border-top: 1px solid var(--line); }
.area-nearby h3 { font-family: var(--f-disp); font-weight: 700; font-size: 15px; margin: 0 0 12px; }
.nearby-list { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.nearby-list li { margin: 0; }
.nearby-list a { display: inline-block; padding: 5px 12px; background: var(--stone); font-size: 13.5px; color: var(--ink); }
.nearby-list a:hover { color: var(--bronze-d); }

/* Email deliverability DNS records table. */
.dns-records { margin: 12px 0; }
.dns-records code { font-size: 12px; word-break: break-all; }
.dns-records em { color: var(--bronze-d); font-style: normal; }

/* Leads dashboard: source bars + funnel. */
.lead-bar-cell { width: 40%; }
.lead-bar { display: inline-block; height: 10px; background: var(--bronze); border-radius: 5px; min-width: 2px; }
.funnel { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.funnel-step { flex: 1 1 120px; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 16px 18px; text-align: center; }
.funnel-step b { display: block; font: 700 30px var(--f-disp); color: var(--ink); }
.funnel-step span { font-size: 13px; color: var(--mut); }
.funnel-arrow { align-self: center; color: var(--mut); font-size: 20px; }

/* Public FAQ accordion. */
.faq-list { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--f-disp);
  font-weight: 700; font-size: 18px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--bronze); font-size: 24px; font-weight: 400; line-height: 1; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-a { padding: 0 0 20px; line-height: 1.65; color: var(--ink); max-width: 70ch; }

/* Media library grid. */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.media-card { border: 1px solid var(--line); border-radius: 5px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.media-thumb { aspect-ratio: 4/3; background: var(--stone); overflow: hidden; }
.media-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.media-meta { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); }
.media-meta input { flex: 1; min-width: 0; }
.media-actions { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 8px; }

/* "Choose from library" picker modal. */
.media-picker { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(20,15,10,.55); align-items: center; justify-content: center; padding: 24px; }
.mp-box { background: var(--paper); border-radius: 8px; width: min(880px, 96vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.mp-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.mp-head b { font-family: var(--f-disp); }
.mp-search { flex: 1; }
.mp-close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--mut); padding: 0 4px; }
.mp-grid { padding: 16px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.mp-item { border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 0; cursor: pointer; overflow: hidden; aspect-ratio: 1/1; }
.mp-item:hover { border-color: var(--bronze); box-shadow: 0 0 0 2px rgba(168,67,42,.25); }
.mp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.media-pick-btn { margin-top: 6px; }
@media (max-width: 1080px) {
  .cms-editor { grid-template-columns: 1fr; }
  .cms-live { position: static; margin-top: 26px; }
  .cms-live-frame { height: 72vh; }
}
.seo-preview { position: sticky; top: 20px; }
.seo-preview-label { font: 600 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin: 0 0 8px; }
.seo-google { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 22px; }
.seo-g-url { display: block; font-size: 12px; color: #5f6368; margin-bottom: 3px; }
.seo-g-title { display: block; font-size: 18px; line-height: 1.3; color: #1a0dab; }
.seo-g-desc { display: block; font-size: 13px; line-height: 1.5; color: #4d5156; margin-top: 3px; min-height: 1.5em; }
.seo-social { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seo-s-img { aspect-ratio: 1.91 / 1; background: var(--stone) center / cover no-repeat; position: relative; }
.seo-s-img[data-empty]::after { content: "No social image set"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 12px var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
.seo-s-body { padding: 12px 15px; }
.seo-s-title { display: block; font: 700 15px var(--f-body); color: var(--ink); }
.seo-s-desc { display: block; font-size: 13px; line-height: 1.5; color: var(--mut); margin-top: 4px; }
@media (max-width: 900px) { .cms-seo-grid { grid-template-columns: 1fr; } .seo-preview { position: static; } }

/* ---- Capability strip (R1 full-width band under the hero) ---- */
.capstrip { background: var(--stone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capstrip .row { display: grid; grid-template-columns: repeat(4, 1fr); }
.capstrip .cap { padding: 22px 28px; border-right: 1px solid var(--line); }
.capstrip .cap:first-child { padding-left: 0; }
.capstrip .cap:last-child { border-right: 0; }
.capstrip .k { display: block; font: 600 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.capstrip .v { display: block; font-size: 15px; line-height: 1.4; margin-top: 8px; color: var(--ink); }
.capstrip .v b { color: var(--bronze-d); font-weight: 800; font-family: var(--f-disp); }
@media (max-width: 760px) {
  .capstrip .row { grid-template-columns: 1fr 1fr; }
  .capstrip .cap { padding: 18px 20px; }
  .capstrip .cap:nth-child(odd) { padding-left: 0; }
  .capstrip .cap:nth-child(2) { border-right: 0; }
}

/* ---- Pipeline as a full-width dark band (R1) ---- */
.pipeline-band { background: var(--char); color: var(--paper); }
.pipeline-band .shead h2, .pipeline-band h2 { color: #fff; }
.pipeline-band .lede { color: #C7BFB0; }
.pipeline-band .pipeline { grid-template-columns: repeat(6, 1fr); background: transparent; border: 0; gap: 0; }
.pipeline-band .pipeline li { background: transparent; border-right: 1px solid #3a352e; padding: 4px 26px; }
.pipeline-band .pipeline li:first-child { padding-left: 0; }
.pipeline-band .pipeline li:last-child { border-right: 0; padding-right: 0; }
.pipeline-band .pipeline .pnum { color: var(--accent-dark); font-family: var(--f-disp); font-weight: 800; font-size: 22px; letter-spacing: 0; }
.pipeline-band .pipeline h3 { color: #fff; }
.pipeline-band .pipeline p { color: #B6AC97; }
@media (max-width: 860px) { .pipeline-band .pipeline { grid-template-columns: 1fr 1fr 1fr; } .pipeline-band .pipeline li { padding-bottom: 18px; } }
@media (max-width: 520px) { .pipeline-band .pipeline { grid-template-columns: 1fr 1fr; } }

/* ---- CMS editor gold-plating (counters, reset, drag-drop) ---- */
.cms-count { display: block; margin-top: 6px; font: 600 11px var(--f-body); color: var(--mut); }
.cms-count.ok { color: var(--sage); }
.cms-count.over { color: var(--bronze); }
.stack-form label { position: relative; }
.cms-reset { position: absolute; top: 0; right: 0; background: none; border: 0; padding: 2px 4px; font: 600 11px var(--f-body); color: var(--mut); cursor: pointer; opacity: 0; transition: opacity .12s; }
.stack-form label:hover .cms-reset, .stack-form label:focus-within .cms-reset { opacity: 1; }
.cms-reset:hover { background: none; color: var(--bronze); text-decoration: underline; }
.cms-imgfield { border-radius: 8px; transition: outline-color .12s; }
.cms-imgfield.dragover { outline: 2px dashed var(--bronze); outline-offset: 6px; }

/* ---- Empty state ---- */
.empty { text-align: center; padding: 60px 24px; border: 1px dashed var(--line); background: var(--stone); }
.empty h3 { font-family: var(--f-disp); font-size: 22px; margin: 0 0 8px; }
.empty p { color: var(--mut); max-width: 46ch; margin: 0 auto 20px; line-height: 1.6; }

/* ---- Consistent card hover: subtle lift + brick border ---- */
.solcard, .pcard, .stat-card { transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.solcard:hover, .pcard:hover, .stat-card:hover { border-color: var(--bronze); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(36,27,18,.08); }

/* ---- Smooth cross-document navigation (kills the sidebar flash on each menu click) ---- */
@view-transition { navigation: auto; }
/* Desktop only — on mobile .p-side is a fixed off-canvas drawer and a continuous
   view-transition-name fights the slide animation on navigation. */
@media (min-width: 821px) {
  .p-side { view-transition-name: cs-sidebar; }   /* named = treated as continuous, no repaint flash */
  .p-main { view-transition-name: cs-main; }
  .p-rail { view-transition-name: cs-rail; }       /* rail is continuous too — no whole-page flash */
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- Public single-form pages: centered, not floating in dead space ---- */
.form-page { max-width: 660px; margin: 0 auto; }

/* ---- Apply page: form + benefits aside (fills the space, reads designed) ---- */
.apply-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 48px; align-items: start; margin-top: 10px; }
.apply-layout .stack-form { max-width: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.apply-aside { background: var(--stone); border: 1px solid var(--line); padding: 24px 26px; position: sticky; top: 20px; }
.apply-aside h3 { font-family: var(--f-disp); font-size: 18px; margin: 0 0 16px; }
.apply-aside ul { margin: 0 0 6px; padding: 0; list-style: none; }
.apply-aside li { position: relative; padding: 0 0 13px 24px; font-size: 14px; color: var(--mut); line-height: 1.5; }
.apply-aside li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--bronze); font-weight: 800; }
.apply-aside li b { color: var(--ink); font-weight: 700; }
@media (max-width: 780px) { .apply-layout { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .apply-aside { position: static; } }

/* ---- Safety net: forms never sprawl full-width in the back office ---- */
/* Bulk table form, filter bars and tiny inline action forms opt out. */
.p-content form:not(#bulkform):not(.filterbar):not(.inline-form):not(.wide-form) { max-width: 880px; }

/* ---- Admin card forms: card sections with two-column fields (fills the width, reads designed) ---- */
.card-form { max-width: none; }
.card-form .admin-block { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px 22px; margin: 0 0 18px; }
.card-form .admin-block h2 { font-size: 18px; margin: 0 0 16px; }
.card-form > button { margin-top: 2px; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px; align-items: start; }
.sgrid > label, .sgrid > fieldset { margin: 0 0 12px; }
.sgrid > label.wide, .sgrid > fieldset.wide { grid-column: 1 / -1; }
.sgrid > .thumb-preview, .sgrid > .gallery-thumbs, .sgrid > .hint, .sgrid > p { grid-column: 1 / -1; }
@media (max-width: 720px) { .sgrid { grid-template-columns: 1fr; } }

/* ---- Shop facet: family group headings ---- */
.facet-fam { font: 600 10.5px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-d); margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.facet-fam:first-of-type { margin-top: 12px; padding-top: 0; border-top: 0; }

/* ---- Contact page: form card + reach panel + offices band ---- */
.contact-hero { padding: 58px 0 40px; }
.contact-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; }
.reach-card { background: #fff; border: 1px solid var(--line); padding: 26px 26px 28px; }
.reach-card h3 { font-size: 17px; margin-bottom: 14px; }
.contact-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: start; }
.contact-form-card { background: #fff; border: 1px solid var(--line); padding: 32px 32px 34px; }
.contact-form-card h2 { font-size: 24px; margin-bottom: 18px; }
.contact-info { display: flex; flex-direction: column; gap: 26px; }
.info-block h3 { font-size: 17px; margin-bottom: 12px; }
.contact-lines { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.contact-lines li { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; }
.contact-lines .k { font: 700 11px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.contact-lines a { color: var(--ink); font-weight: 600; }
.contact-lines a:hover { color: var(--bronze); }
.next-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; color: var(--mut); font-size: 15px; line-height: 1.45; }
.next-steps li::marker { color: var(--bronze); font-weight: 700; }
.trade-cta { border-top: 1px solid var(--line); padding-top: 24px; }
.trade-cta p { color: var(--mut); font-size: 15px; margin: 0 0 14px; line-height: 1.45; }

.offices-band { background: #EAE1CD; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 58px 0 62px; }
.offices-band h2 { font-size: clamp(26px, 2.6vw, 36px); margin: 6px 0 0; max-width: 24ch; }
.offices-band .lede { margin: 14px 0 0; color: var(--mut); max-width: 60ch; }
/* Fills the full wrap width like the hero (right edge aligns). A 300px minimum caps it at 4 across on
   wide screens so a 5th/6th wraps to a new row instead of squeezing; auto-fit still fills the row for
   any count, and min(100%,…) stops a card overflowing on narrow phones. */
.offices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 30px; }
.office-card { background: #fff; border: 1px solid var(--line); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 5px; }
.office-div { font: 700 10.5px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-d); }
.office-card h3 { font-size: 18px; margin: 2px 0 6px; }
.office-addr { color: var(--mut); font-size: 14.5px; line-height: 1.4; }
.office-phone a { color: var(--ink); font-weight: 700; }
.office-phone a:hover { color: var(--bronze); }
.office-rep { margin-top: 8px; font-size: 14px; color: var(--ink); }
.office-email a { font-size: 14px; color: var(--bronze-d); }
.office-email a:hover { color: var(--bronze); }

/* Admin list rows: quiet, compact action controls — shared by packages/faqs/services/content/offices/pricing/account.
   Bare <button>s here would otherwise inherit the big dark .btn block; keep them as light text/icon controls. */
.row-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.row-actions .inline-form { margin-top: 0; gap: 4px; }
.row-actions a,
.row-actions button {
  background: transparent; color: var(--mut); border: 0;
  font: 600 13px var(--f-body); padding: 5px 7px; line-height: 1; cursor: pointer;
}
.row-actions a:hover,
.row-actions button:hover { background: transparent; color: var(--ink); }
/* Reorder arrows: small square icon buttons, not dark blocks. */
.row-actions button[title^="Move"] {
  width: 28px; height: 28px; padding: 0; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; color: var(--mut); font-size: 14px;
}
.row-actions button[title^="Move"]:hover { border-color: var(--ink); color: var(--ink); }
/* Delete stays quiet until you reach for it. */
.row-actions form[data-confirm] button:hover { color: #b3261e; }
/* Tighter admin list cells (the big row padding is what makes these lists feel bulky). */
.admin-block th, .admin-block td { padding: 9px 16px; vertical-align: middle; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check-row input { width: auto; }

.area-lead { margin-top: 44px; }

/* Catalog gate: adaptive banner atop /shop and product pages (apply / log in / pending) */
.catalog-gate { background: #F3EEE1; border-bottom: 1px solid var(--line); padding: 18px 0; }
.catalog-gate .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.catalog-gate .cg-title { font: 700 16px var(--f-disp); color: var(--ink); margin: 0 0 3px; letter-spacing: -.01em; }
.catalog-gate .cg-text p { margin: 0; }
.catalog-gate .cg-text p:not(.cg-title) { color: var(--mut); font-size: 14.5px; line-height: 1.5; max-width: 74ch; }
.catalog-gate .cg-text a { color: var(--bronze-d); font-weight: 600; }
.catalog-gate .cta { flex: none; }   /* the button pair uses the shared .cta / .btn primitive */
/* On phones, stack the pair one-per-row at natural width (left-aligned) — same as the hero, whose
   two long buttons wrap to their own rows. Not stretched full-width. */
@media (max-width: 640px) { .catalog-gate .cta { flex-direction: column; align-items: flex-start; } }

/* Home installer-network teaser — a bordered call-out feeding the subcontractors page */
.installer-teaser { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; border: 1px solid var(--line); background: #fff; padding: 28px 34px; }
.installer-teaser h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 6px 0 8px; }
.installer-teaser p { color: var(--mut); max-width: 58ch; margin: 0; }
.installer-teaser .cta-wrap { margin-left: auto; }
@media (max-width: 700px) { .installer-teaser { flex-direction: column; align-items: flex-start; } .installer-teaser .cta-wrap { margin-left: 0; } }

/* ---- Articles hub + single article + tag chips ---- */
.tag-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.tag-chip { border: 1px solid var(--line); background: #fff; padding: 7px 14px; font: 600 13px var(--f-body); color: var(--ink); }
.tag-chip:hover { border-color: var(--bronze); color: var(--bronze); }
.tag-chip.active { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.tag-chip .n { color: var(--mut); font-weight: 400; margin-left: 3px; }
.tag-chip.active .n { color: rgba(255,255,255,.72); }
.article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 22px; }
.article-card { background: #fff; border: 1px solid var(--line); padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 11px; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.article-card:hover { border-color: var(--bronze); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(36,27,18,.08); }
.article-card h3 { font-size: 19px; line-height: 1.25; }
.a-excerpt { color: var(--mut); font-size: 14.5px; line-height: 1.5; flex: 1; }
.a-more { font: 700 12px var(--f-body); letter-spacing: .02em; color: var(--bronze); }
.a-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.a-tag { font: 600 10.5px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-d); border: 1px solid #E2CBAF; padding: 3px 8px; }
a.a-tag:hover { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.content-body { max-width: 720px; }

/* ---- Editorial post layout (articles + project write-ups) ---- */
.post-head { padding: 46px 0 30px; }
.post-head .wrap { max-width: 820px; }
.post-title { font-family: var(--f-disp); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; margin: 8px 0 0; text-wrap: balance; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; }
.post-date, .post-place { font: 600 13px var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
.post-place { color: var(--bronze-d); }
.a-place { font: 600 11px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--bronze-d); }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* Project facts strip (case-study proof). */
.post-facts { padding: 0 0 22px; }
.post-facts .wrap { max-width: 980px; }
.pf-scope { font-size: 19px; line-height: 1.5; color: var(--char); max-width: 780px; margin: 0 0 20px; }
.project-facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; padding: 20px 0 4px; border-top: 1px solid var(--line); }
.pf-item dt { font: 700 11px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin: 0 0 4px; }
.pf-item dd { margin: 0; font-family: var(--f-disp); font-weight: 700; font-size: 20px; color: var(--ink); }

/* Featured hero — wider than the reading column, so the image gets room to breathe. */
.post-hero { margin: 0 0 8px; }
.post-hero .wrap { max-width: 980px; }
.post-hero img { width: 100%; height: auto; max-height: 540px; object-fit: cover; display: block;
  border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(36,27,18,.10); }
.post-body { padding: 34px 0 68px; }
.post-body .wrap { max-width: 820px; }
/* The opening paragraph reads as a lead-in. */
.content-body.lead > p:first-of-type { font-size: 19px; line-height: 1.6; color: var(--char); }

/* Card thumbnail (article/project cards). */
.a-thumb { display: block; margin: -24px -24px 4px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--stone); }
.a-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.article-card:hover .a-thumb img { transform: scale(1.03); }

/* In-body gallery + video embeds. */
.article-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 32px 0; }
.ag-item { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); background: var(--stone); }
.ag-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.ag-item:hover img { transform: scale(1.04); }
/* Before / after pairs. */
.beforeafter { margin: 32px 0; display: flex; flex-direction: column; gap: 20px; }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba-shot { position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--line); background: var(--stone); }
.ba-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-tag { position: absolute; left: 10px; top: 10px; background: rgba(35,25,15,.82); color: #fff; font: 700 10px var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; }
.ba-tag.ba-after { background: var(--bronze); }
@media (max-width: 560px) { .ba-pair { grid-template-columns: 1fr; } }

/* "What we supplied" chips on a project + the check-grid in the editor. */
.used-on { margin: 34px 0 0; }
.used-on h3 { font-family: var(--f-disp); font-weight: 700; font-size: 16px; margin: 0 0 12px; }
.used-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.used-chip { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; font-weight: 600; font-size: 14px; }
.used-chip:hover { border-color: var(--bronze); color: var(--bronze-d); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.check-grid legend { grid-column: 1 / -1; }

/* Project testimonial pull-quote. */
.project-quote { margin: 34px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--bronze); max-width: 720px; }
.project-quote p { font-family: var(--f-disp); font-weight: 600; font-size: 22px; line-height: 1.4; color: var(--ink); margin: 0 0 10px; }
.project-quote cite { font-style: normal; font-weight: 600; color: var(--mut); font-size: 14px; }

.article-videos { margin: 32px 0; display: flex; flex-direction: column; gap: 18px; }
.video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.content-body p { margin: 0 0 16px; line-height: 1.68; color: var(--ink); }
.content-body p:last-child { margin-bottom: 0; }
.content-h { font-family: var(--f-disp); font-weight: 700; letter-spacing: -.01em; }
h2.content-h { font-size: 23px; margin: 38px 0 12px; }
h3.content-h { font-size: 17px; margin: 26px 0 8px; }
.content-body > .content-h:first-child { margin-top: 0; }
.article-back { margin-top: 40px; font-weight: 600; }
.post-cta { margin-top: 32px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.pager a { font-weight: 700; color: var(--bronze); }
.pager-n { color: var(--mut); font-size: 14px; }
.related-guides { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.related-guides h3 { font-family: var(--f-disp); font-size: 20px; margin: 0 0 14px; }
.related-guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.related-guides a { font-weight: 600; }
.article-category { font-weight: 600; }

/* ---- Vendor Data Request Kit (unlisted internal guide) — uses the site tokens so it matches ---- */
.vk { max-width: 920px; }
.vk-block { margin-top: 40px; }
.vk-block:first-child { margin-top: 0; }
.vk h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(20px, 2.6vw, 26px); }
.vk-no { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font: 800 15px var(--f-disp); color: var(--bronze); border: 1.5px solid var(--bronze); border-radius: 50%; }
.vk-sub { color: var(--mut); font-size: 15px; line-height: 1.55; max-width: 64ch; margin: 12px 0 18px; }
.vk-tablewrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
.vk-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.vk-table th { text-align: left; font: 700 11px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); padding: 14px; border-bottom: 1px solid var(--line); }
.vk-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.vk-table tr:last-child td { border-bottom: 0; }
.vk-fld { font-weight: 700; }
.vk-fld code, .vk-checks code, .vk-callout code { font: 12.5px ui-monospace, Menlo, Consolas, monospace; color: var(--bronze-d); background: #FBF8F1; border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
.vk-ex { color: var(--mut); font-style: italic; }
.vk-req { display: inline-block; font: 700 10.5px var(--f-body); letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 100px; color: var(--mut); border: 1px solid var(--line); white-space: nowrap; }
.vk-req.must { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.vk-req.nice { color: var(--bronze-d); border-color: #E2CBAF; }
.vk-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vk-checks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.vk-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border: 2px solid var(--bronze); border-radius: 4px; }
.vk-checks li::after { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 9px; border: solid var(--bronze); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vk-callout { border-left: 3px solid var(--bronze); background: #FBF8F1; padding: 14px 16px; font-size: 14.5px; line-height: 1.55; margin-top: 16px; }
.vk-callout b { color: var(--bronze-d); }
.vk-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.vk-chip { font: 600 14px var(--f-body); background: #FBF8F1; border: 1px solid var(--line); padding: 9px 14px; border-radius: 100px; }
.vk-mail { white-space: pre-wrap; font: 13.5px/1.62 ui-monospace, Menlo, Consolas, monospace; background: #FBF8F1; border: 1px solid var(--line); padding: 20px 22px; margin: 0; overflow-x: auto; color: var(--ink); }
.vk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vk-card { background: #FBF8F1; border: 1px solid var(--line); padding: 20px; }
.vk-card h3 { font-size: 16px; margin-bottom: 6px; }
.vk-card p { color: var(--mut); font-size: 14px; line-height: 1.5; }
.vk-h3 { font-size: 16px; margin-bottom: 10px; }
.vk-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--mut); font-size: 13px; }
@media (max-width: 640px) { .vk-grid { grid-template-columns: 1fr; } }

/* Admin: per-tool explainer panel (what this is / how it works / AI note) */
.tool-help { background: #F3EEE1; border: 1px solid var(--line); border-left: 3px solid var(--bronze); padding: 14px 18px; margin: 0 0 24px; }
.tool-what { font-size: 15px; color: var(--ink); margin: 0; line-height: 1.5; }
.tool-more { margin-top: 8px; }
.tool-more > summary { cursor: pointer; font: 600 13px var(--f-body); color: var(--bronze-d); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.tool-more > summary::before { content: "›"; font-size: 16px; transition: transform .15s ease; }
.tool-more[open] > summary::before { transform: rotate(90deg); }
.tool-more > summary::-webkit-details-marker { display: none; }
.tool-more ul { margin: 12px 0 0; padding-left: 20px; }
.tool-more li { font-size: 14px; color: var(--mut); line-height: 1.55; margin-bottom: 7px; }
.tool-ai { font-size: 14px; color: var(--ink); line-height: 1.55; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.ai-badge { display: inline-block; font: 700 10px var(--f-body); letter-spacing: .1em; color: #fff; background: var(--bronze); padding: 2px 7px; vertical-align: middle; margin-right: 4px; }

/* Admin: import helper — copyable AI prompt + example */
.import-helper { margin-top: 16px; border: 1px solid var(--line); background: #F3EEE1; padding: 12px 16px; }
.import-helper > summary { cursor: pointer; font: 600 14px var(--f-body); color: var(--bronze-d); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.import-helper > summary::-webkit-details-marker { display: none; }
.import-helper .imp-cols { font-size: 14px; margin: 10px 0; }
.import-helper code { background: #fff; border: 1px solid var(--line); padding: 2px 6px; font-size: 13px; }
.copy-prompt { width: 100%; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; background: #fff; border: 1px solid var(--line); padding: 12px; resize: vertical; color: var(--ink); }
.copy-btn { margin-top: 10px; }
.imp-example { background: #fff; border: 1px solid var(--line); padding: 10px 12px; font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre; margin: 6px 0 0; }

/* Admin: city-page generator — plain intro, buttons, progress bar */
.lead-hint { color: var(--mut); font-size: 15px; line-height: 1.55; max-width: 70ch; margin: 6px 0 22px; }
.gen-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.gen-help { max-width: 70ch; line-height: 1.6; margin-top: 12px; }
.gen-progress { margin-top: 18px; }
.gen-bar-track { height: 10px; background: var(--line); overflow: hidden; }
.gen-bar { height: 100%; width: 0; background: var(--bronze); transition: width .2s ease; }
#gen-status { margin-top: 8px; }

/* Admin: tabs + small button */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); margin: 0 0 16px; }
.tabs a { padding: 9px 15px; font-weight: 600; font-size: 14px; color: var(--mut); border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.tabs a:hover { color: var(--bronze); }
.tabs a.on { color: var(--ink); background: #fff; border-color: var(--line); }
.btn.small { padding: 6px 12px; font-size: 13px; }

/* Admin: article tag picker + generator select-all */
.tag-picker { border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tag-picker legend { font-weight: 600; padding: 0 6px; }
.tag-picker .check { flex: 0 0 auto; margin: 4px 0; }
.check-all { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 6px; }

@media (max-width: 860px) {
  .contact-hero-grid, .contact-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ---- Mobile header fit: logo never wraps, burger to the far right, compact actions ---- */
@media (max-width: 640px) {
  .header .wrap { gap: 12px; height: 60px; }
  .logo { font-size: 17px; white-space: nowrap; }
  .nav-burger { order: 5; margin-left: 6px; width: 38px; height: 38px; }
  .contact-form-card { padding: 22px 20px 24px; }
}

/* Image checklist (admin) */
.imgchk-guide ul { margin: 6px 0 4px; padding-left: 18px; }
.imgchk-guide li { margin: 4px 0; }
.imgchk-overall { margin: 14px 0 22px; }
.imgchk-bar { height: 10px; border-radius: 6px; background: var(--girder, #23282E); overflow: hidden; }
.imgchk-bar span { display: block; height: 100%; background: var(--accent, #FFB400); }
.imgchk-overall p { margin: 8px 0 0; }
.imgchk-group h2 .imgchk-count { float: right; font-size: .72em; font-weight: 700; color: var(--muted, #6b7076); }
.imgchk-list { list-style: none; margin: 10px 0 0; padding: 0; }
.imgchk-list li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(0,0,0,.06); }
.imgchk-list li:first-child { border-top: 0; }
.imgchk-list li .mark { flex: none; font-size: .9em; }
.imgchk-list li.done a { color: var(--muted, #6b7076); }
.imgchk-list li.todo a { font-weight: 700; }

/* ---- Spec book (client-facing / print presentation) ---- */
.specbook { max-width: 1100px; }
.sb-cover { border-bottom: 2px solid var(--ink); padding-bottom: 22px; margin-bottom: 30px; }
.sb-brand { font: 700 11px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-d); margin: 0 0 10px; }
.sb-cover h1 { font-family: var(--f-disp); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; margin: 0 0 8px; }
.sb-for { color: var(--mut); margin: 0; font-size: 15px; }
.sb-intro { margin: 14px 0 0; max-width: 66ch; color: var(--ink); line-height: 1.6; }
.sb-section { margin: 30px 0; }
.sb-section h2 { display: flex; align-items: baseline; gap: 12px; font-family: var(--f-disp); font-size: 20px; border-bottom: 1px solid var(--line); padding-bottom: 9px; margin: 0 0 18px; }
.sb-h2-name { display: inline-flex; align-items: center; gap: 8px; }
.sb-section h2 .sb-subtotal { margin-left: auto; font-size: 15px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.sb-card { border: 1px solid var(--line); background: #fff; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; break-inside: avoid; }
.sb-card-media img, .sb-card-noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sb-card-noimg { background: repeating-linear-gradient(45deg, #efece6, #efece6 10px, #e8e4dc 10px, #e8e4dc 20px); }
.sb-card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 5px; }
.sb-card-body h4 { font-size: 15.5px; margin: 0; line-height: 1.25; }
.sb-cfg { font-size: 12.5px; color: var(--mut); margin: 0; }
.sb-cfg span { font-weight: 700; color: var(--ink); }
.sb-spec { font-size: 13px; color: var(--mut); margin: 0; line-height: 1.45; }
.sb-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13.5px; margin: 5px 0 0; padding-top: 9px; border-top: 1px solid var(--line); }
.sb-qty { color: var(--mut); }
.sb-price { font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; }
.sb-price.muted { font-weight: 700; color: var(--bronze-d); }
.sb-src a { font-size: 13px; font-weight: 700; }
.sb-foot { margin-top: 30px; }
.sb-grand { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; background: #F7EEEA; border: 1px solid var(--bronze); border-radius: 6px; padding: 16px 20px; font-size: 16px; margin: 0 0 8px; }
.sb-grand strong { font-family: var(--f-disp); font-size: 24px; font-variant-numeric: tabular-nums; color: var(--bronze-d); }
.sb-toolbar { margin: 4px 0 18px; }
.sb-decision { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.sb-decision h3 { margin: 0 0 4px; }
.sb-sec-row { margin: 5px 0; }
.sb-sec-row.done { color: #1f7a3d; font-weight: 600; }
.sb-sec-row.wait { color: var(--mut); }
.sb-badge { display: inline-block; font: 700 10px var(--f-body); letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; vertical-align: middle; margin-left: 4px; }
.sb-badge.ordered { background: #1f7a3d; color: #fff; }
.sb-badge.ready { background: var(--accent, #FFB400); color: #241c08; }
.sb-badge.pricing { background: #e7e2d6; color: #7a6a3e; }
.sb-badge.open { background: #ece7dd; color: #8a8272; }
.sb-pm { margin: 8px 0; }

/* ---- Spec-book builder (admin) ---- */
.sb-sec { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 16px 18px; margin: 16px 0; }
.sb-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.sb-sec-name { font-weight: 700; font-size: 16px; min-width: 220px; }
.sb-sec-name-static { font-weight: 700; }
.sb-sec-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-line { border-top: 1px solid var(--line); padding: 12px 0; }
.sb-line-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px 12px; }
.sb-line-grid label.wide { grid-column: 1 / -1; }
.sb-line-actions { margin-top: 8px; }
.sb-line-ops { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.sb-add { margin-top: 12px; }
.sb-add summary { cursor: pointer; font-weight: 700; color: var(--bronze-d, #7a5a2e); }
.sb-add-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.sb-add-form { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); padding: 12px; }
.sb-add-h { font-weight: 700; margin: 0 0 2px; }
.sb-add-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sb-results { margin-top: 12px; }
.sb-thumb { width: 46px; height: 46px; object-fit: cover; border: 1px solid var(--line); }
@media (max-width: 700px) { .sb-add-body { grid-template-columns: 1fr; } }

/* Print: show only the spec book, drop all site/app chrome. */
@media print {
  body * { visibility: hidden !important; }
  .specbook, .specbook * { visibility: visible !important; }
  .specbook { position: absolute; left: 0; top: 0; width: 100%; max-width: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sb-card, .sb-section { break-inside: avoid; }
  .sb-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Client Project Home */
.proj-rollup { font-size: 15px; margin: 6px 0 22px; color: var(--mut); }
.proj-rollup strong { color: var(--ink); }
.proj-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.fp-list { display: flex; flex-direction: column; gap: 14px; }
.fp-card { border: 1px solid var(--line); background: #fff; padding: 16px 20px 15px; border-radius: 6px; }
.fp-name { font-weight: 700; font-size: 15.5px; margin-bottom: 16px; }
/* Connected progress rail: a line through the dots, filled up to the current stage. */
.fp-bar { list-style: none; display: flex; margin: 0 0 12px; padding: 0 4px; }
.fp-bar li { flex: 1 1 0; text-align: center; font-size: 11px; color: var(--mut); position: relative; padding-top: 24px; }
.fp-bar li:not(:last-child)::after { content: ''; position: absolute; top: 9px; left: 50%; width: 100%; height: 3px; background: #e2dccf; }
.fp-bar li.done:not(:last-child)::after { background: var(--accent); }
.fp-bar li::before { content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: #d8d2c6; border: 2px solid #fff; box-shadow: 0 0 0 1px #d8d2c6; z-index: 1; }
.fp-bar li.done::before, .fp-bar li.now::before { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fp-bar li.now::before { width: 16px; height: 16px; box-shadow: 0 0 0 4px rgba(168, 67, 42, .18); }
.fp-bar li.now { color: var(--ink); font-weight: 700; }
.fp-status { font-size: 13.5px; color: var(--mut); }
.fp-status a { font-weight: 700; }
.pill { display: inline-block; font: 700 11px var(--f-body); letter-spacing: .03em; padding: 2px 9px; border-radius: 100px; background: var(--stone); color: var(--ink); }
.pill.ok { background: #F0DCD5; color: var(--bronze-d); }

/* Field-level help marker: a small ⓘ with a tooltip, shown on hover or tap/focus. */
.tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; cursor: help; }
.tip-i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--mut); color: #fff; font: italic 700 10px/1 var(--f-body); }
.tip-box { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 250px; background: var(--ink); color: #fff; font: 400 12px/1.45 var(--f-body); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; padding: 8px 10px; border-radius: 6px; box-shadow: 0 8px 22px rgba(36,27,18,.24); opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 60; pointer-events: none; }
.tip-box::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); }
.tip:hover .tip-box, .tip:focus .tip-box, .tip:focus-within .tip-box { opacity: 1; visibility: visible; }
th .tip-i { background: var(--mut); }

/* "Where we serve" city directory — internal links to every published /trade/city page. */
.city-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 26px 30px; margin-top: 10px; }
.city-col h3 { font-family: var(--f-disp); font-size: 17px; margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.city-col ul { list-style: none; margin: 0; padding: 0; }
.city-col a { display: block; padding: 4px 0; font-size: 14px; color: var(--ink); }
.city-col a:hover { color: var(--bronze); }
@media (max-width: 560px) { .fp-bar li { font-size: 9.5px; padding-top: 22px; } .fp-card { padding: 14px; } }

/* Uploaded brand logo (falls back to the text wordmark when none is set) */
.logo-img { display: block; height: 44px; width: auto; max-width: 340px; }
.logo:has(.logo-img) { margin-right: 20px; }   /* give the logo room; nav shifts over */
.p-brand .logo-img { height: 30px; max-width: 190px; }
.footer .logo-img { height: 32px; max-width: 220px; }
@media (max-width: 640px) { .logo-img { height: 34px; max-width: 200px; } }

/* ============================================================================
   Phase 2 — real home page, rebuilt to match the approved mockup/JAA-HOME.html.
   Every rule below is scoped under .jaa-home so it can't leak onto (or be leaked
   onto by) any other page's .hero / .section / .panel / .step / .build etc. —
   this page's sections have a different shape than the generic CMS ones shared
   by the other marketing pages.
   ============================================================================ */
.jaa-home .home-hero { position: relative; background: var(--girder); color: #fff; overflow: hidden; }
.jaa-home .home-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: grayscale(.2) contrast(1.05); }
.jaa-home .home-hero .hero-grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,25,28,.92) 0%, rgba(23,25,28,.75) 45%, rgba(23,25,28,.35) 100%); }
.jaa-home .home-hero .wrap { position: relative; padding: 96px clamp(20px, 4vw, 72px) 92px; }
.jaa-home .home-hero .eyebrow { font: 600 13px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--hivis); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.jaa-home .home-hero .eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--hivis); }
.jaa-home .home-hero h1 { font-size: clamp(40px, 6.2vw, 76px); font-weight: 900; max-width: 16ch; margin-bottom: 22px; color: #fff; }
.jaa-home .home-hero h1 .accent { color: var(--hivis); }
.jaa-home .home-hero .lede { font-size: 20px; color: #D3D6DA; max-width: 52ch; margin-bottom: 36px; }
.jaa-home .home-hero .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.jaa-home .home-hero .hero-stats { position: relative; display: flex; gap: 0; flex-wrap: wrap; border-top: 1px solid var(--line-dark); margin-top: 60px; }
.jaa-home .home-hero .hero-stats .stat { padding: 22px 34px 22px 0; margin-right: 34px; border-right: 1px solid var(--line-dark); }
.jaa-home .home-hero .hero-stats .stat:last-child { border-right: 0; }
.jaa-home .home-hero .hero-stats .n { font-family: var(--f-disp); font-weight: 800; font-size: 34px; color: #fff; line-height: 1; }
.jaa-home .home-hero .hero-stats .l { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-light); margin-top: 8px; }

/* Section scaffold reused by What We Do / How We Build / What We Build */
.jaa-home .hsection { padding: 88px 0; scroll-margin-top: 90px; }
/* Thin variant for a detail page's back-link-only band (market/trade pages with no extra body copy —
   the factual one-liner already lives in the hero lede). Keeps the page from reading as unfinished. */
.jaa-home .hsection.tight { padding: 28px 0; }
.jaa-home .hsection-head { max-width: 70ch; margin-bottom: 52px; }
.jaa-home .hsection-head .kick { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hivis-deep); margin-bottom: 16px; }
.jaa-home .hsection-head h2 { font-size: clamp(30px, 4vw, 46px); }
.jaa-home .hsection-head p { font-size: 18px; color: var(--steel); margin-top: 16px; }

/* Company statement band */
.jaa-home .intro { background: var(--girder); color: #fff; }
.jaa-home .intro .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding: 72px clamp(20px, 4vw, 72px); }
.jaa-home .intro h2 { font-size: clamp(28px, 3.4vw, 42px); max-width: 20ch; color: #fff; }
.jaa-home .intro h2 .accent { color: var(--hivis); }
.jaa-home .intro p { color: #C4C8CC; font-size: 17px; margin-top: 20px; max-width: 48ch; }
.jaa-home .intro .glance { border: 2px solid var(--line-dark); padding: 26px; }
.jaa-home .intro .glance .k { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-light); }
.jaa-home .intro .glance dl { margin-top: 14px; display: grid; gap: 14px; }
.jaa-home .intro .glance dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-light); }
.jaa-home .intro .glance dd { font-family: var(--f-disp); font-weight: 700; font-size: 18px; color: #fff; margin-top: 2px; }

/* What we do */
.jaa-home .wwd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.jaa-home .hpanel { background: var(--surface); border: 1px solid var(--line); padding: 34px; }
.jaa-home .hpanel > .kick { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-bottom: 6px; }
.jaa-home .hpanel > h3 { font-size: 26px; margin-bottom: 22px; }
.jaa-home .svc { display: grid; gap: 2px; }
.jaa-home .svc a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); font-weight: 600; font-size: 16px; color: var(--ink); }
.jaa-home .svc a:hover { color: var(--hivis-deep); }
.jaa-home .svc a .arw { color: var(--hivis-deep); font-weight: 700; }
.jaa-home .trades { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.jaa-home .trades .t { display: flex; gap: 11px; align-items: baseline; padding: 13px 4px; border-top: 1px solid var(--line); }
.jaa-home .trades .t .dot { width: 7px; height: 7px; background: var(--hivis); flex: none; transform: translateY(-2px); }
.jaa-home .trades .t .nm { font-weight: 600; font-size: 15px; color: var(--ink); }
.jaa-home .hpanel.dark { background: var(--girder); color: #fff; border-color: var(--girder); }
.jaa-home .hpanel.dark > .kick { color: var(--hivis); }
.jaa-home .hpanel.dark .trades .t { border-color: var(--line-dark); }
.jaa-home .hpanel.dark .trades .t .nm { color: #fff; }

/* How we build (real sequence) */
.jaa-home .hwb { background: var(--concrete-2); }
.jaa-home .hwb-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 3px solid var(--girder); }
.jaa-home .hwb-step { padding: 26px 20px 30px; border-right: 1px solid var(--line); }
.jaa-home .hwb-step:last-child { border-right: 0; }
.jaa-home .hwb-step .no { font-family: var(--f-disp); font-weight: 800; font-size: 15px; color: var(--hivis-deep); margin-bottom: 14px; }
.jaa-home .hwb-step h4 { font-family: var(--f-disp); font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.jaa-home .hwb-step p { font-size: 13.5px; color: var(--steel); margin: 0; }

/* What we build — markets */
.jaa-home .markets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.jaa-home .mkt { position: relative; aspect-ratio: 4/3.1; overflow: hidden; background: var(--girder); display: block; }
.jaa-home .mkt img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: .3s; }
.jaa-home .mkt:hover img { opacity: .5; transform: scale(1.04); }
.jaa-home .mkt .cap { position: absolute; left: 0; bottom: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(23,25,28,.85)); color: #fff; }
.jaa-home .mkt .cap .k { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hivis); }
.jaa-home .mkt .cap h4 { font-family: var(--f-disp); font-weight: 700; font-size: 21px; margin-top: 4px; color: #fff; }

/* Home "Where we build" locations teaser (Phase 8a). */
.jaa-home .locations-teaser { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.jaa-home .locations-teaser h2 { font-size: clamp(24px, 2.8vw, 34px); max-width: 30ch; }
.jaa-home .locations-teaser p { color: var(--steel); margin-top: 10px; max-width: 60ch; }

/* CTA band */
.jaa-home .ctaband { background: var(--hivis); }
.jaa-home .ctaband .wrap { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 52px clamp(20px, 4vw, 72px); flex-wrap: wrap; }
.jaa-home .ctaband h2 { font-size: clamp(26px, 3.2vw, 40px); color: var(--girder); max-width: 20ch; }
.jaa-home .ctaband p { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b5200; margin-top: 8px; }

/* ---- Phase 3: reusable INNER-PAGE hero — smaller than the home hero, same charcoal/hi-vis
   language, shared by About, What We Do, What We Build and every /services, /trades,
   /what-we-build detail page. Add `.has-photo` for a market's photo behind the gradient. ---- */
.jaa-home .inner-hero { position: relative; background: var(--girder); color: #fff; overflow: hidden; }
.jaa-home .inner-hero .wrap { position: relative; padding: 64px clamp(20px, 4vw, 72px) 56px; }
.jaa-home .inner-hero .eyebrow { font: 600 13px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--hivis); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.jaa-home .inner-hero .eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--hivis); }
.jaa-home .inner-hero h1 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 900; max-width: 22ch; margin-bottom: 16px; color: #fff; }
.jaa-home .inner-hero .lede { font-size: 18px; color: #D3D6DA; max-width: 60ch; margin: 0; }
.jaa-home .inner-hero .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.jaa-home .inner-hero.has-photo .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: grayscale(.2) contrast(1.05); }
.jaa-home .inner-hero.has-photo .hero-grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,25,28,.92) 0%, rgba(23,25,28,.75) 45%, rgba(23,25,28,.35) 100%); }

/* Back-to-hub link, used at the top of every detail page's content section. */
.jaa-home .back-link { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--f-body); color: var(--hivis-deep); margin-bottom: 24px; }
.jaa-home .back-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .jaa-home .intro .wrap, .jaa-home .wwd-grid { grid-template-columns: 1fr; }
  .jaa-home .hwb-steps { grid-template-columns: repeat(2, 1fr); }
  .jaa-home .hwb-step { border-bottom: 1px solid var(--line); }
  .jaa-home .markets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .jaa-home .markets, .jaa-home .trades { grid-template-columns: 1fr; }
  .jaa-home .home-hero .hero-stats .stat { padding-right: 20px; margin-right: 20px; }
  .jaa-home .inner-hero .wrap { padding: 48px 20px 40px; }
}