/*
Theme Name: Painter Near Me
Theme URI: https://painternearme.pro/
Description: Cost-intelligence theme for painternearme.pro. Deep petrol and clay, Barlow and IBM Plex Mono, built around published BLS wage data rather than stock photography.
Author: Sofia Digital Ventures
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: painternearme
*/

/* ============================================================
   1. TOKENS
   The reference is a premium paint brand, not a contractor site:
   flat colour in large blocks, hairline rules, no gradients, no
   shadows, and numerals treated as the main visual material.
   ============================================================ */
:root{
  --ink:#12333B;          /* deep petrol, the brand dark */
  --ink-2:#2E4A52;
  --ink-3:#5F757C;
  --ink-4:#8A9BA1;
  --clay:#C4633C;         /* warm terracotta accent */
  --clay-2:#D4764E;
  --clay-ink:#9C4826;     /* AA-safe clay for small text on light */
  --sage:#7E9186;
  --paper:#F6F2EB;        /* warm off-white ground */
  --surface:#FFFFFF;
  --surface-2:#FBF9F5;
  --rule:#D9D1C4;
  --rule-soft:#EAE4D9;
  --ok:#2E6B4F;
  --warn:#9A6318;

  --f-display:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --wrap:1140px;
  --narrow:700px;
  --r:2px;
  --gut:24px;
}

/* ============================================================
   2. RESET AND BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
img,svg,video,iframe,table,pre{max-width:100%}
img{height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--rule);text-underline-offset:3px}
a:hover{text-decoration-color:var(--clay)}
h1,h2,h3,h4{
  font-family:var(--f-display);font-weight:700;
  line-height:1.12;letter-spacing:-.022em;margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(34px,4.6vw,56px)}
h2{font-size:clamp(26px,2.9vw,38px)}
h3{font-size:clamp(19px,1.7vw,23px)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.15em}
li{margin:0 0 .45em}
b,strong{font-weight:600}
hr{border:0;border-top:1px solid var(--rule);margin:44px 0}
:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
::selection{background:var(--clay);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:var(--narrow)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}

/* every layout child may shrink; grid defaults to min-width:auto and that is
   what pushes a page sideways on a phone */
.hero-grid>*,.stats>*,.split>*,.cards>*,.svc-grid>*,.metro-grid>*,
.foot-grid>*,.calc-row>*,.head-in>*,.bar-in>*{min-width:0}

.eyebrow{
  font-family:var(--f-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--clay-ink);
  margin:0 0 12px;
}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);line-height:1.6}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ============================================================
   3. HEADER
   Two tiers. The top strip states where the numbers come from on
   every single page, because provenance is the product here and
   burying it in the footer would be the wrong call. The main bar
   carries the mark, the nav and one action.
   ============================================================ */
.head{position:sticky;top:0;z-index:40}

/* ---- tier one: provenance ---- */
.util{background:var(--ink);color:#9CB4BB}
.util-in{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:34px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.util-in>*{min-width:0}
.util-src{
  margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:9px;
}
.util-src .dot{
  width:6px;height:6px;border-radius:99px;background:var(--clay-2);flex:none;
}
.util-links{margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap}
.util-links a{color:#9CB4BB;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:1px}
.util-links a:hover{color:#fff;border-bottom-color:var(--clay-2)}
@media(max-width:700px){
  .util-links{display:none}
  .util-src{font-size:9.5px;letter-spacing:.05em}
}

/* ---- tier two: the bar ---- */
.head-in{
  max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:26px;
  background:rgba(246,242,235,.94);
}
.head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);
}
.head.is-stuck .head-in{box-shadow:0 8px 24px -18px rgba(18,51,59,.55)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .head-in{backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px)}
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand .mark{display:block;flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.brand:hover .mark{transform:translateY(-1px)}
.brand-txt{display:flex;flex-direction:column;gap:1px;line-height:1}
.brand-name{
  font-family:var(--f-display);font-weight:700;font-size:18.5px;
  letter-spacing:-.03em;color:var(--ink);
}
.brand-sub{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-4);
}
@media(max-width:520px){.brand-sub{display:none}}

.nav{display:flex;gap:5px;margin-left:auto;align-items:center}
.nav a{
  position:relative;font-size:14.5px;font-weight:500;color:var(--ink-2);
  text-decoration:none;padding:9px 13px;border-radius:var(--r);
  transition:color .15s ease,background-color .15s ease;
}
.nav a:hover{color:var(--ink);background:rgba(18,51,59,.055)}
.nav a.is-on{color:var(--ink);font-weight:600}
.nav a.is-on::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  border-radius:99px;background:var(--clay);
}

.head-cta{
  display:inline-flex;align-items:center;gap:9px;margin-left:12px;
  background:var(--ink);color:#fff !important;border-radius:var(--r);
  padding:11px 17px;font-size:14.5px;font-weight:600;text-decoration:none;
  transition:background-color .16s ease;
}
.head-cta:hover{background:var(--clay);color:#fff !important}
.head-cta .arw{
  width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .18s ease;flex:none;
}
.head-cta:hover .arw{transform:rotate(45deg) translate(2px,-2px)}

/* ---- mobile ---- */
.navtoggle{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--rule);
  border-radius:var(--r);padding:0;width:42px;height:42px;cursor:pointer;color:var(--ink);
}
.navtoggle .bars{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;height:100%}
.navtoggle .bars i{
  display:block;width:17px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .2s ease,opacity .15s ease;
}
.navtoggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.navtoggle .bars i{transition:none}}

