:root{
  --ink:#0f1c26; --ink-2:#38505f; --ink-3:#647a88;
  --line:#dce5ea; --line-2:#eef3f6;
  --bg:#ffffff; --bg-2:#f5f9fb; --bg-3:#eaf2f6;
  /* sampled from the logo: navy #033267, teal #0ebabb */
  --navy:#033267; --navy-2:#0a4374; --navy-3:#02264e;
  --teal:#0ebabb; --teal-2:#7fe0e1; --teal-ink:#02878a;
  --brand:#075985; --brand-2:#0a7ea4; --brand-ink:#033267;
  --accent:#c2410c; --ok:#0f7a4a;
  --wrap:1120px; --radius:10px;
  --fs:17px; --lh:1.7;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:var(--fs)/var(--lh) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-underline-offset:2px}
a:hover{color:var(--brand-2)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ---------- header ---------- */
.topbar{background:var(--navy-3); color:#c9dfea; font-size:13.5px; font-weight:600; letter-spacing:.3px}
.topbar .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--teal);
  margin-right:8px; box-shadow:0 0 0 0 rgba(40,195,176,.7); animation:beacon 2.2s ease-out infinite}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(40,195,176,.65)} 70%{box-shadow:0 0 0 9px rgba(40,195,176,0)} 100%{box-shadow:0 0 0 0 rgba(40,195,176,0)}}
