/*
Theme Name: Restored
Theme URI: https://restoredaz.com
Author: Magnet Marketing SEO
Description: Custom theme for Restored Remodeling, LLC. Built to STYLE-GUIDE.md.
Version: 1.1.0
License: GPL-2.0-or-later
Text Domain: restored
*/

:root{
  --ink:#151515; --ink-2:#1E1E1E;
  --signal:#C22828; --signal-hi:#E03535;
  --paper:#FFFFFF; --paper-2:#F5F4F2;
  --muted:#6B6B6B; --muted-d:#A8A8A8;
  --line:#E3E1DE; --line-d:#2E2E2E;
  --wrap:1200px; --gutter:20px;
  --pad:clamp(4rem,9vw,7rem);
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}

:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:2px}
.on-dark :where(a,button):focus-visible{outline-color:#fff}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sect{padding-block:var(--pad)}
.sect--dark{background:var(--ink);color:#fff}
.sect--alt{background:var(--paper-2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;z-index:99;background:#fff;color:var(--ink);padding:10px 16px;border-radius:4px}

.eyebrow{font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--signal);margin:0 0 .9rem}
.sect--dark .eyebrow{color:#FF6B6B}
h1{font-weight:800;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.98;letter-spacing:-.02em;text-transform:uppercase}
h2{font-weight:800;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.015em;text-transform:uppercase}
h3{font-weight:700;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.lede{font-size:1.15rem;max-width:62ch}
.measure{max-width:68ch}

/* the signature: a red bar behind one phrase of the H1 */
.mark{position:relative;display:inline-block;isolation:isolate}
.mark::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.02em;height:.22em;background:var(--signal);z-index:-1;transform:skewX(-3deg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:0 1.6rem;border-radius:4px;font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn--primary{background:var(--signal);color:#fff}
.btn--primary:hover{background:var(--signal-hi)}
.btn--ghost{border-color:currentColor;background:transparent;color:inherit}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.sect--light .btn--ghost:hover,body>main .sect:not(.sect--dark) .btn--ghost:hover{background:rgba(0,0,0,.05)}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ---------- header ---------- */
.hdr{background:var(--ink);color:#fff;position:relative;z-index:5}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:78px}
.hdr__logo img{height:44px;width:auto}
.hdr__nav{margin-left:auto;display:none;gap:1.6rem}
.hdr__nav a{text-decoration:none;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;opacity:.86;transition:opacity .18s ease}
.hdr__nav a:hover{opacity:1}
.hdr__cta{margin-left:auto}
@media(min-width:1000px){.hdr__nav{display:flex}.hdr__cta{margin-left:0}}
/* the header phone button was wrapping to two lines at 390px and doubling the header height */
@media(max-width:520px){
  .hdr__in{gap:.75rem;min-height:66px}
  .hdr__logo img{height:34px}
  .hdr__cta{padding:0 .85rem;font-size:.8rem;min-height:44px;white-space:nowrap}
  .hero__pill{letter-spacing:.1em;font-size:.7rem;padding:.35rem .8rem}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(21,21,21,.93) 0%,rgba(21,21,21,.8) 38%,rgba(21,21,21,.34) 72%,rgba(21,21,21,.2) 100%)}
@media(max-width:780px){.hero__scrim{background:linear-gradient(180deg,rgba(21,21,21,.88) 0%,rgba(21,21,21,.8) 55%,rgba(21,21,21,.92) 100%)}}
.hero__in{position:relative;z-index:2;padding-block:clamp(3.5rem,8vw,6.5rem)}
.hero__pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--signal);color:#fff;border-radius:999px;padding:.4rem 1rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.hero__pill b{color:#FF6B6B;font-weight:800}
.hero h1{margin:1.4rem 0 0;max-width:15ch}
.hero__sub{margin:1.5rem 0 0;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:clamp(.95rem,1.6vw,1.15rem);color:#fff}
.hero__p{margin:1.1rem 0 0;color:#D8D6D3;max-width:56ch}

/* ---------- trust strip ---------- */
.strip{background:var(--ink-2);color:#fff;border-top:1px solid var(--line-d);position:relative;z-index:2}
.strip ul{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-d)}
@media(min-width:760px){.strip ul{grid-template-columns:repeat(4,1fr)}}
.strip li{background:var(--ink-2);padding:1.15rem;display:flex;align-items:center;gap:.7rem;font-size:.86rem;font-weight:600;line-height:1.35}
/* The strip ul used to be full bleed while every section below it sits in .wrap,
   so the trust items ran wider than the rest of the page. The band stays edge to
   edge, the content is now in .wrap, and the items on the outside of each row
   lose their outer padding so the text lands on the same line as the sections. */
.strip li:nth-child(odd){padding-left:0}
.strip li:nth-child(even){padding-right:0}
@media(min-width:760px){
  .strip li:nth-child(odd){padding-left:1.15rem}
  .strip li:nth-child(even){padding-right:1.15rem}
  .strip li:first-child{padding-left:0}
  .strip li:last-child{padding-right:0}
}
.strip svg{flex:0 0 auto;width:20px;height:20px;stroke:var(--signal);fill:none;stroke-width:2}
.strip b{display:block;font-weight:800}
.strip span{color:var(--muted-d);font-weight:400;font-size:.8rem}

/* ---------- generic blocks ---------- */
.head{max-width:56ch}
.head p{margin-top:1rem;color:var(--muted)}
.sect--dark .head p{color:var(--muted-d)}
.grid{display:grid;gap:1.1rem;margin-top:2.6rem}
@media(min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid--3{grid-template-columns:repeat(3,1fr)}}

.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:0 0 1.6rem;display:flex;flex-direction:column;gap:.6rem;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.card>:not(.card__media){margin-left:1.6rem;margin-right:1.6rem}
.card__media{position:relative;overflow:hidden;margin-bottom:.4rem}
.card__img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .45s ease}
/* The icon stays on its own row under the photo. It was briefly moved onto the image
   as a badge on 2026-08-27; Niel wanted it back where it reads at full size. */
.card__ic{width:34px;height:34px;stroke:var(--signal);fill:none;stroke-width:1.8;margin-top:1.3rem}
.card h3{margin:0}
.card h3 a{color:inherit;text-decoration:none}
/* Stretched link: one anchor per card, but the whole card is the click target and
   the description is not swallowed into the link text. */
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card p{color:var(--muted);font-size:.97rem}
.card__more{display:block;margin-top:auto;padding-top:.6rem;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--signal)}
.card:hover{border-color:#CFCBC6;box-shadow:0 8px 24px rgba(21,21,21,.08)}
.card:hover h3 a{color:var(--signal)}
.card:hover .card__more{text-decoration:underline}
.card:hover .card__img{transform:scale(1.035)}
.card:has(a:focus-visible){outline:2px solid var(--signal);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.card__img{transition:none}.card:hover .card__img{transform:none}}

/* "And we do the rebuild" — links the construction half of the site from the
   homepage, which previously had no path to it at all. */
.alsobuild{margin-top:2.8rem;padding-top:2rem;border-top:1px solid var(--line)}
.alsobuild__k{font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--signal);margin:0 0 1rem}
.alsobuild ul{display:flex;flex-wrap:wrap;gap:.5rem}
.alsobuild li a{display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:.86rem;font-weight:600;text-decoration:none;transition:border-color .18s ease,color .18s ease}
.alsobuild li a:hover{border-color:var(--signal);color:var(--signal)}
.alsobuild__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* proof */
.proof{display:grid;gap:1.1rem;margin-top:2.6rem}
@media(min-width:700px){.proof{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.proof{grid-template-columns:repeat(3,1fr)}}
.proof li{background:var(--ink-2);border:1px solid var(--line-d);border-radius:8px;padding:1.5rem}
.proof .n{display:block;font-weight:800;font-size:1.55rem;line-height:1.1;letter-spacing:-.02em}
.proof .l{display:block;margin-top:.45rem;font-size:.88rem;color:var(--muted-d)}
.proof a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* steps */
.steps{counter-reset:s;display:grid;gap:1.6rem;margin-top:2.6rem}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;position:relative;padding-top:2.9rem}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;font-weight:800;font-size:1.5rem;color:var(--signal);letter-spacing:-.02em;transform-origin:left bottom;transition:color .25s ease,transform .25s cubic-bezier(.2,.7,.3,1)}
/* the grey hairline is the track */
.steps li::after{content:"";position:absolute;top:1.05rem;left:2.6rem;right:0;height:1px;background:var(--line)}
.steps li:last-child::after{display:none}
.sect--dark .steps li::after{background:var(--line-d)}
.steps h3{font-size:1.05rem;transition:color .22s ease}
.steps p{margin-top:.4rem;color:var(--muted);font-size:.95rem;transition:color .22s ease}
.sect--dark .steps p{color:var(--muted-d)}

/* The red rule that runs along the track. It draws 01 to 04 in sequence when the
   list scrolls into view, so the process reads as a sequence rather than four
   parallel columns — and touch devices get the effect too, where hover does not
   exist. `.in` is set by the IntersectionObserver in footer.php. */
.steps__rule{position:absolute;z-index:1;top:1.05rem;left:2.6rem;right:0;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.steps li:last-child .steps__rule{display:none}
.steps.in .steps__rule{transform:scaleX(1)}
.steps.in li:nth-child(1) .steps__rule{transition-delay:.10s}
.steps.in li:nth-child(2) .steps__rule{transition-delay:.30s}
.steps.in li:nth-child(3) .steps__rule{transition-delay:.50s}

/* Hover picks one step out of the four. Nothing here implies the step is clickable. */
.steps li:hover::before{color:var(--signal-hi);transform:scale(1.22)}
.steps li:hover h3{color:var(--signal)}
.steps li:hover p{color:var(--ink)}
.sect--dark .steps li:hover p{color:#fff}

@media(prefers-reduced-motion:reduce){
  /* the observer never runs under reduced motion, so show the rule outright */
  .steps__rule{transform:scaleX(1);transition:none}
  .steps li::before,.steps li:hover::before{transition:none;transform:none}
  .steps li:hover::before{color:var(--signal-hi)}
}

/* split */
.split{display:grid;gap:2.4rem;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr;gap:3.5rem}}
.split img{border-radius:8px}
.ticks{margin-top:1.5rem;display:grid;gap:.75rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.ticks svg{flex:0 0 auto;width:19px;height:19px;margin-top:.24rem;stroke:var(--signal);fill:none;stroke-width:2.4;transition:stroke-dashoffset .5s ease}
/* Each check draws itself when its block reveals, staggered down the list.
   Gated on `.js` and on `.rv:not(.in)` so a tick that is not inside a reveal
   wrapper, or a visitor with JS off, gets a fully drawn mark instead of nothing. */
.js .rv:not(.in) .ticks svg{stroke-dasharray:24;stroke-dashoffset:24}
.js .rv.in .ticks svg{stroke-dasharray:24;stroke-dashoffset:0}
.js .rv.in .ticks li:nth-child(1) svg{transition-delay:.12s}
.js .rv.in .ticks li:nth-child(2) svg{transition-delay:.24s}
.js .rv.in .ticks li:nth-child(3) svg{transition-delay:.36s}
.js .rv.in .ticks li:nth-child(4) svg{transition-delay:.48s}

/* The claim callout. Was an inline styled white box that read as an afterthought
   against the grey section. */
.costcard{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:2.1rem 1.8rem 1.8rem;overflow:hidden;box-shadow:0 12px 32px rgba(21,21,21,.07)}
.costcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--signal)}
.costcard__k{display:flex;align-items:center;gap:.6rem;margin:0;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem}
.costcard__k svg{flex:0 0 auto;width:21px;height:21px;stroke:var(--signal);fill:none;stroke-width:2;stroke-linecap:round}
.costcard p{color:var(--muted)}
.costcard p+p{margin-top:.9rem}
.costcard .costcard__pull{margin-top:1.3rem;padding-left:1.05rem;border-left:3px solid var(--signal);color:var(--ink);font-weight:600;font-size:1.05rem;line-height:1.5}
.costcard .costcard__cta{margin-top:1.6rem}
.costcard .costcard__note{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.9rem}
/* centred, not top aligned: the copy column runs ~200px longer than the card, and
   splitting that space above and below reads as composition rather than a hole. */
#claim .split{align-items:center}

@media(prefers-reduced-motion:reduce){
  /* the observer never adds .in, so undo the dash that would hide every check */
  .js .rv:not(.in) .ticks svg{stroke-dasharray:none;stroke-dashoffset:0}
}

/* areas */
.areas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.areas li a{display:inline-block;border:1px solid var(--line-d);border-radius:4px;padding:.5rem .9rem;font-size:.85rem;font-weight:600;text-decoration:none;transition:border-color .18s ease,background .18s ease}
.areas li a:hover{border-color:var(--signal);background:rgba(194,40,40,.14)}

/* final cta */
/* Background photography behind the red CTA (2026-08-27). Same two layer pattern
   as the hero: a real image plus a scrim, not a CSS gradient pretending to be one.
   The photo ships already grayscaled so no CSS filter is needed and the file is
   ~40% smaller. The scrim keeps the section unmistakably brand red and every text
   colour in here was re-measured against the composited pixels, not assumed. */
.cta{position:relative;isolation:isolate;overflow:hidden;background:var(--signal);color:#fff}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.cta__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(150,24,24,.975) 0%,rgba(186,36,36,.955) 45%,rgba(194,40,40,.9) 100%)}
@media(max-width:900px){
  /* the form card no longer shields the right side, so flatten the gradient */
  .cta__scrim{background:linear-gradient(180deg,rgba(160,26,26,.97) 0%,rgba(190,38,38,.96) 100%)}
}
.cta .btn--ghost:hover{background:rgba(255,255,255,.14)}
.cta h2{max-width:18ch}
.cta p{margin-top:1rem;max-width:52ch;color:#FFEDED}
/* the form card is white and lives inside the red section — stop the pale text color leaking in */
.cta form,.cta form p,.cta form label{color:var(--ink)}
.cta form p{margin-top:0;max-width:none}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#fff;padding-block:clamp(3rem,6vw,4.5rem) 0}
.ftr__grid{display:grid;gap:2.2rem}
@media(min-width:760px){.ftr__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.ftr__grid{grid-template-columns:1.5fr 1fr 1.15fr 1fr}}
.ftr img{height:40px;width:auto}
.ftr h3{display:flex;align-items:center;gap:.7rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-d);font-weight:600}
.ftr h3::after{content:"";flex:1;height:1px;background:var(--line-d)}
.ftr ul{margin-top:.9rem;display:grid;gap:.55rem}
.ftr a{color:#fff;text-decoration:none;font-size:.94rem;opacity:.85}
.ftr a:hover{opacity:1;text-decoration:underline}
.ftr__p{margin-top:1.1rem;color:var(--muted-d);font-size:.94rem;max-width:38ch}
.ftr__legal{margin-top:2.6rem;border-top:1px solid var(--line-d);padding-block:1.4rem 1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.82rem;color:var(--muted-d)}
.ftr__legal a{font-size:.82rem;color:var(--muted-d)}
.ftr__legaltxt{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem}

/* The phone is the primary CTA of the whole business and was small grey text in a
   footer column. Now the loudest thing down here, with the 24/7 promise attached. */
.ftr .ftr__phone{display:inline-flex;align-items:center;gap:.8rem;margin-top:1.3rem;padding:.85rem 1.1rem;border:1px solid var(--line-d);border-radius:8px;background:var(--ink-2);opacity:1;text-decoration:none;transition:border-color .2s ease,background .2s ease}
.ftr .ftr__phone:hover,.ftr .ftr__phone:focus-visible{border-color:var(--signal);background:rgba(194,40,40,.14);text-decoration:none}
.ftr .ftr__phone svg{flex:0 0 auto;width:22px;height:22px;color:var(--signal)}
.ftr .ftr__phone > span{display:block;font-size:1.2rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.ftr .ftr__phone small{display:block;margin-top:.2rem;font-size:.76rem;font-weight:400;letter-spacing:0;color:var(--muted-d)}

.roc{font-weight:800;color:var(--ink);letter-spacing:.02em}
.on-dark .roc{color:#fff}

/* mobile emergency bar */
.embar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:var(--ink);border-top:1px solid var(--line-d)}
.embar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:58px;color:#fff;text-decoration:none;font-weight:800;font-size:.92rem;text-transform:uppercase;letter-spacing:.05em}
.embar a.is-call{background:var(--signal)}
@media(min-width:820px){.embar{display:none}}
@media(max-width:819px){body{padding-bottom:58px}}

/* motion */
.js .rv{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* footer social — must out-specify `.ftr ul{display:grid}` above, hence the .ftr prefix */
.ftr .ftr__social{display:flex;gap:.7rem;list-style:none;margin:1.1rem 0 0;padding:0}
.ftr .ftr__social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-d);border-radius:8px;color:#fff;text-decoration:none}
.ftr .ftr__social a:hover,.ftr .ftr__social a:focus-visible{background:var(--signal);border-color:var(--signal)}
.ftr .ftr__social svg{width:19px;height:19px;fill:currentColor}
.ftr .ftr__social span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* inline figure with caption */
.figure{margin:clamp(2.4rem,5vw,3.4rem) 0 0}
.figure img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.figure figcaption{margin-top:.8rem;font-size:.9rem;color:var(--muted);max-width:62ch}

/* ============================================================ NAV DROPDOWNS */
.u-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hdr__in{position:relative}
.nav__item{position:relative}
.nav__btn{display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;opacity:.86}
.nav__btn:hover{opacity:1}
.nav__btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.nav__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__sub{position:absolute;top:calc(100% + 14px);left:-1rem;min-width:264px;background:var(--ink-2);
  border:1px solid var(--line-d);border-radius:8px;padding:.5rem;list-style:none;margin:0;
  box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:40;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav__item:hover .nav__sub,.nav__btn[aria-expanded="true"]+.nav__sub,.nav__sub:focus-within{opacity:1;visibility:visible;transform:none}
.nav__sub a{display:block;padding:.55rem .75rem;border-radius:5px;font-size:.83rem;text-transform:none;letter-spacing:0;opacity:.9}
.nav__sub a:hover,.nav__sub a:focus-visible{background:var(--signal);opacity:1}
/* a hoverable bridge so the menu does not close in the gap under the button */
.nav__item::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}

/* mobile nav */
.hdr__burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:1px solid var(--line-d);border-radius:6px;color:#fff;cursor:pointer;margin-left:.6rem}
.hdr__burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mnav{display:none;background:var(--ink-2);border-top:1px solid var(--line-d);padding:1.4rem 0 1.8rem}
.mnav.is-open{display:block}
.mnav__h{margin:1.2rem 0 .5rem;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.mnav__h:first-child{margin-top:0}
.mnav ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.mnav a{display:block;padding:.6rem .2rem;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.06)}
.mnav a:hover,.mnav a:focus-visible{color:var(--signal-hi)}
@media(min-width:1000px){.hdr__burger{display:none}.mnav{display:none !important}}

/* ========================================================== PAGE TEMPLATES */
.phero{background:var(--ink);color:#fff;padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(2.4rem,5vw,3.6rem);border-bottom:1px solid var(--line-d)}
.phero h1{margin:.5rem 0 0;max-width:22ch}
.phero__lede{margin-top:1.1rem;max-width:62ch;color:var(--muted-d);font-size:clamp(1.02rem,1.6vw,1.16rem)}
.phero .btns{margin-top:1.7rem}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--muted-d)}
.crumbs a{color:var(--muted-d)}
.crumbs a:hover{color:#fff}
.card--plain{background:transparent;border:0;padding:0}
.card--plain h3{margin:0 0 .5rem}
.card--plain p{color:var(--muted);font-size:.97rem;margin:0}
.sect--alt .card--plain p{color:#5E5C59}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#F1EFEC}
.cta .areas li a{border-color:rgba(255,255,255,.35)}

/* --- "The First 24 Hours": two column lead + vertical timeline (2026-08-27).
   Was a full width 1160px photo under a 4 across step grid, which made the photo
   the loudest thing on the page and pushed the timeline out of view. The photo is
   now sized by its column, and a chronology reads better stacked than side by side. */
.first24{display:grid;gap:2.8rem}
@media(min-width:960px){.first24{grid-template-columns:1.02fr .98fr;gap:4rem;align-items:center}}
.first24__lead h2{font-size:clamp(1.9rem,3vw,2.5rem)}
.first24__lead > p{margin-top:1rem;color:var(--muted);max-width:52ch}
.figure--inline{margin-top:2rem}
.figure--inline figcaption{max-width:52ch}

.timeline{counter-reset:t;list-style:none;margin:0;padding:0}
.timeline li{counter-increment:t;position:relative;padding:0 0 1.9rem 4rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:0;
  width:2.6rem;height:2.6rem;border:1px solid var(--line);border-radius:50%;background:var(--paper);
  display:grid;place-items:center;font-weight:800;font-size:.95rem;color:var(--signal);letter-spacing:-.02em;z-index:1}
.timeline li::after{content:"";position:absolute;left:1.3rem;top:2.6rem;bottom:0;width:1px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline h3{font-size:1.05rem;padding-top:.45rem}
.timeline p{margin-top:.4rem;color:var(--muted);font-size:.97rem}

.sect--dark .timeline li::before{background:var(--ink);border-color:var(--line-d)}
.sect--dark .timeline li::after{background:var(--line-d)}
.sect--dark .timeline p{color:var(--muted-d)}

/* --- Projects gallery (2026-08-27) --- */
.gfilter{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.4rem}
.gfilter__b{font:inherit;font-size:.82rem;font-weight:600;letter-spacing:.02em;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:.55rem 1.1rem;min-height:40px}
.gfilter__b:hover{border-color:var(--signal);color:var(--signal)}
.gfilter__b.is-on{background:var(--signal);border-color:var(--signal);color:#fff}
.gallery{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.gallery{grid-template-columns:repeat(3,1fr);gap:1.2rem}}
.gitem{position:relative;border-radius:8px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
.gitem[hidden]{display:none}
.gitem img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.gitem__tag{position:absolute;left:.7rem;bottom:.7rem;background:rgba(21,21,21,.82);color:#fff;
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:3px}
.gcount{margin-top:1.2rem;font-size:.85rem;color:var(--muted)}

/* --- Contact page --- */
.cinfo{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.3rem}
.cinfo li{display:grid;gap:.25rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.cinfo li:last-child{border-bottom:0;padding-bottom:0}
.cinfo__k{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cinfo__v{font-size:1.2rem;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.4}
a.cinfo__v:hover{color:var(--signal)}

/* --- Services hub --- */
.hubgrid{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:620px){.hubgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.hubgrid{grid-template-columns:repeat(3,1fr)}}
.hub{display:flex;flex-direction:column;gap:.55rem}
.hub > a:first-child{display:block;text-decoration:none;color:inherit;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.hub img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hub__t{display:block;padding:.9rem 1rem;font-weight:700;font-size:1.05rem;background:var(--paper);line-height:1.3}
.hub > a:first-child:hover .hub__t{color:var(--signal)}
.hub__p{color:var(--muted);font-size:.95rem}
.hub__more{margin-top:auto;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--signal);text-decoration:none}
.hub__more:hover{text-decoration:underline}
.sect--alt .hub__t{background:var(--paper)}

/* --- Service area --- */
.areagrid{display:grid;gap:2.4rem;margin-top:2.6rem}
@media(min-width:760px){.areagrid{grid-template-columns:repeat(3,1fr)}}
.areagrid h3{padding-bottom:.7rem;border-bottom:2px solid var(--signal);display:inline-block}
.arealist{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem;color:var(--muted)}
.arealist li{padding-left:1.1rem;position:relative}
.arealist li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--signal)}
.areanote{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem;max-width:78ch}

/* --- "We Are the Crew Other Companies Send" (2026-08-27) ---
   One 4:3 photo against a ~700px column of copy left a large void down the right
   of the section. A stacked pair fills it and does the section's actual argument:
   the crew on site AND the finished room, from one company. Not labelled before
   and after, they are different jobs and claiming otherwise would be a lie. */
.pairstack{display:grid;gap:1.4rem}
.pairstack figure{margin:0}
.pairstack img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px}
.pairstack figcaption{margin-top:.65rem;font-size:.82rem;color:var(--muted-d)}
.pairstack figcaption::before{content:"";display:inline-block;width:14px;height:2px;background:var(--signal);vertical-align:middle;margin-right:.55rem}
#rebuild .split{align-items:start}

/* --- Homepage service areas, grouped by region (2026-08-27) ---
   Was 12 chips that were all links to #quote, i.e. twelve ways to be scrolled to
   a form you did not ask for. Now 24 towns grouped the same three ways as
   /service-area/, as plain text, with one real link to that page instead.
   `.areas` is left alone: page.php still uses it for related-service links. */
.areagroups{display:grid;gap:2.2rem;margin-top:2.4rem}
@media(min-width:820px){.areagroups{grid-template-columns:repeat(3,1fr);gap:2.6rem}}
.areagroup__k{display:flex;align-items:center;gap:.75rem;margin:0 0 1.1rem;font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:#FF6B6B}
.areagroup__k::after{content:"";flex:1;height:1px;background:var(--line-d)}
.acity{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.acity li{border:1px solid var(--line-d);border-radius:4px;padding:.5rem .9rem;font-size:.85rem;font-weight:600;background:var(--ink-2);transition:opacity .38s ease,transform .38s ease,border-color .2s ease}
.areagroup:hover .acity li{border-color:#454545}
.areanote--dark{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line-d);color:var(--muted-d);font-size:.92rem;max-width:78ch}

/* chips deal in on reveal, per group so all three columns run together */
.js .rv:not(.in) .acity li{opacity:0;transform:translateY(6px)}
.js .rv.in .acity li{opacity:1;transform:none}
.js .rv.in .acity li:nth-child(1){transition-delay:.04s}
.js .rv.in .acity li:nth-child(2){transition-delay:.09s}
.js .rv.in .acity li:nth-child(3){transition-delay:.14s}
.js .rv.in .acity li:nth-child(4){transition-delay:.19s}
.js .rv.in .acity li:nth-child(5){transition-delay:.24s}
.js .rv.in .acity li:nth-child(6){transition-delay:.29s}
.js .rv.in .acity li:nth-child(7){transition-delay:.34s}
.js .rv.in .acity li:nth-child(8){transition-delay:.39s}
@media(prefers-reduced-motion:reduce){
  /* .in never arrives under reduced motion, so the chips must not depend on it */
  .js .rv:not(.in) .acity li{opacity:1;transform:none}
}

/* 2026-08-31 — centred CTA alignment.
   .cta h2 is capped at 18ch and .cta p at 52ch. On the homepage the CTA sits in
   .wrap.split so left alignment is correct. On the inner-page CTAs the wrap is
   text-align:center, but a capped block with an inline margin:0 has no auto margins,
   so the heading rendered hard left while the buttons sat centred. Pre-existing;
   surfaced once the background photo made the band read as a composed unit.
   !important is required because the inline style="margin:0" would otherwise win. */
.cta .wrap:not(.split) h2,
.cta .wrap:not(.split) p{margin-inline:auto!important}


/* 2026-08-31 — hero background photography on inner pages.
   Mirrors the homepage .hero__bg / .hero__scrim two-layer pattern (a real <img>
   plus a scrim element, not a CSS gradient pretending to be a photo).
   .phero already sets background:var(--ink), which stays as the fallback under
   the photo. The scrim runs a little heavier than the homepage's because inner
   heroes carry a breadcrumb and a lede over the image, not just a headline. */
.phero{position:relative;overflow:hidden;isolation:isolate}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:brightness(1.18) contrast(1.04)}
.phero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(21,21,21,.92) 0%,rgba(21,21,21,.8) 42%,rgba(21,21,21,.45) 78%,rgba(21,21,21,.3) 100%)}
@media(max-width:780px){
  .phero__scrim{background:linear-gradient(180deg,rgba(21,21,21,.86) 0%,rgba(21,21,21,.72) 52%,rgba(21,21,21,.88) 100%)}
}
.phero > .wrap{position:relative;z-index:2}


/* 2026-08-31 — "What the Work Involves" block on service pages.
   It had an eyebrow but no H2, so the outline jumped H1 -> credentials H2.
   Layout: .split is align-items:center, so a 16:9 photo against a tall
   checklist + two paragraphs left dead space above and below the image.
   The media column now stretches and the photo fills it. */
.workblock .split img{border-radius:8px;width:100%;height:auto;display:block}
@media(min-width:900px){
  .workblock .split{align-items:stretch}
  .workblock .workmedia{display:flex}
  .workblock .workmedia img{height:100%;object-fit:cover;min-height:340px}
}