/* Yash Agarwal · Wealth Counsel — shared stylesheet
   Aesthetic: paper-white canvas, charcoal ink, single emerald accent.
   Geist for everything, Geist Mono for numerals. Tabular figures.
*/

:root{
  --bg:#fafaf7;
  --surface:#ffffff;
  --card:#f3f2ec;
  --ink:#15171a;
  --mono:#5b6168;
  --rule:rgba(21,23,26,.10);
  --up:#1f7a4d;
  --down:#a23a2f;
  --accent:#1f7a4d;
  --gold:#c98a3a;
  --maxw:1240px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Geist","Inter",system-ui,sans-serif;
  font-feature-settings:"ss01","cv11";
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:0}

.mono{font-family:"Geist Mono","IBM Plex Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}

h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-0.035em}
h1{font-size:clamp(40px, 6.4vw, 80px); line-height:.96}
h2{font-size:clamp(32px, 4.2vw, 52px); line-height:1}
h3{font-size:clamp(22px, 2vw, 28px); line-height:1.1}
p{margin:0}

.container{max-width:var(--maxw); margin:0 auto; padding:0 32px}

/* ── Skip link ───────────────────────────────────────────────── */
.skip-link{
  position:absolute; top:-100%; left:16px;
  background:var(--ink); color:var(--bg);
  padding:8px 14px; font-size:13px; z-index:999;
  transition:top .1s;
}
.skip-link:focus{top:8px}

/* ── Ticker bar ──────────────────────────────────────────────── */
.ticker{
  background:var(--ink); color:var(--bg);
  font-family:"Geist Mono","IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.04em;
  overflow:hidden; padding:8px 0;
  border-bottom:1px solid var(--ink);
}
.ticker__track{
  display:flex; gap:36px; white-space:nowrap;
  animation: tickerScroll 60s linear infinite;
  width:max-content;
}
.ticker__item{display:flex; align-items:center; gap:8px}
.ticker__sym{letter-spacing:.06em}
.ticker__px{opacity:.85}
.ticker__up{color:#82d3a4}
.ticker__down{color:#ff8a7a}
@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .ticker__track{animation:none}
}

/* ── Nav ─────────────────────────────────────────────────────── */
.nav{
  border-bottom:1px solid var(--rule);
  background:var(--bg);
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(120%) blur(8px);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px}
.brand__mark{
  width:32px; height:32px;
  border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:"Geist Mono",ui-monospace,monospace;
  font-weight:600; font-size:13px; letter-spacing:-.04em;
}
.brand__name{display:flex; flex-direction:column; line-height:1}
.brand__name b{font-weight:600; font-size:16px; letter-spacing:-.02em}
.brand__name span{font-family:"Geist Mono",monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.6; margin-top:3px}

.nav__links{display:flex; gap:28px; font-size:14px; color:var(--mono)}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__cta{display:flex; gap:14px; align-items:center}
.nav__phone{font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--mono)}

/* Mobile nav toggle */
.nav__toggle{
  display:none;
  width:32px; height:32px;
  border:1px solid var(--rule);
  background:transparent;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav__toggle span{
  display:block; width:16px; height:1.5px; background:var(--ink);
  position:relative;
}
.nav__toggle span::before,
.nav__toggle span::after{
  content:""; position:absolute; left:0; width:100%; height:1.5px; background:var(--ink);
}
.nav__toggle span::before{top:-5px}
.nav__toggle span::after{top:5px}
.nav__sheet{
  display:none;
  position:fixed; inset:0; background:var(--bg); z-index:49;
  flex-direction:column; gap:0; padding-top:80px;
}
.nav__sheet a{
  font-size:22px; font-weight:500; letter-spacing:-.02em;
  padding:18px 22px; border-bottom:1px solid var(--rule);
  color:var(--ink);
}
.nav__sheet.is-open{display:flex}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; background:var(--ink); color:var(--bg);
  font-size:13.5px; font-weight:500; letter-spacing:-.005em;
  transition:background .15s ease, color .15s ease;
  cursor:pointer;
}
.btn:hover{background:#000}
.btn--ghost{background:transparent; color:var(--ink); border:1px solid var(--rule)}
.btn--ghost:hover{background:var(--card)}
.btn--lg{padding:14px 22px; font-size:14px}
.btn--block{display:flex; justify-content:center; width:100%}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:var(--card); color:var(--mono);
  font-family:"Geist Mono",monospace; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase;
}
.pill--accept{color:var(--up)}
.pill__dot{width:6px; height:6px; border-radius:50%; background:currentColor}

