/* ============================================================
   Navkar Navratri Utsav — Content sections
   Experience grid, legacy band, workshop, passes,
   venue, FAQs, final CTA and footer.
   ============================================================ */

/* ------------------------------------------------------------
   Shared image treatments — the design system's picture frames
   ------------------------------------------------------------ */
.img-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--ink-800);
  box-shadow:var(--sh-img);
  isolation:isolate;
}
.img-frame img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.25s var(--e-out);
  will-change:transform;
}
.img-frame:hover img{transform:scale(1.07)}
/* warm gradient veil keeps photos inside the palette */
.img-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(42,6,20,.55),transparent 52%);
  opacity:.85;
  transition:opacity var(--t-mid);
}
.img-frame:hover::after{opacity:.6}
.img-frame.no-veil::after{display:none}

/* Arch — mandap / temple doorway silhouette */
.img-arch{border-radius:999px 999px var(--r-lg) var(--r-lg)}
/* Circle — garba ring */
.img-circle{border-radius:50%;aspect-ratio:1}

/* Festive hairline. Sits INSIDE the frame — an outside ring would be cut off
   by the overflow:hidden that crops the photo. */
.img-keyline::before{
  content:"";position:absolute;inset:11px;
  border:1.5px solid var(--marigold);
  border-radius:inherit;
  opacity:.55;pointer-events:none;z-index:2;
}
.img-keyline.img-arch::before{border-radius:999px 999px var(--r-md) var(--r-md)}

/* Caption chip that floats on a photo */
.img-cap{
  position:absolute;left:18px;bottom:18px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:var(--r-pill);
  background:rgba(42,6,20,.58);
  border:1px solid var(--cream-18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--cream);
}
.img-cap::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none;
}

/* ------------------------------------------------------------
   1 — Experience : asymmetric colour + photo card grid
   ------------------------------------------------------------ */
.exp{position:relative;overflow:hidden}
.exp .motif-bl{color:var(--teal);opacity:.10}
.exp-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.cell{
  position:relative;
  border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);
  min-height:230px;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform var(--t-mid),box-shadow var(--t-mid);
  will-change:transform;
}
.cell:hover{transform:translateY(-7px);box-shadow:var(--sh-lg)}
.cell .num{
  display:block;
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:900;
  letter-spacing:.18em;opacity:.5;margin-bottom:auto;
}
.cell-img .num{margin-bottom:10px;color:var(--yellow);opacity:.8}
.cell h3{margin-top:22px;margin-bottom:9px}
.cell p{font-size:14.5px;line-height:1.66;opacity:.86}
.cell .pill{
  align-self:flex-start;
  margin-top:20px;margin-bottom:-6px;
  font-family:'Outfit',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;
  padding:5px 13px;border-radius:var(--r-pill);
  background:var(--yellow);color:var(--ink);
}
/* faint chakra watermark in each card corner */
.cell::after{
  content:"";position:absolute;right:-26px;bottom:-26px;
  width:120px;height:120px;border-radius:50%;
  border:14px solid currentColor;opacity:.07;
  transition:transform .9s var(--e-out);
}
.cell:hover::after{transform:scale(1.18) rotate(28deg)}

