/* Berg shared UI — tokens, nav, buttons, reveals + the shared page primitives. Generated from index.html; keep in sync.
   Linked by about.html, residences.html, and the shop/portal/crew pages (solar, roof, portal, crew) together with /assets/ui.js.

   S5 (2026-11-04) — what is new, all of it inside `@layer ui` so a page's own unlayered <style> rules always win
   (pages that still carry their own copies of these rules render exactly as before):
     tokens    :root --bg --card --sub --mute (#707070, reconciled with index.html/residences.html) --mute-lg --accent-text --good --ease
     reset     * a button [hidden] :focus-visible
     layout    body .wrap (max-width 1120px, 16px gutters)
     type      h1 h1 .g h2 h2 .g h3 .eyebrow .lead .note .note a
     blocks    .card .facts .facts b .facts small .facts span .out .out div .out span .out b .out div.big .out div.good
     controls  .seg .seg button .seg button small .seg button[aria-pressed] .opt .opt .ck .opt[aria-pressed]
     forms     .field .field > span .field small .input (.field input/select/textarea) input[type=range]
     feedback  .toast .toast.on (driven by BergUI.say) .pbadge (the "placeholder" price badge)
     footer    footer
   unlayered  .btn:disabled .btn.wide (next to .btn, outside the layer, so a disabled button never takes the :hover lift)
   nav.scrolled .in now uses the home page's tint rgba(247,247,245,.82); nav.dark (home film sections) added.
   JS pair: /assets/ui.js exposes window.BergUI = {say, countTo, fmt$, fetchJSON}. Shop-only classes (.shop .steps .tile .swatch
   .offset .weeks .summary .pricebar …) live in /shop/shop.css, which loads after this file. */
