/* ==========================================================================
   America's Dealers and Distributors
   --------------------------------------------------------------------------
   Visual language is taken from flagpole spec sheets and technical drawings:
   hairline dimension rules, measurement annotations, tabular figures, and a
   left-aligned asymmetric grid. Material palette, not a web palette —
   ink, aluminum, brass. Brass references the ball ornament on a real pole.

   Flag red appears ONCE per view, on the primary action, and nowhere else.
   --------------------------------------------------------------------------
    1. Tokens            2. Reset            3. Type
    4. Grid / rules      5. Buttons          6. Header
    7. Hero              8. Spec strip       9. Sizer (questionnaire)
   10. Scale drawing    11. Product cards   12. Basics / explainers
   13. Forms            14. Locations       15. Content
   16. Footer           17. Responsive
   ========================================================================== */

/* ---------- 1. TOKENS ----------
   Warm and daylight, not industrial gloom. Cream paper for the ground, a deep
   friendly blue for the dark sections, sky blue lifted straight out of the
   photographs, the gold ball ornament that tops every Eder pole, and Old Glory
   Red doing double duty as the flag and the single primary action.          */
:root{
  /* warm neutrals */
  --cream:#FBF8F3;            /* page ground */
  --cream-2:#F3EDE3;          /* recessed panel */
  --cream-3:#E6DDCF;          /* edge */
  --sand:#C9BBA6;             /* warm mid, and light marks on a dark ground */
  --sand-500:#A99C8B;         /* rules and non-text marks */
  --warm-600:#6B6154;         /* muted text */
  --warm-700:#5B5445;         /* secondary text */

  /* the deep blue of the sections */
  --navy:#1E3A5F;
  --navy-deep:#16293F;
  --navy-mid:#2A4A73;

  /* sky, taken from the photography */
  --sky:#7FB2D9;
  --sky-deep:#2A6494;

  /* the flag */
  --red:#B22234;              /* Old Glory Red. The primary action, nothing else */
  --red-deep:#8C1A29;

  /* the gold ball ornament that tops every pole */
  --gold:#D9A741;             /* on a dark ground, and as a fill */
  --gold-deep:#8A6218;        /* gold as text on a light ground */

  --white:#fff;

  /* drawing rules */
  --rule:rgba(169,156,139,.42);
  --rule-strong:rgba(30,58,95,.20);
  --rule-ink:rgba(255,255,255,.17);

  /* a soft daylight sheen across the dark sections */
  --satin:linear-gradient(100deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 38%,
      rgba(255,255,255,.09) 47%, rgba(255,255,255,.03) 56%,
      rgba(255,255,255,0) 100%);

  --sh-1:0 1px 2px rgba(60,48,32,.05);
  --sh-2:0 1px 3px rgba(60,48,32,.06), 0 10px 26px rgba(60,48,32,.07);
  --sh-3:0 2px 6px rgba(60,48,32,.07), 0 22px 52px rgba(60,48,32,.13);

  --r-sm:3px; --r:5px; --r-lg:7px;

  --display:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --head-h:76px;
  --gut:clamp(20px,4vw,40px);

  /* ---- aliases, so the rest of the sheet keeps reading ---- */
  --graphite:var(--navy);
  --graphite-deep:var(--navy-deep);
  --alum-50:var(--cream);
  --alum-100:var(--cream-2);
  --alum-200:var(--cream-3);
  --alum-300:var(--sand);
  --alum-500:var(--sand-500);
  --alum-600:var(--warm-600);
  --alum-700:var(--warm-700);
  --ink:var(--navy);
  --ink-deep:var(--navy-deep);
  --ink-mid:var(--navy-mid);
  --paper:var(--cream);
  --paper-2:var(--cream-2);
  --paper-3:var(--cream-3);
  --steel:var(--sand-500);
  --steel-dark:var(--warm-600);
  --steel-light:var(--sand);
  --brass:var(--gold);
  --brass-deep:var(--gold-deep);
  --brass-pale:#F6E9CD;
  --flag-red:var(--red);
  --flag-red-deep:var(--red-deep);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-size:18px;line-height:1.72;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
::selection{background:var(--brass-pale)}
[hidden]{display:none!important}

/* ---------- 3. TYPE ---------- */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;color:var(--ink);
  letter-spacing:-.011em;line-height:1.14;text-wrap:balance;
}
h1{font-size:clamp(36px,4.6vw,60px);line-height:1.08;letter-spacing:-.016em}
h2{font-size:clamp(27px,3.1vw,40px);line-height:1.14;letter-spacing:-.012em}
h3{font-size:clamp(19.5px,1.7vw,24px);line-height:1.28;letter-spacing:-.006em}
h4{font-size:18px;line-height:1.32;letter-spacing:-.004em}
p{max-width:66ch}
b,strong{font-weight:600}

/* spec-sheet section label: 01 — SIZING */
.label{
  display:flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--warm-600);
}
.label::before{
  content:"";width:26px;height:1px;background:var(--brass);flex:none;
  box-shadow:0 -3px 0 -2px var(--brass), 0 3px 0 -2px var(--brass); /* dimension ticks */
}
.label .num{color:var(--brass-deep);font-variant-numeric:tabular-nums}
.on-ink .label,.on-ink-deep .label,.hero .label,.band .label{color:var(--steel-light)}

.lede{font-size:clamp(18.5px,1.4vw,21px);line-height:1.62;color:var(--ink);opacity:.9}
.fine{font-size:16.5px;line-height:1.6;color:var(--warm-600)}
.mono{font-family:var(--mono);font-size:15.5px;letter-spacing:.02em;color:var(--warm-600)}

/* ---------- 4. GRID / RULES ---------- */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.wrap-tight{max-width:940px}
section{padding:clamp(52px,6.4vw,96px) 0;position:relative}

/* asymmetric technical grid: content sits left, notes hang right */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gut)}
.col-7{grid-column:1/8}
.col-8{grid-column:1/9}
.col-5{grid-column:1/6}
.col-r4{grid-column:9/13}
.col-full{grid-column:1/-1}

/* hairline dimension rules */
.rule{height:1px;background:var(--rule);border:none}
.rule-tick{position:relative;height:1px;background:var(--rule);border:none}
.rule-tick::before,.rule-tick::after{
  content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--rule);
}
.rule-tick::before{left:0}
.rule-tick::after{right:0}

.sec-head{margin-bottom:clamp(26px,3vw,44px)}
.sec-head .label{margin-bottom:16px}
.sec-head h2{margin-bottom:14px;max-width:24ch}
.sec-head p{color:var(--ink);opacity:.82;font-size:18.5px;line-height:1.62;max-width:62ch}

/* grounds */
.on-paper{background:var(--paper)}
.on-paper-2{background:var(--paper-2)}
.on-ink{background:var(--graphite);color:var(--alum-50);position:relative;isolation:isolate}
.on-ink-deep{background:var(--graphite-deep);color:var(--alum-50);position:relative;isolation:isolate}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4,
.on-ink-deep h1,.on-ink-deep h2,.on-ink-deep h3,.on-ink-deep h4{color:var(--paper)}
.on-ink .lede,.on-ink-deep .lede{color:var(--steel-light);opacity:1}
.on-ink .sec-head p,.on-ink-deep .sec-head p{color:var(--steel-light);opacity:1}
.on-ink .fine,.on-ink-deep .fine{color:var(--steel)}
.on-ink .rule,.on-ink .rule-tick,
.on-ink-deep .rule,.on-ink-deep .rule-tick{background:var(--rule-ink)}
.on-ink .rule-tick::before,.on-ink .rule-tick::after,
.on-ink-deep .rule-tick::before,.on-ink-deep .rule-tick::after{background:var(--rule-ink)}

/* satin sheen: a soft directional highlight across every anodized ground, the
   way light falls along the length of a real pole */
.hero::before,.on-ink::before,.on-ink-deep::before,.band::before{
  content:"";position:absolute;inset:0;background:var(--satin);
  pointer-events:none;z-index:0;
}
.hero > *,.on-ink > *,.on-ink-deep > *,.band > *{position:relative;z-index:1}

/* a machined hairline where an anodized ground meets paper */
.on-ink,.on-ink-deep,.hero,.band{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.25);
}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:.005em;
  padding:15px 28px;border:1px solid transparent;border-radius:var(--r);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s,transform .1s;
}
.btn svg{width:16px;height:16px;flex:none}
.btn:active{transform:translateY(1px)}

/* THE single red element per view */
.btn-primary{background:var(--flag-red);color:#fff;border-color:var(--flag-red)}
.btn-primary:hover{background:var(--flag-red-deep);border-color:var(--flag-red-deep)}

.btn-brass{background:var(--alum-300);color:var(--graphite);border-color:var(--alum-300)}
.btn-brass:hover{background:var(--alum-200);border-color:var(--alum-200)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:var(--ink-mid);border-color:var(--ink-mid)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-line:hover{border-color:var(--ink);background:rgba(18,35,63,.03)}
.on-ink .btn-line,.on-ink-deep .btn-line,.hero .btn-line,.band .btn-line{color:var(--paper);border-color:rgba(255,255,255,.32)}
.on-ink .btn-line:hover,.on-ink-deep .btn-line:hover,.hero .btn-line:hover,.band .btn-line:hover{border-color:var(--paper);background:rgba(255,255,255,.07)}
.btn-lg{padding:19px 36px;font-size:18px}
.btn-sm{padding:10px 18px;font-size:16px}
.btn-block{width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* quiet text link with a drawn arrow */
.tlink{
  display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass);
  padding-bottom:2px;transition:gap .16s,color .16s;
}
.tlink svg{width:14px;height:14px}
.tlink:hover{gap:12px;color:var(--brass-deep)}
.on-ink .tlink,.on-ink-deep .tlink,.hero .tlink,.band .tlink{color:var(--paper)}
.on-ink .tlink:hover,.on-ink-deep .tlink:hover,.hero .tlink:hover,.band .tlink:hover{color:var(--brass)}

/* ---------- 6. HEADER ---------- */
.topbar{
  background:var(--ink-deep);color:var(--steel-light);
  font-size:14px;letter-spacing:.02em;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:36px;flex-wrap:nowrap}
.topbar-left{display:flex;align-items:center;gap:16px;min-width:0}
.topbar b{color:var(--paper);font-weight:600}
.topbar .flagmark{
  display:inline-flex;align-items:center;gap:7px;color:var(--gold);
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;font-size:13px;white-space:nowrap;
}
.topbar .flagmark::before{content:"";width:16px;height:1px;background:var(--brass)}
.topbar-right{display:flex;align-items:center;gap:22px}
.topbar a{color:var(--steel-light);text-decoration:none;display:inline-flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap}
.topbar a:hover{color:var(--paper)}
.topbar svg{width:13px;height:13px;color:var(--brass);flex:none}

header.site{
  background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:90;
  border-bottom:1px solid rgba(255,255,255,.1);
}
header.site .wrap{display:flex;align-items:stretch;gap:14px;min-height:var(--head-h)}

.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--paper);flex:none;padding:11px 0}
.brand .mark{width:50px;height:50px;flex:none;background:var(--paper);border-radius:50%;padding:1px}
.brand-text{
  font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1.14;
  letter-spacing:-.005em;color:var(--paper);
}
.brand-text small{
  display:block;font-family:var(--sans);font-weight:500;font-size:12.5px;
  letter-spacing:.17em;color:var(--brass);margin-top:5px;text-transform:uppercase;
}

