/* ============================================================
   LANDSCAPING TEMPLATE — "the garden book"  (Sep 15 2026)
   Warm daylight. Cream paper · warm stone · bark-olive ink · olive moss (the CTA, pulled from the planted borders)
   · a deep olive for the one dark band (the shade under the pergola) · bark brown for text links · lichen on dark.
   No vivid green, no orange/terracotta, no accent hue borrowed from another template.
   Fraunces 600 display (soft, optical sizes) · Figtree text · sentence case, generous line-height.
   Soft edges on photos only (8px); buttons and fields stay nearly square.
   Owns every section look (CLAUDE.md rule 11). base.css supplies mechanics only.
   ============================================================ */
:root{
  --paper:#f6f1e7; --stone:#e8e1d2; --white:#fffdf8;
  --ink:#29281e; --body:#3b392e; --mut:#5f5a4b;
  --moss:#5b6031; --deep:#2f3522; --bark:#5c4630; --lichen:#d6d0a4;
  --line:#d9d0bf; --line-strong:#29281e; --line-dark:rgba(239,233,218,.16);
  --anchor:#2f3522; --on-dark:#efe9da;
  --accent:#5b6031; --accent-x:#4a4f27; --accent-t:#5c4630; --accent-glow:rgba(91,96,49,.35); --on-accent:#ffffff;
  --accent-on-dark:#d6d0a4;
  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Figtree',system-ui,'Segoe UI',sans-serif;
  --dispw:600; --track:-.02em; --r:3px; --rp:8px; --wrap:1320px; --logo-h:48px; --fs:18px;
  --field-bg:#fffdf8;
}
body{background:var(--paper);color:var(--body);line-height:1.7}
h1,h2,h3{font-family:var(--disp);font-weight:600;font-optical-sizing:auto;color:var(--ink)}
h2{font-size:clamp(34px,3.7vw,56px);line-height:1.06;letter-spacing:-.022em}
h3{letter-spacing:-.012em}
a{color:var(--bark)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* site.css puts base.css after this file, so a section rule that shares a name with a base rule needs one more class/element to win */
p.kick{font-family:var(--disp);font-style:italic;font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.3;letter-spacing:0;text-transform:none;color:var(--bark);margin:0 0 10px}
.lab{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--moss)}
p.lede{font-size:clamp(17px,1.3vw,19.5px);line-height:1.6;color:var(--body);max-width:46ch}
.site-head{--head-bg:var(--paper);--head-fg:var(--ink)}
.topbar{font-weight:500;font-size:13.5px;letter-spacing:.01em}
.links>a{font-family:var(--sans);font-weight:600;font-size:15.5px}
.hcta .tel{font-family:var(--sans);font-weight:700;font-size:17px}
.btn{font-family:var(--sans);font-weight:600;font-size:15.5px}
figcaption{font-size:14px;line-height:1.5;color:var(--mut)}
.fl span,.fs legend{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink)}
.promise{font-size:14px;color:var(--mut)}
.shead,.rows>.wrap.shead,.proc>.wrap.shead{margin-bottom:clamp(28px,3.4vw,52px)}
.shead h2{max-width:21ch}

/* ---------- 1. mosaic hero: text cell + one tall photo + two stacked ---------- */
.mos{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,31fr) minmax(0,31fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:10px;
  height:calc(100vh - 118px);height:calc(100svh - 118px);min-height:660px;max-height:960px}
.mos>*{min-width:0}
.mtext{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;background:var(--stone);border-radius:var(--rp);padding:clamp(28px,3.2vw,56px) clamp(24px,3vw,52px)}
.mtext .kick{margin-bottom:auto;padding-bottom:24px}
.mos h1{font-size:clamp(52px,5.6vw,92px);line-height:.98;letter-spacing:-.032em;max-width:11ch}
.mos .sub{margin-top:22px;font-size:clamp(17px,1.35vw,21px);line-height:1.55;max-width:34ch}
.mos .acts{display:flex;gap:14px 22px;align-items:center;flex-wrap:wrap;margin-top:28px}
.mos .tl{font-weight:600;font-size:16px;color:var(--ink);white-space:nowrap}
.mos .cap{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mut)}
.mc{margin:0;position:relative;overflow:hidden;border-radius:var(--rp);background:var(--stone)}
.mc picture,.mc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mc.m1{grid-column:2;grid-row:1/3}
.mc.m2{grid-column:3;grid-row:1}
.mc.m3{grid-column:3;grid-row:2}
@media(max-width:1000px){
  .mos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto clamp(170px,30vw,300px) clamp(170px,30vw,300px);height:auto;min-height:0;max-height:none}
  .mtext{grid-column:1/3;grid-row:1}
  .mc.m1{grid-column:1;grid-row:2/4}
  .mc.m2{grid-column:2;grid-row:2}
  .mc.m3{grid-column:2;grid-row:3}
  .mos h1{max-width:13ch}
}
@media(max-width:520px){.mos{gap:6px;padding:6px}.mtext{padding:26px 18px 22px}.mos h1{font-size:44px}}