@media(max-width:920px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    flex-direction:column;align-items:stretch;gap:0;padding:10px var(--gut) 20px;
    box-shadow:0 14px 30px -22px rgba(18,51,59,.5);
  }
  .nav.on{display:flex}
  .nav a{padding:14px 4px;border-radius:0;border-bottom:1px solid var(--rule-soft)}
  .nav a:hover{background:transparent}
  .nav a.is-on::after{left:4px;right:auto;width:16px;bottom:9px}
  .head-cta{justify-content:center;margin:14px 0 0;padding:14px 18px}
  .navtoggle{display:block}
}

/* ============================================================
   4. HERO. The calculator is the hero. There is no stock photo
      of a smiling painter, because the product is the number.
   ============================================================ */
.hero{background:var(--paper);padding:56px 0 0}
.hero-grid{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:56px;align-items:start;
}
.hero-copy h1{margin-bottom:20px;font-size:clamp(36px,5vw,60px)}
.hero-copy h1 em{font-style:normal;color:var(--clay)}
.hero-copy .lede{max-width:46ch}
.cred{
  margin:28px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:10px 28px;
}
.cred li{
  list-style:none;margin:0;display:flex;gap:8px;align-items:center;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:99px;padding:7px 15px;background:var(--surface);
}
.cred li b{font-weight:500;color:var(--clay-ink)}
@media(max-width:940px){
  .hero{padding-top:36px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
}

/* ============================================================
   4b. THE CALCULATOR
   This is the product, so it is built like an instrument rather
   than a contact form: a segmented control instead of a select,
   a readout instead of a sentence, and a rail showing where the
   reader's metro sits inside the national wage range.
   ============================================================ */
.calc{
  background:var(--ink);color:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.calc-head{padding:24px 26px 20px;border-bottom:1px solid rgba(255,255,255,.10);position:relative}
.calc-head::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--clay)}
.calc-eyebrow{
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay-2);margin:0 0 9px;
}
.calc h2{font-size:23px;color:#fff;margin:0 0 7px;letter-spacing:-.025em;line-height:1.15}
.calc-sub{font-size:13.5px;color:#9CB4BB;margin:0;line-height:1.5;text-align:left}
.calc-body{padding:22px 26px 24px}

/* ---- segmented control: three options deserve one tap, not a dropdown ---- */
.seg{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.07);border-radius:var(--r);padding:4px;margin:0 0 22px;
}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{
  position:relative;z-index:2;text-align:center;padding:11px 6px;cursor:pointer;
  font-size:14.5px;font-weight:600;color:#9CB4BB;border-radius:var(--r);
  transition:color .18s ease;letter-spacing:-.005em;
}
.seg label:hover{color:#D6E3E7}
.seg input:checked + label{color:#fff}
.seg input:focus-visible + label{outline:2px solid var(--clay-2);outline-offset:1px}
.seg-slide{
  position:absolute;z-index:1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);
  background:var(--clay);border-radius:var(--r);
  transition:transform .24s cubic-bezier(.4,0,.2,1);
}
.seg input:nth-of-type(2):checked ~ .seg-slide{transform:translateX(100%)}
.seg input:nth-of-type(3):checked ~ .seg-slide{transform:translateX(200%)}
@media(prefers-reduced-motion:reduce){.seg-slide{transition:none}}

/* ---- fields ---- */
.calc .field{margin:0 0 18px}
.calc .field:last-child{margin-bottom:0}
.calc .field>label{
  display:block;font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:#8AA4AC;margin:0 0 7px;
}
.calc select,.calc input[type=number]{
  width:100%;font-family:var(--f-body);font-size:16.5px;font-weight:500;color:var(--ink);
  background:#fff;border:1px solid transparent;border-radius:var(--r);
  padding:13px 14px;min-width:0;appearance:none;
}
.calc select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px;
  cursor:pointer;text-overflow:ellipsis;
}
.calc select:disabled{color:var(--ink-4);cursor:wait}
.calc select:focus,.calc input:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 3px rgba(196,99,60,.4)}
.input-unit{position:relative}
.input-unit input{padding-right:64px}
.input-unit span{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.03em;
}
.field-hint{
  margin:8px 0 0;font-family:var(--f-mono);font-size:11.5px;color:#8AA4AC;
  letter-spacing:.02em;line-height:1.5;min-height:1px;text-align:left;
}
.field-hint b{color:var(--clay-2);font-weight:500}

