/* ===== Storefront design system =====
   The modern design tokens (mockup/modern/README.md) in :root; every color and size derives from
   them. The older token names (admin, account, table and form CSS is written against them) stay as
   aliases pointed at the new palette, so those pages recolor with no call-site change. */
:root {
  /* Canonical tokens: white, two stone greys, ink (deep slate green) with a body and a caption
     shade, one accent teal and two sands for slab placeholders. No other accent. */
  --white:     #FFFFFF;
  --grey:      #ECEDEA;
  --grey-2:    #DDDFDA;
  --ink:       #1F2A24;
  --ink-2:     #4A5650;   /* body copy on white */
  --mute:      #646C66;   /* captions (4.5:1 or better on white and on --grey, ruling V2-R25) */
  --teal:      #2F6F73;   /* the one accent */
  --teal-deep: #245659;   /* hover */
  --sand:      #D9CFC0;
  --sand-2:    #C9BBA8;

  --f: 'Manrope', system-ui, 'Segoe UI', sans-serif;
  --f-disp: var(--f);
  --f-body: var(--f);
  --f-mono: var(--f);    /* label/data alias: sans, no typewriter anywhere */
  --wrap: 1280px;
  --pad: clamp(20px, 4vw, 56px);   /* the side pad of every .wrap and full-width band */
  --r: 14px;                       /* tiles */
  --r-lg: 18px;                    /* panels */
  --r-xl: 22px;                    /* boxes */

  /* Legacy aliases (older admin/account/form/table classes reference these names). Every one
     points at a token above; none carries a color of its own except the two ink shades used for
     rules and panels on dark chrome. */
  --hivis:       var(--teal);
  --hivis-deep:  var(--teal-deep);
  --hivis-bright:var(--sand);       /* the accent for TEXT on dark ink panels */
  --girder:      var(--ink);
  --girder-2:    #2A3630;           /* ink, one step lighter (panels on ink) */
  --steel:       var(--ink-2);
  --concrete:    var(--white);
  --concrete-2:  var(--grey);
  --surface:     var(--white);
  --line:        var(--grey-2);
  --accent-warm: var(--teal);
  --paper:   var(--concrete);
  --stone:   var(--concrete-2);
  --mut:     var(--steel);
  --char:    var(--girder);
  --accent-dark: var(--hivis-bright);
  --sage:    var(--ink-2);
}

* { box-sizing: border-box; }
/* Guard: never allow a horizontal scroll on any device. `clip` blocks sideways
   overflow without creating a scroll container (so sticky/position stay intact). */
html { overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: full-height flex column so main grows and the footer stays at the bottom. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  max-width: 100%;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--f-disp); font-weight: 800; margin: 0; letter-spacing: -.02em; }
/* Display headings set tight; without this they inherit body's 1.6 and multi-line titles gap apart.
   Rules that need a different value (.hero h1, .split h2, .article-card h3...) still override it. */
h1, h2 { line-height: 1.08; }
h3 { line-height: 1.25; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--f-mono); }
/* A small label over a heading: sentence case, never all caps (the modern design). */
.eyebrow { font: 700 14px/1.4 var(--f-body); color: var(--teal); margin: 0 0 10px; }

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

/* ---- Top bar + header (the modern chrome) ----
   A quiet grey top bar on desktop (service line, phone, hours, reviews, log in), then the sticky
   white header with the blur: wordmark, nav, phone, the estimate pill. Below 1000px the top bar
   hides, the nav folds into the burger and the header row is wordmark + estimate pill + burger. */
.topbar { background: var(--grey); color: var(--ink-2); font: 500 13.5px/1.4 var(--f-body); border-bottom: 1px solid var(--grey-2); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 38px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.topbar b { font-weight: 700; color: var(--ink); }
.topbar .wrap > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.topbar .sep { display: none; }
.topbar .tb-nw { white-space: nowrap; }
.tb-link { color: var(--ink); font-weight: 700; }
.tb-link:hover { color: var(--teal); }
.header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--grey-2); }
.header .wrap { display: flex; align-items: center; gap: 28px; height: 72px; flex-wrap: nowrap; position: relative; }
.logo { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; color: var(--ink); }
.logo b { color: var(--teal); }
.mark-chip { display: block; width: 22px; height: 22px; border-radius: 6px; flex: none; background: linear-gradient(135deg, var(--sand) 0%, var(--sand-2) 55%, var(--grey-2) 100%); }
.wordmark { font: 800 20px/1.1 var(--f-body); letter-spacing: -.02em; white-space: nowrap; }
.header .logo-img { height: 32px; width: auto; max-width: 240px; flex: none; }
.mainnav { display: flex; align-items: stretch; align-self: stretch; gap: 24px; margin-left: 4px; font-weight: 500; font-size: 15.5px; color: var(--ink-2); flex-wrap: nowrap; }
.mainnav a { white-space: nowrap; }
.mainnav a:hover { color: var(--ink); }
.mainnav > .nav-top, .nav-item > .nav-top { display: inline-flex; align-items: center; height: 100%; position: relative; }
.mainnav a.active, .mainnav .nav-top.is-current { color: var(--ink); box-shadow: inset 0 -2px 0 var(--teal); }
/* Only inside the burger menu (the phone, log in). a.nav-mobile-only (0,2,1) beats .mainnav > .nav-top. */
.mainnav a.nav-mobile-only { display: none; }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 18px; flex: none; }
.hdr-tel { font-weight: 700; font-size: 15.5px; white-space: nowrap; color: var(--ink); }
.hdr-tel:hover { color: var(--teal); }
.header .header-cta { padding: 11px 18px; font-size: 15px; white-space: nowrap; }
/* Mega menu: a white panel under the header, bounded to the header width, opened on hover AND
   keyboard focus (:focus-within), flattened into the burger list below 1000px, plain links with
   no JS at all. */
.nav-item { display: flex; align-items: center; }
.mega { position: absolute; left: var(--pad); right: var(--pad); top: calc(100% + 8px); background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r-lg); padding: 28px 32px 30px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 40; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; }  /* hover bridge over the gap */
.nav-item:hover > .mega, .nav-item:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }
.mega-in { display: block; margin: 0 auto; }
/* ONE shared grid for every panel: link column(s) on the left, the feature card on the right, the
   whole row sized to its content and centered. */
.mega-grid { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: start; justify-content: center; gap: 48px; }
.mega-col { display: flex; flex-direction: column; min-width: 190px; }
.mega-colh { font: 700 13px/1.4 var(--f-body); color: var(--mute); margin: 0 0 10px; }
.mega-l { display: block; padding: 6px 0; font: 500 15px/1.3 var(--f-body); color: var(--ink-2); white-space: normal; }
.mega-l:hover { color: var(--ink); }
.mega-l-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.mega-more { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--teal); }
.mega-more:hover { color: var(--teal-deep); }
.mega-feature { width: 280px; min-height: 210px; background: var(--grey); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.mega-feature-eyebrow { font: 700 13px/1.4 var(--f-body); color: var(--teal); }
.mega-feature-h { font: 800 19px/1.2 var(--f-body); letter-spacing: -.01em; color: var(--ink); margin: 0; }
.mega-feature p { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 0; flex: 1; }
.mega-feature .btn { margin-top: auto; }
.mega-feature .mega-more { text-align: center; }
.mega-feature-media { margin: -24px -24px 4px; overflow: hidden; }
.mega-mcards { display: grid; grid-template-columns: repeat(2, 172px); gap: 16px 18px; }
.mega-mcards.mega-mcards-4 { grid-template-columns: repeat(4, 150px); }
.mega-mcard { display: block; }
.mega-mcard-img { display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--grey); }
.mega-mcard-img img { width: 100%; height: 100%; object-fit: cover; }
.mega-mcard-ph { display: block; width: 100%; height: 100%; background: linear-gradient(160deg, var(--sand), var(--sand-2)); }
.mega-mcard-t { display: block; margin-top: 8px; font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--ink); white-space: normal; }
.mega-mcard:hover .mega-mcard-t { color: var(--teal); }
/* Burger (no-JS checkbox): hidden on desktop, shown below 1000px. */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav-burger { display: none; width: 44px; height: 44px; flex: none; border: 1.5px solid var(--grey-2); border-radius: 10px; background: #fff; cursor: pointer; position: relative; margin: 0; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after { position: absolute; left: 11.5px; width: 18px; height: 2px; background: var(--ink); transition: transform .15s ease, background .15s ease; }
.nav-burger span { top: 20px; }
.nav-burger span::before { content: ""; left: 0; top: -6px; }
.nav-burger span::after { content: ""; left: 0; top: 6px; }
.nav-toggle:checked ~ .hdr-right .nav-burger span { background: transparent; }
.nav-toggle:checked ~ .hdr-right .nav-burger span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle:checked ~ .hdr-right .nav-burger span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle:focus-visible ~ .hdr-right .nav-burger-nojs { outline: 3px solid var(--teal); outline-offset: 3px; }
/* Two burgers share the checkbox: the <button> (site.js drives it, keeps aria-expanded) when JS
   runs, the <label> without JS. Exactly one shows. */
button.nav-burger { padding: 0; font: inherit; }
button.nav-burger:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.js .nav-burger-nojs, html:not(.js) .nav-burger-js { display: none; }
@media (max-width: 1180px) { .hdr-tel { display: none; } .mainnav { gap: 20px; } .header .wrap { gap: 22px; } }
@media (max-width: 1000px) {
  .topbar { display: none; }
  .nav-burger { display: block; }
  .mainnav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; align-self: auto; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--grey-2); padding: 4px 0 12px; z-index: 30; max-height: calc(100vh - 64px); overflow-y: auto; font-size: 16px; color: var(--ink); }
  .nav-toggle:checked ~ .mainnav { display: flex; }
  .mainnav a { padding: 13px var(--pad); border-top: 1px solid var(--grey-2); }
  .mainnav a.nav-mobile-only { display: block; font-weight: 700; }
  .mainnav a.active, .mainnav .nav-top.is-current { box-shadow: none; }
  .nav-item { display: block; }
  .nav-item > .nav-top { display: block; height: auto; font-weight: 700; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; border: 0; border-radius: 0; background: none; padding: 0; }
  .mega::before { display: none; }
  .mega-in { padding: 0; margin: 0; }
  .mega-grid { display: block; }
  .mega-col, .mega-mcards-col { min-width: 0; }
  .mega-l-grid { display: block; }
  .mega-colh { margin: 14px var(--pad) 2px calc(var(--pad) + 16px); }
  .mega-l, .mega-more { display: block; padding: 11px var(--pad) 11px calc(var(--pad) + 16px); border-top: 1px solid var(--grey-2); font-size: 16px; font-weight: 500; color: var(--ink); margin: 0; }
  .mega-more { font-weight: 700; color: var(--teal); text-align: left; }
  .mega-mcards { display: block; }
  .mega-mcard { display: flex; align-items: center; gap: 12px; padding: 11px var(--pad) 11px calc(var(--pad) + 16px); border-top: 1px solid var(--grey-2); }
  .mega-mcard-img { width: 46px; height: 34px; flex: none; }
  .mega-mcard-t { margin-top: 0; }
  .mega-feature { display: none; }
}
@media (max-width: 560px) {
  .header .wrap { gap: 10px; height: 64px; }
  .wordmark { font-size: 17px; white-space: normal; }
  .logo { gap: 8px; }
  .mark-chip { width: 20px; height: 20px; }
  .hdr-right { gap: 8px; }
  .header .header-cta { padding: 9px 14px; font-size: 14px; }
  .header .logo-img { height: 28px; max-width: 140px; }
}
@media (max-width: 400px) { .header .mark-chip { display: none; } }