.topbar a{color:#fff; font-weight:800}
.topbar .wrap{display:flex; gap:16px; align-items:center; justify-content:space-between; min-height:38px; flex-wrap:wrap}
.topbar a{color:#fff; font-weight:600; text-decoration:none}
header.site{border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:50}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:70px; flex-wrap:nowrap}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.brand .mark{width:54px; height:54px; flex:0 0 54px; display:block}
@media(max-width:520px){ .brand .mark{width:46px; height:46px; flex:0 0 46px} }
.brand .bn{display:block}
.brand .name{display:block; font-size:17.5px; font-weight:800; line-height:1.15; letter-spacing:-.2px; color:var(--ink); text-transform:none; white-space:nowrap}
.brand .sub{display:block; font-size:11px; color:var(--ink-3); letter-spacing:.4px; text-transform:uppercase; margin-top:2px; white-space:nowrap}
nav.main{flex:1 1 auto; display:flex; justify-content:center}
nav.main ul{display:flex; gap:18px; list-style:none; margin:0; padding:0; flex-wrap:nowrap}
nav.main a{color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:600; white-space:nowrap}
nav.main a:hover{color:var(--brand)}
.hdr-cta{flex:0 0 auto}
@media(max-width:1180px){
  nav.main ul{gap:13px}
  nav.main a{font-size:13.5px}
  .brand .sub{display:none}
}
/* ---------- mobile menu ---------- */
.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:9px;
  background:#fff; cursor:pointer; align-items:center; justify-content:center; color:var(--ink)}
.burger svg{pointer-events:none}
.burger .x{display:none}
body.nav-open .burger .x{display:block}
body.nav-open .burger .bars{display:none}

@media(max-width:980px){
  header.site .wrap{flex-wrap:wrap; gap:10px; min-height:0; padding-top:12px; padding-bottom:12px}
  .burger{display:flex}
  nav.main{order:3; flex:1 0 100%; display:none; padding:6px 0 4px; border-top:1px solid var(--line-2); margin-top:4px}
  body.nav-open nav.main{display:block}
  nav.main ul{flex-direction:column; align-items:stretch; gap:0; flex-wrap:nowrap}
  nav.main li{width:100%}
  .navtop{width:100%; justify-content:space-between; padding:13px 2px; font-size:16px}
  .sub{
    position:static; transform:none; min-width:0; width:auto; border:0; box-shadow:none;
    border-radius:0; padding:0 0 10px 10px; display:none;
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .sub.wide{min-width:0}
  nav.main .sub.wide ul{columns:1}
  .has-sub:hover .sub{display:none}
  .navtop[aria-expanded="true"]+.sub{display:block}
  .sub a{padding:9px 10px; font-size:15px}
}


.btn{
  display:inline-block; background:var(--accent); color:#fff!important; text-decoration:none;
  padding:11px 20px; border-radius:var(--radius); font-weight:700; font-size:15.5px; border:0; cursor:pointer;
  font-family:inherit; line-height:1.35; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(.93); transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(194,65,12,.6)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; color:var(--brand)!important; border:2px solid var(--brand); padding:9px 18px; box-shadow:none}
.btn.ghost:hover{background:var(--bg-3); filter:none; box-shadow:none}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--bg-3),#fff); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.hero .wrap{padding:46px 20px 40px}
.hero h1{font-size:clamp(30px,4.8vw,50px); line-height:1.06; letter-spacing:-1.2px; margin:0 0 16px; max-width:19ch; font-weight:800}
.hero .lede{font-size:19px; color:var(--ink-2); max-width:62ch; margin:0 0 24px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

.hero.has-img:not(.dark) .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:48px; align-items:center}
.hero .hero-img{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.hero .hero-img img{width:100%; display:block}
@media(max-width:880px){
  .hero.has-img:not(.dark) .wrap{grid-template-columns:1fr; gap:26px}
  .hero .hero-img{order:-1}
}

/* dark hero variant */
.hero.dark{
  background:var(--navy); border-bottom:0; color:#e8f1f7;
  /* 1 / 1.792 = 55.8vw - the photo's own ratio, so nothing is cropped
     top or bottom. Floor keeps short viewports usable, cap stops it
     running away on ultra-wide monitors. */
  min-height:clamp(540px, 44vw, 720px);
  display:flex; align-items:center;
}
.hero.dark .wrap{width:100%}
.hero.dark .hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:auto 100%;          /* fit the height - never crop top/bottom */
  background-position:right center;
  background-repeat:no-repeat;
  background-color:var(--navy);        /* fills the rest; matches the photo's own fade */
}
/* the photo already fades to brand navy on its left; this only guards the
   text at narrow widths and on very wide viewports */
.hero.dark .hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(3,50,103,.94) 0%, rgba(3,50,103,.72) 34%, rgba(3,50,103,.30) 56%, rgba(3,50,103,0) 82%),
    linear-gradient(0deg, rgba(3,50,103,.55) 0%, rgba(3,50,103,0) 34%);
}
@media(max-width:880px){
  .hero.dark{min-height:0; display:block}
  .hero.dark .wrap{padding:54px 20px 48px}
  .hero.dark .hero-bg{background-size:cover; background-position:center right;
    background-image:var(--hero-mobile, none)}
  .hero.dark .hero-bg::after{
    background:linear-gradient(180deg, rgba(3,50,103,.90) 0%, rgba(3,50,103,.80) 55%, rgba(3,50,103,.92) 100%);
  }
}
.hero.dark .wrap{position:relative; z-index:1; padding:72px 20px 64px}
.hero.dark h1{color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.28)}
.hero.dark h1 em{font-style:normal; color:var(--teal-2); display:block}
.hero.dark .lede{color:#cfe0ec; max-width:58ch; text-shadow:0 1px 14px rgba(2,24,48,.55)}
.hero.dark .btn.ghost{color:#fff!important; border-color:rgba(255,255,255,.55)}
.hero.dark .btn.ghost:hover{background:rgba(255,255,255,.1); border-color:#fff}

/* eyebrow label */
.eyebrow{
  display:flex; align-items:flex-start; gap:9px;
  font-size:12.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--brand-2); margin:0 0 14px;
}
.eyebrow::before{content:"\25C6"; font-size:9px; line-height:1.9; letter-spacing:0; color:var(--teal); flex:0 0 auto}
.hero.dark .eyebrow{color:var(--teal); text-shadow:0 1px 12px rgba(2,24,48,.6)}
h2 .eyebrow, .sec-eyebrow{margin-bottom:8px}

/* trust checkmarks inside the hero */
.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin:26px 0 0;
  padding:20px 0 0; border-top:1px solid rgba(255,255,255,.16);
  list-style:none;
}
.hero:not(.dark) .hero-trust{border-top-color:var(--line)}
.hero-trust li{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:#dbe9f2;
  text-shadow:0 1px 12px rgba(2,24,48,.75);
}
.hero:not(.dark) .hero-trust li{color:var(--ink-2)}
.hero-trust svg{flex:0 0 17px; color:var(--teal)}

/* ---------- answer block (AEO) ---------- */
.answer{
  background:var(--bg-2); border:1px solid var(--line); border-left:5px solid var(--brand);
  border-radius:var(--radius); padding:20px 22px; margin:0 0 26px;
}
.answer p{margin:0; font-size:18.5px; line-height:1.62; color:var(--ink)}
.answer p+p{margin-top:12px}
.answer .label{
  display:block; font-size:11.5px; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--brand); font-weight:800; margin-bottom:9px;
}

