/* =====================================================================
   ORIENTAL ACADEMY — "The 1960 Challenge" alumni portal (standalone).
   Self-contained brand CSS — NOT the full site design system. Palette + fonts
   mirror oa-system.css so it reads as Oriental Academy, but this page ships
   nothing it doesn't use. Isolated, dead-end collection page.
   ===================================================================== */
@font-face{font-family:"Spectral";font-weight:600;font-display:swap;src:url("fonts/spectral-600.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-weight:700;font-display:swap;src:url("fonts/spectral-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/sourceserif-400-italic.woff2") format("woff2")}

:root{
  --navy:#1B2A4A; --navy-deep:#16243F; --navy-ink:#0E1726;
  --gold:#C9A84C; --gold-dark:#886715; --gold-light:#E6C868;
  --paper:#FBF8F1; --offwhite:#F5F0E8; --white:#fff;
  --text:#2A3142; --text-soft:#55607a; --rule:#e7e0d2; --rule-strong:#d9cfba;
  --display:"Spectral",Georgia,serif; --ui:"Inter",system-ui,sans-serif; --prose:"Source Serif 4",Georgia,serif;
  --shadow:0 24px 60px -28px rgba(14,23,38,.5);
}
*{box-sizing:border-box}
/* Root background = navy so the mobile overscroll "bounce" past the footer (and above the
   hero) shows navy, not the cream body colour — the footer then reads as edge-to-edge.
   Every section paints its own opaque background, so this only shows in the bounce area. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--navy-ink)}
body{margin:0;font-family:var(--ui);color:var(--text);background:var(--paper);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}

/* ---------- Hero: archival backdrop, dark navy wash, crest + headline ---------- */
/* Emblem hero — a dignified navy "seal", crest lit by a warm lamp-glow. Deliberately NOT
   the main site's photo-montage hero; the archival photos live behind the FORM below. */
/* Hero = a ceremonial invitation card: navy, textured with a FAINT archival wash (not a
   flat block), a warm glow behind a well-integrated crest, tighter spacing, and a bottom
   edge that melts into the cream wall below. */
.hero{position:relative;color:#fff;text-align:center;padding:clamp(32px,5.5vw,58px) 22px clamp(38px,5.5vw,60px);
  isolation:isolate;overflow:hidden;background:#16243F}
/* faint archival texture behind the navy — kept light so it never fights the text */
.hero-tex{position:absolute;inset:0;z-index:-3;background:url("strip/st1.webp") center/cover no-repeat;
  filter:blur(3px) saturate(.6);opacity:.14;
  -webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
/* softer navy wash (lighter than before for readability) + a gentle gold glow + bottom fade to cream */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(80% 44% at 50% 22%, rgba(230,200,104,.13), transparent 62%),
             radial-gradient(150% 120% at 50% 20%, rgba(22,36,63,.30), rgba(14,23,38,.58) 82%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--paper))}
.crest{width:clamp(94px,17vw,120px);height:auto;margin:0 auto clamp(12px,2vw,16px);position:relative;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}
/* badge — a clear label (not fine print) */
.kicker{font-family:var(--ui);font-weight:700;font-size:clamp(12px,1.5vw,13.5px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-light);margin:0 0 clamp(12px,2vw,16px)}
/* main heading — states the action, large, white, high contrast */
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(29px,5.2vw,44px);line-height:1.18;
  letter-spacing:.004em;color:#fff;margin:0 auto;max-width:18ch}
/* main emotional line — large and warm, easy to read */
.hero-lead{font-family:var(--display);font-weight:600;font-size:clamp(19px,3vw,27px);line-height:1.34;
  color:#F6EFDD;margin:clamp(14px,2.4vw,20px) auto 0;max-width:24ch}
/* supporting text — upright sans for maximum readability, never tiny */
.hero .lede{font-family:var(--ui);font-weight:400;font-size:clamp(17px,2.1vw,19px);color:#EEF2F9;max-width:40ch;
  margin:clamp(14px,2vw,18px) auto 0;line-height:1.62}
/* Hindi support line — upright, readable, warm */
.lede-hi{font-family:var(--ui);font-weight:400;font-size:clamp(16px,2vw,18px);color:#F0E6C8;max-width:42ch;
  margin:11px auto 0;line-height:1.7}
/* primary CTA — big, gold, obvious tap target; scrolls to the form */
.hero-cta{display:inline-block;margin:clamp(22px,3.4vw,30px) auto 0;font-family:var(--ui);font-weight:700;
  font-size:clamp(16px,2vw,18px);color:var(--navy-ink);text-decoration:none;
  background:linear-gradient(180deg,#E6C868,#C9A84C 55%,#A9842F);border-radius:12px;
  padding:15px 32px;box-shadow:0 14px 30px -12px rgba(169,132,47,.75);
  transition:transform .12s ease,box-shadow .12s ease}
.hero-cta:hover{transform:translateY(-1px);box-shadow:0 18px 34px -12px rgba(169,132,47,.85)}
.hero-cta:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}
/* help line — legible, tappable number (not fine print) */
.hero-help{font-family:var(--ui);font-size:clamp(15px,1.8vw,17px);color:#DCE2ED;
  margin:clamp(16px,2.4vw,22px) auto 0;line-height:1.55}
.hero-help a{color:#F4E4B0;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* section bridge into the archive wall — a centered gold hairline, then a calm roman line */
.bridge{position:relative;text-align:center;margin:0;background:var(--paper);
  padding:clamp(24px,4vw,34px) 22px clamp(14px,2.2vw,20px);
  font-family:var(--display);font-weight:600;font-size:clamp(16px,2.3vw,20px);color:var(--gold-dark);letter-spacing:.008em}
.bridge::before{content:"";display:block;width:46px;height:2px;margin:0 auto clamp(16px,2.4vw,20px);border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-dark),transparent)}

/* ---------- Frosted archival memories drifting BEHIND the form ----------
   Each band is ONE pre-composed archival strip (1500px wide), tiled + translated — a
   single cached, blurred layer per band (no per-image blur, no backdrop-filter), so it
   stays smooth on phones. Bands alternate direction; a frosted veil keeps them faint and
   dips every ~15s for a fleeting glimpse of nostalgia. */
.form-section{position:relative;overflow:hidden;isolation:isolate;background:var(--paper);
  padding:clamp(20px,3.5vw,44px) 0 clamp(34px,6vw,64px)}
.form-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-around;padding:clamp(16px,4vw,34px) 0;
  -webkit-mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
.gg-band{flex:none;width:calc(100% + 1500px);height:clamp(104px,15vw,150px);
  background-repeat:repeat-x;background-size:1500px auto;background-position:center;
  filter:blur(4px) saturate(.85) brightness(1.03);will-change:transform}
.gg-s1{background-image:url("strip/st1.webp")}
.gg-s2{background-image:url("strip/st2.webp")}
.gg-s3{background-image:url("strip/st3.webp")}
.gg-s4{background-image:url("strip/st4.webp")}
.gg-s5{background-image:url("strip/st5.webp")}
.gg-s6{background-image:url("strip/st6.webp")}
.gg-band:nth-child(odd){animation:gg-right 72s linear infinite}   /* left → right */
.gg-band:nth-child(even){animation:gg-left 60s linear infinite}   /* right → left */
.gg-band:nth-child(2){animation-duration:52s}
.gg-band:nth-child(4){animation-duration:80s}
.gg-band:nth-child(5){animation-duration:64s;animation-delay:-24s}
.gg-band:nth-child(6){animation-duration:88s;animation-delay:-40s}
@keyframes gg-left {from{transform:translateX(0)}       to{transform:translateX(-1500px)}}
@keyframes gg-right{from{transform:translateX(-1500px)} to{transform:translateX(0)}}
/* frosted veil over the bands, under the form content, + the periodic glimpse */
.gg-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(135% 130% at 50% 42%, rgba(236,226,208,.5), rgba(247,241,231,.84));
  animation:gg-glimpse 15s ease-in-out infinite}
@keyframes gg-glimpse{0%,42%{opacity:1}50%{opacity:.56}58%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .gg-band{animation:none !important}   /* override the nth-child direction rules (higher specificity) */
  .gg-veil{animation:none;opacity:.72}
}

/* ---------- Form card ---------- */
.wrap{position:relative;z-index:2;width:min(680px,92vw);margin:0 auto}
.intro h2,.intro p{text-shadow:0 1px 10px var(--paper),0 0 20px rgba(251,248,241,.85)}   /* legible over the drifting frost */
.intro{text-align:center;margin:0 auto clamp(22px,4vw,34px);max-width:52ch}
.intro h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,3.6vw,28px);color:var(--navy-deep);margin:0 0 8px}
.intro p{color:var(--text-soft);font-size:15px;margin:0}
/* "Need help?" assist block — soft, warm, lighter than the form; sits close to the title */
.form-help{margin:0 auto clamp(16px,2.8vw,22px);max-width:54ch;text-align:center;background:rgba(255,253,246,.92);
  border:1px solid var(--rule);border-radius:12px;padding:clamp(11px,2vw,14px) clamp(16px,3vw,20px);
  box-shadow:0 6px 20px -16px rgba(20,25,45,.3)}
