/* OAKRIDGE JOINERY · home-2026.css (homepage composition only; classes scoped with .h- prefix) */

/* ---------- Hero: copy on paper, photo bleeding to the right edge ---------- */
.h-hero{display:grid;grid-template-columns:minmax(var(--gutter),1fr) minmax(0,calc(var(--wrap)*.5)) minmax(0,calc(var(--wrap)*.5)) minmax(var(--gutter),1fr);align-items:stretch;border-bottom:1px solid var(--line)}
.h-hero-copy{grid-column:2;padding:var(--s12) var(--s9) var(--s10) 0;display:flex;flex-direction:column;justify-content:center}
.h-hero h1{font-size:clamp(46px,6.6vw,96px);line-height:.96;letter-spacing:-.03em;font-weight:380;font-variation-settings:"opsz" 72}
.h-lede{margin-top:var(--s7);font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:34em}
.h-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s7);margin-top:var(--s8)}
.h-index{margin:var(--s10) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.h-index li{border-bottom:1px solid var(--line)}
.h-index li:nth-child(odd){border-right:1px solid var(--line)}
.h-index a{display:flex;align-items:baseline;gap:var(--s3);min-height:56px;padding:var(--s4) var(--s4) var(--s4) 0;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none}
.h-index li:nth-child(even) a{padding-left:var(--s4)}
.h-index a:hover{color:var(--brand)}
.h-index .no{font-size:14px;color:var(--muted);font-weight:500}
.h-hero-photo{grid-column:3/-1;margin:0;position:relative;min-height:100%}
.h-hero-photo .img-frame{position:absolute;inset:0;background:transparent;--fl:14%;--fb:0%}
.h-hero-photo figcaption{position:absolute;left:var(--s9);bottom:var(--s6);display:flex;gap:var(--s3);align-items:baseline;padding:var(--s2) var(--s3);background:var(--surface);font-size:14px;color:var(--ink-soft)}
.h-hero-photo figcaption b{font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}

@media (max-width:959.98px){
  .h-hero{grid-template-columns:var(--gutter) minmax(0,1fr) var(--gutter)}
  .h-hero-copy{grid-column:2;padding:var(--s10) 0 var(--s8)}
  .h-hero-photo{grid-column:1/-1;grid-row:2;min-height:0}
  .h-hero-photo .img-frame{position:relative;inset:auto;aspect-ratio:4/3;--fl:0%;--fb:12%}
  .h-hero-photo figcaption{left:var(--gutter);bottom:var(--s5)}
  .h-index{margin-top:var(--s8)}
}
@media (max-width:479.98px){
  .h-hero h1{font-size:clamp(40px,12vw,52px)}
  .h-lede{font-size:18px}
  .h-index{grid-template-columns:1fr}
  .h-index li:nth-child(odd){border-right:0}
  .h-index li:nth-child(even) a{padding-left:0}
  .h-actions .btn{width:100%}
}

/* ---------- Sections ---------- */
.h-sec{padding-block:clamp(72px,9vw,128px)}
.h-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6) var(--s10);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.h-head p{color:var(--muted);max-width:36em}
@media (max-width:899.98px){.h-head{grid-template-columns:1fr}}

/* Approach: heading left, two text columns, marking-out photo */
.h-appr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s7) var(--s6)}
.h-appr-head{grid-column:1/6}
.h-appr-head h2{max-width:9ch}
.h-appr-text{grid-column:7/13;display:grid;gap:var(--s5);font-size:18px;color:var(--ink-soft);align-content:end}
.h-appr-text p:first-child{font-size:21px;line-height:1.5;color:var(--ink)}
.h-appr-fig{grid-column:1/13;margin:var(--s8) 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s6);align-items:end}
.h-appr-fig .img-frame{grid-column:1/9;aspect-ratio:4/3;--fr:10%;--fb:10%;background:transparent}
.h-appr-fig figcaption{grid-column:9/13;border-top:1px solid var(--line-strong);padding-top:var(--s4);font-size:16px;color:var(--muted)}
.h-appr-fig figcaption b{display:block;margin-bottom:var(--s1);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
@media (max-width:899.98px){
  .h-appr-head,.h-appr-text{grid-column:1/-1}
  .h-appr-head h2{max-width:none}
  .h-appr-fig{grid-template-columns:1fr;gap:var(--s4)}
  .h-appr-fig .img-frame,.h-appr-fig figcaption{grid-column:1/-1}
  .h-appr-fig .img-frame{--fr:0%;--fb:0%}
}

/* Services: dark walnut band, a numbered cut list */
.band-dark{background:var(--walnut);color:var(--on-dark)}
.band-dark h2{color:var(--on-dark)}
.band-dark .h-head p{color:var(--on-dark-dim)}
.h-mats{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s5) 0 0;padding:0;list-style:none;font-size:15px;color:var(--on-dark)}
.h-mats li{display:inline-flex;align-items:center;gap:var(--s2)}
.h-mats li::before{content:"";width:12px;height:12px;border:1px solid rgba(243,236,225,.4);background:var(--sw)}
.h-cut{margin:0;border-top:1px solid var(--walnut-line)}
.h-cut>div{display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,6fr);gap:var(--s6);align-items:baseline;padding-block:var(--s7);border-bottom:1px solid var(--walnut-line)}
.h-cut dt{display:contents}
.h-cut .no{font:400 16px/1 var(--f-body);color:var(--oak-lit);letter-spacing:.04em}
.h-cut .nm{font:400 clamp(26px,2.8vw,38px)/1.1 var(--f-display);letter-spacing:-.02em;color:var(--on-dark)}
.h-cut dd{margin:0;font-size:17px;color:var(--on-dark-dim);max-width:36em}
.h-svc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:var(--s8)}
.h-svc-foot p{color:var(--on-dark-dim);font-size:16px}
@media (max-width:767.98px){
  .h-cut>div{grid-template-columns:44px minmax(0,1fr);gap:var(--s2) var(--s4);padding-block:var(--s6)}
  .h-cut dd{grid-column:2}
}

