/* Inner pages (services, areas, about, reviews, work, process, contact, blog, FAQ, financing). Each direction's tokens drive the look. */

/* page hero: photo with the copy and the first quiz question over it */
.phero{position:relative;display:flex;align-items:flex-end;min-height:min(78vh,760px);overflow:hidden;background:var(--dark);color:#fff}
.phero-short{min-height:min(62vh,600px)}
.ph-bg{position:absolute;inset:0}
.ph-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 2.6s var(--ease)}
.loaded .ph-bg img{transform:none}
.ph-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,15,11,.84),rgba(9,15,11,.6) 45%,rgba(9,15,11,.18) 75%),linear-gradient(0deg,rgba(9,15,11,.6),rgba(9,15,11,0) 45%)}
.ph-in{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:clamp(32px,5vw,90px);align-items:end;padding-top:140px;padding-bottom:clamp(44px,5vw,72px)}
.ph-copy h1{color:#fff;max-width:15em}
.ph-copy p{font-size:clamp(17px,1.3vw,19.5px);line-height:1.5;color:rgba(255,255,255,.88);max-width:34em;margin-top:22px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.74);margin-bottom:22px}
.crumbs a{color:rgba(255,255,255,.86)}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumbs i{font-style:normal;opacity:.5}
.ph-form .hs{box-shadow:0 30px 70px -24px rgba(0,0,0,.55)}

/* A: big editorial type, header floats over the photo */
.dir-a .phero{padding-top:84px}
.dir-a .ph-copy h1{font-size:clamp(42px,5vw,80px);letter-spacing:-.048em;line-height:.96}
/* B: condensed uppercase, solid header above */
.dir-b .ph-copy h1{font-size:clamp(40px,4.4vw,72px);line-height:.98}
.dir-b .phero{min-height:min(70vh,680px)}
.dir-b .phero-short{min-height:min(54vh,520px)}
.dir-b .ph-in{padding-top:72px}

/* intro: copy beside an "included" list */
.pg-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,120px);align-items:start}
.pg-body p{font-size:clamp(18px,1.45vw,21px);line-height:1.6;color:var(--ink);max-width:36em}
.pg-body p+p{margin-top:1.1em}
.pg-body .pg-towns{font-size:16px;color:var(--mute)}
.pg-body .pg-towns a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pg-incl{background:var(--card);padding:clamp(26px,3vw,40px);border-radius:var(--r,0);box-shadow:0 1px 0 var(--rule),0 30px 60px -40px rgba(10,16,12,.35)}
.pg-incl h2{font-size:clamp(24px,2vw,30px);margin-bottom:18px}
.pg-incl ul{list-style:none;margin-bottom:28px}
.pg-incl li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--rule);font-size:16px;line-height:1.4}
.pg-incl li svg{width:18px;height:18px;margin-top:1px;color:var(--ink)}
.dir-b .pg-incl li svg{color:var(--green)}
.pg-incl .btn{width:100%}
.dir-b .pg-incl{border-top:5px solid var(--lime)}

.pg-h{font-size:clamp(30px,3.2vw,48px);margin-bottom:clamp(28px,3vw,44px)}
.pg-note{font-size:13.5px;color:var(--mute);margin-top:16px}
.pg-more{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;color:var(--ink)}
.pg-more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.pg-more:hover svg{transform:translateX(3px)}

/* three-photo mosaic */
.pg-gal{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(10px,1.2vw,18px);height:min(68vh,640px)}
.pg-gal figure{margin:0;overflow:hidden;border-radius:var(--r,0);background:var(--bg-2)}
.pg-gal .pg-g0{grid-row:1/3}
.pg-gal img{width:100%;height:100%;object-fit:cover}

/* single before/after with its notes */
.pg-ba{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,3vw,48px);align-items:end}
.pg-ba .slider{aspect-ratio:16/11}
.pg-ba-cap b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.dir-b .pg-ba-cap b{font-family:var(--fd);text-transform:uppercase;font-weight:600;letter-spacing:.01em}
.pg-ba-cap>span{display:block;color:var(--mute);font-size:15px;margin-top:4px}
.pg-ba-cap p{margin-top:16px;line-height:1.6}
.pg-ba-cap dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.pg-ba-cap dt{font-size:13px;color:var(--mute)}
.pg-ba-cap dd{font-weight:600;margin-top:2px}

