/* ============================================================
   Fernhill Landscapes: theme. A landscape architect's drawing set:
   eucalyptus haze paper, deep eucalypt ink, one red-earth accent.
   Contour lines, a levelling staff, sections and plant schedules.
   Gloock for the drawn titles, Source Sans 3 for everything else.
   ============================================================ */
@layer theme {
:root{
  --canvas:#E8ECE4; --surface:#F2F5EF; --ink:#1B2620; --muted:#4E5D53; --line:#C5CEC2; --line-strong:#93A08F;
  --primary:#24392D; --primary-hover:#2F4A3A; --on-primary:#EEF2EA;
  --accent:#A5402A; --accent-hover:#8E3522; --on-accent:#FBF3EC; --accent-text:#9A3A25;
  --focus:#2F6B4F; --focus-ring:rgb(47 107 79/.22); --error:#A3261B; --ph-bg:#D3DBCF;
  --header-bg:#E8ECE4; --footer-bg:#1B2620; --on-footer:#DCE3D8; --callbar-bg:#1B2620;
  /* drawing colours, used inside the illustrations only */
  --contour:#9DAE98; --sky:#DDE6DF; --sun:#D9A441; --leaf-a:#6F8F67; --leaf-b:#3E5E45; --leaf-c:#8FAA6E;
  --soil-clay:#8F6E52; --soil-red:#9C4A32; --soil-sand:#D3C29A; --topsoil:#4B3A2C; --sandstone:#CDB27E; --sandstone-line:#9E8458;
  --water:#6E97A3; --gravel:#B8B2A4;
  --font-display:'Gloock',Georgia,serif; --font-body:'Source Sans 3',system-ui,sans-serif;
  --radius:4px; --radius-sm:4px; --radius-lg:4px; --radius-btn:4px;
  --header-h:4.5rem;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2620' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
h1,h2,h3{font-weight:400;letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1}
h3{font-size:1.35rem;line-height:1.15}
.sheet-head{display:grid;gap:.75rem;margin-bottom:clamp(2rem,4vw,3rem);max-width:44rem}
.sheet-head p{color:var(--muted);font-size:1.12rem}
.btn{font-weight:700;letter-spacing:.01em}

/* ---------- contour lines: hero, bands and page heads ---------- */
.contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.contours path{fill:none;stroke:var(--contour);stroke-width:1;opacity:.55;vector-effect:non-scaling-stroke}
.contours path.major{stroke-width:1.8;opacity:.75}
@media (prefers-reduced-motion:no-preference){
  .js .hero .contours path{stroke-dasharray:1;stroke-dashoffset:1;animation:contour-draw 2.6s var(--ease-out) forwards;animation-delay:calc(var(--i) * 70ms + 150ms)}
}
@keyframes contour-draw{to{stroke-dashoffset:0}}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.brand{font-weight:400;font-size:1.6rem;gap:.6rem}
.brand-mark{background:var(--accent);color:var(--on-accent);border-radius:50% 50% 50% 4px}
.nav-mobile-cta a{color:var(--accent-text)}
@media (min-width:900px){ .site-nav a{font-weight:600} .nav-mobile-cta{display:none} }

/* ---------- hero: the hill, surveyed ---------- */
.hero{position:relative;overflow:clip;padding-top:clamp(2.5rem,7vw,5.5rem)}
.hero-grid{position:relative;z-index:1;display:grid;gap:2.5rem;align-items:center}
.hero h1{font-size:clamp(3rem,5.5vw,5.4rem);line-height:.95;letter-spacing:-.02em;max-width:15ch}
.hero h1 em{display:block;font-style:normal;color:var(--accent-text)}
.hero-lede{margin-top:1.5rem;max-width:31rem;font-size:1.2rem;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-figure{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:stretch;max-width:30rem;justify-self:center;width:100%}
.hero-figure .ph{box-shadow:0 30px 60px -30px rgb(27 38 32/.45)}
/* a surveyor's levelling staff: red-earth and paper blocks, numbered */
.staff{display:grid;grid-template-rows:repeat(9,1fr);width:2.1rem;border:1.5px solid var(--ink);background:var(--surface)}
.staff span{display:block;font-size:.7rem;font-weight:800;line-height:1;padding:.3rem 0 0 .25rem;color:var(--ink);border-bottom:1px solid var(--ink);
  background:linear-gradient(var(--accent) 0 12%,transparent 12% 24%,var(--accent) 24% 36%,transparent 36% 48%,var(--accent) 48% 60%,transparent 60%) no-repeat right/42% 100%}
.staff span:last-child{border-bottom:0}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.35fr .65fr;gap:3rem} .hero-figure{justify-self:end} }

/* the ticker of trades, under the hero */
.ticker{position:relative;z-index:1;margin-top:clamp(3rem,6vw,4.5rem);border-block:1px solid var(--line-strong);background:var(--surface);overflow:hidden}
.ticker-track{display:flex;width:max-content}
.ticker ul{display:flex;align-items:center;gap:2.75rem;padding:1rem 2.75rem 1rem 0;margin:0}
.ticker li{display:flex;align-items:center;gap:2.75rem;font-family:var(--font-display);font-size:1.35rem;white-space:nowrap}
.ticker li::after{content:"";width:.55rem;height:.55rem;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg)}
@media (prefers-reduced-motion:no-preference){
  .ticker-track{animation:tick 48s linear infinite}
  @media (hover:hover){ .ticker:hover .ticker-track{animation-play-state:paused} }
}
@media (prefers-reduced-motion:reduce){ .ticker ul[aria-hidden]{display:none} .ticker ul{flex-wrap:wrap;padding-left:var(--gutter);row-gap:.5rem} .ticker-track{width:auto} }
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- recent gardens: a row you swipe, panned by scroll on desktop ---------- */
.work{background:var(--primary);color:var(--on-primary);padding-block:clamp(3.5rem,8vw,5.5rem)}
.work h2,.work h3{color:var(--on-primary)}
.pan-stage{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-padding-inline:var(--gutter)}
.pan-track{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.75rem);width:max-content;padding-inline:var(--gutter)}
.work-head{display:grid;gap:1rem;width:min(78vw,24rem);scroll-snap-align:start;align-self:center}
.work-head p{opacity:.85;font-size:1.1rem}
.proj-list{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.75rem);list-style:none;padding:0}
.proj{width:min(78vw,24rem);scroll-snap-align:start;display:grid;gap:1rem}
.proj .ph{box-shadow:0 24px 50px -24px rgb(0 0 0/.55)}
.proj:nth-child(even){margin-top:4rem}
.proj-text{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem}
.proj-no{grid-row:span 3;font-family:var(--font-display);font-size:2.6rem;line-height:.9;color:var(--sun)}
.proj-text h3{font-size:1.45rem}
.proj-place{display:flex;align-items:center;gap:.35rem;font-weight:700;font-size:.9rem;opacity:.8}
.proj-place .ico{width:1em;height:1em}
.proj-text p:last-child{opacity:.85}
@supports (animation-timeline:view()){
  @media (min-width:900px) and (prefers-reduced-motion:no-preference){
    .work{height:calc(var(--n) * 55vh + 100dvh);padding:0;view-timeline:--pan block}
    .pan-stage{position:sticky;top:var(--header-h);height:calc(100dvh - var(--header-h));overflow:hidden;display:flex;align-items:center;scroll-snap-type:none}
    .pan-track{animation:pan linear both;animation-timeline:--pan;animation-range:contain 0% contain 100%;padding-inline:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)))}
    .proj{width:clamp(18rem,26vw,25rem)}
    .proj .ph{max-height:62vh}
  }
}
@keyframes pan{to{transform:translateX(calc(-100% + 100vw))}}

