/* Service, hub, about and contact pages. Built on the homepage tokens in styles.css.
   Motif: topographic contour lines (Root & Contour), served as per-page SVGs in --contour. */
.site-page{min-width:0}
.page-wrap{width:var(--shell);margin-inline:auto;min-width:0}
.pages-body h2{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.02}
.pages-body h2 em,.pages-body h1 em{font-style:normal;color:var(--moss)}

/* ---------- Hero ---------- */
.svc-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:var(--on-dark);background:var(--forest-950)}
.svc-hero.has-photo{min-height:min(88svh,820px)}
.svc-hero.no-photo{min-height:min(70svh,640px);background:var(--contour) 70% 40%/cover no-repeat,var(--forest-950)}
.svc-hero-media,.svc-hero-shade{position:absolute;inset:0}
.svc-hero-media img{width:100%;height:100%;object-fit:cover;animation:hero-settle 1.8s var(--ease) both}
.svc-hero-shade{background:linear-gradient(90deg,oklch(0.15 0.03 155 / .9) 0%,oklch(0.15 0.03 155 / .62) 44%,oklch(0.15 0.03 155 / .12) 82%),linear-gradient(0deg,oklch(0.15 0.03 155 / .85) 0%,transparent 42%),linear-gradient(180deg,oklch(0.15 0.03 155 / .6) 0%,transparent 26%)}
.svc-hero-inner{position:relative;padding:calc(var(--header-h) + clamp(3rem,7vw,6rem)) 0 clamp(2.5rem,5vw,4rem)}
.svc-hero h1{max-width:15ch;font-size:clamp(2.6rem,5.4vw,5rem);line-height:.98;letter-spacing:-.04em;overflow-wrap:break-word;animation:rise-in .8s var(--ease) .1s both}
.svc-summary{max-width:54ch;margin-top:clamp(1.1rem,2vw,1.6rem);color:var(--on-dark-soft);font-size:clamp(1.05rem,1.3vw,1.22rem);line-height:1.6;animation:rise-in .8s var(--ease) .22s both}
.svc-hero .page-actions{animation:rise-in .8s var(--ease) .34s both}
.page-breadcrumb{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:clamp(1.25rem,2.5vw,2rem);color:var(--on-dark-soft);font-size:.88rem;font-weight:500}
.page-breadcrumb a{text-decoration:none}
.page-breadcrumb a:hover{color:var(--leaf-hi)}
.page-breadcrumb [aria-current]{color:var(--on-dark)}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.page-actions .button{white-space:normal;text-align:center}
.page-phone{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-weight:600;text-decoration:none}
.page-phone svg{width:18px;height:18px;color:var(--leaf)}
.page-phone:hover{color:var(--leaf-hi)}
.svc-facts{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid oklch(1 0 0 / .16)}
.svc-facts li{display:flex;align-items:center;gap:.75rem;padding:1.15rem 1rem 1.4rem 0;font-size:.95rem;font-weight:500}
.svc-facts li::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--leaf)}

