/* =========================================================================
   Phoenix Drain Cleaning Co. — main.css
   Profile: utility-diagnostic (new, declared).
   Axes: wide-utilitarian type (Verdana/Tahoma display, sentence case, 700,
   ratio 1.200, NEGATIVE -.022em tracking, ui-monospace eyebrows) /
   scope-readout hero (photo-free; a drawn sewer-camera monitor with a
   concentric bore, a crosshair reticle and a self-hiding HUD) / margin-rail
   rhythm (a persistent left margin column carrying the checking) / ticket-tab cards
   (0 radius, hairline, an offset index tab) / cta-block header (a full-height
   graphite call block flush right) / grate-slots texture (broken capsule
   slots at a 14px pitch with sparse 88px braces — never a grid).
   Graphite-teal primary + verdigris accent on warm Sonoran sand.
   NO ELEVATION shadow in this build: --shadow-* are all `none` and elevation is
   carried by 1px hairlines. The only box-shadows left are the focus ring (a11y)
   and inset rules used as borders.
   See DESIGN-MANIFEST.json.
   1. Design tokens (:root)
   2. Reset / base
   3. Layout (container, margin-rail rhythm, graphite feature band)
   4. Buttons + links
   5. Header / nav / top bar (solid, with the graphite call block)
   6. Hero (scope-readout) + request band below
   7. Trust signals / Open Now
   8. Cards + silo grids (ticket-tab: hairline plate + offset index tab)
   9. FAQ accordion
   10. CTA banner
   11. Testimonials
   12. E-E-A-T
   13. Breadcrumbs / prose / blog
   14. Footer + mobile sticky bar
   15. Utilities / a11y / motion (margin-rail section heads)
   16. Quote wizard (3-step lead form)
   17. Directory (off by default) + conversion pack
   ====================================================================== */

/* 1. TOKENS ------------------------------------------------------------- */
:root{
	/* Brand palette (Customizer overrides --color-primary/-accent/-text + their *-hover).
	   Utility-diagnostic identity: graphite-teal ink + verdigris on Sonoran sand. */
	--color-primary:#16262D;        /* graphite-teal: brand, links, dark bands, nav (15.6:1 on white) */
	--color-accent:#0B6E6C;         /* verdigris: every CTA fill (WHITE ink, 6.07:1) */
	--color-text:#14181A;           /* near-black body text */
	--color-primary-hover:#0E1A1F;  /* deeper graphite: hover on strong fills */
	--color-accent-hover:#08514F;   /* deep verdigris: CTA hover (white ink ~8.5:1) */

	--color-muted:#5B6468;          /* grey secondary text (~5.6:1 on surface) */
	--color-surface:#EFEAE2;        /* warm Sonoran sand base band */
	--color-surface-2:#E4DDD2;      /* deeper sand alternate band */
	--color-border:#D2CABB;         /* sand hairline border */
	--color-white:#ffffff;
	--color-page:#FBF9F6;           /* near-white page floor */
	--color-star:#9A7B22;           /* bronze rating stars (decorative) */
	--color-success:#1F6B4A;        /* green: open-now + success cues */

	/* Dark surface family — graphite ink. Used for the call block, ONE mid-page
	   feature band, the scope monitor, and the footer floor. */
	--color-dark:#16262D;           /* graphite (call block, feature band) */
	--color-dark-2:#0D171C;         /* deepest graphite (footer floor, scope viewport) */
	--color-on-dark:#E9E4DB;        /* warm paper on graphite (~12.6:1) */
	--color-on-dark-muted:#A9B4B8;  /* muted paper on graphite (~7.3:1) */
	--color-dark-border:#2A3B42;    /* hairline borders on graphite */

	/* rgb channels for rgba() tints. */
	--color-primary-rgb:22,38,45;
	--color-accent-rgb:11,110,108;

	/* grate-slots texture — pure CSS gradients, zero requests, static.
	   Geometry IS the token: 3px capsule slots at a 14px pitch, laid in BROKEN
	   runs (a 46px run then a 22px gap, offset half a run on the next band),
	   crossed by sparse 1px braces every 88px. The 88:14 brace-to-slot ratio
	   and the interruption are what keep it from reading as blueprint-grid or
	   panel-grid, and 0deg + capsule caps keep it out of diagonal-stripes.
	   Alpha ceiling 6%; tinted bands only, never behind body copy or in a card. */
	--grate-slots:
		repeating-linear-gradient(90deg,transparent 0,transparent 86px,rgba(20,24,26,.055) 86px,rgba(20,24,26,.055) 87px,transparent 87px,transparent 88px),
		repeating-linear-gradient(0deg,rgba(20,24,26,.055) 0,rgba(20,24,26,.055) 3px,transparent 3px,transparent 14px);
	--grate-on-dark:
		repeating-linear-gradient(90deg,transparent 0,transparent 86px,rgba(233,228,219,.05) 86px,rgba(233,228,219,.05) 87px,transparent 87px,transparent 88px),
		repeating-linear-gradient(0deg,rgba(233,228,219,.05) 0,rgba(233,228,219,.05) 3px,transparent 3px,transparent 14px);
	/* The mask that BREAKS the slot runs — without it this is just hairlines. */
	--grate-break:repeating-linear-gradient(90deg,#000 0,#000 46px,transparent 46px,transparent 68px);

	/* wide-utilitarian scale — a tight 1.200 ratio ladder on a 17px base. The
	   small steps are the point: the wide face does the work, not the jumps. */
	--text-xs:0.75rem; --text-sm:0.875rem; --text-base:1.0625rem; --text-lg:1.25rem;
	--text-xl:1.5rem; --text-2xl:1.8rem; --text-3xl:2.16rem; --text-4xl:2.6rem;
	--text-5xl:3.1rem; --text-6xl:3.75rem;

	--fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
	--lh-tight:1.08; --lh-snug:1.4; --lh-normal:1.65;

	/* Display tracking is NEGATIVE and deep (-.022em) — the axis signature:
	   Verdana is the widest system grotesque, and closing it is what turns it
	   from a default into an engineered face. Eyebrows are ui-monospace. */
	--track-display:-.022em;
	--track-eyebrow:.12em;

	--space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem;
	--space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-20:5rem;

	--width-content:720px; --width-wide:1180px;
	/* Square by decision — the ticket tab and the hairline carry the shape. */
	--radius-sm:0; --radius:0; --radius-full:999px;
	/* NO elevation in this build. Hairlines do the whole job; the tokens stay
	   defined so shared components that reference them never drop a rule
	   (§21.11), but every value is `none`. */
	--shadow-sm:none;
	--shadow-md:none;
	--shadow-lg:none;
	--transition:170ms ease;
	--header-h:78px; --topbar-h:34px;

	/* margin-rail rhythm tokens. */
	--rail-w:9rem;
	--rail-gap:2.5rem;

	--font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	/* wide-utilitarian: Verdana ships on macOS AND stock Windows; DejaVu Sans /
	   Bitstream Vera Sans are its Vera-derived relatives on Linux and keep the
	   wide, large-x-height skeleton. No font request on any of the three. */
	--font-display:Verdana,Tahoma,'DejaVu Sans','Bitstream Vera Sans',Geneva,sans-serif;
	--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}

/* 2. RESET / BASE ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);font-size:var(--text-base);line-height:var(--lh-normal);color:var(--color-text);background:var(--color-page);-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--color-accent);text-decoration:none;}
a:hover{text-decoration:underline;}
/* wide-utilitarian headings — SENTENCE CASE everywhere, 700, and tracked
   NEGATIVE hard so the wide face closes up at display size. */
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-tight);font-weight:var(--fw-bold);color:var(--color-text);letter-spacing:var(--track-display);margin:0 0 var(--space-4);text-transform:none;}
h1{font-size:var(--text-3xl);} h2{font-size:var(--text-2xl);} h3{font-size:var(--text-xl);font-weight:var(--fw-semibold);}
h4{font-size:var(--text-lg);font-weight:var(--fw-semibold);letter-spacing:-.012em;}
@media(min-width:960px){h1{font-size:var(--text-4xl);}}
p{margin:0 0 var(--space-4);}
ul,ol{margin:0 0 var(--space-4);padding-left:1.25rem;}
/* Every number that is a fact lines up. */
.trust-metric__value,.request-steps__num,.directory__rank,.service-card__price,.entry-meta,.freshness,.hero__figure-value,.hero__phone,.scope__hud-value,.rail__value,.callblock__number{font-variant-numeric:tabular-nums;}

