/* ===========================================================
   BASR Capital & Advisory — English home (v2)
   Bold hero · 5 buttons · one image moment · quiet contact
   Self-contained; tokens mirrored from styles.css.
   =========================================================== */

:root{
  --espresso:      #2A2017;
  --espresso-deep: #211A11;
  --espresso-2:    #322619;
  --cream:         #F4EFE6;
  --cream-warm:    #F8F3EA;
  --gold:          #BFA063;
  --gold-light:    #CDB079;
  --ink:           #2A2017;
  --ink-soft:      #6E6051;
  --ink-softer:    #8A7B68;
  --cream-soft:    rgba(244, 239, 230, 0.66);
  --cream-softer:  rgba(244, 239, 230, 0.40);
  --line-light:    rgba(42, 32, 23, 0.14);
  --line-gold:     rgba(191, 160, 99, 0.30);
  --line-dark:     rgba(244, 239, 230, 0.14);
  --line-dark-gold:rgba(191, 160, 99, 0.26);

  --display: "Cormorant Garamond", Georgia, serif;
  --body:    "Spectral", Georgia, serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;
  --arabic:  "Amiri", Georgia, serif;

  --maxw: 1240px;
  --pad: clamp(22px, 5vw, 84px);
  --tb-h: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--espresso);
  color: var(--cream);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(191, 160, 99, 0.30); color: var(--cream); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); width: 100%; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

/* ---------- reveal (transform-only; opacity always 1) ---------- */
@keyframes riseIn { from { transform: translateY(36px) scale(.99); } to { transform: none; } }
.rev { opacity: 1; }
.rev.in { animation: riseIn .9s cubic-bezier(.2,.7,.2,1) both; }
.rev.in.d1 { animation-delay: .08s; }
.rev.in.d2 { animation-delay: .18s; }
.rev.in.d3 { animation-delay: .30s; }
.rev.in.d4 { animation-delay: .42s; }
@media (prefers-reduced-motion: reduce){ .rev, .rev.in { animation: none; transform: none; } }

/* ===========================================================
   TOP BAR + DRAWER styles now live in the shared header.css
   (single source of truth, loaded by every page). Do not
   redefine them here — edit header.css instead.
   =========================================================== */

/* ===========================================================
   HERO
   =========================================================== */
.hero {
  position: relative; min-height: 90svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--tb-h) + 30px) 0 86px; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(191,160,99,0.13), transparent 56%),
    radial-gradient(80% 70% at 6% 100%, rgba(191,160,99,0.06), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; text-align: center; }
.hero-eyebrow {
  display: flex; align-items: center; gap: 16px; margin-bottom: clamp(26px, 4vh, 40px);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--cream-softer);
}
.hero-eyebrow .ln { width: 46px; height: 1px; background: var(--line-dark-gold); display: inline-block; }
.hero-eyebrow .dot { color: var(--gold); }

.hero-h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(42px, 6.2vw, 88px); line-height: 1.05;
  letter-spacing: -0.022em; margin: 0 auto; max-width: min(94vw, 980px);
}
.hero-h1 em { font-style: italic; font-weight: 600; color: var(--gold-light); }

.hero-tagline {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(12px, 1.4vw, 14px); letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold-light);
  margin: clamp(26px, 3.6vh, 36px) auto 0;
}
.hero-tagline .sep { color: var(--gold); margin: 0 0.55em; }

.hero-sub {
  font-family: var(--body); font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.55; color: var(--cream-soft);
  margin: clamp(28px, 4vh, 40px) auto 0; max-width: 56ch;
}
.hero-sub b { color: var(--cream); font-weight: 500; }

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: clamp(36px, 5.5vh, 50px); }
.btn {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.13em;
  text-transform: uppercase; padding: 16px 32px;
  border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-light);
  background: transparent; cursor: pointer;
  transition: background .35s ease, color .35s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--gold); color: var(--espresso-deep); }
.btn.solid { background: var(--gold); color: var(--espresso-deep); }
.btn.solid:hover { background: var(--gold-light); }

.hero-foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 26px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--cream-softer);
}
.scroll-cue { display: flex; align-items: center; gap: 10px; }
.scroll-cue .ln { width: 46px; height: 1px; background: var(--gold); display: inline-block;
  transform-origin: left; animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform: scaleX(.4); opacity:.5 } 50%{ transform: scaleX(1); opacity:1 } }

/* ===========================================================
   STATS STRIP
   =========================================================== */
