:root{
  --navy:#0B2E4F;
  --navy-800:#0F3A63;
  --navy-700:#134676;
  --blue:#1D6FB8;
  --blue-light:#4B92D6;
  --steel:#5B7A94;
  --amber:#F5A623;
  --amber-dark:#D8860B;
  --red:#D64541;
  --red-dark:#B5322E;
  --ink:#16222E;
  --muted:#5A6B7A;
  --bg:#F5F8FB;
  --card:#FFFFFF;
  --line:#E1E8EF;
  --shadow:0 10px 30px rgba(11,46,79,.10);
  --shadow-lg:0 24px 60px rgba(11,46,79,.18);
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{
  margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:'Oswald',sans-serif;font-weight:600;line-height:1.08;text-transform:uppercase;letter-spacing:.01em;margin:0;}
p{margin:0 0 1rem;}
a{color:var(--blue);text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:.82rem;color:var(--amber-dark);margin:0 0 .6rem;}
.eyebrow.on-dark{color:var(--amber);}
.optional{color:#B9C4CE;text-transform:none;font-weight:400;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:1rem;padding:.85rem 1.6rem;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:.18s ease;white-space:nowrap;}
.btn-primary{background:var(--amber);color:var(--navy);border-color:var(--amber);}
.btn-primary:hover{background:var(--amber-dark);border-color:var(--amber-dark);color:#fff;transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue);}
.btn-outline:hover{background:var(--blue);color:#fff;}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(11,46,79,.97);backdrop-filter:blur(8px);border-bottom:3px solid var(--amber);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 24px;max-width:var(--maxw);margin:0 auto;}
.brand{display:flex;align-items:center;color:#fff;}
/* White wordmark on transparency — depends on the navy header behind it. */
.brand img{height:85px;width:auto;display:block;}
.menu{display:flex;align-items:center;gap:1.4rem;}
.menu a.link{color:#DCE7F2;font-family:'Oswald',sans-serif;text-transform:uppercase;font-weight:500;font-size:.86rem;letter-spacing:.06em;}
.menu a.link:hover{color:var(--amber);}
.menu .btn{padding:.55rem 1.1rem;font-size:.85rem;}
.hamb{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;line-height:1;}

/* Hero */
.hero{position:relative;background:
    radial-gradient(1200px 500px at 80% -10%, rgba(29,111,184,.55), transparent 60%),
    linear-gradient(160deg,#0B2E4F 0%, #0F3A63 55%, #123f6b 100%);
    color:#fff;overflow:hidden;}
.hero::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent,transparent 46px,rgba(255,255,255,.05) 46px,rgba(255,255,255,.05) 52px);opacity:.5;pointer-events:none;}
.hero .wrap{position:relative;z-index:2;padding-top:64px;padding-bottom:64px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem);color:#fff;}
.hero h1 .hl{color:var(--amber);}
.hero .lead{font-size:1.12rem;color:#E4EDF6;max-width:620px;margin-top:1.1rem;}
.cliff-tag{display:inline-flex;align-items:center;gap:.5rem;background:rgba(214,69,65,.16);border:1px solid rgba(214,69,65,.5);color:#FFD7D4;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:600;padding:.4rem .8rem;border-radius:100px;margin-bottom:1.1rem;}
.cliff-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(214,69,65,.3);}

/* Signup card */
.signup-card{background:#fff;color:var(--ink);border-radius:14px;padding:26px 26px 22px;box-shadow:var(--shadow-lg);border-top:5px solid var(--amber);}
.signup-card h3{font-size:1.35rem;color:var(--navy);}
.signup-card p.sc-sub{font-size:.95rem;color:var(--muted);margin:.35rem 0 1.1rem;}
.fld{margin-bottom:.7rem;}
.fld label{display:block;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--steel);margin-bottom:.25rem;}
.fld input{width:100%;padding:.72rem .85rem;border:1.5px solid var(--line);border-radius:7px;font-size:1rem;font-family:inherit;transition:.15s;}
.fld input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,111,184,.15);}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.signup-card .btn{width:100%;justify-content:center;margin-top:.4rem;}
.sc-fine{font-size:.75rem;color:var(--muted);text-align:center;margin:.7rem 0 0;}
.form-error{background:rgba(214,69,65,.08);border:1px solid rgba(214,69,65,.35);color:var(--red-dark);border-radius:7px;padding:.6rem .75rem;font-size:.85rem;margin:0 0 .7rem;}
.form-error[hidden]{display:none;}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}

/* Section scaffolding */
section{padding:72px 0;}
.sec-head{max-width:820px;margin-bottom:8px;}
.sec-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--navy);}
.sec-sub{font-size:1.05rem;font-style:italic;color:var(--muted);margin:.55rem 0 0;max-width:760px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;}
.col-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px;box-shadow:var(--shadow);height:100%;}
.col-card h3{font-size:1.55rem;color:var(--navy);margin-bottom:.2rem;}
ul.check{list-style:none;padding:0;margin:1rem 0;}
ul.check li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;font-size:.98rem;}
ul.check li::before{content:"";position:absolute;left:0;top:.35rem;width:1.15rem;height:1.15rem;border-radius:4px;background:var(--blue);
   -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/></svg>") center/78% no-repeat;
           mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/></svg>") center/78% no-repeat;}

/* Video */
.video-embed{position:relative;padding-bottom:56.25%;height:0;border-radius:10px;overflow:hidden;background:#0B2E4F;margin-top:1.2rem;box-shadow:var(--shadow);}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Placeholder */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(45deg,#eef3f8,#eef3f8 12px,#e6edf4 12px,#e6edf4 24px);border:2px dashed #B9C9D8;border-radius:10px;color:var(--steel);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;padding:1.4rem;}
.ph.map{aspect-ratio:4/3;}
.ph.logo{height:90px;width:200px;margin-bottom:1rem;font-size:.72rem;}
.ph small{font-family:'Inter';text-transform:none;letter-spacing:0;color:#9AAABA;margin-top:.35rem;font-size:.72rem;}
.media-note{font-size:.78rem;color:var(--muted);font-style:italic;margin:.5rem 0 0;}

/* Partner logos (Fix WI Bridges, Revitalize) */
.partner-logo{display:block;max-width:230px;width:100%;height:auto;margin:0 0 1.1rem;}

/* Map figures — resolutions map (zooms) and bridges map (links out) */
.map-figure{margin:0;}
.map-figure img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid #dbe4ec;background:#fff;}
/* The resolutions map is a tall portrait scan; left uncapped it runs ~610px and
   drags its column well past the roundtables column beside it. Capped and
   letterboxed here — the lightbox still serves the full-size version. */
.map-figure img.capped{max-height:470px;width:auto;max-width:100%;margin:0 auto;}
.map-figure figcaption{font-size:.76rem;color:var(--muted);margin-top:.45rem;text-align:center;}
.map-figure a,.map-figure .zoomable{display:block;border-radius:10px;}
.map-figure a:focus-visible,.map-figure .zoomable:focus-visible{outline:3px solid var(--amber);outline-offset:3px;}
.map-figure a img,.map-figure .zoomable img{transition:box-shadow .18s ease,transform .18s ease;}
.map-figure a:hover img,.map-figure .zoomable:hover img{box-shadow:var(--shadow);transform:translateY(-2px);}
.zoomable{padding:0;border:0;background:none;width:100%;cursor:zoom-in;font:inherit;}

/* Image lightbox */
.lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,22,38,.9);}
.lightbox[hidden]{display:none;}
.lightbox img{max-width:100%;max-height:calc(100vh - 96px);width:auto;height:auto;border-radius:8px;background:#fff;box-shadow:var(--shadow-lg);}
.lightbox-close{position:absolute;top:14px;right:18px;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;}
.lightbox-close:hover{background:var(--amber);border-color:var(--amber);color:var(--navy);}
.lightbox-close:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}
body.lb-open{overflow:hidden;}
@media (prefers-reduced-motion:reduce){
  .map-figure a img,.map-figure .zoomable img{transition:none;}
  .map-figure a:hover img,.map-figure .zoomable:hover img{transform:none;}
}

/* Transportation Delivers band */
.td-band{background:linear-gradient(180deg,#0B2E4F,#0d3357);color:#fff;}
.td-band h2{color:#fff;}
.td-lead{max-width:820px;color:#DCE7F2;font-size:1.08rem;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:32px 0;}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:22px;}
.stat .num{font-family:'Oswald';font-weight:700;font-size:2.3rem;line-height:1;color:#fff;}
.stat .num.amber{color:var(--amber);}
.stat .lbl{font-size:.86rem;color:#BFD2E4;margin-top:.5rem;}
.td-photos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0 36px;}
.td-photos img{border-radius:12px;height:260px;width:100%;object-fit:cover;box-shadow:var(--shadow);}
.cond-head{font-family:'Oswald';text-transform:uppercase;letter-spacing:.05em;color:#FFD7D4;font-size:1rem;margin:8px 0 14px;display:flex;align-items:center;gap:.6rem;}
.cond-head::before{content:"\26A0";color:var(--red);}
/* Two across: the two short tiles pair up on the first row, then the two
   copy-heavy ones (repair costs, crash fatalities) each get a full row to
   themselves so neither sets a tall row height for a near-empty neighbor. */
.cond-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.cond.wide{grid-column:1/-1;}
.cond{display:flex;gap:14px;align-items:flex-start;background:rgba(214,69,65,.10);border-left:4px solid var(--red);border-radius:8px;padding:16px 18px;}
.cond .cnum{font-family:'Oswald';font-weight:700;font-size:1.5rem;color:#FF9E99;line-height:1;white-space:nowrap;}
.cond .ctxt{font-size:.92rem;color:#E6EEF6;}
/* Ties the four condition tiles back to the argument. The tiles own the red
   accent, so this borrows the band's amber instead of competing with them. */
.cond-close{max-width:900px;margin:26px 0 0;font-size:1.02rem;color:#E6EEF6;border-left:4px solid var(--amber);padding-left:18px;}

/* I-94 East-West — a white band between the navy facts band and the page-bg
   Bridges/Revitalize columns, so the three sections don't bleed together. */
.i94-band{background:var(--card);}
/* 1920x728 crop, shown at its natural ratio: the congestion is along the
   bottom edge, so cropping to a fixed height would cut the point of the photo. */
.i94-figure{margin:22px 0 30px;}
.i94-figure img{width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow);}
.i94-body{display:grid;grid-template-columns:1.75fr 1fr;gap:44px;align-items:start;}
.i94-copy p:last-child{margin-bottom:0;}
/* Closes the section across both columns rather than tailing off the end of the
   left one, so the band ends on the argument and the bottom edge squares up. */
.i94-lesson{font-weight:600;color:var(--navy);border-left:4px solid var(--amber);padding-left:18px;margin:34px 0 0;font-size:1.05rem;}

/* Delay ledger — the two cost estimates the prose compares, shown as a ledger
   so the escalation reads at a glance instead of only in the paragraph. */
.i94-ledger{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px;}
.led-row{padding:16px 18px;background:var(--bg);}
.led-row+.led-row{border-top:1px solid var(--line);}
/* The current estimate carries the weight; the original is context. */
.led-now{background:#fff;box-shadow:inset 4px 0 0 var(--red);}
.led-when{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:600;color:var(--steel);}
.led-year{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.9rem;line-height:1.1;color:var(--navy);}
.led-now .led-year{color:var(--red-dark);}
.led-cost{font-size:.9rem;color:var(--muted);}
/* The callout sits directly under the ledger it concludes. */
.i94-side .callout-big{margin:0;}

/* Bridges / Revitalize */
.callout-big{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;border-radius:10px;padding:18px 22px;margin:1.1rem 0;}
.callout-big .cb-num{font-family:'Oswald';font-weight:700;font-size:2rem;line-height:1;}
.callout-big .cb-txt{font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;margin-top:.2rem;}
/* Stacked rather than side by side: gives the photos enough width to be legible
   and brings this column closer in height to the Bridges column beside it. */
.partner-photos{display:grid;grid-template-columns:1fr;gap:12px;margin:1.1rem 0;}
.partner-photos img,.partner-photos .ph{width:100%;height:240px;border-radius:8px;object-fit:cover;object-position:center 35%;}
/* Portrait-orientation photos crop vertically; bias the window up to keep faces
   and signage in frame rather than centring on torsos. */
.partner-photos img.focus-top{object-position:center 8%;}

/* Revitalize carries less than the Bridges column beside it, so equal-height rows
   leave slack at its foot. Absorb that into the photo stack rather than showing it
   as white space — and spend it on the portrait photo, which is the one with pixels
   to spare: Wisconsin Rapids is 1536x2048 and would otherwise display barely a third
   of its own height. Beloit is 2048x1024 landscape and already sits at its natural
   height, so growing it would only crop people off the ends of a group shot.

   The filling photo is absolutely positioned inside .photo-fill on purpose. An
   in-flow image contributes its intrinsic 632px height to the card's max-content
   size, which makes THIS column the taller one and just moves the white space over
   to Bridges. Out of flow it contributes nothing, so the card's natural height stays
   what it always was, Bridges keeps setting the row height, and the photo grows to
   exactly close the gap — no tuned pixel value, and it re-balances by itself if
   either column's copy changes. */
#revitalize{display:flex;flex-direction:column;}
/* Flex suppresses margin collapsing; zeroing this one keeps the card's vertical
   rhythm matching Bridges instead of gaining ~34px from the two doubled pairs. */
#revitalize .partner-photos{flex:1 1 auto;margin:0;display:flex;flex-direction:column;gap:12px;}
#revitalize .partner-photos>img{height:240px;flex:none;}
/* min-height keeps the no-slack cases — single-column mobile, or this column ever
   becoming the taller one — identical to the old fixed-height layout. */
#revitalize .photo-fill{flex:1 1 auto;min-height:240px;position:relative;}
#revitalize .photo-fill img{position:absolute;inset:0;width:100%;height:100%;border-radius:8px;object-fit:cover;object-position:center 8%;}

/* Spots */
.tv-band{background:var(--card);}
.tv-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px;}

/* Final CTA */
.final-cta{background:linear-gradient(120deg,var(--amber),#e79a12);color:var(--navy);text-align:center;}
.final-cta h2{color:var(--navy);font-size:clamp(1.9rem,3.4vw,2.8rem);}
.final-cta p{max-width:640px;margin:1rem auto 1.6rem;font-size:1.1rem;font-weight:500;}
.final-cta .btn{background:var(--navy);color:#fff;border-color:var(--navy);font-size:1.1rem;padding:1rem 2.2rem;}
.final-cta .btn:hover{background:#08243e;}

/* Footer */
footer.site{background:#08243e;color:#B7C7D8;padding:52px 0 30px;}
/* TDA boilerplate gets its own band across the top of the footer: logo at the
   left, copy beside it in one column. Capped near 68 characters per line —
   full width would run ~170, and splitting it in two read as cramped. */
.foot-about{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start;}
.tda-about{max-width:68ch;font-size:.9rem;line-height:1.75;margin:0;}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin-top:30px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);}
/* Six links stacked would tower over the Contact column; two columns evens them. */
.foot-nav{columns:2;column-gap:24px;}
footer.site img.tda{height:70px;width:auto;margin:0;}
footer.site h4{font-family:'Oswald';color:#fff;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;margin-bottom:.8rem;}
footer.site a{color:#9FB6CC;}
footer.site a:hover{color:var(--amber);}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;font-size:.82rem;color:#7C93A9;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* Exit-intent modal */
.exit-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,22,38,.82);}
.exit-modal[hidden]{display:none;}
.exit-panel{position:relative;width:100%;max-width:470px;max-height:calc(100vh - 48px);overflow-y:auto;background:#fff;border-radius:14px;border-top:5px solid var(--amber);box-shadow:var(--shadow-lg);padding:28px 26px 22px;}
.exit-panel h3{font-size:1.5rem;color:var(--navy);padding-right:34px;}
.exit-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--steel);font-size:1.6rem;line-height:1;cursor:pointer;}
.exit-close:hover{background:var(--bg);color:var(--navy);}
.exit-close:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}

/* Confirmation (JS-injected) */
.form-confirmation{text-align:center;padding:1.4rem 0;}
.form-confirmation .ci{font-size:2.2rem;color:var(--blue);}
.form-confirmation h3{color:var(--navy);margin:.4rem 0 .3rem;}
.form-confirmation p{color:var(--muted);margin:0;}

/* Responsive */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:34px;padding-top:44px;padding-bottom:48px;}
  .two-col{grid-template-columns:1fr;gap:28px;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .td-photos,.cond-grid,.tv-grid{grid-template-columns:1fr;}
  .i94-body{grid-template-columns:1fr;gap:26px;}
  .foot-about{grid-template-columns:1fr;gap:18px;}
  .hamb{display:block;}
  .brand img{height:52px;}
  .menu{position:absolute;top:100%;left:0;right:0;background:rgba(11,46,79,.99);flex-direction:column;align-items:flex-start;gap:0;padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease;border-bottom:3px solid var(--amber);}
  .menu.open{max-height:420px;padding:12px 24px 20px;}
  .menu a.link{padding:.6rem 0;font-size:1rem;}
  .menu .btn{margin-top:.6rem;}
}
@media(max-width:480px){
  .fld-row{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;}
  section{padding:52px 0;}
}