/* ==========================================================================
   EDIS Agency — JNS-format layout system
   Design tokens: EDIS.  Layout patterns: jnsinternational.ca
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* EDIS palette (unchanged) */
  --ink:      #010B14;
  --paper:    #FDFFFC;
  --accent:   #F2E94E;
  --muted:    #9EABB4;

  /* surfaces derived from the EDIS dark base */
  --surface:        rgba(255,255,255,.035);
  --surface-hi:     rgba(255,255,255,.06);
  --hairline:       rgba(255,255,255,.08);
  --hairline-strong:rgba(255,255,255,.16);
  --chip-line:      rgba(255,255,255,.25);

  /* JNS radius scale, snapped to EDIS's 28px card */
  --r-pill: 999px;
  --r-xl:   46px;   /* category cards  */
  --r-lg:   36px;   /* buttons, media  */
  --r-card: 28px;   /* --card-radius   */
  --r-md:   22px;
  --r-sm:   18px;

  /* layout */
  --container: 1180px;
  --gutter:    24px;
  --gap:       20px;

  /* full-bleed page photo (JNS signature). Set per page:
     body{ --page-photo:url("img/hero.jpg") } */
  --page-photo: none;
  --photo-pos:  50% 0;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:400 16px/1.7 Hind, system-ui, sans-serif;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ font-family:Montserrat, system-ui, sans-serif; margin:0 }
p{ margin:0 }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

/* ==========================================================================
   1. Page photo layer  —  JNS puts ONE cover photo behind the whole document
   ========================================================================== */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(900px 620px at 78% -6%, rgba(242,233,78,.10), transparent 62%),
    radial-gradient(760px 560px at 6% 8%,   rgba(64,120,180,.16), transparent 60%),
    linear-gradient(180deg, #04101B 0%, var(--ink) 46%, #01080F 100%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:var(--page-photo);
  background-size:cover;
  background-position:var(--photo-pos);
  background-repeat:no-repeat;
  opacity:0; transition:opacity .6s var(--ease);
}
body.has-photo::after{ opacity:1 }
/* scrim so type stays readable over any photo */
body.has-photo::after{
  box-shadow:inset 0 0 0 100vmax rgba(1,11,20,.52);
}

