/* =============================================================================
   Carleton Prime Construction: site styles
   Layout follows the ATACO architecture (photo hero under a transparent header,
   sage split band with rounded photos and a curved edge, image service cards,
   dark patterned trust band, project carousel, process cards, photo-backed
   contact card, dark footer), in Carleton Prime's own colours and type.
   ========================================================================== */
:root{
  --green-950:#141f15;   /* footer */
  --green-900:#1c2d1d;   /* dark bands */
  --green:#263d27;       /* brand */
  --green-700:#2f4c31;
  --sage:#5f6f5a;        /* split band */
  --sage-ink:#eef0e6;
  --cream:#f0efe1;       /* brand cream */
  --paper:#f7f6f0;       /* light bands */
  --ink:#1b211b;
  --ink-2:#4b5548;
  --line:rgba(27,33,27,.14);
  --radius:22px;
  --pill:999px;
  --wrap:1180px;
  --display:"Red Hat Display","Segoe UI",system-ui,sans-serif;
  --body:"PT Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --shadow:0 18px 40px -22px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid #d9c98a;outline-offset:3px}
.wrap{width:min(100% - 40px, var(--wrap));margin-inline:auto}
.skip{position:absolute;left:12px;top:10px;transform:translateY(-300%);z-index:200;background:var(--cream);color:var(--green);padding:10px 16px;border-radius:var(--pill);font-weight:700}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance}
.display{font-weight:900;text-transform:uppercase;letter-spacing:.005em}
.h-xl{font-size:clamp(44px,7.2vw,88px)}
.h-lg{font-size:clamp(32px,4.4vw,52px)}
.h-md{font-size:clamp(26px,3vw,36px)}
.h-sm{font-size:clamp(20px,2vw,24px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 15px/1.3 var(--body);margin:0 0 12px}
.eyebrow::before{content:"";width:2px;height:16px;background:currentColor;opacity:.7}
.lede{font-size:clamp(17px,1.5vw,19px);max-width:62ch}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--pill);
  font:800 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
.btn-cream{background:var(--cream);color:var(--green)}
.btn-green{background:var(--green);color:var(--cream)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.phone-link{display:inline-flex;align-items:center;gap:10px;min-height:48px;font:800 17px/1 var(--display);text-decoration:none}
.phone-link .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--green)}
.ico svg{width:16px;height:16px}