.mainnav{display:flex;align-items:stretch;margin-left:auto}
.mainnav > li{display:flex;position:relative}
.mainnav > li > a{
  display:flex;align-items:center;gap:6px;padding:0 16px;
  color:var(--steel-light);text-decoration:none;font-weight:600;font-size:16px;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.mainnav > li > a:hover{color:var(--paper)}
.mainnav > li > a[aria-current]{color:var(--paper);border-bottom-color:var(--brass)}
.mainnav .caret{width:10px;height:10px;opacity:.6;transition:transform .18s}
.mainnav > li.open > a .caret{transform:rotate(180deg)}

/* the walk-the-line menu, drawn like a spec sheet */
.dropdown{
  position:absolute;top:100%;left:0;min-width:620px;
  background:var(--paper);border:1px solid var(--paper-3);border-top:2px solid var(--brass);
  box-shadow:var(--sh-3);padding:8px;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:5;
}
.mainnav > li:hover .dropdown,.mainnav > li.open .dropdown{opacity:1;visibility:visible;transform:none}
.dd-title{
  grid-column:1/-1;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel-dark);padding:12px 14px 11px;border-bottom:1px solid var(--rule);margin-bottom:4px;
}
.dd-item{
  display:flex;gap:13px;align-items:flex-start;padding:12px 14px;
  text-decoration:none;transition:background .13s;position:relative;
}
.dd-item:hover{background:var(--paper-2)}
.dd-item .dd-ico{
  width:34px;height:34px;flex:none;border:1px solid var(--rule);
  display:grid;place-items:center;color:var(--ink);background:var(--white);
}
.dd-item .dd-ico svg{width:18px;height:18px}
.dd-item:hover .dd-ico{border-color:var(--brass);color:var(--brass-deep)}
.dd-item b{
  display:block;font-family:var(--display);font-size:17px;font-weight:600;
  color:var(--ink);line-height:1.15;letter-spacing:-.01em;
}
.dd-item span{display:block;font-size:14.5px;color:var(--steel-dark);line-height:1.45;margin-top:3px}
.dd-foot{
  grid-column:1/-1;margin-top:4px;padding:14px;border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.dd-foot span{font-size:15px;color:var(--steel-dark)}
.dd-foot a{font-size:15.5px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:2px}
.dd-foot a:hover{color:var(--brass-deep)}

/* The locations panel carries eleven states. Five bespoke icons did not scale, so
   the state entries wear the two-letter abbreviation instead -- the same token the
   map on locations.html uses -- and the panel runs three columns rather than two.
   Width is clamped to the viewport because the panel is absolutely positioned and
   would otherwise hang off the edge on a 1024px laptop. */
.dropdown.dd-wide{min-width:0;grid-template-columns:repeat(3,1fr)}
.dd-group{
  grid-column:1/-1;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-dark);padding:15px 14px 6px;
}
.dd-group:first-of-type{padding-top:8px}
.dd-item.dd-state{padding:9px 12px;gap:11px;align-items:center}
.dd-item.dd-state .dd-ico{width:30px;height:30px}
.dd-ico.dd-ab{
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--steel-dark);
}
.dd-item.dd-state:hover .dd-ico.dd-ab{color:var(--brass-deep)}
/* the region badge is one letter, so give it a little more presence than a
   two-letter state code */
.dd-ico.dd-ab.dd-region{font-family:var(--display);font-size:15px;font-weight:700}
.dd-item.dd-state b{font-size:16px}
.dd-item.dd-state span span,.dd-item.dd-state > span > span{font-size:13.5px;margin-top:1px}

.nav-tel{
  display:flex;align-items:center;gap:9px;color:var(--paper);text-decoration:none;
  font-weight:600;font-size:16.5px;white-space:nowrap;flex:none;padding:0 8px 0 16px;
  border-left:1px solid rgba(255,255,255,.13);margin-left:6px;
}
.nav-tel svg{width:16px;height:16px;color:var(--brass);flex:none}
.nav-tel small{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.16em;
  color:var(--alum-300);text-transform:uppercase;margin-top:1px;
}
.nav-tel:hover small{color:var(--brass)}
.nav-cta{
  align-self:center;background:var(--alum-300);color:var(--graphite);text-decoration:none;
  font-weight:600;font-size:16px;padding:12px 20px;border-radius:var(--r);
  white-space:nowrap;flex:none;transition:background .15s;
}
.nav-cta:hover{background:var(--alum-200)}

.navtoggle{
  display:none;align-self:center;background:transparent;border:1px solid rgba(255,255,255,.24);
  color:var(--paper);border-radius:var(--r);padding:9px 11px;cursor:pointer;flex:none;
}
.navtoggle svg{width:21px;height:21px}

/* ---------- 7. HERO ---------- */
.hero{background:var(--graphite);color:var(--alum-50);position:relative;overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.5vw,64px);
  align-items:center;padding-top:clamp(42px,5vw,74px);padding-bottom:clamp(46px,5.4vw,80px);
  position:relative;z-index:2;
}
.hero h1{color:var(--paper);margin-bottom:20px;max-width:15ch}
.hero h1 em{display:block;font-style:normal;color:var(--alum-300)}
.hero .lede{max-width:48ch;margin-bottom:28px}
.hero .btn-row{margin-bottom:30px}

/* dealer plate — reads like a stamped plate, not a badge */
.plate{
  display:inline-flex;align-items:center;gap:14px;background:var(--paper);
  padding:9px 18px 9px 14px;margin-bottom:24px;border-left:3px solid var(--brass);
}
.plate img{width:auto;height:19px}
.plate span{
  font-size:12.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink);padding-left:14px;border-left:1px solid var(--rule);
}

/* hero facts drawn as a dimensioned row */
.factrow{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule-ink)}
.factrow div{
  padding:16px 24px 0 0;margin-right:24px;position:relative;
  font-size:16px;color:var(--sand);font-weight:500;
}
.factrow div::before{
  content:"";position:absolute;top:0;left:0;width:1px;height:8px;background:var(--brass);
}
.factrow div b{display:block;font-family:var(--display);font-size:21px;font-weight:600;color:var(--paper);letter-spacing:-.01em}

/* hero photograph, with a dimension annotation */
.shot{position:relative}
.shot img{width:100%;height:auto;display:block}
.shot .anno{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(11,23,40,.9),transparent);
  padding:44px 20px 16px;
}
.shot .anno .mono{color:var(--steel-light);display:block;margin-bottom:3px}
.shot .anno b{font-family:var(--display);font-size:18px;color:var(--paper);font-weight:600}
.shot::after{
  content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.18);pointer-events:none;
}

/* ---------- 8. SPEC STRIP ---------- */
.specstrip{background:var(--paper-2);border-bottom:1px solid var(--paper-3)}
.specstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.specstrip .cell{padding:26px 24px 26px 0;position:relative}
.specstrip .cell + .cell{padding-left:26px;border-left:1px solid var(--rule)}
.specstrip b{
  display:block;font-family:var(--display);font-size:clamp(21px,2.2vw,29px);
  font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em;
}
.specstrip span{display:block;font-size:16px;color:var(--warm-600);margin-top:9px;line-height:1.5}

/* flag stripe rule, used once at the hero seam */
.stripe{height:3px;display:flex;flex:none}
.stripe i{flex:1}
.stripe i:nth-child(1){background:var(--red);flex:2}
.stripe i:nth-child(2){background:var(--gold);flex:1}
.stripe i:nth-child(3){background:var(--graphite);flex:9}

/* ---------- 9. SIZER (the guided questionnaire) ----------
   Deliberately open, not a walled-off wizard: the panel sits on the left and a
   live rail of real flagpoles narrows alongside it, so nobody feels boxed in. */
.sizer{
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  gap:0;border:1px solid var(--paper-3);background:var(--white);box-shadow:var(--sh-2);
}
.sizer-main{border-right:1px solid var(--paper-3);min-width:0}

/* step counter drawn as 1/4 */
.sizer-top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px clamp(24px,3.4vw,48px);border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.stepno{
  font-family:var(--display);font-weight:700;font-size:25px;color:var(--ink);
  letter-spacing:-.01em;line-height:1;display:flex;align-items:baseline;gap:1px;
}
.stepno .of{font-size:17px;color:var(--steel-dark);font-weight:400}
.stepno em{font-style:normal;font-size:17px;color:var(--steel-dark)}
.sizer-top .who{font-size:13.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--steel-dark)}
.pips{display:flex;gap:5px;align-items:center}
.pips i{width:26px;height:2px;background:var(--paper-3);transition:background .25s}
.pips i.on{background:var(--brass)}

.sizer-body{padding:clamp(28px,3.2vw,44px) clamp(24px,3.4vw,48px)}
.sizer-step{display:none}
.sizer-step.on{display:block;animation:stepIn .28s ease}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sizer-q{
  font-family:var(--display);font-size:clamp(21px,2.1vw,28px);font-weight:700;
  color:var(--ink);letter-spacing:-.012em;line-height:1.2;margin-bottom:10px;
}
.sizer-help{font-size:18px;color:var(--warm-600);line-height:1.62;margin-bottom:26px;max-width:58ch}
.sizer-help b{color:var(--ink)}

/* answer choices — drawn plates, not pills */
.picks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* the three exposure answers belong on one row: two-and-an-orphan reads
   like the third is an afterthought, and it is the one that costs most */
.picks.three-up{grid-template-columns:repeat(3,1fr)}
.picks.p3{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.pick{
  position:relative;display:block;width:100%;min-width:0;text-align:left;cursor:pointer;
  background:var(--white);border:1px solid var(--rule-strong);padding:0;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.pick:hover{border-color:var(--brass);background:var(--paper)}
.pick.sel{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.pick.sel::after{
  content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-top:20px solid var(--brass);border-left:20px solid transparent;
}
.pick-art{
  aspect-ratio:420/300;background:var(--paper-2);border-bottom:1px solid var(--rule);
  display:block;overflow:hidden;position:relative;
}
.pick-art.photo{aspect-ratio:3/4}
.pick-art img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.pick-art svg{width:100%;height:100%;display:block}
.pick-txt{padding:20px 22px 22px}
.pick-txt b{
  display:block;font-family:var(--display);font-size:18.5px;font-weight:600;
  color:var(--ink);letter-spacing:-.01em;line-height:1.2;
}
.pick-txt span{display:block;font-size:16.5px;color:var(--warm-600);margin-top:8px;line-height:1.55}
.pick-txt .meas{
  display:block;font-family:var(--mono);font-size:15px;color:var(--gold-deep);
  margin-top:10px;letter-spacing:.02em;
}
/* compact choice, no artwork */
.pick.flat .pick-txt{padding:20px 22px}

.sizer-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);
}
.backlink{
  background:none;border:none;cursor:pointer;padding:8px 0;
  font-size:17px;font-weight:600;color:var(--warm-600);
  display:inline-flex;align-items:center;gap:8px;
}
.backlink:hover{color:var(--ink)}
.backlink svg{width:14px;height:14px}
.sizer-note{font-size:16px;color:var(--warm-600);max-width:36ch;line-height:1.55}

/* the live rail of real poles beside the questions */
.rail{padding:22px clamp(20px,2.2vw,28px);background:var(--paper);min-width:0}
.rail-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--rule);
}
.rail-top .label{margin:0}
.rail-count{font-family:var(--mono);font-size:14px;color:var(--steel-dark)}
.railcards{display:grid;gap:10px}
.railcard{
  display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:center;
  background:var(--white);border:1px solid var(--rule);padding:13px;
  text-decoration:none;transition:border-color .18s,opacity .25s,transform .18s;
}
.railcard:hover{border-color:var(--brass)}
.railcard img{width:60px;height:76px;object-fit:cover;object-position:center 16%;background:var(--paper-2)}
.railcard b{
  display:block;font-family:var(--display);font-size:17px;font-weight:600;
  color:var(--ink);line-height:1.2;letter-spacing:-.01em;
}
.railcard .rc-official{display:block;font-family:var(--mono);font-size:14px;color:var(--warm-600);margin-top:5px}
.railcard .rc-meta{display:block;font-size:15.5px;color:var(--warm-600);margin-top:6px}
.railcard.dim{opacity:.34}
.railcard.hit{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.rail-foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule)}

