/*
Theme Name:   CallCenterUSA
Theme URI:    https://callcenterusa.us
Description:  Purpose-built theme for callcenterusa.us. Presentation only — the content
              model lives in the ccusa-core plugin, so this theme can be replaced without
              orphaning the city pages. No page builder, no compiled framework CSS.
Author:       Silver Rock Enterprises
Version:      1.0.0
Requires PHP: 8.1
Text Domain:  ccusa

Brand tokens below are CallCenterUSA's own, lifted verbatim from the previous site's
compiled CSS. They are not approximations — do not re-pick them.
Rules and rationale: WEBSITE-MGT/design/DESIGN-SYSTEM.md
*/

:root{
    /* CallCenterUSA brand tokens, taken verbatim from the live site's CSS */
    --brand-blue:oklch(69% .15 222);
    --brand-deep:oklch(31% .09 238);
    --brand-red:oklch(56% .19 28);
    --brand-red-hi:oklch(50% .19 28);
    --ink:oklch(24% .025 235);
    --muted:oklch(47% .03 235);
    --paper:oklch(98.5% .008 230);
    --cloud:oklch(95% .012 230);
    --surface:#fff;
    --line:oklch(88% .015 230);
    --hero-1:oklch(22% .07 240);
    --hero-2:oklch(33% .09 238);
    --on-dark:oklch(97% .01 230);
    --on-dark-mute:oklch(80% .03 230);
    --shadow:0 1px 2px oklch(24% .04 235/.08), 0 18px 40px -22px oklch(24% .04 235/.45);
    --measure:62ch;
    /* Default link color as a TOKEN, so `a` can be styled at specificity (0,0,1) and any
       component class beats it. See the note on the `a` rule below. */
    --link:oklch(31% .09 238);
    --heading:oklch(31% .09 238);   /* h2, .page-head h1, .metro li */
    --stat:oklch(31% .09 238);      /* the big stat numbers */
  }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
    --ink:oklch(95% .012 230); --muted:oklch(74% .025 230);
    --paper:oklch(19% .028 240); --cloud:oklch(24% .035 240);
    --surface:oklch(23% .033 240); --line:oklch(34% .04 240);
    --brand-blue:oklch(76% .13 222);
    --link:oklch(76% .13 222);
    --heading:oklch(97% .01 230);
    --stat:oklch(76% .13 222);
    --shadow:0 1px 2px #0006, 0 18px 40px -22px #000a;
  }}
  :root[data-theme="dark"]{
    --ink:oklch(95% .012 230); --muted:oklch(74% .025 230);
    --paper:oklch(19% .028 240); --cloud:oklch(24% .035 240);
    --surface:oklch(23% .033 240); --line:oklch(34% .04 240);
    --brand-blue:oklch(76% .13 222);
    --link:oklch(76% .13 222);
    --heading:oklch(97% .01 230);
    --stat:oklch(76% .13 222);
    --shadow:0 1px 2px #0006, 0 18px 40px -22px #000a;
  }

  *{box-sizing:border-box}
  body{margin:0; background:var(--paper); color:var(--ink);
    font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16.5px;
    line-height:1.62; -webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:Archivo,system-ui,sans-serif; text-wrap:balance; margin:0; letter-spacing:-.022em}
  p{margin:0}
  img{display:block; max-width:100%}
  /* THEME LIVES IN THE TOKEN, NEVER IN THE SELECTOR.
     Four rules here were written as `:root:not([data-theme="light"]) <el>{...}` —
     specificity (0,2,1) or (0,2,2) — which silently OUTRANKED every component class that
     tried to restyle those elements. Two visible bugs came from it, both on every page:
     the closer band's h2 rendered in --brand-deep ON --brand-deep and was invisible, and
     the hero/closer phone number lost .tel-hero's white. Anything theme-dependent gets a
     token redefined in the dark blocks above; selectors stay at component specificity.

     Link color comes from --link, NOT from :root-scoped selectors.
     The previous form was `:root:not([data-theme="light"]) a{...}`, specificity (0,2,1),
     which silently OUTRANKED every component class. The visible symptom: .tel-hero sets
     color:#fff for the phone number on the dark hero and closer bands, and lost — so the
     phone number rendered in dark ink on a dark navy background and was almost invisible
     on every page that has a closer. Theme belongs in the token, never in the selector. */
  a{color:var(--link); text-decoration:none}
  /* Underlines stay in RUNNING PROSE, where a link needs to be distinguishable from the
     sentence around it. In a list of links the list already says they are links, and
     underlining every row is what made the home page look unfinished. */
  .body a, .page-body a, .prose-band a, .faq .a a{text-decoration:underline; text-underline-offset:2px}
  a:hover{color:var(--brand-red)}
  :focus-visible{outline:3px solid var(--brand-blue); outline-offset:2px; border-radius:3px}
  .wrap{max-width:1160px; margin-inline:auto; padding-inline:22px}
  .eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
    color:var(--brand-blue)}

  /* ── top strip + nav ───────────────────────────── */
  .strip{background:var(--brand-deep); color:var(--on-dark); text-align:center;
    font-size:12.5px; font-weight:600; letter-spacing:.05em; padding:7px 22px}
  .nav{background:var(--surface); border-bottom:1px solid var(--line); position:sticky;
    top:env(safe-area-inset-top,0px); z-index:50}
  .nav-in{display:flex; align-items:center; gap:22px; padding-block:12px}
  .nav img{height:38px; width:auto}
  .nav .links{display:flex; gap:20px; margin-right:auto; font-size:14.5px; font-weight:500; color:var(--muted)}
  .tel{font-weight:700; font-size:15px; color:var(--ink); text-decoration:none; white-space:nowrap}
  .quote{background:var(--brand-red); color:#fff; font-weight:700; font-size:12.5px;
    letter-spacing:.09em; text-transform:uppercase; padding:11px 18px; border-radius:3px;
    text-decoration:none; white-space:nowrap}
  .quote:hover{background:var(--brand-red-hi)}
  @media (max-width:880px){ .nav .links{display:none} }
  /* PHONE WIDTHS: the bar did not fit and the page scrolled sideways.
     Measured at 400px — logo, phone number and the quote button came to 434px against a
     400px viewport, so every page on the site could be dragged horizontally. The gap and
     the button's own padding are most of the excess, so both shrink before anything is
     taken away: the phone number is the single most valuable control on a phone and the
     quote button is the primary CTA, so neither is hidden.
     `margin-right:auto` on the phone pushes the button to the right edge once .links is
     gone — without it the three items bunch at the left with dead space beside them. */
  @media (max-width:560px){
    .nav-in{gap:12px}
    .nav img{height:32px}
    .tel{font-size:14px; margin-right:auto}
    .quote{font-size:11.5px; letter-spacing:.06em; padding:10px 12px}
  }
  @media (max-width:380px){
    /* Below this the two cannot both be full size. The button keeps its words; the phone
       number is still one tap away in the hero and the footer. */
    .quote{font-size:11px; padding:9px 10px}
    .nav-in{gap:9px}
  }

  /* ── hero ──────────────────────────────────────── */
  /* SPLIT HERO — copy on the left, photograph on the right.
   *
   * It was a full-bleed background with a veil over it, which worked for the stock shots
   * because their subject sat on the right. Kurt's photographs have the operator at about
   * 42% across — exactly where the headline goes — so at a 3:1 band the face was behind
   * the text and all a visitor saw was a shoulder and a desk. No object-position fixes
   * that: at this aspect ratio `cover` fills the width, so there is no horizontal slack to
   * pan. Giving the photo its own column does fix it, and the right column lands at almost
   * exactly the 3:2 of the source, so the frame is barely cropped at all.
   */
  .hero{position:relative; background:var(--hero-1); color:var(--on-dark); overflow:hidden;
    isolation:isolate}
  .hero img.bg{position:absolute; top:0; right:0; width:50%; height:100%; object-fit:cover;
    object-position:46% 26%; z-index:0}
  /* Feathers the seam so the photo dissolves into the navy instead of butting against it
     with a hard vertical edge. Only over the photo's left edge — the rest stays clear. */
  .hero .veil{position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg,
      var(--hero-1) 0 44%,
      oklch(22% .07 240/.72) 52%,
      oklch(22% .07 240/.18) 64%,
      transparent 78%)}
  @media (max-width:900px){
    /* Stacked: a short photo band above the copy. A 50% column at phone width is a sliver
       with nothing legible in it. */
    .hero img.bg{position:relative; width:100%; height:230px; object-position:46% 24%}
    .hero .veil{background:linear-gradient(180deg, transparent 0 55%, var(--hero-1) 100%)}
  }
  /* The copy is constrained by its CHILDREN, not by padding on the wrap.
     A percentage padding here resolves against .hero's full width, not the wrap's, so
     `padding-inline-end:48%` reserved 914px on a 1160px wrap and squeezed the headline to
     one word per line. Capping the children keeps the wrap aligned with the nav above it
     and leaves the photo column clear. */
  .hero-in{position:relative; z-index:2; padding-block:64px 58px}
  .hero-in > *{max-width:min(540px, 44vw)}
  @media (max-width:900px){ .hero-in{padding-block:26px 42px} .hero-in > *{max-width:none} }
  /* The SIZE is global; the WHITE is not.
     This rule lived inside the hero block and set `color:#fff` on EVERY h1 on the site,
     which was harmless only for as long as the only h1s sat on a dark hero. A blog post's
     h1 does not: it renders on --paper, so the title of every one of the 104 posts was
     white on near-white and effectively gone. Third instance of this family of bug in this
     stylesheet - DESIGN-SYSTEM section 10. Default to the heading token; dark bands opt in. */
  h1{font-size:clamp(34px,5.6vw,58px); line-height:1.04; font-weight:700; margin-top:14px;
    color:var(--heading)}
  .hero h1{color:#fff}
  .hero .dek{margin-top:18px; font-size:18px; color:var(--on-dark-mute); max-width:52ch}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:28px}
  .btn-red{background:var(--brand-red); color:#fff; font-weight:700; font-size:13px;
    letter-spacing:.09em; text-transform:uppercase; padding:15px 26px; border-radius:3px; text-decoration:none}
  .btn-red:hover{background:var(--brand-red-hi)}
  .tel-hero{color:#fff; font-weight:700; font-size:18px; text-decoration:none}
  .tel-hero small{display:block; font-size:11.5px; font-weight:600; letter-spacing:.12em;
    text-transform:uppercase; color:var(--on-dark-mute)}
  .live{display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-size:13.5px;
    color:var(--on-dark-mute)}
  .dot{width:8px; height:8px; border-radius:50%; background:oklch(72% .17 150);
    box-shadow:0 0 0 4px oklch(72% .17 150/.22)}
  @media (prefers-reduced-motion:no-preference){ .dot{animation:p 2.8s ease-in-out infinite} }
  @keyframes p{0%,100%{opacity:1}50%{opacity:.4}}

  /* ── stat band ─────────────────────────────────── */
  .stats{background:var(--surface); border-bottom:1px solid var(--line)}
  .stats ul{margin:0; padding:0; list-style:none; display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .stats li{padding:22px 24px; border-left:1px solid var(--line)}
  .stats li:first-child{border-left:0}
  .stats .v{color:var(--stat); font-family:Archivo,sans-serif; font-weight:700; font-size:26px;
    font-variant-numeric:tabular-nums}

  .stats .k{font-size:13.5px; color:var(--muted); margin-top:2px}

  /* ── sections ──────────────────────────────────── */
  section{padding-block:60px}
  .band{background:var(--cloud)}
  .two{display:grid; gap:34px; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:start}
  @media (max-width:820px){ .two{grid-template-columns:1fr; gap:22px} }
  h2{font-size:clamp(25px,3.6vw,38px); line-height:1.1; font-weight:700; color:var(--heading); max-width:17ch}
  .body p + p{margin-top:15px}
  .body p{color:var(--muted); max-width:var(--measure)}

  /* ── the Phoenix clock device ──────────────────── */
  .clocks{display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); margin-top:26px}
  .clock{padding:18px 16px; border-left:1px solid var(--line); position:relative}
  .clock:first-child{border-left:0; background:oklch(69% .15 222/.10)}
  .clock .city{font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
  .clock .t{font-family:Archivo,sans-serif; font-weight:700; font-size:30px; margin-top:6px;
    font-variant-numeric:tabular-nums; color:var(--ink)}
  .clock .z{font-size:12.5px; color:var(--muted); margin-top:2px}
  .clock.hq .city{color:var(--brand-red)}
  .clock-note{margin-top:12px; font-size:13.5px; color:var(--muted)}

  /* ── numbered call-type cards ──────────────────── */
  .cards{display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
    border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:30px}
  .card{position:relative; transition:transform .18s ease, box-shadow .18s ease;
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:24px 22px; background:var(--surface)}
  /* No tinted tile behind the rendered icons: they carry their own color and depth, and a
     tile competes with them. The tile stays only for the SVG fallback, which needs it. */
  .card .top{display:flex; align-items:center; min-height:56px}
  .card .top svg{width:24px; height:24px; stroke:var(--brand-red); fill:none;
    padding:10px; box-sizing:content-box; border-radius:12px;
    background:linear-gradient(160deg, oklch(56% .19 28/.10), oklch(56% .19 28/.04));
    box-shadow:inset 0 0 0 1px oklch(56% .19 28/.16)}
  .icon-3d{width:60px; height:60px; display:block}
  /* Six cards in the four-column default leaves two dead cells at the end of the row. */
  .cards-3{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  .card h3{font-size:18px; font-weight:600; margin-top:14px; color:var(--ink)}
  .card p{font-size:14.8px; color:var(--muted); margin-top:7px}

  /* ── metro ─────────────────────────────────────── */
  .metro{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; padding:0; list-style:none}
  .metro li{color:var(--heading); font-size:13.5px; font-weight:600; background:var(--surface);
    border:1px solid var(--line); padding:7px 14px; border-radius:999px}


  /* ── faq ───────────────────────────────────────── */
  .faq{margin-top:8px; border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer; list-style:none; padding:18px 0; font-weight:600; font-size:17px;
    display:flex; gap:14px; align-items:flex-start; color:var(--ink)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"+"; color:var(--brand-red); font-weight:700; font-size:20px;
    line-height:1.25; flex:none}
  .faq details[open] summary::before{content:"\2013"}
  .faq .a{padding:0 0 20px 30px; color:var(--muted); max-width:var(--measure); font-size:16px}

  /* ── closer ────────────────────────────────────── */
  .closer{background:var(--brand-deep); color:var(--on-dark); padding-block:56px}
  .closer h2{color:#fff; max-width:20ch}
  .closer p{color:var(--on-dark-mute); margin-top:14px; max-width:var(--measure)}
  .closer .row{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:26px}
  .badge{background:#fff; border-radius:5px; padding:8px 12px}
  .badge img{height:40px; width:auto}

  footer{background:var(--surface); border-top:1px solid var(--line); padding-block:22px 34px;
    font-size:13.5px; color:var(--muted)}

/* ── accessibility ─────────────────────────────── */
.screen-reader-text{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link:focus{position:fixed; top:8px; left:8px; z-index:200; width:auto; height:auto;
  clip:auto; margin:0; padding:12px 18px; background:var(--surface); color:var(--ink);
  border:2px solid var(--brand-blue); border-radius:4px; font-weight:700}

/* ── nav menu emitted by wp_nav_menu ───────────── */
.nav .links{list-style:none; margin:0; padding:0}
.nav .links li{display:inline-block}
.nav .links a{color:var(--muted); text-decoration:none}
.nav .links a:hover{color:var(--ink)}
.brand{display:inline-flex; align-items:center; text-decoration:none; flex:0 0 auto}

/* ── locations index ────────────────────────────── */
.hero-plain{background:linear-gradient(160deg,var(--hero-1),var(--hero-2));
  color:var(--on-dark); padding-block:56px 60px}
.hero-plain h1{color:#fff; max-width:18ch}
.hero-plain .dek{color:var(--on-dark-mute); margin-top:14px; max-width:var(--measure)}
.hero-plain .row{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:26px}
.prose-band{padding-block:38px}
.prose-band .wrap>*{max-width:var(--measure)}
.locations{padding-block:44px 54px; background:var(--paper)}
.locations h2{font-size:clamp(23px,2.6vw,30px)}
.locations-dek{color:var(--muted); margin-top:10px; max-width:var(--measure)}
.locations-grid{list-style:none; margin:26px 0 0; padding:0;
  display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
/* The tiles are a single label each. They used to carry a second line — "Answering
   service" under all 32 cities, "24/7 live coverage" under all 19 services — which was the
   same sentence repeated fifty-one times down one page and said nothing the heading above
   the grid had not already said. Full-height links so every tile in a row matches. */
.locations-grid a{display:flex; align-items:center; height:100%; padding:15px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  text-decoration:none; box-shadow:var(--shadow); transition:border-color .12s, transform .12s}
.locations-grid a:hover{border-color:var(--brand-blue)}
@media (prefers-reduced-motion:no-preference){
  .locations-grid a:hover{transform:translateY(-1px)}
}
.locations-grid strong{display:block; font-family:Archivo,sans-serif; font-size:17px;
  color:var(--ink); letter-spacing:-.01em; line-height:1.25}

/* ── nearby cities (city pages) ─────────────────── */
/* Cross-links between city pages. Sits directly above the closer, so the reader meets
   the CTA first and this second — it is a crawl and discovery device, not a sales one. */
.nearby{background:var(--cloud); border-top:1px solid var(--line); padding-block:44px}
.nearby h2{font-size:clamp(21px,2.4vw,26px)}
.nearby-dek{color:var(--muted); margin-top:8px}
.nearby-list{list-style:none; margin:20px 0 0; padding:0;
  display:grid; gap:10px 22px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.nearby-list a{display:block; padding:11px 14px; background:var(--surface);
  border:1px solid var(--line); border-radius:9px; text-decoration:none;
  color:var(--ink); font-weight:600}
.nearby-list a:hover{border-color:var(--brand-blue); color:var(--brand-blue)}
.nearby-all{margin-top:18px}
.nearby-all a{font-weight:700}

/* ── footer city directory ──────────────────────── */
/* Every city, one click from every page. Deliberately dense and quiet: this is a
   directory, not a feature — it must not compete with the closer above it. */
.foot-dir{background:var(--paper); border-top:1px solid var(--line); padding-block:30px 34px}
.foot-cities + .foot-cities{margin-top:26px; padding-top:24px; border-top:1px solid var(--line)}
.foot-cities h3{font-family:Archivo,sans-serif; font-size:13px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); font-weight:700; margin:0}
.foot-cities ul{list-style:none; margin:16px 0 0; padding:0;
  display:grid; gap:7px 20px; grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.foot-cities a{color:var(--muted); text-decoration:none; font-size:14px}
.foot-cities a:hover{color:var(--brand-blue); text-decoration:underline}

/* ── site footer ───────────────────────────────── */
.site-footer{background:var(--surface); border-top:1px solid var(--line);
  padding-block:34px 44px; color:var(--muted); font-size:14.5px}
.foot-brand{font-family:Archivo,sans-serif; font-weight:700; font-size:19px;
  letter-spacing:-.015em; color:var(--ink)}
.foot-brand span{color:var(--brand-red)}
.foot-line{margin-top:7px}
.foot-line a{font-weight:700}
.foot-links{list-style:none; display:flex; flex-wrap:wrap; gap:18px; margin:16px 0 0; padding:0}
.foot-links a{text-decoration:none}
.foot-legal{margin-top:18px; font-size:13px}

/* ── card icons inherit the theme ──────────────── */
.card svg{stroke:var(--brand-red); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}

/* ── ordinary Pages (contact, pricing, about …) ──── */
.page-head{background:var(--cloud); border-bottom:1px solid var(--line); padding-block:44px 38px}
.page-head h1{color:var(--heading); font-size:clamp(30px,4.6vw,46px); line-height:1.08; font-weight:700;
  max-width:20ch; margin-top:12px}

.dek-light{margin-top:14px; font-size:17.5px; color:var(--muted); max-width:var(--measure)}
/*
 * The prose measure goes on the CHILDREN, never on `.page-body` itself.
 *
 * `.page-body` IS the `.wrap` element, and `.wrap` carries `margin-inline:auto`. Capping
 * the wrap at the measure collapsed it to ~600px and centred it in the viewport, so every
 * page body floated in the middle of the screen while the hero above it and the footer
 * below it aligned to the 1160px column. Exactly the mistake already made once on
 * `.hero-in` — DESIGN-SYSTEM §11.
 *
 * Tables and the contact form are deliberately exempt: the pricing capability table is
 * four columns wide and the lead form is a two-column grid. Both are wider than a line of
 * text is meant to be, which is the point of them.
 */
.page-body > *{max-width:var(--measure)}
.page-body > table, .page-body > .wpcf7, .page-body > form, .page-body > figure{max-width:none}
/* Only the WRAPPER is exempt. Naming `.lead-form` here too beat its own `max-width:720px`
   on specificity and let the form run the full width of the page, which stretched the
   name/company pair to 550px each and left the single-field rows looking half-finished. */
.page-body h2{margin-top:34px; text-wrap:balance}

/* Section eyebrows recovered by the sanitizer. `.page-body p` is (0,1,1) and would beat a
   bare `.eyebrow` at (0,1,0), rendering these as muted body text — the specificity trap
   that has bitten this stylesheet twice already. Scope the selector, and pull the heading
   up under its label so the pair reads as one unit. */
.page-body .eyebrow{margin-top:34px; color:var(--brand-blue)}
.page-body .eyebrow + h2{margin-top:6px}
.page-body h3{font-size:19px; font-weight:600; margin-top:24px; color:var(--ink)}
.page-body p{margin-top:14px; color:var(--muted)}
.page-body ul,.page-body ol{margin-top:14px; padding-left:22px; color:var(--muted)}
.page-body li{margin-top:7px}
.page-body .wpcf7{margin-top:26px}
.page-body label{display:block; margin-top:16px; font-weight:600; font-size:14.5px; color:var(--ink)}
.page-body input[type=text],.page-body input[type=email],.page-body input[type=tel],
.page-body textarea,.page-body select{width:100%; margin-top:6px; padding:11px 13px; font:inherit;
  font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:5px}
.page-body textarea{min-height:130px; resize:vertical}
.page-body input[type=submit],.page-body .wpcf7-submit{width:auto; margin-top:22px;
  background:var(--brand-red); color:#fff; font-weight:700; font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; padding:15px 26px; border:0; border-radius:3px; cursor:pointer}
.page-body input[type=submit]:hover{background:var(--brand-red-hi)}


/* ── lead form ─────────────────────────────────── */
/* Contact Form 7's default output is one <p> of <br>-separated controls, which is why the
   form read as an afterthought. scripts/setup-contact-form.sh replaces the form body with
   real rows; this styles them. Field NAMES are load-bearing (leads.php maps them to PRISM)
   — the presentation here is free to change, the names are not. */
.lead-form{margin-top:26px; max-width:720px}
.lead-row{display:grid; gap:0 18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.lead-field{margin:0 0 18px}
.lead-field label{display:block; font-family:Archivo,sans-serif; font-size:13.5px;
  font-weight:600; letter-spacing:.01em; color:var(--ink); margin-bottom:7px}
.lead-hint{display:block; font-size:13px; color:var(--muted); margin:-3px 0 8px}

/* Every control type the form actually uses must be named here. `input[type=tel]` and
   `select` arrived 09/25/2026 with the phone and call-volume fields; an input whose type
   is not on this list matches NOTHING and renders as a raw browser widget in the middle of
   six styled ones. Selecting on type is what makes that a silent failure. */
.lead-form input[type=text],
.lead-form input[type=email],
.lead-form input[type=tel],
.lead-form select,
.lead-form textarea{
  width:100%; box-sizing:border-box; font:inherit; font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:13px 14px; transition:border-color .15s ease, box-shadow .15s ease;
}
/* A select is 2px shorter than a text input at the same padding, because it has no text
   cursor box. Matching heights matters: the two sit side by side in a .lead-row. */
.lead-form select{
  height:51px; appearance:none; cursor:pointer; padding-right:40px;
  /* Inline SVG chevron: appearance:none removes the native arrow, and the CSP-free way to
     put one back without shipping an image request is a data URI. currentColor is not
     available inside one, so the stroke is the --ink value written out. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23334' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .lead-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23cdd6e0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}}
:root[data-theme="dark"] .lead-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23cdd6e0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.lead-form textarea{resize:vertical; min-height:120px; line-height:1.6}
.lead-form ::placeholder{color:var(--muted); opacity:.75}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{
  outline:none; border-color:var(--brand-blue);
  box-shadow:0 0 0 3px oklch(69% .15 222/.18);
}
/* CF7 marks a failed field with this class; without a style the only feedback is a message
   at the bottom of the form, which on a six-field form means hunting for the problem. */
.lead-form .wpcf7-not-valid{border-color:var(--brand-red);
  box-shadow:0 0 0 3px oklch(56% .19 28/.14)}
.lead-form .wpcf7-not-valid-tip{display:block; margin-top:6px; font-size:13px;
  color:var(--brand-red); font-weight:600}

.lead-submit{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:6px 0 0}
.lead-form input[type=submit]{
  font-family:Archivo,sans-serif; font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; background:var(--brand-red); border:0;
  border-radius:4px; padding:16px 30px; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.lead-form input[type=submit]:hover{background:var(--brand-red-hi); transform:translateY(-1px)}
.lead-form input[type=submit]:focus-visible{outline:3px solid var(--brand-blue); outline-offset:2px}
.lead-note{font-size:13.5px; color:var(--muted); max-width:34ch}

/* CF7's own status messages, which otherwise inherit nothing and look like a browser alert. */
.wpcf7 form .wpcf7-response-output{margin:20px 0 0; padding:14px 16px; border-radius:10px;
  border:1px solid var(--line); background:var(--cloud); font-size:15px; color:var(--ink)}
.wpcf7 form.sent .wpcf7-response-output{border-color:oklch(72% .17 150/.5);
  background:oklch(72% .17 150/.10)}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output{
  border-color:oklch(56% .19 28/.45); background:oklch(56% .19 28/.08)}
.wpcf7-spinner{margin-left:10px}


/* ── logo ──────────────────────────────────────── */
/* Bigger and with room around it. Kurt, 09/24/2026: "our logo needs to be larger and more
   prominent on the site as well." The header was carrying it at 84px wide, inherited from
   the old cramped nav. */
/* `.nav .brand-mark`, not `.brand-mark`: the older `.nav img{width:auto;height:38px}` rule
   is (0,1,1) and was quietly beating a bare class selector at (0,1,0). The logo carried
   the right markup and the right rule and still rendered at 84px, which is the same
   specificity trap that made the closer heading invisible — see §9 of DESIGN-SYSTEM.md. */
.nav .brand-mark{width:150px; max-width:none; height:auto; display:block; flex:0 0 auto}
.nav-in{padding-block:14px}
.site-footer .foot-brand img{width:176px; max-width:none; height:auto; display:block}
.foot-brand{margin-bottom:4px}
@media (max-width:620px){ .nav .brand-mark{width:124px} }


/* ── content tables ────────────────────────────── */
/* The pricing page's capability comparison is the only structured comparison on the site,
   so it is worth styling properly rather than letting it inherit browser defaults. */
.page-body table, .prose-band table{width:100%; border-collapse:collapse; margin:22px 0;
  font-size:15px; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden}
.page-body th, .prose-band th{text-align:left; font-family:Archivo,sans-serif;
  font-weight:700; color:var(--ink); padding:13px 16px; border-bottom:1px solid var(--line)}
/* Only the COLUMN headers are uppercase. Marblism marks its row labels with <th> too, and
   uppercasing those turned every capability name into shouting. */
.page-body thead th, .prose-band thead th{font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); background:var(--cloud)}
.page-body tbody th, .prose-band tbody th{font-size:15px; font-weight:600}
.tick{color:oklch(62% .16 150); font-weight:700; font-size:17px}
.page-body td, .prose-band td{padding:13px 16px; border-bottom:1px solid var(--line);
  color:var(--ink); vertical-align:top}
.page-body tbody tr:last-child td, .prose-band tbody tr:last-child td{border-bottom:0}
.page-body tbody tr:nth-child(even), .prose-band tbody tr:nth-child(even){background:var(--paper)}
.page-body td:first-child, .prose-band td:first-child{font-weight:600}
/* Narrow screens: let a wide table scroll rather than blow out the page. */
@media (max-width:720px){
  .page-body table, .prose-band table{display:block; overflow-x:auto; white-space:nowrap}
}

/* Label/value pairs lifted out of Marblism's `block` utility class. */
.page-body .lbl, .prose-band .lbl{display:block; font-family:Archivo,sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin-top:14px}
.page-body .val, .prose-band .val{display:block; color:var(--ink); font-size:16.5px}

/* ── blog archive ──────────────────────────────── */
/* The post list was naked <h2>/<p> pairs running the full width of the wrap. Cards on the
   same grid the service and city tiles use, so the archive belongs to the same site. */
/* 340px, not 310: blog titles here run to eight or nine words, and a narrower track broke
   them to five lines each. */
.post-list{list-style:none; margin:32px 0 0; padding:0;
  display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.post-summary{height:100%; display:flex; flex-direction:column; padding:22px 24px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow)}
/* The headliner photo. Kurt, 09/25/2026: the live site carries one on every blog card,
   and ours carried one on 56 of 104 posts — the index read as half-finished.
   `aspect-ratio` goes on the LINK and `object-fit:cover` on the image: the photos arrive
   at several different shapes, and rows of unequal height are the thing this grid exists
   to prevent. 16/10 is the ratio the live site uses. */
.post-photo-link{display:block; margin-bottom:16px; border-radius:8px; overflow:hidden;
  background:var(--cloud); aspect-ratio:16/10}
.post-photo{width:100%; height:100%; object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .post-photo{transition:transform .3s ease}
  .post-summary:hover .post-photo{transform:scale(1.04)}
}
.post-date{font-family:Archivo,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--brand-blue)}
/* No `text-wrap:balance` here. Balance evens the line LENGTHS, which on a long title in a
   narrow card means it picks the shortest common width and stacks five ragged lines. */
.post-summary h2{font-size:19px; line-height:1.3; margin-top:9px; text-wrap:pretty}
.post-summary h2 a{color:var(--heading); text-decoration:none}
.post-summary h2 a:hover{color:var(--brand-red)}
.post-excerpt{margin-top:10px; color:var(--muted); font-size:15px}

/* A single post is prose: the measure goes on the children, never on the wrap itself. */
.single .post-date{margin-top:10px}
/* The post's own headliner, and the two to four photos inside the article.
   `.single .post-photo` is (0,2,0) and must beat the card rule above at (0,1,0) — the
   card sets `height:100%`, which inside a flex column collapses an image that has no
   sized parent. Reset it here rather than scoping the card rule, so a future card layout
   change cannot silently break the post page. */
.single .post-photo{height:auto; aspect-ratio:16/10; object-fit:cover;
  margin:20px 0 6px; border-radius:10px}
/* `:not(.post-photo)` is load-bearing, not tidiness. The headliner is INSIDE .page-body,
   so a plain `.single .page-body img` is (0,2,1) and beats `.single .post-photo` at
   (0,2,0) — it would quietly take over the headliner's margins. Fourth time a bare
   descendant selector has outranked the component rule in this file; see §11. */
.single .page-body img:not(.post-photo){border-radius:10px; margin:26px 0}

.pagination{margin-top:34px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.pagination .page-numbers{display:inline-block; padding:9px 14px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  text-decoration:none; font-size:14.5px}
.pagination .page-numbers:hover{border-color:var(--brand-blue)}
.pagination .page-numbers.current{background:var(--brand-deep); border-color:var(--brand-deep);
  color:var(--on-dark); font-weight:700}
.pagination .screen-reader-text{position:absolute!important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0)}