/* ===== 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 {
  /* Builder-interiors palette (R1 "Wide / Spec") — warm brick on kraft, bold sans */
  --paper:   #EFE8D9;
  --ink:     #241B12;
  --stone:   #E7DECB;
  --line:    #DCD0B8;
  --mut:     #7C6E58;
  --bronze:  #A8432A;   /* brick accent (name kept so every component recolors for free) */
  --bronze-d:#87321E;
  --char:    #23190F;   /* deep espresso — promo bar + admin sidebar */
  --accent-dark: #D98A5E;   /* warm terracotta — the brick accent, lightened to read on dark chrome */
  --sage:    #4E5A4C;
  --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 — repointed to sans (R1: 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) */
  --bg: var(--paper);
  --surface: #ffffff;
  --steel: var(--mut);
  --accent: var(--bronze);
  --girder: var(--char);
  --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; }
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: 700; 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 */

/* ---- Promo bar + header ---- */
.promo { background: var(--char); color: #EDE7DA; font: 600 12.5px var(--f-body); text-align: center; padding: 9px 12px; }
.promo b { color: var(--accent-dark); }
.header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.header .wrap { display: flex; align-items: center; gap: 26px; height: 78px; position: relative; }
.logo { font-family: var(--f-disp); font-weight: 800; font-size: 21px; letter-spacing: -.01em; margin-right: 8px; }
.logo b { color: var(--bronze); }
/* Hairline divider sets the brand apart from the nav (spec look) — clear separation, not just a wider gap. */
.mainnav { display: flex; align-items: stretch; align-self: stretch; gap: 26px; font-weight: 600; font-size: 14.5px; padding-left: 34px; border-left: 1px solid var(--line); }
.mainnav a:hover { color: var(--bronze); }
/* 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; align-items: center; gap: 18px; font-weight: 600; font-size: 14px; }
.hicons a:hover { color: var(--bronze); }
/* The one styled CTA in the header — the trade application is the site's conversion goal,
   so it dresses as a button while Catalog / Log in stay quiet text. */
.hicons .hi-apply { background: var(--bronze); color: #fff; padding: 9px 15px; font-weight: 700; font-size: 13px; }
.hicons .hi-apply:hover { background: var(--bronze-d); color: #fff; }

/* ---- 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(--ink); color: #CFC7B8; padding: 54px 0 34px; font-size: 14px; }
.footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 30px; }
.footer .logo { color: #fff; }
.footer .logo b { color: var(--accent-dark); }
.footer .blurb { color: #8C8474; margin-top: 12px; max-width: 30ch; }
.footer h4 { font: 700 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #8C8474; margin: 0 0 14px; }
.footer a { display: block; padding: 5px 0; color: #CFC7B8; }
.footer a:hover { color: #fff; }
.footer .base { border-top: 1px solid #34302A; margin-top: 34px; padding-top: 20px; color: #8C8474; 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: #8C8474; }
.footer .legal-links a:hover { color: #fff; }

/* ---- 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,
.spotlight .sp-media .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); }
.btn.bronze, .btn-accent { background: var(--bronze); color: #fff; }
.btn.bronze:hover, .btn-accent:hover { background: var(--bronze-d); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.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); }
/* Every hero: ONE strong medium (video / slideshow / image) fills the hero's media column. */
.hero-media { min-width: 0; }
.hero-media .img { height: min(468px, 52vw); }

/* ---- Cinematic hero: any hero that carries media goes full-bleed — the video / slideshow /
   image fills the entire section behind the copy, with a gradient for legibility. Browsers
   without :has() keep the split layout above (progressive enhancement). ---- */
.hero:has(.hero-media) { position: relative; padding: 0; overflow: hidden; background: #140d08; }
.hero:has(.hero-media) .grid { grid-template-columns: 1fr; gap: 0; min-height: min(560px, 74vh); align-items: center; }
.hero:has(.hero-media) .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero:has(.hero-media) .hero-media .img { height: 100%; }
.hero:has(.hero-media) .hero-media .hv-frame { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
/* Scrim only where the copy needs it — the media side stays honest so footage actually shows. */
.hero:has(.hero-media)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(20,13,8,.85) 0%, rgba(20,13,8,.52) 38%, rgba(20,13,8,.08) 68%, rgba(20,13,8,0) 100%),
              linear-gradient(0deg, rgba(20,13,8,.35), transparent 32%); }
/* .wrap and .grid are the same element here — it must stay unpositioned so the absolute
   media anchors to the full-bleed .hero, while the copy block itself lifts above it. The copy
   box passes clicks through its empty regions (only its actual content is interactive), so it
   can never sit invisibly on top of the video's Watch button again. */
.hero:has(.hero-media) .grid > div:first-child { position: relative; z-index: 2; padding: 92px 0 76px; max-width: 660px; pointer-events: none; }
.hero:has(.hero-media) .grid > div:first-child a,
.hero:has(.hero-media) .grid > div:first-child button { pointer-events: auto; }
.hero:has(.hero-media) h1 { color: #fff; }
.hero:has(.hero-media) .eyebrow { color: var(--accent-dark); }
.hero:has(.hero-media) p:not(.eyebrow) { color: rgba(255, 255, 255, .88); }
.hero:has(.hero-media) .btn.ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.hero:has(.hero-media) .btn.ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero:has(.hero-media) .stats { border-top-color: rgba(255, 255, 255, .25); }
.hero:has(.hero-media) .stat b { color: #fff; }
.hero:has(.hero-media) .stat span { color: rgba(255, 255, 255, .65); }
@media (prefers-reduced-motion: no-preference) {
  /* Slow drift on the single hero image — the "expensive" feel. Slides keep their own
     crossfade animation and videos move on their own, so only the still image drifts. */
  .hero:has(.hero-media) .hero-media .img:not(.slides) > img { animation: hero-drift 26s ease-in-out infinite alternate; }
}
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ---- Motion polish: sections ease in as they enter the viewport (site.js adds .reveal to
   candidates and .in when visible — no JS or reduced-motion means everything just shows). ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.in { opacity: 1; transform: none; }
  .pcard, .value, .spotlight { transition: transform .22s ease, box-shadow .22s ease; }
  .pcard:hover, .spotlight:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(36, 27, 18, .12); }
}

/* 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; }

/* Hero video frame — muted, autoplaying, looping, rendered inside the hero media box. */
.hv-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); background: #140d08; }
.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 Hero media section). ONE rule covers every video container site-wide. */
.hv-frame::after { content: ""; position: absolute; inset: 0;
  z-index: 1; pointer-events: none; background: rgba(20,13,8, var(--hvov, .15)); }

/* Labeled watch affordance on every ambient video — a deliberate control docked bottom-right,
   never a floating circle. Hidden without JS (the button would be dead); assets/site.js stamps
   .js on <html> and moves the video into the sound-on lightbox on click. */
.vid-watch { display: none; }
.js .vid-watch { position: absolute; right: 22px; bottom: 20px; z-index: 2; display: inline-flex;
  align-items: center; gap: 9px; font: 700 12px var(--f-mono); letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: rgba(20,13,8,.55);
  border: 1px solid rgba(255,255,255,.45); padding: 10px 16px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease; }
.js .vid-watch:hover { background: rgba(20,13,8,.82); border-color: #fff; }
.vid-watch svg { width: 12px; height: 12px; fill: currentColor; }
.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; }

/* 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 (fit, not fill: 5 children make 5 columns on wide, wrap cleanly below) ---- */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 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); }
.value > .img, .value > a.img { height: 150px; margin-bottom: 12px; }
.value > a.img { display: block; }

