/* =====================================================================
   TRADE STAR LOCAL, LOCAL SERVICE SITE KIT
   Re-skinnable stylesheet. Layout, spacing and structure are fixed.
   Color is not.

   TO RE-SKIN FOR A NEW SITE, edit ONLY the block marked SITE THEME below.
   Everything else in this file resolves from it. There are no loose hex
   codes left in the rules: 200 of them were hoisted into named tokens on
   2026-07-29 and the result was verified pixel identical.

   Base tokens are what you change. Derived tokens are named by job and
   only need touching if one looks wrong against a new base.
   ===================================================================== */

/* ============================================================
   Tempe Fence Company : static site styles
   Trade Star Local city-site kit (Cleveland master, re-skinned).
   Palette: "Sun-Baked Block". Adobe rust + mortar gray, Kiln Fire gradients.
   Motif: CMU block-course pattern. Approved 2026-07-27.
   ENGINE UNTOUCHED below the SITE THEME block; Tempe-specific
   sections are appended at the end, scoped under .page-home.
   ============================================================ */

:root{
  /* ============================================================
     SITE THEME : swap THIS block per city to re-skin everything.
     (Palm Desert = "Desert Resort": terracotta + pool teal on warm sand.)
     ============================================================ */
  /* Brand roles */
  --accent:#9A5B42;  /* adobe rust: highlights, section headings */
  --cta:#6E3A28;  /* deep rust: primary buttons */
  --cta-deep:#55291A;  /* button hover */
  --link:#6E3A28;  /* in-card arrow links */
  --hot:#ffc411;  /* bright orange: CTA band, hero H2, inline highlights. Set by Dan 2026-07-28 */
  /* Surfaces */
  --ink:#2A251D;  /* body text */
  --ink-soft:#6B6355;  /* muted text */
  --paper:#F5F0E4;  /* paper: light section bg */
  --paper-2:#EAE3D2;  /* alt light bg */
  --line:#D8CFB9;  /* mortar gray hairline */
  --shell:#2E3438;  /* ink-dark base / header */
  --footer:#22282B;
  --white:#FFFFFF;
  /* Signature backgrounds : the "mood" (warm desert) */
  --bg-dark:radial-gradient(120% 120% at 16% 88%,#7C8A93 0%,#556169 22%,#3A4349 52%,#23282C 84%);  /* Kiln Fire */
  --bg-benefits:radial-gradient(120% 120% at 82% 90%,#8B99A2 0%,#556169 20%,#3A4349 46%,#21262A 82%);  /* Kiln Fire, deeper */
  --bg-services:radial-gradient(1100px 720px at 82% -8%,rgba(154,91,66,.24),rgba(110,58,40,.10) 38%,transparent 64%),var(--shell);
  --bg-feature:linear-gradient(158deg,rgba(124,138,147,.30) 0%,rgba(58,67,73,.62) 100%),radial-gradient(120% 140% at 0% 0%,#7C8A93,#3A4349);
  --bg-footer:radial-gradient(145% 170% at 100% 100%,#8B99A2 0%,#556169 18%,#3A4349 42%,#2C3236 66%,#22282B 100%);
  --card-glass:linear-gradient(180deg,rgba(74,86,94,.48),rgba(40,48,54,.64));
  --card-glass-border:rgba(216,207,185,.22);
  /* back-compat aliases (existing rules read these) */
  --orange:var(--accent);
  --amber:var(--cta);
  --amber-deep:var(--cta-deep);
  --blue:#9A5B42;
  --blue-deep:#6E3A28;
  --shell-2:#383F44;
  --shell-3:#434B51;

  /* Fonts */
  --f-head:'Archivo',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;

  /* Layout */
  --wrap:1200px;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
  --shadow-soft:0 6px 18px rgba(0,0,0,.08);

  /* Signature background gradients (recreated from blu-bkgrd / orange-left) */
  --grad-dark:linear-gradient(118deg,#191D20 0%,#2E3438 32%,#556169 74%,#7C8A93 100%);
  --grad-orange:linear-gradient(158deg,#B87050 0%,#9A5B42 55%,#6E3A28 100%);
  --grad-copyright:linear-gradient(90deg,#22282B 0%,#556169 55%,#7C8A93 100%);
}

/* =====================================================================
   DERIVED THEME TOKENS
   Every brand-carrying color the kit uses that is not one of the base
   tokens above. These were 200 loose hex and rgba literals scattered
   through the file, which meant re-skinning a site meant hunting them
   down one by one. Naming them by job makes a re-skin an edit to this
   block instead.

   For a NEW SITE: change the base tokens first. Only come here if a
   derived color looks wrong against the new base.
   ===================================================================== */
:root{
  --text-body:#3A342A;  /* body copy on paper (cool gray, inherited from the spray foam kit) */
  --text-body-warm:#473F33;  /* body copy on paper, warm variant, used by the newer sections */
  --text-card:#4C4639;  /* body copy inside white cards (cool gray, inherited) */
  --text-card-head:#171310;  /* headings inside white cards */
  --text-caption:#5F5849;  /* captions and small print */
  --text-faq:#3C362C;  /* FAQ answer text */
  --text-on-deep:#C6CED4;  /* body copy on the deep textured surface */
  --text-on-shell:#C3CCD2;  /* body copy on the shell / footer (cool, inherited) */
  --text-on-hero:#D3DCE2;  /* hero lede on the homepage hero */
  --text-on-dark:#E9EFF3;  /* generic light text on a dark section */
  --text-on-hero-warm:#EADFCF;  /* service hero lede, warm variant */
  --text-on-photo:#EDE2D2;  /* text over a photo background */
  --text-on-scrim:#F2E8D9;  /* service hero subhead over the black scrim */
  --text-on-navy:#F6E4D8;  /* text on the navy accent band */
  --text-on-deep-hi:#E8EEF2;  /* high contrast text on deep */
  --text-on-clay:#FBEFE2;  /* text on the clay band */
  --text-on-costs:#D8E1E7;  /* numbered list inside the costs card */
  --text-on-hot:#20180A;  /* dark text sitting on the --hot orange */
  --text-on-cta:#141414;  /* text on the CTA band */
  --accent-tint:#B87050;  /* accent lightened, hover and highlights */
  --accent-tint-2:#C98A68;  /* accent lightened further */
  --hot-hover:#FFD44E;  /* hover state for the --hot button */
  --clay-mid:#8A4C36;  /* middle stop of the clay band gradient */
  --navy-mid:#6A382A;  /* middle stop of the navy gradient */
  --navy-deep:#4E271B;  /* end stop of the navy gradient */
  --deep-3:#23282C;  /* darkest stop of the deep surface gradient */
  --signs-bg-default:#F3EEE1;  /* fallback background for the signs grid */
  --ph-1:#CBC6BB;  /* photo placeholder, light */
  --ph-2:#C2BCB1;  /* photo placeholder, dark */

  /* glass boxes on the deep surface */
  --glass-top:rgba(74,86,94,.42);
  --glass-bottom:rgba(36,43,48,.58);
  --glass-border:rgba(216,207,185,.24);
}
:root{
  /* remaining brand-carrying colors, hoisted 2026-07-29 */
  --text-brandtag:#A2AEB6;  /* brand tagline in the header */
  --text-nav:#EEF3F6;  /* main nav links */
  --text-benefits:#CBD5DB;  /* benefits section body */
  --text-benefit-card:#BCC7CE;  /* benefit card body */
  --text-field-label:#D2DDE3;  /* form field labels */
  --field-text:#EFF4F7;  /* text typed into a form field */
  --field-placeholder:#828E96;  /* form field placeholder */
  --text-footer:#C3CCD2;  /* footer paragraph */
  --text-footer-link:#D0D8DD;  /* footer links */
  --text-footer-copy:#BAC4CB;  /* footer copyright line */
  --text-svc-lede:#D3DCE2;  /* service hero lede, kit default */
  --text-costs-card:#DFE7EC;  /* costs card body */
  --field-placeholder-2:#8A97A1;  /* about page field placeholder */
  --field-bg-about:#23303A;  /* about page field background */
  --text-sign:#3C4249;  /* text inside a signs card */
  --text-wallage:#3B342D;  /* wall age section body */
  --text-matnote:#5E564D;  /* materials table footnote */
  --text-aside:#4A423B;  /* aside note body */
  --ph-label:#4A453C;  /* photo placeholder label */
  --eyebrow-on-dark:#F0CE5A;  /* eyebrow text on a dark card */
  --slot-note:#FFB37A;  /* build slot note, dev only */
  --field-required:#FF9A52;  /* required field asterisk */
  --slot-note-2:#FFF6EE;
  --text-benefits-base:#EAF1F5;  /* benefits section base text */  /* contact form slot note, dev only */
  --estimate-bg:#14181A;  /* estimate section base */
  --estimate-bg-2:#3A4349;  /* estimate section gradient stop */
  --contact-bg:#161B1E;  /* contact section base */
  --navy-lifted:#8C5040;  /* navy before the multiply blend was added */
  --faq-a1:#F9D2A4;
  --faq-a2:#F3AB62;
  --faq-a3:#E7741E;
  --faq-a4:#D65E10;
  --faq-b1:#F4BC82;
  --faq-b2:#EA8E3E;
  --faq-b3:#DE6714;
  --faq-b4:#CB560B;
}



*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* gray photo placeholders (pre-Midjourney; swap each .ph div for a real <img> later) */
.ph{
  background:repeating-linear-gradient(45deg,var(--ph-1),var(--ph-1) 14px,var(--ph-2) 14px,var(--ph-2) 28px);
  border:1px dashed rgba(0,0,0,.30);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--ph-label);font-family:var(--f-mono);font-size:.72rem;line-height:1.5;
  letter-spacing:.06em;text-transform:uppercase;padding:14px;
}

/* --- shared helpers --- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--orange);
  margin:0 0 .5rem;
}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.12;margin:0 0 .5em;}
p{margin:0 0 1rem;}
.section{padding:84px 0;}
.section-head{max-width:820px;margin:0 auto 48px;text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.2rem);color:var(--orange);}
.section--dark{background:var(--shell);color:var(--text-on-dark);}
.section--dark h2{color:var(--orange);}
.section--paper{background:var(--paper);}

/* --- buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-family:var(--f-body);font-weight:600;font-size:1.05rem;
  padding:14px 28px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  line-height:1.1;
}
.btn--amber{background:var(--amber);color:#fff;border-color:rgba(244,242,236,.85);box-shadow:0 6px 16px rgba(0,0,0,.30);}
.btn--amber:hover{background:var(--amber-deep);transform:translateY(-1px);}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn--ghost:hover{background:rgba(255,255,255,.12);}
.btn--sm{font-size:.95rem;padding:10px 22px;}
.link-arrow{
  display:inline-block;margin-top:auto;font-weight:600;color:var(--link);
  text-decoration:none;font-size:.98rem;
}
.link-arrow:hover{text-decoration:underline;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--shell);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex;align-items:center;gap:24px;padding:12px 24px;max-width:1320px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;}
.brand img{height:auto;width:auto;max-height:44px;max-width:100%;}
.brand .brand-txt{display:flex;flex-direction:column;line-height:1.05;}
.brand .brand-name{font-family:var(--f-head);font-weight:700;color:#fff;font-size:1.18rem;}
.brand .brand-tag{font-size:.66rem;color:var(--text-brandtag);letter-spacing:.01em;}

.main-nav{display:flex;align-items:center;gap:4px;}
.main-nav > ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.main-nav a{color:var(--text-nav);text-decoration:none;font-weight:500;font-size:.98rem;padding:10px 14px;border-radius:8px;display:inline-block;transition:color .15s,background .15s;}
.main-nav a:hover{color:var(--orange);}
.has-dropdown{position:relative;}
.has-dropdown > a::after{content:"▾";font-size:.7em;margin-left:.35em;opacity:.7;}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:270px;
  background:#fff;border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.28);
  padding:8px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{color:var(--ink);font-size:.92rem;padding:9px 12px;border-radius:7px;}
.dropdown a:hover{background:var(--paper);color:var(--amber);}
.header-cta{margin-left:8px;white-space:nowrap;}

/* mobile nav toggle */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;}
.nav-toggle span{display:block;width:26px;height:3px;background:#fff;border-radius:3px;margin:5px 0;transition:.2s;}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--bg-dark);color:#fff;padding:76px 0 88px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:56px;align-items:center;}
.hero-img{border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.4);width:100%;aspect-ratio:3/4;object-fit:cover;}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.75rem);margin-bottom:.35em;}
.hero h1 .hl{color:var(--hot);}
.hero .lede{font-size:1.15rem;color:var(--text-on-hero);max-width:44ch;margin-bottom:2rem;}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:var(--bg-services);}
.services .section-head h2{color:var(--orange);}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.svc-card{
  display:flex;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);min-height:260px;
}
.svc-card .svc-body{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;padding:28px 26px;}
.svc-card h3{font-size:1.32rem;color:var(--text-card-head);}
.svc-card p{color:var(--text-card);font-size:.96rem;}
.svc-card .svc-photo{flex:0 0 50%;min-width:0;width:50%;object-fit:cover;height:auto;align-self:stretch;}
.svc-card .link-arrow{display:block;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);}
/* whole-house / one-estimate text card (no photo : matches live white card) */
.svc-card--feature{background:#fff;border-left:5px solid var(--amber);}
.svc-card--feature .svc-body{padding:30px 30px;}
.svc-card--feature h3{color:var(--text-card-head);font-size:1.45rem;}
.svc-card--feature p{color:var(--text-card);}
.svc-card--feature .link-arrow{color:var(--link);}

/* ============================================================
   HOUSING STOCK (prose + image)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr minmax(0,420px);gap:56px;align-items:start;}
.prose h2{color:var(--orange);font-size:clamp(1.6rem,3vw,2.05rem);}
.prose p{color:var(--text-body);}
.prose strong{color:var(--ink);}
.prose ul{margin:1rem 0 1.25rem;padding-left:1.1rem;}
.prose li{margin:.5rem 0;color:var(--text-body);}
.framed{border-radius:16px;box-shadow:var(--shadow);background:#fff;padding:10px;}
.framed img{border-radius:10px;width:100%;}

/* ============================================================
   AIR LEAKS / BENEFITS (dark)
   ============================================================ */
.benefits{background:var(--bg-benefits);color:var(--text-benefits-base);
  --card-glass:linear-gradient(180deg,rgba(84,96,104,.48),rgba(44,52,58,.62));
  --card-glass-border:rgba(200,214,222,.22);}
.benefits .section-head h2{color:#fff;}
/* benefits intro: left-aligned, full-width, with orange highlight (matches reference) */
.benefits-head{margin:0 0 46px;}
.benefits-head h2{color:#fff;font-family:var(--f-head);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.4rem);line-height:1.2;margin-bottom:.5em;}
.benefits-head p{color:var(--text-benefits);font-family:var(--f-head);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;letter-spacing:0.4px;max-width:1000px;margin:0;}
.hl-o{color:var(--hot);font-weight:700;}
.benefits-grid{display:grid;grid-template-columns:2.35fr 1fr;gap:22px;align-items:stretch;}
.benefit-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.benefit-card{
  display:flex;flex-direction:column;justify-content:center;
  background:var(--card-glass);border:1px solid var(--card-glass-border);
  border-radius:12px;padding:20px 20px;backdrop-filter:blur(2px);
}
.benefit-card .eyebrow{color:var(--eyebrow-on-dark);margin-bottom:.35rem;} /* sunset gold, matches thermal-section mood */
.benefit-card h3{color:#fff;font-size:1.18rem;margin-bottom:.4rem;}
.benefit-card p{color:var(--text-benefit-card);font-size:.94rem;margin:0;}
.benefit-media{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:16px;min-height:0;}
.benefit-media img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:12px;}

/* ============================================================
   PROCESS
   ============================================================ */
.process{background:var(--paper-2);}
.process .section-head h2{color:var(--orange);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.step{background:#fff;border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-soft);border:1px solid var(--line);}
.step .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--amber);color:#fff;
  font-family:var(--f-head);font-weight:700;font-size:1.15rem;margin-bottom:14px;
}
.step h3{font-size:1.16rem;color:var(--text-card-head);}
.step p{color:var(--text-card);font-size:.94rem;margin:0;}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:40px;align-items:start;}
.faq-intro{background:var(--bg-feature);color:#fff;border-radius:18px;padding:44px 36px;box-shadow:0 22px 46px rgba(180,71,43,.34);position:sticky;top:100px;}
.faq-intro h2{color:#fff;font-size:1.7rem;}
.faq-intro p{color:rgba(255,255,255,.92);margin-bottom:1.5rem;}
.faq-list{display:flex;flex-direction:column;gap:16px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-soft);overflow:hidden;}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--f-head);font-weight:700;
  font-size:1.08rem;color:var(--text-card-head);display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--amber);font-size:1.5rem;font-weight:700;line-height:1;transition:transform .2s;}
