/* ============================================================
   ASHCOMBE & VALE : Family Office / Wealth Advisory Template
   Design system: "Ledger" - quiet stone paper, forest ink, oxblood accent
   ============================================================ */

:root{
  --ink:          oklch(18% 0.015 40);
  --ink-soft:     oklch(32% 0.012 40);
  --paper:        oklch(95% 0.005 85);
  --paper-2:      oklch(91% 0.008 80);
  --forest:       oklch(28% 0.05 155);
  --forest-2:     oklch(20% 0.04 155);
  --oxblood:      oklch(33% 0.11 25);
  --oxblood-deep: oklch(24% 0.09 25);
  /* Lighter oxblood tint for the small set of accents that sit on the dark
     forest sections (eyebrow labels, card links). The two spec'd oxblood
     tokens are both dark and read as near-invisible on the dark forest
     background, so this tint keeps the same hue family while restoring
     the contrast the old lighter gold accent tone provided there. */
  --oxblood-light: oklch(68% 0.11 25);
  --stone:        oklch(60% 0.01 60);
  --line:         oklch(88% 0.006 80);
  --white:        #FFFFFF;

  --font-display: 'Petrona', 'Georgia', serif;
  --font-body:    'Hanken Grotesk', -apple-system, sans-serif;
  --font-mono:    'Martian Mono', 'Courier New', monospace;

  --max: 1180px;
  --pad: clamp(24px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; color:var(--ink); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--oxblood);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; transition-delay:0ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--oxblood);
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:oklch(95% 0.005 85 / 0.92);
  backdrop-filter:blur(8px);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.nav-mark{
  font-family:var(--font-display);
  font-size:20px; font-weight:600; letter-spacing:0.01em;
}
.nav-mark span{ color:var(--oxblood); }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size:14px; color:var(--ink-soft);
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:border-color .2s, color .2s;
}
.nav-links a:hover, .nav-links a.active{ color:var(--forest); border-color:var(--oxblood); }
.nav-cta{
  font-size:13px; padding:10px 20px;
  border:1px solid var(--ink); border-radius:2px;
  transition:background .2s, color .2s;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--ink); color:var(--paper); }
.nav-toggle{ display:none; background:none; border:0; padding:8px; }
.nav-toggle span{ display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:76px 0 0 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px var(--pad) 24px; transform:translateY(-8px);
    opacity:0; visibility:hidden; transition:opacity .2s, transform .2s, visibility .2s;
  }
  .nav-links.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav-links a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav-links .nav-cta{ margin-top:16px; text-align:center; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding:96px 0 64px; }
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:end;
}
.hero h1{
  font-size:clamp(40px, 5.4vw, 68px);
  line-height:1.06; letter-spacing:-0.01em;
  margin-top:18px;
}
.hero-lede{
  max-width:34ch; color:var(--ink-soft); font-size:17px; margin-top:22px;
}
.hero-side{
  border-left:1px solid var(--line); padding-left:32px;
  font-size:15px; color:var(--stone);
}
.hero-side p + p{ margin-top:14px; }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-side{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:24px; }
}