/* 3. LAYOUT ------------------------------------------------------------- */
.container{width:100%;max-width:var(--width-wide);margin:0 auto;padding:0 var(--space-5);}
.section{padding:var(--space-20) 0 var(--space-16);}
/* Alternate bands are sand with the grate tile at ~5.5%; :where() keeps
   specificity flat so the hero, feature band and self-backgrounded sections
   override cleanly. The slot runs are broken by a mask — a continuous run
   would read as blueprint-grid. */
.site-main > :where(section:nth-of-type(even)),.section--surface,.request-band,.testimonials,.directory{position:relative;background-color:var(--color-surface);}
.site-main > :where(section:nth-of-type(even))::before,.section--surface::before,.request-band::before,.testimonials::before,.directory::before,.cta-banner::before,.site-footer::before{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
	background-image:var(--grate-slots);
	-webkit-mask-image:var(--grate-break);mask-image:var(--grate-break);}
.site-main > :where(section:nth-of-type(even)) > *,.section--surface > *,.request-band > *,.testimonials > *,.directory > *,.cta-banner > *,.site-footer > *{position:relative;z-index:1;}
/* Dark bands take the paper-tinted variant of the same broken slot run. */
.cta-banner::before,.site-footer::before{background-image:var(--grate-on-dark);}
/* THE one graphite feature band mid-page. */
.section--dark{position:relative;background-color:var(--color-dark);color:var(--color-on-dark);padding:var(--space-20) 0;}
.section--dark::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
	background-image:var(--grate-on-dark);
	-webkit-mask-image:var(--grate-break);mask-image:var(--grate-break);}
.section--dark > *{position:relative;z-index:1;}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--color-on-dark);}
.section--dark p{color:var(--color-on-dark-muted);}
.grid{display:grid;gap:var(--space-8);}
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
@media(min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.grid--3{grid-template-columns:repeat(3,1fr);}.grid--4{grid-template-columns:repeat(4,1fr);}}

/* --- margin-rail rhythm ------------------------------------------------
   A persistent second grid column to the LEFT of the body column, carrying
   the CHECKING: figure numbers, line-type labels, typical depths, and
   meta-driven "checked on" stamps — never a hard-coded date. A section with
   no rail metadata spans BOTH columns via .section--full, because an empty
   empty rail column reads as a layout bug. Below 1024px the rail flips to a
   left-bordered block above the content, from the same DOM. */
.section--railed > .container{display:grid;grid-template-columns:1fr;gap:var(--space-6);}
@media(min-width:1024px){
	.section--railed > .container{grid-template-columns:var(--rail-w) minmax(0,1fr);column-gap:var(--rail-gap);align-items:start;}
	.section--railed .section-head,.section--railed .rail + *{max-width:66ch;}
}
.section--full > .container{display:block;}
.rail{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.45;color:var(--color-muted);
	border-left:2px solid var(--color-accent);padding-left:var(--space-4);margin:0 0 var(--space-2);
	display:flex;flex-direction:column;gap:var(--space-3);list-style:none;}
@media(min-width:1024px){.rail{border-left:0;border-right:1px solid var(--color-border);padding-left:0;padding-right:var(--space-4);text-align:right;margin:0;}}
.rail__item{display:flex;flex-direction:column;gap:2px;}
.rail__label{text-transform:uppercase;letter-spacing:var(--track-eyebrow);color:var(--color-muted);}
.rail__value{color:var(--color-text);font-variant-numeric:tabular-nums;}
.rail__stamp{color:var(--color-muted);font-variant-numeric:tabular-nums;}
/* Prose sitting inside a railed/full section: the section owns the vertical
   padding and the container owns the horizontal, so the article drops both
   and stops centring — otherwise the copy floats away from its own rail. */
.section--railed .prose-content,.section--full .prose-content{padding:0;margin-left:0;margin-right:0;max-width:66ch;}
.section--full .prose-content{margin-left:auto;margin-right:auto;}
@media(min-width:1024px){.section--railed .prose-content{grid-column:2;}}

/* 4. BUTTONS ------------------------------------------------------------ */
/* Body sans, sentence case, square, no lift — the display face is reserved
   for headings so the CTAs stay unmistakably controls. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
	padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);font-family:var(--font);
	font-weight:var(--fw-semibold);letter-spacing:0;
	font-size:var(--text-base);border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1.3;
	transition:background var(--transition),border-color var(--transition),color var(--transition);}
.btn:hover{text-decoration:none;}
/* Primary CTA — verdigris fill, WHITE ink (#FFFFFF on #0B6E6C = 6.07:1).
   Do not lighten the accent without re-checking this. */
.btn--primary{background:var(--color-accent);border-color:var(--color-accent);color:#FFFFFF;}
.btn--primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#FFFFFF;}
/* Secondary — graphite fill, paper ink (~12.6:1). */
.btn--secondary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-dark);}
.btn--secondary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff;}
/* Ghost / outline on a LIGHT surface — graphite rule + graphite ink. */
.btn--ghost{background:transparent;border-color:var(--color-primary);color:var(--color-primary);}
.btn--ghost:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
/* Outline ON a LIGHT band (the hero is light in this profile) — graphite rule
   and graphite ink, so it can never vanish the way a ghost button does. */
.btn--on-light{background:transparent;border-color:var(--color-primary);color:var(--color-primary);}
.btn--on-light:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
/* Paper outline ON a dark band — fills paper on hover. */
.btn--on-dark{background:transparent;border-color:var(--color-on-dark);color:var(--color-on-dark);}
.btn--on-dark:hover{background:var(--color-on-dark);border-color:var(--color-on-dark);color:var(--color-dark);}
.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);}
.btn--block{width:100%;}
.btn svg{width:1.1em;height:1.1em;}