:root{--bg:#f7f7f5;--card:#ffffff;--ink:#111111;--mute:#707070;--mute-lg:#858585;--sub:#66665f;--line:#e6e6e3;--accent:#FF4B00;--accent-text:#C63A00;--good:#1B7F4C;--ease:cubic-bezier(.2,.7,.2,1)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:12px 22px;border-radius:999px;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s,border-color .25s;will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:0 4px 12px -6px rgba(0,0,0,.4);transition-duration:.08s}
.btn.ghost{background:transparent;color:var(--ink);border-color:#d6d6d2}.btn.ghost:hover{border-color:var(--ink);background:#fff}
.btn.accent{background:var(--accent);border-color:var(--accent)}.btn.accent:hover{box-shadow:0 16px 34px -12px rgba(255,75,0,.6)}
.btn.sm{padding:9px 16px;font-size:13px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn.wide{width:100%}
.btn .rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rp .6s var(--ease) forwards;pointer-events:none;z-index:-1}
.btn.ghost .rp{background:rgba(0,0,0,.08)}
@keyframes rp{to{transform:scale(2.6);opacity:0}}
.btn .ar{width:16px;height:16px;transition:transform .35s var(--ease)}.btn:hover .ar{transform:translateX(3px)}
.glow{display:inline-block;position:relative}
.glow::before{content:"";position:absolute;left:12%;right:12%;bottom:-6px;height:16px;border-radius:50%;background:linear-gradient(90deg,#ffcf5a,#ff8a4c,#ff4b00,#ffb36b);filter:blur(10px);opacity:.8;transition:.35s var(--ease);z-index:0}
.glow:hover::before{opacity:1;filter:blur(13px);bottom:-9px;left:6%;right:6%}
.glow .btn{position:relative;z-index:1}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,36px);padding:26px 16px 0;font-size:13.5px;transition:padding .4s var(--ease)}
nav .in{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);padding:8px 10px 8px 16px;border-radius:999px;border:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s}
nav.scrolled{padding-top:12px}
nav.scrolled .in{background:rgba(247,247,245,.82);border-color:var(--line);box-shadow:0 10px 30px -18px rgba(0,0,0,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
nav .brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;letter-spacing:-.01em;margin-right:6px}
nav .brand i{width:18px;height:18px;border-radius:5px;background:var(--accent);display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700;font-size:11px;transition:transform .4s var(--ease)}
nav .brand:hover i{transform:rotate(-8deg) scale(1.08)}
nav a.l{color:#3a3a3a;position:relative;padding:4px 0;transition:color .2s}
nav a.l::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
nav a.l:hover{color:#000}nav a.l:hover::after{transform:scaleX(1)}
nav .pill{background:#111;color:#fff;padding:9px 18px;border-radius:999px;font-weight:500;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
nav .pill:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
nav.dark .in{background:rgba(17,17,17,.72);border-color:#2a2a2a;box-shadow:none}nav.dark .brand{color:#fff}nav.dark a.l{color:#c9c9c5}nav.dark a.l:hover{color:#fff}nav.dark a.l::after{background:#fff}nav.dark .pill{background:#fff;color:#111}


[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}
@media (max-width:760px){nav{padding:14px 12px 0}nav .in{gap:10px;padding:6px 6px 6px 12px}nav a.l{display:none}}

/* ---------- shared page primitives (S5) — lifted from index/about/residences/report; a page's own rules win ---------- */
@layer ui{
/* reset */
*{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}

/* layout */
body{background:var(--bg);color:var(--ink);font-family:"Manrope",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* type */
h1{font-weight:500;letter-spacing:-.035em;line-height:1.04;font-size:clamp(34px,4.6vw,62px)}
h1 .g{display:block;color:var(--mute-lg)}
h2{font-weight:500;letter-spacing:-.03em;font-size:clamp(26px,2.8vw,40px)}
h2 .g{color:var(--mute-lg)}
h3{font-weight:600;font-size:17px}
.eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);font-weight:700}
.lead{color:var(--sub);font-size:15.5px;line-height:1.55;max-width:62ch}
.note{color:var(--sub);font-size:12.5px;line-height:1.5}
.note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* blocks */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.facts b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);font-weight:700;margin-bottom:4px}
.facts small{display:block;color:var(--sub);font-size:12.5px}
.facts span{font-size:15px}
.out{display:grid;gap:0;border-top:1px solid var(--line)}
.out div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.out span{color:var(--sub);font-size:14px}.out b{font-weight:600;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.out div.big b{font-size:clamp(30px,3vw,44px);font-weight:500;letter-spacing:-.035em}
.out div.good b{color:var(--good)}

/* controls */
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;color:#3a3a3a;font-family:inherit;font-weight:600;font-size:12.5px;padding:6px 11px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.seg button small{font-weight:500;color:var(--mute);margin-left:4px}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg button[aria-pressed="true"] small{color:#d4d4d0}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:1px solid #e4e4e0;background:var(--bg);border-radius:16px;padding:15px 16px;min-height:58px;font:inherit;font-size:14.5px;font-weight:500;line-height:1.3;color:var(--ink);cursor:pointer;transition:transform .3s var(--ease),border-color .2s,box-shadow .3s var(--ease),background .25s,color .25s}
.opt:hover{border-color:#111;background:#fff;transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(0,0,0,.4)}
.opt:active{transform:translateY(0) scale(.985)}
.opt .ck{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #cfcfca;display:grid;place-items:center;color:#fff;transition:background .25s,border-color .25s,transform .3s var(--ease)}.opt .ck svg{width:12px;height:12px;opacity:0;transition:opacity .2s}
.opt[aria-pressed="true"]{background:#111;color:#fff;border-color:#111}.opt[aria-pressed="true"] .ck{background:var(--accent);border-color:var(--accent);transform:scale(1.08)}.opt[aria-pressed="true"] .ck svg{opacity:1}

/* forms */
.field{display:grid;gap:6px}
.field > span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);font-weight:700}
.field small{color:var(--sub);font-size:12px;line-height:1.45}
.input,.field input:not([type=range]):not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid #e2e2de;border-radius:12px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .3s var(--ease)}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#111;box-shadow:0 10px 24px -18px rgba(0,0,0,.4)}
.input::placeholder,.field input::placeholder,.field textarea::placeholder{color:#8f8f8a}
.field textarea{min-height:96px;resize:vertical}
input[type=range]{-webkit-appearance:none;width:100%;height:2px;background:#d9d9d5;border-radius:2px;outline:none;margin:10px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#111;border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.25);cursor:pointer;transition:transform .2s var(--ease)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#111;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.25);cursor:pointer}

/* feedback */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:#111;color:#fff;padding:12px 18px;border-radius:999px;font-size:13.5px;opacity:0;transition:opacity .3s,transform .4s var(--ease);z-index:30;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.pbadge{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#8a4b00;background:#fff3e0;border:1px solid #f3d3a6;padding:3px 8px;border-radius:999px;vertical-align:middle;white-space:nowrap;line-height:1.2}

footer{border-top:1px solid var(--line);padding:26px 16px 44px;color:#6f6f6a;font-size:12.5px;text-align:center;line-height:1.7}

@media (prefers-reduced-motion:reduce){.toast,.opt,.opt .ck,.seg button,.input{transition:none}}
}