/* ---- 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 13px var(--f-body); color: var(--mute); white-space: nowrap; }
.footer.footer-bare { background: transparent; color: var(--mute); padding: 0; margin-top: 44px; border: 0; }
.footer.footer-bare .base { border-top: 1px solid var(--grey-2); margin-top: 0; padding: 18px 0; color: var(--mute); font-size: 13px; }

/* ---- Footer (the modern four columns) ---- */
.footer { background: var(--white); color: var(--ink-2); border-top: 1px solid var(--grey-2); padding: 48px 0 32px; font-size: 15px; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer .logo { margin: 0; }
.footer .logo-img { height: 32px; max-width: 220px; }
.footer .blurb { margin: 12px 0 0; max-width: 34ch; line-height: 1.6; }
.ftr-h { font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.footer .cols a { display: block; padding: 3px 0; }
.footer .cols a:hover { color: var(--ink); }
.footer .base { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--grey-2); font-size: 13.5px; color: var(--mute); }
.footer .legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer .legal-links a { color: var(--mute); }
.footer .legal-links a:hover { color: var(--ink); }
/* Newsletter signup: footer box, posts to /newsletter, fires newsletter_subscribed. */
.nl { display: flex; gap: 8px; margin-top: 18px; max-width: 340px; }
.nl input { flex: 1; min-width: 0; height: 44px; border: 1.5px solid var(--grey-2); border-radius: 999px; padding: 0 16px; background: #fff; color: var(--ink); font: 400 15px var(--f-body); }
.nl input::placeholder { color: var(--mute); }
.nl input:focus { border-color: var(--teal); }
.nl input:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.nl button { height: 44px; border-radius: 999px; background: var(--ink); color: #fff; border: 0; font: 700 15px var(--f-body); padding: 0 20px; cursor: pointer; }
.nl button:hover { background: var(--teal); }
.nl-msg { margin-top: 10px; font-size: 13.5px; }
.nl-msg.ok { color: var(--teal); }
.nl-msg.error { color: #b3261e; }
@media (max-width: 1000px) { .footer .cols { grid-template-columns: 1fr 1fr; } .footer .ftr-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer .cols { gap: 28px 20px; } .footer .base { margin-top: 32px; } }

/* ---- 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(--teal); }
.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(--teal); margin-top: 5px; }
.rail-more { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--teal-deep); }
.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(--teal); }
.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; }
.img .tag { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(31,42,36,.82); color: #fff; 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; }

/* ---- Media slot: an operator-pasted image URL, or a clean captioned placeholder when blank
   (Phase 9b, lib/media.php media_slot()). Used on every service/market/city/article image
   slot so an unset image looks intentional, never broken. ---- */
.media-slot { position: relative; overflow: hidden; background: var(--concrete-2); display: block; }
.media-slot.cover { position: absolute; inset: 0; }
.media-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-slot.ph { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--line); }
.media-slot.ph .ph-cap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; text-align: center; }
.media-slot.ph .ph-ic { width: 26px; height: 26px; stroke: var(--hivis-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.media-slot.ph .ph-txt { font: 600 12.5px/1.4 var(--f-body); color: var(--steel); max-width: 22ch; }
/* On a dark full-bleed hero band the placeholder is a plain charcoal panel (matches the no-photo
   hero this replaces) instead of a light dashed box. */
.media-slot.hero-img.ph { border: none; background: var(--girder); }
.media-slot.hero-img.ph .ph-ic { stroke: var(--hivis); opacity: .55; }
.media-slot.hero-img.ph .ph-txt { color: rgba(255,255,255,.55); }

/* ---- Buttons: pills ----
   .btn-teal (the main action), .btn-ink (dark), .btn-line (outline on a slab or on ink), .btn-out
   (outline on white). Admin buttons keep their own look: .p-content .btn below sets its own shape,
   and the admin .btn.ghost is the quiet kind there. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: #fff; text-align: center;
  border: 1.5px solid transparent; border-radius: 999px;
  font: 700 15.5px/1.25 var(--f-body); padding: 13px 24px; cursor: pointer;
}
.btn:hover { background: var(--girder-2); color: #fff; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-deep); color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--girder-2); color: #fff; }
.btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-line:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-out { background: #fff; color: var(--ink); border-color: var(--grey-2); }
.btn-out:hover { background: #fff; color: var(--ink); border-color: var(--ink); }

button.btn { font-family: var(--f-body); }
:where(button, [role="button"], a.btn, input[type="submit"]):focus-visible { outline: 2px solid var(--hivis); outline-offset: 2px; }

/* ============================================================================
   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 — teal fill, the one main action of a view. Legacy .btn-accent maps here. */
.p-content .btn.primary {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.p-content .btn.primary:hover {
  background: var(--teal-deep); border-color: var(--teal-deep); color: #fff;
}
/* quiet: borderless muted text; inline and row actions. .ghost (ui_btn kind, the import helper's
   Copy prompt) is the same control. */
.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; }
/* Admin material filter row (templates/admin/stones.php). Admin only: the public filter rows use
   the .chips/.chip pills. */
.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(--teal); color: var(--teal); }
.tag-chip.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.tag-chip .n { color: var(--mut); font-weight: 400; margin-left: 3px; }
.tag-chip.active .n { color: rgba(255,255,255,.72); }

/* ============================================================================
   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; }
.stone-thumb { width: 44px; height: 33px; object-fit: cover; border-radius: 2px; }
.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; }
}

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


/* ---- Solutions / capability cards ---- */

.solcard { border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
.solcard:hover { border-color: var(--teal); }
.solcard .img { aspect-ratio: 16/9; }
.solcard .body { padding: 18px 20px 20px; }
.solcard h3 { font-size: 21px; margin: 0 0 6px; }

.solcard p { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; }

/* ---- Capability "how we deliver" pipeline ---- */
.lede { font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 760px; margin: 0 0 26px; }

/* ---- Value strip ---- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.value svg { width: 30px; height: 30px; stroke: var(--accent-warm, var(--teal)); 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); }

/* ---- Product detail ---- */

/* 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-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; background: transparent; }
.spec-table th { text-align: left; font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 8px 28px 8px 0; border-bottom: 1px solid var(--line); width: 1%; white-space: nowrap; }
.spec-table td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line); }

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

.error { background: #fff; border: 1px solid var(--ink); padding: 11px 15px; font-weight: 600; }
.hint { color: var(--mut); font-size: 13px; }

/* ---- Tables + admin/account (recolored via tokens) ---- */
h1 { font-size: 30px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th { text-align: left; font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
th, td { padding: 13px 18px; border-bottom: 1px solid var(--line); }
.admin-block { margin: 30px 0; }
.admin-block h2 { font-size: 20px; margin: 0 0 14px; }
fieldset { border: 1px solid var(--line); padding: 12px 15px 14px; margin: 14px 0; background: #fff; }
legend { font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 0 6px; }
fieldset label.check { display: inline-block; margin: 5px 18px 5px 0; }
.area-pick { margin-top: 8px; max-height: 220px; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 8px; }
.area-pick label.check { display: inline-block; width: 220px; margin: 4px 0; }
.topic-pick label.check { display: block; width: auto; }
.topic-pick label.check-written { opacity: .55; }

.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(--teal); background: var(--grey); }
.status-banner .eyebrow { margin-bottom: 4px; }
.msg-body { white-space: pre-wrap; }

/* ---- Responsive ---- */
@media (max-width: 900px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }

@media print {
  .topbar, .header, .footer { 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(--teal); }
.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(--teal); }
.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(--teal); outline-offset: 2px; }
label.cms-field-hit { border-radius: 3px; box-shadow: 0 0 0 3px rgba(47,111,115,.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(--teal); outline-offset: -2px; }
.img-badge { position: absolute; left: 0; bottom: 0; right: 0; background: rgba(47,111,115,.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(31,42,36,.78); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.img-x:hover { background: var(--teal-deep); }

/* 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(--teal); 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(--teal); }
.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); }

/* City page internal-link mesh. */

.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(--teal-deep); }

/* 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(--teal-deep); font-style: normal; }

/* Leads dashboard: source bars + funnel. */
.lead-bar-cell { width: 40%; }
.lead-bar { display: inline-block; height: 10px; background: var(--teal); border-radius: 5px; min-width: 2px; }

/* Public FAQ accordion (modern design, lib/faqs.php: a .sec-block with a .sec-head): the question
   in bold, a round plus that turns to a minus when open, thin rules between questions. */
.faq-list { max-width: 900px; border-top: 1px solid var(--grey-2); }
.faq-item { border-bottom: 1px solid var(--grey-2); }
.faq-item summary { cursor: pointer; list-style: none; padding: 22px 0; font-family: var(--f-body);
  font-weight: 700; font-size: 18.5px; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(var(--ink), var(--ink)) center/12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center/2px 12px no-repeat, var(--grey); }
.faq-item[open] summary::after { background: linear-gradient(#fff, #fff) center/12px 2px no-repeat, var(--ink); }
.faq-item summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.faq-a { padding: 0 48px 26px 0; line-height: 1.6; color: var(--ink-2); max-width: 72ch; }
@media (max-width: 560px) { .faq-item summary { font-size: 17px; } .faq-a { padding-right: 0; } }

/* "Choose from library" picker modal. */
.media-picker { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(31,42,36,.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(--teal); box-shadow: 0 0 0 2px rgba(47,111,115,.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; } }

/* ---- 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(--teal); }
.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(--teal); text-decoration: underline; }
.cms-imgfield { border-radius: 8px; transition: outline-color .12s; }
.cms-imgfield.dragover { outline: 2px dashed var(--teal); outline-offset: 6px; }

/* ---- Empty state ---- */
.empty { border: 1.5px dashed var(--grey-2); border-radius: var(--r-xl); padding: 48px 40px; }
.empty h3 { font: 800 24px/1.2 var(--f-body); letter-spacing: -.01em; margin: 0; }
.empty p { color: var(--ink-2); max-width: 60ch; margin: 10px 0 0; line-height: 1.6; }
.empty a { font-weight: 700; color: var(--teal); }

/* ---- Consistent card hover: subtle lift + brick border ---- */
.solcard, .stat-card { transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.solcard:hover, .stat-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31,42,36,.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; }

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

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

/* ---- Contact page: form card + reach panel + offices band ---- */


/* The inline file-size message (estimate). */
.field-error { display: block; margin-top: 4px; color: #b3261e; font-size: 13px; font-weight: 600; }
.field-error[hidden] { display: none; }
.stack-form > .check-row { margin: 14px 0 4px; font-weight: 400; }
/* Where to pick your slab (material pages, Settings > Slab yards). */
.slab-yards p { color: var(--mut); margin: 0 0 12px; }
.yard-list .yard-city { color: var(--mut); font-size: 14px; }

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

/* ---- Articles hub + single article ---- */
.article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 22px; }
.article-card { background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r); overflow: hidden; padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 11px; transition: border-color .16s ease; }
.article-card:hover { border-color: var(--ink); }
.article-card h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.article-card:hover h3 { color: var(--teal); }
.a-excerpt { color: var(--ink-2); font-size: 15px; line-height: 1.5; flex: 1; }
.a-more { font: 700 14.5px var(--f-body); color: var(--teal); }
.a-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.a-tag { font: 600 12.5px/1.3 var(--f-body); color: var(--ink-2); border: 1px solid var(--grey-2); border-radius: 999px; padding: 3px 10px; }
a.a-tag:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.content-body { max-width: 720px; }

/* ---- Editorial post layout (articles + project write-ups) ---- */
.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: 500 14.5px/1.4 var(--f-body); color: var(--mut); }
.a-place { font: 600 13.5px var(--f-body); color: var(--mute); }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* Project facts strip (case-study proof). */
.post-facts { margin: 48px 0 0; }
.pf-scope { font-size: 19px; line-height: 1.55; color: var(--ink); max-width: 62ch; 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(--grey-2); }
.pf-item dt { font: 600 13px var(--f-body); color: var(--mute); margin: 0 0 4px; }
.pf-item dd { margin: 0; font: 700 18px/1.35 var(--f-body); color: var(--ink); }

/* Featured hero — wider than the reading column, so the image gets room to breathe. */
/* The featured image in the reading column (media_slot(), Phase 9b): the aspect-ratio box sets the
   height, so the <img>/placeholder inside fills it instead of sizing intrinsically. */
.post-hero { margin: 48px 0 0; }
.post-hero img { width: 100%; height: auto; max-height: 540px; object-fit: cover; display: block; border-radius: var(--r); }
.post-hero .media-slot { border-radius: var(--r); overflow: hidden; }
.post-hero .media-slot img { height: 100%; max-height: none; }
.post-body { padding-bottom: 8px; }
/* The opening paragraph reads as a lead-in. */
.content-body.lead > p:first-of-type { font-size: 19px; line-height: 1.6; color: var(--ink); }

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

/* 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(31,42,36,.82); color: #fff; font: 600 12px var(--f-body); padding: 4px 8px; border-radius: 6px; }
.ba-tag.ba-after { background: var(--teal); }
@media (max-width: 560px) { .ba-pair { grid-template-columns: 1fr; } }

/* Project testimonial pull-quote. */
.project-quote { margin: 34px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--teal); 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: 8px; }
.post-cta { margin-top: 40px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--grey-2); }
.pager-n { color: var(--mute); font-size: 14.5px; font-weight: 600; }
.related-guides { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--grey-2); }
.related-guides h3 { font: 800 20px/1.25 var(--f-body); letter-spacing: -.01em; margin: 0 0 14px; }
.related-guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.related-guides a { font-weight: 600; color: var(--teal); }
.related-guides a:hover { color: var(--teal-deep); }
.article-category { font-weight: 600; }

/* ---- Vendor Data Request Kit (unlisted internal guide) — uses the site tokens so it matches ---- */

/* Admin: per-tool explainer panel (what this is / how it works / AI note) */
.tool-help { background: var(--grey); border: 1px solid var(--line); border-left: 3px solid var(--teal); 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(--teal-deep); 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(--teal); 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: var(--grey); padding: 12px 16px; }
.import-helper > summary { cursor: pointer; font: 600 14px var(--f-body); color: var(--teal-deep); 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 */

.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(--teal); 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(--teal); }
.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; }

/* ---- Spec-book builder (admin) ---- */
.sb-sec { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 16px 18px; margin: 16px 0; }

.sb-line { border-top: 1px solid var(--line); padding: 12px 0; }

.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: var(--grey); color: var(--teal-deep); }

/* 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(31,42,36,.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); }

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

/* ============================================================================
   Phase 9c: premium visual sections + polish. Page rail, answer box, trust band, areas hub,
   article layout and the mobile sticky CTA. Global, so they render on any page.
   ============================================================================ */

/* ---- Page rail (lib/premium.php page_rail_html()): body beside a sticky offer card on material,
   application and city pages; on a phone the card drops above the body. ---- */
.page-main { min-width: 0; }
.page-lead-media { margin: 0 0 32px; }

.page-rail { position: sticky; top: 96px; }
.rail-card .btn { justify-content: center; text-align: center; }

/* ---- Answer box: the two-sentence answer under the H1 on material, application and service pages ---- */
.answer-box { border: 1px solid var(--line); background: var(--surface); padding: 18px 22px; max-width: 72ch; }
.answer-box p { margin: 0; font-size: 17px; line-height: 1.6; }

/* ---- Trust band (lib/premium.php trust_band_html()) ---- */
.trust-band { background: var(--concrete-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 30px clamp(20px, 4vw, 72px); }
.tb-item { display: flex; align-items: center; gap: 14px; }
.tb-ic { width: 28px; height: 28px; flex: 0 0 auto; stroke: var(--hivis-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tb-item span { font: 700 14px var(--f-body); color: var(--ink); line-height: 1.3; }
.tb-grid.tb-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) { .tb-grid, .tb-grid.tb-5 { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; } }
@media (max-width: 480px) { .tb-grid, .tb-grid.tb-5 { grid-template-columns: 1fr; } }

/* ---- Areas hub (lib/premium.php areas_directory_html()): a jump row of county chips, then one
   block per county (id="county-{slug}"), the Austin area last (id="austin-area"). ---- */
/* The jump row is the global .chips row (every chip outlined, the Austin jump too: ruling V2-R17);
   the county blocks are ruled columns. */
.chips.areas-jump { margin: 0 0 40px; }
.areas-county { padding: 32px 0; border-top: 1px solid var(--grey-2); scroll-margin-top: 96px; }
.areas-county h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.areas-n { font: 500 14px var(--f-body); color: var(--mute); letter-spacing: 0; }
.areas-list { list-style: none; margin: 0; padding: 0; columns: 4 170px; column-gap: 32px; }
.areas-list li { margin: 0 0 10px; break-inside: avoid; }
.areas-list a { font-size: 15.5px; color: var(--ink-2); }
.areas-list li.t1 a { font-weight: 700; color: var(--ink); }
.areas-list a:hover { color: var(--teal); }
.areas-note { color: var(--ink-2); margin: 0 0 22px; max-width: 66ch; }
.areas-note a { font-weight: 700; color: var(--teal); }
.areas-note a:hover { color: var(--teal-deep); }
.areas-sub { margin: 0 0 22px; }
.areas-sub h3 { font: 800 17px/1.3 var(--f-body); letter-spacing: -.01em; margin: 0 0 12px; }

/* ---- Area page link boxes (templates/area.php): materials, kitchens and baths, nearby, each a
   heading and a .chips row (mockup/modern/katy.html "Near Katy") ---- */
.area-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; margin: 72px 0 0; }
.area-links-box h2 { font: 800 clamp(24px, 2.2vw, 30px)/1.1 var(--f-body); letter-spacing: -.02em; margin: 0; }
@media (max-width: 560px) { .area-links { gap: 44px; margin-top: 56px; } }

/* ---- Article layout upgrade (templates/content-single.php) ---- */
.post-breadcrumb { padding: 22px 0 0; font: 600 12.5px var(--f-body); letter-spacing: .02em; color: var(--mut); }
.post-breadcrumb a { color: var(--mut); }
.post-breadcrumb a:hover { color: var(--teal-deep); }
.post-breadcrumb .bc-sep { color: var(--line); }
.post-breadcrumb [aria-current] { color: var(--ink); font-weight: 700; }
/* Every hero that is not an article head (tools, lead pages, hubs, About, legal) puts the breadcrumb
   straight inside its .wrap (no inner .wrap): lay the trail out the same way and give it room above
   the eyebrow. On the dark inner hero the trail goes light. */

.post-byline, .post-readtime { font: 500 14.5px/1.4 var(--f-body); color: var(--mut); }
.post-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--grey-2); }
.post-share .share-label { font: 700 15px var(--f-body); color: var(--ink); margin-right: 4px; }
.post-share a, .post-share button.share-copy { font: 600 15px var(--f-body); color: var(--teal); background: none; border: 0; padding: 0; cursor: pointer; }
.post-share a:hover, .post-share button.share-copy:hover { color: var(--teal-deep); }
.post-share button.share-copy.copied { color: var(--ink); }

/* ---- Mobile sticky CTA (templates/layout.php mobile_sticky_cta_html()): mobile only; body gets
   matching bottom padding so the bar never covers the footer/last section. ---- */
.mobile-sticky-cta { display: none; }
@media (max-width: 640px) {
  body.has-sticky-cta { padding-bottom: 64px; }
  .mobile-sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 64px;
    background: #fff; border-top: 1px solid var(--grey-2);
  }
  .mobile-sticky-cta .msc-call {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--ink); font: 700 14px var(--f-body);
  }
  .mobile-sticky-cta .msc-call svg { width: 17px; height: 17px; fill: var(--teal); flex: 0 0 auto; }
  .mobile-sticky-cta .msc-quote {
    flex: 0 0 auto; margin: 8px 12px 8px 0; padding: 0 20px;
    display: flex; align-items: center; font-size: 14px;
  }
  /* The phone header already carries the estimate button; the bar only shows when it can offer a call too. */
  .mobile-sticky-cta.msc-nophone { display: none; }
  body.has-sticky-cta:has(.msc-nophone) { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .mobile-sticky-cta, .mobile-sticky-cta * { transition: none !important; } }

/* ---- Legal pages (terms / privacy) ---- */
.legal-sec { padding: 48px 0 80px; }
.legal-body { max-width: 72ch; }
.legal-body h2 { font: 800 clamp(22px, 2.2vw, 26px)/1.2 var(--f-body); letter-spacing: -.01em; margin: 40px 0 0; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 14px 0 0; line-height: 1.65; color: var(--ink); }
.legal-body a { color: var(--teal); font-weight: 600; }
.legal-note { font-size: 14.5px; color: var(--mute); border-top: 1px solid var(--grey-2); padding-top: 18px; margin-top: 32px; }

/* ---- Mobile fixes (Boris feedback 07-22) ---- */

/* When the burger menu is open, hide the fixed bottom CTA bar so it never overlaps the menu. */
@media (max-width: 1000px) {
  html:has(#cs-navtoggle:checked) .mobile-sticky-cta { display: none; }
  /* Fallback for browsers without :has(): give the open menu room to clear the bar. */
  .nav-toggle:checked ~ .mainnav { padding-bottom: 76px; }
}

/* ============================================================================
   Phase 11d: trust/credibility layer - the testimonials section (lib/testimonials.php
   testimonials_section_html()). Global, so it can render on any page.
   ============================================================================ */

/* ---- Testimonials ---- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.testi-card { position: relative; background: var(--grey); border-radius: var(--r); padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.testi-card blockquote { margin: 0; }
.testi-card blockquote p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.testi-card figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.testi-card .tc-name { font-weight: 700; color: var(--ink); }
.testi-card .tc-role { color: var(--ink-2); }
.testi-card .testi-tag { align-self: flex-start; order: -1; font: 600 12.5px/1.3 var(--f-body); color: var(--ink-2); background: #fff; border-radius: 999px; padding: 3px 10px; }

/* ---- Resources: Tool cards + Pre-Construction Readiness Checklist tool (Phase 12) ------------- */
.tool-card { position: relative; }
.tool-tag { align-self: flex-start; font: 600 12.5px/1.3 var(--f-body); color: #fff; background: var(--teal); padding: 3px 10px; border-radius: 999px; }

.rc { max-width: 880px; }
.rc-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 0 0 24px; position: sticky; top: 72px; z-index: 5; background: rgba(255,255,255,.94); padding: 16px 0; border-bottom: 1px solid var(--grey-2); }
.rc-progress { flex: 1; min-width: 220px; }
.rc-progress-track { position: relative; height: 10px; background: var(--grey); border-radius: 999px; overflow: hidden; }
.rc-progress-fill { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width .22s ease; }
.rc-progress-label { margin: 8px 0 0; font: 700 15px var(--f-body); color: var(--ink); }
.rc-actions { display: flex; gap: 10px; }
.rc-btn { font-size: 14.5px; padding: 10px 18px; }

.rc-groups { display: flex; flex-direction: column; gap: 16px; }
.rc-group { border: 1px solid var(--grey-2); border-radius: var(--r-lg); background: #fff; padding: 24px 26px 10px; margin: 0; min-width: 0; }
.rc-group-h { float: left; width: 100%; font: 800 21px/1.25 var(--f-body); letter-spacing: -.01em; text-transform: none; color: var(--ink); padding: 0; margin: 0; }
.rc-group-h + * { clear: both; }
.rc-group-note { padding-top: 6px; margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
.rc-items { list-style: none; margin: 0; padding: 0; }
.rc-item { border-top: 1px solid var(--grey-2); }
.rc-item:first-child { border-top: 0; }
.rc-item label { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 14px 2px; cursor: pointer; font-weight: 400; }
.rc-item input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc-check { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid var(--mute); border-radius: 6px; background: #fff; transition: background .12s ease, border-color .12s ease; position: relative; }
.rc-item input:checked + .rc-check { background: var(--teal); border-color: var(--teal); }
.rc-item input:checked + .rc-check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(43deg); }
.rc-item input:focus-visible + .rc-check { outline: 3px solid var(--teal); outline-offset: 2px; }
.rc-item-text { font-size: 16px; line-height: 1.55; color: var(--ink); }
.rc-item-text strong { font-weight: 700; }
.rc-item input:checked ~ .rc-item-text { color: var(--mute); }

.rc-cta { margin: 24px 0 0; padding: 32px; border-radius: var(--r-xl); background: var(--grey); }
.rc-cta .rc-cta-note { margin: 0 0 18px; font: 700 19px/1.45 var(--f-body); color: var(--ink); max-width: 52ch; }
.rc-cta p { margin: 0; }
.rc-cta .rc-cta-sub { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }
.rc-cta-sub a { font-weight: 700; color: var(--teal); }

@media (max-width: 640px) {
  .rc-toolbar { position: static; }
  .rc-actions { width: 100%; }
  .rc-btn { flex: 1; }
  .rc-group { padding: 20px 18px 6px; }
  .rc-cta { padding: 24px 20px; }
}

/* ---- Countertop Square Footage Estimator (/tools/square-footage-estimator) ---- */
.sq { max-width: 880px; }
.sq-how { max-width: 66ch; color: var(--ink-2); font-size: 17px; line-height: 1.6; margin: 0 0 24px; }
.sq-panel { border: 1px solid var(--grey-2); border-radius: var(--r-lg); padding: 24px 26px 26px; }
.sq-rows { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.sq-rows th { white-space: nowrap; text-align: left; font: 600 13px var(--f-body); letter-spacing: 0; text-transform: none; background: none; border: 0; color: var(--ink-2); padding: 0 10px 8px 0; }
.sq-rows td { padding: 0 10px 10px 0; vertical-align: middle; font-weight: 700; }
.sq-rows td:last-child { white-space: nowrap; padding-right: 0; }
.sq-rows input { width: 100%; height: 46px; border: 1.5px solid var(--grey-2); border-radius: 10px; padding: 0 12px; font: 400 15px var(--f-body); color: var(--ink); }
.sq-rows input:focus, .sq-opt input:focus, .sq-opt select:focus { border-color: var(--teal); }
.sq-rows input:focus-visible, .sq-opt input:focus-visible, .sq-opt select:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.sq-rows .btn { padding: 10px 16px; font-size: 14.5px; }
.sq-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--grey-2); }
.sq-bs { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; margin: 0; min-height: 46px; }
.sq-bs input[type="checkbox"] { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--teal); }
.sq-opt { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0; }
.sq-opt input, .sq-opt select { height: 46px; border: 1.5px solid var(--grey-2); border-radius: 10px; padding: 0 12px; font: 400 15px var(--f-body); color: var(--ink); }
.sq-opt input { width: 120px; }
.sq-opt select { width: auto; }
.sq-result { background: var(--grey); border-radius: var(--r-lg); padding: 26px 28px; margin-top: 16px; }
.sq-result p { margin: 0 0 10px; font-size: 17px; color: var(--ink-2); }
.sq-result p strong { font-weight: 800; color: var(--ink); }
.sq-result p:last-of-type { margin-bottom: 0; }
.sq-result .btn { margin-top: 20px; }
.sq-note { margin: 18px 0 0; max-width: 66ch; color: var(--mute); font-size: 14.5px; }

@media (max-width: 640px) {
  .sq-panel { padding: 18px 16px 20px; }
  .sq-rows, .sq-rows tbody, .sq-rows tr, .sq-rows td, .sq-rows th { display: block; width: 100%; }
  .sq-rows thead { display: none; }
  .sq-rows tr { border: 1px solid var(--grey-2); border-radius: var(--r); margin-bottom: 12px; padding: 12px 14px; }
  .sq-rows td { border-bottom: 0; padding: 6px 0; }
  .sq-rows td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 600 13px var(--f-body); color: var(--ink-2); }
  .sq-result { padding: 22px 20px; }
  .sq-result .btn { width: 100%; }
}

/* Print: strip the site chrome and toolbar buttons, keep the checklist clean and legible on paper. */
@media print {
  .topbar, .header, .footer, .mobile-sticky-cta, .rc-actions, .rc-cta [class*="btn"], .post-breadcrumb { display: none !important; }
  body { background: #fff; color: #000; }
  .tool2 .ghead { padding: 0 0 14px; }
  .tool-sec { padding: 0 !important; }
  .rc-toolbar { position: static; border-bottom: 1.5px solid #000; }
  .rc-group, .rc-cta { border: 1px solid #999; break-inside: avoid; page-break-inside: avoid; }
  .rc-check { border-color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rc-item input:checked + .rc-check { background: #000; }
  .rc-progress-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href]::after { content: ""; }
}

/* ============================================================================
   Phase 13: gold-plating polish. Consistent button micro-interactions and a site-wide
   article print sheet (the per-section scroll-reveal is gone: ruling V2-R21).
   Every value derives from the existing tokens; no new colors, no motion that
   ignores the user's reduced-motion preference.
   ============================================================================ */

/* ---- Consistent button micro-interactions ----
   Buttons get a smooth transition and a subtle press. Cards do not lift (the modern design).
   Focus-visible rings come from the global :focus-visible rule. */
.btn, button { transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease; }
.btn:active, button:active { transform: translateY(1px); }

.mega-mcard-img { transition: box-shadow .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .btn, button { transform: none !important; }
}

/* ---- Site-wide article / content print sheet ----
   Complements the minimal print rule near the top of this file and the specialised
   checklist/spec-book sheets. Strips interactive chrome, prints black on white with
   sensible margins, and surfaces external link URLs inside article body copy only
   (scoped so it never overrides the checklist sheet's URL suppression). */
@media print {
  .topbar, .header, .footer, .mobile-sticky-cta, .post-share, .post-breadcrumb, .post-see-also, .sect-link, .nav-mobile-only { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 12pt; }
  @page { margin: 18mm 16mm; }
  a { color: #000 !important; text-decoration: underline; }
  .post2 .phero .slab, .post2 .page-rail { display: none !important; }
  .post2 .phero { min-height: 0; color: #000; background: none; }
  .post2 .mpage { display: block; margin-top: 0; }
  .post-hero .media-slot, .post-hero img, .article-card, .rc-group { box-shadow: none !important; }
  h1, h2, h3, h4, blockquote, figure, .rc-group, .article-card { break-inside: avoid; page-break-inside: avoid; }
  /* Print the real destination after external links in article/resource body copy. */
  .post-body .content-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #000; word-break: break-all; }
}

/* ============================================================================
   Modern design (stone-v2 Task 4): the home page (templates/home.php, .home2), the material page
   (templates/service.php, .mat2) and the shared pieces they are built from (lib/premium.php).
   Source: mockup/modern/style.css. Manrope only, 1280 wrap, pill buttons, 14px tiles, no card
   shadow except the hero estimate card, sections 72 to 80px apart, one motion moment (the home
   headline settles on load), reduced motion respected.
   ============================================================================ */
.slab-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tex { position: relative; overflow: hidden; }
.tex > svg, .tex > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.phtag { position: absolute; top: 14px; left: 16px; z-index: 2; font-size: 12px; font-weight: 500; line-height: 1.4; color: rgba(255,255,255,.92); background: rgba(31,42,36,.6); padding: 4px 8px; border-radius: 6px; }
.phtag.sm { top: 10px; left: 10px; font-size: 11px; padding: 3px 7px; }

/* ---- Chips: the one pill chip (filters, jump rows, link rows). A <ul class="chips"> works too.
   Public only: the admin status badges (<span class="chip"> inside .p-content) keep their plain
   admin look, so the base rule skips .p-content. :where() keeps the specificity at one class. ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips > li { margin: 0; }
.chip:where(:not(.p-content .chip)) { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--grey-2); background: #fff; font: 600 14.5px var(--f-body); color: var(--ink); white-space: nowrap; }
a.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- Sections ---- */
.sec-block { padding: 80px 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; margin-bottom: 34px; }
.sec-head .eyebrow { margin: 0 0 10px; }
.sec-head h2, .county-band h2, .cta-box h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.02em; }
.sec-head > p { color: var(--ink-2); max-width: 56ch; font-size: 17px; margin: 0; }
.go { display: inline-flex; margin-top: 24px; font-weight: 700; color: var(--teal); }
.go:hover { color: var(--teal-deep); }

/* ---- Home hero: the slab ---- */
.slab-hero { position: relative; min-height: min(820px, calc(100vh - 72px)); display: grid; align-items: end; color: #fff; overflow: hidden; background: #8f8779; }
.slab { position: absolute; inset: 0; }
.slab > svg, .slab > img, .slab > video { width: 100%; height: 100%; display: block; object-fit: cover; }
.slab-hero::after, .phero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.slab-hero::after { background: linear-gradient(180deg, rgba(31,42,36,.18) 0%, rgba(31,42,36,.42) 55%, rgba(31,42,36,.78) 100%); }
.slab-hero > .wrap { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 440px); gap: 48px; align-items: end; padding-top: 80px; padding-bottom: 64px; }
.slab-hero .eyebrow { color: rgba(255,255,255,.9); margin: 0 0 16px; }
.slab-hero h1 { font-size: clamp(44px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -.025em; max-width: 12ch; text-wrap: balance; color: #fff; animation: settle .7s .1s ease-out both; }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slab-hero h1 { animation: none; } }
.slab-hero .lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; max-width: 48ch; margin: 22px 0 0; color: rgba(255,255,255,.88); }
.slab-hero .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.slab-hero .acts .btn { padding: 15px 26px; font-size: 16px; }
/* The trust points as the hero's facts row (trust_band_html('', 'facts')). */
.trust-band.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; background: none; border: 0; }
.trust-band.facts .tb-item { display: flex; align-items: center; gap: 8px; }
.trust-band.facts .tb-item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); flex: none; }
.trust-band.facts .tb-item span { font: 500 14.5px/1.4 var(--f-body); color: rgba(255,255,255,.86); }

/* ---- The estimate card in the hero (the one shadow on the site) ---- */
.est-card { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: 26px 26px 22px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.est-h { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.est-card > p { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin: 6px 0 0; }
.est-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 18px; }
.est-form label { display: grid; gap: 6px; margin: 0; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.est-form input, .est-form select { height: 46px; width: 100%; min-width: 0; border: 1.5px solid var(--grey-2); border-radius: 10px; padding: 0 12px; font: 400 15px var(--f-body); color: var(--ink); background: #fff; }
.est-form textarea { width: 100%; min-width: 0; min-height: 130px; border: 1.5px solid var(--grey-2); border-radius: 10px; padding: 12px; font: 400 15px/1.5 var(--f-body); color: var(--ink); background: #fff; resize: vertical; }
.est-form input:focus, .est-form select:focus, .est-form textarea:focus { border-color: var(--teal); }
.est-form input::placeholder { color: var(--mute); }
.est-form .full { grid-column: 1 / -1; }
.est-form small { grid-column: 1 / -1; color: var(--mute); font-size: 12.5px; margin-top: -2px; }
.est-form .btn { width: 100%; }

/* ---- Materials rail ---- */
.mat-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.sw { display: grid; grid-template-rows: 150px 1fr; min-height: 300px; border-radius: var(--r); overflow: hidden; background: var(--grey); }
.sw .cap { padding: 16px 18px 18px; background: #fff; border: 1px solid var(--grey-2); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
.sw h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.sw .cap p { color: var(--ink-2); font-size: 14.5px; line-height: 1.45; margin: 4px 0 0; }
.sw:hover h3 { color: var(--teal); }

/* ---- The four steps ---- */
.process-sec { background: var(--grey); }
.process-sec .sec-head { margin-bottom: 0; }
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--grey-2); }
.steps li { position: relative; padding-top: 34px; }
.steps li::before { content: attr(data-n); position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.steps h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.steps p { color: var(--ink-2); font-size: 15.5px; margin: 8px 0 0; max-width: 30ch; }

/* ---- Applications: mixed-size tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; padding: 52px 18px 18px; border-radius: var(--r); overflow: hidden; background: var(--sand); color: #fff; }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(31,42,36,.05) 0%, rgba(31,42,36,.3) 45%, rgba(31,42,36,.8) 100%); }
.tile b { position: relative; z-index: 2; font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.25; }
.tile .ld { position: relative; z-index: 2; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.9); max-width: 46ch; }
.t-a { grid-column: span 3; grid-row: span 2; background: linear-gradient(160deg, #c9bda9, #a89b86); }
.t-b { grid-column: span 3; background: linear-gradient(160deg, #d9d6cf, #b8b5ad); }
.t-c { grid-column: span 3; background: linear-gradient(160deg, #9aa39d, #6e7772); }
.t-d { grid-column: span 2; background: linear-gradient(160deg, #cdbfae, #a08d76); }
.t-e { grid-column: span 2; background: linear-gradient(160deg, #e2e0da, #c2bfb6); }
.t-f { grid-column: span 2; background: linear-gradient(160deg, #5f6a66, #3f4844); }
.t-g { grid-column: span 6; background: linear-gradient(160deg, #c4c8c3, #9ea39d); }

/* ---- Stone strip ---- */
.home2 .stones-sec { padding-top: 0; }
.strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 0 var(--pad) 8px; margin: 0 calc(-1 * var(--pad)); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.stone-card { flex: 0 0 240px; scroll-snap-align: start; border-radius: var(--r); overflow: hidden; background: var(--grey); }
.stone-card .tex { height: 200px; }
.stone-card .cap { padding: 12px 14px 14px; background: #fff; border: 1px solid var(--grey-2); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
.stone-card h3 { font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.stone-card .cap span { display: block; color: var(--mute); font-size: 13.5px; margin-top: 2px; }
.stone-card:hover h3 { color: var(--teal); }
@media (min-width: 1001px) {
  .strip { margin: 0; padding: 0 0 8px; scroll-padding-inline: 0; }
  .strip .stone-card { flex: 0 0 calc((100% - 56px) / 5); }
}

/* ---- Areas: county columns on ink ---- */
.county-band { background: var(--ink); color: #fff; }
.county-band h2 { color: #fff; }
.county-band .eyebrow { color: var(--sand); margin: 0 0 10px; }
.county-band .lede { color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.6; max-width: 62ch; margin: 12px 0 0; }
.county-cols { columns: 4 180px; column-gap: 32px; margin: 36px 0 12px; font-size: 15.5px; }
.county-cols > div { break-inside: avoid; margin-bottom: 22px; }
.county-cols .ch { display: block; font-weight: 700; color: var(--sand); margin-bottom: 8px; }
.county-cols a { display: block; color: rgba(255,255,255,.86); padding: 3px 0; }
.county-cols a:hover, .county-cols a.ch:hover { color: #fff; }

/* ---- Closing CTA box (cta_band_html(), every page that ends with one) ---- */
.ctaband { padding: 80px 0; background: none; }
.cta-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; background: var(--grey); border-radius: var(--r-xl); padding: 40px; }
.cta-box h2 { color: var(--ink); }
.cta-box p { color: var(--ink-2); font-size: 17px; margin: 10px 0 0; max-width: 52ch; }
.cta-acts { display: flex; gap: 12px; flex-wrap: wrap; }
.faq-section + .ctaband { padding-top: 0; }

/* ---- Home: the articles teaser keeps its cards, restyled to the tiles ---- */
.home2 .articles-sec { padding-top: 0; }

/* ---- Material page: the slab at half height, the answer box over its edge ---- */
.phero { position: relative; display: flex; align-items: flex-end; min-height: min(460px, 56vh); color: #fff; overflow: hidden; background: #7d7262; }
.phero::after { background: linear-gradient(90deg, rgba(31,42,36,.42) 0%, rgba(31,42,36,.12) 60%, rgba(31,42,36,0) 100%), linear-gradient(180deg, rgba(31,42,36,.10) 0%, rgba(31,42,36,.28) 50%, rgba(31,42,36,.7) 100%); }
.phero > .wrap { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 124px; }
.phero .post-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 0 0 18px; font: 500 14px/1.4 var(--f-body); letter-spacing: 0; color: rgba(255,255,255,.82); }
.phero .post-breadcrumb a { color: rgba(255,255,255,.82); }
.phero .post-breadcrumb a:hover { color: #fff; }
.phero .post-breadcrumb .bc-sep { color: rgba(255,255,255,.55); }
.phero .post-breadcrumb [aria-current] { color: #fff; font-weight: 500; }
.phero .eyebrow { color: rgba(255,255,255,.9); margin: 0; }
.phero h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.025em; max-width: 14ch; margin-top: 8px; color: #fff; text-wrap: balance; }
.phero .lede { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: rgba(255,255,255,.9); max-width: 52ch; margin: 16px 0 0; }
.phero .trust-band.facts { margin-top: 22px; }

.mpage { position: relative; z-index: 3; margin-top: -84px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "ans side" "main side"; column-gap: 56px; align-items: start; padding-bottom: 8px; }
.mpage > .answer-box { grid-area: ans; max-width: none; background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r-lg); padding: 30px 32px; }
.mpage > .answer-box p { font-size: 19px; line-height: 1.55; max-width: 62ch; margin: 0; color: var(--ink); }
.mpage > .answer-box p + p { margin-top: 12px; }
.mpage > .page-rail { grid-area: side; position: sticky; top: 96px; }
.mpage > .page-main { grid-area: main; min-width: 0; }
.rail-card { display: block; background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r-lg); padding: 24px; }
.rail-h { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.rail-p { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin: 6px 0 0; }
.rail-card .btn { display: flex; width: 100%; margin-top: 12px; }
.rail-card .btn:first-of-type { margin-top: 18px; }
.rail-facts { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--grey-2); display: grid; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.rail-facts li { position: relative; padding-left: 22px; margin: 0; }
.rail-facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 3px; background: var(--sand-2); }
.back-link { display: inline-flex; margin: 40px 0 0; font-weight: 700; font-size: 15px; color: var(--teal); }
.back-link:hover { color: var(--teal-deep); }
.mpage .content-body { max-width: none; }
.mpage h2.content-h { font-family: var(--f-body); font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; max-width: 24ch; margin: 72px 0 0; }
.mpage h3.content-h { font-family: var(--f-body); font-weight: 800; font-size: 20px; margin: 32px 0 0; }
.mpage .content-body > .content-h:first-child { margin-top: 48px; }
.mpage .content-body p { margin: 16px 0 0; max-width: 66ch; line-height: 1.6; color: var(--ink); }
.mpage .content-body .content-h + p { margin-top: 18px; }
.mpage .page-lead-media { margin: 48px 0 0; max-width: 600px; }
.mpage .page-lead-media .media-slot { border-radius: var(--r); aspect-ratio: 3/2; }
.mpage .values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.mpage .value { background: var(--grey); border-radius: var(--r); padding: 22px 24px; }
.mpage .value h3 { font: 800 18px/1.3 var(--f-body); letter-spacing: -.01em; margin: 0; }
.mpage .value p { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; margin: 6px 0 0; }
.mpage .slab-yards p { margin: 16px 0 12px; color: var(--ink-2); }
.mpage .link-list { margin-top: 18px; }
.mpage .link-list li { margin: 0 0 10px; }
.mpage .link-list a { font-size: 16px; font-weight: 600; color: var(--teal); }
.mpage .link-list a:hover { color: var(--teal-deep); }
.mat2 .more-stones { padding-top: 80px; }
.mat2 .county-band h2 { margin-bottom: 0; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .slab-hero > .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 56px; padding-bottom: 40px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .mat-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); }
  .tiles .tile { grid-column: span 1; grid-row: span 1; }
  .tiles .t-a { grid-column: span 2; }
  .cta-box { grid-template-columns: minmax(0, 1fr); }
  .mpage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ans" "side" "main"; margin-top: -72px; }
  .mpage > .page-rail { position: static; margin-top: 14px; }
}
@media (max-width: 560px) {
  .sec-block, .ctaband { padding: 64px 0; }
  .mat2 .more-stones { padding-top: 64px; }
  .sw { min-height: 220px; grid-template-rows: 120px 1fr; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps::before { display: none; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tiles .t-a { grid-column: span 1; }
  .est-card { padding: 22px 18px 18px; }
  .est-form { grid-template-columns: minmax(0, 1fr); }
  .trust-band.facts { gap: 8px 16px; }
  .county-cols { columns: 2; column-gap: 20px; font-size: 15px; }
  .cta-box { padding: 28px 22px; }
  .chip:where(:not(.p-content .chip)) { height: 44px; }   /* a 44px tap target on phones */
  .phero { min-height: 400px; }
  .phero > .wrap { padding-top: 40px; padding-bottom: 104px; }
  .mpage > .answer-box { padding: 22px 20px; }
  .mpage > .answer-box p { font-size: 17.5px; }
  .mpage .values { grid-template-columns: minmax(0, 1fr); }
  .mpage h2.content-h { margin-top: 56px; }
}

/* ============================================================================
   Modern design, Task 5 group A: the hubs (templates/countertops.php, kitchens-and-baths.php,
   areas.php, areas-austin.php, .hub2), the application pages (templates/market.php, .app2) and the
   city pages (templates/area.php, .area2). The application and city pages reuse the material
   page's .phero and .mpage; the hubs open with the light head of mockup/modern/kitchens.html.
   ============================================================================ */

/* ---- Hub head: breadcrumb, label, H1, lede and the answer box on white ---- */
.ghead { padding: 72px 0 0; }
.ghead .post-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 0 0 18px; font: 500 14px/1.4 var(--f-body); letter-spacing: 0; color: var(--mute); }
.ghead .post-breadcrumb a { color: var(--mute); }
.ghead .post-breadcrumb a:hover { color: var(--ink); }
.ghead .post-breadcrumb .bc-sep { color: var(--grey-2); }
.ghead .post-breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }
.ghead .eyebrow { margin: 0; }
.ghead h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -.025em; max-width: 16ch; margin-top: 8px; text-wrap: balance; }
.ghead .lede { color: var(--ink-2); font-size: 18px; line-height: 1.55; max-width: 62ch; margin: 14px 0 0; }
.ghead .answer-box { max-width: 900px; margin-top: 30px; background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r-lg); padding: 30px 32px; }
.ghead .answer-box p { font-size: 19px; line-height: 1.55; max-width: 62ch; color: var(--ink); }

/* ---- Hub sections: inner pages sit 72px apart ---- */
.hub2 .sec-block { padding: 72px 0; }
.hub2 .also-sec { padding-top: 0; }
.hub2 .process-sec .sect-link { margin-top: 40px; }
.hub2 .sec-block > .wrap > .cta-acts { margin-top: 4px; }
.hub-tiles .tiles { grid-auto-rows: minmax(250px, auto); }
.hub2 .sec-block + .faq-section { padding-top: 8px; }
.area2 .mpage .page-lead-media { margin-bottom: 12px; }

/* The Austin hub: the trip note and the towns in a reading column. */
.areas-sec h2.content-h { font: 800 clamp(26px, 2.6vw, 34px)/1.1 var(--f-body); letter-spacing: -.02em; max-width: 24ch; margin: 56px 0 0; }
.areas-sec h2.content-h:first-child { margin-top: 0; }
.areas-sec h2.content-h + .areas-note, .areas-sec h2.content-h + .areas-dir, .areas-sec h2.content-h + .areas-empty { margin-top: 18px; }
.areas-sec .go { margin-top: 12px; }
.areas-empty { color: var(--ink-2); max-width: 66ch; }

/* ---- Application page extras inside the material page grid ---- */
.mpage .article-grid { margin-top: 22px; }
.mpage .article-grid .article-grid { margin-top: 0; }
.mpage .wwb-note { color: var(--ink-2); max-width: 66ch; margin: 16px 0 0; }
.mpage .wwb-more { margin: 14px 0 0; }
.mpage .wwb-more a { font-weight: 700; color: var(--teal); }
.mpage .wwb-more a:hover { color: var(--teal-deep); }

/* ---- City page: the short lead form in the grey box (mockup/modern/katy.html) ---- */
.lead-box { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; background: var(--grey); border-radius: var(--r-xl); padding: 44px; }
.lead-form h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 22px; }
.lead-form .error { border-radius: 10px; margin: 0 0 16px; }
.lead-form .status-banner { border-radius: var(--r); }
.lead-box .est-form { margin-top: 0; }
.lead-box .est-form .btn { justify-self: start; width: auto; }
.lead-aside { padding-top: 6px; }
.lead-info h3 { font: 800 19px/1.25 var(--f-body); letter-spacing: -.01em; margin: 0; }
.lead-info p { color: var(--ink-2); margin: 10px 0 0; max-width: 44ch; }
.lead-info + .lead-info { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--grey-2); }
/* "What happens next" list (contact, area, trade program, estimate, the thank-you banner). */
.next-steps { margin: 14px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.next-steps li::marker { color: var(--teal); font-weight: 700; }

@media (max-width: 1000px) {
  .lead-box { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
  .ghead { padding-top: 48px; }
  .ghead .answer-box { padding: 22px 20px; }
  .ghead .answer-box p { font-size: 17.5px; }
  .hub2 .sec-block { padding: 64px 0; }
  .hub2 .also-sec { padding-top: 0; }
  .hub2 .sec-block + .faq-section { padding-top: 8px; }
  .lead-box { padding: 28px 20px; }
  .lead-box .est-form .btn { width: 100%; }
}

/* ============================================================================
   Modern design, Task 5 group B: the Stone Gallery (templates/stones.php, .gal2), one stone
   (templates/stone.php, .stone2), the estimate form (templates/estimate.php, .est2) and the content
   pages (templates/content-single.php, .post2: Our Process as the timeline, Edges & Sinks with the
   profiles, articles, guides and project write-ups). Sources: mockup/modern/stones.html,
   stone.html, estimate.html and process.html. They reuse the hub head (.ghead), the page hero
   (.phero), the page grid (.mpage), the rail card, the chips, the stone card and the CTA box.
   ============================================================================ */

/* ---- Stone Gallery: filter rows, groups by material, the empty state ---- */
.filters { display: grid; gap: 12px; margin-top: 34px; padding: 20px 0; border-top: 1px solid var(--grey-2); border-bottom: 1px solid var(--grey-2); }
.filters .row { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.filters .lbl { flex: 0 0 72px; font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 38px; }
.filters .chips { margin-top: 0; min-width: 0; }
.chip .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(31,42,36,.2); }
.chip.on .dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.dot-white { background: #ecebe6; } .dot-veined-white { background: #f3f2ee; } .dot-cream { background: #e6dbc4; }
.dot-beige { background: #ddd3c0; } .dot-grey { background: #8e8f8c; } .dot-black { background: #252523; }
.dot-brown { background: #3f2f27; } .dot-green { background: #26302a; } .dot-blue { background: #56636e; }
.dot-gold { background: #cfb282; }
.stones-sec { padding-bottom: 80px; }
.sgroup { padding-top: 48px; }
.sgroup h2 { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.stone-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.stone-grid .stone-card .tex { height: auto; aspect-ratio: 4 / 3; }
.stones-empty { margin-top: 48px; border: 1.5px dashed var(--grey-2); border-radius: var(--r-xl); padding: 48px 40px; display: grid; justify-items: start; gap: 12px; }
.stones-empty .ghosts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; margin-bottom: 18px; }
.stones-empty .ghosts i { aspect-ratio: 4 / 3; border-radius: var(--r); background: var(--grey); }
.stones-empty h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.stones-empty .cta-acts { margin-top: 8px; }
.gal2 .stones-sec + .faq-section { padding-top: 0; }

/* ---- One stone: the slab beside the facts table, the body beside the rail ---- */
.shero { padding-top: 48px; }
.ghead.shero h1 { font-size: clamp(44px, 6vw, 84px); max-width: none; }
.shero .answer-box { max-width: 60ch; margin: 14px 0 0; padding: 0; border: 0; background: none; }
.shero .answer-box p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); }
.sfig { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 24px; margin-top: 32px; }
.bigslab { border-radius: var(--r-lg); min-height: 540px; background: var(--grey); }
.facts-t { margin: 0; align-self: start; border: 1px solid var(--grey-2); border-radius: var(--r-lg); padding: 6px 24px; }
.facts-t div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--grey-2); }
.facts-t div:last-child { border-bottom: 0; }
.facts-t dt { font-size: 14px; font-weight: 600; color: var(--mute); }
.facts-t dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.sbody { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; align-items: start; }
.sbody > .page-rail { margin-top: 48px; }
.sbody .content-body { max-width: none; margin-top: 8px; }
.sbody .content-body p { margin: 16px 0 0; max-width: 66ch; line-height: 1.6; }
.sbody .content-body h2.content-h { font: 800 clamp(26px, 2.6vw, 34px)/1.1 var(--f-body); letter-spacing: -.02em; margin: 48px 0 0; }
.stone2 .more-stones .sec-head { margin-bottom: 24px; }
.stone2 .more-stones + .faq-section { padding-top: 0; }

/* ---- The estimate form: the full form in a bordered panel, "what happens next" beside it ---- */
.egrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; padding-top: 48px; align-items: start; }
.est-panel { border: 1px solid var(--grey-2); border-radius: var(--r-lg); padding: 34px 36px 36px; min-width: 0; }
.est-panel h2 { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 22px; }
.est-panel .est-form { margin-top: 0; gap: 16px 14px; }
.est-panel .est-form .btn { justify-self: start; width: auto; }
.est-form .hint { font-weight: 400; color: var(--mute); font-size: 12.5px; }
.est-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.est-form label { align-content: start; }
.est-form legend { font: 600 13px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-2); padding: 0; margin-bottom: 8px; }
.est-form .checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.est-form label.check { margin: 0; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--grey-2); border-radius: 10px; background: #fff; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; }
.est-form label.check input { flex: none; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--teal); }
.est-form input[type=file] { height: auto; padding: 14px 12px; border-style: dashed; background: var(--grey); }
.est-form input[type=file]::file-selector-button { font: 700 14px var(--f-body); color: var(--ink); background: #fff; border: 1.5px solid var(--grey-2); border-radius: 999px; padding: 7px 16px; margin-right: 12px; cursor: pointer; }
/* The base input:focus rule drops the outline, so every public field states its own ring. */
.est-form input:focus-visible, .est-form select:focus-visible, .est-form textarea:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.form-page input:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.est-panel .error { border: 1.5px solid #b3261e; border-radius: 10px; color: #8A2E1C; background: #fff; margin: 0 0 18px; }
.est-panel .status-banner { border-radius: var(--r); padding: 18px 20px; margin: 0; }
.est-side { position: sticky; top: 96px; }

/* ---- Content pages: the phero head, the reading column, the timeline and the edge profiles ---- */
.post2 .phero h1 { font-size: clamp(34px, 4.4vw, 58px); max-width: 22ch; }
.post2 .phero .lede p { margin: 0; color: rgba(255,255,255,.9); }
.post2 .post-meta { gap: 6px 18px; margin-top: 18px; }
.post2 .post-meta .post-date, .post2 .post-meta .post-place, .post2 .post-meta .post-byline, .post2 .post-meta .post-readtime { color: rgba(255,255,255,.86); }
.post2 .post-meta .article-category { color: #fff; font-weight: 700; }
.post2 .post-meta .a-tag { color: #fff; border-color: rgba(255,255,255,.4); border-radius: 999px; padding: 3px 10px; font: 600 12.5px var(--f-body); letter-spacing: 0; text-transform: none; }
.post2 .post-meta a.a-tag:hover { background: #fff; color: var(--ink); border-color: #fff; }
.post2 > .mpage { padding-bottom: 80px; }
.post2 + .faq-section { padding-top: 0; }
.mpage.no-ans { margin-top: 0; padding-top: 48px; grid-template-areas: "main side"; }
.post2 .content-body.lead { margin-top: 8px; }
.post2 .post-see-also { color: var(--ink-2); max-width: 66ch; margin: 24px 0 0; }
.post2 .post-see-also a { font-weight: 600; color: var(--teal); }
.post2 .project-quote { border-left: 0; padding: 26px 28px; background: var(--grey); border-radius: var(--r); }
.post2 .project-quote p { font: 700 21px/1.45 var(--f-body); }
.post2 .ag-item, .post2 .ba-shot, .post2 .video-embed { border: 0; border-radius: var(--r); overflow: hidden; }
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 17px; top: 72px; bottom: 24px; width: 2px; background: var(--grey-2); }
.tl-step { position: relative; padding: 64px 0 0 64px; margin: 0; }
.tl-step::before { content: attr(data-n); position: absolute; left: 0; top: 60px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; display: grid; place-items: center; }
.mpage .tl-step > h2.content-h { margin: 0; }
.mpage .tl-step .content-body > p:first-child { margin-top: 18px; }
.edges { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 24px; }
.edge { margin: 0; border: 1px solid var(--grey-2); border-radius: var(--r); padding: 14px 14px 16px; display: grid; align-content: start; gap: 10px; }
.edge-svg { width: 100%; height: auto; display: block; }
.edge-svg path { fill: var(--grey); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.edge figcaption strong { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.edge figcaption p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 1000px) {
  .stone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stones-empty .ghosts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stones-empty .ghosts i:nth-child(4) { display: none; }
  .sfig { grid-template-columns: minmax(0, 1fr); }
  .bigslab { min-height: 0; aspect-ratio: 4 / 3; }
  .sbody { grid-template-columns: minmax(0, 1fr); }
  .sbody > .page-rail { position: static; order: -1; margin-top: 32px; }
  .egrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .est-side { position: static; }
  .mpage.no-ans { grid-template-areas: "side" "main"; }
}
@media (max-width: 560px) {
  .filters .row { display: grid; gap: 4px; }
  .filters .lbl { line-height: 1.4; }
  .filters .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scrollbar-width: none; }
  .filters .chips::-webkit-scrollbar { display: none; }
  .stone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stone-grid .stone-card h3 { font-size: 15.5px; }
  .stone-grid .stone-card .cap { padding: 10px 12px 12px; }
  .stones-empty { padding: 32px 20px; }
  .stones-empty .ghosts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stones-empty .ghosts i:nth-child(n+3) { display: none; }
  .stones-sec { padding-bottom: 64px; }
  .facts-t { padding: 4px 18px; }
  .facts-t div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .est-panel { padding: 24px 18px 26px; }
  .est-panel .est-form .btn { width: 100%; }
  .est-form .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl::before { left: 13px; }
  .tl-step { padding: 48px 0 0 44px; }
  .tl-step::before { width: 28px; height: 28px; font-size: 13px; top: 46px; }
}

/* ============================================================================
   Modern design, Task 5 group C: About (templates/about.php, .about2), the Trade Program
   (.trade2), Contact (.contact2), the FAQ page (.faq2), the list pages (articles, category,
   resources, portfolio: .list2), the two tools (.tool2), legal (.legal2) and the error pages
   (.err2). They open with the hub head (.ghead) and reuse the estimate page's form panel
   (.egrid, .est-panel, .est-form), the rail card, the chips, the tiles, the section head, the
   grey value boxes and the CTA box.
   ============================================================================ */
.about2 .sec-block, .trade2 .sec-block, .contact2 .sec-block, .faq2 .sec-block, .list2 .sec-block { padding: 72px 0; }
.about2 .sec-block + .faq-section, .list2 .sec-block + .ctaband { padding-top: 0; }

/* ---- About: the statement beside the at-a-glance card, the photo split, the tiles ---- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.about-copy h2, .asplit-copy h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.02em; max-width: 20ch; }
.about-copy p { margin: 18px 0 0; max-width: 66ch; color: var(--ink-2); line-height: 1.6; }
.glance { background: var(--grey); border-radius: var(--r-lg); padding: 26px 28px 12px; }
.glance .k { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.glance dl { margin: 12px 0 0; }
.glance dl > div { padding: 14px 0; border-top: 1px solid var(--grey-2); }
.glance dt { font-size: 13.5px; font-weight: 600; color: var(--mute); }
.glance dd { margin: 2px 0 0; font: 800 19px/1.3 var(--f-body); letter-spacing: -.01em; color: var(--ink); }
.about-split { background: var(--grey); }
.asplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.asplit-media .media-slot { border-radius: var(--r-lg); overflow: hidden; }
.asplit-copy .eyebrow { margin: 0 0 10px; }
.asplit-copy p:not(.eyebrow) { margin: 16px 0 0; color: var(--ink-2); max-width: 60ch; line-height: 1.6; }
.asplit-copy .chips { margin-top: 24px; }
.about2 .testi-section + .faq-section { padding-top: 0; }

/* ---- Trade Program: the six reasons as grey boxes, then the form panel ---- */
.why-sec .sec-head { margin-bottom: 30px; }
.why-sec .values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.why-sec .value { background: var(--grey); border-radius: var(--r); padding: 22px 24px; }
.why-sec .value h3 { font: 800 18px/1.3 var(--f-body); letter-spacing: -.01em; margin: 0; }
.why-sec .value p { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; margin: 6px 0 0; }
.trade2 .why-sec + .egrid { padding-top: 0; }
.trade2 .egrid, .contact2 .egrid { padding-bottom: 80px; }
.trade2 .egrid + .faq-section, .contact2 .egrid + .faq-section, .contact2 .egrid + .offices-sec { padding-top: 0; }
.est-panel .form-lede { color: var(--ink-2); font-size: 16px; line-height: 1.5; margin: -8px 0 20px; }
.est-panel .form-lede a { font-weight: 700; color: var(--teal); }
.rail-sub { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--grey-2); }

/* ---- Contact: the head beside the reach card; the offices as bordered cards ---- */
.ghead-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.reach-card { margin-top: 38px; }
.reach-lines { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.reach-lines li { display: grid; gap: 2px; margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.reach-lines .k { font-size: 13.5px; font-weight: 600; color: var(--mute); }
.reach-lines a { font-weight: 700; color: var(--ink); }
.reach-lines a:hover { color: var(--teal); }
.offices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.office-card { border: 1px solid var(--grey-2); border-radius: var(--r); padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 4px; }
.office-div { font-size: 13.5px; font-weight: 600; color: var(--teal-deep); }
.office-card h3 { font: 800 19px/1.25 var(--f-body); letter-spacing: -.01em; margin: 0 0 6px; }
.office-addr { color: var(--ink-2); font-size: 15px; line-height: 1.45; margin: 0; }
.office-phone, .office-rep, .office-email { margin: 6px 0 0; font-size: 15px; }
.office-phone a { color: var(--ink); font-weight: 700; }
.office-rep { color: var(--ink); }
.office-email a, .office-phone a:hover { color: var(--teal); }

/* ---- FAQ page: the accordion in a reading column ---- */
.faq-page-sec .faq-list { max-width: 900px; }

/* ---- List pages: filter chips, card grids, the pager ---- */
.list-cats { padding: 40px 0 0; }
.list-h { font: 800 clamp(22px, 2.2vw, 26px)/1.2 var(--f-body); letter-spacing: -.01em; }
.list-cats .chips { margin-top: 14px; }
.list-sec { padding: 40px 0 80px; }
.list-filter { margin: 0 0 28px; }
.chip .n { font-weight: 500; color: var(--mute); }
.chip.on .n { color: rgba(255,255,255,.72); }
.list2 .article-grid { gap: 16px; }
.list2 .ghead + .sec-block { padding-top: 48px; }
.tools-sec { background: var(--grey); }
.tools-sec .sec-head { margin-bottom: 28px; }
.ask-p { margin: 12px 0 0; color: var(--ink-2); font-size: 17px; }
.ask-p a { font-weight: 700; color: var(--teal); }

/* ---- Tools: the tool below the head ---- */
.tool-sec { padding: 48px 0 80px; }

/* ---- Error pages (inside the default page wrapper) ---- */
.err2 { padding: 48px 0 24px; max-width: 62ch; }
.err2 .eyebrow { margin: 0; }
.err2 h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -.025em; margin-top: 8px; }
.err2 p:last-child { margin: 28px 0 0; }

@media (max-width: 1000px) {
  .about-grid, .asplit, .ghead-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .reach-card { margin-top: 0; }
  .why-sec .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .about2 .sec-block, .trade2 .sec-block, .contact2 .sec-block, .faq2 .sec-block, .list2 .sec-block { padding: 64px 0; }
  .about2 .sec-block + .faq-section, .list2 .sec-block + .ctaband, .about2 .testi-section + .faq-section { padding-top: 0; }
  .why-sec .values { grid-template-columns: minmax(0, 1fr); }
  .glance { padding: 22px 20px 8px; }
  .empty { padding: 32px 20px; }
  .list-sec { padding-bottom: 64px; }
  .list2 .article-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-sec, .legal-sec { padding: 36px 0 64px; }
}