/* Examples: asymmetric mosaic, never a uniform grid */
.h-note{display:flex;gap:var(--s3);align-items:flex-start;max-width:44em;padding:var(--s4) var(--s5);border-left:3px solid var(--oak);background:var(--surface);font-size:16px;color:var(--ink-soft)}
.h-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s9) var(--s6);margin-top:var(--s9)}
.h-ex{margin:0;min-width:0;display:flex;flex-direction:column}
.h-ex .img-frame{aspect-ratio:4/3}
.h-ex h3{margin-top:var(--s4)}
.h-ex .kick{margin-top:var(--s1);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.h-ex-feature{grid-column:1/7;grid-row:1/3}
.h-ex-feature .img-frame{aspect-ratio:auto;flex:1;min-height:420px}
.h-ex-feature h3{font-size:clamp(24px,2.4vw,32px)}
.h-ex-a{grid-column:7/13}
.h-ex-a .img-frame{aspect-ratio:16/10}
.h-ex-b{grid-column:7/10}
.h-ex-c{grid-column:10/13}
.h-ex-d{grid-column:1/9}
.h-ex-e{grid-column:9/13}
.h-ex-e .img-frame{aspect-ratio:3/4}
@media (max-width:1023.98px){
  .h-mosaic{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s8) var(--s5)}
  .h-ex-feature{grid-column:1/-1;grid-row:auto}
  .h-ex-feature .img-frame{aspect-ratio:4/5;flex:none;min-height:0}
  .h-ex-a{grid-column:1/-1}
  .h-ex-b,.h-ex-c,.h-ex-d,.h-ex-e{grid-column:span 3}
  .h-ex-e .img-frame{aspect-ratio:4/3}
}
@media (max-width:599.98px){
  .h-ex-b,.h-ex-c,.h-ex-d,.h-ex-e{grid-column:1/-1}
  .h-ex-a .img-frame{aspect-ratio:4/3}
}

/* Process: measured run with ticks */
.h-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.h-steps li{position:relative;padding:var(--s7) var(--s6) 0 0}
.h-steps li::before{content:"";position:absolute;left:0;top:-7px;height:13px;border-left:1px solid var(--ink)}
.h-steps li:last-child::after{content:"";position:absolute;right:0;top:-7px;height:13px;border-left:1px solid var(--ink)}
.h-steps .sn{display:block;font:300 clamp(48px,5vw,72px)/1 var(--f-display);letter-spacing:-.03em;color:var(--brand);font-variant-numeric:tabular-nums lining-nums}
.h-steps h3{margin-top:var(--s5)}
.h-steps p{margin-top:var(--s3);font-size:16px;color:var(--muted);max-width:28em}
.h-process{background:var(--paper-2)}
@media (max-width:899.98px){
  .h-steps{grid-template-columns:1fr 1fr;row-gap:var(--s9);border-top:0}
  .h-steps li{border-top:1px solid var(--ink)}
  .h-steps li:last-child::after{display:none}
}
@media (max-width:559.98px){
  .h-steps{grid-template-columns:1fr;row-gap:var(--s8)}
  .h-steps li{padding-right:0}
}

/* Consultation */
.h-consult{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s10);align-items:start}
.h-consult-copy{position:sticky;top:calc(var(--hdr) + var(--s8))}
.h-consult-copy p{margin-top:var(--s5);color:var(--ink-soft);font-size:18px;max-width:30em}
.h-consult-copy .h-priv{display:flex;gap:var(--s3);margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.h-priv svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--brand)}
.h-form-card{background:var(--surface);border:1px solid var(--line);padding:clamp(24px,4vw,48px)}
.h-form{display:grid;gap:var(--s8)}
.h-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.h-form-note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:var(--s5)}
.h-form-actions{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.h-err{padding:var(--s4) var(--s5);border-left:3px solid var(--danger);background:#f8ebe7;color:var(--danger);font-weight:600;font-size:16px;margin-bottom:var(--s6)}
.h-ok{display:grid;gap:var(--s4)}
.h-ok h3{font-size:32px}
.h-ok p{color:var(--ink-soft)}
.h-ok .tag{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
@media (max-width:959.98px){
  .h-consult{grid-template-columns:1fr;gap:var(--s8)}
  .h-consult-copy{position:static}
}
@media (max-width:559.98px){.h-two{grid-template-columns:1fr}}
.h-ex-feature .img-frame img{position:absolute;inset:0}
@media (max-width:1023.98px){.h-ex-feature .img-frame img{position:static}}

/* Light text link on the dark band (home services) and section "more" links */
.tlink-light{color:var(--on-dark)}
.tlink-light:hover{color:var(--oak-lit)}
/* "More" links under home sections */
.h-more{margin-top:var(--s8)}
.h-svc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s7)}
.h-ok [data-ok-title]{font-size:32px}
.h-consult-copy .dim{margin-top:0;font-size:14px;color:var(--brand)}