/* Hartwood Joinery — shared styles for all five pages.
   Walnut/charcoal ground, warm oak-brass accent, Young Serif display,
   Instrument Sans body, DM Mono for the shop-ticket labels. */
:root{
  --bg:#14100c;
  --bg2:#1a1510;
  --panel:#221b14;
  --panel2:#2a2119;
  --line:rgba(236,224,205,.12);
  --line2:rgba(236,224,205,.2);
  --ink:#f0e7d8;
  --mut:#bcae98;
  --dim:#8e806b;
  --oak:#c8955a;
  --oak-hi:#e2b77f;
  --oak-deep:#8a5a2e;
  --paper:#efe6d5;
  --paper2:#e6dbc6;
  --paper-ink:#241a10;
  --paper-mut:#6d5c48;
  --paper-line:rgba(36,26,16,.14);
  --ff-d:"Young Serif", Georgia, "Times New Roman", serif;
  --ff-b:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-m:"DM Mono", ui-monospace, Menlo, monospace;
  --edge:clamp(16px, 4.4vw, 56px);
  --max:1240px;
  --hdr:74px;
  /* house assistant: inherit the shop's look, trades-register corners */
  --nl-accent:#8a5a2e; --nl-ink:#1f1710; --nl-paper:#fbf7f0;
  --nl-radius-btn:10px; --nl-radius-panel:14px; --nl-radius-field:8px;
}
@media (max-width:860px){ :root{ --hdr:62px; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 16px); -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 var(--ff-b);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--edge)}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:2px solid var(--oak-hi); outline-offset:3px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--ff-d); font-weight:400; letter-spacing:-.012em; margin:0; line-height:1.06}
h2{font-size:clamp(34px, 4.6vw, 58px)}
h3{font-size:clamp(23px, 2.2vw, 28px); line-height:1.15}
p{margin:0}
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font:500 12.5px/1 var(--ff-m); letter-spacing:.16em; text-transform:uppercase; color:var(--oak);
}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.7}
.lede{font-size:clamp(17px,1.5vw,19.5px); color:var(--mut); max-width:58ch; line-height:1.6}
.sec{padding:clamp(76px, 10vw, 136px) 0}
.sec-head{display:grid; gap:20px; margin-bottom:clamp(40px,5vw,64px)}
.sec-head.split{grid-template-columns:1.1fr .9fr; align-items:end; gap:40px}
@media (max-width:860px){ .sec-head.split{grid-template-columns:1fr; gap:18px} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 24px; border-radius:6px;
  font:600 15.5px/1 var(--ff-b); letter-spacing:.01em; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px; flex:none}