/* ---------- the slope, drawn in section ---------- */
.transform{background:var(--surface);border-bottom:1px solid var(--line)}
.transform-grid{display:grid;gap:2.5rem;align-items:center}
.transform-copy{display:grid;gap:1.1rem}
.transform-copy > p{font-size:1.1rem;color:var(--muted);max-width:34rem}
.transform-list{display:grid;gap:.1rem;margin-top:.5rem}
.transform-list li{display:flex;gap:1rem;align-items:baseline;padding:.8rem 0;border-top:1px solid var(--line);font-weight:600}
.transform-list span{font-family:var(--font-display);color:var(--accent-text);font-size:1.1rem}
.ba{aspect-ratio:16/9;border:1.5px solid var(--ink);background:var(--sky)}
.ba > .ba-layer,.ba-before{height:100%}
.section-svg{width:100%;height:100%}
.section-svg .sky{fill:var(--sky)}
.section-svg .soil{fill:var(--soil-clay)}
.section-svg .topsoil{fill:none;stroke:var(--topsoil);stroke-width:7;stroke-linecap:round}
.section-svg .topsoil--thin{stroke-width:3;stroke-dasharray:14 9}
.section-svg .rut{fill:none;stroke:var(--topsoil);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.section-svg .rock{fill:var(--gravel);stroke:var(--topsoil);stroke-width:1.5}
.section-svg .flow,.section-svg .rain{fill:none;stroke:var(--water);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 8}
.section-svg .rain{stroke-width:2;stroke-dasharray:none;opacity:.7}
.section-svg .puddle{fill:var(--water);opacity:.8}
.section-svg .tuft{fill:none;stroke:var(--leaf-b);stroke-width:3;stroke-linecap:round}
.section-svg .tuft--dry{stroke:var(--sandstone-line)}
.section-svg .shrub{fill:var(--leaf-a);stroke:var(--leaf-b);stroke-width:2}
.section-svg .block{fill:var(--sandstone);stroke:var(--sandstone-line);stroke-width:1.5}
.section-svg .block--cap{fill:var(--sandstone-line)}
.section-svg .gravel{fill:var(--gravel);opacity:.9}
.section-svg .agpipe{fill:var(--canvas);stroke:var(--ink);stroke-width:2;stroke-dasharray:3 2}
.section-svg .callouts text{font-family:var(--font-body);font-size:19px;font-weight:700;fill:var(--ink)}
.ba-line{width:2px;margin-left:-1px;background:var(--ink)}
.ba-knob{position:absolute;top:50%;left:var(--pos);display:flex;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);pointer-events:none;box-shadow:0 6px 18px rgb(0 0 0/.25)}
.ba-knob .ico{width:1.05rem;height:1.05rem}
.ba-range:focus-visible ~ .ba-knob{outline:3px solid var(--focus);outline-offset:3px}
.ba-tag{top:.75rem;bottom:auto;background:var(--ink);color:var(--canvas);border-radius:2px;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem}
.ba-tag--before{left:.75rem}
.ba-tag--after{right:.75rem}
.ba-figure figcaption{margin-top:.8rem;font-size:.9rem;color:var(--muted);font-weight:600}
@media (min-width:900px){ .transform-grid{grid-template-columns:.75fr 1.25fr;gap:4rem} }