.c-mag  {background:var(--magenta);color:#fff}
.c-ink  {background:var(--ink);color:#fff}
.c-teal {background:var(--teal);color:#fff}
.c-yel  {background:var(--yellow);color:var(--ink)}
/* ink, not white: white body copy on this orange only reaches 3.4:1 */
.c-org  {background:var(--orange);color:var(--ink)}
.c-pur  {background:var(--purple);color:#fff}
.c-cream{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.c-cream .num{opacity:.4;color:var(--magenta-ink)}
.c-cream p{color:var(--body);opacity:1}

/* A headline figure inside a card. The amount carries the line; the qualifier
   trails underneath at body scale so it does not read as a second heading. */
.cell-figure{
  margin-top:10px;margin-bottom:13px;
  font-family:'Outfit',sans-serif;
  font-size:clamp(12.5px,1.25vw,14.5px);font-weight:700;
  letter-spacing:.005em;line-height:1.35;
}
.cell-figure b{
  display:block;
  font-size:clamp(26px,3vw,36px);font-weight:900;
  letter-spacing:-.035em;line-height:1.02;
  margin-bottom:2px;
}
.c-cream .cell-figure{color:var(--body)}
.c-cream .cell-figure b{color:var(--magenta-ink)}

/* Photo cells */
.cell-img{padding:0;min-height:260px;color:#fff}
.cell-img::after{display:none}
.cell-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--e-out);
}
.cell-img:hover img{transform:scale(1.09)}
.cell-img .cell-body{
  position:relative;z-index:2;margin-top:auto;
  padding:clamp(22px,2.4vw,30px);
  background:linear-gradient(to top,rgba(42,6,20,.90),rgba(42,6,20,.55) 55%,transparent);
}
.cell-img h3{margin-top:0;margin-bottom:7px}
.cell-img p{color:var(--cream-70);opacity:1}
.cell-img .tagline{
  position:absolute;top:20px;left:20px;z-index:2;
  font-family:'Outfit',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  padding:6px 13px;border-radius:var(--r-pill);
  background:rgba(42,6,20,.55);border:1px solid var(--cream-18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--yellow);
}
/* A dated, one-night item rather than a category label, so it goes solid to
   separate it from the glass pills on the other photo cells. */
.cell-img .tagline-date{
  background:var(--yellow);border-color:transparent;
  color:var(--ink);
  box-shadow:0 4px 18px rgba(42,6,20,.35);
}

/* Span helpers for the asymmetric rhythm */
.sp-2{grid-column:span 2}
.tall{min-height:340px}

/* ------------------------------------------------------------
   2 — Legacy : full-bleed photo band with counters
   ------------------------------------------------------------ */
.legacy{
  position:relative;
  padding:clamp(80px,11vw,150px) 0;
  overflow:hidden;
  color:#fff;
  background:var(--ink-900);
  isolation:isolate;
}
.legacy-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.legacy-media img,
.legacy-media .bg-video{
  position:absolute;top:-10%;left:0;width:100%;height:120%;
  object-fit:cover;object-position:50% 45%;
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}
/* Sits above the still and cross-fades in only once it is genuinely playing */
.bg-video{
  opacity:0;
  pointer-events:none;
  transition:opacity 1s var(--e-out);
}
.bg-video.is-playing{opacity:1}
.legacy-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(42,6,20,.95) 12%,rgba(42,6,20,.80) 48%,rgba(156,0,67,.62));
}
.legacy .glow-1{width:40vw;height:40vw;top:-18%;right:-8%;opacity:.28}
.legacy h2{margin-bottom:18px;max-width:17ch}
.legacy .lede{color:var(--cream-70);max-width:60ch}

/* Copy left, figures right. The band is a wide photograph and the copy only
   ever fills its left half, so the figures take the space that was empty
   rather than stacking underneath. */
.legacy-in{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(36px,5.5vw,84px);
  align-items:center;
}
.legacy-copy{min-width:0}

/* A vertical pair in that right column, split off from the copy by a rule and
   from each other by a hairline. */
.stats{
  display:flex;flex-direction:column;
  padding-left:clamp(26px,3.4vw,52px);
  border-left:1px solid var(--cream-18);
}
/* The figure sits in front of its label rather than above it, so each one
   reads as a phrase. */
.stat{
  display:flex;align-items:center;
  gap:clamp(10px,1.2vw,16px);
  padding:clamp(16px,2vw,24px) 0;
  overflow:visible;
}
.stat + .stat{border-top:1px solid var(--cream-18)}
.stat .n{
  flex:none;
  display:inline-block;
  font-family:'Outfit',sans-serif;
  font-size:clamp(46px,5.6vw,74px);font-weight:900;
  line-height:1.15;
  letter-spacing:-.02em;
  /* Solid gold — background-clip:text was clipping the bowl of the 9 */
  color:var(--yellow);
  -webkit-text-fill-color:var(--yellow);
  background:none;
  padding:0;
  overflow:visible;
}
.stat .l{
  min-width:0;
  font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;line-height:1.5;
  color:var(--cream-70);
}

/* ------------------------------------------------------------
   3 — Workshop : arch photo + copy + info boxes
   ------------------------------------------------------------ */
.sec.ws-sec{
  position:relative;
  /* visible so the CTA + hard offset shadow are not cropped */
  overflow:visible;
  padding:clamp(24px,4.5vh,56px) 0 clamp(36px,5.5vh,72px);
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
}
.ws-sec > .wrap{width:100%}
.ws-grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.1fr);
  gap:clamp(20px,3.5vw,48px);
  align-items:center;
}
.ws-media{position:relative;max-width:100%}
/* Cap height so the tall photo cannot push the section past one screen */
.ws-media .img-arch{
  aspect-ratio:3 / 4;
  max-height:min(56vh,480px);
  width:min(100%,380px);
  margin-inline:auto;
}
.ws-media .img-arch img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 18%;
}
.ws-float{
  position:absolute;right:-14px;bottom:22px;z-index:3;
  background:#fff;
  border-radius:var(--r-md);
  padding:12px 16px;
  box-shadow:var(--sh-lg);
  text-align:center;
  min-width:100px;
}
.sec-ink .ws-float,.legacy .ws-float{background:#fff;color:var(--ink)}
.ws-float .n{
  font-family:'Outfit',sans-serif;font-size:26px;font-weight:900;
  line-height:1;letter-spacing:-.04em;color:var(--magenta-ink);
}
.ws-float .l{
  font-family:'Outfit',sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--body);margin-top:4px;
}

.ws-copy h2{font-size:clamp(26px,3.4vw,42px);line-height:1.1;margin:0}
.ws-when{
  margin:10px 0 0;
  font-family:'Outfit',sans-serif;font-size:clamp(14px,1.2vw,16px);font-weight:700;
  letter-spacing:.04em;color:var(--magenta-ink);line-height:1.4;
}
.ws-when sup{font-size:.7em;top:-.35em}
.ws-copy .lede{
  margin-top:12px;
  font-size:clamp(15px,1.25vw,17px);
  line-height:1.55;
  max-width:46ch;
}