/* ---------- the recommendation ---------- */
.result{border-top:1px solid var(--paper-3);background:var(--paper);padding:clamp(28px,3.2vw,44px) clamp(24px,3.4vw,48px)}
.result-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,3vw,40px);align-items:start}
.res-label{margin-bottom:14px}
.res-name{
  font-family:var(--display);font-size:clamp(23px,2.3vw,31px);font-weight:700;
  color:var(--ink);letter-spacing:-.014em;line-height:1.16;margin-bottom:8px;
}
.res-official{font-family:var(--mono);font-size:16px;color:var(--brass-deep);letter-spacing:.03em;margin-bottom:20px}
.res-photo{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 30%;border:1px solid var(--rule);margin-bottom:18px}

/* spec table drawn as a dimension list */
.speclist{border-top:1px solid var(--rule)}
.speclist div{
  display:flex;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--rule);font-size:17.5px;
}
.speclist dt{color:var(--steel-dark)}
.speclist dd{font-weight:600;color:var(--ink);text-align:right}

.res-why{background:var(--white);border:1px solid var(--rule);padding:22px}
.res-why h4{font-family:var(--display);font-size:17px;margin-bottom:13px;color:var(--ink)}
.res-why p{font-size:17px;line-height:1.66;color:var(--ink);opacity:.88}
.res-why p + p{margin-top:12px}

.pricebox{background:var(--ink);color:var(--paper);padding:22px;margin-top:18px}
.pricebox .pl{display:block;font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.pricebox .pv{display:block;font-family:var(--display);font-size:42px;font-weight:600;line-height:1.02;margin:8px 0 4px;letter-spacing:-.03em}
.pricebox .pn{display:block;font-size:16.5px;color:var(--sand);line-height:1.6;margin-top:6px}
.pricebox .pn b{color:var(--cream);font-weight:600}
.pricebox .save{
  display:inline-block;margin-top:12px;font-family:var(--mono);font-size:14px;
  color:var(--brass);border:1px solid var(--brass);padding:4px 10px;letter-spacing:.03em;
}

/* halyard choice, explained plainly */
.halyard{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule)}
.halyard > .label{margin-bottom:14px}
.hal-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hal{
  text-align:left;cursor:pointer;background:var(--white);
  border:1px solid var(--rule-strong);padding:20px 22px;transition:border-color .15s,box-shadow .15s;
}
.hal:hover{border-color:var(--brass)}
.hal.sel{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.hal b{display:block;font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink);line-height:1.2}
.hal .plain{display:block;font-size:16.5px;color:var(--ink);opacity:.85;margin-top:9px;line-height:1.55}
.hal .who{display:block;font-family:var(--mono);font-size:14.5px;color:var(--gold-deep);margin-top:11px}
.hal .delta{display:block;font-size:15.5px;color:var(--warm-600);margin-top:8px}

/* ---------- 10. SCALE DRAWING (the one bold interactive moment) ----------
   A real elevation drawing: building silhouette at N floors with the pole
   beside it, both to the same scale, plus a dimension line down the side. */
.scaler{background:var(--white);border:1px solid var(--paper-3);box-shadow:var(--sh-2)}
.scaler-top{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:20px clamp(20px,2.4vw,32px);border-bottom:1px solid var(--rule);background:var(--paper);
}
.scaler-top h3{font-size:clamp(18px,1.7vw,23px);margin:0}
.heightpicker{display:flex;flex-wrap:wrap;gap:6px}
.hbtn{
  font-family:var(--mono);font-size:16px;font-weight:500;cursor:pointer;
  background:var(--white);border:1px solid var(--rule-strong);color:var(--ink);
  padding:11px 16px;transition:background .14s,border-color .14s,color .14s;
}
.hbtn:hover{border-color:var(--brass)}
.hbtn.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.scaler-stage{
  padding:clamp(18px,2.4vw,30px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(20px,3vw,38px);align-items:stretch;
}
.stage-draw{
  background:
    linear-gradient(var(--paper-2) 1px, transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg, var(--paper-2) 1px, transparent 1px) 0 0/28px 100%,
    var(--white);
  border:1px solid var(--rule);position:relative;min-height:400px;
}
.stage-draw svg{width:100%;height:100%;display:block}
.stage-read{display:flex;flex-direction:column;justify-content:center}
.stage-read .big{
  font-family:var(--display);font-size:clamp(32px,3.6vw,48px);font-weight:700;
  color:var(--ink);letter-spacing:-.022em;line-height:1.04;
}
.stage-read .big em{font-style:normal;font-size:.42em;color:var(--warm-600);letter-spacing:0}
.stage-read .floors{font-family:var(--mono);font-size:16.5px;color:var(--gold-deep);margin-top:11px}
.stage-read .desc{font-size:18px;color:var(--ink);opacity:.86;line-height:1.62;margin-top:16px}
.stage-read .flagsize{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:17px;color:var(--warm-600);
}
.stage-read .flagsize b{display:block;font-family:var(--display);font-size:22px;color:var(--ink);margin-top:4px;font-weight:600}
.stage-read .btn-row{margin-top:22px}

/* drawing primitives */
.dwg-pole{fill:url(#satin);stroke:var(--alum-600);stroke-width:.5}
.dwg-ball{fill:var(--gold);stroke:var(--gold-deep);stroke-width:.6}
.dwg-flag{fill:var(--red)}
.dwg-flag-union{fill:#3C3B6E}
.dwg-bldg{fill:var(--cream-2);stroke:var(--warm-600);stroke-width:.7}
.dwg-floor{stroke:var(--steel);stroke-width:.5;stroke-dasharray:3 3}
.dwg-win{fill:var(--sky);opacity:.55}
.dwg-dim{stroke:var(--gold-deep);stroke-width:.7}
.dwg-dimtxt{fill:var(--gold-deep);font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:600}
.dwg-lbl{fill:var(--warm-600);font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:600}
.dwg-ground{stroke:var(--graphite);stroke-width:1}
.dwg-person{fill:var(--steel-dark);opacity:.65}

/* ---------- 11. PRODUCT CARDS ---------- */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.prods.p4{grid-template-columns:repeat(4,1fr)}
.prod{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--rule);text-decoration:none;position:relative;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.prod:hover{border-color:var(--alum-500);box-shadow:var(--sh-2);transform:translateY(-2px)}
.prod-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--paper-2);flex:none}
.prod-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .5s ease}
.prod:hover .prod-img img{transform:scale(1.04)}
.prod-flag{
  position:absolute;top:0;left:0;background:var(--ink);color:var(--paper);
  font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:6px 11px;
}
.prod-flag.brass{background:var(--brass);color:var(--ink)}
.prod-body{padding:clamp(20px,1.9vw,26px);display:flex;flex-direction:column;flex:1}
/* plain-language name first, official name underneath */
.prod-body h3{font-size:20px;margin-bottom:7px;letter-spacing:-.015em}
.prod-official{font-family:var(--mono);font-size:15px;color:var(--gold-deep);letter-spacing:.02em;margin-bottom:14px}
.prod-body p{font-size:17px;color:var(--ink);opacity:.84;margin-bottom:18px;flex:1;line-height:1.6}
.prod-specs{border-top:1px solid var(--rule);margin-bottom:16px}
.prod-specs div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:16px}
.prod-specs dt{color:var(--steel-dark)}
.prod-specs dd{font-weight:600;font-variant-numeric:tabular-nums}
.prod-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.prod-price{font-size:14.5px;color:var(--warm-600);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.prod-price b{display:block;font-family:var(--display);font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.014em;margin-top:4px}
.prod-go{font-size:16.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px;border-bottom:1px solid var(--brass);padding-bottom:2px}
.prod-go svg{width:14px;height:14px;transition:transform .18s}
.prod:hover .prod-go svg{transform:translateX(3px)}

/* ---------- 12. BASICS / EXPLAINERS ---------- */
.basics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.basic{border-top:2px solid var(--ink);padding-top:22px}
.basic:nth-child(2){border-top-color:var(--brass)}
.basic:nth-child(3){border-top-color:var(--steel)}
.basic .n{font-family:var(--mono);font-size:15px;color:var(--warm-600);letter-spacing:.1em;display:block;margin-bottom:13px}
.basic h3{font-size:21px;margin-bottom:11px;letter-spacing:-.015em}
.basic p{font-size:17.5px;color:var(--ink);opacity:.86;line-height:1.62}
.basic p + p{margin-top:11px}
.basic .tlink{margin-top:15px}

/* plain-English term list */
.terms{border-top:1px solid var(--rule)}
.terms > div{
  display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:var(--gut);
  padding:22px 0;border-bottom:1px solid var(--rule);align-items:start;
}
.terms dt{font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.terms dt small{display:block;font-family:var(--mono);font-size:15px;color:var(--brass-deep);font-weight:400;margin-top:5px;letter-spacing:.03em}
.terms dd{font-size:18px;color:var(--ink);opacity:.88;line-height:1.66}
.terms dd b{opacity:1}

/* reassurance columns, sits low on the page */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.reason{padding-top:20px;border-top:1px solid var(--rule-ink)}
.reason h3{font-size:20px;margin-bottom:12px}
.reason > p{font-size:16px;color:var(--steel-light);margin-bottom:16px;line-height:1.6}
.ticks{display:grid;gap:11px}
.ticks li{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:17px;line-height:1.58;color:var(--ink);opacity:.88}
.ticks li svg{width:16px;height:16px;margin-top:4px;color:var(--brass-deep);opacity:1}
.ticks b{color:var(--ink);font-weight:600}
.on-ink .ticks li,.on-ink-deep .ticks li,.hero .ticks li,.band .ticks li{color:var(--steel-light);opacity:1}
.on-ink .ticks b,.on-ink-deep .ticks b,.hero .ticks b,.band .ticks b{color:var(--paper)}
.on-ink .ticks li svg,.on-ink-deep .ticks li svg,.hero .ticks li svg{color:var(--brass)}
.on-paper .reason,.on-paper-2 .reason{border-top-color:var(--rule)}
.on-paper .reason > p,.on-paper-2 .reason > p{color:var(--ink);opacity:.8}

/* numbered process, drawn as a dimensioned run */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);counter-reset:s}
.step{padding-top:26px;border-top:1px solid var(--rule);position:relative}
.step::before{
  counter-increment:s;content:"0" counter(s);
  position:absolute;top:-1px;left:0;padding-top:9px;
  font-family:var(--mono);font-size:14px;color:var(--brass);letter-spacing:.08em;
}
.step::after{content:"";position:absolute;top:-1px;left:0;width:22px;height:2px;background:var(--brass)}
.step h3{font-size:20px;margin:26px 0 10px}
.step p{font-size:17px;color:var(--ink);opacity:.84;line-height:1.58}
.on-ink .step,.on-ink-deep .step{border-top-color:var(--rule-ink)}
.on-ink .step p,.on-ink-deep .step p{color:var(--steel-light);opacity:1}