/* ---------- the block planner ---------- */
.planner-head{display:grid;gap:.8rem;max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.planner-head p{font-size:1.12rem;color:var(--muted)}
.planner-grid{display:grid;gap:2rem;align-items:start}
.plan-form{display:grid;gap:1.5rem}
.plan-form fieldset{border:0;padding:0;display:grid;gap:.5rem}
.plan-form legend{font-family:var(--font-display);font-size:1.3rem;margin-bottom:.6rem}
.plan-opt{position:relative;display:block;cursor:pointer}
.plan-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.plan-opt span{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:52px;padding:.7rem 1rem;border:1.5px solid var(--line);
  background:var(--surface);border-radius:var(--radius);transition:border-color var(--dur-fast) linear,background-color var(--dur-fast) linear,color var(--dur-fast) linear}
.plan-opt small{font-size:.88rem;color:var(--muted)}
@media (hover:hover){ .plan-opt:hover span{border-color:var(--ink)} }
.plan-opt input:checked + span{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.plan-opt input:checked + span small{color:var(--on-primary);opacity:.8}
.plan-opt input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.plan-opt input:active + span{transform:scale(.99)}
.plan-sheet{display:grid;gap:1.25rem;padding:clamp(1rem,2.5vw,1.75rem);background:var(--surface);border:1.5px solid var(--ink)}
.plan-sheet > .btn{justify-self:start}
.plan-drawing svg{width:100%;height:auto;border:1px solid var(--line)}
.p-sky{fill:var(--sky)}
.p-sun{fill:var(--sun);transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) linear}
.p-tree{transform-box:view-box;transform-origin:70px 240px;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) linear;opacity:0;transform:scale(.6)}
.p-trunk{stroke:var(--topsoil);stroke-width:12;stroke-linecap:round}
.p-canopy{fill:var(--leaf-b)}
.plan-drawing[data-sun="p"] .p-sun{transform:translate(40px,22px)}
.plan-drawing[data-sun="p"] .p-tree{opacity:1;transform:scale(.85)}
.plan-drawing[data-sun="s"] .p-sun{transform:translate(-330px,40px);opacity:.35}
.plan-drawing[data-sun="s"] .p-tree{opacity:1;transform:scale(1.3)}
.plan-drawing{--ang:-7deg}
.plan-drawing[data-slope="flat"]{--ang:0deg}
.plan-drawing[data-slope="steep"]{--ang:-17deg}
.p-ground{transform-box:view-box;transform-origin:300px 220px;transform:rotate(var(--ang));transition:transform var(--dur-slow) var(--ease-out)}
.p-soil{fill:var(--soil-red);transition:fill var(--dur-mid) linear}
.plan-drawing[data-soil="c"] .p-soil{fill:var(--soil-clay)}
.plan-drawing[data-soil="s"] .p-soil{fill:var(--soil-sand)}
.p-top{fill:var(--topsoil)}
.slot{transition:transform var(--dur-slow) var(--ease-out)}
.glyph{transform-box:fill-box;transform-origin:50% 100%}
.glyph path{display:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.slot:not([data-role]) .code{display:none}
.slot[data-role="strappy"] .g-strappy{display:inline;stroke:var(--leaf-b);stroke-width:4}
.slot[data-role="shrub"] .g-shrub{display:inline;fill:var(--leaf-a);stroke:var(--leaf-b);stroke-width:2.5}
.slot[data-role="feature"] .g-feature{display:inline;stroke:var(--leaf-b);stroke-width:4;fill:var(--accent)}
.slot[data-role="ground"] .g-ground{display:inline;fill:var(--leaf-c);stroke:var(--leaf-b);stroke-width:2}
.code{font:700 15px var(--font-body);fill:var(--ink);paint-order:stroke;stroke:var(--sky);stroke-width:4px;stroke-linejoin:round}
.slot[data-role="strappy"] .code{transform:translateY(22px)}
.slot[data-role="shrub"] .code{transform:translateY(46px)}
.slot[data-role="ground"] .code{transform:translateY(54px)}
@media (prefers-reduced-motion:no-preference){ .slot.pop .glyph{animation:pop .5s var(--ease-out) both;animation-delay:calc(var(--k) * 60ms)} }
@keyframes pop{from{scale:0}}
.p-scale path{stroke:var(--ink);stroke-width:2;fill:none}
.p-scale text{font:600 13px var(--font-body);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){ .p-sun,.p-tree,.p-ground,.slot{transition:none} }
.plan-advice{display:grid;gap:.4rem;padding-left:1rem;border-left:4px solid var(--accent)}
.plan-advice h3{font-size:1.3rem}
.plan-advice p{color:var(--muted)}
.schedule-title{font-size:1.3rem}
.schedule{display:grid;border-top:1.5px solid var(--ink)}
.schedule li{display:grid;grid-template-columns:3rem 1fr;gap:.3rem 1rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--line)}
.schedule li[hidden]{display:none}
.plant-name{display:grid}
.plant-name em{font-style:italic;font-weight:600}
.plant-name strong{font-weight:400;color:var(--muted);font-size:.92rem}
.plant-why{grid-column:2;font-size:.95rem}
/* planting-plan symbols */
.sym{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;font-weight:800;font-size:.82rem;letter-spacing:.03em;grid-row:span 2}
.sym--feature{border:3px solid var(--accent);color:var(--accent-text)}
.sym--shrub{background:var(--leaf-a);color:var(--ink)}
.sym--strappy{border:2px dashed var(--leaf-b);color:var(--leaf-b)}
.sym--ground{background:repeating-linear-gradient(45deg,var(--leaf-c) 0 3px,transparent 3px 7px);border:1.5px solid var(--leaf-b);color:var(--ink)}
.sym--ground{text-shadow:0 0 3px var(--surface),0 0 3px var(--surface)}
@media (min-width:600px){ .schedule li{grid-template-columns:3rem minmax(12rem,.8fr) 1.2fr} .plant-why{grid-column:auto} .sym{grid-row:auto} }
@media (min-width:1000px){ .planner-grid{grid-template-columns:.62fr 1.38fr;gap:3rem} .plan-form{position:sticky;top:calc(var(--header-h) + 1.5rem)} }

