/* Seros, LLC — site styles. Palette + type from the brand board. */
:root{
  /* Canonical brand tokens — names match ../business/BRAND-GUIDE.md */
  --seros-blue:#0009AD; --seros-ink:#283053; --seros-steel:#608ACD;
  --seros-sky:#B8DAFF; --seros-paper:#EDE7DE; --seros-grey:#E8E8E9;
  --seros-white:#FBFAF7;
  /* Short aliases used throughout this stylesheet */
  --seros:var(--seros-blue); --ink:var(--seros-ink); --steel:var(--seros-steel);
  --sky:var(--seros-sky); --paper:var(--seros-paper); --grey:var(--seros-grey);
  --white:var(--seros-white);
  --rule:rgba(40,48,83,.18);
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:"Courier New",Courier,ui-monospace,monospace;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 70% -10%, rgba(184,218,255,.35), transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.15; letter-spacing:-.01em; margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.5vw,3.6rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem); margin-top:2.4em}
h3{font-size:1.15rem; margin-top:2em}
p{margin:0 0 1.1em; max-width:68ch}
a{color:var(--seros); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--ink)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--steel); margin:0 0 1rem}
.lede{font-size:1.05rem; max-width:60ch}
hr{border:0; border-top:1px solid var(--rule); margin:3rem 0}

/* header */
header.site{position:sticky; top:0; z-index:20; backdrop-filter:blur(14px) saturate(150%);
  background:rgba(237,231,222,.78); border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:1.05rem;
  letter-spacing:.02em; color:var(--ink); text-decoration:none}
.brand img{width:30px; height:30px; border-radius:6px; box-shadow:0 1px 3px rgba(40,48,83,.25)}
nav.site{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}
nav.site a{font-family:var(--mono); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; text-decoration:none; color:var(--ink); opacity:.75}
nav.site a:hover{opacity:1; color:var(--seros)}

/* hero */
.hero{padding:72px 0 40px}
.hero .grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.hero figure{margin:0; position:relative}
.hero figure img{width:100%; height:auto; display:block;   filter:drop-shadow(0 22px 34px rgba(40,48,83,.20))}
.tagline{font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--steel)}
.cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.btn{display:inline-block; padding:13px 24px; border-radius:2px; text-decoration:none; font-family:var(--mono);
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--seros); transition:.18s}
.btn.primary{background:var(--seros); color:var(--white)}
.btn.primary:hover{background:var(--ink); border-color:var(--ink); color:var(--white)}
.btn.ghost{color:var(--seros); background:transparent}
.btn.ghost:hover{background:rgba(0,9,173,.07); color:var(--seros)}

/* cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin:28px 0}
.card{background:rgba(251,250,247,.72); border:1px solid var(--rule); border-radius:3px; padding:22px 22px 18px}
.card h3{margin-top:0; font-size:1.02rem}
.card p{font-size:.9rem; margin:0; color:rgba(40,48,83,.86)}
.num{font-family:var(--serif); font-size:2rem; color:var(--sky); line-height:1; display:block; margin-bottom:.3rem;
  -webkit-text-stroke:1px var(--steel)}

/* lists */
ul.ticks{list-style:none; padding:0; margin:1rem 0}
ul.ticks li{padding-left:26px; position:relative; margin-bottom:.6rem; max-width:64ch}
ul.ticks li::before{content:"—"; position:absolute; left:0; color:var(--steel)}

/* table */
table{border-collapse:collapse; width:100%; margin:1.2rem 0; font-size:.88rem}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:var(--steel)}

/* legal doc pages */
.doc{padding:48px 0 64px; max-width:820px}
.doc h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.doc h2{font-size:1.35rem}
.doc .banner{border-left:3px solid var(--seros); background:rgba(184,218,255,.28); padding:14px 18px; margin:0 0 2rem; font-size:.86rem}
.doc code{background:rgba(96,138,205,.14); padding:1px 5px; border-radius:2px; font-size:.85em}
.toc{font-size:.85rem; border:1px solid var(--rule); padding:16px 20px; background:rgba(251,250,247,.6)}
.toc ol{margin:.4rem 0 0; padding-left:1.2rem}

/* footer */
footer.site{border-top:1px solid var(--rule); margin-top:72px; padding:40px 0 60px; font-size:.82rem}
footer.site .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px}
footer.site a{display:block; text-decoration:none; opacity:.8; margin-bottom:.45rem}
footer.site a:hover{opacity:1}
footer.site h4{font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; color:var(--steel)}
.fineprint{margin-top:28px; color:rgba(40,48,83,.6); font-size:.76rem; max-width:70ch}

@media (max-width:820px){
  .hero .grid{grid-template-columns:1fr; gap:24px}
  .hero figure{order:-1; max-width:340px; margin:0 auto}
  footer.site .cols{grid-template-columns:1fr 1fr}
  header.site .wrap{height:auto; padding-top:10px; padding-bottom:10px; flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
html.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
html.js .reveal.shown{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1; transform:none}}