.stats { background: var(--espresso-deep); border-top: 1px solid var(--line-dark-gold); }
.stats .wrap {
  display: grid; grid-template-columns: 1fr; gap: 0;
  padding-top: clamp(44px, 6vh, 64px); padding-bottom: clamp(44px, 6vh, 64px);
}
@media (min-width: 720px){ .stats .wrap { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: 18px clamp(0px, 2vw, 30px); position: relative; }
@media (min-width: 720px){
  .stat + .stat { border-left: 1px solid var(--line-dark); padding-left: clamp(28px, 4vw, 56px); }
}
.stat-fig {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(46px, 6vw, 76px); line-height: 1; color: var(--gold-light);
  letter-spacing: -0.01em;
}
.stat-fig .sm { font-size: 0.42em; color: var(--cream-soft); }
.stat-label {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--cream-soft); margin: 16px 0 8px;
}
.stat-desc { font-size: 15.5px; color: var(--cream-softer); margin: 0; max-width: 30ch; }

/* ===========================================================
   AI-NATIVE CFO — flagship teaser band
   =========================================================== */
.ainative {
  background: var(--cream); color: var(--ink);
  padding: clamp(78px, 12vh, 144px) 0;
  border-bottom: 1px solid var(--line-light);
  position: relative; overflow: hidden;
}
.ainative::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(85% 80% at 90% 0%, rgba(191,160,99,0.10), transparent 56%);
  pointer-events: none;
}
.ainative .wrap {
  position: relative;
}
/* ---- flagship dark card, floated on the cream band ---- */
.ai-card{
  position: relative; overflow: hidden;
  background: var(--espresso);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: clamp(34px, 4.6vw, 72px);
  box-shadow: 0 60px 120px -56px rgba(20,14,6,.7);
}

.ai-card-inner{
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 64px); align-items: center;
}
@media (min-width: 900px){ .ai-card-inner{ grid-template-columns: 1.05fr 0.95fr; } }

/* lead column */
.ai-col-lead .eyebrow{ color: var(--gold-light); }
.ai-title{
  font-family: var(--display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(46px, 6.2vw, 88px); line-height: 0.94; margin: 22px 0 0; color: var(--cream);
}
.ai-title .g{ color: var(--gold); }
.ai-sub{
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(21px, 2.4vw, 31px); line-height: 1.25;
  margin: 16px 0 0; color: rgba(244,239,230,0.7);
}
.ai-sub em{ font-style: italic; color: var(--gold); }
.ai-metric{
  margin-top: clamp(28px, 3.6vh, 42px); padding-top: 24px;
  border-top: 1px solid rgba(244,239,230,0.14);
  display: flex; flex-direction: column; gap: 10px;
}
.ai-metric .m-k{ font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244,239,230,0.5); }
.ai-metric .m-v{ font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3.8vw, 48px); line-height: 1; letter-spacing: -0.01em; color: var(--cream); }
.ai-metric .m-arr{ color: var(--gold); margin: 0 .18em; }
.ai-metric .m-v em{ font-style: italic; color: var(--gold-light); }

/* body column */
.ai-body p{ font-size: clamp(15.5px, 1.6vw, 17.5px); color: rgba(244,239,230,0.72); margin: 0; max-width: 46ch; line-height: 1.62; }
.ai-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(22px, 3vh, 30px) 0; }
.ai-chips .chip{
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--cream-soft);
  border: 1px solid rgba(191,160,99,0.36); border-radius: 999px; padding: 9px 16px;
  background: rgba(191,160,99,0.06); white-space: nowrap;
  transition: color .35s ease, background .35s ease, border-color .35s ease;
}
.ai-chips .chip:hover{ color: var(--cream); border-color: var(--gold); background: rgba(191,160,99,0.13); }
.ai-go {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 4px;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--espresso-deep); white-space: nowrap;
  background: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 14px 28px;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.ai-go .arr { color: var(--espresso-deep); transition: transform .35s ease; }
.ai-go:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); }
.ai-go:hover .arr { transform: translateX(6px); }

/* ===========================================================
   EXPLORE — the cards (on brown)
   =========================================================== */
.explore { background: var(--espresso); color: var(--cream); padding: clamp(72px, 11vh, 132px) 0; }
.explore-head { max-width: 720px; margin: 0 auto clamp(40px, 6vh, 64px); text-align: center; }
.explore-head .eyebrow { margin-bottom: 20px; }
.explore-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, 5vw, 62px); line-height: 1.02;
  letter-spacing: -0.01em; margin: 0; color: var(--cream);
}

