/* Discover WPU - public site styles.
 *
 * Shared by the homepage (page_wpu_home) and the Express Interest pages.
 * Those are standalone documents that load no Odoo asset bundle, so this
 * file is linked directly and cached by the browser. Inter is self-hosted
 * (Latin subset, about 24 KB a weight), with a system fallback while it loads.
 */

:root{
  /* Page-level names for Discover WPU, each mapped onto a WPU Design System
   * token from wpu_tokens.css (generated from design_system/tokens.json).
   * Change a colour there, never here. */
  --navy:var(--primary-navy); --navy-700:var(--deep-blue); --navy-900:var(--primary-navy); --navy-50:var(--primary-blue-50);
  --blue:var(--primary-blue); --blue-700:var(--deep-blue); --blue-50:var(--primary-blue-50);
  --gold:var(--accent-gold); --gold-600:var(--accent-gold-hover); --gold-50:var(--accent-gold-50);
  --ink:var(--text-primary); --ink-soft:var(--text-secondary); --muted:var(--text-muted); --line:var(--border);
  --bg:var(--surface-card); --surface-2:var(--bg-light);
  --danger:var(--error-text); --danger-50:var(--error-50);
  --radius:var(--radius-xl);
  --shadow:var(--shadow-md);
  --font:var(--font-ui);
  --header-h:96px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px);}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1.15;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer; background:none; border:none; appearance:none; -webkit-appearance:none; color:inherit;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid var(--focus-ring); outline-offset:2px;}
.site-footer a:focus-visible, .skip-link:focus-visible{outline-color:var(--focus-ring-on-dark);}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 16px;} }
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip-link{position:absolute; left:16px; top:-60px; z-index:500; background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px; font-weight:700;}
.skip-link:focus{top:12px;}
.icon{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.eyebrow{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--navy);}

/* ===== Buttons =====
 * States: default / hover (darker, lifts 1px, arrow nudges) / focus-visible
 * (double ring) / active (pressed back down). 48px minimum height for touch. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 24px; border-radius:var(--radius-md); border:2px solid transparent;
  font-size:16px; font-weight:600; line-height:1.2; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn .icon{width:20px; height:20px; stroke-width:2.2;}
.btn .arrow{transition:transform .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn:hover .arrow{transform:translateX(3px);}
.btn:active{transform:translateY(0); box-shadow:none;}
.btn-block{display:flex; width:100%;}
.btn-sm{min-height:44px; padding:10px 18px; font-size:15px;}
.btn-gold{background:var(--gold); color:var(--navy-900); box-shadow:0 8px 18px -10px rgba(227,166,0,.8);}
.btn-gold:hover{background:var(--gold-600);}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 8px 18px -10px rgba(8,75,154,.7);}
.btn-primary:hover{background:var(--blue-700);}
.btn-navy{background:var(--navy); color:#fff; box-shadow:0 8px 18px -10px rgba(6,46,99,.8);}
.btn-navy:hover{background:var(--navy-700);}
.btn-outline{background:#fff; color:var(--blue); border-color:var(--blue);}
.btn-outline:hover{background:var(--blue-50); color:var(--blue-700); border-color:var(--blue-700);}
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.6);}
.btn-ghost-light:hover{background:rgba(255,255,255,.12); border-color:#fff;}
.btn[disabled]{opacity:.6; cursor:wait; transform:none;}
@media (prefers-reduced-motion: reduce){ .btn, .btn .arrow{transition:none;} .btn:hover, .btn:hover .arrow{transform:none;} }

/* ===== Header ===== */
.site-header{position:sticky; top:0; z-index:200; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .2s ease;}
.site-header.is-scrolled{box-shadow:0 6px 20px -12px rgba(20,33,61,.35);}
.header-bar{display:flex; align-items:center; gap:24px; height:var(--header-h);}
.brand{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.brand img{height:78px; width:auto;}
.brand-tag{padding-left:14px; border-left:2px solid var(--gold); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); line-height:1.25;}
.brand-tag small{display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:none; color:var(--muted);}