.faq-item[open] summary::after{content:"–";}
.faq-item .faq-a{padding:0 24px 22px;color:var(--text-faq);}
.faq-item .faq-a p{margin:0;}

/* ============================================================
   ESTIMATE FORM (dark)
   ============================================================ */
.estimate{background:var(--bg-dark);color:#fff;}
/* Even split: bigger photo left, heading+lede stacked ON TOP of the form (right),
   top-aligned so there's no centered negative-area gap. Global : used on ~80% of pages. */
.estimate-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:52px;align-items:start;}
.estimate h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.3rem);}
.estimate .lede{color:var(--text-on-hero);font-size:1.08rem;max-width:46ch;}
.estimate-img{border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.4);max-width:100%;}
.estimate-photo .estimate-img{margin-top:0;width:100%;max-width:100%;}
.estimate-right h2{margin-bottom:.4em;}
.estimate-right .lede{margin-bottom:22px;}

/* the styled placeholder form */
.form-card{background:rgba(6,12,16,.55);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px;backdrop-filter:blur(2px);}
.form-card .form-embed-slot iframe{display:block;width:100%;}
/* When a live embed (iframe) is in the slot, drop the dark card entirely :
   the embedded form carries its own container, so no box or padding around it. */
.form-card:has(iframe){background:none;border:0;border-radius:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;}
/* Desktop 2-col: the Lead Simplify embed has its own internal left padding we can't
   reach (cross-origin), so instead of moving the form we shift the heading + lede RIGHT
   until the copy's left edge lines up with the form's fields. Tune --est-copy-shift. */
:root{ --est-copy-shift:40px; }
@media(min-width:821px){ .estimate-right:has(iframe) h2, .estimate-right:has(iframe) .lede{ margin-left:var(--est-copy-shift); } }
/* Single-column (tablet + mobile): full-bleed the embed to the section edges; copy stays
   at the gutter where it already lines up with the form. */
@media(max-width:820px){ .estimate .form-card:has(iframe){margin-left:-24px;margin-right:-24px;} }
@media(max-width:640px){ .form-card{padding:6px;border-radius:14px;} }
.form-embed-slot{position:relative;}
.slot-note{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slot-note);border:1px dashed rgba(255,179,122,.5);border-radius:8px;
  padding:8px 12px;margin-bottom:18px;
}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px;color:var(--text-field-label);}
.field label .req{color:var(--field-required);}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--field-text);
  background:rgba(4,10,14,.7);border:1px solid rgba(255,255,255,.18);border-radius:9px;
  padding:12px 14px;
}
.field textarea{min-height:110px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--field-placeholder);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-card .btn{width:100%;margin-top:6px;}

/* ============================================================
   PRE-FOOTER CTA
   ============================================================ */
.cta-band{background:var(--hot);color:var(--text-on-cta);padding:34px 0;}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px 36px;flex-wrap:nowrap;}
.cta-band .btn{flex:none;}
/* Wrap the band at 1150, not 640, matching the nav's own breakpoint. Between the two the button sits beside the
   headline and steals about 260px, which is what was forcing a second line on
   two thirds of the pages at tablet width. Stacked, the headline gets the full
   measure and stays on one line. Dan 2026-07-30: no line should wrap. */
@media(max-width:1150px){.cta-band .wrap{flex-wrap:wrap;}}
/* Matched to .aside-note h2, the "Rental Properties Run on a Schedule" headline
   on the homepage. Dan 2026-07-30. Same clamp, not just the same value at one
   width, so the two stay equal at every size. */
.cta-band h2{font-size:clamp(1.5rem,2.6vw,2rem);color:var(--text-on-cta);margin:0;min-width:0;text-wrap:balance;}
.cta-band .btn{flex:none;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--bg-footer);
  color:var(--text-on-shell);border-top:3px solid var(--hot);padding:54px 0 0;
}
.footer-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:48px;padding-bottom:46px;}
.footer-brand img{height:auto;width:auto;max-height:80px;max-width:100%;margin-bottom:24px;}
.footer-brand p{color:var(--text-footer);font-size:.95rem;line-height:1.65;max-width:62ch;margin:0;}
.footer-brand p strong{color:var(--hot);font-weight:700;}
.footer-col ul{list-style:none;margin:0 0 28px;padding:0;}
.footer-col li{margin:.6rem 0;}
.footer-col a{color:var(--text-footer-link);text-decoration:none;font-size:1rem;}
.footer-col a:hover{color:var(--orange);}
.footer-btns{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.footer-copy{color:var(--text-footer-copy);font-size:.85rem;}
.footer-copy .wrap{border-top:1px solid rgba(255,255,255,.14);text-align:left;padding:18px 24px 26px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero-img{max-width:420px;margin:0 auto;order:2;}
  .benefits-grid{grid-template-columns:1fr;}
  .benefit-media{grid-template-rows:none;grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .estimate-grid{grid-template-columns:1fr;gap:32px;}
  .faq-grid{grid-template-columns:1fr;}
  .faq-intro{position:static;}
}
@media(max-width:860px){
  .nav-toggle{display:block;}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--shell);
    flex-direction:column;align-items:stretch;padding:10px 16px 20px;gap:0;
    border-bottom:1px solid rgba(255,255,255,.08);display:none;
  }
  .main-nav.open{display:flex;}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;}
  .main-nav a{padding:12px 8px;border-radius:6px;}
  .has-dropdown > a::after{float:right;}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;padding:0 0 6px 14px;display:none;}
  .has-dropdown.open .dropdown{display:block;}
  .dropdown a{color:var(--text-on-shell);}
  .dropdown a:hover{background:transparent;color:var(--orange);}
  .header-cta{display:none;}
}
@media(max-width:720px){
  .section{padding:60px 0;}
  .svc-grid{grid-template-columns:1fr;}
  .svc-card{flex-direction:column-reverse;}
  .svc-card .svc-photo{flex:none;width:100%;height:auto;aspect-ratio:3/2;}
  .svc-card .svc-body{flex:none;padding:26px 24px 30px;}
  .split{grid-template-columns:1fr;gap:32px;}
  .framed{max-width:460px;}
  .steps{grid-template-columns:1fr;}
  .benefit-cards{grid-template-columns:1fr;}
  .benefit-media{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .hero h1{font-size:2.1rem;}
}
@media(max-width:480px){
  .svc-card .svc-photo{aspect-ratio:16/10;}
}

/* ============================================================
   SERVICE PAGE COMPONENTS  (kit; used by service-page-template.html)
   New selectors are global-safe. .page-service-scoped rules below
   adjust shared components without affecting the locked homepage.
   ============================================================ */
/* ============================================================
   SERVICE PAGE : components (merge into shared styles.css for the kit)
   ============================================================ */
/* text-only hero with the page's bottom photo ghosted over the gradient */
.svc-hero{position:relative;background:var(--bg-dark);color:#fff;padding:66px 0 74px;overflow:hidden;}
.svc-hero::before{content:"";position:absolute;inset:0;
  background-image:var(--hero-photo,none);background-size:cover;
  background-position:var(--hero-photo-pos,center);
  opacity:.20;mix-blend-mode:soft-light;pointer-events:none;}
.svc-hero .wrap{position:relative;z-index:1;}
.svc-hero h1{font-size:clamp(2.15rem,4.7vw,3.3rem);line-height:1.12;margin-bottom:.5em;}
.svc-hero .lede{font-size:clamp(1.14rem,1.55vw,1.32rem);line-height:1.5;color:var(--text-svc-lede);max-width:none;margin:0;}

/* dark sub-CTA strip under the hero */
.subcta{background:var(--shell);padding:38px 0;border-top:2px solid var(--accent);border-bottom:1px solid rgba(255,255,255,.05);}
.subcta .wrap{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}

/* long-form article column */
.article{background:var(--paper);padding:74px 0;}
.article .col{max-width:840px;margin:0 auto;}
.article-img{width:100%;aspect-ratio:16/7;border-radius:14px;box-shadow:var(--shadow);margin-bottom:40px;object-fit:cover;}
.article h2{color:var(--ink);font-size:clamp(1.5rem,2.7vw,1.95rem);margin-bottom:.6em;}
.article p{color:var(--text-body);margin-bottom:1.1rem;}
.article p strong{color:var(--ink);}
.article .brandlink{color:var(--link);font-weight:600;}
.article-list{list-style:none;margin:1.2rem 0 1.6rem;padding:0;}
.article-list li{position:relative;padding-left:24px;margin:.72rem 0;color:var(--text-body);}
.article-list li::before{content:"•";position:absolute;left:4px;top:-2px;color:var(--accent);font-size:1.3em;line-height:1;}
.article-list strong{color:var(--ink);}
.article h3{font-size:1.06rem;color:var(--ink);margin:1.7rem 0 .5rem;}

/* "signs you need it" checklist on an orange fade */
.signs{background:var(--signs-bg,var(--signs-bg-default));padding:66px 0;}
.signs .section-head h2{color:var(--ink);}
.signs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.sign{background:#fff;border-radius:10px;padding:15px 20px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-soft);color:var(--text-body);font-size:.98rem;}
.sign::before{content:"✓";color:var(--accent);font-weight:800;flex:none;}

/* two-column "what it costs you" with dark numbered card */
.costs{background:var(--paper);padding:74px 0;}
.costs-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start;}
.costs h2{color:var(--ink);font-size:clamp(1.5rem,2.7vw,1.95rem);margin-bottom:.6em;}
.costs p{color:var(--text-body);margin-bottom:1.1rem;}
.costs-card{background:var(--shell);color:var(--text-costs-card);border-radius:16px;padding:30px 32px;box-shadow:var(--shadow);}
.costs-card h3{color:#fff;font-size:1.15rem;margin-bottom:1rem;}
.costs-card ol{list-style:none;counter-reset:c;margin:0;padding:0;}
.costs-card li{counter-increment:c;display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid rgba(255,255,255,.09);color:var(--text-on-shell);font-size:.96rem;}
.costs-card li:first-child{border-top:0;padding-top:0;}
.costs-card li::before{content:counter(c,decimal-leading-zero);color:var(--accent);font-family:var(--f-mono);font-weight:700;font-size:.92em;flex:none;}

/* full-width FAQ (single centered column) */
.faq-section{background:var(--faq-bg,var(--signs-bg-default));padding:74px 0;}
.faq-section .section-head h2{color:var(--ink);}
.faq-solo{max-width:none;}

@media(max-width:820px){
  .signs-grid{grid-template-columns:1fr;}
  .costs-grid{grid-template-columns:1fr;gap:30px;}
}

/* ---- Sliding FAQ accordion : GLOBAL (every .faq-item on every page) ----
   Requires each answer wrapped as .faq-a > .faq-a-in > p, and the expand/collapse
   JS in each page's footer script (native <details> toggle only animates in the
   newest Chromium; the JS drives the grid-rows slide in all browsers). */
.faq-item .faq-a{display:grid;grid-template-rows:0fr;padding:0;
  transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1);}
.faq-item[open] .faq-a{grid-template-rows:1fr;}
.faq-item .faq-a-in{overflow:hidden;min-height:0;}
.faq-item .faq-a-in > p{margin:0;padding:2px 24px 22px;}
/* estimate layout is now global (see ESTIMATE FORM block above; mobile stack handled
   by the existing max-width:820px block); no per-page override needed. */

/* ============================================================
   LOCATION PAGE COMPONENTS  (kit; used by location-page-template.html)
   New selectors, global-safe. Theme-matched (re-skins per city).
   ============================================================ */
/* full-bleed photo hero with a theme-dark translucent panel */
.loc-hero{position:relative;min-height:clamp(440px,48vw,580px);display:flex;align-items:center;
  background:var(--loc-hero-photo,linear-gradient(120deg,var(--estimate-bg),var(--estimate-bg-2))) center/cover no-repeat;
  color:#fff;padding:52px 0;overflow:hidden;}
.loc-hero::before{content:none;}  /* bright photo, no dark overlay : the translucent text block carries legibility */
.loc-hero .wrap{position:relative;z-index:1;}
.loc-panel{max-width:none;text-align:center;
  background:var(--loc-panel-bg,rgba(14,20,23,.66));border:1px solid rgba(150,200,232,.20);
  border-radius:0;padding:clamp(30px,4vw,46px) clamp(28px,5vw,64px);}
.loc-hero h1{margin:0;color:#fff;font-weight:300;font-size:min(66px,10vw);line-height:1.16;}

/* boxed map + mono city caption on the light article background */
.loc-map{background:var(--paper);padding:6px 0 78px;}
.loc-map .map-frame{max-width:840px;margin:0 auto;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:16/9;background:var(--paper-2);}
.loc-map iframe{width:100%;height:100%;border:0;display:block;}
.loc-map .map-caption{text-align:center;margin:18px 0 0;font-family:var(--f-head);font-weight:500;
  font-size:20pt;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);}

/* ============================================================
   ABOUT PAGE COMPONENTS  (kit; used by about-page-template.html)
   Two-column: long article (left) + form & map sidebar (right).
   ============================================================ */
.about-wrap{background:var(--paper);}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:56px;align-items:start;}
.about-main h2{color:var(--ink);font-size:clamp(1.4rem,2.4vw,1.8rem);margin:2.2rem 0 .7em;}
.about-main h2:first-child{margin-top:0;}
.about-main p{color:var(--text-body);margin-bottom:1.1rem;}
.about-main p strong{color:var(--ink);}
.about-main .brandlink{color:var(--link);font-weight:600;}
.about-main .article-list{margin:1rem 0 1.4rem;}
.about-main .link-list li{margin:.5rem 0;}

/* in-article center photo (4:3) */
.about-figure{margin:30px 0 34px;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);background:var(--paper-2) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:var(--text-caption);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;}
.about-figure img{width:100%;height:100%;object-fit:cover;display:block;}

/* sidebar */
.about-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:26px;}
.about-aside > h2{color:var(--ink);font-size:clamp(1.4rem,2.2vw,1.7rem);margin:0;}

