/* jjcommsgroup.com — the four legal documents.
 *
 * index.html carries its own inline style block. These tokens are duplicated
 * from it deliberately rather than refactoring the shipped page, and
 * tests/test_jjcg_site_contract.py asserts the two definitions stay identical,
 * so the duplication cannot drift unnoticed.
 */
:root{
  --navy:#071944;
  --navy-deep:#04102F;
  --ink:#1a2540;
  --muted:#5a6580;
  --line:#dfe3ec;
  --paper:#ffffff;
  --grad:linear-gradient(90deg,#16CDE0 0%,#258AF2 48%,#8429ED 100%);
  --measure:34rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}
a{color:var(--navy)}

.rule{height:2px;background:var(--grad);border:0;margin:0}

/* ---- header ---- */
header{border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 0}
.bar img{display:block;height:3.5rem;width:auto}
@media(max-width:40em){.bar img{height:2.8rem}}
.langbar{display:none;gap:.25rem}
.js .langbar{display:flex}
.lang-button{
  border:1px solid var(--line);background:none;color:var(--muted);
  font:inherit;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.35rem .6rem;border-radius:2px;cursor:pointer;
}
.lang-button.active{color:var(--navy);border-color:var(--navy)}

/* ---- document head ---- */
.hero{padding:4rem 0 2rem}
@media(max-width:40em){.hero{padding:2.5rem 0 1.5rem}}
.eyebrow{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9rem;
}
.hero h1{
  margin:0 0 1rem;font-size:2rem;line-height:1.25;font-weight:600;
  color:var(--navy);max-width:30rem;letter-spacing:-.01em;
}
@media(max-width:40em){.hero h1{font-size:1.6rem}}
.lead{margin:0;color:var(--muted);max-width:var(--measure)}

/* ---- document sub-navigation ---- */
.subnav{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;
  padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:.9rem;
}
.subnav a{color:var(--muted);text-decoration:none}
.subnav a:hover{color:var(--navy);text-decoration:underline}
.subnav a[aria-current="page"]{color:var(--navy);font-weight:600}

/* ---- document body ---- */
main{padding:3rem 0 4rem}
@media(max-width:40em){main{padding:2rem 0 3rem}}
.section{margin:0 0 2.75rem}
.section:last-child{margin-bottom:0}
.section h2{
  margin:0 0 .75rem;font-size:1.1rem;font-weight:600;color:var(--navy);
  letter-spacing:-.005em;
}
.section p{margin:0;max-width:var(--measure)}
.section ul{margin:0;padding-left:1.1rem;max-width:var(--measure)}
.section li{margin:0 0 .4rem}
.section li:last-child{margin-bottom:0}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:2.5rem 0;font-size:.9rem;color:var(--muted)}
.footrow{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
footer a{color:var(--muted)}
footer nav a{margin-left:1.25rem}
@media(max-width:40em){footer nav a{margin:0 1.25rem 0 0}}