/* ---------- 13. FORMS ---------- */
.formwrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:0;border:1px solid var(--paper-3);background:var(--white)}
.formmain{padding:clamp(24px,3vw,40px);border-right:1px solid var(--paper-3);min-width:0}
.formmain > .label{margin-bottom:16px}
.formmain h2{margin-bottom:12px}
.formmain > p{font-size:18.5px;color:var(--ink);opacity:.85;margin-bottom:26px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:15.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--warm-600)}
.field label .req{color:var(--flag-red)}
.field input,.field select,.field textarea{
  width:100%;background:var(--white);border:1px solid var(--rule-strong);border-radius:var(--r-sm);
  padding:15px 16px;font-size:18px;font-family:var(--sans);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:118px;resize:vertical;line-height:1.55}
.field select{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6675' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brass);box-shadow:0 0 0 3px rgba(184,134,59,.16);outline:none;
}
.field input::placeholder,.field textarea::placeholder{color:var(--steel)}
.formfoot{margin-top:24px;padding-top:22px;border-top:1px solid var(--rule);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.formfoot .fine{max-width:60ch}
.formfoot .fine a{font-weight:600;border-bottom:1px solid var(--brass);text-decoration:none}
.sent{border:1px solid var(--brass);background:var(--brass-pale);padding:28px}
.sent h3{margin-bottom:10px}
.sent p{font-size:16.5px;color:var(--ink);opacity:.85}

.formside{padding:clamp(24px,3vw,32px);background:var(--paper);min-width:0}
.formside h3{font-size:18px;margin-bottom:16px}
.formside .ticks{margin-bottom:26px}
.formside .ticks li{color:var(--ink);opacity:.85}
.formside .ticks b{color:var(--ink)}
.contactline{display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--rule);text-decoration:none}
.contactline:last-child{border-bottom:1px solid var(--rule)}
.contactline svg{width:16px;height:16px;color:var(--brass);flex:none;margin-top:4px}
.contactline b{display:block;font-size:18px;color:var(--ink);font-weight:600}
.contactline span{display:block;font-size:16px;color:var(--warm-600);margin-top:3px}

/* ---------- 14. LOCATIONS ---------- */
.stategrid{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;max-width:740px}
.st{
  grid-column:var(--c);grid-row:var(--r);aspect-ratio:1;
  background:var(--steel-dark);color:var(--white);display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;font-weight:500;position:relative;
  transition:background .14s,transform .14s;
}
.st:hover{background:var(--ink);transform:scale(1.08);z-index:3}
.st.home{background:var(--brass);color:var(--ink)}
.st.home:hover{background:var(--brass-deep)}
/* Gold is the home base. Sand is a state with its own pages under it. Everything
   else is still supply and install, one step back. */
/* the two states we do not cover: legible, but plainly not part of the map */
.st.off{
  background:transparent;border:1px dashed var(--rule);
  color:var(--warm-600);opacity:.6;text-decoration:line-through;
}
.st.off:hover{background:transparent;border-color:var(--rule);color:var(--warm-600)}
.st.covered{background:var(--steel-light);color:var(--ink)}
.st.covered:hover{background:var(--brass);color:var(--ink)}
.st::after{
  content:attr(data-note);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:14px;font-weight:500;
  padding:6px 10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s;z-index:6;
}
.st:hover::after{opacity:1}
.maplegend{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);font-size:15px;color:var(--steel-dark)}
.maplegend span{display:flex;align-items:center;gap:9px}
.maplegend i{width:12px;height:12px;flex:none}

.arealist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.arealink{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
  background:var(--white);border:1px solid var(--rule);padding:16px 20px;
  text-decoration:none;transition:background .15s,border-color .15s;min-width:0;
}
.arealink:hover{background:var(--paper-2);border-color:var(--alum-500)}
.arealink b{
  font-family:var(--display);font-size:18.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;line-height:1.2;min-width:0;
}
.arealink span{
  font-family:var(--mono);font-size:15px;color:var(--gold-deep);
  line-height:1.3;min-width:0;
}

.factcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.factcard{border-top:2px solid var(--brass);padding-top:20px}
.factcard b{display:block;font-family:var(--display);font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.014em;line-height:1.05}
.factcard span{display:block;font-size:17px;color:var(--ink);opacity:.84;margin-top:11px;line-height:1.58}

.crumbs{background:var(--paper-2);border-bottom:1px solid var(--paper-3)}
.crumbs .wrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;font-size:14.5px;color:var(--steel-dark)}
.crumbs a{color:var(--ink);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--brass-deep)}
.crumbs svg{width:12px;height:12px;color:var(--steel);flex:none}

/* ---------- 15. CONTENT ---------- */
.prose h2{margin:40px 0 15px}
.prose h3{margin:30px 0 12px}
.prose p{color:var(--ink);opacity:.88;margin-bottom:18px;font-size:18px;line-height:1.7}
.prose > :first-child{margin-top:0}
.prose ul{display:grid;gap:13px;margin:0 0 22px}
.prose ul li{position:relative;padding-left:28px;color:var(--ink);opacity:.88;font-size:18px;line-height:1.68}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--gold-deep)}
.note{border-left:2px solid var(--brass);background:var(--paper-2);padding:20px 24px;margin:26px 0}
.note p{margin:0;opacity:.9;font-size:18px}
.note p + p{margin-top:12px}
.on-ink .note,.on-ink-deep .note{background:rgba(255,255,255,.06);border-left-color:var(--brass)}
.on-ink .note p,.on-ink-deep .note p{color:var(--steel-light);opacity:1}

.faqs{border-top:1px solid var(--rule);max-width:900px}
.faq{border-bottom:1px solid var(--rule)}
.faq summary{
  padding:22px 44px 22px 0;cursor:pointer;list-style:none;position:relative;
  font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:1px;background:var(--brass);
}
.faq summary::before{
  content:"";position:absolute;right:11px;top:calc(50% - 5px);width:1px;height:11px;
  background:var(--brass);transition:transform .2s;
}
.faq[open] summary::before{transform:scaleY(0)}
.faq div{padding:0 0 22px}
.faq p{font-size:18px;color:var(--ink);opacity:.88;line-height:1.7}
.faq p + p{margin-top:13px}

/* closing action band */
.band{background:var(--ink-deep);color:var(--paper);padding-top:0;padding-bottom:0}
.band .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,48px);
  align-items:center;padding-top:clamp(40px,4.4vw,58px);padding-bottom:clamp(40px,4.4vw,58px);
}
.band h2{color:var(--paper);margin-bottom:12px}
.band p{color:var(--steel-light);font-size:18px;max-width:52ch}

/* ---------- 16. FOOTER ---------- */
footer.site{background:var(--ink-deep);color:var(--steel-light);font-size:16px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--gut);padding-top:clamp(40px,4.6vw,60px);padding-bottom:38px}
.foot-brand .brand{padding:0;margin-bottom:18px}
.foot-brand p{font-size:15.5px;color:var(--steel);line-height:1.62;max-width:36ch}
.foot-col h4{
  color:var(--paper);font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding-bottom:12px;margin-bottom:13px;
  border-bottom:1px solid var(--rule-ink);
}
.foot-col a{display:block;color:var(--steel-light);text-decoration:none;padding:5px 0;font-size:15.5px}
.foot-col a:hover{color:var(--brass)}
.foot-col .addr{font-size:15px;color:var(--steel);line-height:1.6;margin-top:12px}
/* Eleven coverage links in a single column made that column twice the height of
   the other three. Two columns keeps the footer square. */