/* ---------- key facts ---------- */
.keyfacts{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin:0 0 28px}
.keyfacts h2{font-size:16px; margin:0 0 12px; letter-spacing:.2px}
.keyfacts ul{margin:0; padding-left:20px}
.keyfacts li{margin:0 0 8px}
.keyfacts li:last-child{margin-bottom:0}

/* ---------- layout ---------- */
main{padding:38px 0 10px}
.page{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:46px; align-items:start}
.page > *{min-width:0}
article{min-width:0; max-width:100%}
@media(max-width:940px){ .page{grid-template-columns:1fr; gap:34px} }
article h2{font-size:clamp(24px,3.1vw,34px); line-height:1.15; letter-spacing:-.8px; margin:48px 0 16px; font-weight:800}
article h3{font-size:21.5px; line-height:1.25; margin:30px 0 10px; font-weight:750; letter-spacing:-.3px}
article h4{font-size:17.5px; margin:22px 0 8px}
article p{margin:0 0 16px; max-width:74ch}
article ul,article ol{margin:0 0 18px; padding-left:22px; max-width:72ch}
article li{margin:0 0 9px}
article > *:first-child{margin-top:0}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; margin:0 0 24px; border:1px solid var(--line); border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; font-size:15.5px; background:#fff}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-2); vertical-align:top}
thead th{background:var(--bg-3); font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--brand-ink); border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fbfdfe}