/* form re-styled for a light sidebar: transparent card, dark inputs */
.page-about .about-aside .form-card{background:transparent;border:0;border-radius:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;}
.page-about .about-aside .form-embed-slot{border:0;padding:0;}
.page-about .about-aside .slot-note{display:none;}
.page-about .about-aside .form-row{display:flex;flex-direction:column;gap:0;}
.page-about .about-aside label{color:var(--ink);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:600;}
.page-about .about-aside .field{margin-bottom:14px;}
.page-about .about-aside input,.page-about .about-aside select,.page-about .about-aside textarea{
  background:var(--shell);color:#fff;border:1px solid var(--field-bg-about);border-radius:8px;width:100%;}
.page-about .about-aside input::placeholder,.page-about .about-aside textarea::placeholder{color:var(--field-placeholder-2);}
.page-about .about-aside .req{color:var(--accent);}

/* sidebar map + small caption */
.aside-map{margin-top:46px;}
.aside-map-frame{width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-soft);background:var(--paper-2);}
.aside-map-frame iframe{width:100%;height:100%;border:0;display:block;}
.aside-map-cap{text-align:center;margin:16px 0 0;font-family:var(--f-head);font-weight:500;
  font-size:20pt;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);}

@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:40px;}
  .about-aside{position:static;}
}

/* ============================================================
   FAQ PAGE COMPONENTS  (kit; used by faq-page-template.html)
   Photo hero + intro, then topic sections over one orange gradation.
   ============================================================ */
.faq-page-intro{background:var(--paper);padding:64px 0 72px;}
.faq-page-intro .wrap{max-width:760px;text-align:center;}
.faq-page-intro p{color:var(--text-body);font-size:1.06rem;margin:0;}
.faq-page-intro .brandlink{color:var(--link);font-weight:600;}

/* one continuous orange gradation behind all topic sections */
.faq-groups{background:var(--paper);}
.faq-group{padding:92px 0 94px;
  /* full-bleed, UNEVEN diagonal orange: light top -> deep bottom.
     Section ends deep at the bottom edge and the next starts light,
     so every boundary is a sharp line. Angle alternates for variety. */
  background:linear-gradient(158deg,var(--faq-a1) 0%,var(--faq-a2) 52%,var(--faq-a3) 84%,var(--faq-a4) 100%);}
.faq-group:nth-child(even){
  background:linear-gradient(202deg,var(--faq-b1) 0%,var(--faq-b2) 50%,var(--faq-b3) 86%,var(--faq-b4) 100%);}
.page-faq .section-head{margin-bottom:34px;}
.page-faq .section-head h2{color:var(--ink);}   /* dark heading reads on the orange */
.faq-group-photo{max-width:900px;margin:0 auto 40px;width:100%;aspect-ratio:4/1;border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:var(--text-caption);font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;}
.faq-group-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.page-faq .faq-list{max-width:none;margin:0 auto;}

/* closing block on paper */
.faq-closing{background:var(--paper);padding:64px 0 72px;}
.faq-closing .wrap{max-width:760px;text-align:center;}
.faq-closing h2{color:var(--ink);font-size:clamp(1.5rem,2.6vw,1.95rem);margin:0 0 .6em;}
.faq-closing p{color:var(--text-body);margin:0;}

/* ============================================================
   CONTACT PAGE COMPONENTS  (kit; used by contact-page-template.html)
   Darkened photo hero, then map + estimate-form, then services grid.
   ============================================================ */
.contact-hero{position:relative;min-height:clamp(320px,36vw,440px);display:flex;align-items:center;
  background:var(--contact-hero-photo,var(--contact-bg)) center/cover no-repeat;color:#fff;text-align:center;padding:60px 0;overflow:hidden;}
.contact-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,14,18,.52),rgba(8,14,18,.34) 46%,rgba(8,14,18,.66));}
.contact-hero .wrap{position:relative;z-index:1;max-width:880px;}
.contact-hero h1{color:#fff;font-weight:500;font-size:clamp(2.3rem,4.6vw,3.3rem);margin:0 0 .4em;}
.contact-hero .lede{color:var(--text-on-dark);font-size:1.14rem;line-height:1.6;max-width:740px;margin:0 auto;}

/* map + form */
.contact-main{background:var(--paper-2);padding:74px 0 82px;}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);gap:50px;align-items:start;}
.contact-map-frame{width:100%;aspect-ratio:5/4;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper);}
.contact-map-frame iframe{width:100%;height:100%;border:0;display:block;}
.contact-map-cap{text-align:center;margin:18px 0 0;font-family:var(--f-head);font-weight:500;
  font-size:20pt;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);}

.contact-form-card{background:#fff;border:2px solid var(--cta);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);}
.contact-form-card .form-head{background:var(--cta);color:#fff;text-align:center;padding:20px 24px;
  font-family:var(--f-head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.3rem;}
.contact-form-card .form-body{padding:30px 28px 34px;}
.contact-form-card .slot-note{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--cta-deep);background:var(--slot-note-2);border:1px dashed var(--cta);border-radius:8px;padding:9px 12px;margin-bottom:18px;}
.page-contact .contact-form-card .field{margin-bottom:16px;}
.page-contact .contact-form-card label{display:block;color:var(--ink);font-weight:600;font-size:.8rem;margin-bottom:6px;}
.page-contact .contact-form-card input,
.page-contact .contact-form-card select,
.page-contact .contact-form-card textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:11px 13px;color:var(--ink);font:inherit;}
.page-contact .contact-form-card textarea{min-height:92px;resize:vertical;}
.page-contact .contact-form-card .req{color:var(--accent);}
.page-contact .contact-form-card .form-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.page-contact .contact-form-card .btn{width:100%;margin-top:8px;}

/* our services grid */
.our-services{background:var(--white);padding:74px 0 86px;}
.our-services .section-head h2{color:var(--ink);}
.services-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.services-grid a{padding:16px 24px;color:var(--link);font-weight:500;text-decoration:none;background:#fff;
  border-bottom:1px solid var(--line);}
.services-grid a:nth-child(odd){border-right:1px solid var(--line);}
.services-grid a:nth-child(4n+3),.services-grid a:nth-child(4n+4){background:var(--paper);}
.services-grid a:hover{color:var(--cta-deep);text-decoration:underline;}

@media(max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:38px;}
}
@media(max-width:560px){
  .services-grid{grid-template-columns:1fr;}
  .services-grid a{border-right:0;}
  .page-contact .contact-form-card .form-row2{grid-template-columns:1fr;gap:0;}
}


/* ============================================================
   TEMPE ADDITIONS : additive only, scoped under .page-home.
   Nothing above this line was changed except the SITE THEME block.
   Remove this block and the shared engine is untouched.
   ============================================================ */

/* --- placeholder sizing helpers (pre-Midjourney) --- */
.ph[data-ar="3:4"]{aspect-ratio:3/4;}
.ph[data-ar="4:3"]{aspect-ratio:4/3;}
.ph[data-ar="4:1"]{aspect-ratio:4/1;}
.ph[data-ar="21:9"]{aspect-ratio:21/9;}
.ph[data-ar="3:2"]{aspect-ratio:3/2;}
.framed .ph{border-radius:10px;width:100%;}
.benefit-media .ph{width:100%;height:100%;min-height:190px;border-radius:12px;}
.estimate-photo .ph.estimate-img{width:100%;}

/* --- Hero: plain keyword H1, result H2 beneath it --- */
.hero h1{font-size:clamp(2rem,3.7vw,3.05rem);margin-bottom:.2em;}
.hero .hero-result{
  font-family:var(--f-head);font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.95rem);line-height:1.2;
  color:var(--hot);margin:0 0 .9rem;
}

/* --- wall-age visual (homepage + block-wall-repair) --- */
.page-home .wall-age{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:72px 0;
}
.page-home .wall-age .wall-age-head{max-width:900px;margin:0 0 34px;}
.page-home .wall-age h2{color:var(--accent);font-size:clamp(1.6rem,3vw,2.05rem);}
.page-home .wall-age p{color:var(--text-wallage);max-width:78ch;}
.page-home .wall-age-band{
  width:100%;border-radius:12px;margin:6px 0 26px;
  box-shadow:var(--shadow-soft);
}
.page-home .wall-age-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  counter-reset:wallstep;
}
.page-home .wall-age-step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  border-top:4px solid var(--accent);
  padding:22px 22px 20px;box-shadow:var(--shadow-soft);
}
.page-home .wall-age-step .decade{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cta);margin:0 0 .45rem;
}
.page-home .wall-age-step h3{font-size:1.1rem;color:var(--ink);margin-bottom:.35rem;}
.page-home .wall-age-step p{font-size:.94rem;color:var(--text-body-warm);margin:0;}
@media(max-width:860px){
  .page-home .wall-age-steps{grid-template-columns:1fr;}
}

/* --- failure modes strip --- */
.page-home .failure-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;
}
.page-home .failure-card{
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);
  border-radius:var(--radius-sm);padding:24px 22px;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;
}
.page-home .failure-card h3{font-size:1.08rem;color:var(--ink);margin-bottom:.4rem;}
.page-home .failure-card p{font-size:.95rem;color:var(--text-body-warm);}
.page-home .failure-card .link-arrow{padding-top:12px;}
@media(max-width:980px){.page-home .failure-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:680px){.page-home .failure-grid{grid-template-columns:1fr;}}

/* --- cities strip --- */
.page-home .cities{background:var(--paper-2);padding:76px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.page-home .cities .section-head{margin-bottom:26px;}
.page-home .city-pills{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 26px;
}
.page-home .city-pills a{
  display:inline-block;text-decoration:none;
  font-family:var(--f-head);font-weight:600;font-size:1rem;
  color:var(--cta);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:11px 22px;transition:background .18s,color .18s,border-color .18s;
}
.page-home .city-pills a:hover{background:var(--cta);color:#fff;border-color:var(--cta);}
.page-home .cities-note{max-width:78ch;margin:0 auto;text-align:center;color:var(--text-body-warm);}

/* --- landlord block --- */
.page-home .landlord{background:var(--paper-2);}
.page-home .landlord .prose h2{color:var(--accent);}

/* --- 11th service card (catch-all) --- */
.svc-card--catchall{border-left:5px solid var(--cta);grid-column:1/-1;min-height:0;}
.svc-card--catchall .svc-body{flex:1 1 100%;}

/* --- What you get: six-box trust row (homepage) --- */
.page-home .getgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;}
.page-home .getbox{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:24px 22px;box-shadow:var(--shadow-soft);
}
.page-home .getbox .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--f-head);font-weight:700;font-size:.95rem;margin-bottom:12px;
}
.page-home .getbox h3{font-size:1.06rem;color:var(--ink);margin-bottom:.35rem;}
.page-home .getbox p{font-size:.94rem;color:var(--text-body-warm);margin:0;}
@media(max-width:980px){.page-home .getgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.page-home .getgrid{grid-template-columns:1fr;}}

/* --- Fence materials comparison table (homepage) --- */
.page-home .mat-wrap{margin-top:32px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.page-home .mat-table{
  width:100%;min-width:660px;border-collapse:separate;border-spacing:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;box-shadow:var(--shadow-soft);font-size:.95rem;
}
.page-home .mat-table thead th{
  background:var(--shell);color:#fff;text-align:left;
  font-family:var(--f-head);font-weight:600;font-size:.92rem;
  padding:15px 18px;white-space:nowrap;
}
.page-home .mat-table tbody td{padding:15px 18px;border-top:1px solid var(--line);color:var(--text-body-warm);vertical-align:top;}
.page-home .mat-table tbody tr:nth-child(even) td{background:var(--paper);}
.page-home .mat-table tbody th{
  padding:15px 18px;border-top:1px solid var(--line);text-align:left;
  font-family:var(--f-head);font-weight:700;color:var(--ink);white-space:nowrap;
}
.page-home .mat-table tbody tr:nth-child(even) th{background:var(--paper);}
.page-home .mat-note{margin-top:16px;font-size:.92rem;color:var(--text-matnote);max-width:80ch;}
.page-home .mat-pick{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;
}
.page-home .mat-pick div{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--cta);
  border-radius:var(--radius-sm);padding:20px 20px;box-shadow:var(--shadow-soft);
}
.page-home .mat-pick h3{font-size:1.02rem;color:var(--ink);margin-bottom:.3rem;}
.page-home .mat-pick p{font-size:.93rem;color:var(--text-body-warm);margin:0;}
@media(max-width:860px){.page-home .mat-pick{grid-template-columns:1fr;}}

/* --- Tempe wordmark. A wide 1000x82 lockup, so the kit's 44px header cap would
       render it 537px and crowd the nav. Stepped by width, and never allowed to
       shrink, because flex was squashing it to 139px at 980px. --- */
.site-header .brand{flex:0 0 auto;}
.site-header .brand img{max-height:34px;max-width:none;flex:none;}
@media(max-width:1199px){.site-header .brand img{max-height:27px;}}
/* Between the hamburger breakpoint (860px) and about 1265px, the logo, six nav
   items and the call button did not fit in the 1200px wrap, so the button hung
   32px off the right edge and every page had a horizontal scrollbar at exactly
   1200px viewport. Tightening the nav in that band is enough. Found while
   measuring the city hero, present on every page including the homepage.
   Dan 2026-07-30. */
@media(min-width:861px) and (max-width:1265px){
  .main-nav a{padding:10px 9px;font-size:.93rem;}
  .header-cta{margin-left:4px;}
}
@media(max-width:860px){.site-header .brand img{max-height:30px;}}
@media(max-width:560px){.site-header .brand img{max-height:22px;}}
@media(max-width:400px){.site-header .brand img{max-height:19px;}}
@media(max-width:340px){.site-header .brand img{max-height:16px;}}
.site-footer .footer-brand img{max-height:none;width:340px;max-width:100%;margin-bottom:22px;}

