/* ============================================================
   Ample Air × Nepean FC — Winter Promo Lead Capture
   Brand-accurate, touch-first kiosk styling.
   ============================================================ */

@font-face{font-family:Coolveti;src:url('assets/fonts/Coolveti.ttf') format('truetype');font-weight:400 800;font-display:swap;}
@font-face{font-family:Harabara;src:url('assets/fonts/Harabara.ttf') format('truetype');font-weight:400 700;font-display:swap;}
@font-face{font-family:Poppins;src:url('assets/fonts/poppins-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:Poppins;src:url('assets/fonts/poppins-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:Poppins;src:url('assets/fonts/poppins-600.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:Poppins;src:url('assets/fonts/poppins-700.woff2') format('woff2');font-weight:700;font-display:swap;}

:root{
  --navy:#003B6F; --navy-deep:#00284d; --blue:#0057A4; --blue-bright:#1F8FD6;
  --bluelt:#7FC4EC; --ice:#E6F3FB; --red:#D72631; --red-deep:#B5121B;
  --amber:#E0A400; --amber-warm:#F7A23B; --cocoa:#5a3c26;
  --ink:#0E1620; --graphite:#2C333D; --slate:#5A6470; --steel:#8A95A3;
  --fog:#E4E9EF; --cloud:#F4F7FA; --cream:#FAF6F0; --white:#fff;

  --display:Coolveti,Poppins,system-ui,sans-serif;
  --label:Harabara,Poppins,system-ui,sans-serif;
  --body:Poppins,-apple-system,system-ui,'Segoe UI',sans-serif;

  --tap:60px;                /* minimum touch target height */
  --radius:16px;
  --card-max:680px;
  --shadow:0 18px 50px rgba(0,16,40,.28);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none!important;}   /* author display rules must not override the hidden attribute */
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;background:#00284d;}  /* iOS overscroll bounce stays on-theme, never black */
body{
  font-family:var(--body);color:var(--ink);
  background:var(--navy-deep);
  min-height:100%;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  user-select:none;-webkit-user-select:none;
}
input,textarea{user-select:text;-webkit-user-select:text;}
a{color:inherit;}

/* ---- ambient winter atmosphere ---- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(165deg,#00284d 0%,#003B6F 45%,#0057A4 100%);}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.warmglow{
  position:fixed;left:50%;bottom:-22vh;transform:translateX(-50%);
  width:120vw;height:60vh;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(247,162,59,.34),rgba(224,164,0,.12) 45%,transparent 72%);
  filter:blur(6px);
}

.stage{position:relative;z-index:2;min-height:100%;}
.screen{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  padding:0 20px max(20px,env(safe-area-inset-bottom));   /* top handled by the full-width header band */
  gap:18px;
}
.screen--thanks{padding-top:max(20px,env(safe-area-inset-top));}

/* ===================== CO-BRAND HEADER ===================== */
.cobrand{
  align-self:stretch;margin-inline:-20px;   /* cancel the screen's 20px side padding → true edge to edge, scrollbar-safe */
  background:#fff;box-shadow:0 8px 28px rgba(0,10,30,.26);
  padding:calc(15px + max(14px,env(safe-area-inset-top))) 24px 15px;
  display:flex;justify-content:center;
}
.cobrand__inner{
  width:100%;max-width:var(--card-max);
  display:flex;align-items:center;justify-content:center;gap:24px;
}
.cobrand__lead{background:none;border:none;cursor:pointer;display:flex;align-items:center;padding:0;}
.cobrand__lead img{height:76px;display:block;pointer-events:none;}   /* Ample Air leads — clearly largest */
.cobrand__sep{
  flex:0 0 auto;font-family:var(--label);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--steel);white-space:nowrap;
}
.cobrand__partner{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.cobrand__partner img{height:42px;width:42px;object-fit:contain;}   /* partner — smaller than Ample Air */
.cobrand__partner b{font-family:var(--display);font-weight:700;color:var(--navy);font-size:15px;line-height:1;}

/* ---- slim co-brand bar on the form screen ---- */
.cobrand--slim{padding:calc(8px + max(8px,env(safe-area-inset-top))) 16px 8px;position:relative;}
.cobrand--slim .cobrand__inner{gap:12px;}
.cobrand__leadimg{height:40px;display:block;pointer-events:none;}
.cobrand--slim .cobrand__sep{font-family:var(--display);font-weight:700;font-size:15px;color:var(--steel);letter-spacing:0;}
.cobrand--slim .cobrand__partner img{height:30px;width:30px;}
.cobrand--slim .cobrand__partner b{font-size:14px;}
.backbtn{position:absolute;right:14px;bottom:8px;width:40px;height:40px;border-radius:50%;border:none;
  background:var(--cloud);color:var(--slate);font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.backbtn:active{transform:scale(.94);}

/* ---- splash / welcome screen ---- */
.screen--splash{justify-content:space-between;}
.splash__body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;width:100%;max-width:var(--card-max);padding:14px 0;color:var(--white);}
.drawbanner--splash{max-width:560px;}
.splash__hint{font-size:14px;color:var(--ice);opacity:.9;}
.startbtn{
  min-height:74px;border:none;border-radius:18px;cursor:pointer;color:#fff;
  font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.01em;
  background:linear-gradient(120deg,var(--amber) 0%,var(--amber-warm) 60%,var(--red) 130%);
  box-shadow:0 14px 32px rgba(224,120,20,.5);
  display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:0 44px;
  transition:transform .12s,box-shadow .12s;animation:startpulse 2.6s ease-in-out infinite;
}
.startbtn:active{transform:translateY(2px) scale(.99);box-shadow:0 8px 18px rgba(224,120,20,.5);}
.startbtn__arrow{font-size:26px;}
@keyframes startpulse{0%,100%{box-shadow:0 14px 32px rgba(224,120,20,.42);}50%{box-shadow:0 16px 52px rgba(247,162,59,.72);}}

/* form screen: a touch more compact so the whole form fits one screen (even on 1024-tall iPads) */
.screen--form .card{gap:11px;padding:16px 18px 18px;}
.screen--form .field input{min-height:56px;}
.screen--form .interests legend,.screen--form .optins legend,.screen--form .reqfs legend{margin-bottom:8px;}
.screen--form .toggle{padding:12px 14px;gap:12px;}
.screen--form .toggle__label{font-size:14px;line-height:1.35;}
.screen--form .chips{gap:8px;}
.screen--form .chip span{min-height:48px;}
.screen--form .submit{min-height:62px;}
.screen--form .legalnote{font-size:12px;}

/* ===================== HERO ===================== */
.hero{width:100%;max-width:var(--card-max);text-align:center;color:var(--white);}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--label);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bluelt);
}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--red);}
.eyebrow--light{color:var(--ice);}
.eyebrow--light::before{background:var(--amber-warm);}
.hero__title{
  font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(34px,8vw,52px);margin:12px 0 4px;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.hero__sub{
  color:var(--ice);font-size:clamp(15px,2.4vw,18px);line-height:1.5;
  max-width:30em;margin:8px auto 0;font-weight:400;
}
.hero__sub b{color:var(--white);font-weight:600;}

/* steaming mug motif */
.mug{position:relative;display:inline-flex;justify-content:center;margin:8px auto 4px;}
.mug__steam{position:absolute;top:-22px;left:44%;transform:translateX(-50%);display:flex;gap:11px;z-index:1;}
.mug__steam span{
  width:9px;height:40px;border-radius:10px;
  background:linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:steam 2.6s ease-in-out infinite;opacity:0;
}
.mug__steam span:nth-child(2){animation-delay:.55s;height:50px;}
.mug__steam span:nth-child(3){animation-delay:1.1s;}
.mug__steam--big{top:-30px;}
.mug__steam--big span{height:54px;width:10px;}
@keyframes steam{
  0%{opacity:0;transform:translateY(6px) scaleY(.7);}
  30%{opacity:.9;}
  100%{opacity:0;transform:translateY(-22px) scaleY(1.25);}
}

/* ===================== FORM CARD ===================== */
.card{
  width:100%;max-width:var(--card-max);
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.6);
  border-radius:24px;box-shadow:var(--shadow);
  padding:22px 20px 24px;
  display:flex;flex-direction:column;gap:16px;
  backdrop-filter:blur(4px);
}
/* draw banner — makes the form's purpose unmistakable */
.drawbanner{
  display:flex;align-items:center;gap:13px;
  background:linear-gradient(120deg,#FFF4E0,#FFE6BE);
  border:1.5px solid #F3C679;border-radius:14px;padding:13px 15px;
}
.drawbanner__pill{
  flex:0 0 auto;font-family:var(--label);font-weight:700;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:var(--amber);border-radius:999px;padding:7px 13px;white-space:nowrap;
  box-shadow:0 3px 8px rgba(224,164,0,.35);
}
.drawbanner__txt{font-size:15.5px;line-height:1.35;color:var(--graphite);}
.drawbanner__txt b{color:var(--ink);font-weight:700;}

/* optional opt-in group */
.optins{border:none;}
.optins legend{margin-bottom:10px;}
.optins .toggle{margin-bottom:10px;}
.optins .toggle:last-child{margin-bottom:0;}

.legalnote{font-size:12.5px;color:var(--slate);line-height:1.5;padding:0 2px;margin-top:-2px;}
.legalnote a{color:var(--blue);font-weight:600;text-decoration:underline;}

.field{display:flex;flex-direction:column;gap:7px;}
.field-row{display:flex;gap:14px;}
.field-row .field{flex:1 1 0;min-width:0;}
@media (max-width:560px){.field-row{flex-direction:column;gap:16px;}}

/* 18+ eligibility — REQUIRED (alcohol in the prize), visually distinct from the optional group */
.reqfs{border:none;}
.reqfs legend{margin-bottom:10px;}
.opt.opt--req{background:#FBEAEA;color:var(--red-deep);}
.toggle.toggle--age{border-color:var(--steel);background:#fff;}
.toggle.toggle--age:has(input:checked){border-color:var(--blue);background:var(--ice);}
.err--age{display:none;font-size:13px;color:var(--red-deep);font-weight:500;padding-left:4px;margin-top:-8px;}
.err--age.show-err{display:block;}
.toggle.is-invalid{border-color:var(--red);background:#FEF4F4;}
.field label:not(.toggle),.interests legend,.optins legend,.reqfs legend{
  font-family:var(--label);font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--slate);
}
.reqfs legend{color:var(--ink);}   /* required heading reads stronger than the muted optional one */
.opt{
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.02em;
  text-transform:none;color:var(--steel);
  background:var(--cloud);border-radius:999px;padding:2px 9px;margin-left:6px;
}
.field input{
  width:100%;min-height:var(--tap);
  font-family:var(--body);font-size:18px;color:var(--ink);
  background:var(--cloud);border:2px solid var(--fog);border-radius:14px;
  padding:0 18px;outline:none;transition:border-color .15s,background .15s,box-shadow .15s;
}
.field input::placeholder{color:var(--steel);}
.field input:focus{
  border-color:var(--blue-bright);background:var(--white);
  box-shadow:0 0 0 4px rgba(31,143,214,.18);
}
.field input:user-invalid,.field input.is-invalid{
  border-color:var(--red);background:#FEF4F4;
}
.err{display:none;font-size:13px;color:var(--red-deep);font-weight:500;padding-left:4px;}
.field.show-err .err,.err--consent.show-err{display:block;}
.err--consent{display:none;font-size:13px;color:var(--red-deep);font-weight:500;padding-left:4px;margin-top:-8px;}

/* interest chips */
.interests{border:none;}
.interests legend{margin-bottom:10px;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{position:relative;cursor:pointer;}
.chip input{position:absolute;opacity:0;width:1px;height:1px;}
.chip span{
  display:flex;align-items:center;min-height:52px;
  padding:0 18px;border-radius:14px;
  background:var(--cloud);border:2px solid var(--fog);
  font-size:16px;font-weight:600;color:var(--graphite);
  transition:all .15s;
}
.chip input:checked+span{
  background:var(--ice);border-color:var(--blue);color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,87,164,.12);
}
.chip input:checked+span::before{content:"✓ ";font-weight:800;margin-right:2px;}
.chip input:focus-visible+span{outline:3px solid var(--blue-bright);outline-offset:2px;}

/* toggle (free quote + consent) */
.toggle{
  display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  background:var(--cloud);border:2px solid var(--fog);border-radius:14px;
  padding:16px;transition:border-color .15s,background .15s;
}
.toggle input{position:absolute;opacity:0;width:1px;height:1px;}
.toggle__box{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;margin-top:1px;
  background:var(--white);border:2px solid var(--steel);
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.toggle__box::after{content:"✓";color:#fff;font-weight:800;font-size:18px;transform:scale(0);transition:transform .15s;}
.toggle input:checked+.toggle__box{background:var(--blue);border-color:var(--blue);}
.toggle input:checked+.toggle__box::after{transform:scale(1);}
.toggle input:checked~.toggle__label{color:var(--ink);}
.toggle:has(input:checked){border-color:var(--blue);background:var(--ice);}
.toggle--consent:has(input:checked){border-color:var(--blue);background:#fff;}
.toggle input:focus-visible+.toggle__box{outline:3px solid var(--blue-bright);outline-offset:2px;}
.toggle__label{font-size:15px;line-height:1.4;color:var(--graphite);}
.toggle__label b{font-weight:600;color:var(--ink);}
.toggle--consent{padding:14px 16px;}
.toggle--consent .toggle__label{font-size:14px;}
.fineprint{display:block;margin-top:5px;font-size:12px;color:var(--slate);line-height:1.45;}
.fineprint a{color:var(--blue);font-weight:600;text-decoration:underline;}

/* submit */
.submit{
  position:relative;min-height:66px;border:none;border-radius:16px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.01em;color:#fff;
  background:linear-gradient(120deg,var(--amber) 0%,var(--amber-warm) 60%,var(--red) 130%);
  box-shadow:0 12px 26px rgba(224,120,20,.4);
  transition:transform .12s,box-shadow .12s,filter .12s;
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.submit:active{transform:translateY(2px) scale(.99);box-shadow:0 6px 14px rgba(224,120,20,.4);}
.submit[disabled]{filter:saturate(.5) brightness(1.05);pointer-events:none;}
.submit__spin{display:none;width:22px;height:22px;border-radius:50%;
  border:3px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .7s linear infinite;}
.submit.is-busy .submit__label{opacity:.7;}
.submit.is-busy .submit__spin{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}

.formfoot{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--slate);line-height:1.4;}
.net{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--steel);box-shadow:0 0 0 3px rgba(0,0,0,.05);}
.net[data-state="online"]{background:#1F9D55;}
.net[data-state="offline"]{background:var(--amber);}
.net[data-state="syncing"]{background:var(--blue-bright);animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{50%{opacity:.4;}}

/* site footer */
.sitefoot{
  width:100%;max-width:var(--card-max);margin-top:2px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--label);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.sitefoot__row{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;}
.sitefoot a{color:rgba(255,255,255,.92);text-decoration:none;font-weight:700;}
.prizepartner{display:flex;align-items:center;justify-content:center;gap:10px;}
.prizepartner span{font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.6);}
.prizepartner img{height:17px;width:auto;display:block;opacity:.92;}

/* ===================== THANK-YOU SCREEN ===================== */
.screen--thanks{justify-content:center;text-align:center;color:#fff;}
.thanks__inner{max-width:480px;display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:rise .5s cubic-bezier(.2,.8,.2,1);}
@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.thanks__mug{position:relative;margin-bottom:4px;}
.thanks__title{font-family:var(--display);font-weight:700;font-size:clamp(32px,7vw,46px);line-height:1.05;
  text-shadow:0 2px 18px rgba(0,0,0,.25);}
.thanks__sub{color:var(--ice);font-size:18px;line-height:1.5;max-width:26em;}
.thanks__offline{background:rgba(224,164,0,.18);border:1px solid rgba(247,162,59,.5);
  color:#fff;border-radius:12px;padding:12px 16px;font-size:15px;line-height:1.45;max-width:24em;}
.nextbtn{margin-top:8px;min-height:var(--tap);padding:0 30px;border:2px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.1);color:#fff;border-radius:14px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:19px;}
.nextbtn:active{transform:translateY(2px);}
.countbar{width:200px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:6px;}
.countbar span{display:block;height:100%;width:100%;background:var(--amber-warm);transform-origin:left;}
.countbar.run span{animation:drain var(--reset,7s) linear forwards;}
@keyframes drain{from{transform:scaleX(1);}to{transform:scaleX(0);}}

/* ===================== STAFF PANEL ===================== */
.staff{position:fixed;inset:0;z-index:50;background:rgba(0,16,40,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);}
.staff__card{background:#fff;border-radius:20px;padding:22px;width:100%;max-width:380px;box-shadow:var(--shadow);}
.staff__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;
  font-family:var(--display);font-size:18px;color:var(--ink);}
.staff__close{border:none;background:var(--cloud);width:38px;height:38px;border-radius:50%;font-size:16px;cursor:pointer;color:var(--slate);}
.staff__hint{font-size:14px;color:var(--slate);margin-bottom:8px;}
.staff__pin{width:100%;min-height:54px;text-align:center;font-size:24px;letter-spacing:.3em;
  border:2px solid var(--fog);border-radius:12px;background:var(--cloud);margin-bottom:10px;outline:none;}
.staff__pin:focus{border-color:var(--blue-bright);}
.staff__btn{width:100%;min-height:52px;border:none;border-radius:12px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:17px;color:#fff;background:var(--blue);}
.staff__btn--ghost{background:var(--cloud);color:var(--graphite);}
.staff__btn--danger{background:#FBEAEA;color:var(--red-deep);margin-top:12px;}
.staff__err{color:var(--red-deep);font-size:13px;margin-top:8px;text-align:center;}
.staff__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.staff__stat{background:var(--cloud);border-radius:12px;padding:14px 8px;text-align:center;}
.staff__n{display:block;font-family:var(--display);font-size:30px;color:var(--navy);line-height:1;}
.staff__l{display:block;font-size:11px;color:var(--slate);margin-top:5px;line-height:1.2;}
.staff__meta{font-size:13px;color:var(--slate);text-align:center;margin-bottom:14px;}
.staff__row{display:flex;gap:10px;}

/* Single centred column at every width — header band stays full-bleed,
   hero + form stack (never split into two columns). */

/* small phones / very short screens */
@media (max-height:680px){
  .hero__title{font-size:clamp(30px,7vw,40px);}
  .mug svg{height:70px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;}
  #snow{display:none;}
}