/* ══════════════════════════════════════════════════════════════════
   MARBULL — shared brand system
   Two surfaces:
     .surface-dark  → the trade side (landing, contractor console)
     .surface-light → the consumer side (homeowner, stone library)
   Both draw from one palette so the brand reads as one thing.
   ══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* core stone palette — shared by both surfaces */
  --stone-warm:#c9a96e;
  --stone-warm-dk:#9c7e44;
  --gold:#e0b04a;
  --rust:#b8543a;
  --moss:#7a8a4a;
  --red:#d04230;
  --green:#6b8e3f;

  --radius:0px;          /* Marbull is squared-off — stone, not software */
  --wrap:1380px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ── DARK SURFACE (trade) ─────────────────────────────────────── */
.surface-dark{
  --bg:#0e0d0b;
  --bg-2:#161410;
  --panel:#1c1915;
  --panel-2:#221e19;
  --line:#2a251e;
  --line-2:#3a3429;
  --ink:#f4ede0;
  --ink-2:#e8dcc4;
  --ink-dim:#a89e8c;
  --ink-faint:#6b6354;
  --cream:#ede5d4;
  --vein:rgba(216,201,168,.08);
}

/* ── LIGHT SURFACE (consumer) ─────────────────────────────────── */
.surface-light{
  --bg:#faf7f1;
  --bg-2:#f2ece1;
  --panel:#ffffff;
  --panel-2:#f7f3ea;
  --line:#e3dbcb;
  --line-2:#cdc2ac;
  --ink:#231f19;
  --ink-2:#3d372d;
  --ink-dim:#6f6656;
  --ink-faint:#9a9081;
  --cream:#f2ece1;
  --vein:rgba(58,52,41,.06);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter Tight',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

.serif{font-family:'Montserrat',system-ui,sans-serif;font-weight:500}
.serif-it{font-family:'Montserrat',system-ui,sans-serif;font-style:italic;font-weight:400}
.sc{font-family:'Inter Tight',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 36px}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 36px}

.eyebrow{
  font-family:'Inter Tight',system-ui,sans-serif;font-size:10.5px;
  letter-spacing:.28em;color:var(--stone-warm-dk);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
;font-weight:600}
.surface-dark .eyebrow{color:var(--stone-warm)}
.eyebrow::before{content:'';width:24px;height:1px;background:currentColor;opacity:.7}

h1,h2,h3,h4{font-family:'Montserrat',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.02}
h1 em,h2 em,h3 em{font-style:normal;color:var(--stone-warm-dk);font-weight:800}
.surface-dark h1 em,.surface-dark h2 em,.surface-dark h3 em{color:var(--stone-warm)}

/* ── NAV ───────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;
  padding:16px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.brand{font-family:'Montserrat',system-ui,sans-serif;font-size:26px;font-weight:600;letter-spacing:-.02em;flex-shrink:0}
.brand em{font-style:italic;color:var(--stone-warm-dk);font-weight:400}
.brand img{height:34px;width:auto;display:block}
.nav .brand{display:flex;align-items:center}
.surface-dark .brand img,.auth-aside .brand img{content:url('/assets/logo-horizontal-white.png')}
@media (max-width:640px){.brand img{height:28px}}
.surface-dark .brand em{color:var(--stone-warm)}
.brand-sub{font-family:'Inter Tight',system-ui,sans-serif;font-size:9.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink-faint);text-align:center;margin-top:3px;white-space:nowrap;font-weight:600}
.nav>div:first-child{display:inline-flex;flex-direction:column;align-items:center}
.nav>div:first-child .brand{width:100%;justify-content:center}
.nav-links{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.nav-links a{font-size:13px;color:var(--ink-dim);transition:color .2s var(--ease);font-weight:500}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-right{display:flex;gap:10px;align-items:center;flex-shrink:0}

.nav-cta{
  background:transparent;color:var(--ink);border:1px solid var(--line-2);
  padding:9px 18px;font-family:'Inter Tight',system-ui,sans-serif;font-size:11px;letter-spacing:.18em;
  cursor:pointer;text-transform:uppercase;transition:all .2s var(--ease);white-space:nowrap;
;font-weight:600}
.nav-cta:hover{background:var(--stone-warm);color:#0e0d0b;border-color:var(--stone-warm)}
.nav-cta.primary{background:var(--stone-warm);color:#0e0d0b;border-color:var(--stone-warm);font-weight:600}
.nav-cta.primary:hover{background:var(--gold)}

/* logged-in chip */
.acct-chip{
  display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;
  border:1px solid var(--line-2);cursor:pointer;transition:border-color .2s var(--ease);
}
.acct-chip:hover{border-color:var(--stone-warm)}
.acct-av{
  width:26px;height:26px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--stone-warm),var(--stone-warm-dk));
  color:#0e0d0b;font-weight:700;font-size:11px;font-family:'JetBrains Mono',monospace;
}
.acct-meta{line-height:1.15;text-align:left}
.acct-name{font-size:12px;font-weight:600;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-role{font-family:'Inter Tight',system-ui,sans-serif;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-warm-dk);font-weight:600}
.surface-dark .acct-role{color:var(--stone-warm)}