/* ---- the readout ---- */
.calc-out{border-top:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16);padding:24px 26px 26px}
.calc-out[hidden]{display:none}
.res-label{
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#8AA4AC;margin:0 0 10px;text-align:left;
}
.res-amt{
  margin:0 0 4px;font-weight:700;letter-spacing:-.035em;color:#fff;line-height:1;
  font-size:clamp(30px,3.4vw,40px);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;text-align:left;
}
.res-amt i{font-style:normal;font-size:16px;font-weight:500;color:#8AA4AC;letter-spacing:0}
.res-sub{font-size:13px;color:#9CB4BB;margin:0 0 20px;text-align:left}
.res-sub b{color:#D6E3E7;font-weight:500}

/* labour vs materials, drawn rather than listed */
.split-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.12)}
.split-bar i{display:block;height:100%}
.split-bar .lab{background:var(--clay)}
.split-bar .mat{background:var(--sage)}
.split-key{
  list-style:none;padding:0;margin:12px 0 22px;display:flex;flex-wrap:wrap;gap:8px 24px;
}
.split-key li{
  margin:0;display:flex;align-items:center;gap:8px;font-size:13.5px;color:#9CB4BB;
}
.split-key i{width:9px;height:9px;border-radius:2px;flex:none}
.split-key b{font-family:var(--f-mono);font-weight:500;color:#fff;font-variant-numeric:tabular-nums}

/* supporting figures */
.res-meta{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;
  background:rgba(255,255,255,.10);border-radius:var(--r);overflow:hidden}
.res-meta>div{background:var(--ink);padding:12px 13px}
.res-meta dt{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#7E99A1;margin:0 0 5px;
}
.res-meta dd{margin:0;font-family:var(--f-mono);font-size:15px;color:#fff;font-variant-numeric:tabular-nums}

/* where this metro sits in the national wage range */
.rail{margin:22px 0 0}
.rail-cap{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#7E99A1;margin:0 0 10px;text-align:left;
}
.rail-track{position:relative;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--sage),var(--clay))}
.rail-pin{
  position:absolute;top:50%;width:3px;height:16px;border-radius:2px;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--ink);
}
.rail-ends{display:flex;justify-content:space-between;margin:9px 0 0;
  font-family:var(--f-mono);font-size:10.5px;color:#7E99A1}
.res-note{font-size:12.5px;color:#87A0A8;margin:20px 0 0;line-height:1.55;text-align:left}

@media(max-width:520px){
  .calc-head{padding:20px 20px 17px}
  .calc-body{padding:19px 20px 21px}
  .calc-out{padding:20px 20px 22px}
}

.calc-embed{margin:30px 0 34px;max-width:560px}

/* ============================================================
   5. STATS RIBBON
   Four figures with a real hierarchy: a mono micro-label above,
   the number as the loudest thing on the strip, hairline rules
   between, and the source stated rather than assumed.
   ============================================================ */
.statband{background:var(--ink);color:#fff}
.stats{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
}
.stat{padding:32px 30px;border-left:1px solid rgba(255,255,255,.13)}
.stat:first-child{border-left:0;padding-left:0}
.stat-lab{
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--clay-2);margin:0 0 12px;
}
.stat-k{
  margin:0;font-weight:700;color:#fff;line-height:1;letter-spacing:-.035em;
  font-size:clamp(27px,3vw,37px);font-variant-numeric:tabular-nums;
}
.stat-k em{font-style:normal;font-weight:500;font-size:.42em;color:#8AA4AC;margin-left:3px;letter-spacing:-.01em}
.stat-v{margin:11px 0 0;font-size:13px;color:#9CB4BB;line-height:1.45;text-align:left}
.stat-bar{margin:13px 0 0;height:4px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.stat-bar i{display:block;height:100%;background:var(--clay);border-radius:99px}
.stats-src{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 26px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:#6F8A93;
}
.stats-src a{color:#8AA4AC}
@media(max-width:900px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:24px 20px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}
}
@media(max-width:460px){
  .stats{grid-template-columns:1fr}
  .stat{border-left:0;padding:20px 0}
  .stat:nth-child(n+2){border-top:1px solid rgba(255,255,255,.13)}
}

/* ============================================================
   6. SECTIONS
   ============================================================ */
.section{padding:68px 0}
.section.alt{background:var(--surface);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.section-head{max-width:760px;margin:0 0 38px}
.section-head p{color:var(--ink-2);margin-bottom:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:52px;align-items:start}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:34px}.section{padding:48px 0}}

/* extractive answer: the 40-word block that snippets and AI Overviews quote */
.answer{
  background:var(--surface);border-left:3px solid var(--clay);
  padding:20px 24px;margin:0 0 26px;border-radius:0 var(--r) var(--r) 0;
}
.answer p{margin:0;font-size:18px;line-height:1.6;color:var(--ink)}
.section.alt .answer{background:var(--paper)}

/* honest limits: the E-E-A-T signal almost nobody ships */
.limits{border:1px solid var(--rule);border-top:3px solid var(--sage);
  padding:22px 24px;border-radius:var(--r);background:var(--surface-2)}
.limits h3{font-size:19px;margin:0 0 12px}
.limits ul{margin:0;padding-left:1.1em}
.limits li{color:var(--ink-2);font-size:15.5px}

/* ---- labour vs materials bar: the insight, drawn ---- */
.mix{margin:0 0 8px}
.mix-bar{display:flex;height:44px;border-radius:var(--r);overflow:hidden;border:1px solid var(--rule)}
.mix-bar span{display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.mix-lab{background:var(--ink)}
.mix-mat{background:var(--sage)}
.mix-key{display:flex;gap:22px;flex-wrap:wrap;margin:12px 0 0;
  font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.mix-key i{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px}

/* ============================================================
   6b. JUSTIFIED BODY COPY
   Justification without hyphenation opens rivers of white space,
   so hyphens:auto is part of the rule, not an optional extra.
   ============================================================ */
.prose p,
.prose li,
.answer p,
.section-head p,
.faq .a p,
.limits li,
.table-note{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
}
/* very narrow columns cannot justify cleanly, fall back to ragged right */
@media(max-width:430px){
  .prose p,.prose li,.answer p,.section-head p,.faq .a p,.limits li,.table-note{
    text-align:left;
  }
}

/* ============================================================
   6c. EDITORIAL BAND
   One photograph, bled to the page edge, paired with a statement.
   Used once on the homepage as a breather between two dense data
   sections. The image is never tinted or overlaid with text.
   ============================================================ */
.band{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;background:var(--surface);
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
}
.band>*{min-width:0}
.band-fig{margin:0;line-height:0}
.band-fig img{width:100%;height:100%;object-fit:cover;display:block;min-height:280px}
.band-copy{padding:56px clamp(24px,5vw,72px) 56px 52px;max-width:640px}
.band-copy h2{margin:0 0 16px}
.band-copy p{color:var(--ink-2);margin:0;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
@media(max-width:900px){
  .band{grid-template-columns:1fr}
  .band-fig img{min-height:0;aspect-ratio:16/9}
  .band-copy{padding:34px var(--gut) 40px;max-width:none}
  .band-copy p{text-align:left}
}

/* in-content photograph */
.fig{margin:32px 0}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--r)}
.fig figcaption{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-3);
  margin:11px 0 0;padding-left:12px;border-left:2px solid var(--clay);line-height:1.55;
}

/* ============================================================
   7. TABLES. Numerals are the product, so they get real design.
   ============================================================ */
.table-scroll{overflow-x:auto;max-width:100%;min-width:0;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
table.data{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
table.data caption{
  text-align:left;padding:15px 18px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--rule);
}
table.data th,table.data td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--rule-soft)}
table.data thead th{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);
  border-bottom:1px solid var(--rule);white-space:nowrap;
}
table.data td.n,table.data th.n{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--surface-2)}
table.data a{font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule)}
table.data a:hover{border-bottom-color:var(--clay)}
.table-note{font-size:13.5px;color:var(--ink-3);margin:12px 0 0}