/* ---------- Ledger stat strip (signature element) ---------- */
.ledger{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:44px 0;
}
.ledger-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.ledger-item{ position:relative; }
.ledger-figure{
  font-family:var(--font-mono); font-size:clamp(24px,2.6vw,32px);
  color:var(--forest); letter-spacing:-0.01em;
}
.ledger-rule{
  /* Animate transform, not width: width triggers layout on every frame (taste-skill 6.A:
     "Animate ONLY transform and opacity. Never animate top, left, width, height."). Same
     visual fill effect via a scaleX transform pinned to the left edge, GPU-composited. */
  height:1px; background:var(--oxblood); margin:14px 0 10px;
  width:100%; transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.ledger-rule.fill{ transform:scaleX(1); }
.ledger-label{
  font-size:12.5px; color:var(--stone); letter-spacing:0.04em; text-transform:uppercase;
}
@media (max-width:760px){ .ledger-grid{ grid-template-columns:repeat(2,1fr); row-gap:36px; } }

/* ---------- Section basics ---------- */
.section{ padding:96px 0; }
.section-tight{ padding:64px 0; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(28px,3.2vw,40px); margin-top:14px; line-height:1.15; }
.section-head p{ color:var(--ink-soft); margin-top:16px; font-size:16px; }
.on-forest{ background:var(--forest); color:var(--paper); }
.on-forest .eyebrow{ color:var(--oxblood-light); }
.on-forest h2, .on-forest h3{ color:var(--paper); }
.on-forest p{ color:oklch(88% 0.02 155); }

/* ---------- Philosophy / quote ---------- */
.quote-block{
  border-left:2px solid var(--oxblood);
  padding-left:32px; max-width:760px;
}
.quote-block p{ font-family:var(--font-display); font-size:clamp(22px,2.4vw,28px); line-height:1.4; color:var(--ink); }
.quote-attr{ margin-top:20px; font-size:14px; color:var(--stone); font-family:var(--font-body); }

/* ---------- Cards / grid ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.grid-3 > *{ background:var(--paper); padding:36px; }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } }

.pillar-index{ font-family:var(--font-mono); color:var(--oxblood); font-size:13px; }
.pillar h3{ font-size:21px; margin-top:14px; }
.pillar p{ margin-top:12px; color:var(--ink-soft); font-size:15px; }
.pillar a.more{ display:inline-block; margin-top:18px; font-size:13.5px; border-bottom:1px solid var(--oxblood); color:var(--forest); }

/* ---------- CTA banner ---------- */
.cta-banner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:56px 0; border-top:1px solid var(--line);
}
.cta-banner h2{ font-size:clamp(24px,2.8vw,34px); max-width:20ch; }
.btn{
  display:inline-block; padding:14px 28px; border-radius:2px; font-size:14px;
  border:1px solid var(--ink); white-space:nowrap;
  transition:background .2s, color .2s;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-solid{ background:var(--forest); border-color:var(--forest); color:var(--paper); }
.btn-solid:hover{ background:var(--forest-2); }
@media (max-width:700px){ .cta-banner{ flex-direction:column; align-items:flex-start; } }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding:56px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; }
.footer h4{ font-size:13px; letter-spacing:0.04em; text-transform:uppercase; color:var(--stone); margin-bottom:16px; font-family:var(--font-body); font-weight:600; }
.footer li{ margin-bottom:10px; font-size:14.5px; }
.footer-mark{ font-family:var(--font-display); font-size:19px; margin-bottom:10px; }
.footer-note{ color:var(--stone); font-size:14px; max-width:32ch; }
.footer-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; font-size:13px; color:var(--stone);
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-bottom{ flex-direction:column; gap:8px; } }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.team-card .avatar{
  width:100%; aspect-ratio:1; background:var(--forest); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:28px;
  overflow:hidden;
}
.team-card .avatar img{ width:100%; height:100%; object-fit:cover; }
.team-card h4{ margin-top:16px; font-size:16px; font-family:var(--font-body); font-weight:600; }
.team-card .role{ font-size:13.5px; color:var(--stone); margin-top:3px; }
@media (max-width:860px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Editorial / section photography ---------- */
.photo-block{
  width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line);
}
.photo-block img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:700px){ .photo-block{ aspect-ratio:4/3; } }

/* ---------- Timeline (real chronology → numbered is justified) ---------- */
.timeline{ border-top:1px solid var(--line); }
.timeline-row{
  display:grid; grid-template-columns:120px 1fr; gap:32px;
  padding:28px 0; border-bottom:1px solid var(--line);
}
.timeline-year{ font-family:var(--font-mono); color:var(--oxblood); font-size:15px; }
.timeline-row h4{ font-size:16.5px; font-family:var(--font-body); font-weight:600; }
.timeline-row p{ margin-top:6px; color:var(--ink-soft); font-size:14.5px; }