/* 5. HEADER (solid, with the graphite call block) ----------------------- */
/* Slim graphite utility strip above the header — Open Now, phone, Text Us. */
.topbar{background:var(--color-dark-2);color:var(--color-on-dark-muted);font-size:var(--text-sm);min-height:var(--topbar-h);}
.topbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-2) var(--space-6);padding:var(--space-1) var(--space-5);}
.topbar a{color:var(--color-on-dark);display:inline-flex;align-items:center;gap:var(--space-2);}
.topbar a:hover{color:#fff;}
.topbar svg{width:1em;height:1em;}
.topbar__afterhours{color:var(--color-on-dark);font-weight:var(--fw-semibold);}

/* cta-block header: a LIGHT inline row (wordmark left, nav centre) closed by a
   full-height GRAPHITE CALL BLOCK flush to the right edge of the container.
   Unlike the network's other cta-block builds, the block is an INFORMATION
   block rather than a button — number, live state and an optional hours note —
   because on an emergency drain call the number itself is the action. The
   header is solid from the first pixel on every page (no transparent state),
   so header text is never light-on-light (§21.4). JS hooks unchanged. */
.site-header{position:sticky;top:0;z-index:100;background:var(--color-page);border-bottom:1px solid var(--color-border);transition:border-color var(--transition);}
.site-header.is-shrunk{border-bottom-color:var(--color-primary);}
.site-header__inner{display:flex;align-items:stretch;justify-content:space-between;gap:var(--space-5);min-height:var(--header-h);
	/* the call block bleeds to the container's right padding edge */
	padding-right:0;}
.site-branding{display:flex;align-items:center;flex:0 0 auto;}
/* Wordmark in the wide display face — the one place it is set small. */
.site-title{font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--fw-bold);letter-spacing:var(--track-display);margin:0;line-height:1.15;white-space:nowrap;}
@media(min-width:1200px){.site-title{font-size:var(--text-lg);}}
.site-title a{color:var(--color-primary);}
.site-title a:hover{color:var(--color-accent);text-decoration:none;}
.site-branding .custom-logo{max-height:46px;width:auto;}
.site-header__nav{display:flex;align-items:center;min-width:0;flex:1 1 auto;justify-content:center;}
.main-nav > ul{list-style:none;display:flex;flex-wrap:nowrap;align-items:center;gap:0;margin:0;padding:0;}
.main-nav li{position:relative;}
.main-nav a{color:var(--color-primary);font-weight:var(--fw-medium);font-size:var(--text-sm);white-space:nowrap;display:block;padding:var(--space-3) var(--space-2);}
@media(min-width:1200px){.main-nav a{padding:var(--space-3);}}
.main-nav a:hover,.main-nav .current-menu-item > a,.main-nav [aria-current]{color:var(--color-accent);text-decoration:none;box-shadow:inset 0 -2px 0 0 var(--color-accent);}
/* Caret on parent items with a dropdown. */
.main-nav .menu-item-has-children > a::after{content:"";display:inline-block;width:.38em;height:.38em;margin-left:.45em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--transition);}
/* Submenu dropdown — paper plate, hairline, square; DESKTOP only. */
.main-nav .sub-menu{list-style:none;margin:0;padding:var(--space-2);position:absolute;top:100%;left:0;min-width:250px;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius);display:none;flex-direction:column;z-index:60;}
@media(min-width:960px){
	.main-nav li:hover > .sub-menu,.main-nav li:focus-within > .sub-menu{display:flex;}
}
.main-nav .sub-menu a{white-space:normal;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-weight:var(--fw-normal);color:var(--color-text);}
.main-nav .sub-menu a:hover{background:var(--color-surface);color:var(--color-accent);text-decoration:none;box-shadow:none;}
.header-actions{display:flex;align-items:center;gap:var(--space-3);}
.header-search form{display:flex;}
/* Header CTA button — hidden on desktop where the call block leads, shown on
   nothing smaller either (the hero CTA + sticky bar cover phones, §12). It
   stays in the DOM so a build that drops the call block still converts. */
.header-cta{display:none;white-space:nowrap;}

/* THE CALL BLOCK — full-height graphite panel flush to the right edge. */
.masthead__callblock{display:none;flex:0 0 auto;flex-direction:column;justify-content:center;gap:2px;
	background:var(--color-dark);color:var(--color-on-dark);
	padding:var(--space-3) var(--space-5);margin-left:var(--space-4);
	border-left:3px solid var(--color-accent);text-decoration:none;white-space:nowrap;
	transition:background var(--transition);}
.masthead__callblock:hover{background:var(--color-primary-hover);text-decoration:none;}
@media(min-width:960px){.masthead__callblock{display:flex;}}
.callblock__label{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--color-on-dark-muted);}
.callblock__label svg{width:1em;height:1em;flex:none;}
.callblock__number{font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--fw-bold);letter-spacing:var(--track-display);color:#fff;line-height:1.1;white-space:nowrap;}
@media(min-width:1200px){.callblock__number{font-size:var(--text-lg);}}
.callblock__state{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-on-dark-muted);}
.callblock__hours{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-on-dark-muted);}

.menu-toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:var(--space-2);}
.menu-toggle span{width:24px;height:2px;background:var(--color-primary);display:block;transition:var(--transition);}
@media(max-width:959px){
	/* Accordion drawer under the sticky header — paper plate, graphite links. */
	.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-page);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);max-height:calc(100vh - var(--header-h));overflow-y:auto;}
	.main-nav.is-open{display:block;}
	.main-nav > ul{flex-direction:column;flex-wrap:nowrap;gap:0;padding:var(--space-4) var(--space-5);align-items:stretch;}
	.main-nav li{border-bottom:1px solid var(--color-border);}
	.main-nav a{display:block;padding:var(--space-3) 0;white-space:normal;font-size:var(--text-base);}
	.main-nav a:hover{box-shadow:none;}
	.main-nav .menu-item-has-children > a::after{float:right;margin-top:.5em;}
	.main-nav .sub-menu{position:static;display:none;border:0;border-radius:0;padding:0 0 var(--space-2) var(--space-4);min-width:0;background:transparent;}
	.main-nav .menu-item-has-children.is-open > .sub-menu{display:flex;}
	.main-nav .menu-item-has-children.is-open > a::after{transform:rotate(-135deg);}
	.main-nav .sub-menu li{border-bottom:0;}
	.main-nav .sub-menu a{padding:var(--space-2) 0;color:var(--color-muted);}
	.main-nav .sub-menu a:hover{background:transparent;color:var(--color-accent);}
}
@media(min-width:960px){.menu-toggle{display:none;}}

/* 6. HERO (scope-readout) ----------------------------------------------- */
/* A photo-free band on warm sand, closed above by a 4px verdigris rule.
   Left column: mono eyebrow, H1, deck, CTA pair, phone, figure rail.
   Right column: a DRAWN sewer-camera monitor — a graphite viewport with a
   concentric pipe bore, a crosshair reticle and a self-hiding HUD strip.
   The monitor is CSS only and comes AFTER the H1 in source, so the DECLARED
   LCP is the H1 text block and no image preload ships. If the operator sets a
   hero image it takes the monitor's slot as a real <img> with fetchpriority
   (§13). Nothing here ever collapses to an empty grey box. */
.hero{position:relative;color:var(--color-text);background-color:var(--color-surface);border-top:4px solid var(--color-accent);isolation:isolate;}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
	background-image:var(--grate-slots);
	-webkit-mask-image:var(--grate-break);mask-image:var(--grate-break);}
.hero > *{position:relative;z-index:1;}
.hero__inner{position:relative;display:grid;grid-template-columns:1fr;gap:var(--space-12);
	padding:var(--space-16) 0;}
@media(min-width:960px){
	.hero--scope-readout .hero__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:var(--space-16);}
}
.hero__content{color:var(--color-text);position:relative;}
/* Eyebrow — ui-monospace, uppercase, tracked, over a short verdigris rule.
   A mono eyebrow over a wide grotesque is the pairing this profile owns. */
.hero__eyebrow{display:block;font-family:var(--font-mono);color:var(--color-muted);font-weight:var(--fw-medium);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;padding-top:var(--space-4);margin-bottom:var(--space-5);border-top:2px solid var(--color-accent);max-width:max-content;}
/* Display H1 — the DECLARED LCP element. No reveal animation on it, so it
   paints immediately. */
