/* ============================================================
   Prom and After Prom Entertainment — promandafterpromentertainment.com
   Built 2026-08-16. Plain HTML and CSS. No frameworks, no webfonts,
   nothing loaded from another company's server except the booking form.

   WHY THIS LOOKS DIFFERENT FROM THE OTHER TWO SITES, deliberately:

   schoolmagicassemblies.com is light and open, because a principal is
   deciding in daylight whether to give up instruction time.
   carrollbaker.com is dark and theatrical, because it sells a corporate
   evening.

   This one is midnight blue and gold, which is the visual language of
   every prom invitation ever printed. It has to read as EVENING and
   FORMAL without reading as BAR. That distinction is the whole job: the
   buyer is a school committee or a parent group, and anything that hints
   at adult nightlife loses the booking before a word is read.

   NO alcohol imagery anywhere, ever, on this site. Not in a photograph,
   not in an illustration, not as a color cue.
   ============================================================ */

:root{
  --midnight:#111A33;
  --midnight-deep:#0A1124;
  --midnight-soft:#1B2647;
  --indigo:#2C3B6B;
  --gold:#E8C25A;
  --gold-deep:#C89A28;
  --rose:#E0567A;          /* one warm accent so it is not all blue and gold */
  --ink:#1E2230;
  --muted:#5C6274;
  --line:#E2E4EC;
  --cream:#FAF8F3;
  --paper:#FFFFFF;
  --mist:#F1F3F9;

  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1120px;
  --shadow-sm:0 1px 3px rgba(17,26,51,.08),0 6px 16px -8px rgba(17,26,51,.18);
  --shadow-md:0 2px 6px rgba(17,26,51,.10),0 18px 40px -20px rgba(17,26,51,.32);
  --shadow-lg:0 4px 12px rgba(17,26,51,.12),0 30px 60px -25px rgba(17,26,51,.42);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17.5px;line-height:1.68;color:var(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:790px;margin-left:auto;margin-right:auto}
.center{text-align:center}

h1,h2,h3{font-family:var(--display);line-height:1.14;margin:0 0 .5em;letter-spacing:-.022em}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.45rem);font-weight:800}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.15em}

/* ---------- top bar ---------- */
.topbar{background:var(--midnight-deep);color:#fff;padding:11px 0;font-size:14.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar .who{font-weight:700;letter-spacing:.02em}
.topbar a{color:var(--gold);font-weight:700}

/* ---------- hero ---------- */
.hero{background:
    radial-gradient(1200px 520px at 78% -8%, rgba(232,194,90,.16), transparent 60%),
    linear-gradient(170deg, var(--midnight) 0%, var(--midnight-deep) 100%);
  color:#fff;padding:78px 0 84px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:
  linear-gradient(90deg,transparent,rgba(232,194,90,.55),transparent)}
.hero .eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  font-weight:800;margin:0 0 18px}
.hero h1{color:#fff;text-wrap:balance;max-width:16ch}
.hero .lede{font-size:clamp(1.06rem,1.9vw,1.32rem);color:rgba(255,255,255,.9);max-width:60ch;margin:0 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.btn{display:inline-block;font-weight:800;font-size:16.5px;padding:15px 28px;border-radius:6px;
  border:2px solid transparent;transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#20180A;box-shadow:var(--shadow-md)}
.btn-gold:hover{background:#F0CF74}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- generic sections ---------- */
section{padding:70px 0}
.band-mist{background:var(--mist)}
.band-cream{background:var(--cream)}
.band-dark{background:linear-gradient(165deg,var(--midnight) 0%,var(--midnight-deep) 100%);color:#fff}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:rgba(255,255,255,.86)}

.kicker{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--gold-deep);margin:0 0 12px}
.band-dark .kicker{color:var(--gold)}

/* ---------- the two packages ---------- */
/* min() on the track floor is deliberate and must not be simplified back to a
   plain minmax(320px,1fr). On a 360px-wide Android screen the usable width
   inside .wrap is about 312px, which is LESS than a 320px floor, so the track
   stays 320px and the section scrolls sideways INSIDE itself while the page
   body looks fine. That exact fault reached Carroll's phone on two press kits
   on 2026-08-15 and passed a check that only asked whether the whole page
   scrolled. Same fix applied to .quotes and .reasons below. */
.packs{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));margin-top:34px}
.pack{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:32px 30px 34px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.pack::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--indigo)}
.pack.after::before{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.pack h3{font-size:1.55rem;margin-bottom:4px}
.pack .when{font-size:14.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px}
.pack ul{margin:0 0 24px;padding:0 0 0 22px}
.pack li{margin:0 0 9px}
.prices{display:flex;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px}
.price{flex:1 1 130px;background:var(--mist);border-radius:9px;padding:16px 18px}
.pack.after .price{background:#FBF4E2}
.price .amt{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;color:var(--midnight);line-height:1.1}
.price .lbl{font-size:13.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* ---------- testimonials ---------- */
.quotes{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));margin-top:32px}
blockquote.q{margin:0;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-left:3px solid var(--gold);border-radius:9px;padding:26px 26px 22px}
blockquote.q p{font-size:1.04rem;margin:0 0 14px}
blockquote.q cite{font-style:normal;font-weight:800;color:var(--gold);font-size:14.5px;
  letter-spacing:.04em;display:block}
blockquote.q .ctx{display:block;font-weight:600;color:rgba(255,255,255,.62);font-size:13.5px;
  letter-spacing:.02em;margin-top:3px}

/* The lead quote. Added 2026-08-20 for Abby P.'s nine-sentence testimonial, which is far
   longer than the others and would otherwise stretch every card in the .quotes grid to its
   own height. Full width, slightly larger type, gold rule across the top instead of down
   the side so it reads as a pull quote rather than a fourth card.
   .quotes-2 exists because removing her short quote left two cards, and auto-fit would
   have stretched them edge to edge. Capping the track keeps them the width they were. */
blockquote.q-lead{margin:32px 0 0;background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.16);border-left:1px solid rgba(255,255,255,.16);
  border-top:3px solid var(--gold);border-radius:9px;padding:32px 34px 26px}
blockquote.q-lead p{font-size:1.16rem;line-height:1.62;margin:0 0 16px}
.quotes-2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),.5fr));
  justify-content:start}