/* ---------------------------------------------------------------- header */
.site-header{position:absolute;inset:0 0 auto 0;z-index:50;color:#fff;transition:background .25s ease,box-shadow .25s ease}
.site-header.is-solid{position:fixed;background:var(--green-900);box-shadow:0 8px 24px -16px rgba(0,0,0,.6)}
.hdr{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,2vw,32px);min-height:104px;width:min(100% - 48px, 1400px);margin-inline:auto;transition:min-height .25s ease}
.is-solid .hdr{min-height:76px}
.brand{display:block;justify-self:start}
.brand img{height:62px;width:auto;transition:height .25s ease}
.is-solid .brand img{height:48px}
.nav{display:flex;gap:4px;align-items:center;justify-content:center;margin:0;padding:0}
.nav > li{list-style:none;position:relative}
.nav ul{margin:0;padding:0}
.nav a,.nav button{display:flex;align-items:center;gap:6px;padding:10px 12px;color:#fff;background:none;border:0;cursor:pointer;
  font:800 14px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav a[aria-current="page"],.nav a:hover,.nav button:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.nav .caret{width:9px;height:9px;transition:transform .2s}
.dropdown{position:absolute;left:0;top:100%;min-width:250px;background:var(--cream);border-radius:14px;padding:10px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.has-drop:hover .caret{transform:rotate(180deg)}
.dropdown a{color:var(--green);padding:10px 12px;border-radius:8px;letter-spacing:.04em;font-size:13px}
.dropdown a:hover{background:rgba(38,61,39,.08);text-decoration:none}
.dropdown.cols{display:grid;grid-template-columns:1fr 1fr;min-width:480px}
.hdr-right{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.hdr-right .phone-link{font-size:15px;white-space:nowrap}
.hdr-right .btn{white-space:nowrap}
.hdr-right .btn{min-height:42px;padding:10px 20px;font-size:13px}
.menu-btn{display:none;background:none;border:0;color:#fff;padding:8px;cursor:pointer}
.menu-btn svg{width:30px;height:30px}
.mobile-nav{display:none}

@media (max-width:1080px){
  .hdr{grid-template-columns:auto 1fr auto;min-height:84px}
  .brand img{height:48px}
  .nav,.hdr-right .phone-link{display:none}
  .menu-btn{display:block}
  .hdr-right .btn{display:none}
  .mobile-nav{display:block;position:fixed;inset:0;z-index:60;background:var(--green-900);color:#fff;padding:24px 24px 120px;overflow-y:auto;
    transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
  .mobile-nav.open{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  .mobile-nav .mn-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
  .mobile-nav .mn-top img{height:44px}
  .mobile-nav h4{font:800 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin:22px 0 8px}
  .mobile-nav a{display:block;padding:10px 0;color:#fff;text-decoration:none;font:700 19px/1.2 var(--display);border-bottom:1px solid rgba(255,255,255,.08)}
  .mobile-nav .btn{margin-top:24px;width:100%}
}
/* mid-size desktops: everything stays in the header, phone on one line */
.hdr-right .phone-link{white-space:nowrap;flex:none}
@media (min-width:1081px) and (max-width:1300px){
  .hdr{gap:14px;width:min(100% - 32px, 1400px)}
  .nav{gap:0}
  .nav a,.nav button{padding:10px 6px;font-size:12.5px;letter-spacing:.04em}
  .brand img{height:46px}
  .is-solid .brand img{height:42px}
  .hdr-right{gap:12px}
  .hdr-right .phone-link{font-size:14px;gap:8px}
  .hdr-right .phone-link .ico{width:30px;height:30px}
  .hdr-right .btn{min-height:40px;padding:8px 14px;font-size:12px;letter-spacing:.04em}
}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;min-height:clamp(560px,86vh,860px);display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.hero.short{min-height:clamp(440px,62vh,600px)}
.hero picture,.hero > img{position:absolute;inset:0;z-index:-2}
.hero picture img,.hero > img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,22,15,.78) 0%,rgba(14,22,15,.5) 48%,rgba(14,22,15,.25) 100%),linear-gradient(0deg,rgba(14,22,15,.35),rgba(14,22,15,0) 40%)}
.hero .wrap{padding:150px 0 90px}
.hero-inner{max-width:880px}
.hero .big{font:900 clamp(46px,7.4vw,96px)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em;text-shadow:0 4px 30px rgba(0,0,0,.35);margin:0 0 18px}
/* a multi-line wordmark keeps each line whole, sized so the longest line fits */
.hero .big .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero .big .ln > span{display:inline-block}
.hero .big .ln.nw{white-space:nowrap}
.hero-inner:has(.ln.nw){max-width:none}
.hero .big:has(.nw){font-size:clamp(34px,7.6vw,112px);line-height:.92}
.hero .big .ln.nw:first-child > span{color:#fff}
.hero .big .ln.nw + .ln.nw > span{color:var(--cream);-webkit-text-stroke:0}
.hero h1.big{margin-bottom:18px}
.hero .tag{font:600 clamp(18px,1.8vw,22px)/1.35 var(--body);margin:0 0 4px}
.hero .h1-small{font:700 clamp(17px,1.5vw,20px)/1.35 var(--display);margin:0 0 12px;opacity:.95}
.hero .services-line{font:900 clamp(17px,1.9vw,24px)/1.3 var(--display);text-transform:uppercase;letter-spacing:.03em;margin:14px 0 0}
.hero .crumbs{font:600 14px/1 var(--body);margin-bottom:18px;opacity:.85}
.hero .crumbs a{text-decoration:none}
.hero .crumbs a:hover{text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0;list-style:none}
.chips li{font:700 14px/1 var(--body);padding:9px 14px;border-radius:var(--pill);background:rgba(240,239,225,.14);border:1px solid rgba(240,239,225,.35);backdrop-filter:blur(4px)}

/* ------------------------------------------------------ split (sage) band */
.band{position:relative;padding:clamp(70px,9vw,120px) 0}
.band-sage{background:var(--sage);color:var(--sage-ink)}
.band-sage.wave{padding-bottom:clamp(110px,12vw,170px)}
.band-sage.wave::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(50px,6vw,90px);
  background:var(--paper);clip-path:ellipse(75% 100% at 30% 100%)}
.band-dark{background:var(--green-900);color:#fff}
.band-green{background:var(--green);color:#fff}
.band-paper{background:var(--paper)}
.band-cream{background:var(--cream)}
.grid-pattern{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.split.flip > .split-media{order:-1}
.split-media{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}
.split-media img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:3/4;object-fit:cover;width:100%}
.split-media .tall{aspect-ratio:3/4.3;margin-bottom:0}
.split-media .short{aspect-ratio:3/3.6;margin-bottom:40px}
.split-media.one{grid-template-columns:1fr}
.split-media.one img{aspect-ratio:4/3}
.split h2{margin-bottom:18px}

/* ---------------------------------------------------------- service cards */
.section-head{text-align:center;max-width:860px;margin:0 auto 38px}
.section-head h2{color:var(--green);margin-bottom:14px}
.band-dark .section-head h2,.band-green .section-head h2{color:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;padding:26px;color:#fff;text-decoration:none;overflow:hidden;isolation:isolate}
.card img,.card picture{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.card picture img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover picture img{transform:scale(1.04)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,22,15,.9) 0%,rgba(14,22,15,.35) 55%,rgba(14,22,15,0) 80%)}
.card .eyebrow{font-size:14px;margin-bottom:8px}
.card h3{font:900 clamp(22px,2vw,26px)/1.1 var(--display);text-transform:uppercase;margin-bottom:10px}
.card p{font-size:15.5px;margin-bottom:16px;max-width:36ch}
.card .btn{align-self:flex-start;min-height:44px;padding:10px 20px;font-size:14px}
.cards.more{margin-top:10px}

/* ------------------------------------------------------- trust / promise */
.panel{display:grid;grid-template-columns:1.15fr 1fr;border-radius:var(--radius);overflow:hidden;background:#141614;box-shadow:var(--shadow)}
.panel-body{padding:clamp(28px,4vw,52px)}
.panel-body h2{margin-bottom:16px}
.panel-body hr{border:0;border-top:1px solid rgba(255,255,255,.25);margin:0 0 20px}
.panel-media{position:relative;min-height:340px}
.panel-media picture,.panel-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel-media figcaption{position:absolute;left:24px;right:24px;bottom:22px;font:italic 600 18px/1.35 var(--body);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23263d27' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.ticks.two{grid-template-columns:1fr 1fr;gap:12px 28px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
.fact{border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:18px}
.fact b{display:block;white-space:nowrap;font:900 22px/1.1 var(--display);text-transform:uppercase;margin-bottom:6px;color:var(--cream)}
.fact span{font-size:15px;opacity:.9}

/* ---------------------------------------------------------------- carousel */
.carousel{position:relative}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.track::-webkit-scrollbar{display:none}
.track figure{margin:0;scroll-snap-align:start}
.track img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:4px}
.track figcaption{font-size:14.5px;color:var(--ink-2);margin-top:8px}
.car-btn{position:absolute;top:calc(50% - 30px);width:44px;height:44px;border-radius:50%;border:0;background:rgba(240,239,225,.92);color:var(--green);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow)}
.car-btn svg{width:18px;height:18px}
.car-prev{left:-14px}.car-next{right:-14px}

/* ------------------------------------------------------------- process */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps.five{grid-template-columns:repeat(6,1fr)}
.steps.five .step{grid-column:span 2}
.steps.five .step:nth-child(4){grid-column:2 / span 2}
.step{background:#141614;border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:24px 24px 26px;color:#fff}
.step h3{font:900 20px/1.15 var(--display);text-transform:uppercase;margin-bottom:12px}
.step h3::before{counter-increment:s;content:counter(s) ". ";color:var(--cream);opacity:.6}
.step p{font-size:15.5px;opacity:.9}

/* ------------------------------------------------------------ check band */
.checkband{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,70px);align-items:center}
.checkband .mark img{height:54px;width:auto;margin-bottom:16px}
.checkband .list{border-left:1px solid rgba(255,255,255,.25);padding-left:clamp(20px,4vw,48px)}
.checkband .list li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);list-style:none}
.checkband .list ul{margin:0;padding:0}
.checkband .list li::before{content:"\25B8";margin-right:12px;color:var(--cream)}
.checkband .list a{text-decoration-color:rgba(240,239,225,.5);text-underline-offset:4px}

/* -------------------------------------------------------------- prose */
.prose{max-width:760px}
.prose h2{color:var(--green);margin:0 0 16px}
.band-dark .prose h2,.band-green .prose h2,.band-sage .prose h2{color:#fff}
.prose ul{padding-left:20px;margin:0 0 14px}
.prose li{margin-bottom:8px}
.prose a{color:inherit;text-underline-offset:3px}
.band-paper .prose a,.band-cream .prose a{color:var(--green);font-weight:700}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px)}

/* ----------------------------------------------------------------- FAQ */
.faq{max-width:900px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font:800 clamp(18px,1.6vw,21px)/1.3 var(--display);color:var(--green)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 30px/1 var(--body);color:var(--green);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 18px;color:var(--ink-2);max-width:72ch}
.faq .a a{color:var(--green);font-weight:700}

/* ------------------------------------------------------------- sources */
.sources{font-size:15px;color:var(--ink-2)}
.sources h2{font:800 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.sources ul{padding-left:18px;margin:0}
.sources a{color:var(--green)}

/* --------------------------------------------------------- photo CTA */
.cta-photo{position:relative;padding:clamp(70px,10vw,140px) 0;isolation:isolate}
.cta-photo picture,.cta-photo > img{position:absolute;inset:0;z-index:-1}
.cta-photo picture img{width:100%;height:100%;object-fit:cover}
.cta-card{margin-left:auto;max-width:560px;background:rgba(28,45,29,.93);color:#fff;border-radius:var(--radius);padding:clamp(28px,4vw,44px);box-shadow:var(--shadow);backdrop-filter:blur(2px)}
.cta-card .logo{height:40px;width:auto;margin-bottom:18px}
.cta-card h2{margin-bottom:14px}
.cta-card hr{border:0;border-top:1px solid rgba(255,255,255,.25);margin:18px 0}

/* ---------------------------------------------------------------- areas */
.area-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0;margin:0;list-style:none}
.area-grid a,.area-grid span{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border-radius:var(--pill);border:1.5px solid rgba(38,61,39,.35);color:var(--green);font:800 14px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.area-grid a:hover{background:var(--green);color:var(--cream);border-color:var(--green)}

/* --------------------------------------------------------------- gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery figure{margin:0}
.gallery img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font-size:14.5px;color:var(--ink-2);margin-top:8px}

/* ----------------------------------------------------------------- form */
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:6px;font:700 14.5px/1.3 var(--body)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;padding:13px 14px;border-radius:12px;border:1.5px solid rgba(27,33,27,.22);background:#fff;color:var(--ink)}
.form textarea{min-height:140px;resize:vertical}
.form .note{font-size:14px;color:var(--ink-2)}
.form-status{font-weight:700;min-height:1.4em}
.contact-card{background:#fff;border-radius:var(--radius);padding:clamp(24px,4vw,44px);box-shadow:var(--shadow)}
.contact-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:14px}
.contact-list a{text-decoration:none;font-weight:700}

/* --------------------------------------------------------------- footer */
.site-footer{background:var(--green-950);color:rgba(255,255,255,.88);position:relative;overflow:hidden}
.ftr{display:grid;grid-template-columns:1.2fr 1fr 1.3fr 1fr 1.2fr;gap:30px;padding:70px 0 50px}
.ftr .flogo img{height:70px;width:auto;margin-bottom:18px}
.ftr h3{font:900 17px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:#fff;margin:6px 0 16px}
.fcol summary{list-style:none;cursor:default}
.fcol summary::-webkit-details-marker{display:none}
.fcontact ul a,.legal a{display:inline-flex;align-items:center;min-height:48px}
.fcontact ul{gap:0}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr a{text-decoration:none;font-size:15.5px}
.ftr a:hover{text-decoration:underline}
.ftr .social{display:flex;gap:12px;margin-top:16px}
.ftr .social a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3)}
.ftr .social svg{width:18px;height:18px}
.legal{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-watermark{position:absolute;left:-30px;bottom:30px;width:420px;opacity:.05;pointer-events:none}

/* ----------------------------------------------------- mobile call bar */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--green-900);box-shadow:0 -8px 20px -10px rgba(0,0,0,.6)}
  .callbar a{flex:1 1 auto;min-height:48px;font-size:14px;padding:10px 12px;letter-spacing:.02em;white-space:nowrap;gap:8px}
  .callbar .btn-ghost{color:#fff}
  .callbar svg{width:16px;height:16px;flex:none}
  .ftr{gap:0;padding:52px 0 30px}
  .ftr .flogo{order:-2;margin-bottom:22px}
  .ftr .fcontact{order:-1;margin-bottom:18px}
  .fcol{border-top:1px solid rgba(255,255,255,.12)}
  .fcol:last-of-type{border-bottom:1px solid rgba(255,255,255,.12)}
  .fcol summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:56px}
  .fcol summary h3{margin:0}
  .fcol summary::after{content:"+";font:400 28px/1 var(--body);color:#fff;transition:transform .2s}
  .fcol[open] summary::after{transform:rotate(45deg)}
  .fcol ul{gap:0;padding-bottom:14px}
  .fcol ul a{display:flex;align-items:center;min-height:48px}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------------ responsive */
@media (max-width:980px){
  .split,.panel,.checkband,.two-col{grid-template-columns:1fr}
  .split.flip > .split-media{order:0}
  .cards{grid-template-columns:1fr 1fr}
  .steps,.steps.five{grid-template-columns:1fr 1fr}
  .steps.five .step,.steps.five .step:nth-child(4){grid-column:auto}
  .facts{grid-template-columns:1fr 1fr}
  .track{grid-auto-columns:calc((100% - 16px)/2)}
  .ftr{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .checkband .list{border-left:0;padding-left:0}
  .dropdown.cols{min-width:0}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .cards,.steps,.steps.five,.gallery{grid-template-columns:1fr}
  .card{min-height:380px}
  .facts,.ticks.two,.form .row{grid-template-columns:1fr}
  .track{grid-auto-columns:86%}
  .ftr{grid-template-columns:1fr}
  .hero .wrap{padding:130px 0 70px}
  .hero .big{font-size:clamp(32px,10.2vw,46px)}
  .hero .big:has(.nw){font-size:9.3vw}
  .h-lg{font-size:clamp(28px,8vw,40px)}
  .car-btn{display:none}
  .cta-card{margin:0}
}

/* ------------------------------------------------------- rating badge */
.stars{display:inline-flex;gap:2px;color:#f5c542}
.stars svg{width:18px;height:18px}
.rating-badge{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:22px;padding:9px 16px 9px 10px;border-radius:var(--pill);background:rgba(255,255,255,.95);color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .2s ease}
.rating-badge:hover{transform:translateY(-2px)}
.rating-badge > svg{width:24px;height:24px}
.rb-score{font:900 18px/1 var(--display)}
.rb-text{font:700 14px/1.2 var(--body);color:var(--ink-2)}

/* -------------------------------------------------------------- reviews */
.band-reviews{background-color:#232b1c;color:#fff}
.rv-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.rv-top h2{color:#fff}
.rv-score{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:14px 20px}
.rv-score > svg{width:38px;height:38px;flex:none;background:#fff;border-radius:50%;padding:6px}
.rv-score b{display:inline-block;font:900 34px/1 var(--display);margin-right:8px;vertical-align:middle}
.rv-score .stars{vertical-align:middle}
.rv-score span:last-child{display:block;font-size:14px;opacity:.85;margin-top:4px}
.pull{font:900 clamp(26px,3.6vw,46px)/1.12 var(--display);text-transform:uppercase;max-width:22ch;margin:0 0 40px;color:var(--cream)}
.pull span{display:block;font:600 16px/1.3 var(--body);text-transform:none;color:#fff;opacity:.8;margin-top:14px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review{margin:0;display:flex;flex-direction:column;gap:14px;background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:28px 26px;position:relative;box-shadow:var(--shadow);transition:transform .3s ease}
.review:hover{transform:translateY(-6px)}
.review::before{content:"\201C";position:absolute;right:20px;top:-6px;font:900 110px/1 var(--display);color:var(--green);opacity:.12}
.review blockquote{margin:0;flex:1}
.review p{font-size:16.5px;line-height:1.6}
.review figcaption{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:2px}
.rv-name{font:900 16px/1.2 var(--display);text-transform:uppercase;color:var(--green)}
.rv-meta{font-size:14px;color:var(--ink-2)}
.band-reviews .btn-ghost{color:#fff}
.quote-band{padding:clamp(54px,7vw,90px) 0}
.quote{margin:0 auto;max-width:900px;text-align:center}
.quote blockquote{margin:14px 0 18px}
.quote p{font:700 clamp(20px,2.3vw,28px)/1.4 var(--display);color:var(--green)}
.quote figcaption{font-weight:700;color:var(--ink-2)}
.quote figcaption a{color:var(--green)}
.quote .stars svg{width:24px;height:24px}

/* ------------------------------------------------------------- motion */
/* Entrance on load (like ATACO): header drops in, hero photo settles, the
   wordmark slides up line by line, then the rest fades up in sequence.
   Only keyframes hide things, so with motion off everything is visible. */
@keyframes hdrIn{from{transform:translateY(-100%);opacity:0}}
@keyframes heroZoom{from{transform:scale(1.14)}}
@keyframes lineUp{from{transform:translateY(105%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}}
.hdr{animation:hdrIn .8s cubic-bezier(.2,.7,.2,1) both}
.hero picture img{animation:heroZoom 2.6s cubic-bezier(.2,.7,.2,1) both}
.hero .big .ln > span{animation:lineUp 1s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--d,0s)}
.hero .anim{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
/* scroll reveal: site.js adds .rv only when motion is allowed */
.rv{opacity:0;transform:translateY(46px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.rv.in{opacity:1;transform:none}
.split-media.rv img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.split-media.rv:not(.in) .tall{transform:translateY(40px)}
.card{transition:transform .35s ease}
.card:hover{transform:translateY(-6px)}
.section-head h2::after,.rv-top h2::after{content:"";display:block;width:64px;height:5px;border-radius:5px;background:currentColor;opacity:.35;margin:18px auto 0;transform-origin:left}
.rv-top h2::after{margin-left:0}
@media (max-width:980px){ .reviews{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none} }
.prose .btn-green,.band-paper .prose .btn-green,.band-cream .prose .btn-green{color:var(--cream)}
@media (max-width:620px){ .rb-text{display:none} .rv-score b{font-size:28px} }
/* hero phone: larger, a clear second call to action */
.hero .btn-row .phone-link{font-size:clamp(22px,2.2vw,30px);gap:14px}
.hero .btn-row .phone-link .ico{width:48px;height:48px}
.hero .btn-row .phone-link .ico svg{width:22px;height:22px}
/* intro statement under the homepage hero */
.intro-band{padding:clamp(46px,6vw,80px) 0;text-align:center}
.intro-h{display:grid;gap:12px;max-width:1000px;margin:0 auto;color:var(--green)}
.intro-h span:first-child{font:900 clamp(26px,3.4vw,44px)/1.1 var(--display);text-transform:uppercase}
.intro-h span:last-child{font:600 clamp(17px,1.7vw,22px)/1.4 var(--body);color:var(--ink-2)}

/* ------------------------------------------- phones (23 Oct 2026 review) */
.swipe-hint{display:none}
@media (max-width:620px){
  /* hero: no tall empty band above the wordmark; content sits near the top */
  .hero,.hero.short{min-height:0;align-items:flex-start}
  .hero .wrap{padding:104px 0 44px}
  .hero .btn-row{margin-top:20px}
  .rating-badge{margin-top:16px}
  /* service cards and reviews: one swipeable row instead of a long stack */
  .cards,.reviews{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 20px 6px;scroll-padding-inline:20px}
  .cards::-webkit-scrollbar,.reviews::-webkit-scrollbar{display:none}
  .cards > *,.reviews > *{scroll-snap-align:start}
  .card{min-height:330px;padding:22px;border-radius:18px}
  .card p{font-size:15px}
  .reviews{margin-inline:-20px}
  .review{padding:24px 22px}
  .review:hover,.card:hover{transform:none}
  .swipe-hint{display:block;text-align:center;font:700 14px/1 var(--body);opacity:.7;margin:14px 0 0}
  .pull{margin-bottom:26px}
  /* process steps: a swipe row too */
  .steps,.steps.five{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:-20px;padding:0 20px 6px;scroll-padding-inline:20px}
  .steps::-webkit-scrollbar{display:none}
  .step{scroll-snap-align:start}
  .band{padding:56px 0}
  .band-sage.wave{padding-bottom:86px}
  .section-head{margin-bottom:26px}
}
@media (max-width:620px){
  .facts{grid-template-columns:1fr 1fr;gap:10px}
  .fact{padding:14px}
  .fact b{font-size:19px}
  .fact span{font-size:14px}
}

/* every-service list (homepage, town pages, company info) */
.svc-links{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 24px}
.svc-links li{margin:0;border-bottom:1px solid var(--line)}
.svc-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 0;color:var(--green);font:800 16px/1.25 var(--display);text-decoration:none}
.svc-links a::after{content:"\203A";font-size:22px;opacity:.55}
.svc-links a:hover{text-decoration:underline;text-underline-offset:4px}
.prose .svc-links{padding-left:0}
.prose .svc-links li{margin-bottom:0}
.every-svc .two-col{align-items:start}
.every-svc h3{color:var(--green);margin:0 0 10px}
.every-svc .two-col .svc-links{grid-template-columns:1fr}
.band-paper .prose .svc-links a,.band-cream .prose .svc-links a{font-weight:800}
@media (max-width:620px){ .svc-links{grid-template-columns:1fr} }
@media (max-width:620px){
  .every-svc .two-col{gap:26px}
  .every-svc .two-col .svc-links{grid-template-columns:1fr 1fr;gap:0 14px}
  .every-svc .svc-links a{font-size:15px;min-height:52px}
  .every-svc .svc-links a::after{content:none}
  .split-media img{aspect-ratio:4/5}
  .split-media .short{aspect-ratio:1/1;margin-bottom:28px}
  .split-media .tall{aspect-ratio:4/5}
  .split-media.one img{aspect-ratio:3/2}
  .panel-media{min-height:220px}
  .faq summary{padding:14px 0}
  .intro-band{padding:38px 0}
}
/* homepage on phones: drop repeats (the pull quote is also in the first
   review card; these photos are also in the projects carousel) */
@media (max-width:620px){
  .band-reviews .pull{display:none}
  .rv-top{margin-bottom:22px}
  .home-rescue .split-media,.home-promise .panel-media{display:none}
  .ticks{gap:8px}
  .ticks.two{gap:8px}
}
@media (max-width:620px){ .hero .big.long{font-size:min(8.6vw,40px)} }