/* ---------- services: a drawing title block ---------- */
.services{background:var(--surface);border-block:1px solid var(--line)}
.svc-sheet{border:1.5px solid var(--ink)}
.svc{display:grid;gap:1rem;padding:clamp(1.25rem,3vw,2rem)}
.svc + .svc{border-top:1px solid var(--line-strong)}
.svc-name{display:flex;align-items:center;gap:1rem}
.svc-name .ico{margin-left:auto;width:1.6rem;height:1.6rem;color:var(--accent-text)}
.svc-name h2,.svc-name h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.svc-no{font-weight:800;font-size:.8rem;letter-spacing:.1em;padding:.25rem .45rem;border:1.5px solid var(--ink)}
.svc ul{display:grid;gap:.5rem;list-style:none;padding:0}
.svc li{position:relative;padding-left:1.4rem}
.svc li::before{content:"";position:absolute;left:0;top:.62em;width:.7rem;height:2px;background:var(--accent)}
@media (min-width:800px){ .svc{grid-template-columns:minmax(14rem,.8fr) 1.2fr;gap:2.5rem;align-items:start} .svc-name .ico{margin-left:0;order:-1} .svc ul{grid-template-columns:1fr 1fr;gap:.6rem 2rem} }

/* ---------- process: stepping stones down the slope ---------- */
.process h2,.process h1{max-width:20ch;margin-bottom:clamp(2rem,4vw,3rem)}
.stones{display:grid;gap:1.5rem}
.stone{position:relative;display:grid;gap:.6rem;align-content:start;padding:2.1rem 2rem 2.3rem;background:var(--surface);border:1.5px solid var(--line-strong);
  border-radius:2.2rem 4.5rem 3rem 5rem / 3.5rem 2.5rem 4.5rem 3rem;box-shadow:0 14px 0 -6px var(--line)}
