/* ==========================================================================
   22RESOLVE — faithful navy.com clone
   Structure, components and assets mirror www.navy.com:
     · Liberator (Light/Medium/Heavy) display, uppercase · Roboto UI
     · bg #01202C · panel #022A3A · deep #010E13 · blue #0076A9 · gold #E8B00F
     · square corners · chamfered "cleft" CTA · topographic wave pattern
   Photographs are placeholders (.ph) — drop real imagery in later.
   ========================================================================== */

/* ---- Font faces (same woff2 files navy.com serves) ---- */
@font-face { font-family:"Liberator-Heavy";  src:url("../fonts/liberator/LiberatorHeavy.woff2")  format("woff2"); font-weight:900; font-display:swap; }
@font-face { font-family:"Liberator-Medium"; src:url("../fonts/liberator/LiberatorMedium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Liberator-Light";  src:url("../fonts/liberator/LiberatorLight.woff2")  format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"Roboto-Regular"; src:url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"); font-weight:normal; font-display:swap; }
@font-face { font-family:"Roboto-Light";   src:url("../fonts/roboto/Roboto-Light.woff2")   format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"Roboto-Medium";  src:url("../fonts/roboto/Roboto-Medium.woff2")  format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Roboto-Bold";    src:url("../fonts/roboto/Roboto-Bold.woff2")    format("woff2"); font-weight:bold; font-display:swap; }

:root {
  --deep:#010e13;
  --bg:#01202c;
  --panel:#022a3a;
  --teal:#063040;
  --blue:#0076a9;
  --gold:#e8b00f;
  --white:#fff;
  --gray:#ffffff;
  --gray-d:#eef3f5;

  --f-heavy:"Liberator-Heavy",Helvetica,sans-serif;
  --f-disp:"Liberator-Medium",Helvetica,sans-serif;
  --f-light:"Liberator-Light",Helvetica,sans-serif;
  --f-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-ui:"Roboto-Regular",Helvetica,sans-serif;
  --f-ui-l:"Roboto-Light",Helvetica,sans-serif;
  --f-ui-m:"Roboto-Medium",Helvetica,sans-serif;

  --max:1300px;
  --topo:url("../img/waves-bk.svg");
}

*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:10px;scroll-behavior:smooth;}
body{font-family:var(--f-ui);font-size:16px;line-height:1.5;color:var(--white);
  background:linear-gradient(180deg,#021a26 0%,#01202c 16%,#01161e 44%,#02161f 70%,#010e13 100%) no-repeat;
  background-color:#010e13;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px;}

/* ---- Typography ---- */
/* Display titles stay in the Liberator caps (navy.com's hero/section style),
   but with almost no tracking. Everything secondary is Roboto Light, sentence case. */
h1,h2{font-family:var(--f-disp);text-transform:uppercase;font-weight:400;letter-spacing:.5px;line-height:1.05;color:var(--white);}
h1{font-size:clamp(30px,5vw,60px);}
h2{font-size:clamp(22px,2.9vw,37px);}
h3{font-family:var(--f-disp);font-weight:400;letter-spacing:0;line-height:1.08;font-size:24px;color:var(--white);}
h4{font-family:var(--f-ui-m);font-weight:500;letter-spacing:0;line-height:1.2;color:var(--white);}
.eyebrow{font-family:var(--f-ui);font-size:15px;letter-spacing:0;text-transform:none;color:var(--gold);}
p{font-family:var(--f-ui);font-size:16.5px;line-height:1.75;color:var(--gray);}
.lede{font-size:19px;line-height:1.6;}

/* ==========================================================================
   Chamfered "cleft" CTA — the bottom-right corner is genuinely cut off via
   clip-path; the outline is a mask-composite ring that traces the diagonal,
   so the interior stays transparent over photographs.
   ========================================================================== */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;isolation:isolate;
  font-family:var(--f-disp);font-size:17px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--white);background:transparent;border:none;
  padding:19px 35px;cursor:pointer;
  --c:14px;             /* size of the cut-off bottom-right corner */
  --b:1.6px;            /* outline thickness */
  --bd:var(--white);    /* outline colour */
  --fill:transparent;   /* interior fill (transparent shows photo through) */
  transition:color .22s ease;
}
/* chamfered fill, sits behind the text */
.btn::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--fill);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%);
  transition:background .22s ease;pointer-events:none;}
