/* =====================================================================
   Ace Gutters
   The current acegutterservices.co.uk look (red page frame, white and
   charcoal panels, Helvetica with tight tracking), refined: gutter-profile
   cards, roof-pitch seams between sections, one quiet motion moment.

   Contents
   1. Tokens          6. Services         11. Forms
   2. Base            7. About            12. Footer
   3. Buttons         8. Reviews          13. Inner pages
   4. Header          9. Call band        14. Downpipe + mobile call bar
   5. Frame + hero   10. FAQ + quote      15. Motion
                                          16. Responsive
                                          17. Reduced motion
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* colour */
  --red:#B51B1B;
  --red-press:#981616;
  --red-tint:#F7DEDC;           /* secondary text on red */
  --red-wash:#FBEAEA;           /* hover wash on white */
  --red-ring:rgba(181,27,27,.14);
  --page:#F4F1EF;               /* soft warm grey behind the panels */
  --ink:#030303;
  --charcoal:#2B2B2B;
  --subtle:#F5F5F5;
  --line:#D9D9D9;
  --muted:#4A4A4A;
  --quiet:#555;
  --field:#8A8A8A;

  /* type: one scale */
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --t-xs:13px;
  --t-sm:15px;
  --t-base:16px;
  --t-md:18px;
  --t-lg:22px;
  --t-xl:clamp(26px,2.4vw,34px);
  --t-2xl:clamp(24px,2.8vw,40px);
  --t-hero:clamp(56px,10.6vw,140px);
  --t-mega:clamp(46px,9.6vw,132px);

  /* shape */
  --frame:16px;
  --radius:28px;                /* panels */
  --r-card:8px 8px 30px 30px;   /* half-round gutter: tight top, generous bottom */
  --r-card-sm:6px 6px 20px 20px;
  --r-field:12px;
  --r-pill:999px;
  --pitch:clamp(28px,4.2vw,72px);
  --max:1240px;                 /* content inside a panel */
  --wrap:1360px;                /* the red frame, centred on wide screens */

  /* depth: warm-tinted, always offset downwards with a soft blur (light from above) */
  --sh-sm:0 1px 2px rgba(40,6,6,.10),0 2px 6px -2px rgba(40,6,6,.12);
  --sh-md:0 2px 4px rgba(40,6,6,.08),0 12px 28px -10px rgba(40,6,6,.28);
  --sh-lg:0 4px 8px rgba(40,6,6,.08),0 28px 60px -22px rgba(40,6,6,.45);
  --sh-red:0 6px 16px -6px rgba(181,27,27,.55);

  /* motion */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* anything the script hides stays hidden, whatever its layout style */
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:var(--t-md);line-height:1.4;letter-spacing:-0.06em;-webkit-font-smoothing:antialiased;overflow-x:hidden;caret-color:var(--red);scrollbar-color:var(--field) var(--page)}
img{display:block;max-width:100%}
a{color:inherit}
button,input,textarea,select{font:inherit;letter-spacing:inherit;color:inherit}
h1,h2,h3,p{margin:0;font-weight:400}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.dark :focus-visible,.about :focus-visible{outline-color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-pill);letter-spacing:0;transition:top 160ms var(--ease-out)}
.skip:focus{top:16px}