/* ---------- Scope + at a glance ---------- */
.svc-intro{padding:clamp(4.5rem,9vw,8rem) 0;background:var(--paper)}
.svc-intro-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(3rem,7vw,7rem);align-items:start}
.tick-list{margin-top:clamp(1.75rem,3vw,2.5rem);border-bottom:1px solid var(--line)}
.tick-list li{position:relative;padding:1.05rem 0 1.05rem 2.4rem;border-top:1px solid var(--line);font-size:clamp(1.02rem,1.2vw,1.14rem);font-weight:500;line-height:1.45}
.tick-list li::before{content:"";position:absolute;top:1.42rem;left:.2rem;width:14px;height:7px;border-left:2px solid var(--moss);border-bottom:2px solid var(--moss);transform:rotate(-45deg)}
.svc-scope h3{margin-top:clamp(2.25rem,4vw,3rem);font-size:1.05rem;letter-spacing:-.01em;color:var(--ink-soft)}
.dash-list{margin-top:.6rem}
.dash-list li{position:relative;padding:.55rem 0 .55rem 2.4rem;color:var(--ink-soft);font-size:.98rem}
.dash-list li::before{content:"";position:absolute;top:1.15rem;left:.2rem;width:12px;height:2px;background:var(--limestone)}
.svc-glance{position:sticky;top:calc(var(--header-h) + 24px);padding:clamp(1.75rem,3vw,2.5rem);color:var(--on-dark);background:var(--forest-900)}
.glance-title{margin-bottom:1.1rem;color:var(--leaf);font-size:.95rem;font-weight:700}
.svc-glance dl{margin:0}
.svc-glance dl div{padding:.95rem 0;border-top:1px solid oklch(1 0 0 / .12)}
.svc-glance dt{color:var(--on-dark-soft);font-size:.8rem;font-weight:500}
.svc-glance dd{margin:.2rem 0 0;font-size:1.02rem;font-weight:500;line-height:1.4}
.svc-glance .button{width:100%;margin-top:1.25rem}
.glance-phone{display:block;margin-top:1rem;color:var(--on-dark-soft);font-size:.95rem;font-weight:500;text-align:center;text-underline-offset:4px}
.glance-phone:hover{color:var(--leaf-hi)}

/* ---------- Prices (only when approved) ---------- */
.svc-prices{padding:clamp(4rem,8vw,7rem) 0;background:var(--ivory)}
.price-list{margin-top:2.5rem;border-bottom:1px solid var(--line)}
.price-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem 2rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.price-list strong{font-size:1.3rem;letter-spacing:-.02em}
.price-list p{grid-column:1/-1;color:var(--ink-soft);font-size:.95rem}

/* ---------- Process ---------- */
.svc-process{padding:clamp(5rem,10vw,9rem) 0;color:var(--on-dark);background:var(--contour) 30% 50%/cover no-repeat,var(--forest-950)}
.svc-process h2{max-width:14ch;margin-bottom:clamp(2.75rem,5vw,4.5rem)}
.svc-process h2 em{color:var(--leaf)}
.process-line{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.75rem)}
.process-line::before{content:"";position:absolute;top:22px;left:22px;right:0;height:1px;background:linear-gradient(90deg,var(--leaf),oklch(0.72 0.14 125 / .15))}
.process-line li{position:relative}
.step-n{position:relative;display:grid;place-items:center;width:44px;height:44px;margin-bottom:1.5rem;border:1px solid var(--leaf);border-radius:50%;color:var(--leaf);background:var(--forest-950);font-weight:700}
.process-line h3{margin-bottom:.55rem;font-size:clamp(1.2rem,1.5vw,1.38rem);letter-spacing:-.025em}
.process-line p{color:var(--on-dark-soft);font-size:.98rem;line-height:1.6}

/* ---------- Project ---------- */
.svc-project{padding:clamp(5rem,10vw,9rem) 0 clamp(6rem,12vw,11rem);background:var(--ivory)}
.svc-project-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(3rem,7vw,7rem);align-items:start}
.svc-project-copy{padding-top:clamp(0rem,2vw,2rem)}
.svc-project-copy p{max-width:44ch;margin-top:1.25rem;color:var(--ink-soft);font-size:1.08rem}
.project-town{display:flex;align-items:center;gap:.5rem;color:var(--moss)!important;font-weight:600}
.project-town svg{width:18px;height:18px}
.svc-project-media{position:relative}
.svc-project-media figure{position:relative;margin:0;overflow:hidden}
.svc-project-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.svc-project-media .before{position:absolute;bottom:-12%;left:-9%;width:42%;border:6px solid var(--ivory);box-shadow:0 24px 50px oklch(0.2 0.03 155 / .22)}
.svc-project-media figcaption{position:absolute;top:12px;left:12px;padding:.35rem .7rem;color:var(--on-dark);background:var(--forest-900);font-size:.8rem;font-weight:700}
.svc-project-media .after figcaption{color:var(--forest-950);background:var(--leaf)}

