/* ============================================================
   BAKER FLOORCRAFT — Design System
   Heritage hardwood & heart pine craftsmanship
   ============================================================ */

:root {
  /* Palette — drawn from aged heart pine, bone plaster, brass */
  --bone:      #f8f4ec;
  --bone-2:    #f1eae0;
  --bone-deep: #ece3d5;
  --paper:     #fffdf8;
  --ink:       #211c16;
  --ink-soft:  #3d362c;
  --muted:     #6b6153;
  --line:      #e2d8c6;
  --line-2:    #d8ccb6;

  --pine:      #a75f27;   /* rich heart-pine caramel */
  --pine-deep: #814818;
  --amber:     #c2802f;
  --brass:     #b89252;
  --brass-lt:  #d8b979;
  --espresso:  #2e2115;
  --sage:      #7f8570;   /* picks up the plaster greens in the work photos */
  --sage-deep: #5e6353;

  --shadow-sm: 0 1px 2px rgba(33,28,22,.06), 0 2px 8px rgba(33,28,22,.05);
  --shadow-md: 0 8px 24px rgba(33,28,22,.10), 0 2px 6px rgba(33,28,22,.06);
  --shadow-lg: 0 30px 70px -20px rgba(33,28,22,.32), 0 12px 28px -12px rgba(33,28,22,.18);

  --serif: "Fraunces", "Hoefler Text", "Georgia", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 3px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding:0; }

/* ---------- Type ---------- */
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 480; line-height: 1.06; letter-spacing:-.015em; color: var(--ink); }
h1 { font-size: clamp(2.7rem, 6.4vw, 5.4rem); font-optical-sizing:auto; }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
h4 { font-size: 1.18rem; letter-spacing:0; }
p { color: var(--ink-soft); }
strong { font-weight: 600; color: var(--ink); }

.eyebrow {
  font-family: var(--sans);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--pine);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before { content:""; width:34px; height:1px; background: var(--brass); display:inline-block; }
.eyebrow.center::after { content:""; width:34px; height:1px; background: var(--brass); display:inline-block; }

.lede { font-size: clamp(1.14rem,1.7vw,1.4rem); line-height:1.55; color: var(--ink-soft); font-weight: 400; }
.serif-accent { font-family: var(--serif); font-style: italic; }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }
.container-wide { max-width: 1480px; margin-inline:auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 760px; margin-inline:auto; padding-inline: var(--gutter); }
section { position: relative; }
.section-pad { padding-block: clamp(64px, 9vw, 140px); }
.section-pad-sm { padding-block: clamp(48px, 6vw, 90px); }
.center { text-align:center; }
.center .eyebrow{ justify-content:center; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.6em;
  padding: 1.02em 1.9em;
  font-family: var(--sans); font-weight:600; font-size:.92rem;
  letter-spacing:.02em;
  border-radius: var(--radius);
  border:1px solid transparent;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--ink); color: var(--bone); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--espresso); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--pine); color: #fff; box-shadow: 0 8px 20px -8px rgba(167,95,39,.6); }
.btn-gold:hover { background: var(--pine-deep); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: rgba(33,28,22,.03); }
.btn-light { background: rgba(255,255,255,.10); color:#fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(4px); }
.btn-light:hover { background: rgba(255,255,255,.18); }
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.textlink { display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--pine); position:relative; }
.textlink::after { content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:100%; background:var(--pine); transform:scaleX(.0); transform-origin:left; transition:transform .4s var(--ease); }
.textlink:hover::after { transform:scaleX(1); }
.textlink .arw { transition: transform .35s var(--ease); }
.textlink:hover .arw { transform: translateX(3px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header .bar {
  display:flex; align-items:center; justify-content:space-between;
  height: 80px;
  max-width: 1480px; margin-inline:auto; padding-inline: var(--gutter);
}
.brand { display:flex; align-items:center; gap:.7rem; letter-spacing:-.01em; }
.brand .mark { width:38px; height:38px; flex:0 0 auto; }
.brand .name { font-family: var(--serif); font-size:1.32rem; font-weight:500; line-height:1; color: var(--ink); }
.brand .name span { color: var(--pine); }
.brand .sub { display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:4px; font-weight:600; }

.nav { display:flex; align-items:center; gap: clamp(1.2rem, 2.4vw, 2.6rem); }
.nav a.navlink { font-size:.92rem; font-weight:500; color: var(--ink-soft); position:relative; padding-block:.4em; transition:color .25s; }
.nav a.navlink::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:var(--pine); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);}
.nav a.navlink:hover{ color:var(--ink);} .nav a.navlink:hover::after{ transform:scaleX(1);}
.nav a.navlink.active{ color:var(--ink);} .nav a.navlink.active::after{ transform:scaleX(1); background:var(--brass);}