.hero__title{font-family:var(--font-display);font-size:clamp(var(--text-3xl),4.6vw,var(--text-5xl));font-weight:var(--fw-bold);letter-spacing:var(--track-display);line-height:1.06;margin-bottom:var(--space-5);color:var(--color-primary);max-width:16ch;}
.hero__subtitle{font-size:var(--text-lg);line-height:var(--lh-snug);margin-bottom:var(--space-8);color:var(--color-text);max-width:54ch;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-5);align-items:center;}
/* The phone number in the wide display face, beside the CTA pair. */
.hero__phone{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:clamp(var(--text-lg),2.2vw,var(--text-xl));letter-spacing:var(--track-display);color:var(--color-primary);line-height:1;}
.hero__phone:hover{color:var(--color-accent);text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:2px;text-underline-offset:6px;}
.hero__phone svg{width:.9em;height:.9em;flex:none;}
/* Figure rail — fed by the site-wide trust metrics, which ship EMPTY, so the
   whole rail is absent until a real operator supplies verifiable numbers. */
.hero__figures{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-8);list-style:none;margin:var(--space-8) 0 0;padding:var(--space-6) 0 0;border-top:1px solid var(--color-border);}
.hero__figure{display:flex;flex-direction:column;gap:2px;}
.hero__figure-value{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-bold);letter-spacing:var(--track-display);color:var(--color-primary);line-height:1.1;}
.hero__figure-label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--color-muted);}

/* --- the drawn scope monitor ------------------------------------------- */
.hero__readout{position:relative;display:none;}
@media(min-width:960px){.hero--scope-readout .hero__readout{display:block;}}
.hero__scope{position:relative;height:340px;background:var(--color-dark-2);
	border:1px solid var(--color-dark-border);
	display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;}
/* Inner bezel drawn as a BORDER, not an inset shadow — this build ships no
   box-shadow at all, and "verifiable in the live DOM" is the point of saying so. */
.hero__scope::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;border:1px solid rgba(var(--color-accent-rgb),.35);}
.scope__tag{position:absolute;top:var(--space-4);left:var(--space-5);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--color-on-dark-muted);}
/* The pipe bore: five concentric ellipse strokes at descending alpha. */
.scope__bore{position:relative;width:230px;height:230px;display:flex;align-items:center;justify-content:center;}
.scope__ring{position:absolute;border-radius:50%;border:1px solid rgba(233,228,219,.5);}
.scope__ring--1{width:100%;height:100%;border-color:rgba(233,228,219,.42);}
.scope__ring--2{width:76%;height:76%;border-color:rgba(233,228,219,.30);}
.scope__ring--3{width:54%;height:54%;border-color:rgba(233,228,219,.20);}
.scope__ring--4{width:34%;height:34%;border-color:rgba(233,228,219,.13);background:radial-gradient(circle,rgba(11,110,108,.30) 0%,transparent 70%);}
/* Crosshair reticle, in the accent. */
.scope__reticle{position:absolute;width:52px;height:52px;}
.scope__reticle::before,.scope__reticle::after{content:"";position:absolute;background:var(--color-accent);}
.scope__reticle::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);}
.scope__reticle::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%);}
/* HUD strip — each cell self-hides upstream when its value is empty, so the
   default build shows no reading at all rather than a fabricated one. */
.scope__hud{position:absolute;left:0;right:0;bottom:0;display:flex;list-style:none;margin:0;padding:0;
	border-top:1px solid var(--color-dark-border);background:rgba(13,23,28,.85);}
.scope__hud-cell{flex:1;display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4);}
.scope__hud-cell + .scope__hud-cell{border-left:1px solid var(--color-dark-border);}
.scope__hud-label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--color-on-dark-muted);}
.scope__hud-value{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-bold);letter-spacing:var(--track-display);color:var(--color-on-dark);}
/* Optional media (hero--has-media) — the real <img> takes the same slot as
   the drawn monitor, keeping its LCP attributes. */
.hero__media{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--color-border);}
.hero__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
@media(max-width:959px){.hero__media img{aspect-ratio:16/9;}}
.hero--has-media .hero__scope{display:none;}
.hero--has-media .hero__readout{display:block;}

/* Full-width request band directly below the hero — sand, grate tile, the
   3-step wizard card centered inside. */
.request-band{padding:var(--space-16) 0 var(--space-20);}
.request-shell{width:100%;max-width:820px;margin:0 auto;}

/* Quote form card — paper plate, hairline, verdigris rule at the top. */
.quote-form-wrap{background:var(--color-white);border:1px solid var(--color-border);border-top:3px solid var(--color-accent);border-radius:var(--radius);padding:var(--space-8);color:var(--color-text);text-align:left;}
.quote-form-wrap h2{font-size:var(--text-xl);margin-bottom:var(--space-6);}
.quote-form .field{margin-bottom:var(--space-4);}
.quote-form label{display:block;font-weight:var(--fw-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2);color:var(--color-text);}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-base);font-family:inherit;background:#fff;transition:border-color var(--transition),box-shadow var(--transition);}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(var(--color-accent-rgb),.20);}
.quote-form textarea{min-height:96px;resize:vertical;}
.quote-form .btn{margin-top:var(--space-2);}
.quote-form__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.quote-form__feedback{margin-top:var(--space-3);font-weight:var(--fw-medium);}
.quote-form__feedback.is-success{color:var(--color-success);}
.quote-form__feedback.is-error{color:#A32B1C;}
.spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.45);border-top-color:#FFFFFF;border-radius:50%;}
.is-loading .spinner{display:inline-block;animation:pdc-spin .7s linear infinite;}
@keyframes pdc-spin{to{transform:rotate(360deg);}}
.form-fallback{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-6);text-align:center;color:var(--color-text);}

/* 7. TRUST / OPEN NOW --------------------------------------------------- */
/* A quiet measured strip, not a badge wall: hairline top and bottom, items
   separated by thin rules. */
.trust-bar{background:var(--color-white);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.trust-bar__inner{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:center;justify-content:flex-start;padding:var(--space-6) 0;text-align:left;}
.trust-bar__inner>*{position:relative;}
@media(min-width:768px){
	.trust-bar__inner>*+*::before{content:"";position:absolute;left:calc(var(--space-8) / -2);top:50%;transform:translateY(-50%);width:1px;height:28px;background:var(--color-border);}
}
.trust-bar .trust-badges{padding:var(--space-5) 0;border-top:1px solid var(--color-border);margin-top:var(--space-4);justify-content:flex-start;}
.trust-rating{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);}
.stars{display:inline-flex;color:var(--color-star);}
.stars svg{width:1.1em;height:1.1em;}
.trust-metric{display:flex;flex-direction:column;}
.trust-metric__value{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-bold);letter-spacing:var(--track-display);color:var(--color-primary);line-height:1.1;}
.trust-metric__label{font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--color-muted);}
.trust-chip{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-3);}
.trust-badges{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);justify-content:flex-start;align-items:center;}
.trust-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-text);line-height:1.3;}
.trust-badge svg{width:18px;height:18px;flex:none;color:var(--color-success);}

.open-now{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);font-size:var(--text-sm);}
.open-now__dot{width:9px;height:9px;border-radius:50%;background:var(--color-muted);}
.open-now.is-open .open-now__dot{background:var(--color-success);outline:3px solid rgba(31,107,74,.35);outline-offset:0;}
.open-now.is-closed .open-now__dot{background:var(--color-accent);}

/* 8. CARDS / SILO (ticket-tab) ------------------------------------------ */
/* ticket-tab cards: 0 radius, a 1px hairline plate, NO shadow — and an offset
   INDEX TAB sitting half above the card's top edge, holding the service code.
   The tab is the load-bearing half of the token: drop it and this is `outline`.
   The card finishes with no image and reserves no thumbnail slot, so a build
   with zero uploads never shows a collapsed grey rectangle. */