.wslist{margin-top:16px;display:grid;gap:8px}
.wslist > div{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.45}
.tick{
  flex:none;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--teal);color:#fff;
  font-size:12px;font-weight:700;margin-top:1px;
}
.sec-ink .wslist > div{color:var(--cream-70)}

.wsgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;margin-top:18px;
}
.wsbox{
  background:#fff;border-radius:var(--r-md);
  padding:14px 16px;
  box-shadow:var(--sh-sm);
  border:1px solid var(--line);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.wsbox:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.wsbox .k{
  font-family:'Outfit',sans-serif;font-size:9px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--magenta-ink);
}
.wsbox .v{
  font-family:'Outfit',sans-serif;font-size:clamp(18px,1.8vw,22px);font-weight:900;
  letter-spacing:-.03em;margin-top:4px;
}
.wsbox .s{font-size:12px;color:var(--body);margin-top:2px}
.ws-cta{
  margin-top:18px;
  /* hard 6px offset shadow under .btn-yellow needs clearance */
  padding-bottom:12px;
  overflow:visible;
}
.ws-cta .btn{
  max-width:100%;
  white-space:normal;
  text-align:center;
  line-height:1.25;
  padding:16px 28px;
}

/* ------------------------------------------------------------
   4 — Passes
   ------------------------------------------------------------ */
.passes-sec{position:relative;overflow:hidden}
.passes-sec .motif-br{color:var(--purple);opacity:.09}
.passes-sec .sec-head{margin-bottom:clamp(28px,4vw,44px)}
.passes-sec .sec-head .lede{max-width:42ch;margin-inline:auto}

.pass-block{margin-top:clamp(28px,3.6vw,44px)}
.pass-block:first-of-type{margin-top:0}
.pass-block-lab{
  margin:0 0 14px;
  font-family:'Outfit',sans-serif;
  font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta-ink);
}

.pass-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
  align-items:stretch;
}
.pass-grid.pass-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pass-grid.pass-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pass-grid.pass-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pass-grid + .pass-grid{margin-top:clamp(14px,1.8vw,22px)}

/* inline-block, not inline-flex: a flex container turns the trailing full
   stop into its own item and the gap pushes it away from the date */
.pass-early{
  margin:18px 0 0;
  display:inline-block;
  font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:.02em;color:var(--magenta-ink);
  background:rgba(227,11,84,.08);
  border:1px solid rgba(227,11,84,.18);
  border-radius:var(--r-pill);
  padding:10px 16px;
}
.pass-early b{font-weight:900;color:var(--ink)}

/* Four across needs roughly 1180px. Step down through three before two,
   otherwise tablets get two very wide, very empty cards. */
@media (max-width:1180px){
  .pass-grid.pass-grid-4,
  .pass-grid.pass-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:880px){
  .pass-grid.pass-grid-3,
  .pass-grid.pass-grid-4,
  .pass-grid.pass-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.pass{
  position:relative;
  background:#fff;
  border:2px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;
  min-height:100%;
  overflow:hidden;
  transition:transform var(--t-mid),box-shadow var(--t-mid),border-color var(--t-mid);
  will-change:transform;
}
.pass:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--magenta)}
.pass::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--e-out);
}
.pass:hover::before{transform:scaleX(1)}

.pass.feat{
  background:var(--ink);color:#fff;border-color:var(--ink);
  box-shadow:var(--sh-md);
}
.pass.feat::before{transform:scaleX(1)}
.pass.feat .pdesc{color:var(--cream-70)}
.pass.feat:hover{border-color:var(--yellow)}
/* chakra watermark on the featured card */
.pass.feat::after{
  content:"";position:absolute;right:-50px;top:-50px;
  width:190px;height:190px;border-radius:50%;
  border:14px solid var(--magenta);opacity:.14;
  transition:transform 1s var(--e-out);
}
.pass.feat:hover::after{transform:scale(1.15) rotate(30deg)}

