/* makez.ca — see CLAUDE.md. Looks first, then the site. */
:root{--surface:#f6f1e8;--surface-raised:#fffdf9;--surface-inverse:#2f2a24;--ink:#2a2520;--ink-muted:#675b4e;--ink-on-inverse:#f3ece0;--accent:#a9552a;--on-accent:#fff8f0;--accent-ink:#8f4520;--accent-soft:#f0dccd;--line:#dccfbe;--line-strong:#8a7c6c;--focus:#c46a3c;--f-display:"Fraunces", Georgia, serif;--f-body:"Albert Sans", system-ui, sans-serif;--f-label:"Albert Sans", system-ui, sans-serif;--f-italic:"Fraunces", Georgia, serif;--d-weight:600;--d-size:64px;--d-lh:1;--d-ls:-0.01em;--e-ls:0.12em;--r-card:var(--radius-md);--r-btn:var(--radius-pill);}
[data-look="cedar"]{--surface:#f6f1e8;--surface-raised:#fffdf9;--surface-inverse:#2f2a24;--ink:#2a2520;--ink-muted:#675b4e;--ink-on-inverse:#f3ece0;--accent:#a9552a;--on-accent:#fff8f0;--accent-ink:#8f4520;--accent-soft:#f0dccd;--line:#dccfbe;--line-strong:#8a7c6c;--focus:#c46a3c;--f-display:"Fraunces", Georgia, serif;--f-body:"Albert Sans", system-ui, sans-serif;--f-label:"Albert Sans", system-ui, sans-serif;--f-italic:"Fraunces", Georgia, serif;--d-weight:600;--d-size:64px;--d-lh:1;--d-ls:-0.01em;--e-ls:0.12em;--r-card:var(--radius-md);--r-btn:var(--radius-pill);}
[data-look="heritage"]{--surface:#fbf8f2;--surface-raised:#ffffff;--surface-inverse:#26211c;--ink:#2b241d;--ink-muted:#665d53;--ink-on-inverse:#f4efe6;--accent:#8c6a3a;--on-accent:#fffaf0;--accent-ink:#6f5228;--accent-soft:#efe6d6;--line:#e3dccf;--line-strong:#857b6e;--focus:#8c6a3a;--f-display:"Cormorant Garamond", Georgia, serif;--f-body:"Hanken Grotesk", system-ui, sans-serif;--f-label:"Hanken Grotesk", system-ui, sans-serif;--f-italic:"Cormorant Garamond", Georgia, serif;--d-weight:300;--d-size:72px;--d-lh:0.98;--d-ls:0;--e-ls:0.18em;--r-card:var(--radius-none);--r-btn:var(--radius-none);}
[data-look="sunroom"]{--surface:#fbfbf7;--surface-raised:#ffffff;--surface-inverse:#2e3a32;--ink:#22302a;--ink-muted:#586860;--ink-on-inverse:#eef3ee;--accent:#4c7358;--on-accent:#f6faf5;--accent-ink:#3f6149;--accent-soft:#dfe9dc;--line:#dfe3dc;--line-strong:#7a8880;--focus:#5f8a6b;--f-display:"Albert Sans", system-ui, sans-serif;--f-body:"Albert Sans", system-ui, sans-serif;--f-label:"Albert Sans", system-ui, sans-serif;--f-italic:"Fraunces", Georgia, serif;--d-weight:600;--d-size:60px;--d-lh:1.02;--d-ls:-0.02em;--e-ls:0.08em;--r-card:var(--radius-lg);--r-btn:var(--radius-pill);}
[data-look="editorial"]{--surface:#ffffff;--surface-raised:#f7f5f1;--surface-inverse:#1b1b1b;--ink:#141414;--ink-muted:#595959;--ink-on-inverse:#f2f2f2;--accent:#b9501c;--on-accent:#fff7f2;--accent-ink:#9a4015;--accent-soft:#f8e7dc;--line:#e6e2da;--line-strong:#7a756c;--focus:#b9501c;--f-display:"Newsreader", Georgia, serif;--f-body:"Schibsted Grotesk", system-ui, sans-serif;--f-label:"Schibsted Grotesk", system-ui, sans-serif;--f-italic:"Newsreader", Georgia, serif;--d-weight:300;--d-size:96px;--d-lh:0.95;--d-ls:-0.02em;--e-ls:0.1em;--r-card:var(--radius-none);--r-btn:var(--radius-none);}
[data-look="prairie"]{--surface:#f4f1ea;--surface-raised:#ffffff;--surface-inverse:#16283f;--ink:#1a2434;--ink-muted:#57616f;--ink-on-inverse:#eef1f5;--accent:#16283f;--on-accent:#f4f1ea;--accent-ink:#16283f;--accent-soft:#e9dcc0;--line:#dcd8cf;--line-strong:#767e8a;--focus:#5a7ea8;--f-display:"Source Serif 4", Georgia, serif;--f-body:"Hanken Grotesk", system-ui, sans-serif;--f-label:"Hanken Grotesk", system-ui, sans-serif;--f-italic:"Source Serif 4", Georgia, serif;--d-weight:300;--d-size:64px;--d-lh:1.02;--d-ls:-0.01em;--e-ls:0.14em;--r-card:var(--radius-sm);--r-btn:var(--radius-sm);}
[data-look="workshop"]{--surface:#f2f2f0;--surface-raised:#ffffff;--surface-inverse:#1f2224;--ink:#1d1f21;--ink-muted:#5b5f64;--ink-on-inverse:#e8eaec;--accent:#2f5f8a;--on-accent:#f4f8fb;--accent-ink:#2a527a;--accent-soft:#dde7ef;--line:#dcdcd8;--line-strong:#77797a;--focus:#4f86b8;--f-display:"Instrument Sans", system-ui, sans-serif;--f-body:"Instrument Sans", system-ui, sans-serif;--f-label:"DM Mono", ui-monospace, Menlo, monospace;--f-italic:"Instrument Sans", system-ui, sans-serif;--d-weight:600;--d-size:56px;--d-lh:1;--d-ls:-0.02em;--e-ls:0.08em;--r-card:var(--radius-sm);--r-btn:var(--radius-sm);}
[data-look="estate"]{--surface:#f3efe6;--surface-raised:#faf8f3;--surface-inverse:#1f2b22;--ink:#1f2a23;--ink-muted:#566158;--ink-on-inverse:#eef0ea;--accent:#2f4a38;--on-accent:#f3efe6;--accent-ink:#2f4a38;--accent-soft:#dde3d8;--line:#e0d9cb;--line-strong:#7d8477;--focus:#5f8a6b;--f-display:"Marcellus", Georgia, serif;--f-body:"Hanken Grotesk", system-ui, sans-serif;--f-label:"Hanken Grotesk", system-ui, sans-serif;--f-italic:"Marcellus", Georgia, serif;--d-weight:400;--d-size:56px;--d-lh:1.08;--d-ls:0.02em;--e-ls:0.2em;--r-card:var(--radius-none);--r-btn:var(--radius-none);}
[data-look="charcoal"]{--surface:#141312;--surface-raised:#1f1d1b;--surface-inverse:#f3ede4;--ink:#f2ebe1;--ink-muted:#b3a898;--ink-on-inverse:#1f1d1b;--accent:#c69a5b;--on-accent:#1a1613;--accent-ink:#d5b077;--accent-soft:#2b241c;--line:#2e2a26;--line-strong:#736b60;--focus:#a37a42;--f-display:"Bodoni Moda", Didot, Georgia, serif;--f-body:"Schibsted Grotesk", system-ui, sans-serif;--f-label:"Schibsted Grotesk", system-ui, sans-serif;--f-italic:"Bodoni Moda", Didot, Georgia, serif;--d-weight:400;--d-size:80px;--d-lh:0.95;--d-ls:-0.01em;--e-ls:0.22em;--r-card:var(--radius-none);--r-btn:var(--radius-none);}

:root{--radius-none:0px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-pill:999px;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:24px}
@media (max-width:600px){.wrap{padding-inline:16px}}
.ph{color:var(--ink-muted);border-bottom:1px dotted var(--line-strong)}

/* type roles */
.eyebrow{font-family:var(--f-label);font-size:12px;line-height:16px;font-weight:600;letter-spacing:var(--e-ls);text-transform:uppercase;color:var(--accent-ink);margin:0 0 var(--s3)}
.display{font-family:var(--f-display);font-weight:var(--d-weight);font-size:clamp(40px,6vw,var(--d-size));line-height:var(--d-lh);letter-spacing:var(--d-ls);margin:0 0 var(--s6);text-wrap:balance}
.display em{font-family:var(--f-italic);font-style:italic;font-weight:400}
h2.h{font-family:var(--f-display);font-weight:var(--d-weight);font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin:0 0 var(--s4);text-wrap:balance}
h3.h{font-family:var(--f-display);font-weight:var(--d-weight);font-size:24px;line-height:1.2;margin:0 0 var(--s2)}
.lede{font-size:19px;line-height:1.55;color:var(--ink-muted);max-width:62ch;margin:0 0 var(--s8)}
p{max-width:65ch}
.muted{color:var(--ink-muted)}
.label{font-family:var(--f-label);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.02em}

/* buttons */
.btn{display:inline-block;font-family:var(--f-label);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.02em;padding:var(--s3) var(--s6);border-radius:var(--r-btn);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-ink)}
.btn.secondary{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn.secondary:hover{border-color:var(--ink)}
.btn.onbleed{border-color:var(--ink-on-inverse);color:var(--ink-on-inverse)}
.btn.quiet{color:var(--accent-ink);padding-inline:0;text-decoration:underline;text-underline-offset:4px;background:none;border:0}
.actions{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}

/* notice + header */
.notice{background:var(--surface-inverse);color:var(--ink-on-inverse);font-family:var(--f-label);font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase}
.notice .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);padding-block:var(--s2)}
.notice a{color:inherit}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:var(--s6);min-height:72px}
.brand{font-family:var(--f-display);font-weight:var(--d-weight);font-size:26px;letter-spacing:var(--d-ls);text-decoration:none;color:var(--ink);margin-right:auto}
nav.main{display:flex;gap:var(--s6);align-items:center}
nav.main a{font-family:var(--f-label);font-size:14px;font-weight:600;letter-spacing:.02em;text-decoration:none;color:var(--ink-muted);padding:var(--s2) 0;border-bottom:2px solid transparent}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
nav.main a:hover{color:var(--ink)}
.menu-btn{display:none;font:inherit;background:none;border:1.5px solid var(--line-strong);border-radius:var(--r-btn);padding:var(--s2) var(--s4);color:var(--ink);cursor:pointer}
@media (max-width:1040px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:var(--s4) 24px}
  nav.main a{padding:var(--s3) 0;width:100%}
  nav.main.open{display:flex}
  .menu-btn{display:inline-block}
  header.top .cta{display:none}
}

/* pages */
[data-page][hidden]{display:none!important}
section.band{padding-block:var(--s16)}
section.band.tight{padding-block:var(--s12)}
section.band+section.band{border-top:1px solid var(--line)}
section.bleed{background:var(--surface-inverse);color:var(--ink-on-inverse)}
section.bleed h2.h,section.bleed p{color:var(--ink-on-inverse)}
section.bleed .lede{color:var(--ink-on-inverse);opacity:.82}
section.soft{background:var(--accent-soft)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s16);align-items:center;padding-block:var(--s12) var(--s16)}
.hero .copy{max-width:600px}
.art{border-radius:var(--r-card);overflow:hidden;background:var(--accent-soft)}
.art svg{display:block;width:100%;height:auto}
.sky{fill:var(--surface-raised)}.ground{fill:var(--accent-soft)}.roof{fill:var(--surface-inverse)}.wall{fill:var(--line)}.win{fill:var(--surface-raised)}
.deck{fill:var(--accent)}.post{fill:var(--line-strong)}.rail{fill:var(--line-strong)}.tree{fill:var(--accent-soft);stroke:var(--line-strong);stroke-width:2}.trunk{fill:var(--line-strong)}
.cap{font-family:var(--f-label);font-size:11px;letter-spacing:.06em;fill:var(--ink-muted)}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:var(--s8);padding-block:var(--s8) var(--s12)}}

/* trust strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s8);padding-block:var(--s8);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .item{display:flex;gap:var(--s3);align-items:flex-start}
.strip .mark{flex:none;width:12px;height:12px;margin-top:6px;background:var(--accent);border-radius:var(--r-btn)}
.strip b{display:block;font-family:var(--f-label);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.02em}
.strip span.d{display:block;font-size:14px;line-height:20px;color:var(--ink-muted)}
@media (max-width:820px){.strip{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.strip{grid-template-columns:1fr}}

/* cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8)}
.grid.five{grid-template-columns:repeat(5,1fr);gap:var(--s6)}
@media (max-width:1000px){.grid.five{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.grid,.grid.five{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.grid,.grid.five{grid-template-columns:1fr}}
.card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card .tile{aspect-ratio:4/3;max-width:100%;background:var(--accent-soft);position:relative;display:flex;align-items:flex-end;padding:var(--s4)}
.card .tile.empty{background-color:var(--surface-raised);background-image:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 12px)}
.card .tile svg{position:absolute;inset:0;width:100%;height:100%}
.soon{font-family:var(--f-label);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);background:var(--surface-raised);padding:6px 10px;border-radius:var(--r-btn);border:1px solid var(--line);white-space:nowrap;position:relative}
.card .body{padding:var(--s4) var(--s6) var(--s6)}
.card h3{font-family:var(--f-display);font-weight:var(--d-weight);font-size:22px;line-height:1.15;margin:0 0 var(--s2)}
.card p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-muted)}
.card .meta{margin-top:var(--s3);font-family:var(--f-label);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.svc{padding:var(--s6);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-card);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:var(--s2)}
.svc .n{font-family:var(--f-label);font-size:12px;letter-spacing:.08em;color:var(--accent-ink);text-transform:uppercase}
.svc h3{font-family:var(--f-display);font-weight:var(--d-weight);font-size:22px;line-height:1.15;margin:0}
.svc p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-muted)}
.svc:hover{border-color:var(--line-strong)}

/* before/after */
.ba{position:relative;width:100%;aspect-ratio:880/460;max-width:100%;border-radius:var(--r-card);overflow:hidden;background:var(--accent-soft);--pos:50%;touch-action:pan-y}
.ba .layer{position:absolute;inset:0}
.ba .layer.after{clip-path:inset(0 0 0 var(--pos))}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene .sky{fill:var(--surface-raised)}.scene .wall{fill:var(--line)}.scene .door{fill:var(--surface-inverse)}.scene .pane{fill:var(--surface-raised)}
.scene.before .board{fill:var(--line-strong)}.scene.before .oldpost,.scene.before .oldrail{fill:var(--ink-muted)}.scene.before .weed{fill:var(--ink-muted);opacity:.55}.scene.before .stain{fill:var(--ink-muted);opacity:.3}
.scene.after .board{fill:var(--accent)}.scene.after .post,.scene.after .rail{fill:var(--line-strong)}.scene.after .glass{fill:var(--surface-raised);opacity:.5}
.scene.after .planter{fill:var(--surface-inverse)}.scene.after .plant{fill:var(--accent-soft);stroke:var(--line-strong);stroke-width:2}.scene.after .chair,.scene.after .table{fill:var(--accent-soft);stroke:var(--line-strong);stroke-width:2}
.scene .cap{font-family:var(--f-label);font-size:12px;letter-spacing:.06em;fill:var(--ink)}.scene .plate{fill:var(--surface-raised);opacity:.9}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--surface-raised);transform:translateX(-1px);pointer-events:none}
.ba .knob{position:absolute;top:50%;left:var(--pos);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:999px;background:var(--accent);border:2px solid var(--on-accent);pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--on-accent);font-family:var(--f-label);font-size:13px;font-weight:600}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba input[type=range]:focus-visible+.knob{outline:2px solid var(--focus);outline-offset:3px}
.ba .lbl{position:absolute;top:var(--s4);font-family:var(--f-label);font-size:12px;line-height:16px;font-weight:600;letter-spacing:var(--e-ls);text-transform:uppercase;padding:6px 10px;border-radius:var(--r-btn);background:var(--surface-inverse);color:var(--ink-on-inverse);pointer-events:none}
.ba .lbl.b{left:var(--s4)}.ba .lbl.a{right:var(--s4)}
.ba-cap{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s3);font-size:15px;color:var(--ink-muted)}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s6)}
.step{padding-top:var(--s6);border-top:1px solid var(--line-strong);position:relative}
.step .num{position:absolute;top:-11px;left:0;background:var(--surface);padding-right:var(--s2);font-family:var(--f-label);font-size:14px;line-height:22px;font-weight:600;color:var(--accent-ink);letter-spacing:.04em}
.soft .step .num{background:var(--accent-soft)}
.step h3{font-family:var(--f-display);font-weight:var(--d-weight);font-size:22px;line-height:1.15;margin:0 0 var(--s2)}
.step p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-muted)}
@media (max-width:1000px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.steps{grid-template-columns:1fr}}