.card{position:relative;background:var(--color-white);border:1px solid var(--color-border);border-radius:0;box-shadow:none;overflow:visible;display:flex;flex-direction:column;padding:var(--space-8) var(--space-6) var(--space-6);margin-top:12px;transition:border-color var(--transition);}
.card:hover{border-color:var(--color-primary);box-shadow:none;}
/* The index tab. Rendered from the card title's initials by the card part; when
   no code is available the element is simply not printed. */
.card__tab{position:absolute;top:-12px;left:var(--space-6);display:inline-flex;align-items:center;justify-content:center;
	min-width:38px;height:24px;padding:0 var(--space-2);
	background:var(--color-primary);color:var(--color-on-dark);
	font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--fw-bold);
	letter-spacing:var(--track-eyebrow);text-transform:uppercase;line-height:1;
	border-left:3px solid var(--color-accent);}
.card:hover .card__tab{background:var(--color-accent);border-left-color:var(--color-primary);}
.card__media{margin:0 calc(-1 * var(--space-6)) var(--space-5);}
.card__media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0;}
.card__body{padding:0;display:flex;flex-direction:column;gap:var(--space-3);flex:1;}
.card__title{font-size:var(--text-lg);margin:0;}
.card__excerpt{color:var(--color-muted);font-size:var(--text-base);margin:0;}
/* The hairline that separates the body from the CTA row. */
.card__rule{height:1px;background:var(--color-border);margin-top:auto;}
.card__cta{padding-top:var(--space-3);font-family:var(--font);font-weight:var(--fw-semibold);font-size:var(--text-sm);letter-spacing:0;color:var(--color-accent);display:inline-flex;align-items:center;gap:var(--space-2);}
.card:hover .card__cta{gap:var(--space-3);}
.card__cta svg{width:1em;height:1em;flex:none;}
.card__title a{color:var(--color-primary);}
.card__title a:hover{color:var(--color-accent);text-decoration:none;}
/* On the graphite feature band the plate inverts but keeps its geometry. */
.section--dark .card{background:transparent;border-color:var(--color-dark-border);}
.section--dark .card:hover{border-color:var(--color-accent);}
.section--dark .card__tab{background:var(--color-accent);color:#fff;border-left-color:var(--color-on-dark);}
.section--dark .card__rule{background:var(--color-dark-border);}
.section--dark .card__excerpt{color:var(--color-on-dark-muted);}
.section--dark .card__title a{color:var(--color-on-dark);}
.section--dark .card__title a:hover{color:#fff;}
/* Silo cross-link block — left-aligned label + a row of hairline links. */
.silo{position:relative;margin:var(--space-16) 0;padding:var(--space-12) 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.silo__heading{margin-bottom:var(--space-6);font-size:var(--text-xl);text-align:left;}
.silo__links{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start;}
.silo__links a{background:transparent;border:1px solid var(--color-border);border-radius:0;padding:var(--space-2) var(--space-5);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-text);transition:var(--transition);}
.silo__links a:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-white);text-decoration:none;}

/* 9. FAQ ---------------------------------------------------------------- */
.faq{padding:var(--space-20) 0 var(--space-16);}
.faq__heading{text-align:left;margin-bottom:var(--space-8);font-size:var(--text-2xl);max-width:760px;}
.faq__list{max-width:820px;display:flex;flex-direction:column;gap:0;}
.faq__item{border:0;border-bottom:1px solid var(--color-border);border-radius:0;background:transparent;overflow:hidden;}
.faq__item:first-child{border-top:1px solid var(--color-border);}
.faq__summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;cursor:pointer;list-style:none;transition:color var(--transition);}
.faq__summary::-webkit-details-marker{display:none;}
.faq__summary::marker{content:"";}
.faq__summary:hover .faq-question{color:var(--color-primary);}
.faq-question{font-family:var(--font-display);font-size:var(--text-lg);margin:0;font-weight:var(--fw-bold);letter-spacing:var(--track-display);line-height:1.35;transition:color var(--transition);}
.faq__chevron{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-primary);transition:transform var(--transition),background var(--transition),color var(--transition),border-color var(--transition);}
.faq__chevron svg{width:15px;height:15px;transform:rotate(90deg);}
.faq__item[open] .faq__chevron{transform:rotate(180deg);background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.faq__answer{padding:0 0 var(--space-6);color:var(--color-muted);font-size:var(--text-base);line-height:var(--lh-normal);max-width:68ch;}
.faq__answer p:last-child{margin-bottom:0;}

/* 10. CTA BANNER -------------------------------------------------------- */
/* A graphite plate carrying the broken slot run — left-aligned, on rhythm. */
.cta-banner{position:relative;background-color:var(--color-dark);color:var(--color-on-dark);border:0;border-left:3px solid var(--color-accent);border-radius:var(--radius);box-shadow:none;padding:var(--space-12) var(--space-8);text-align:left;margin:var(--space-16) auto;}
.cta-banner h2{color:#fff;}
.cta-banner p{color:var(--color-on-dark-muted);margin-bottom:var(--space-6);max-width:60ch;}
.cta-banner__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start;}
/* The banner is dark, so its outline button keeps the paper rule (§21.4). */
.cta-banner .btn--on-dark{border-color:var(--color-on-dark);color:var(--color-on-dark);}
.cta-banner .btn--on-dark:hover{background:var(--color-on-dark);border-color:var(--color-on-dark);color:var(--color-dark);}

/* 11. TESTIMONIALS ------------------------------------------------------ */
.testimonials{position:relative;padding:var(--space-20) 0 var(--space-16);background-color:var(--color-surface);}
.testimonials__track{display:grid;gap:var(--space-8);}
/* Quotes as underlined blocks, not boxes. */
.testimonial{background:transparent;border:0;border-bottom:1px solid var(--color-border);border-radius:0;box-shadow:none;padding:0 0 var(--space-6);}
.testimonial__stars{color:var(--color-star);margin-bottom:var(--space-3);display:flex;}
.testimonial__text{font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--lh-snug);letter-spacing:var(--track-display);margin-bottom:var(--space-4);}
.testimonial__author{font-weight:var(--fw-semibold);font-size:var(--text-sm);}
.testimonial__location{color:var(--color-muted);font-size:var(--text-sm);}

/* 12. E-E-A-T ----------------------------------------------------------- */
.author-box{display:flex;flex-wrap:wrap;gap:var(--space-6);background:transparent;border:0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);border-radius:0;box-shadow:none;padding:var(--space-8) 0;margin:var(--space-16) 0;}
.author-box__photo img{width:96px;height:96px;border-radius:50%;object-fit:cover;}
.author-box__body{flex:1;min-width:240px;}
.author-box__eyebrow{display:block;font-family:var(--font);text-transform:uppercase;letter-spacing:var(--track-eyebrow);font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--color-muted);margin-bottom:var(--space-2);}
.author-box__name{font-size:var(--text-xl);margin:var(--space-1) 0;}
.author-box__creds{color:var(--color-primary);font-weight:var(--fw-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2);}
.author-box__social{display:flex;gap:var(--space-3);margin-top:var(--space-3);}
.author-box__social svg{width:1.2em;height:1.2em;}