.form-help p{margin:0;font-family:var(--ui);font-weight:400;font-size:clamp(14px,1.6vw,15px);line-height:1.55;color:var(--text-soft)}
.form-help .fh-lead{color:var(--navy-deep);font-weight:600}
.form-help a{color:var(--gold-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.form-help .form-help-hi{margin-top:6px;font-size:13px;color:var(--text-soft)}

.card{background:var(--white);border:1px solid var(--rule-strong);border-radius:16px;
  box-shadow:var(--shadow);padding:clamp(22px,4.5vw,38px)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-family:var(--ui);font-weight:600;font-size:13.5px;color:var(--navy-deep);letter-spacing:.01em;line-height:1.4}
.field .hint{font-weight:400;color:var(--text-soft);font-size:13px}
.req{color:var(--gold-dark)}
.field input,.field select,.field textarea{font-family:var(--ui);font-size:15.5px;color:var(--text);
  background:var(--paper);border:1.5px solid var(--rule-strong);border-radius:9px;padding:12.5px 13px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{resize:vertical;min-height:92px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.18)}
/* after a failed submit attempt, clearly flag the fields that still need attention */
.card.submitted .field input:invalid,
.card.submitted .field select:invalid,
.card.submitted .field textarea:invalid{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.14)}
.card.submitted .field input:invalid:focus,
.card.submitted .field select:invalid:focus,
.card.submitted .field textarea:invalid:focus{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.22)}
.field input[type=file]{padding:11px 12px;background:var(--offwhite);cursor:pointer}
.field input[type=file]::file-selector-button{font-family:var(--ui);font-weight:600;font-size:13px;
  border:0;border-radius:6px;padding:7px 12px;margin-right:12px;background:var(--navy);color:#fff;cursor:pointer}
.photo-multi-list{margin:8px 0 0;font-family:var(--ui);font-size:13px;color:var(--text-soft);min-height:0}
.photo-multi-list.warn{color:#B45309;font-weight:600}

/* checkboxes */
.check{grid-column:1 / -1;display:flex;align-items:flex-start;gap:13px;
  background:var(--offwhite);border:1px solid var(--rule);border-radius:11px;padding:15px 16px}
.check input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--gold-dark);cursor:pointer}
.check label{font-weight:400;color:var(--text-soft);font-size:14.5px;line-height:1.6;cursor:pointer}
.check label .opt{color:var(--gold-dark);font-weight:600}
.check.feature{border-color:rgba(201,168,76,.4);background:#FFFDF6}

/* honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* footer of the form */
.foot{margin-top:22px;text-align:center}
.fine{font-size:13px;color:var(--text-soft);margin:0 0 14px}
.btn{font-family:var(--ui);font-weight:600;font-size:16px;color:var(--navy-ink);border:0;cursor:pointer;
  background:linear-gradient(180deg,#E6C868,#C9A84C 55%,#A9842F);border-radius:11px;
  padding:15px 30px;width:100%;box-shadow:0 12px 26px -12px rgba(169,132,47,.7);
  transition:transform .12s ease,box-shadow .12s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(169,132,47,.8)}
.btn:disabled{opacity:.65;cursor:default;transform:none}
.err{display:none;background:#FEF2F2;border:1px solid #FCA5A5;color:#991B1B;border-radius:9px;
  padding:11px 14px;font-size:14px;margin:0 0 14px;text-align:left}

/* ---------- Interview CTA (doors stay open) ---------- */
/* Closing note — a proper closing invitation from the school (NOT a second hero): a wide,
   warm cream panel with a fine gold keyline on top. */
/* ============ ARCHIVE SEAL — one unified closing band ============
   A cream panel with a faint crest watermark + soft inner glow, holding the voice card, the
   bridge line, and the school's signature — the archive receiving and sealing the submission
   (not a website footer). Everything lives in ONE container so it reads as one composition. */
.archive-seal{position:relative;overflow:hidden;isolation:isolate;background:var(--paper);text-align:center;
  padding:clamp(30px,5.5vw,52px) 22px clamp(24px,3.8vw,36px)}
/* the same drifting archival strips as behind the form — kept a touch MORE visible here,
   since on mobile the form's own backdrop is mostly hidden by the card */
.seal-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-around;padding:clamp(8px,2.5vw,20px) 0;
  -webkit-mask:linear-gradient(180deg,transparent,#000 15%,#000 84%,transparent);
  mask:linear-gradient(180deg,transparent,#000 15%,#000 84%,transparent)}
/* a lighter veil than the form's, so the memories read through more clearly here */
.gg-veil.seal-veil{background:radial-gradient(145% 135% at 50% 40%, rgba(242,235,220,.24), rgba(247,241,231,.6))}
.seal-inner{position:relative;z-index:2;width:min(600px,94vw);margin:0 auto}
.seal-rule{display:block;width:72px;height:2px;margin:0 auto clamp(24px,4vw,36px);border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-dark),transparent)}
/* voice card (kept, tighter, softer shadow) */
/* frosted-glass voice card — the drifting archival wall shows softly through it */
.closing-card{position:relative;text-align:center;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(250,246,238,.54));
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(255,255,255,.6);
  border-radius:16px;padding:clamp(26px,4.4vw,40px) clamp(24px,4.6vw,42px);
  box-shadow:0 22px 52px -30px rgba(20,25,45,.4), inset 0 1px 0 rgba(255,255,255,.65)}
.closing-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-dark) 22%,var(--gold-light) 50%,var(--gold-dark) 78%,transparent)}
.closing-card .k{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark);margin:0 0 12px}
.closing-card h3{font-family:var(--display);font-weight:600;font-style:italic;font-size:clamp(20px,3.2vw,27px);color:var(--navy-deep);margin:0 0 13px;line-height:1.22}
.closing-card p{font-family:var(--ui);color:var(--text);font-size:clamp(15px,1.8vw,16.5px);line-height:1.66;max-width:46ch;margin:0 auto}
.closing-card .reassure{margin-top:13px;font-size:13px;color:var(--text-soft)}
/* bridge line — a touch larger, connects card to signature */
.final-line{margin:0;padding:clamp(22px,3.6vw,34px) 6px clamp(4px,1vw,8px);
  font-family:var(--display);font-style:italic;font-size:clamp(16px,2.1vw,20px);color:var(--gold-dark);
  text-shadow:0 1px 12px var(--paper),0 0 22px rgba(251,248,241,.92)}   /* legible over the drifting photos */