@media (max-width:700px){
  blockquote.q-lead{padding:26px 24px 22px}
  blockquote.q-lead p{font-size:1.06rem}
}

/* ---------- reasons / faq ---------- */
.reasons{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:32px}
.reason{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:26px 24px;
  box-shadow:var(--shadow-sm)}
.reason h3{margin-bottom:8px}
.reason p{margin:0;color:var(--muted);font-size:16.5px}

.faq{margin-top:30px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.06rem;list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-deep);font-weight:800;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:14px 0 0;color:var(--muted)}

/* ---------- about ---------- */
.about{display:grid;gap:38px;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
.about img{border-radius:12px;box-shadow:var(--shadow-md)}
@media (max-width:820px){ .about{grid-template-columns:1fr} .about .shot{max-width:300px;margin:0 auto} }

.creds{list-style:none;margin:24px 0 0;padding:0}
.creds li{position:relative;padding:0 0 0 30px;margin:0 0 11px}
.creds li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--gold-deep)}

/* ---------- booking ---------- */
.formwrap{background:var(--paper);border-radius:13px;padding:30px;box-shadow:var(--shadow-lg);
  margin-top:30px}
.form-fallback{border:2px dashed var(--line);border-radius:10px;padding:24px;text-align:center}

/* ---------- footer ---------- */
.foot{background:var(--midnight-deep);color:rgba(255,255,255,.72);padding:40px 0;font-size:15px}
.foot a{color:var(--gold)}
.foot .row{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;align-items:center}

/* ---------- phone ----------
   Carroll reads everything on an Android phone first, so this is not an
   afterthought. Nothing here changes the design, it only gives the page room
   to breathe on a narrow screen. */
@media (max-width:640px){
  body{font-size:17px}
  .wrap{padding:0 18px}
  section{padding:52px 0}
  .hero{padding:56px 0 60px}
  .hero .lede{font-size:1.05rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{text-align:center}
  .pack{padding:26px 22px 28px}
  .formwrap{padding:22px 18px}
  .topbar{font-size:13.5px}
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:4px}
  .foot .row{flex-direction:column;align-items:flex-start;gap:20px}
}

/* Nothing may scroll the page sideways. A belt-and-braces guard, because the
   symptom is invisible on a desktop browser and obvious on a phone. */
html,body{max-width:100%;overflow-x:hidden}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* ============================================================
   ADDED 2026-08-17: the site became THREE pages instead of one.
   Carroll can create a separate Mago form per page, so prom and
   after prom now have their own page and their own form. That is
   the only way the source data can ever tell the two apart, and
   prom/after-prom have NEVER been distinguishable in the CRM.
   ============================================================ */

/* ---------- page navigation ----------
   The one-page site needed no nav. Three pages do. It sits under the
   topbar, is gold-on-midnight to match, and collapses to a scrollable
   row rather than a hamburger, because three links do not earn a menu. */
.nav{background:var(--midnight);border-top:1px solid rgba(232,194,90,.16);
  border-bottom:1px solid rgba(232,194,90,.16)}
.nav .wrap{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-top:0;padding-bottom:0}
.nav a{display:inline-block;color:rgba(255,255,255,.82);font-weight:700;font-size:15.5px;
  padding:15px 16px;border-bottom:3px solid transparent;letter-spacing:.01em}
.nav a:hover{color:#fff;text-decoration:none;border-bottom-color:rgba(232,194,90,.45)}
.nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.nav .nav-tel{margin-left:auto;color:var(--gold)}
@media (max-width:640px){
  .nav a{padding:12px 11px;font-size:14.5px}
  .nav .nav-tel{margin-left:0}
}

/* ---------- the two route cards on the home page ----------
   Same min() floor as .packs. On a 360px Android screen the usable width
   inside .wrap is about 312px, so a plain 320px floor makes the section
   scroll sideways inside itself while the page looks fine. */
.paths{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  margin-top:34px}
.path{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:30px 28px 28px;box-shadow:var(--shadow-sm);color:var(--ink);
  position:relative;overflow:hidden;transition:transform .12s ease, box-shadow .12s ease}
.path:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-md)}
.path::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--indigo)}
.path.after::before{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.path-tag{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.path h3{font-size:1.75rem;margin-bottom:10px}
.path p{color:var(--muted);margin:0 0 20px}
.path-price{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--midnight);
  margin-top:auto}
.path-go{display:inline-block;margin-top:16px;font-weight:800;color:var(--indigo)}
.path.after .path-go{color:var(--gold-deep)}
.path-go::after{content:" \2192"}

/* ---------- "the other night" cross-link at the foot of each page ---------- */
.crosslink{background:var(--cream);border:1px solid var(--line);border-radius:12px;
  padding:26px 28px;display:flex;gap:20px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:8px}
.crosslink p{margin:0;color:var(--muted)}
.crosslink strong{color:var(--ink)}