/* ── Sections ─────────────────────────────────────────────────── */
section{padding:80px 0}
.section--tight{padding:48px 0}
.kicker{
  font-family:"Geist Mono",monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mono); margin-bottom:14px;
}
.kicker--accent{color:var(--up)}
.lead{font-size:18px; line-height:1.55; color:var(--mono); max-width:54ch}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero{padding:72px 0 64px}
.hero__grid{display:grid; grid-template-columns: 1.4fr 1fr; gap:64px; align-items:start}
.hero__title{margin-top:24px}
.hero__title em{font-style:normal; color:var(--mono)}
.hero__lead{margin-top:22px; max-width:52ch}
.hero__actions{margin-top:36px; display:flex; gap:12px; flex-wrap:wrap}

.hero__card{
  background:var(--surface); border:1px solid var(--rule);
  padding:22px; display:flex; flex-direction:column; gap:18px;
}
.hero__card h4{
  font-family:"Geist Mono",monospace; font-weight:500;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mono); margin:0;
}
.allocRow{display:flex; align-items:center; gap:22px}
.legend{flex:1; display:flex; flex-direction:column; gap:8px}
.legend__row{
  display:flex; align-items:center; gap:10px;
  font-family:"Geist Mono",monospace; font-size:12px;
  font-variant-numeric:tabular-nums;
}
.legend__swatch{width:8px; height:8px; flex-shrink:0}
.legend__name{flex:1; font-family:"Geist","Inter",sans-serif; font-size:13px; color:var(--ink)}

/* Stat strip */
.statgrid{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin-top:40px;
}
.stat{padding:22px 18px 22px 0; border-left:1px solid var(--rule); padding-left:18px}
.stat:first-child{border-left:0; padding-left:0}
.stat__value{font-size:44px; font-weight:500; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.stat__label{margin-top:8px; font-size:12.5px; color:var(--mono); line-height:1.4; max-width:22ch}

/* ── Pillars grid ────────────────────────────────────────────── */
.pillars{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap:16px; margin-top:32px;
}
.pillar{
  background:var(--surface); border:1px solid var(--rule);
  padding:24px; display:flex; flex-direction:column; gap:12px;
  min-height:240px;
}
.pillar--featured{
  grid-column: span 2;
  background:var(--ink); color:var(--bg);
}
.pillar__meta{
  display:flex; align-items:center; justify-content:space-between;
  font-family:"Geist Mono",monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mono);
}
.pillar--featured .pillar__meta{color:rgba(255,255,255,.65)}
.pillar__meta .yrs{color:var(--up)}
.pillar--featured .pillar__meta .yrs{color:#82d3a4}
.pillar__title{font-size:34px; font-weight:500; letter-spacing:-.035em; line-height:1}
.pillar--featured .pillar__title{font-size:56px}
.pillar__body{font-size:14.5px; line-height:1.5; color:var(--mono); max-width:46ch}
.pillar--featured .pillar__body{color:rgba(255,255,255,.78)}
.pillar__chips{margin-top:auto; display:flex; flex-wrap:wrap; gap:6px}
.chip{
  padding:4px 9px; border:1px solid var(--rule);
  font-family:"Geist Mono",monospace; font-size:10.5px;
  letter-spacing:.03em; color:var(--mono);
}
.pillar--featured .chip{border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.78)}

/* ── Approach split ──────────────────────────────────────────── */
.approach{background:var(--card); padding:48px}
.approach__grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.approach__rows{margin-top:28px; display:flex; flex-direction:column}
.approach__row{
  display:grid; grid-template-columns: 180px 1fr; gap:16px;
  padding:14px 0; border-top:1px solid var(--rule);
}
.approach__rowKey{
  font-family:"Geist Mono",monospace; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
}
.approach__rowVal{font-size:14px; line-height:1.5; color:var(--mono)}

.proc{background:var(--surface); border:1px solid var(--rule); padding:26px}
.proc__head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px}
.proc__step{display:grid; grid-template-columns:60px 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--rule)}
.proc__no{font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.1em; color:var(--up)}
.proc__title{font-size:22px; font-weight:500; letter-spacing:-.02em; color:var(--ink); margin:0}
.proc__body{margin-top:6px; font-size:14px; line-height:1.5; color:var(--mono)}

