/* ===================== Tokens ===================== */
:root{
  --cream:#F5F4F1;
  --paper:#FFFFFF;
  --white:#FFFFFF;
  --ink:#1A1816;
  --ink-soft:#6B6660;
  --ink-faint:#9A948C;
  --line: rgba(26,24,22,.12);
  --line-strong: rgba(26,24,22,.2);
  --accent:#8B6F47;
  --accent-dark:#6E5638;
  --accent-tint:#F1EAE0;
  --display:'Space Grotesk', 'Inter', sans-serif;
  --body-font:'Inter', system-ui, sans-serif;
  --mono:'Inter', system-ui, sans-serif;
  --logo-font:'Bitter', Georgia, serif;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ===================== Reset / base ===================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body-font);
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
button{ font:inherit; background:none; border:none; }
section[id]{ scroll-margin-top:92px; }

.container{ max-width:1160px; margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem); }
.section{ padding: clamp(4rem,8vw,7rem) 0; }
.section-alt{ background:var(--paper); }

.section-head{ max-width:640px; margin-bottom:3.5rem; }
.eyebrow{
  display:inline-block; font-family:var(--mono); font-weight:600; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:1rem;
}
.section-head h2{
  font-family:var(--display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1.15;
  margin-bottom:1rem; color:var(--ink);
}
.section-head .lead{ color:var(--ink-soft); font-size:1.05rem; max-width:56ch; line-height:1.65; }

/* focus states */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; z-index:3000; font-family:var(--mono); font-size:.85rem; text-decoration:none;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ===================== Buttons ===================== */
.btn{
  font-family:var(--mono); font-weight:600; font-size:.85rem; letter-spacing:.02em;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:3px; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-primary{ background:var(--accent); color:var(--paper); }
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 10px 20px -8px rgba(26,24,22,.35); }
.btn-primary:active{ transform:translateY(0); box-shadow:none; }
.btn-small{ padding:.6rem 1.2rem; font-size:.75rem; }
.btn-outline{ border:1px solid var(--line-strong); color:var(--ink); background:transparent; }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(26,24,22,.25); }
.btn-outline:active{ transform:translateY(0); box-shadow:none; }
.btn-link{ color:var(--ink); border-bottom:1px solid var(--ink); border-radius:0; padding:.2rem 0; }
.btn-link:hover{ color:var(--accent); border-color:var(--accent); }
.btn-link .arrow{ display:inline-block; transition:transform .3s var(--ease); }
.btn-link:hover .arrow{ transform:translateX(5px); }

/* ===================== Scroll progress ===================== */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:1100; pointer-events:none;
  background:transparent;
}
.scroll-progress-fill{
  height:100%; width:0%; background:var(--accent);
  transition:width .12s linear;
}

/* ===================== Header ===================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(245,244,241,0);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.scrolled{
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-bottom-color:var(--line);
}
.header-inner{ display:flex; align-items:center; height:76px; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--ink); text-decoration:none; text-transform:uppercase; letter-spacing:.04em; }
.brand-mark{ color:var(--accent); font-size:1.7rem; line-height:1; font-family:var(--logo-font); font-style:italic; font-weight:500; }
.nav-links{ display:flex; gap:2rem; margin:0 auto 0 2.5rem; }
.nav-links a{
  font-family:var(--mono); font-weight:500; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; position:relative; padding-bottom:4px;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--ink); }
.header-cta{ margin-left:auto; flex:0 0 auto; }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; cursor:pointer; padding:0; margin-left:auto; }
.nav-toggle span{ display:block; width:100%; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); transform-origin:center; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:880px){
  .nav-links{
    position:fixed; top:76px; left:0; right:0; margin:0; background:var(--paper);
    flex-direction:column; padding:1.5rem clamp(1.25rem,5vw,3rem); gap:1.25rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
}
body.nav-open{ overflow:hidden; }

/* ===================== Hero ===================== */
.hero{ padding:calc(76px + 3rem) 0 5rem; perspective:1200px; }
.hero-card{
  background:var(--paper); border:1px solid var(--line-strong);
  padding:clamp(2rem,5vw,4rem); position:relative;
  transform:perspective(1200px) rotateX(0deg) rotateY(0deg);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.hero-card.tilting{ transition:transform .08s linear; box-shadow:0 24px 48px -20px rgba(26,24,22,.25); }
.hero-card-top{ margin-bottom:2.5rem; }
.hero .eyebrow{ color:var(--ink-soft); max-width:230px; line-height:1.55; display:block; }
.hero h1{
  font-family:var(--display); font-weight:600; font-size:clamp(2.35rem,5.5vw,4.1rem);
  line-height:1.05; letter-spacing:-.02em; max-width:15ch; margin-bottom:1.5rem;
}
.hero .lead{ font-size:1.125rem; color:var(--ink-soft); max-width:48ch; line-height:1.65; margin-bottom:2.25rem; }
.hero-cta{ display:flex; gap:1.75rem; align-items:center; flex-wrap:wrap; }

/* ===================== Services / ledger ===================== */
.ledger{ border-top:1px solid var(--line-strong); }
.ledger-row{
  display:grid; grid-template-columns:90px 260px 1fr; gap:1.5rem; align-items:baseline;
  padding:1.85rem 0; border-bottom:1px solid var(--line);
  transition:background .3s var(--ease); position:relative;
}
.ledger-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent);
  transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease);
}
.ledger-row:hover{ background:var(--accent-tint); }
.ledger-row:hover::before{ transform:scaleY(1); }
.ledger-num{
  font-family:var(--mono); font-weight:600; font-size:.85rem; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; transition:color .3s var(--ease);
}
.ledger-row:hover .ledger-num{ color:var(--accent); }
.ledger-title{ font-family:var(--display); font-weight:600; letter-spacing:-.005em; font-size:1.15rem; }
.ledger-desc{ color:var(--ink-soft); font-size:.95rem; line-height:1.65; max-width:52ch; }