.stone:nth-child(2){border-radius:4.5rem 2.5rem 5rem 3rem / 2.5rem 4rem 3rem 4.5rem}
.stone:nth-child(3){border-radius:3rem 5rem 2.5rem 4rem / 4rem 3rem 4.5rem 2.5rem}
.stone-no{font-family:var(--font-display);font-size:3.2rem;line-height:.8;color:var(--accent-text)}
.stone h2,.stone h3{font-size:1.5rem}
.stone p{color:var(--muted)}
@media (min-width:900px){ .stones{grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start} .stone:nth-child(2){margin-top:3.5rem} .stone:nth-child(3){margin-top:7rem} }

/* ---------- about and the range-to-sea profile ---------- */
.about-grid{display:grid;gap:2.5rem;align-items:center}
.about-copy{display:grid;gap:1rem}
.about-copy > p{font-size:1.1rem;max-width:36rem}
.area{display:grid;gap:2rem;margin-top:clamp(3.5rem,8vw,6rem)}
.area-copy{display:grid;gap:.75rem;max-width:40rem}
.area-copy p{color:var(--muted)}
.area-copy h2,.area-copy h3{font-size:clamp(1.8rem,3.5vw,2.6rem)}
.profile{position:relative;display:grid}
.profile-line{width:100%;height:clamp(7rem,16vw,12rem)}
.profile-line .ridge{fill:var(--primary);opacity:.14}
.profile-line .sea{fill:var(--water);opacity:.6}
.profile-cols{display:grid;gap:1.5rem}
.profile-cols h3,.profile-cols h4{font-family:var(--font-body);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.6rem}
.profile-cols ul{display:flex;flex-wrap:wrap;gap:.4rem}
.profile-cols li{padding:.35rem .75rem;border:1px solid var(--line-strong);background:var(--surface);font-weight:600;font-size:.95rem;border-radius:2px}
@media (min-width:800px){
  .profile-line{position:absolute;inset:0;height:100%}
  .profile{min-height:15rem;padding:1rem 0 0}
  .profile-cols{position:relative;grid-template-columns:1fr 1fr;align-items:start}
  .profile-cols > div:last-child{margin-top:6.5rem;justify-self:end;text-align:right}
  .profile-cols > div:last-child ul{justify-content:flex-end}
}
@media (min-width:900px){ .about-grid{grid-template-columns:.85fr 1.15fr;gap:4.5rem} }