.ribbon{
  align-self:flex-start;
  display:inline-flex;align-items:center;
  min-height:28px;
  font-family:'Outfit',sans-serif;font-size:10px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--gold);color:var(--ink);
  margin-bottom:14px;
  position:relative;z-index:1;
}
.ribbon-ghost{
  visibility:hidden;
  background:transparent;
  padding-left:0;padding-right:0;
}
.pname{
  font-family:'Outfit',sans-serif;font-size:clamp(17px,1.8vw,21px);
  font-weight:800;letter-spacing:-.02em;line-height:1.2;
  min-height:2.4em;
  position:relative;z-index:1;
}
.price{
  font-family:'Outfit',sans-serif;
  /* four across, so this is capped to what a quarter-width card can hold:
     at 52px a five figure price overflowed its own card */
  font-size:clamp(28px,2.8vw,40px);font-weight:900;
  letter-spacing:-.045em;line-height:1;
  margin:10px 0 12px;
  min-height:1.55em;
  position:relative;z-index:1;
}
.price span{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:0;
  color:var(--body);margin-top:7px;
}
.pass.feat .price span{color:var(--cream-70)}
.pdesc{
  font-size:13.5px;line-height:1.6;color:var(--body);
  margin:0 0 20px;flex:1;
  position:relative;z-index:1;
}
.pass-rich .pdesc{margin-bottom:14px;flex:0}
.plist{
  list-style:none;margin:0 0 22px;padding:0;
  display:grid;gap:8px;
  position:relative;z-index:1;
  flex:1;
}
.plist li{
  font-size:12.5px;line-height:1.45;color:var(--body);
  padding-left:14px;position:relative;
}
.plist li:before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.plist b{
  display:block;font-family:'Outfit',sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--magenta-ink);
  margin-bottom:2px;
}
/* every pass button carries the same yellow as the hero CTA */
.pbtn{
  position:relative;z-index:1;
  width:100%;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:13.5px;
  letter-spacing:-.005em;
  padding:15px 12px;border-radius:var(--r-pill);
  background:var(--yellow);color:var(--ink);
  box-shadow:0 4px 0 #D2AE00;
  transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.pbtn:hover{background:#fff;transform:translateY(2px);box-shadow:0 2px 0 #D2AE00}
.pbtn:active{transform:translateY(4px);box-shadow:0 0 0 #D2AE00}
.pbtn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.pbtn:disabled,.pbtn.is-closed{
  opacity:.48;cursor:not-allowed;pointer-events:none;
  transform:none;box-shadow:none;background:var(--ink-12);color:var(--body);
}
.pbtn:disabled:hover,.pbtn.is-closed:hover{
  transform:none;box-shadow:none;background:var(--ink-12);
}

.pnote{
  margin-top:26px;font-size:13.5px;color:var(--body);
  line-height:1.7;max-width:74ch;
}

/* Bulk / partner band */
.bulk{
  margin-top:clamp(34px,4vw,50px);
  background:var(--magenta);color:#fff;
  border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,40px);
  display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.bulk::after{
  content:"";position:absolute;right:-60px;top:-60px;
  width:230px;height:230px;border-radius:50%;
  border:22px solid #fff;opacity:.10;
}
.bulk > div{position:relative;z-index:1;min-width:0}
.bulk h4{font-size:clamp(18px,2vw,24px);margin-bottom:7px}
.bulk p{font-size:14px;color:rgba(255,255,255,.88);line-height:1.7}

/* each contact is its own WhatsApp link, not inert text */
.bulk-contacts{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:8px 10px;
  margin-top:12px;
}
.bulk-contacts a{
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:13.5px;color:rgba(255,255,255,.9);
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.bulk-contacts a b{
  font-family:'Outfit',sans-serif;font-weight:800;color:#fff;
  white-space:nowrap;
}
.bulk-contacts a:hover{background:rgba(255,255,255,.24);border-color:#fff;transform:translateY(-2px)}
.bulk-contacts a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* leading icon inside a .btn */
.btn-ico{width:17px;height:17px;flex:none;fill:currentColor}
.bulk .btn{position:relative;z-index:1;flex:none}

/* How booking works — clear numbered steps under the passes */
.regband{
  margin-top:clamp(20px,2.4vw,28px);
  background:var(--cream-2);
  border:2px dashed var(--ink-12);
  border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,40px);
  display:flex;
  flex-direction:column;
  gap:clamp(22px,2.8vw,32px);
}
.regband-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}
.regband-copy{min-width:0;flex:1 1 280px}
.regband-kicker{
  font-family:'Outfit',sans-serif;
  font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta-ink);
  margin:0 0 8px;
}
.regband h3{margin:0 0 8px}
.regband-copy p{font-size:14.5px;color:var(--body);max-width:56ch;margin:0}
.regband-top .btn{flex:none}

.book-how{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);
  counter-reset:none;
}
.book-how > li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
  position:relative;
}
/* Connector line between steps on desktop */
.book-how > li:not(:last-child)::after{
  content:"";
  position:absolute;
  top:18px;left:calc(48px + 14px);
  right:-11px;
  height:1px;
  background:var(--ink-12);
  pointer-events:none;
}
.book-how-n{
  flex:none;
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--ink);
  color:var(--yellow);
  font-family:'Outfit',sans-serif;
  font-size:12px;font-weight:800;
  letter-spacing:.04em;
}
.book-how-body{
  display:flex;flex-direction:column;gap:4px;
  min-width:0;padding-top:4px;
}
.book-how-body strong{
  font-family:'Outfit',sans-serif;
  font-size:15px;font-weight:800;
  letter-spacing:-.01em;color:var(--ink);
  line-height:1.25;
}
.book-how-body span{
  font-size:13.5px;line-height:1.45;color:var(--body);
}

/* ------------------------------------------------------------
   5 — Venue
   ------------------------------------------------------------ */
