@layer site;

@layer site {
:root {
  color-scheme: light dark;
  --navy-950:#0d1820; --navy-900:#142431; --navy-800:#203848;
  --paper:#f3efe7; --surface:#fffdf8; --surface-2:#e8e3d9;
  --ink:#172028; --muted:#5f696f; --line:rgba(23,32,40,.15);
  --copper:#b36d3d;--call-accent:#c6532f; --copper-deep:#8b4e29; --attention:#e4bd42;
  --white:#fffdf8; --shadow:0 14px 36px rgba(13,24,32,.13);
  --container:76rem; --header:5.25rem; --section:clamp(4.5rem,8vw,7.5rem);
}

@media (prefers-color-scheme:dark){
  :root{--paper:#111a20;--surface:#18242c;--surface-2:#202d35;--ink:#f0f3f1;--muted:#b8c2c5;--line:rgba(240,243,241,.14)}
  :root:has(#theme-toggle:checked){color-scheme:light;--paper:#f3efe7;--surface:#fffdf8;--surface-2:#e8e3d9;--ink:#172028;--muted:#5f696f;--line:rgba(23,32,40,.15)}
}
@media (prefers-color-scheme:light){
  :root:has(#theme-toggle:checked){color-scheme:dark;--paper:#111a20;--surface:#18242c;--surface-2:#202d35;--ink:#f0f3f1;--muted:#b8c2c5;--line:rgba(240,243,241,.14)}
}

*{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 1rem)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;text-rendering:optimizeLegibility}
body.nav-open{overflow:hidden} img{display:block;max-width:100%;height:auto} a{color:inherit} button{font:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #005f73}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.container{width:min(calc(100% - 2.5rem),var(--container));margin-inline:auto}.section{padding-block:var(--section)}
h1,h2,h3{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:1.02;text-wrap:balance}h1{font-size:clamp(3.2rem,7vw,6.3rem);letter-spacing:-.05em}h2{font-size:clamp(2.35rem,4.8vw,4.4rem);letter-spacing:-.04em}h3{font-size:clamp(1.35rem,2.1vw,1.8rem)}p{margin:.85rem 0 0;text-wrap:pretty}.eyebrow{margin:0 0 .8rem;color:var(--attention);font-size:.76rem;font-weight:900;letter-spacing:.17em;text-transform:uppercase}.eyebrow-dark{color:var(--copper-deep)}.center{text-align:center}.section-heading{max-width:50rem;margin-bottom:clamp(2.25rem,5vw,4rem)}.section-heading>p:last-child{color:var(--muted);font-size:1.08rem}.split-heading{max-width:none;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:end}

/* HEADER RELATIONSHIP
   Desktop: complete brand block stays far left; the icon-only theme control sits
   immediately to its right; page navigation follows; phone CTA stays far right.
   Mobile: nav links and theme control move together into the drawer while the
   phone CTA remains outside so the primary action stays reachable. */
.contact-actions{margin-top:1.5rem;display:grid;justify-items:start}.contact-actions .contact-phone{margin-top:0}.contact-actions>span{margin-top:.45rem;color:#9fb0b8;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.site-header{position:fixed;z-index:100;inset:0 0 auto;height:var(--header);background:rgba(13,24,32,.88);color:var(--white);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);transition:background .18s,box-shadow .18s}.site-header.is-scrolled{background:rgba(13,24,32,.97);box-shadow:0 8px 28px rgba(0,0,0,.2)}.header-shell{height:100%;display:flex;align-items:center;gap:1rem}.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}.brand img{width:3.3rem;aspect-ratio:1;border-radius:50%;object-fit:cover}.brand-copy{display:grid;line-height:1}.brand-copy strong{font:700 1.08rem Georgia,serif}.brand-copy span{margin-top:.35rem;color:#c5d3d8;font-size:.67rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.primary-nav{margin-left:0;display:flex;align-items:center;gap:.1rem;flex:1}.primary-nav>a{padding:.75rem .72rem;border-radius:.35rem;color:#e8eef0;font-size:.86rem;font-weight:800;text-decoration:none}.nav-label-compact{display:none}.primary-nav>a:hover{background:rgba(255,255,255,.08)}.primary-nav>a:first-of-type{margin-left:auto}.header-cta{min-height:2.8rem;display:inline-flex;align-items:center;padding:.7rem 1rem;border-radius:.45rem;background:var(--attention);color:#101820;font-size:.84rem;font-weight:900;text-decoration:none}.cta-short{display:none}.nav-toggle{display:none;margin-left:auto;width:2.75rem;height:2.75rem;padding:.55rem;border:0;background:transparent}.nav-toggle span{display:block;height:2px;margin:5px 0;background:#fff}.theme-switch{display:flex;order:-1;margin:0 .8rem 0 0;flex:0 0 auto}.theme-choice{position:absolute;width:1px;height:1px;opacity:0}.theme-button{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-size:1.1rem;line-height:1}.theme-icon{grid-area:1/1}.theme-icon-sun{display:none}.theme-choice:focus-visible+.theme-button{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #005f73}:root:has(#theme-toggle:checked) .theme-icon-moon{display:none}:root:has(#theme-toggle:checked) .theme-icon-sun{display:inline}@media(prefers-color-scheme:dark){.theme-icon-moon{display:none}.theme-icon-sun{display:inline}:root:has(#theme-toggle:checked) .theme-icon-moon{display:inline}:root:has(#theme-toggle:checked) .theme-icon-sun{display:none}}

/* HERO: logo-led rather than photo-led. The Site is a service tool; the mark and
   immediate service proposition own identity while project photos are reserved
   for proof below the fold. */
.hero{padding:calc(var(--header) + clamp(4.5rem,9vw,8rem)) 0 clamp(4.5rem,8vw,7rem);overflow:hidden;background:radial-gradient(circle at 82% 30%,rgba(179,109,61,.22),transparent 23rem),linear-gradient(145deg,var(--navy-950),var(--navy-900));color:#fff}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,7vw,7rem);align-items:center}.hero-copy{max-width:47rem}.hero h1{max-width:13ch}.hero-lede{max-width:43rem;color:#d7e0e3;font-size:clamp(1.08rem,1.7vw,1.3rem)}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.button{min-height:3.1rem;display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.2rem;border:2px solid transparent;border-radius:.5rem;font-weight:900;text-decoration:none}.button-primary{background:var(--attention);color:#111820}.button-call{border:4px solid var(--call-accent);background:var(--attention);color:#111820}.button-ghost{border-color:var(--navy-800);background:var(--navy-800);color:#fff}.hero-note{margin-top:1.25rem;color:#aebdc3;font-size:.9rem}.service-ribbon{background:var(--attention);color:#162028}.service-ribbon-inner{min-height:4rem;display:flex;align-items:center}.service-ribbon-list{width:100%;margin:0;padding:.75rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.55rem 1.25rem;list-style:none}.service-ribbon-list li{white-space:nowrap;font-size:.73rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}

/* SERVICE CARD FAMILY
   Only peer priority services use cards. Equal scanning value justifies the grid;
   proof galleries and testimonials use different families so the page hierarchy
   does not collapse into one repeated card treatment. */
.services{background:var(--paper)}.service-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.service-card{overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:.7rem;box-shadow:var(--shadow)}.service-card>img{width:100%;aspect-ratio:4/3;object-fit:cover}.service-card-body{padding:1.25rem 1.25rem 1.4rem}.service-kicker{margin:0 0 .55rem;color:var(--copper);font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.service-card-body p{color:var(--muted);font-size:.94rem}.service-card-body a{display:inline-flex;margin-top:1rem;color:var(--copper-deep);font-size:.86rem;font-weight:900;text-decoration:none}

.service-now-band{padding-block:clamp(3rem,6vw,5rem);background:linear-gradient(135deg,#24545a,#1b4147);color:#fff;border-block:1px solid rgba(255,255,255,.10)}.service-now-inner{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,5rem);align-items:center}.service-now-inner h2{font-size:clamp(2.2rem,4vw,3.7rem)}.service-now-inner p:last-child{max-width:50rem;color:#e0ecec}.button-attention{min-width:15rem;display:grid;gap:.1rem;border:4px solid var(--call-accent);background:var(--attention);color:#111820;text-align:center;box-shadow:0 12px 28px rgba(4,10,14,.28),0 0 0 4px rgba(198,83,47,.18)}.button-attention span{font-size:.73rem;letter-spacing:.13em;text-transform:uppercase}.button-attention strong{font-size:1.08rem}

.why{background:var(--surface)}.why-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(3rem,7vw,7rem);align-items:center}.why-copy>p{max-width:45rem;color:var(--muted);font-size:1.08rem}.proof-list{margin:2rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}.proof-list li{position:relative;padding:1rem 0 1rem 2rem;border-bottom:1px solid var(--line);font-weight:700}.proof-list li:before{content:'✓';position:absolute;left:0;color:var(--copper);font-weight:900}

/* WORK GALLERY
   Real service photos carry proof. Mixed aspect ratios are preserved instead of
   forced into identical cards; the wide waste-line/trench work receives more
   visual weight because it demonstrates a larger-scope drainage capability. */
.work{background:var(--navy-950);color:#fff}.work .section-heading>p:last-child{color:#b9c6cb}.work-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:.8rem}.work-item{margin:0;overflow:hidden;position:relative;min-height:18rem;background:#20313c}.work-item-wide{grid-column:span 2}.work-item img{width:100%;height:100%;min-height:18rem;object-fit:cover}.work-item figcaption{position:absolute;inset:auto .65rem .65rem;padding:.45rem .6rem;background:rgba(13,24,32,.82);color:#fff;font-size:.74rem;font-weight:800;backdrop-filter:blur(7px)}

.property{background:var(--surface)}.property-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(3rem,7vw,7rem);align-items:center}.property-copy>p{color:var(--muted);font-size:1.05rem}.feature-quote{margin:2rem 0 0;padding:1.5rem 0 0;border-top:3px solid var(--copper)}.feature-quote p{margin:0;font:700 clamp(1.2rem,2vw,1.55rem)/1.45 Georgia,serif}.feature-quote .quote-attribution{display:block;margin-top:1rem;color:var(--muted);font-size:.82rem;font-weight:800}.property-proof{position:relative}.property-proof>img{width:100%;max-height:34rem;object-fit:cover;box-shadow:var(--shadow)}.property-statements{position:absolute;inset:auto 1rem 1rem;display:flex;flex-wrap:wrap;gap:.4rem}.property-statements span{padding:.45rem .6rem;background:rgba(13,24,32,.88);color:#fff;font-size:.72rem;font-weight:900;text-transform:uppercase}

.remodel{background:var(--paper)}.remodel-heading{max-width:68rem;display:block}.remodel-heading>p{max-width:64rem;color:var(--muted);font-size:1.08rem}.project-sequence{display:grid;gap:3rem}.project-group{padding-top:1.2rem;border-top:1px solid var(--line)}.project-group-heading{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1rem}.project-group-heading span{color:var(--copper-deep);font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.project-images{display:grid;gap:.65rem}.project-images-five{grid-template-columns:repeat(5,1fr)}.project-images-two{grid-template-columns:1fr 1fr}.project-images figure{margin:0;position:relative;min-width:0}.project-images img{width:100%;height:19rem;object-fit:cover}.project-images figcaption{position:absolute;inset:auto .45rem .45rem;padding:.35rem .5rem;background:rgba(13,24,32,.82);color:#fff;font-size:.68rem;font-weight:900;text-transform:uppercase}

/* Shared photographic frame. Mirrors the Priority Service card treatment so
   proof and gallery photography uses the same restrained radius and hairline. */
.dylan-portrait>img,
.work-item,
.property-proof>img,
.project-images img {
  border:1px solid var(--line);
  border-radius:.7rem;
}

.reviews{background:var(--surface-2)}.reviews .section-heading{text-align:left}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.review-card{margin:0;padding:1.6rem;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.review-card p{margin:0;font:700 clamp(1.08rem,1.8vw,1.35rem)/1.45 Georgia,serif}.review-card .quote-attribution{display:block;margin-top:1.2rem;color:var(--muted);font-size:.8rem;font-weight:800}

.contact{background:linear-gradient(145deg,var(--navy-950),var(--navy-900));color:#fff}.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(3rem,8vw,7rem);align-items:start}.contact-lede{max-width:43rem;color:#d0dce0;font-size:1.1rem}.contact-phone{display:inline-block;margin-top:1.5rem;color:var(--attention);font:700 clamp(2rem,4vw,3.6rem)/1 Georgia,serif;text-decoration:none}.contact-details{display:grid;gap:.8rem}.contact-details>div{padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.15)}.contact-details span{display:block;color:#9fb0b8;font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.contact-details strong{display:block;margin-top:.25rem;font-size:1.05rem}.contact-details p{color:#c7d2d6;font-size:.9rem}.contact-details a{color:var(--attention);font-weight:800}.service-area-detail>p{margin:.65rem 0 0}.service-area-groups{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.25rem;margin-top:1rem}.service-area-groups>div{padding-top:.8rem;border-top:1px solid rgba(255,255,255,.1)}.service-area-groups b{display:block;color:#fff;font-size:.82rem}.service-area-groups p{margin:.35rem 0 0}.service-area-note{padding-top:.85rem;border-top:1px solid rgba(255,255,255,.1)}.service-area-note b{color:#fff}

.site-footer{padding:3.7rem 0 1.5rem;background:#081119;color:#c4d0d4}.footer-grid{display:grid;grid-template-columns:1.35fr .75fr 1fr .8fr;gap:clamp(2rem,4vw,4rem)}.footer-brand{display:flex;align-items:center;gap:.75rem}.footer-brand img{width:4rem;border-radius:50%}.footer-brand h2{font-size:1.25rem;color:#fff}.footer-brand span{display:block;margin-top:.2rem;color:#9fb0b8;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.footer-summary>p{max-width:24rem;color:#93a5ac;font-size:.88rem}.footer-column{display:grid;align-content:start;gap:.5rem}.footer-column h2{margin-bottom:.45rem;color:#fff;font:900 .72rem/1.2 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}.footer-column a{width:fit-content;color:#c4d0d4;text-decoration:none}.footer-column a:hover{color:var(--attention)}.footer-phone{color:#fff!important;font-weight:900}.footer-column span{color:#93a5ac;font-size:.88rem}.footer-legal{margin-top:2.6rem;padding-top:1.1rem;display:flex;justify-content:space-between;gap:1rem;border-top:1px solid rgba(255,255,255,.12);color:#738890;font-size:.76rem}.footer-legal a{color:#9fb0b8}.back-to-top{position:fixed;z-index:85;right:1.2rem;bottom:1.2rem;min-width:3rem;height:2.65rem;display:grid;place-items:center;border:1px solid rgba(228,189,66,.3);border-radius:.45rem;background:rgba(13,24,32,.82);color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-decoration:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(.35rem);transition:.18s}.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}.mobile-callbar{display:none}

@media(max-width:980px){
  .service-cards{grid-template-columns:1fr 1fr}.work-grid{grid-template-columns:repeat(3,1fr)}.project-images-five{grid-template-columns:repeat(3,1fr)}.review-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-summary{grid-column:1/-1}
}


@media(max-width:1100px) and (min-width:821px){
  .nav-label-full{display:none}
  .nav-label-compact{display:inline}
  .primary-nav>a{padding-inline:.58rem}
}
@media(max-width:820px){
  .nav-label-full{display:inline}
  .nav-label-compact{display:none}
}

@media(max-width:820px){
  :root{--header:4.6rem}.container{width:min(calc(100% - 1.5rem),var(--container))}.brand-copy span{display:none}.brand img{width:2.8rem}.nav-toggle{display:block}.primary-nav{position:absolute;top:100%;right:0;width:min(24rem,90vw);padding:1rem;display:grid;align-content:start;gap:.2rem;background:#0d1820;border-left:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:-12px 20px 34px rgba(0,0,0,.25);transform:translateX(105%);visibility:hidden;transition:.2s}.primary-nav.is-open{transform:none;visibility:visible}.primary-nav>a{padding:.9rem}.primary-nav>a:first-of-type{margin-left:0}.theme-switch{order:initial;margin:.8rem 0 0;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.12)}.header-cta{margin-left:.2rem;padding:.68rem .8rem;white-space:nowrap;font-size:.78rem}.cta-wide{display:none}.cta-short{display:inline}.hero-grid,.split-heading,.why-grid,.property-grid,.contact-grid{grid-template-columns:1fr}.hero{padding-top:calc(var(--header) + 4.2rem)}.service-ribbon-inner{justify-content:flex-start}.work-grid{grid-template-columns:1fr 1fr}.work-item-wide{grid-column:span 2}.project-images-five{grid-template-columns:1fr 1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-summary{grid-column:1/-1}
}

@media(max-width:560px){
  .service-now-inner{grid-template-columns:1fr;align-items:start}.button-attention{width:fit-content}
  .service-area-groups{grid-template-columns:1fr}
  h1{font-size:clamp(2.85rem,14vw,4.35rem)}h2{font-size:clamp(2.2rem,11vw,3.3rem)}.header-shell{gap:.5rem}.brand-copy strong{font-size:.92rem}.header-cta{padding-inline:.65rem;font-size:.73rem}.hero-actions{display:grid}.button{width:100%}.service-cards,.work-grid,.review-grid,.footer-grid{grid-template-columns:1fr}.work-item-wide,.footer-summary{grid-column:auto}.project-images-five,.project-images-two{grid-template-columns:1fr 1fr}.project-images-five figure:last-child{grid-column:1/-1}.project-images img{height:14rem}.project-group-heading{display:grid}.property-statements{position:static;margin-top:.5rem}.footer-legal{display:grid}.site-footer{padding-bottom:5.5rem}.mobile-callbar{position:fixed;z-index:95;inset:auto 0 0;display:block;padding:.55rem .75rem;background:var(--attention);box-shadow:0 -8px 28px rgba(0,0,0,.18)}.mobile-callbar a{display:grid;justify-items:center;gap:.05rem;color:#111820;text-decoration:none;font-size:.82rem;line-height:1.25}.mobile-callbar a span{font-weight:900}.mobile-callbar a strong{font-size:.72rem;letter-spacing:.04em}.back-to-top{bottom:4.6rem}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* No-JS fallback: navigation remains an ordinary wrapping set of links rather
   than becoming an inaccessible off-screen drawer when enhancement is absent. */
@media(max-width:820px){
  html:not(.js) .nav-toggle{display:none}
  html:not(.js) .header-shell{height:auto;min-height:var(--header);flex-wrap:wrap;padding-block:.55rem}
  html:not(.js) .primary-nav{position:static;width:100%;display:flex;flex-wrap:wrap;transform:none;visibility:visible;padding:.3rem 0 .6rem;border:0;box-shadow:none;background:transparent}
}
.primary-nav>a[aria-current="location"]{background:rgba(255,255,255,.1)}

/* HERO BACKGROUND REVISION
   The combo-boiler project is used atmospherically here because the same real
   project image appears later in semantic HTML as service/proof content. The
   layered gradients keep the Hero readable while allowing the mechanical work
   to remain visible on the right and fade naturally beneath the copy. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(31rem, 68svh, 35rem);
  padding: calc(var(--header) + clamp(2rem,3.5vw,3rem)) 0 clamp(2.25rem,3.5vw,3rem);
  display: grid;
  align-items: center;
  background: #081119;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("assets/images/new-combo-boiler.webp");
  background-size: cover;
  background-position: 68% center;
  background-repeat: no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(4, 10, 14, .96) 0%,
      rgba(6, 14, 19, .91) 34%,
      rgba(8, 18, 24, .72) 58%,
      rgba(8, 18, 24, .28) 82%,
      rgba(8, 18, 24, .42) 100%),
    linear-gradient(0deg,
      rgba(5, 12, 16, .62) 0%,
      rgba(5, 12, 16, .10) 46%,
      rgba(5, 12, 16, .32) 100%);
}

.hero-grid {
  grid-template-columns: 1fr;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}

@media(max-width:820px) {
  .hero {min-height:clamp(30rem,72svh,34rem);padding-top:calc(var(--header) + 2.25rem);padding-bottom:2.25rem}
  .hero::before {background-position:62% center}
}

.remodel-gallery-disclosure {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}

.remodel-gallery-disclosure > summary {
  cursor: pointer;
  width: fit-content;
  padding: 1.05rem 3rem 1.05rem 0;
  color: var(--copper-deep);
  font: 900 clamp(1.2rem,2vw,1.55rem)/1.25 Georgia,serif;
  list-style: none;
  position: relative;
}

.remodel-gallery-disclosure > summary::-webkit-details-marker {
  display: none;
}

.remodel-gallery-disclosure > summary::after {
  content: '+';
  position: absolute;
  right: .5rem;
  top: .9rem;
  font-size: 1.55rem;
  line-height: 1;
}

.remodel-gallery-disclosure[open] > summary::after {
  content: '–';
}

.remodel-gallery-disclosure[open] > summary {
  margin-bottom: 1rem;
}

/* Mobile Hero tuning: retain enough overlay for white-copy contrast while
   allowing more of the real combo-boiler image to read through on narrow screens. */
@media(max-width:820px) {
  .hero::after {
    background:
      linear-gradient(0deg,
        rgba(4,10,14,.88) 0%,
        rgba(5,12,16,.76) 58%,
        rgba(5,12,16,.48) 100%);
  }
}



/* Additional services are supporting information, not controls. Keep them as a
   compact semantic list rather than pill-shaped elements that imply buttons. */
.secondary-services {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.5rem;
  align-items: start;
  padding: 1.15rem 0;
  border-block: 1px solid var(--line);
}
.secondary-services h3 {
  margin: .15rem 0 0;
  font: 900 .74rem/1.3 Arial,sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.secondary-services ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .7rem 1.4rem;
}
.secondary-services li {
  position: relative;
  padding-left: 1rem;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 700;
}
.secondary-services li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: .35rem;
  height: .35rem;
  background: var(--copper);
}
@media(max-width:820px) {
  .secondary-services {grid-template-columns:1fr;gap:.8rem}
  .secondary-services ul {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px) {
  .secondary-services ul {grid-template-columns:1fr}
}

/* Owner portrait replaces the V1 image-requirement stub. Keep this treatment
   documentary and simple so the portrait functions as trust/identity proof. */
.dylan-portrait {
  margin: 0;
}
.dylan-portrait img {
  width: 100%;
  aspect-ratio: 1305 / 1206;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.dylan-portrait figcaption {
  margin-top: .8rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}


@supports not selector(:has(*)){.theme-switch{display:none}}

/* ACCESSIBILITY / RESILIENCE
   Skip navigation, sticky-header target offsets, safe-area handling and print are
   structural hardening. The two-tone focus ring remains visible on both the
   light paper surfaces and the dark/teal/yellow surfaces used by this Site. */
.skip-link{position:fixed;z-index:1000;top:.65rem;left:.65rem;padding:.7rem 1rem;background:#fff;color:#081119;font-weight:900;text-decoration:none;transform:translateY(-180%);transition:transform .12s}
.skip-link:focus{transform:none}
main[tabindex="-1"]:focus{outline:0;box-shadow:none}
section[id],main[id],h2[id]{scroll-margin-top:calc(var(--header) + 1rem)}
a,button,input,summary{scroll-margin-block:calc(var(--header) + 1rem) 5rem}
@media(max-width:820px){
  .service-ribbon-list{justify-content:flex-start}
  html:not(.js) .site-header{position:static;height:auto}
  html:not(.js) .hero{padding-top:2.25rem}
}
@media(forced-colors:active){
  :focus-visible,.theme-choice:focus-visible+.theme-button{outline:3px solid CanvasText;box-shadow:none}
  .skip-link,.button,.header-cta,.theme-button,.mobile-callbar,.back-to-top{forced-color-adjust:auto}
}
@media print{
  .site-header,.skip-link,.hero-actions,.service-ribbon,.service-now-band,.back-to-top,.mobile-callbar,.footer-column[aria-label]{display:none!important}
  body{padding:0;background:#fff;color:#000;font-size:11pt}
  .hero,.work,.contact,.site-footer{background:#fff!important;color:#000!important}
  .hero{min-height:0;padding:1rem 0}
  .section{padding-block:1.5rem}
  .work-grid,.service-cards,.review-grid,.footer-grid{display:block}
  .work-item,.service-card,.review-card{break-inside:avoid;margin-block:1rem;box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}


/* Real-work gallery disclosure.
   Keep three representative proof images visible, then fold the deeper gallery
   at every viewport size so the main customer journey stays concise. */
.work-gallery-disclosure {
  grid-column:1 / -1;
  margin-top:.15rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.work-gallery-disclosure > summary {
  position:relative;
  display:block;
  width:fit-content;
  padding:1.05rem 3rem 1.05rem 0;
  color:var(--attention);
  cursor:pointer;
  font:900 clamp(1.2rem,2vw,1.55rem)/1.25 Georgia,serif;
  list-style:none;
}
.work-gallery-disclosure > summary::-webkit-details-marker {display:none}
.work-gallery-disclosure > summary::after {
  content:'+';
  position:absolute;
  right:.5rem;
  top:.9rem;
  font-size:1.55rem;
  line-height:1;
}
.work-gallery-disclosure[open] > summary::after {content:'–'}
.work-grid-more {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:.8rem;
  padding-top:.65rem;
}
@media(max-width:980px){.work-grid-more{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.work-grid-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.work-grid-more{grid-template-columns:1fr}}

/* System-page recovery */
.error-page{min-height:100vh;display:grid;background:var(--paper)}
.error-main{display:grid;place-items:center;padding:clamp(2rem,6vw,5rem) 0}
.error-card{max-width:48rem}
.error-card>img{width:5rem;margin-bottom:1.5rem;border-radius:50%}
.error-card h1{font-size:clamp(2.6rem,8vw,5rem)}
.error-card>p:not(.eyebrow){max-width:42rem;color:var(--muted);font-size:1.08rem}

}

/* Phone service ribbon: use an intentional paired grid rather than flex-wrap.
   The right-hand services align to the opposite edge so the six-item strip
   reads as three balanced rows instead of an accidental wrapped list. */
@media(max-width:560px) {
  .service-ribbon-list {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: .7rem 1rem;
    width: 100%;
    padding-block: .85rem;
  }
  .service-ribbon-list li:nth-child(odd) {
    text-align: left;
    justify-self: start;
  }
  .service-ribbon-list li:nth-child(even) {
    text-align: left;
    justify-self: start;
  }
}

/* Why-section anchor tuning.
   The document already reserves sticky-header space through html scroll-padding.
   #why targets the section boundary, while its visible eyebrow begins after the
   section's own top padding. Cancel that internal padding so the eyebrow, rather
   than the invisible section edge, becomes the apparent landing point. */
#services,
#why,
#work,
#reviews,
#contact {
  scroll-margin-top: calc(var(--section) * -1);
}

/* Contact-channel routing contract.
   Phone-sized viewports get direct tel:/sms: actions. Tablet/desktop variants
   route visitors to the on-page contact hub instead of assuming a call handler. */
.cta-mobile { display: none !important; }
.cta-nonmobile { display: inline-flex !important; }
@media(max-width:560px) {
  .cta-mobile { display: inline-flex !important; }
  .cta-nonmobile { display: none !important; }
}

/* Phone service-now band: a direct-call path on devices that can place calls.
   Tablet/desktop visitors use the persistent contact routing to the contact hub. */
@media(min-width:561px) {
  .service-now-band { display: none; }
}


/* Service Area navigation target contract.
   Desktop/tablet keep the established #contact landing because the contact and
   service-area columns begin together. Phones stack those columns, so the nav
   instead targets the actual service-area subsection. Its top padding is
   compensated against the global scroll-padding plus this block's own top padding
   so the visible "Service area" eyebrow lands directly below the sticky header. */
.service-area-nav-phone { display: none !important; }
@media(max-width:560px) {
  .service-area-nav-standard { display: none !important; }
  .service-area-nav-phone { display: block !important; }
  #service-area { scroll-margin-top: -2.1rem; }
}