/* =====================================================================
   EVERCREST ADVISORS — Design System
   Tokens + base + components. Shared across all comps.
   Honors the existing logo palette (slate + steel blue) with a warm
   off-white ground and a restrained terracotta accent from the brand
   theme palette (the "brass" role, kept to ~5% of any page).
   ===================================================================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Inter:wght@400;500;600&display=swap');

:root{
  /* Brand — from the logo */
  --slate:        #465563;   /* primary: headings, nav, primary buttons */
  --slate-deep:   #38454F;   /* deepened slate for max-contrast headings */
  --steel:        #658DAD;   /* secondary: section depth, the mountain mark */
  --steel-soft:   #8AA8C0;   /* lighter steel for fills / strokes */

  /* Accent — terracotta from the brand theme palette, used sparingly */
  --accent:       #885344;
  --accent-deep:  #6F4234;

  /* Neutrals — warm */
  --sand:         #FAF8F4;   /* page background, warmer than white */
  --sand-2:       #F2EDE4;   /* alt section band */
  --paper:        #FFFFFF;   /* cards */
  --ash:          #43433F;   /* body text */
  --ash-soft:     #6B6B66;   /* muted text, captions */
  --hairline:     #E4DDD0;   /* borders + dividers */
  --hairline-2:   #EDE7DB;

  /* Type */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rhythm */
  --maxw: 1140px;
  --gut: clamp(20px, 5vw, 64px);
  --r-card: 8px;
  --r-btn: 6px;

  /* Section vertical rhythm */
  --sec-y: clamp(48px, 6vw, 88px);
}

/* ---- Reset / base ---- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ash);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--steel); color:#fff; }

/* ---- Headings ---- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--slate-deep);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.6rem, 5.4vw, 4.1rem); }
h2{ font-size:clamp(2rem, 3.6vw, 2.9rem); }
h3{ font-size:1.45rem; line-height:1.2; }
h4{ font-size:1.12rem; }
p{ margin:0; text-wrap:pretty; }

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec-y); }
.band-sand2{ background:var(--sand-2); }
.band-slate{ background:var(--slate-deep); color:#E8EDF1; }
.band-slate h1,.band-slate h2,.band-slate h3,.band-slate h4{ color:#fff; }

.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--accent); display:inline-block;
}
.lede{ font-size:1.22rem; line-height:1.6; color:var(--ash); }
.muted{ color:var(--ash-soft); }
.hairline{ height:1px; background:var(--hairline); border:0; margin:0; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-weight:500; font-size:.97rem;
  padding:.78rem 1.4rem; border-radius:var(--r-btn);
  border:1px solid transparent; transition:.18s ease;
  white-space:nowrap;
}
.btn .arr{ transition:transform .18s ease; }
.btn:hover .arr{ transform:translateX(3px); }
.btn-primary{ background:var(--slate); color:#fff; }
.btn-primary:hover{ background:var(--slate-deep); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-deep); }
.btn-ghost{ background:transparent; color:var(--slate); border-color:var(--hairline); }
.btn-ghost:hover{ border-color:var(--slate); background:#fff; }
.btn-onslate{ background:#fff; color:var(--slate-deep); }
.btn-onslate:hover{ background:#EAF0F5; }
.btn-onslate-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn-onslate-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.link-accent{ color:var(--accent); font-weight:500; display:inline-flex; align-items:center; gap:.4rem; }
.link-accent .arr{ transition:transform .18s ease; }
.link-accent:hover .arr{ transform:translateX(3px); }

/* ---- Cards ---- */
.card{
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  padding:2rem;
  transition:.2s ease;
}
.card:hover{ border-color:var(--steel-soft); }

/* ---- Nav ---- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,248,244,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-logo{ height:34px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:.95rem; font-weight:500; color:var(--slate); position:relative; padding-block:.4rem; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:1.3rem; }
.nav-toggle{ display:none; background:none; border:0; padding:8px; color:var(--slate); }

/* mobile nav */
.mobile-panel{ display:none; }

@media (max-width:960px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .mobile-panel{
    display:block; position:fixed; inset:72px 0 auto 0; z-index:49;
    background:var(--sand); border-bottom:1px solid var(--hairline);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.22s ease;
  }
  .mobile-panel.open{ transform:none; opacity:1; pointer-events:auto; }
  .mobile-panel ul{ list-style:none; margin:0; padding:14px var(--gut) 26px; }
  .mobile-panel li{ border-bottom:1px solid var(--hairline); }
  .mobile-panel a{ display:block; padding:16px 2px; font-weight:500; color:var(--slate); font-size:1.05rem; }
  .mobile-panel .btn{ width:100%; justify-content:center; margin-top:18px; }
}

/* ---- Footer ---- */
.footer{ background:var(--slate-deep); color:#C9D3DC; }
.footer a{ color:#C9D3DC; }
.footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.15fr 1.2fr 1.15fr 1.3fr; gap:32px; padding-block:clamp(40px,5vw,60px) 32px; }
.footer h5{ font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#8FA2B2; margin:0 0 .85rem; font-weight:600; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.footer ul a{ font-size:.97rem; }
.footer-logo{ height:52px; width:auto; max-width:none; align-self:flex-start; margin-bottom:1rem; filter:brightness(0) invert(1); opacity:.92; }
.footer-creds{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; font-size:.82rem; color:#8FA2B2; letter-spacing:.02em; }
.footer-fine{ padding-block:12px 26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.85rem; color:#8FA2B2; }
.news-input{ display:flex; gap:8px; margin-top:6px; }
.news-input input{ flex:1; min-width:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:var(--r-btn); padding:.7rem .9rem; font-family:var(--sans); font-size:.92rem; }
.news-input input::placeholder{ color:#8FA2B2; }
.news-input input:focus{ outline:none; border-color:var(--steel); }

@media (max-width:880px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-fine{ flex-direction:column; gap:8px; }
}

/* ---- Thin line-icon sizing ---- */
.icon{ width:30px; height:30px; stroke:var(--steel); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.icon-sm{ width:20px; height:20px; stroke-width:1.6; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}