/* ---------- 2. one sentence of positioning + the owner, small ---------- */
.pos{padding:clamp(64px,8vw,128px) 0}
.pos .wrap{display:grid;grid-template-columns:minmax(0,auto) 230px;justify-content:center;gap:clamp(32px,5vw,80px);align-items:end}
.pos .wrap>*{min-width:0}
.pos .pl{grid-column:1;grid-row:1}
.pos .gt{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);max-width:620px}
.pos .gt h3{margin:6px 0 8px;font-size:24px;line-height:1.2}
.pos .gt p{font-size:17px;line-height:1.6}
.say{font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:1.16;letter-spacing:-.022em;color:var(--ink);max-width:23ch}
.own{grid-column:2;margin:0}
.own img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rp)}
.own figcaption{margin-top:12px}
.own figcaption b{display:block;color:var(--ink);font-weight:600;font-size:15px}
@media(max-width:700px){.pos .wrap{grid-template-columns:minmax(0,1fr) 120px;gap:20px;align-items:start}.say{font-size:27px}}

/* ---------- 3. before / after pairs: two photos + a range input, no library ---------- */
.ba{padding:clamp(60px,7vw,112px) 0;background:var(--stone)}
.pair{margin:0}
.ba-slide{position:relative;overflow:hidden;border-radius:var(--rp);aspect-ratio:16/10;background:var(--line);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.pair.p1 .ba-slide{aspect-ratio:21/9}
.ba-after,.ba-before{position:absolute;inset:0}
.ba-after picture,.ba-after img,.ba-before picture,.ba-before img{display:block;width:100%;height:100%;object-fit:cover}
.ba-before{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#fffdf8;pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:#fffdf8;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.ba-tag{position:absolute;top:14px;padding:6px 11px;border-radius:3px;background:rgba(41,40,30,.78);color:#fffdf8;font-size:13px;font-weight:600;letter-spacing:.02em;pointer-events:none}
.ba-tag.bt{left:14px}
.ba-tag.at{right:14px}
.ba-slide input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-slide:focus-within .ba-knob{outline:3px solid var(--moss);outline-offset:3px}
.pair figcaption{padding-top:18px;color:var(--body)}
.pair figcaption .lab{display:block;margin-bottom:6px}
.pair figcaption h3{font-size:clamp(22px,1.9vw,28px);line-height:1.15}
.pair figcaption p{margin-top:8px;font-size:16.5px;line-height:1.6;max-width:52ch}
.pair.p1 figcaption{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6px clamp(24px,4vw,64px);align-items:start}
.pair.p1 figcaption .lab{grid-column:1;grid-row:1}
.pair.p1 figcaption h3{grid-column:1;grid-row:2}
.pair.p1 figcaption p{grid-column:2;grid-row:1/3;margin-top:0;align-self:end}
.ba-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.6vw,40px);margin-top:clamp(40px,4.4vw,64px)}
.ba .foot{margin-top:30px;font-size:14px;color:var(--mut);max-width:80ch}
@media(max-width:860px){.pair.p1 .ba-slide{aspect-ratio:4/3}.ba-slide{aspect-ratio:4/3}.pair.p1 figcaption{grid-template-columns:minmax(0,1fr)}.pair.p1 figcaption p{grid-column:1;grid-row:3;margin-top:8px}.ba-two{grid-template-columns:minmax(0,1fr)}}

