/* =====================================================================
   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:#C0662B;       /* adobe rust: highlights, section headings */
  --cta:#8A3B12;          /* deep rust: primary buttons */
  --cta-deep:#6E2E0D;     /* button hover */
  --link:#8A3B12;         /* in-card arrow links */
  --hot:#E8901F;          /* bright orange: CTA band, hero H2, inline highlights. Set by Dan 2026-07-28 */
  /* Surfaces */
  --ink:#2B2622;          /* body text */
  --ink-soft:#6E6459;     /* muted text */
  --paper:#F6F1E8;        /* paper: light section bg */
  --paper-2:#EDE5D7;      /* alt light bg */
  --line:#DDD3C4;         /* mortar gray hairline */
  --shell:#2B2622;        /* ink-dark base / header */
  --footer:#1E1A16;
  --white:#FFFFFF;
  /* Signature backgrounds : the "mood" (warm desert) */
  --bg-dark:radial-gradient(120% 120% at 16% 88%,#D98341 0%,#C0662B 22%,#8A3B12 52%,#2B2622 84%); /* Kiln Fire */
  --bg-benefits:radial-gradient(120% 120% at 18% 90%,#E0A05C 0%,#C0662B 20%,#8A3B12 46%,#3A2317 82%); /* Kiln Fire, deeper */
  --bg-services:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27400%27%20height%3D%27240%27%20viewBox%3D%270%200%20400%20240%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%28255%2C255%2C255%2C0.07%29%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M0%200H400M0%2060H400M0%20120H400M0%20180H400M0%20240H400%27%2F%3E%3Cpath%20d%3D%27M0%200V60M200%200V60M400%200V60%27%2F%3E%3Cpath%20d%3D%27M100%2060V120M300%2060V120%27%2F%3E%3Cpath%20d%3D%27M0%20120V180M200%20120V180M400%20120V180%27%2F%3E%3Cpath%20d%3D%27M100%20180V240M300%20180V240%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27rgba%280%2C0%2C0%2C0.05%29%27%3E%3Crect%20x%3D%272%27%20y%3D%272%27%20width%3D%27196%27%20height%3D%2756%27%2F%3E%3Crect%20x%3D%27202%27%20y%3D%272%27%20width%3D%27196%27%20height%3D%2756%27%2F%3E%3Crect%20x%3D%27102%27%20y%3D%2762%27%20width%3D%27196%27%20height%3D%2756%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%27122%27%20width%3D%27196%27%20height%3D%2756%27%2F%3E%3Crect%20x%3D%27202%27%20y%3D%27122%27%20width%3D%27196%27%20height%3D%2756%27%2F%3E%3Crect%20x%3D%27102%27%20y%3D%27182%27%20width%3D%27196%27%20height%3D%2756%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top left/400px 240px repeat,radial-gradient(1100px 720px at 82% -8%,rgba(192,102,43,.26),rgba(138,59,18,.10) 38%,transparent 64%),var(--shell);
  --bg-feature:linear-gradient(158deg,rgba(217,131,65,.30) 0%,rgba(138,59,18,.62) 100%),radial-gradient(120% 140% at 0% 0%,#D98341,#8A3B12);
  --bg-footer:radial-gradient(145% 170% at 100% 100%,#E0A05C 0%,#C0662B 18%,#8A3B12 42%,#4A2A1A 66%,#1E1A16 100%);
  --card-glass:linear-gradient(180deg,rgba(104,58,30,.48),rgba(56,32,18,.64));
  --card-glass-border:rgba(232,196,160,.22);
  /* back-compat aliases (existing rules read these) */
  --orange:var(--accent);
  --amber:var(--cta);
  --amber-deep:var(--cta-deep);
  --blue:#C0662B;
  --blue-deep:#8A3B12;
  --shell-2:#332D27;
  --shell-3:#3D362E;

  /* 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,#1B1613 0%,#2B2622 32%,#8A3B12 74%,#C0662B 100%);
  --grad-orange:linear-gradient(158deg,#D98341 0%,#C0662B 55%,#8A3B12 100%);
  --grad-copyright:linear-gradient(90deg,#1E1A16 0%,#8A3B12 55%,#C0662B 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:#2C343A;  /* body copy on paper (cool gray, inherited from the spray foam kit) */
  --text-body-warm:#4A423A;  /* body copy on paper, warm variant, used by the newer sections */
  --text-card:#465059;  /* body copy inside white cards (cool gray, inherited) */
  --text-card-head:#0B0F12;  /* headings inside white cards */
  --text-caption:#5A636D;  /* captions and small print */
  --text-faq:#3A434A;  /* FAQ answer text */
  --text-on-deep:#D9C9B8;  /* body copy on the deep textured surface */
  --text-on-shell:#C4D0D7;  /* body copy on the shell / footer (cool, inherited) */
  --text-on-hero:#D5E2EA;  /* hero lede on the homepage hero */
  --text-on-dark:#E7EDF1;  /* generic light text on a dark section */
  --text-on-hero-warm:#E4D6C6;  /* service hero lede, warm variant */
  --text-on-photo:#EBDDCE;  /* text over a photo background */
  --text-on-scrim:#F0E4D6;  /* service hero subhead over the black scrim */
  --text-on-navy:#E6EEF6;  /* text on the navy accent band */
  --text-on-deep-hi:#F2E7DA;  /* high contrast text on deep */
  --text-on-clay:#FCEFE2;  /* text on the clay band */
  --text-on-costs:#D5E2EE;  /* numbered list inside the costs card */
  --text-on-hot:#231A12;  /* dark text sitting on the --hot orange */
  --text-on-cta:#121212;  /* text on the CTA band */
  --accent-tint:#D98341;  /* accent lightened, hover and highlights */
  --accent-tint-2:#E0A05C;  /* accent lightened further */
  --hot-hover:#F2A03A;  /* hover state for the --hot button */
  --clay-mid:#A34A18;  /* middle stop of the clay band gradient */
  --navy-mid:#123253;  /* middle stop of the navy gradient */
  --navy-deep:#0A1E34;  /* end stop of the navy gradient */
  --deep-3:#221D1A;  /* darkest stop of the deep surface gradient */
  --signs-bg-default:#F4EFE6;  /* fallback background for the signs grid */
  --ph-1:#C8C3B9;  /* photo placeholder, light */
  --ph-2:#BFBAAF;  /* photo placeholder, dark */

  /* glass boxes on the deep surface */
  --glass-top:rgba(104,58,30,.42);
  --glass-bottom:rgba(50,32,20,.58);
  --glass-border:rgba(232,196,160,.24);
}
:root{
  /* remaining brand-carrying colors, hoisted 2026-07-29 */
  --text-brandtag:#9FB0BB;  /* brand tagline in the header */
  --text-nav:#EEF3F6;  /* main nav links */
  --text-benefits:#C8D7E0;  /* benefits section body */
  --text-benefit-card:#B9C8D1;  /* benefit card body */
  --text-field-label:#CFE0E9;  /* form field labels */
  --field-text:#EEF4F7;  /* text typed into a form field */
  --field-placeholder:#7D8B94;  /* form field placeholder */
  --text-footer:#C6D4DE;  /* footer paragraph */
  --text-footer-link:#D0DBE2;  /* footer links */
  --text-footer-copy:#BCC9D2;  /* footer copyright line */
  --text-svc-lede:#D7E3EB;  /* 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:#E8B06A;  /* 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:#0B1114;  /* estimate section base */
  --estimate-bg-2:#12303F;  /* estimate section gradient stop */
  --contact-bg:#0C1418;  /* contact section base */
  --navy-lifted:#22384E;  /* 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(18,144,138,.34);}
.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(96,62,26,.48),rgba(52,34,14,.62));
  --card-glass-border:rgba(232,190,120,.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:#2B2622;
  --deep-2:#3A2C22;
  --clay-band:#7A3411;
  --tex-stucco:url("../img/texture-stucco.png");
  --tex-block:url("../img/texture-block-course.png");
}

/* ---------- 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(192,102,43,.28), 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:#0C253F; }

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