/* Light pages (Products / Contact / legal) flip the whole skin */
body.theme-light{
  background:var(--paper);
  color:rgba(1,11,20,.84);
}
body.theme-light::before{
  background:
    radial-gradient(700px 480px at 4% 0%, rgba(14,107,168,.07), transparent 58%),
    linear-gradient(180deg,#FFFFFF 0%, #F6F9FB 100%);
}
body.theme-light h1,
body.theme-light h2,
body.theme-light h3{ color:var(--ink) }

/* ---------- Shell ---------- */
.wrap{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}
.section{ padding-block:60px }
.section--tight{ padding-block:40px }

/* ==========================================================================
   2. Header — floating glass pill (JNS signature)
   ========================================================================== */
.site-head{
  position:sticky; top:0; z-index:900;
  padding:22px var(--gutter);
}
.nav{
  max-width:var(--container); margin-inline:auto;
  height:72px; padding:0 12px 0 24px;
  display:flex; align-items:center; gap:24px;
  border-radius:var(--r-pill);
  background:linear-gradient(120deg, rgba(5,10,16,.86), rgba(5,10,16,.66));
  border:1px solid var(--hairline-strong);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 18px 45px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.theme-light .nav{
  background:rgba(255,255,255,.92);
  border-color:rgba(1,11,20,.10);
  box-shadow:0 18px 45px rgba(1,11,20,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.brand{
  font-family:Montserrat, sans-serif; font-size:24px; font-weight:800;
  letter-spacing:-.02em; line-height:1; white-space:nowrap;
}
.brand i{ color:var(--accent); font-style:normal }

.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto }
.nav-links a{
  position:relative; padding:10px 13px;
  font-family:Montserrat, sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  opacity:.9; transition:opacity .2s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px;
  background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-links a:hover{ opacity:1 }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ transform:scaleX(1) }
.nav-links a[aria-current="page"]{ color:var(--accent); opacity:1 }

.nav-cta{
  flex:none; padding:11px 20px; border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink);
  font-family:Montserrat, sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.35) }
.theme-light .nav-cta{ background:var(--ink); color:var(--paper) }

.nav-toggle{ display:none; margin-left:auto; padding:10px; border-radius:12px }
.nav-toggle span{
  display:block; width:22px; height:2px; margin:4px 0;
  background:currentColor; border-radius:2px; transition:.25s var(--ease);
}

/* ==========================================================================
   3. Buttons — JNS's 5-button system in EDIS colours
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:14px 30px; border-radius:var(--r-lg);
  font-family:Montserrat, sans-serif; font-size:14px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease),
             color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px) }
.btn--accent{ background:var(--accent); color:var(--ink) }
.btn--accent:hover{ box-shadow:0 14px 30px rgba(242,233,78,.24) }
.btn--paper{ background:var(--paper); color:var(--ink) }
.btn--paper:hover{ box-shadow:0 14px 30px rgba(0,0,0,.3) }
.btn--ghost{ border-color:var(--chip-line); color:var(--paper) }
.btn--ghost:hover{ background:var(--surface-hi) }
.theme-light .btn--ghost{ border-color:rgba(1,11,20,.22); color:var(--ink) }
.btn--soft{ background:rgba(1,11,20,.16); color:var(--ink); border-radius:var(--r-lg) }
.theme-light .btn--soft:hover{ background:rgba(1,11,20,.24) }

/* ==========================================================================
   4. Type rhythm
   ========================================================================== */
.kicker{
  font-family:Montserrat, sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  margin-bottom:14px;
}
.kicker--rule{ display:flex; align-items:center; gap:12px }
.kicker--rule::before{
  content:""; width:28px; height:2px; background:var(--accent); border-radius:2px;
}
.h-hero{ font-size:clamp(30px,4.4vw,60px); font-weight:800; line-height:1.05; letter-spacing:-.02em }
.h-hero em{ font-style:normal; color:var(--accent) }
.h-sec{ font-size:clamp(26px,3.4vw,42px); font-weight:800; line-height:1.05; letter-spacing:-.01em }
.h-page{ font-size:clamp(28px,4.4vw,54px); font-weight:800; line-height:1.02; letter-spacing:-.02em }
.lede{ font-size:18px; line-height:1.7; color:rgba(253,255,252,.74); font-weight:500 }
.theme-light .lede{ color:rgba(1,11,20,.72) }
.sec-head{ margin-bottom:34px }
.sec-head--center{ text-align:center; max-width:640px; margin-inline:auto }
.sec-head--center .kicker--rule{ justify-content:center }
.sec-head p{ margin-top:14px }

/* section title + action on one line (JNS Products pattern) */
.head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:28px;
}

/* ==========================================================================
   5. Hero — JNS asymmetric: photo bleeds left, text column sits right
   ========================================================================== */
.hero{ padding-block:96px 84px }
.hero-grid{ display:flex; justify-content:flex-end }
.hero-copy{ width:min(680px,100%) }
.hero-copy .lede{ margin-top:22px; max-width:520px }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px }

.hero--center .hero-grid{ justify-content:center }
.hero--center .hero-copy{ text-align:center; width:min(760px,100%) }
.hero--center .hero-copy .lede{ margin-inline:auto }
.hero--center .hero-actions{ justify-content:center }

/* page header for inner pages */
.page-head{ padding-block:56px 8px }

/* ==========================================================================
   6. Category cards — the JNS signature hover
   ========================================================================== */
