:root{
  --bg:#FAF8F3;--paper:#FFFFFF;--ink:#1C1A17;--mute:#5E5850;--line:#DDD6C8;--soft:#F1ECE1;
  --acc:#A7401E;--acc-ink:#FFFFFF;--mark:#F3D35B;--ok:#2E6B4A;--warn:#B8860B;--idle:#9A938A;
  --disp:"Zodiak",Georgia,serif;--body:"Supreme",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.015em;margin:0;line-height:1.08}
p{margin:0}
a{color:var(--acc)}
button{font:inherit;color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:20;background:var(--paper);padding:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:2px}

/* header */
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px;padding:0 32px;background:var(--bg);border-bottom:1.5px solid var(--ink);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font:800 23px/1 var(--disp);letter-spacing:-.02em}
.tabs{display:flex;gap:4px;height:100%}
.tabs a{display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--mute);text-decoration:none;font-weight:500;border-bottom:3px solid transparent;margin-bottom:-1.5px}
.tabs a svg{width:20px;height:20px}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acc)}
.tabs a:hover{color:var(--ink)}
.note{background:#FBF0C4;font-size:13px;padding:6px 32px;color:#4A4234;border-bottom:1px solid #EBDDA4}

/* shared */
.eyebrow{font-size:14px;font-weight:500;color:var(--mute);margin-bottom:10px}
.lede{font-size:17px;color:var(--mute);margin-top:12px;max-width:60ch}
.k{font-size:14px;font-weight:500;color:var(--mute)}
.fine{font-size:13px;color:var(--mute);margin-top:10px}
mark{background:linear-gradient(transparent 56%,var(--mark) 56%);color:inherit;padding:0 2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border:1.5px solid var(--ink);background:transparent;border-radius:3px;font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.primary:hover{background:#8E3518}
.btn:disabled{opacity:.6;cursor:progress}
.pad{max-width:1180px;margin:0 auto;padding:40px 48px 64px}
.lines{width:100%;border-collapse:collapse;margin-top:22px;font-size:15px}
.lines td{padding:9px 0;border-bottom:1px solid var(--line)}
.lines td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:16px}
.lines tr.tot td{font-weight:700;border-bottom:1.5px solid var(--ink)}

/* quote */
.quote{display:grid;grid-template-columns:1.2fr 1fr;max-width:1360px;margin:0 auto;min-height:calc(100svh - 98px)}
.qs{padding:44px 56px 56px 48px}
.qs h1{font-size:54px}
.steps{list-style:none;margin:28px 0 0;padding:0}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:8px;padding:20px 0;border-top:1px solid var(--line)}
.steps h2{font-size:22px}
.qn{font:800 32px/1 var(--disp);color:var(--acc)}
.hint{font-size:14px;color:var(--mute);margin:4px 0 12px}
.steps li>div>h2+.seg,.steps li>div>h2+.stepper{margin-top:12px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:block;padding:11px 16px;border:1.5px solid var(--ink);border-radius:3px;font-weight:500;background:var(--paper);min-height:46px}
.seg input:checked+span{background:var(--ink);color:var(--bg)}
.seg input:focus-visible+span{outline:2.5px solid var(--acc);outline-offset:2px}
.slide{display:flex;align-items:center;gap:20px}
.slide input[type=range]{flex:1;accent-color:var(--acc);height:28px;max-width:320px}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--ink);border-radius:3px;background:var(--paper)}
.stepper button{width:46px;height:46px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.stepper button svg{width:18px;height:18px}
.stepper button:hover{background:var(--soft)}
.stepper output{min-width:132px;text-align:center;border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink);padding:0 10px;line-height:46px}
.stepper output b{font:800 24px/1 var(--disp)}
.price{border-left:1.5px solid var(--ink);display:flex;flex-direction:column;position:sticky;top:64px;height:calc(100svh - 98px);background:var(--paper)}
.ph{flex:1 1 0;min-height:0;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.pbody{padding:28px 36px 32px;border-top:1.5px solid var(--ink)}
.range{font:800 46px/1.05 var(--disp);letter-spacing:-.02em;margin:6px 0 10px;font-variant-numeric:tabular-nums}
.sub{color:var(--mute);font-size:15px;margin-bottom:18px;max-width:46ch}
.pbody .btn{width:100%}

/* result + booking */
.result{display:grid;grid-template-columns:1fr 1fr;max-width:1360px;margin:0 auto;min-height:calc(100svh - 98px)}
.rq{padding:36px 56px 56px 48px}
.back{font-weight:500;font-size:15px;display:inline-block;margin-bottom:22px}
.range.big{font-size:64px;margin-top:8px}
.tags{color:var(--mute);font-size:15px}
.facts{display:grid;grid-template-columns:1fr 1fr;margin-top:24px;border:1.5px solid var(--ink)}
.facts div{padding:14px 18px}.facts div+div{border-left:1.5px solid var(--ink)}
.facts b{display:block;font:800 26px/1.1 var(--disp)}.facts span{font-size:14px;color:var(--mute)}
.rq h3{font-size:20px;margin-top:28px}
.incl{margin:10px 0 0;padding:0;list-style:none}
.incl li{padding:7px 0 7px 28px;position:relative;font-size:15px}
.incl li::before{content:"";position:absolute;left:2px;top:12px;width:14px;height:8px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.book{background:var(--soft);padding:36px 48px 56px;border-left:1.5px solid var(--ink)}
.book h2{font-size:34px}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.day h4{font:700 14px/1.2 var(--body);margin-bottom:8px}
.slot{display:block;position:relative;margin-bottom:8px}
.slot input{position:absolute;opacity:0;inset:0;cursor:pointer}
.slot span{display:block;text-align:center;padding:10px 4px;border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);font-weight:500;font-variant-numeric:tabular-nums}
.slot input:checked+span{background:var(--ink);color:var(--bg)}
.slot input:focus-visible+span{outline:2.5px solid var(--acc);outline-offset:2px}
#bform{margin-top:14px;display:grid;gap:4px;max-width:460px}
#bform label{display:grid;gap:5px;font-weight:500;font-size:15px}
#bform input{height:48px;border:1.5px solid #8A8278;border-radius:3px;padding:0 12px;font:inherit;font-size:16px;background:var(--paper);color:var(--ink)}
#bform input:focus{border-color:var(--ink)}
#bform .btn{margin-top:10px}
.ferr{color:var(--acc);font-size:14px;min-height:20px;font-weight:500}
.done{background:var(--paper);border:1.5px solid var(--ink);padding:28px}
.done h2{font-size:32px;margin:6px 0 14px}
.done p{margin-bottom:12px;font-size:16px}
.done .btn{margin-top:6px}

/* portal */
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:24px;border-bottom:1.5px solid var(--ink)}
.phead h1{font-size:46px}
.meter{position:relative;width:280px;height:40px;border:1.5px solid var(--ink);flex:none;background:var(--paper)}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--ok)}
.meter span{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:800 18px/1 var(--disp)}
.filter{display:flex;gap:0;margin:18px 0 6px;border-bottom:1px solid var(--line)}
.filter button{border:0;background:none;padding:10px 16px;font-weight:500;color:var(--mute);border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer}
.filter button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--acc)}
.grp{font:700 13px/1 var(--body);color:var(--mute);margin:20px 0 6px}
.docs,.leads{list-style:none;margin:0;padding:0}
.doc,.lead{border-top:1px solid var(--line)}
.doc:last-child,.lead:last-child{border-bottom:1px solid var(--line)}
.doc-head,.lead-head{width:100%;display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:center;padding:14px 4px;background:none;border:0;text-align:left;cursor:pointer}
.lead-head{grid-template-columns:1fr auto}
.doc-head:hover,.lead-head:hover{background:var(--paper)}
.dn b,.ln b{display:block;font-weight:700}
.dn small,.ln small,.lr small{display:block;color:var(--mute);font-size:14px}
.lr{text-align:right}.lr b{font-variant-numeric:tabular-nums}
.tick{width:22px;height:22px;border:2px solid var(--acc);border-radius:2px;position:relative}
.doc.received .tick{background:var(--ok);border-color:var(--ok)}
.doc.received .tick::after{content:"";position:absolute;left:5px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.doc.check .tick{border-color:var(--warn);background:#FBF0C4}
.st{font-weight:700;font-size:14px;color:var(--acc)}
.doc.received .st{color:var(--ok)}.doc.check .st{color:var(--warn)}
.doc-body,.lead-body{display:none;padding:0 4px 16px 44px}
.lead-body{padding-left:4px}
.doc.open .doc-body,.lead.open .lead-body{display:block}
.doc.open,.lead.open{background:var(--paper)}
.why{font-size:15px;margin-bottom:8px;max-width:62ch}
.file{font-size:14px;color:var(--mute);margin-bottom:8px}
.btn.up{position:relative;overflow:hidden;min-height:44px;padding:10px 18px}
.btn.up input{position:absolute;inset:0;opacity:0;cursor:pointer}
.empty,.err{padding:36px 0;max-width:52ch}
.empty h3,.err h3{font-size:26px;margin-bottom:8px}
.empty p,.err p{color:var(--mute);margin-bottom:16px}

/* close */
.cgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;margin-top:28px;align-items:start}
.months{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.mo{height:120px;border:1.5px solid var(--ink);border-top-width:8px;background:var(--paper);border-radius:2px;text-align:left;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}
.mo b{font:800 24px/1 var(--disp)}.mo span{font-size:13px;font-weight:500;color:var(--mute)}
.mo.closed{border-top-color:var(--ok)}.mo.review{border-top-color:var(--mark)}.mo.waiting{border-top-color:var(--acc)}.mo.open{border-top-color:var(--idle);border-style:solid;background:var(--soft)}
.mo.waiting span{color:var(--acc)}
.mo.sel{outline:3px solid var(--ink);outline-offset:2px}
.mdetail{border:1.5px solid var(--ink);background:var(--paper);padding:24px 26px;border-top-width:8px}
.mdetail.closed{border-top-color:var(--ok)}.mdetail.review{border-top-color:var(--mark)}.mdetail.waiting{border-top-color:var(--acc)}.mdetail.open{border-top-color:var(--idle)}
.mdetail h2{font-size:32px;margin:4px 0 10px}
.mdetail>p{font-size:16px}
.unc{margin-top:14px!important;font-size:15px}.unc b{font:800 20px/1 var(--disp)}
.mdetail h3{font-size:18px;margin-top:18px}
.need{margin:8px 0 0;padding-left:20px}.need li{padding:3px 0}.need a{font-weight:700}

/* owner */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink);margin-top:24px;background:var(--paper)}
.stats div{padding:16px 18px}.stats div+div{border-left:1.5px solid var(--ink)}
.stats b{display:block;font:800 32px/1.1 var(--disp);font-variant-numeric:tabular-nums}.stats span{font-size:14px;color:var(--mute)}
.lead.call .lr small{color:var(--ink);font-weight:500}
.lead.won .lr small{color:var(--ok);font-weight:700}