.fact-check{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-3) 0;}
.fact-check > svg{width:1.1em;height:1.1em;color:var(--color-success);flex:none;}
.fact-check__details{display:inline-flex;align-items:center;}
.fact-check__details summary{cursor:pointer;color:var(--color-primary);list-style:none;display:inline-flex;align-items:center;}
.fact-check__details summary::-webkit-details-marker{display:none;}
.fact-check__details summary::marker{content:"";}
.fact-check__details summary svg{width:1.1em;height:1.1em;}
/* The panel drops OUT of flow so opening it never reflows the byline row. */
.fact-check__panel{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;max-width:min(420px,90vw);background:var(--color-white);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:var(--space-4);z-index:20;}
.fact-check__panel p{margin:0 0 var(--space-2);}
.fact-check__panel p:last-child{margin-bottom:0;}

.projects__grid{display:grid;gap:var(--space-8);grid-template-columns:1fr;}
@media(min-width:640px){.projects__grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.projects__grid{grid-template-columns:repeat(3,1fr);}}
.project-card{border:0;border-bottom:1px solid var(--color-border);border-radius:0;box-shadow:none;overflow:hidden;background:transparent;padding-bottom:var(--space-6);}
.project-card__images{display:grid;grid-template-columns:1fr 1fr;gap:2px;border-radius:var(--radius);overflow:hidden;}
.project-card__images figure{margin:0;position:relative;}
.project-card__images figcaption{position:absolute;bottom:0;left:0;background:rgba(13,23,28,.88);color:var(--color-on-dark);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;padding:2px 8px;}
.project-card__body{padding:var(--space-5) 0 0;}
.project-card__meta{font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--color-muted);margin-bottom:var(--space-2);}

.credentials{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:flex-start;padding:var(--space-8) 0;}
.credential{display:flex;align-items:center;gap:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-3) var(--space-4);background:var(--color-white);}
.credential svg{width:1.3em;height:1.3em;color:var(--color-primary);}
.credential__value{font-weight:var(--fw-semibold);}

.awards{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;justify-content:flex-start;padding:var(--space-8) 0;}
.awards img{max-height:44px;width:auto;filter:grayscale(1);opacity:.7;transition:var(--transition);}
.awards a:hover img,.awards img:hover{filter:grayscale(0);opacity:1;}

.team-grid{display:grid;gap:var(--space-8);grid-template-columns:1fr;}
@media(min-width:640px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.team-grid{grid-template-columns:repeat(3,1fr);}}
.team-card{text-align:left;background:transparent;border:0;border-bottom:1px solid var(--color-border);border-radius:0;box-shadow:none;padding:0 0 var(--space-6);}
.team-card__photo img{width:110px;height:110px;border-radius:50%;object-fit:cover;margin:0 0 var(--space-4);}

.guarantees{display:grid;gap:var(--space-8);grid-template-columns:1fr;}
@media(min-width:640px){.guarantees{grid-template-columns:repeat(3,1fr);}}
.guarantee{text-align:left;padding:var(--space-5) 0 var(--space-5) var(--space-5);border-left:2px solid var(--color-accent);}
.guarantee svg{width:1.8em;height:1.8em;color:var(--color-primary);margin-bottom:var(--space-2);}

.freshness{font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-3) 0;}

/* 13. BREADCRUMBS / PROSE / BLOG --------------------------------------- */
.breadcrumbs{font-size:var(--text-sm);padding:var(--space-4) 0;background:transparent;border-bottom:1px solid var(--color-border);}
.breadcrumbs__list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;color:var(--color-muted);}
.breadcrumbs__item+.breadcrumbs__item::before{content:"/";margin-right:var(--space-2);color:var(--color-border);}
.content-narrow{max-width:760px;margin-left:auto;margin-right:auto;}
.prose-content{max-width:var(--width-content);margin:0 auto;padding:var(--space-16) var(--space-5);font-size:var(--text-lg);line-height:var(--lh-normal);}
.prose-content.content-narrow{max-width:760px;}
.prose-content h2{font-size:var(--text-2xl);margin-top:var(--space-16);}
.prose-content h3{font-size:var(--text-xl);margin-top:var(--space-12);}
.prose-content h2:first-child,.prose-content h3:first-child{margin-top:0;}
.prose-content a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--color-accent);}
.prose-content img{border-radius:var(--radius);margin:var(--space-8) 0;}
.post-thumb img{border-radius:var(--radius);margin-bottom:var(--space-6);}
.entry-meta{color:var(--color-muted);font-size:var(--text-sm);margin-bottom:var(--space-6);}
.post-list{display:grid;gap:var(--space-8);}
.pagination{margin-top:var(--space-16);}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-start;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-weight:var(--fw-medium);color:var(--color-text);transition:var(--transition);}
.pagination .page-numbers.current{background:var(--color-primary);color:var(--color-on-dark);border-color:var(--color-primary);}
.pagination a.page-numbers:hover{background:var(--color-surface);color:var(--color-primary-hover);text-decoration:none;}

/* Read More (collapsible) — JS-gated so no-JS shows everything. */
.readmore__btn{display:none;margin-top:var(--space-6);}
.readmore--center{text-align:center;}
.readmore--right{text-align:right;}
.readmore__visible,.readmore__hidden,.readmore__inner{text-align:left;}
.js .readmore.is-ready .readmore__btn{display:inline-flex;}
.js .readmore--block.is-ready .readmore__btn{display:flex;width:100%;}
.js .readmore.is-collapsed .readmore__hidden{display:none;}
.readmore--height{position:relative;}
.js .readmore--height.is-collapsed .readmore__inner{max-height:var(--readmore-h,480px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);}
@media(prefers-reduced-motion:no-preference){
	.js .readmore--height .readmore__inner{transition:max-height var(--transition);}
}

/* 14. FOOTER ------------------------------------------------------------ */
/* Deepest-graphite floor, opened by a verdigris rule. */
.site-footer{position:relative;background-color:var(--color-dark-2);color:var(--color-on-dark-muted);padding:var(--space-20) 0 var(--space-12);margin-top:var(--space-20);border-top:3px solid var(--color-accent);}
.site-footer a{color:var(--color-on-dark);}
.site-footer a:hover{color:#fff;}
.footer-grid{display:grid;gap:var(--space-8);grid-template-columns:1fr;}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr;}}
.footer-widget__title,.site-footer h3{color:#fff;font-family:var(--font);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-eyebrow);font-weight:var(--fw-semibold);margin-bottom:var(--space-4);}
.footer-tagline{color:var(--color-on-dark);font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:var(--track-display);}
.site-footer p{margin-bottom:var(--space-2);color:var(--color-on-dark-muted);}
.footer-menu,.site-footer ul{list-style:none;padding:0;margin:0;}
.footer-menu li{margin-bottom:var(--space-2);}
.footer-menu a:hover{color:#fff;text-decoration:underline;}
.footer-license{font-size:var(--text-sm);color:var(--color-on-dark-muted)!important;}
.footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-4);}
.footer-social a{width:38px;height:38px;align-items:center;justify-content:center;border-radius:var(--radius-full);border:1px solid var(--color-dark-border);transition:var(--transition);}
.footer-social a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.footer-social a{display:inline-flex;}
.footer-social svg{width:1.2em;height:1.2em;}
.footer-bottom{border-top:1px solid var(--color-dark-border);margin-top:var(--space-12);padding-top:var(--space-6);font-size:var(--text-sm);text-align:left;}