/* ---------- 4. services: full-width alternating photo/copy rows, the photo bleeding to the edge ---------- */
.rows{padding:clamp(64px,8vw,120px) 0 clamp(44px,5vw,76px)}
.shead.two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(28px,5vw,80px);align-items:end}
.shead.two>*{min-width:0}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(420px,37vw,580px);margin-top:12px}
.row>*{min-width:0}
.row figure{grid-column:1;grid-row:1;margin:0;position:relative;overflow:hidden;border-radius:0 var(--rp) var(--rp) 0}
.row figure picture,.row figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.row .rt{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(32px,5vw,96px);max-width:680px}
.row.flip figure{grid-column:2;border-radius:var(--rp) 0 0 var(--rp)}
.row.flip .rt{grid-column:1;justify-self:end}
.rt .n{font-family:var(--disp);font-style:italic;font-size:22px;line-height:1;color:var(--bark)}
.rt h3{margin:10px 0 16px;font-size:clamp(30px,2.9vw,46px);line-height:1.06;letter-spacing:-.02em}
.rt h3 a{color:inherit;text-decoration:none}
.rt h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.rt p{max-width:44ch}
.rt .more{display:inline-flex;gap:8px;margin-top:22px;font-weight:600;color:var(--bark);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.also{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.also a{font-family:var(--disp);font-size:21px;color:var(--ink)}
.also a.all{margin-left:auto;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--bark)}
@media(max-width:860px){
  .shead.two{grid-template-columns:minmax(0,1fr)}
  .row,.row.flip{grid-template-columns:minmax(0,1fr);min-height:0;margin-top:0}
  .row figure,.row.flip figure{grid-column:1;grid-row:1;aspect-ratio:4/3;border-radius:0}
  .row .rt,.row.flip .rt{grid-column:1;grid-row:2;justify-self:start;padding:24px clamp(18px,4vw,44px) 40px}
  .also a.all{margin-left:0}
}

/* ---------- 5. the seasonal calendar: the one dark band, a 12-column type table ---------- */
.cal{background:var(--deep);color:var(--on-dark);padding:clamp(64px,8vw,120px) 0}
.cal h2{color:#fffdf8}
.cal .kick{color:var(--lichen)}
.cal .lede{color:rgba(239,233,218,.84);margin-top:16px}
.calhead{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:28px clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(36px,4.4vw,64px)}
.calhead>*{min-width:0}
.calhead figure{margin:0}
.calhead img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--rp)}
table.calt{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px}
.calt thead th{padding:0 6px 14px;text-align:left;font-family:var(--disp);font-weight:600;font-size:21px;color:#fffdf8;border-bottom:1px solid rgba(239,233,218,.4)}
.calt thead th:first-child{width:176px}
.calt tbody th{padding:15px 12px 15px 0;text-align:left;vertical-align:top;font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.3;color:var(--lichen);border-bottom:1px solid rgba(239,233,218,.14)}
.calt td{padding:15px 6px;vertical-align:top;line-height:1.3;color:rgba(239,233,218,.8);border-bottom:1px solid rgba(239,233,218,.14)}
.calt td.pk{color:#fffdf8;font-weight:700}
.calt td.nil{color:rgba(239,233,218,.3)}
.cal .foot{margin-top:24px;font-size:14px;color:rgba(239,233,218,.72)}
@media(max-width:1100px){
  .calhead{grid-template-columns:minmax(0,1fr)}
  table.calt,.calt tbody{display:block}
  .calt thead{display:none}
  .calt tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 10px;padding:16px 0;border-top:1px solid rgba(239,233,218,.18)}
  .calt tbody th{grid-column:1/-1;padding:0 0 8px;border:0;font-size:16px}
  .calt td{padding:6px 0;border:0;font-size:14.5px}
  .calt td::before{content:attr(data-m);display:block;font-family:var(--disp);font-size:13px;color:rgba(239,233,218,.55)}
}
@media(max-width:600px){.calt tr{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- 6. design-build process: four photos edge to edge, numbered captions ---------- */
.proc{padding:clamp(64px,8vw,120px) 0 clamp(56px,6vw,96px)}
ol.p4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
ol.p4>li{min-width:0}
ol.p4 figure{margin:0}
ol.p4 img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
ol.p4 .pc{padding:20px clamp(16px,2vw,30px) 0}
ol.p4 .n{display:block;font-family:var(--disp);font-style:italic;font-size:21px;line-height:1;color:var(--bark)}
ol.p4 h3{margin:8px 0 8px;font-size:clamp(22px,1.8vw,27px);line-height:1.15}
ol.p4 .pc p{font-size:16.5px;line-height:1.6;max-width:36ch}
@media(max-width:900px){ol.p4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}
@media(max-width:520px){ol.p4{grid-template-columns:minmax(0,1fr)}ol.p4 img{aspect-ratio:3/2}}

/* ---------- 7. reviews: one pull quote, then each review beside its job photo ---------- */
.revs{padding:clamp(64px,8vw,120px) 0;background:var(--stone)}
.rtop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(28px,5vw,88px);align-items:start;margin-bottom:clamp(40px,4.4vw,64px)}
.rtop>*{min-width:0}
.rtop h2{grid-column:1;grid-row:1;max-width:14ch}
.rtop .pq{grid-column:2;grid-row:1}
.pq{margin:0;max-width:none}
.pq p{max-width:24ch;font-family:var(--disp);font-style:italic;font-weight:400;font-size:clamp(28px,2.9vw,44px);line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.pq cite{display:block;margin-top:16px;font-style:normal;font-size:15px;color:var(--mut)}
.rl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.4vw,52px) clamp(24px,3.4vw,56px)}
article.rv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;align-items:start}
article.rv figure{grid-column:1;grid-row:1;margin:0}
article.rv img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rp)}
article.rv .rtx{grid-column:2;grid-row:1;padding-top:6px}
article.rv.np{grid-template-columns:minmax(0,1fr)}
article.rv.np .rtx{grid-column:1}
article.rv .t{font-size:18px;line-height:1.62;color:var(--ink)}
article.rv .who{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:14.5px;color:var(--mut)}
article.rv .who b{display:block;color:var(--ink);font-weight:600}
@media(max-width:900px){.rtop{grid-template-columns:minmax(0,1fr)}.rtop .pq{grid-column:1;grid-row:2}.rl{grid-template-columns:minmax(0,1fr)}article.rv{grid-template-columns:130px minmax(0,1fr);gap:16px}article.rv .t{font-size:16.5px}}

