/* v3 shell for the r1 pages (header, footer, type and colour tokens).
   Loaded LAST in <head>, after r1-system.css and every inline <style>, so a rule here wins any tie of equal
   specificity by source order. Selectors below copy the specificity of the r1 rule they replace; where an r1 rule
   sits inside a media query, the base rule here still wins (same specificity, later source), so only the media
   variants this sheet wants are re-added. Reference: homepage v3 (style-v3.css). The drawer breakpoint stays at
   920px / 57.5em because the r1 nav script switches dropdown behaviour on that query. */

/* ---------- a0. metric-matched fallback ----------
   r1 pages load the Archivo stylesheet async, so first paint uses the fallback and Archivo swaps in ~1s later.
   Local Arial, resized to Archivo's measured advance widths (Chromium, mixed EN/ES sample, 2026-11-09), keeps
   line breaks in place across the swap. Overrides = Archivo ascent .88 / descent .21, divided by size-adjust. */
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT");font-weight:100 599;font-stretch:50% 102%;
  size-adjust:99.5%;ascent-override:88.4%;descent-override:21.1%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 900;font-stretch:50% 102%;
  size-adjust:97.5%;ascent-override:90.3%;descent-override:21.5%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT");font-weight:100 599;font-stretch:103% 125%;
  size-adjust:110.5%;ascent-override:79.6%;descent-override:19%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 900;font-stretch:103% 125%;
  size-adjust:109.6%;ascent-override:80.3%;descent-override:19.2%;line-gap-override:0%}

/* ---------- a. tokens ---------- */
:root{
  --f-display:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-body:var(--f-display);--f-mono:var(--f-display);--f-head:var(--f-display);
  --g:clamp(20px,4.4vw,64px);--wrap:calc(1280px + 2*var(--g));--pad-x:var(--g);
  --near-black:#1b1c1e;--ink:#232426;--char:#2a2b2e;--warm-dark:#232426;
  --warm:#232426;--warm-2:#2a2b2e;--warm-line:rgba(255,255,255,.2);
  --gun:#232426;--gun-2:#2a2b2e;--gun-line:rgba(255,255,255,.2);
  --bone:#e3e5e5;--cream:#f3f4f5;--stone:#c9cdd0;--line:rgba(35,36,38,.18);--muted:#5b6064;--orange-deep:#a5340f;
  --dark-line:rgba(255,255,255,.12);--dark-line-soft:rgba(255,255,255,.12);--dark-line-hi:rgba(255,255,255,.3);
  --hair-on-dark:rgba(255,255,255,.2);
  --scrim-panel:rgba(35,36,38,.92);--ring-focus:0 0 0 3px var(--orange);
  --sh-ink:none;--sh-ink-sm:none;--sh-ink-lg:none;--sh-orange:none;--sh-orange-lg:none;--sh-black:none;--sh-black-sm:none;
  --lift:none;--lift-sm:none;
  --ls-display:-.018em;--ls-head:-.012em;--ls-tight:-.01em;
  --ls-nav:.01em;--ls-cap:.01em;--ls-mono:.01em;--ls-wide:.01em;--ls-eyebrow:.01em;--ls-hero:.01em;--ls-btn:0;
  --fs-nano:.75rem;--fs-micro:.78125rem;--fs-eyebrow:.8125rem;--fs-label:.875rem;--fs-small:.9375rem;
  /* Archivo at 110% width sets ~35% wider than Oswald; r1 page titles are long, so the H1 scale steps down */
  --fs-h1:clamp(1.9rem,1.1rem + 4vw,4.25rem);
  --hdr-h:74px
}

/* ---------- b. display type ---------- */
:where(h1,h2,h3,h4,.display,.hero h1,.section-head h2,.formcard h2,.plate__title,.plate__price,.stat__num,
  .feat__aside h3,.svc__name,.srow__name,.svc-cta__txt,.diff h2.mega,.diff__line,.certs__head h3,.cert__name,
  .proj-note__big,.step__num,.step__title,.rating__num,.final h2,.hd-stat,.r1-faq__q){font-stretch:110%;text-wrap:balance}
.hero__eyebrow,.stat__label,.formcard__fine{letter-spacing:.01em}
/* service + city heroes (86 of 87 pages). r1 sized these for condensed caps; their titles run 40-70 characters,
   so they take a calmer scale than the homepage's short showpiece H1, and normal width on phones as v3 does.
   Same specificity as r1's section.r1-head .display (0,1,2); :lang(es) .display keeps its 1.15 line-height. */