/* outline as a single chamfered ring (even-odd "donut" polygon): the line
   follows every edge INCLUDING the diagonal cut, with a transparent interior */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bd);
  clip-path:polygon(evenodd,
    0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 0,
    var(--b) var(--b), calc(100% - var(--b)) var(--b),
    calc(100% - var(--b)) calc(100% - var(--c)),
    calc(100% - var(--c)) calc(100% - var(--b)),
    var(--b) calc(100% - var(--b)), var(--b) var(--b));
  transition:background .22s ease;pointer-events:none;}
.btn:hover{color:var(--deep);--fill:var(--gold);--bd:var(--gold);}
.btn.solid{--fill:var(--blue);--bd:var(--blue);}
.btn.solid:hover{color:var(--deep);--fill:var(--gold);--bd:var(--gold);}
.btn.gold{color:var(--deep);--fill:var(--gold);--bd:var(--gold);}
.btn.gold:hover{color:var(--white);--fill:var(--deep);--bd:var(--deep);}

/* see-more chevron arrow (navy arraw-see-more.svg) */
.chev{width:21px;height:21px;flex:none;}

/* ---- Placeholder imagery ---- */
.ph{position:relative;background:#06202b center/cover no-repeat;overflow:hidden;}
.ph::before{content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;font-family:var(--f-ui-l);font-size:12px;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.32);}

/* ==========================================================================
   Promo bar
   ========================================================================== */
.promo{background:var(--white);color:var(--deep);font-family:var(--f-ui);position:relative;z-index:120;}
.promo .wrap{display:flex;align-items:center;gap:24px;padding:10px 40px;min-height:54px;}
.promo .promo-lead{font-family:var(--f-heavy);font-size:20px;letter-spacing:.5px;white-space:nowrap;}
.promo .promo-lead b{color:var(--blue);}
.promo .promo-sub{font-size:13px;line-height:1.3;color:#2a4654;}
.promo .promo-x{margin-left:auto;background:none;border:none;font-size:24px;line-height:1;color:#2a4654;cursor:pointer;}
.promo .promo-x:hover{color:var(--blue);}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:110;background:rgba(1,14,19,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:74px;}
.brand{display:flex;align-items:center;gap:16px;}
.brand .mark{font-family:var(--f-heavy);font-size:30px;letter-spacing:1px;line-height:.9;color:var(--white);}
.brand .mark .n{color:var(--gold);}
.brand .div{width:1px;height:34px;background:rgba(255,255,255,.25);}
.brand .by{font-family:var(--f-ui);font-size:13px;line-height:1.2;letter-spacing:0;color:var(--gray);text-transform:none;}
.header-nav{margin-left:auto;display:flex;align-items:center;gap:30px;}
.header-nav .lnk{font-family:var(--f-ui);font-size:15px;letter-spacing:0;text-transform:none;color:var(--white);padding:4px 0;border-bottom:2px solid transparent;transition:.2s;}
.header-nav .lnk:hover{color:var(--gold);border-bottom-color:var(--gold);}
.btn-sm{padding:9px 26px;font-size:13px;--c:9px;}
.icon-btn{width:24px;height:24px;color:var(--white);background:none;border:none;cursor:pointer;display:grid;place-items:center;}
.icon-btn:hover{color:var(--gold);}
.icon-btn svg{width:22px;height:22px;}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;min-height:90vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep);}
.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0;}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(1,14,19,.92) 0%,rgba(1,14,19,.6) 38%,rgba(1,20,30,.12) 72%,rgba(1,20,30,0) 100%),
    linear-gradient(0deg,rgba(1,14,19,.95) 0%,rgba(1,14,19,.25) 42%,transparent 70%);}
.hero .wrap{position:relative;z-index:2;max-width:none;width:100%;margin:0;
  padding-left:clamp(24px,5vw,80px);padding-right:40px;padding-bottom:84px;padding-top:120px;}
.hero h1{max-width:32ch;font-size:clamp(26px,3.7vw,48px);line-height:1.1;
  text-shadow:0 2px 30px rgba(0,0,0,.6);}