.acct-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:200px;z-index:70;
  background:var(--panel);border:1px solid var(--line-2);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.acct-menu a,.acct-menu button{
  display:block;width:100%;text-align:left;padding:11px 16px;font-size:13px;
  background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;
  color:var(--ink-dim);transition:background .15s var(--ease),color .15s var(--ease);
}
.acct-menu a:hover,.acct-menu button:hover{background:var(--panel-2);color:var(--ink)}
.acct-menu :last-child{border-bottom:0}

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;font-family:'Inter Tight',system-ui,sans-serif;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  transition:all .2s var(--ease);border:1px solid transparent;font-weight:600;
}
.btn-primary{background:var(--stone-warm);color:#0e0d0b}
.btn-primary:hover{background:var(--gold);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-secondary:hover{border-color:var(--stone-warm);color:var(--stone-warm-dk)}
.surface-dark .btn-secondary:hover{color:var(--stone-warm)}
.btn-sm{padding:10px 18px;font-size:11px;letter-spacing:.18em}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn .arr{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ── FORM FIELDS ───────────────────────────────────────────────── */
.field{display:block;margin-bottom:16px}
.field-label{
  display:block;font-family:'Inter Tight',system-ui,sans-serif;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px;
;font-weight:600}
.input{
  width:100%;padding:13px 14px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line-2);font-size:14px;transition:border-color .2s var(--ease);
}
.input:focus{outline:none;border-color:var(--stone-warm)}
.input::placeholder{color:var(--ink-faint)}
select.input{cursor:pointer}
textarea.input{resize:vertical;min-height:90px;font-family:inherit}

/* ── STONE SWATCHES (CSS-generated — no photography) ───────────── */
.sw{position:relative;overflow:hidden;background:var(--panel-2)}
.sw::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(112deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(58deg,rgba(0,0,0,.045) 0 1px,transparent 1px 7px);
  mix-blend-mode:overlay;
}
.sw-veins{position:absolute;inset:0;width:100%;height:100%;opacity:.55}

/* ── FOOTER ────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:60px 0 34px;margin-top:80px;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:44px}
.foot-tag{color:var(--ink-dim);font-size:13.5px;max-width:330px;margin-top:12px;line-height:1.6}
.foot-h{
  font-family:'Inter Tight',system-ui,sans-serif;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--stone-warm-dk);margin-bottom:14px;
;font-weight:600}
.surface-dark .foot-h{color:var(--stone-warm)}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-dim);padding:5px 0;transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--ink)}
.foot-base{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-faint);
}

/* ── TOAST ─────────────────────────────────────────────────────── */
.toast-wrap{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{
  background:var(--panel);border:1px solid var(--stone-warm);color:var(--ink);
  padding:13px 22px;font-size:13.5px;box-shadow:0 14px 40px rgba(0,0,0,.3);
  animation:toast-in .25s var(--ease);
}
.toast.err{border-color:var(--red)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── UTILITIES ─────────────────────────────────────────────────── */
.tag{
  display:inline-block;padding:4px 10px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--ink-dim);
}
.tag.warm{border-color:var(--stone-warm);color:var(--stone-warm-dk)}
.surface-dark .tag.warm{color:var(--stone-warm)}
.muted{color:var(--ink-dim)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:680px){
  .wrap,.wrap-narrow{padding:0 22px}
  .nav{padding:14px 22px;flex-wrap:wrap}
  .nav-links{display:none}
  .foot-grid{grid-template-columns:1fr}
}