.foot-states{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* Forty-nine states need a layer above the state list, so the coverage page
   groups them by region and the nav and footer link straight to the anchors. */
.regionblock{margin-bottom:clamp(28px,3.4vw,44px)}
.regionblock:last-child{margin-bottom:0}
.regionblock-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:18px;border-bottom:1px solid var(--rule);
}
.regionblock-head h3{
  font-family:var(--display);font-size:clamp(20px,2.1vw,25px);font-weight:700;
  letter-spacing:-.015em;color:var(--ink);margin:0;
}
.regionblock-head span{font-size:15px;color:var(--steel-dark)}
/* an anchored region must clear the sticky header when it is jumped to */
.regionblock{scroll-margin-top:calc(var(--head-h) + 24px)}
.procore-badge{max-width:146px;margin-top:16px}
.foot-legal{border-top:1px solid var(--rule-ink);padding-top:22px;padding-bottom:32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
.foot-legal p{font-size:14px;color:var(--steel);max-width:88ch;line-height:1.62}
.foot-legal nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal nav a{color:var(--steel-light);text-decoration:none;font-size:14px}
.foot-legal nav a:hover{color:var(--brass)}

.callbar{display:none}

/* ---------- 17. RESPONSIVE ---------- */
@media(max-width:1140px){
  .sizer{grid-template-columns:1fr}
  .sizer-main{border-right:none;border-bottom:1px solid var(--paper-3)}
  .rail{background:var(--paper)}
  .railcards{grid-template-columns:repeat(3,1fr);display:grid}
  .railcard{grid-template-columns:44px 1fr}
  .railcard img{width:44px;height:56px}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1000px){
  :root{--head-h:66px}
  .topbar-right{display:none}
  .topbar-left .made{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .navtoggle{display:grid;place-items:center;margin-left:auto}
  .mainnav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:stretch;max-height:78vh;overflow-y:auto;
    border-top:1px solid rgba(255,255,255,.12);box-shadow:var(--sh-3);
  }
  .mainnav.open{display:flex}
  .mainnav > li{flex-direction:column}
  .mainnav > li > a{padding:16px var(--gut);border-bottom:1px solid rgba(255,255,255,.09);justify-content:space-between;border-bottom-width:1px}
  .mainnav > li > a[aria-current]{border-bottom-color:rgba(255,255,255,.09);box-shadow:inset 2px 0 0 var(--brass)}
  .dropdown,.dropdown.dd-wide{
    position:static;min-width:0;width:auto;grid-template-columns:1fr;opacity:1;visibility:visible;
    transform:none;box-shadow:none;border:none;border-top:none;display:none;
    background:rgba(0,0,0,.2);padding:6px 12px;
  }
  .mainnav > li.open .dropdown{display:grid}
  .nav-cta,.nav-tel{display:none}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .shot{max-width:440px;margin-inline:auto}
  .specstrip .wrap{grid-template-columns:1fr 1fr}
  .specstrip .cell{padding:20px 18px 20px 0}
  .specstrip .cell:nth-child(odd){border-left:none;padding-left:0}
  .specstrip .cell:nth-child(3),.specstrip .cell:nth-child(4){border-top:1px solid var(--rule)}
  .scaler-stage{grid-template-columns:1fr}
  .stage-draw{min-height:300px}
  .result-grid{grid-template-columns:1fr;gap:26px}
  .formwrap{grid-template-columns:1fr}
  .formmain{border-right:none;border-bottom:1px solid var(--paper-3)}
  .prods,.prods.p4{grid-template-columns:repeat(2,1fr)}
  .basics,.reasons,.factcards{grid-template-columns:1fr;gap:28px}
  .band .wrap{grid-template-columns:1fr}
  .col-7,.col-8,.col-5,.col-r4{grid-column:1/-1}
  .foot-legal{grid-template-columns:1fr}
}
@media(max-width:740px){
  body{font-size:17px}
  .topbar-right{display:none}
  .topbar .wrap{justify-content:flex-start;gap:12px}
  .topbar-left .made{display:none}
  .brand .mark{width:42px;height:42px}
  .brand-text{font-size:15.5px}
  /* the dealer line is already the first thing in the top bar on a phone */
  .brand-text small{display:none}
  .topbar .flagmark{white-space:normal;letter-spacing:.05em;font-size:14px}
  .topbar .flagmark::before{display:none}
  .picks,.picks.p3,.picks.three-up,.hal-opts,.fgrid{grid-template-columns:1fr}
  .picks.two-up{grid-template-columns:1fr 1fr}
  .prods,.prods.p4{grid-template-columns:1fr}
  .railcards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;row-gap:28px}
  .terms > div{grid-template-columns:1fr;gap:8px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .heightpicker{width:100%}
  .hbtn{flex:1;text-align:center;padding:9px 6px}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .tlink{align-self:flex-start;width:auto}
  .sizer-nav{flex-direction:column;align-items:flex-start;gap:14px}
  .sizer-note{max-width:none}
  .factrow div{padding-right:0;margin-right:26px}

}

/* ---------- THE STICKY CALL BAR ----------
   Shown from 1000px down, the same point at which the header's phone number
   and quote button disappear. Kept in its own block so it does not inherit the
   phone-only single-column rules above. */
@media(max-width:1000px){
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:80;
    border-top:1px solid rgba(255,255,255,.16);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .callbar a{
    display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;
    padding:19px 8px;text-decoration:none;font-weight:600;font-size:17px;
  }
  .callbar a svg{width:16px;height:16px;flex:none}
  .callbar .c-tel{background:var(--graphite);color:var(--alum-50)}
  .callbar .c-quote{background:var(--red);color:#fff}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
@media print{
  header.site,.topbar,.callbar,footer.site,.band,.sizer,.scaler{display:none}
  body{background:#fff}
}

/* ---------- 18. DARK-GROUND / LIGHT-CARD GUARDS ----------
   Components appear on both grounds. Anything with its own light surface has to
   opt out of the .on-ink heading and body colours, and vice versa. */
.sizer h2,.sizer h3,.sizer h4,.sizer .sizer-q,.sizer .res-name,
.scaler h2,.scaler h3,.scaler .big,
.formwrap h2,.formwrap h3,.prod h3,.faq summary,
.arealink b,.factcard b,.dropdown b,.sent h3,.terms dt{color:var(--ink)}
.sizer .sizer-help,.sizer .pick-txt span,.scaler .desc{color:var(--steel-dark)}
.pricebox .pv{color:var(--paper)}
.pricebox .pl,.pricebox .save{color:var(--brass)}
.pricebox .pn{color:var(--steel-light)}
.on-ink .arealink b,.on-ink-deep .arealink b{color:var(--ink)}
.on-ink .arealink span,.on-ink-deep .arealink span{color:var(--brass-deep)}
.on-ink .prod h3,.on-ink-deep .prod h3{color:var(--ink)}
.on-ink .prod p,.on-ink-deep .prod p{color:var(--ink)}
.on-ink .prod-price b,.on-ink-deep .prod-price b{color:var(--ink)}
.on-ink .prod-go,.on-ink-deep .prod-go{color:var(--ink)}
.on-ink .faq summary,.on-ink-deep .faq summary{color:var(--paper)}
.on-ink .faq p,.on-ink-deep .faq p{color:var(--steel-light);opacity:1}
.on-ink .faq,.on-ink-deep .faq,.on-ink .faqs,.on-ink-deep .faqs{border-color:var(--rule-ink)}
.on-ink .terms,.on-ink-deep .terms,.on-ink .terms > div,.on-ink-deep .terms > div{border-color:var(--rule-ink)}
.on-ink .terms dt,.on-ink-deep .terms dt{color:var(--paper)}
.on-ink .terms dd,.on-ink-deep .terms dd{color:var(--steel-light);opacity:1}
.on-ink .basic p,.on-ink-deep .basic p{color:var(--steel-light);opacity:1}
.on-ink .basic,.on-ink-deep .basic{border-top-color:var(--brass)}
.on-ink .factcard b,.on-ink-deep .factcard b{color:var(--paper)}
.on-ink .factcard span,.on-ink-deep .factcard span{color:var(--steel-light);opacity:1}
.on-ink .prose p,.on-ink-deep .prose p{color:var(--steel-light);opacity:1}
.on-ink .prose ul li,.on-ink-deep .prose ul li{color:var(--steel-light);opacity:1}
.on-ink a:not(.btn):not(.arealink):not(.prod):not(.dd-item):not(.tlink):not(.brand),
.on-ink-deep a:not(.btn):not(.arealink):not(.prod):not(.dd-item):not(.tlink):not(.brand){color:var(--brass)}
@media(max-width:1000px){
  .mainnav .dropdown b{color:var(--paper)}
  .mainnav .dropdown .dd-item span{color:var(--steel-light)}
  .mainnav .dropdown .dd-title{color:var(--steel)}
  .mainnav .dropdown .dd-item .dd-ico{background:transparent;border-color:rgba(255,255,255,.22);color:var(--paper)}
  .mainnav .dropdown .dd-item:hover{background:rgba(255,255,255,.07)}
  .mainnav .dropdown .dd-foot{border-top-color:rgba(255,255,255,.14)}
  .mainnav .dropdown .dd-foot span{color:var(--steel)}
  .mainnav .dropdown .dd-foot a{color:var(--brass)}
}

/* ---------- 19. SPEC TABLES + SERIES HEADS ---------- */
.serieshead{
  display:grid;grid-template-columns:300px 1fr;gap:clamp(22px,3.4vw,46px);
  align-items:start;margin-bottom:28px;
}
.serieshead img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 18%;border:1px solid var(--rule)}
.serieshead h2{margin-bottom:6px}
.serieshead > div > p{color:var(--ink);opacity:.84;font-size:17px}
.serieshead .label{margin-bottom:14px}

.tablewrap{overflow-x:auto;border:1px solid var(--rule);background:var(--white)}
table.spec{width:100%;border-collapse:collapse;min-width:760px;font-size:16.5px}
table.spec th,table.spec td{padding:14px 18px;text-align:left;white-space:nowrap}
table.spec thead th{
  background:var(--navy);color:var(--cream);font-family:var(--sans);font-weight:600;
  font-size:14px;letter-spacing:.13em;text-transform:uppercase;
}
table.spec tbody tr + tr td{border-top:1px solid var(--rule)}
table.spec tbody tr:hover{background:var(--paper)}
table.spec td.model{font-family:var(--mono);font-weight:500;color:var(--brass-deep);font-size:15px}
table.spec td.num{font-variant-numeric:tabular-nums}
table.spec td.price{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
table.spec td.list{color:var(--steel-dark);text-decoration:line-through;font-size:14.5px;font-variant-numeric:tabular-nums}
table.spec .wind{display:inline-flex;align-items:center;gap:7px;font-weight:600}
table.spec .wind i{width:7px;height:7px;background:#2E7D5B;flex:none}
table.spec .wind.mid i{background:var(--brass)}
table.spec .wind.low i{background:var(--flag-red)}
@media(max-width:860px){
  .serieshead{grid-template-columns:1fr}
  .serieshead img{max-width:280px;aspect-ratio:3/4;object-position:center 30%}
}

/* ---------- 20. TWO-COLUMN FEATURE + ODDS AND ENDS ----------
   Used on the coverage, Maryland and about pages: a block of argument beside
   one photograph, on the same asymmetric grid as everything else. */
.feature{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(26px,4vw,56px);align-items:start}
.feature.flip .f-art{order:2}
.f-art{position:relative}
.f-art img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 30%;border:1px solid var(--rule)}
.f-art .stamp{
  position:absolute;top:0;left:0;background:var(--ink);color:var(--paper);
  font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;
}
.f-body h2{margin-bottom:16px}
.f-body > p{color:var(--ink);opacity:.84;margin-bottom:16px}
.on-ink .f-body > p,.on-ink-deep .f-body > p{color:var(--steel-light);opacity:1}
.f-art .float{
  background:var(--paper);border-left:3px solid var(--brass);padding:15px 18px;margin-top:14px;
}
.f-art .float b{display:block;font-family:var(--display);font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.014em}
.f-art .float span{display:block;font-size:14.5px;color:var(--steel-dark);margin-top:5px;line-height:1.5}

.photo-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photo-duo img{aspect-ratio:3/4;object-fit:cover;object-position:center 14%;border:1px solid var(--rule);width:100%}

/* small drawn icon plate, used on the about and Maryland pages */
.b-ico,.p-ico{
  width:38px;height:38px;border:1px solid var(--rule);display:grid;place-items:center;
  color:var(--brass-deep);margin-bottom:16px;background:var(--white);
}
.b-ico svg,.p-ico svg{width:20px;height:20px}
.on-ink .b-ico,.on-ink-deep .b-ico,.on-ink .p-ico,.on-ink-deep .p-ico{
  background:transparent;border-color:rgba(255,255,255,.24);color:var(--brass);
}

.map-wrap{background:var(--white);border:1px solid var(--rule);padding:clamp(18px,2.6vw,32px)}
.map-legend{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);font-size:15px;color:var(--steel-dark)}
.map-legend span{display:flex;align-items:center;gap:9px}
.map-legend i{width:12px;height:12px;flex:none}

@media(max-width:1000px){
  .feature,.feature.flip .f-art{grid-template-columns:1fr;order:0}
  .f-art img{max-width:520px}
}

/* ---------- 21. BRASS ON DARK ----------
   --brass-deep is cut dark so it carries as text on paper. On an ink ground it
   has to go back to the lighter brass, which reads at 4.87:1 there. */
.on-ink .label .num,.on-ink-deep .label .num,.hero .label .num,.band .label .num,
.on-ink .terms dt small,.on-ink-deep .terms dt small,
.on-ink .res-official,.on-ink-deep .res-official,
.on-ink .prod-official,.on-ink-deep .prod-official,
.on-ink .arealink span,.on-ink-deep .arealink span,
.on-ink .stage-read .floors,.on-ink-deep .stage-read .floors,
.on-ink .pick-txt .meas,.on-ink-deep .pick-txt .meas,
.on-ink .hal .who,.on-ink-deep .hal .who,
.on-ink .rc-official,.on-ink-deep .rc-official,
.on-ink .basic .n,.on-ink-deep .basic .n{color:var(--brass)}
/* those two sit on their own white card even inside a dark section */
.on-ink .arealink span,.on-ink-deep .arealink span{color:var(--brass-deep)}

/* ---------- 22. COVERAGE ----------
   Two tiers, so a state never sits in the same list as its own towns:
   the nationwide statement leads, the local towns hang underneath Maryland. */
.coverage{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:0;
  border:1px solid var(--rule);background:var(--white)}
.cov-lead{
  padding:clamp(24px,2.6vw,34px);background:var(--navy);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
}
.cov-lead h3{color:var(--cream);margin-bottom:12px}
.cov-lead p{color:var(--sand);font-size:18px;line-height:1.62;margin-bottom:20px}
.cov-lead .tlink{color:var(--cream);align-self:flex-start}
.cov-lead .tlink:hover{color:var(--gold)}
.cov-local{padding:clamp(24px,2.6vw,34px);min-width:0}
.cov-local-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.cov-local-head h3{margin:0}
.cov-local > .fine{margin-bottom:18px;max-width:52ch}
@media(max-width:900px){
  .coverage{grid-template-columns:1fr}
  .cov-lead{border-bottom:1px solid var(--rule)}
}

/* ---------- 23. TOWNS BY STATE ---------- */
.townblock + .townblock{margin-top:clamp(28px,3vw,40px)}
.townblock-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--rule);
}
.townblock-head h3{margin:0}

/* ---------- 24. FORM ERROR ----------
   Shown in place rather than in a browser alert, which is easy to miss and
   impossible to style. */
.formerror{
  margin-top:20px;padding:15px 18px;background:#FBEDEE;
  border:1px solid var(--red);border-left-width:4px;border-radius:var(--r-sm);
  color:#7A1522;font-size:17.5px;line-height:1.55;font-weight:500;
}
.field [aria-invalid="true"],
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(178,34,52,.14);
}