.cat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);
  padding-block:20px;
}
.cat-card{
  height:330px; padding:14px;
  display:flex; flex-direction:column;
  border-radius:var(--r-xl);
  background:var(--surface);
  border:1px solid var(--hairline-strong);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  overflow:hidden;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-media{
  flex:1; min-height:0; display:block; overflow:hidden;
  border-radius:34px; background:#fff;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .45s var(--ease);
}
.cat-label{ display:block; text-align:center; padding:14px 8px 4px }
.cat-card b{
  display:block;
  font-family:Montserrat, sans-serif; font-size:20px; font-weight:700; line-height:1.2;
  transition:color .3s var(--ease);
}
.cat-card small{
  display:block; margin-top:5px;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); transition:color .3s var(--ease);
}
.cat-card:hover{
  background:var(--accent); border-color:var(--accent);
  transform:scale(1.05); z-index:5;
  box-shadow:0 22px 44px rgba(242,233,78,.22);
}
.cat-card:hover .cat-media img{ transform:scale(1.06) }
.cat-card:hover b,
.cat-card:hover small{ color:var(--ink) }

/* ==========================================================================
   7. Product cards — EDIS's existing card, JNS grid rhythm
   ========================================================================== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.card{
  display:flex; flex-direction:column;
  padding:22px; border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--hairline);
  transition:transform .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:var(--chip-line); background:var(--surface-hi) }
.theme-light .card{ background:#fff; border-color:rgba(1,11,20,.09); box-shadow:0 4px 14px rgba(1,11,20,.05) }
.theme-light .card:hover{ box-shadow:0 16px 34px rgba(1,11,20,.10) }
.bottle{
  height:230px; margin-bottom:22px; border-radius:var(--r-sm);
  background:#fff; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.bottle img{ height:100%; width:100%; object-fit:contain; padding:14px }
.cat{
  font-family:Montserrat, sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin-bottom:8px;
}
.theme-light .cat{ color:#8A7F00 }
.card h3{ font-size:22px; font-weight:700; line-height:1.2 }
.card p{ margin-top:8px; font-size:13.5px; line-height:1.62; color:var(--muted) }
.theme-light .card p{ color:rgba(1,11,20,.66) }
.abv{
  align-self:flex-start; margin-top:16px; padding:6px 13px;
  border:1px solid var(--chip-line); border-radius:var(--r-pill);
  font-size:11px; font-weight:700; letter-spacing:.08em;
  color:rgba(253,255,252,.82);
}
.theme-light .abv{ border-color:rgba(1,11,20,.2); color:rgba(1,11,20,.78) }

/* brand group block (Products page) */
.brand-group{ padding-block:60px; border-top:1px solid var(--hairline) }
.brand-group:first-of-type{ border-top:0 }
.theme-light .brand-group{ border-color:rgba(1,11,20,.08) }
.group-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.group-head h2{ font-size:clamp(28px,3vw,38px); font-weight:800; line-height:1.05 }
.group-head h2 span{ font-size:15px; font-weight:500; color:var(--muted); margin-left:10px }
.group-link{
  font-family:Montserrat, sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.group-link:hover{ text-decoration:underline; text-underline-offset:4px }
.theme-light .group-link{ color:#8A7F00 }
.group-note{ margin:16px 0 28px; font-size:15px; color:var(--muted); max-width:760px }
.theme-light .group-note{ color:rgba(1,11,20,.66) }

/* ==========================================================================
   8. Stat row (Brands / Parties)
   ========================================================================== */
.stats{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px }
.stat{
  padding:14px 20px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--hairline); min-width:150px;
}
.theme-light .stat{ background:#fff; border-color:rgba(1,11,20,.09) }
.stat b{ display:block; font-family:Montserrat,sans-serif; font-size:24px; font-weight:800; color:var(--accent) }
.theme-light .stat b{ color:var(--ink) }
.stat span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }

/* editorial split (Brands page) */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center }
.split--flip .split-media{ order:2 }
.split-media{
  border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/3;
  background:var(--surface); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
}
.split-media img{ width:100%; height:100%; object-fit:cover }

/* ==========================================================================
   9. Testimonial + client carousel (JNS)
   ========================================================================== */
.quote{
  max-width:720px; margin-inline:auto; padding:36px 40px; text-align:center;
  border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--hairline-strong);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.stars{ color:var(--accent); letter-spacing:.28em; font-size:19px; margin-bottom:16px }
.quote p{ font-size:19px; line-height:1.65; color:rgba(253,255,252,.9) }
.quote cite{
  display:block; margin-top:18px; font-style:normal;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.marquee-track{ display:flex; gap:16px; width:max-content; animation:slide 38s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(-50%) } }
