/* Polish layer on the approved layout: spacing, surfaces, and interaction states only.
   No content or structure changes. Loaded last; removing its <link> restores the previous look. */
html{scroll-padding-top:calc(min(100vw,1280px + (100vw - 1280px) * .076) * .064 + 10px)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--accent-pale);color:var(--primary-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* On wide screens the page grows to take up 16% of the empty space at the sides. */
.reference-site{width:min(97%,calc(1241.6px + (100vw - 1280px) * .1552));box-shadow:0 0 0 1px #18304208,0 30px 80px -40px #18304240}

/* Header stays in reach while scrolling. */
.site-header{position:sticky;top:0;z-index:10;background:#fffffff0;-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);box-shadow:0 1px 0 #18304212,0 8px 24px -18px #18304240}
/* Header logo about 29% larger than the original (15%, then a further 12%); mark and wordmark together. */
.brand{width:auto;gap:calc(9 * var(--u))}
.client-roof{width:calc(70.84 * var(--u));height:calc(51.52 * var(--u))}
.client-brand-text strong{font-size:calc(19.32 * var(--u))}
.client-brand-text>span{font-size:calc(14.17 * var(--u))}
@media(min-width:601px){.brand{top:calc(3 * var(--u))}}
.menu-toggle{border-radius:8px;border-color:#dce5ec;transition:background-color .15s ease,border-color .15s ease}
.menu-toggle:hover{background:var(--accent-pale);border-color:var(--accent-light)}

/* Buttons. */
.button{border-radius:calc(6 * var(--u));box-shadow:0 1px 2px #10223826,0 calc(5 * var(--u)) calc(14 * var(--u)) -6px #18304252;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background-color .18s ease,border-color .18s ease}
.button:hover{transform:translateY(-1px);box-shadow:0 2px 4px #10223826,0 calc(9 * var(--u)) calc(20 * var(--u)) -8px #1830426b}
.button:active{transform:none;box-shadow:0 1px 2px #10223826}
.button .icon{transition:transform .18s ease}
.button:hover .icon{transform:translateX(3px)}
.how-button:hover .icon{transform:none}
.button.outline{box-shadow:0 1px 2px #10223814;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.button.outline:hover{filter:none;background:#fff;border-color:var(--primary);box-shadow:0 2px 4px #10223814,0 calc(8 * var(--u)) calc(18 * var(--u)) -10px #18304240}

/* Hero surfaces and the inquiry form. */
.hero-benefits>div{border-radius:calc(8 * var(--u))}
.offer-card{border-radius:calc(10 * var(--u));border-color:#e3e9ee;box-shadow:0 1px 2px #1830420f,0 calc(14 * var(--u)) calc(34 * var(--u)) -10px #18304242}
.offer-form>input,.form-group select{border-radius:calc(5 * var(--u));border-color:#d5dde4;box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease}
.offer-form>input:hover,.form-group select:hover{border-color:#b6c4d0}
.offer-form>input:focus,.form-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.form-status,.offer-success{border-radius:calc(6 * var(--u))}

/* Cards. */
.gold-rule{border-radius:2px}
.process-card,.situation-card,.value-card{border-radius:calc(10 * var(--u));transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.process-card,.value-card{border-color:#e1e8ee;box-shadow:0 1px 2px #1830420a,0 calc(8 * var(--u)) calc(20 * var(--u)) -12px #18304226}
.situation-card{box-shadow:0 0 0 1px #1830420f,0 1px 2px #18304208,0 calc(8 * var(--u)) calc(20 * var(--u)) -12px #1830421f}
.process-card>.art-icon{background-color:#fff;box-shadow:0 0 0 calc(5 * var(--u)) #fff}
@media(hover:hover){
 .process-card:hover,.situation-card:hover,.value-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 38%,#e1e8ee);box-shadow:0 2px 4px #1830420d,0 calc(14 * var(--u)) calc(28 * var(--u)) -14px #1830423d}
 .situation-card:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 38%,#e1e8ee),0 2px 4px #1830420d,0 calc(14 * var(--u)) calc(28 * var(--u)) -14px #1830423d}
}

/* FAQ. */
.faq-grid{align-items:start}
.faq-grid details{border-radius:calc(8 * var(--u));background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.faq-grid summary{border-radius:calc(7 * var(--u));transition:background-color .15s ease,color .15s ease}
.faq-grid summary:hover{background:color-mix(in srgb,var(--wash) 65%,#fff)}
.faq-grid summary span{color:var(--primary)}
.faq-grid details[open]{border-color:color-mix(in srgb,var(--accent) 50%,#e2e8ed);box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) -12px #18304226}
.faq-grid details[open] summary{color:var(--primary)}
.view-faqs{transition:color .15s ease}
.view-faqs .icon{color:currentColor;transition:transform .18s ease}
.view-faqs:hover{color:var(--primary-deep);text-decoration:underline;text-underline-offset:3px}
.view-faqs:hover .icon{transform:translateX(3px)}

/* Footer. */
.footer-links a,.footer-legal a,a.contact-line{transition:color .15s ease}
.footer-links a:hover,.footer-legal a:hover,a.contact-line:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.accessibility-toggle{transition:transform .18s ease}
.accessibility-toggle:hover{transform:scale(1.06)}
dialog{border-radius:12px;border-color:#e1e8ee}
.reset-preferences{border-radius:6px}

@media(min-width:601px){
 .site-header nav a{transition:color .18s ease}
 .site-header nav a:after{content:'';position:absolute;left:0;right:0;bottom:calc(2 * var(--u));height:calc(2 * var(--u));border-radius:2px;background:var(--primary);transform:scaleX(0);transform-origin:left center;transition:transform .22s ease}
 .site-header nav a:hover{color:var(--primary)}
 .site-header nav a:hover:after,.site-header nav a.active:after{transform:scaleX(1)}

 /* Sections flow naturally so each has room to breathe; shared 44-unit content edge. */
 .process-section,.situations-section,.values-section{height:auto}
 .section-eyebrow,.process-section>h2,.situations-section>h2,.values-section>h2,.gold-rule,.section-intro,.process-cards,.situation-cards,.value-cards{position:static}
 .process-section>h2,.situations-section>h2,.values-section>h2{margin-top:calc(4 * var(--u))}
 .gold-rule{display:block;margin:calc(5 * var(--u)) auto 0}
 .section-intro{margin-top:calc(11 * var(--u))}
 .process-section{padding:calc(46 * var(--u)) 0 calc(54 * var(--u))}
 .process-cards{margin:calc(56 * var(--u)) calc(44 * var(--u)) 0}
 .process-card{height:auto;min-height:calc(104 * var(--u));padding:calc(38 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u))}
 .process-arrow{top:50%;right:calc(-29 * var(--u));transform:translateY(-50%);display:grid;color:var(--accent)}
 .situations-section{padding:calc(46 * var(--u)) 0 calc(50 * var(--u))}
 .situation-cards{margin:calc(26 * var(--u)) calc(20 * var(--u)) 0}
 .situation-card{height:auto;padding:calc(18 * var(--u)) 0}
 .values-section{padding:calc(46 * var(--u)) 0 calc(30 * var(--u))}
 .value-cards{margin:calc(28 * var(--u)) calc(44 * var(--u)) 0}
 .value-card{height:auto;padding:calc(20 * var(--u)) calc(8 * var(--u))}

 .faq-section{padding:calc(34 * var(--u)) calc(44 * var(--u)) calc(56 * var(--u))}
 .faq-heading h2{margin-bottom:calc(18 * var(--u))}
 .view-faqs{top:auto;bottom:calc(3 * var(--u))}
 .faq-grid{gap:calc(10 * var(--u)) calc(20 * var(--u))}
 .faq-grid summary{height:auto;min-height:calc(42 * var(--u));padding:calc(6 * var(--u)) calc(15 * var(--u))}
 .faq-grid details p{padding:0 calc(15 * var(--u)) calc(15 * var(--u))}

 .contact-banner{height:auto;min-height:calc(118 * var(--u));display:flex;align-items:center;justify-content:space-between;gap:calc(24 * var(--u));padding:calc(26 * var(--u)) calc(82 * var(--u)) calc(26 * var(--u)) calc(84 * var(--u));background-size:cover}
 .contact-banner>div,.contact-button{position:static}
 .contact-button{flex:none}

 .site-footer{height:calc(186 * var(--u))}
 .site-footer:after{content:'';position:absolute;left:calc(44 * var(--u));right:calc(91 * var(--u));bottom:calc(36 * var(--u));height:1px;background:#ffffff1f}
 .footer-brand{left:calc(44 * var(--u));top:calc(34 * var(--u));height:calc(84 * var(--u))}
 .site-footer section{top:calc(30 * var(--u))}
 .site-footer section h2{margin-bottom:calc(8 * var(--u))}
 .copyright{left:calc(44 * var(--u));bottom:calc(12 * var(--u))}
 .footer-legal{bottom:calc(12 * var(--u))}
}

@media(min-width:601px) and (max-width:900px){
 .situation-card,.value-card,.process-card{padding-inline:5px}
}

/* Where card copy no longer fits its desktop line breaks, wrap to the card instead. */
@media(max-width:900px){
 .process-card p br,.situation-card p br,.value-card p br{display:none}
 .process-card p,.situation-card p,.value-card p{text-wrap:balance}
}

@media(max-width:600px){
 html{scroll-padding-top:86px}
 .process-section,.situations-section,.values-section{padding-block:42px}
 .values-section{padding-bottom:30px}
 .faq-section{padding:14px 20px 44px}
 .contact-banner{padding:34px 20px}
 .site-footer{padding:32px 20px 28px}
 /* Hero description reads as part of the headline: larger type on a soft wash, with an accent bar instead of a box. */
 .hero-clean-left{display:block;width:100%;height:310px;opacity:1;mask-image:none;background:linear-gradient(180deg,#f3f8fbd9 0%,#f3f8fbcc 68%,#f3f8fb00 100%)}
 .hero-description{top:184px;padding:2px 0 2px 14px;border:0;border-left:3px solid var(--accent);border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:17px;line-height:26px;font-weight:500;color:#1a2c3d;text-wrap:balance}
 .footer-social p br{display:none}
 .footer-social p{text-wrap:balance}
}

/* Gentle motion, only where the visitor has not asked for less. */
@keyframes polish-fade{from{opacity:0;translate:0 -4px}}
@keyframes polish-rise{from{opacity:0;translate:0 16px}}
@media(prefers-reduced-motion:no-preference){
 .faq-grid details[open] p{animation:polish-fade .25s ease both}
 @supports(animation-timeline:view()){
  .process-card,.situation-card,.value-card,.faq-grid details{animation:polish-rise linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
 }
}
@media(prefers-reduced-motion:reduce){
 .button,.button .icon,.process-card,.situation-card,.value-card,.accessibility-toggle,.site-header nav a:after{transition:none}
 .button:hover,.process-card:hover,.situation-card:hover,.value-card:hover,.accessibility-toggle:hover{transform:none}
}

@media(max-width:600px){.reference-site{width:100%}}