/* ======================================================================
   Inner pages in the v2 look. Loaded after site.css, pages.css and base.css.
   Thin DM Sans headings (as on the homepage), Libre Caslon Text italic for
   quotes, white / Stone / Deep Forest surfaces, near-square corners.
   ====================================================================== */
:root{--display:"DM Sans","Segoe UI",system-ui,sans-serif;--r:var(--radius);
  /* brand palette only: retire the off-palette tokens site.css still defines */
  --stone-2:rgba(157,187,176,.24);--mist-2:rgba(157,187,176,.4);--forest-2:var(--forest);
  --black:var(--deep);--black-2:var(--forest);
  --shadow-dark:0 2px 4px rgba(16,45,38,.2),0 24px 48px -20px rgba(16,45,38,.5)}
body{font:300 17px/1.7 var(--sans);background:var(--stone);color:var(--deep)}
b,strong{font-weight:500}
.container{max-width:calc(1184px + 96px);padding:0 48px}
@media (max-width:1180px){.container{padding:0 32px}}
@media (max-width:640px){.container{padding:0 16px}}

/* header: a solid Deep Forest band on inner pages (no photo behind it) */
header.top.inner{position:absolute;background:transparent}   /* floats over the hero photo, as on the homepage */
@media (max-width:640px){header.top.inner{padding:16px}}

/* breadcrumbs sit inside the same dark block */
.crumbs{background:var(--deep);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.crumbs ol{padding:0 0 8px}

/* page hero: thin uppercase title on Deep Forest, as on the home hero */
.phero,.phero.light{background:var(--deep);color:var(--stone);padding:180px 0 112px}   /* 116px header + 64px */
.phero::before{display:none}
/* tinted photo behind each inner hero: Deep Forest, heaviest behind the text on the left */
.phero.has-img{background:linear-gradient(90deg,rgba(16,45,38,.94) 0%,rgba(16,45,38,.82) 50%,rgba(16,45,38,.6) 100%),linear-gradient(0deg,rgba(16,45,38,.5),rgba(16,45,38,0) 40%),var(--hero-img) center/cover no-repeat var(--deep)}
.phero .eyebrow,.phero.light .eyebrow{color:var(--mist)}
.page .h2.as-h1,.phero.light .h2{font:200 64px/1.1 var(--sans);letter-spacing:.01em;text-transform:uppercase;color:var(--stone);max-width:18ch}
.phero .lead,.phero.light .lead{font-weight:300;color:rgba(245,242,233,.86);max-width:640px;margin-top:24px}
.phero .btn{margin-top:28px}
/* service pages, section 2: project photo left, intro text and consultation button right */
.intro-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.intro-img{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-float)}
.intro-img img{width:100%;height:100%;object-fit:cover;display:block}
.intro-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,45,38,.32),rgba(16,45,38,0) 45%)}
.intro-split .h2{margin:14px 0 18px}.intro-split p{margin-bottom:16px;color:var(--forest)}   /* same rhythm as .two-col */
.intro-split .btn{margin-top:16px}
@media (max-width:960px){.intro-split{grid-template-columns:minmax(0,1fr);gap:40px}.intro-img{aspect-ratio:16/11}}
/* service pages: heading across the top, services in a ruled grid */
.svcs{display:grid;gap:56px}
.svcs>.rv:first-child{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:end}
.svcs>.rv:first-child .eyebrow{grid-column:1/-1}
.svcs>.rv:first-child p:not(.eyebrow){font-size:17px;line-height:1.75;max-width:52ch}
.svcs .svc-list{grid-template-columns:repeat(3,1fr);gap:44px 48px}
.svcs .svc-list li{padding:22px 0 0;border-top:1px solid var(--line)}
.svcs .svc-list li::before{position:static;margin-bottom:18px}
@media (max-width:1024px){.svcs .svc-list{grid-template-columns:1fr 1fr}.svcs>.rv:first-child{grid-template-columns:1fr}.svcs>.rv:first-child p:not(.eyebrow){margin-top:16px}}
@media (max-width:640px){.svcs{gap:36px}.svcs .svc-list{grid-template-columns:1fr;gap:32px}}
/* service pages: "What we bring from the Gulf coast" cards, auto-advancing carousel over a tinted photo */
.whyc{position:relative;isolation:isolate;overflow:hidden;color:var(--stone);padding:112px 0;
  background:url(/assets/photos/p08-pool-after-1-1000.webp) center 40%/cover no-repeat var(--deep)}