/* columns / misc */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8)}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.cols p{font-size:16px;color:var(--ink-muted);margin:0}
.quote{max-width:56ch;margin:0}
.quote p{font-family:var(--f-display);font-weight:var(--d-weight);font-size:clamp(24px,3vw,32px);line-height:1.3;margin:0 0 var(--s4)}
.quote footer{font-family:var(--f-label);font-size:14px;color:var(--ink-muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr;gap:var(--s8)}}
ul.plain{padding-left:1.2em;margin:0 0 var(--s6)}
ul.plain li{margin-bottom:var(--s2)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s8);margin:0 0 var(--s8);padding:0;list-style:none}
.facts li b{display:block;font-family:var(--f-label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);font-weight:600}
dl.faq{margin:0}
dl.faq dt{font-family:var(--f-display);font-weight:var(--d-weight);font-size:22px;line-height:1.2;margin:var(--s6) 0 var(--s2)}
dl.faq dd{margin:0;color:var(--ink-muted)}
.crew{aspect-ratio:3/2;max-width:100%;border-radius:var(--r-card);background-color:var(--surface-raised);background-image:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 12px);border:1px solid var(--line);display:flex;align-items:flex-end;padding:var(--s4)}

/* form */
form.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6);max-width:720px}
form.contact .full{grid-column:1/-1}
@media (max-width:600px){form.contact{grid-template-columns:1fr}}
form.contact label{display:flex;flex-direction:column;gap:var(--s1);font-family:var(--f-label);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
form.contact input,form.contact select,form.contact textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface-raised);border:1.5px solid var(--line-strong);border-radius:var(--r-card);padding:var(--s3) var(--s4);width:100%;max-width:100%}
form.contact textarea{min-height:120px;resize:vertical}
.sent{border:1px solid var(--line-strong);border-radius:var(--r-card);padding:var(--s4) var(--s6);background:var(--surface-raised);max-width:720px}