.logo-cell{
  flex:none; width:196px; height:96px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--hairline);
  font-family:Montserrat,sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--muted);
}
.theme-light .logo-cell{ background:#fff; border-color:rgba(1,11,20,.08) }

/* ==========================================================================
   10. Newsletter — JNS 39/61 two-column card
   ========================================================================== */
.newsletter{
  display:grid; grid-template-columns:39fr 61fr; gap:38px;
  padding:34px; border-radius:var(--r-card);
  background:
    radial-gradient(520px 320px at 4% 0%, rgba(242,233,78,.14), transparent 58%),
    linear-gradient(130deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--hairline-strong);
  box-shadow:0 28px 70px rgba(0,0,0,.3);
}
.theme-light .newsletter{
  background:
    radial-gradient(520px 320px at 0% 0%, rgba(242,233,78,.30), transparent 56%),
    linear-gradient(130deg,#F1F7FB,#FBFDFE);
  border-color:#D9E4EB;
  box-shadow:0 24px 65px rgba(1,11,20,.09);
}
.newsletter h2{ font-size:clamp(28px,3vw,40px); font-weight:800; line-height:1.05 }
.newsletter > div > p{ margin-top:14px; font-size:15px; color:var(--muted); max-width:340px }
.form-panel{
  padding:26px; border-radius:var(--r-md);
  background:rgba(1,11,20,.42); border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.theme-light .form-panel{ background:var(--ink); border-color:transparent; color:var(--paper) }
.form-panel label{
  display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(253,255,252,.72); margin-bottom:8px;
}
.field{
  width:100%; padding:13px 18px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.94); border:1px solid transparent;
  color:var(--ink); font:400 15px/1.4 Hind, sans-serif;
}
.field:focus{ outline:2px solid var(--accent); outline-offset:2px }
textarea.field{ border-radius:var(--r-md); min-height:150px; resize:vertical; padding:14px 18px }
.consent{
  display:flex; gap:10px; margin-top:16px;
  font-size:12.5px; line-height:1.55; color:rgba(253,255,252,.62);
}
.consent input{ margin-top:3px; accent-color:var(--accent) }
.form-panel .btn{ margin-top:16px }

/* ==========================================================================
   11. CTA band
   ========================================================================== */
.cta-band{
  padding:56px 40px; text-align:center; border-radius:var(--r-card);
  background:
    radial-gradient(640px 320px at 50% 0%, rgba(242,233,78,.16), transparent 62%),
    linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--hairline-strong);
}
.cta-band h2{ font-size:clamp(28px,3.4vw,42px); font-weight:800; line-height:1.06 }
.cta-band p{ margin:16px auto 28px; max-width:520px; color:var(--muted) }

/* ==========================================================================
   12. Footer — JNS 4-column asymmetric grid
   ========================================================================== */
.site-foot{ margin-top:40px; border-top:1px solid var(--hairline) }
.theme-light .site-foot{ border-color:rgba(1,11,20,.08); background:#F7FAFC }
.foot-main{
  display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:38px;
  padding:56px 0 40px;
}
.foot-brand p{ margin-top:16px; font-size:14px; line-height:1.7; color:var(--muted); max-width:340px }
.foot-brand .btn{ margin-top:22px }
.foot-col h4{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:8px; margin-bottom:14px;
  border-bottom:2px solid var(--accent); display:inline-block;
}
.foot-col a{ display:block; padding:7px 0; font-size:14px; color:var(--muted) }
.foot-col a:hover{ color:var(--paper) }
.theme-light .foot-col a:hover{ color:var(--ink) }
.foot-social{ display:flex; gap:10px; margin-top:18px }
.foot-social a{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--hairline); color:var(--muted); font-size:12px; font-weight:700;
}
.foot-social a:hover{ border-color:var(--accent); color:var(--accent) }
.foot-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  padding:20px 0 30px; border-top:1px solid var(--hairline);
  font-size:12.5px; color:var(--muted);
}
.theme-light .foot-bottom{ border-color:rgba(1,11,20,.08) }
.age-badge{
  display:inline-grid; place-items:center; width:30px; height:30px; margin-right:10px;
  border-radius:50%; border:1px solid var(--chip-line);
  font-size:10px; font-weight:700; vertical-align:middle;
}
.foot-legal{ display:flex; gap:18px }