@media (max-width:880px){
  .ledger-row{ grid-template-columns:70px 1fr; }
  .ledger-desc{ grid-column:2/-1; margin-top:.35rem; }
}
@media (max-width:640px){
  .ledger-row{ grid-template-columns:1fr; gap:.4rem; padding:1.5rem 0; }
  .ledger-desc{ grid-column:auto; margin-top:.25rem; }
}

/* ===================== Process / timeline ===================== */
.timeline{ position:relative; }
.timeline-track{ position:absolute; left:23px; top:8px; bottom:8px; width:1px; background:var(--line-strong); overflow:hidden; }
.timeline-fill{ position:absolute; left:0; top:0; width:100%; height:0%; background:var(--accent); }
.stage{ position:relative; display:flex; gap:2rem; padding-bottom:3rem; }
.stage:last-child{ padding-bottom:0; }
.stage-marker{
  position:relative; z-index:1; flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.78rem; color:var(--ink-soft);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.section-alt .stage-marker{ background:var(--paper); }
.stage-body h3{ font-family:var(--display); font-weight:600; letter-spacing:-.005em; font-size:1.35rem; margin-bottom:.5rem; }
.stage-body p{ color:var(--ink-soft); max-width:520px; line-height:1.65; }

@media (max-width:640px){
  .stage{ gap:1.25rem; }
  .stage-marker{ width:40px; height:40px; font-size:.7rem; }
}

/* ===================== Pricing ===================== */
.tiers{ display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line-strong); }
.tier{
  padding:2.5rem; border-right:1px solid var(--line-strong); display:flex; flex-direction:column;
  position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tier:hover{ transform:translateY(-6px); box-shadow:0 20px 32px -20px rgba(26,24,22,.3); z-index:1; }
.tier:last-child{ border-right:none; }
.tier-tag{ font-family:var(--mono); font-weight:600; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1rem; display:block; }
.tier h3{ font-family:var(--display); font-weight:600; letter-spacing:-.01em; font-size:1.6rem; margin-bottom:.6rem; }
.tier-desc{ color:var(--ink-soft); font-size:.9rem; margin-bottom:1.5rem; min-height:2.6em; line-height:1.5; }
.feature-list{ margin:0 0 2rem; flex:1; }
.feature-list li{ display:flex; align-items:center; gap:.5rem; padding:.55rem 0; font-size:.9rem; color:var(--ink-soft); opacity:0; }
.tier.is-visible .feature-list li{ animation:featureIn .5s var(--ease) forwards; }
.tier.is-visible .feature-list li:nth-child(1){ animation-delay:.2s; }
.tier.is-visible .feature-list li:nth-child(2){ animation-delay:.3s; }
.tier.is-visible .feature-list li:nth-child(3){ animation-delay:.4s; }
.tier.is-visible .feature-list li:nth-child(4){ animation-delay:.5s; }
.tier.is-visible .feature-list li:nth-child(5){ animation-delay:.6s; }
@keyframes featureIn{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:translateX(0); } }
.feature-list .dots{ flex:1 1 auto; border-bottom:1px solid var(--line); margin-bottom:4px; }
.feature-list .check{ color:var(--accent); font-family:var(--mono); flex:0 0 auto; font-size:.85rem; }
.tier .btn{ align-self:flex-start; }