/* ==========================================================================
   25. EASE OF USE
   --------------------------------------------------------------------------
   Most visitors are on a phone, and a large share are 50-65 and not confident
   with technology. Measured on the live site before this block existed: the
   home page ran 30 screens on a phone with the quote form at screen 25, 57
   blocks of real content sat below 15px, and 31 tap targets were under 44px.
   ========================================================================== */

/* Nothing interactive may be smaller than a fingertip. */
a, button, summary, .hbtn, .pick, .hal, input, select, textarea {
  min-height: 44px;
}
a.tlink, .foot-col a, .topbar a, .crumbs a,
.dd-item, .railcard, .prod, .brand {
  min-height: 44px;
  display: flex;
  align-items: center;
}
a.arealink { min-height: 44px }   /* keeps its own column layout above */
.foot-col a, .topbar a { padding-top: 10px; padding-bottom: 10px }
.prod, .dd-item, .railcard { align-items: stretch }
.prod { display: flex }

/* Hover cannot be the only way to reach anything: a touch screen has no hover.
   Every state below is also reachable by focus, and no content is hover-only. */
@media (hover: none) {
  .st::after { display: none }          /* map tooltips: the label is in the list too */
  .prod:hover .prod-img img { transform: none }
}
.st:focus-visible::after { opacity: 1 }

/* Sentences are easier to track when lines are shorter. */
p, .lede, li, dd { max-width: 62ch }

@media (max-width: 740px) {
  /* one clear column, generous spacing, nothing clever */
  body { font-size: 18px; line-height: 1.75 }
  h1 { font-size: 34px; line-height: 1.12 }
  h2 { font-size: 27px; line-height: 1.18 }
  h3 { font-size: 21px }
  .lede { font-size: 19px; line-height: 1.6 }
  p, li, dd { font-size: 18px }
  .fine { font-size: 16px }

  /* the hero fact row was wrapping 2 + 1 and orphaning the third item */
  .factrow { display: grid; grid-template-columns: 1fr; gap: 0 }
  .factrow div {
    display: flex; align-items: baseline; gap: 10px;
    margin: 0; padding: 13px 0 0; width: 100%;
  }
  .factrow div b { font-size: 20px; min-width: 6.2em }

  /* buttons are the main control: make them unmissable */
  .btn { width: 100%; padding: 18px 26px; font-size: 18px; min-height: 56px }
  .btn-lg { padding: 20px 28px; font-size: 19px; min-height: 60px }

  /* the sticky call bar is the safety net, so keep it thumb-sized */
}

/* ==========================================================================
   26. THE QUOTE SECTION
   --------------------------------------------------------------------------
   The destination for every button on the site. Deliberately the largest,
   plainest block on the page, and it shows the customer what they are about to
   send before they send it.
   ========================================================================== */
.quotewrap { background: var(--navy); color: var(--cream); padding: clamp(44px,6vw,92px) 0 }
.quotewrap::before { content:""; position:absolute; inset:0; background:var(--satin); pointer-events:none }
.quotewrap > * { position: relative }

.quotehead { max-width: 40ch; margin: 0 auto clamp(24px,3vw,38px); text-align: center }
.quotehead h2 { color: var(--cream); margin-bottom: 12px; font-size: clamp(30px,4vw,46px) }
.quotehead .lede { color: var(--sand); margin: 0 auto }

.quotebox {
  max-width: 720px; margin: 0 auto; background: var(--cream);
  border-radius: var(--r-lg); padding: clamp(24px,3.4vw,44px); box-shadow: var(--sh-3);
}

/* the plain-English summary of what the finder chose */
.scope {
  background: var(--cream-2); border-left: 4px solid var(--gold);
  padding: 20px 22px; margin-bottom: 28px; border-radius: 0 var(--r) var(--r) 0;
}
.scope-title {
  display: block; font-size: 14px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px;
}
.scope-list { display: grid; gap: 9px; margin: 0 }
.scope-list > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline }
.scope-list dt { color: var(--warm-600); font-size: 16.5px }
.scope-list dd { font-weight: 700; color: var(--navy); text-align: right; font-size: 17px }
.scope-note { font-size: 15.5px; color: var(--warm-600); margin: 14px 0 0 }

/* ---------- the two button questions ----------
   Asked before any typing, because pressing one of these is the whole answer
   for most people. Buttons, not a dropdown: a dropdown on a phone is a modal
   you have to dismiss, and this is the first thing on the form. */
.qask { border: 0; padding: 0; margin: 0 0 26px }
.qask-q {
  display: block; padding: 0; font-size: 17px; font-weight: 700; color: var(--navy);
  margin-bottom: 12px;
}
.qask-help { font-size: 16px; color: var(--warm-600); margin: -6px 0 14px }
.qopts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px }
.qopts.two { grid-template-columns: 1fr 1fr }
.qopt {
  min-height: 60px; padding: 14px 16px; text-align: left;
  font-family: inherit; font-size: 16.5px; font-weight: 600; line-height: 1.3;
  color: var(--navy); background: #fff; border: 2px solid var(--cream-3);
  border-radius: var(--r); cursor: pointer;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.qopt:hover { border-color: var(--gold) }
.qopt:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(217,167,65,.22) }
.qopt.on {
  border-color: var(--gold); background: rgba(217,167,65,.14);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* ---------- the repair photo box ---------- */
.qphoto { margin-top: -8px }
.qdrop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  border: 2px dashed var(--cream-3); border-radius: var(--r); background: #fff;
  color: var(--navy); transition: border-color .14s, background .14s;
}
.qdrop:hover, .qdrop.over { border-color: var(--gold); background: rgba(217,167,65,.08) }
.qdrop svg { width: 30px; height: 30px; color: var(--gold-deep) }
.qdrop b { font-size: 17px }
.qdrop span { font-size: 15.5px; color: var(--warm-600) }
.qdrop input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.qdrop:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(217,167,65,.22) }
.qfiles { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px }
.qfiles li {
  font-size: 15.5px; color: var(--navy); background: var(--cream-2);
  padding: 8px 12px; border-radius: var(--r-sm);
}
.qfiles li span { color: var(--warm-600) }
.qfiles li.skip { color: var(--warm-600); background: none; padding-left: 0 }

.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.qgrid .full { grid-column: 1 / -1 }
.quotebox .field label { font-size: 17px; font-weight: 700; color: var(--navy); text-transform: none; letter-spacing: 0 }
.quotebox .field label .req {
  font-weight: 600; font-size: 14px; color: #fff; background: var(--red);
  padding: 2px 9px; border-radius: 100px; margin-left: 8px; letter-spacing: .04em;
}
.quotebox .field label .opt { font-weight: 400; font-size: 15px; color: var(--warm-600) }
.quotebox input, .quotebox select, .quotebox textarea {
  font-size: 18px; padding: 15px 16px; border: 2px solid var(--cream-3); background: #fff;
}
.quotebox input:focus, .quotebox select:focus, .quotebox textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 4px rgba(217,167,65,.22);
}
.quotebox textarea { min-height: 118px }

.qsend { margin-top: 28px; padding-top: 24px; border-top: 2px solid var(--cream-2) }
.qsend .btn { width: 100%; min-height: 62px; font-size: 19px }
.qsend .fine { margin-top: 16px; font-size: 16px; text-align: center; color: var(--warm-600) }
.qsend .fine a { color: var(--navy); border-bottom: 2px solid var(--gold); text-decoration: none }

.quotebox .sent { border-color: var(--gold); background: var(--cream-2); padding: 32px; text-align: center }

@media (max-width: 740px) {
  .qgrid { grid-template-columns: 1fr; gap: 18px }
  .qopts { grid-template-columns: 1fr 1fr }
  .qopt { min-height: 56px; font-size: 16px; padding: 12px 14px }
  .quotebox { border-radius: 0; padding: 24px 20px; margin: 0 calc(var(--gut) * -1); max-width: none }
  .scope-list > div { flex-direction: column; gap: 2px }
  .scope-list dd { text-align: left }
}

/* ==========================================================================
   27. THE HERO CALL TO ACTION, AND THE JOB CARDS
   --------------------------------------------------------------------------
   The home page asks for one thing only: press this and we will find you a
   pole. Location pages still open on the three job cards below.
   ========================================================================== */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px }
.path {
  display: block; text-decoration: none; background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.22); border-radius: var(--r-lg);
  padding: 20px 22px; transition: background .16s, border-color .16s, transform .12s;
}
.path:hover, .path:focus-visible { background: rgba(255,255,255,.14); border-color: var(--gold); transform: translateY(-2px) }
.path-n { display: block; font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--cream); line-height: 1.2 }
.path-d { display: block; font-size: 16px; color: var(--sand); margin-top: 6px }

/* One box, not two. It is the only thing asked of the visitor above the fold,
   so it gets the width, the gold edge and an arrow that says it goes somewhere. */