.whyc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--forest);mix-blend-mode:multiply;opacity:.5}   /* colour treatment */
.whyc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,45,38,.9) 0%,rgba(16,45,38,.7) 55%,rgba(16,45,38,.55) 100%),linear-gradient(0deg,rgba(16,45,38,.5),rgba(16,45,38,.15))}
.whyc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.whyc .eyebrow{color:var(--mist);margin-bottom:14px}
.whyc .sec-h{color:var(--stone);margin:0}
/* looping row inside the page width: four cards in view, the rest hidden until they slide in (base.js adds a copy of the cards each side) */
.whyc-view{overflow:hidden}
.whyc-list{--w:calc((100% - 60px) / 4);list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:var(--w);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:0}
.whyc-list::-webkit-scrollbar{display:none}
.whyc-list:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:var(--radius)}
.whyc-list li{scroll-snap-align:start;display:flex;flex-direction:column;gap:18px;padding:30px 28px 32px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(245,242,233,.16),rgba(245,242,233,.05)),rgba(16,45,38,.3);border:1px solid rgba(245,242,233,.24);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(245,242,233,.22),0 24px 48px -28px rgba(16,45,38,.9)}
.whyc-list .ck{width:36px;height:36px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
.whyc-list .ck svg{width:17px;height:17px;fill:none;stroke:var(--deep);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.whyc-list b{display:block;font:500 19px/1.3 var(--sans);margin-bottom:10px}
.whyc-list span:not(.ck){display:block;font:300 15px/1.65 var(--sans);color:rgba(245,242,233,.85)}
.whyc-ctrl{display:flex;gap:10px;flex:none}
.whyc-btn{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--radius);border:1px solid rgba(245,242,233,.35);color:var(--stone);background:rgba(16,45,38,.25);cursor:pointer;transition:transform .35s var(--spring),background-color .25s,color .25s}
.whyc-btn svg{width:16px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.whyc-btn.prev svg{transform:scaleX(-1)}
.whyc-btn:hover{background:var(--stone);color:var(--deep)}
.whyc-btn:active{transform:scale(.94)}
.whyc-btn:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media (max-width:1024px){.whyc{padding:88px 0}.whyc-head{margin-bottom:36px}.whyc-list{--w:calc((100% - 20px) / 2)}}
@media (max-width:640px){.whyc{padding:64px 0}.whyc-btn{width:44px;height:44px}.whyc-list{--w:100%}}
/* service pages: Google reviews as one looping row (base.js loopRow), header like the Gulf coast section */
.rev-row .sec-h{margin:0}
.rev-row{padding-top:0}   /* the hairline sits on the seam with section 2, equal space either side */
.sec-rule{border:0;border-top:1px solid var(--ink);margin:0 0 112px}
@media (max-width:640px){.sec-rule{margin-bottom:72px}}
.rev-row .eyebrow{margin-bottom:14px}
.loop-row{--n:4;list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--n) - 1) * 20px) / var(--n));gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 0 44px;margin-bottom:-16px}
.loop-row::-webkit-scrollbar{display:none}
.loop-row>li{scroll-snap-align:start}
.loop-row:focus-visible{outline:2px solid var(--forest);outline-offset:-2px;border-radius:var(--radius)}
.rev-row .whyc-btn{border-color:rgba(16,45,38,.3);color:var(--deep);background:transparent}
.rev-row .whyc-btn:hover{background:var(--deep);color:var(--stone)}
.rev-row .whyc-btn:focus-visible{outline-color:var(--forest)}
@media (max-width:1024px){.loop-row{--n:2}}
@media (max-width:640px){.loop-row{--n:1}}
.phero .hproof{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:36px}   /* service pages: the homepage hero badges */
@media (max-width:640px){.phero .hproof{margin-top:24px}}
@media (max-width:1024px){.page .h2.as-h1,.phero.light .h2{font-size:52px}}
@media (max-width:640px){.phero,.phero.light{padding:116px 0 80px}.page .h2.as-h1,.phero.light .h2{font-size:36px}}