/* ---------- 8. areas: prose with the town links beside a photo ---------- */
.areas{padding:clamp(64px,8vw,120px) 0}
.areas .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:center}
.areas .wrap>*{min-width:0}
.areas .at h2{margin-bottom:22px;max-width:18ch}
.areas .prose p{max-width:56ch}
.areas .prose p+p{margin-top:14px}
.areas figure{margin:0}
.areas figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rp)}
.towns{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.towns a{font-family:var(--disp);font-size:21px;color:var(--ink);text-decoration-color:var(--line);text-underline-offset:5px}
@media(max-width:900px){.areas .wrap{grid-template-columns:minmax(0,1fr)}.areas figure{order:-1}}

/* ---------- 9. FAQ beside a sticky photo ---------- */
.faq{padding:clamp(56px,7vw,112px) 0;border-top:1px solid var(--line)}
.faq .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}
.faq .wrap>*{min-width:0}
.fqfig{position:sticky;top:24px;margin:0}
.fqfig img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rp)}
.faq .fq h2{margin-bottom:24px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:16px;align-items:baseline;padding:20px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{grid-column:1;grid-row:1;font-size:clamp(20px,1.7vw,24px);line-height:1.3}
.faq summary::after{content:"+";grid-column:2;grid-row:1;justify-self:end;font-family:var(--disp);font-size:28px;line-height:1;color:var(--moss)}
.faq details[open] summary::after{content:"\2013"}
.faq .fa{padding:0 46px 24px 0;font-size:17px;line-height:1.66}
.faq .fa p{max-width:62ch}
.faq .fa p+p{margin-top:10px}
@media(max-width:900px){.faq .wrap{grid-template-columns:minmax(0,1fr)}.fqfig{position:static}.fqfig img{aspect-ratio:16/10}.faq .fa{padding-right:0}}

/* ---------- 10. consult form: photo bleeding left, short form right ---------- */
.consult{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:660px;background:var(--stone)}
.consult>*{min-width:0}
.consult figure{grid-column:1;grid-row:1;margin:0;position:relative;overflow:hidden}
.consult figure picture,.consult figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.consult .ct{grid-column:2;grid-row:1;padding:clamp(52px,6vw,104px) clamp(20px,5vw,96px);align-self:center}
.consult h2{max-width:16ch}
.consult .lede{margin-top:16px}
.consult .form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 18px;max-width:640px;margin-top:30px}
.consult .form>label.fl:first-of-type{grid-column:1/-1}
.consult .form .fs,.consult .form .fsub,.consult .form .hp{grid-column:1/-1}
.consult .or{margin-top:20px;font-size:15px;color:var(--mut)}
.consult .or a{color:var(--ink);font-weight:700;white-space:nowrap}
@media(max-width:900px){.consult{grid-template-columns:minmax(0,1fr);min-height:0}.consult figure{aspect-ratio:16/10}.consult .ct{grid-column:1;grid-row:2;padding:36px clamp(18px,4vw,44px) 48px}}
@media(max-width:520px){.consult .form{grid-template-columns:minmax(0,1fr)}}

/* ---------- footer tweaks ---------- */
.site-foot .h4{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:0;text-transform:none}
.fbrand .ftel{font-family:var(--disp);font-weight:600}
.faq.solo .wrap{grid-template-columns:minmax(0,1fr);max-width:1000px}
.consult.np{grid-template-columns:minmax(0,1fr)}
.consult.np .ct{grid-column:1;max-width:900px;margin:0 auto}

/* ============================================================
   INTERIOR PAGES (composed by pages.py) — the same garden-book language: mosaic hero, bleeding photo rows,
   the stone document band, the homepage devices reused whole
   ============================================================ */
