/* ============================================================
   BuilderPace Data Room — shared styles
   Spike shell (teal chrome) + BuilderPace real brand (content)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}

/* ---------- SPIKE WRAPPER + BP TOP NAV (mall frame + store nav) ---------- */
:root{ --spike-h:38px; --bpnav-h:70px; --top-h:108px; --spike-ink:#16211f; }

/* Slim Spike wrapper bar (the mall frame) */
.spike-bar{position:fixed;top:0;left:0;right:0;height:var(--spike-h);z-index:60;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  background:linear-gradient(180deg,#557b78,#456b68);border-bottom:1px solid rgba(0,0,0,.18);
  font-family:'Chakra Petch',sans-serif;color:var(--spike-ink)}
.spike-bar .l{display:flex;align-items:center;gap:14px}
.spike-bar .swm{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--spike-ink)}
.spike-bar .crumb{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(15,30,30,.55);font-weight:600}
.spike-bar .crumb b{color:var(--spike-ink)}
.spike-bar .crumb a{color:rgba(15,30,30,.62);text-decoration:none;transition:color .15s}
.spike-bar .crumb a:hover{color:var(--spike-ink)}
.spike-bar .r{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(15,30,30,.6);font-weight:600}
.spike-bar .exit{border:1px solid rgba(15,30,30,.35);padding:4px 11px;color:var(--spike-ink);transition:.2s}
.spike-bar .exit:hover{background:var(--spike-ink);color:#cfe0dc}
@media(max-width:600px){.spike-bar .crumb,.spike-bar .clk{display:none}}

/* BuilderPace top nav (the store's own brand) */
.bp-nav{position:fixed;top:var(--spike-h);left:0;right:0;height:var(--bpnav-h);z-index:55;
  display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,48px);
  background:#faf8f4;border-bottom:1px solid rgba(26,26,26,.12)}
.bp-nav .brandmark{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:#1a1a1a;letter-spacing:-.01em}
.bp-nav .brandmark .pace{font-style:italic;color:#c9a227;font-weight:500}
.bp-nav .brandmark .dot{color:#c9a227}
.bp-nav .links{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px)}
.bp-nav .links a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8b8882;font-weight:600;position:relative;padding:6px 0;transition:color .18s}
.bp-nav .links a:hover{color:#1a1a1a}
.bp-nav .links a.active{color:#1a1a1a}
.bp-nav .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:#c9a227}
.bp-nav .right{display:flex;align-items:center;gap:18px}
.bp-nav .cta{background:#1a1a1a;color:#faf8f4;font-size:12px;font-weight:500;letter-spacing:.03em;padding:11px 20px;border-radius:100px;transition:.2s;white-space:nowrap}
.bp-nav .cta:hover{background:#0c2742}
.bp-nav .menu-btn{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:4px;padding:6px}
.bp-nav .menu-btn span{width:22px;height:2px;background:#1a1a1a;transition:.2s}

/* full-width content below both bars */
.stage{margin-top:var(--top-h)}

@media(max-width:820px){
  .bp-nav .links{position:fixed;top:var(--top-h);left:0;right:0;flex-direction:column;align-items:flex-start;
    background:#faf8f4;border-bottom:1px solid rgba(26,26,26,.12);padding:6px 0;gap:0;display:none;
    box-shadow:0 20px 30px -20px rgba(26,26,26,.3)}
  body.navopen .bp-nav .links{display:flex}
  .bp-nav .links a{padding:15px clamp(20px,5vw,48px);width:100%}
  .bp-nav .links a.active::after{display:none}
  .bp-nav .links a.active{color:#a9781f}
  .bp-nav .cta{display:none}
  .bp-nav .menu-btn{display:flex}
}

/* ---------- BUILDERPACE BRAND (the store) ---------- */
.bp{
  --cream:#faf8f4;--cream2:#f1ece2;--card:#fffdf8;
  --ink:#1a1a1a;--ink-soft:#4c4a45;--muted:#8b8882;
  --gold:#c9a227;--gold-deep:#a9781f;--navy:#0c2742;
  --line:rgba(26,26,26,.12);--line2:rgba(26,26,26,.07);
  background:var(--cream);color:var(--ink);min-height:calc(100vh - var(--top-h));
  font-family:'Inter',sans-serif}
.bp .serif{font-family:'Cormorant Garamond',Georgia,serif}
.bp .eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.bp h1,.bp h2,.bp h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-.005em;color:var(--ink);line-height:1.05}
.bp p{color:var(--ink-soft);font-weight:300;line-height:1.65}
.bp b,.bp strong{color:var(--ink);font-weight:600}
.bp .navy{color:var(--navy)}
.bp .gold{color:var(--gold-deep)}

.bp .btn{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;
  padding:14px 26px;border-radius:100px;cursor:pointer;transition:.22s;border:1px solid transparent}
.bp .btn.p{background:var(--ink);color:var(--cream)}
.bp .btn.p:hover{background:var(--navy);transform:translateY(-1px)}
.bp .btn.g{background:transparent;color:var(--ink);border-color:var(--line)}
.bp .btn.g:hover{border-color:var(--ink)}

/* hero (data-room header) */
.bp .dr-hero{padding:82px 7vw 64px;background:linear-gradient(180deg,var(--cream2),var(--cream));border-bottom:1px solid var(--line)}
.bp .dr-hero .wordmark{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(52px,9vw,104px);line-height:.92;letter-spacing:-.02em;margin:18px 0 0}
.bp .dr-hero .wordmark .pace{font-style:italic;color:var(--gold);font-weight:500}
.bp .dr-hero .wordmark .dot{color:var(--gold);font-style:normal}
.bp .dr-hero .tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(22px,3.2vw,34px);color:var(--ink-soft);margin-top:22px;font-weight:400}
.bp .dr-hero .desc{margin-top:22px;max-width:56ch;font-size:16px;color:var(--ink-soft)}

/* stat strip */
.bp .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;margin-top:40px;background:var(--card)}
.bp .stat{padding:22px 24px;border-right:1px solid var(--line)}
.bp .stat:last-child{border-right:0}
.bp .stat .n{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;color:var(--ink)}
.bp .stat .n span{color:var(--gold-deep)}
.bp .stat .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
@media(max-width:720px){.bp .stats{grid-template-columns:repeat(2,1fr)}.bp .stat:nth-child(2){border-right:0}}

/* document cards (Her Home style) */
.bp .dr-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:64px 7vw 40px}
@media(max-width:900px){.bp .dr-cards{grid-template-columns:1fr;max-width:520px}}
.bp .dr-card{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--card);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.bp .dr-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px -24px rgba(26,26,26,.28);border-color:rgba(26,26,26,.22)}
.bp .dr-card .tile{position:relative;height:190px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#f6f1e7,#efe8db);border-bottom:1px solid var(--line)}
.bp .dr-card .tile .mono{font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:600;color:var(--ink)}
.bp .dr-card .num{position:absolute;top:16px;left:18px;font-size:11px;letter-spacing:.24em;color:var(--gold-deep);font-weight:600}
.bp .dr-card.dark .tile{background:linear-gradient(150deg,#20201d,#141412)}
.bp .dr-card.dark .tile .mono{color:var(--cream)}
.bp .dr-card .body{padding:26px 26px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.bp .dr-card .body h3{font-size:26px;font-weight:600}
.bp .dr-card .body p{font-size:14px;color:var(--ink-soft);flex:1}
.bp .dr-card .open{margin-top:6px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;display:flex;align-items:center;gap:9px}
.bp .dr-card .open svg{transition:transform .28s}
.bp .dr-card:hover .open svg{transform:translateX(6px)}
.bp .dr-card .stretch{position:absolute;inset:0;z-index:2}

/* generic sub-page content */
.bp .page{padding:70px 7vw 80px;max-width:1100px}
.bp .page .eyebrow{margin-bottom:16px}
.bp .page h1.title{font-size:clamp(38px,6vw,64px);font-weight:600;letter-spacing:-.02em}
.bp .page .sub{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:60ch;margin-top:16px;font-weight:300}
.bp .backlink{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:28px}
.bp .backlink:hover{color:var(--ink)}

/* footer */
.bp .dr-foot{padding:44px 7vw 60px;border-top:1px solid var(--line);text-align:center}
.bp .dr-foot .fm{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600}
.bp .dr-foot .fm .pace{font-style:italic;color:var(--gold)}
.bp .dr-foot .meta{font-size:12px;letter-spacing:.06em;color:var(--muted);margin-top:12px}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