/* type */
.display{font:200 72px/1.1 var(--sans);letter-spacing:.01em;text-transform:uppercase}
.h2{font:200 32px/1.15 var(--sans);letter-spacing:.01em;text-transform:uppercase;color:var(--deep)}   /* section headers match GET MY FREE CONSULTATION; page heroes (.as-h1) keep their own */
.h3{font:400 20px/1.35 var(--sans)}
.eyebrow{font:400 13px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.final .eyebrow{font-size:13px}   /* the band's paragraph size must not reach its label: every section label is 13px */
.lead{font-weight:300}
.sec-head{text-align:left;max-width:none;margin:0 0 48px}
.sec-head .eyebrow{justify-content:flex-start}
.sec-head .h2{max-width:28ch}
.sec-head p.sub{max-width:640px;font-weight:300}
@media (max-width:640px){.h2{font-size:28px}.display{font-size:40px}}

/* surfaces: white, Stone, Deep Forest (no tinted greys) */
.section{padding:112px 0}
.bg-paper{background:var(--stone)}
.bg-stone{background:var(--stone-2)}
.bg-forest{background:var(--deep)}
@media (max-width:640px){.section{padding:72px 0}}

/* links read like the homepage arrows */
.link{font:400 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--deep);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line)}
.link:hover{text-decoration:none;border-color:var(--forest)}
.link:active{opacity:.7}
.link svg{stroke:var(--forest);transition:transform .45s var(--spring)}
.link:hover svg{transform:translateX(5px)}
.on-dark .link,.bg-forest .link{color:var(--stone);border-color:var(--line-dark)}
.on-dark .link svg,.bg-forest .link svg{stroke:var(--green)}

/* buttons: same pills, lighter type */
.btn{font:500 16px/1 var(--sans);transition:transform .35s var(--spring),background-color .2s,color .2s,border-color .2s}
.btn,.btn.sq{border-radius:var(--radius)}
.btn.primary:hover{background:var(--forest);border-color:var(--forest);color:var(--stone)}
.phero .btn.primary:hover,.bg-forest .btn.primary:hover,.final .btn.primary:hover,.band .btn.primary:hover,.on-dark .btn.primary:hover{background:var(--stone);border-color:var(--stone);color:var(--deep)}

/* cards and tiles: flat, hairline, near-square */
.short{background:var(--stone)}
.short-card{background:var(--stone);border:0;border-left:2px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow-float);padding:32px 40px}
.short-card .lab{font-weight:400;text-transform:uppercase;letter-spacing:.08em}
.short-card .big{font:300 23px/1.5 var(--sans);color:var(--deep)}
.fact,.svc,.steps-row li,.faqlist details,.est,.est-side,.doc-side,.tbl,.fcard{border-radius:var(--r)}
.fact b{font:200 34px/1.1 var(--sans)}
.svc{background:var(--stone)}
.svc img{border-radius:0}
.svc b{font:300 22px/1.2 var(--sans);text-transform:uppercase}
.gallery img,.about-grid img,.ba{border-radius:var(--radius)}
.promise .n,.steps-row .n,.numbered li::before{font-family:var(--sans);font-weight:300}
.tbl th{font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-size:12px;background:var(--stone)}

/* every remaining card and field from site.css / pages.css: the one radius */
.proj,.rating,.ladder li,.person,.person img,.areas .in,.step1,.opts a,.update,.condo .media>img,.pkg,.promise .how,.docsheet .ribbon,
.field input,.field select,.fcard input,.fcard select,.fcard textarea,.est input[type=text],.est input[type=tel],.est input[type=email],.est select{border-radius:var(--radius)}
.proj .ba{border-radius:0}

/* faq */
.faqlist details{background:var(--stone)}
.faqlist summary{font-weight:400}
.faqlist .sqb{border-radius:var(--r)}

/* documents and resources */
.docwrap{background:var(--stone)}
.docsheet{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-float)}
.docsheet::before{width:3px;background:var(--green);border-radius:0}
.docsheet .intro{font:italic 400 22px/1.5 var(--serif)}
.doc-sec h2,.res-sec h2{font:200 32px/1.15 var(--sans);letter-spacing:.01em;text-transform:uppercase}
@media (max-width:640px){.doc-sec h2,.res-sec h2{font-size:28px}}
.reswrap{background:var(--stone)}

/* estimate form */
.est-step legend{font-family:var(--sans);font-weight:200}
.choice span{border-radius:var(--r)}

/* CTA band and the related links strip */
.related{background:var(--deep);color:var(--stone)}
.section.related{padding:44px 0}   /* a slim link strip, not a full section */
.related .eyebrow{color:var(--mist)}
.related .link{color:var(--stone);border-color:var(--line-dark)}
.related .link:hover{border-color:var(--green)}
.related .link svg{stroke:var(--green)}
.related+.final{border-top:1px solid var(--line-dark)}   /* two Deep Forest sections in a row: a hairline keeps them apart */
.related .link{font-size:13px}

/* the old chrome pieces never appear with the v2 template */
.strip,.header,.mobile-nav,.mbar,.callw,.loader{display:none!important}
/* ---- spec sheet (24.10.2026): service lists and the About record use one grammar.
   Left: a sticky heading column. Right: ruled rows, name in its own column so the list reads like an index. */