/* related cards */
.pg-rel-h{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,44px)}
.pg-rel-h .pg-h{margin-bottom:0}
.pg-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.pg-card{display:flex;flex-direction:column;gap:6px}
.pg-card-ph{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r,0);background:var(--bg-2);margin-bottom:10px}
.pg-card-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pg-card:hover .pg-card-ph img,.pg-area:hover img,.pg-post:hover img{transform:scale(1.04)}
.pg-card b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.dir-b .pg-card b,.dir-b .pg-area b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.01em;font-size:20px}
.pg-card small{font-size:14.5px;color:var(--mute);line-height:1.45}

/* services index: big rows */
.pg-svcs{border-top:1px solid var(--rule-2)}
.pg-svc{display:grid;grid-template-columns:clamp(120px,16vw,240px) minmax(0,1fr) 56px;gap:clamp(18px,3vw,44px);align-items:center;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--rule-2)}
.pg-svc-ph{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r,0);background:var(--bg-2)}
.pg-svc-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pg-svc:hover .pg-svc-ph img{transform:scale(1.05)}
.pg-svc-t b{display:block;font-size:clamp(26px,3vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1}
.dir-b .pg-svc-t b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.005em}
.pg-svc-t span{display:block;color:var(--mute);margin-top:10px;max-width:42em;line-height:1.5}
.pg-svc-ar{width:54px;height:54px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;transition:background .3s,color .3s}
.dir-b .pg-svc-ar{border-radius:4px}
.pg-svc-ar svg{width:16px;height:16px}
.pg-svc:hover .pg-svc-ar{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* area cards */
.pg-area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pg-area{display:flex;flex-direction:column;gap:8px}
.pg-area b{font-size:22px;font-weight:600;letter-spacing:-.025em}
.pg-area small{color:var(--mute);font-size:15px;line-height:1.5}
.pg-area img{transition:transform 1.1s var(--ease)}
.area-links a,.fa-links a{display:flex;justify-content:space-between;align-items:baseline;width:100%;color:inherit}
.area-links a:hover b{text-decoration:underline;text-underline-offset:4px}
.fa-links li{padding:0!important}
.fa-links a{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:12px 14px}
.fa-links a:hover span{text-decoration:underline;text-underline-offset:3px}
.pg-near-l{font-size:16px;color:var(--mute)}
.pg-near-l a{color:var(--ink);font-weight:600;margin-left:14px;white-space:nowrap}
.pg-near-l a:hover{text-decoration:underline;text-underline-offset:3px}
.sec.pg-near,.fsec.pg-near{padding:0 0 clamp(40px,5vw,72px)}

/* about */
.pg-team{list-style:none}
.pg-team li{display:grid!important;grid-template-columns:44px 1fr!important;grid-template-rows:auto auto;column-gap:14px;align-items:center}
.pg-av{grid-row:1/3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);font-weight:600}
.pg-team b{font-weight:600}
.pg-team li>span:last-child{font-size:14px;color:var(--mute)}
.pg-portrait{margin:36px 0 0}
.pg-ph-slot{aspect-ratio:16/10;display:grid;place-items:center;text-align:center;gap:6px;background:var(--bg-2);border:1px dashed var(--rule-2);border-radius:var(--r,0);color:var(--mute);font-size:15px}
.pg-timeline{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);border-top:2px solid var(--ink)}
.pg-timeline li{padding-top:22px}
.pg-timeline b{display:block;font-size:clamp(26px,2.6vw,40px);font-weight:600;letter-spacing:-.04em}
.dir-b .pg-timeline b{font-family:var(--fd);letter-spacing:0;color:var(--green)}
.pg-timeline p{color:var(--mute);margin-top:10px;line-height:1.5}

