:root{
  --navy:#002A57;
  --navy-900:#001B3A;
  --navy-800:#052E5E;
  --navy-700:#0E3B6E;
  --navy-600:#17508E;
  --gold:#F19911;
  --gold-bright:#FFB02E;
  --gold-soft:#FFE3AE;
  --gold-tint:#FFF6E4;
  --ink:#16222F;
  --slate:#4A5B70;
  --muted:#7E8EA5;
  --line:#E3E8F0;
  --bg:#F6F8FB;
  --card:#FFFFFF;
  --radius:20px;
  --shadow:0 18px 50px -24px rgba(0,27,58,.35);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto keeps the width/height attributes acting as an aspect-ratio
   hint (prevents layout shift) instead of a hard height that squashes the
   image. Explicit heights in more specific rules still win. */
img{max-width:100%;height:auto;display:block}
/* <picture> is only a wrapper: let the <img> lay out in its parent as before */
picture{display:contents}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{letter-spacing:.22em;font-weight:500;
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.eyebrow.on-light{color:var(--gold-bright)}
.eyebrow.navy{color:var(--navy-700)}
h1,h2,h3{font-family:'Fraunces',Georgia,'Times New Roman',serif;line-height:1.12;font-weight:600;letter-spacing:-.01em}
h2{font-size:clamp(1.85rem,3.2vw,2.85rem);color:var(--navy);letter-spacing:-.02em}
.section{position:relative}
/* Anchor targets: clear the sticky header (76px desktop / 64px mobile) so a
   jump from the logo or nav doesn't tuck the heading underneath it.
   The two card targets in the "Who We Serve" grid (#employers, #partners) are
   <article> elements, so they need naming here as well — `section[id]` alone
   would leave those two menu links landing with the card behind the header. */
section[id],
#employers,
#partners{scroll-margin-top:104px}
@media(max-width:960px){
  section[id],
  #employers,
  #partners{scroll-margin-top:104px}
}
@media(max-width:560px){
  section[id],
  #employers,
  #partners{scroll-margin-top:80px}
}
.section-head{max-width:760px;margin:0 auto 48px;text-align:center}
.section-head .eyebrow{letter-spacing:.22em;font-weight:500;justify-content:center}
.section-head p.lede{margin-top:16px;color:var(--slate);font-size:1.08rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:1rem;line-height:1;
  padding:16px 28px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
.btn svg{width:18px;height:18px}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:var(--navy-900);box-shadow:0 14px 30px -14px rgba(241,153,17,.7)}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 14px 30px -16px rgba(0,27,58,.7)}
.btn-navy:hover{background:var(--navy-700);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-outline-navy{background:transparent;color:var(--navy);border:1.5px solid rgba(0,42,87,.45)}
.btn-outline-navy:hover{border-color:var(--navy);background:rgba(0,42,87,.05);transform:translateY(-2px)}
.btn-sm{padding:12px 22px;font-size:.92rem}

/* ---------- Reveal on scroll ---------- */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,248,251,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,42,87,.08);
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:92px}
.site-header.scrolled{box-shadow:0 12px 34px -22px rgba(0,27,58,.35)}

/* ---------- Brand lockup ----------
   One transparent image carrying the sun-and-path mark together with the
   "Bright Way Career Solutions" wordmark, gold rule and tagline, exactly as
   supplied. Keeping mark, rule and type in a single file means they can never
   drift out of alignment at any size; the anchor's aria-label restates the
   wording on the image for anyone who cannot see it. */
.logo{display:flex;align-items:center;position:relative;perspective:640px;text-decoration:none}
.logo::before{content:"";position:absolute;inset:-16px -20px;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(241,153,17,.30),rgba(241,153,17,0) 72%);
  opacity:0;transition:opacity .4s ease}
.logo:hover::before,.logo:focus-visible::before{opacity:1}
.logo img{height:70px;width:auto;max-width:100%;flex:none;position:relative;z-index:1;
  transform-style:preserve-3d;will-change:transform,filter;
  transition:transform .18s ease,filter .18s ease;cursor:pointer;
  filter:drop-shadow(0 2px 2px rgba(0,42,87,.20)) drop-shadow(0 8px 14px rgba(0,42,87,.16)) drop-shadow(0 18px 30px rgba(0,42,87,.10))}
.logo:active img{transform:scale(.94) translateZ(0)!important}
/* From 961px up the nav is still inline on the same row as the lockup, so the
   lockup steps down there instead of forcing the menu onto a second line. */
/* The lockup must never be squeezed by a crowded nav: it keeps its own width
   (flex:none) and the menu is what adapts. */
.logo{flex:none}
.nav a{white-space:nowrap}
/* The inline-nav density rules for 961-1120px live at the END of this file so
   they beat the later un-scoped `.nav a{font-size:.93rem}` typography rule. */