/* cards — The Firm / Services / Team / Industries (alternating brown/light) */
.grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px);
}
@media (min-width: 640px){ .grid { grid-template-columns: 1fr 1fr; } }
.card {
  padding: clamp(30px, 3.6vw, 50px);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 220px;
  border: 1px solid transparent;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .4s ease, background .4s ease;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 26px 54px -30px rgba(0,0,0,.55), 0 0 28px -6px rgba(191,160,99,.38);
}
@media (prefers-reduced-motion: reduce){ .card:hover { transform: none; box-shadow: 0 0 0 1px var(--gold); } }
.card .c-n { font-family: var(--sans); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.card h3 {
  font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3.2vw, 40px);
  margin: 0; line-height: 1.02;
}
.card p { margin: 0; font-size: 16px; max-width: 40ch; }
.card .g { color: var(--gold); }
.card .c-go {
  margin-top: auto; font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.card .c-go .arr { color: var(--gold); transition: transform .35s ease; }
.card:hover .c-go .arr { transform: translateX(6px); }

/* card fills: 1 dark, 2 light, 3 light, 4 dark */
.card:nth-child(1), .card:nth-child(4) { background: var(--espresso-deep); }
.card:nth-child(1) h3, .card:nth-child(4) h3 { color: var(--cream); }
.card:nth-child(1) p, .card:nth-child(4) p { color: var(--cream-soft); }
.card:nth-child(1) .c-go, .card:nth-child(4) .c-go { color: var(--cream-softer); }
.card:nth-child(1):hover .c-go, .card:nth-child(4):hover .c-go { color: var(--cream); }
.card:nth-child(2), .card:nth-child(3) { background: var(--cream); }
.card:nth-child(2) h3, .card:nth-child(3) h3 { color: var(--ink); }
.card:nth-child(2) p, .card:nth-child(3) p { color: var(--ink-soft); }
.card:nth-child(2) .c-go, .card:nth-child(3) .c-go { color: var(--ink-softer); }
.card:nth-child(2):hover .c-go, .card:nth-child(3):hover .c-go { color: var(--ink); }
.card:nth-child(2):hover, .card:nth-child(3):hover { background: var(--cream-warm); }

/* hover: the whole box lifts into a highlighted state (gold ring + brighter surface) */
.card:nth-child(1):hover, .card:nth-child(4):hover { background: var(--espresso-2); }

/* ===========================================================
   SENIOR BY DEFAULT — centered statement
   =========================================================== */
.moment { background: var(--cream); color: var(--ink); padding: clamp(72px, 11vh, 132px) 0; overflow: hidden; }
.moment .wrap { display: block; }
.moment-body { max-width: 1060px; margin: 0 auto; text-align: center; }
.moment-body .eyebrow { margin-bottom: 22px; color: var(--gold); }
.moment-body h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4.4vw, 58px); line-height: 1.02;
  letter-spacing: -0.01em; margin: 0 auto 26px; max-width: 20ch; color: var(--ink);
}
.moment-body h2 em { font-style: italic; color: var(--gold); }
.moment-body p { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-soft); margin: 0 auto; max-width: none; }

/* ===========================================================
   CONTACT / CTA STRIP + quiet footer
   =========================================================== */
.contact { background: var(--espresso); color: var(--cream); border-top: 1px solid var(--line-dark-gold); min-height: 100svh; display: flex; flex-direction: column; }
.contact .wrap { display: flex; flex-direction: column; flex: 1 1 auto; }
.contact .cta {
  flex: 1 1 auto;
  padding: clamp(64px, 10vh, 120px) 0 clamp(48px, 7vh, 72px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 26px;
}
.contact .cta .eyebrow { margin-bottom: 0; }
.contact .cta h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 5.4vw, 76px); line-height: 1.0;
  letter-spacing: -0.015em; margin: 0 auto; max-width: 18ch;
}
.contact .cta h2 em { font-style: italic; color: var(--gold-light); }
.contact .cta .actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; justify-content: center; }

.foot {
  border-top: 1px solid var(--line-dark);
  padding: 30px 0 40px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-softer);
}
.foot a { transition: color .3s ease; }
.foot a:hover { color: var(--gold-light); }
.foot .dot { color: var(--gold); }

/* ===========================================================
   WEB-NATIVE CUES (home)
   =========================================================== */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 1000; pointer-events: none;
}
.hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; }
.hero > .wrap { z-index: 1; }
.hero-foot { z-index: 1; }