/* ---------- reviews ---------- */
.reviews{border-top:1px solid var(--line)}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.rv-card{display:grid;gap:1.25rem;align-content:space-between;padding:1.75rem;background:var(--surface);border:1px solid var(--line-strong)}
.rv-card blockquote p{font-family:var(--font-display);font-size:1.3rem;line-height:1.3}
.rv-card figcaption{display:grid;font-size:.92rem;color:var(--muted);padding-top:1rem;border-top:1px solid var(--line)}
.rv-card figcaption strong{color:var(--ink);font-size:1rem}
.rv-controls button{border-radius:var(--radius)}

/* ---------- the one red-earth band ---------- */
.quote-band{background:var(--accent);color:var(--on-accent);padding-block:clamp(3.5rem,8vw,6rem)}
.quote-grid{display:grid;gap:2rem;align-items:center}
.quote-photo{max-width:16rem}
.quote-photo .ph{border-radius:50% 50% 4px 4px}
.quote-band blockquote p{font-family:var(--font-display);font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.12;max-width:46rem}
.quote-band figcaption{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.quote-band .sample-tag{color:var(--on-accent);opacity:.85}
@media (min-width:900px){ .quote-grid{grid-template-columns:auto 1fr;gap:4rem} .quote-photo{width:15rem} }

/* ---------- FAQ ---------- */
.faq-sec{background:var(--surface);border-top:1px solid var(--line)}
.faq-grid{display:grid;gap:2rem}
.faq-grid > div p{margin-top:.75rem;color:var(--muted)}
.faq summary .ico{color:var(--accent-text)}
@media (min-width:900px){ .faq-grid{grid-template-columns:.7fr 1.3fr;gap:4rem} .faq-grid > div:first-child{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start} }

/* ---------- site visit form ---------- */
.contact-grid{display:grid;gap:2.5rem}
.contact-copy > p{margin-top:1rem;color:var(--muted);font-size:1.1rem;max-width:30rem}
.contact-list{display:grid;gap:.9rem;margin-top:2rem}
.contact-list li{display:flex;gap:.7rem;align-items:flex-start}
.contact-list a{font-weight:700}
.contact-list .ico{color:var(--accent-text);margin-top:.15rem}
.form{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);background:var(--surface);border:1.5px solid var(--ink)}
.form-row{display:grid;gap:1.25rem}
.hint{margin-top:-.75rem;font-size:.9rem;color:var(--muted)}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .contact-grid{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start} }

/* ---------- map ---------- */
.section--map{padding-bottom:var(--space-section)}
.map-block{border:1.5px solid var(--ink);background:var(--sky)}
.map-title{display:grid;gap:.25rem;max-width:30rem;font-size:1.05rem}
.map-title strong{font-family:var(--font-display);font-weight:400;font-size:1.6rem}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- call to action band and page heads ---------- */
.cta-band,.page-head{position:relative;overflow:clip}
.cta-band > .wrap,.page-head > .wrap{position:relative;z-index:1}
.cta-band{background:var(--primary);color:var(--on-primary);padding-block:clamp(3.5rem,8vw,6rem)}
.cta-band .contours path{stroke:var(--on-primary);opacity:.12}
.cta-band h2{color:var(--on-primary)}
.cta-inner{display:grid;gap:1rem;justify-items:start}
.cta-inner p{font-size:1.15rem;opacity:.85}
.cta-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}
.cta-band .btn--ghost{color:var(--on-primary)}
@media (hover:hover){ .cta-band .btn--ghost:hover{background:var(--on-primary);color:var(--ink);border-color:var(--on-primary)} }
.page-head{padding-block:clamp(2.5rem,6vw,4.5rem);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2.6rem,6.5vw,5rem);line-height:.98;max-width:16ch}
.page-head p:last-child{margin-top:1rem;max-width:36rem;font-size:1.15rem;color:var(--muted)}
.crumbs{display:flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:1.25rem}
.crumbs .ico{width:1em;height:1em}

/* ---------- footer ---------- */
.foot-grid{display:grid;gap:2rem}
.foot-mark{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.6rem;margin-bottom:.5rem}
.foot-mark .ico{color:var(--sun)}
.site-footer h2{font-family:var(--font-body);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.7;margin-bottom:.8rem;color:var(--on-footer)}
.site-footer ul{display:grid;gap:.5rem}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
.callbar .alt{color:var(--on-primary)}
}