.spec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 80px;align-items:start}
.spec-head{position:sticky;top:112px}
.spec-head .h2{font-size:40px;line-height:1.08;max-width:15ch;margin-bottom:22px;text-wrap:balance}
.spec-head p{font-size:17px;line-height:1.7;color:var(--forest);max-width:34ch;margin-bottom:30px}
.spec-head .btn{white-space:normal;text-align:center;line-height:1.25}
.spec-list{border-top:1px solid var(--deep)}
.spec-list li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:10px 44px;padding:28px 0 30px;border-bottom:1px solid var(--line)}
.spec-list li:last-child{border-bottom-color:var(--deep)}
.spec-list h3{font:400 20px/1.3 var(--sans);letter-spacing:-.01em;color:var(--deep);text-wrap:balance}
.spec-list p{font-size:16px;line-height:1.72;color:var(--forest);max-width:64ch}
/* the About record: one dark document, not three cards */
.ledger{background:var(--deep);color:var(--stone);border-radius:var(--radius);padding:8px 40px;box-shadow:0 2px 6px rgba(16,45,38,.14),0 30px 60px -36px rgba(16,45,38,.6)}
.lrow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"lab val act" "lab det act";gap:6px 32px;padding:30px 0 32px;border-bottom:1px solid var(--line-dark)}
.lrow:last-child{border-bottom:0}
.lrow dt{grid-area:lab;padding-top:12px;font:400 14px/1.4 var(--sans);color:var(--mist)}
.lval{grid-area:val;font:200 40px/1.1 var(--sans);letter-spacing:-.01em;color:var(--stone);overflow-wrap:anywhere}
.ldet{grid-area:det;font-size:16px;line-height:1.65;color:rgba(245,242,233,.78);max-width:60ch}
.lact{grid-area:act;align-self:center}
.ledger .link{color:var(--stone);border-color:var(--line-dark);white-space:nowrap}
.ledger .link svg{stroke:var(--green)}
.ledger .link:hover{border-color:var(--green)}
.num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
@media (max-width:1024px){.spec{grid-template-columns:1fr;gap:44px}.spec-head{position:static}.spec-head .h2{max-width:20ch}}
@media (max-width:760px){.lrow{grid-template-columns:1fr;grid-template-areas:"lab" "val" "det" "act";gap:6px;padding:26px 0}.lrow dt{padding-top:0}.lact{margin-top:10px;align-self:start}.ledger{padding:4px 24px}.lval{font-size:30px}}
@media (max-width:640px){.spec-head .h2{font-size:30px}.spec-list li{grid-template-columns:1fr;gap:8px;padding:24px 0}.spec-list h3{font-size:19px}}
/* ---- services grouped by stage (24.10.2026, replaces the spec-sheet list on service pages; .spec stays for the About record) */
.container.stages{display:block;margin:0 auto}
.stages-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px 80px;align-items:end;margin-bottom:64px}
.stages-head .h2{font-size:40px;line-height:1.08;max-width:15ch;text-wrap:balance}
.stages-head p{font-size:17px;line-height:1.7;color:var(--forest);max-width:46ch;margin-bottom:24px}
.stages-head .btn{white-space:normal;text-align:center;line-height:1.25}
.stage{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px 64px;padding:36px 0 44px;border-top:1px solid var(--deep)}
.stage li:nth-child(-n+2){border-top:0;padding-top:0}   /* first row starts level with the stage name, no hairline */
.stage-h{position:sticky;top:112px;align-self:start}
.stage-h h3{font:200 26px/1.15 var(--sans);letter-spacing:.01em;text-transform:uppercase;color:var(--deep);text-wrap:balance}
.stage-h span{display:block;margin-top:10px;font:400 14px/1.4 var(--sans);color:var(--forest);font-variant-numeric:tabular-nums}
.stage ul{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px}
.stage li{padding-top:18px;border-top:1px solid var(--line)}
.stage h4{font:400 19px/1.3 var(--sans);letter-spacing:-.01em;color:var(--deep);margin-bottom:8px;text-wrap:balance}
.stage li p{font-size:16px;line-height:1.7;color:var(--forest)}
@media (max-width:1024px){.stages-head{grid-template-columns:1fr;gap:20px;margin-bottom:48px}.stage{grid-template-columns:1fr;gap:20px}.stage-h{position:static;display:flex;align-items:baseline;justify-content:space-between;gap:16px}.stage-h span{margin-top:0}}
@media (max-width:640px){.stages-head .h2{font-size:30px}.stage{padding:28px 0 32px}.stage ul{grid-template-columns:1fr;gap:24px}.stage li:nth-child(2){border-top:1px solid var(--line);padding-top:18px}.stage-h h3{font-size:22px}}