/* /sweet16 and its confirmation page (8 Oct 2026). Loaded after the site sheets (_shared, live, production-final) and
   joint-landing.css, whose tokens, form fields, consent rows and buttons it reuses.
   Round 3 (Naous, 8 Oct): the site's own top bar carries over for navigation and the hero has no logo; the hero is a still
   photo (.s16-bgi), the video and its Sound on button moved to the home page preview; the sections were reworked with
   photos, a ticker, a bento grid, Christina's ad designs and an orange business band ("this looks so plain and boring"). */
.s16-hero{position:relative;overflow:hidden;isolation:isolate;background:#050505;color:#fff;min-height:min(100svh,920px);display:flex;align-items:center}
.s16-bgv,.s16-bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.s16-static{min-height:min(calc(100svh - 74px),860px)}
.s16-bgi{object-position:50% 35%}
.s16-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 48%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.45) 100%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 40%)}
.s16-g{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(32px,6vh,72px)}
.s16-logo{height:30px;width:auto;margin-bottom:26px}
.s16-copy .eyebrow{color:rgba(255,255,255,.8);order:0}
.s16-copy>*{order:0}
.s16-copy .sub{order:0}
.s16-copy h1{margin:14px 0 20px;font-size:clamp(50px,6.4vw,104px);line-height:.9;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.s16-copy h1 .l2{display:block;color:var(--orange)}
.when{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.when span{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:100px;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);font:600 15px Inter,sans-serif}
.when .ic{width:17px;height:17px;color:var(--orange)}
.s16-copy .sub{font-size:17px;line-height:1.55;color:rgba(255,255,255,.88);max-width:540px}
.snd{position:absolute;right:clamp(16px,4vw,48px);top:22px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:700 13.5px Inter,sans-serif;cursor:pointer}
.snd .ic{width:18px;height:18px}
.snd .off{display:none}.snd.on .on1{display:none}.snd.on .off{display:block}

/* Compact form card */
.s16-hero .card{padding:24px 22px 20px;border-radius:24px}
.s16-hero .card h2{font-size:30px}
.s16-hero .fl{margin-bottom:9px}
.s16-hero .fl input,.s16-hero .fl select{height:52px;padding-top:19px}
.s16-hero .fl-club select{padding-top:0}
.s16-hero .fl input:focus+span,.s16-hero .fl input:not(:placeholder-shown)+span{top:14px}
.s16-hero .row2{gap:9px}.s16-hero .row2 .fl{margin-bottom:9px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:12px 0 12px;border-radius:16px;background:#f1f1ec}
.seg button{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;border:0;border-radius:12px;background:transparent;font:700 13.5px Inter,sans-serif;color:#6a6a64;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.seg button .ic{width:17px;height:17px}
.seg button.on{background:#fff;color:#141414;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.seg button.on .ic{color:var(--orange)}
.s16-hero .consents{margin:4px 0 14px;gap:7px}
.s16-hero .consent{font-size:11.5px;line-height:1.4}
.s16-hero .consent .box{flex-basis:18px;height:18px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.pill{text-decoration:none}
/* Preview badge (review pages only): top-left and click-through, so it never covers the Sound on button or the copy */
.pv{top:14px;bottom:auto;pointer-events:none}

/* Sections */
.s16-sec{padding-block:clamp(56px,8vw,104px)}
.s16-head{max-width:760px;margin-bottom:30px}
.s16-head .h2{margin-top:10px}
.s16-head p{margin-top:14px;font-size:16.5px;line-height:1.6;color:#5f5f5a}
.h2{font-size:clamp(38px,4.6vw,64px)}
.h2 .o{color:var(--orange)}
.acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.act{padding:22px 22px 20px;border-radius:22px;background:var(--paper-2);border:1px solid var(--line)}
.act .n{font:800 15px 'JetBrains Mono',monospace;color:var(--orange)}
.act b{display:block;margin-top:10px;font:800 23px/1.05 'Barlow Condensed';text-transform:uppercase;color:var(--ink)}
.trev{position:relative;overflow:hidden;background:radial-gradient(70% 90% at 85% 10%,rgba(247,143,30,.28),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(140,198,62,.14),transparent 60%),#0a0a0a;color:#fff}
.trev-g{display:grid;grid-template-columns:330px minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center}
.trev-vid{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:9/16;background:#111;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12)}
.trev-vid video{width:100%;height:100%;object-fit:cover;display:block}
.trev-vid .play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%);cursor:pointer;color:#fff}
.trev-vid .play span{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:100px;background:var(--orange);font:800 15px Inter,sans-serif;box-shadow:0 14px 30px -10px rgba(247,143,30,.8)}
.trev-vid .play .ic{width:20px;height:20px;fill:#fff;stroke:#fff}
.trev-vid .play[hidden]{display:none}
.trev .h2{color:#fff}
.trev p{margin-top:14px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.trev ul{list-style:none;margin-top:22px;display:grid;gap:10px}
.trev li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.trev li .ic{color:var(--orange);margin-top:1px}
.trev-pics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.trev-pics img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}

/* Ticker */
.s16-tick{background:var(--orange);color:#0a0a0a;overflow:hidden;padding:15px 0;border-block:2px solid #0a0a0a}
.s16-tick-t{display:flex;width:max-content;gap:26px;align-items:center;animation:s16tick 38s linear infinite;font:900 clamp(22px,2.6vw,32px)/1 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.s16-tick-t i{font-style:normal;font-size:.7em;color:#fff}
@keyframes s16tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.s16-tick-t{animation:none}}

/* Party at your club: bento of photos and colour tiles */
.s16-party{background:var(--paper-2)}
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;grid-template-rows:230px 230px;grid-auto-flow:dense;gap:14px}
.b{position:relative;overflow:hidden;border-radius:24px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;margin:0}
.b .ic{width:34px;height:34px;margin-bottom:auto}
.b b{font:800 clamp(24px,2.2vw,30px)/1 'Barlow Condensed',sans-serif;text-transform:uppercase}
.b span{font-size:14.5px;line-height:1.45}
.b-tall{grid-row:span 2}
.b-wide{grid-column:span 2}
.b-photo{padding:0;color:#fff;background:#111}
.b-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.b-photo:hover img{transform:scale(1.04)}
.b-photo figcaption{position:relative;margin-top:auto;padding:60px 22px 20px;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);display:flex;flex-direction:column;gap:4px}
.b-photo figcaption span{color:rgba(255,255,255,.85)}
.b-orange{background:var(--orange);color:#0a0a0a}
.b-ink{background:#0a0a0a;color:#fff}.b-ink .ic{color:var(--orange)}
.b-green{background:var(--sf-green);color:#0a0a0a}

/* Christina's ad designs */
.s16-ads{background:#0a0a0a;color:#fff;padding-block:clamp(56px,8vw,96px)}
.s16-ads .h2{color:#fff;margin-bottom:30px}
.s16-ads .kick{color:rgba(255,255,255,.7)}
.ads{width:min(1200px,calc(100% - 32px));margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ads img{width:100%;aspect-ratio:600/1066;object-fit:cover;border-radius:20px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1)}
.ads img:nth-child(even){transform:translateY(28px)}

/* Bring your business: an orange band */
.s16-biz{background:var(--orange);color:#0a0a0a;padding-top:clamp(84px,10vw,128px)}
.s16-biz .s16-head p{color:rgba(10,10,10,.78)}
.s16-biz .h2 span{color:#fff}
.s16-biz .kick{color:rgba(10,10,10,.7)}
.biz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.biz .act{background:rgba(255,255,255,.92);border:0;display:flex;flex-direction:column;gap:6px}
.biz .act .ic{width:34px;height:34px;color:var(--orange)}
.biz .act b{font-size:28px;margin-top:6px}
.biz .act p{margin-top:2px;font-size:15px;line-height:1.55;color:#4a4a45}
.biz-cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.biz-cta .pill{width:auto;display:inline-flex;align-items:center;padding:15px 26px;border-radius:100px;background:#0a0a0a;color:#fff;font:800 15px Inter,sans-serif}
.biz-cta .pill:hover{background:#222}
.biz-cta span{color:rgba(10,10,10,.75);font-size:15px}

/* Confirmation page */
.s16-done{min-height:calc(100svh - 74px);display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vh,56px) 16px}
.done-card{width:100%;max-width:520px;text-align:center}
.done-card .s16-logo{margin:0 auto 26px}
.done-card .badge{width:60px;height:60px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff}
.done-card .badge .ic{width:30px;height:30px;stroke-width:2.6}
.done-card .kick{color:rgba(255,255,255,.7)}
.done-card h1{margin:12px 0 14px;font-size:clamp(44px,7vw,68px);line-height:.92;color:#fff}
.done-card h1 .o{color:var(--orange)}
.done-card .lead{font-size:16px;line-height:1.55;color:rgba(255,255,255,.85)}
.done-box{margin:22px 0 18px;padding:18px 20px;border-radius:20px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);text-align:left;font-size:15px;line-height:1.55;color:#fff}
.done-box .row{display:flex;gap:12px;align-items:flex-start}
.done-box .row+.row{margin-top:10px}
.done-box .ic{color:var(--orange);margin-top:2px}
.done-card .kick2{color:rgba(255,255,255,.7);margin:6px 0 10px}
.cal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cal .pill{padding:13px 10px;font-size:14px;margin:0;box-shadow:none}
.cal .pill .ic{width:17px;height:17px}
.pill.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25)}
.pill.ghost:hover{background:rgba(255,255,255,.22)}
.done-card .coqn{margin-top:16px;font-size:14.5px;color:rgba(255,255,255,.85)}
.done-card .back{display:inline-block;margin-top:22px;color:rgba(255,255,255,.75);font:600 14px Inter,sans-serif}

@media (max-width:1023px){
  .s16-g{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .s16-hero{align-items:flex-end}
  .s16-hero::after{background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.25) 100%)}
  .snd{top:56px;right:16px}
  .s16-static{min-height:0}
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:200px}
  .b-tall{grid-row:span 2}
  .b-wide{grid-column:span 2}
  .ads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ads img:nth-child(even){transform:none}
  .trev-g{grid-template-columns:1fr}
  .trev-vid{max-width:320px;margin:0 auto;width:100%}
}
@media (max-width:767px){
  .s16-hero{min-height:auto;display:block}
  .s16-bgv{height:100svh}
  .s16-hero::after{height:100svh;bottom:auto}
  .s16-copy{min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:8px}
  .s16-g{padding-block:24px 28px}
  .s16-copy h1{font-size:clamp(48px,14vw,64px)}
  .s16-static .s16-copy{min-height:62svh}
  .s16-bgi{height:78svh;bottom:auto}
  .s16-static::after{height:78svh;bottom:auto}
  .bento{grid-auto-rows:170px;gap:10px}
  .b{padding:18px;border-radius:20px}
  .b-photo{padding:0}
  .b-photo figcaption{padding:44px 16px 14px}
  .ads{gap:10px}
  .biz{grid-template-columns:1fr}
  .cal{grid-template-columns:1fr}
}

/* production-final.css sets every p and li to #2f2f2f !important, which is right on the white site pages and unreadable on
   the dark and orange sections here. These win it back, scoped to this page's sections. Check with getComputedStyle. */
.s16-hero .s16-copy .sub{color:rgba(255,255,255,.9)!important}
.trev p{color:rgba(255,255,255,.8)!important}
.trev li{color:#fff!important}
.s16-biz .s16-head p{color:rgba(10,10,10,.8)!important}
.biz .act p{color:#4a4a45!important}
.done-card .lead,.done-card .coqn{color:rgba(255,255,255,.88)!important}
.s16-party .s16-head p{color:#5f5f5a!important}
/* Preview badge: under the site nav at the top, so it sits bottom-left above everything instead */
.pv{top:auto;bottom:14px;z-index:120}
/* _shared.css leaves 72px under the footer for the site's sticky bar, which this page does not have */
body{padding-bottom:0}
/* The site's phone rules centre .sub at 320px wide; here it lines up with the headline */
.s16-hero .s16-copy .sub{margin:0!important;max-width:540px!important}
/* The site's sheets size h2 down on phones; section headings here keep their display size */
.s16-sec .h2,.s16-ads .h2{font-size:clamp(38px,4.6vw,64px)!important;line-height:.95!important}
@media (max-width:767px){
  .s16-sec .h2,.s16-ads .h2{font-size:40px!important}
  .bento{grid-auto-rows:minmax(170px,auto)}
}

.done-card{position:relative;z-index:4}
.s16-done::after{background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.6))!important}
.s16-done{padding-top:clamp(84px,12vh,120px)}

/* 9 Oct, the meeting's changes. Scoped to .s16-nonav (no site nav) and new classes, so the live page is untouched until approved. */
.s16-nonav .s16-static{min-height:min(100svh,920px)}
.s16-nonav .s16-done{min-height:100svh}
.s16-bgi-cake{object-position:50% 36%}
.bring{display:flex;align-items:center;gap:9px;margin:2px 2px 12px;font:600 14px Inter,sans-serif;color:#4a4a45!important}
.bring .ic{width:18px;height:18px;color:var(--orange)}
.bring[hidden]{display:none}
.b-t2{grid-column:4;grid-row:1 / span 2}
.trev-cta{display:inline-flex;width:auto;margin-top:24px;padding:15px 28px}
@media (max-width:1023px){.b-t2{grid-column:span 2;grid-row:span 2}}
.cal[hidden],.kick2[hidden]{display:none}
.s16-done .s16-bgi{height:100%!important}

/* 9 Oct, second pass (Naous): business form starts with how they take part and ends with the club; the friends line is a small
   note; photo booth, goodie bags, giveaways and prizes in one tile; no location on the confirmation page without a club. */
#fields{display:flex;flex-direction:column}
#fields>.consents,#fields>.hp,#fields>#submitBtn,#fields>.ferr{order:3}
#fields.is-b>.f-club{order:2}
.bring{display:block;margin:0 4px 12px;font:500 13.5px/1.4 Inter,sans-serif;color:#6a6a64!important}
.bring[hidden],.done-box .row[hidden]{display:none}
.b-merge span{max-width:34ch}
@media (max-width:1023px){.b-merge{grid-column:auto;grid-row:span 2}}