.hero h1 .gold{color:var(--gold);}
.hero .hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:18px;}

/* ==========================================================================
   Event intro — date / time / place + the description
   ========================================================================== */
.event-intro{background:linear-gradient(180deg,#010e13 0%,rgba(2,20,28,.85) 28%,rgba(2,20,28,.85) 72%,#010e13 100%),url("../img/venue.jpg") center/cover no-repeat;}
.event-facts{display:flex;flex-wrap:wrap;border:1px solid rgba(255,255,255,.16);max-width:960px;margin:0 auto 48px;}
.event-facts .ef{flex:1;min-width:220px;padding:30px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.16);}
.event-facts .ef:last-child{border-right:none;}
.event-facts .ef .k{font-family:var(--f-ui);font-size:13px;letter-spacing:0;text-transform:none;color:var(--gold);margin-bottom:12px;}
.event-facts .ef .v{font-family:var(--f-disp);font-size:21px;letter-spacing:0;line-height:1.1;text-transform:none;color:var(--white);}
.event-copy{max-width:740px;margin:0 auto;text-align:center;}
.event-copy p{font-size:18px;line-height:1.75;margin-bottom:20px;}
.event-copy p:last-child{margin-bottom:0;}
.event-copy strong{color:var(--white);}

/* ==========================================================================
   Leader feature — Mike Sarraille
   ========================================================================== */
.leader{background:transparent;}
.leader .wrap{display:grid;grid-template-columns:.82fr 1fr;gap:64px;align-items:center;padding:100px 40px;}
.leader .portrait{position:relative;aspect-ratio:4/5;}
.leader .portrait .ph{position:absolute;inset:0;}
.leader .portrait::after{content:"";position:absolute;left:0;bottom:-1px;width:55%;height:6px;background:var(--gold);}
.leader .lc .eyebrow{display:block;margin-bottom:16px;}
.leader .lc h2{margin-bottom:10px;}
.leader .lc .rank{font-family:var(--f-ui);font-size:15px;letter-spacing:0;text-transform:none;color:var(--gold);margin-bottom:26px;}
.leader .lc p{font-size:17px;margin-bottom:18px;}
.leader .lc .btn{margin-top:12px;}

/* ==========================================================================
   Enlist block — "Take your place in the ranks" + registration merged into ONE
   continuous black region with a single continuous waveform behind both, no
   seam or line between them.
   ========================================================================== */
.enlist{position:relative;overflow:hidden;
  background:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);}
.enlist::before{content:"";position:absolute;inset:0;background:var(--topo) center/cover no-repeat;
  opacity:.10;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);}
.enlist>section{position:relative;z-index:1;background:transparent;}
/* Standalone black waveform band. Bottom-favored: the band fades in from the
   top and inherits visual space from the section above, so a small top reads
   as balanced. (Only the .enlist.solo bands use .topo.section.) */
.topo.section{padding:56px 0 88px;}
.register.section{padding:48px 0 150px;}
.topo .wrap{position:relative;z-index:1;}

/* Topographic contour lines — also a faint accent in the footer. */
.site-footer{position:relative;overflow:hidden;}
.site-footer::before{content:"";position:absolute;inset:0;background:var(--topo) right bottom/cover no-repeat;
  opacity:.06;pointer-events:none;z-index:0;}
.site-footer>.wrap{position:relative;z-index:1;}

.section{padding:96px 0;}
.section-head{text-align:center;max-width:760px;margin:0 auto 56px;}
.section-head h2{margin-bottom:18px;}
.section-head.left{text-align:left;margin-left:0;}

/* ==========================================================================
   Contact cards (glow boxes)
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1120px;margin:0 auto;}
.contact-card{position:relative;aspect-ratio:359/301;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;text-align:center;padding:30px;
  background:url("../img/contact-glow-box-desktop.svg") center/100% 100% no-repeat;transition:transform .25s ease;}
.contact-card:hover{transform:translateY(-6px);}
.contact-card .ico{width:64px;height:64px;color:var(--white);}
.contact-card .ico svg{width:100%;height:100%;stroke:var(--white);fill:none;stroke-width:1.6;}
.contact-card .ct{font-family:var(--f-disp);font-size:22px;letter-spacing:0;text-transform:none;color:var(--white);}
.contact-card:hover .ct{color:var(--gold);}

/* ==========================================================================
   Monsoor story — navy.com style: full-bleed video thumbnail as the section
   background, black text panel inset on the right, play button left of center
   ========================================================================== */