/* a value and its share of the national range, in the same cell */
.cellbar{display:block;height:3px;border-radius:99px;background:var(--rule-soft);margin:7px 0 0;min-width:56px}
.cellbar i{display:block;height:100%;border-radius:99px;background:var(--clay)}

/* ============================================================
   8. CARDS AND LINK GRIDS
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.svc{
  background:var(--surface);padding:24px 24px 26px;text-decoration:none;display:flex;
  flex-direction:column;position:relative;transition:background .15s ease;
}
.svc:hover{background:var(--surface-2)}
.svc::after{
  content:"";position:absolute;top:27px;right:24px;width:7px;height:7px;
  border-top:1.5px solid var(--ink-4);border-right:1.5px solid var(--ink-4);
  transform:rotate(45deg);transition:transform .18s ease,border-color .18s ease;
}
.svc:hover::after{transform:rotate(45deg) translate(2px,-2px);border-color:var(--clay)}
.svc h3{font-size:19.5px;margin:0 0 7px;color:var(--ink);padding-right:24px}
.svc p{font-size:14px;color:var(--ink-3);margin:0 0 18px;line-height:1.5}
.svc .amt-lab{
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);display:block;margin:auto 0 5px;
}
.svc .amt{
  font-family:var(--f-body);font-weight:700;font-size:19px;color:var(--ink);
  display:block;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}

.metro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:2px 28px}
.metro-grid a{
  display:block;padding:11px 0 10px;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;transition:border-color .15s ease;
}
.metro-grid a:hover{border-bottom-color:var(--clay)}
.metro-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.metro-row span:first-child{font-size:15px;color:var(--ink);line-height:1.3}
.metro-row .n{
  font-family:var(--f-mono);font-size:13px;color:var(--clay-ink);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.metro-bar{display:block;height:3px;border-radius:99px;background:var(--rule-soft);margin:7px 0 0}
.metro-bar i{display:block;height:100%;border-radius:99px;background:var(--clay);opacity:.72}
.metro-grid a:hover .metro-bar i{opacity:1}

/* ============================================================
   9. FAQ, BREADCRUMB, PROSE
   ============================================================ */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:0}