/* ---------- page hero: a three-cell mosaic (text cell, one large photo, one narrow photo) ---------- */
.ph{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,38fr) minmax(0,22fr);gap:10px;padding:10px;min-height:clamp(500px,64vh,660px)}
.ph>*{min-width:0}
.ph.one{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
.ptext{grid-column:1;grid-row:1;display:flex;flex-direction:column;background:var(--stone);border-radius:var(--rp);padding:clamp(24px,3vw,52px)}
.ptext .crumb ol{margin-bottom:28px}
.ptext .pt{margin-top:auto}
.ph h1{font-size:clamp(40px,4.3vw,66px);line-height:1.02;letter-spacing:-.03em;max-width:15ch}
.ph p.lede{margin-top:18px}
.ph .ctas,.ty .ctas{display:flex;gap:12px 22px;flex-wrap:wrap;align-items:center;margin-top:26px}
.ph .tl,.ty .tl{font-weight:600;font-size:16px;color:var(--ink);white-space:nowrap}
.ph figure,.ty figure{margin:0;position:relative;overflow:hidden;border-radius:var(--rp);background:var(--stone)}
.ph figure picture,.ph figure img,.ty figure picture,.ty figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .pb,.ty .pb{grid-column:2;grid-row:1}
.ph .ps,.ty .ps{grid-column:3;grid-row:1}
@media(max-width:1000px){
  .ph,.ph.one{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}
  .ptext{grid-column:1/3}
  .ph .pb{grid-column:1;grid-row:2;aspect-ratio:4/5}
  .ph .ps{grid-column:2;grid-row:2;aspect-ratio:4/5}
  .ph.one .pb{grid-column:1/3;aspect-ratio:16/10}
}
@media(max-width:520px){.ph{gap:6px;padding:6px}.ptext{padding:22px 18px}.ph h1{font-size:38px}}

/* ---------- body rows: the photo bleeds to the edge and stays in view beside the copy ---------- */
.srow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin:clamp(48px,6vw,96px) 0}
.srow>*{min-width:0}
.srow figure{grid-column:1;grid-row:1;margin:0}
.srow figure picture{position:sticky;top:20px;display:block}
.srow figure img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0 var(--rp) var(--rp) 0}
.srow .prose{grid-column:2;grid-row:1;align-self:center;width:100%;max-width:800px;padding:0 clamp(20px,5vw,96px)}
.srow.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.srow.flip figure{grid-column:2}
.srow.flip figure img{border-radius:var(--rp) 0 0 var(--rp)}
.srow.flip .prose{grid-column:1;justify-self:end}
.srow.np{grid-template-columns:minmax(0,1fr)}
.srow.np .prose{grid-column:1;justify-self:center}
@media(max-width:900px){
  .srow,.srow.flip{grid-template-columns:minmax(0,1fr);margin:40px 0}
  .srow figure,.srow.flip figure{grid-column:1;grid-row:1}
  .srow figure picture{position:static}
  .srow figure img,.srow.flip figure img{aspect-ratio:4/3;border-radius:0}
  .srow .prose,.srow.flip .prose{grid-column:1;grid-row:2;justify-self:start;padding:26px clamp(18px,4vw,44px) 0}
}

/* ---------- the stone document band: the page's table / list / numbered block beside a portrait photo ---------- */
.sdoc{background:var(--stone);padding:clamp(56px,7vw,104px) 0}
.sdoc .wrap{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,5vw,88px);align-items:start}
.sdoc .wrap>*{min-width:0}
.sdoc .prose{grid-column:1;grid-row:1}
.sdoc figure{grid-column:2;grid-row:1;margin:0;position:sticky;top:20px}
.sdoc figure img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rp)}
.sdoc.solo .wrap{grid-template-columns:minmax(0,1fr);max-width:1000px}
@media(max-width:900px){.sdoc .wrap{grid-template-columns:minmax(0,1fr)}.sdoc figure{grid-column:1;grid-row:2;position:static}.sdoc figure img{aspect-ratio:16/10}}