/* gold flame mark — a quiet seam between the final line and the school's signature */
.seal-flame{display:block;width:9px;height:9px;margin:clamp(20px,3.2vw,28px) auto 0;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));border-radius:2px;
  box-shadow:0 0 18px rgba(201,168,76,.55)}
/* ---------- Navy site footer — mirrors the main site bottom ----------
   The real Oriental Academy footer: two logos (monogram + heraldic crest) with a gold
   divider on a navy strip, gold top rule, brand name + motto + established line. Centered
   for this single-column page; no outbound links (isolated collection portal). */
.site-foot{position:relative;overflow:hidden;text-align:center;color:#C8D0DE;
  border-top:3px solid var(--gold);
  background:
    radial-gradient(60% 60% at 82% 8%, rgba(201,168,76,.10), transparent 70%),
    linear-gradient(180deg,var(--navy-deep) 0%,var(--navy-ink) 100%);
  padding:clamp(30px,4.6vw,46px) 22px clamp(24px,3.6vw,32px)}
.site-foot::after{content:"";position:absolute;left:-60px;bottom:-70px;width:300px;height:300px;z-index:0;
  background:url("monogram-gold.svg") left bottom/contain no-repeat;opacity:.05;pointer-events:none}
.sf-inner{position:relative;z-index:1;width:min(560px,92vw);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:11px}
.sf-logos{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:5px}
.sf-mono{height:clamp(46px,8vw,54px);width:auto;object-fit:contain;filter:saturate(1.25) brightness(1.12)}
.sf-crest{height:clamp(50px,9vw,58px);width:auto;object-fit:contain;padding-left:22px;
  border-left:1px solid rgba(201,168,76,.4);filter:drop-shadow(0 3px 10px rgba(0,0,0,.3))}
