/* ============================================================
   Diverse Services — Brand stylesheet (2026 revamp · v3)
   Palette: dark navy + mid blue + light blue + white. No green.
   No black backgrounds. Clean, spacious, easy to read.
   Type: Sora (display) + Inter (body) — geometric, modern,
   matches the DS letterform style.
   ============================================================ */

:root{
  /* Navy + blues */
  --navy-900:#081A36;
  --navy-800:#0E2549;
  --navy-700:#143266;
  --navy-600:#1C448C;
  --blue-500:#2563B5;
  --blue-400:#4A86D1;
  --blue-300:#7AAEE3;
  --blue-200:#B3D0EE;
  --blue-100:#DDE8F7;
  --blue-50:#EEF4FB;
  --sky:#F5F9FD;

  /* Optional warm accent (used sparingly for CTAs / highlights) */
  --accent-500:#1C448C;     /* main accent is the same blue family */
  --warm-500:#D08240;       /* available if needed, very sparing use */

  /* Surfaces */
  --paper:#FFFFFF;
  --page:#FBFCFE;
  --tint:#F2F6FB;

  /* Text — dark navy, never pure black */
  --ink:#0E2440;
  --ink-strong:#081A36;
  --ink-muted:#4F6580;
  --ink-soft:#7C8FA8;

  --line:#E1E8F1;
  --line-soft:#EEF2F7;
  --focus:rgba(28,68,140,.22);

  --shadow-sm:0 1px 2px rgba(8,26,54,.05), 0 1px 3px rgba(8,26,54,.06);
  --shadow-md:0 6px 18px rgba(8,26,54,.08), 0 2px 6px rgba(8,26,54,.05);
  --shadow-lg:0 22px 50px rgba(8,26,54,.14), 0 8px 18px rgba(8,26,54,.07);

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:32px;

  --max:1280px;
  --gut:clamp(20px, 4vw, 56px);

  --font-display:'Sora', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;height:auto}
a{color:var(--navy-700);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue-500)}

::selection{background:var(--blue-100); color:var(--navy-900)}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.024em;
  line-height:1.12;
  color:var(--ink-strong);
  margin:0 0 .5em;
}
h1{font-size:clamp(2.6rem, 5.8vw, 4.6rem); font-weight:500; letter-spacing:-.032em}
h2{font-size:clamp(1.9rem, 3.8vw, 2.8rem); font-weight:500; letter-spacing:-.026em}
h3{font-size:clamp(1.2rem, 1.9vw, 1.45rem); font-weight:600}
h4{font-size:1rem; font-weight:600; font-family:var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--navy-700)}

p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem, 1.4vw, 1.22rem); color:var(--ink-muted); line-height:1.6; max-width:62ch}

/* ---------- Layout primitives ---------- */
.container{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.container-narrow{max-width:880px; margin:0 auto; padding:0 var(--gut)}
section{padding:clamp(64px, 8vw, 112px) 0}
.section-tight{padding:clamp(40px, 5vw, 72px) 0}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body);
  font-size:.78rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-500);
  margin-bottom:18px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--blue-500)}

.divider{height:1px; background:var(--line); border:0; margin:0}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gut);
  max-width:var(--max); margin:0 auto;
  gap:24px;
}
.brand{display:flex; align-items:center; gap:0; min-width:0}
.brand img{height:54px; width:auto; transition:opacity .2s}
.brand:hover img{opacity:.82}

.nav-links{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav-links > li{position:relative}
.nav-links a, .nav-links .menu-toggle{
  color:var(--ink); font-size:.92rem; font-weight:500;
  padding:10px 14px; border-radius:8px;
  font-family:var(--font-body);
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; cursor:pointer;
}
.nav-links a:hover, .nav-links .menu-toggle:hover{background:var(--blue-50); color:var(--navy-700)}
.nav-links a.current, .nav-links .menu-toggle.current{color:var(--navy-700); background:var(--blue-100)}
.nav-links .has-sub > .menu-toggle::after{
  content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); margin-left:2px; transition:transform .2s;
}
.nav-links .has-sub.open > .menu-toggle::after{transform:rotate(-135deg) translate(-2px,2px)}

