/* ══════════════════════════════════════════════════════════
   home.css — homepage only
   Requires base.css to be loaded first
   ══════════════════════════════════════════════════════════ */

html{ scroll-behavior:smooth; }

.wrap{
  width:100%; max-width:1140px; margin:0 auto;
  padding-left:max(28px, env(safe-area-inset-left));
  padding-right:max(28px, env(safe-area-inset-right));
}

/* ═══════════ NAV ═══════════ */
nav{
  position:absolute; top:0; left:0; right:0; z-index:20;
  padding-top:env(safe-area-inset-top);
}
/* NOTE: this element carries both .wrap and .nav-in, so only the vertical
   padding may be set here. A `padding: 26px 0` shorthand would reset the
   horizontal padding .wrap supplies and push the nav to the screen edge. */
.nav-in{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:26px; padding-bottom:26px; gap:16px;
}
.nav-link{
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cream); text-decoration:none; white-space:nowrap;
  padding:11px 18px; min-height:44px; display:inline-flex; align-items:center;
  border:1px solid rgba(237,232,220,.34); border-radius:3px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.nav-link:hover, .nav-link:active{
  background:rgba(237,232,220,.1); border-color:rgba(237,232,220,.6);
}

/* ═══════════ HERO ═══════════ */
header.hero{
  background:var(--forest); color:var(--cream);
  position:relative; overflow:hidden;
  padding:150px 0 96px;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
header.hero::before{
  content:''; position:absolute; right:-14%; top:-24%;
  width:min(720px,105vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 38%, rgba(168,128,47,.26), transparent 62%);
}
header.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(237,232,220,.05) 1px, transparent 1px);
  background-size:100% 64px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 40%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 40%, transparent);
}
.hero-in{ position:relative; z-index:2; max-width:820px; }

.kicker{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(237,232,220,.55);
  display:flex; align-items:center; gap:14px; margin-bottom:26px;
}
.kicker::after{ content:''; width:72px; height:1px; background:rgba(237,232,220,.3); }

h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(40px, 7.4vw, 84px); line-height:1.02; letter-spacing:-.025em;
}
h1 em{ font-style:italic; color:var(--brass-lit); }

.lede{
  margin-top:30px; max-width:52ch;
  font-size:clamp(16px, 2.1vw, 19px); color:rgba(237,232,220,.76); line-height:1.65;
}

.hero-meta{
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(237,232,220,.18);
  display:flex; flex-wrap:wrap; gap:14px 40px;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(237,232,220,.5);
}

/* ═══════════ CAPABILITIES ═══════════ */
section.caps{ padding:96px 0 88px; }

.sec-head{ max-width:640px; margin-bottom:56px; }
h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(27px, 3.8vw, 38px); line-height:1.16; letter-spacing:-.018em;
}
.sec-head p{ margin-top:14px; color:var(--ink-soft); font-size:16px; }

.cap-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.cap{ background:var(--paper); padding:38px 32px 42px; transition:background .3s var(--ease); }
.cap:hover{ background:#FFFDF9; }
.cap .num{
  font-family:var(--serif); font-size:13px; color:var(--brass);
  letter-spacing:.06em; display:block; margin-bottom:20px;
}
.cap h3{ font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:-.008em; }
.cap p{ margin-top:12px; color:var(--ink-soft); font-size:14.5px; line-height:1.68; }

/* ═══════════ APPROACH ═══════════ */
section.approach{
  background:var(--paper-warm);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:88px 0;
}
.approach-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:start; }
.approach blockquote{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(22px, 3vw, 31px); line-height:1.32; letter-spacing:-.014em;
}
.approach blockquote::before{ content:'\201C'; color:var(--brass); margin-right:2px; }
.approach blockquote::after{ content:'\201D'; color:var(--brass); }

.approach-notes{ display:grid; gap:26px; }
.note{ padding-left:22px; border-left:2px solid var(--brass); }
.note h4{
  font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink);
}
.note p{ margin-top:7px; color:var(--ink-soft); font-size:14.5px; }

/* ═══════════ PAY BAND ═══════════ */
section.pay{
  background:var(--forest-deep); color:var(--cream);
  padding:76px 0; position:relative; overflow:hidden;
}
section.pay::before{
  content:''; position:absolute; left:-8%; bottom:-52%;
  width:min(560px,100vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(168,128,47,.2), transparent 64%);
}
.pay-in{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:44px; flex-wrap:wrap;
}
.pay-in h2{ color:var(--cream); }
.pay-in p{ margin-top:12px; color:rgba(237,232,220,.68); font-size:15.5px; max-width:46ch; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:52px; padding:15px 30px;
  background:var(--brass-lit); color:var(--forest-deep);
  font-size:14.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; border-radius:3px; white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.18);
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), background .2s;
}
.btn:hover{ background:#E5C883; box-shadow:0 10px 26px -10px rgba(217,184,114,.6); }
.btn:active{ transform:translateY(1px); }
.btn svg{ flex:none; }

/* ═══════════ FOOTER ═══════════ */
footer{ padding:52px 0; padding-bottom:calc(52px + env(safe-area-inset-bottom)); }
.foot-in{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot-name{ font-family:var(--serif); font-size:16px; }
.foot-meta{ font-size:12.5px; color:var(--ink-faint); display:flex; gap:22px; flex-wrap:wrap; }
.foot-meta a{
  color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:1px;
}
.foot-meta a:hover{ color:var(--forest); border-color:var(--forest); }

/* ═══════════ SCROLL REVEAL ═══════════ */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.09s }
.reveal.d2{ transition-delay:.18s }
.reveal.d3{ transition-delay:.27s }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:980px){
  .cap-grid{ grid-template-columns:1fr; }
  .approach-grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:700px){
  .wrap{
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));
  }
  .nav-in{ padding-top:18px; padding-bottom:18px; }
  .nav-link{ font-size:11.5px; padding:10px 14px; letter-spacing:.05em; }
  header.hero{ padding:118px 0 68px; }
  .hero-meta{ margin-top:36px; gap:10px 26px; font-size:11px; }
  section.caps{ padding:64px 0 60px; }
  .sec-head{ margin-bottom:36px; }
  .cap{ padding:30px 24px 34px; }
  section.approach{ padding:60px 0; }
  section.pay{ padding:56px 0; }
  .pay-in{ gap:30px; }
  .btn{ width:100%; }
  footer{ padding:38px 0; }
  .foot-in{ flex-direction:column; align-items:flex-start; gap:14px; }
}