/* footer */
footer.site{border-top:1px solid var(--line);padding-block:var(--s12);font-size:14px;color:var(--ink-muted)}
footer.site .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--s8)}
@media (max-width:820px){footer.site .wrap{grid-template-columns:1fr}}
footer.site .brand{font-size:22px;display:inline-block;margin:0 0 var(--s2)}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:var(--s1)}
footer.site a{color:inherit}

/* direction toolbar */
.dirtool{position:fixed;right:16px;bottom:0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;font-family:var(--f-label);font-size:13px}
.dirtool .toggle{display:flex;align-items:center;gap:var(--s2);background:var(--ink);color:var(--surface);border:0;border-radius:var(--radius-pill);padding:10px 16px;font:inherit;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.dirtool .panel{position:absolute;right:0;bottom:calc(100% - 4px);width:300px;max-width:calc(100vw - 32px);background:var(--surface-raised);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:var(--s3);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.dirtool .panel[hidden]{display:none}
.dirtool .panel h4{margin:var(--s1) var(--s2) var(--s2);font:inherit;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px;color:var(--ink-muted)}
.dirtool .panel button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:var(--radius-sm);padding:var(--s2);font:inherit;color:var(--ink);cursor:pointer}
.dirtool .panel button:hover{background:var(--accent-soft)}
.dirtool .panel button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.dirtool .panel button small{display:block;font-weight:400;opacity:.75;font-size:12px;line-height:1.3}
.dirtool .panel button[aria-pressed="true"] small{opacity:.8}
.dirtool .hide{margin-top:var(--s2);text-align:right}
.dirtool .hide button{width:auto;display:inline-block;color:var(--ink-muted);text-decoration:underline}
.dirtool .tab{position:absolute;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--surface);border:0;border-radius:var(--radius-pill);padding:8px 12px;font:inherit;font-size:12px;cursor:pointer}
.dirtool .tab[hidden],.dirtool .toggle[hidden]{display:none}