/* Dropdown panels */
.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:240px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:10px; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:60;
}
.has-sub:hover > .dropdown, .has-sub.open > .dropdown, .has-sub:focus-within > .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown ul{list-style:none; padding:0; margin:0; display:grid; gap:1px}
.dropdown a{
  display:block; padding:10px 14px; border-radius:8px;
  font-size:.92rem; color:var(--ink); font-weight:500;
}
.dropdown a:hover{background:var(--blue-50); color:var(--navy-700)}
.dropdown .group-title{
  display:block; padding:8px 14px 4px; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:600;
}

/* Mega dropdown for Find Supported Housing */
.dropdown.mega{
  min-width:680px; padding:24px;
  left:50%; transform:translateX(-50%) translateY(-6px);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
.has-sub:hover > .dropdown.mega, .has-sub.open > .dropdown.mega, .has-sub:focus-within > .dropdown.mega{
  transform:translateX(-50%) translateY(0);
}
.dropdown.mega .col h4{
  font-family:var(--font-display); font-size:.95rem; letter-spacing:-.01em; text-transform:none;
  color:var(--navy-900); margin-bottom:10px; font-weight:600;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.dropdown.mega a{padding:7px 8px; font-size:.88rem; border-radius:6px}
.dropdown.mega .cqc-tag{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:4px;
  background:var(--navy-700); color:#fff; font-size:.62rem; letter-spacing:.06em;
  text-transform:uppercase; font-weight:700; vertical-align:middle;
}

.nav-links a.nav-cta{
  background:var(--navy-700) !important; color:#fff !important;
  padding:11px 22px !important; border-radius:999px;
  font-weight:600; margin-left:8px;
  box-shadow:0 2px 8px rgba(8,26,54,.18);
}
.nav-links a.nav-cta:hover{background:var(--navy-900) !important; color:#fff !important; box-shadow:0 4px 14px rgba(8,26,54,.28)}

.menu-btn{
  display:none; background:transparent; border:1.5px solid var(--navy-700); color:var(--navy-700);
  padding:8px 14px; border-radius:10px; font-weight:600; cursor:pointer; font-family:var(--font-body);
}

@media (max-width:1180px){
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); flex-direction:column; align-items:stretch;
    padding:14px var(--gut); gap:2px; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md); max-height:calc(100vh - 80px); overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links a, .nav-links .menu-toggle{padding:12px 14px; width:100%; justify-content:space-between}
  .menu-btn{display:inline-block}
  .dropdown, .dropdown.mega{
    position:static; opacity:1; visibility:visible; transform:none !important;
    box-shadow:none; border:0; border-left:2px solid var(--blue-100); border-radius:0;
    padding:6px 0 6px 14px; min-width:auto; display:none; margin:4px 0 8px 14px;
    grid-template-columns:1fr; gap:0;
  }
  .has-sub.open > .dropdown, .has-sub.open > .dropdown.mega{display:block}
  .dropdown.mega{grid-template-columns:1fr}
  .dropdown.mega .col{margin-bottom:8px}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600; font-size:.96rem;
  border:1.5px solid transparent;
  cursor:pointer; transition:all .2s ease;
  text-decoration:none;
  line-height:1;
  font-family:var(--font-body);
}
.btn-primary{background:var(--navy-700); color:#fff; border-color:var(--navy-700)}
.btn-primary:hover{background:var(--navy-900); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--blue-500); color:#fff; border-color:var(--blue-500)}
.btn-secondary:hover{background:var(--navy-700); color:#fff}
.btn-ghost{background:transparent; color:var(--navy-700); border-color:var(--navy-700)}
.btn-ghost:hover{background:var(--blue-50); color:var(--navy-900)}
.btn-arrow::after{content:"→"; margin-left:6px; transition:transform .2s}
.btn-arrow:hover::after{transform:translateX(3px)}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--page);
  padding:clamp(64px, 10vw, 128px) 0 clamp(56px, 8vw, 104px);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(ellipse at 90% 5%, rgba(122,174,227,.22), transparent 45%),
    radial-gradient(ellipse at 5% 95%, rgba(179,208,238,.18), transparent 40%);
  pointer-events:none;
}
.hero-inner{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center}
.hero h1{margin-bottom:18px}
.hero h1 .highlight{color:var(--navy-700)}
.hero .lede{margin-bottom:32px}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:24px 40px;
  padding:24px 0 0; margin-top:28px;
  border-top:1px solid var(--line);
}
.hero-meta div{font-size:.86rem; color:var(--ink-muted)}
.hero-meta strong{display:block; font-size:1.05rem; color:var(--navy-900); font-weight:600; margin-bottom:2px; font-family:var(--font-display); letter-spacing:-.01em}

