/* =========================================================
   Savaya — shared stylesheet
   Edit colors and fonts in the :root block below.
   ========================================================= */

:root{
  /* ---- Colors (change these to rebrand the whole site) ---- */
  --paper:      #FBFAF6;   /* page background, warm off-white */
  --paper-alt:  #F1EFE8;   /* alternating section background  */
  --ink:        #1A1815;   /* headlines                       */
  --body:       #35322C;   /* body text                       */
  --muted:      #6F6B62;   /* labels, captions                */
  --rule:       #DEDBD1;   /* hairlines                       */
  --accent:     #2C4433;   /* forest green: numbers, labels   */
  --accent-lt:  #92AE9B;   /* same green, for dark backgrounds*/
  --dark:       #14140F;   /* footer                          */

  /* ---- Type ---- */
  --display: "EB Garamond", Garamond, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", Helvetica, Arial, sans-serif;

  /* ---- Layout ---- */
  --max: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-y: clamp(72px, 11vw, 152px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--display);
  font-size:18.5px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gutter); }

/* ---------------- Typography ---------------- */

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  font-weight:400;
  letter-spacing:-0.015em;
  line-height:1.06;
  margin:0;
}
h1{ font-size:clamp(3rem, 7.6vw, 6rem); letter-spacing:-0.008em; line-height:1.03; }
h2{ font-size:clamp(2.2rem, 5vw, 3.8rem); line-height:1.08; }
h3{ font-size:clamp(1.36rem, 2.1vw, 1.7rem); line-height:1.18; letter-spacing:-0.008em; }
h4{ font-family:var(--sans); font-size:1.02rem; font-weight:600; letter-spacing:-0.005em; color:var(--ink); }

em{ font-style:italic; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.lead{
  font-size:clamp(1.16rem, 1.8vw, 1.4rem);
  line-height:1.58;
  color:var(--body);
  max-width:62ch;
}

.label{
  font-family:var(--sans);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0;
}

.muted{ color:var(--muted); }
.small{ font-size:.9rem; line-height:1.6; }

/* ---------------- Header ---------------- */

.topbar{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.topbar.is-stuck{ border-bottom-color:var(--rule); }

.topbar-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:76px;
}

.brand{
  font-family:var(--display);
  font-size:1.45rem;
  color:var(--ink);
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.brand span{ color:var(--accent); }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); }
.nav a{
  font-family:var(--sans); font-size:.85rem; color:var(--body); position:relative; padding:4px 0;
  transition:color .2s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right .32s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"]{ color:var(--ink); }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  padding:12px 22px; border-radius:0;
  border:1px solid var(--ink); color:var(--ink); background:transparent;
  cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--accent); border-color:var(--accent); }
.btn-ghost{ border-color:var(--rule); color:var(--body); }
.btn-ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.burger{
  display:none; width:42px; height:42px; border:1px solid var(--rule);
  border-radius:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger i{ display:block; width:15px; height:1px; background:var(--ink); transition:transform .3s ease, opacity .2s ease; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-3px) rotate(-45deg); }

.mobile-nav{ display:none; border-top:1px solid var(--rule); background:var(--paper); }
.mobile-nav.open{ display:block; }
.mobile-nav a{
  display:block; padding:16px 0; border-bottom:1px solid var(--rule);
  font-size:1.05rem; color:var(--ink);
}
.mobile-nav a:last-of-type{ border-bottom:0; }

@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .topbar-in{ gap:12px; }
  .topbar-in > .btn{ margin-left:auto; }
}
@media (max-width:400px){
  .topbar-in > .btn{ padding:10px 16px; font-size:.8rem; }
}

/* ---------------- Hero ---------------- */