/* --- Three-step variant of the kit's four-step row. Done as a class, not an
       inline style, because an inline grid-template-columns outranks the kit's
       mobile media queries and blew the page out to 455px on a 390px screen. --- */
.steps--3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.steps--3{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.steps--3{grid-template-columns:1fr;}}

/* --- Collapse the nav to the hamburger earlier than the kit's 860px. The wide
       wordmark plus seven nav items plus the call button do not fit until about
       1150px, and the call button is worth more than the open nav on a tablet. --- */
@media(max-width:1150px){
  .nav-toggle{display:block;}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--shell);
            flex-direction:column;align-items:stretch;padding:10px 16px 20px;gap:0;
            border-top:1px solid rgba(255,255,255,.08);}
  .main-nav.open{display:flex;}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;}
  .main-nav a{padding:12px 8px;border-radius:6px;}
  /* The panel is absolutely positioned inside a sticky header, so the page
     scrolling behind it does not move it. With the ten-item Services list open
     the panel is 808px tall, which fits a 390x844 test viewport and does NOT
     fit a real phone once the browser's own toolbars are there. The bottom
     items were unreachable: the menu looked like it had stopped working.
     dvh, not vh, because vh on mobile Safari is the tall viewport and ignores
     the toolbars, which is the exact thing being corrected for. */
  .main-nav.open{max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain;
                 -webkit-overflow-scrolling:touch;}
  /* opacity and visibility have to be reset here, not just display. The desktop
     .dropdown rule hides the panel with opacity:0;visibility:hidden and animates
     it in on hover. The old mobile block only restored `display`, so between
     861 and 1150 the items were laid out, took up their full height, and were
     completely invisible. A display-only check passes that state, which is how
     it survived: getBoundingClientRect reports the real height of a
     visibility:hidden element. It was caught by taking a screenshot. */
  .main-nav .dropdown{position:static;display:none;box-shadow:none;background:transparent;
                      padding-left:12px;opacity:1;visibility:visible;transform:none;}
  .main-nav .has-dropdown.open .dropdown{display:block;opacity:1;visibility:visible;transform:none;}
  /* And the colour. The desktop dropdown is a white card, so its links are
     var(--ink), near-black. Dropped onto the dark mobile panel unchanged that is
     black on black: laid out, visible, opacity 1, and unreadable. Three separate
     properties had to be restored here and only one of them was. */
  .main-nav .dropdown a{color:var(--text-on-shell);}
  .main-nav .dropdown a:hover{background:transparent;color:var(--orange);}
  /* The caret should say which way it is pointing. */
  .main-nav .has-dropdown > a::after{transition:transform .18s;display:inline-block;}
  .main-nav .has-dropdown.open > a::after{transform:rotate(180deg);}
}
@supports not (height: 100dvh){
  @media(max-width:1150px){ .main-nav.open{max-height:calc(100vh - 100%);} }
}

/* ============================================================
   TEMPE VISUAL SYSTEM, 2026-07-28
   Derived from planofenceco.com, Dan's live fence site, and translated
   into Sun-Baked Block. The problem being fixed: the page was a stack of
   similarly sized card grids on flat backgrounds, so nothing had rhythm.
   Plano gets its rhythm from four things, all reproduced here:
     1. big runs of RICH TEXTURED DARK, not flat color
     2. a PHOTO-BACKGROUND section as a third surface type
     3. genuinely different section SHAPES, not five grids
     4. confident, large, letterspaced section headings
   All additive and scoped. The shared engine is untouched.
   ============================================================ */

:root{
  --deep:#333A3F;
  --deep-2:#454F56;
  --clay-band:#7A3411;
  --tex-stucco:none;
  --tex-block:none;
}

