/* BHASM shared core — tokens, nav, buttons, mobile nav, footer, deep-nav.
   Load on every marketing page BEFORE the page's own <style>.
   Source of truth pulled from index.html; do not diverge per page. */

:root{
  --bg:        #ECEAE6;
  --bg-2:      #E2DFD9;
  --bg-3:      #D5D1CA;
  --surface:   #F5F3EF;
  --dark:      #221E19;
  --dark-deep: #100D09;
  --dark-mid:  #1A1510;
  --text:      #1C1A17;
  --text-2:    #3E3C37;
  --text-3:    #706D65;
  --text-4:    #8A867E;
  --text-5:    #A09C94;
  --fire:      #C04E18;
  --fire-dark: #D4620A;
  --fire-2:    rgba(192,78,24,.12);
  --fire-3:    rgba(192,78,24,.06);
  --go:        #1E7A46;
  --rule:      rgba(28,26,23,.07);
  --rule-2:    rgba(28,26,23,.12);
  --rule-3:    rgba(28,26,23,.22);
  --serif: 'Fraunces', Georgia, serif;
  --body:  'DM Mono', ui-monospace, monospace;
  --mono:  'DM Mono', ui-monospace, monospace;
  --max:    1280px;
  --pad-x:  40px;
  --pad-y:  96px;
}

/* Readability floor — DM Mono is dense; never let effective body sit below 13px on desktop or 12px on mobile.
   Headline clamps stay inside a sane range so a rogue vw multiplier can't shrink or explode them. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1{ font-family: var(--serif); font-weight:400; line-height:1.06; letter-spacing:-.03em; font-size: clamp(28px, 3vw, 42px) }
h2{ font-family: var(--serif); font-weight:400; line-height:1.10; letter-spacing:-.02em; font-size: clamp(22px, 2.5vw, 34px) }
h3{ font-family: var(--serif); font-weight:400; line-height:1.15; letter-spacing:-.01em; font-size: clamp(18px, 1.8vw, 24px) }
p{ font-size: clamp(13px, 1vw, 15px); line-height: 1.65 }

/* ── TOP NAV ─────────────────────────────────────────── */
#nav{
  position:fixed; top:0; left:0; right:0;
  height:56px; z-index:9999;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x);
  background: var(--surface);
  border-bottom: 1px solid var(--rule-2);
  box-sizing:border-box;
}
.nav-logo{
  cursor:pointer; font-family: var(--body); font-size: 13px;
  font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  flex-shrink:0; text-decoration:none;
}
.nav-links{ display:flex; align-items:center; gap:2px }
.nav-right{ display:flex; align-items:center; gap:8px }
.nav-a{
  font-family: var(--body); font-size:13px; font-weight:500;
  color: var(--text-2); background:none; border:none;
  padding: 0 10px; cursor:pointer; transition: color .12s;
  text-decoration:none;
}
.nav-a:hover{ color: var(--fire) }

/* ── BUTTONS — one definition ──────────────────────── */
.btn-o, .btn-f{
  font-family: var(--mono); font-size: 10px;
  font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  padding: 9px 18px; border-radius:2px; cursor:pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space:nowrap; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.btn-o{ background:transparent; border:1px solid var(--rule-3); color: var(--text-2) }
.btn-o:hover{ border-color: var(--text); color: var(--text) }
.btn-f{ background: var(--fire); border:1px solid var(--fire); color:#fff }
.btn-f:hover{ background:#B84A10; border-color:#B84A10 }

/* ── MOBILE NAV ──────────────────────────────────────── */
.mob-menu-btn{
  display:none; background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; align-items:center;
  justify-content:center; padding:8px; margin-left:4px;
}
.mob-menu-btn span{
  display:block; width:20px; height:1.5px;
  background: var(--text); border-radius:1px;
}
#mob-nav{
  display:none; position:fixed; top:0; left:0;
  width:100%; height:100%; z-index:9998;
  background: var(--dark-deep); flex-direction:column; overflow-y:auto;
}
.mob-nav-link{
  font-family: var(--serif);
  font-size: clamp(24px, 6.5vw, 38px);
  color:#D4C5A9; text-decoration:none;
  padding:13px 0;
  border-bottom: .5px solid rgba(255,255,255,.06);
  letter-spacing:-.02em; cursor:pointer; display:block;
}
.mob-nav-cta{
  width:100%; font-family: var(--mono);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:14px; border-radius:2px; cursor:pointer;
}
.mob-nav-cta.outline{ background:none; border:1px solid rgba(255,255,255,.18); color:#D4C5A9 }
.mob-nav-cta.filled{ background:#C04E18; border:1px solid #C04E18; color:#fff }

/* ── FOOTER BAND ─────────────────────────────────────── */
footer.footer-band{
  background:#1A1612;
  border-top:1px solid #2A2520;
  padding: 48px var(--pad-x) 36px;
}
.footer-inner{ max-width: var(--max); margin: 0 auto }
.footer-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-bottom:32px; padding-bottom:24px;
  border-bottom:1px solid #2A2520;
}
.flogo{
  font-family: var(--mono); font-size:13px;
  letter-spacing:.14em; color:#9A8E7E; cursor:pointer;
}
.flinks{ display:flex; gap:24px; align-items:center; flex-wrap:wrap }
.flink{
  font-family: var(--mono); font-size:11px;
  letter-spacing:.06em; color:#9A8E7E;
  text-decoration:none; transition: color .12s;
}
.flink:hover{ color:#D4C5A9 }
.footer-bottom{ display:flex; flex-direction:column; gap:8px }
.fbhasma{ font-family: var(--serif); font-size:13px; font-style:italic; color:#9A8E7E; line-height:1.6 }
.fcopy{ font-family: var(--mono); font-size:10px; color:#8A8078; letter-spacing:.06em }

/* ── DEEP NAV (link grid above footer) ──────────────── */
.deep-nav{
  background:#100D09;
  padding:56px var(--pad-x);
  border-top:1px solid #2A2520;
}
.dn-grid{
  max-width:1120px; margin:0 auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px 40px;
}
.dn-col .dn-h{
  font-family: var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
  color:#D4620A; margin-bottom:14px;
}
.dn-col a{
  display:block; font-family: var(--mono); font-size:12px;
  color: rgba(245,243,239,.60); padding:5px 0; line-height:1.5;
  text-decoration:none;
}
.dn-col a:hover{ color:#F5F3EF }

/* ── BREAKPOINTS ─────────────────────────────────────── */
@media (max-width:1024px){
  :root{ --pad-x:32px; --pad-y:80px }
}
@media (max-width:768px){
  :root{ --pad-x:24px; --pad-y:64px }
  .mob-menu-btn{ display:flex }
  .nav-links{ display:none }
  .nav-hide-mob{ display:none !important }
  #nav{ padding:0 20px }
  .btn-o, .btn-f{ font-size:10px; padding:8px 14px }
  body{ font-size:13.5px }
}
@media (max-width:640px){
  .dn-grid{ grid-template-columns:1fr; gap:24px }
}
@media (max-width:480px){
  :root{ --pad-x:16px; --pad-y:48px }
  .btn-o, .btn-f{ font-size:10px; padding:8px 12px }
  body{ font-size:13px }
  h1{ font-size: clamp(24px, 7vw, 34px) }
  h2{ font-size: clamp(20px, 5.5vw, 28px) }
}
@media (max-width:360px){
  :root{ --pad-x:12px; --pad-y:40px }
  body{ font-size:12.5px }
}