/* ---------- callouts ---------- */
.note,.warn,.tip{border-radius:var(--radius); padding:16px 20px; margin:0 0 24px; border:1px solid; font-size:16px}
.note{background:#f2f8fb; border-color:#cfe3ec}
.warn{background:#fff5ed; border-color:#f3d6bd}
.tip{background:#f1faf5; border-color:#c8e8d8}
.note p:last-child,.warn p:last-child,.tip p:last-child{margin-bottom:0}
.note strong,.warn strong,.tip strong{color:var(--ink)}

/* ---------- steps ---------- */
ol.steps{list-style:none; padding:0; counter-reset:s; margin:0 0 26px}
ol.steps li{counter-increment:s; position:relative; padding:0 0 18px 48px; margin:0}
ol.steps li::before{
  content:counter(s); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center;
}
ol.steps li strong{display:block; margin-bottom:3px}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin:0 0 28px}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; background:#fff}
.card h3{margin:0 0 7px; font-size:17.5px}
.card p{margin:0; font-size:15.5px; color:var(--ink-2)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line); margin:14px 0 30px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:16px 34px 16px 0; font-weight:700; font-size:17.5px; position:relative; list-style:none; line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:14px; font-size:24px; font-weight:400; color:var(--brand)}
.faq details[open] summary::after{content:"\2013"}
.faq .fa{padding:0 0 18px; color:var(--ink-2)}
.faq .fa p{margin:0 0 12px; max-width:74ch}
.faq .fa p:last-child{margin-bottom:0}

/* ---------- figure / placeholders ---------- */
figure{margin:0 0 26px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-2)}
figure img{width:100%}
.mapwrap iframe{display:block; width:100%; height:clamp(320px, 42vw, 460px); border:0}
figcaption{font-size:14px; color:var(--ink-3); padding:10px 16px; border-top:1px solid var(--line); background:#fff}

/* ---------- sidebar ---------- */
aside.rail{position:sticky; top:96px; font-size:15.5px}
@media(max-width:940px){ aside.rail{position:static} }
.rail .box{border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin:0 0 18px; background:#fff}
.rail .box.cta{background:var(--brand-ink); border-color:var(--brand-ink); color:#dceaf1}
.rail .box.cta h3{color:#fff; margin:0 0 8px; font-size:18px}
.rail .box.cta p{color:#bcd6e2; font-size:15px; margin:0 0 14px}
.rail .box h3{margin:0 0 10px; font-size:16px; letter-spacing:.2px}
.rail ul{margin:0; padding-left:18px}
.rail li{margin:0 0 8px}
.toc a{color:var(--ink-2); text-decoration:none}
.toc a:hover{color:var(--brand); text-decoration:underline}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:14px; color:var(--ink-3); padding:16px 0 0}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.crumbs li::after{content:"›"; margin-left:8px; color:var(--line)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3); text-decoration:none}

/* ---------- final cta ---------- */
.endcta{background:var(--bg-3); border-top:1px solid var(--line); margin-top:46px; padding:40px 0}
.endcta h2{margin:0 0 10px; font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-.7px}
.endcta p{margin:0 0 20px; color:var(--ink-2); max-width:62ch}

/* ---------- footer ---------- */
footer.site{background:var(--navy-3); color:#a9c3d6; padding:44px 0 26px; font-size:15px; margin-top:0}
.flogo{width:auto; height:126px; margin:0 0 30px; display:block}
footer.site .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px; margin-bottom:30px}
footer.site h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.7px; margin:0 0 12px}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{margin:0 0 8px}
footer.site a{color:#a9c3d6; text-decoration:none}
footer.site a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.14); padding-top:20px; font-size:13.5px; color:#8fabc2}
.legal p{margin:0 0 8px; max-width:88ch}

.sticky-call{display:none}
@media(max-width:700px){
  .sticky-call{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:99;
    background:var(--accent); color:#fff; text-align:center; padding:14px; font-weight:800; text-decoration:none; font-size:17px;
  }
  body{padding-bottom:56px}
  header.site{position:static}
  .hdr-cta{display:none}
  .topbar{font-size:13px}
  .topbar .wrap{min-height:0; padding-top:7px; padding-bottom:7px; gap:2px}
}

/* ---------- dropdown nav ---------- */
nav.main li{position:relative}
.navtop{
  background:none; border:0; padding:8px 2px; cursor:pointer; color:var(--ink-2);
  font:600 14.5px/1.4 inherit; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  text-decoration:none; font-family:inherit;
}
.navtop:hover,.has-sub:hover .navtop,.navtop[aria-expanded="true"]{color:var(--brand)}
.chev{transition:transform .2s ease; flex:0 0 auto}
.has-sub:hover .chev,.navtop[aria-expanded="true"] .chev{transform:rotate(180deg)}
.sub{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px;
  box-shadow:0 18px 44px -12px rgba(15,28,38,.22); min-width:270px; z-index:60;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}
.sub.wide{min-width:520px; max-width:min(560px, calc(100vw - 40px))}
nav.main .sub.wide ul{display:block; columns:2; column-gap:12px}
.has-sub:hover .sub,.navtop[aria-expanded="true"]+.sub{opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0)}
nav.main .sub ul{display:block; list-style:none; margin:0; padding:0; flex-wrap:nowrap}
.sub li{break-inside:avoid}
.sub a{
  display:block; padding:8px 11px; border-radius:7px; font-size:14.5px; font-weight:500;
  color:var(--ink-2); text-decoration:none; line-height:1.35;
}
.sub a:hover{background:var(--bg-2); color:var(--brand)}

/* ---------- hero visual ---------- */
.hero{position:relative; overflow:hidden}
.hero-visual{position:relative}
.hero-visual svg{width:100%; height:auto; display:block; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line); background:linear-gradient(180deg,#fbfdfe,#eef5f9)}
.drip{animation:drip 2.6s cubic-bezier(.55,0,.85,.4) infinite}
@keyframes drip{
  0%{transform:translateY(0) scale(.55); opacity:0}
  12%{transform:translateY(0) scale(1); opacity:1}
  72%{transform:translateY(58px) scale(1); opacity:1}
  86%{transform:translateY(64px) scale(1.25,.55); opacity:.7}
  100%{transform:translateY(64px) scale(1.7,.2); opacity:0}
}
.drip.d2{animation-delay:.85s} .drip.d3{animation-delay:1.7s}
.ripple{transform-origin:center; animation:ripple 2.6s ease-out infinite}
@keyframes ripple{0%{r:2; opacity:.65} 100%{r:30; opacity:0}}
.ripple.r2{animation-delay:.85s} .ripple.r3{animation-delay:1.7s}
.sweep{animation:sweep 4.2s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:translateX(0)} 50%{transform:translateX(214px)}}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25} 50%{opacity:.9}}
.wave{animation:wave 7s linear infinite}
@keyframes wave{0%{transform:translateX(0)} 100%{transform:translateX(-160px)}}