section.r1-head .display{font-size:clamp(2.15rem,1.1rem + 3.4vw,4rem);line-height:1.04}
/* r1 headings run long; on phones they take normal width (fewer breaks after a hyphen, e.g. "R-" / "value") */
@media (max-width:900px){section.r1-head .display,h2,h3,.step__title{font-stretch:100%}}
/* step titles are short labels; balancing them splits "flat-rate" across lines */
.step__title{text-wrap:wrap}
/* stat values: r1 sized these tiles for condensed Oswald, and many are words ("Same-day") */
.stat__num{font-stretch:87.5%}
.stat__num--long{font-stretch:75%}
@media (max-width:520px){.stat__num{font-stretch:75%}}
/* section heads: r1's 56ch cap was set for condensed type and now wraps short H2s ("Frequently asked questions") */
.section-head{max-width:min(100%,46rem)}

/* ---------- c. sentence case everywhere (v3 sets no capitals) ----------
   The ID-in-:not() gives (1,0,0), above every r1 text-transform source (none uses an ID, !important or a
   style attribute). The one pseudo-element source is matched separately. */
:not(#v3-shell-x){text-transform:none}
.field input[type=file]::file-selector-button{text-transform:none}
/* exception: the "Also from DeHart" card labels are typed in capitals in the markup, so the grid keeps one case
   until that copy is rewritten */
.lg-card__label:not(#v3-shell-x),.lg-card__more:not(#v3-shell-x){text-transform:uppercase}

/* ---------- d. header ---------- */
.nav{background:var(--orange);border-bottom:0;top:-32px;box-shadow:0 1px 0 rgba(27,28,30,.22)}
.nav__util{background:var(--orange-deep);border-bottom:0}
.nav__util-in{max-width:var(--wrap);height:32px;padding:6px var(--g);column-gap:30px;row-gap:0;flex-wrap:nowrap;overflow:hidden;line-height:20px}
.nav .nav__util .util__item{font-size:12.5px;font-weight:500;letter-spacing:.01em}
.nav__in{min-height:74px;padding-top:0;padding-bottom:0;column-gap:28px}
.brand{padding:0}
.nav .brand__logo{height:46px;width:auto;max-width:none}
.nav__links{gap:24px}
.nav__links a{color:#fff;font-size:15px;font-weight:620;letter-spacing:0;padding-block:8px}
.nav__phone-v{font-weight:800;font-stretch:114%;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.nav__toggle{width:46px;height:46px;border:2px solid #fff}
.nav__toggle span{width:20px;height:2px;background:#fff}

@media (min-width:921px) and (min-width:57.5625em){
  .nav__links{justify-self:end}
  .nav__dd-menu{background:var(--ink);border:0;box-shadow:0 18px 40px rgba(0,0,0,.25);padding:12px 0}
  .nav__links .nav__dd-menu a{font-size:15px;font-weight:500;letter-spacing:0;color:#fff;padding:7px 20px}
  .nav__links .nav__dd-all a{border-top:1px solid rgba(255,255,255,.2);margin-top:8px;padding-top:10px}
}
/* the full-size row needs ~1180px; tighten below that rather than move the drawer breakpoint */
@media (min-width:921px) and (max-width:1199.98px){
  .nav__in{column-gap:18px}
  .nav__links{gap:16px}
  .nav__links a{font-size:14px}
  .nav__phone-v{font-size:17px}
  .nav .brand__logo{height:40px}
}
@media (min-width:921px) and (max-width:1023.98px){
  .nav__in{column-gap:14px}
  .nav__links{gap:12px}
  .nav__links a{font-size:13.5px}
  .nav__phone-v{font-size:16px}
  .nav .brand__logo{height:36px}
}

@media (max-width:920px),(max-width:57.5em){
  .nav__in{grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px}
  .brand{grid-column:1;grid-row:1;justify-self:start}
  .nav__phone{grid-column:2;grid-row:1;justify-self:end}
  .nav__toggle{grid-column:3;grid-row:1;justify-self:end}
  .nav__links{background:var(--ink);padding:8px var(--g) 20px;border-bottom:0}
  .nav__links a{padding-block:12px;border-bottom:1px solid rgba(255,255,255,.2)}
  .nav__links .nav__dd-btn{padding-block:12px;border-bottom:1px solid rgba(255,255,255,.2);
    font-size:15px;font-weight:620;letter-spacing:0}
  .nav__links .nav__dd-menu a{font-size:15px;font-weight:500;letter-spacing:0;color:#fff;padding:10px 0}
  .nav__links .nav__dd-all a{border-top:0}
  .nav__links > a.nav__est{border:0;margin-top:14px;min-height:54px;align-items:center;padding:0 28px}
}
@media (max-width:520px){
  :root{--hdr-h:64px}
  .nav__util-in{column-gap:14px}
  .nav .nav__util .util__item{font-size:11.5px}
  .nav__in{min-height:64px;column-gap:14px}
  .nav .brand__logo{height:38px}
  .nav__phone-v{font-size:16px}
}
/* r1 hides the utility bar on short landscape screens; nothing scrolls away, so the bar sticks at 0 */
@media (max-height:500px) and (orientation:landscape){
  :root{--hdr-h:56px}
  .nav{top:0}
  .nav__in{min-height:56px}
  .nav .brand__logo{height:34px}
}

/* ---------- e. footer ---------- */
.foot{background:#1b1c1e;color:#c9cdd0;font-size:15px;padding:72px 0 0}
.foot__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.foot__logo{height:56px;margin-bottom:0}
.foot__brandline{margin-top:16px;font-size:15px;color:#c9cdd0;line-height:1.6}
.foot h4{font-weight:760;font-stretch:104%;font-size:15px;letter-spacing:0;color:#fff;border-top:0;padding-top:0;margin-bottom:12px}
.foot ul li{margin:5px 0}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__nap{font-size:15px;line-height:1.7;color:#c9cdd0}
.foot__nap b{color:#fff}
.foot__bar{width:calc(100% - 2*var(--g));max-width:1280px;margin:56px auto 0;padding:20px 0 28px;border-top:1px solid rgba(255,255,255,.2);gap:8px 24px}
.foot__bar span{font-size:13px;font-weight:400;letter-spacing:0}
.foot__bar span.foot__lic{background:none;color:inherit;padding:0}
@media (max-width:900px){
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__grid > :first-child{grid-column:1 / -1}
}
@media (max-width:520px){
  .foot__grid{grid-template-columns:minmax(0,1fr)}
}
/* touch layouts: taller footer link rows (phone, address and page links) */
@media (max-width:920px){.foot ul a{display:inline-block;padding-block:6px}}

/* ---------- f. buttons ---------- */
.btn{font-weight:720;font-stretch:108%;font-size:1rem;letter-spacing:0;border-width:2px}

/* ---------- g. list columns ----------
   The wider page (1280px wrap) pushes r1's sidebar and plate lists past their 2-column thresholds at desktop.
   These restore the 1-column lists measured on the live pages (aside plate 303px, prose plate 498px) and keep
   2 columns where the live pages already had them (aside link lists, plates 609px and wider). */
@media (min-width:921px){
  .r1-aside .plate ul:not(.plate__links){columns:1}
  .r1-prose .plate ul:not([class]),.plate > ul:not([class]){columns:17.5rem 2}
}

/* ---------- h. accent discipline ----------
   Orange stays on actions: the nav bar, buttons, the closing estimate band, hover and keyboard focus.
   Body links, bullets, label chips, section rules and the stat strip go to ink, grey or white.
   Each override repeats the original selector, so it reaches the same elements at the same specificity
   and wins on source order (this sheet loads last). Dark-band variants of those rules stay higher and keep winning. */
:root{--caption:#45494d}

/* h1. Heading order: the H1 outranks every H2 at every width, at the homepage's weight and tracking
   (tighter tracking keeps the heavier weight from adding lines). */
section.r1-head .display,section.hero h1{font-weight:820;letter-spacing:-.03em}
@media (min-width:901px){section.r1-head .display,section.hero h1{letter-spacing:-.034em}}
.final h2{font-size:clamp(1.875rem,1.2rem + 2.8vw,3.25rem)}

/* h2. Links: ink with an underline; orange only on hover. Keyboard focus keeps the global orange ring. */
.r1-prose a:not([class]),.r1-note a,.r1-faq__a a,.formcard__fine a,.fin-chip a,
:is(.band-dark,.band-gun,.band-warm,.band-warm-2) .r1-prose :is(.rev,.r1-note,.formcard,.plate) a,
:is(.band-dark,.band-gun,.band-warm,.band-warm-2) .r1-prose :is(.rev,.r1-note,.formcard,.plate) a:not([class])
  {color:var(--ink);text-decoration-color:currentColor}
.r1-prose a:not([class]):hover,.r1-note a:hover,.r1-faq__a a:hover,.formcard__fine a:hover,.fin-chip a:hover,
:is(.band-dark,.band-gun,.band-warm,.band-warm-2) .r1-prose :is(.rev,.r1-note,.formcard,.plate) a:not([class]):hover
  {color:var(--orange-deep);background:none;text-decoration-thickness:2px}
section.r1-head .lead a{color:var(--ink);text-decoration-color:currentColor}
section.r1-head .lead a:hover{color:var(--orange-deep);text-decoration-thickness:2px}
.lg-card__more{color:var(--ink)}
.r1-toc a,.rev-all a,.foot__nap a{text-decoration-color:currentColor}
.r1-faq__item[open] .r1-faq__q{color:var(--ink)}
/* Spanish pages carry their own light-band link rule; :where() scopes it without adding specificity. */
:where(:lang(es)) :is(.band-cream,.band-bone) :is(.r1-prose,.plate,p,.lead) a:not(.btn)
  {color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:currentColor}
:where(:lang(es)) :is(.band-cream,.band-bone) :is(.r1-prose,.plate,p,.lead) a:not(.btn):is(:hover,:focus-visible)
  {color:var(--orange-deep);text-decoration-thickness:2px}
:where(:lang(es)) :is(.band-warm,.band-warm-2) .lead a{text-decoration:underline;text-underline-offset:2px}
.rev__who a,.foot__bar a{text-decoration:underline;text-underline-offset:2px}

/* h3. Bullets and markers: neutral. */
.r1-prose li:not([class])::before,
:is(.band-dark,.band-gun,.band-warm,.band-warm-2) .r1-prose :is(.rev,.r1-note,.formcard,.plate) li:not([class])::before,
.r1-hood::before{background:var(--muted)}
.r1-crumb li + li::before,nav .r1-crumb li:not(:last-child)::after{color:var(--muted)}
.r1-faq__q::after{color:var(--ink)}
.r1-prose .r1-city--hq::after,.r1-prose .r1-city.r1-city--hq::after{background:none;color:var(--on-color-2);padding:0}

/* h4. Label chips become plain text. The Tier tab sits in the flow, so it no longer covers the plan title. */
.r1-head .eyebrow{background:none;color:var(--muted);padding:0}
.section-head .eyebrow,.formcard__kicker{color:var(--muted)}
.band-dark .section-head .eyebrow,.band-warm .section-head .eyebrow,.band-warm-2 .section-head .eyebrow,
.band-gun .section-head .eyebrow,.band-gun-2 .section-head .eyebrow,.certs__head .eyebrow,.feat__aside .eyebrow,.hero__eyebrow
  {background:none;color:var(--on-color-2);padding:0}
.step__code{background:none;color:var(--on-color-2);padding:0}
.plate__tab{position:static;display:block;width:fit-content;background:none;color:var(--muted);padding:0;margin:0 0 var(--s2)}
.plate:has(> .plate__tab,> .r1-prose > .plate__tab){padding-top:var(--s5)}
/* The page-local rule that keeps tab labels white on dark bands is (0,3,0); match it so the plain label stays muted on the card. */
:is(.band-dark,.band-gun,.band-warm,.band-warm-2) :is(.plate,.lg-card) .plate__tab{color:var(--muted)}

/* h5. Rules: hairlines in place of the orange bars. Width and colour only where the original used the
   shorthand, so the border-top:0 resets elsewhere still win. */
.band + .band,.band-orange.strip + .band{border-top:1px solid var(--line)}
.band + .band.band-orange{border-top-color:transparent}
:is(.band-dark,.band-gun,.band-warm,.band-warm-2) + :is(.band-dark,.band-gun,.band-warm,.band-warm-2){border-top-color:var(--dark-line)}
.r1-prose h2{border-top-width:1px;border-top-color:var(--line)}
:is(.band-dark,.band-gun,.band-warm,.band-warm-2) .r1-prose h2{border-top-color:var(--dark-line)}
.step{border-top-color:var(--dark-line-hi)}
:is(.band-cream,.band-bone) .step{border-top-color:var(--line)}
.rev{border-top-color:var(--ink)}
.r1-note,.r1-prose > aside:not([class]){border-left-color:var(--ink)}
.r1-prose blockquote{border-left-color:var(--stone)}

/* h6. Stat strip under the hero: light ground, ink figures, one size and one width for every figure. */
.band-orange.strip{background:var(--cream);color:var(--ink)}
.band-orange.strip .strip__grid{background:var(--line);border-color:var(--line)}
.strip .stat{background:var(--paper)}
.strip .stat__num,.strip .stat__num .star{color:var(--ink)}
.strip .stat__label{color:var(--muted)}
/* Every figure takes the size and width the long figures already had, so nothing grows or wraps more than before. */
.strip .stat__num{font-size:clamp(1.25rem,1.9vw + .6rem,2.1rem);font-stretch:75%;line-height:1.05}
@media (max-width:820px){.strip .stat__num{font-size:clamp(1.05rem,2.6vw,1.6rem)}}

/* h7. Smaller fixes: no offset shadow on the closing button, a 24px footer-link target, 14px captions and consent text. */
.band-orange .btn--ink,.band-orange .btn--ink:hover{box-shadow:none}
.foot__bar a{display:inline-block;min-height:24px;line-height:24px}
:root :is(figure > figcaption,.r1-prose figcaption){font-size:.875rem}
.r1-prose figcaption,
:is(.band-dark,.band-gun,.band-warm,.band-warm-2) .r1-prose :is(.rev,.r1-note,.formcard,.plate) figcaption{color:var(--caption)}
/* Consent lines only (they link the privacy policy); the other fine-print lines keep their size and colour. */
.formcard__fine:has(a[href*="privacy"]){font-size:.875rem;color:var(--caption)}
.rev__who{font-size:.875rem;color:var(--caption)}