/* ---------- the copy itself (engine section markup: .sec, table.facts, ul.marks, ol.steps, blockquote.pull, figure.fig) ---------- */
.prose .sec+.sec,.prose .sec+blockquote,.prose blockquote+.sec,.prose .fig+.sec,.prose .sec+.fig{margin-top:clamp(36px,4vw,56px)}
.prose h2{font-size:clamp(32px,3.2vw,48px);line-height:1.08;letter-spacing:-.022em;margin-bottom:18px;max-width:22ch}
.prose p{max-width:66ch}
.prose p+p{margin-top:14px}
.prose a{color:var(--bark)}
.prose ul.marks{list-style:none;margin:8px 0 0;padding:0}
.prose ul.marks>li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line)}
.prose ul.marks>li:last-child{border-bottom:1px solid var(--line)}
.prose ul.marks>li::before{content:"\2013";position:absolute;left:2px;top:12px;font-family:var(--disp);color:var(--moss)}
.prose ol.steps{list-style:none;margin:8px 0 0;padding:0;counter-reset:st}
.prose ol.steps>li{counter-increment:st;display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:6px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.prose ol.steps>li:last-child{border-bottom:1px solid var(--line)}
.prose ol.steps>li::before{content:counter(st,decimal-leading-zero);grid-column:1;grid-row:1/3;font-family:var(--disp);font-style:italic;font-size:22px;line-height:1.25;color:var(--bark)}
.prose ol.steps>li>b{grid-column:2;grid-row:1;font-family:var(--disp);font-weight:600;font-size:21px;line-height:1.25;color:var(--ink)}
.prose ol.steps>li>span{grid-column:2;grid-row:2;margin-top:6px}
.prose table.facts{font-size:16.5px}
.prose table.facts th{font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink);width:34%;padding:16px 24px 16px 0}
.prose table.facts td{padding:16px 0;line-height:1.6}
.prose table.facts tr:first-child th,.prose table.facts tr:first-child td{border-top:1px solid var(--line)}
.prose blockquote.pull{margin:0;padding:0}
.prose blockquote.pull p{font-family:var(--disp);font-style:italic;font-weight:400;font-size:clamp(25px,2.3vw,34px);line-height:1.24;letter-spacing:-.01em;color:var(--ink);max-width:26ch}
.prose blockquote.pull cite{display:block;margin-top:12px;font-style:normal;font-size:14.5px;color:var(--mut)}
.prose figure.fig{margin:0}
.prose figure.fig img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--rp)}
.prose figure.fig figcaption{margin-top:8px}
@media(max-width:700px){.prose table.facts th{width:auto;padding:0 0 4px}.prose table.facts td{padding:0}.prose table.facts tr:first-child th{border-top:0}}

/* ---------- short intro, related links ---------- */
.intro{padding:clamp(48px,6vw,88px) 0 0}
.intro .prose{max-width:860px}
.relx{padding:0 0 clamp(44px,5vw,76px)}
.relx .also{margin-top:0}

/* ---------- areas hub: town rows ---------- */
.trows{padding:clamp(56px,7vw,104px) 0}
.trows .wrap>.prose{max-width:860px;margin-bottom:clamp(32px,4vw,56px)}
article.trow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;padding:24px 0;border-top:1px solid var(--line)}
article.trow:last-child{border-bottom:1px solid var(--line)}
article.trow figure{grid-column:1;grid-row:1;margin:0}
article.trow figure img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--rp)}
article.trow .tt{grid-column:2;grid-row:1}
article.trow.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
article.trow.flip figure{grid-column:2}
article.trow.flip .tt{grid-column:1}
article.trow h3{font-size:clamp(28px,2.7vw,42px);line-height:1.08}
article.trow h3 a{color:inherit;text-decoration:none}
article.trow .tt p{margin-top:10px;max-width:52ch}
article.trow .more{display:inline-flex;gap:8px;margin-top:16px;font-weight:600;color:var(--bark);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
@media(max-width:800px){article.trow,article.trow.flip{grid-template-columns:minmax(0,1fr);gap:16px}article.trow figure,article.trow.flip figure{grid-column:1;grid-row:1}article.trow .tt,article.trow.flip .tt{grid-column:1;grid-row:2}}

/* ---------- book + contact ---------- */
.bk{padding:clamp(36px,4vw,64px) 0 clamp(60px,7vw,112px)}
.bk .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:start}
.bk .wrap>*{min-width:0}
.bk .wrap>.crumb{grid-column:1/-1;grid-row:1}
.bmain{grid-column:1;grid-row:2}
.bside{grid-column:2;grid-row:2;display:grid;gap:18px}
.bmain h1{font-size:clamp(44px,4.6vw,72px);line-height:1;letter-spacing:-.03em;margin:4px 0 16px;max-width:14ch}
.bmain .form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 18px;max-width:700px;margin-top:30px}
.bmain .form>label.fl:first-of-type,.bmain .form>label.fl:has(textarea),.bmain .form .fs,.bmain .form .fsub,.bmain .form .hp{grid-column:1/-1}
.bigtel{display:block;margin-top:10px;font-family:var(--disp);font-weight:600;font-size:clamp(36px,3.8vw,56px);line-height:1;letter-spacing:-.03em;color:var(--ink);text-decoration:none;white-space:nowrap}
.hrs{margin-top:10px;font-size:15px;color:var(--mut)}
.ctc .bmain p.lede{margin-top:20px}
.bside figure{margin:0}
.bside figure img{display:block;width:100%;object-fit:cover;border-radius:var(--rp)}
.bside .b1 img{aspect-ratio:4/5}
.bside .b2 img{aspect-ratio:3/2}
.bcall,.nap{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bcall a{display:block;margin:6px 0 4px;font-family:var(--disp);font-weight:600;font-size:34px;line-height:1.1;color:var(--ink);text-decoration:none;white-space:nowrap}
.bcall small,.nap p{font-size:15px;color:var(--mut)}
.nap .h4{font-family:var(--disp);font-weight:600;font-size:21px;color:var(--ink)}
.nap p+p,.nap a{margin-top:8px}
.nap a{display:inline-block;font-weight:600;color:var(--bark)}
.nap .rlic{font-size:13.5px}
.bnote{font-size:15.5px;line-height:1.6}
.bnote p+p{margin-top:8px}
@media(max-width:900px){.bk .wrap{grid-template-columns:minmax(0,1fr)}.bside{grid-column:1;grid-row:3}.bside .b1 img{aspect-ratio:16/10}}
@media(max-width:520px){.bmain .form{grid-template-columns:minmax(0,1fr)}}

/* ---------- thank-you: the hero mosaic, with the message in the text cell ---------- */
.ty{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,38fr) minmax(0,22fr);gap:10px;padding:10px;min-height:clamp(520px,70vh,720px)}
.ty>*{min-width:0}
.tyt{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;background:var(--stone);border-radius:var(--rp);padding:clamp(24px,3vw,52px)}
.ty h1{font-size:clamp(40px,4.3vw,66px);line-height:1.02;letter-spacing:-.03em;max-width:14ch}
.ty p.lede{margin-top:18px}
@media(max-width:1000px){.ty{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}.tyt{grid-column:1/3}.ty .pb{grid-column:1;grid-row:2;aspect-ratio:4/5}.ty .ps{grid-column:2;grid-row:2;aspect-ratio:4/5}}