.main-nav{display:flex; align-items:center; gap:4px; margin-left:auto;}
.main-nav a{position:relative; padding:10px 14px; font-size:15px; font-weight:700; color:var(--ink-soft); border-radius:8px; white-space:nowrap; transition:color .15s ease;}
.main-nav a::after{content:""; position:absolute; left:14px; right:14px; bottom:4px; height:3px; border-radius:2px; background:var(--gold); transform:scaleX(0); transition:transform .18s ease;}
.main-nav a:hover{color:var(--navy);}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.main-nav a[aria-current="page"]{color:var(--navy);}

.header-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.visit-link{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--navy); padding:8px 4px; white-space:nowrap;}
.visit-link .icon{width:18px; height:18px;}
.visit-link:hover{text-decoration:underline; text-underline-offset:4px;}
.header-divider{width:1px; height:28px; background:var(--line);}
.signout-link{font-size:14px; font-weight:700; color:var(--muted); padding:8px 4px;}
.signout-link:hover{color:var(--danger);}
.account-initial{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--gold); color:var(--navy-900); font-size:13px; font-weight:700; text-transform:uppercase;}

.menu-toggle{display:none; width:48px; height:48px; border-radius:10px; border:1px solid var(--line); align-items:center; justify-content:center; color:var(--navy);}
.menu-toggle .icon-close{display:none;}
.menu-toggle[aria-expanded="true"] .icon-open{display:none;}
.menu-toggle[aria-expanded="true"] .icon-close{display:block;}