.venue-sec{position:relative;overflow:hidden}
.venue-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(36px,6vw,80px);align-items:center;
}
.vrow{
  display:flex;align-items:baseline;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;
}
.vrow .k{
  flex:none;width:112px;
  font-family:'Outfit',sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--magenta-ink);
}
.sec-ink .vrow{border-bottom-color:var(--cream-18);color:var(--cream)}
.sec-ink .vrow .k{color:var(--marigold)}

/* ---- Live map ----
   Replaces the old placeholder card, which was white-on-cream and so had
   almost no edge once it ran past the photo it was overlapping. */
.venue-media{position:relative}
.map-frame{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  overflow:hidden;
  background:var(--cream-2);
  box-shadow:var(--sh-img);
  isolation:isolate;
}
.map-frame iframe{
  position:relative;z-index:1;
  width:100%;height:100%;
  border:0;display:block;
}
.map-fallback{
  position:absolute;inset:0;z-index:0;
  display:grid;place-content:center;text-align:center;gap:5px;
  padding:24px;
}
.map-fallback .k{
  font-family:'Outfit',sans-serif;font-size:clamp(22px,2.6vw,30px);
  font-weight:900;letter-spacing:-.03em;color:var(--ink);
}
.map-fallback .v{
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--body);
}

/* Address bar welded to the bottom of the map */
.map-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  background:var(--ink);color:#fff;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:18px clamp(20px,2.2vw,26px);
  box-shadow:var(--sh-md);
}
.map-addr{min-width:0}
.map-addr .k{
  display:block;
  font-family:'Outfit',sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;color:var(--marigold);
}
.map-addr .v{
  display:block;margin-top:3px;
  font-family:'Outfit',sans-serif;font-size:clamp(16px,1.7vw,19px);
  font-weight:800;letter-spacing:-.02em;
}
.map-addr .s{
  display:block;margin-top:2px;
  font-size:13px;color:var(--cream-70);
}
.map-bar .btn{flex:none}

/* ------------------------------------------------------------
   FAQs : section head on the left, accordion on the right
   ------------------------------------------------------------ */
.faq-in{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(30px,5vw,76px);
  align-items:start;
  /* lets the answer panels animate to their natural height below */
  interpolate-size:allow-keywords;
}
.faq-head{margin-bottom:0;max-width:30ch}

.faq-list{display:flex;flex-direction:column}
.faq{border-top:1px solid var(--line)}
.faq:last-child{border-bottom:1px solid var(--line)}

.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:20px;
  padding:clamp(17px,2vw,23px) 0;
  font-family:'Outfit',sans-serif;
  font-size:clamp(15.5px,1.45vw,19px);font-weight:700;
  letter-spacing:-.015em;line-height:1.45;
  color:var(--ink);
  transition:color var(--t-fast);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--magenta-ink)}
.faq summary:focus-visible{outline:3px solid var(--magenta);outline-offset:4px;border-radius:6px}

/* Plus that becomes a minus */
.faq-i{
  flex:none;margin-left:auto;position:relative;
  width:30px;height:30px;border-radius:50%;
  background:var(--magenta);
  transition:transform .45s var(--e-out),background var(--t-fast);
}
.faq-i::before,.faq-i::after{
  content:"";position:absolute;left:50%;top:50%;
  width:12px;height:2px;border-radius:2px;background:#fff;
  transform:translate(-50%,-50%);
  transition:transform .45s var(--e-out),opacity .3s var(--e-out);
}
.faq-i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq[open] .faq-i{transform:rotate(180deg)}
.faq[open] .faq-i::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0}

.faq-a p{
  padding:0 50px clamp(18px,2.2vw,25px) 0;
  margin-top:-4px;
  font-size:15px;line-height:1.72;color:var(--body);
  max-width:60ch;
}
.faq-a strong{color:var(--ink);font-weight:700}
.faq-a a{
  color:var(--magenta-ink);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.faq-a a:hover{color:var(--magenta)}

/* ------------------------------------------------------------
   Partners — slow left logo scroller
   ------------------------------------------------------------ */
.sponsors-sec{
  position:relative;
  overflow:hidden;
  padding-bottom:clamp(48px,6vw,72px);
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(227,11,84,.06), transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 100%, rgba(201,162,39,.08), transparent 50%),
    var(--cream);
}
.sponsors-sec .sec-head{margin-bottom:clamp(16px,1.9vw,22px);max-width:92ch}
/* the board is the point of this section, so it does not need the full
   section rhythm above and below it */
.sponsors-sec{padding-top:clamp(38px,4.2vw,56px);padding-bottom:clamp(36px,4vw,52px)}
.sponsors-sec .sec-head h2{margin-bottom:10px}
.sponsors-sec .sec-head .lede{font-size:clamp(14.5px,1.15vw,16px)}
.sponsor-logo{
  margin:0;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(168px,19vw,228px);
  height:clamp(104px,12.5vw,132px);
  padding:14px 18px;
  background:#fff;
  border:1px solid rgba(32,18,59,.1);
  border-radius:16px;
  box-shadow:0 8px 22px rgba(32,18,59,.06);
  overflow:hidden;
}
.sponsor-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
/* Soft inset so black-plate logos don’t read as harsh black blocks */
.sponsor-logo.is-bleed{
  padding:10px;
  background:#fff;
}
.sponsor-logo.is-bleed img{
  border-radius:10px;
  background:#111;
}