.btn-oak{background:var(--oak); color:#1a120a}
.btn-oak:hover{background:var(--oak-hi)}
.btn-ghost{border-color:rgba(240,231,216,.42); color:var(--ink); background:rgba(20,16,12,.25); backdrop-filter:blur(4px)}
.btn-ghost:hover{border-color:var(--ink); background:rgba(20,16,12,.5)}
.btn-dark{background:var(--paper-ink); color:var(--paper)}
.btn-dark:hover{background:#3a2a1a}
.link{
  display:inline-flex; align-items:center; gap:8px; color:var(--oak-hi); text-decoration:none;
  font-weight:600; border-bottom:1px solid rgba(226,183,127,.4); padding-bottom:3px; transition:border-color .2s, gap .2s;
}
.link:hover{border-color:var(--oak-hi); gap:12px}

/* ---------- header (solid from the first pixel; never changes) ---------- */
.hdr{
  position:sticky; top:0; z-index:60; height:var(--hdr);
  background:#110d0a; border-bottom:1px solid var(--line);
}
.hdr .wrap{height:100%; display:flex; align-items:center; gap:28px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.brand-mark{width:40px; height:40px; flex:none}
.brand-name{font:400 21px/1 var(--ff-d); letter-spacing:-.01em; display:block}
.brand-sub{display:block; margin-top:5px; font:500 10.5px/1 var(--ff-m); letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.nav{display:flex; gap:4px; margin-left:auto}
.nav a{
  padding:10px 13px; border-radius:6px; text-decoration:none; color:var(--mut);
  font:500 15px/1 var(--ff-b); transition:color .2s, background .2s;
}
.nav a:hover{color:var(--ink); background:rgba(240,231,216,.06)}
.nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--oak)}
.hdr-phone{display:flex; align-items:center; gap:8px; text-decoration:none; font:600 15px/1 var(--ff-b); color:var(--ink); white-space:nowrap}
.hdr-phone svg{width:16px; height:16px; color:var(--oak)}
.hdr .btn{min-height:42px; padding:0 18px; font-size:14.5px}
.menu-btn{display:none}
@media (max-width:1080px){ .hdr-phone span{display:none} }
@media (max-width:860px){
  .brand-name{font-size:19px}
  .brand-mark{width:34px; height:34px}
  .nav, .hdr .btn{display:none}
  .hdr .wrap{gap:10px}
  .hdr-phone{margin-left:auto; width:42px; height:42px; justify-content:center; border:1px solid var(--line2); border-radius:6px}
  .hdr-phone svg{width:18px; height:18px}
  .menu-btn{
    display:flex; align-items:center; gap:8px; height:42px; padding:0 14px;
    background:transparent; color:var(--ink); border:1px solid var(--line2); border-radius:6px;
    font:600 14px/1 var(--ff-b); cursor:pointer;
  }
  .menu-btn i{display:block; width:16px; height:1.5px; background:currentColor; position:relative}
  .menu-btn i::before,.menu-btn i::after{content:""; position:absolute; left:0; width:16px; height:1.5px; background:currentColor}
  .menu-btn i::before{top:-5px} .menu-btn i::after{top:5px}
}
@media (max-width:560px){ .brand-sub{display:none} .menu-btn{padding:0 12px} }
.drawer{
  position:fixed; z-index:59; left:0; right:0; top:var(--hdr);
  background:#110d0a; border-bottom:1px solid var(--line);
  padding:10px var(--edge) 22px; display:none;
}
.drawer.open{display:block}
.drawer a{display:flex; justify-content:space-between; padding:16px 2px; border-bottom:1px solid var(--line); text-decoration:none; font:400 22px/1.1 var(--ff-d)}
.drawer a::after{content:"→"; color:var(--oak); font-family:var(--ff-b)}
.drawer a[aria-current="page"]{color:var(--oak-hi)}
.drawer .btn{margin-top:18px; width:100%}
.drawer .btn::after{content:none}
.drawer .btn{justify-content:center; font:600 16px/1 var(--ff-b)}
@media (min-width:861px){ .drawer{display:none!important} }

/* ---------- home hero ---------- */
.hero{
  position:relative; min-height:calc(100svh - var(--hdr)); max-height:980px; min-height:max(620px, calc(100svh - var(--hdr)));
  display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; background:#0e0b08;
}
.hero-img{position:absolute; inset:0; z-index:-2}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:72% 40%}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(14,11,8,.94) 0%, rgba(14,11,8,.82) 30%, rgba(14,11,8,.42) 58%, rgba(14,11,8,.12) 80%),
    linear-gradient(0deg, rgba(14,11,8,.9) 0%, rgba(14,11,8,0) 42%);
}
.hero .wrap{width:100%; padding-top:120px; padding-bottom:clamp(96px, 8vw, 120px)}
.hero h1{font-size:clamp(44px, 4.8vw, 76px); line-height:1; letter-spacing:-.02em; margin:22px 0 26px}
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; white-space:nowrap}
.hero h1 .ln > span{display:block}
.hero h1 em{font-style:normal; color:var(--oak-hi)}
.hero .lede{color:#d9ccb6; max-width:44ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hero-facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:38px; padding-top:22px; border-top:1px solid rgba(240,231,216,.16); max-width:640px}
.hero-facts li{display:flex; align-items:center; gap:9px; list-style:none; font:500 13px/1.2 var(--ff-m); letter-spacing:.04em; color:#d4c6ae}
.hero-facts li::before{content:""; width:7px; height:7px; background:var(--oak); transform:rotate(45deg); flex:none}
.hero-facts{padding-left:0; margin-bottom:0}
@media (max-width:700px){
  .hero{align-items:flex-end; min-height:calc(100svh - var(--hdr))}
  .hero-img img{object-position:70% 28%}
  .hero::before{
    background:
      linear-gradient(0deg, rgba(14,11,8,.97) 0%, rgba(14,11,8,.9) 45%, rgba(14,11,8,.35) 75%, rgba(14,11,8,.15) 100%);
  }
  /* CTAs end 150px above the fold: clear of the bottom panel (~60px) and the assistant launcher above it (~126px) */
  .hero .wrap{padding-top:72px; padding-bottom:150px}
  .hero h1{font-size:min(42px, calc((100vw - 34px) / 9.4)); margin:16px 0 18px}
  .hero .lede{font-size:16px; line-height:1.6}
  .hero-cta{flex-wrap:nowrap; gap:10px; margin-top:28px}
  .hero-cta .btn{flex:1 1 auto; padding:0 14px; font-size:15px}
  .hero-cta .btn svg{display:none}
  .hero-facts{display:none}
}
.b-short{display:none}
@media (max-width:700px){ .b-long{display:none} .b-short{display:inline} }

/* opening: photo settles, headline line by line, then the rest fades up */
@media (prefers-reduced-motion:no-preference){
  .hero-img img{animation:settle 1.45s cubic-bezier(.2,.7,.2,1) both}
  .hero .eyebrow{animation:fadeUp .7s .1s cubic-bezier(.2,.7,.2,1) both}
  .hero h1 .ln > span{animation:lineUp .9s cubic-bezier(.2,.75,.2,1) both}
  .hero h1 .ln:nth-child(1) > span{animation-delay:.18s}
  .hero h1 .ln:nth-child(2) > span{animation-delay:.32s}
  .hero h1 .ln:nth-child(3) > span{animation-delay:.46s}
  .hero .lede{animation:fadeUp .7s .5s cubic-bezier(.2,.7,.2,1) both}
  .hero-cta{animation:fadeUp .7s .6s cubic-bezier(.2,.7,.2,1) both}
  .hero-facts{animation:fadeUp .7s .72s cubic-bezier(.2,.7,.2,1) both}
  .phead-img img{animation:settle 1.4s cubic-bezier(.2,.7,.2,1) both}
  .phead h1{animation:fadeUp .9s .15s cubic-bezier(.2,.7,.2,1) both}
  .phead .lede{animation:fadeUp .9s .35s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes settle{from{transform:scale(1.08)} to{transform:none}}
@keyframes lineUp{from{transform:translateY(105%)} to{transform:none}}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

/* ---------- inner page header ---------- */
.phead{position:relative; min-height:clamp(380px, 52vh, 520px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; background:#0e0b08}
.phead-img{position:absolute; inset:0; z-index:-2}
.phead-img img{width:100%; height:100%; object-fit:cover}
.phead::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(14,11,8,.92) 0%, rgba(14,11,8,.7) 40%, rgba(14,11,8,.2) 80%), linear-gradient(0deg, rgba(14,11,8,.85), rgba(14,11,8,0) 55%)}
.phead .wrap{width:100%; padding-top:90px; padding-bottom:clamp(40px,6vw,72px)}
.phead h1{font-size:clamp(42px, 6vw, 80px); line-height:1; margin:18px 0 18px; max-width:15ch}
.phead .lede{color:#d9ccb6}
@media (max-width:700px){
  .phead::before{background:linear-gradient(0deg, rgba(14,11,8,.96) 0%, rgba(14,11,8,.78) 50%, rgba(14,11,8,.3) 100%)}
  .phead.tall{min-height:calc(100svh - var(--hdr))}
  .phead.tall .wrap{padding-bottom:150px}
  .phead .hero-cta{flex-wrap:nowrap; gap:10px; margin-top:24px}
  .phead .hero-cta .btn{flex:1 1 auto; padding:0 14px; font-size:15px}
}
.phead .hero-cta{margin-top:28px}
@media (prefers-reduced-motion:no-preference){ .phead .hero-cta{animation:fadeUp .7s .5s cubic-bezier(.2,.7,.2,1) both} }

/* ---------- facts ledger ---------- */
.ledger{background:var(--bg2); border-bottom:1px solid var(--line)}
.ledger .wrap{display:grid; grid-template-columns:repeat(4,1fr)}
.ledger .wrap > div{padding:30px 26px 30px 0; border-right:1px solid var(--line)}
.ledger .wrap > div + div{padding-left:26px}
.ledger .wrap > div:last-child{border-right:0}
.ledger b{display:block; font:400 30px/1 var(--ff-d); color:var(--oak-hi)}
.ledger span{display:block; margin-top:10px; font-size:14.5px; color:var(--mut); line-height:1.45}
@media (max-width:860px){
  .ledger .wrap{grid-template-columns:1fr 1fr}
  .ledger .wrap > div{padding:24px 16px 24px 0!important; border-right:0}
  .ledger .wrap > div:nth-child(odd){border-right:1px solid var(--line)}
  .ledger .wrap > div:nth-child(even){padding-left:18px!important}
  .ledger .wrap > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ledger b{font-size:25px}
}

/* ---------- pieces grid (home) ---------- */
.pieces{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.piece{position:relative; display:block; text-decoration:none; overflow:hidden; border-radius:4px; background:#0e0b08; min-height:300px; isolation:isolate}
.piece img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.piece::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(14,11,8,.92) 0%, rgba(14,11,8,.35) 45%, rgba(14,11,8,0) 70%)}
.piece:hover img{transform:scale(1.04)}
.piece .meta{position:absolute; left:0; right:0; bottom:0; padding:22px 24px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.piece h3{font-size:clamp(22px,2vw,27px)}
.piece small{display:block; margin-top:6px; font-size:14px; color:#cbbda6}
.piece .price{flex:none; text-align:right; font:500 11.5px/1.3 var(--ff-m); letter-spacing:.1em; text-transform:uppercase; color:#cbbda6}
.piece .price b{display:block; font:400 24px/1 var(--ff-d); letter-spacing:0; text-transform:none; color:var(--oak-hi); margin-top:4px}
.p-a{grid-column:span 7; min-height:460px}
.p-b{grid-column:span 5; min-height:460px}
.p-c,.p-d,.p-e{grid-column:span 4; min-height:340px}
.p-f{grid-column:span 6; min-height:340px}
.p-g{grid-column:span 6; min-height:340px}
@media (max-width:860px){
  .pieces{grid-template-columns:1fr 1fr; gap:12px}
  .p-a,.p-b,.p-c,.p-d,.p-e,.p-f,.p-g{grid-column:span 2; min-height:320px}
  .p-c,.p-d{grid-column:span 1; min-height:260px}
  .p-c .meta,.p-d .meta{flex-direction:column; align-items:flex-start; padding:16px}
  .p-c .price,.p-d .price{text-align:left}
}
@media (max-width:480px){ .p-c,.p-d{grid-column:span 2; min-height:280px} .p-c .meta,.p-d .meta{flex-direction:row; align-items:flex-end; padding:22px 24px} .p-c .price,.p-d .price{text-align:right} }

/* ---------- joinery explainer ---------- */
.explain{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:center}
.explain figure{margin:0; position:relative}
.explain figure img{width:100%; aspect-ratio:4/3.3; object-fit:cover; border-radius:4px}
.explain figcaption{margin-top:12px; font:500 12px/1.4 var(--ff-m); letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.explain h2{margin:20px 0 24px}
.explain p + p{margin-top:16px}
.explain .lede{color:var(--mut)}
.checks{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px}
.checks li{display:grid; grid-template-columns:22px 1fr; gap:12px; color:var(--ink)}
.checks li::before{content:""; width:14px; height:14px; margin-top:6px; border:1.5px solid var(--oak); transform:rotate(45deg)}
@media (max-width:860px){ .explain{grid-template-columns:1fr} }

/* ---------- estimator: the shop ticket ---------- */
.est-sec{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative}
.est{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr); gap:0; border-radius:6px; overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.est-pick{background:var(--paper); color:var(--paper-ink); padding:clamp(24px,3.4vw,44px);
  background-image:
    linear-gradient(rgba(36,26,16,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,26,16,.06) 1px, transparent 1px);
  background-size:24px 24px; background-position:-1px -1px;
}
.est-step{font:500 11.5px/1 var(--ff-m); letter-spacing:.14em; text-transform:uppercase; color:var(--paper-mut); margin:0 0 14px; display:flex; gap:10px; align-items:center}
.est-step b{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--paper-ink); color:var(--paper); font-weight:500; letter-spacing:0; font-size:11px}
.est-group + .est-group{margin-top:30px}
.est-pieces{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.est-piece{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left;
  padding:14px 14px 13px; border-radius:5px; cursor:pointer;
  background:rgba(255,252,246,.72); border:1.5px solid var(--paper-line); color:var(--paper-ink);
  transition:border-color .18s, background .18s, transform .18s;
}
.est-piece svg{width:44px; height:34px; color:var(--paper-mut); transition:color .18s}
.est-piece span{font:600 14.5px/1.2 var(--ff-b)}
.est-piece small{font:500 11.5px/1 var(--ff-m); color:var(--paper-mut); letter-spacing:.02em}
.est-piece:hover{border-color:rgba(36,26,16,.4)}
.est-piece[aria-pressed="true"]{background:#fffdf8; border-color:var(--paper-ink); box-shadow:inset 0 0 0 1px var(--paper-ink)}
.est-piece[aria-pressed="true"] svg{color:var(--oak-deep)}
.est-q{font:600 15.5px/1.3 var(--ff-b); margin:0 0 10px}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg label{position:relative; cursor:pointer}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg span{display:block; padding:11px 15px; border-radius:5px; border:1.5px solid var(--paper-line); background:rgba(255,252,246,.72); font:500 14.5px/1.15 var(--ff-b); transition:all .18s}
.seg label:hover span{border-color:rgba(36,26,16,.4)}
.seg input:checked + span{background:var(--paper-ink); border-color:var(--paper-ink); color:var(--paper)}
.seg input:focus-visible + span{outline:2px solid var(--oak-deep); outline-offset:2px}
.ticks{display:grid; gap:8px}
.ticks label{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:5px; border:1.5px solid var(--paper-line); background:rgba(255,252,246,.72); cursor:pointer; font:500 14.5px/1.3 var(--ff-b); transition:border-color .18s, background .18s}
.ticks label:hover{border-color:rgba(36,26,16,.4)}
.ticks input{appearance:none; -webkit-appearance:none; width:20px; height:20px; flex:none; margin:0; border:1.5px solid rgba(36,26,16,.45); border-radius:4px; background:#fff; display:grid; place-items:center; cursor:pointer}
.ticks input::after{content:""; width:10px; height:6px; border-left:2px solid var(--paper); border-bottom:2px solid var(--paper); transform:rotate(-45deg) translate(1px,-1px); opacity:0}
.ticks input:checked{background:var(--paper-ink); border-color:var(--paper-ink)}
.ticks input:checked::after{opacity:1}
.ticks label:has(input:checked){background:#fffdf8; border-color:rgba(36,26,16,.55)}

.est-out{background:#120e0a; color:var(--ink); padding:clamp(24px,3.4vw,44px); display:flex; flex-direction:column; position:relative;
  border-left:1px dashed rgba(240,231,216,.18)}
.est-out::before,.est-out::after{content:""; position:absolute; left:-11px; width:22px; height:22px; border-radius:50%; background:var(--bg2)}
.est-out::before{top:-11px} .est-out::after{bottom:-11px}
.ticket-head{display:flex; justify-content:space-between; gap:12px; font:500 11.5px/1.3 var(--ff-m); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding-bottom:16px; border-bottom:1px solid var(--line)}
.ticket-piece{font:400 clamp(26px,2.6vw,32px)/1.1 var(--ff-d); margin:22px 0 14px}
.cutlist{list-style:none; padding:0; margin:0; display:grid; gap:0; font:400 14px/1.4 var(--ff-m); color:var(--mut)}
.cutlist li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dotted rgba(240,231,216,.16)}
.cutlist li b{font-weight:400; color:var(--ink); text-align:right}
.range-wrap{margin-top:auto; padding-top:26px}
.range-label{font:500 11.5px/1 var(--ff-m); letter-spacing:.14em; text-transform:uppercase; color:var(--oak)}
.range{font:400 clamp(32px,2.8vw,40px)/1.1 var(--ff-d); letter-spacing:-.02em; margin:10px 0 0; color:var(--ink); font-variant-numeric:tabular-nums}
.range span{white-space:nowrap}
.range .dash{color:var(--dim); margin:0 .12em}
.not-quote{margin-top:18px; padding:14px 16px; border-left:2px solid var(--oak); background:rgba(200,149,90,.08); font-size:14.5px; line-height:1.5; color:#ddd0bb}
.not-quote b{color:var(--ink)}
.est-out .btn{margin-top:20px; width:100%}
.est-out .fine{margin-top:12px; font-size:13px; color:var(--dim); text-align:center}
@media (max-width:980px){
  .est{grid-template-columns:1fr}
  .est-out{border-left:0; border-top:1px dashed rgba(240,231,216,.18)}
  .est-out::before,.est-out::after{top:-11px; bottom:auto}
  .est-out::before{left:-11px} .est-out::after{left:auto; right:-11px}
}
@media (max-width:520px){
  .ticket-head span:last-child{display:none}
  .est-pieces{grid-template-columns:1fr 1fr}
  .seg span{padding:10px 12px; font-size:14px}
}

/* ---------- process strip ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; counter-reset:s; border-top:1px solid var(--line)}
.steps li{list-style:none; padding:28px 22px 0 0; position:relative}
.steps li + li{padding-left:22px; border-left:1px solid var(--line)}
.steps .n{font:500 12px/1 var(--ff-m); letter-spacing:.14em; color:var(--oak)}
.steps h3{font-size:23px; margin:14px 0 10px}
.steps p{font-size:15px; color:var(--mut); line-height:1.55}
.steps{padding-left:0; margin:0}
@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr}
  .steps li, .steps li + li{padding:24px 18px 24px 0; border-left:0; border-bottom:1px solid var(--line)}
  .steps li:nth-child(even){padding-left:18px; border-left:1px solid var(--line)}
}
@media (max-width:560px){ .steps{grid-template-columns:1fr} .steps li:nth-child(even){padding-left:0; border-left:0} }

/* ---------- reviews ---------- */
.reviews{display:grid; grid-template-columns:1.15fr .85fr; gap:18px}
.rev-big{background:var(--paper); color:var(--paper-ink); border-radius:4px; padding:clamp(28px,4vw,52px); display:flex; flex-direction:column; justify-content:space-between; gap:30px; position:relative}
.rev-big::before{content:"\201C"; position:absolute; right:30px; top:-6px; font:400 160px/1 var(--ff-d); color:rgba(138,90,46,.2)}
.rev-big blockquote{margin:0; font:400 clamp(24px,2.5vw,33px)/1.3 var(--ff-d); letter-spacing:-.01em}
.stars{display:flex; gap:3px; color:var(--oak)}
.stars svg{width:16px; height:16px}
.rev-big .stars{color:var(--oak-deep)}
.who{display:flex; align-items:center; gap:14px; font-size:15px}
.who b{display:block; font-weight:600}
.who span{color:var(--paper-mut); font-size:14px}
.rev-small{display:grid; gap:18px}
.rev{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:24px 26px}
.rev p{margin:12px 0 14px; font-size:15.5px; color:#ddd0bb; line-height:1.55}
.rev .who span{color:var(--dim)}
.rev-note{margin-top:20px; font-size:13px; color:var(--dim); font-family:var(--ff-m); letter-spacing:.02em}
@media (max-width:900px){ .reviews{grid-template-columns:1fr} }

/* ---------- work strip ---------- */
.strip{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:240px 240px; gap:12px}
.strip a{position:relative; overflow:hidden; border-radius:4px; display:block}
.strip a:first-child{grid-row:span 2}
.strip img{width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.strip a:hover img{transform:scale(1.04)}
.strip span{position:absolute; left:12px; bottom:12px; padding:7px 10px; border-radius:4px; background:rgba(14,11,8,.78); font:500 12px/1 var(--ff-m); letter-spacing:.04em; color:var(--ink)}
@media (max-width:760px){ .strip{grid-template-columns:1fr 1fr; grid-template-rows:260px 170px 170px} .strip a:first-child{grid-column:span 2; grid-row:auto} }

/* ---------- shop CTA band ---------- */
.band{position:relative; overflow:hidden; isolation:isolate; background:#0e0b08}
.band > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.band::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,11,8,.92) 0%, rgba(14,11,8,.7) 50%, rgba(14,11,8,.35) 100%)}
.band .wrap{padding-top:clamp(80px,11vw,150px); padding-bottom:clamp(80px,11vw,150px)}
.band h2{max-width:14ch; margin:20px 0 22px}
.band .lede{color:#d9ccb6}
.band-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.band-info{display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:44px; font-size:15px; color:#d4c6ae}
.band-info b{display:block; font:500 11.5px/1 var(--ff-m); letter-spacing:.14em; text-transform:uppercase; color:var(--oak); margin-bottom:8px}
@media (max-width:700px){ .band::before{background:rgba(14,11,8,.82)} }

/* ---------- footer ---------- */
.ftr{background:#0d0a07; border-top:1px solid var(--line); padding:72px 0 120px; font-size:15px; color:var(--mut)}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.ftr h4{margin:0 0 16px; font:500 11.5px/1 var(--ff-m); letter-spacing:.14em; text-transform:uppercase; color:var(--oak)}
.ftr ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--ink)}
.ftr .brand{margin-bottom:18px}
.ftr-about{max-width:34ch; line-height:1.6}
.ftr-base{margin-top:56px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--dim)}
.ftr-base a{color:var(--mut); text-decoration:underline; text-underline-offset:3px}
@media (max-width:860px){ .ftr-grid{grid-template-columns:1fr 1fr} .ftr-grid > div:first-child{grid-column:span 2} }
@media (max-width:520px){ .ftr-grid{grid-template-columns:1fr; gap:32px} .ftr-grid > div:first-child{grid-column:auto} }

/* ---------- inner page blocks ---------- */
.glance{display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.glance a{padding:22px 20px; text-decoration:none; border-right:1px solid var(--line); transition:background .2s}
.glance a:last-child{border-right:0}
.glance a:hover{background:var(--panel)}
.glance span{display:block; font-size:14.5px; color:var(--mut)}
.glance b{display:block; margin-top:8px; font:400 24px/1 var(--ff-d); color:var(--oak-hi); white-space:nowrap}
.glance small{display:block; margin-top:4px; font:500 11px/1 var(--ff-m); letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
@media (max-width:900px){ .glance{grid-template-columns:1fr 1fr} .glance a{border-bottom:1px solid var(--line)} .glance a:nth-child(even){border-right:0} .glance a:last-child{grid-column:span 2; border-bottom:0} }

.svc{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,72px); align-items:center; padding:clamp(56px,7vw,96px) 0; border-top:1px solid var(--line)}
.svc:nth-of-type(even) .svc-img{order:2}
.svc-img{position:relative}
.svc-img img{width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:4px}
.svc-img .tag{position:absolute; left:14px; top:14px; padding:8px 11px; background:rgba(14,11,8,.82); border-radius:4px; font:500 12px/1 var(--ff-m); letter-spacing:.06em}
.svc .num{font:500 12px/1 var(--ff-m); letter-spacing:.14em; color:var(--oak)}
.svc h2{font-size:clamp(32px,3.6vw,46px); margin:16px 0 18px}
.svc p{color:var(--mut)}
.svc ul{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:9px; font-size:15.5px}
.svc ul li{display:grid; grid-template-columns:18px 1fr; gap:10px}
.svc ul li::before{content:""; width:9px; height:9px; margin-top:8px; background:var(--oak); transform:rotate(45deg)}
.svc-foot{display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line)}
.from{font:500 11.5px/1.2 var(--ff-m); letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.from b{display:block; margin-top:6px; font:400 32px/1 var(--ff-d); letter-spacing:-.01em; text-transform:none; color:var(--oak-hi)}
.svc.feature{align-items:start; row-gap:34px}
.svc.feature .svc-img{grid-column:1/-1; order:0}
.svc.feature .svc-img img{aspect-ratio:21/9}
.svc.feature h2{margin-bottom:0}
.svc.feature ul{margin-top:0}
@media (max-width:860px){ .svc{grid-template-columns:1fr} .svc:nth-of-type(even) .svc-img{order:0} .svc.feature .svc-img img{aspect-ratio:16/11} .svc.feature ul{margin-top:-10px} }

.note-band{background:var(--paper); color:var(--paper-ink); border-radius:4px; padding:clamp(26px,4vw,44px); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center}
.note-band h3{font-size:clamp(24px,2.4vw,32px)}
.note-band p{margin-top:10px; color:var(--paper-mut); max-width:60ch}
@media (max-width:760px){ .note-band{grid-template-columns:1fr} }

/* gallery page */
.g-filter{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px}
.g-filter a{padding:10px 14px; border:1px solid var(--line2); border-radius:5px; text-decoration:none; font:500 13px/1 var(--ff-m); letter-spacing:.04em; color:var(--mut); transition:all .2s}
.g-filter a:hover{border-color:var(--oak); color:var(--ink)}
.g-sec + .g-sec{margin-top:clamp(56px,7vw,88px)}
.g-sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--line)}
.g-sec-h h2{font-size:clamp(28px,3vw,40px)}
.g-sec-h span{font:500 12px/1 var(--ff-m); letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.ggrid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.ggrid figure{margin:0; grid-column:span 6}
.ggrid figure.w8{grid-column:span 8}
.ggrid figure.w4{grid-column:span 4}
.ggrid figure.w12{grid-column:span 12}
.ggrid .ph{position:relative; overflow:hidden; border-radius:4px; background:#0e0b08}
.ggrid img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ggrid figure.w4 img{aspect-ratio:4/5; height:100%}
.ggrid figure.w12 img{aspect-ratio:21/9}
.ggrid .ph:hover img{transform:scale(1.03)}
.ggrid figcaption{display:flex; justify-content:space-between; gap:16px; padding:12px 2px 0}
.ggrid figcaption b{font:400 19px/1.25 var(--ff-d); font-weight:400}
.ggrid figcaption span{flex:none; font:500 11.5px/1.5 var(--ff-m); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); text-align:right}
.ggrid .ng-hint{font-family:var(--ff-m)}
@media (max-width:860px){
  .ggrid{grid-template-columns:1fr 1fr; gap:12px}
  .ggrid figure, .ggrid figure.w8, .ggrid figure.w12, .ggrid figure.w4{grid-column:span 2}
  .ggrid figure.w12 img, .ggrid figure.w4 img{aspect-ratio:16/10}
}
@media (max-width:600px){ .ggrid figcaption{flex-direction:column; gap:4px} .ggrid figcaption span{text-align:left} }

/* how we work */
.flow{counter-reset:f}
.flow-step{display:grid; grid-template-columns:120px 1fr 1fr; gap:clamp(24px,4vw,56px); padding:clamp(48px,6vw,80px) 0; border-top:1px solid var(--line); align-items:start}
.flow-num{font:400 clamp(56px,6vw,84px)/.9 var(--ff-d); color:var(--oak); opacity:.9}
.flow-step h2{font-size:clamp(30px,3.3vw,42px); margin:4px 0 16px}
.flow-step p{color:var(--mut)}
.flow-step p + p{margin-top:14px}
.flow-step .when{display:inline-block; margin-top:20px; font:500 12px/1 var(--ff-m); letter-spacing:.1em; text-transform:uppercase; color:var(--oak-hi); padding:9px 12px; border:1px solid rgba(226,183,127,.35); border-radius:4px}
.flow-media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px}
.flow-media figcaption{margin-top:10px; font:500 12px/1.4 var(--ff-m); letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
.flow-media figure{margin:0}
@media (max-width:900px){ .flow-step{grid-template-columns:1fr; gap:18px} .flow-num{font-size:52px} }

.drawing{background:var(--paper); border-radius:4px; padding:18px; aspect-ratio:4/3; display:grid; place-items:center;
  background-image:linear-gradient(rgba(36,26,16,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(36,26,16,.06) 1px, transparent 1px); background-size:20px 20px}
.drawing svg{width:100%; height:100%}
.quote-sheet{background:#fbf7ef; color:var(--paper-ink); border-radius:4px; padding:clamp(20px,3vw,32px); font-size:14.5px; box-shadow:0 30px 60px -30px rgba(0,0,0,.8); transform:rotate(-.6deg)}
.quote-sheet .qs-h{display:flex; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1.5px solid var(--paper-ink)}
.quote-sheet .qs-h b{font:400 20px/1.1 var(--ff-d)}
.quote-sheet .qs-h span{font:500 11px/1.4 var(--ff-m); letter-spacing:.08em; text-transform:uppercase; color:var(--paper-mut); text-align:right}
.quote-sheet ul{list-style:none; padding:0; margin:12px 0 0; font:400 13.5px/1.4 var(--ff-m)}
.quote-sheet li{display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px dotted rgba(36,26,16,.25)}
.quote-sheet li span:last-child{color:var(--paper-mut); flex:none}
.quote-sheet .qs-t{display:flex; justify-content:space-between; margin-top:14px; font:400 20px/1 var(--ff-d)}
.quote-sheet .qs-t em{font-style:normal; color:var(--paper-mut); font-size:14px; font-family:var(--ff-m); align-self:center}
.quote-sheet .qs-f{margin-top:14px; font-size:12.5px; color:var(--paper-mut); line-height:1.45}

.shop{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center}
.shop-pics{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.shop-pics img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px}
.shop-pics img:first-child{margin-top:40px}
.team{display:grid; gap:0; margin-top:28px; border-top:1px solid var(--line)}
.team div{display:grid; grid-template-columns:130px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--line)}
.team b{font:400 20px/1.2 var(--ff-d)}
.team span{color:var(--mut); font-size:15.5px}
@media (max-width:860px){ .shop{grid-template-columns:1fr} .team div{grid-template-columns:1fr; gap:4px} }

.woods{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.wood{background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.wood i{display:block; height:84px; background-size:cover; background-position:center}
.wood div{padding:18px 20px 22px}
.wood b{display:block; font:400 21px/1.2 var(--ff-d)}
.wood span{display:block; margin-top:8px; font-size:14.5px; color:var(--mut); line-height:1.5}
@media (max-width:900px){ .woods{grid-template-columns:1fr 1fr} }
@media (max-width:420px){ .woods{grid-template-columns:1fr} }

.faq{max-width:860px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative; font:400 21px/1.3 var(--ff-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:18px; font:300 28px/1 var(--ff-b); color:var(--oak)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 24px; color:var(--mut); max-width:68ch}

/* contact */
.ways{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.way{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:28px 26px; display:flex; flex-direction:column; gap:12px}
.way .k{font:500 11.5px/1 var(--ff-m); letter-spacing:.14em; text-transform:uppercase; color:var(--oak)}
.way h3{font-size:25px}
.way p{color:var(--mut); font-size:15.5px}
.way .big{font:400 26px/1.15 var(--ff-d); color:var(--ink); text-decoration:none; word-break:break-word}
.way .btn{margin-top:auto; align-self:flex-start}
@media (max-width:900px){ .ways{grid-template-columns:1fr} }

.ballpark{margin-top:22px; display:none; background:var(--paper); color:var(--paper-ink); border-radius:4px; padding:24px 26px; gap:18px; grid-template-columns:1fr auto; align-items:center}
.ballpark.show{display:grid}
.ballpark .k{font:500 11.5px/1 var(--ff-m); letter-spacing:.14em; text-transform:uppercase; color:var(--paper-mut)}
.ballpark p{margin-top:8px; font:400 15px/1.5 var(--ff-m)}
.ballpark p b{font:400 22px/1.2 var(--ff-d)}
.ballpark small{display:block; margin-top:6px; color:var(--paper-mut); font-size:13px; font-family:var(--ff-b)}
@media (max-width:700px){ .ballpark{grid-template-columns:1fr} }

.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:start}
@media (max-width:860px){ .two{grid-template-columns:1fr} }
.hours{width:100%; border-collapse:collapse; margin-top:22px; font-size:16px}
.hours td{padding:13px 0; border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right; color:var(--mut); font-family:var(--ff-m); font-size:14.5px}
.addr{margin-top:22px; font:400 24px/1.35 var(--ff-d)}
.addr-note{margin-top:10px; color:var(--mut)}
.area-map{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:16px}
.area-map svg{width:100%; height:auto; display:block}
.towns{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.towns span{padding:9px 13px; border:1px solid var(--line2); border-radius:5px; font:500 13px/1 var(--ff-m); color:var(--ink)}
.ready{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:0; counter-reset:r}
.ready li{counter-increment:r; display:grid; grid-template-columns:44px 1fr; padding:16px 0; border-bottom:1px solid var(--line); color:var(--mut)}
.ready li::before{content:"0" counter(r); font:500 13px/1.6 var(--ff-m); color:var(--oak)}
.ready li b{color:var(--ink); font-weight:600}

/* ---------- scroll reveal (hidden state only once JS has run) ---------- */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1; transform:none; transition:none} }

/* assistant teaser never sits on the estimator result */
body.est-in-view .nla-teaser, body.est-in-view .nl-teaser{display:none!important}
@media (max-width:600px){ .area-map .mi{display:none} }