/* ==========================================================================
   Sangemeel.LLC — Global Stylesheet
   Palette:  ink #14233B   |  brass #A9793C  |  paper #F6F3EC  |  slate #4B5563
   Type:     "Source Serif 4" (headings)  +  "Inter" (body/UI)
   ========================================================================== */

:root{
  --ink:        #14233B;
  --ink-2:      #1E3355;
  --brass:      #A9793C;
  --brass-dark: #8C6329;
  --paper:      #F6F3EC;
  --paper-2:    #EDE8DB;
  --white:      #FFFFFF;
  --slate:      #4B5563;
  --slate-light:#7A8496;
  --line:       #DDD6C4;
  --good:       #2F6E4E;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --maxw: 1120px;
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--ink-2); text-decoration-color:var(--line); text-underline-offset:3px; }
a:hover{ color:var(--brass-dark); }
h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--ink);
  line-height:1.18;
  margin:0 0 .5em;
  font-weight:600;
}
h1{ font-size:clamp(2rem,4.4vw,3.1rem); letter-spacing:-.01em; }
h2{ font-size:clamp(1.5rem,2.6vw,2.05rem); margin-top:0; }
h3{ font-size:1.3rem; }
p{ margin:0 0 1.1em; color:var(--slate); max-width:70ch; }
ul,ol{ color:var(--slate); padding-left:1.3em; }
li{ margin-bottom:.4em; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
section{ padding:64px 0; }
.section-tight{ padding:40px 0; }
hr.rule{ border:none; border-top:1px solid var(--line); margin:0; }

/* ---------- Header / Nav ---------- */
.site-header{
  background:var(--ink);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--maxw); margin:0 auto;
}
.brand{
  font-family:var(--serif); font-weight:600; font-size:1.28rem;
  color:var(--white); text-decoration:none; letter-spacing:.01em;
}
.brand span{ color:var(--brass); }
.nav-links{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.nav-links a{
  color:#D9DEE8; text-decoration:none; font-size:.95rem; font-weight:500;
}
.nav-links a:hover{ color:var(--white); }
.nav-cta{
  background:var(--brass); color:var(--ink) !important; padding:9px 18px;
  border-radius:var(--radius); font-weight:600 !important;
}
.nav-cta:hover{ background:#BE8A4A; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--white); margin:5px 0; }

@media(max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--ink);
    flex-direction:column; align-items:flex-start; padding:12px 24px 22px;
    display:none; gap:16px; border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-links.open{ display:flex; }
  .nav-cta{ display:inline-block; }
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 100%);
  color:var(--white); padding:76px 0 84px;
}
.hero .eyebrow{
  color:var(--brass); font-weight:600; font-size:.85rem; margin-bottom:14px; display:block;
}
.hero h1{ color:var(--white); max-width:19ch; }
.hero p.lead{ color:#C9D0DE; font-size:1.15rem; max-width:56ch; margin-bottom:1.7em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:var(--radius); font-weight:600; font-size:.98rem;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--brass); color:var(--ink); }
.btn-primary:hover{ background:#BE8A4A; color:var(--ink); }
.btn-outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.btn-outline:hover{ border-color:var(--white); color:var(--white); }
.btn-dark{ background:var(--ink); color:var(--white); }
.btn-dark:hover{ background:var(--ink-2); color:var(--white); }

/* ---------- Cards / Grids ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:860px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px;
}
.card h3{ margin-bottom:.4em; }
.card p{ margin-bottom:0; }

.service-card{
  background:var(--white); border:1px solid var(--line); padding:32px;
  border-top:3px solid var(--brass);
}
.service-card h3{ font-size:1.4rem; }

.stat-row{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); background:var(--white); }
.stat{ flex:1 1 180px; padding:24px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat .num{ font-family:var(--serif); font-size:1.7rem; color:var(--ink); display:block; }
.stat .lbl{ color:var(--slate); font-size:.88rem; }

/* ---------- Steps ---------- */
.steps{ counter-reset:step; display:grid; gap:0; border:1px solid var(--line); background:var(--white); }
.step{
  display:grid; grid-template-columns:64px 1fr; gap:20px; padding:24px 28px;
  border-bottom:1px solid var(--line); align-items:start;
}
.step:last-child{ border-bottom:none; }
.step .num{
  counter-increment:step; font-family:var(--serif); font-size:1.6rem; color:var(--brass);
}
.step .num::before{ content: counter(step); }
.step h3{ margin-bottom:.25em; font-size:1.1rem; }
.step p{ margin-bottom:0; }

/* ---------- Tables ---------- */
table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); }
th,td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); font-size:.95rem; }
th{ background:var(--paper-2); font-family:var(--serif); font-weight:600; color:var(--ink); }
td{ color:var(--slate); }
tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }

/* ---------- Notice / callout boxes ---------- */
.notice{
  border-left:3px solid var(--brass); background:var(--paper-2);
  padding:18px 22px; margin:1.4em 0;
}
.notice p{ margin:0; color:var(--ink); }
.notice.warn{ border-left-color:#A24B3F; }
.notice.good{ border-left-color:var(--good); }
.notice strong{ display:block; margin-bottom:4px; font-family:var(--serif); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding:20px 0; }
.faq-item:first-child{ padding-top:0; }
.faq-item h3{ font-size:1.08rem; margin-bottom:.4em; }
.faq-item p{ margin-bottom:0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ font-size:.85rem; color:var(--slate-light); padding:16px 0 0; }
.breadcrumbs a{ color:var(--slate-light); }
.breadcrumbs a:hover{ color:var(--ink-2); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--ink); color:var(--white); padding:56px 0; text-align:center; }
.cta-band h2{ color:var(--white); }
.cta-band p{ color:#C9D0DE; margin:0 auto 1.6em; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#B9C0CE; padding:56px 0 28px; margin-top:64px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.footer-grid h4{ color:var(--white); font-size:.92rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; font-family:var(--sans); }
.footer-grid a{ color:#B9C0CE; text-decoration:none; display:block; margin-bottom:9px; font-size:.92rem; }
.footer-grid a:hover{ color:var(--white); }
.footer-brand{ font-family:var(--serif); color:var(--white); font-size:1.2rem; margin-bottom:10px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:22px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-size:.83rem; color:#8993A6;
}
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

.badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--paper-2);
  border:1px solid var(--line); padding:8px 14px; border-radius:20px;
  font-size:.85rem; font-weight:600; color:var(--ink);
}
.badge::before{ content:"✓"; color:var(--good); }

.section-head{ max-width:680px; margin-bottom:36px; }
.section-head p{ font-size:1.05rem; }
.eyebrow-label{ color:var(--brass-dark); font-weight:600; font-size:.82rem; letter-spacing:.03em; }

@media(max-width:640px){
  section{ padding:44px 0; }
  .hero{ padding:52px 0 56px; }
}