/* Colors and font come from client.json (injected as :root variables in each page). */
/* Self-hosted Poppins (latin). The fallback is Arial resized to Poppins metrics so the swap causes no layout shift. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Poppins Fallback";src:local("Arial");ascent-override:93.62%;descent-override:31.21%;line-gap-override:8.92%;size-adjust:112.16%}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.5;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;color:var(--primary)}
p{margin:0 0 .9em}
ul,ol{margin:0;padding:0;list-style:none}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 20px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.narrow{max-width:1000px}
.narrow-wide{max-width:1100px}

/* Typography */
.h1{font-size:clamp(34px,3vw,46px);line-height:1.1;margin-bottom:22px}
.h2{font-size:clamp(28px,3vw,43px);line-height:1.1;margin-bottom:22px}
.eyebrow{font-size:clamp(18px,1.6vw,22px);color:var(--primary);margin:0 0 6px}
.lead{max-width:960px;margin-bottom:22px}
.rich p:last-child{margin-bottom:0}
.rich{margin-bottom:24px}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:20px;margin-top:8px}
.btns--center{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:220px;padding:15px 20px;border-radius:8px;font-weight:700;font-size:18px;line-height:1.2;text-transform:uppercase;border:2px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .25s;cursor:pointer;font-family:inherit}
.btn svg{width:16px;height:16px;flex:none}
/* Solid dark blue sits under the gradient; hover just drops the gradient (no fade through transparent). */
.btn--call{background-color:var(--accent-dark);background-image:linear-gradient(90deg,var(--accent) 0%,var(--accent-light) 100%);color:#fff}
.btn--call:hover{background-image:none}
.btn--outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn--outline:hover{background:var(--primary);color:#fff}
.btn--outline.btn--light{color:#fff;border-color:#fff}
.btn--outline.btn--light:hover{background:#fff;color:var(--primary)}
.btns--small .btn{min-width:180px;padding:9px 18px;font-size:16px}

/* Top bar + header */
.topbar{background:var(--primary);color:#fff;padding:10px 0}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
.topbar__text{margin:0;font-weight:700;font-size:22px}
.topbar .btns{margin:0}
.header{background:#fff;padding:15px 0;position:relative;z-index:20}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo img{width:auto;max-height:100px}
.nav>ul{display:flex;gap:6px}
.nav a,.nav__sub-toggle{display:block;padding:10px 14px;font:inherit;color:var(--primary);background:none;border:0;cursor:pointer}
.nav a:hover,.nav__sub-toggle:hover{color:var(--accent)}
.has-sub{position:relative}
.sub{position:absolute;top:100%;left:0;min-width:280px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12);border-radius:8px;padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{opacity:1;visibility:visible;transform:none}
.sub a{padding:10px 20px}
.burger{display:none;background:none;border:0;padding:8px;color:var(--primary);cursor:pointer}
.burger svg{width:28px;height:28px}

/* Mobile drawer */
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;opacity:0;visibility:hidden;transition:.25s}
.drawer.open{opacity:1;visibility:visible}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(380px,90vw);background:#fff;padding:24px;overflow-y:auto;transform:translateX(100%);transition:transform .3s}
.drawer.open .drawer__panel{transform:none}
.drawer__close{position:absolute;top:16px;right:16px;background:none;border:0;color:var(--primary);cursor:pointer}
.drawer__close svg{width:22px;height:22px}
.drawer .logo img{max-height:80px;margin-bottom:16px}
.drawer__nav>li{border-bottom:1px solid #e6e8ec}
.drawer__nav a,.drawer__nav summary{display:block;padding:12px 0;color:var(--primary);cursor:pointer}
.drawer__nav details ul{padding:0 0 8px 14px}
.drawer__nav details a{padding:8px 0;font-size:15px}
.drawer .btns{flex-direction:column;margin:24px 0}
.drawer .btn{width:100%}
.contact-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;color:var(--primary)}
.contact-list svg{width:16px;height:16px;flex:none;margin-top:4px}
.contact-list a{word-break:break-all}

/* Sections */
.section{padding:80px 0}
.section--tight{padding:0}
.hero--image{background:#fff var(--hero-desk) center/cover no-repeat;min-height:577px;display:flex;align-items:center;padding:80px 0}
.hero__text{max-width:50%}
@media (min-width:1025px) and (max-width:1440px){.hero--image{background-image:var(--hero-desk-md)}}
.hero--plain{padding-top:60px}

.split{display:flex;align-items:center;gap:60px}
.split>*{flex:1 1 0;min-width:0}
.split--reverse{flex-direction:row-reverse}
.split__media{display:flex;justify-content:center}

/* Photos. With brand.photoFrame (default) a colored block is drawn behind the photo:
   gray bottom-right or accent top-left. Set photoFrame:false when the images already have it baked in. */
.photo{position:relative;margin:0;max-width:560px;width:100%;isolation:isolate}
.photo img{width:100%;aspect-ratio:1/1;object-fit:cover;position:relative}
.photo--gray{margin:0 30px 30px 0}
.photo--blue{margin:30px 0 0 30px}
.photo--gray::before,.photo--blue::before{content:"";position:absolute;z-index:-1}
.photo--gray::before{inset:40px -30px -30px 40px;background:var(--gray)}
.photo--blue::before{inset:-30px 40px 40px -30px;background:var(--accent)}
.plain-img{max-width:560px;width:100%}

/* Checklist */
.checklist{margin:-8px 0 24px}
.checklist li{display:flex;gap:10px;align-items:center;padding:3px 0}
.checklist svg{width:16px;height:16px;color:var(--primary);flex:none}

/* Service cards (home) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
.svc-card{position:relative;min-height:500px;border-radius:12px;overflow:hidden;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--card-bg) top center/cover no-repeat;isolation:isolate}
.svc-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,var(--primary) 80%);z-index:-1;transition:opacity .3s}
.svc-card h3{color:#fff;font-size:28px;line-height:1.1;margin-bottom:14px}
.svc-card p{margin:0;font-size:16px}
.svc-card:hover{transform:translateY(-4px);transition:transform .3s}

/* CTA banner */
.cta{border-radius:12px;background:#020202 var(--cta-desk) center/cover no-repeat;min-height:350px;display:flex;justify-content:flex-end;align-items:center;padding:30px;max-width:1110px;margin:0 auto}
.cta__body{width:55%;color:#fff}
.cta__title{color:#fff;font-size:clamp(24px,1.8vw,32px);margin-bottom:15px}
.cta__body p{font-size:16px}

/* Timeline (home process) */
.timeline{margin:0 0 24px;position:relative}
.timeline li{position:relative;padding:0 0 26px 50px}
.timeline li::before{content:"";position:absolute;left:5px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 25%,#fff)}
.timeline li::after{content:"";position:absolute;left:13px;top:30px;bottom:0;width:2px;background:linear-gradient(var(--accent),transparent)}
.timeline h3{font-size:24px;color:var(--text);line-height:1.3;margin-bottom:6px}
.timeline p{margin:0}

/* Icon boxes (service "about" section) */
.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:40px 0}
.icon-box__icon{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:var(--primary);color:#fff;margin-bottom:18px}
.icon-box__icon.is-accent{background:var(--accent)}
.icon-box__icon svg{width:44px;height:44px}
.icon-box h3{font-size:22px;margin-bottom:10px;line-height:1.3}
.icon-box p{font-size:15px;margin:0}

/* Numbered advantages (service pages) */
.numbered{margin-bottom:24px}
.numbered li{display:flex;gap:26px;align-items:flex-start;padding:14px 0}
.numbered .num{flex:none;width:60px;text-align:center;font-size:44px;font-weight:700;line-height:1;color:#fff;-webkit-text-stroke:2px var(--primary);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent);margin-top:6px}
.numbered li:nth-child(even) .num{-webkit-text-stroke-color:var(--accent)}
.numbered h3{font-size:22px;color:var(--text);margin-bottom:6px}
.numbered p{margin:0;font-size:15px}

/* Form */
.form-section{position:relative;background:var(--primary);padding:80px 15px;isolation:isolate}
.form-section::before{content:"";position:absolute;inset:0;background:var(--form-bg) center/cover no-repeat;opacity:.3;mix-blend-mode:luminosity;z-index:-1}
.form-card{background:#fff;border-radius:12px;padding:30px 40px 40px;max-width:640px;margin:0 auto}
.form-card__title{text-align:center;font-size:33px;margin-bottom:14px;line-height:1.2}
.form-card__intro{text-align:center;font-size:15px;line-height:1.3;margin-bottom:18px}
.lead-form input[type=text],.lead-form input[type=email],.lead-form input[type=tel],.lead-form textarea{width:100%;font:inherit;font-size:14px;padding:9px 14px;border:1px solid #bfc3c9;border-radius:4px;background:#fff;color:var(--text)}
.lead-form input:focus,.lead-form textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.grid-2 .full{grid-column:1/-1}
.radios{border:0;padding:0;margin:0 0 12px}
.radios legend{padding:0;margin-bottom:8px}
.radio{display:flex;gap:8px;align-items:center;font-size:15px;padding:1px 0;cursor:pointer}
.lead-form textarea{resize:vertical;margin-bottom:8px}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:1.5;margin-bottom:14px;cursor:pointer}
.consent input{margin-top:2px}
.btn--submit{width:100%;background:var(--accent-dark);color:#fff;text-transform:none;font-size:17px;padding:12px}
.btn--submit:hover{background:var(--primary)}
.btn--submit[disabled]{opacity:.6;cursor:wait}
.form-msg{margin:14px 0 0;padding:12px;border-radius:6px;text-align:center;font-size:15px}
.form-msg.ok{background:#e7f6ec;color:#11622d}
.form-msg.err{background:#fdecec;color:#9b1c1c}
.lead-form .invalid{border-color:#d33 !important}
.radios.invalid legend,.consent.invalid{color:#d33}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.map iframe{display:block;width:100%;height:400px;border:0}
.map__load{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:400px;padding:20px;text-align:center;color:var(--primary);background:#e5e3df}
.map__load>svg{width:40px;height:40px;color:var(--accent-light)}
.map__addr{font-weight:700;font-size:18px;max-width:420px}
.map__load .btn{min-width:0}

/* Footer */
.footer{background:var(--primary);color:#fff}
.footer__grid{display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:40px;padding:60px 20px}
.footer__brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.footer__brand img{max-height:110px;width:auto;background:#fff;border-radius:10px;padding:10px}
.footer__title{color:#fff;font-size:28px;letter-spacing:.1em;margin-bottom:18px}
.contact-list--light li,.contact-list--light a{color:#fff}
.footer__links li{margin-bottom:8px}
.footer__links a:hover,.contact-list--light a:hover{text-decoration:underline}
.social{display:flex;gap:12px}
.social a{display:inline-flex;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--primary);align-items:center;justify-content:center}
.social svg{width:18px;height:18px}
.footer__bottom{background:#fff;color:var(--text);text-align:center;padding:10px 20px;font-size:14px}
.footer__bottom p{margin:0}

/* Tablet */
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:block}
  .topbar__inner{justify-content:center}
  .topbar__text{font-size:18px;text-align:center;width:100%}
  .section{padding:60px 0}
  .hero--image{min-height:750px;align-items:flex-start;padding:30px 0 80px;background-image:var(--hero-mob);background-position:bottom center}
  .hero__text{max-width:100%}
  .split,.split--reverse{flex-direction:column;gap:40px}
  .split--reverse .split__text,.split .split__text{order:0}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .icon-grid{grid-template-columns:repeat(2,1fr)}
  .cta{flex-direction:column;justify-content:flex-end;background-image:var(--cta-mob);background-position:top center;padding:250px 20px 30px;min-height:0}
  .cta__body{width:100%}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}

/* Mobile */
@media (max-width:767px){
  .container{padding:0 15px}
  .topbar{padding:12px 0}
  .topbar .btns{display:none}
  .topbar__text{font-size:14px}
  .logo img{max-height:80px}
  .hero--image{min-height:730px;padding-bottom:250px}
  .btns{flex-direction:column;gap:14px}
  .btns .btn{width:100%;max-width:340px}
  .btns--center{align-items:center}
  .svc-grid,.icon-grid{grid-template-columns:1fr}
  .svc-card{min-height:440px}
  .photo--gray{margin:0 20px 20px 0}
  .photo--blue{margin:20px 0 0 20px}
  .photo--gray::before{inset:30px -20px -20px 30px}
  .photo--blue::before{inset:-20px 30px 30px -20px}
  .form-section{padding:60px 15px}
  .form-card{padding:24px 18px 30px}
  .form-card__title{font-size:26px}
  .grid-2{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;text-align:center}
  .contact-list--light li{justify-content:center}
  .footer__title{font-size:24px}
}

/* Smaller hero file for phones (falls back to the mobile image) */
@media (max-width:600px){.hero--image{background-image:var(--hero-mob-sm)}}

/* ---- Optional components (render only when client.json uses them) ---- */
.section--gray{background:#f4f6f9}
.section--top0{padding-top:0}
.text-link{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px}
.text-link:hover{color:#7A4204}

/* Header quote button */
.header__cta{min-width:0;padding:12px 18px;font-size:15px;white-space:nowrap}

/* Breadcrumbs */
.crumbs{background:#f4f6f9;font-size:14px;padding:10px 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0}
.crumbs li{color:#5C5F66}
.crumbs li+li::before{content:"›";margin:0 8px;color:var(--gray)}
.crumbs a{color:var(--primary)}
.crumbs a:hover{color:var(--accent);text-decoration:underline}

/* "Starting at" price badge */
.price-badge{display:inline-flex;flex-direction:column;gap:2px;background:color-mix(in srgb,var(--accent) 9%,#fff);border-left:4px solid var(--accent);border-radius:6px;padding:10px 16px;margin:0 0 22px}
.price-badge strong{color:var(--primary);font-size:20px;line-height:1.25}
.price-badge span{font-size:13px;color:#444}
.price-badge--center{border-left:0;border-top:4px solid var(--accent);align-items:center;text-align:center}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:10px}
.review{margin:0;background:#fff;border-radius:12px;padding:30px;box-shadow:0 8px 30px rgba(0,0,0,.07);display:flex;flex-direction:column}
.review__stars{color:#F5B301;font-size:22px;letter-spacing:3px;margin-bottom:12px}
.review blockquote{margin:0 0 18px;flex:1}
.review blockquote p{margin:0;font-size:16px;line-height:1.65}
.review figcaption strong{display:block;color:var(--primary);font-size:18px}
.review figcaption span{font-size:14px;color:var(--gray)}
.reviews__more{margin-top:26px}
.reviews__more a{color:var(--accent);font-weight:700;text-decoration:underline}

/* FAQ */
.faq{margin-top:10px;border-top:1px solid #e1e4e9}
.faq details{border-bottom:1px solid #e1e4e9}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:28px;color:var(--accent);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq summary h3{font-size:19px;line-height:1.35}
.faq__a{padding:0 0 20px}
.faq__a p{margin:0}

/* Internal link chips */
.section--links{padding:60px 0}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.chips--left{justify-content:flex-start;margin:0 0 24px}
.chips a{display:inline-block;padding:9px 18px;border:2px solid var(--primary);border-radius:999px;color:var(--primary);font-weight:700;font-size:15px;background:#fff;transition:.2s}
.chips a:hover{background:var(--primary);color:#fff}

/* Contact details */
.nap{display:inline-flex;flex-direction:column;gap:10px;text-align:left;margin:0 auto 26px;font-size:17px}
.nap li{display:flex;gap:12px;align-items:center;color:var(--primary)}
.nap svg{width:18px;height:18px;color:var(--accent);flex:none}
.nap a:hover{text-decoration:underline}

/* Area tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
.tile{display:flex;flex-direction:column;background:#fff;border-radius:12px;padding:28px;box-shadow:0 8px 30px rgba(0,0,0,.06);border-top:4px solid var(--accent);transition:transform .25s}
.tile:hover{transform:translateY(-4px)}
.tile--hq{border-top-color:var(--primary)}
.tile h3{font-size:24px;margin-bottom:10px}
.tile p{font-size:15px;flex:1}
.tile__more{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;font-size:15px}
.tile__more svg{width:13px;height:13px}

/* Blog */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.post-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.07);transition:transform .25s}
.post-card:hover{transform:translateY(-4px)}
.post-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.post-card__body{padding:26px 28px 30px}
.post-card h2{font-size:24px;line-height:1.25;margin-bottom:10px}
.post-card p{font-size:15px}
.post-meta{font-size:14px;color:var(--gray);margin-bottom:8px}
.article__wrap{max-width:860px}
.article__intro{font-size:18px}
.article__img{margin:0 0 36px}
.article__img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.article__body h2{font-size:clamp(24px,2.4vw,32px);line-height:1.2;margin:36px 0 14px}
.article__body p,.article__body li{font-size:17px;line-height:1.7}
.article__list{list-style:disc;padding-left:22px;margin:0 0 1em}
.article__list li{margin-bottom:6px}
.table-wrap{overflow-x:auto;margin:6px 0 20px}
.table-wrap table{width:100%;border-collapse:collapse;font-size:15px}
.table-wrap th,.table-wrap td{border:1px solid #e1e4e9;padding:10px 12px;text-align:left;vertical-align:top}
.table-wrap th{background:var(--primary);color:#fff}
.table-wrap tr:nth-child(even) td{background:#f4f6f9}
.article__cta{margin-top:44px;background:#f4f6f9;border-radius:12px;padding:34px;border-left:5px solid var(--accent)}
.article__cta h2{font-size:26px;margin-bottom:10px}

@media (max-width:1280px){.header__cta{display:none}}
@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .tiles,.post-grid{grid-template-columns:1fr}
  .price-badge strong{font-size:18px}
  .review{padding:24px}
  .faq summary h3{font-size:17px}
  .article__cta{padding:24px 20px}
  .article__body p,.article__body li{font-size:16px}
  .footer__grid--4{grid-template-columns:1fr}
}
@media (min-width:1025px){.footer__grid--4{grid-template-columns:1.1fr 1.2fr 1fr 1fr}}

/* Optional (images.heroMobileLayout): below 1024px the mobile hero image fits the full width and the section
   reserves room under the text for the subject, so text only sits on the image's plain top area. */
@media (max-width:1024px){
  .hero--stack{min-height:0;padding-bottom:calc(100vw * var(--hero-r) * var(--hero-s));background-size:100% auto;background-position:center bottom}
}

/* Dropdown label that is also a link (client has a hub page) */
.has-sub>.nav__sub-link::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.drawer__nav summary:has(a){display:flex;justify-content:space-between;align-items:center;list-style:none}
.drawer__nav summary:has(a)::-webkit-details-marker{display:none}
.drawer__nav summary:has(a)::after{content:"+";font-size:22px;line-height:1;color:var(--accent);padding-left:20px}
.drawer__nav details[open] summary:has(a)::after{content:"–"}
.drawer__nav summary a{padding:0;flex:1}
/* Compact top bar (topBar.quoteButton:false): text + phone on one line */
.topbar--compact .topbar__inner{flex-wrap:nowrap}
.topbar--compact .topbar__text{font-size:18px}
.topbar--compact .btn{white-space:nowrap;min-width:0}
@media (max-width:1024px){
  .topbar--compact .topbar__inner{justify-content:space-between}
  .topbar--compact .topbar__text{width:auto;text-align:left;font-size:16px}
}
@media (max-width:767px){
  .topbar--compact{padding:8px 0}
  .topbar--compact .btns{display:flex}
  .topbar--compact .topbar__text{font-size:13px;line-height:1.3}
  .topbar--compact .btns--small .btn{padding:7px 12px;font-size:14px;gap:8px;width:auto}
}
@media (max-width:380px){.topbar--compact .topbar__text{font-size:12px}}

/* CTA banner spacing: extra room so it doesn't crowd the white sections around it, and more
   when a neighbor has its own background (gray section, navy form) so it doesn't stick to it. */
.section--tight{padding:40px 0}
.section--gray+.section--tight{padding-top:80px}
.section--tight:has(+ .section--gray),.section--tight:has(+ .form-section){padding-bottom:80px}
@media (max-width:1024px){
  .section--tight{padding:20px 0}
  .section--gray+.section--tight{padding-top:60px}
  .section--tight:has(+ .section--gray),.section--tight:has(+ .form-section){padding-bottom:60px}
}

/* Footer keeps its own padding on phones (the .container mobile rule would zero the top/bottom) */
@media (max-width:767px){.footer__grid{padding:50px 24px;gap:36px}.footer__bottom{padding:14px 24px}}
/* Mobile top bar: two short stacked lines on the left, compact phone pill on the right */
@media (max-width:767px){
  .topbar--compact .topbar__inner{gap:12px}
  .topbar--compact .topbar__text{display:flex;flex-direction:column;font-size:13px;line-height:1.35;letter-spacing:.2px}
  .topbar--compact .topbar__sep,.topbar--compact .topbar__more{display:none}
  .topbar--compact .btns--small .btn{padding:8px 14px;font-size:15px;border-radius:999px;flex-shrink:0}
  .topbar--compact .btns--small .btn svg{width:14px;height:14px}
}
@media (max-width:380px){
  .topbar--compact .btns--small .btn{padding:7px 11px;font-size:14px}
}
/* Lazy background images: below-the-fold backgrounds load only when main.js marks them .bg-in
   (near the viewport), so they don't compete with the hero/LCP. Dark placeholder keeps white text readable. */
.svc-card:not(.bg-in),.cta:not(.bg-in){background-image:none;background-color:var(--primary)}
.form-section:not(.bg-in)::before{background-image:none}