/* ── Pricing ─────────────────────────────────────────────────── */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.tier{
  background:var(--surface); border:1px solid var(--rule);
  padding:26px; display:flex; flex-direction:column; gap:14px;
  min-height:280px;
}
.tier--lit{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.tier__head{display:flex; justify-content:space-between; align-items:baseline; font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase}
.tier__head .who{opacity:.7}
.tier__price{display:flex; align-items:baseline; gap:8px}
.tier__price b{font-size:54px; font-weight:500; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.tier__price span{font-family:"Geist Mono",monospace; font-size:12px; opacity:.7}
.tier__note{font-size:14px; line-height:1.55; color:var(--mono)}
.tier--lit .tier__note{color:rgba(255,255,255,.85)}
.tier__cta{
  margin-top:auto; padding:11px 16px;
  background:var(--ink); color:var(--bg);
  font-size:13px; font-weight:500; text-align:center;
  display:block;
}
.tier--lit .tier__cta{background:var(--bg); color:var(--ink)}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq__grid{display:grid; grid-template-columns:1fr 2fr; gap:56px}
.faq__item{padding:20px 0; border-top:1px solid var(--rule)}
.faq__item:last-child{border-bottom:1px solid var(--rule)}
.faq__row{display:flex; align-items:baseline; gap:16px}
.faq__no{font-family:"Geist Mono",monospace; font-size:11px; color:var(--up); letter-spacing:.06em; min-width:24px}
.faq__q{font-size:19px; font-weight:500; letter-spacing:-.015em; color:var(--ink)}
.faq__a{margin-top:6px; font-size:14.5px; line-height:1.55; color:var(--mono)}

/* ── Contact / footer CTA ────────────────────────────────────── */
.contactCTA{background:var(--ink); color:var(--bg); padding:56px}
.contactCTA__grid{display:grid; grid-template-columns:1.4fr 1fr; gap:48px}
.contactCTA h2 em{color:#82d3a4; font-style:normal}
.contactCard{padding:18px 22px; background:#ffffff10; border:1px solid #ffffff20}
.contactCard__k{font-family:"Geist Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.6}
.contactCard__v{margin-top:6px; font-size:20px; font-weight:500; letter-spacing:-.01em}

/* Light variants (contact page cards) */
.contactCard--light{background:var(--surface); border-color:var(--rule); color:var(--ink)}
.contactCard--light .contactCard__k{opacity:1; color:var(--mono)}

footer.site{padding:36px 0; border-top:1px solid var(--rule); margin-top:24px}
footer.site .inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-family:"Geist Mono",monospace; font-size:11px; color:var(--mono); letter-spacing:.04em}

/* ── Form (contact page) ─────────────────────────────────────── */
.form{display:flex; flex-direction:column; gap:18px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mono)}
.field input,.field select,.field textarea{
  font:inherit; font-size:15px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--rule); color:var(--ink);
  outline:none; transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field textarea{min-height:120px; resize:vertical}
.field__row{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* ── About page ─────────────────────────────────────────────── */
.about__intro{display:grid; grid-template-columns: 1fr 1.4fr; gap:56px; align-items:start}
.portrait{
  width:100%; aspect-ratio: 4/5; background:var(--card);
  border:1px solid var(--rule);
  position:relative; overflow:hidden;
}
.portrait::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(28deg, rgba(21,23,26,.06) 0 1px, transparent 1px 14px);
}
.portrait__cap{
  position:absolute; bottom:14px; left:14px;
  font-family:"Geist Mono",monospace; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--bg);
  padding:6px 10px;
}

/* ── Service page chapter ────────────────────────────────────── */
.chapter{
  padding:64px 0;
  border-bottom:1px solid var(--rule);
}
.chapter:last-of-type{border-bottom:0}
.chapter__grid{display:grid; grid-template-columns: 110px 1fr 1fr; gap:48px; align-items:start}
.chapter__no{font-family:"Geist Mono",monospace; font-size:13px; letter-spacing:.16em; color:var(--up)}
.chapter h2{margin-bottom:6px}
.chapter__kicker{font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mono); margin-bottom:10px}
.chapter__yrs{margin-top:8px; font-family:"Geist Mono",monospace; font-size:12px; color:var(--up); letter-spacing:.06em}
.chapter__body{font-size:17px; line-height:1.6; color:var(--ink)}
.checklist{margin-top:18px; display:flex; flex-direction:column; gap:8px; padding:0; list-style:none}
.checklist li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14.5px; line-height:1.5; color:var(--mono);
}
.checklist li::before{
  content:""; flex-shrink:0;
  width:14px; height:14px; margin-top:4px;
  border:1px solid var(--up);
  background:
    linear-gradient(45deg, transparent 45%, var(--up) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--up) 45% 55%, transparent 55%);
}

/* ── Misc ────────────────────────────────────────────────────── */
.sectionhead{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; gap:24px; flex-wrap:wrap}
.sectionhead .lead{max-width:34ch}
.divider{height:1px; background:var(--rule); margin:0}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 960px){
  .hero__grid,.about__intro,.approach__grid,.faq__grid,.contactCTA__grid,.chapter__grid{
    grid-template-columns:1fr;
  }
  .pillars{grid-template-columns:1fr}
  .pillar--featured{grid-column:auto}
  .tiers{grid-template-columns:1fr}
  .statgrid{grid-template-columns:1fr 1fr}
  .stat{padding-left:18px; border-top:1px solid var(--rule)}
  .stat:first-child,.stat:nth-child(2){border-top:0}
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .approach{padding:32px 24px}
  .contactCTA{padding:32px 24px}
  .pillar--featured .pillar__title{font-size:42px}
  section{padding:56px 0}
}
@media (max-width: 520px){
  .container{padding:0 22px}
  .field__row{grid-template-columns:1fr}
}