.paths.one { grid-template-columns: 1fr }
.path-lead {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 26px 76px 26px 28px; min-height: 108px;
  background: rgba(217,167,65,.12); border-color: var(--gold);
}
.path-lead:hover, .path-lead:focus-visible { background: rgba(217,167,65,.2) }
.path-lead .path-n { font-size: clamp(24px, 2.9vw, 32px); color: #fff }
.path-lead .path-d { font-size: 17px; margin-top: 8px; max-width: 46ch }
.path-go {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; color: var(--gold); transition: transform .16s;
}
.path-lead:hover .path-go { transform: translateY(-50%) translateX(4px) }

.hero-tel {
  display: inline-flex; align-items: center; gap: 10px; color: var(--cream);
  text-decoration: none; font-size: 18px; font-weight: 600;
  border-bottom: 2px solid var(--gold); padding-bottom: 4px;
}
.hero-tel svg { width: 19px; height: 19px; color: var(--gold) }
.hero-tel:hover { color: var(--gold) }

/* what the photo is showing, since the hero is the storefront window */
.finish-tag {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: linear-gradient(to top, rgba(22,41,63,.92), transparent);
  color: var(--cream); font-size: 15px; letter-spacing: .04em;
  padding: 40px 18px 16px;
}

/* the three things you can buy in a place */
.jobcard { cursor: pointer }
.jobcard .prod-body { padding: clamp(22px,2.4vw,30px) }
.jobcard h3 { margin-bottom: 10px }
.jobcard p { margin-bottom: 18px }
.jobcard .prod-go { margin-top: auto }

.arealist-big .arealink { padding: 22px 24px }
.arealist-big .arealink b { font-size: 20px }

@media (max-width: 740px) {
  /* photograph first: it is the shop window, and it should not be below the fold */
  .hero-grid { display: flex; flex-direction: column; gap: 26px }
  .hero-grid .shot { order: -1 }
  .shot img { aspect-ratio: 4/3 }
  .paths { grid-template-columns: 1fr; gap: 12px }
  .path { padding: 18px 20px; min-height: 76px }
  .path-n { font-size: 20px }
  .path-lead { padding: 20px 58px 20px 20px; min-height: 92px }
  .path-lead .path-n { font-size: 23px }
  .path-lead .path-d { font-size: 16px }
  .path-go { right: 18px; width: 24px; height: 24px }
  .hero-tel { font-size: 18px; min-height: 44px }
  .finish-tag { font-size: 14.5px; padding: 32px 16px 14px }
}


/* ---------- 28. SMALL TEXT ----------
   Anything carrying real meaning sits at 16px or more. Only pure decoration
   (the rule ticks, the step numerals) may go below it. */
.fine, .scope-note, .prod-official, .res-official, .rc-official,
.sizer-note, .rail-count, .stage-read .floors, .chart-foot,
.foot-col a, .foot-legal p, .foot-legal nav a, .foot-brand p, .addr,
.topbar, .topbar a, .crumbs .wrap, .map-legend, .tablenote,
.pick-txt .meas, .hal .who, .hal .delta, .prod-specs, .speclist,
table.spec, table.spec th, table.spec td { font-size: 16px }
.label, .prod-flag, .plate span, .scope-title,
.stepno .of, .stepno em { font-size: 15px }
.finish-tag, .rc-official { font-size: 16px }
/* .brand-text small and .topbar .flagmark are deliberately NOT in the lists
   above: both live in the fixed-width header, where a larger size overflows a
   phone. Their mobile sizes are set in the media block below. */
.brand-text small { display: none }   /* the top bar already says this */
.topbar .flagmark { font-size: 15px }
.field label, .quotebox .field label { font-size: 16.5px }

/* Every in-page jump clears the sticky header instead of landing under it. */
[id] { scroll-margin-top: calc(var(--head-h) + 10px) }

/* The header runs out of room before 1200px once the nav, the phone and the
   button are all present. Above 1000px the top bar shows the phone number, so
   that is the control the header can spare. */
@media(max-width:1200px){
  header.site .nav-tel{display:none}
}

/* ---------- 29. LAST-MILE OVERFLOW ---------- */

/* A closed dropdown is only visibility:hidden, so it still occupies layout and
   pushed the document 142px wider than the window at 1024-1200px. The panel on
   the right-hand nav item hangs off the left edge of its item by default;
   anchor it to the right instead so it can never reach past the viewport. */
.mainnav > li:nth-last-child(-n+3) .dropdown { left: auto; right: 0 }

/* The 11-column state grid needs to shrink on the narrowest phones rather than
   push the page sideways. */
@media(max-width:400px){
  .stategrid { gap: 2px }
  .st { font-size: 9px; border-radius: 2px }
}

/* Belt and braces: nothing may widen the document horizontally. `clip` is used
   rather than `hidden` because `hidden` on the root creates a scroll container
   and breaks position:sticky on the header. */
html { overflow-x: clip }

/* The eleven-state panel is wider than the nav item it hangs from, so neither
   left:0 nor right:0 keeps it on screen -- right-anchored it ran off the left
   edge at 1200px. Centre it on the item and clamp it to the window. Desktop
   only: below 1000px the panel is a static accordion inside the mobile menu. */
@media(min-width:1001px){
  .mainnav > li .dropdown.dd-wide{
    left:50%;right:auto;
    width:min(780px,calc(100vw - 2*var(--gut)));
    transform:translateX(-50%) translateY(-6px);
  }
  .mainnav > li:hover .dropdown.dd-wide,
  .mainnav > li.open .dropdown.dd-wide{transform:translateX(-50%)}
}


/* ---------- 20. THE FLAG STORE ---------- */
/* Two questions and a price. Eder's own store puts twenty tiles of the same
   photograph in front of a buyer; this puts one flag and two choices. */
.buygrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.buyshot{background:var(--paper-2);border:1px solid var(--rule);position:sticky;top:calc(var(--head-h) + 20px)}
.buyshot img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}

.buystep{margin-bottom:clamp(24px,3vw,34px)}
.buylabel{
  display:block;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-dark);margin-bottom:12px;
}

.qualpick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qualcard{
  display:block;text-align:left;padding:16px 16px 15px;background:var(--white);
  border:1px solid var(--rule);cursor:pointer;font:inherit;color:inherit;
  transition:border-color .14s,box-shadow .14s,background .14s;
}
.qualcard:hover{border-color:var(--brass)}
.qualcard.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper-2)}
.qualname{display:block;font-family:var(--display);font-size:18px;font-weight:700;
  letter-spacing:-.015em;color:var(--ink);line-height:1.15}
.qualplain{display:block;font-size:14.5px;color:var(--steel-dark);line-height:1.45;margin-top:5px}
.qualfrom{display:block;font-size:14px;font-weight:600;color:var(--gold-deep);margin-top:9px}

.sizepick{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px}
.sizebtn{
  padding:12px 8px;background:var(--white);border:1px solid var(--rule);cursor:pointer;
  font:inherit;font-size:15.5px;font-variant-numeric:tabular-nums;color:var(--ink);
  transition:border-color .14s,background .14s;
}
.sizebtn:hover{border-color:var(--brass)}
.sizebtn.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper-2);font-weight:600}
.sizebtn[disabled]{opacity:.34;cursor:not-allowed;text-decoration:line-through}
.sizebtn[disabled]:hover{border-color:var(--rule)}
.sizehint{font-size:15px;color:var(--steel-dark);margin-top:12px;line-height:1.5}

.buyout{border-top:1px solid var(--rule);padding-top:22px;margin-top:6px}
.buyprice{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.buyprice b{
  font-family:var(--display);font-size:clamp(30px,3.6vw,40px);font-weight:700;
  letter-spacing:-.02em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;
}
.buyprice span{font-size:16px;color:var(--steel-dark);text-decoration:line-through}
.buymeta{font-size:15px;color:var(--steel-dark);margin-top:10px;line-height:1.55}
.btn-buy{width:100%;margin-top:18px;justify-content:center}
.buynote{font-size:14.5px;color:var(--steel-dark);margin-top:13px;line-height:1.55}

@media(max-width:900px){
  .buygrid{grid-template-columns:1fr;gap:26px}
  .buyshot{position:static;max-width:420px}
  .qualpick{grid-template-columns:1fr}
}

/* the state picker: a plain select, because fifty options in a grid is the
   overload this store exists to avoid */
.statesel{
  width:100%;padding:14px 15px;font:inherit;font-size:17px;color:var(--ink);
  background:var(--white);border:1px solid var(--rule);
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6154' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.statesel:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* the discount is the reason to buy here rather than from the mill, so it is
   stated at the price rather than left for the struck-through list to imply.
   Gold, not red: red is spent on the primary action and nothing else. */
.buysave{
  font-style:normal;font-size:13.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold-deep);background:var(--brass-pale);
  border:1px solid rgba(217,167,65,.5);padding:5px 9px;white-space:nowrap;
}

/* the state and service pickers are the first decision on their page, so they
   read as a control rather than as a line of text */
.statesel-lg{
  font-size:19px;font-weight:600;padding:16px 17px;
  border:2px solid var(--ink);background:var(--white);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A5F' stroke-width='2.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:19px;
}
.statesel-lg:hover{border-color:var(--brass-deep)}
.pickhint{font-size:14.5px;color:var(--steel-dark);margin-top:9px;line-height:1.5}

/* the discount stated at the top of the hero, where it is the first thing read
   after the country of manufacture. Gold on the dark ground; red stays spent on
   the primary action. */
.herodeal{
  display:inline-block;margin-bottom:18px;padding:7px 13px;
  background:var(--brass);color:var(--ink);
  font-family:var(--display);font-size:15.5px;font-weight:700;letter-spacing:.01em;
}
@media(max-width:740px){ .herodeal{font-size:14.5px;padding:6px 11px} }

/* the companion flag under the buy button. One object, not a card grid: it is a
   suggestion, so it sits quieter than the thing being bought. */
.pairwith:empty{display:none}
.pairwith{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.pairlabel{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-dark);margin-bottom:11px;
}
.paircard{
  display:flex;align-items:center;gap:14px;padding:11px;background:var(--white);
  border:1px solid var(--rule);text-decoration:none;transition:border-color .14s;
}
.paircard:hover{border-color:var(--brass)}
.paircard img{width:64px;height:64px;object-fit:cover;flex:none;border:1px solid var(--rule)}
.pairtext{flex:1;min-width:0}
.pairtext b{display:block;font-family:var(--display);font-size:16px;font-weight:700;
  color:var(--ink);line-height:1.2}
.pairtext span{display:block;font-size:14.5px;color:var(--steel-dark);margin-top:3px}
.pairgo{flex:none;font-size:15px;font-weight:600;color:var(--gold-deep);white-space:nowrap}
.paircard:hover .pairgo{color:var(--ink)}

/* a star on the country-of-origin eyebrow. One glyph, in the gold already used
   for the ball ornament, rather than a field of them. */
.label-star::before{
  content:"\2605";margin-right:9px;color:var(--brass);font-size:1.05em;line-height:1;
}

/* ============================================================== the cart
   Only present when assets/shop.js has a Shopify domain and token; the file
   builds this markup itself and never renders it otherwise, so an unconnected
   shop shows no cart at all rather than an empty one.

   It sits bottom-right on the desktop and spans the foot of a phone, above the
   sticky enquiry bar the rest of the site already uses. */
.cartbar{
  position:fixed;right:18px;bottom:18px;z-index:60;
  width:min(384px,calc(100vw - 36px));
  display:none;
}
.cartbar.on{display:block}

.cartbtn{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:14px 16px;border:1px solid var(--ink);background:var(--ink);
  color:var(--white);font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  box-shadow:0 10px 30px rgba(30,58,95,.22);
}
.cartbtn:hover{background:#17304f}
.cartcount{
  min-width:24px;height:24px;padding:0 6px;border-radius:12px;
  background:var(--red);color:var(--white);
  font-size:13.5px;font-weight:700;line-height:24px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.cartlabel{flex:1;text-align:left}
.carttotal{font-variant-numeric:tabular-nums}

.cartpanel{
  margin-bottom:10px;background:var(--white);border:1px solid var(--rule);
  box-shadow:0 18px 44px rgba(30,58,95,.20);
  max-height:min(70vh,560px);display:flex;flex-direction:column;
}
.cartpanel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--rule);
}
.cartpanel-head b{font-family:var(--display);font-size:17px;color:var(--ink)}
.cartclose{
  border:0;background:none;font-size:24px;line-height:1;cursor:pointer;
  color:var(--steel-dark);padding:0 4px;
}
.cartlines{overflow-y:auto;padding:4px 16px}
.cartline{
  display:flex;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--rule);
}
.cartlines .cartline:last-child{border-bottom:0}
.cartline-say b{display:block;font-size:15.5px;color:var(--ink);font-weight:600}
.cartline-say span{display:block;font-size:14px;color:var(--steel-dark);margin-top:2px}
.cartline-amt{
  text-align:right;font-size:15.5px;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.cartline-amt button{
  display:block;margin-top:4px;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--steel-dark);text-decoration:underline;
}
.cartfoot{padding:14px 16px;border-top:1px solid var(--rule);background:var(--cream)}
.cartrow{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:15px;color:var(--steel-dark);padding:3px 0;
}
.cartrow b{color:var(--ink);font-variant-numeric:tabular-nums}
.cartrow-tot{font-size:17px;color:var(--ink);font-weight:600;padding-top:8px}
.cartrow-tot b{font-family:var(--display);font-size:22px}
.cartpay{width:100%;margin-top:12px;justify-content:center}
.cartpay:disabled{opacity:.6;cursor:default}
.carterr{
  margin-top:10px;padding:10px 12px;font-size:14.5px;line-height:1.5;
  color:#7A1B28;background:#FBEDEE;border:1px solid rgba(178,34,52,.35);
}
.cartnote{margin-top:11px;font-size:13.5px;line-height:1.5;color:var(--steel-dark)}