@media(prefers-reduced-motion:no-preference){
  .logo{animation:logofloat 5.5s ease-in-out infinite}
  @keyframes logofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
}
.nav{display:flex;align-items:center;gap:30px}
.nav>a,.nav-sub-btn{font-weight:500;font-size:.95rem;color:var(--slate);position:relative;transition:color .2s}
.nav>a:hover,.nav-sub-btn:hover{color:var(--navy)}
.nav>a::after,.nav-sub-btn::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--gold);transition:right .25s ease}
.nav>a:hover::after,.nav-sub-btn:hover::after,.has-sub.open .nav-sub-btn::after{right:0}
.nav .btn{color:#fff;font-size:.92rem;padding:12px 22px}
.nav .btn::after{display:none}
/* ---------- Services dropdown (2026 pattern: few top-level items, one grouped
   menu). Desktop: a panel that opens on hover/focus/click. Phone: an accordion
   inside the drawer. Same markup, same JS. ---------- */
.nav-item{position:relative}
.nav-sub-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
  cursor:pointer;font-family:inherit;line-height:inherit;-webkit-tap-highlight-color:transparent}
.nav-sub-btn .chev{width:15px;height:15px;transition:transform .28s cubic-bezier(.22,.8,.24,1);flex:none}
.has-sub.open .nav-sub-btn .chev{transform:rotate(180deg)}
.nav-sub{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,8px);
  min-width:320px;padding:10px;border-radius:18px;background:#fff;
  border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(0,27,58,.45),0 6px 18px -12px rgba(0,27,58,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .28s cubic-bezier(.22,.8,.24,1),visibility 0s linear .28s;
}
.nav-sub::before{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
/* invisible bridge so the pointer can travel from the label down to the panel */
.has-sub::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:22px}
.has-sub.open .nav-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition:opacity .22s ease,transform .28s cubic-bezier(.22,.8,.24,1),visibility 0s linear 0s}
.nav-sub a{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:12px;
  color:var(--ink);transition:background .18s ease}
.nav-sub a::after{display:none}
.nav-sub a:hover,.nav-sub a:focus-visible{background:var(--gold-tint)}
.nav-sub a b{font-weight:600;font-size:.93rem;color:var(--navy)}
.nav-sub a span{font-size:.8rem;color:var(--muted);line-height:1.45}
/* ---------- Mobile menu toggle ---------- */
.burger{
  display:none;position:relative;z-index:3;flex:none;width:46px;height:46px;
  padding:0;border:0;background:none;cursor:pointer;border-radius:14px;
  align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
  transition:background .28s ease,box-shadow .28s ease,transform .16s cubic-bezier(.22,.8,.24,1);
}
/* Soft halo that breathes while the drawer is closed, so the control reads as
   interactive without shouting. Kept inside the button box (no bleed) so it can
   never nudge the page into a horizontal scroll. */
.burger::before{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(241,153,17,.34),rgba(241,153,17,0) 76%);
  opacity:0;transform:scale(.9);
  transition:opacity .32s ease,transform .32s cubic-bezier(.22,.8,.24,1);
  animation:burgerBreathe 3.8s ease-in-out infinite;
}
@keyframes burgerBreathe{0%,100%{opacity:0}50%{opacity:.5}}
.burger:hover::before,.burger:focus-visible::before{opacity:1;transform:none;animation:none}
.burger:active{transform:scale(.9)}
.burger span{
  position:absolute;left:50%;width:23px;height:2px;border-radius:2px;
  background:var(--navy);transform-origin:center;
  transition:transform .42s cubic-bezier(.22,.8,.24,1),opacity .22s ease,
             background .28s ease,width .42s cubic-bezier(.22,.8,.24,1);
}
.burger span:nth-child(1){transform:translate(-50%,-7px)}
.burger span:nth-child(2){transform:translate(-50%,0)}
.burger span:nth-child(3){transform:translate(-50%,7px)}
/* "Dancing bars" on hover/focus: the outer bars fan apart and stretch while the
   middle bar retracts — the button feels alive before it is ever tapped. */
.burger:hover:not([aria-expanded="true"]) span:nth-child(1),
.burger:focus-visible:not([aria-expanded="true"]) span:nth-child(1){transform:translate(-50%,-8px);width:26px}
.burger:hover:not([aria-expanded="true"]) span:nth-child(2),
.burger:focus-visible:not([aria-expanded="true"]) span:nth-child(2){transform:translate(-50%,0);width:15px}
.burger:hover:not([aria-expanded="true"]) span:nth-child(3),
.burger:focus-visible:not([aria-expanded="true"]) span:nth-child(3){transform:translate(-50%,8px);width:26px}
.burger[aria-expanded="true"]{
  background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
}
.burger[aria-expanded="true"]::before{opacity:0;animation:none}
.burger[aria-expanded="true"] span{background:var(--gold-bright)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,0) rotate(45deg);width:23px}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:6px;transform:translate(-50%,0)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,0) rotate(-45deg);width:23px}