/* Animate open/close where the browser can. Elsewhere it simply snaps open,
   which is a perfectly good accordion. */
@supports selector(::details-content){
  .faq::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .42s var(--e-out),content-visibility .42s allow-discrete;
  }
  .faq[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){
  .faq::details-content,.faq-i,.faq-i::before,.faq-i::after{transition:none}
}

/* ------------------------------------------------------------
   6 — Final CTA : full-bleed photo
   ------------------------------------------------------------ */
.final{
  position:relative;
  padding:clamp(84px,12vw,160px) 0 clamp(96px,13vw,180px);
  text-align:center;color:#fff;
  background:var(--ink-900);
  /* The CTA's hard shadow needs to paint below the button, so this cannot be
     overflow:hidden. But visible let the decorative glow at right:-8% hang
     past the viewport and scroll the whole page sideways. Clipping only the
     horizontal axis fixes that and leaves vertical painting alone. */
  overflow-x:clip;overflow-y:visible;isolation:isolate;
}
.final-media{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:0}
.final-media img{
  position:absolute;top:-10%;left:0;width:100%;height:120%;
  object-fit:cover;object-position:50% 40%;
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}
.final-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(42,6,20,.90),rgba(110,0,47,.82) 50%,rgba(42,6,20,.94));
}
.final .glow-1{width:44vw;height:44vw;top:-16%;left:-10%;opacity:.34}
.final .glow-2{width:36vw;height:36vw;bottom:-18%;right:-8%;opacity:.30}
.final .wrap{position:relative;z-index:2}
/* Sits on photography, so it keeps a drop shadow the way the hero mark does.
   alt is empty because the headline underneath already names the event. */
.final-logo{
  display:block;margin:0 auto clamp(22px,2.8vw,34px);
  width:clamp(240px,42vw,420px);height:auto;
  filter:drop-shadow(0 10px 30px rgba(27,3,9,.6));
}
.final-org{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:0 auto clamp(22px,3vw,34px);
}
.final-org-k{
  font-family:'Outfit',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-70);
}
.org-logo{
  display:block;width:clamp(88px,12vw,112px);height:auto;
  background:rgba(255,255,255,.96);border-radius:14px;padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.final .kicker{justify-content:center}
.final h2{max-width:20ch;margin:0 auto 18px}
.final .l2{
  font-size:clamp(15.5px,1.6vw,19px);color:var(--cream-70);
  max-width:60ch;margin:0 auto;line-height:1.7;
}
.final .dt{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  margin-top:26px;padding:13px 26px;
  border:1.5px solid var(--cream-45);border-radius:var(--r-pill);
  font-family:'Outfit',sans-serif;font-size:clamp(13px,1.5vw,16px);
  font-weight:700;letter-spacing:.03em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  background:var(--cream-10);
}
.final-cta{
  margin:34px 0 0;
  /* room for the 6px hard offset under .btn-yellow */
  padding-bottom:14px;
  position:relative;
  z-index:3;
  overflow:visible;
}
.final-cta .btn{
  max-width:100%;
  white-space:normal;
  line-height:1.25;
}

/* ------------------------------------------------------------
   7 — Footer
   ------------------------------------------------------------ */
footer{
  background:var(--ink-900);color:var(--cream-70);
  padding:clamp(32px,4vw,48px) 0 20px;
  font-size:13.5px;line-height:1.55;
}
.fgrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
  align-items:start;
}
.fh{
  font-family:'Outfit',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);
  margin-bottom:10px;
}
.fh-sub{margin-top:16px}

.fbrand{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.flogo{
  flex:none;width:clamp(170px,19vw,220px);height:auto;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
}
.org-logo-foot{
  display:block;width:clamp(52px,8vw,64px);height:auto;
  background:#fff;border-radius:8px;padding:4px;margin-bottom:8px;
}
.forg{margin-top:0;font-size:12px;color:var(--cream-45);line-height:1.5;max-width:22ch}

.fcol{min-width:0}
.flist{list-style:none;display:grid;gap:5px}
.flist a,
a.fext{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--cream-70);
  transition:color var(--t-fast);
}
.flist a:hover,
a.fext:hover{color:var(--yellow)}
.flist a:focus-visible,
a.fext:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}

.fext svg{
  width:11px;height:11px;flex:none;
  fill:currentColor;stroke:none;
  opacity:.65;
  transition:transform var(--t-fast),opacity var(--t-fast);
}
.fext:hover svg{transform:translate(2px,-2px);opacity:1}

.fvisit{font-size:13px;line-height:1.55;color:var(--cream-70);margin-bottom:8px}
.fvisit b{
  display:block;
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;
  color:#fff;letter-spacing:-.02em;margin-bottom:1px;
}