/* Mobile sticky conversion bar — graphite base, verdigris Text action, white ink. */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--color-dark);border-top:1px solid var(--color-dark-border);}
.sticky-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);color:var(--color-on-dark);font-weight:var(--fw-semibold);}
.sticky-bar a+a{border-left:1px solid var(--color-dark-border);}
.sticky-bar a:last-child{background:var(--color-accent);color:#FFFFFF;}
.sticky-bar svg{width:1.2em;height:1.2em;}
@media(min-width:960px){.sticky-bar{display:none;}}
body.has-sticky-bar{padding-bottom:64px;}
@media(min-width:960px){body.has-sticky-bar{padding-bottom:0;}}

/* 15. UTILITIES / A11Y / MOTION ---------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--color-primary);padding:var(--space-3);z-index:1000;}
.skip-link:focus{left:var(--space-3);}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;}
.text-center{text-align:center;}
/* margin-rail section heads: left-aligned, held to the body measure, with a
   short verdigris rule above. Inside a .section--railed container the head
   sits in the RIGHT (content) column and the .rail occupies the left one; the
   rail is what carries the checking, so the head itself stays plain. */
.section-head{text-align:left;max-width:66ch;margin:0 0 var(--space-12);}
.section-head h1,.section-head h2{font-size:var(--text-2xl);margin-bottom:var(--space-4);}
h2.section-head{font-size:var(--text-2xl);margin:0 0 var(--space-8);max-width:66ch;}
.section-head>h2::before,.section-head>h1::before,h2.section-head::before{content:"";display:block;width:44px;height:2px;background:var(--color-accent);margin:0 0 var(--space-5);}
.section--dark .section-head>h2::before,.section--dark .section-head>h1::before{background:var(--color-accent);}
.section-head p{color:var(--color-muted);font-size:var(--text-lg);line-height:var(--lh-snug);margin:0;max-width:62ch;}
.section--dark .section-head p{color:var(--color-on-dark-muted);}
/* In a railed container the head spans the content column only. */
@media(min-width:1024px){.section--railed > .container > .section-head{grid-column:2;}}

/* Scroll reveal — only with JS + motion allowed. */
.js .reveal{opacity:0;transform:translateY(16px);}
@media(prefers-reduced-motion:no-preference){
	.js .reveal{transition:opacity .5s ease,transform .5s ease;}
	.js .reveal.is-visible{opacity:1;transform:none;}
}
@media(prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	.js .reveal{opacity:1;transform:none;}
	*{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
.no-js .reveal{opacity:1;transform:none;}

/* 16. QUOTE WIZARD (3-step lead form) ----------------------------------- */
.request-form__head{text-align:left;margin-bottom:var(--space-6);}
.request-form__title{font-size:var(--text-xl);margin-bottom:var(--space-2);}
.request-form__sub{color:var(--color-muted);margin:0;}

.request-steps{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2);margin:0 0 var(--space-8);padding:0;}
.request-steps__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);position:relative;color:var(--color-muted);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;font-weight:var(--fw-semibold);text-align:center;}
.request-steps__item:not(:first-child)::before{content:"";position:absolute;top:17px;right:50%;left:-50%;height:1px;background:var(--color-border);z-index:0;}
.request-steps__item.is-active::before,.request-steps__item.is-done::before{background:var(--color-primary);}
.request-steps__num{position:relative;z-index:1;width:34px;height:34px;border-radius:var(--radius-full);background:var(--color-white);border:1px solid var(--color-border);color:var(--color-muted);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-family:var(--font-display);}
.request-steps__item.is-active .request-steps__num,.request-steps__item.is-done .request-steps__num{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.request-steps__item.is-active{color:var(--color-text);}
.request-steps__label{line-height:1.3;letter-spacing:var(--track-eyebrow);}
.request-form.is-enhanced .request-steps__item.is-done{cursor:pointer;}
@media(max-width:479px){.request-steps__label{display:none;}}

.request-step+.request-step{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-border);}
.request-form.is-enhanced .request-step{display:none;margin-top:0;padding-top:0;border-top:0;}
.request-form.is-enhanced .request-step.is-active{display:block;}
.request-step__heading{font-size:var(--text-lg);margin:var(--space-6) 0 var(--space-4);}
.request-step__heading:first-child{margin-top:0;}

.request-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4) var(--space-5);}
@media(min-width:560px){.request-grid{grid-template-columns:1fr 1fr;}}
.request-grid .field{margin-bottom:0;}
.field--full{grid-column:1 / -1;}

.request-nav{display:flex;gap:var(--space-3);margin-top:var(--space-8);align-items:center;justify-content:space-between;flex-wrap:wrap;}
.request-nav--end{justify-content:flex-end;}
.request-nav__btn{display:none;}
.request-form.is-enhanced .request-nav__btn{display:inline-flex;}
.request-submit{margin-left:auto;}

/* Service option cards (Step 2) — hairline plates that gain a verdigris rule
   when picked; the media slot is a flat tinted plate, never an empty box. */
.service-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);}
@media(min-width:560px){.service-grid{grid-template-columns:1fr 1fr;}}
.service-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--color-white);transition:border-color var(--transition),box-shadow var(--transition);}
.service-card:hover{border-color:var(--color-primary);}
.service-card__input{position:absolute;opacity:0;width:1px;height:1px;}
.service-card__media{position:relative;aspect-ratio:16/7;background-color:var(--color-surface);display:flex;align-items:center;justify-content:center;color:rgba(var(--color-primary-rgb),.35);}
.service-card__media img{width:100%;height:100%;object-fit:cover;}
.service-card__tick{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:var(--radius-full);background:var(--color-accent);color:#fff;display:none;align-items:center;justify-content:center;}
.service-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1;}
.service-card__title{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:var(--track-display);font-size:var(--text-lg);}
.service-card__blurb{color:var(--color-muted);font-size:var(--text-sm);}
.service-card__chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-1) 0;}
.chip{font-size:var(--text-xs);font-weight:var(--fw-medium);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:3px 10px;color:var(--color-muted);}
.service-card__price{margin-top:auto;padding-top:var(--space-2);font-weight:var(--fw-semibold);font-size:var(--text-sm);color:var(--color-muted);}
.service-card.is-selected{border-color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent);}
.service-card.is-selected .service-card__tick{display:inline-flex;}
.service-card__input:focus-visible+.service-card__media{outline:3px solid var(--color-accent);outline-offset:-3px;}

/* Extras list (Step 3) */
.extras-list{display:flex;flex-direction:column;gap:var(--space-3);}
.extra-card{position:relative;display:flex;align-items:center;gap:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-4) var(--space-5);cursor:pointer;background:var(--color-white);transition:border-color var(--transition),box-shadow var(--transition);}
.extra-card:hover{border-color:var(--color-primary);}
.extra-card__input{position:absolute;opacity:0;width:1px;height:1px;}
.extra-card__check{flex:none;width:24px;height:24px;border-radius:var(--radius-sm);border:1px solid var(--color-border);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:var(--transition);}
.extra-card__check svg{opacity:0;}
.extra-card__body{display:flex;flex-direction:column;}
.extra-card__title{font-weight:var(--fw-medium);}
.extra-card__price{color:var(--color-muted);font-size:var(--text-sm);}
.extra-card.is-selected{border-color:var(--color-accent);}
.extra-card.is-selected .extra-card__check{background:var(--color-accent);border-color:var(--color-accent);}
.extra-card.is-selected .extra-card__check svg{opacity:1;}
.extra-card__input:focus-visible+.extra-card__check{outline:3px solid var(--color-accent);outline-offset:2px;}

/* =========================================================================
 * 17. Per-city DIRECTORY (off by default in this lead-gen build) +
 *     FEATURED #1 hero badge. Kept + self-hiding; underline-family retint.
 * ====================================================================== */