/* ============================================================
   Parkscale engine base — mechanics only. Section looks live in _templates/<industry>/theme.css;
   pre-template sites get the old ones from legacy.css (Sep 14 split). Every color, face, radius
   and shadow comes from the site's theme.css tokens (loaded above).
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--body);font-size:var(--fs,17px);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit}
h1,h2,h3,h4,.h4{font-family:var(--disp);color:var(--ink);line-height:1.05;letter-spacing:var(--track,-.015em);font-weight:var(--dispw,800)}
h1{font-size:clamp(38px,5vw,66px)}
h2{font-size:clamp(28px,3.4vw,44px)}
h3{font-size:22px;line-height:1.2}
h4,.h4{font-size:14px;letter-spacing:.08em;text-transform:uppercase}.h4{margin:0}
p{max-width:68ch}
.wrap{max-width:var(--wrap,1240px);margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.narrow{max-width:820px}
.kick{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-t,var(--accent));margin-bottom:14px}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--ink);max-width:58ch}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hp{position:absolute;left:-9999px;top:-9999px}

/* ---------- buttons: never flat (HARD RULE) ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.01em;text-decoration:none;padding:15px 24px;border-radius:var(--r);white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;cursor:pointer;border:0;line-height:1}
.btn-primary{background:var(--accent);color:var(--on-accent,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -6px var(--accent-glow)}
.btn-primary:hover{background:var(--accent-x);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 28px -10px var(--accent-glow)}
.btn-primary:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 10px -4px var(--accent-glow)}
.btn .arw{display:inline-block;transition:transform .16s ease}
.btn:hover .arw{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:13.5px 22px}
.btn-ghost:hover{transform:translateY(-2px);background:var(--ink);color:var(--paper)}
.dark .btn-ghost,.band .btn-ghost{color:var(--on-dark);border-color:var(--on-dark)}
.dark .btn-ghost:hover,.band .btn-ghost:hover{background:var(--on-dark);color:var(--ink)}

/* ---------- header ---------- */
.site-head{background:var(--head-bg,var(--paper));color:var(--head-fg,var(--ink));position:relative;z-index:20;border-bottom:1px solid var(--line)}
.topbar{display:flex;justify-content:space-between;gap:16px;padding:8px clamp(18px,4vw,44px);font-size:13px;font-weight:600;background:var(--anchor);color:var(--on-dark)}
.topbar a{color:inherit;text-decoration:none;white-space:nowrap;font-weight:700}
@media(max-width:560px){.topbar a{display:none}.topbar{font-size:12.5px}}
.bar{display:flex;align-items:center;gap:28px;padding:14px clamp(18px,4vw,44px);max-width:var(--wrap-head,1400px);margin:0 auto}
.wm img{height:var(--logo-h,44px);width:auto;max-width:220px}
.links{display:flex;gap:clamp(16px,2vw,26px);margin-left:auto}
.links>a{color:var(--head-fg,var(--ink));text-decoration:none;font-weight:600;font-size:15px;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.links>a:hover,.links>a[aria-current]{border-color:var(--accent)}
.hcta{display:flex;align-items:center;gap:18px}
.hcta .tel{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--head-fg,var(--ink));text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.hcta .tel:hover{color:var(--accent-t,var(--accent))}
.hcta .btn-primary{color:var(--on-accent,#fff)}
.burger{display:none;align-items:center;gap:10px;background:none;border:0;color:var(--head-fg,var(--ink));font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin-left:auto}
.burger i{display:block;width:24px;height:2px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
.mob{display:none;flex-direction:column;background:var(--anchor);padding:8px clamp(18px,4vw,44px) 22px}
.mob a{color:var(--on-dark);text-decoration:none;font-family:var(--disp);font-weight:700;font-size:24px;padding:12px 0;border-bottom:1px solid var(--line-dark)}
.mob a.acc{color:var(--accent-on-dark,var(--on-dark))}
@media(max-width:1180px){
  .links,.hcta{display:none}
  .burger{display:flex}
  .mob.open{display:flex}
}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none}
@media(max-width:760px){
  body{padding-bottom:62px}
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
  .callbar a{display:flex;align-items:center;justify-content:center;height:62px;text-decoration:none;font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
  .callbar a:first-child{background:var(--accent);color:var(--on-accent,#fff)}
  .callbar a:last-child{background:var(--anchor);color:var(--on-dark)}
}

/* ---------- breadcrumb ---------- */
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--mut);margin-bottom:18px}
.crumb li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumb a{color:inherit;text-decoration:none}.crumb a:hover{color:var(--accent-t,var(--accent))}

/* ---------- fact table mechanics ---------- */
table.facts{width:100%;border-collapse:collapse;font-size:15.5px;min-width:420px}
table.facts caption{text-align:left;font-family:var(--disp);font-size:18px;color:var(--ink);padding:0 0 10px}
table.facts th,table.facts td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--line)}
table.facts th{color:var(--ink);font-weight:700;width:36%;padding-right:20px}
table.facts td{font-variant-numeric:tabular-nums}
@media(max-width:700px){  /* fact tables stack on phones instead of scrolling sideways */
  table.facts{min-width:0}
  table.facts tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  table.facts th,table.facts td{display:block;width:auto;padding:0;border:0}
  table.facts th{padding-bottom:4px}
}

/* ---------- forms ---------- */
.form{display:grid;gap:16px}
.fl{display:block}
.fl span{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.fl i{font-style:normal;color:var(--accent-t,var(--accent))}
input,select,textarea{width:100%;font-family:var(--sans);font-size:16px;padding:13px 14px;border:1px solid var(--line-strong,var(--ink));border-radius:var(--r);background:var(--field-bg,#fff);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.fs{border:0}.fs legend{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}   /* 220 min: a 4-option urgency question wraps to 2x2, never into 150px slivers (Sep 13 narrow-wrap) */
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:block;padding:12px 14px;border:1px solid var(--line-strong,var(--ink));font-weight:600;font-size:14.5px;cursor:pointer;border-radius:var(--r);background:var(--field-bg,#fff);color:var(--ink)}
.opt input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.fsub{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.promise{font-size:14px;color:var(--mut);max-width:34ch}

/* ---------- footer ---------- */
.site-foot{background:var(--anchor);color:var(--on-dark);padding:clamp(44px,6vw,72px) 0 0}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.fgrid>*{min-width:0}
.fgrid a{display:block;color:var(--on-dark);text-decoration:none;padding:5px 0;font-size:15px;opacity:.9}
.fgrid a:hover{opacity:1;text-decoration:underline}
.fgrid .h4{color:var(--on-dark);margin-bottom:10px;opacity:.7}
.fbrand img{height:var(--logo-h,44px);width:auto;max-width:220px;margin-bottom:14px}
.fbrand p{font-size:15px;opacity:.85;max-width:36ch}
.fbrand .ftel{font-family:var(--disp);font-weight:800;font-size:24px;margin-top:10px;padding:0;letter-spacing:-.01em}
.fbrand .hours{font-size:14px;margin-top:6px}
.fnap p{font-size:15px;opacity:.9}.lic{margin-top:10px;font-size:13px;opacity:.75}
.ftowns{margin-top:34px;padding-top:18px;border-top:1px solid var(--line-dark);font-size:14px;opacity:.85;max-width:none}
.ftowns a{color:inherit}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:18px 0 24px;font-size:13px;opacity:.65}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

/* ---------- rail photo plate + form-page photo strip (mechanics; the look is the theme's) ---------- */
.rfig{margin:0}.rfig picture,.rfig img{width:100%}.rfig img{aspect-ratio:4/5;object-fit:cover}
.rfig figcaption{font-size:13.5px;color:var(--mut);margin-top:8px;line-height:1.5}
.pstrip{margin:0;max-height:min(46vh,420px);overflow:hidden}.pstrip picture,.pstrip img{width:100%}.pstrip img{aspect-ratio:21/9;object-fit:cover;height:100%}