/* transparent-over-hero variant */
.site-header.over-hero:not(.scrolled) .brand .name,
.site-header.over-hero:not(.scrolled) .nav a.navlink { color:#f5efe4; }
.site-header.over-hero:not(.scrolled) .brand .sub { color: rgba(255,255,255,.6); }
.site-header.over-hero:not(.scrolled) .brand .name span{ color: var(--brass-lt); }
.site-header.over-hero:not(.scrolled) .btn-primary{ background:#fff; color:var(--ink); }
.site-header.scrolled { background: rgba(248,244,236,.86); backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 rgba(0,0,0,.04); border-color: var(--line); }

.menu-toggle { display:none; width:44px; height:44px; border:none; background:transparent; position:relative; }
.menu-toggle span { position:absolute; left:9px; right:9px; height:2px; background: var(--ink); transition: .3s var(--ease); }
.site-header.over-hero:not(.scrolled) .menu-toggle span{ background:#fff; }
.menu-toggle span:nth-child(1){ top:15px; } .menu-toggle span:nth-child(2){ top:22px; } .menu-toggle span:nth-child(3){ top:29px; }
body.nav-open .menu-toggle span:nth-child(1){ top:22px; transform:rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2){ opacity:0; }
body.nav-open .menu-toggle span:nth-child(3){ top:22px; transform:rotate(-45deg); }

@media (max-width: 900px){
  .menu-toggle{ display:block; z-index:120; }
  .nav {
    position:fixed; inset:0; background: var(--bone); flex-direction:column; justify-content:center;
    gap:1.6rem; transform: translateX(100%); transition: transform .5s var(--ease); z-index:110;
  }
  .nav a.navlink{ font-size:1.5rem; font-family:var(--serif); color:var(--ink)!important; }
  .nav .btn{ margin-top:.5rem; }
  body.nav-open .nav{ transform:translateX(0); }
  body.nav-open{ overflow:hidden; }
}

/* ---------- Hero ---------- */
.hero { position:relative; min-height: 100svh; display:flex; align-items:flex-end; color:#fff; isolation:isolate; }
.hero-media { position:absolute; inset:0; z-index:-2; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(20,15,10,.45) 0%, rgba(20,15,10,.05) 30%, rgba(20,15,10,.15) 55%, rgba(18,13,8,.82) 100%);
}
.hero-inner { padding-bottom: clamp(56px, 9vh, 120px); padding-top: 140px; max-width: 1480px; margin-inline:auto; padding-inline:var(--gutter); width:100%; }
.hero h1 { color:#fff; max-width: 15ch; text-shadow: 0 2px 40px rgba(0,0,0,.35); }
.hero .eyebrow { color: var(--brass-lt); }
.hero .eyebrow::before{ background: var(--brass-lt); }
.hero .lede { color: rgba(255,255,255,.9); max-width: 46ch; margin-top:1.4rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:1rem; margin-top: 2.2rem; }
.hero-scroll { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.65); display:flex; flex-direction:column; align-items:center; gap:.6rem; z-index:1; }
.hero-scroll .ln{ width:1px; height:42px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation:scrolldown 2.4s var(--ease) infinite; }
@keyframes scrolldown{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* small page hero for inner pages */
.page-hero { position:relative; padding-top: 172px; padding-bottom: clamp(48px,7vw,86px); color:#fff; isolation:isolate; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(24,17,10,.62), rgba(24,17,10,.72)); }
.page-hero .hero-media{ position:absolute; inset:0; z-index:-2; }
.page-hero h1{ color:#fff; max-width:18ch; }
.page-hero .lede{ color:rgba(255,255,255,.88); max-width:52ch; margin-top:1.1rem; }
.page-hero .eyebrow{ color:var(--brass-lt);} .page-hero .eyebrow::before{ background:var(--brass-lt);}
.crumbs{ font-size:.82rem; color:rgba(255,255,255,.7); margin-bottom:1.4rem; letter-spacing:.02em; }
.crumbs a:hover{ color:#fff; } .crumbs .sep{ margin-inline:.5em; opacity:.5; }

/* ---------- Marquee / trust strip ---------- */
.trust { background: var(--espresso); color: rgba(255,255,255,.82); }
.trust .row { display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(1.5rem,5vw,4rem); padding-block:22px; text-align:center; }
.trust .item { display:flex; align-items:center; gap:.6rem; font-size:.86rem; letter-spacing:.04em; }
.trust .item svg{ color: var(--brass-lt); flex:0 0 auto; }

/* ---------- Section heading block ---------- */
.sec-head { max-width: 62ch; }
.sec-head.center{ margin-inline:auto; }
.sec-head h2 { margin-top:1rem; }
.sec-head p { margin-top:1.1rem; }

/* ---------- Feature / value grid ---------- */
.grid { display:grid; gap: clamp(20px,3vw,40px); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 940px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 620px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr;} }

.card { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem,2.4vw,2.3rem); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card .ic { width:46px; height:46px; color: var(--pine); margin-bottom:1.2rem; }
.card h3 { font-size:1.32rem; }
.card p { margin-top:.7rem; font-size:.98rem; }
.card .n { font-family:var(--serif); font-size:.9rem; color:var(--brass); letter-spacing:.1em; }

/* split feature */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,80px); align-items:center; }
.split.rev .split-media{ order:2; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } .split.rev .split-media{ order:0; } }
.split-media { position:relative; }
.split-media img { width:100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.split-media.stack img:first-child{ position:relative; z-index:2; }

/* framed image w/ caption tag */
.framed { position:relative; border-radius:var(--radius); overflow:hidden; box-shadow: var(--shadow-lg); }
.framed img{ width:100%; }
.tag-float { position:absolute; background: var(--paper); box-shadow: var(--shadow-md); border-radius:var(--radius); padding: .9rem 1.2rem; }
.tag-float .big{ font-family:var(--serif); font-size:1.8rem; line-height:1; color:var(--pine); }
.tag-float .sm{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.3rem; }
.tag-br{ right:-14px; bottom:-18px; } .tag-bl{ left:-14px; bottom:-18px; }
@media (max-width:520px){ .tag-float{ right:10px; bottom:10px; left:auto; } }

/* ---------- Stats ---------- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(12px,2vw,28px); }
@media (max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr);} }
.stat { text-align:center; padding: 1rem; }
.stat .num { font-family:var(--serif); font-size: clamp(2.6rem,5vw,3.8rem); line-height:1; color: var(--ink); letter-spacing:-.02em; }
.stat .num .u{ color:var(--pine); }
.stat .lbl { margin-top:.5rem; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---------- Process timeline ---------- */
.steps { display:grid; gap: 0; }
.step { display:grid; grid-template-columns: auto 1fr; gap: 1.6rem; padding-block: 1.8rem; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step .idx { font-family:var(--serif); font-size:1.6rem; color:var(--brass); width:3.4rem; }
.step h3{ font-size:1.4rem; } .step p{ margin-top:.5rem; max-width:60ch; }

/* ---------- Wood species chips ---------- */
.species { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,22px); }
@media (max-width:820px){ .species{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .species{ grid-template-columns:1fr;} }
.chip { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); transition:.4s var(--ease); }
.chip:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.chip .sw { height:96px; }
.chip .body{ padding: 1.1rem 1.2rem 1.4rem; }
.chip h4{ font-family:var(--serif); font-size:1.2rem; }
.chip p{ font-size:.9rem; margin-top:.35rem; color:var(--muted); }

/* ---------- Gallery ---------- */
.gallery-grid { columns: 3; column-gap: 16px; }
@media (max-width: 900px){ .gallery-grid{ columns:2; } }
@media (max-width: 560px){ .gallery-grid{ columns:1; } }
.gallery-grid .g-item { break-inside:avoid; margin-bottom:16px; position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; background:var(--bone-deep); }
.gallery-grid .g-item img{ width:100%; transition: transform .8s var(--ease); }
.gallery-grid .g-item:hover img{ transform: scale(1.045); }
.gallery-grid .g-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, rgba(20,14,8,.55)); opacity:0; transition:opacity .4s; }
.gallery-grid .g-item:hover::after{ opacity:1; }
.g-item .cap{ position:absolute; left:14px; right:14px; bottom:12px; color:#fff; font-size:.8rem; letter-spacing:.02em; opacity:0; transform:translateY(6px); transition:.4s var(--ease); z-index:2; }
.g-item:hover .cap{ opacity:1; transform:none; }
.g-filter{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.4rem; }
.g-filter button{ border:1px solid var(--line-2); background:transparent; color:var(--ink-soft); padding:.5em 1.15em; border-radius:100px; font-size:.85rem; font-weight:500; transition:.3s var(--ease); }
.g-filter button:hover{ border-color:var(--ink); }
.g-filter button.active{ background:var(--ink); color:var(--bone); border-color:var(--ink); }

/* lightbox */
.lb { position:fixed; inset:0; background:rgba(18,13,8,.94); z-index:2000; display:none; align-items:center; justify-content:center; padding:24px; }
.lb.open{ display:flex; }
.lb img{ max-width:92vw; max-height:86vh; border-radius:2px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb .cap{ position:absolute; bottom:24px; left:0; right:0; text-align:center; color:rgba(255,255,255,.8); font-size:.9rem; }
.lb .x, .lb .nav-btn{ position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.3s; }
.lb .x:hover,.lb .nav-btn:hover{ background:rgba(255,255,255,.22); }
.lb .x{ top:22px; right:22px; } .lb .prev{ left:22px; top:50%; transform:translateY(-50%); } .lb .next{ right:22px; top:50%; transform:translateY(-50%); }
@media (max-width:600px){ .lb .prev{ left:10px } .lb .next{ right:10px } .lb .nav-btn{ width:44px;height:44px } }

/* ---------- Homepage photo strip (uniform tiles) ---------- */
.strip-tile { position:relative; display:block; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-sm); aspect-ratio:4/5; background:var(--bone-deep); }
.strip-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.strip-tile:hover img{ transform:scale(1.05); }
.strip-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(20,14,8,.6)); opacity:.85; transition:opacity .4s; }
.strip-tile .cap{ position:absolute; left:14px; right:14px; bottom:12px; color:#fff; font-size:.8rem; z-index:2; opacity:0; transform:translateY(8px); transition:.45s var(--ease); }
.strip-tile:hover .cap{ opacity:1; transform:none; }

/* ---------- Testimonials ---------- */
.quote-wrap{ max-width: 60ch; margin-inline:auto; text-align:center; }
.quote-wrap .mark{ font-family:var(--serif); font-size:5rem; line-height:.2; color:var(--brass); height:2.2rem; display:block; }
.quote-wrap blockquote{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.3; letter-spacing:-.01em; color:var(--ink); }
.quote-wrap .who{ margin-top:1.6rem; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.stars{ color:var(--brass); letter-spacing:.15em; margin-bottom:1.4rem; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; color:#fff; isolation:isolate; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg, rgba(30,21,12,.9), rgba(46,33,21,.78)); }
.cta-band .hero-media{ position:absolute; inset:0; z-index:-2; }
.cta-band h2{ color:#fff; max-width:20ch; }
.cta-band p{ color:rgba(255,255,255,.85); max-width:52ch; }

/* ---------- Calculator ---------- */
.calc { display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px,3vw,48px); align-items:start; }
@media (max-width: 940px){ .calc{ grid-template-columns:1fr; } }
.calc-panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding: clamp(1.5rem,3vw,2.6rem); box-shadow:var(--shadow-sm); }
.field{ margin-bottom:1.9rem; }
.field:last-child{ margin-bottom:0; }
.field > label.q{ display:flex; justify-content:space-between; align-items:baseline; font-weight:600; font-size:1rem; margin-bottom:.9rem; color:var(--ink); }
.field .hint{ font-weight:400; color:var(--muted); font-size:.85rem; }
.opts{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.opt span{ display:flex; flex-direction:column; gap:.15rem; border:1px solid var(--line-2); border-radius:var(--radius); padding:.85rem 1rem; transition:.25s var(--ease); font-size:.92rem; font-weight:500; height:100%; }
.opt span small{ font-weight:400; color:var(--muted); font-size:.78rem; letter-spacing:.01em; }
.opt input:checked + span{ border-color:var(--pine); background:rgba(167,95,39,.06); box-shadow:inset 0 0 0 1px var(--pine); }
.opt input:focus-visible + span{ outline:2px solid var(--brass); outline-offset:2px; }

.range-row{ display:flex; align-items:center; gap:1rem; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; background:var(--line-2); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--ink); border:3px solid var(--paper); box-shadow:var(--shadow-sm); cursor:pointer; transition:.2s; }
input[type=range]::-webkit-slider-thumb:hover{ background:var(--pine); }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--ink); border:3px solid var(--paper); cursor:pointer; }
.sqft-badge{ font-family:var(--serif); font-size:1.5rem; color:var(--ink); min-width:5.5ch; text-align:right; }
.sqft-badge small{ font-family:var(--sans); font-size:.7rem; color:var(--muted); letter-spacing:.1em; }

.result{ position:sticky; top:100px; background:var(--espresso); color:#fff; border-radius:var(--radius); padding: clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-lg); overflow:hidden; }
.result .eyebrow{ color:var(--brass-lt); } .result .eyebrow::before{ background:var(--brass-lt); }
.result .price{ font-family:var(--serif); font-size:clamp(2.6rem,7vw,3.7rem); line-height:1; margin:.6rem 0 .2rem; letter-spacing:-.02em; }
.result .price .to{ color:rgba(255,255,255,.5); font-size:.5em; margin-inline:.15em; }
.result .per{ color:rgba(255,255,255,.65); font-size:.9rem; }
.result .bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.14); margin:1.6rem 0 .6rem; position:relative; overflow:hidden; }
.result .bar i{ position:absolute; inset:0; width:60%; background:linear-gradient(90deg,var(--brass-lt),var(--pine)); border-radius:6px; transition:.6s var(--ease); }
.result .breakdown{ margin-top:1.6rem; border-top:1px solid rgba(255,255,255,.14); padding-top:1.2rem; }
.result .breakdown .li{ display:flex; justify-content:space-between; font-size:.9rem; padding:.35rem 0; color:rgba(255,255,255,.82); }
.result .breakdown .li b{ color:#fff; font-weight:600; }
.result .disc{ margin-top:1.4rem; font-size:.76rem; color:rgba(255,255,255,.55); line-height:1.5; }
.result .btn{ width:100%; justify-content:center; margin-top:1.4rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.7); padding-block: clamp(48px,7vw,84px) 32px; }
.site-footer a{ transition:color .25s; } .site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(24px,4vw,48px); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer .brand .name{ color:#fff; } .site-footer .brand .sub{ color:rgba(255,255,255,.5); }
.footer-about{ margin-top:1.2rem; max-width:34ch; color:rgba(255,255,255,.6); font-size:.95rem; }
.footer-col h5{ font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:1.1rem; }
.footer-col ul li{ margin-bottom:.7rem; font-size:.95rem; }
.footer-note{ display:block; }
.footer-bottom{ margin-top: clamp(36px,5vw,56px); padding-top:26px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.82rem; color:rgba(255,255,255,.5); }
.footer-placeholder{ color:var(--brass-lt); border-bottom:1px dashed rgba(216,185,121,.5); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }

/* ---------- Misc ---------- */
.rule{ height:1px; background:var(--line); border:0; }
.bg-cream{ background:var(--bone); } .bg-deep{ background:var(--bone-deep); } .bg-paper{ background:var(--paper); }
.bg-ink{ background:var(--espresso); color:#f3ece0; }
.bg-ink h2,.bg-ink h3{ color:#fff; } .bg-ink p{ color:rgba(255,255,255,.8); } .bg-ink .eyebrow{ color:var(--brass-lt);} .bg-ink .eyebrow::before{ background:var(--brass-lt);}
.prose p{ margin-bottom:1.2rem; max-width:68ch; } .prose h3{ margin-top:2.4rem; margin-bottom:.8rem; }
.pill{ display:inline-block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pine); background:rgba(167,95,39,.08); border:1px solid rgba(167,95,39,.2); padding:.35em .9em; border-radius:100px; font-weight:600; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7em 1.2em; z-index:9999; }
.skip-link:focus{ left:8px; top:8px; }
:focus-visible{ outline:2px solid var(--pine); outline-offset:3px; border-radius:2px; }