.hero-visual{position:relative; aspect-ratio:4/5; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg)}
.hero-visual img{width:100%; height:100%; object-fit:cover; object-position:center 20%}
.hero-badge{
  position:absolute; right:-20px; bottom:-20px;
  background:var(--paper); padding:20px 24px;
  border-radius:var(--radius); box-shadow:var(--shadow-md);
  max-width:260px;
}
.hero-badge .num{font-family:var(--font-display); font-size:2.2rem; color:var(--blue-500); line-height:1; font-weight:600; letter-spacing:-.02em}
.hero-badge .lbl{font-size:.86rem; color:var(--ink-muted); margin-top:4px}

@media (max-width:880px){
  .hero-inner{grid-template-columns:1fr; gap:48px}
  .hero-badge{position:relative; right:0; bottom:0; margin-top:24px}
}

/* ---------- Cards & grids ---------- */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:var(--paper);
  border-radius:var(--radius-lg);
  padding:32px;
  border:1px solid var(--line);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column; height:100%;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue-300)}
.card h3{margin-top:0}
.card-icon{
  width:48px; height:48px;
  border-radius:12px;
  background:var(--blue-50); color:var(--navy-700);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  font-family:var(--font-display); font-size:1.25rem; font-weight:600;
}
.card-icon.alt{background:var(--blue-100); color:var(--navy-900)}
.card-link{margin-top:auto; padding-top:14px; font-weight:600; color:var(--navy-700)}
.card-link::after{content:" →"}

.step-card{position:relative; padding-top:54px}
.step-card .step-num{
  position:absolute; top:24px; left:32px;
  font-family:var(--font-display); font-size:.84rem; color:var(--blue-500);
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- Stats band ---------- */
.stats{
  background:var(--navy-800);
  color:#fff; border-radius:var(--radius-xl);
  padding:clamp(40px, 6vw, 72px);
  position:relative; overflow:hidden;
}
.stats::before{
  content:""; position:absolute; right:-80px; top:-80px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(122,174,227,.22), transparent 70%);
}
.stats::after{
  content:""; position:absolute; left:-100px; bottom:-100px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,134,209,.18), transparent 70%);
}
.stats .grid{position:relative}
.stat{padding:8px 0}
.stat .num{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 4.8vw, 3.4rem);
  font-weight:500; color:#fff; line-height:1; margin-bottom:10px;
  letter-spacing:-.03em;
}
.stat .num em{color:var(--blue-300); font-style:normal}
.stat .lbl{font-size:.95rem; color:rgba(255,255,255,.86); line-height:1.45}
.stat .src{display:block; font-size:.74rem; color:rgba(255,255,255,.55); margin-top:8px; letter-spacing:.04em}

/* ---------- Pull quote ---------- */
.pull{
  background:var(--paper); border-left:4px solid var(--blue-500);
  padding:32px 36px; border-radius:8px;
  font-family:var(--font-display); font-size:1.35rem; line-height:1.4; font-weight:500;
  color:var(--navy-900); max-width:780px; letter-spacing:-.02em;
}
.pull cite{display:block; margin-top:16px; font-style:normal; font-family:var(--font-body); font-size:.92rem; color:var(--ink-muted); font-weight:500; letter-spacing:0}

/* ---------- Two-column feature ---------- */
.feature{display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center}
.feature.reverse{grid-template-columns:1fr 1.05fr}
.feature.reverse > *:first-child{order:2}
.feature-media{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:5/6; background:var(--blue-50)}
.feature-media img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){
  .feature, .feature.reverse{grid-template-columns:1fr; gap:36px}
  .feature.reverse > *:first-child{order:0}
}

