/* communitycastnow.com — civic / public-sector.
   Reads like a government notice: square corners, rule lines, serif headings,
   restrained colour, almost no motion. Nothing shared with the other sites. */

:root{
  --navy:#0b2545;
  --navy-2:#13315c;
  --slate:#3e5c76;
  --slate-2:#5d7893;
  --paper:#ffffff;
  --paper-2:#f4f6f8;
  --line:#c8d2dc;
  --amber:#f2a900;
  --alert:#a4262c;
  --ink:#12181f;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.62;
}

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

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:74ch}

h1,h2,h3{
  font-family:'Libre Baskerville',Georgia,'Times New Roman',serif;
  font-weight:700;
  line-height:1.2;
  margin:0;
  color:var(--navy);
  letter-spacing:-.005em;
}
h1{font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.14;color:#fff}
h2{font-size:clamp(1.55rem,3.2vw,2.25rem);margin-bottom:.85rem}
h3{font-size:1.14rem;margin-bottom:.4rem}

p{margin:0 0 1.05rem;max-width:74ch}
.lead{font-size:1.17rem;color:var(--slate)}

a{color:var(--navy-2)}

/* ---------- official top rule ---------- */

.gov-rule{height:6px;background:var(--navy);border-bottom:3px solid var(--amber)}

/* ---------- masthead ---------- */

header.mast{background:var(--navy);color:#fff;padding:0 0 52px}

.brandbar{
  display:flex;align-items:center;gap:14px;
  padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.18);
  margin-bottom:52px;
}
.seal{
  width:42px;height:42px;flex:none;
  border:2px solid var(--amber);
  border-radius:50%;
  display:grid;place-items:center;
}
.seal svg{width:22px;height:22px;display:block}
.brandbar .name{
  font-family:'Libre Baskerville',Georgia,serif;
  font-weight:700;font-size:1.06rem;letter-spacing:.01em;color:#fff;
}
.brandbar .tag{
  font-size:.82rem;color:rgba(255,255,255,.7);
  border-left:1px solid rgba(255,255,255,.28);
  padding-left:14px;margin-left:4px;
}

header.mast .lead{color:rgba(255,255,255,.84);max-width:62ch;font-size:1.2rem}
header.mast .kicker{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);margin-bottom:1rem;font-weight:600;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  background:var(--amber);
  color:var(--navy);
  font-weight:700;
  font-size:1.02rem;
  text-decoration:none;
  padding:15px 30px;
  min-height:48px;
  border:2px solid var(--amber);
}
.btn:hover,.btn:focus{background:#ffc23d;border-color:#ffc23d}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost:hover,.btn.ghost:focus{background:rgba(255,255,255,.1);border-color:#fff}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

/* ---------- sections ---------- */

section{padding:64px 0;border-top:1px solid var(--line)}
section.tint{background:var(--paper-2)}
section:first-of-type{border-top:none}

.eyebrow{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate-2);font-weight:600;margin-bottom:.8rem;
}

/* ---------- advisory block ----------
   Deliberately mimics a public advisory notice. Used once, for the
   language-access argument, so it keeps its weight. */

.advisory{
  border:1px solid var(--line);
  border-left:6px solid var(--alert);
  background:#fff;
  padding:26px 28px;
  margin:30px 0;
}
.advisory .hd{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--alert);font-weight:700;margin-bottom:.7rem;
}
.advisory p:last-child{margin-bottom:0}

/* ---------- grids ---------- */

.cols{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:34px}
.cols.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--navy);
  padding:24px;
}
.card p{margin-bottom:0;font-size:.97rem;color:var(--slate)}

/* ---------- numbered steps ---------- */

ol.steps{counter-reset:s;list-style:none;padding:0;margin:34px 0 0;display:grid;gap:26px}
ol.steps li{counter-increment:s;position:relative;padding-left:62px;max-width:70ch}
ol.steps li::before{
  content:counter(s);
  position:absolute;left:0;top:0;
  width:42px;height:42px;
  background:var(--navy);color:#fff;
  display:grid;place-items:center;
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:1.15rem;
}

/* ---------- table ---------- */

table.spec{width:100%;border-collapse:collapse;margin-top:30px;font-size:.97rem}
table.spec caption{
  text-align:left;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate-2);font-weight:600;padding-bottom:.8rem;
}
table.spec th,table.spec td{
  text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;
}
table.spec thead th{
  background:var(--navy);color:#fff;font-weight:600;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
}
table.spec tbody th{font-weight:600;color:var(--navy);width:34%}
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- image slots ----------
   ::after carries the photo so it paints over the caption. No file, no 404 —
   the caption just stays visible. */

.slot{
  position:relative;overflow:hidden;
  display:grid;place-items:center;
  background:var(--paper-2);
  border:1px solid var(--line);
  min-height:230px;
  margin:30px 0;
}
/* Placeholder art: topographic contours over a survey grid — the visual
   language of civic mapping. Covered entirely by ::after once a real file
   lands at the path. */
.slot{background:var(--navy)}
.slot::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-radial-gradient(ellipse at 20% 42%,
      transparent 0 19px, rgba(242,169,0,.20) 19px 21px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 30px);
}
.bleed::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-radial-gradient(ellipse at 78% 50%,
      transparent 0 24px, rgba(242,169,0,.14) 24px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);
}
.slot::after{
  content:"";position:absolute;inset:0;
  background-image:var(--img);
  background-size:cover;background-position:center;
}
.slot.band{min-height:210px}
.slot.tall{min-height:360px}

/* Full-bleed hazard band with a navy wash so headline text stays legible
   over whatever photo lands there. */
.bleed{position:relative;min-height:300px;display:grid;place-items:center;background:var(--navy-2)}
.bleed::after{
  content:"";position:absolute;inset:0;
  background-image:var(--img);
  background-size:cover;background-position:center;
  opacity:.34;
}
.bleed .inner{position:relative;z-index:1;text-align:center;color:#fff;padding:56px 24px;max-width:60ch}
.bleed h2{color:#fff}
.bleed p{color:rgba(255,255,255,.86);margin-left:auto;margin-right:auto}

/* ---------- language chips ---------- */

.langs{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0;padding:0;list-style:none}
.langs li{
  border:1px solid var(--line);background:#fff;
  padding:7px 15px;font-size:.9rem;color:var(--slate);
}

/* ---------- footnote ---------- */

.footnote{
  font-size:.88rem;color:var(--slate-2);
  border-top:1px solid var(--line);
  padding-top:20px;margin-top:34px;max-width:76ch;
}

/* ---------- cta ---------- */

.cta{background:var(--navy);color:#fff;text-align:center;padding:72px 0}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.84);margin-left:auto;margin-right:auto;max-width:56ch}
.cta .btnrow{justify-content:center}

/* ---------- footer ---------- */

footer{background:var(--ink);color:rgba(255,255,255,.7);padding:44px 0 56px;font-size:.9rem}
footer a{color:var(--amber)}
footer p{max-width:74ch}
footer .fine{font-size:.83rem;color:rgba(255,255,255,.45);margin-top:1.4rem}

@media (max-width:640px){
  section{padding:48px 0}
  header.mast{padding-bottom:44px}
  .brandbar{margin-bottom:38px;flex-wrap:wrap;gap:10px}
  .brandbar .tag{border-left:none;padding-left:0;margin-left:0;flex-basis:100%}
  .btn{width:100%;text-align:center}
}