/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff}
.trust .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2px 28px; padding:18px 20px}
.trust div{display:flex; gap:11px; align-items:flex-start; padding:8px 0}
.trust svg{flex:0 0 22px; margin-top:2px; color:var(--brand)}
.trust b{display:block; font-size:15px; line-height:1.3}
.trust span{font-size:13.5px; color:var(--ink-3); line-height:1.45}

/* ---------- leak type slider ---------- */
.slider-wrap{margin:0 0 34px; position:relative}
.slider-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap}
.slider-head h2{margin:0!important; font-size:clamp(24px,3.1vw,34px); font-weight:800; letter-spacing:-.8px}
.slider-nav{display:flex; gap:8px}
.sbtn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff;
  cursor:pointer; color:var(--brand); display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.sbtn:hover{background:var(--bg-3); border-color:var(--brand)}
.sbtn:disabled{opacity:.35; cursor:default}
.slider{
  min-width:0; max-width:100%;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(290px,1fr);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 4px 14px; margin:0 -4px; scrollbar-width:thin;
}
.slider::-webkit-scrollbar{height:7px}
.slider::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
.slide{
  scroll-snap-align:start; border:1px solid var(--line); border-radius:12px; background:#fff;
  text-decoration:none; color:inherit; display:grid; grid-template-columns:62px minmax(0,1fr);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.slide .num{
  background:var(--navy); color:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; gap:12px; padding:18px 6px;
}
.slide .num b{font-size:16px; font-weight:800; letter-spacing:.5px; color:var(--teal-2)}
.slide .num .ico{color:#fff}
.slide .num .tag{
  writing-mode:vertical-rl; transform:rotate(180deg); margin-top:auto;
  font-size:10.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#8fb4c9;
}
.slide .body{padding:20px; display:flex; flex-direction:column; gap:9px}
.slide:hover{transform:translateY(-4px); box-shadow:0 16px 34px -16px rgba(15,28,38,.28); border-color:var(--brand-2)}
.slide .ico{display:flex; align-items:center; justify-content:center}
.slide h3{margin:0; font-size:17.5px; line-height:1.3}
.slide p{margin:0; font-size:15px; color:var(--ink-2); line-height:1.55}
.slide .more{margin-top:auto; padding-top:6px; font-size:14.5px; font-weight:700; color:var(--brand)}
.slide:hover .more{text-decoration:underline}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}

/* ---------- mobile nav overrides (must come last) ---------- */
@media(max-width:980px){
  header.site .wrap{flex-wrap:wrap; gap:10px; min-height:0; padding-top:12px; padding-bottom:12px}
  .burger{display:flex}
  nav.main{order:3; flex:1 0 100%; display:none; padding:6px 0 4px;
    border-top:1px solid var(--line-2); margin-top:4px}
  body.nav-open nav.main{display:block}
  nav.main > ul{flex-direction:column; align-items:stretch; gap:0; flex-wrap:nowrap}
  nav.main > ul > li{width:100%; border-bottom:1px solid var(--line-2)}
  nav.main > ul > li:last-child{border-bottom:0}
  .navtop{width:100%; justify-content:space-between; padding:14px 2px; font-size:16px}
  nav.main .sub{
    position:static !important; transform:none !important; min-width:0 !important; max-width:none !important;
    width:auto; border:0; box-shadow:none; border-radius:0; padding:0 0 10px 10px;
    display:none; opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  }
  nav.main .sub.wide ul{columns:1 !important}
  nav.main .has-sub:hover .sub{display:none}
  nav.main .navtop[aria-expanded="true"] + .sub{display:block}
  .sub a{padding:10px; font-size:15px}
}

.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:#fff; padding:10px; z-index:200}
.updated{font-size:13.5px; color:var(--ink-3); margin:0 0 22px}