/* ════════════════════════════════════════════════════════════════
   BIRLL HEALTH — editorial design system (web)
   Fraunces serif · Manrope sans · JetBrains Mono · dark glass canvas
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* palette — pulled from EditorialTheme.swift */
  --cream:      #F4E8D7;
  --muted:      #A39A8B;
  --burnt:      #D4582A;
  --ochre:      #E0A858;
  --sage:       #7DA88A;
  --deep-burnt: #732E18;

  --bg:         #0F0F14;
  --bg-2:       #131319;
  --bg-3:       #16161D;
  --ink:        #0A0A0E;

  /* glass */
  --glass:        rgba(255,255,255,0.035);
  --glass-2:      rgba(255,255,255,0.055);
  --glass-border: rgba(255,255,255,0.09);
  --rule:         rgba(244,232,215,0.32);
  --rule-soft:    rgba(244,232,215,0.14);

  /* type */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* spacing scale (8pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --maxw: 1240px;
  --radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* subtle grain/vignette on the canvas */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,88,42,0.07), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(125,168,138,0.05), transparent 55%);
}

/* ─── Typography helpers ─────────────────────────────────────── */
.kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.kicker.burnt { color: var(--burnt); }
.kicker.ochre { color: var(--ochre); }
.kicker.sage  { color: var(--sage); }

.serif { font-family: var(--serif); font-weight: 300; }
.mono  { font-family: var(--mono); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-size: clamp(54px, 8vw, 116px);
}

.headline {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-size: clamp(38px, 5vw, 68px);
}

.deck {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.45;
  color: rgba(244,232,215,0.82);
}

.lede { color: rgba(244,232,215,0.7); font-size: 18px; line-height: 1.65; }

em.term { font-family: var(--serif); font-style: italic; color: var(--cream); }

a { color: inherit; text-decoration: none; }

/* ─── Rules & marks ──────────────────────────────────────────── */
.rule { height: 1px; background: var(--rule); border: 0; width: 100%; }
.rule-soft { height: 1px; background: var(--rule-soft); border: 0; width: 100%; }

.pullquote {
  padding-left: 18px;
  border-left: 3px solid var(--burnt);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
}

/* ─── Glass card ─────────────────────────────────────────────── */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

/* ─── Layout ─────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.section { padding: clamp(64px, 11vh, 128px) 0; position: relative; z-index: 1; }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px 22px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s, border-color .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--cream); color: var(--ink); }
.btn-primary:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--glass-border); }
.btn-ghost:hover { border-color: var(--rule); background: var(--glass); }

/* Store badges — official style (black, white logo + label) */
.appstore, .playstore {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 18px; border-radius: 12px;
  background: #000; color: #fff;
  border: 1px solid rgba(255,255,255,0.30);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, background .25s;
}
.appstore:hover, .playstore:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.62); background: #0b0b0d; }
.appstore svg, .playstore svg { height: 24px; width: auto; display: block; flex: none; fill: #fff; }
.as-sub { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; line-height: 1.1; }
.as-main { font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.15; letter-spacing: 0.01em; }

/* row of both badges */
.store-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ─── Moving logo wall (real brand logos via Simple Icons) ───── */
.logowall { position: relative; width: 100%; overflow: hidden; padding: 8px 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logowall-row { display: flex; gap: 60px; width: max-content; align-items: center;
  animation: lw-scroll 64s linear infinite; padding: 14px 30px; }
.logowall-row.rev { animation-direction: reverse; animation-duration: 78s; }
.logowall:hover .logowall-row { animation-play-state: paused; }
.logowall-row img { height: 30px; width: auto; flex: none; opacity: .48;
  transition: opacity .3s, transform .3s; }
.logowall-row img:hover { opacity: 1; transform: scale(1.14); }
.lw-word { flex: none; white-space: nowrap; font-family: var(--sans); font-weight: 600;
  font-size: 20px; letter-spacing: .005em; color: var(--cream); opacity: .42;
  transition: opacity .3s, transform .3s, color .3s; cursor: default; }
.lw-word:hover { opacity: 1; transform: scale(1.06); color: var(--ochre); }
@keyframes lw-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logowall-row { animation: none; } }

/* ─── Capability grid (everything Birll tracks) ─────────────── */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius); overflow: hidden; }
.cap { background: var(--bg); padding: 30px 26px; transition: background .3s; }
.cap:hover { background: var(--bg-3); }
.cap .ck { color: var(--burnt); margin-bottom: 14px; }
.cap h4 { font-family: var(--serif); font-weight: 300; font-size: 24px; margin: 0 0 10px; }
.cap p { color: rgba(244,232,215,.62); font-size: 14px; line-height: 1.6; margin: 0; }
.cap .cstat { font-family: var(--mono); font-size: 12px; color: var(--sage); margin-top: 14px; }
@media (max-width: 820px){ .cap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .cap-grid { grid-template-columns: 1fr; } }

/* ─── Scroll reveal (gated on JS so content never hides without it) ── */
.reveal { transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
html.js-reveal .reveal { opacity: 0; transform: translateY(26px); }
html.js-reveal .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal, html.js-reveal .reveal.in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ─── Folio / page numbering decorations ─────────────────────── */
.folio { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

/* ─── Site nav ───────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  background: rgba(15,15,20,0.72);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px 28px; display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.wordmark { font-family: var(--serif); font-weight: 300; font-size: 25px; letter-spacing: .02em; color: var(--cream); }
.wordmark b { font-weight: 600; }
.nav-links { display:flex; align-items:center; gap: 30px; }
.nav-links a { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(244,232,215,.62); transition: color .2s; }
.nav-links a:hover { color: var(--cream); }
.nav-links a.active { color: var(--cream); }
.nav-links a.active::after { content:""; display:block; height:1px; background: var(--burnt); margin-top: 5px; }
.nav-cta { display:flex; align-items:center; gap: 16px; }
.nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:0; }
.nav-burger span { width:22px; height:1.5px; background: var(--cream); display:block; transition: .3s; }
.mobile-menu { display:none; }

@media (max-width: 820px) {
  .nav-links, .nav-cta .btn, .nav-cta .appstore { display:none; }
  .nav-burger { display:flex; }
  .mobile-menu { display:block; position: fixed; inset: 60px 0 auto 0; z-index: 49; background: var(--bg-2); border-bottom:1px solid var(--rule-soft); padding: 14px 28px 24px; transform: translateY(-120%); transition: transform .4s cubic-bezier(.2,.7,.3,1); }
  .mobile-menu.open { transform: none; }
  .mobile-menu a { display:block; font-family: var(--serif); font-weight: 300; font-size: 28px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
  body.menu-open { overflow: hidden; }
}

/* ─── Footer ─────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--rule); padding: 64px 0 40px; position: relative; z-index: 1; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.footer .flink { display:block; color: rgba(244,232,215,.66); font-size: 15px; padding: 6px 0; transition: color .2s; }
.footer .flink:hover { color: var(--cream); }
.footer .big-mark { font-family: var(--serif); font-weight: 300; font-size: 40px; color: var(--cream); }
.footer .big-mark b { font-weight: 600; }
.footer .tag { color: rgba(244,232,215,.55); font-size: 14px; max-width: 280px; margin-top: 14px; line-height: 1.6; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule-soft); flex-wrap: wrap; gap: 14px; }
.footer-bottom .fine { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .03em; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }

/* ─── Section header (editorial) ─────────────────────────────── */
.sec-rule { display:flex; align-items:center; gap: 18px; margin-bottom: 40px; }
.sec-rule .ln { flex:1; height:1px; background: var(--rule); }
.sec-rule .folio { white-space: nowrap; }