.story{position:relative;overflow:hidden;min-height:640px;display:flex;align-items:center;
  justify-content:flex-end;padding:72px clamp(24px,4vw,72px);background:#000;}
.story .story-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.story::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#010e13 0%,transparent 30%,transparent 70%,#010e13 100%),rgba(1,8,12,.18);}
/* play button — centered in the exposed left half of the thumbnail */
.story .play-btn{position:absolute;left:25%;top:50%;transform:translate(-50%,-50%);z-index:3;
  background:none;border:none;cursor:pointer;padding:0;}
.story .play-btn svg{width:84px;height:84px;filter:drop-shadow(0 4px 24px rgba(0,0,0,.7));transition:transform .2s ease;}
.story .play-btn:hover svg{transform:scale(1.1);}
/* black panel, padded off every edge by the section padding */
.story .story-panel{position:relative;z-index:2;width:min(560px,48%);background:rgba(2,8,11,.82);
  padding:clamp(40px,4.5vw,80px) clamp(32px,3.5vw,64px);}
.story .story-panel h2{font-family:var(--f-heavy);font-size:clamp(23px,2.5vw,36px);
  letter-spacing:.3px;line-height:1.08;margin-bottom:24px;}
.story .story-panel p{margin-bottom:32px;}
.story iframe{cursor:default;}
.story .story-copy h2{margin:8px 0 22px;}
.story .story-copy h2 .blue{color:var(--blue);}
.story .story-copy p{margin-bottom:20px;max-width:48ch;}
.story .honor{border-left:2px solid var(--blue);padding-left:20px;margin:28px 0;}
.story .honor .name{font-family:var(--f-disp);font-size:24px;text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:6px;}
.story .honor .sub{font-family:var(--f-ui-l);font-size:14px;color:var(--blue);}
.story .honor .sub2{font-family:var(--f-ui-l);font-size:14px;color:var(--gray-d);margin-top:2px;}
.story blockquote{margin:28px 0;max-width:46ch;}
.story blockquote p{font-style:italic;font-size:22px;line-height:1.5;color:var(--white);margin:0;}
.story blockquote footer{font-family:var(--f-ui-l);font-size:14px;color:var(--gray-d);margin-top:12px;}

/* ==========================================================================
   Image path cards (3 across, label bottom-left, chevron)
   ========================================================================== */
.paths{background:transparent;}
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.path-card{position:relative;aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-end;}
.path-card .ph{position:absolute;inset:0;}
.path-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(1,14,19,.85),transparent 55%);}
.path-card .pc-label{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;width:100%;padding:28px 26px;}
.path-card .pc-label span{font-family:var(--f-disp);font-size:22px;letter-spacing:0;text-transform:none;color:var(--white);}
.path-card .chev{transition:transform .25s ease;}
.path-card:hover .chev{transform:translateX(6px);}
.center-cta{text-align:center;margin-top:54px;}
.helps .center-cta{margin-top:84px;}

/* ==========================================================================
   Registration (Fillout embed)
   ========================================================================== */