/* ---- Line-page spotlight: one product pitched large, clearly a call to action ---- */
.spotlight { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; background: #fff;
  border: 1px solid var(--line); margin: 18px 0 26px; }
.spotlight .sp-media { display: block; min-width: 0; }
.spotlight .sp-media .img { height: 100%; min-height: 300px; }
.spotlight .sp-body { padding: 30px 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.spotlight .sp-body .eyebrow { margin: 0; }
.spotlight .dept { font: 700 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.spotlight h3 { margin: 0; font-size: 26px; line-height: 1.15; }
.spotlight h3 a { color: var(--ink); text-decoration: none; }
.spotlight .sp-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mut); }
.spotlight .price { font-family: var(--f-disp); font-size: 24px; font-variant-numeric: tabular-nums; }
.spotlight .trade { font: 700 11px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--bronze); }
.spotlight .cta { margin-top: auto; padding-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight .sp-media .img { min-height: 220px; }
}

/* ---- 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%;
  min-width: 0; /* a long <option> must never widen the field past its grid/flex column */
  max-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; }
/* The hidden attribute always wins — display rules on label/div/etc must not resurrect
   markup the page asked to hide (bit the import form's New-vendor field). */
[hidden] { display: none !important; }
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; }
.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 ---- */
/* Tablet AND phone: below 1080px the full nav no longer fits honestly (crammed links, wrapped
   labels, hover megas on touch), so the burger takes over for the whole tablet range. */
@media (max-width: 1080px) {
  .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; }
  /* Burger docks at the FAR RIGHT: order it after the .hspace flex spacer (which otherwise
     swallows the free space and leaves the burger stranded next to the logo). */
  .nav-burger { display: block; order: 5; }
  /* 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; }
  .mainnav a.nav-mobile-only { display: block; height: auto; font-weight: 700; }
  .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 {
  .promo, .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; } }

/* 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; min-width: 0; }
.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; }

/* ---- 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; } }

/* ---- Quote-builder catalog drawer (staff-only) ---- */
.qp-backdrop { position: fixed; inset: 0; background: rgba(20,13,8,.45); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.qp-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1080px, 78vw); background: #fff;
  z-index: 91; box-shadow: -18px 0 40px rgba(36,27,18,.18); display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .22s ease; }
body.qp-open .qp-backdrop { opacity: 1; pointer-events: auto; }
body.qp-open .qp-drawer { transform: translateX(0); }
body.qp-open { overflow: hidden; }
.qp-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.qp-head strong { font-family: var(--f-disp); font-size: 18px; }
.qp-count { color: var(--bronze); font-weight: 700; font-size: 13px; }
.qp-target { margin-left: auto; font-size: 13px; color: var(--mut); display: flex; align-items: center; gap: 8px; }
.qp-target select { width: auto; }
.qp-close { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); padding: 4px 8px; }
.qp-body { overflow-y: auto; padding: 16px 18px; flex: 1; }
.qp-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.qp-filters input[name=q] { width: 200px; }
.qp-filters select { width: auto; }
.qp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.qp-card { border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
.qp-card .img { aspect-ratio: 4/3; }
.qp-b { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.qp-b .dept { font: 700 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
.qp-b .name { font-weight: 700; font-size: 14px; line-height: 1.25; }
.qp-b .sku { font: 11px var(--f-mono); color: var(--mut); }
.qp-prices { font-size: 12.5px; }
.qp-cost { color: var(--mut); }
.qp-b select { font-size: 13px; }
.qp-row { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.qp-row .qty-input { width: 56px; }
.qp-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px; }