/* Ratio Technologies: shared site styles (draft) */
:root{
  --navy:#14213D;
  --gold:#B08D57;
  --gold-bright:#C9A876;
  --gold-dark:#8C6D3F;
  --paper:#F7F4EE;
  --paper-line:#E4DDCB;
  --ink:#14213D;
  --muted:#6B6558;
  --body-copy:#2b2a25;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  font-family: Georgia, 'Times New Roman', serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img,svg{max-width:100%;}

/* ---------- Header / Nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,244,238,0.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--paper-line);
}
.nav-inner{
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; row-gap:10px;
  padding:16px 28px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand svg{ display:block; height:26px; width:auto; overflow:visible; }
.brand .wordmark{
  font-family: Georgia, 'Times New Roman', serif;
  font-size:15px; letter-spacing:5px; color:var(--navy); font-weight:400;
}
.brand .wordmark small{
  display:block;
  font-family: Arial, Helvetica, sans-serif;
  font-size:8px; letter-spacing:2.5px; color:var(--gold-dark); font-weight:700; margin-top:2px;
}
nav.main-nav{ display:flex; gap:32px; }
nav.main-nav a{
  font-family: Arial, Helvetica, sans-serif;
  font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase;
  text-decoration:none; color:var(--muted); font-weight:600;
  padding:6px 0; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--navy); border-bottom-color:var(--gold); }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }
.narrow{ max-width:680px; margin:0 auto; padding:0 28px; }
section{ padding:88px 0; }
section.tight{ padding:56px 0; }
.eyebrow{
  font-family: Arial, Helvetica, sans-serif;
  font-size:11.5px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold-dark); font-weight:700; margin-bottom:18px;
}
.rule{ width:48px; height:2px; background:var(--gold); border:none; margin:0 0 26px; }
.rule.center{ margin:0 auto 26px; }

h1{ font-size:44px; font-weight:400; line-height:1.2; color:var(--navy); margin:0 0 22px; }
h2{ font-size:28px; font-weight:400; line-height:1.3; color:var(--navy); margin:0 0 18px; }
h3{ font-size:19px; font-weight:400; line-height:1.35; color:var(--navy); margin:0 0 10px; }
p{ font-size:17px; line-height:1.75; color:var(--body-copy); margin:0 0 20px; }
.lede{ font-size:20px; line-height:1.7; color:var(--body-copy); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
  text-decoration:none;
  padding:15px 30px;
  border-radius:2px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--navy); color:var(--paper); border:1px solid var(--navy); }
.btn-primary:hover{ background:var(--gold-dark); border-color:var(--gold-dark); }
.btn-ghost{ background:transparent; color:var(--navy); border:1px solid var(--navy); }
.btn-ghost:hover{ background:var(--navy); color:var(--paper); }

/* ---------- Hero ---------- */
.hero{
  padding:110px 0 90px;
  border-bottom:1px solid var(--paper-line);
}
.hero .eyebrow{ text-align:left; }
.hero h1{ max-width:760px; }
.hero .lede{ max-width:560px; margin-bottom:36px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- Cards ---------- */
.card-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--paper-line); border:1px solid var(--paper-line);
}
.card{
  background:#fff; padding:36px 34px;
}
.card .num{
  font-family: Arial, Helvetica, sans-serif;
  font-size:11px; letter-spacing:2px; color:var(--gold-dark); font-weight:700; margin-bottom:14px;
}
.card p{ font-size:15.5px; margin-bottom:0; color:var(--muted); }

/* ---------- Stat strip ---------- */
.stat-strip{
  background:var(--navy); color:var(--paper);
}
.stat-strip .wrap{ padding:32px 28px 56px; }
.stat-strip-eyebrow{ color:var(--gold-bright); text-align:center; margin-bottom:40px; font-weight:400; }
.stats-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.stat{ text-align:left; }
.stat .figure{ font-size:34px; color:var(--gold-bright); margin-bottom:8px; }
.stat .label{
  font-family: Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.5;
  letter-spacing:0.5px; color:#cfd3de;
}

/* ---------- Divider band / CTA ---------- */
.cta-band{
  background:#fff; border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
  text-align:center;
}
.cta-band h2{ margin-bottom:14px; }
.cta-band p{ max-width:520px; margin-left:auto; margin-right:auto; }
.cta-pad-lg{ padding:80px 28px; }
.cta-pad-sm{ padding:64px 28px; }

/* ---------- Pull quote ---------- */
.pull{
  font-size:22px; font-style:italic; color:var(--navy); text-align:center; line-height:1.5;
  margin:52px auto; max-width:520px;
  border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); padding:28px 0;
}

/* ---------- Aside box ---------- */
.aside{ background:#fff; border:1px solid var(--paper-line); border-radius:4px; padding:28px 30px; margin:36px 0; }
.aside .aside-label{
  font-family: Arial, Helvetica, sans-serif; font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-dark); font-weight:700; margin-bottom:10px;
}
.aside p{ font-size:16px; margin-bottom:0; color:#3c3a33; }

/* ---------- Mark display ---------- */
.mark-wrap{ display:flex; justify-content:center; margin:0 0 8px; }
.mark-wrap svg{ overflow:visible; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-item{ margin-bottom:28px; }
.contact-item .label{
  font-family: Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-dark); font-weight:700; margin-bottom:6px;
}
.contact-item .value{ font-size:19px; color:var(--navy); }
.contact-item a.value{ text-decoration:none; border-bottom:1px solid var(--paper-line); }
.contact-item a.value:hover{ border-bottom-color:var(--gold); }

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--paper-line); background:#fff;
}
.footer-inner{
  max-width:1080px; margin:0 auto; padding:40px 28px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.footer-inner .brand svg{ height:20px; }
.footer-inner .wordmark{ font-size:12px; letter-spacing:4px; }
.footer-meta{
  font-family: Arial, Helvetica, sans-serif; font-size:11.5px; color:var(--muted); letter-spacing:0.3px;
  text-align:right;
}
.footer-nav{ display:flex; gap:22px; }
.footer-nav a{
  font-family: Arial, Helvetica, sans-serif; font-size:11.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.footer-nav a:hover{ color:var(--navy); }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  section{ padding:56px 0; }
  section.tight{ padding:40px 0; }
  .hero{ padding:64px 0 48px; }
  .cta-pad-lg{ padding:48px 24px; }
  .cta-pad-sm{ padding:40px 24px; }
  h1{ font-size:32px; }
  h2{ font-size:24px; }
  .card-grid{ grid-template-columns:1fr; }
  .card{ padding:28px 24px; }
  .stats-row{ grid-template-columns:1fr; gap:28px; }
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
  nav.main-nav{ gap:18px; }
  .hero-actions .btn{ text-align:center; flex:1 1 auto; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-meta{ text-align:left; }
}

@media (max-width:480px){
  .wrap, .narrow{ padding:0 20px; }
  .nav-inner{ padding:14px 20px; }
  .brand .wordmark{ font-size:13px; letter-spacing:3px; }
  h1{ font-size:27px; }
  h2{ font-size:21px; }
  .lede{ font-size:18px; }
  p{ font-size:16px; }
  .hero{ padding:48px 0 36px; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; text-align:center; }
  .card{ padding:24px 20px; }
  .stat .figure{ font-size:28px; }
  .pull{ font-size:19px; padding:22px 0; }
  .aside{ padding:22px 20px; }
}