/* ---------- Reviews ---------- */
.svc-reviews{padding:clamp(4rem,8vw,7rem) 0}
.page-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:2rem;margin-top:2.5rem}
.page-reviews blockquote{margin:0;font-size:1.15rem;font-weight:500;line-height:1.5}
.page-reviews figcaption{margin-top:.75rem;color:var(--ink-soft);font-size:.9rem}

/* ---------- FAQ ---------- */
.svc-faq{padding:clamp(5rem,10vw,8rem) 0;background:var(--paper)}
.svc-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.svc-faq-head{position:sticky;top:calc(var(--header-h) + 24px)}
.svc-faq-head p{margin-top:1.1rem;color:var(--ink-soft)}
.svc-faq-head a{color:var(--ink);font-weight:600;text-underline-offset:4px;white-space:nowrap}
.page-faq{border-bottom:1px solid var(--line)}
.page-faq details{border-top:1px solid var(--line)}
.page-faq summary{position:relative;padding:1.45rem 3rem 1.45rem 0;font-size:clamp(1.1rem,1.4vw,1.28rem);font-weight:700;letter-spacing:-.02em;line-height:1.3;list-style:none;cursor:pointer;transition:color .2s ease}
.page-faq summary::-webkit-details-marker{display:none}
.page-faq summary::before,.page-faq summary::after{content:"";position:absolute;top:50%;right:.4rem;width:16px;height:2px;background:var(--moss);transition:transform .3s var(--ease)}
.page-faq summary::after{transform:rotate(90deg)}
.page-faq details[open] summary::after{transform:rotate(0)}
.page-faq summary:hover{color:var(--moss)}
.page-faq details p{max-width:62ch;padding:0 0 1.6rem;color:var(--ink-soft);line-height:1.65}