.nav-scrim{
  position:fixed;inset:0;z-index:1;border:0;padding:0;margin:0;cursor:pointer;
  background:rgba(0,22,46,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .34s ease,visibility 0s linear .34s;
}
.nav-scrim.on{opacity:1;visibility:visible;transition:opacity .34s ease,visibility 0s linear 0s}
body.nav-open{overflow:hidden}

@media(max-width:960px){
  /* The sticky header's backdrop-filter becomes the containing block for the
     fixed-position nav drawer: the drawer collapses to the header's height and,
     while closed, its translateX(100%) spills past the viewport so the whole
     page scrolls sideways. Dropping it here keeps the drawer viewport-anchored. */
  .site-header{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(246,248,251,.97);
  }
  .burger{display:flex}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(82vw,336px);z-index:2;
    flex-direction:column;align-items:flex-start;gap:0;
    padding:84px 28px calc(24px + env(safe-area-inset-bottom));
    background:linear-gradient(165deg,var(--navy-900) 0%,var(--navy-800) 58%,var(--navy-700) 100%);
    box-shadow:-28px 0 72px rgba(0,12,28,.5);
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);visibility:hidden;
    transition:transform .46s cubic-bezier(.22,.8,.24,1),visibility 0s linear .46s;
  }
  .nav.open{transform:none;visibility:visible;
    transition:transform .46s cubic-bezier(.22,.8,.24,1),visibility 0s linear 0s}
  .nav>a,.nav-item{
    color:rgba(255,255,255,.88);font-size:1.12rem;width:100%;
    opacity:0;transform:translateX(20px);
    transition:opacity .34s ease,transform .42s cubic-bezier(.22,.8,.24,1),color .2s ease;
  }
  .nav>a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav>a::after,.nav-sub-btn::after,.has-sub::after{display:none}
  .nav>a:hover,.nav>a:focus-visible{color:var(--gold-bright)}
  .nav.open>a,.nav.open .nav-item{opacity:1;transform:none}
  .nav.open>:nth-child(1){transition-delay:.06s}
  .nav.open>:nth-child(2){transition-delay:.11s}
  .nav.open>:nth-child(3){transition-delay:.16s}
  .nav.open>:nth-child(4){transition-delay:.21s}
  .nav.open>:nth-child(5){transition-delay:.26s}
  .nav.open>:nth-child(6){transition-delay:.31s}
  .nav.open>:nth-child(7){transition-delay:.36s}
  .nav.open>:nth-child(8){transition-delay:.41s}
  /* accordion */
  .nav-item{border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-sub-btn{display:flex;width:100%;justify-content:space-between;align-items:center;
    padding:13px 0;color:rgba(255,255,255,.88);font-size:1.12rem;font-weight:500;text-align:left}
  .nav-sub-btn .chev{width:18px;height:18px;color:var(--gold-bright)}
  .nav-sub-btn:hover,.has-sub.open .nav-sub-btn{color:var(--gold-bright)}
  /* Collapsed: the panel is clipped to zero height and hidden from both the
     eye and the accessibility tree. Open: it grows to its natural height.
     `visibility` is delayed on close so the links fade with the collapse. */
  .nav-sub{
    position:static;left:auto;top:auto;transform:none!important;min-width:0;width:100%;margin:0;padding:0;
    background:none;border:0;border-radius:0;box-shadow:none;
    display:block;max-height:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;
    transition:max-height .38s cubic-bezier(.22,.8,.24,1),opacity .26s ease,margin .38s ease,
               visibility 0s linear .38s;
  }
  .nav-sub::before{display:none}
  .has-sub.open .nav-sub{max-height:320px;opacity:1;visibility:visible;pointer-events:auto;margin:0 0 12px;
    transition:max-height .38s cubic-bezier(.22,.8,.24,1),opacity .26s ease .08s,margin .38s ease,
               visibility 0s linear 0s}
  .nav-sub a{display:block;padding:11px 0 11px 14px;margin-left:2px;border-radius:0;
    border-left:2px solid rgba(241,153,17,.45);color:rgba(255,255,255,.88);
    transition:color .2s ease,border-color .2s ease}
  .nav-sub a:hover,.nav-sub a:focus-visible{background:none;color:var(--gold-bright);border-color:var(--gold-bright)}
  .nav-sub a b{color:inherit;font-size:1rem;font-weight:500}
  .nav-sub a span{display:none}
  .nav .btn{display:none}
  .nav .nav-cta-mobile{display:inline-flex;width:100%;justify-content:center;margin-top:auto;padding-top:14px;padding-bottom:14px;border-bottom:0;flex:none}
  /* the floating chat pill must never sit on top of the open menu */
  body.nav-open .chatpill{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
}
@media(min-width:961px){.nav-scrim{display:none}.nav-cta-mobile{display:none!important}}
@media(prefers-reduced-motion:reduce){
  .burger,.burger span,.nav,.nav-scrim,.nav a,.nav-item,.nav-sub,.nav-sub-btn .chev{transition-duration:.01ms!important}
  .burger::before{animation:none!important}
  .nav>a,.nav-item{opacity:1;transform:none}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--navy-900);color:#fff;overflow:hidden;
  padding:96px 0 72px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1000px 560px at 78% -8%, rgba(14,59,110,.9), transparent 60%),
    radial-gradient(900px 620px at 88% 118%, rgba(241,153,17,.16), transparent 62%),
    linear-gradient(180deg,#001B3A 0%, #04264C 60%, #07305E 100%);
}
.hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:56px;align-items:center;position:relative;z-index:2}
.hero-copy h1{color:#fff;font-size:clamp(2.5rem,5vw,4.15rem);margin:18px 0 22px}
.hero-copy h1 .accent{color:var(--gold);position:relative;white-space:nowrap}
.hero-copy h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:10px;background:rgba(241,153,17,.28);z-index:-1;border-radius:4px}
.hero-copy p.lede{color:#C9D8EA;font-size:1.13rem;max-width:520px;margin-bottom:32px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.stat{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);border-radius:16px;padding:20px 20px 18px;
}
.stat b{font-family:'Fraunces',serif;font-weight:600;font-size:1.9rem;color:#fff;display:block;line-height:1.05}
.stat b .u{color:var(--gold)}
.stat span{font-size:.82rem;color:#AFC3DD;line-height:1.35;display:block;margin-top:6px}
@media(max-width:960px){
  .hero{padding:64px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
}

/* dotted path divider used between light sections */
.path-divider{display:block;width:100%;height:46px;color:var(--gold);opacity:.75}
.path-divider path{stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:1 18}

/* ---------- Reviews ---------- */
.reviews{background:var(--bg);padding:34px 0 6px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Review cards follow the shape of a real review: rating, source, the words,
   then a person — initials avatar, name, role and when it was left. */
.review{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 24px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;
}
.rv-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.review .stars{color:var(--gold);letter-spacing:1px;font-size:1rem;line-height:1;
  font-family:Arial,'Segoe UI Symbol',sans-serif}
.rv-badge{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;
  font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  background:rgba(0,42,87,.045);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;white-space:nowrap}
.rv-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.review p{color:var(--slate);font-size:.97rem;line-height:1.62;margin:0}
/* Text-only attribution: no portrait. A drawn or stock face next to a
   placeholder quote reads as a real customer's likeness, so the reviewer is
   identified by name, role and date alone. */
.rv-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--line)}
.rv-id{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.rv-name{font-weight:700;font-size:.93rem;color:var(--navy)}
.rv-role{font-weight:400;color:var(--muted);font-size:.82rem}
.rv-when{font-family:'IBM Plex Mono',monospace;font-size:.67rem;color:var(--muted);
  letter-spacing:.05em;margin-top:3px}
@media(max-width:900px){.reviews-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}

/* ---------- Process ---------- */
.process{padding:78px 0 88px;
  background-image:radial-gradient(rgba(0,42,87,.05) 1.2px, transparent 1.2px);
  background-size:22px 22px;
}
.steps{position:relative;max-width:840px;margin:0 auto;display:flex;flex-direction:column}
.step{display:flex;gap:22px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:26px 28px;box-shadow:var(--shadow);position:relative;z-index:2}
.step-num{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;color:var(--navy-900);
  background:linear-gradient(130deg,#FFB02E,var(--gold));width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 18px -8px rgba(241,153,17,.8)}
.step-body h3{font-size:1.32rem;color:var(--navy);margin-bottom:6px}
.step-body p{color:var(--slate);font-size:.97rem}
.step-rail{display:block;width:3px;height:30px;margin:2px 0 2px 49px;border-radius:3px;
  background:linear-gradient(var(--gold),rgba(241,153,17,.2));position:relative;z-index:1}
.process-cta{text-align:center;margin-top:46px}

/* ---------- Who we serve ---------- */
.serve{background:#fff;padding:84px 0}
.serve-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch}
.serve-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px 30px;background:var(--card);display:flex;flex-direction:column;gap:14px;
  box-shadow:0 12px 36px -24px rgba(0,27,58,.4);transition:transform .25s ease,box-shadow .25s ease}
.serve-card:hover{transform:translateY(-5px);box-shadow:0 26px 52px -26px rgba(0,27,58,.5)}
.serve-card .eyebrow{letter-spacing:.22em;font-weight:500;font-size:.7rem;color:var(--gold-bright)}
.serve-card h3{font-size:1.5rem;color:var(--navy)}
.serve-card>p{color:var(--slate);font-size:.96rem}
.serve-card ul{display:flex;flex-direction:column;gap:11px;margin:4px 0 8px}
.serve-card li{display:flex;gap:11px;font-size:.93rem;color:var(--slate);align-items:flex-start}
.serve-card li::before{content:"";flex:none;width:17px;height:17px;margin-top:3px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 8.5 6 12 14 3.5" stroke="%23F19911" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat}
.serve-card .btn{margin-top:auto;align-self:flex-start}

/* ---------- Promise ---------- */
.promise{padding:84px 0;background:linear-gradient(180deg,#fff 0%,var(--bg) 70%)}
.promise-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.promise-left h2{margin:14px 0 14px}
.promise-left>p{color:var(--slate);margin-bottom:28px;max-width:470px}
.attrs{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;max-width:540px}
.attr{display:flex;gap:13px;align-items:flex-start}
.attr .dot{width:24px;height:24px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;box-shadow:0 6px 14px -6px rgba(241,153,17,.8)}
.attr .dot svg{width:13px;height:13px}
.attr b{display:block;font-size:.96rem;color:var(--navy);font-weight:600}
.attr span{font-size:.84rem;color:var(--muted);display:block;margin-top:2px}
.promise-right{display:flex;justify-content:center}
.stamp{position:relative;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#0E3B6E,var(--navy-800) 58%,var(--navy-900) 100%);
  box-shadow:0 34px 70px -30px rgba(0,27,58,.65);
  display:flex;align-items:center;justify-content:center;border:2px dashed rgba(241,153,17,.55);
  animation:float 7s ease-in-out infinite}
.stamp::before{content:"";position:absolute;inset:15px;border:1.5px dashed rgba(241,153,17,.4);border-radius:50%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.stamp-inner{text-align:center;color:#fff;padding:0 34px}
.stamp-inner svg{width:72px;height:72px;margin:0 auto 10px;display:block}
.stamp-inner b{font-family:'Fraunces',serif;font-size:1.22rem;font-weight:600;line-height:1.2;display:block}
.stamp-inner span{font-size:.7rem;color:var(--gold-soft);letter-spacing:.16em;text-transform:uppercase;
  display:block;margin-top:10px;font-family:'IBM Plex Mono',monospace}

/* ---------- Results ---------- */
.results{background:var(--navy-900);color:#fff;padding:88px 0;position:relative;overflow:hidden}
.results::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 460px at 6% 0%,rgba(241,153,17,.13),transparent 60%),
  radial-gradient(700px 480px at 100% 110%,rgba(23,80,142,.5),transparent 60%)}
.results .section-head h2{color:#fff}
.results .section-head p.lede{color:#AFC3DD}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;z-index:2}
.quote{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:18px;
  padding:30px 28px 28px;display:flex;flex-direction:column;gap:16px}
.quote .qm{font-family:'Fraunces',serif;font-size:3.4rem;color:var(--gold);line-height:.6;height:20px}
.quote p{color:#E7EEF6;font-size:1rem;line-height:1.66}
.quote cite{font-style:normal;font-weight:600;font-size:.92rem;color:#fff;margin-top:auto}
.quote cite span{display:block;font-weight:400;color:#AFC3DD;font-size:.82rem;margin-top:3px}

/* ---------- CTA band ---------- */
.ctaband{background:linear-gradient(115deg,#F19911,#FFB02E 55%,#F7A60F);padding:80px 24px;text-align:center;position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
.ctaband h2{color:var(--navy-900);font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:12px}
.ctaband p{color:rgba(0,27,58,.8);font-size:1.08rem;max-width:560px;margin:0 auto 30px}
.ctaband .btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ---------- Contact ---------- */
.contact{background:#fff;padding:84px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.contact-left h2{margin:14px 0 14px}
.contact-left .lede{color:var(--slate);max-width:440px;margin-bottom:30px}
.contact-info{display:flex;flex-direction:column;gap:20px}
.ci{display:flex;gap:15px;align-items:center}
.ci .ico{width:44px;height:44px;border-radius:12px;background:var(--gold-tint);display:flex;align-items:center;justify-content:center;flex:none}
.ci .ico svg{width:20px;height:20px;stroke:var(--navy-700);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ci b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-family:'IBM Plex Mono',monospace}
.ci span{color:var(--navy);font-weight:600;font-size:1rem}
.form{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.form label{display:block;font-size:.82rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.field{margin-bottom:18px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:12px;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(241,153,17,.16)}
.field textarea{min-height:108px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .btn{width:100%;border:0}
.form-note{font-size:.76rem;color:var(--muted);text-align:center;margin-top:14px}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:#BCCBE0;padding:64px 0 0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
/* Footer repeats the brand lockup in reverse: the mark's path and the wordmark
   turn white so they read on navy, the sun keeps its gold. */
.footer-logo{display:inline-block;text-decoration:none;margin-bottom:18px;line-height:0}
.footer-logo img{width:228px;height:auto;max-width:100%;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.footer-brand p{font-size:.9rem;color:#AFC3DD;max-width:300px;margin-top:0}
.footer-brand .tag{font-family:'IBM Plex Mono',monospace;color:var(--gold);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;display:block;margin-top:14px}
.footer-col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#fff;font-family:'IBM Plex Mono',monospace;margin-bottom:16px}
.footer-col a{display:block;font-size:.9rem;color:#BCCBE0;padding:5px 0;transition:color .2s}
.footer-col a:hover{color:var(--gold-bright)}
.socials{display:flex;gap:12px;margin-top:20px}
.socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.socials a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.socials svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;font-size:.82rem;color:#8FA4BD}
.footer-bottom a{color:#BCCBE0}
.backtop{display:inline-flex;gap:8px;align-items:center}

/* ---------- Chat pill ---------- */
.chatpill{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:11px;
  background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:0 16px 44px -14px rgba(0,27,58,.5);
  padding:12px 20px 12px 12px;border-radius:999px;font-weight:600;font-size:.92rem;transition:transform .22s ease}
.chatpill:hover{transform:translateY(-3px)}
.chatpill .bbl{width:36px;height:36px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center}
.chatpill .bbl svg{width:19px;height:19px;stroke:var(--navy-900)}

/* ---------- Animations ---------- */
@keyframes roaddash{to{stroke-dashoffset:-960}}
.hero-road-dash{animation:roaddash 14s linear infinite}
@keyframes sunpop{0%{transform:scale(.96)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .hero-road-dash{animation:none}
  .stamp{animation:none}
}

/* ---------- Senior Day Care ---------- */
.senior{background:var(--bg);padding:84px 0}
.senior-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.senior .svc{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px dashed var(--line)}
.senior .svc-list .svc:last-child{border-bottom:none}
.svc .dot{flex:none;width:30px;height:30px;border-radius:9px;background:rgba(241,153,17,.14);display:flex;align-items:center;justify-content:center}
.svc .dot svg{width:15px;height:15px;stroke:var(--gold)}
.svc b{display:block;color:var(--navy);font-size:1.02rem;margin-bottom:2px}
.svc span{color:var(--slate);font-size:.93rem;line-height:1.5}
/* Editorial two-photo composition.
   The main photo is the STAR — the woman in the pink cardigan sharing a moment
   with her caregiver — so nothing is allowed to sit on her face. The companion
   shot is offset to the LOWER-RIGHT, outside the main frame, where it overlaps
   only the empty corner. Bottom padding gives it somewhere to land, which keeps
   it clear of the buttons underneath. */
.senior-photos{position:relative;width:100%;max-width:404px;margin-left:auto;padding:0 0 54px}
/* gold frame peeking out behind the main photo */
.senior-photos::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:16px;left:16px;width:100%;aspect-ratio:3/2;
  border:3px solid var(--gold);border-radius:24px;opacity:.85;
}
.senior-photos .ph-main{
  position:relative;z-index:1;display:block;width:100%;height:auto;
  aspect-ratio:3/2;object-fit:cover;border-radius:20px;
  box-shadow:0 26px 54px -28px rgba(0,27,58,.55);
  background:linear-gradient(135deg,var(--line),#fff);
}
/* Companion card: anchored bottom-RIGHT so the main subject is never covered,
   and nudged inward so it stays well inside the grid column on narrow screens. */
.ph-sub{
  position:absolute;z-index:2;margin:0;right:0;bottom:0;width:min(48%,176px);
  background:#fff;padding:7px 7px 8px;border-radius:15px;
  border:1px solid rgba(0,42,87,.09);
  box-shadow:0 22px 46px -22px rgba(0,27,58,.5);
}
.ph-sub img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block}
.ph-sub figcaption{font-size:.74rem;line-height:1.32;font-weight:600;color:var(--navy);text-align:center;padding-top:5px}
.senior-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* editorial flourish under the section heading */
.senior .section-head h2{position:relative;padding-bottom:22px}
.senior .section-head h2::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:76px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
}
/* A gentle drift on the companion card only — motion without distraction. */
@media(prefers-reduced-motion:no-preference){
  .ph-sub{animation:phfloat 7s ease-in-out infinite}
  @keyframes phfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}
@media(max-width:1120px){
  .ph-sub{width:min(46%,164px)}
}
@media(max-width:960px){
  .senior-grid{grid-template-columns:1fr;gap:44px}
  .senior-photos{max-width:352px;margin:0 auto}
  .ph-sub{width:min(50%,168px)}
}
@media(max-width:420px){
  .senior-photos{max-width:318px}
  .ph-sub{width:min(52%,156px)}
}

/* ---------- Photo carousels & lightbox ---------- */
.gal{margin-top:48px}
.gal .carousel{position:relative;border-radius:18px;overflow:hidden;margin-top:22px;
  box-shadow:0 24px 48px -26px rgba(0,27,58,.45);background:var(--navy-900)}
.gal .slides{position:relative;height:400px}
.gal .slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.9s ease-in-out;will-change:opacity;z-index:0}
.gal .slide.on{opacity:1;z-index:1}
.gal .slide img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.gal .slide figcaption{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(0,42,87,.88);
  color:#fff;font-size:.85rem;font-weight:600;padding:8px 14px;border-radius:999px}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  border:none;background:rgba(255,255,255,.92);color:var(--navy);cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -8px rgba(0,27,58,.5);transition:background .2s}
.car-btn:hover{background:#fff}
.car-prev{left:14px}.car-next{right:14px}
.car-dots{position:absolute;bottom:16px;right:18px;display:flex;gap:8px;z-index:3}
.car-dots button{width:10px;height:10px;border-radius:50%;border:none;background:rgba(255,255,255,.55);
  cursor:pointer;padding:0;transition:background .2s,transform .2s}
.car-dots button.on{background:var(--gold);transform:scale(1.3)}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,27,58,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:12px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.lb-cap{color:#fff;font-size:.95rem;font-weight:600;margin-top:16px;text-align:center;padding:0 20px}
.lb-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:none;
  background:rgba(255,255,255,.92);color:var(--navy);cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.lb-close:hover{background:#fff}
.lb-close svg{width:20px;height:20px}
.lightbox .car-btn{position:fixed;top:50%}
@media(max-width:960px){.gal .slides{height:250px}.car-btn{width:36px;height:36px}}
@media(max-width:560px){.lightbox img{max-width:96vw;max-height:70vh}.lb-cap{font-size:.85rem}}


/* ---------- Northwestern Mutual-inspired polish ---------- */
body{background:#FAFBFC}
.section-head h2{font-size:clamp(2rem,3.8vw,3rem);letter-spacing:-.025em}
.lede{line-height:1.7;max-width:640px}
.serve-card{border-radius:16px;box-shadow:0 2px 12px rgba(0,27,58,.06);border:1px solid rgba(0,42,87,.08)}
.serve-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -20px rgba(0,27,58,.35);border-color:rgba(241,153,17,.35)}
.review{border-radius:16px;box-shadow:0 2px 12px rgba(0,27,58,.06)}
.review:hover{transform:translateY(-3px);box-shadow:0 16px 36px -18px rgba(0,27,58,.3)}
.stat{border-radius:14px;background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.step{border-radius:14px}
.gal .carousel{border-radius:20px;box-shadow:0 24px 48px -20px rgba(0,27,58,.4)}
.btn{border-radius:10px;letter-spacing:.01em}
.btn-navy{background:var(--navy);box-shadow:0 4px 14px -4px rgba(0,42,87,.3)}
.btn-navy:hover{box-shadow:0 8px 24px -8px rgba(0,42,87,.4);transform:translateY(-2px)}
.btn-gold{box-shadow:0 4px 14px -4px rgba(241,153,17,.4)}
.btn-gold:hover{box-shadow:0 8px 24px -8px rgba(241,153,17,.5);transform:translateY(-2px)}
.svc .dot{border-radius:10px}
.ctaband{border-radius:0;padding:90px 24px}
.ctaband h2{font-size:clamp(2rem,3.5vw,2.8rem)}
.hero{padding:100px 0 80px}
.hero-copy h1{font-size:clamp(2.6rem,5.2vw,4.2rem);letter-spacing:-.03em}
.hero-copy p.lede{line-height:1.75}
.nav>a,.nav-sub-btn{font-size:.93rem;letter-spacing:.01em}
.nav>a::after,.nav-sub-btn::after{height:2px;border-radius:1px}
.site-footer a{transition:color .2s}
.site-footer a:hover{color:#FFD27A}
input,select,textarea{border-radius:10px}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(241,153,17,.15)}
@media(max-width:960px){.hero{padding:70px 0 60px}}

/* ---------- NM-style components ---------- */
.btn{border-radius:999px}
.btn-navy,.btn-gold,.btn-outline,.btn-outline-navy{border-radius:999px}
.valueprops{background:var(--navy-900);color:#fff;padding:88px 0}
.valueprops h2{color:#fff;font-size:clamp(2rem,3.6vw,2.8rem);letter-spacing:-.02em}
.vp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:46px}
.vp{border-top:2px solid rgba(241,153,17,.55);padding-top:24px}
.vp svg{width:36px;height:36px;stroke:var(--gold-bright)}
.vp h3{color:#fff;font-size:1.35rem;margin:16px 0 10px;letter-spacing:-.015em}
.vp p{color:#C9D8EA;font-size:.98rem;line-height:1.7}
.faq{background:#fff;padding:88px 0}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
details.faq-item{background:#F4F6F8;border-radius:14px;padding:0}
details.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:22px 26px;font-weight:600;color:var(--navy);font-size:1.02rem}
details.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;transition:transform .25s ease}
details[open] .faq-plus{transform:rotate(45deg)}
details.faq-item p{padding:0 26px 24px;color:var(--slate);line-height:1.7;margin:0}
@media(max-width:960px){.vp-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- Hero background photo ---------- */
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-bg video{width:100%;height:100%;object-fit:cover;opacity:.58;display:block}
@media (prefers-reduced-motion: reduce){.hero-bg video{display:none}}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,27,58,.9) 0%,rgba(0,27,58,.72) 45%,rgba(0,27,58,.45) 100%)}
.hero .wrap{position:relative;z-index:1}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .serve-cards{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .promise-grid{grid-template-columns:1fr;gap:44px;text-align:center}
  .promise-left>p{margin-left:auto;margin-right:auto}
  .attrs{grid-template-columns:1fr;max-width:420px;margin:0 auto;text-align:left}
  .quotes{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .form-row{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .steps{gap:0}
}

/* ---------- Mobile & touch hardening ---------- */
html{-webkit-text-size-adjust:100%}
body, a, button{-webkit-tap-highlight-color:transparent}
input, select, textarea{font-size:16px}
@media(max-width:560px){
  .header-in{height:68px}
  .logo img{height:46px}
  .chatpill{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:10px 16px 10px 10px;font-size:.85rem}
  .chatpill .bbl{width:31px;height:31px}
  .chatpill .bbl svg{width:16px;height:16px}
  .reviews{padding:26px 0 0}
  .serve,.senior,.promise,.results,.contact{padding:64px 0}
  .ctaband{padding:60px 20px}
  .site-footer{font-size:.95rem}
  .senior-cta{gap:10px}
  .senior-cta .btn{width:100%;justify-content:center;text-align:center}
}
@media(max-width:380px){
  .hero-stats{grid-template-columns:1fr}
}
/* ---------- Accessibility & form upgrades ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);
  color:#fff;padding:14px 22px;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0;outline:3px solid var(--gold);outline-offset:2px}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}
.form-status{margin-top:14px;padding:13px 16px;border-radius:12px;font-size:.9rem;
  font-weight:600;line-height:1.45}
.form-status.ok{background:#E7F6EC;color:#15602F;border:1px solid #B7E3C4}
.form-status.err{background:#FDECEC;color:#8A1F1F;border:1px solid #F5C2C2}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ---------- Current-page marker in the nav ----------
   Home and About are real pages, so the link for the page you are on gets the
   gold underline permanently instead of only on hover. */
.nav>a[aria-current="page"]{color:var(--navy);font-weight:600}
.nav>a[aria-current="page"]::after{right:0}
@media(max-width:960px){
  .nav>a[aria-current="page"]{color:var(--gold-bright)}
}

/* ---------- About page (/about) ---------- */
.page-hero{
  position:relative;background:var(--navy-900);color:#fff;overflow:hidden;
  padding:72px 0 76px;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1000px 560px at 78% -8%, rgba(14,59,110,.9), transparent 60%),
    radial-gradient(900px 620px at 88% 118%, rgba(241,153,17,.16), transparent 62%),
    linear-gradient(180deg,#001B3A 0%, #04264C 60%, #07305E 100%);
}
.page-hero .wrap{position:relative;z-index:1;max-width:820px}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.6rem);margin:18px 0 20px}
.page-hero h1 .accent{color:var(--gold);position:relative;white-space:nowrap}
.page-hero h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:10px;background:rgba(241,153,17,.28);z-index:-1;border-radius:4px}
.page-hero p.lede{color:#C9D8EA;font-size:1.13rem;max-width:640px;margin-bottom:32px}
.crumbs{margin-bottom:26px;font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.crumbs ol{display:flex;gap:10px;list-style:none;color:#AFC3DD;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:10px;color:rgba(241,153,17,.7)}
.crumbs a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .2s}
.crumbs a:hover{border-color:var(--gold)}
.crumbs [aria-current]{color:var(--gold-bright)}

.about-mission{background:#fff;padding:84px 0}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about-copy h2{margin:14px 0 18px}
.about-copy p{color:var(--slate);font-size:1.02rem;line-height:1.72;margin-bottom:16px;max-width:560px}
.about-copy p strong{color:var(--navy);font-weight:600}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin-top:30px;max-width:560px}
.about-facts li{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.about-facts b{display:block;color:var(--navy);font-weight:600;font-size:.97rem}
.about-facts span{display:block;color:var(--muted);font-size:.84rem;margin-top:3px;line-height:1.5}
.about-stamp{display:flex;justify-content:center}

.vp-grid-4{grid-template-columns:repeat(4,1fr);gap:32px}
.vp a{display:inline-block;margin-top:14px;color:var(--gold-bright);font-weight:600;font-size:.92rem;
  border-bottom:1px solid rgba(255,176,46,.35);transition:border-color .2s,color .2s}
.vp a:hover{color:#fff;border-color:#fff}

.attrs-wide{grid-template-columns:repeat(3,1fr);max-width:none;gap:26px 32px}
.attrs-wide .attr span{font-size:.9rem;line-height:1.55}

.about-visit-cta{background:var(--navy-900);color:#fff;border-radius:var(--radius);padding:40px 36px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;box-shadow:var(--shadow);
  background-image:radial-gradient(600px 300px at 90% -20%, rgba(241,153,17,.22), transparent 60%)}
.about-visit-cta h3{color:#fff;font-size:1.6rem}
.about-visit-cta p{color:#C9D8EA;line-height:1.66;margin-bottom:6px}
.about-visit-cta .btn-outline-navy{color:#fff;border-color:rgba(255,255,255,.5)}
.about-visit-cta .btn-outline-navy:hover{border-color:#fff;background:rgba(255,255,255,.08)}

@media(max-width:1120px){.vp-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){
  .page-hero{padding:56px 0 60px}
  .about-grid{grid-template-columns:1fr;gap:44px}
  .about-copy p,.about-facts{max-width:none}
  .attrs-wide{grid-template-columns:1fr 1fr;max-width:none}
  .about-visit-cta{padding:32px 26px}
}
@media(max-width:560px){
  .about-facts{grid-template-columns:1fr}
  .vp-grid-4{grid-template-columns:1fr}
  .attrs-wide{grid-template-columns:1fr;max-width:420px}
  .about-visit-cta .btn{width:100%}
}

/* ---------- Inline nav density (961-1120px) ----------
   Seven top-level items share the header row with the lockup. Kept at the end
   of the file so it wins over the typography rule above by source order. */
@media(max-width:1120px) and (min-width:961px){
  .logo img{height:58px}
  .nav{gap:20px}
  .nav>a,.nav-sub-btn{font-size:.86rem}
  .nav .btn{font-size:.84rem;padding:10px 16px}
}
@media(max-width:1020px) and (min-width:961px){
  .logo img{height:52px}
  .nav{gap:15px}
  .nav>a,.nav-sub-btn{font-size:.82rem;letter-spacing:0}
  .nav .btn{padding:9px 14px}
}

/* ---------- Phone drawer: fit the whole list on short screens ---------- */
@media(max-width:960px) and (max-height:700px){
  .nav{padding-top:74px}
  .nav>a,.nav-sub-btn{font-size:1.02rem}
  .nav>a{padding:10px 0}
  .nav-sub-btn{padding:10px 0}
  .nav-sub a{padding:8px 0 8px 14px}
  .nav-sub a b{font-size:.94rem}
  .nav .nav-cta-mobile{padding-top:12px;padding-bottom:12px;font-size:.95rem}
}
@media(max-width:360px){
  .nav{width:min(86vw,320px);padding-left:22px;padding-right:22px}
}

/* ---------- Address -> Google Maps ---------- */
.map-link{color:inherit;border-bottom:1px dashed rgba(0,42,87,.35);transition:color .2s,border-color .2s}
.map-link:hover,.map-link:focus-visible{color:var(--navy-600);border-bottom-style:solid;border-color:var(--gold)}
.about-facts .map-link{border-bottom-color:rgba(126,142,165,.5)}