/* loading */
.skel{display:grid;gap:12px;padding:8px 0 24px}
.skel i{display:block;height:18px;background:linear-gradient(90deg,#ECE6D9 0,#F6F2EA 50%,#ECE6D9 100%);background-size:200% 100%;animation:sh 1.2s linear infinite;border-radius:2px}
.skel.big i:first-child{height:52px;width:70%!important}
.skel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:28px}
.skel-grid i{height:104px;background:linear-gradient(90deg,#ECE6D9 0,#F6F2EA 50%,#ECE6D9 100%);background-size:200% 100%;animation:sh 1.2s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel i,.skel-grid i{animation:none}}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);width:max-content;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:3px;font-weight:500;z-index:30;max-width:calc(100vw - 32px)}

/* ---- phone: the page never scrolls, only main does ---- */
@media screen and (max-width:900px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  body{height:100svh;height:100dvh;display:flex;flex-direction:column}
  body.kbd{height:var(--vvh,100dvh)}
  .bar{flex:none;position:static;height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0}
  .brand{font-size:21px}
  .note{flex:none;font-size:12px;padding:4px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  main{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;margin-bottom:calc(60px + env(safe-area-inset-bottom))}
  body.kbd main{margin-bottom:0}
  .tabs{position:fixed;left:0;right:0;bottom:0;height:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--bg);border-top:1.5px solid var(--ink);padding-bottom:env(safe-area-inset-bottom);z-index:10}
  .tabs a{flex-direction:column;gap:2px;padding:7px 0 6px;font-size:11px;border-bottom:0;border-top:3px solid transparent;margin:0;justify-content:center}
  .tabs a[aria-current="page"]{border-top-color:var(--acc)}
  body.kbd .tabs{display:none}
  .pad{padding:20px 16px 28px}
  .eyebrow{font-size:13px;margin-bottom:6px}
  .lede{font-size:15px;margin-top:8px}
  /* quote */
  .quote{display:block;min-height:0}
  .qs{padding:18px 16px 12px}
  .qs h1{font-size:30px}
  .steps{margin-top:14px}
  .steps li{grid-template-columns:30px 1fr;gap:4px;padding:13px 0}
  .qn{font-size:22px}
  .steps h2{font-size:18px}
  .hint{font-size:13px;margin:2px 0 8px}
  .seg{gap:6px}.seg span{padding:9px 12px;min-height:42px;font-size:15px}
  .slide{gap:10px;flex-wrap:wrap}
  .slide input[type=range]{display:none}
  .stepper button{width:44px;height:44px}.stepper output{min-width:118px;line-height:44px}
  .price{position:sticky;bottom:0;top:auto;height:auto;border-left:0;border-top:1.5px solid var(--ink);z-index:4}
  .ph{display:none}
  .pbody{padding:10px 16px 12px;border-top:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px}
  .pbody .k{font-size:12px}
  .range{font-size:22px;margin:0;white-space:nowrap}
  .sub,.pbody .fine{display:none}
  .pbody .btn{width:auto;padding:10px 12px;font-size:14px;min-height:46px;grid-row:span 2}
  body.kbd .price{display:none}
  /* result */
  .result{display:block;min-height:0}
  .rq{padding:16px 16px 20px}
  .back{margin-bottom:12px}
  .range.big{font-size:38px}
  .facts b{font-size:22px}
  .book{border-left:0;border-top:1.5px solid var(--ink);padding:20px 16px 24px}
  .book h2{font-size:26px}
  .slots{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
  .day h4{font-size:12px}
  .slot span{padding:9px 2px;font-size:13px}
  .done{padding:20px}.done h2{font-size:26px}
  /* portal */
  .phead{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:16px}
  .phead h1{font-size:30px}
  .meter{width:100%;height:30px}
  .filter{margin-top:10px}.filter button{padding:9px 12px}
  .doc-head{gap:10px;padding:12px 2px;grid-template-columns:22px 1fr auto}
  .tick{width:20px;height:20px}
  .doc.received .tick::after{left:4px;top:1px}
  .dn small{font-size:13px}
  .st{font-size:12px;text-align:right;max-width:70px}
  .doc-body{padding-left:34px}
  .cgrid{grid-template-columns:1fr;gap:16px;margin-top:16px}
  .months{gap:6px}
  .mo{height:64px;padding:6px 7px;border-top-width:6px}
  .mo b{font-size:17px}.mo span{font-size:10.5px;line-height:1.15}
  .mdetail{padding:16px 16px}.mdetail h2{font-size:24px}
  .stats{grid-template-columns:1fr 1fr;margin-top:16px}
  .stats div:nth-child(3){border-left:0}
  .stats div:nth-child(n+3){border-top:1.5px solid var(--ink)}
  .stats b{font-size:24px}.stats span{font-size:13px}
  .lead-head{gap:10px;padding:12px 2px}
  .lr b{font-size:14px}.lr small,.ln small{font-size:12.5px}
  .skel-grid{gap:6px}.skel-grid i{height:64px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}