/* ---------- surfaces ---------- */
.surface--deep{
  position:relative;
  background:
    var(--tex-stucco) top left/256px 256px repeat,
    var(--tex-block) top left/450px 300px repeat,
    radial-gradient(120% 90% at 12% 0%, rgba(154,91,66,.26), transparent 58%),
    linear-gradient(168deg,var(--deep-2) 0%,var(--deep) 46%,var(--deep-3) 100%);
  color:var(--text-on-deep-hi);
}
.surface--deep h2,.surface--deep h3{color:#fff;}
.surface--deep p{color:var(--text-on-deep);}
.surface--deep .section-head h2{color:#fff;}

.surface--clay{
  background:
    var(--tex-stucco) top left/256px 256px repeat,
    linear-gradient(100deg,var(--blue-deep) 0%,var(--clay-mid) 52%,var(--clay-band) 100%);
  color:var(--text-on-clay);
}

/* ---------- section headings, bigger and more certain ---------- */
.page-home .section-head h2,
.page-home .wall-age h2,
.page-home .prose h2{
  font-size:clamp(1.85rem,3.1vw,2.6rem);
  line-height:1.12;
  letter-spacing:-.005em;
}
.page-home .surface--deep .section-head h2{letter-spacing:.005em;}
.page-home .section-head{max-width:900px;}
.page-home .eyebrow{font-size:.7rem;letter-spacing:.2em;}

/* ---------- 1. trust strip, four across under the hero ---------- */
.trustbar{padding:0;}
.trustbar .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;padding-top:0;padding-bottom:0;
}
.trustbar .tb{
  padding:30px 26px;
  border-right:1px solid rgba(255,255,255,.16);
  display:flex;gap:14px;align-items:flex-start;
}
.trustbar .tb:last-child{border-right:0;}
.trustbar .tb svg{flex:none;width:26px;height:26px;margin-top:2px;opacity:.95;}
.trustbar .tb b{
  display:block;font-family:var(--f-head);font-weight:700;
  font-size:1rem;line-height:1.25;color:#fff;
}
.trustbar .tb span{
  display:block;font-size:.88rem;line-height:1.35;color:rgba(252,239,226,.86);margin-top:2px;
}
@media(max-width:980px){.trustbar .wrap{grid-template-columns:1fr 1fr;}
  .trustbar .tb:nth-child(2){border-right:0;}
  .trustbar .tb:nth-child(1),.trustbar .tb:nth-child(2){border-bottom:1px solid rgba(255,255,255,.16);}}
@media(max-width:560px){.trustbar .wrap{grid-template-columns:1fr;}
  .trustbar .tb{border-right:0;border-bottom:1px solid rgba(255,255,255,.16);}
  .trustbar .tb:last-child{border-bottom:0;}}

/* ---------- 2. full-bleed photo band ---------- */
.bleed-band{display:block;width:100%;height:clamp(180px,26vw,330px);object-fit:cover;}

/* ---------- 3. glass boxes on the dark run (was six white cards) ---------- */
.page-home .surface--deep .getgrid{margin-top:0;}
.page-home .surface--deep .getbox{
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bottom));
  border:1px solid var(--glass-border);
  box-shadow:none;backdrop-filter:blur(2px);
}
.page-home .surface--deep .getbox h3{color:#fff;}
.page-home .surface--deep .getbox p{color:var(--text-on-deep);}
.page-home .surface--deep .getbox .num{background:var(--hot);color:var(--text-on-hot);}

/* ---------- 4. photo-background section with overlay cards ---------- */
.photo-section{position:relative;padding:96px 0;background:var(--deep);overflow:hidden;}
.photo-section > img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.photo-section::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(34,29,26,.86),rgba(34,29,26,.72) 40%,rgba(34,29,26,.9));
}
.photo-section .wrap{position:relative;z-index:2;}
.photo-section .section-head h2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5);}
.photo-section .section-head p{color:var(--text-on-photo);}
.areagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;}
.areacard{
  background:linear-gradient(180deg,rgba(58,44,34,.82),rgba(34,29,26,.88));
  border:1px solid rgba(232,196,160,.26);border-radius:var(--radius-sm);
  padding:24px 22px;backdrop-filter:blur(3px);
}
.areacard h3{font-size:1.12rem;color:#fff;margin-bottom:.4rem;}
.areacard p{font-size:.93rem;color:var(--text-on-deep);margin:0 0 .8rem;}
.areacard a{color:var(--hot);font-weight:600;text-decoration:none;font-size:.93rem;}
.areacard a:hover{text-decoration:underline;}
@media(max-width:900px){.areagrid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.areagrid{grid-template-columns:1fr;}}

/* ---------- 5. checklist section, photo left and list right ---------- */
.checkwrap{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:52px;align-items:center;}
.checkwrap .framed{max-width:none;}
.checklist{list-style:none;margin:0;padding:0;}
.checklist li{
  position:relative;padding:0 0 0 40px;margin:0 0 20px;
}
.checklist li:last-child{margin-bottom:0;}
.checklist li::before{
  content:"";position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;
  background:var(--hot);
}
.checklist li::after{
  content:"";position:absolute;left:9px;top:9px;width:8px;height:13px;
  border:solid var(--text-on-hot);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.checklist b{display:block;font-family:var(--f-head);font-weight:700;font-size:1.06rem;color:var(--ink);margin-bottom:.15rem;}
.checklist span{display:block;font-size:.96rem;color:var(--text-body-warm);line-height:1.55;}
@media(max-width:900px){.checkwrap{grid-template-columns:1fr;gap:32px;}}

/* ---------- 6. FAQ, accent bar on each question ---------- */
.page-home .faq-item{border-left:4px solid var(--hot);}
.page-home .faq-item summary{font-family:var(--f-head);font-weight:700;}

/* ---------- 7. steps on the dark run ---------- */
.surface--clay .steps .step{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  box-shadow:none;backdrop-filter:blur(2px);
}
.surface--clay .steps .step h3{color:#fff;}
.surface--clay .steps .step p{color:rgba(252,239,226,.9);}
.surface--clay .steps .step .num{background:var(--hot);color:var(--text-on-hot);}
.surface--clay .section-head h2{color:#fff;}

/* ---------- 8. hero, richer ---------- */
.hero{
  background:
    var(--tex-stucco) top left/256px 256px repeat,
    var(--tex-block) top right/450px 300px repeat,
    var(--bg-dark);
}
.hero-img{box-shadow:0 30px 70px rgba(0,0,0,.5);}

/* ---------- 9. estimate and footer pick up the texture ---------- */
.estimate{
  background:
    var(--tex-stucco) top left/256px 256px repeat,
    var(--bg-dark);
}
.site-footer{background-image:var(--tex-stucco),var(--bg-footer);background-size:256px 256px,cover;}

/* ---------- 10. tighten the wall-age band into the new rhythm ---------- */
.page-home .wall-age{background:var(--paper-2);border-top:0;padding-top:64px;}
.page-home .wall-age .wall-age-head{max-width:820px;margin-inline:auto;text-align:center;}
.page-home .wall-age-steps{margin-top:34px;}

/* --- White cards sitting ON a deep surface must keep their own text colors.
       .surface--deep p/h3 was bleeding into .svc-card and washing the copy out. --- */
.surface--deep .svc-card h3{color:var(--text-card-head);}
.surface--deep .svc-card p{color:var(--text-card);}
.surface--deep .svc-card .link-arrow{color:var(--link);}
.surface--deep .svc-card--catchall h3{color:var(--text-card-head);}
.surface--deep .svc-card--catchall p{color:var(--text-card);}
.surface--clay .step h3{color:#fff;}

/* --- Wall-age row as a timeline, not a third row of small white cards.
       Number, rule, label. Different shape from every other group on the page. --- */
.page-home .wall-age-steps{
  grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
  counter-reset:wa;
}
.page-home .wall-age-step{
  background:none;border:0;border-top:2px solid var(--line);border-radius:0;
  box-shadow:none;padding:26px 34px 0 0;position:relative;counter-increment:wa;
}
.page-home .wall-age-step:not(:last-child){border-right:0;}
.page-home .wall-age-step::before{
  content:counter(wa);position:absolute;top:-17px;left:0;
  width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--f-head);font-weight:700;font-size:.92rem;
  display:flex;align-items:center;justify-content:center;
}
.page-home .wall-age-step .decade{margin-top:4px;color:var(--cta);}
.page-home .wall-age-step h3{font-size:1.14rem;}
.page-home .wall-age-step p{font-size:.95rem;}
@media(max-width:860px){
  .page-home .wall-age-steps{grid-template-columns:1fr;gap:0;}
  .page-home .wall-age-step{padding:26px 0 8px;}
}

/* --- Materials pick-me cards read lighter, so they do not echo the timeline --- */
.page-home .mat-pick div{background:var(--paper);border-left-width:3px;box-shadow:none;}

/* ---- surface modifiers, so every section carries a class the gate can read ---- */
.section--paper2{background:var(--paper-2);}
.section--ruled{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section--flush-top{padding-top:0;}
/* Continues the surface above it, but with real room at the top. */
.section--roomy-top{padding-top:clamp(56px,7vw,104px);}

/* ---- aside note: one audience-specific block, shaped unlike anything else
       on the page so it reads as an aside rather than another sales section. ---- */
.aside-note{
  max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-left:6px solid var(--hot);border-radius:14px;padding:38px 44px;
  box-shadow:0 14px 40px rgba(43,38,34,.07);
}
.aside-note .eyebrow{color:var(--accent);margin:0 0 6px;}
.aside-note h2{margin:0 0 14px;font-size:clamp(1.5rem,2.6vw,2rem);}
.aside-note p{color:var(--text-aside);}
.aside-note p:last-child{margin-bottom:0;}
.aside-tel{color:var(--cta);font-weight:600;}
@media(max-width:640px){.aside-note{padding:28px 24px;border-radius:12px;}}

/* =====================================================================
   ROUND 2, 2026-07-28. Dan's notes after seeing the rebuild.
   A cool navy is introduced to break the brown run. It appears exactly
   twice, so it reads as punctuation rather than a second theme.
   ===================================================================== */
:root{ --navy:#7A4230; }

/* ---- navy surface: the trust strip under the hero ---- */
.surface--navy{
  /* The stucco texture sits on a white-ish alpha, so laying it straight over
     the gradient was lightening the band to about var(--navy-lifted), roughly 35 percent
     off the color Dan specified. Blending it multiply keeps the tactile
     surface and lands the composite on var(--navy). Measured, not eyeballed. */
  background:
    var(--tex-stucco) top left/256px 256px repeat,
    linear-gradient(100deg,var(--navy) 0%,var(--navy-mid) 55%,var(--navy-deep) 100%);
  background-blend-mode:multiply,normal;
  color:var(--text-on-navy);
}
.surface--navy .tb b{color:#fff;}
.surface--navy .tb span{color:rgba(224,236,247,.82);}
.surface--navy .tb svg{color:var(--hot);opacity:1;}
.trustbar.surface--navy .tb{border-right-color:rgba(255,255,255,.14);}
@media(max-width:980px){
  .trustbar.surface--navy .tb:nth-child(1),
  .trustbar.surface--navy .tb:nth-child(2){border-bottom-color:rgba(255,255,255,.14);}}
@media(max-width:560px){
  .trustbar.surface--navy .tb{border-bottom-color:rgba(255,255,255,.14);}}

/* ---- navy header row on the materials table ---- */
.page-home .mat-table thead th{background:var(--navy);}

/* ---- How It Works now matches What You Get With Every Job.
       Same glass box, same border, same orange numeral. ---- */
.surface--deep .steps .step{
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bottom));
  border:1px solid var(--glass-border);
  box-shadow:none;backdrop-filter:blur(2px);
}
.surface--deep .steps .step h3{color:#fff;}
.surface--deep .steps .step p{color:var(--text-on-deep);}
.surface--deep .steps .step .num{background:var(--hot);color:var(--text-on-hot);}
.surface--deep .section-head p{color:var(--text-on-deep);}

/* ---- footer logo: 75 percent of the copy block line length ---- */
.site-footer .footer-brand{max-width:62ch;}
.site-footer .footer-brand p{max-width:none;}
.site-footer .footer-brand img{width:75%;max-width:100%;height:auto;max-height:none;margin-bottom:22px;}

/* ---- scroll to top, every page, lower right ---- */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:50px;height:50px;border:0;border-radius:50%;cursor:pointer;
  background:var(--hot);color:var(--text-on-hot);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(12,37,63,.34);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:hover{background:var(--hot-hover);}
.to-top:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.to-top svg{width:22px;height:22px;}
@media(max-width:640px){.to-top{right:14px;bottom:14px;width:46px;height:46px;}}
@media(prefers-reduced-motion:reduce){.to-top{transition:none;}}

/* =====================================================================
   SERVICE PAGE, 2026-07-28. See _factory/DESIGN-ANATOMY.md section 2.
   Plano's prose depth carried inside our surface system. The kit's own
   service classes are reused; only surface and column width are added.
   ===================================================================== */

/* Hero: same grid as the homepage, on the deep textured surface. */
.page-service .svc-hero{padding:64px 0 72px;}
.page-service .svc-hero::before{display:none;}
.page-service .svc-hero h1{font-size:clamp(2.05rem,4.3vw,3.05rem);margin-bottom:.34em;}
.page-service .svc-hero .hero-result{
  font-family:var(--f-head);font-weight:700;color:var(--hot);
  font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.2;margin:0 0 .9rem;
}
.page-service .svc-hero:not(.svc-hero--photo) .lede{color:var(--text-on-hero-warm);max-width:56ch;}
.page-service .svc-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}

/* Sub CTA band, navy. Cool accent use 1 of 2. */
.subcta.surface--navy{border-top:2px solid var(--hot);border-bottom:0;padding:48px 0;}

/* The reading column. 840px is the kit's own article measure and it is
   what makes a 2,300 word page readable instead of a wall. */
.page-service .readcol{max-width:840px;margin:0 auto;}
.page-service .readcol h2{
  font-size:clamp(1.7rem,2.9vw,2.3rem);line-height:1.14;margin-bottom:.55em;
}
.page-service .readcol h3{
  font-family:var(--f-head);font-weight:700;font-size:1.22rem;
  margin:2.1rem 0 .6rem;
}
.page-service .readcol p{margin-bottom:1.1rem;line-height:1.7;}
.page-service .readcol p:last-child{margin-bottom:0;}
.page-service .readcol .framed{margin:32px 0 8px;}
.page-service .section--paper .readcol h2,
.page-service .section--paper2 .readcol h2{color:var(--accent);}
.page-service .section--paper .readcol h3,
.page-service .section--paper2 .readcol h3{color:var(--ink);}
.page-service .section--paper .readcol p,
.page-service .section--paper2 .readcol p{color:var(--text-body-warm);}
.page-service .surface--deep .readcol h2{color:#fff;}
.page-service .surface--deep .readcol h3{color:var(--hot);}
.page-service .surface--deep .readcol p{color:var(--text-on-deep);}

/* Signs, white cards on the deep surface. Rule 6: restate their colors. */
.signs.surface--deep{padding:74px 0;}
.signs.surface--deep .section-head h2{color:#fff;}
.signs.surface--deep .sign{color:var(--text-sign);}
.signs.surface--deep .sign::before{
  content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--hot);
}

/* Costs, on paper-2 with the card in ink. */
.costs.section--paper2{padding:74px 0;}
.costs.section--paper2 h2{color:var(--accent);font-size:clamp(1.7rem,2.9vw,2.3rem);line-height:1.14;}
.costs.section--paper2 p{color:var(--text-body-warm);}
.costs.section--paper2 .costs-card{background:var(--navy);}
.costs.section--paper2 .costs-card li{color:var(--text-on-costs);}
.costs.section--paper2 .costs-card li::before{
  content:counter(c);flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--hot);color:var(--text-on-hot);
  font-family:var(--f-head);font-weight:700;font-size:.82rem;
}

/* FAQ on paper, same orange bar as the homepage. */
.page-service .faq-section.section--paper{padding:74px 0;}
.page-service .faq-item{border-left:4px solid var(--hot);}
.page-service .faq-item summary{font-family:var(--f-head);font-weight:700;}

/* Related work, navy. Cool accent use 2 of 2. */
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;}
.relcard{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm);padding:22px 22px 20px;
}
.relcard h3{font-size:1.06rem;color:#fff;margin:0 0 .3rem;}
.relcard p{font-size:.92rem;color:rgba(224,236,247,.8);margin:0 0 .9rem;}
.relcard a{color:var(--hot);font-weight:600;font-size:.92rem;text-decoration:none;}
.relcard a:hover{text-decoration:underline;}
.surface--navy .section-head h2{color:#fff;}
@media(max-width:900px){.relgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.relgrid{grid-template-columns:1fr;}}
.page-service .faq-more{margin-top:28px;text-align:center;}
.page-service .faq-more a{font-weight:600;}

/* ---- Service hero: H1 and subhead over a darkened photo. The same photo,
       undarkened, opens the main copy directly below. 2026-07-28. ---- */
.svc-hero--photo{
  position:relative;overflow:hidden;background:var(--deep);
  min-height:clamp(420px,46vw,620px);
  display:flex;align-items:center;padding:96px 0 104px;
}
.svc-hero--photo > img.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.svc-hero--photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  /* Straight black, no warm tint, and heavier than it was. Dan 2026-07-29:
     the rust radial was lifting the middle of the frame exactly where the
     headline sits, which is the one place that needs to stay dark. */
  background:
    linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.586) 45%,rgba(0,0,0,.742)),
    rgba(0,0,0,.14);
  /* Dan 2026-07-30: another 8% darker. Stops raised so that the light getting
     through the whole stack (gradient over the flat .14 layer) drops by 8%,
     rather than adding 8 points to the numbers, which would have been a 13%
     cut at the top and a 7% cut at the bottom. Effective alpha, top / middle /
     bottom: .673 -> .699, .613 -> .647, .759 -> .776. */
}
.svc-hero--photo .wrap{position:relative;z-index:2;text-align:center;}
.page-service .svc-hero--photo h1{
  color:#fff;text-shadow:0 3px 22px rgba(0,0,0,.55);
  font-size:clamp(2.25rem,5.2vw,3.6rem);line-height:1.08;
  max-width:min(100%,20em);margin:0 auto .5em;
  text-wrap:balance;
}
.page-service .svc-hero--photo .lede{
  color:var(--text-on-scrim);margin:0 auto;max-width:min(100%,940px);
  font-size:clamp(1.06rem,1.45vw,1.25rem);line-height:1.55;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
@media(max-width:640px){
  .svc-hero--photo{min-height:0;padding:56px 0;}
  .page-service .svc-hero--photo h1{max-width:none;}
}

/* ---- Costs: the numbered card swaps sides page to page so ten service
       pages do not read L R L R. Sequence is fixed in DESIGN-ANATOMY.md. ---- */
.costs--flip .costs-grid{grid-template-columns:.9fr 1.1fr;}
.costs--flip .costs-grid > :first-child{order:2;}
.costs--flip .costs-grid > .costs-card{order:1;}
@media(max-width:820px){
  .costs--flip .costs-grid{grid-template-columns:1fr;}
  .costs--flip .costs-grid > :first-child,
  .costs--flip .costs-grid > .costs-card{order:0;}
}

/* ---- Bullet list inside a reading column. Position rotates page to page. ---- */
.page-service .readcol .article-list{margin:1.3rem 0 1.5rem;}
.page-service .surface--deep .readcol .article-list li{color:var(--text-on-deep);}
.page-service .surface--deep .readcol .article-list li::before{color:var(--hot);}
.page-service .surface--deep .readcol .article-list strong{color:#fff;}

/* ---- The article banner and the service hero share one 8:3 file. 8:3 is what
       Midjourney is asked for and it is what the banner slot renders, so there
       is no crop step. The hero band cover-crops it in CSS, which is fine
       because a background is not a slot. Overrides the kit's 16:7. ---- */
.page-service .article-img{aspect-ratio:8/3;}

/* =====================================================================
   CITY PAGE, 2026-07-29. See _factory/DESIGN-ANATOMY.md section 3.
   Six sections, 1,200 to 1,500 words. A signpost rather than a landing
   page: no estimate form, per Dan.

   THE HERO IS DELIBERATELY DIFFERENT FROM THE SERVICE PAGES.
   Service heroes darken the photo under a black scrim. City heroes leave
   the photograph bright and float a translucent panel over it instead.
   That is not a style inconsistency, it is the point: a visitor should
   feel they have moved to a different part of the site, out of the
   service area and into the coverage area. Dan 2026-07-29.
   ===================================================================== */
/* =====================================================================
   .plate-hero + .plate : the bright-photo hero with a translucent plate.

   ONE component, used by the six city pages and by the FAQ page. It was
   two near-identical rule sets until 2026-07-30, when Dan asked for the
   FAQ banner to get "the same treatment as the city hero" and the honest
   answer was that they should never have been separate. Both pages now
   carry .plate-hero on the section and .plate on the text block, and this
   is the only place the treatment is defined, so it cannot drift apart
   again.

   What it is, and why each part:
     - the photograph runs at FULL brightness, no wash, no scrim, no blur.
       A 14 to 20 percent gradient used to sit here and was measurably
       dulling the shots. Legibility comes from the plate instead.
     - the plate is the full container width, square cornered, at 76
       percent black. Full width because capping it looked pinched on a
       1200px page; square because it is a plate laid on the picture
       rather than a card floating above it.
     - the measure lives on the TEXT, not the box. Only the lede is long
       enough to need one.
   ===================================================================== */
.plate-hero{
  position:relative;overflow:hidden;background:var(--deep);
  min-height:clamp(420px,46vw,580px);
  display:flex;align-items:center;padding:80px 0;
}
.plate-hero > img.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.plate-hero::before,
.plate-hero::after{content:none;}
.plate-hero .wrap{position:relative;z-index:2;width:100%;}
.plate{
  max-width:none;margin:0;text-align:center;
  /* Dan 2026-07-30: another 5% darker. NOT .74 -> .777. The panel ink is
     #140F0B, not black, so raising alpha also mixes MORE of a non-black color
     into the result: .753 measured only -3% on screen. Solved against rendered
     pixels on all three pages that use it (city, About, FAQ) instead of against
     the number. Measured: -5.7 / -5.3 / -5.6%.
     Do not fine-tune this further. Chromium quantizes alpha to 8 bits, so .758
     and .76 are two different values (193 and 194) but .759 and .76 are the
     same one. 193 lands at -4.5%, 194 at -5.6%. There is nothing in between,
     and 194 is the closer bracket. */
  background:rgba(20,15,11,.76);
  border:1px solid rgba(232,196,160,.26);
  border-radius:0;padding:clamp(34px,4vw,52px) clamp(28px,5vw,64px);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}
/* Center each child EXPLICITLY. A `margin:` shorthand on any child beats this
   rule and silently resets margin-inline to 0, which is how the lede ended up
   48px left of center on six shipped pages and how the FAQ H1 then landed 60px
   off. Every child below therefore writes `auto` into its own shorthand, and
   this line is only a backstop. Never use a bare `margin:0 0 x` on a .plate child. */
.plate > *{margin-left:auto;margin-right:auto;}
.plate h1{
  color:#fff;font-family:var(--f-head);font-weight:700;
  font-size:clamp(2rem,4.4vw,3.05rem);line-height:1.1;
  margin:0 auto .38em;max-width:none;text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.plate .hero-result{
  color:var(--hot);font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.06rem,1.9vw,1.4rem);line-height:1.25;margin:0 auto .8rem;max-width:none;
}
.plate .lede{
  color:var(--text-on-scrim);margin:0 auto;
  font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.55;max-width:80ch;
}
@media(max-width:640px){
  .plate-hero{min-height:0;padding:56px 0;}
  .plate{padding:30px 24px;}
  .plate h1,.plate .hero-result,.plate .lede{max-width:none;}
}

/* ---------------------------------------------------------------------
   City page reading measure.
   .readcol was scoped to .page-service only, so city copy ran the full
   1152px container and read as a wall of text. Same 840px measure as the
   service pages, which is the kit's own .article .col value. The map
   frame matches it, so copy and map share one left and right edge.
   Dan 2026-07-30.
   --------------------------------------------------------------------- */
.page-location .readcol{max-width:840px;margin:0 auto;}

/* text-wrap:balance was pulling H2s in to a short measure of their own, so a
   heading sat noticeably narrower than the paragraph under it. Headings run the
   full reading column like everything else. Dan 2026-07-30. */
.page-location .readcol h2{
  font-size:clamp(1.5rem,2.8vw,2rem);color:var(--accent);
  margin:0 0 .7em;line-height:1.22;text-wrap:normal;max-width:none;}

/* Skim-space. A 1,200 word column with even margins reads as one block no
   matter how good the sentences are. The gap above a heading is what tells a
   scanner where the next idea starts, so it is much larger than the gap below
   it, and larger again above an H2 than above an H3. */
.page-location .readcol h2:not(:first-child){
  margin-top:3.4rem;
  padding-top:1.9rem;
  border-top:1px solid var(--line);
}
.page-location .readcol h2 + p{margin-top:0;}
.page-location .readcol h3{
  font-size:clamp(1.1rem,1.7vw,1.26rem);color:var(--ink);
  margin:2.5rem 0 .6rem;line-height:1.32;letter-spacing:.005em;}
.page-location .readcol p{margin-bottom:1.15rem;line-height:1.72;}
.page-location .readcol p:last-child{margin-bottom:0;}

/* the one bullet list per page sits in a different prose block on each city,
   per the rotation table in DESIGN-ANATOMY.md */
.page-location .readcol .article-list{margin:1.5rem 0 1.8rem;}
.page-location .readcol .article-list li{margin:.85rem 0;line-height:1.62;padding-left:26px;}
/* the shared marker is positioned for a 1.7 line-height paragraph and rode high
   against these bolder lead-ins */
.page-location .readcol .article-list li::before{top:0;left:2px;font-size:1.15em;}

.page-location .loc-map .map-frame{max-width:840px;}

/* ---------------------------------------------------------------------
   .citysvc : the six curated outbound service links.
   This block had NO stylesheet rule at all, so it rendered as six bare
   underlined anchors. It is also the single most load-bearing element on
   a city page, because linking outward to several services is what keeps
   the page a hub rather than a doorway funnel. It deserved a design.

   Deliberately NOT another boxed card grid. The homepage already has
   .svc-card photo cards, .getbox and .step; the service pages have
   .relcard. A fifth box would be the "two sections doing the same job
   look identical" failure. This is a ruled index instead: two columns,
   hairline separators, a marker rule that fills on hover.
   Dan 2026-07-30.
   --------------------------------------------------------------------- */
/* Navy, matching the CTA strip under the hero. The color comes from
   .surface--navy, which already blends its texture multiply so the composite
   lands on var(--navy) rather than 35 percent light of it. This rule only owns
   spacing. Keeps the cool-accent rule at exactly twice per page.
   Dan 2026-07-30. */
.page-location .citysvc-section{padding:74px 0 78px;}
.page-location .citysvc-section .section-head{margin-bottom:42px;}
.page-location .citysvc-section .section-head h2{color:#fff;}

.citysvc{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(32px,4vw,64px);
  max-width:1000px;margin:0 auto;
  border-bottom:1px solid rgba(180,205,228,.20);   /* closes the last row */
}
.citysvc > a{
  position:relative;display:block;text-decoration:none;
  padding:22px 0 22px 22px;
  border-top:1px solid rgba(180,205,228,.20);
  transition:padding-left .18s ease;
}
/* the top hairline on the first item of each column is the section's own
   opening rule, so keep it; drop nothing else. */
.citysvc > a::before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;
  background:var(--hot);transform:scaleY(0);transform-origin:top;
  transition:transform .18s ease;
}
.citysvc > a:hover::before,
.citysvc > a:focus-visible::before{transform:scaleY(1);}
.citysvc > a:hover,
.citysvc > a:focus-visible{padding-left:28px;}
.citysvc > a:focus-visible{outline:2px solid var(--hot);outline-offset:4px;}
.citysvc b{
  display:block;font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.16rem);letter-spacing:.01em;
  color:var(--hot);margin-bottom:.34em;transition:color .18s ease;
}
.citysvc > a:hover b,
.citysvc > a:focus-visible b{color:#fff;}
.citysvc span{
  display:block;color:rgba(226,236,245,.80);
  font-size:.95rem;line-height:1.55;max-width:44ch;
}
@media(max-width:760px){
  .citysvc{grid-template-columns:minmax(0,1fr);max-width:640px;}
}

/* ---------------------------------------------------------------------
   Map section spacing and lift.
   Three separate complaints, all real: the map was crowded up against the
   service index above it, it sank into the paper background because the
   default --shadow is tuned for small white cards, and the caption sat
   too close to the orange band below. Dan 2026-07-30.
   --------------------------------------------------------------------- */
.page-location .loc-map{
  background:var(--paper);
  padding:78px 0 96px;          /* roughly even above, doubled below the caption */
}
.page-location .loc-map .map-frame{
  border-radius:14px;
  box-shadow:0 18px 44px rgba(43,38,34,.20), 0 3px 10px rgba(43,38,34,.10);
  border:1px solid var(--line);
}
.page-location .loc-map .map-caption{margin-top:22px;}
@media(max-width:640px){
  .page-location .loc-map{padding:52px 0 64px;}
}

/* ============================================================
   FAQ PAGE  (.page-faq)  added 2026-07-30
   A reference page, not a selling page, and it is built to be
   scanned rather than read start to finish.

   NOTE ON THE CLASS NAME. The kit already ships a .faq-group
   class with a full-bleed alternating-orange FAQ design, built in
   an earlier session and still present above. This block uses
   .faq-block so the two do not collide, and so switching to the
   orange treatment stays a one-word change in the HTML rather
   than a CSS untangling. See DESIGN-ANATOMY.md for why the
   rotating-surface version was chosen for Tempe.

   The problem this layout solves: five accordion groups stacked
   back to back is the flat stack DESIGN-ANATOMY.md rule 1 bans,
   and check-structure.py now enforces it (faq-item is a medium
   grid unit). Two things break it up. Every group opens with a
   short lead-in paragraph, which gives the group a purpose and
   satisfies the prose buffer. And the surfaces alternate, with
   a scope note on the deep surface sitting between groups two
   and three.
   ============================================================ */

/* --- slim 4:1 banner. Shorter than a service or city hero on purpose. --- */
/* The FAQ banner is a .plate-hero and it is IDENTICAL to the city heroes.
   There are deliberately no overrides here. It briefly had three, making the
   band shorter and capping the H1 at 30ch and the lede at 74ch, on my reasoning
   that a reference page should be quieter than a selling page. Dan's answer on
   2026-07-30 was that it read narrow and the lines read short, and he was right:
   "the same treatment as the city hero" meant the same, not a subdued variant.
   If a future page needs a quieter version, give it its own class rather than
   shaving this one. */

/* --- a question group: lead-in prose, then the accordions --- */
.page-faq .faq-block{padding:66px 0 72px;}
.page-faq .faq-block .wrap > .faq-lead{max-width:840px;margin:0 auto 34px;}
.page-faq .faq-block .faq-lead h2{
  font-size:clamp(1.45rem,2.7vw,1.95rem);color:var(--accent);
  margin:0 0 .55em;line-height:1.22;}
.page-faq .faq-block .faq-lead p{
  color:var(--text-body);line-height:1.72;margin:0;font-size:1.02rem;}
.page-faq .faq-block .faq-list{max-width:840px;margin:0 auto;display:grid;gap:14px;}

/* the legal group sits on navy, so its lead-in has to restate its colors */
.page-faq .faq-block.surface--navy .faq-lead h2{color:#fff;}
.page-faq .faq-block.surface--navy .faq-lead p{color:rgba(226,236,245,.86);}

/* --- the scope note. One statement, given the weight of a whole section,
       because "we do not do retaining walls" protects the client. --- */
.page-faq .scope-note{padding:70px 0;}
.page-faq .scope-note .wrap{max-width:840px;}
.page-faq .scope-note .note-in{
  border-left:3px solid var(--hot);padding:4px 0 4px 28px;}
.page-faq .scope-note h2{
  color:#fff;font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.24;margin:0 0 .8rem;}
.page-faq .scope-note p{
  color:var(--text-on-deep);line-height:1.72;margin:0 0 1rem;}
.page-faq .scope-note p:last-child{margin-bottom:0;}
.page-faq .scope-note a{color:var(--hot);font-weight:600;}

@media(max-width:640px){
  .page-faq .faq-band{padding:44px 0;min-height:0;}
  .page-faq .faq-block{padding:46px 0 50px;}
  .page-faq .scope-note{padding:48px 0;}
  .page-faq .scope-note .note-in{padding-left:20px;}
}

/* ============================================================
   ABOUT PAGE, Tempe build 2026-07-30.
   The two-column .about-grid, .about-figure and .about-aside all
   already existed in the kit and are used as built. Two additions.

   1. A text-only hero. Every other page opens on a photograph, but
      the pack's only About shot (MJ-23) is a 4:3 center image by
      design, not an 8:3 banner, so there is no hero photo to use and
      inventing one would mean a whole extra sitting. A deep textured
      hero with no image reads as deliberate on the one page that is
      about the company rather than about a product.

   2. .hold-grid, the four standards, pulled out of the reading column
      into a full-width band on navy. They are the page's promise, so
      they get their own surface rather than sitting as four bold
      paragraphs in the middle of an article. .getbox would have been
      the obvious kit device but it is scoped to .page-home.
   ============================================================ */

/* The About hero is a .plate-hero, identical to the city and FAQ heroes.

   There WAS a bespoke .page-about .about-hero here: a text-only deep band with
   no photograph, on my reasoning that the pack had no 8:3 About shot so a text
   hero was the honest answer. Dan's reply on 2026-07-30 was that it should be
   the exact same as the City and FAQ pages, which was the third time in one day
   I built a variant of a settled component instead of using it. The right move
   was to add a shot to the pack, not to invent a hero. MJ-25 is that shot.
   check-structure.py now fails any page whose first section is not one of the
   two approved heroes, so this cannot happen a fourth time. */
.page-about .about-wrap{background:var(--paper);padding:76px 0 84px;}
.page-about .about-main h2:first-child{margin-top:0;}
.page-about .about-main .about-figure{margin:34px 0 36px;}
.page-about .about-main .link-list{
  list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:10px 18px;}
.page-about .about-main .link-list a{color:var(--link);font-weight:600;text-decoration:none;}
.page-about .about-main .link-list a:hover{text-decoration:underline;}

/* the four standards, full width on navy */
.page-about .hold{padding:74px 0 78px;}
.page-about .hold .section-head{max-width:840px;margin:0 auto 40px;text-align:center;}
.page-about .hold .section-head h2{color:#fff;}
.page-about .hold .section-head p{color:rgba(226,236,245,.84);margin:.7rem 0 0;line-height:1.65;}
.page-about .hold-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;max-width:1000px;margin:0 auto;
}
.page-about .hold-item{
  background:rgba(255,255,255,.05);border:1px solid rgba(180,205,228,.20);
  border-radius:12px;padding:26px 28px;
}
.page-about .hold-item h3{
  color:var(--hot);font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.14rem);margin:0 0 .5em;line-height:1.3;}
.page-about .hold-item p{
  color:rgba(226,236,245,.84);margin:0;font-size:.97rem;line-height:1.62;}
.page-about .hold-item a{color:var(--hot);font-weight:600;}
.page-about .hold-foot{
  max-width:1000px;margin:30px auto 0;text-align:center;
  color:rgba(226,236,245,.9);font-family:var(--f-head);font-weight:500;font-size:1.05rem;}

@media(max-width:760px){
  .page-about .hold-grid{grid-template-columns:minmax(0,1fr);}
  .page-about .hold{padding:52px 0 56px;}
  .page-about .about-wrap{padding:52px 0 58px;}
}

/* ============================================================
   CONTACT PAGE, Tempe skin. 2026-07-30.
   The whole shape came from the kit and is used as built:
   .contact-hero, .contact-grid, .contact-map-frame,
   .contact-form-card, .our-services, .services-grid. Rule zero.

   The only thing that needed doing is the skin. The kit's contact
   hero expects either a photo or a flat --contact-bg, with a cool
   near-black scrim over it. Dan asked for the Palm Desert Spray
   Foam treatment: a vertical sunset fade, no photograph, in the
   Tempe palette rather than Palm Desert's purple.

   So the fade IS the treatment and the scrim comes off. Stops are
   placed so the middle of the band, where the heading sits, is
   still dark enough for white text: ink at the top, through the
   clay mid-tones, landing on sand at the very bottom edge only.
   Contrast is measured after render, not eyeballed.
   ============================================================ */
/* The fade is the FOOTER gradient, darkened and flipped.

   My first attempt was an invented four-stop vertical ramp and Dan's verdict was
   that it "doesn't match any kind of look we have going in the site," which was
   fair: it was a new gradient rather than one of the site's own. His instruction
   was to take the footer fade, darken it, and flip it.

   So this is --bg-footer with its origin moved from bottom-right to TOP-right and
   every stop taken down. The footer glows warm from the bottom corner; the hero
   now glows warm from the top corner, so the two bookend the page with the same
   gesture. The stucco texture comes along too, exactly as .site-footer layers it,
   which is what actually ties it to the rest of the site.
   Dan 2026-07-30. */
.page-contact .contact-hero{
  background-image:
    var(--tex-stucco),
    radial-gradient(145% 170% at 100% 0%,
      #7A4820  0%,
      #652F10 18%,
      #452009 42%,
      #28160E 66%,
      #100D0B 100%);
  background-size:256px 256px, cover;
  background-blend-mode:multiply, normal;
  min-height:clamp(300px,32vw,420px);
}
/* No border here. .subcta.surface--navy already draws a 2px --hot rule on its
   top edge, which is the same seam, so a border-bottom on the hero stacked a
   second rule and read as a thickened one. Dan 2026-07-30. */
.page-contact .contact-hero::before{content:none;}   /* the fade is the treatment */
.page-contact .contact-hero h1{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(2.1rem,4.4vw,3.05rem);line-height:1.12;margin:0 0 .3em;}
.page-contact .contact-hero .lede{
  color:var(--text-on-scrim);text-shadow:0 1px 10px rgba(0,0,0,.4);}


/* The form is the embed and nothing else. The kit's card wraps it in a white
   panel with a 2px --cta border, a radius and a shadow, and the embed already
   carries its own surface, so all of that read as a white border around the
   form. Stripped. Dan 2026-07-30. */
.page-contact .contact-form-card{
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;}
.page-contact .contact-form-card .form-body{padding:0;}
.page-contact .contact-form-card .form-embed-slot{border:0;padding:0;}
.page-contact .contact-form-card iframe{display:block;border:0;width:100%;}



@media(max-width:640px){
  .page-contact .contact-hero{min-height:0;padding:44px 0;}
}

/* ============================================================
   LEGAL PAGES  (.page-legal)  added 2026-07-30
   Terms and Privacy. No kit component existed for these, because
   neither page had been built. They are noindex,follow and they
   exist to be read carefully by the few people who read them, so
   the design does one job: make a long document scannable.

   Same 840px measure as every other reading column on the site.
   Headings carry the same skim-space treatment as the city pages:
   a large gap and a hairline rule above each H2, because a legal
   page is the one place a reader genuinely navigates by heading.
   ============================================================ */
.page-legal .legal-hero{
  background:var(--deep);background-blend-mode:multiply,normal;
  padding:clamp(52px,6vw,78px) 0 clamp(46px,5vw,64px);
  border-bottom:2px solid var(--hot);
}
.page-legal .legal-hero .wrap{max-width:840px;}
.page-legal .legal-hero h1{
  color:#fff;font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.85rem,3.6vw,2.6rem);line-height:1.14;margin:0 0 .5rem;}
.page-legal .legal-hero .updated{
  color:var(--hot);font-family:var(--f-mono,var(--f-head));font-weight:600;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 1rem;}
.page-legal .legal-hero .lede{
  color:var(--text-on-deep-hi);margin:0;max-width:70ch;
  font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.6;}

.page-legal .legal-body{background:var(--paper);padding:70px 0 84px;}
.page-legal .legal-body .readcol{max-width:840px;margin:0 auto;}
.page-legal .legal-body h2{
  font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--accent);
  line-height:1.24;margin:3.2rem 0 .8em;padding-top:1.8rem;
  border-top:1px solid var(--line);}
.page-legal .legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.page-legal .legal-body p{color:var(--text-body);line-height:1.72;margin:0 0 1.1rem;}
.page-legal .legal-body p strong{color:var(--ink);}
.page-legal .legal-body ul{list-style:none;margin:1.2rem 0 1.5rem;padding:0;}
.page-legal .legal-body li{position:relative;padding-left:26px;margin:.8rem 0;
  color:var(--text-body);line-height:1.62;}
.page-legal .legal-body li::before{
  content:"\2022";position:absolute;left:2px;top:0;color:var(--accent);font-size:1.15em;line-height:1.62;}
.page-legal .legal-body a{color:var(--link);font-weight:600;}
.page-legal .legal-body .note{
  border-left:3px solid var(--hot);padding:2px 0 2px 22px;margin:1.6rem 0;
  color:var(--ink-soft);font-size:.97rem;line-height:1.7;}

@media(max-width:640px){
  .page-legal .legal-body{padding:48px 0 56px;}
  .page-legal .legal-body h2{margin-top:2.4rem;padding-top:1.4rem;}
}

/* An unresolved value that must not ship. check-structure.py fails on it. */
.page-legal .tbd{
  background:var(--hot);color:#231a12;font-family:var(--f-mono,monospace);
  font-weight:700;font-size:.82em;padding:2px 8px;border-radius:4px;
  letter-spacing:.02em;white-space:nowrap;}


/* =====================================================================
   QUEEN CREEK: fixes for brand literals the token block cannot reach.
   Added 2026-08-01 with the theme lock.

   These are KIT-LEVEL defects, not Queen Creek preferences. They live here
   rather than in the engine because fixing the shared engine is Dan's call
   and he has not made it. If he does, delete this block and fix it upstream.

   `.eyebrow` resolves its color to var(--orange), which is var(--accent), so
   on any dark surface it is accent on accent. Sampled off the SHIPPED Tempe
   theme at six viewport widths, the homepage hero eyebrow measures 1.60 to
   2.21:1. The kit already carries --eyebrow-on-dark for exactly this job and
   `.eyebrow` never reads it. Queen Creek's sampled worst case with this rule
   in place is 6.16:1.
   ===================================================================== */
.hero .eyebrow,
.surface--deep .eyebrow,
.estimate .eyebrow{color:var(--eyebrow-on-dark);}

/* ---------------------------------------------------------------------
   QUEEN CREEK SCOPED SECTIONS. Additive, under the page body class, per
   DESIGN-ANATOMY rule 5. Nothing here changes the shared engine.

   .costs on the deep surface. Dan 2026-08-01 moved the homepage cost block
   off the accent, because the accent is spent on the trust strip and the
   materials table header and a third band reads as a second theme. I told
   him it needed no new CSS. It needs these six rules: `.costs` sets --ink
   and --text-body on its headings and copy, which are dark, and they do not
   survive a dark surface. The kit already does exactly this for
   `.signs.surface--deep`; costs simply never had the variant.
   --------------------------------------------------------------------- */
.page-home .costs.surface--deep h2{color:#fff;}
.page-home .costs.surface--deep p{color:var(--text-on-deep);}
.page-home .costs.surface--deep .costs-grid{border-color:rgba(216,207,185,.20);}
.page-home .costs.surface--deep .costs-card{background:var(--card-glass);
  border:1px solid var(--card-glass-border);}
.page-home .costs.surface--deep .costs-card h3{color:#fff;}
.page-home .costs.surface--deep .costs-card li{color:var(--text-on-costs);}

/* ---------------------------------------------------------------------
   QUEEN CREEK service cards: photograph on top, horizontal, 2:1.

   Dan 2026-08-02: "I like how the service cards are laid out, but I don't
   think we should eliminate the pictures for each. We can run those smaller
   and horizontal for this site rather than tall and skinny like the other
   sites. We could try 4:2."

   The kit's `.svc-card` is a two-column flex and the photo takes 50 percent
   of the card WIDTH, which is the tall column shape on Palm Desert and
   Tempe. Turning the card into a column puts the photo across the top at
   full card width. Shot first at 2:1; Dan reshot the set at 3:1 on
   2026-08-02 to compare, so a 563px card at 1440 renders a 563x188 band. The ratio is registered as a Queen
   Creek override in factory/IMAGE-SLOT-SPEC.md and enforced by
   factory/check-images.py, so a 2:3 file can never be dropped into it.

   This also overrides the kit's `@media(max-width:720px)` rule, which sets
   `flex-direction:column-reverse` and would otherwise put the photo BELOW
   the copy on phones. Same shape at every width, on purpose.
   --------------------------------------------------------------------- */
.page-home .svc-grid .svc-card{flex-direction:column;min-height:0;}
.page-home .svc-grid .svc-card .svc-photo{flex:0 0 auto;width:100%;height:auto;
  aspect-ratio:3/1;object-fit:cover;align-self:auto;}
.page-home .svc-grid .svc-card .svc-body{flex:1 1 auto;}
.page-home .ph[data-ar="2:1"]{aspect-ratio:2/1;}
.page-home .ph[data-ar="3:1"]{aspect-ratio:3/1;}

/* ---------------------------------------------------------------------
   QUEEN CREEK body copy size.

   Dan 2026-08-02: "The main copy block text is too small. It seems to get
   smaller with each build. Bump it up at least 3 points."

   Measured, not guessed: `.prose p` computed to exactly 16px on the shipped
   page, inherited from `body{font-size:16px}` with no rule of its own. 16px
   is 12pt, so three points up is 15pt, which is 20px. On the 852px measure
   that is roughly 71 characters a line against the 89 it was setting at
   16px, so the bump improves the column at the same time as the size.

   `.costs` and the section-head standfirst move with it, at a smaller step,
   because leaving them at 16px next to 20px prose reads as a mistake.
   --------------------------------------------------------------------- */
.page-home .prose p,
.page-home .prose li{font-size:1.25rem;line-height:1.66;}

/* ---------------------------------------------------------------------
   QUEEN CREEK section headings take the full boxed width.

   Dan 2026-08-02, on "Fence and Block Wall Services in Queen Creek": "you
   have shortened the line length. Make this the full boxed width so it
   doesn't go to two lines on desktop."

   The kit caps `.section-head` at 820px and already carries a `.page-home`
   rule widening it to 900px. At the homepage H2 size, clamped to 2.6rem or
   41.6px at 1440, that heading measured 900x93: two lines. The heading now
   gets the full 1152px inside `.wrap`. The standfirst paragraph keeps a
   900px measure and stays centred, so widening the heading does not drag
   the body text across the whole page.
   --------------------------------------------------------------------- */
.page-home .section-head{max-width:none;}
.page-home .section-head p{max-width:900px;margin-left:auto;margin-right:auto;
  font-size:1.08rem;}

/* ---------------------------------------------------------------------
   QUEEN CREEK materials table on phones. NOT a preference: a defect.

   `.page-home .mat-table` carries `min-width:660px` in the kit, which
   assumes a scrolling wrapper that no build has ever given it. Measured at
   a 390px viewport the document scrollWidth was 684px against a 390px
   client width, so the WHOLE PAGE scrolled sideways, every section, not
   just the table. No gate catches horizontal overflow.

   Stacked instead of scrolled: on a phone each material becomes its own
   block with the two column values labelled beneath the name. The header
   row is hidden because it has nothing left to head, and the labels it was
   carrying are put back on the cells with ::before. Measured after: 390px
   viewport, scrollWidth 390.
   --------------------------------------------------------------------- */
@media(max-width:720px){
  .page-home .mat-table{min-width:0;display:block;overflow:hidden;}
  .page-home .mat-table thead{display:none;}
  .page-home .mat-table tbody,
  .page-home .mat-table tbody tr{display:block;width:100%;}
  .page-home .mat-table tbody tr{border-top:1px solid var(--line);padding:14px 18px;}
  .page-home .mat-table tbody tr:first-child{border-top:0;}
  .page-home .mat-table tbody th,
  .page-home .mat-table tbody td{display:block;width:100%;padding:2px 0;
    border-top:0;background:none;white-space:normal;}
  .page-home .mat-table tbody th{font-size:1.06rem;padding-bottom:6px;}
  .page-home .mat-table tbody td::before{display:block;
    font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--text-matnote);margin-top:8px;}
  .page-home .mat-table tbody td:nth-of-type(1)::before{content:"Holds up to";}
  .page-home .mat-table tbody td:nth-of-type(2)::before{content:"Where it fits here";}
  /* The kit stripes alternate rows by painting the CELLS. Stacked, the cells
     no longer fill the row, so the stripe rendered as three tinted blocks
     with unpainted gutters between them. Paint the row instead. */
  .page-home .mat-table tbody tr:nth-child(even){background:var(--paper);}
  .page-home .mat-table tbody tr:nth-child(even) th,
  .page-home .mat-table tbody tr:nth-child(even) td{background:none;}
}

/* ---------------------------------------------------------------------
   QUEEN CREEK navigation menu, 2026-08-03.

   Dan: "add HOME to the top menu (you'll likely need to shrink the top logo,
   that's fine, but don't make the actual menu header thinner)."

   MEASURED FIRST, because the obvious assumption is wrong. The header is 70.1px
   tall and the tallest thing in it is the NAV at 45.1px, not the logo at 34px
   and not the call button at 40.7px. So shrinking the logo does not shorten the
   bar on its own; what it buys is horizontal room. The wordmark is 993x64,
   which is 15.5:1, so at 34px tall it is 527px wide and eats a third of the
   header before the menu starts. Home plus two dropdown parents plus three
   plain items plus the call button did not fit beside it at 1200px.

   26px puts the wordmark at 403px and gives back 124px, which is more than the
   Home item needs. And `min-height` on the header locks the bar at the height
   it measured before any of this, so the row can never come out shorter than
   Dan approved even if every child inside it shrinks later.

   Both rules are ABOVE 1150px only. Below that the burger takes over and the
   width-capped rule further down already handles the logo.
   --------------------------------------------------------------------- */
@media(min-width:1151px){
  .site-header{min-height:70px;}
  .site-header .brand img{max-height:26px;}
}

/* The dropdown panels the kit was already styled for and never given content.
   `white-space:nowrap` because "Wrought Iron and View Fence" wraps to two lines
   inside the kit's 270px minimum, and a menu that reflows as you read down it
   is harder to use than a wide one. */
.main-nav .dropdown a{white-space:nowrap;}

/* The footer wordmark is now a link home. Without this it inherits the footer
   link color and underline treatment, and the logo sits in a tinted box. */
.site-footer .footer-logo{display:inline-block;text-decoration:none;
  background:none;border:0;}

/* ---------------------------------------------------------------------
   QUEEN CREEK header logo on narrow screens.

   The supplied logo is 993x64, which is 15.5:1. The kit sizes header logos
   by HEIGHT alone and sets `max-width:none` on them, which is right for a
   squarer mark and wrong for a wordmark this long: at a 430px viewport the
   22px height rule renders it 341px wide, and 341 brand + 24 gap + 42
   toggle + 48 padding is 455px inside a 430px header. The toggle was
   measured hanging 1px past the right edge with the row overflowing behind
   it.

   Letting the brand shrink and capping the image by width instead of height
   fixes it without touching the kit or the artwork: the logo scales down to
   whatever is left after the menu button and keeps its ratio. Measured at
   430px: logo 316x20, nothing past the edge.
   --------------------------------------------------------------------- */
@media(max-width:1150px){
  .site-header .brand{flex:0 1 auto;min-width:0;}
  .site-header .brand img{max-width:100%;height:auto;}
}

/* ---------------------------------------------------------------------
   QUEEN CREEK Areas We Serve scrim.

   The kit runs a flat-ish scrim over the whole band, .86 at the top, .72
   through the middle, .90 at the foot. Sampled off the render with the
   foreground hidden, that puts the photograph at roughly a fifth of its own
   brightness everywhere, and Dan's Sonoran basin shot read as brown noise.

   The heading and the standfirst live in the top quarter of the band and
   nothing else does: the six area cards carry their own .82 to .88 panels,
   so they do not need the scrim to be legible. So the scrim is staged. It
   holds .86 through the text zone and opens to .42 below it, which is where
   the photograph actually shows: the gutters between the cards and the band
   under them.

   MEASURED, not estimated. Sampled at 1440 with the text hidden, worst case
   across the whole heading band:

       kit .86/.72/.90     H2  8.25:1   standfirst 6.45:1
       staged, this rule   H2 11.03:1   standfirst 8.62:1

   The photograph gets brighter and the text contrast goes UP, because the
   dark stop now runs deeper before it opens.
   --------------------------------------------------------------------- */
.page-home .photo-section::after{
  background:linear-gradient(180deg,
    rgba(34,29,26,.88) 0%,
    rgba(34,29,26,.86) 30%,
    rgba(34,29,26,.42) 62%,
    rgba(34,29,26,.86) 100%);
}

/* ---------------------------------------------------------------------
   QUEEN CREEK: reserve the space for lazy photographs.

   The kit ratio-locks `.hero-img` and nothing else. Every other real photo
   is `width:100%` with automatic height, so before the file arrives the slot
   measures ZERO pixels tall and the page below it jumps when it lands.
   Measured with the lazy images not yet fetched: `.estimate-img` reported
   500x0 and the `.framed` photo 832x0.

   That is cumulative layout shift, and it is the one Core Web Vital that no
   gate here looks at. The ratios below are the same numbers
   `factory/check-images.py` already enforces on the files, so the reserved
   box and the delivered file can never disagree.
   --------------------------------------------------------------------- */
.page-home .estimate-photo img.estimate-img{aspect-ratio:3/4;object-fit:cover;}
.page-home .framed img{aspect-ratio:4/3;object-fit:cover;}

/* ---------------------------------------------------------------------
   QUEEN CREEK reading sections. Dan 2026-08-02, on the two long prose
   blocks: the subheads read smaller than the body, the photograph looks
   shoe-horned into the copy, and a wall of text needs breaking up.

   MEASURED before changing anything: `.prose p` computes 20px and
   `.prose h3` computes 18.72px, so the bold subhead really was SMALLER
   than the paragraph under it. The kit never sized `.prose h3` at all, so
   it was landing on a browser default scaled by the parent. Matched to the
   body at 1.25rem and left bold, which is what Dan asked for, with the
   space above it opened up so it still reads as a break rather than as a
   bolded first line.

   The `.framed` photograph shipped with `margin:0`, so the paragraphs sat
   hard against it top and bottom. 44px each side, which is a little over
   two lines of the 20px body.

   Bullets: `.prose li` already inherits the 20px body size from the rule
   further up this block. The marker takes the accent so a list reads as a
   list at a glance, which is the whole point of breaking the wall up.
   --------------------------------------------------------------------- */
.page-home .prose h3{font-size:1.25rem;line-height:1.4;margin-top:2rem;}
.page-home .prose h3:first-of-type{margin-top:1.4rem;}
.page-home .prose .framed{margin:44px 0;}
.page-home .prose ul{margin:1.1rem 0 1.4rem;padding-left:1.35em;}
.page-home .prose li{margin:.62rem 0;padding-left:.2em;}
.page-home .prose li::marker{color:var(--accent);font-weight:700;}

/* ---------------------------------------------------------------------
   QUEEN CREEK footer. Dan 2026-08-02: "size the logo larger; use 95% of
   the column" and "bump the text size up so it doesn't read like a legal
   disclaimer. Match the text link size in the right column."

   Measured: the logo was 473px in a 631px column, which is the kit's 75%.
   The brand paragraph was 15.2px against 16px links beside it, and small
   grey type under a logo is exactly what a disclaimer looks like. Both
   numbers now come from Dan: 95 percent, and the same 1rem as the links.
   --------------------------------------------------------------------- */
.site-footer .footer-brand img{width:95%;}
.site-footer .footer-brand p{font-size:1rem;line-height:1.7;}

/* ---------------------------------------------------------------------
   QUEEN CREEK estimate column: bring the eyebrow into line.

   Dan 2026-08-02 moved the estimate copy into the right column, above the
   form. The kit already had `.estimate-right` waiting for exactly that, and
   it carries `--est-copy-shift:40px`, which indents the h2 and the lede so
   their left edge lands on the form's FIELDS rather than on the iframe's
   outer edge. The kit's own comment says so.

   But the rule names only `h2` and `.lede`. With an eyebrow in that column
   too, measured left edges came out eyebrow 696, h2 736, lede 736: the
   eyebrow alone hanging 40px out to the left. It takes the same shift.

   The 40px itself is the kit's tuned value against this same Lead Simplify
   form, which Tempe embeds too. If the form's inner padding ever changes,
   change `--est-copy-shift`, not these rules.
   --------------------------------------------------------------------- */
@media(min-width:821px){
  .page-home .estimate-right:has(iframe) .eyebrow{margin-left:var(--est-copy-shift);}
}

/* ---------------------------------------------------------------------
   QUEEN CREEK legal pages. Same complaint, same fix as the homepage.

   Dan 2026-08-02: "The main copy block text is too small. It seems to get
   smaller with each build." That was said about the homepage, but the kit
   ships `.legal-body p` at the inherited 16px in an 840px column, which
   measures about 108 characters a line. Nobody reads a privacy policy
   straight through, but they do scan it, and 108 characters is past the
   point where scanning works.

   One step up to 1.08rem, and the measure comes in to 760px so the line
   length drops to roughly 88 characters rather than getting worse with the
   larger type. Not taken to the homepage's 20px on purpose: a legal page
   set like a landing page reads as though it is selling something.
   --------------------------------------------------------------------- */

/* Long unbreakable tokens. `team@queencreekfencecompany.com` is 31 characters
   with no break opportunity in it: measured 367px wide at 17.28px inside a
   342px column on a 390px phone, and it pushed the whole document 7px sideways.
   Email addresses and bare hostnames are unavoidable on a privacy page, so the
   text has to be allowed to break them. `break-word` rather than `anywhere`,
   because it only breaks a word that cannot otherwise fit and leaves ordinary
   prose alone. */
.page-legal .legal-body p,
.page-legal .legal-body li,
.page-legal .legal-body a{overflow-wrap:break-word;}

/* ---------------------------------------------------------------------
   QUEEN CREEK city pages: the service index heading takes the full boxed
   width, exactly as the homepage services heading does.

   The homepage fix on 2026-08-02 was scoped to `.page-home`, so the city
   pages inherited the kit's 820px cap and "Fence and Block Wall Services
   in San Tan Valley" wrapped onto two lines. Same heading, same job, same
   treatment. There is no standfirst paragraph in this section head, so
   unlike the homepage nothing needs holding back to a reading measure.
   --------------------------------------------------------------------- */
.page-location .citysvc-section .section-head{max-width:none;}

/* =====================================================================
   ONE BODY COPY SIZE FOR THE WHOLE SITE.

   Dan 2026-08-02, on the city page: "The body copy looks small. Make it
   the same size as on the homepage. Make all main copy block text on the
   site the same size as the homepage."

   The homepage was taken to 20px on 2026-08-02 and every other page type
   was left on the kit's inherited 16px, so the site had three different
   body sizes: 20px on the homepage, 17.28px on the legal pages after their
   own bump, and 16px on a city page. That is the drift this rule ends.

   MEASURED after, so the larger type does not buy a worse line length:

     homepage  .prose p     852px column   67 characters a line
     city      .readcol p   840px column   66
     homepage  .costs p     608px column   48

   All three sit inside the comfortable 45 to 75 band. The costs block is
   the narrow one because it shares its row with the numbered card, and 48
   is the floor rather than a problem.

   THE LEGAL PAGES ARE DELIBERATELY EXCLUDED. Dan 2026-08-02: "Take all the
   legal pages copy back to where it was size-wise. I frankly don't want the
   legal pages 'easy to read' and no one expects them to be."

   They run at the kit's own size in the kit's own 840px column, untouched.
   There is a second reason the bump was wrong beyond the editorial one: the
   kit styles `.page-legal .legal-body .note` with three classes, which
   outranks a `.legal-body p` rule, so the callouts kept their original size
   while everything around them grew. The result was a page where one
   paragraph in each section looked shrunken. Enlarging body copy without
   checking what ELSE the kit sizes in that block is how that happens.

   THIS RULE COVERS MAIN READING PROSE ONLY. Card text, the trust strip,
   section standfirsts and the service index blurbs are interface text at
   their own sizes and are deliberately not swept up in it.

   Selectors for page types not yet built are included on purpose, so the
   service, about and FAQ pages are born at the right size instead of
   being found at 16px later.
   ===================================================================== */
.page-home .prose p,
.page-home .prose li,
.page-home .costs > .wrap p,
.page-location .readcol p,
.page-location .readcol li,
.page-service .readcol p,
.page-service .readcol li,
.page-about .about-main p,
.page-about .about-main li,
.page-service .article .col p,
.page-faq .faq-page-intro p{font-size:1.25rem;line-height:1.66;}

/* ---------------------------------------------------------------------
   "WHAT DECIDES YOUR PRICE" READS AT BODY SIZE ON EVERY SERVICE PAGE.

   Dan 2026-08-03, after the section was rewritten: "The 'What Decides Your
   Price' section is now reading like it belongs on the page instead of
   filler. The font size is small; please make it the same size as the rest
   of the good copy."

   The block was born at interface size on purpose. The rule above put
   `.page-home .costs > .wrap p` at 20px but deliberately left the SERVICE
   pages' costs block out, on the reasoning recorded further up this file
   that card text, standfirsts and index blurbs are interface text rather
   than reading text.

   That reasoning was right about the block it was written for and wrong
   about this one. When the section was filler, small type was honest about
   what it was. Now that it answers the question every homeowner arrives
   with, it is reading copy and it sizes like reading copy.

   Both halves move: the prose beside the card AND the numbered list inside
   it, because the list is where the actual answer lives. The card H3 keeps
   its own size, since it is a label rather than a sentence. Scoped under
   `.page-service` per the standing rule, so nothing in the shared kit moves
   and no other page type is touched.
   --------------------------------------------------------------------- */
.page-service .costs > .wrap p,
.page-service .costs-card li,
.page-service .costs-card ol li,
.page-service .costs-card ul li{font-size:1.25rem;line-height:1.6;}

/* ---------------------------------------------------------------------
   ABOUT: let the grid tracks shrink below the form embed's intrinsic width.

   A grid item's automatic minimum is min-content, not zero. The Lead Simplify
   iframe reports Chrome's default intrinsic iframe width, 300px, so at a 320px
   viewport the single-column track resolved to 304px inside a 272px box and
   the WHOLE PAGE scrolled sideways by 8px. Not the sidebar, the page.

   MEASURED, not guessed. check-render.py named the element:
     .about-grid   box 272px, track 304px
     .about-aside  304px at x=24, right edge 328 in a 320px viewport

   The kit's mobile rule already says `grid-template-columns:1fr`, which is
   correct and is not the bug; `1fr` is `minmax(auto,1fr)` and it is the auto
   minimum that refuses to shrink. Restating the track here would fight the kit.
   Releasing the minimum on the two grid children does not.
   --------------------------------------------------------------------- */
.page-about .about-main,
.page-about .about-aside{min-width:0;}
.page-about .about-aside iframe{max-width:100%;}

/* ---------------------------------------------------------------------
   SERVICE and ABOUT: reserve the space for lazy photographs, same as the
   homepage rule above. The kit ratio-locks .hero-img and nothing else, so
   an unloaded .estimate-img measures Npx by ZERO and everything under it
   jumps when the file lands. That is cumulative layout shift, a Core Web
   Vital, and it is invisible on a fast connection which is exactly why it
   needs a rule rather than a look. The ratio is the one check-images.py
   already enforces on the file, so the box and the file cannot disagree.
   --------------------------------------------------------------------- */
.page-service .estimate-photo img.estimate-img{aspect-ratio:3/4;object-fit:cover;}

/* ---------------------------------------------------------------------
   SERVICE: the in-copy photograph gets the site's standard breathing room.

   Dan 2026-08-02: "In the mid-copy photo, put the standard space top and
   bottom." The kit ships `.page-service .readcol .framed{margin:32px 0 8px}`,
   which is not only tight underneath, it is ASYMMETRIC: 32 above and 8 below,
   so the paragraph after it sat almost against the frame. 44px each side is the
   homepage's `.prose .framed` value, set on 2026-08-02 for the same complaint,
   and it is a little over two lines of the 20px body. One number, both pages.
   --------------------------------------------------------------------- */
.page-service .readcol .framed{margin:44px 0;}

/* ---------------------------------------------------------------------
   FAQ: answers on a deep-surface group were LIGHT GRAY ON A WHITE CARD.

   Dan 2026-08-02: "Some of the answers are in a light gray color; make sure
   all text is the correct black or dark gray as always." He was looking at a
   real contrast failure, not a preference.

   MEASURED, per group, off the render:
       group 1  paper-2   answer rgb(60,54,44)    on white   correct
       group 2  deep      answer rgb(198,206,212) on white   1.5:1
       group 3  paper     answer rgb(60,54,44)    on white   correct
       group 4  paper-2   answer rgb(60,54,44)    on white   correct
       group 5  deep      answer rgb(198,206,212) on white   1.5:1

   Cause: the kit sets the answer color on the WRAPPER, `.faq-item .faq-a`,
   while `.surface--deep p` sets it on the PARAGRAPH. A rule on the element
   beats a color inherited from its parent no matter how specific the parent's
   rule is, so on a deep group the white card was handed the on-dark body color.

   This is the same trap the kit already documents for `.signs.surface--deep`
   ("restate their colors"): a component with its own background sitting inside
   a surface that recolors text does not get to inherit. The white card is the
   background the text is actually on, so it restates.
   --------------------------------------------------------------------- */
.page-faq .faq-block.surface--deep .faq-item p,
.page-faq .faq-block.surface--deep .faq-item li{color:var(--text-faq);}
.page-faq .faq-block.surface--deep .faq-item strong{color:var(--ink);}

/* ---------------------------------------------------------------------
   FAQ: the group lead-in on a deep surface, which I broke and Dan caught.

   Dan 2026-08-02: "The type in the top of the dark sections is dark; those two
   areas need to use light-color text so they are readable (see the Still Not
   Answered section, it is correct)."

   MEASURED off the render, all five groups:
       group 1  paper-2  h2 rgb(154,91,66)  p rgb(58,52,42)   on rgb(234,227,210)
       group 2  DEEP     h2 rgb(154,91,66)  p rgb(58,52,42)   on the dark surface
       group 5  DEEP     h2 rgb(154,91,66)  p rgb(58,52,42)   on the dark surface

   Rust on near-black, and dark warm gray on near-black. My doing, in the pass
   before this one: I moved the lead-ins onto the kit's own `.faq-lead`, which
   was the right component, without carrying the consequence. The kit restates
   `.faq-lead` colors for `.faq-block.surface--navy` and for nothing else,
   because on Tempe the only dark FAQ group was the navy one. Those rules are
   three classes deep, so they outrank `.surface--deep h2{color:#fff}` at one,
   and the generic surface colors never got a look in.

   Same two declarations the kit already makes for the navy variant. The fix is
   to extend the existing pattern to the surface that now uses it, not to invent
   a treatment: the reference Dan pointed at, "Still Not Answered", is correct
   precisely because it is a plain .section-head that never overrode anything.
   --------------------------------------------------------------------- */
.page-faq .faq-block.surface--deep .faq-lead h2{color:#fff;}
.page-faq .faq-block.surface--deep .faq-lead p{color:var(--text-on-deep);}

/* ---------------------------------------------------------------------
   FAQ accordion: hold the row track closed while `open` is still on.

   See the long note in factory/shell.py. <details> hides its own content the
   instant the attribute is removed, so a close never drew its 0fr end state and
   snapped. The script keeps the attribute on and adds `.closing`; this is the
   rule that makes `.closing` mean anything.

   Specificity ties with the kit's `.faq-item[open] .faq-a` at (0,2,1) and wins
   on source order, which is why it lives here at the end of the sheet rather
   than being given an extra class to force it.
   --------------------------------------------------------------------- */
.faq-item.closing .faq-a{grid-template-rows:0fr;}

/* ---------------------------------------------------------------------
   ABOUT: the map is the page's main map, so it stops being sidebar furniture.

   Dan 2026-08-02: "The map looks like an afterthought in the sidebar. Since
   this is the main map, lets move it to the end of the left column and make it
   as wide as that column. Add a soft drop shadow to gently pop it off the page."

   The move itself is in the HTML. This gives it the reading column's full width
   and the site's established map shadow, which is the one already on the city
   page's `.loc-map .map-frame` rather than a new one invented here. Same
   component, same treatment, on both pages that carry a map.
   --------------------------------------------------------------------- */
.page-about .about-main .map-frame{width:100%;max-width:none;margin:34px 0 0;
  aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(43,38,34,.20), 0 3px 10px rgba(43,38,34,.10);}
.page-about .about-main .map-frame iframe{width:100%;height:100%;border:0;display:block;}

/* ---------------------------------------------------------------------
   CONTACT: the same map shadow, so the two maps on the site match.

   Dan 2026-08-02: "Add a soft drop shadow to the map to gently pop it off the
   page." The kit ships `box-shadow:var(--shadow)` on `.contact-map-frame`,
   which is the generic card shadow and sits flat against the paper-2 surface.
   This is the city page's map shadow, used verbatim.

   The form's white panel, red header bar and inner padding are removed in the
   HTML, not here: the kit's `.page-contact .contact-form-card` rules above
   already strip the panel, and the `.form-head` element simply stops being
   emitted. With the padding gone the embed's top edge lines up with the top of
   the map, which is what `align-items:start` on `.contact-grid` was always for.
   --------------------------------------------------------------------- */
.page-contact .contact-map-frame{
  box-shadow:0 18px 44px rgba(43,38,34,.20), 0 3px 10px rgba(43,38,34,.10);
  border:1px solid var(--line);}