.hero{ padding-top:clamp(64px,11vw,132px); padding-bottom:clamp(56px,8vw,104px); }
.hero .label{ margin-bottom:26px; }
.hero h1{ max-width:19ch; }
.hero h1 em{ color:var(--accent); }
.hero-body{
  margin-top:clamp(30px,4vw,48px);
  display:grid; grid-template-columns:1fr minmax(0,480px);
  gap:clamp(28px,5vw,72px); align-items:end;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
@media (max-width:860px){ .hero-body{ grid-template-columns:1fr; align-items:start; } }

/* ---------------- Sections ---------------- */

.section{ padding-block:var(--sec-y); }
.section-alt{ background:var(--paper-alt); }
.section-line{ border-top:1px solid var(--rule); }

.sec-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(24px,5vw,72px); align-items:start;
  padding-bottom:clamp(38px,5vw,64px);
}
.sec-num{
  font-family:var(--sans); font-size:.65rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:16px;
}
@media (max-width:860px){ .sec-head{ grid-template-columns:1fr; } }

/* ---------------- Grids & cards ---------------- */

.grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid > .cell{ background:var(--paper); padding:clamp(26px,3.4vw,44px); }
.section-alt .grid > .cell{ background:var(--paper-alt); }

.cell .cnum{
  font-family:var(--display); font-size:2.1rem; color:var(--accent);
  line-height:1; display:block; margin-bottom:20px;
}
.cell h3{ margin-bottom:12px; }
.cell p{ font-size:.96rem; color:var(--body); }

@media (max-width:960px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

/* Service / capability cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px); }
.card{
  border:1px solid var(--rule); background:var(--paper);
  padding:clamp(24px,2.8vw,36px);
  display:flex; flex-direction:column; gap:14px;
  transition:border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.card:hover{ border-color:var(--ink); transform:translateY(-3px); box-shadow:0 14px 40px -28px rgba(20,19,15,.55); }
.card .tag{
  font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.card p{ font-size:.95rem; margin:0; }
.card .meta{ font-family:var(--sans);
  margin-top:auto; padding-top:18px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:14px;
  font-size:.8rem; color:var(--muted);
}
@media (max-width:960px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cards{ grid-template-columns:1fr; } }

/* ---------------- Numbered list rows ---------------- */

.rows{ border-top:1px solid var(--rule); }
.row{
  display:grid; grid-template-columns:64px minmax(0,300px) minmax(0,1fr);
  gap:clamp(16px,3vw,48px);
  padding-block:clamp(26px,3.2vw,40px);
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.row .rn{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.16em; color:var(--accent); padding-top:8px; }
.row p{ font-size:.97rem; margin:0; }
@media (max-width:800px){
  .row{ grid-template-columns:1fr; gap:12px; }
  .row .rn{ padding-top:0; }
}

/* ---------------- Allocation / mix bars ---------------- */

.mix{ display:flex; flex-direction:column; gap:2px; }
.mix-row{
  display:grid; grid-template-columns:minmax(0,270px) minmax(0,1fr) 64px;
  gap:clamp(14px,2.5vw,32px); align-items:center;
  padding-block:20px; border-bottom:1px solid var(--rule);
}
.mix-row:first-child{ border-top:1px solid var(--rule); }
.mix-row h4{ margin:0; }
.mix-track{ height:2px; background:var(--rule); position:relative; overflow:hidden; }
.mix-fill{
  position:absolute; inset:0 auto 0 0; background:var(--accent);
  width:0; transition:width 1.15s cubic-bezier(.22,.61,.36,1);
}
.is-visible .mix-fill{ width:var(--w); }
.mix-val{ font-family:var(--display); font-size:1.35rem; color:var(--ink); text-align:right; }
@media (max-width:760px){
  .mix-row{ grid-template-columns:1fr 56px; }
  .mix-track{ grid-column:1 / -1; }
}

/* ---------------- Stats ---------------- */

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--rule); border-block:1px solid var(--rule);
}
.stat{ background:var(--paper); padding:clamp(24px,3vw,38px) clamp(18px,2.4vw,32px); }
.section-alt .stat{ background:var(--paper-alt); }
.stat .n{ font-family:var(--display); font-size:clamp(2.1rem,3.6vw,3.1rem); color:var(--ink); line-height:1; display:block; }
.stat .t{ font-family:var(--sans); font-size:.8rem; color:var(--muted); margin-top:12px; display:block; }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------------- Quote / pull ---------------- */