.mobile-menu{display:none; border-top:1px solid var(--line); background:#fff; padding:8px 0 16px;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 4px; font-size:17px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line);}
.mobile-menu a[aria-current="page"]{color:var(--navy); box-shadow:inset 4px 0 0 var(--gold); padding-left:14px;}
.mobile-menu .mobile-menu-secondary{border-bottom:none; color:var(--navy); font-size:16px;}
.mobile-menu .icon{width:20px; height:20px; color:var(--muted);}

@media (max-width:1120px){ .visit-link span.visit-text{display:none;} }
@media (min-width:921px) and (max-width:1120px){ .brand-tag{display:none;} }
@media (max-width:920px){
  :root{--header-h:76px;}
  .main-nav, .visit-link, .header-divider, .signout-link{display:none;}
  .header-actions{margin-left:auto; gap:10px;}
  .menu-toggle{display:inline-flex;}
  .brand img{height:60px;}
  .brand-tag{padding-left:12px; font-size:12px;}
}
/* Sticky only where there is height to spare; on a phone the viewport belongs to the content. */
@media (max-width:920px) and (max-height:820px){ .site-header{position:relative;} }
@media (max-width:520px){ .brand-tag{display:none;} }
@media (max-width:380px){ .header-actions .btn-sm{padding:9px 14px;} .brand img{height:54px;} }

/* ===== Hero ===== */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--navy-900); color:#fff;}
.hero-media{position:absolute; inset:0; z-index:-2;}
.hero-media picture{display:block; width:100%; height:100%;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:70% 50%;}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(6,46,99,.92) 0%, rgba(6,46,99,.86) 50%, rgba(6,46,99,.5) 64%, rgba(6,46,99,0) 86%),
    linear-gradient(0deg, rgba(6,46,99,.55) 0%, rgba(6,46,99,0) 40%);
}
.hero-inner{padding:88px 0 168px; max-width:820px;}
.hero .eyebrow{color:var(--gold);}
.hero h1{text-wrap:balance; color:#fff; font-size:clamp(36px, 4.2vw, 54px); margin:16px 0 18px; letter-spacing:-0.025em;}
.hero h1 .accent{color:var(--gold);}
.hero .lede{font-size:clamp(16px, 1.6vw, 19px); color:rgba(255,255,255,.9); max-width:560px;}
/* The SUCCESS flag on the summit. Placed by discover.js: the pole's foot
 * (3, 63 in the 84 x 64 drawing) stands on the summit point, and the flag
 * grows and shrinks with the photo so it stays in proportion to the
 * mountain. Above the photo shade, so the gold stays true. */
.hero-flag{position:absolute; left:0; top:0; z-index:-1; width:var(--flag-w, 72px); height:auto; aspect-ratio:84 / 64; overflow:visible; pointer-events:none; transform:translate(-3.6%, -98.4%); filter:drop-shadow(0 1px 2px rgba(3,20,45,.5));}
.hero-flag[hidden]{display:none;}
.hero-flag-pole{fill:none; stroke:#E8EEF6; stroke-width:2.2; stroke-linecap:round;}
.hero-flag-cap, .hero-flag-cloth{fill:var(--gold);}
.hero-flag-text{font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:.06em; fill:var(--navy);}

/* ===== Pathway cards (Apply / Express Interest / Sign In) ===== */
.pathways{position:relative; z-index:2; margin-top:-120px;}
.pathway-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.pathway{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:30px 26px 26px; border-radius:var(--radius); background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.pathway.is-apply{background:linear-gradient(180deg, var(--gold-50), #fff 70%);}
.pathway.is-interest{background:linear-gradient(180deg, var(--blue-50), #fff 70%);}
.pathway.is-signin{background:linear-gradient(180deg, var(--surface-2), #fff 70%);}
.pathway-icon{width:56px; height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.pathway-icon .icon{width:46px; height:46px; stroke-width:1.6;}
.is-apply .pathway-icon{color:var(--gold-600);}
.is-interest .pathway-icon{color:var(--blue);}
.is-signin .pathway-icon{color:var(--navy);}
.pathway h2{font-size:22px; margin-bottom:8px;}
.pathway p{color:var(--ink-soft); font-size:15.5px; margin-bottom:22px; flex:1;}
.pathway .btn{width:100%;}

@media (max-width:920px){
  /* The headline runs most of the way across a tablet, into the brighter
   * side of the photo, so the shade has to reach further than on desktop. */
  .hero::before{background:linear-gradient(90deg, rgba(6,46,99,.9) 0%, rgba(6,46,99,.78) 55%, rgba(6,46,99,.55) 100%), linear-gradient(0deg, rgba(6,46,99,.5) 0%, rgba(6,46,99,0) 40%);}
  .hero-inner{padding:64px 0 150px;}
  .pathway{padding:24px 18px 20px;}
  .pathway h2{font-size:19px;}
  .pathway p{font-size:14.5px;}
}
/* Phones: a compact hero, then the three journey cards as short rows - each
 * still says who it is for. */
@media (max-width:700px){
  .hero::before{background:linear-gradient(180deg, rgba(6,46,99,.68) 0%, rgba(6,46,99,.8) 55%, rgba(6,46,99,.9) 100%);}
  .hero-inner{padding:28px 0 72px;}
  /* The headline fills the phone's hero, so the summit is moved out to the
   * right edge rather than sitting behind the words. */
  .hero-media img{object-position:34% 45% !important;}
  .hero h1{font-size:clamp(30px, 8.6vw, 36px); margin:10px 0 10px;}
  .hero-break{display:none;}
  .hero .lede{font-size:15.5px;}
  .pathways{margin-top:-48px;}
  .pathway-grid{grid-template-columns:1fr; gap:12px;}
  .pathway{display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:2px; align-items:center; text-align:left; padding:16px; box-shadow:var(--shadow);}
  .pathway-icon{grid-row:1 / span 2; width:36px; height:36px; margin:0; align-self:start;}
  .pathway-icon .icon{width:30px; height:30px;}
  .pathway h2{font-size:17px; margin:0;}
  .pathway p{font-size:14px; margin:0 0 12px;}
  .pathway .btn{grid-column:1 / -1;}
}
@media (min-width:701px) and (max-width:820px){
  .pathway-grid{grid-template-columns:1fr 1fr;}
  .pathway.is-signin{grid-column:1 / -1;}
}

/* ===== Steps ===== */
.steps{padding:56px 0 24px;}
.steps-list{list-style:none; display:grid; grid-template-columns:repeat(5, 1fr); gap:12px;}
.step{position:relative; display:flex; align-items:center; gap:14px;}
.step:not(:last-child)::after{content:"→"; position:absolute; right:-4px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:20px;}
.step-badge{position:relative; flex-shrink:0; width:56px; height:56px; border-radius:50%; background:var(--navy-50); color:var(--navy); display:flex; align-items:center; justify-content:center;}
.step-badge .icon{width:26px; height:26px;}
.step-num{position:absolute; top:-4px; right:-6px; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #fff;}
.step-text{padding-right:22px;}
.step-text b{display:block; font-size:15px; font-weight:700; color:var(--ink); line-height:1.3;}
.step-text span{font-size:13.5px; color:var(--muted);}
/* Below desktop width the five steps stand as columns, icon over text. */
@media (max-width:1100px){
  .step{flex-direction:column; text-align:center; gap:10px;}
  .step:not(:last-child)::after{right:-12px; top:18px; transform:none;}
  .step-text{padding:0;}
}
@media (max-width:560px){
  .steps{padding:36px 0 8px;}
  .steps-list{gap:4px;}
  .step{gap:8px;}
  .step:not(:last-child)::after{right:-8px; top:14px; font-size:14px;}
  .step-badge{width:44px; height:44px;}
  .step-badge .icon{width:20px; height:20px;}
  .step-num{width:20px; height:20px; font-size:11px;}
  .step-text{padding:0;}
  .step-text b{font-size:12.5px;}
  .step-text span{display:none;}
}

/* ===== Help strip ===== */
.help{padding:32px 0 72px;}
.help-panel{display:grid; grid-template-columns:repeat(3, 1fr); background:var(--surface-2); border-radius:var(--radius); border:1px solid var(--line);}
.help-item{display:flex; gap:18px; padding:28px; align-items:flex-start;}
.help-item + .help-item{border-left:1px solid var(--line);}
.help-item > .icon{width:40px; height:40px; color:var(--navy); stroke-width:1.6;}
.help-item h3{font-size:18px; margin-bottom:4px;}
.help-item p{font-size:14.5px; color:var(--ink-soft); margin-bottom:10px;}
.help-item a{display:inline-flex; align-items:center; gap:6px; min-height:32px; font-size:15px; font-weight:700; color:var(--navy);}
.help-item a:hover{text-decoration:underline; text-underline-offset:4px;}
@media (max-width:860px){
  .help-panel{grid-template-columns:1fr;}
  .help-item + .help-item{border-left:none; border-top:1px solid var(--line);}
  .help-item{padding:20px;}
}

/* ===== Generic sections (FAQ / contact) ===== */
.section{padding:80px 0;}
.section-tint{background:var(--surface-2);}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head h2{font-size:clamp(26px, 3vw, 36px); margin-top:10px;}
.section-head p{color:var(--ink-soft); font-size:16px; margin-top:12px;}
@media (max-width:640px){ .section{padding:56px 0;} }

.faq-list{display:flex; flex-direction:column; gap:12px; max-width:860px;}
.faq-item{border:1px solid var(--line); border-radius:var(--radius-md); background:#fff;}
.faq-q{width:100%; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; text-align:left; font-size:16px; font-weight:700; color:var(--ink);}
.faq-icon{color:var(--navy); font-size:22px; line-height:1; transition:transform .2s ease; flex-shrink:0;}
.faq-item.open{border-color:var(--navy);}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{display:none;}
.faq-item.open .faq-a{display:block;}
.faq-a p{padding:0 20px 18px; color:var(--ink-soft); font-size:15px; max-width:680px;}

.contact-card{display:grid; grid-template-columns:1fr 1.4fr; gap:40px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:40px;}
.contact-card h2{font-size:clamp(24px, 2.6vw, 30px); margin-top:10px;}
.contact-card .contact-intro p{color:var(--ink-soft); margin-top:12px;}
.contact-direct{margin-top:22px; display:flex; flex-direction:column; gap:10px;}
.contact-direct a{display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--navy);}
@media (max-width:860px){ .contact-card{grid-template-columns:1fr; padding:24px; gap:24px;} }

/* ===== Forms ===== */
.form{display:flex; flex-direction:column; gap:18px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:600px){ .form-row{grid-template-columns:1fr;} }
.form .field{display:flex; flex-direction:column; gap:7px;}
.form .field > span, .form .field > label{font-size:14px; font-weight:700; color:var(--ink);}
.form .field .req{color:var(--danger);}
.form .field .opt{font-weight:600; color:var(--muted);}
.form .field input, .form .field select, .form .field textarea{
  width:100%; min-height:48px; padding:12px 14px; border-radius:var(--radius-md); border:1px solid var(--border-input); background:#fff;
  font-family:var(--font); font-size:16px; color:var(--ink);
}
.form .field textarea{resize:vertical; min-height:110px;}
.form .field input:focus, .form .field select:focus, .form .field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-50), inset 0 0 0 1px var(--blue);}
.form .field input[aria-invalid="true"], .form .field select[aria-invalid="true"]{border:2px solid var(--error); padding:11px 13px; background:#fff;}
.field-hint{font-size:13px; color:var(--muted);}
.field-error{font-size:13.5px; font-weight:700; color:var(--danger);}
.form .field > label.check, .check{display:flex; gap:12px; align-items:flex-start; font-size:15px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
/* As specific as the .form .field input rule above, or a checkbox inside a
   form field takes that rule's full width and pushes its text off the card. */
.form .field .check input, .check input{width:22px; height:22px; min-height:0; padding:0; margin-top:2px; accent-color:var(--blue); flex-shrink:0;}
.form-status{font-size:14px; font-weight:700; color:var(--navy); min-height:20px;}
.form-status.is-error{color:var(--danger);}
.error-summary{border:2px solid var(--error); background:var(--danger-50); border-radius:var(--radius-md); padding:16px 18px;}
.error-summary h2{font-size:17px; color:var(--danger); margin-bottom:6px;}
.error-summary ul{padding-left:20px; color:var(--ink); font-size:15px;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ===== Express Interest (UIUX-002) =====
 * The highland photo hero again, with the form card lifted over its lower
 * edge. One page, three small groups, no wizard: about a minute's work on a
 * phone and a single page load on a slow connection. */
.eoi-hero-inner{padding:64px 0 148px; max-width:640px;}
.eoi-hero h1{margin:14px 0 14px;}
.eoi-assure{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.eoi-assure li{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 14px 6px 10px; border-radius:var(--radius-pill); background:rgba(6,46,99,.72); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:14.5px; font-weight:600;}
.eoi-assure .icon{width:18px; height:18px; color:var(--gold); stroke-width:2.2;}
.eoi-hero.is-short{min-height:208px;}

.eoi-body{position:relative; z-index:2; margin-top:-112px; padding-bottom:8px;}
.eoi-grid{display:grid; grid-template-columns:minmax(0, 1.65fr) minmax(0, 1fr); gap:24px; align-items:start;}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:36px;}
.card h2{font-size:22px; margin-bottom:4px;}
.card .card-sub{color:var(--ink-soft); font-size:15px;}
.eoi-card-head{display:flex; align-items:center; gap:14px; margin-bottom:24px;}
.eoi-card-icon{width:48px; height:48px; flex-shrink:0; border-radius:50%; background:var(--blue-50); color:var(--blue); display:flex; align-items:center; justify-content:center;}
.eoi-card .error-summary{margin-bottom:24px;}

.eoi-form{gap:22px;}
.eoi-group{border:0; margin:0; padding:0; min-width:0;}
.eoi-group + .eoi-group{border-top:1px solid var(--line); padding-top:22px;}
/* A floated legend behaves like an ordinary heading inside the fieldset. */
.eoi-group > legend{float:left; width:100%; display:flex; align-items:center; gap:10px; padding:0; margin-bottom:16px; font-size:16px; font-weight:700; color:var(--navy);}
.eoi-group > legend + *{clear:both;}
.eoi-group > * + .field, .eoi-group > * + .form-row, .eoi-group > * + .field-hint{margin-top:16px;}
.eoi-group > legend + *{margin-top:0;}
.eoi-group .form-row + .field-hint{margin-top:8px;}
.eoi-num{width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; font-size:13px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}

.control{position:relative; display:block; font-weight:400;}
.control > .icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--text-muted); pointer-events:none;}
.form .field .control input, .form .field .control select{padding-left:44px;}
.form .field .control [aria-invalid="true"]{padding-left:43px;}
.field-error{display:flex; align-items:flex-start; gap:6px;}
.field-error .icon{width:18px; height:18px; margin-top:1px; stroke-width:2.2;}

.eoi-submit{display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; padding-top:2px;}
.eoi-submit .btn{min-width:240px;}
.eoi-submit-note{display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink-soft);}
.eoi-submit-note .icon{width:18px; height:18px; color:var(--blue);}

.aside-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);}
.aside-card + .aside-card{margin-top:16px;}
.aside-card h2{font-size:18px; margin-bottom:14px;}
.aside-card p{color:var(--ink-soft); font-size:15px; margin-bottom:16px;}
.next-steps{list-style:none; display:flex; flex-direction:column; gap:16px; counter-reset:next;}
.next-steps li{display:flex; gap:12px; font-size:15px; color:var(--ink-soft);}
.next-steps li::before{counter-increment:next; content:counter(next); flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--blue-50); color:var(--blue-700); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;}
.next-steps b{color:var(--ink);}

/* The journey strip on the Express Interest pages: a visible heading, and
 * the visitor's own step picked out. */
.steps.has-heading{padding-top:48px;}
.steps.has-heading h2{font-size:22px; margin-bottom:22px;}
.steps.has-heading .step .step-badge{background:var(--navy-50); color:var(--navy);}
.steps.has-heading .step.is-current .step-badge{background:var(--blue); color:#fff; box-shadow:0 0 0 5px var(--blue-50);}
.steps.has-heading .step.is-current .step-num{background:var(--gold); color:var(--navy);}

.thanks-card{max-width:720px; margin:0 auto; text-align:center;}
.thanks-card h1{font-size:clamp(26px, 3.4vw, 34px); margin-bottom:12px; text-wrap:balance;}
.thanks-mark{width:72px; height:72px; margin:0 auto 18px; border-radius:50%; background:var(--success-50); color:var(--success-text); display:flex; align-items:center; justify-content:center;}
.thanks-mark .icon{width:38px; height:38px; stroke-width:2.4;}
.thanks-lede{font-size:17px; color:var(--ink-soft); max-width:560px; margin:0 auto;}
.thanks-updated{max-width:560px; margin:10px auto 0; font-size:15px; color:var(--ink-soft);}
.thanks-ref{display:inline-block; margin:18px 0 0; padding:8px 18px; border-radius:var(--radius-pill); background:var(--navy-50); color:var(--navy); font-weight:700; letter-spacing:.04em;}
.thanks-note{display:flex; align-items:center; gap:12px; max-width:540px; margin:18px auto 0; padding:14px 18px; text-align:left; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-md); font-size:15px; color:var(--ink-soft);}
.thanks-note .icon{color:var(--navy);}
.thanks-note b{color:var(--ink); overflow-wrap:anywhere;}
.thanks-apply{margin-top:28px; padding-top:24px; border-top:1px solid var(--line);}
.thanks-apply h2{font-size:20px; margin-bottom:6px;}
.thanks-apply p{max-width:520px; margin:0 auto; font-size:15px; color:var(--ink-soft);}
.thanks-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px;}

@media (max-width:920px){
  .eoi-hero-inner{padding:52px 0 136px;}
  .eoi-grid{grid-template-columns:1fr;}
  .aside-card + .aside-card{margin-top:0;}
  .eoi-aside{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
}
@media (max-width:700px){
  /* Text sits at the top of the photo on a phone, so the shade is even. */
  .eoi-hero::before{background:linear-gradient(180deg, rgba(6,46,99,.74) 0%, rgba(6,46,99,.82) 60%, rgba(6,46,99,.92) 100%);}
  .eoi-hero-inner{padding:24px 0 84px;}
  .eoi-hero h1{font-size:32px; margin:10px 0 10px;}
  .eoi-hero .lede{font-size:15.5px;}
  .eoi-assure{margin-top:16px; gap:8px;}
  .eoi-assure li{font-size:13.5px; min-height:32px; padding:4px 12px 4px 8px;}
  .eoi-hero.is-short{min-height:132px;}
  .eoi-body{margin-top:-64px;}
  .card{padding:22px 18px;}
  .eoi-card-head{margin-bottom:18px;}
  .eoi-card-icon{width:40px; height:40px;}
  .eoi-submit .btn{width:100%; min-width:0;}
  .eoi-submit-note{width:100%; justify-content:center; font-size:14px;}
  .eoi-aside{grid-template-columns:1fr;}
  .aside-card{padding:22px 18px;}
  .thanks-lede{font-size:16px;}
  .thanks-actions .btn{width:100%;}
}
@media (max-width:560px){
  .steps.has-heading{padding-top:32px;}
  .steps.has-heading h2{font-size:19px; margin-bottom:16px;}
}

/* ===== Footer ===== */
.site-footer{background:var(--navy-900); color:rgba(255,255,255,.75); padding:56px 0 24px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.14);}
.footer-brand{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.footer-brand img{height:56px; width:auto; background:#fff; border-radius:10px; padding:4px 6px;}
.footer-brand b{color:#fff; font-size:17px;}
.footer-brand small{display:block; color:var(--gold); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;}
.footer-grid p{font-size:14px; max-width:320px;}
.footer-col h3{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:14px;}
.footer-col a{display:block; font-size:14.5px; color:rgba(255,255,255,.75); padding:5px 0;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{padding-top:20px; font-size:13px; color:rgba(255,255,255,.55); display:flex; justify-content:space-between; gap:8px 24px; flex-wrap:wrap;}
.photo-credit a{color:rgba(255,255,255,.75); text-decoration:underline; text-underline-offset:2px;}
.photo-credit a:hover{color:var(--gold);}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} .footer-grid > div:first-child{grid-column:1 / -1;} }

/* ===== Signed-in extras on the homepage (staff to-do popup, live counts) ===== */
.alert-banner{position:fixed; top:96px; right:24px; width:380px; max-width:calc(100vw - 32px); z-index:300; pointer-events:none;}
.alert-banner-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:22px 44px 22px 24px; display:flex; flex-direction:column; gap:16px;
  pointer-events:auto;
}
.alert-banner-card.is-clear{flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.alert-banner-head-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.is-clear-actions{display:flex; align-items:center; gap:14px;}
a.alert-banner-head{display:flex; flex-direction:column;}
a.alert-banner-head:hover h3{color:var(--navy);}
.alert-banner .eyebrow{font-size:11px;}
@media (max-width:640px){ .alert-banner{top:auto; bottom:16px; left:16px; right:16px; width:auto;} }
.alert-close{position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:var(--danger-50); color:var(--danger); font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.alert-close:hover{background:var(--danger); color:#fff;}
.alert-banner-head h3{font-size:17px; margin-top:6px;}
.alert-banner-head p{color:var(--muted); font-size:14px; margin-top:4px;}
.alert-list{display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); padding-top:12px;}
.alert-item{display:flex; align-items:flex-start; gap:12px; padding:10px 8px; border-radius:var(--radius-md);}
.alert-item:hover{background:var(--surface-2);}
.alert-dot{width:8px; height:8px; border-radius:50%; margin-top:7px; flex-shrink:0; background:var(--muted);}
.alert-dot.overdue{background:var(--danger);}
.alert-dot.today{background:var(--gold-600);}
.alert-item-text{display:flex; flex-direction:column; gap:2px;}
.alert-item-text b{font-size:14px;}
.alert-item-meta{font-size:12.5px; color:var(--muted);}
.alert-badge{font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 10px; border-radius:999px; background:var(--danger-50); color:var(--danger);}
.alert-badge.is-muted{background:var(--success-50); color:var(--success-text);}
.alert-actions{display:flex; gap:10px; flex-wrap:wrap;}

.stats-band{background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 0;}
.stats-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.stats-band strong{font-size:16px; color:var(--ink);}
.stats-grid{display:flex; gap:36px; flex-wrap:wrap;}
.stat-block b{display:block; font-size:30px; line-height:1; color:var(--navy);}
.stat-block span{display:block; margin-top:6px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);}

/* ===== Sign-in dialog ===== */
.modal-overlay{position:fixed; inset:0; background:rgba(6,46,99,.6); display:none; align-items:center; justify-content:center; padding:16px; z-index:400;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff; max-width:420px; width:100%; padding:32px; position:relative; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); border-top:5px solid var(--gold);}
.modal-close{position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:10px; background:var(--surface-2); font-size:20px; color:var(--muted);}
.modal-close:hover{color:var(--ink);}
.modal-box h2{font-size:22px; margin:8px 0 20px;}
.modal-box .form{gap:14px;}
.password-field{position:relative;}
.password-field input{padding-right:52px;}
.password-field input::-ms-reveal, .password-field input::-ms-clear{display:none;}
.password-toggle{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--muted);}
.password-toggle:hover{color:var(--ink);}
.password-toggle svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.password-toggle .icon-eye-off{display:none;}
.password-toggle.is-visible .icon-eye{display:none;}
.password-toggle.is-visible .icon-eye-off{display:block;}
.forgot-link{font-size:14px; color:var(--navy); font-weight:700; align-self:flex-end; margin-top:-4px;}
.modal-note{margin-top:18px; font-size:13.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px;}