/* OAKRIDGE JOINERY · pages-2026.css (inner pages; classes scoped with .p- prefix). No motion. */


/* ---------- Page header ---------- */
.p-head{padding-block:clamp(56px,8vw,120px) clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.p-head-in{display:grid;grid-template-columns:minmax(0,1fr);max-width:none}
.p-head h1,.p-h1{font-size:clamp(42px,6vw,88px);line-height:.98;letter-spacing:-.03em;font-weight:380;font-variation-settings:"opsz" 72;max-width:14ch}
.p-lede{margin-top:var(--s7);max-width:36em;font-size:19px;line-height:1.6;color:var(--ink-soft)}
.p-head .p-mats{color:var(--ink);margin-top:var(--s6)}
.p-mats li::before{border-color:var(--line-strong)}
.p-note{margin-top:var(--s7)}
.p-head-tight{border-bottom:0}
.p-head-tight .h-consult-copy p:not(.dim):not(.h-priv){margin-top:var(--s5)}
.p-contact{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line)}
.p-contact h2{font:600 14px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.p-contact p{margin-top:var(--s3)!important;font-size:16px!important;color:var(--muted)!important}

.p-sec{padding-block:clamp(56px,8vw,112px)}
.p-sec-top0{padding-top:var(--s8)}

/* ---------- Approach ---------- */
.p-appr-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s8) var(--s6);align-items:end}
.p-appr-fig{grid-column:1/8;margin:0}
.p-appr-fig .img-frame{aspect-ratio:4/3;background:transparent;--fr:10%;--fb:8%}
.p-appr-fig figcaption,.p-step-aside figcaption{display:flex;gap:var(--s3);align-items:baseline;margin-top:var(--s3);font-size:14px;color:var(--muted)}
.p-appr-fig figcaption b,.p-step-aside figcaption b{font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.p-appr-text{grid-column:8/13;display:grid;gap:var(--s5);font-size:18px;color:var(--ink-soft);padding-bottom:var(--s9)}
.p-big{font:400 clamp(22px,2vw,27px)/1.42 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
@media (max-width:959.98px){
  .p-appr-fig,.p-appr-text{grid-column:1/-1}
  .p-appr-fig .img-frame{--fr:0%;--fb:0%}
  .p-appr-text{padding-bottom:0}
}
/* Cut list names as links (approach page) */
.h-cut a.nm{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.h-cut a.nm:hover{color:var(--oak-lit);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}


/* ---------- Services ---------- */
.p-jump{padding-block:var(--s5);border-bottom:1px solid var(--line)}
.p-jump ul{display:flex;flex-wrap:wrap;gap:0 var(--s7);margin:0;padding:0;list-style:none}
.p-jump a{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none}
.p-jump a:hover{color:var(--brand)}
.p-jump .no,.p-links .no{font-size:14px;color:var(--muted)}
.p-svcs{display:grid}
.p-svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s7) var(--s6);align-items:center;padding-block:clamp(56px,7vw,104px);border-bottom:1px solid var(--line)}
.p-svc:last-child{border-bottom:0}
.p-svc-text{grid-column:1/6}
.p-svc-fig{grid-column:7/13}
.p-svc-flip .p-svc-text{grid-column:8/13;grid-row:1}
.p-svc-flip .p-svc-fig{grid-column:1/7;grid-row:1}
.p-svc-fig .img-frame{aspect-ratio:4/3}
.p-svc-no{font:300 clamp(48px,5vw,72px)/1 var(--f-display);color:var(--brand);letter-spacing:-.03em}
.p-svc h2{margin-top:var(--s5)}
.p-svc-d{margin-top:var(--s5);font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:30em}
.p-svc-k{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.p-svc-ex{margin:var(--s1) 0 0;padding:0;list-style:none}
.p-svc-ex a{display:inline-flex;align-items:center;min-height:44px;color:var(--brand);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.p-svc-ex a:hover{color:var(--brand-hover)}
@media (max-width:959.98px){
  .p-svc-text,.p-svc-fig,.p-svc-flip .p-svc-text,.p-svc-flip .p-svc-fig{grid-column:1/-1;grid-row:auto}
  .p-svc-fig{order:-1}
}

/* ---------- Examples page: h2 titles in the shared mosaic ---------- */
.p-ex .h-ex h2{margin-top:var(--s4);font-size:clamp(21px,1.9vw,25px);line-height:1.2;letter-spacing:-.01em}
.p-ex .h-ex-feature h2{font-size:clamp(24px,2.4vw,32px)}
.p-ex .h-mosaic{margin-top:0}

/* ---------- Process page ---------- */
.p-steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.p-step{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:var(--s7) var(--s6);align-items:start;padding-block:var(--s9);border-bottom:1px solid var(--line)}
.p-step::before{content:"";position:absolute;left:0;top:-7px;height:13px;border-left:1px solid var(--ink)}
.p-step-n{font:300 clamp(64px,8vw,128px)/.9 var(--f-display);letter-spacing:-.04em;color:var(--brand);font-variant-numeric:lining-nums}
.p-step-text h2{font-size:clamp(28px,3vw,40px)}
.p-step-text p{margin-top:var(--s4);font-size:18px;color:var(--ink-soft);max-width:30em}
.p-step-aside{margin:0}
.p-step-aside .img-frame{aspect-ratio:4/3}
.p-step-aside .p-mats{margin-top:var(--s2);color:var(--ink)}
@media (max-width:959.98px){
  .p-step{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
  .p-step-aside{grid-column:2}
}
@media (max-width:559.98px){
  .p-step{grid-template-columns:1fr;gap:var(--s4)}
  .p-step-aside{grid-column:1}
  .p-step-n{font-size:64px}
}

/* ---------- Closing consultation band ---------- */
.p-band{background:var(--paper-2);padding-block:clamp(56px,7vw,104px)}
.p-band-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7) var(--s10);align-items:end}
.p-band-copy{display:grid;gap:var(--s6);justify-items:start}
.p-band-copy p{font-size:18px;color:var(--ink-soft)}
@media (max-width:899.98px){.p-band-in{grid-template-columns:1fr}}
@media (max-width:479.98px){.p-band-copy .btn{width:100%}}

/* ---------- 404 page links ---------- */
.p-links{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));border-top:1px solid var(--line)}
.p-links li{border-bottom:1px solid var(--line)}
.p-links a{display:flex;align-items:baseline;gap:var(--s3);min-height:64px;padding:var(--s5) var(--s4) var(--s5) 0;font:400 24px/1.2 var(--f-display);color:var(--ink);text-decoration:none}
.p-links a:hover{color:var(--brand)}

/* ---------- Forms demo ---------- */
.p-demo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10)}
.p-demo-col{display:grid;gap:var(--s6);align-content:start}
.p-demo-col h2{font-size:clamp(28px,3vw,36px)}
.p-demo-col h2:not(:first-child){margin-top:var(--s6)}
.inp.is-bad{border-color:var(--danger);box-shadow:inset 3px 0 0 var(--danger)}
.help-bad{color:var(--danger)}
.p-demo .h-err{margin:0}
.p-ok-demo{padding:var(--s6);border:1px solid var(--line);background:var(--surface)}
.p-ok-t{font:400 32px/1.1 var(--f-display);color:var(--ink)!important}
.p-demo-btns{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center}
.p-demo-dark{padding:var(--s6);background:var(--walnut)}
@media (max-width:899.98px){.p-demo{grid-template-columns:1fr}}
.p-demo-dark .btn-line{color:var(--on-dark);border-color:rgba(243,236,225,.4)}
.p-demo-dark .btn-line:hover{background:var(--on-dark);color:var(--walnut)}