/* a short nudge when a flag goes in, so the count is seen to change */
@keyframes cartpop{0%{transform:scale(1)}40%{transform:scale(1.045)}100%{transform:scale(1)}}
.cartbar.pop .cartbtn{animation:cartpop .28s ease}
@media(prefers-reduced-motion:reduce){.cartbar.pop .cartbtn{animation:none}}

/* the sticky call bar owns the foot of the screen from 1000px down, so the
   cart is lifted clear of it rather than hiding behind it */
@media(max-width:1000px){
  .cartbar{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:640px){
  .cartbar{right:10px;left:10px;width:auto}
  .cartpanel{max-height:58vh}
}

/* ============================================================ 30. THE STATE SHELF
   The fifty-state flag store: a browsable shelf of cards with a buying drawer
   that opens inside the grid, on the row the buyer clicked. Everything here is
   scoped to `body.sf`, which assets/site.js sets only when #sfgrid exists, so
   none of it reaches the other 150 pages.

   THE RED BUDGET. Red appears once per view, on the primary action. On this
   page three other things are red by default and are restated as gold here:
   the sticky call bar's quote button, the cart count, and the flag stripe
   divider (which the template no longer emits). With the drawer shut this page
   carries no red at all; with it open, exactly one — #sfadd. */

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

body.sf .callbar .c-quote{background:var(--gold);color:var(--navy-deep)}
body.sf .cartcount{background:var(--gold);color:var(--navy-deep)}
@media(max-width:1000px){
  /* while the drawer is open the foot must not be three stacked bars */
  body.sf.sf-open .callbar{display:none}
  body.sf.sf-open .cartbar{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}

/* the shelf is the call to action, so the hero carries no button and no photo */
.hero-slim{padding-block:clamp(26px,3.4vw,44px)}
.hero-slim .hero-grid{grid-template-columns:1fr;max-width:62ch}


.sfhonest{font-size:18px;max-width:64ch}

/* ---- the sticky bar: the dropdown, and a letter rail ---- */
.sfbar{
  position:sticky;top:var(--head-h);z-index:40;
  background:var(--paper);border-block:1px solid var(--rule);
  padding:10px 0;margin-bottom:22px;
}
.sfbar-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sfbar-lab{font-size:17px;color:var(--warm-600);flex:none}
.sfbar .statesel{min-height:52px;font-size:18px;flex:1 1 260px;max-width:420px}
.sfaz{display:flex;gap:2px;margin-left:auto}
.sfaz a{
  min-width:44px;min-height:44px;display:grid;place-items:center;
  font-size:17px;font-weight:600;text-decoration:none;color:var(--ink);
  border-bottom:2px solid transparent;
}
.sfaz a:hover,.sfaz a:focus-visible{border-bottom-color:var(--brass)}

/* ---- the fifty cards ---- */
.sfgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.sfcard{
  display:flex;flex-direction:column;gap:2px;padding:12px;
  background:var(--white);border:1px solid var(--rule);
  text-decoration:none;color:inherit;
  transition:border-color .14s,box-shadow .14s,transform .14s;
}
.sfcard:hover{border-color:var(--brass);box-shadow:var(--sh-2);transform:translateY(-2px)}
.sfcard.on{border-color:var(--ink);box-shadow:var(--sh-2)}
.sfcard-plate{
  display:block;background:var(--white);border:1px solid var(--rule);
  margin-bottom:9px;
}
/* the photographs are 800x800 studio cut-outs on pure white, so they are
   contained on a white plate rather than cropped: a crop amputates the pole,
   which is the only thing in frame giving the flag a sense of scale */
.sfcard-plate img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.sfcard-name{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink);line-height:1.25}
.sfcard-price{font-size:17px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sfcard-size{font-size:14px;color:var(--warm-600)}

/* ---- the drawer, inserted into the grid on the clicked row ---- */
.sfdrawer{grid-column:1/-1;background:var(--cream-2);border:1px solid var(--rule);position:relative}
.sfdrawer-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,3vw,38px);padding:clamp(20px,3vw,34px)}
.sfclose{
  position:absolute;top:8px;right:10px;z-index:2;
  min-width:44px;min-height:44px;border:0;background:none;cursor:pointer;
  font-size:28px;line-height:1;color:var(--warm-600);
}
.sfclose:hover{color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
  .sfdrawer[data-fresh]{animation:sffade .14s ease}
  @keyframes sffade{from{opacity:0}to{opacity:1}}
}

.sfstage{min-width:0}
.sfplate{margin:0;background:var(--white);border:1px solid var(--rule)}
.sfplate img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.sfplate.has-life img{aspect-ratio:4/5;object-fit:cover;object-position:center 30%}
.sfcap{margin-top:11px;font-size:16px;color:var(--warm-600)}
.sfdwg{margin-top:18px}
/* a dimension annotation, not an illustration: capped so a 218px viewBox
   is not blown up to 480 and the six-foot figure stops reading as a slab */
.sfdwg svg{display:block;width:100%;max-width:330px;height:auto}
.sfprov{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--warm-600)}

.sfside{min-width:0}
.sfside h3{font-family:var(--display);font-size:clamp(22px,2.4vw,27px);font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 18px}
.sfside h3:focus{outline:none}
.sfmore{
  margin-top:10px;border:1px solid var(--rule);background:var(--white);
  padding:11px 14px;font:inherit;font-size:16px;cursor:pointer;color:var(--ink);
  min-height:44px;width:100%;
}
.sfmore:hover{border-color:var(--brass)}
.sfguide{margin-top:11px;font-size:15.5px}
/* the delivery promise sits directly under the buy button, where a buyer
   over 50 looks for it before committing */
.sfship{margin-top:13px;font-size:16px;color:var(--ink);line-height:1.5}
.sfcall{margin-top:9px;font-size:16px;color:var(--warm-600)}

/* size buttons carry their own price, so eight sizes can be compared at once
   rather than interrogated one at a time */
/* NOT scoped to .sfside: the military page renders the same buttons through
   the same picker, so the two-line form has to be styled wherever it appears */
.sizebtn b{display:block;font-weight:inherit;line-height:1.2}
.sizebtn span{display:block;margin-top:3px;font-size:15px;font-weight:600;
  color:var(--gold-deep);font-variant-numeric:tabular-nums;line-height:1.2}
.sizebtn.on span{color:inherit}
.sizebtn:disabled span{opacity:.5}
.sizepick.folded .sfsize-more{display:none}

/* ---- the size band under the shelf ---- */
.sfsizes{display:grid;grid-template-columns:1fr auto;gap:0;margin:0;border-top:1px solid var(--rule)}
.sfsizes dt,.sfsizes dd{padding:14px 0;border-bottom:1px solid var(--rule);font-size:17px;margin:0}
.sfsizes dt{color:var(--warm-600);padding-right:20px}
.sfsizes dd{color:var(--ink);font-weight:600;text-align:right}

/* the range shelf holds 2 cards on one page and 8 on another, so it uses
   auto-fill: cards keep their size and the row simply runs short, rather
   than two items stretching across the full width */
.rangegrid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}

@media(max-width:1199px){.sfgrid:not(.rangegrid){grid-template-columns:repeat(4,1fr)}}
@media(max-width:899px){
  .sfgrid:not(.rangegrid){grid-template-columns:repeat(3,1fr)}
  .sfdrawer-in{grid-template-columns:1fr;gap:24px}
  /* on one column the photograph must not push the chooser off the screen */
  .sfstage{max-width:420px}
}
@media(max-width:759px){
  /* nineteen 44px targets do not fit 375px, so the rail goes rather than shrinks */
  .sfaz{display:none}
  .sfbar-in{gap:8px}
  .sfbar .statesel{flex:1 1 100%;min-height:56px}
}
@media(max-width:619px){
  .sfgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .rangegrid{grid-template-columns:repeat(2,1fr)}
  .sfcard{padding:9px}
  .sfcard-name{font-size:16px}
}

/* ---------------------------------------------------- a full-bleed photograph
   Landscape and portrait photographs both land here. The site's cropped
   containers are all 3/4 portrait, so a wide picture has nowhere else to go;
   this band gives it the full width and puts one line of copy over the foot. */
.photoband{position:relative;margin:0;overflow:hidden;background:var(--navy)}
.photoband img{
  display:block;width:100%;height:auto;
  max-height:min(62vh,520px);object-fit:cover;object-position:center 42%;
}
.photoband figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(18px,3vw,34px) var(--gut) clamp(16px,2.4vw,26px);
  /* reaches high enough that the gold kicker never sits on a bright part
     of the photograph -- these are daylight pictures with pale skies */
  background:linear-gradient(to top,rgba(22,41,63,.92) 0%,rgba(22,41,63,.78) 45%,rgba(22,41,63,.42) 78%,rgba(22,41,63,0) 100%);
  color:#fff;
}
.pb-kick{
  display:block;font-size:13.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px;
}
.photoband figcaption b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(19px,2.5vw,27px);line-height:1.25;letter-spacing:-.01em;
  max-width:34ch;
}
@media(max-width:619px){
  .photoband img{max-height:56vh}
  .photoband figcaption b{font-size:18px}
}

/* ------------------------------------------- flags in the flags menu
   The Flags dropdown sells flags, so it shows them. A photograph on a white
   plate, the same treatment the shelf cards use, rather than a grey line icon
   that could be any menu on any site. */
.dd-item .dd-shot{
  flex:none;width:46px;height:46px;display:block;
  background:var(--white);border:1px solid var(--rule);overflow:hidden;
  transition:border-color .14s;
}
.dd-item .dd-shot img{display:block;width:100%;height:100%;object-fit:contain}
.dd-item:hover .dd-shot{border-color:var(--brass)}

/* the map's key, so the four shades mean something without hovering */
.maplegend{
  display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;
  margin:20px 0 0;padding:0;font-size:15.5px;color:var(--warm-600);
}
.maplegend li{display:flex;align-items:center;gap:8px}
.maplegend .key{width:15px;height:15px;flex:none;background:var(--steel-dark)}
.maplegend .key.home{background:var(--brass)}
.maplegend .key.covered{background:var(--steel-light)}
.maplegend .key.off{background:transparent;border:1px dashed var(--rule)}