@media (max-width:880px){
  .tiers{ grid-template-columns:1fr; }
  .tier{ border-right:none; border-bottom:1px solid var(--line-strong); }
  .tier:last-child{ border-bottom:none; }
}

/* ===================== Contact ===================== */
.contact-grid{ display:flex; justify-content:center; }
.contact-direct{
  width:100%; max-width:520px; border:1px solid var(--line-strong);
  background:var(--cream); padding:clamp(2rem,4vw,3rem);
}
.contact-direct .eyebrow{ margin-bottom:1.5rem; display:block; }
.contact-lines li{ display:flex; align-items:baseline; gap:.5rem; padding:1.05rem 0; border-bottom:1px solid var(--line); }
.contact-lines li:last-child{ border-bottom:none; }
.contact-label{ font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); flex:0 0 auto; }
.contact-lines .dots{ flex:1 1 auto; border-bottom:1px solid var(--line); margin-bottom:4px; }
.contact-value{ font-family:var(--mono); font-weight:500; font-size:.9rem; color:var(--ink); text-decoration:none; flex:0 0 auto; position:relative; }
.contact-value::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--accent);
  transition:right .3s var(--ease);
}
.contact-value:hover{ color:var(--accent); }
.contact-value:hover::after{ right:0; }

/* ===================== Footer ===================== */
.site-footer{ background:var(--cream); border-top:1px solid var(--line-strong); padding-top:4.5rem; text-align:center; }
.footer-inner{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; }
.footer-brand .brand{ justify-content:center; }
.brand-tagline{ display:block; font-family:var(--body-font); font-style:italic; font-size:.8rem; color:var(--ink-faint); margin-top:.3rem; }
.footer-brand p{ color:var(--ink-soft); font-size:.9rem; margin:.85rem auto 0; max-width:220px; line-height:1.5; }
.footer-col{ display:flex; flex-direction:column; align-items:center; gap:.65rem; }
.footer-heading{ font-family:var(--mono); font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.4rem; }
.footer-col a{ color:var(--ink-soft); text-decoration:none; font-size:.9rem; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ border-top:1px solid var(--line); padding:1.5rem 0; }
.footer-bottom p{ font-family:var(--mono); font-size:.75rem; color:var(--ink-faint); }

@media (max-width:760px){ .footer-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-inner{ grid-template-columns:1fr; gap:2rem; } }

/* ===================== Reveal / motion ===================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.ledger-row.reveal:nth-child(1){ transition-delay:0ms; }
.ledger-row.reveal:nth-child(2){ transition-delay:60ms; }
.ledger-row.reveal:nth-child(3){ transition-delay:120ms; }
.ledger-row.reveal:nth-child(4){ transition-delay:180ms; }
.ledger-row.reveal:nth-child(5){ transition-delay:240ms; }
.ledger-row.reveal:nth-child(6){ transition-delay:300ms; }
.ledger-row.reveal:nth-child(7){ transition-delay:360ms; }
.ledger-row.reveal:nth-child(8){ transition-delay:420ms; }

.stage.reveal:nth-child(2){ transition-delay:0ms; }
.stage.reveal:nth-child(3){ transition-delay:70ms; }
.stage.reveal:nth-child(4){ transition-delay:140ms; }
.stage.reveal:nth-child(5){ transition-delay:210ms; }
.stage.reveal:nth-child(6){ transition-delay:280ms; }

.tier.reveal:nth-child(1){ transition-delay:0ms; }
.tier.reveal:nth-child(2){ transition-delay:90ms; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.load-in{ opacity:0; animation:fadeUp .7s var(--ease) forwards; }
.hero .eyebrow.load-in{ animation-delay:.05s; }
.hero h1.load-in{ animation-delay:.25s; }
.hero .lead.load-in{ animation-delay:.4s; }
.hero .hero-cta.load-in{ animation-delay:.5s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  .reveal, .load-in{
    animation:none !important; transition:none !important;
    opacity:1 !important; transform:none !important;
  }
  .hero-card{ transition:none !important; transform:none !important; }
  .feature-list li{ opacity:1 !important; animation:none !important; transform:none !important; }
  .timeline-fill{ transition:none !important; height:100% !important; }
  .tier:hover, .btn:hover, .ledger-row::before{ transition:none !important; }
}