.directory{position:relative;padding:var(--space-16) 0 var(--space-12);background-color:var(--color-surface);}
.directory__heading{text-align:left;margin-bottom:var(--space-8);font-size:var(--text-2xl);font-weight:var(--fw-bold);}
.directory__heading::before{content:"";display:block;width:44px;height:2px;background:var(--color-accent);margin:0 0 var(--space-5);}
.directory__list{display:grid;gap:var(--space-8);grid-template-columns:1fr;}
@media(min-width:680px){.directory__list{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.directory__list{grid-template-columns:repeat(3,1fr);}}

.directory__card{position:relative;display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:none;padding:var(--space-6);transition:border-color var(--transition);}
.directory__card:hover{border-color:var(--color-primary);}
.directory__card--featured{border-color:var(--color-accent);}
.directory__card--featured::after{content:"\2605";position:absolute;top:var(--space-4);right:var(--space-5);color:var(--color-accent);font-size:var(--text-lg);line-height:1;}

.directory__rank{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-base);}
.directory__card--featured .directory__rank{background:var(--color-accent);color:#FFFFFF;}
.directory__name{font-size:var(--text-lg);font-weight:var(--fw-bold);margin:0;color:var(--color-text);}

.directory__rating{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--color-text);}
.directory__star{display:inline-flex;align-items:center;justify-content:center;color:var(--color-star);}
.directory__star svg{width:1em;height:1em;}
.directory__rating-count{color:var(--color-muted);font-weight:var(--fw-normal);}

.directory__desc{margin:0;color:var(--color-muted);font-size:var(--text-sm);line-height:var(--lh-normal);}
.directory__meta{display:flex;align-items:flex-start;gap:var(--space-2);margin:0;color:var(--color-muted);font-size:var(--text-sm);}
.directory__icon{display:inline-flex;flex:none;color:var(--color-primary);margin-top:2px;}
.directory__icon svg{width:1em;height:1em;}

.directory__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto;padding-top:var(--space-3);}
.directory__action{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--fw-semibold);border:1px solid var(--color-border);background:var(--color-white);color:var(--color-primary);transition:var(--transition);}
.directory__action svg{width:1em;height:1em;}
.directory__action:hover{text-decoration:none;border-color:var(--color-primary);background:var(--color-surface);color:var(--color-primary-hover);}
/* Call action — verdigris fill, WHITE ink (6.07:1, §21.4). */
.directory__action--call{background:var(--color-accent);border-color:var(--color-accent);color:#FFFFFF;}
.directory__action--call:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#FFFFFF;}

.hero__featured-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-accent);color:#FFFFFF;font-family:var(--font);font-weight:var(--fw-semibold);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);margin-bottom:var(--space-4);}
.hero__featured-badge svg{width:1.1em;height:1.1em;}

.hero__featured-tagline{display:block;margin:calc(-1 * var(--space-4)) 0 var(--space-5);color:var(--color-on-dark);font-size:var(--text-lg);font-weight:var(--fw-medium);max-width:48ch;}

/* =========================================================================
 * CONVERSION PACK — promo bar, area checker, video facade, map embed
 * ====================================================================== */
.promo-bar{display:block;background:var(--color-accent);color:#FFFFFF;text-align:center;font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:0;}
.promo-bar__inner{display:block;padding:var(--space-2) var(--space-5);}
a.promo-bar{text-decoration:none;}
a.promo-bar:hover{background:var(--color-accent-hover);color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;}
.promo-bar--dark{background:var(--color-dark);color:var(--color-on-dark);border-bottom:1px solid var(--color-dark-border);}
a.promo-bar--dark:hover{background:var(--color-dark-2);color:#fff;}

/* Areas we cover — chips + area checker. */
.local-areas{padding:var(--space-12) 0;}
.local-areas__heading{text-align:left;margin-bottom:var(--space-6);font-size:var(--text-xl);}
.local-areas__heading::before{content:"";display:block;width:44px;height:2px;background:var(--color-accent);margin:0 0 var(--space-4);}
.area-chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);justify-content:flex-start;margin:0 0 var(--space-8);padding:0;}
.area-chips li{background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-text);}
.area-check{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start;align-items:stretch;max-width:560px;margin:0;}
.area-check__label{flex:1;min-width:220px;display:block;}
.area-check input[type="search"]{width:100%;height:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-base);font-family:inherit;background:#fff;color:var(--color-text);transition:border-color var(--transition),box-shadow var(--transition);}
.area-check input[type="search"]:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.18);}
.area-check__result{max-width:560px;margin:var(--space-6) 0 0;padding:var(--space-5) var(--space-6);border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-white);text-align:left;}
.area-check__result.is-yes{border-color:var(--color-success);background:rgba(31,107,74,.06);}
.area-check__msg{font-weight:var(--fw-semibold);margin:0 0 var(--space-3);color:var(--color-text);}
.area-check__result.is-yes .area-check__msg{color:var(--color-success);}

/* Video facade — click-to-load privacy embed. */
.video-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-12) var(--space-4);border-radius:var(--radius);background-color:var(--color-dark);border:1px solid var(--color-dark-border);color:var(--color-on-dark);font-weight:var(--fw-medium);font-size:var(--text-sm);text-decoration:none;transition:box-shadow var(--transition);}
.video-facade:hover{color:#fff;text-decoration:none;box-shadow:var(--shadow-md);}
.video-facade__play{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:var(--radius-full);background:var(--color-accent);color:#FFFFFF;font-size:var(--text-xl);}
.video-facade__play svg{margin-left:2px;}
.video-embed{margin-top:var(--space-4);}
.video-embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);}

/* Map embed. */
.map-embed{padding:var(--space-12) 0;}
.map-embed iframe,.pdc-map iframe{display:block;width:100%;min-height:320px;border:1px solid var(--color-border);border-radius:var(--radius);}

/* Tool page (page-tool.php) — quiet chrome for linkable assets. */
.tool-header{border-bottom:1px solid var(--color-border, #D2CABB);padding:var(--space-4, 1rem) 0;background:var(--color-surface, #EFEAE2);}
.tool-header__inner{display:flex;align-items:center;justify-content:center;}
.tool-header .custom-logo-link img{max-height:36px;width:auto;}
.tool-header__title{margin:0;font-size:var(--text-base, 1.0625rem);font-weight:700;}
.tool-header__title a{color:var(--color-text);text-decoration:none;}
.tool-page__inner{max-width:var(--width-content, 720px);padding-top:var(--space-8, 2rem);padding-bottom:var(--space-12, 3rem);}
.tool-page__title{font-size:var(--text-2xl, 2.125rem);margin:0 0 var(--space-6, 1.5rem);}
.tool-footer{border-top:1px solid var(--color-border, #D2CABB);padding:var(--space-6, 1.5rem) 0;margin-top:var(--space-8, 2rem);}
.tool-footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-4, 1rem);justify-content:center;font-size:var(--text-sm, .875rem);color:var(--color-muted, #5B6468);}
.tool-footer__inner p{margin:0;}
.tool-footer__inner a{color:inherit;}

/* 18. AFFILIATE LAYER ---------------------------------------------------- */
/* Distinct class hooks by design: .affiliate-link* is the BUTTON, .affiliate-cta*
   would be a band — sharing one name paints a band background behind every
   nested button (§21.20, a bug this lineage has already shipped once). */
.affiliate-link::after,.affiliate-link--fallback::after{content:"";}
.affiliate-link[target="_blank"]::after{content:"\2197";margin-left:.4em;font-size:.85em;line-height:1;}
.affiliate-disclosure{margin:0;font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-muted);max-width:78ch;}
.footer-disclosure{padding:var(--space-6) 0 0;margin-top:var(--space-8);border-top:1px solid var(--color-dark-border);}
.footer-disclosure .affiliate-disclosure{color:var(--color-on-dark-muted);}