.pull{
  font-family:var(--display); font-size:clamp(1.6rem,3.2vw,2.5rem);
  line-height:1.24; color:var(--ink); max-width:26ch; letter-spacing:-0.015em;
}
.pull em{ color:var(--accent); }

/* ---------------- CTA band ---------------- */

.cta{ background:var(--dark); color:#EDEAE1; padding-block:clamp(64px,9vw,120px); }
.cta h2{ color:#FBFAF7; max-width:22ch; }
.cta h2 em{ color:var(--accent-lt); }
.cta p{ color:#A5A093; max-width:52ch; margin-top:22px; }
.cta .btn{ border-color:rgba(251,250,247,.32); color:#FBFAF7; margin-top:32px; }
.cta .btn:hover{ background:#FBFAF7; color:var(--dark); border-color:#FBFAF7; }

/* ---------------- Footer ---------------- */

.footer{ background:var(--dark); color:#8F8B7E; padding-top:clamp(56px,7vw,88px); padding-bottom:36px; font-size:.9rem; }
.footer-top{
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid rgba(251,250,247,.11);
}
.footer .brand{ color:#FBFAF7; }
.footer .brand span{ color:var(--accent-lt); }
.footer h5{
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-lt); margin:0 0 18px;
}
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer a{ color:#8F8B7E; transition:color .2s ease; }
.footer a:hover{ color:#FBFAF7; }
.footer .blurb{ margin-top:18px; max-width:38ch; line-height:1.65; }
.footer-bot{
  font-family:var(--sans); padding-top:28px; display:flex; flex-wrap:wrap; gap:16px 32px;
  justify-content:space-between; font-size:.8rem;
}
.disclaimer{
  font-family:var(--sans); margin-top:26px; padding-top:24px; border-top:1px solid rgba(251,250,247,.11);
  font-size:.74rem; line-height:1.7; color:#6E6B60; max-width:100ch;
}
@media (max-width:880px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------------- Page hero (interior pages) ---------------- */

.page-hero{ padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(44px,6vw,80px); border-bottom:1px solid var(--rule); }
.page-hero h1{ max-width:22ch; }
.page-hero h1 em{ color:var(--accent); }
.page-hero .lead{ margin-top:clamp(22px,3vw,34px); }

/* ---------------- Forms ---------------- */

.form{ display:grid; gap:20px; }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field input,.field textarea,.field select{
  font-family:var(--display); font-size:1rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:12px 0; border-radius:0; transition:border-color .25s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-bottom-color:var(--accent); }
.field textarea{ resize:vertical; min-height:120px; }
.form > button{ justify-self:start; margin-top:8px; }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .form-2{ grid-template-columns:1fr; } }

/* ---------------- Contact detail list ---------------- */

.details{ border-top:1px solid var(--rule); }
.detail{ padding-block:22px; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:150px 1fr; gap:20px; }
.detail dt{ font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.detail dd{ margin:0; color:var(--ink); }
@media (max-width:600px){ .detail{ grid-template-columns:1fr; gap:6px; } }

/* ---------------- Legal prose ---------------- */

.prose{ max-width:74ch; }
.prose h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin-top:clamp(44px,5vw,68px); margin-bottom:16px; }
.prose h2:first-child{ margin-top:0; }
.prose p,.prose li{ font-size:1rem; }
.prose ul{ padding-left:22px; margin:0 0 1.15em; }
.prose li{ margin-bottom:8px; }

/* ---------------- Scroll reveal ---------------- */

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .mix-fill{ transition:none; }
}

/* ---------------- Utilities ---------------- */

.mt-s{ margin-top:18px; } .mt-m{ margin-top:32px; } .mt-l{ margin-top:clamp(38px,5vw,64px); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:200; border-radius:4px; }