.fsocial{list-style:none;display:grid;gap:8px}
.fsocial a{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--cream-70);
}
.fs-ico{
  flex:none;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--cream-10);
  border:1px solid var(--cream-18);
  color:var(--cream);
  transition:background var(--t-fast),border-color var(--t-fast),
             color var(--t-fast),transform var(--t-fast);
}
.fs-ico svg{width:15px;height:15px;fill:currentColor}
.fs-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;font-size:12px}
.fs-txt b{
  font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:800;
  color:var(--cream);transition:color var(--t-fast);
}
.fsocial a:hover .fs-ico{
  background:var(--magenta);border-color:var(--magenta);
  color:#fff;transform:translateY(-2px);
}
.fsocial a:hover .fs-txt b{color:var(--yellow)}
.fsocial a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:var(--r-pill)}

.fline{
  margin-top:clamp(20px,2.6vw,28px);padding-top:16px;
  border-top:1px solid var(--cream-18);
  display:flex;align-items:center;justify-content:space-between;
  gap:10px 20px;flex-wrap:wrap;
  font-size:12px;color:var(--cream-45);
}
.fcredit{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--cream);text-decoration:none;
  transition:color var(--t-fast),opacity var(--t-fast);
}
.fcredit:hover{color:var(--cream)}
.fcredit:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:8px}
.fcredit-txt{
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.02em;white-space:nowrap;
}
.fcredit-logo{
  display:block;height:28px;width:auto;
  opacity:1;transition:opacity var(--t-fast),transform var(--t-fast);
}
.fcredit:hover .fcredit-logo{opacity:1;transform:translateY(-1px)}

/* ============================================================
   Breakpoints
   ============================================================ */
@media (max-width:1040px){
  /* Once these stack, the media column must centre — left-aligning it in a
     full-width row leaves a dead gutter on the right. */
  .ws-grid,.venue-grid{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,44px)}
  .sec.ws-sec{
    min-height:0;
    padding:clamp(40px,7vw,72px) 0;
    display:block;
  }
  .ws-grid .ws-media{order:-1;max-width:380px;margin-inline:auto;width:100%}
  /* stays portrait when stacked; a landscape crop would cut the figure off */
  .ws-media .img-arch{
    aspect-ratio:3/4;
    max-height:min(46vh,420px);
    width:100%;
  }
  .venue-media{max-width:620px;margin-inline:auto;width:100%}

  /* At two columns a span-2 card can't fit beside a single one, which would
     punch a hole in the row. Drop the spans and let the last card close out. */
  .exp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-2{grid-column:span 1}
  .exp-grid > :last-child{grid-column:1 / -1}
  .cell-img{min-height:320px}

  .faq-in{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,36px)}
  .faq-head{max-width:none}

  /* Once the band stacks there is nothing for a side column to sit beside, so
     the figures go back to a row under the copy. */
  .legacy-in{grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,46px)}
  .stats{
    flex-direction:row;
    max-width:52ch;
    padding-left:0;border-left:none;
    padding-top:clamp(26px,3.4vw,38px);
    border-top:1px solid var(--cream-18);
  }
  .stat{flex:1 1 0;min-width:0;padding:0 0 0 clamp(22px,4vw,44px)}
  .stat:first-child{padding-left:0}
  .stat + .stat{border-top:none;border-left:1px solid var(--cream-18)}

  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fgrid > :first-child,
  .fgrid > :nth-child(2){grid-column:span 1}
}

@media (max-width:760px){
  .pass-grid,
  .pass-grid.pass-grid-3,
  .pass-grid.pass-grid-4,
  .pass-grid.pass-grid-5{grid-template-columns:minmax(0,1fr)}
  .pname{min-height:0}
  .price{min-height:0}
  .bulk{flex-direction:column;align-items:flex-start}
  .bulk .btn,.regband-top .btn{width:100%}
  .regband-top{flex-direction:column;align-items:stretch}
  .book-how{grid-template-columns:minmax(0,1fr);gap:16px}
  .book-how > li:not(:last-child)::after{display:none}
  .book-how > li:not(:last-child){
    padding-bottom:16px;
    border-bottom:1px solid var(--ink-12);
  }
  .map-bar{flex-direction:column;align-items:stretch;gap:14px}
  .map-bar .btn{width:100%}
  .map-frame{aspect-ratio:1}
  .ws-float{right:12px;bottom:12px}
}

@media (max-width:620px){
  .exp-grid{grid-template-columns:minmax(0,1fr)}
  .sp-2{grid-column:span 1}
  .cell{min-height:0}
  /* photo cells need headroom: the tagline pill is pinned top-left and the
     caption block grows from the bottom — too short and they collide */
  .tall,.cell-img{min-height:360px}
  .cell-img .tagline{top:16px;left:16px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid > :first-child{grid-column:auto}

  .vrow{flex-direction:column;gap:3px;align-items:flex-start}
  .vrow .k{width:auto}

  .fbrand{gap:8px}
  .flogo{width:min(210px,78vw)}
  .forg{max-width:none}
}

/* ------------------------------------------------------------
   Colour-washed photo cards
   Same frame as .cell-img, but the scrim takes the card's own
   colour instead of ink, so the grid keeps its palette rhythm
   while every card carries a picture. The wash is densest at the
   foot, which is exactly where the type sits, so the contrast
   tuned for the flat colours still holds.
   ------------------------------------------------------------ */
.cell-tint{min-height:300px}
.cell-tint::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(var(--scrim),.50);
}
.cell-tint .cell-body{
  background:linear-gradient(to top,
    rgba(var(--scrim),.97),
    rgba(var(--scrim),.80) 52%,
    rgba(var(--scrim),0));
}
.cell-tint.c-mag  {--scrim:227,11,84}
.cell-tint.c-teal {--scrim:196,1,47}
.cell-tint.c-yel  {--scrim:252,230,10}
.cell-tint.c-org  {--scrim:238,90,24}
.cell-tint.c-pur  {--scrim:156,0,67}
.cell-tint.c-cream{--scrim:255,255,255}