/* ---------- Pathway ladder ---------- */
.ladder{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:lad}
.ladder .rung{
  position:relative; padding:30px 26px; background:var(--paper);
  border-radius:var(--radius); border:1px solid var(--line);
  counter-increment:lad;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ladder .rung:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.ladder .rung::before{
  content:"0" counter(lad);
  display:block; font-family:var(--font-display); color:var(--blue-500);
  font-size:1.4rem; margin-bottom:12px; font-weight:600; letter-spacing:-.02em;
}
.ladder .rung h3{font-size:1.1rem; margin-bottom:8px}
.ladder .rung p{font-size:.93rem; color:var(--ink-muted); margin:0}
@media (max-width:900px){.ladder{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.ladder{grid-template-columns:1fr}}

/* ---------- Property cards ---------- */
.borough{margin-bottom:48px}
.borough-head{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:24px}
.borough-head h3{margin:0; font-family:var(--font-display); color:var(--navy-900); font-size:1.6rem; font-weight:600; letter-spacing:-.02em}
.borough-head span{color:var(--ink-soft); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500}

.property{
  background:var(--paper); border-radius:var(--radius); padding:24px;
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:all .2s ease;
}
.property:hover{box-shadow:var(--shadow-md); border-color:var(--blue-300)}
.property .tag{
  display:inline-block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-bottom:10px; font-weight:600;
}
.tag-male{background:var(--blue-100); color:var(--navy-800)}
.tag-female{background:#FFE9DA; color:#8A3F12}
.tag-mixed{background:var(--blue-50); color:var(--blue-500)}
.tag-forensic{background:#F3E1E1; color:#7E2B2B}
.tag-future{background:#E9DCFF; color:#4F2BA8}

.property h4{font-family:var(--font-display); color:var(--navy-900); font-size:1.1rem; font-weight:600; text-transform:none; letter-spacing:-.01em; margin:4px 0 6px}
.property p{font-size:.9rem; color:var(--ink-muted); margin:0}

/* ---------- Evidence panel ---------- */
.evidence{
  background:var(--paper); border-radius:var(--radius-lg);
  padding:36px; border-left:6px solid var(--blue-500);
  box-shadow:var(--shadow-sm); border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.evidence h4{color:var(--blue-500); margin-bottom:8px}
.evidence .num{font-family:var(--font-display); font-size:2.3rem; color:var(--navy-900); line-height:1; margin-bottom:10px; font-weight:600; letter-spacing:-.03em}

/* ---------- Team list ---------- */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:960px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.team-grid{grid-template-columns:1fr}}
.team-role{
  background:var(--paper); padding:24px; border-radius:var(--radius);
  border:1px solid var(--line);
}
.team-role h4{
  text-transform:none; letter-spacing:-.01em; font-family:var(--font-display);
  color:var(--navy-900); font-size:1.05rem; font-weight:600; margin-bottom:8px;
}
.team-role p{font-size:.92rem; color:var(--ink-muted); margin:0}

/* ---------- Forms ---------- */
.form{display:grid; gap:18px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.field label{display:block; font-size:.85rem; font-weight:600; color:var(--navy-900); margin-bottom:6px; letter-spacing:.01em; font-family:var(--font-display)}
.field input,
.field select,
.field textarea{
  width:100%; font:inherit; font-family:var(--font-body); font-size:.98rem;
  padding:13px 14px; border-radius:10px;
  background:#fff; border:1.5px solid var(--line);
  color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus{outline:none; border-color:var(--blue-500); box-shadow:0 0 0 4px var(--focus)}
.field textarea{min-height:130px; resize:vertical}

.checkbox-row{display:flex; gap:10px; align-items:flex-start}
.checkbox-row input{width:18px; height:18px; margin-top:3px; accent-color:var(--navy-700)}
.checkbox-row label{font-size:.9rem; color:var(--ink-muted); font-weight:500; font-family:var(--font-body)}

/* ---------- Blog cards ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.blog-grid{grid-template-columns:1fr}}

.blog-card{
  background:var(--paper); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); transition:all .25s ease; display:flex; flex-direction:column;
}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--blue-300)}
.blog-card .thumb{aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg, var(--blue-100), var(--blue-200)); position:relative}
.blog-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.blog-card:hover .thumb img{transform:scale(1.04)}
.blog-card .body{padding:24px; display:flex; flex-direction:column; flex:1}
.blog-card h3{font-size:1.1rem; margin-bottom:10px; line-height:1.32; letter-spacing:-.015em}
.blog-card p{color:var(--ink-muted); font-size:.92rem; margin-bottom:16px; flex:1}
.blog-card .read-more{font-weight:600; color:var(--navy-700); font-size:.92rem; margin-top:auto}
.blog-card .read-more::after{content:" →"}
.blog-card a{color:inherit}
.blog-card .pill{margin-bottom:12px}

.blog-featured{
  display:grid; grid-template-columns:1.2fr 1fr; gap:0; overflow:hidden;
  border-radius:var(--radius-xl); background:var(--paper); border:1px solid var(--line);
  margin-bottom:32px; box-shadow:var(--shadow-sm);
}
.blog-featured .thumb{aspect-ratio:auto; height:100%; min-height:340px; background:linear-gradient(135deg, var(--blue-100), var(--blue-200))}
.blog-featured .thumb img{width:100%; height:100%; object-fit:cover}
.blog-featured .body{padding:48px; display:flex; flex-direction:column; justify-content:center}
.blog-featured h2{font-size:1.8rem; margin-bottom:14px; letter-spacing:-.022em}
.blog-featured p{color:var(--ink-muted); font-size:1.02rem; line-height:1.55; margin-bottom:24px}
@media (max-width:880px){.blog-featured{grid-template-columns:1fr} .blog-featured .body{padding:32px}}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-900); color:rgba(255,255,255,.85);
  padding:72px 0 28px; margin-top:80px;
  position:relative; overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; right:-120px; top:-120px;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,134,209,.16), transparent 70%);
}
.site-footer h4{color:#fff; margin-bottom:18px; font-family:var(--font-body); text-transform:uppercase; font-size:.78rem; letter-spacing:.18em; font-weight:600}
.site-footer a{color:rgba(255,255,255,.85)}
.site-footer a:hover{color:var(--blue-300)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.18); position:relative}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-grid ul{list-style:none; padding:0; margin:0}
.footer-grid li{margin-bottom:8px; font-size:.92rem}
.footer-brand img{height:52px; width:auto; margin-bottom:18px}
.footer-brand p{font-size:.95rem; max-width:38ch; opacity:.85}
.footer-bottom{display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; padding-top:24px; font-size:.82rem; opacity:.7; position:relative}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-2{margin-top:16px}
.mt-4{margin-top:32px}

.pill{
  display:inline-block; padding:5px 12px; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:var(--blue-100); color:var(--navy-800);
}
.pill-alt{background:var(--blue-50); color:var(--blue-500)}
.pill-light{background:#fff; color:var(--navy-700); border:1px solid var(--line)}

.tick-list{list-style:none; padding:0; margin:0}
.tick-list li{
  padding:10px 0 10px 32px; position:relative; color:var(--ink); font-size:.98rem;
  border-bottom:1px solid var(--line-soft);
}
.tick-list li:last-child{border-bottom:0}
.tick-list li::before{
  content:""; position:absolute; left:0; top:14px;
  width:18px; height:18px; border-radius:50%;
  background:var(--navy-700);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3 3 7-7'/></svg>");
  background-size:14px; background-repeat:no-repeat; background-position:center;
}

.banner-cta{
  background:linear-gradient(135deg, var(--navy-700), var(--blue-500));
  color:#fff; border-radius:var(--radius-xl);
  padding:clamp(40px, 6vw, 72px);
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center;
  position:relative; overflow:hidden;
}
.banner-cta::after{
  content:""; position:absolute; right:-100px; top:-100px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
}
.banner-cta > *{position:relative}
.banner-cta h2{color:#fff; letter-spacing:-.024em}
.banner-cta p{color:rgba(255,255,255,.88); max-width:48ch; margin:0}
.banner-cta .btn-primary{background:#fff; color:var(--navy-700); border-color:#fff}
.banner-cta .btn-primary:hover{background:var(--blue-100); color:var(--navy-900); border-color:var(--blue-100)}
.banner-cta .btn-ghost{color:#fff; border-color:#fff}
.banner-cta .btn-ghost:hover{background:rgba(255,255,255,.12); color:#fff}
.banner-cta .actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:760px){
  .banner-cta{grid-template-columns:1fr}
  .banner-cta .actions{justify-content:flex-start}
}

/* ---------- Page header (non-home) ---------- */
.page-head{
  background:var(--page);
  padding:clamp(64px, 8vw, 104px) 0 clamp(40px, 5vw, 64px);
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-head::after{
  content:""; position:absolute; right:-100px; top:-60px;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(122,174,227,.18), transparent 70%);
}
.page-head .container{position:relative}
.page-head h1{max-width:18ch; margin-bottom:20px}
.page-head .lede{max-width:62ch}
.crumbs{font-size:.84rem; color:var(--ink-soft); margin-bottom:18px; letter-spacing:.04em}
.crumbs a{color:var(--ink-muted)}
.crumbs a:hover{color:var(--navy-700)}

/* ---------- Print-friendly ---------- */
@media print{
  .site-header,.site-footer,.menu-btn{display:none}
  body{background:#fff}
}