/* reviews */
.pg-score-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.pg-score-row div{padding:clamp(22px,3vw,40px) 0;display:flex;align-items:baseline;gap:14px}
.pg-score-row div+div{border-left:1px solid var(--rule-2);padding-left:clamp(18px,3vw,40px)}
.pg-score-row b{font-size:clamp(48px,6vw,96px);font-weight:600;letter-spacing:-.05em;line-height:.9}
.dir-b .pg-score-row b{font-family:var(--fd);letter-spacing:0;color:var(--green)}
.pg-score-row span{color:var(--mute);font-size:16px}
.sec.pg-scores,.fsec.pg-scores{padding-bottom:0}
.pg-rqs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.pg-rq{margin:0;padding:clamp(26px,3vw,44px);background:var(--card);border-radius:var(--r,0);box-shadow:0 1px 0 var(--rule)}
.pg-rq .stars{display:flex;gap:3px;margin-bottom:18px}
.pg-rq .stars svg{width:16px;height:16px;fill:#C99A2E}
.pg-rq p{font-size:clamp(18px,1.4vw,21px);line-height:1.55}
.pg-rq footer{margin-top:22px;display:flex;flex-direction:column;gap:2px}
.pg-rq footer span{color:var(--mute);font-size:14.5px}

/* work grid */
.pg-wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.pg-w{margin:0;position:relative;overflow:hidden;border-radius:var(--r,0);aspect-ratio:4/3;background:var(--bg-2)}
.pg-w:nth-child(1),.pg-w:nth-child(5){grid-column:span 2;aspect-ratio:auto}
.pg-w img{width:100%;height:100%;object-fit:cover}
.pg-w figcaption{position:absolute;left:12px;bottom:12px;background:var(--card);color:var(--ink);font-size:13.5px;font-weight:500;padding:7px 11px;border-radius:var(--r,0)}

/* contact */
.pg-ct{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:stretch}
.pg-ct-i h2{font-size:clamp(28px,2.6vw,40px)}
.pg-ct-ph{display:block;font-size:clamp(34px,3.6vw,56px);font-weight:600;letter-spacing:-.04em;margin:18px 0 22px}
.dir-b .pg-ct-ph{font-family:var(--fd);letter-spacing:.01em;color:var(--green)}
.pg-ct-i p{margin-top:14px;line-height:1.6;font-size:17px}
.pg-ct-i p a{font-weight:600;display:inline-flex;align-items:center;gap:8px}
.pg-ct-i p a svg{width:14px;height:14px}
.pg-soc a+a{margin-left:18px}
.pg-ct-m{min-height:420px;background:var(--bg-2);border-radius:var(--r,0);overflow:hidden;display:grid;place-items:center;padding:24px}
.pg-ct-m .map{width:100%}

/* blog */
.pg-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.pg-post{display:flex;flex-direction:column;gap:12px}
.pg-post-m{display:flex;gap:14px;font-size:13.5px;color:var(--mute)}
.pg-post-m b{color:var(--ink);font-weight:600}
.pg-post h2{font-size:clamp(21px,1.7vw,26px);line-height:1.15;letter-spacing:-.025em}
.dir-b .pg-post h2{font-size:clamp(20px,1.6vw,24px);letter-spacing:.01em}
.pg-post img{transition:transform 1.1s var(--ease)}

/* financing */
.pg-fsteps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);counter-reset:f}
.pg-fsteps li{counter-increment:f;padding-top:22px;border-top:2px solid var(--ink)}
.pg-fsteps li::before{content:counter(f);display:block;font-size:15px;font-weight:600;color:var(--mute);margin-bottom:14px}
.pg-fsteps b{font-size:22px;font-weight:600;letter-spacing:-.02em}
.dir-b .pg-fsteps b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.01em}
.pg-fsteps p{color:var(--mute);margin-top:10px;line-height:1.55}

/* footers with an extra areas column */
.fx-grid-5{grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr)) minmax(0,3fr)}
.ff-grid-5{grid-template-columns:minmax(0,3fr) repeat(3,minmax(0,2fr)) minmax(0,2.4fr)}
.fx-soc a+a,.ff-soc a+a{margin-left:16px}

/* section rhythm on inner pages */
.inner .sec{padding:clamp(72px,8vw,128px) 0}
.inner .sec.pg-gal-sec,.inner .fsec.pg-gal-sec{padding-top:0}
.inner .pg-intro{background:var(--bg)}
.dir-b.inner .pg-intro,.dir-b.inner .pg-svc-list,.dir-b.inner .pg-areas{background:var(--bg-2)}