/* .cell-img forces white type; the light washes need ink back */
.cell-tint.c-yel,.cell-tint.c-org,.cell-tint.c-cream{color:var(--ink)}
/* .cell-img sets body copy to 70% cream, which is tuned for its near-black
   ink scrim. Over these mid-tone washes that drops under 4.5:1, so each
   wash takes the copy colour that clears it. */
.cell-tint.c-mag p,
.cell-tint.c-teal p,
.cell-tint.c-pur p{color:var(--cream);opacity:1}
.cell-tint.c-org p{color:var(--ink);opacity:.92}
.cell-tint.c-yel p,
.cell-tint.c-cream p{color:var(--body)}
.cell-tint.c-yel .num,
.cell-tint.c-org .num,
.cell-tint.c-cream .num{color:var(--ink);opacity:.5}
.cell-tint.c-cream{box-shadow:var(--sh-img)}

/* the closing statement card leads with the line, not a number */
.cell-say .cell-body h3{font-size:clamp(22px,2.8vw,32px)}
.cell-say .cell-body p{margin-top:10px;font-weight:700;letter-spacing:.06em}

/* ------------------------------------------------------------
   Narrow phones: the 03 October card and the caption chip sit on
   the same line of the workshop photo and collide at 390px and
   below. The chip only repeats the heading directly beneath the
   picture, so it is the one that goes.
   ------------------------------------------------------------ */
@media (max-width:430px){
  .ws-media .img-cap{display:none}
}

/* ------------------------------------------------------------
   Sponsor tiers
   The supplied artwork arrived as cards with the tier printed on
   each one, which would repeat the same caption ten times down a
   platinum row. The captions are cropped off the images and set
   once per row instead.

   Twelve stacked rows ran to three screens, so the tiers are laid
   out as grid items and pack side by side: small tiers share a
   line, the two biggest claim extra columns.
   ------------------------------------------------------------ */
.sp-tiers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(210px,17vw,250px),1fr));
  gap:clamp(18px,2vw,26px) clamp(20px,2.2vw,32px);
  align-items:start;
  grid-auto-flow:row dense;
}
.sp-tier{margin:0;min-width:0}
/* each tier claims the columns its logo count needs to stay on one line */
.sp-w1{grid-column:span 1}
.sp-w2{grid-column:span 2}
.sp-w4{grid-column:span 4}
.sp-full{grid-column:1 / -1}

/* Left aligned inside a column, with the rule running out to the edge */
.sp-tier-k{
  display:flex;align-items:center;gap:10px;
  font-family:'Outfit',sans-serif;font-size:10px;font-weight:900;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--magenta-ink);
  margin:0 0 10px;
  white-space:nowrap;
}
.sp-tier-k::after{content:"";height:1px;flex:1 1 auto;background:var(--ink-12)}

.sp-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}

/* Partners stay on one row (poster order) */
.sp-partners{grid-column:1 / -1}
.sp-partners .sp-row{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.sp-partners .sponsor-logo{
  width:clamp(96px,7.2vw,118px);
  height:clamp(60px,4.8vw,72px);
  flex:0 0 auto;
}

/* Plates are small so the whole board reads at a glance; the title
   sponsors keep a larger one. */
.sponsor-logo{
  margin:0;flex:none;
  display:flex;align-items:center;justify-content:center;
  width:clamp(104px,8.4vw,124px);
  height:clamp(64px,5.2vw,76px);
  padding:8px 10px;
  background:#fff;
  border:1px solid rgba(32,18,59,.1);
  border-radius:12px;
  box-shadow:0 4px 14px rgba(32,18,59,.06);
}
.sponsor-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.sp-lg .sponsor-logo{width:clamp(150px,12vw,182px);height:clamp(92px,7.4vw,110px);border-radius:14px}
/* Purview wordmark — keep plate size same as other logos */
.sponsor-logo.is-purview{padding:8px 10px}
.sponsor-logo.is-purview img{
  object-position:center 42%;
  transform:scale(1.06);
  transform-origin:center center;
}

@media (max-width:1040px){
  .sp-w4{grid-column:span 3}
}
@media (max-width:760px){
  .sp-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-w1{grid-column:span 1}
  .sp-w2,.sp-w4,.sp-full{grid-column:1 / -1}
}