/* ---------- Related + areas ---------- */
.svc-related{padding:clamp(5rem,10vw,8rem) 0;background:var(--ivory)}
.svc-related h2{margin-bottom:clamp(2rem,4vw,3rem)}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,1.5vw,1.25rem)}
.related-panel{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;color:var(--on-dark);background:var(--forest-900);text-decoration:none}
.related-panel picture,.related-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.related-panel img{transition:transform 1s var(--ease)}
.related-panel:hover img{transform:scale(1.045)}
.related-contour{position:absolute;inset:0;background:var(--contour) 55% 45%/230% auto no-repeat,var(--forest-900);transition:transform 1s var(--ease)}
.related-panel:hover .related-contour{transform:scale(1.06)}
.related-shade{position:absolute;inset:0;background:linear-gradient(0deg,oklch(0.15 0.03 155 / .82) 0%,transparent 60%)}
.related-label{position:absolute;right:clamp(1.25rem,2.5vw,2rem);bottom:clamp(1.25rem,2.5vw,1.75rem);left:clamp(1.25rem,2.5vw,2rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.related-label svg{width:26px;height:26px;color:var(--leaf);transition:transform .3s var(--ease)}
.related-panel:hover .related-label svg{transform:translateX(5px)}
.svc-areas{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 2rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.svc-areas>p{font-weight:700}
.areas-inline{display:flex;flex-wrap:wrap;gap:.35rem .9rem;color:var(--ink-soft)}
.areas-inline li:not(:last-child)::after{content:"·";margin-left:.9rem;color:var(--moss)}
.advice-links{margin-top:2.5rem}
.advice-links ul{display:grid;gap:.6rem;margin-top:.75rem}
.advice-links a{font-weight:600;text-underline-offset:4px}

/* ---------- Closing call ---------- */
.svc-cta{padding:clamp(5rem,10vw,8.5rem) 0;color:var(--on-dark);background:var(--contour) 80% 50%/cover no-repeat,var(--forest-900)}
.svc-cta-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2.5rem,6vw,6rem);align-items:end}
.svc-cta h2{max-width:16ch}
.svc-cta p{max-width:46ch;margin-top:1.2rem;color:var(--on-dark-soft);font-size:1.1rem}
.cta-phone{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;color:var(--leaf);font-size:clamp(2rem,4.4vw,3.8rem);font-weight:700;letter-spacing:-.035em;line-height:1;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.cta-phone span{color:var(--on-dark-soft);font-size:.95rem;font-weight:500;letter-spacing:0}
.cta-phone:hover{color:var(--leaf-hi)}

/* ---------- Services hub ---------- */
.hub{padding:clamp(3rem,7vw,6rem) 0 clamp(5rem,10vw,8rem);background:var(--paper)}
.hub-list{border-top:1px solid var(--line)}
.hub-row{display:grid;grid-template-columns:3rem minmax(0,1.15fr) minmax(0,1fr) 28px;gap:clamp(1rem,2.5vw,2.5rem);align-items:center;padding:clamp(1.5rem,3vw,2.3rem) 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:padding .45s var(--ease),background-color .3s ease}
.hub-n{align-self:start;padding-top:.6rem;color:var(--moss);font-size:.9rem;font-weight:700}
.hub-name{font-size:clamp(1.75rem,3.6vw,3.1rem);font-weight:700;letter-spacing:-.04em;line-height:1;transition:color .25s ease}
.hub-sum{max-width:44ch;color:var(--ink-soft);font-size:.98rem;line-height:1.55}
.hub-thumb{display:none}
.hub-arrow{width:26px;height:26px;color:var(--moss);transition:transform .3s var(--ease)}
.hub-row:hover{padding-left:1rem;background:oklch(0.94 0.018 115)}
.hub-row:hover .hub-name{color:var(--moss)}
.hub-row:hover .hub-arrow{transform:translateX(6px)}
.hub-preview{position:fixed;z-index:30;top:0;left:0;width:min(340px,26vw);pointer-events:none;opacity:0;transition:opacity .25s ease}
.hub-preview img{aspect-ratio:4/3;object-fit:cover;box-shadow:0 30px 60px oklch(0.15 0.03 155 / .3);transform:scale(.9) rotate(-2deg);transition:transform .45s var(--ease)}
.hub-preview.is-on{opacity:1}
.hub-preview.is-on img{transform:scale(1) rotate(0)}

/* ---------- About ---------- */
.about-story{padding:clamp(5rem,10vw,8.5rem) 0;background:var(--paper)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.about-lead{font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.25}
.about-body p{max-width:60ch;color:var(--ink-soft);font-size:1.08rem;line-height:1.7}
.about-body p+p{margin-top:1.2rem}
.about-principles{padding:clamp(5rem,10vw,8.5rem) 0;color:var(--on-dark);background:var(--contour) 20% 50%/cover no-repeat,var(--forest-950)}
.about-principles h2{margin-bottom:clamp(2.5rem,5vw,4rem)}
.about-principles h2 em{color:var(--leaf)}
.principle-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.principle-list li{padding-top:1.5rem;border-top:1px solid oklch(0.72 0.14 125 / .55)}
.principle-list h3{margin-bottom:.6rem;font-size:clamp(1.2rem,1.6vw,1.45rem);letter-spacing:-.025em}
.principle-list p{color:var(--on-dark-soft);line-height:1.6}
.about-facts{padding:clamp(4.5rem,9vw,7.5rem) 0;background:var(--ivory)}
.about-facts-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.about-facts dl{margin:0;border-bottom:1px solid var(--line)}
.about-facts dl div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:1rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.about-facts dt{color:var(--ink-soft);font-size:.92rem;font-weight:500}
.about-facts dd{margin:0;font-weight:600}

/* ---------- Contact ---------- */
.contact-main{padding:clamp(4.5rem,9vw,7.5rem) 0;background:var(--paper)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(3rem,6vw,6rem);align-items:start}
.contact-routes{margin-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--line)}
.contact-routes a{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 24px;gap:1rem;align-items:center;padding:1.3rem 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:padding .35s var(--ease),background-color .25s ease}
.route-k{color:var(--moss);font-size:.9rem;font-weight:700}
.route-v{font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.contact-routes svg{width:22px;height:22px;color:var(--moss);transition:transform .3s var(--ease)}
.contact-routes a:hover{padding-left:.75rem;background:oklch(0.94 0.018 115)}
.contact-routes a:hover svg{transform:translateX(5px)}
.page-contact-facts{margin:2.5rem 0 0}
.page-contact-facts div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;padding:.55rem 0}
.page-contact-facts dt{color:var(--ink-soft);font-size:.88rem;font-weight:500}
.page-contact-facts dd{margin:0;overflow-wrap:anywhere}
.contact-form{position:sticky;top:calc(var(--header-h) + 24px);border:1px solid var(--line);background:oklch(0.985 0.006 85);box-shadow:0 30px 70px oklch(0.2 0.03 155 / .1);scroll-margin-top:calc(var(--header-h) + 24px)}
.contact-form .quote-form{min-height:0}

/* ---------- Mobile quote bar ---------- */
.mob-cta{display:none}

/* ---------- Motion ---------- */
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hero-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .svc-hero h1,.svc-summary,.svc-hero .page-actions,.svc-hero-media img{animation:none}
  .hub-row,.related-panel img,.related-contour,.contact-routes a{transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .svc-intro-grid,.svc-project-grid,.svc-faq-grid,.svc-cta-grid,.about-grid,.about-facts-grid,.contact-grid{grid-template-columns:1fr}
  .svc-glance,.svc-faq-head,.contact-form{position:static}
  .process-line{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.5rem}
  .process-line::before{display:none}
  .cta-phone{align-items:flex-start}
  .svc-project-media{margin-bottom:3rem}
  .hub-row{grid-template-columns:2.5rem minmax(0,1fr) 26px}
  .hub-sum{grid-column:2;grid-row:2}
  .hub-arrow{grid-column:3;grid-row:1}
  .principle-list{grid-template-columns:1fr}
}
@media (max-width:700px){
  .svc-hero.has-photo{min-height:min(92svh,720px)}
  .svc-hero-shade{background:linear-gradient(0deg,oklch(0.15 0.03 155 / .96) 0%,oklch(0.15 0.03 155 / .84) 55%,oklch(0.15 0.03 155 / .5) 100%)}
  .hub-sum{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .svc-facts{grid-template-columns:1fr 1fr}
  .svc-facts li{padding:.85rem .5rem .95rem 0;font-size:.88rem}
  .process-line{grid-template-columns:1fr;row-gap:0;padding-left:0}
  .process-line li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:1.1rem;padding-bottom:2rem}
  .process-line li::before{content:"";position:absolute;top:44px;bottom:0;left:22px;width:1px;background:oklch(0.72 0.14 125 / .4)}
  .process-line li:last-child::before{display:none}
  .step-n{grid-row:span 2;margin:0}
  .svc-project-media .before{position:relative;bottom:auto;left:auto;width:62%;margin:-18% 0 0 auto}
  .svc-project-media{margin-bottom:0}
  .related-grid{grid-template-columns:1fr}
  .hub-row{grid-template-columns:minmax(0,1fr) 76px;gap:.6rem 1rem}
  .hub-n{display:none}
  .hub-name{grid-column:1;grid-row:1}
  .hub-sum{grid-column:1;grid-row:2}
  .hub-thumb{display:block;grid-column:2;grid-row:1/3;align-self:center}
  .hub-thumb img{aspect-ratio:1;object-fit:cover}
  .hub-arrow{display:none}
  .hub-row:hover{padding-left:0}
  .about-facts dl div{grid-template-columns:1fr;gap:.2rem}
  .contact-routes a{grid-template-columns:5rem minmax(0,1fr) 20px}
  .page-actions .button{width:100%}
  .pages-body{padding-bottom:76px}
  .mob-cta{position:fixed;z-index:40;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr 2fr;gap:.5rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:var(--forest-950);border-top:1px solid oklch(1 0 0 / .12)}
  .mob-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px}
  .mob-cta>a:first-child{border:1px solid oklch(1 0 0 / .3);color:var(--on-dark);font-weight:600;text-decoration:none}
  .mob-cta svg{width:18px;height:18px}
  .mob-cta .button{padding:0 1rem}
  body.dialog-open .mob-cta,body.menu-open .mob-cta{display:none}
}