/* ---------- 3. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;font-size:var(--t-base);letter-spacing:0;line-height:1;white-space:nowrap;padding:14px 22px;transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,box-shadow 200ms ease;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:active{transform:scale(.97)}
.btn svg{width:14px;height:14px;transition:transform 200ms var(--ease-out)}
.btn-red{background:var(--red);color:#fff}
.btn-black{background:var(--ink);color:#fff}
.btn-outline{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.btn-lg{padding:18px 28px;font-size:var(--t-md)}
.btn-lg svg{width:16px;height:16px}
.btn[disabled]{opacity:.7;cursor:progress}
@media (hover:hover) and (pointer:fine){
  .btn-red:hover{background:var(--red-press)}
  .btn-black:hover{background:#222}
  .btn-outline:hover{background:var(--red);color:#fff}
  .btn:hover svg{transform:translateX(3px)}
}

/* ---------- 4. Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;transition:box-shadow 250ms ease}
.site-header.scrolled{box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 24px -12px rgba(0,0,0,.25)}
.admin-bar .site-header{top:32px}
.hdr-main{max-width:var(--wrap);margin:0 auto;padding:16px 32px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:48px}
.brand{display:flex;align-items:center;gap:14px;min-height:44px;text-decoration:none;font-size:20px;letter-spacing:-0.06em}
.brand img{width:72px;height:auto;mix-blend-mode:multiply}
.brand span{white-space:nowrap}
.brand-mark{width:64px;height:auto}
.brand--custom img{max-height:60px;width:auto}
.nav{display:flex;gap:16px;list-style:none;margin:0;padding:0;font-size:var(--t-base);letter-spacing:-0.02em}
.nav li{list-style:none}
.nav a{position:relative;padding:4px 0;text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 250ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav a:hover::after{transform:scaleX(1);transform-origin:left}}
.hdr-actions{display:flex;align-items:center;gap:18px}
.hdr-call{display:inline-flex;align-items:center;gap:10px;padding:4px 6px 4px 4px;border-radius:var(--r-pill);text-decoration:none;color:var(--ink)}
.hdr-call-icon{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;flex:none;transition:transform 220ms var(--ease-out)}
.hdr-call-icon svg{width:18px;height:18px}
.hdr-call-num{font-size:var(--t-lg);letter-spacing:-0.05em;line-height:1;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .hdr-call:hover .hdr-call-icon{transform:rotate(-12deg) scale(1.06)}
  .hdr-call:hover .hdr-call-num{color:var(--red)}
}
.nav-toggle{display:none}

/* ---------- 5. Frame, panels, hero ---------- */
main{max-width:var(--wrap);margin:0 auto;padding:var(--frame) var(--frame) 0;display:grid;gap:var(--frame)}
.panel{position:relative;overflow:hidden;background:#fff;border-radius:var(--radius);box-shadow:0 1px 2px rgba(40,6,6,.05),0 18px 40px -26px rgba(40,6,6,.22)}
.panel.dark{background:var(--charcoal);color:#fff}
.inner{max-width:var(--max);margin:0 auto;padding:40px}
.label{display:flex;align-items:center;gap:10px;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:-0.04em}
.label::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red)}
.dark .label::before,.about .label::before,.reviews .label::before{background:#fff}

.hero-copy{text-align:center;padding:100px 24px 40px}
.hero h1{font-size:var(--t-hero);line-height:.92;letter-spacing:-0.075em}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line span{display:inline-block}
.hero h1 .line-ink{position:relative}
/* the tile fill: the same words, painted with the roof as you scroll */
.hero h1 .line-tile{position:absolute;inset:0;color:transparent;background-image:var(--roof),linear-gradient(var(--red),var(--red));background-size:240% auto,100% 100%;background-position:58% 78%,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;opacity:0;pointer-events:none;user-select:none}
.hero .sub{font-size:clamp(22px,2.5vw,36px);line-height:1.1;letter-spacing:-0.06em;margin-top:18px}
.hero-cta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:18px 34px;margin-top:38px}
.call-link{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);text-align:left}
.call-ring{width:56px;height:56px;border-radius:50%;border:2px solid var(--red);color:var(--red);display:grid;place-items:center;flex:none;transition:background-color 220ms ease,color 220ms ease}
.call-ring svg{width:24px;height:24px}
.call-text{display:grid;gap:4px}
.call-text small{font-size:var(--t-sm);letter-spacing:-0.02em;color:var(--muted)}
.call-text strong{font-weight:400;font-size:var(--t-xl);letter-spacing:-0.06em;line-height:1}
@media (hover:hover) and (pointer:fine){.call-link:hover .call-ring{background:var(--red);color:#fff}}

.hero-stage{position:relative;min-height:700px;perspective:1200px;perspective-origin:40% 100%}
.hero-img{position:absolute;inset:auto 0 0 0;z-index:2;height:640px;width:100%;object-fit:cover;object-position:left bottom;transform-origin:40% 100%;backface-visibility:hidden}

/* rating badge: sits behind the roof and slides down under it as you scroll */
.badge{position:absolute;left:16px;top:0;z-index:1;display:block;width:290px;overflow:hidden;background:var(--red);color:#fff;border-radius:var(--r-card);text-decoration:none;will-change:transform}
.badge:focus-visible{outline-color:#fff;outline-offset:-6px}
.badge-in{display:block;padding:28px 0 30px;text-align:center;transition:transform 220ms var(--ease-out)}
.badge .stars{display:flex;justify-content:center;gap:8px}
.badge .stars svg{width:18px;height:18px}
.badge .score{display:block;font-size:128px;line-height:1;letter-spacing:-0.075em;margin-top:8px}
.badge small{display:block;font-size:var(--t-md);letter-spacing:-0.06em;margin-top:6px}
@media (hover:hover) and (pointer:fine){.badge:hover .badge-in{transform:translateY(-2px)}}

.contact-card{position:absolute;z-index:3;right:16px;top:24px;width:min(560px,calc(100% - 32px));background:#fff;border-radius:var(--r-card);padding:34px 34px 26px;box-shadow:0 20px 60px -30px rgba(0,0,0,.45)}
.contact-card h2{font-size:var(--t-xl);letter-spacing:-0.05em;margin-bottom:6px}
.card-lead{font-size:var(--t-sm);line-height:1.4;letter-spacing:-0.01em;color:var(--muted);margin-bottom:20px}

/* ---------- 6. Services ---------- */
#services{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--pitch)));border-bottom-left-radius:0;border-bottom-right-radius:0}
#services .inner{padding-bottom:calc(40px + var(--pitch))}
.svc-head{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;padding:20px 0 36px}
.svc-head .label{padding-top:12px}
.svc-head p{font-size:var(--t-2xl);line-height:1.2;letter-spacing:-0.06em}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc{position:relative;display:block;width:100%;min-height:420px;overflow:hidden;background:var(--subtle);border-radius:var(--r-card);cursor:pointer;text-align:left}
.svc:nth-child(even){background:var(--line)}
.svc-front,.svc-back{position:absolute;inset:0;display:flex;flex-direction:column;padding:10px}
.svc-front{width:100%;background:none;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit;letter-spacing:inherit}
.svc-front .img-wrap{flex:1;max-height:330px;overflow:hidden;border-radius:3px 3px 22px 22px}
.svc-front img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.svc-front .meta{display:flex;align-items:center;gap:16px;padding:14px 6px 4px}
.svc-front .num{font-size:56px;line-height:.8;letter-spacing:-0.06em}
.svc-front .name{font-size:var(--t-sm);text-transform:uppercase;letter-spacing:-0.04em;padding-bottom:4px}
@media (hover:hover) and (pointer:fine){.svc:not(.open):hover .svc-front img{transform:scale(1.04)}}
/* details spread from the number in red */
.svc-back{justify-content:flex-start;padding:44px 26px 30px;background:var(--red);color:#fff;clip-path:circle(0% at 14% 90%);transition:clip-path 340ms cubic-bezier(0.4,0,0.2,1);pointer-events:none}
.svc.open .svc-back{clip-path:circle(160% at 14% 90%);transition:clip-path 620ms var(--ease-out);pointer-events:auto}
.svc-back .num--back{position:absolute;right:18px;top:6px;font-size:120px;line-height:1;letter-spacing:-0.08em;color:rgba(255,255,255,.16)}
.svc-back h3{font-size:var(--t-xl);line-height:1;letter-spacing:-0.08em;text-transform:uppercase}
.svc-back p{font-size:var(--t-base);line-height:1.45;letter-spacing:-0.03em;margin:14px 0 26px;color:var(--red-tint)}
.svc-actions{display:grid;justify-items:start;gap:14px;margin-top:auto}
.svc-back h3,.svc-back p,.svc-actions{position:relative;opacity:0;transform:translateY(10px);transition:opacity 180ms ease,transform 180ms ease}
.svc.open .svc-back h3,.svc.open .svc-back p,.svc.open .svc-actions{opacity:1;transform:none;transition:opacity 420ms ease,transform 520ms var(--ease-out)}
.svc.open .svc-back h3{transition-delay:120ms}
.svc.open .svc-back p{transition-delay:180ms}
.svc.open .svc-actions{transition-delay:240ms}
.svc-back .btn-black{background:#fff;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.svc-back .btn-black:hover{background:var(--ink);color:#fff}}
/* touch screens: everything visible, no flip */
.svc-flat .svc{display:flex;flex-direction:column;min-height:0;cursor:default}
.svc-flat .svc-front,.svc-flat .svc-back{position:relative;inset:auto}
.svc-flat .svc-front{pointer-events:none;padding:10px 10px 0}
.svc-flat .svc-front .img-wrap{flex:none;aspect-ratio:4/3;max-height:none}
.svc-flat .svc-back{clip-path:none;background:transparent;color:var(--ink);padding:4px 16px 22px;pointer-events:auto}
.svc-flat .svc-back .num--back{display:none}
.svc-flat .svc-back h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.svc-flat .svc-back p,.svc-flat .svc-actions{opacity:1;transform:none}
.svc-flat .svc-back p{color:#333;margin:6px 0 18px}
.svc-flat .svc-back .btn-black{background:var(--ink);color:#fff}

/* ---------- 7. About ---------- */
.panel.about{margin-top:calc(-1 * var(--pitch));clip-path:polygon(0 0,100% var(--pitch),100% 100%,0 100%);border-top-left-radius:0;border-top-right-radius:0;background:linear-gradient(165deg,#A91C1C 0%,#9A1818 55%,#8E1515 100%);color:#fff;isolation:isolate}
.panel.about .inner{padding-top:calc(36px + var(--pitch))}
.about-mark{position:absolute;right:-40px;bottom:-60px;z-index:-1;width:min(620px,52%);height:auto;opacity:.1;pointer-events:none;will-change:transform}
.about .cols{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:80px;padding:40px 0 60px}
.about-lead{display:grid;gap:34px}
.about .statement{font-size:var(--t-2xl);line-height:1.2;letter-spacing:-0.06em}
.about .body p{font-size:var(--t-base);line-height:1.5;letter-spacing:-0.035em;margin-bottom:22px;color:var(--red-tint)}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.facts li{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-pill);background:rgba(0,0,0,.06);font-size:var(--t-base);letter-spacing:-0.03em}
.facts li::before{content:"";width:16px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- 8. Reviews ---------- */
.reviews{min-height:1100px;color:#fff}
.reviews .bg{position:absolute;inset:0;overflow:hidden}
.reviews .bg img{width:100%;height:100%;object-fit:cover;object-position:48% 50%}
.reviews .label{position:relative;z-index:1;padding:28px 40px}
.rv-card{position:absolute;z-index:1;right:24px;top:150px;width:min(600px,calc(100% - 48px));min-height:600px;display:flex;flex-direction:column;padding:110px 80px 60px;background:#fff;color:var(--ink);border-radius:var(--r-card)}
.rv-viewport{position:relative;flex:1;display:grid}
.rv-slide{grid-area:1/1;transition:opacity 400ms ease,transform 400ms var(--ease-out)}
.rv-slide[aria-hidden="true"]{opacity:0;transform:translateX(16px);pointer-events:none}
.rv-slide.leaving{transform:translateX(-16px)}
.rv-slide blockquote{margin:0;font-size:var(--t-xl);line-height:1.15;letter-spacing:-0.07em}
.rv-slide cite{display:block;font-style:normal;font-size:var(--t-lg);letter-spacing:-0.06em;margin-top:56px}
.rv-when{color:var(--quiet)}
.rv-arrow{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--red);cursor:pointer;transition:transform 160ms var(--ease-out),background-color 200ms ease}
.rv-arrow:active{transform:scale(.92)}
.rv-arrow svg{width:22px;height:22px}
.rv-prev{left:10px}
.rv-next{right:10px}
.rv-controls{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:22px}
.rv-dots{display:flex;justify-content:center}
.rv-dots button{position:relative;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.rv-dots button::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--line);transition:width 360ms var(--ease-out),background-color 200ms ease}
.rv-dots button[aria-current="true"]::before{width:30px;background:#EBCFCD}
/* the active dot fills as the timer */
.rv-progress{position:absolute;left:7px;top:18px;width:30px;height:8px;overflow:hidden;border-radius:var(--r-pill)}
.rv-progress i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
.rv-progress.run i{animation:rvprog var(--rv-ms,7000ms) linear forwards}
.rv-card:hover .rv-progress i,.rv-card:focus-within .rv-progress i{animation-play-state:paused}
.rv-card.is-paused .rv-progress i{transform:scaleX(1)}
.rv-pause{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background-color 200ms ease}
.rv-pause-ico{width:11px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.rv-card.is-paused .rv-pause-ico{width:0;height:0;margin-left:3px;border-right:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
@media (hover:hover) and (pointer:fine){.rv-arrow:hover,.rv-pause:hover,.rv-dots button:hover{background:var(--red-wash)}}
.rv-actions{display:flex;justify-content:center;margin-top:30px}
.rv-attrib{text-align:center;font-size:var(--t-xs);letter-spacing:0;color:var(--quiet);margin-top:18px}
.rv-attrib a{color:var(--red);text-underline-offset:.2em}

/* ---------- 9. Call band ---------- */
.panel.callband{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--pitch)),0 100%);border-bottom-left-radius:0;border-bottom-right-radius:0}
.callband-inner{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:10px 24px;padding-top:56px;padding-bottom:calc(60px + var(--pitch))}
.callband .label{align-self:start;padding-top:18px}
.callband-num{display:inline-flex;align-items:center;justify-self:start;gap:clamp(14px,2vw,28px);text-decoration:none;color:var(--red)}
.callband-icon{width:clamp(56px,7vw,104px);height:clamp(56px,7vw,104px);display:grid;place-items:center;flex:none;border-radius:50%;background:var(--red);color:#fff;transition:transform 260ms var(--ease-out),background-color 200ms ease}
.callband-icon svg{width:46%;height:46%}
.callband-digits{font-size:var(--t-mega);line-height:.92;letter-spacing:-0.075em;white-space:nowrap;padding-bottom:.06em;background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 3px no-repeat;transition:background-size 420ms var(--ease-out),color 200ms ease}
.callband-meta{grid-column:2;font-size:var(--t-md);letter-spacing:-0.03em;color:var(--muted)}
.callband-meta span{white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .callband-num:hover .callband-digits{background-size:100% 3px;color:var(--ink)}
  .callband-num:hover .callband-icon{transform:rotate(-12deg);background:var(--ink)}
}

/* ---------- 10. FAQ + quote ---------- */
.panel.faq{margin-top:calc(-1 * var(--pitch));clip-path:polygon(0 var(--pitch),100% 0,100% 100%,0 100%);border-top-left-radius:0;border-top-right-radius:0}
.panel.faq .inner{padding-top:calc(40px + var(--pitch))}
.faq .top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:6px}
.faq h2{font-size:var(--t-2xl);line-height:1;letter-spacing:-0.07em}
.search{position:relative}
.search input{width:280px;padding:8px 32px 8px 0;border:0;border-bottom:1px solid #6B6B6B;border-radius:0;background:transparent;color:#fff;font-size:var(--t-base);letter-spacing:0}
.search input::placeholder{color:#F28B86}
.search input:focus{outline:none;border-color:#fff}
.search svg{position:absolute;right:4px;top:50%;width:18px;height:18px;margin-top:-9px;color:#F28B86}
.tabs{position:relative;display:flex;margin:28px 0 22px;border-bottom:1px solid #444}
.tab{position:relative;padding:12px 28px;border:0;background:none;color:#fff;font-size:var(--t-base);letter-spacing:-0.02em;cursor:pointer}
.tab-ind{position:absolute;bottom:-1px;left:0;width:0;height:2px;background:#fff;transition:transform 300ms var(--ease-in-out),width 300ms var(--ease-in-out)}
.qa-list{display:grid;gap:10px;padding-bottom:30px}
.qa{background:#fff;color:var(--ink);border-radius:var(--r-card-sm)}
.qa[hidden]{display:none}
.qa h3{font-size:inherit}
.qa-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;border:0;background:none;color:var(--red);font-size:var(--t-lg);letter-spacing:-0.02em;text-align:left;cursor:pointer}
.pm{position:relative;width:20px;height:20px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform 250ms var(--ease-out)}
.pm::after{transform:rotate(90deg)}
.qa.open .pm::after{transform:rotate(0)}
.qa-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 280ms var(--ease-out)}
.qa.open .qa-panel{grid-template-rows:1fr}
.qa-panel>div{overflow:hidden}
.qa-panel p{padding:0 24px 22px;font-size:var(--t-md);line-height:1.5;letter-spacing:-0.02em;opacity:0;transform:translateY(-4px);transition:opacity 220ms ease,transform 280ms var(--ease-out)}
.qa.open .qa-panel p{opacity:1;transform:none}
.no-results{padding:10px 0 30px;color:#BBB;font-size:var(--t-base);letter-spacing:0}

.quote .inner{padding:44px 40px 110px}
.quote h2{text-align:center;color:var(--red);font-size:var(--t-2xl);line-height:1;letter-spacing:-0.08em}
.quote .lead{text-align:center;font-size:var(--t-base);letter-spacing:-0.03em;margin:14px 0 30px}
.quote .lead-form{max-width:720px;margin:0 auto;display:grid}
.quote .form-actions{margin-top:26px}
.quote .lead-done{max-width:640px;margin:0 auto;text-align:center;justify-items:center}
.quote-call{text-align:center;margin-top:26px;font-size:var(--t-md);letter-spacing:-0.03em}
.quote-call a{display:inline-flex;align-items:center;gap:8px;margin-left:6px;color:var(--red);text-decoration:none;font-size:var(--t-lg);letter-spacing:-0.05em}
.quote-call a:hover{text-decoration:underline;text-underline-offset:.18em}
.quote-call svg{width:20px;height:20px}

/* ---------- 11. Forms ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.grid2,.grid3{display:grid;min-width:0}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.field{display:grid;align-content:start;gap:7px}
.field--wide{grid-column:1/-1}
.field label{font-size:var(--t-sm);letter-spacing:-0.02em}
.req::after{content:" *"}
.box-input{width:100%;min-width:0;min-height:52px;padding:14px 16px;border:1px solid var(--field);border-radius:var(--r-field);background:#fff;font-size:var(--t-base);line-height:1.3;letter-spacing:0;transition:border-color 200ms ease,box-shadow 200ms ease}
.box-input::placeholder{color:#6B6B6B;opacity:1}
.box-input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px var(--red-ring)}
.box-input[aria-invalid="true"]{border-color:var(--red);background-color:#FFF6F6}
textarea.box-input{min-height:110px;resize:vertical}
select.box-input{appearance:none;padding-right:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23030303' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
select.box-input.flash{animation:pick 1100ms var(--ease-out)}
.hint{font-size:var(--t-xs);line-height:1.35;letter-spacing:0;color:var(--quiet)}
.form-actions{display:grid;gap:10px;margin-top:20px}
.form-actions .btn{width:100%;padding:18px 24px}
.assure{font-size:var(--t-xs);line-height:1.4;letter-spacing:0;color:var(--quiet);text-align:center}
.form-note{font-size:var(--t-sm);letter-spacing:-0.01em;margin-top:12px}
.form-note:empty{display:none}
.form-note .ok{color:#1D7A33}
.form-note .err{color:var(--red)}
.lead-done{display:grid;gap:10px;padding:6px 0 4px}
.lead-done[hidden]{display:none}
.lead-done:focus{outline:none}
.done-title{font-size:var(--t-xl);line-height:1;letter-spacing:-0.07em;color:var(--red)}
.done-text{max-width:52ch;font-size:var(--t-base);line-height:1.45;letter-spacing:-0.03em}

/* ---------- 12. Footer ---------- */
.site-footer{max-width:var(--wrap);margin:0 auto;padding:var(--frame) var(--frame) 28px}
.foot{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr .7fr;gap:40px;padding:48px 40px 40px}
.foot-logo{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font-size:var(--t-lg);letter-spacing:-0.05em}
.foot-logo img{width:56px;height:auto;mix-blend-mode:multiply}
.foot-about{max-width:34ch;margin:14px 0 22px;font-size:var(--t-sm);line-height:1.5;letter-spacing:-0.02em;color:var(--muted);text-wrap:pretty}
.foot-h{margin-bottom:14px;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--quiet)}
.foot-tel{display:inline-flex;align-items:center;min-height:44px;color:var(--red);text-decoration:none;font-size:var(--t-lg);letter-spacing:-0.05em}
.foot-mail{display:flex;width:fit-content;align-items:center;min-height:32px;font-size:var(--t-sm);letter-spacing:-0.02em;text-decoration:none}
.foot address{margin-top:10px;font-style:normal;font-size:var(--t-sm);line-height:1.6;letter-spacing:-0.02em;color:var(--muted)}
.foot-hours{margin-top:10px;font-size:var(--t-sm);line-height:1.6;letter-spacing:-0.02em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:var(--t-sm);letter-spacing:-0.02em}
.foot ul a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
.foot-bar{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;padding:18px 40px 26px;border-top:1px solid var(--line);font-size:var(--t-xs);letter-spacing:0;color:var(--quiet)}
.foot-legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}
.foot-legal a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
@media (hover:hover) and (pointer:fine){.foot ul a:hover,.foot-mail:hover,.foot-legal a:hover,.foot-logo:hover span{color:var(--red)}.foot-tel:hover{text-decoration:underline}}

/* About: the counties we cover, each one findable at a glance */
.areas{display:grid;gap:12px}
.areas-label{font-size:var(--t-sm);letter-spacing:-0.02em;color:var(--red-tint)}

/* Cookie banner: bottom-left card on desktop, full-width sheet on phones */
.cc{position:fixed;left:20px;bottom:20px;z-index:90;width:min(440px,calc(100% - 40px));background:#fff;color:var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-lg),0 0 0 1px rgba(0,0,0,.04);letter-spacing:-0.01em}
.cc[hidden]{display:none}
.cc-in{padding:22px 22px 20px}
.cc-title{font-size:var(--t-md);letter-spacing:-0.03em;margin-bottom:6px}
.cc-text{font-size:var(--t-sm);line-height:1.5;color:var(--muted)}
.cc-text a{color:var(--red)}
.cc-prefs{display:grid;gap:10px;margin-top:14px}
.cc-prefs[hidden]{display:none}
.cc-opt{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:var(--t-sm);line-height:1.4;color:var(--muted)}
.cc-opt strong{font-weight:400;color:var(--ink)}
.cc-opt input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--red)}
.cc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cc-actions .btn{flex:1 1 auto;padding:12px 16px;font-size:var(--t-sm)}
.cc-actions [hidden]{display:none}
.cc-btn{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover) and (pointer:fine){.cc-btn:hover{box-shadow:inset 0 0 0 1px var(--ink)}}
.foot-cookie{border:0;background:none;padding:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;min-height:32px}
@media (hover:hover) and (pointer:fine){.foot-cookie:hover{color:var(--red)}}
.foot-bar .copy{margin-right:auto}

/* ---------- 13. Inner pages ---------- */
.hero--page .hero-copy{padding:90px 24px 80px}
.hero--page h1{font-size:clamp(48px,8vw,120px)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.page-panel .inner{padding:70px 40px 90px}
.page-title{font-size:clamp(40px,6vw,88px);line-height:.95;letter-spacing:-0.07em;margin-bottom:36px}
.prose{max-width:68ch;font-size:var(--t-md);line-height:1.55;letter-spacing:-0.02em}
.prose>*+*{margin-top:1em}
.prose h2{font-size:var(--t-xl);line-height:1.1;letter-spacing:-0.05em;margin-top:1.6em}
.prose h3{font-size:var(--t-lg);letter-spacing:-0.04em;margin-top:1.4em}
.prose ul{list-style:disc;padding-left:1.3em}
.prose ol{padding-left:1.3em}
.prose a{color:var(--red)}
.prose--lead{max-width:none;font-size:var(--t-xl);line-height:1.25;letter-spacing:-0.05em}
.commercial-intro{display:grid;grid-template-columns:200px 1fr;gap:24px;padding-top:50px;padding-bottom:60px}
.commercial-intro .label{padding-top:12px}
.post-summary+.post-summary{margin-top:2em;padding-top:2em;border-top:1px solid var(--line)}

/* ---------- 14. Downpipe + mobile call bar ---------- */
/* the left side of the red frame fills as you scroll and names each section */
.downpipe{position:fixed;left:calc(max(0px,(100vw - var(--wrap)) / 2) + var(--frame) / 2 - 2px);top:0;bottom:0;z-index:40;width:4px;border-radius:2px;background:rgba(40,6,6,.08);pointer-events:none}
.downpipe i{display:block;height:100%;border-radius:2px;background:var(--red);transform-origin:top;transform:scaleY(var(--sp,0))}
.pipe-tag{position:absolute;left:-2px;top:clamp(140px,calc(var(--sp,0) * 100%),calc(100% - 60px));display:flex;align-items:center;gap:8px;padding:10px 18px 10px 14px;border-radius:0 var(--r-pill) var(--r-pill) 0;background:#fff;color:var(--red);font-size:var(--t-base);letter-spacing:-0.02em;line-height:1;white-space:nowrap;box-shadow:0 2px 4px rgba(0,0,0,.16),0 10px 28px -6px rgba(0,0,0,.42);opacity:0;transform:translate(-6px,-50%);transition:transform 220ms var(--ease-out),opacity 180ms ease}
.pipe-tag::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--red)}
.pipe-tag.show{opacity:1;transform:translate(0,-50%);transition:transform 300ms var(--ease-out),opacity 200ms ease}
.mob-call{display:none}

/* ---------- 15. Motion ---------- */
/* Scroll reveals hide content only once main.js has run (it adds .motion), so nothing stays blank if the script is slow. */
.motion [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 600ms ease,transform 700ms var(--ease-out);transition-delay:var(--d,0ms)}
.motion [data-reveal].in{opacity:1;transform:none}
/* the one sideways reveal: service cards fill in left to right, like water along a gutter */
.motion [data-reveal="flow"]{opacity:1;transform:translateX(-18px);clip-path:inset(0 100% 0 0);transition:clip-path 1100ms cubic-bezier(0.65,0,0.35,1),transform 1100ms var(--ease-out);transition-delay:var(--d,0ms)}
.motion [data-reveal="flow"].in{clip-path:inset(-24px);transform:none}

/* hero opening runs on CSS so it never waits for the script */
.js .hero h1 .line-ink{animation:line-in 1100ms var(--ease-out) var(--d) both}
.js .hero .sub{animation:rise-in 800ms var(--ease-out) 360ms both}
.js .hero .hero-cta{animation:rise-in 900ms var(--ease-out) 520ms both}
.js .hero .hero-img{animation:roof-in 1200ms var(--ease-in-out) 220ms both}
.js .hero .badge{animation:fade-in 600ms ease 700ms both}
/* desktop: the house starts laid back and main.js spins it forward as you scroll */
@media (min-width:761px){html.motion .hero-stage .hero-img{transform:translate3d(0,40px,0) rotateX(30deg) rotateY(12deg) scale(1.05)}}

@keyframes line-in{from{transform:translateY(105%)}to{transform:none}}
@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes roof-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes house-turn{from{transform:rotateX(30deg) rotateY(12deg) scale(1.04)}to{transform:none}}
@keyframes rvprog{to{transform:scaleX(1)}}
@keyframes pick{0%{box-shadow:0 0 0 0 rgba(181,27,27,.5);border-color:var(--red)}100%{box-shadow:0 0 0 14px rgba(181,27,27,0)}}

/* rendering budget: skip off-screen work */
.panel.faq,.panel.quote,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---------- Depth: shadows where something sits on top of something else ---------- */
.btn-red{box-shadow:var(--sh-red)}
.btn-black{box-shadow:var(--sh-sm)}
.hdr-call-icon,.callband-icon{box-shadow:var(--sh-red)}
.contact-card{box-shadow:var(--sh-lg)}
.rv-card{box-shadow:0 4px 8px rgba(0,0,0,.10),0 30px 70px -24px rgba(0,0,0,.55)}
.badge{box-shadow:var(--sh-md)}
.svc{box-shadow:var(--sh-sm);transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out)}
.svc-front .img-wrap{box-shadow:0 1px 3px rgba(0,0,0,.12)}
.qa{box-shadow:0 1px 2px rgba(0,0,0,.25),0 8px 20px -12px rgba(0,0,0,.5);transition:box-shadow 260ms var(--ease-out)}
.qa.open{box-shadow:0 2px 4px rgba(0,0,0,.25),0 18px 36px -14px rgba(0,0,0,.6)}
.box-input{box-shadow:inset 0 1px 2px rgba(40,6,6,.06)}
.facts li{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 12px -8px rgba(40,0,0,.5)}
@media (hover:hover) and (pointer:fine){
  .btn-red:hover{box-shadow:0 10px 22px -8px rgba(181,27,27,.6)}
  .svc-grid:not(.svc-flat) .svc:hover,.svc.open{transform:translateY(-4px);box-shadow:var(--sh-md)}
}
.btn-red:active,.btn-black:active{box-shadow:var(--sh-sm)}

/* ---------- Polish ---------- */
.hero h1,.page-title,.hero--page h1,.quote h2,.faq h2,.contact-card h2,.svc-back h3{text-wrap:balance}
.hero .sub,.svc-head p,.about .statement,.rv-slide blockquote,.prose p,.qa-panel p,.card-lead,.done-text{text-wrap:pretty}
a{text-underline-offset:.18em}
.svc-front:focus-visible{outline-offset:-4px}
.qa-btn:focus-visible{outline-color:var(--ink);outline-offset:-3px;border-radius:var(--r-card-sm)}
/* while searching the FAQs every group shows, so the tabs step back */
.tabs.is-searching{opacity:.4;pointer-events:none}
.tabs.is-searching .tab-ind{opacity:0}

/* touch screens: every tap target at least 44px tall */
@media (pointer:coarse){
  .foot ul a,.foot-mail,.foot-legal a,.rv-attrib a{display:inline-flex;align-items:center;min-height:44px}
  .search input{min-height:44px}
  .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0}
}

/* ---------- Commercial page ---------- */
.com-hero .hero-copy{padding:90px 24px 80px}
.com-intro{max-width:54ch;margin:22px auto 0;font-size:var(--t-md);color:var(--muted)}
.com-offer{display:grid;grid-template-columns:200px 1fr;gap:24px;padding-top:56px;padding-bottom:64px}
.com-offer .label{padding-top:6px;align-self:start}
.com-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.com-list li{padding:26px 26px 28px;background:var(--subtle);border-radius:var(--r-card);box-shadow:var(--sh-sm)}
.com-list li:nth-child(2),.com-list li:nth-child(3){background:#EFEFEF}
.com-list h3{display:flex;align-items:center;gap:12px;font-size:var(--t-lg);letter-spacing:-0.05em}
.com-list h3::before{content:"";width:28px;height:28px;flex:none;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8.5'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:var(--sh-red)}
.com-list p{margin-top:10px;font-size:var(--t-base);line-height:1.5;letter-spacing:-0.03em;color:var(--muted);text-wrap:pretty}
.com-sectors{margin-top:28px;font-size:var(--t-base);line-height:1.6;letter-spacing:-0.03em;color:var(--muted)}
.com-sectors span{color:var(--ink)}
.com-steps{display:grid;grid-template-columns:200px 1fr;gap:24px;padding-top:56px;padding-bottom:64px}
.com-steps .label{padding-top:6px;align-self:start}
.com-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:none}
.com-steps li{position:relative;padding-top:22px;border-top:1px solid rgba(255,255,255,.22)}
.com-step-num{display:block;font-size:56px;line-height:.85;letter-spacing:-0.06em;color:#fff}
.com-steps h3{margin-top:16px;font-size:var(--t-md);letter-spacing:-0.04em}
.com-steps p{margin-top:8px;font-size:var(--t-sm);line-height:1.5;letter-spacing:-0.02em;color:#C9C9C9;text-wrap:pretty}
.com-quote .inner{padding-top:56px}
.com-quote-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start;max-width:1120px;margin:0 auto}
.com-quote h2{text-align:left}
.com-quote .lead{text-align:left;margin:14px 0 30px;font-size:var(--t-md);color:var(--muted)}
.com-quote .lead-form{max-width:none;margin:0}
.com-direct{position:sticky;top:150px}
.com-direct-label{font-size:var(--t-sm);color:var(--muted)}
.com-direct-tel{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:8px;color:var(--red);text-decoration:none;font-size:var(--t-xl);letter-spacing:-0.06em}
.com-direct-tel svg{width:26px;height:26px}
.com-direct-mail{display:flex;width:fit-content;align-items:center;min-height:44px;margin-top:10px;font-size:var(--t-base);letter-spacing:-0.02em;color:var(--ink)}
.com-direct-hours{margin-top:6px;font-size:var(--t-sm);color:var(--muted)}
@media (hover:hover) and (pointer:fine){.com-direct-tel:hover{text-decoration:underline}}
@media (max-width:1100px){
  .com-steps ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .com-quote-grid{grid-template-columns:1fr;gap:28px}
  .com-direct{position:static}
}
@media (max-width:760px){
  .com-hero .hero-copy{padding:56px 16px 48px}
  .com-offer,.com-steps{grid-template-columns:1fr;padding-top:32px;padding-bottom:40px}
  .com-list{grid-template-columns:1fr}
  .com-list li{padding:22px 20px 24px}
  .com-steps ol{grid-template-columns:1fr;gap:22px}
  .com-quote .inner{padding-top:32px}
}

/* ---------- Hero delight: live opening status, proof line ---------- */
.open-status{display:inline-flex;align-items:center;gap:7px}
.open-status.is-open::before,.open-status.is-closed::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.open-status.is-open::before{background:#1F9D4C;box-shadow:0 0 0 0 rgba(31,157,76,.5);animation:open-pulse 2.4s ease-out 2s 3}
.open-status.is-open{color:#1B7D3E}
.open-status.is-closed::before{background:#B9B9B9}
@keyframes open-pulse{0%{box-shadow:0 0 0 0 rgba(31,157,76,.45)}100%{box-shadow:0 0 0 9px rgba(31,157,76,0)}}

.hero-proof{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font-size:var(--t-sm);letter-spacing:-0.02em;color:var(--muted)}
.hero-proof li{display:inline-flex;align-items:center;gap:8px}
.hero-proof li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:var(--red-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B51B1B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8.5'/%3E%3C/svg%3E") center/12px no-repeat}
.js .hero .hero-proof{animation:rise-in 900ms var(--ease-out) 700ms both}

/* the phone icon gives a little ring when you point at it */
@media (hover:hover) and (pointer:fine){.call-link:hover .call-ring svg{animation:ring-wiggle 600ms var(--ease-out)}}
@keyframes ring-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}

@media (max-width:760px){
  .hero-proof{flex-direction:column;align-items:center;gap:8px;margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .open-status.is-open::before,.call-ring svg{animation:none!important}
  .js .hero .hero-proof{animation:fade-in 300ms ease both}
}

/* ---------- 16. Responsive ---------- */
@media (max-width:1280px){
  .hdr-main{gap:28px}
  .brand{font-size:18px}
  .brand img{width:60px}
  .nav{gap:14px}
}
@media (max-width:1180px){.hdr-call-num{display:none}}
@media (max-width:1100px){
  /* keep the contact row to one line on tablets */
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .about .cols{gap:40px}
  .foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 28px}
  .foot-brand .foot-about{margin:0}
  .badge{width:250px}
  .badge .score{font-size:108px}
}
/* tablets: logo mark only, so the name doesn't run into the menu */
@media (min-width:761px) and (max-width:1100px){.brand span{display:none}}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
/* phones on their side: little height, so the header loses its contact row */
@media (max-height:500px) and (orientation:landscape){
  .hdr-main{padding-top:10px;padding-bottom:10px}
  html{scroll-padding-top:80px}
}
@media (max-width:760px){
  :root{--frame:10px;--radius:20px;--pitch:22px}
  body{font-size:17px;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .inner{padding:28px 18px}

  /* header + menu */
  .hdr-main{position:relative;grid-template-columns:1fr auto;gap:12px;padding:12px 16px}
  .brand{font-size:16px}
  .brand img{width:48px}
  .brand span{white-space:normal;font-size:var(--t-sm);line-height:1.05;max-width:9.5em}
  .brand-mark{width:46px}
  .nav{display:none}
  .hdr-actions .btn-red{display:none}
  .hdr-call{padding:0}
  .hdr-call-icon{width:44px;height:44px}
  .nav-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;cursor:pointer}
  .nav-toggle-bars{position:relative;width:18px;height:12px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
  .nav-toggle-bars::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--ink)}
  .site-nav{position:absolute;left:0;right:0;top:100%;padding:6px 16px 14px;background:#fff;border-top:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(0,0,0,.35)}
  .js .site-nav{display:none}
  .js .site-nav.is-open{display:block}
  .site-nav .nav{display:grid;gap:0;font-size:var(--t-md)}
  .site-nav .nav a{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .site-nav .nav li:last-child a{border-bottom:0}
  .site-nav .nav a::after{display:none}

  /* hero */
  .hero-copy{padding:56px 16px 40px}
  .hero-cta{gap:16px;margin-top:28px}
  .hero-stage{min-height:auto;display:grid;gap:14px}
  .hero-img{position:relative;height:300px}
  .badge,.contact-card{position:relative;left:auto;right:auto;top:auto;width:auto;margin:0 12px}
  .badge{transform:none!important}
  .badge .score{font-size:100px}
  .contact-card{order:-1;padding:26px 20px 20px}
  .grid2,.grid3{grid-template-columns:minmax(0,1fr)}

  /* sections */
  .svc-head{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .svc-back .num--back{font-size:90px}
  .about .cols{grid-template-columns:1fr}
  .about-mark{width:85%;right:-18%;bottom:-24px}
  .reviews{min-height:auto;padding-bottom:20px}
  .rv-card{position:relative;right:auto;top:auto;width:auto;min-height:0;margin:200px 12px 0;padding:48px 40px 36px}
  .rv-slide blockquote{font-size:var(--t-lg)}
  .rv-slide cite{margin-top:28px}
  .callband-inner{grid-template-columns:1fr;padding-top:36px}
  .callband .label{padding-top:0}
  .callband-meta{grid-column:1}
  .callband-meta span{white-space:normal}
  .callband-num{flex-wrap:wrap;gap:14px}
  .callband-icon{width:52px;height:52px}
  .callband-digits{font-size:clamp(34px,11.2vw,64px)}
  .faq .top{flex-direction:column;align-items:flex-start}
  .search,.search input{width:100%}
  .qa-btn{font-size:var(--t-md);padding:16px 18px}
  .qa-panel p{font-size:var(--t-base);padding:0 18px 18px}
  .quote .inner{padding:32px 18px 50px}
  .foot{grid-template-columns:1fr;gap:28px;padding:32px 18px 24px}
  .foot-brand{display:block}
  .foot-brand .foot-about{margin:14px 0 22px}
  .foot-bar{padding:16px 18px 22px}
  .commercial-intro{grid-template-columns:1fr}
  .page-panel .inner{padding:40px 18px 56px}
  .hero--page .hero-copy{padding:56px 16px 50px}

  /* no downpipe on phones; a call bar instead */
  .downpipe{display:none}
  .cc{left:0;right:0;bottom:0;width:auto;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .mob-call{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1.5fr 1fr;gap:8px;padding:10px max(10px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:#fff;box-shadow:0 -10px 30px -18px rgba(0,0,0,.45);transform:translateY(110%);transition:transform 320ms var(--ease-out)}
  .mob-call.show{transform:none}
  .mob-call a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:var(--r-pill);text-decoration:none;font-size:19px;letter-spacing:-0.04em}
  .mob-call-tel{background:var(--red);color:#fff}
  .mob-call-tel svg{width:20px;height:20px}
  .mob-call-quote{background:var(--ink);color:#fff;font-size:17px}

  /* phones: the house turns as it scrolls into view, where the browser supports scroll timelines */
  @supports (animation-timeline: view()){
    .js .hero .hero-img{animation:roof-in 1200ms var(--ease-in-out) 220ms both,house-turn linear both;animation-timeline:auto,view();animation-range:normal,entry 10% cover 55%}
  }
}

/* ---------- 17. Reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion [data-reveal],.motion [data-reveal="flow"]{transform:none!important;clip-path:none!important;opacity:0;transition:opacity 300ms ease!important}
  .motion [data-reveal].in{opacity:1}
  .js .hero h1 .line-ink,.js .hero .sub,.js .hero .hero-cta,.js .hero .hero-img,.js .hero .badge{animation:fade-in 300ms ease both!important}
  .hero-stage .hero-img,.about-mark{transform:none!important}
  .svc-back{clip-path:none!important;opacity:0;transition:opacity 200ms ease!important}
  .svc.open .svc-back{opacity:1}
  .svc-flat .svc-back{opacity:1}
  .rv-slide,.svc-front,.svc-back{transform:none!important}
  .rv-progress{display:none}
  .pipe-tag,.pipe-tag.show{transform:translate(0,-50%);transition:opacity 200ms ease}
  .badge-in{transition:none}
}