.register{position:relative;overflow:hidden;}
.register>.wrap{position:relative;z-index:1;}
.form-embed{max-width:760px;margin:0 auto;}
.reg-form .fld{display:block;margin-bottom:20px;}
.reg-form .lbl{display:block;font-family:var(--f-ui);font-size:14px;color:#fff;margin-bottom:8px;}
.reg-form input,.reg-form select{width:100%;background:#02080b;border:1px solid rgba(255,255,255,.22);
  color:#fff;font-family:var(--f-ui);font-size:16px;padding:13px 15px;outline:none;
  transition:border-color .2s ease;border-radius:0;}
.reg-form input::placeholder{color:rgba(255,255,255,.4);}
.reg-form input:focus,.reg-form select:focus{border-color:var(--blue);}
.reg-form select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
.reg-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
.grid2 .fld-wide{grid-column:1 / -1;}
.reg-h{font-family:var(--f-disp);text-transform:uppercase;font-weight:400;font-size:20px;
  letter-spacing:.3px;color:#fff;margin:0 0 18px;}
.reg-body .reg-h:not(:first-child){margin-top:40px;}
.reg-note{font-size:14px;color:var(--gray-d);margin-bottom:20px;}
.attendee-card{position:relative;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.02);padding:24px 24px 8px;margin-bottom:18px;}
.attendee-card .att-remove{background:none;border:none;color:var(--gray-d);cursor:pointer;
  font-family:var(--f-ui);font-size:13px;text-decoration:underline;padding:0 0 16px;}
.attendee-card .att-remove:hover{color:var(--gold);}
.reg-gate{max-width:440px;}
.reg-gate .btn{margin-top:4px;}
.gate-msg,.form-msg{font-size:14px;margin-top:14px;min-height:1.2em;}
.gate-msg.err,.form-msg.err{color:#ff7a7a;}
.gate-msg.ok,.form-msg.ok{color:#5fd0a0;}
.reg-submit{margin-top:30px;}
#add-attendee{margin-top:2px;}
.reg-done{text-align:center;padding:40px 0;}
.reg-done h3{font-family:var(--f-disp);text-transform:uppercase;font-size:28px;color:#fff;margin-bottom:14px;}
.reg-done p{max-width:46ch;margin:0 auto;}
.form-fallback{text-align:center;margin-top:22px;font-size:14px;color:var(--gray-d);}
.form-fallback a{color:var(--blue);}
@media(max-width:560px){.grid2{grid-template-columns:1fr;}}

/* ==========================================================================
   Intro — the mission, stated fast, right under the hero
   ========================================================================== */
.intro{position:relative;text-align:center;padding:96px 0 90px;
  background:linear-gradient(180deg,#010e13 0%,rgba(1,14,19,.74) 26%,rgba(1,14,19,.74) 74%,#010e13 100%),
    url("../img/flag-sky.png") center/cover no-repeat;}
.intro .wrap{max-width:840px;}
.intro .eyebrow{display:block;margin-bottom:20px;}
.intro h2{line-height:1.06;margin-bottom:28px;}
.intro h2 .num{color:var(--gold);}
.intro .lede{font-family:var(--f-ui);font-size:19px;line-height:1.72;color:#fff;
  margin:0 auto 32px;max-width:60ch;}
.intro .intro-tag{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.5px;
  font-size:clamp(20px,2.3vw,30px);line-height:1.1;color:var(--gold);margin:0 0 40px;}
.intro .intro-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}

/* ==========================================================================
   Pull-quote band — the SEAL quote behind the "22" number
   ========================================================================== */
.quote-band{position:relative;overflow:hidden;text-align:center;padding:124px 0;}
.quote-band::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("../img/homecoming.jpg") center/cover no-repeat;opacity:.14;}
.quote-band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#010e13 0%,rgba(1,14,19,.5) 32%,rgba(1,14,19,.5) 68%,#010e13 100%);}
.quote-band .wrap{position:relative;z-index:2;max-width:1040px;
  display:flex;flex-direction:column;align-items:center;}
.quote-band .wrap::before{content:"";width:56px;height:3px;background:var(--gold);margin-bottom:36px;}
.big-quote{font-family:var(--f-disp);text-transform:uppercase;font-weight:400;letter-spacing:.5px;
  font-size:clamp(25px,4vw,48px);line-height:1.08;color:#fff;margin:0;}
.big-quote .pull{color:var(--gold);}
.quote-by{font-family:var(--f-ui);font-size:15px;letter-spacing:.4px;color:var(--gray-d);margin-top:32px;}

/* ==========================================================================
   Teal call band
   ========================================================================== */
.teal-band{position:relative;overflow:hidden;text-align:center;padding:120px 0;
  background:linear-gradient(180deg,#010e13 0%,rgba(1,14,19,.55) 38%,rgba(1,14,19,.55) 62%,#010e13 100%),
    url("../img/freedomPicFinal.png") center 22%/cover no-repeat;}
.teal-band .wrap{position:relative;z-index:1;}
.teal-band h2{margin-bottom:18px;}
.teal-band p{max-width:60ch;margin:0 auto 32px;color:#fff;}

/* ==========================================================================
   Ways-we-help icon grid
   ========================================================================== */
.helps{background:linear-gradient(180deg,transparent 0%,rgba(6,48,64,.5) 40%,rgba(6,48,64,.5) 60%,transparent 100%);}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:88px 40px;max-width:1040px;margin:0 auto;}
.help{text-align:center;}
/* Chamfered "dog-tag" badge — echoes the site's cleft button so the icon set
   reads as designed-for-this-brand rather than generic line art. */
.help .ico{position:relative;width:96px;height:96px;margin:0 auto 26px;
  display:grid;place-items:center;--c:17px;--b:1.5px;}
/* faint chamfered panel behind the glyph */
.help .ico::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(157deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 62%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%);}
/* chamfered ring border (even-odd donut tracing the cut corner), warming to gold */
.help .ico::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(150deg,rgba(255,255,255,.30) 42%,rgba(232,176,15,.55));
  clip-path:polygon(evenodd,
    0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 0,
    var(--b) var(--b),calc(100% - var(--b)) var(--b),
    calc(100% - var(--b)) calc(100% - var(--c)),
    calc(100% - var(--c)) calc(100% - var(--b)),
    var(--b) calc(100% - var(--b)),var(--b) var(--b));}
.help .ico iconify-icon{position:relative;z-index:2;font-size:46px;color:var(--white);}
.help h4{font-size:19px;letter-spacing:0;line-height:1.25;margin-bottom:0;}

/* ==========================================================================
   Program cards (large image)
   ========================================================================== */
.programs{background:transparent;}
.prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.prog-card{position:relative;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:flex-end;}
.prog-card .ph{position:absolute;inset:0;transition:transform .4s ease;}
.prog-card:hover .ph{transform:scale(1.05);}
.prog-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(1,14,19,.9),transparent 50%);}
.prog-card h3{position:relative;z-index:1;padding:30px;font-size:24px;line-height:1.05;max-width:14ch;}

/* ==========================================================================
   Resource search
   ========================================================================== */
.search-block{position:relative;min-height:520px;display:grid;place-items:center;background:var(--deep);overflow:hidden;}
.search-block .ph{position:absolute;inset:0;background-size:cover;background-position:center 38%;}
.search-block::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#010e13 0%,rgba(1,14,19,.5) 30%,rgba(1,14,19,.5) 70%,#010e13 100%);}
.search-inner{position:relative;z-index:1;width:100%;max-width:760px;padding:0 40px;text-align:center;}
.search-inner h2{margin-bottom:36px;}
.search-field{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--white);padding:14px 4px;}
.search-field input{flex:1;background:none;border:none;outline:none;color:var(--white);font-family:var(--f-ui-l);font-size:22px;}
.search-field input::placeholder{color:rgba(255,255,255,.75);}
.search-field button{background:none;border:none;cursor:pointer;color:var(--white);}
.search-field button svg{width:26px;height:26px;}
.search-field button:hover{color:var(--gold);}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats{background:transparent;}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding:72px 40px;}
.stat{text-align:center;}
.stat .value{font-family:var(--f-heavy);font-size:84px;line-height:1;color:var(--gold);}
.stat .label{font-family:var(--f-ui);font-size:15px;letter-spacing:0;text-transform:none;line-height:1.5;color:var(--gray);margin-top:16px;max-width:30ch;margin-left:auto;margin-right:auto;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:transparent;padding:72px 0 36px;position:relative;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px;}
.footer-brand .mark{font-family:var(--f-heavy);font-size:30px;color:var(--white);}
.footer-brand .mark .n{color:var(--gold);}
.footer-brand .by{font-family:var(--f-ui);font-size:15px;letter-spacing:0;color:var(--gold);text-transform:none;margin-top:8px;}
.footer-brand p{max-width:34ch;margin-top:18px;color:#fff;}
.footer-top h4{font-size:17px;letter-spacing:0;color:var(--white);margin-bottom:18px;}
.footer-top ul{list-style:none;}
.footer-top li{margin-bottom:11px;}
.footer-top a{font-family:var(--f-ui);font-size:14px;color:#fff;}
.footer-top a:hover{color:var(--gold);}
.footer-bottom{padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:var(--f-ui);font-size:13px;letter-spacing:0;color:#fff;}

/* ---- Sticky get-support widget ---- */
.sticky{position:fixed;right:0;bottom:24px;z-index:90;display:flex;align-items:stretch;box-shadow:0 8px 30px rgba(0,0,0,.5);}
.sticky .label{display:flex;align-items:center;background:var(--deep);color:var(--white);font-family:var(--f-ui-m);font-size:14px;letter-spacing:0;text-transform:none;padding:0 22px;}
.sticky a{display:grid;place-items:center;width:58px;background:#0a2230;color:var(--white);border-left:1px solid rgba(255,255,255,.08);transition:.2s;}
.sticky a:hover{background:var(--gold);color:var(--deep);}
.sticky a svg{width:22px;height:22px;}

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

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1024px){
  .header-nav .lnk{display:none;}
  .story{min-height:0;flex-direction:column;align-items:stretch;justify-content:flex-end;
    padding:0;padding-top:56.25vw;}
  .story .play-btn{left:50%;top:28vw;}
  .story .story-panel{width:100%;background:#02080b;}
  .leader .wrap{grid-template-columns:1fr;gap:40px;padding:64px 40px;}
  .leader .portrait{max-width:440px;}
}
@media(max-width:820px){
  .wrap{padding:0 22px;}
  .section{padding:64px 0;}

  /* single-column for the big image-card sections, but keep the 6 mission
     icons in TWO columns so they don't become an endless scroll */
  .contact-grid,.path-grid,.prog-grid,.stats .wrap{grid-template-columns:1fr;}
  .help-grid{grid-template-columns:1fr 1fr;gap:46px 18px;}
  .help .ico{width:80px;height:80px;margin-bottom:16px;--c:14px;}
  .help .ico iconify-icon{font-size:38px;}
  .help h4{font-size:15.5px;}
  .helps .center-cta{margin-top:72px;}

  /* shorten the tall image cards so each section scrolls faster */
  .path-card,.prog-card,.contact-card{aspect-ratio:16/10;}

  .event-facts .ef{flex:1 0 50%;border-bottom:1px solid rgba(255,255,255,.16);}
  /* condense the footer: brand on top, links in two tidy columns */
  .site-footer{padding:48px 0 24px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:22px 20px;margin-bottom:26px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-brand p{display:none;}
  .footer-top h4{margin-bottom:12px;}
  .footer-top li{margin-bottom:8px;}
  .footer-bottom{padding-top:18px;}
  .footer-bottom span:last-child{display:none;}
  .brand .by{display:none;}
  .hero{min-height:78vh;}
  .hero .hero-img{object-position:16% 42%;}
  /* index hero (veteran silhouette) — center on the bowed head, not the left sky */
  .hero-home .hero-img{object-position:58% 32%;}

  /* tighten vertical padding across the dark sections */
  .topo.section{padding:40px 0 64px;}
  .register.section{padding:28px 0 84px;}
  .teal-band{padding:72px 0;}
  .quote-band{padding:80px 0;}
  .quote-band .wrap::before{margin-bottom:26px;}
  .intro{padding:60px 0 56px;}
  .intro .lede{font-size:17px;}
  .leader .wrap{padding:56px 22px;}
  .search-block{min-height:320px;}
  .search-block .ph{background-position:center 42%;}
  .search-block::after{background:linear-gradient(180deg,#010e13 0%,rgba(1,14,19,.6) 26%,rgba(1,14,19,.62) 74%,#010e13 100%);}
  .stat .value{font-size:62px;}

  /* promo bar: stop it running off the side of the screen */
  .promo .wrap{padding:8px 16px;gap:10px;min-height:0;}
  .promo .promo-lead{font-size:12.5px;white-space:normal;line-height:1.3;letter-spacing:0;}
  .promo .promo-sub{display:none;}
  .promo .promo-x{font-size:22px;flex:none;}
}

@media(max-width:480px){
  .event-facts .ef{flex:1 0 100%;}
  .help-grid{gap:40px 14px;}
  .stat .value{font-size:54px;}
}