/* ---------- Values ledger list ---------- */
.value-row{
  display:grid; grid-template-columns:1fr 3fr; gap:24px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.value-row:first-child{ border-top:1px solid var(--line); }
.value-row h4{ font-size:16px; font-family:var(--font-body); font-weight:600; }
.value-row p{ color:var(--ink-soft); font-size:14.5px; }
@media (max-width:700px){ .value-row{ grid-template-columns:1fr; gap:6px; } }

/* ---------- Fee ledger table ---------- */
.fee-table{ width:100%; border-collapse:collapse; }
.fee-table th{
  text-align:left; font-family:var(--font-body); font-weight:600; font-size:12.5px;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--stone);
  padding-bottom:14px; border-bottom:1px solid var(--ink);
}
.fee-table td{ padding:20px 0; border-bottom:1px solid var(--line); font-size:15px; vertical-align:top; }
.fee-table td:last-child, .fee-table th:last-child{ text-align:right; font-family:var(--font-mono); color:var(--forest); }
.fee-table .fee-name{ font-weight:600; }
.fee-table .fee-desc{ color:var(--stone); font-size:13.5px; margin-top:4px; }
@media (max-width:700px){
  .fee-table thead{ display:none; }
  .fee-table tr{ display:block; padding:18px 0; border-bottom:1px solid var(--line); }
  .fee-table td{ display:block; border:0; padding:2px 0; }
  .fee-table td:last-child{ text-align:left; margin-top:8px; }
}

/* ---------- Insights (blog) ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.post-card{ background:var(--paper); padding:36px; display:flex; flex-direction:column; height:100%; }
.post-card.feature{ grid-column:1/-1; padding:44px; }
.post-meta{ font-family:var(--font-mono); font-size:12px; color:var(--stone); letter-spacing:0.03em; }
.post-card h3{ font-size:22px; margin-top:14px; }
.post-card.feature h3{ font-size:28px; }
.post-card p.excerpt{ margin-top:12px; color:var(--ink-soft); font-size:14.5px; flex:1; }
.post-card a.read{ margin-top:18px; font-size:13.5px; border-bottom:1px solid var(--oxblood); align-self:flex-start; color:var(--forest); }
@media (max-width:860px){ .post-grid{ grid-template-columns:1fr; } }

/* ---------- Article page ---------- */
.article-head{ max-width:760px; margin:0 auto; text-align:left; }
.article-head h1{ font-size:clamp(32px,4vw,46px); margin-top:16px; line-height:1.15; }
.article-body{ max-width:680px; margin:48px auto 0; font-size:17px; }
.article-body p{ margin-bottom:22px; color:var(--ink-soft); }
.article-body h3{ font-size:22px; margin:36px 0 14px; color:var(--ink); }
.article-body .drop{ font-family:var(--font-mono); font-size:12px; color:var(--stone); letter-spacing:0.05em; text-transform:uppercase; margin:40px auto 0; max-width:680px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.field{ margin-bottom:22px; }
.field label{ display:block; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; color:var(--stone); margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--line); background:var(--white);
  padding:13px 14px; font-family:var(--font-body); font-size:15px; color:var(--ink); border-radius:2px;
}
.field textarea{ min-height:120px; resize:vertical; }
.info-row{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.info-row:first-child{ border-top:1px solid var(--line); }
.info-row h4{ font-size:14px; font-family:var(--font-body); font-weight:600; min-width:110px; }
.info-row p{ color:var(--ink-soft); font-size:14.5px; }
.map-block{
  margin-top:32px; aspect-ratio:16/9; background:var(--paper-2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--stone); font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
}
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- Scroll reveal ---------- */
/* Timing/easing matches the rest of the catalog (Meridian Studio): 0.6s, expo-out
   cubic-bezier(.16,1,.3,1) instead of plain "ease", same motion signature site-wide.
   --i drives a cascade delay for grouped siblings (pillar/post/team cards) so a
   row of cards arrives as a sequence rather than a single flat pop. */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Page header (inner pages) ---------- */
.page-header{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
.page-header h1{ font-size:clamp(34px,4.4vw,52px); margin-top:16px; max-width:16ch; }
.page-header p{ margin-top:18px; max-width:52ch; color:var(--ink-soft); font-size:16px; }