:root{
  --color-primary:#496247; --color-secondary:#223d2d; --color-white:#FFFFFF;
  --color-background:#f2f9f2; --color-text:#626262; --color-heading:#223d2d;
  --color-accent:#ff6525;
  --fs-2xl:2.4rem; --fs-xl:2rem; --fs-base:1.8rem; --fs-lg:1.6rem; --fs-sm:1.5rem; --fs-sxm:1.2rem;
  --container:1240px;
}
html{font-size:62.5%}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;font-size:var(--fs-sm);line-height:1.6;color:var(--color-text);background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--color-heading);font-weight:800;line-height:1.1;letter-spacing:-.02em}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 16px;width:100%}
.sec{padding:120px 0}
.bg-soft{background:var(--color-background)}
.accent{color:var(--color-accent)}

.ph{background:linear-gradient(155deg,#7d6142 0%,#a07f55 26%,#8b6c46 48%,#5c4830 74%,#3f3122 100%);position:relative;overflow:hidden}
.ph>img,.ph2>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;font-size:0;color:transparent}
.ph:has(img)::after,.ph2:has(img)::after{display:none}
.ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(93deg,rgba(0,0,0,.10) 0 14px,rgba(255,255,255,.04) 14px 30px);opacity:.7}
.ph2{background:linear-gradient(155deg,#54684c 0%,#7d9270 30%,#4e6146 62%,#2f3d2b 100%);position:relative;overflow:hidden}
.ph2::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(89deg,rgba(0,0,0,.09) 0 15px,rgba(255,255,255,.05) 15px 32px);opacity:.7}

/* top bar */
.topbar{background:var(--color-secondary);color:#fff;font-size:var(--fs-sm);position:relative;z-index:30}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:46px}
.tb-right{display:flex;align-items:center;gap:22px}
.tb-item{display:flex;align-items:center;gap:9px;font-weight:500}
.tb-sep{width:1px;height:18px;background:rgba(255,255,255,.25)}
.ic{width:19px;height:19px;flex:none;stroke:#fff;fill:none;stroke-width:1.7}

/* header */
.header-wrap{position:relative;z-index:20}
.header{background:#fff;border-radius:100px;height:76px;display:flex;align-items:center;justify-content:space-between;padding-left:34px;box-shadow:0 6px 30px rgba(0,0,0,.10);margin-top:24px}
.logo{font-size:2.6rem;font-weight:800;color:var(--color-secondary);letter-spacing:-.03em}
.nav{display:flex;gap:34px}
.nav a{font-size:var(--fs-lg);font-weight:500;color:var(--color-secondary)}
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--color-primary);color:#fff;border-radius:100px;padding:6px 6px 6px 25px;font-size:var(--fs-lg);font-weight:600;border:none;font-family:inherit;cursor:pointer}
.btn .circ{width:40px;height:40px;border-radius:50%;background:var(--color-accent);display:flex;align-items:center;justify-content:center;flex:none}
.btn .circ svg{width:16px;height:16px;stroke:#fff;stroke-width:2.2;fill:none}
.btn-white{background:#fff;color:var(--color-secondary)}
.header .btn{margin-right:6px}

/* hero */
.hero{position:relative;margin-top:-100px;padding-top:100px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(10,18,11,.90) 0%,rgba(10,18,11,.68) 38%,rgba(10,18,11,.28) 70%,rgba(10,18,11,.10) 100%)}
.hero .container{position:relative;z-index:3}
.hero-inner{min-height:820px;padding:70px 0 130px;display:flex;flex-direction:column;justify-content:center;position:relative}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.5);border-radius:100px;padding:9px 22px;color:#fff;font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;width:fit-content}
.hero h1{font-size:82px;color:#fff;line-height:1.05;letter-spacing:-.03em;margin:26px 0 0;max-width:13ch}
.hero .sub{color:rgba(255,255,255,.9);font-size:var(--fs-base);max-width:62ch;margin-top:22px;line-height:1.65}
.hero .sub b{color:#fff;font-weight:700}
.stars{color:#ffb400;letter-spacing:2px}
.call-cta{display:inline-flex;align-items:center;gap:20px;background:var(--color-accent);color:#fff;border-radius:100px;padding:14px 44px 14px 14px;margin-top:38px;width:fit-content;box-shadow:0 12px 38px rgba(255,101,37,.34)}
.call-cta .pic{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex:none}
.call-cta .pic svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:1.9}
.call-cta .ct{display:flex;flex-direction:column;line-height:1.15}
.call-cta .lb{font-size:var(--fs-sm);font-weight:600;opacity:.9;letter-spacing:.06em;text-transform:uppercase}
.call-cta .no{font-size:3.2rem;font-weight:800;letter-spacing:-.02em}

/* form bar */
.formbar-wrap{position:relative;z-index:6;padding:96px 0;background:var(--color-background)}
.formbar{background:#fff;border-radius:16px;box-shadow:0 12px 44px rgba(0,0,0,.10);padding:40px 30px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:18px;align-items:center}
.field{border:none;border-bottom:1px solid #e2e2e2;padding:12px 4px;font-size:var(--fs-sm);font-family:inherit;color:var(--color-heading);background:transparent;width:100%}
.field::placeholder{color:#9b9b9b}
.field:focus{outline:none;border-bottom-color:var(--color-primary)}
select.field{appearance:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none'/></svg>") right 4px center no-repeat}
.btn-accent{background:var(--color-accent);color:#fff;border:none;border-radius:100px;padding:16px 32px;font-size:var(--fs-lg);font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap}


/* about / intro prose */
.prose{max-width:900px;margin:0 auto}
.prose p{font-size:var(--fs-base);line-height:1.85;margin-bottom:24px}
.prose p:last-child{margin-bottom:0}
.prose p.lead{font-size:2.1rem;line-height:1.6;color:var(--color-heading);font-weight:600;margin-bottom:30px}
.prose h3{font-size:2.8rem;margin:44px 0 18px;line-height:1.25}
.prose .note{color:#9aa79a;font-size:var(--fs-sm);font-style:italic}

/* eyebrow + headings */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:56px}
.sec-head h2{font-size:56px;max-width:16ch}
.sec-head .desc{font-size:var(--fs-base);max-width:46ch;margin-bottom:22px}
.sec-head-c{text-align:center;margin-bottom:56px}
.sec-head-c h2{font-size:56px}



/* projects */
.proj-card{position:relative;border-radius:18px;overflow:hidden;min-height:470px;display:flex;align-items:center;margin-bottom:26px}
.proj-bg{position:absolute;inset:0;z-index:1}
.proj-card::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(21,44,28,.94) 0%,rgba(21,44,28,.86) 38%,rgba(21,44,28,.50) 66%,rgba(21,44,28,.06) 100%)}
.proj-inner{position:relative;z-index:3;padding:0 50px;max-width:720px}
.proj-loc{display:flex;align-items:center;gap:12px;color:#fff;font-size:var(--fs-lg);font-weight:500}
.proj-pin{width:34px;height:34px;border-radius:50%;background:var(--color-accent);display:flex;align-items:center;justify-content:center;flex:none}
.proj-pin svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.proj-card h3{font-size:3.4rem;color:#fff;margin:18px 0 0}
.proj-rule{height:1px;background:rgba(255,255,255,.35);margin:20px 0;max-width:350px}
.proj-card p{color:rgba(255,255,255,.9);font-size:var(--fs-lg);line-height:1.6;max-width:46ch;margin-bottom:26px}

/* process */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.proc-card{padding-top:26px;border-top:1px solid #e2e8e2}
.proc-num{font-size:5.4rem;font-weight:800;color:#e6ece6;line-height:1;letter-spacing:-.04em}
.proc-card h3{font-size:var(--fs-2xl);margin:14px 0 12px}
.proc-card p{font-size:var(--fs-sm);line-height:1.7}

/* services */
.faq-list{border-top:1px solid #dde5dd}
.faq-item{border-bottom:1px solid #dde5dd;padding:30px 0}
.faq-top{display:flex;align-items:center;gap:26px}
.faq-item h3{font-size:2.4rem;flex:1;line-height:1.3}
.faq-plus{width:44px;height:44px;border-radius:50%;border:1px solid #cfd9cf;display:flex;align-items:center;justify-content:center;flex:none;font-size:2rem;color:var(--color-secondary)}
.faq-item:not(.open) .faq-body{display:none}
.faq-item.open .faq-plus{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.faq-body{padding:16px 0 0 0;font-size:var(--fs-base);line-height:1.7;max-width:78ch}

/* about */

/* articles */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.art-card{border-radius:14px;overflow:hidden;background:#fff;border:1px solid #eaefea}
.art-img{aspect-ratio:16/10}
.art-body{padding:26px}
.art-meta{display:flex;align-items:center;gap:12px;font-size:var(--fs-sm)}
.tag{background:var(--color-background);color:var(--color-primary);border-radius:100px;padding:5px 14px;font-weight:600;font-size:var(--fs-sxm)}
.art-card h3{font-size:var(--fs-2xl);margin-top:14px;line-height:1.35}

/* locations, scrollable cards */
.loc-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 10px}
.loc-track::-webkit-scrollbar{display:none}
.loc-card{flex:0 0 calc((100% - 66px)/4);scroll-snap-align:start;background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.loc-img{aspect-ratio:4/3;position:relative;flex:none}
.loc-zip{position:absolute;right:14px;bottom:12px;background:var(--color-secondary);color:#fff;border-radius:100px;padding:5px 13px;font-size:var(--fs-sm);font-weight:700;z-index:4}
.loc-body{padding:34px 22px 24px;display:flex;flex-direction:column;flex:1}
.loc-txt{font-size:var(--fs-sm);line-height:1.65;color:var(--color-text);margin-bottom:18px;flex:1}
.loc-foot{display:flex;align-items:center;gap:12px;border-top:1px solid #eef2ee;padding-top:16px}
.loc-mark{width:42px;height:42px;border-radius:50%;flex:none;background:var(--color-primary);display:flex;align-items:center;justify-content:center}
.loc-mark svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.loc-foot .nm{font-weight:700;color:var(--color-heading);font-size:var(--fs-base)}
.loc-foot .rl{font-size:var(--fs-sm)}
.carousel{display:flex;justify-content:center;gap:12px;margin-top:44px}
.cbtn{width:46px;height:46px;border-radius:8px;background:var(--color-accent);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}
.cbtn[disabled]{background:#f9c4a8;cursor:default}
.cbtn svg{width:19px;height:19px;stroke:#fff;stroke-width:2;fill:none}


/* cta */
.cta{position:relative;padding:130px 0;overflow:hidden}
.cta-bg{position:absolute;inset:0}
.cta-bg::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(21,44,28,.8)}
.cta .container{position:relative;z-index:3;text-align:center}
.cta h2{font-size:56px;color:#fff;margin:18px auto 20px;max-width:18ch}
.cta p{color:rgba(255,255,255,.86);font-size:var(--fs-base);max-width:56ch;margin:0 auto 34px}
/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.price-card{background:#fff;border:1px solid #e4ece4;border-radius:14px;padding:34px 28px;display:flex;flex-direction:column}
.price-card h3{font-size:var(--fs-2xl);margin-bottom:20px}
.price-fig{display:flex;align-items:baseline;gap:6px;color:var(--color-heading)}
.price-fig .amt{font-size:4.2rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.price-fig .per{font-size:var(--fs-sm);font-weight:600;color:var(--color-text)}
.price-rule{height:1px;background:#e4ece4;margin:24px 0}
.price-row{display:flex;justify-content:space-between;gap:14px;font-size:var(--fs-sm);margin-bottom:12px}
.price-row span:first-child{color:var(--color-text)}
.price-row span:last-child{color:var(--color-heading);font-weight:700;text-align:right}
.price-note{margin-top:auto;padding-top:20px;font-size:var(--fs-sm);line-height:1.6}
.price-foot{margin-top:34px;font-size:var(--fs-sm);text-align:center;font-style:italic;color:#8d9a8d}

/* timeline */
.tl{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:14px}
.tl::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:2px;background:#dde5dd}
.tl-step{position:relative;text-align:center;padding:0 12px}
.tl-dot{width:54px;height:54px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-base);margin:0 auto 22px;position:relative;z-index:2;border:5px solid #fff}
.tl-step:first-child .tl-dot,.tl-step:last-child .tl-dot{background:var(--color-accent)}
.tl-when{color:var(--color-accent);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.tl-step h3{font-size:var(--fs-xl);margin-bottom:10px;line-height:1.3}
.tl-step p{font-size:var(--fs-sm);line-height:1.65}
.tl-total{margin-top:50px;text-align:center;font-size:var(--fs-base);color:var(--color-heading);font-weight:600}

/* footer */
.footer{background:var(--color-secondary);color:rgba(255,255,255,.72);padding:90px 0 0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:50px;padding-bottom:60px}
.footer .logo{color:#fff;margin-bottom:20px}
.footer p{font-size:var(--fs-sm);line-height:1.8}
.footer h4{color:#fff;font-size:var(--fs-xl);margin-bottom:22px}
.footer li{margin-bottom:12px;font-size:var(--fs-sm)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding:26px 0;display:flex;justify-content:space-between;font-size:var(--fs-sm)}

/* ---- subpage chrome ---- */
.hero-sub{margin-top:-100px;padding-top:100px}
.hero-sub .hero-inner{min-height:520px;padding:60px 0 90px}
.hero-sub h1{font-size:60px;max-width:18ch}
.crumbs{background:var(--color-background);border-bottom:1px solid #e4ece4;font-size:var(--fs-sm)}
.crumbs .container{padding-top:16px;padding-bottom:16px;color:var(--color-text)}
.crumbs a{color:var(--color-primary);font-weight:600}
.crumbs .sep{margin:0 10px;color:#b9c6b9}
.crumbs [aria-current]{color:var(--color-heading);font-weight:700}
.xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.xcard{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #e4ece4;border-radius:14px;padding:26px 24px}
.xcard .xic{width:46px;height:46px;border-radius:50%;background:var(--color-accent);display:flex;align-items:center;justify-content:center;flex:none}
.xcard .xic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2}
.xcard strong{display:block;color:var(--color-heading);font-size:var(--fs-base);font-weight:700}
.xcard em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--color-text);margin-top:3px}
.pill-row{display:flex;flex-wrap:wrap;gap:12px}
.pill-link{background:#fff;border:1px solid #e4ece4;border-radius:100px;padding:14px 26px;font-size:var(--fs-lg);font-weight:600;color:var(--color-secondary)}
.loc-grid-static{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.loc-grid-static .loc-card{flex:none}
.price-grid.one{grid-template-columns:minmax(0,360px)}
.footer .nap{margin-top:20px;line-height:1.9}
.footer .nap a{color:#fff;font-weight:700}
a.proj-card{text-decoration:none}

/* ---- pricing tiers ---- */
.price-more{text-align:center;margin-top:34px}
.ptable{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e4ece4;border-radius:14px;overflow:hidden}
.ptable th{background:var(--color-secondary);color:#fff;font-size:var(--fs-sm);font-weight:700;text-align:left;padding:18px 20px;letter-spacing:.03em}
.ptable td{padding:20px;border-top:1px solid #eef2ee;font-size:var(--fs-sm);vertical-align:middle}
.ptable tbody tr:first-child td{border-top:none}
.ptable td:first-child{font-weight:700;color:var(--color-heading);font-size:var(--fs-base)}
.ptable td:first-child a{color:var(--color-heading)}
.ptable .amt-cell{color:var(--color-accent);font-weight:800;font-size:var(--fs-xl);white-space:nowrap}
.ptable-note{margin-top:22px;font-size:var(--fs-sm);font-style:italic;color:#8d9a8d;text-align:center}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.pd-box{background:#fff;border:1px solid #e4ece4;border-radius:14px;padding:32px 30px}
.pd-box h3{font-size:var(--fs-2xl);margin-bottom:20px}
.pd-line{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #eef2ee;font-size:var(--fs-sm)}
.pd-line:last-child{border-bottom:none}
.pd-line span:last-child{font-weight:700;color:var(--color-heading);white-space:nowrap}
.pd-list{list-style:none}
.pd-list li{position:relative;padding-left:30px;margin-bottom:13px;font-size:var(--fs-sm);line-height:1.6}
.pd-list li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;background:var(--color-accent)}

/* service cards link out, no button, so the block centres on its own */
a.proj-card{text-decoration:none;color:inherit}
a.proj-card .proj-inner p:last-child{margin-bottom:0}
a.proj-card h3{transition:color .15s ease}

/* ---- vertical timeline, service pages ---- */
.tlv{max-width:820px;margin:0 auto;position:relative}
.tlv::before{content:"";position:absolute;left:26px;top:14px;bottom:14px;width:2px;background:#dde5dd}
.tlv-step{display:flex;gap:26px;padding-bottom:34px;position:relative}
.tlv-step:last-child{padding-bottom:0}
.tlv-dot{width:54px;height:54px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-base);flex:none;position:relative;z-index:2;border:5px solid #fff}
.tlv-step:first-child .tlv-dot,.tlv-step:last-child .tlv-dot{background:var(--color-accent)}
.tlv-when{color:var(--color-accent);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.tlv-body{padding-top:4px}
.tlv-body h3{font-size:var(--fs-2xl);margin-bottom:8px}
.tlv-body p{font-size:var(--fs-sm);line-height:1.7}

/* header call button, icon leads */
.btn-call{padding:6px 25px 6px 6px;gap:13px}
.btn-call .circ svg{stroke:#fff;fill:none;stroke-width:1.9}
a.art-card{text-decoration:none;color:inherit;display:block}

/* legal pages */
.prose.legal h1{font-size:52px;margin-bottom:26px}
.prose.legal h2{font-size:var(--fs-2xl);margin:40px 0 14px}
.prose.legal .note{margin-top:44px;padding-top:24px;border-top:1px solid #e4ece4;font-size:var(--fs-sm);color:#8d9a8d;font-style:italic}
.prose.legal a{color:var(--color-primary);font-weight:600;text-decoration:underline}
.foot-bottom a{color:rgba(255,255,255,.85);text-decoration:underline}

/* ---- square service cards, three across, service pages ---- */
.sqgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj-card.sq{aspect-ratio:1/1;min-height:0;margin-bottom:0;align-items:flex-end}
.proj-card.sq::before{background:linear-gradient(180deg,rgba(21,44,28,.10) 0%,rgba(21,44,28,.45) 45%,rgba(21,44,28,.93) 100%)}
.proj-card.sq .proj-inner{max-width:none;width:100%;padding:0 28px 30px}
.proj-card.sq .proj-loc{font-size:var(--fs-sm)}
.proj-card.sq .proj-pin{width:28px;height:28px}
.proj-card.sq .proj-pin svg{width:13px;height:13px}
.proj-card.sq h3{font-size:2.4rem;white-space:normal;margin:12px 0 0;line-height:1.15}
.proj-card.sq .proj-rule{max-width:100%;margin:14px 0}
.proj-card.sq p{font-size:var(--fs-sm);line-height:1.6;margin-bottom:20px;max-width:none}
.proj-card.sq .btn{padding:5px 5px 5px 20px;font-size:var(--fs-sm)}
.proj-card.sq .btn .circ{width:32px;height:32px}
.proj-card.sq .btn .circ svg{width:13px;height:13px}

/* ---- location cards on service pages ---- */

/* deep dive heading inside prose */
.prose h2{font-size:3.6rem;margin:0 0 24px;line-height:1.15}
.prose h2 + p{margin-top:0}

/* checklists inside prose */
.prose ul{margin:0 0 24px;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:30px;margin-bottom:14px;font-size:var(--fs-base);line-height:1.75}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;border-radius:50%;background:var(--color-accent)}
.prose li strong{color:var(--color-heading);font-weight:700}
.sec-head-c .desc{max-width:760px;margin:16px auto 0;text-align:center}

/* four square service cards on one line, service area pages */
.sqgrid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sqgrid-4 .proj-card.sq .proj-inner{padding:0 20px 24px}
.sqgrid-4 .proj-card.sq .proj-loc{font-size:1.3rem;letter-spacing:.04em}
.sqgrid-4 .proj-card.sq .proj-pin{width:24px;height:24px}
.sqgrid-4 .proj-card.sq .proj-pin svg{width:11px;height:11px}
.sqgrid-4 .proj-card.sq h3{font-size:2rem;margin:14px 0 0}
.sqgrid-4 .proj-card.sq .proj-rule{margin:10px 0}
.sqgrid-4 .proj-card.sq p{font-size:1.4rem;line-height:1.55;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sqgrid-4 .proj-card.sq .btn{padding:4px 4px 4px 16px;font-size:1.3rem}
.sqgrid-4 .proj-card.sq .btn .circ{width:28px;height:28px}
.sqgrid-4 .proj-card.sq .btn .circ svg{width:11px;height:11px}

/* location card overflow guards */
/* the pill was sized for a ZIP; county names are much longer and ran into the pin */
.loc-zip{max-width:calc(100% - 76px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:1.3rem;padding:5px 11px}
/* keep the footer on one line so cards in a row stay aligned */
.loc-foot > div{min-width:0}
.loc-foot .nm,.loc-foot .rl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-foot .loc-mark{flex:none}


/* =======================================================================
   RESPONSIVE
   The site had one media query before this. Everything below is the
   phone and tablet layer, largest breakpoint first.
   ======================================================================= */

/* toggle button, hidden until the nav collapses */
.navtoggle{display:none;width:44px;height:44px;margin-right:8px;border:none;background:transparent;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.navtoggle span{display:block;width:22px;height:2px;background:var(--color-secondary);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* wide tables scroll inside their own box rather than widening the page */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}

/* ---------------- tablet ---------------- */
@media(max-width:1100px){
  .sec{padding:88px 0}
  .sec-head h2,.sec-head-c h2,.cta h2{font-size:44px}
  .hero h1{font-size:62px}
  .hero-inner{min-height:620px}
  .hero-sub h1{font-size:44px}
  .nav{gap:22px}
  .header{padding-left:24px}
  .proc-grid,.price-grid,.sqgrid-4,.art-grid,.xgrid,.loc-grid-static,.sqgrid{grid-template-columns:repeat(2,1fr)}
  .loc-card{flex:0 0 calc((100% - 44px)/3)}
  .tl{grid-template-columns:repeat(3,1fr);row-gap:46px}
  .tl::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
  .proj-inner{padding:0 34px}
}

/* ---------------- nav collapses ---------------- */
@media(max-width:860px){
  .header{position:relative;height:64px;padding-left:20px;border-radius:18px;margin-top:16px}
  .logo{font-size:2rem}
  .navtoggle{display:flex}
  .nav{position:absolute;top:calc(100% + 12px);left:0;right:0;background:#fff;border-radius:16px;
    box-shadow:0 16px 44px rgba(0,0,0,.18);flex-direction:column;gap:0;padding:8px 0;display:none;z-index:60}
  .nav.open{display:flex}
  .nav a{padding:15px 24px;font-size:1.7rem}
  .nav a + a{border-top:1px solid #eef2ee}
  .header .btn{margin-right:0;padding:5px 5px 5px 18px;font-size:var(--fs-sm)}
  .header .btn .circ{width:36px;height:36px}
  .header .btn .circ svg{width:14px;height:14px}

  .topbar{font-size:var(--fs-sxm)}
  .topbar .container{height:40px;justify-content:center}
  .topbar .container > div:first-child{display:none}
  .tb-right{gap:14px}

  .hero{margin-top:-88px;padding-top:88px}
  .hero-sub{margin-top:-88px;padding-top:88px}
  .hero h1{font-size:53px;max-width:none}
  .hero-inner{padding:44px 0 74px}
  .hero .sub{font-size:var(--fs-lg);max-width:none}
  .pill{font-size:var(--fs-sxm);padding:8px 16px}
  .call-cta{padding:12px 26px 12px 12px;gap:14px;margin-top:28px}
  .call-cta .pic{width:50px;height:50px}
  .call-cta .pic svg{width:22px;height:22px}
  .call-cta .no{font-size:2.4rem}

  .formbar-wrap{padding:58px 0}
  .formbar{grid-template-columns:1fr;padding:26px 22px;gap:14px}
  .btn-accent{width:100%}
}

/* ---------------- phone ---------------- */
@media(max-width:768px){
  .container{padding:0 18px}
  .sec{padding:58px 0}

  .sec-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:32px}
  .sec-head h2,.sec-head-c h2{font-size:37px;max-width:none}
  .sec-head .desc{max-width:none;margin-bottom:0}
  .sec-head-c{margin-bottom:32px}
  .sec-head-c .desc{margin-top:12px}

  /* every multi column grid goes to one */
  .proc-grid,.price-grid,.art-grid,.xgrid,.loc-grid-static,.sqgrid,.sqgrid-4,.pd-grid,.foot-grid,.tl{
    grid-template-columns:1fr}
  .tl{row-gap:30px}
  .tl-step{text-align:left;padding:0;display:grid;grid-template-columns:54px 1fr;column-gap:16px}
  .tl-dot{margin:0}
  .tl-when,.tl-step h3,.tl-step p{grid-column:2}
  .tl-total{margin-top:32px;font-size:var(--fs-lg)}

  /* location carousel shows one card with a peek at the next */
  .loc-card{flex:0 0 84%}
  .loc-track{gap:14px}
  .carousel{margin-top:26px}

  .proj-card{min-height:330px;margin-bottom:18px}
  .proj-inner{padding:0 24px;max-width:none}
  .proj-card h3{font-size:2.4rem}
  .proj-card p{font-size:var(--fs-sm);max-width:none;margin-bottom:20px}
  .proj-rule{margin:14px 0}
  .proj-card.sq{aspect-ratio:auto;min-height:300px}

  .prose p{font-size:1.7rem;line-height:1.75;margin-bottom:20px}
  .prose p.lead{font-size:1.9rem}
  .prose h2{font-size:2.7rem;margin-bottom:18px}
  .prose h3{font-size:2.1rem;margin:32px 0 14px}
  .prose li{font-size:1.7rem}

  .faq-item{padding:22px 0}
  .faq-top{gap:14px}
  .faq-item h3{font-size:1.9rem}
  .faq-plus{width:36px;height:36px;font-size:1.7rem}
  .faq-body{font-size:1.65rem;max-width:none}

  .price-card{padding:26px 22px}
  .price-fig .amt{font-size:3.4rem}
  .price-foot{margin-top:24px}
  .ptable{min-width:660px}
  .pd-box{padding:26px 22px}

  .cta{padding:78px 0}
  .cta h2{font-size:37px;max-width:none}
  .cta p{font-size:var(--fs-lg);max-width:none}

  .hero-sub h1{font-size:38px;max-width:none}
  .hero-sub .hero-inner{min-height:300px;padding:36px 0 52px}
  .crumbs{font-size:var(--fs-sxm)}

  .footer{padding-top:58px}
  .foot-grid{gap:34px;padding-bottom:44px}
  .foot-bottom{flex-direction:column;gap:10px;text-align:center;padding:20px 0}
  .art-body{padding:22px}
  .pill-link{padding:11px 20px;font-size:var(--fs-sm)}
}

/* ---------------- small phone ---------------- */
@media(max-width:480px){
  .hero h1{font-size:41px}
  .sec-head h2,.sec-head-c h2,.cta h2{font-size:32px}
  .hero-sub h1{font-size:32px}
  .prose h2{font-size:2.3rem}
  .logo{font-size:1.8rem}

  /* the number is too wide next to a logo and a burger, so the button becomes the icon */
  .header .btn{padding:5px;gap:0;font-size:0}
  .header .btn .circ{width:38px;height:38px}
  .navtoggle{margin-right:4px}

  .call-cta{padding:10px 20px 10px 10px;gap:12px}
  .call-cta .pic{width:44px;height:44px}
  .call-cta .pic svg{width:19px;height:19px}
  .call-cta .no{font-size:2rem}
  .call-cta .lb{font-size:var(--fs-sxm)}

  .tb-sep,.tb-item[href^="mailto"]{display:none}
  .loc-card{flex:0 0 88%}
  .proc-num{font-size:4.4rem}
  .price-fig .amt{font-size:3rem}
}

/* the topbar number must never wrap, and the email goes before it would */
.tb-item{white-space:nowrap}
@media(max-width:620px){
  .tb-sep,.tb-item[href^="mailto"]{display:none}
}

/* the green announcement bar is desktop only, it just eats height on a phone */
@media(max-width:768px){
  .topbar{display:none}
}


/* =======================================================================
   STICKY HEADER
   The pill floats over the page and follows the scroll. No JS: it keeps
   its own gap from the top so it reads as floating rather than welded on.
   ======================================================================= */
.header-wrap{position:sticky;top:10px;z-index:60}
@media(max-width:860px){
  .header-wrap{top:8px}
  .header{margin-top:8px}
}

/* =======================================================================
   CENTRED TEXT ON MOBILE
   Everything except the header. 768 and under.
   ======================================================================= */
@media(max-width:768px){

  /* hero */
  .hero-inner{align-items:center;text-align:center}
  .hero .sub{margin-left:auto;margin-right:auto}
  .pill,.call-cta{margin-left:auto;margin-right:auto}

  /* section headings */
  .sec-head{align-items:center;text-align:center}
  .sec-head .desc{margin-left:auto;margin-right:auto}
  .sec-head > div{width:100%}

  /* body prose */
  .prose{text-align:center}
  .prose p,.prose h2,.prose h3,.prose p.lead,.prose .note{text-align:center}

  /* bulleted lists centre too, so the dot moves inline instead of hanging */
  .prose ul{text-align:center}
  .prose li{padding-left:0;text-align:center}
  .prose li::before{position:static;display:inline-block;margin-right:9px;
    vertical-align:middle;top:auto;left:auto}
  .pd-list li{padding-left:0;text-align:center}
  .pd-list li::before{position:static;display:inline-block;margin-right:9px;
    vertical-align:middle;top:auto;left:auto}

  /* cards */
  .proj-card{justify-content:center}
  .proj-inner{text-align:center}
  .proj-loc{justify-content:center}
  .proj-rule{margin-left:auto;margin-right:auto}
  .proj-card p{margin-left:auto;margin-right:auto}
  .proj-card .btn{margin-left:auto;margin-right:auto}

  .proc-card{text-align:center}
  .price-card{text-align:center;align-items:center}
  .price-fig{justify-content:center}
  .art-body{text-align:center}
  .art-meta{justify-content:center}
  .xcard{flex-direction:column;text-align:center}
  .loc-body{text-align:center}
  .loc-foot{justify-content:center}
  .pill-row{justify-content:center}

  /* timeline back to a centred stack, dot above the text */
  .tl-step{display:block;text-align:center;padding:0}
  .tl-dot{margin:0 auto 16px}

  /* faq: question centres, the toggle stays put on the right */
  .faq-item h3{text-align:center}
  .faq-body{text-align:center}

  /* tables read better centred at this width */
  .ptable th,.ptable td{text-align:center}
  .ptable td:first-child{text-align:center}

  /* chrome */
  .crumbs .container{text-align:center}
  .footer,.footer .foot-grid > div{text-align:center}
  .footer .nap{text-align:center}
  .cta .container{text-align:center}

  /* label/value rows keep their two column reading, centring them is noise */
  .price-row,.pd-line{justify-content:space-between;text-align:left}
  .price-row span:last-child,.pd-line span:last-child{text-align:right}
}


/* =======================================================================
   MOBILE: BIGGER TYPE, FULL SCREEN HERO, BIGGER CALL BUTTON
   Desktop is untouched.
   ======================================================================= */
@media(max-width:768px){

  /* every rem size scales at once: 62.5% -> 75% is exactly +20% */
  html{font-size:75%}

  /* the full height hero is gone. the home hero is now a rounded image
     card, defined at the end of this file. subpage heroes keep the sizing
     they already had. */

  /* call button, considerably bigger. full width so the number can grow
     without running past the edge of a 375px screen. */
  .call-cta{width:100%;justify-content:center;gap:16px;
    padding:18px 22px;margin-top:30px;border-radius:80px}
  .call-cta .pic{width:60px;height:60px}
  .call-cta .pic svg{width:27px;height:27px}
  .call-cta .ct{align-items:flex-start}
  .call-cta .lb{font-size:var(--fs-sm)}
  .call-cta .no{font-size:2.7rem;white-space:nowrap}
}

@media(max-width:480px){
  .call-cta{padding:16px 16px;gap:13px}
  .call-cta .pic{width:54px;height:54px}
  .call-cta .pic svg{width:24px;height:24px}
  .call-cta .no{font-size:2.4rem}
}

/* the +20% type scale pushed the logo onto two lines and stretched the
   header. the header bar is fixed height, so its logo opts out of the scale
   and never wraps, however long the business name is. */
@media(max-width:768px){
  .header{gap:8px}
  /* truncates rather than widening the page, so a long business name in
     config.json can never break the header on a small screen */
  .logo{font-size:1.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media(max-width:480px){
  .logo{font-size:1.6rem}
}
@media(max-width:380px){
  .logo{font-size:1.4rem}
  .navtoggle{width:38px;margin-right:0}
}

/* =======================================================================
   MOBILE HERO CROP + CALL BUTTON SIZE
   Desktop keeps the centred crop and its own button size.
   ======================================================================= */
@media(max-width:768px){
  /* the tall phone crop was landing on a single close up post. shifting the
     focal point right picks up the fence receding over the hill instead. */
  .hero .hero-bg img{object-position:90% center}

  /* call button back down a step */
  .call-cta{padding:15px 20px;gap:14px}
  .call-cta .pic{width:52px;height:52px}
  .call-cta .pic svg{width:24px;height:24px}
  .call-cta .no{font-size:2.4rem}
}

@media(max-width:480px){
  .call-cta{padding:13px 14px;gap:12px}
  .call-cta .pic{width:46px;height:46px}
  .call-cta .pic svg{width:21px;height:21px}
  .call-cta .no{font-size:2.15rem}
}


/* =======================================================================
   HEADER BUTTON GROUPING (mobile)
   space-between across logo, call button and burger was parking the button
   in the middle of the bar. the logo takes the free space instead so the
   button and burger sit together on the right.
   ======================================================================= */
@media(max-width:860px){
  .header{justify-content:flex-start}
  .logo{margin-right:auto}
  .header .btn{margin-left:0;margin-right:2px;padding:5px;gap:0;font-size:0}
  .header .btn .circ{width:36px;height:36px}
  .navtoggle{margin-right:0;margin-left:0}
}

/* =======================================================================
   HOME HERO AS A ROUNDED IMAGE CARD (mobile only)
   The image sits below the header and behind the pill, heading and subline.
   It stops short of the call button, which sits on the page background.
   .hero-sub is excluded throughout so service, area, blog and legal pages
   keep the hero they already had.
   ======================================================================= */
@media(max-width:768px){
  /* sits below the header, dropped 40px so it is not crowding it */
  .hero:not(.hero-sub){margin-top:0;padding-top:40px}

  /* the image is a card inset to the container gutter so its corners show.
     110px clears the 82px button at this width plus a 28px gap. */
  .hero:not(.hero-sub) .hero-bg{
    left:18px;right:18px;top:40px;bottom:128px;
    border-radius:15px}

  /* the hero ends on the fold: 72px header + 40px top padding.
     svh, not dvh. dvh recalculates as the browser bars retract during a
     scroll, which grows the hero and makes the image look like it is
     zooming. svh is a fixed value, so nothing moves while scrolling. */
  .hero:not(.hero-sub) .hero-inner{
    min-height:calc(100vh - 112px);
    min-height:calc(100svh - 112px);
    padding:0 0 136px;
    justify-content:center}

  /* out of flow and pinned to the bottom, so the text above can centre in
     the image without the button dragging it off centre */
  /* env() keeps it off the iPhone home indicator, which would otherwise
     sit on top of a button flush to the bottom edge */
  .hero:not(.hero-sub) .call-cta{
    position:absolute;left:0;right:0;margin-top:0;
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 10px 30px rgba(255,101,37,.30)}

  /* more air between the hero elements */
  .hero:not(.hero-sub) h1{margin-top:30px}
  .hero:not(.hero-sub) .sub{margin-top:26px}
  .hero:not(.hero-sub) .pill{margin-bottom:4px}
}

@media(max-width:480px){
  /* the button is 72px here rather than 82px, so the image comes down
     further and the reserved space shrinks to match. */
  .hero:not(.hero-sub) .hero-bg{bottom:118px}
  .hero:not(.hero-sub) .hero-inner{padding-bottom:126px}
}


/* =======================================================================
   SUBPAGE HERO (mobile)
   Service, area, blog and legal heroes stop hiding behind the header. The
   image starts below it with the top two corners rounded. The bottom two
   stay square because the breadcrumb bar sits flush against the image, and
   rounding there would leave two white notches against it.
   ======================================================================= */
@media(max-width:768px){
  .hero-sub{margin-top:0;padding-top:20px}
  /* same 18px side inset as the home hero card */
  .hero-sub .hero-bg{top:20px;left:18px;right:18px;border-radius:15px 15px 0 0}
}


/* =======================================================================
   SUBPAGE CALL BUTTON BELOW THE BREADCRUMBS (mobile)
   On a phone the hero copy fills the image on its own and the button moves
   below the breadcrumb trail. Desktop keeps the button on the image, so the
   markup carries both and these rules pick one.
   ======================================================================= */
.subcta{display:none}

@media(max-width:768px){
  .subcta{display:block;padding:20px 0 2px}
  .subcta .call-cta{margin-top:0}

  /* the in-hero button steps aside so the heading and subline fill the image */
  .hero-sub .call-cta{display:none}
  .hero-sub .hero-inner{min-height:0;padding:42px 0 46px}
}


/* =======================================================================
   SUBPAGE FOLD (mobile)
   Hero, breadcrumbs and call button together fill the screen, so the phone
   number lands at the bottom on landing, same as the home page.

   The crumbs bar is 56px on most pages and 79px where the trail wraps, so a
   fixed height calc would be wrong somewhere. The wrapper is sized to the
   viewport and the hero takes flex:1, absorbing whatever is left. Correct
   regardless of how the crumbs render.
   ======================================================================= */
@media(max-width:768px){
  .topblock{display:flex;flex-direction:column;
    min-height:calc(100vh - 72px);
    min-height:calc(100svh - 72px)}

  /* the hero soaks up the leftover space */
  .topblock .hero-sub{flex:1;display:flex;flex-direction:column}
  .topblock .hero-sub .container{flex:1;display:flex}
  .topblock .hero-sub .hero-inner{flex:1;justify-content:center}

  /* button clears the bottom edge and the iPhone home indicator */
  .subcta{padding:20px 0 calc(18px + env(safe-area-inset-bottom, 0px))}
}


/* =======================================================================
   LOCATION CARD EDGES + HERO TEXT CLEARANCE
   ======================================================================= */

/* the cards are white and sit on a white section, so with no border and no
   shadow their edges were invisible */
.loc-card{border:1px solid #e4ece4;box-shadow:0 2px 12px rgba(34,61,45,.06)}

@media(max-width:768px){
  /* the hero image is inset 18px and .container is padded 18px, so the text
     was landing flush on the image edge with nothing between them */
  .hero:not(.hero-sub) .hero-inner{padding-left:12px;padding-right:12px}
  .hero-sub .hero-inner{padding-left:12px;padding-right:12px}
}


/* =======================================================================
   PRICING AND TIMELINE TABLES ON MOBILE
   Six columns will not fit a 339px screen at a readable size, so each row
   becomes a card: the material is the card heading and every other cell
   shows its column name beside its value. No sideways scrolling.
   ======================================================================= */
@media(max-width:768px){
  .tablewrap{overflow:visible}

  .ptable{min-width:0;display:block;border:none;background:transparent;border-radius:0}
  .ptable thead{display:none}
  .ptable tbody{display:block}

  .ptable tr{display:block;background:#fff;border:1px solid #e4ece4;
    border-radius:14px;padding:4px 18px 10px;margin-bottom:14px;
    box-shadow:0 2px 12px rgba(34,61,45,.06)}
  .ptable tr:last-child{margin-bottom:0}

  /* value rows: label on the left, value on the right, which stays readable
     in a way that centring a two column row does not */
  .ptable td{display:flex;justify-content:space-between;align-items:baseline;
    gap:18px;padding:11px 0;border-top:1px solid #eef2ee;text-align:right}
  .ptable td::before{content:attr(data-label);flex:none;text-align:left;
    font-weight:600;color:var(--color-text)}

  /* first cell is the row title, so it spans the card and drops its label */
  .ptable td:first-child,
  .ptable tbody tr:first-child td:first-child{display:block;text-align:center;
    border-top:none;padding:14px 0 12px;font-size:var(--fs-xl)}
  .ptable td:first-child::before{content:none}

  /* the base stylesheet strips the top border from the first row; here every
     card needs its own separators back */
  .ptable tbody tr:first-child td{border-top:1px solid #eef2ee}
  .ptable tbody tr td:first-child{border-top:none}

  /* the base rule sets white-space:nowrap on these, which in a flex row
     cannot shrink and so ran past the edge of the card. let it wrap and
     bring the size down so label and value share the width. */
  .ptable .amt-cell{font-size:var(--fs-base);white-space:normal}
  .ptable td{gap:14px}
  .ptable td::before{max-width:46%}
}


/* =======================================================================
   HEADER NAV CALL ITEM
   Desktop has no Contact item at all. On mobile the same element becomes an
   orange call button at the foot of the dropdown.
   ======================================================================= */
.nav-call{display:none}

@media(max-width:860px){
  /* a.nav-call, not .nav-call: the plain class loses to .nav a, so the text
     was inheriting the dark nav link colour instead of going white */
  .nav a.nav-call{display:flex;align-items:center;justify-content:center;gap:10px;
    margin:8px 14px 6px;padding:15px 18px;border-radius:100px;
    background:var(--color-accent);color:#fff;font-weight:700;
    font-size:var(--fs-lg);white-space:nowrap}
  .nav-call svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2}
  /* it is a button, not another row, so it drops the divider above it */
  .nav a + .nav-call{border-top:none}
}

/* =======================================================================
   SERVICE PAGE TIMELINE ON MOBILE
   Service pages use .tlv, a vertical timeline with the dot to the left of
   the text. The home page uses .tl, which centres and stacks on mobile.
   .tlv had no mobile rules at all, so the two looked nothing alike.
   This matches .tlv to the home page treatment.
   ======================================================================= */
@media(max-width:768px){
  /* the connector runs down the left of the dots, which makes no sense once
     the dots are centred */
  .tlv::before{display:none}
  .tlv-step{display:block;text-align:center;padding-bottom:30px}
  .tlv-step:last-child{padding-bottom:0}
  .tlv-dot{margin:0 auto 16px}
  .tlv-body{padding-top:0}
}

/* =======================================================================
   DESKTOP: TIGHTEN THE TOP OF SUBPAGES
   The first paragraph was landing 43px below the fold on a 1280x800 laptop,
   so nothing but the hero and breadcrumbs was visible on landing. The hero
   loses height and the first content section loses top padding.
   Mobile is untouched: this is min-width 769 only.
   ======================================================================= */
@media(min-width:769px){
  /* min-height is not the lever here: the hero is content driven at ~455px,
     so the height has to come out of padding and type, not that number */
  .hero-sub .hero-inner{min-height:0;padding:26px 0 32px}
  .hero-sub h1{font-size:48px;margin-top:16px}
  .hero-sub .sub{margin-top:16px}
  .hero-sub .call-cta{margin-top:26px}
  /* .topblock wraps hero + crumbs + subcta, so the first content section is
     its next sibling rather than the crumbs' */
  .topblock + section{padding-top:clamp(30px, 4.5vh, 52px)}
  .crumbs .container{padding-top:13px;padding-bottom:13px}
}

/* =======================================================================
   CENTRE THE LOCATION CARD IN THE CAROUSEL (mobile)
   The card was 88% wide with scroll-snap-align:start, so it pinned to the
   left edge and every bit of leftover space sat on the right. Giving the
   track symmetric padding and sizing the card to the content box puts equal
   space on both sides. scroll-padding-left matches, so a swipe snaps to the
   same centred position the arrows scroll to.
   ======================================================================= */
@media(max-width:768px){
  .loc-track{padding-left:20px;padding-right:20px;scroll-padding-left:20px}
  .loc-card{flex:0 0 100%}
}
@media(max-width:480px){
  .loc-card{flex:0 0 100%}
}

/* =======================================================================
   SERVICE PAGE TIMELINE ON DESKTOP
   .tlv was built as a vertical timeline: dot on the left, connector running
   down the side. The home page .tl is horizontal. This makes .tlv match it
   on desktop so the two pages read the same.

   grid-auto-flow:column rather than repeat(5,1fr): every service happens to
   have five steps today, but a future city with four or six should still
   lay out correctly rather than silently breaking.
   ======================================================================= */
@media(min-width:769px){
  .tlv{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
    max-width:none;margin:14px auto 0}

  /* the connector flips from a vertical rule on the left to a horizontal
     one running through the middle of the dots */
  .tlv::before{top:26px;left:10%;right:10%;bottom:auto;width:auto;height:2px}

  .tlv-step{display:block;text-align:center;padding:0 12px}
  .tlv-dot{margin:0 auto 22px}
  .tlv-when{margin-bottom:8px}
  .tlv-body{padding-top:0}
  .tlv-body h3{font-size:var(--fs-xl);margin-bottom:10px;line-height:1.3}
  .tlv-body p{font-size:var(--fs-sm);line-height:1.65}
}

/* =======================================================================
   SECTION HEADINGS ON DESKTOP
   .sec-head h2 carried max-width:16ch, which forced even short headings
   like "Fence Pricing Compared" onto two lines. Removed, so they sit on one.
   The description that sat beside the heading is hidden here. It stays in
   the markup and stays visible on mobile, which is left untouched.
   The View All buttons share that column and are deliberately not hidden.
   ======================================================================= */
@media(min-width:769px){
  .sec-head h2{max-width:none}
  .sec-head .desc{display:none}
  /* with the description gone the second column holds only the View All
     button, so the 60px gutter is just stealing width from the heading */
  .sec-head{gap:24px}
}

/* 56px left the longest heading 109px short of one line. These sizes clear
   it with real slack at every desktop width, and buy room for a longer city
   name in another build. A very long one can still wrap; no fixed size can
   guarantee otherwise.
   Split by breakpoint so this does not stomp the existing 44px reduction
   that already applies below 1100. */
@media(min-width:1101px){
  .sec-head h2{font-size:48px}
}
@media(min-width:769px) and (max-width:1100px){
  .sec-head h2{font-size:38px}
  /* in this band the View All button was taking 179px out of the heading's
     line. Letting it drop below gives the heading the full container width,
     which is what actually keeps it on one line here. */
  .sec-head{flex-wrap:wrap;align-items:flex-start}
  .sec-head > div:first-child{flex:1 1 100%}
}


/* =======================================================================
   PRICE DETAIL VALUES ON NARROW SCREENS
   .pd-line span is nowrap so a short value like "$45 to $75" stays on one
   line. A long value cannot shrink in a flex row, so it pushed the whole box
   past the viewport on a 375px screen. Below 560px it wraps instead.
   ======================================================================= */
@media(max-width:560px){
  /* the base rule is .pd-line span:last-child, which is (0,2,1). matching that
     specificity is the whole fix; a plainer selector silently loses. */
  .pd-line{flex-wrap:wrap;row-gap:2px;min-width:0}
  .pd-line span:last-child{white-space:normal;text-align:right;
    overflow-wrap:anywhere;min-width:0}
  /* grid and flex children default to min-width:auto and refuse to shrink
     below their content, which is what pushed the box past the viewport */
  .pd-box,.pd-grid{min-width:0}
}


/* =======================================================================
   LONG UNBREAKABLE TOKENS IN PROSE
   A domain or email in body text is one word to the layout engine. At 320px
   glendalefencepros.com pushed the privacy page 17px past the viewport with
   no element reporting as oversized, which is what makes it hard to spot.
   ======================================================================= */
@media(max-width:560px){
  .prose p,.prose li,.prose a,.faq-body{overflow-wrap:anywhere}
}


/* =======================================================================
   WHITE TEXT ON PHOTOS
   Solved with _contrast.py, which composites each overlay over the real
   image and measures the worst WCAG ratio inside the box the text occupies.
   Target is 5:1, just past the 4.5:1 needed for normal text.

   The CTA fix is the important one. .ph:has(img)::after{display:none} was
   hiding the CTA scrim completely, so that band sat at 1.65:1. Raising the
   specificity above (0,1,2) brings it back.
   ======================================================================= */

/* CTA band. Was 1.65:1 with no scrim at all, now about 7:1. */
.cta-bg.ph::after{display:block;content:"";position:absolute;inset:0;z-index:2;
  background:rgba(16,34,21,.62)}

/* Subpage heroes put a headline over a service or article photo, and the old
   gradient faded to .10 at the right hand end. Was 2.86:1 on the brightest
   article image. */
.hero-sub .hero-bg::before{background:linear-gradient(90deg,
  rgba(10,18,11,.92) 0%,rgba(10,18,11,.71) 50%,rgba(10,18,11,.50) 100%)}

/* Square service cards sit their text at the bottom over a ramp that only
   reached .45 at mid height. Was 3.87:1 on the area pages. */
.proj-card.sq::before{background:linear-gradient(180deg,
  rgba(21,44,28,.22) 0%,rgba(21,44,28,.63) 45%,rgba(21,44,28,.95) 100%)}

@media(max-width:768px){
  /* Hero text centres on mobile, so a left to right gradient leaves it over
     the bright side of the photo. Flat scrim instead. Was 3.07:1. */
  .hero .hero-bg::before{background:rgba(10,18,11,.55)}
  .hero-sub .hero-bg::before{background:rgba(10,18,11,.60)}
}


/* =======================================================================
   HOME SERVICE CARDS ON MOBILE
   The card image runs 5px past the top and 5px past the bottom, and the
   kicker beside the check mark is held on one line. The longest kicker is
   "Walk Gates And Driveway Gates" at 29 characters, which was wrapping on a
   375px screen once the 34px check circle and its gap were taken off.
   ======================================================================= */
@media(max-width:768px){
  .proj-card:not(.sq) .proj-bg{top:-5px;bottom:-5px}

  /* Give the photo room above and below the text block, so the card reads as a
     picture with words on it rather than a block of words. */
  .proj-card:not(.sq) .proj-inner{padding-top:44px;padding-bottom:44px}

  /* The base gradient runs left to right, from .94 down to .06, which suits
     left aligned text on desktop. On mobile the text centres and spans the
     card, so it was landing on the faded end at 1.32:1 against white. Flat
     scrim instead, at the lightest value that still measures 5:1. */
  .proj-card:not(.sq)::before{background:rgba(21,44,28,.66)}

  /* the kicker is a bare text node inside .proj-loc, not a span, so the
     nowrap has to sit on the container. note --fs-base is 1.8rem here and
     --fs-lg is 1.6rem, so base is the LARGER one. --fs-sm is what shrinks it. */
  .proj-card:not(.sq) .proj-loc{white-space:nowrap;gap:9px;
    font-size:var(--fs-sm)}
  .proj-card:not(.sq) .proj-pin{width:28px;height:28px}
  .proj-card:not(.sq) .proj-pin svg{width:14px;height:14px}
}
@media(max-width:400px){
  .proj-card:not(.sq) .proj-loc{font-size:1.35rem;gap:7px}
  .proj-card:not(.sq) .proj-pin{width:25px;height:25px}
  .proj-card:not(.sq) .proj-pin svg{width:12px;height:12px}
}

/* the footer email is one long unbreakable token and the new domain made it
   four characters longer, which pushed a 320px screen sideways */
@media(max-width:560px){
  .footer p,.footer .nap,.footer .logo,.footer a,.footer li{overflow-wrap:anywhere}
}


/* =======================================================================
   HEADER LOGO ON PHONES
   "Fence Company Glendale" is three characters longer than the name it
   replaced, and the header also carries a call button and a hamburger. At
   320px it needed 200px in 176px of space, so it wrapped to two lines inside
   a fixed height bar. At 390px it fit by 11px, which iOS clears easily with a
   fallback font or a larger text size setting.

   It never wraps now. It shrinks instead, with room left over at every width.
   ======================================================================= */
@media(max-width:860px){
  .header .logo,.logo{white-space:nowrap;font-size:15px;letter-spacing:-.01em}
}
@media(max-width:360px){
  /* measured against the fallback font, not Inter, because that is what a
     phone paints before the webfont arrives and it runs about 10% wider */
  .header .logo,.logo{font-size:12.5px;letter-spacing:-.02em}
}