.sf-name{font-family:var(--display);color:#fff;font-weight:600;font-size:clamp(17px,2.4vw,19px);line-height:1.3;margin:0}
.sf-tag{color:var(--gold);font-style:italic;font-family:var(--display);font-size:clamp(15px,2vw,16px);margin:0}
.sf-meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#C8D0DE;margin:0}
.sf-bottom{display:flex;flex-direction:column;gap:5px;width:100%;
  margin-top:clamp(20px,3.4vw,28px);padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;color:#9fb0c4}
/* the school signing the archive submission */
.sf-thanks{margin:clamp(14px,2.2vw,18px) auto 0;font-size:13px;color:#aeb9c9;max-width:46ch;line-height:1.55}
/* photo + video media group — a soft hairline separates it from the fields above */
.video-invite{gap:9px;position:relative;padding-top:clamp(16px,2.6vw,20px);margin-top:clamp(2px,1vw,6px);border-top:1px solid var(--rule)}
.vi-note{font-size:13.5px;color:var(--text-soft);line-height:1.6;margin:0}
.vi-reassure{font-size:13px;color:var(--text-soft);margin:3px 0 0}
.vi-btn{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:4px;
  font-family:var(--ui);font-weight:600;font-size:14px;color:#fff;text-decoration:none;
  background:var(--navy);border:1.5px solid transparent;border-radius:10px;padding:12.5px 18px;
  transition:background .15s ease,color .15s ease,transform .12s ease}
.vi-btn:hover{background:var(--navy-deep);transform:translateY(-1px)}
.vi-btn svg{width:18px;height:18px;fill:#25D366;flex:none}
/* two balanced, equal-width options: WhatsApp + Drive upload (stack on mobile) */
.vi-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.vi-row .vi-btn{margin:0;align-self:auto;flex:1 1 200px;justify-content:center}
.vi-row-center{justify-content:center;margin-top:22px}
/* secondary "upload" button — navy outline, fills on hover; its icon takes the text colour */
.vi-upload{background:transparent;color:var(--navy-deep);border-color:var(--navy-deep)}
.vi-upload:hover{background:var(--navy-deep);color:#fff}
.vi-upload svg{fill:currentColor}
.success-video{align-self:auto}

/* ---------- Success ---------- */
/* Success — a frosted-glass panel floating over the drifting archival wall */
.success{display:none;position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(250,246,238,.62));
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid rgba(255,255,255,.65);border-radius:22px;
  box-shadow:0 34px 80px -34px rgba(14,23,38,.55), inset 0 1px 0 rgba(255,255,255,.75);
  padding:clamp(40px,7vw,62px) clamp(24px,5vw,46px)}
/* gold hairline along the top edge — a quiet premium accent */
.success::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-dark) 24%,var(--gold-light) 50%,var(--gold-dark) 76%,transparent)}
.success.show{display:block;animation:rise .7s cubic-bezier(.33,1,.68,1) both}
/* branded navy medallion holding the gold monogram (replaces the generic sparkle) */
.success-emblem{width:74px;height:74px;margin:0 auto clamp(18px,3vw,24px);border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 34%, #21324f, var(--navy-deep));
  border:1px solid rgba(201,168,76,.55);
  box-shadow:0 16px 32px -14px rgba(14,23,38,.65), inset 0 1px 0 rgba(255,255,255,.18)}
.success-emblem img{width:42px;height:42px;display:block}
.success h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,4.6vw,36px);color:var(--navy-deep);margin:0 0 12px;letter-spacing:.005em}
.success p{color:var(--text);font-size:clamp(15.5px,1.9vw,17px);line-height:1.6;max-width:40ch;margin:0 auto}
/* small uppercase label so the two video buttons read as an optional extra, not clutter */
.success p.success-optional{margin:clamp(26px,4.4vw,34px) auto 0;font-family:var(--ui);font-weight:700;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark)}
.success .vi-row-center{margin-top:14px}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* reveal-on-load for the card (gentle, matches the main site's motion feel) */
.reveal{opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.33,1,.68,1) .1s both}

/* (The old .pfoot footer was merged into the .archive-seal band above — see .seal-sig.) */

@media(max-width:560px){
  .grid{grid-template-columns:1fr}
  .field.half{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.success.show{animation:none;opacity:1;transform:none}
}