/* ==========================================================================
   13. Age gate (19+ Ontario)
   ========================================================================== */
.gate{
  position:fixed; inset:0; z-index:9999;
  display:none; place-items:center; padding:24px;
  background:rgba(1,11,20,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.gate[open],.gate.is-on{ display:grid }
.gate-box{
  width:min(420px,100%); padding:34px 30px; text-align:center;
  border-radius:var(--r-md);
  background:var(--paper); color:var(--ink);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.gate-box .brand{ color:var(--ink); justify-content:center; margin-bottom:18px }
.gate-box h2{ font-size:21px; font-weight:800; line-height:1.3 }
.gate-box p{ margin-top:10px; font-size:14px; color:rgba(1,11,20,.66) }
.gate-actions{ display:flex; gap:12px; justify-content:center; margin-top:24px }
.gate-actions .btn{ flex:1; padding:13px 22px }

/* ==========================================================================
   14. Responsive — JNS breakpoints
   ========================================================================== */
@media (max-width:1024px){
  .cat-grid{ grid-template-columns:repeat(2,1fr) }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .foot-main{ grid-template-columns:1fr 1fr; gap:32px }
  .split{ grid-template-columns:1fr; gap:28px }
  .split--flip .split-media{ order:0 }
  .newsletter{ grid-template-columns:1fr; gap:26px }
  .hero-grid{ justify-content:flex-start }
}
@media (max-width:880px){
  .nav-toggle{ display:block; order:3; margin-left:0 }
  .nav{ flex-wrap:wrap; height:auto; gap:12px; padding:14px 14px 14px 20px; border-radius:var(--r-md) }
  .brand{ order:1; margin-right:auto }
  .nav-cta{ order:2; padding:10px 16px; font-size:12px }
  .nav-links{
    order:4; width:100%; margin:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    padding-top:10px; margin-top:2px; border-top:1px solid var(--hairline);
  }
  .nav.is-open .nav-links{ display:flex }
  .nav-links a{ padding:12px 4px; font-size:14px }
  .nav-links a::after{ left:4px; right:auto; width:22px }
}
@media (max-width:767px){
  .section{ padding-block:44px }
  .hero{ padding-block:64px 52px }
  .hero-copy{ text-align:center; width:100% }
  .hero-copy .lede{ margin-inline:auto }
  .hero-actions{ justify-content:center }
  .cards{ grid-template-columns:1fr }
  .cat-grid{ gap:14px }
  .cat-card{ height:280px }
  .cat-card img{ height:150px }
  .newsletter,.cta-band{ padding:26px 22px }
  .foot-main{ grid-template-columns:1fr; padding:40px 0 28px }
  .foot-bottom{ justify-content:flex-start }
  .head-row{ align-items:flex-start }
  .quote{ padding:26px 22px }
}
@media (max-width:479px){
  .cat-grid{ grid-template-columns:1fr }
  .cat-card{ height:300px }
  .gate-actions{ flex-direction:column }
  /* long eyebrows overflow at phone widths — tighten and drop the rule */
  .kicker{ font-size:10.5px; letter-spacing:.16em }
  .kicker--rule{ gap:0 }
  .kicker--rule::before{ display:none }
  .btn{ padding:13px 22px; font-size:13px }
}

/* accessibility */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .marquee-track{ animation:none }
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Party photo galleries */
.party-gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin:24px 0 6px;
}
.party-gallery--3{ grid-template-columns:repeat(3,1fr) }
.party-gallery img{
  width:100%; height:250px; object-fit:cover; display:block;
  border-radius:var(--r-md); border:1px solid var(--hairline);
}
.theme-light .party-gallery img{ border-color:rgba(1,11,20,.08) }
@media (max-width:820px){
  .party-gallery, .party-gallery--3{ grid-template-columns:repeat(2,1fr) }
  .party-gallery img{ height:190px }
}