.faq details[open]{background:var(--surface)}
.section.alt .faq details[open]{background:var(--paper)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 42px 19px 16px;position:relative;
  transition:color .15s ease;
  font-family:var(--f-display);font-weight:600;font-size:18.5px;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--clay-ink)}
.faq summary::after{
  content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 42px 20px 16px}
.faq .a p{margin:0;color:var(--ink-2)}

.crumb{padding:18px 0 0;font-size:13.5px;color:var(--ink-3)}
.crumb a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule)}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 7px;color:var(--ink-4)}

.page-body{padding:8px 0 68px}

/* ============================================================
   6d. INNER PAGE GRID
   Three source-order pieces (intro, the calculator, the long-form
   body) rather than the usual two, specifically so the calculator
   can sit BETWEEN the intro and the body in the markup. On desktop
   grid-template-areas puts it beside the intro exactly as a normal
   sidebar would; on mobile, where the grid collapses to one column
   and areas fall back to plain source order, that same markup order
   means the calculator lands right after the page's opening numbers
   instead of at the very bottom, under the FAQ and honest-limits.
   ============================================================ */
.pagegrid{
  display:grid;align-items:start;gap:52px 52px;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  grid-template-areas:
    "intro side"
    "body  side";
}
.pagegrid>*{min-width:0}
.pg-intro{grid-area:intro}
.pg-side{grid-area:side}
.pg-body{grid-area:body}
@media(max-width:940px){
  .pagegrid{
    grid-template-columns:1fr;
    grid-template-areas:"intro" "side" "body";
    gap:30px;
  }
  .pg-side{margin:0 0 6px}
}
.prose h2{margin-top:1.7em}
.prose h3{margin-top:1.5em}
.prose>*:first-child{margin-top:0}

/* ============================================================
   10. CLOSER + FOOTER
   ============================================================ */
.closer{background:var(--ink);color:#fff;padding:72px 0;text-align:center;position:relative}
.closer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--clay)}
.closer h2{color:#fff;max-width:19ch;margin:0 auto 16px;font-size:clamp(28px,3.2vw,42px)}
.closer p{color:#9CB4BB;max-width:54ch;margin:0 auto 30px;text-align:center}
.foot{background:var(--paper);border-top:1px solid var(--rule);padding:46px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}
.foot h4{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--clay-ink);margin:0 0 15px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:0 0 8px}
.foot a{font-size:14.5px;color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--clay-ink)}
.foot-note{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-blurb{font-size:14px;color:var(--ink-3);margin:12px 0 0;max-width:38ch;line-height:1.55}

/* source citation, used wherever a BLS figure appears */
.src{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-4);letter-spacing:.02em;
  margin:14px 0 0;display:block}
.src a{color:var(--ink-3)}

@media print{.head,.foot,.closer,.calc{display:none}}