.svc-row{display:grid;grid-template-columns:minmax(70px,90px) minmax(0,1fr);gap:6px 10px;align-items:center;margin:6px 0}
.svc-row .svc-note{grid-column:2}
.svc-name{font-weight:600;font-size:14px}
.svc-sel,.svc-note{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);min-width:0;width:100%}
.svc-flag{margin:8px 0 0;font-size:13px;color:var(--ink-muted)}

/* ---- deploy-site additions ---- */
.hero-media{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;overflow:hidden;background:var(--surface-inverse);color:var(--ink-on-inverse)}
.hero-media .bg{position:absolute;inset:0}
.hero-media .bg img,.hero-media .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media .bg img{animation:kb 28s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.hero-media .bg img{animation:none}}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-media .bg video{opacity:0;transition:opacity .8s}
.hero-media.video-ready .bg video{opacity:1}
.hero-media.video-ready .bg img{animation:none}
.hero-media .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.62) 100%)}
.hero-media .wrap{position:relative;padding-block:var(--s16) var(--s12);width:100%}
.hero-media .eyebrow{color:var(--ink-on-inverse);opacity:.85}
.hero-media .display{color:#fff;max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-media .lede{color:#fff;opacity:.9;max-width:52ch}
.hero-media .btn.secondary{border-color:rgba(255,255,255,.7);color:#fff}
.hero-media .note-media{position:absolute;right:var(--s4);top:var(--s4);font-family:var(--f-label);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:var(--r-btn)}
.wants{width:100%;border-collapse:collapse;margin-top:var(--s8)}
.wants th,.wants td{text-align:left;vertical-align:top;padding:var(--s4) var(--s4) var(--s4) 0;border-top:1px solid var(--line);font-size:16px}
.wants th{font-family:var(--f-label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);font-weight:600;border-top:0;padding-top:0}
.wants td.n{font-family:var(--f-display);font-weight:var(--d-weight);font-size:34px;line-height:1;white-space:nowrap;color:var(--accent-ink);width:110px}
.wants td.q{color:var(--ink-muted);width:36%}
.src{font-size:13px;color:var(--ink-muted);margin-top:var(--s4)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8)}
@media (max-width:900px){.gal{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gal{grid-template-columns:1fr}}
.g-item{margin:0;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.g-item .pic{aspect-ratio:4/3;max-width:100%;position:relative;background:var(--accent-soft);overflow:hidden}
.g-item .pic img{width:100%;height:100%;object-fit:cover;display:block}
.g-item .pic svg{position:absolute;inset:0;width:100%;height:100%}
.g-item .pic.empty{background-color:var(--surface-raised);background-image:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 12px);display:flex;align-items:flex-end;padding:var(--s4)}
.g-item .ba{aspect-ratio:4/3;height:auto;width:100%;margin:0;border-radius:0}
.g-item figcaption{padding:var(--s4) var(--s6) var(--s6)}
.g-item figcaption b{display:block;font-family:var(--f-display);font-weight:var(--d-weight);font-size:20px;line-height:1.15;margin-bottom:4px}
.g-item figcaption span{font-size:14px;color:var(--ink-muted)}
.g-item .tag{display:inline-block;margin-top:var(--s2);font-family:var(--f-label);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);border:0;padding:0}
.soon{font-family:var(--f-label);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);background:var(--surface-raised);padding:6px 10px;border-radius:var(--r-btn);border:1px solid var(--line);white-space:nowrap;position:relative}
/* builders */
.bench{display:grid;grid-template-columns:340px 1fr;gap:var(--s6);align-items:start;padding-block:var(--s4) var(--s12)}
@media (max-width:900px){.bench{grid-template-columns:1fr}.bench .stage{order:-1}}
.controls{display:flex;flex-direction:column;gap:14px}
.group{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px}
.group h4{margin:0 0 10px;font-family:var(--f-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);font-weight:600;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;white-space:nowrap}
.group h4 span{text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--f-body);font-size:12px;text-align:right;white-space:normal;flex:1 1 170px}
.group h5{margin:12px 0 6px;font-family:var(--f-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);font-weight:600;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;white-space:nowrap}
.group h5 span{text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--f-body);font-size:12px;text-align:right;white-space:normal;flex:1 1 170px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font:inherit;font-family:var(--f-body);font-size:14px;font-weight:500;padding:7px 12px;border-radius:var(--r-btn);border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.chips button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface-raised) inset}
.slider{display:flex;align-items:center;gap:12px;font-family:var(--f-label);font-size:13px}
.slider input{flex:1;accent-color:var(--accent)}
.slider output{min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.checks{display:flex;flex-direction:column;gap:8px}
.checks label{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
.checks input{width:18px;height:18px;accent-color:var(--accent)}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.presets button{font:inherit;font-family:var(--f-body);font-size:13px;padding:6px 10px;border-radius:var(--r-card);border:1px dashed var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.cfg-save{display:flex;gap:8px;margin-bottom:8px}
.cfg-save input{flex:1;min-width:0;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink)}
.cfg-list{display:flex;flex-direction:column;gap:6px}
.cfg-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:4px 6px 4px 8px;background:var(--surface)}
.cfg-chip button:first-child{flex:1;text-align:left;font:inherit;font-size:14px;font-weight:600;background:none;border:0;color:var(--ink);cursor:pointer;padding:4px 0}
.cfg-chip label{font-size:12px;color:var(--ink-muted);display:flex;align-items:center;gap:4px;white-space:nowrap}
.cfg-chip .x{font:inherit;font-size:12px;border:1px solid var(--line-strong);border-radius:6px;background:transparent;color:var(--ink-muted);cursor:pointer;padding:2px 6px}
.cfg-tools{margin-top:10px;font-size:13px}
.cfg-tools select{font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink);max-width:100%}
.cmp{margin-bottom:var(--s3)}
.cmp-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.ba.cmp{aspect-ratio:800/520;background:var(--surface-raised);border:1px solid var(--line)}
.ba.cmp .layer svg{display:block;width:100%;height:100%}
.ba.cmp.photo{background:#e7e3db}
.ba.cmp.photo .layer.before img{width:100%;height:100%;object-fit:contain;display:block}
.ba.cmp.photo .cmp-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--ink-muted);font-size:14px}
.ba.cmp.photo .cmp-drag{position:absolute;inset:0;transform-origin:center center;cursor:move}
.ba.cmp.photo input[type=range]{display:none}
.cmp-photo-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:8px;font-size:13px}
.cmp-photo-tools label{display:flex;align-items:center;gap:6px}
.cfg-dlg{position:fixed;inset:0;z-index:9500;background:rgba(20,18,14,.55);overflow:auto;padding:24px}
.cfg-dlg[hidden]{display:none}
.cfg-dlg-in{background:var(--surface);border-radius:var(--r-card);max-width:1400px;margin:0 auto;padding:20px 24px;color:var(--ink)}
.cfg-grid{display:grid;gap:16px}
.cfg-grid.cols1{grid-template-columns:1fr}.cfg-grid.cols2{grid-template-columns:1fr 1fr}.cfg-grid.cols3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.cfg-grid.cols3,.cfg-grid.cols2{grid-template-columns:1fr}}
.cfg-cell{border:1px solid var(--line);border-radius:var(--r-card);padding:12px;break-inside:avoid}
.cfg-cell h3{margin:0 0 6px;font-family:var(--f-display);font-size:20px}
.cfg-cell .pic svg{width:100%;height:auto;display:block}
.cfg-cell .range{font-weight:700;margin:8px 0 4px}.cfg-cell .range span{font-weight:400;color:var(--ink-muted);font-size:12px}
.cfg-cell p{font-size:13px;margin:0;color:var(--ink-muted)}
.cfg-foot{font-size:11px;color:var(--ink-muted);margin:14px 0 0;text-align:center}
@media print{body.cfg-grid-open > *:not(.cfg-dlg){display:none!important}.cfg-dlg{position:static;background:none;padding:0}.cfg-dlg-in{max-width:none;padding:0}.no-print{display:none!important}.cfg-grid.cols3{grid-template-columns:1fr 1fr}}
.order-chips{display:flex;flex-wrap:wrap;gap:8px}
.build-type{margin-bottom:var(--s4)}.build-type .seg button{font-size:15px;padding:10px 16px}.build-type .note{margin:10px 0 0;font-size:14px;color:var(--ink-muted)}
.bench[hidden]{display:none}
.stage.lab-stage{position:static;max-width:960px;margin:0 auto}.lab-stage .canvas{aspect-ratio:900/560}
.lab-grid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.4fr);gap:var(--s6);align-items:start;margin-top:var(--s6);padding-bottom:var(--s10)}@media (max-width:900px){.lab-grid{grid-template-columns:1fr}}
.lab-col{display:grid;gap:var(--s4)}
.acard{border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;margin-top:10px;background:var(--surface)}.acard.off{opacity:.65}.acard-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.acard-head b{font-family:var(--f-display);font-size:18px}.acard-head .count{display:inline-flex;align-items:center;gap:6px;margin-left:auto}.acard-head .count button{font:inherit;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;font-size:18px;line-height:1}.acard-head .count output{min-width:1.4em;text-align:center;font-weight:700}.acard-head .count i{font-style:normal;color:var(--ink-muted);font-size:13px}.acard h5{margin-top:12px}.acard .prefs{display:grid;gap:6px}.acard .prefs label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}.acard .prefs select{font:inherit;font-size:13px;font-weight:400;flex:1;padding:6px 8px;border-radius:var(--r-btn);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}.acard-result{margin:10px 0 0;font-size:13px}
.advice{list-style:none;margin:0;padding:0;display:grid;gap:8px}.advice li{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:14px;line-height:1.4}.advice li button{flex:0 0 auto}
.order-chips button{font:inherit;font-family:var(--f-body);font-size:13px;font-weight:600;padding:6px 10px;border-radius:var(--r-card);border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.stage{position:sticky;top:calc(72px + env(safe-area-inset-top,0px) + 12px)}
@media (max-width:900px){.stage{position:static}}
.canvas{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-card);padding:8px;aspect-ratio:800/520;max-width:100%}
.canvas svg{display:block;width:100%;height:100%}
nav.main a,header.top .cta{white-space:nowrap}
@media (max-width:1380px){nav.main{gap:var(--s4)}nav.main a{font-size:13px}}
@media (max-width:1180px){nav.main{gap:12px}nav.main a{font-size:12.5px;letter-spacing:0}}
.grid.four{grid-template-columns:repeat(4,1fr);gap:var(--s6)}
@media (max-width:1000px){.grid.four{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid.four{grid-template-columns:1fr}}
.viewbar{display:flex;align-items:center;gap:10px;margin-top:8px;font-family:var(--f-label);font-size:12px;color:var(--ink-muted)}
.viewbar button{font:inherit;font-family:var(--f-body);font-size:13px;font-weight:500;padding:6px 10px;border-radius:var(--r-btn);border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
.viewbar input{flex:1;min-width:80px;accent-color:var(--accent)}
.viewbar .vlab{min-width:150px;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:600px){.viewbar{flex-wrap:wrap}.viewbar .vlab{min-width:0;flex:1 1 100%;text-align:left}}
.spec{margin-top:14px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:start}
@media (max-width:600px){.spec{grid-template-columns:1fr}}
.spec .desc{font-size:15px;line-height:1.5;margin:0}
.spec .price{text-align:right}
@media (max-width:600px){.spec .price{text-align:left}}
.spec .price b{display:block;font-family:var(--f-display);font-weight:var(--d-weight);font-size:26px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.spec .price small{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin-top:4px}
.spec details{grid-column:1/-1;font-size:14px}
.spec .notes{grid-column:1/-1;margin:0}
.spec tbody tr{cursor:pointer}
.spec tbody tr:hover td{background:var(--surface)}
.spec tr.x td{text-decoration:line-through;color:var(--ink-muted)}
.spec tr.x.dep td{opacity:.7}
.spec .whatif{font-size:13px;color:var(--ink-muted);margin:8px 0 0}
.spec .whatif a{color:var(--accent-ink);font-weight:600}
.spec .price .tag{display:inline-block;font-family:var(--f-label);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#a56a1c;border:1px solid #a56a1c;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle}
.spec .notes:empty{display:none}
.order-sum{display:flex;flex-direction:column;gap:2px;font-size:13px;grid-column:1/-1}
.order-sum span{color:var(--ink-muted)}
.order-sum i{font-style:normal;font-family:var(--f-label);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#a56a1c}
#order-items button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.spec summary{cursor:pointer;color:var(--accent-ink);font-weight:600}
.spec table{width:100%;border-collapse:collapse;margin-top:8px}
.spec td{padding:4px 0;border-top:1px solid var(--line)}
.spec td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.spec .act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.send{margin-top:14px;background:var(--surface-raised);border:1px solid var(--line-strong);border-radius:var(--r-card);padding:18px}
.send form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.send .full{grid-column:1/-1}
@media (max-width:600px){.send form{grid-template-columns:1fr}}
.send label{display:flex;flex-direction:column;gap:4px;font-family:var(--f-label);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.send input,.send textarea{font:inherit;font-family:var(--f-body);font-size:15px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-card);padding:10px 12px;width:100%}
.send textarea{min-height:96px;resize:vertical}
.ok{border:1px solid var(--line-strong);border-radius:var(--r-card);padding:12px 14px;background:var(--surface);font-size:14px}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s6)}
@media (max-width:820px){.minis{grid-template-columns:1fr 1fr}}
.minis.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.minis.four{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.minis.four{grid-template-columns:1fr}}
@media (max-width:520px){.minis{grid-template-columns:1fr}}
.mini{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.mini .pic{aspect-ratio:4/3;max-width:100%;padding:6px}
.mini .pic svg{display:block;width:100%;height:100%}
.mini .t{padding:12px 16px 16px;border-top:1px solid var(--line)}
.mini h3{font-family:var(--f-display);font-weight:var(--d-weight);font-size:18px;margin:0 0 4px}
.mini p{margin:0;font-size:14px;color:var(--ink-muted)}
/* living page */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8)}
@media (max-width:760px){.pair{grid-template-columns:1fr}}
.pair > div{border-top:2px solid var(--ink);padding-top:var(--s4)}
.pair h3{font-family:var(--f-display);font-weight:var(--d-weight);font-size:22px;margin:0 0 var(--s3)}
.pair ul{margin:0;padding-left:1.2em;color:var(--ink-muted)}
.pair li{margin-bottom:var(--s2)}
.binder{background:var(--accent-soft);border-radius:var(--r-card);padding:var(--s8);display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s8);align-items:center}
@media (max-width:820px){.binder{grid-template-columns:1fr}}
.binder ol{margin:0;padding-left:1.2em}
.binder li{margin-bottom:var(--s2)}
.notice .look{color:inherit;text-transform:none;letter-spacing:0}
.notice .look select{padding:3px 8px;border-radius:var(--r-btn);border:1px solid var(--ink-on-inverse);background:var(--surface-inverse);color:var(--ink-on-inverse);font:inherit;font-size:12px}
.notice .look a{color:inherit;margin-left:8px}
/* looks page */
.lookcard{border-top:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--f-body)}
.lookcard .lk-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);align-items:baseline;padding-block:var(--s4)}
.lookcard .lk-head b{font-family:var(--f-label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.lookcard .lk-head span{font-size:14px;color:var(--ink-muted)}
.lookcard .hero{padding-block:var(--s6) var(--s8)}
.lookcard .swatches{display:flex;gap:6px;flex-wrap:wrap}
.lookcard .swatches i{display:inline-block;width:22px;height:22px;border-radius:var(--r-btn);border:1px solid var(--line-strong)}
.lookcard .lk-foot{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;padding-block:0 var(--s8)}
/* look switcher in the footer */
.look{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--f-label);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.look select{font:inherit;text-transform:none;letter-spacing:0;font-size:13px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--surface-raised);color:var(--ink)}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8)}
@media (max-width:760px){.ex-grid{grid-template-columns:1fr}}
.ex{display:block;text-decoration:none;color:inherit;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s6)}
.ex:hover{border-color:var(--line-strong)}
.ex b{display:block;font-family:var(--f-display);font-weight:var(--d-weight);font-size:24px;margin-bottom:var(--s2)}
.ex p{margin:0;color:var(--ink-muted);font-size:15px}
.ex .n{font-family:var(--f-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:var(--s2)}

/* admin: review notes (suggestions only) */
.adm-bar{position:fixed;right:12px;bottom:12px;z-index:9000;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface-raised);border:1px solid var(--line-strong);border-radius:var(--r-card);box-shadow:0 8px 28px rgba(0,0,0,.18);font-family:var(--f-label);font-size:12px;color:var(--ink)}
.adm-bar button,.adm-bar a{font:inherit;font-family:var(--f-body);font-size:13px;font-weight:600;padding:6px 10px;border-radius:var(--r-btn);border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.adm-bar button[aria-pressed="true"]{background:#c9862b;border-color:#c9862b;color:#fff}
.adm-bar .adm-count{color:var(--ink-muted);white-space:nowrap}
.adm-bar .adm-who{font-weight:700;white-space:nowrap}
body.adm-mode *:not(.adm-bar):not(.adm-bar *):not(.adm-panel):not(.adm-panel *){cursor:crosshair!important}
.adm-hover{outline:2px solid #c9862b!important;outline-offset:2px;box-shadow:0 0 0 6px rgba(201,134,43,.18)!important}
.adm-noted{outline:2px dashed #c9862b!important;outline-offset:2px}
.adm-panel{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);z-index:9001;width:min(520px,calc(100vw - 24px));background:var(--surface-raised);border:1px solid var(--line-strong);border-radius:var(--r-card);box-shadow:0 12px 40px rgba(0,0,0,.25);padding:14px 16px;font-size:14px;color:var(--ink)}
.adm-panel h4{margin:0 0 6px;font-family:var(--f-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.adm-panel .adm-path{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--ink-muted);word-break:break-all;margin:0 0 4px}
.adm-panel .adm-snip{font-style:italic;color:var(--ink-muted);margin:0 0 10px}
.adm-panel select,.adm-panel textarea{font:inherit;font-size:14px;width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);margin-bottom:8px}
.adm-panel textarea{min-height:80px;resize:vertical}
.adm-panel .adm-acts{display:flex;gap:8px;justify-content:flex-end}
.adm-panel .adm-acts button{font:inherit;font-size:13px;font-weight:600;padding:7px 12px;border-radius:var(--r-btn);border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.adm-panel .adm-acts button.primary{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.adm-list{list-style:none;margin:0;padding:0}
.adm-list li{border-top:1px solid var(--line);padding:10px 0;display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14px}
.adm-list li b{font-family:var(--f-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a56a1c}
.adm-list li .adm-who{font-weight:700}
.adm-list li .adm-path{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--ink-muted);word-break:break-all}
.adm-list li .adm-snip{font-style:italic;color:var(--ink-muted)}
.adm-list li .adm-pend{font-family:var(--f-label);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a56a1c}
.adm-list li button{font:inherit;font-size:12px;padding:4px 8px;border-radius:var(--r-btn);border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;align-self:start}
.adm-gate{max-width:520px}
.adm-gate input[type=password],.adm-gate input[type=text],.adm-users input[type=password],.adm-users input[type=text],.adm-users select{font:inherit;font-size:16px;width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);margin:6px 0 12px}
.adm-gate code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--surface-raised);border:1px solid var(--line);border-radius:6px;padding:8px 10px;display:block;word-break:break-all;margin:8px 0}
.adm-msg{color:#a56a1c;font-size:14px;min-height:1.4em}
.adm-mode-note{font-size:13px;color:var(--ink-muted);border:1px dashed var(--line-strong);border-radius:8px;padding:8px 10px;margin:0 0 14px}
.adm-users ul{list-style:none;margin:0 0 10px;padding:0}
.adm-users li{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid var(--line);padding:6px 0;font-size:14px}
.adm-users li button{font:inherit;font-size:12px;padding:3px 8px;border-radius:var(--r-btn);border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.adm-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.adm-filters button{font:inherit;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.adm-filters button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.tenant-quote{display:block;margin-top:6px;font-size:13px;color:var(--ink-muted)}.tenant-quote b{color:var(--ink)}.tenant-quote.drift{color:#b3261e}.tenant-quote.away{opacity:.8}