@media (max-width:1180px){
  .ph-in{grid-template-columns:1fr;align-items:start}
  .ph-form{max-width:560px}
  .pg-cards{grid-template-columns:1fr 1fr}
  .fx-grid-5,.ff-grid-5{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:900px){
  .pg-split,.pg-ba,.pg-ct,.pg-rqs{grid-template-columns:1fr}
  .pg-area-grid,.pg-post-grid{grid-template-columns:1fr 1fr}
  .pg-timeline,.pg-fsteps{grid-template-columns:1fr 1fr;row-gap:28px}
  .pg-gal{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .pg-gal .pg-g0{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}
  .pg-gal figure:not(.pg-g0){aspect-ratio:1}
  .pg-wgrid{grid-template-columns:1fr 1fr}
  .pg-w:nth-child(1),.pg-w:nth-child(5){grid-column:1/-1;aspect-ratio:16/10}
}
@media (max-width:640px){
  .phero,.phero-short,.dir-b .phero,.dir-b .phero-short{display:block;min-height:0;background:var(--bg);color:var(--ink)}
  .dir-a .phero{padding-top:0}
  .ph-bg{position:relative;height:clamp(260px,62vw,360px)}
  .ph-bg::after{background:linear-gradient(0deg,rgba(9,15,11,.3),rgba(9,15,11,0) 50%),linear-gradient(180deg,rgba(9,15,11,.45),rgba(9,15,11,0) 35%)}
  .ph-in{padding-top:22px;padding-bottom:30px;gap:22px}
  .ph-copy h1,.dir-a .ph-copy h1,.dir-b .ph-copy h1{color:var(--ink);font-size:clamp(32px,9vw,40px)}
  .ph-copy p{color:var(--mute);font-size:16.5px;margin-top:14px}
  .crumbs{color:var(--mute);margin-bottom:14px;font-size:13px}.crumbs a{color:var(--ink)}
  .ph-form .hs{box-shadow:none;border:1px solid var(--rule-2)}
  .pg-cards,.pg-area-grid,.pg-post-grid,.pg-timeline,.pg-fsteps,.pg-wgrid{grid-template-columns:1fr}
  .pg-svc{grid-template-columns:96px minmax(0,1fr);gap:16px}
  .pg-svc-ar{display:none}
  .pg-svc-t span{font-size:14.5px;margin-top:6px}
  .pg-score-row{grid-template-columns:1fr}
  .pg-score-row div+div{border-left:0;border-top:1px solid var(--rule-2);padding-left:0}
  .pg-near-l a{display:inline-block;margin:6px 14px 0 0}
  .fx-grid-5,.ff-grid-5{grid-template-columns:1fr 1fr}
  .pg-ct-m{min-height:280px}
}
@media (prefers-reduced-motion:reduce){.ph-bg img{transform:none;transition:none}}
/* A: the collapsed quiz opens downward, so reserve its open height */
@media (min-width:1181px){.dir-a .ph-form{min-height:318px;align-self:end;display:flex;flex-direction:column;justify-content:flex-start}}
.dir-b.inner .ffaq{padding-top:clamp(72px,8vw,116px)}
.dir-b.inner .pg-gal-sec{padding-top:clamp(56px,6vw,88px)}
.dir-a .ph-copy h1{max-width:none}
.inner .pg-rq-sec{padding-top:clamp(36px,4vw,56px)!important}
/* long service names: let the intro button wrap instead of widening the column */
.pg-split>*{min-width:0}
.pg-incl .btn{white-space:normal;height:auto;min-height:54px;padding-top:14px;padding-bottom:14px;text-align:center;line-height:1.25}
@media (max-width:900px){.pg-split{grid-template-columns:minmax(0,1fr)}}
.pg-near-l{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}.pg-near-l a{margin:0!important;display:inline-block}
/* financing terms */
.pg-fterms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:8px}
.pg-fterms div{padding-top:20px;border-top:2px solid var(--ink)}
.pg-fterms b{display:block;font-size:clamp(34px,4vw,52px);font-weight:600;letter-spacing:-.035em;line-height:1}
.dir-b .pg-fterms b{font-family:var(--fd)}
.pg-fterms span{display:block;color:var(--mute);margin-top:10px;font-size:15px}
.pg-fex{max-width:760px;font-size:14px;line-height:1.6;color:var(--mute);margin:28px 0 24px}
@media (max-width:900px){.pg-fterms{grid-template-columns:1fr 1fr;row-gap:28px}}