/* ============================================================
   JDC DANCE CLUB — premium dark / neon-pink theme
   ============================================================ */

:root{
  --ink:#0b0410;
  --ink-2:#120610;
  --ink-3:#180a18;
  --panel:#1a0a18;
  --pink:#ff2d87;
  --pink-deep:#e40a68;
  --pink-soft:#ff7ab0;
  --white:#ffffff;
  --muted:#c6bcc9;
  --muted-2:#9b8fa3;
  --line:#ffffff1f;
  --grad:linear-gradient(100deg,#e40a68 0%,#ff2d87 55%,#ff5c9d 100%);
  --nav-h:92px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:"DM Sans",system-ui,sans-serif;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
::selection{background:var(--pink);color:#fff}

.noise{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* the brush-script face, used for the pink emphasis words */
.script{
  font-family:Yellowtail,"Brush Script MT",cursive;
  font-style:normal;font-weight:400;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------------- NAVBAR ---------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 clamp(18px,4vw,58px);
  /* frosted bar in its own strip - the banner image starts below it */
  background:#12061099;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid #ffffff14;
  transition:background .45s ease,height .45s ease,box-shadow .45s ease;
}
.site-header.scrolled{
  height:74px;background:#120610e6;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 40px #00000066;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;height:100%;flex:0 0 auto}
.brand img{
  width:auto;height:clamp(46px,5.2vw,62px);object-fit:contain;display:block;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),filter .4s ease;
}
.brand:hover img{transform:scale(1.05);filter:drop-shadow(0 0 16px #ff2d8755)}

.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.nav-links a{
  position:relative;color:#eadfe8;text-decoration:none;
  font-size:15px;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  padding:6px 0;transition:color .3s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--pink);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--pink)}
.nav-links a.nav-cta{
  background:var(--grad);color:#fff;font-weight:700;
  padding:14px 28px;border-radius:999px;font-size:15px;
  box-shadow:0 10px 30px #ff2d8740;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
.nav-links a.nav-cta::after{display:none}
.nav-links a.nav-cta:hover{transform:translateY(-3px);box-shadow:0 16px 40px #ff2d8766}
.nav-cta span{margin-left:10px;display:inline-block;transition:transform .35s ease}
.nav-links a.nav-cta:hover span{transform:translateX(5px)}

.menu-toggle{display:none}

/* ---------------- HERO ---------------- */
/* Locked to one viewport. Type and icon sizes are unchanged - only the
   whitespace between blocks was tightened so the category strip fits. */
.hero{
  position:relative;height:100svh;min-height:580px;max-height:1180px;
  display:flex;flex-direction:column;overflow:hidden;background:var(--ink-2);
  padding-top:var(--nav-h);
}
/* The banner starts below the navbar, never behind it, and sits still -
   no zoom, no parallax drift that could open a gap under the bar. */
/* The box keeps the banner's own 1672:941 ratio and is anchored right, so the
   image is never squashed. It is then scaled up 18% and biased upward: the
   extra only trims dark wall at the sides and empty floor at the bottom, so
   the dancer, the neon ring and the smoke all stay whole and read bigger.
   The left edge is feathered so it melts into the headline's dark panel. */
.hero-bg{
  position:absolute;top:var(--nav-h);bottom:0;right:0;left:auto;
  aspect-ratio:1672/941;
  background:url("assets/hero-dancer.png") 100% 30%/118% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  transition:top .45s ease;
}
/* Her hair, lifted off the banner and set moving.

   The image inside .hero-bg is drawn at 118% and anchored 100%/30%, so a
   point at fraction f of the PHOTO lands at 1.18*f - 0.18 across the box
   and 1.18*f - 0.054 down it. Her hair sits at roughly (0.646, 0.255) of
   the photo, which is where the ellipse below comes from - it is not a
   guess at the box, it is that mapping applied.

   The layer repeats .hero-bg exactly, so the two are pixel-aligned; the
   mask then keeps only the hair, with a long fade so the moving copy
   dissolves into the still photo instead of ending on an edge. */
.hero-hair{
  position:absolute;top:var(--nav-h);bottom:0;right:0;left:auto;
  aspect-ratio:1672/941;pointer-events:none;
  background:url("assets/hero-dancer.png") 100% 30%/118% no-repeat;
  /* two lobes, because her hair is two masses either side of the cap.
     One ellipse big enough to hold both would also hold her face and the
     straight shoulder seam of the jacket, and those must not ripple. */
  -webkit-mask-image:
    radial-gradient(ellipse 5.9% 9.4% at 55.4% 28.5%,#000 38%,#00000080 66%,transparent 100%),
    radial-gradient(ellipse 4.8% 7.4% at 66% 20%,#000 36%,#00000080 64%,transparent 100%),
    radial-gradient(ellipse 2.75% 5.8% at 59.2% 25.8%,#000 58%,#000000b3 76%,transparent 100%);
  mask-image:
    radial-gradient(ellipse 5.9% 9.4% at 55.4% 28.5%,#000 38%,#00000080 66%,transparent 100%),
    radial-gradient(ellipse 4.8% 7.4% at 66% 20%,#000 36%,#00000080 64%,transparent 100%),
    radial-gradient(ellipse 2.75% 5.8% at 59.2% 25.8%,#000 58%,#000000b3 76%,transparent 100%);
  /* Unite both hair masses, then punch the face out of that union. */
  -webkit-mask-composite:source-over,xor;
  mask-composite:add,exclude;
  filter:url(#hairWind);
  transition:top .45s ease;
}
.fx-defs{position:absolute;width:0;height:0;overflow:hidden}

/* The two lights that run round the ring are painted straight onto a
   canvas that sits exactly over the banner, then clipped by the ring mask
   so they can never cross in front of the dancer. */

/* Water bubbles drifting up behind the dancer.
   Painted on a canvas, so nothing here is lifted from the photograph.
   Bubbles are released at the bottom-right corner, rise and drift left
   across the stage, and carry a pink halo picked up from the neon.

   The one thing they must not do is cross in front of her. She is flat
   pixels in the banner, so there is no real 'behind' to put them in -
   instead the engine fades a bubble out as it enters the ellipse that
   covers her figure, which reads as her occluding it. That keep-out is
   the same one the floor fog used, so it is already matched to the photo.

   Screen blending means only the light in a bubble adds; the dark of the
   stage is never lifted. The mask keeps the left edge feathered into the
   headline's panel, as before. */
.hero-bubbles{
  position:absolute;top:var(--nav-h);bottom:0;right:0;left:auto;
  aspect-ratio:1672/941;z-index:1;pointer-events:none;
  mix-blend-mode:screen;transition:top .45s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%);
}
.bubble-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* the wrapper carries the geometry - a <canvas> is a replaced element, so
   top+bottom alone would leave it at its own intrinsic 300x150 */
.ring-fx{
  position:absolute;top:var(--nav-h);bottom:0;right:0;left:auto;
  aspect-ratio:1672/941;z-index:1;pointer-events:none;
  transition:top .45s ease;
}
.ring-canvas,.ring-dust{position:absolute;inset:0;width:100%;height:100%;display:block}
.ring-dust{mix-blend-mode:screen}



/* the bar shrinks on scroll, so the banner's top edge follows it */
.site-header.scrolled ~ main .hero-bg,
.site-header.scrolled ~ main .hero-hair,
.site-header.scrolled ~ main .hero-bubbles,
.site-header.scrolled ~ main .ring-fx,
.site-header.scrolled ~ main .hero-veil{top:74px}
.hero-veil{
  position:absolute;top:var(--nav-h);left:0;right:0;bottom:0;transition:top .45s ease;
  background:
    linear-gradient(90deg,#0b0410f0 0%,#0b0410cc 26%,#0b041059 50%,#0b04100d 70%,transparent 100%),
    linear-gradient(0deg,#0b0410e6 0%,#0b041033 24%,transparent 52%);
}

.hero-inner{
  position:relative;z-index:3;width:100%;
  padding:0 clamp(20px,5vw,72px);
  flex:1 1 auto;min-height:0;display:flex;align-items:center;
}
.hero-content{max-width:640px}

.hero-eyebrow{
  margin:0 0 10px;font-size:clamp(13px,1.1vw,16px);font-weight:600;
  letter-spacing:.34em;color:#ece3ea;text-transform:uppercase;
}
.hero-title{margin:0;line-height:.92}
.hero-title .line{
  display:block;font-family:Outfit,sans-serif;font-weight:800;
  font-size:clamp(40px,min(6vw,13vh),84px);letter-spacing:-.028em;color:#fff;
  text-shadow:0 6px 40px #00000070;
}
.script-wrap{display:block;position:relative;margin-top:-.04em;padding-bottom:.18em}
.hero-title .script{
  display:inline-block;font-size:clamp(54px,min(8vw,17vh),114px);
  line-height:1;padding:0 .08em .12em .02em;
  filter:drop-shadow(0 10px 34px #ff2d8744);
}
.brush{
  position:absolute;left:.04em;bottom:0;
  width:clamp(210px,29vw,430px);height:clamp(15px,2.2vw,32px);
  filter:drop-shadow(0 6px 20px #ff2d8740);
}
.hero-copy{
  margin:18px 0 0;max-width:520px;
  font-size:clamp(15px,1.25vw,19px);line-height:1.7;color:#ded5dd;
}
.hero-actions{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);margin-top:24px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  border:0;cursor:pointer;border-radius:999px;
  font:700 16px/1 "DM Sans",sans-serif;padding:19px 34px;
}
.btn-primary{
  background:var(--grad);color:#fff;box-shadow:0 14px 38px #ff2d8745;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 22px 52px #ff2d8766}
.btn-primary span{display:inline-block;transition:transform .35s ease}
.btn-primary:hover span{transform:translateX(6px)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:16px;text-decoration:none;
  color:#fff;font:700 16px/1 "DM Sans",sans-serif;
}
.play-ring{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--pink);color:#fff;background:#ff2d8718;
  transition:background .35s ease,transform .35s ease,box-shadow .35s ease;
}
.play-ring svg{width:20px;height:20px;margin-left:2px}
.btn-ghost:hover .play-ring{background:var(--pink);transform:scale(1.08);box-shadow:0 0 28px #ff2d8777}

/* ---- category strip ---- */
.category-strip{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(8px,1.8vw,30px);
  padding:0 clamp(16px,5vw,72px) clamp(26px,3vw,42px);
  flex-wrap:wrap;flex:0 0 auto;
}
.cat{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:#fff;padding:2px;min-width:64px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.cat-icon{
  width:clamp(32px,2.8vw,38px);height:clamp(32px,2.8vw,38px);border-radius:11px;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#ff2d8730,#8c054022);
  border:1px solid #ff2d8755;color:var(--pink-soft);
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease,color .4s ease;
}
.cat-icon svg{width:58%;height:58%}
.cat-label{font-size:clamp(9px,.76vw,11px);font-weight:700;letter-spacing:.015em;white-space:nowrap}
.cat:hover{transform:translateY(-7px)}
.cat:hover .cat-icon{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 14px 34px #ff2d8755;
}
.cat-divider{width:1px;height:28px;background:linear-gradient(180deg,transparent,#ffffff35,transparent)}

.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(26px,2.8vw,38px);z-index:2}

/* ---------------- SHARED SECTION BITS ---------------- */
.section-pad{padding:clamp(80px,9vw,130px) clamp(20px,7vw,110px);position:relative}
.section-kicker{
  font-size:11px;letter-spacing:.26em;color:var(--pink);font-weight:700;text-transform:uppercase;
}
h2{
  font-family:Outfit,sans-serif;font-weight:800;
  font-size:clamp(38px,5.6vw,80px);line-height:.98;letter-spacing:-.035em;margin:24px 0;
}
h2 em{font-style:normal;color:var(--pink)}
h2 em.script{font-size:1.22em;line-height:.9;display:inline-block}

.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:52px}
.section-top h2{margin:20px 0 0}
.section-top>p{color:var(--muted-2);font-size:14px;line-height:1.85;margin:0;flex:0 0 auto}
.small-note{font-size:11px;color:var(--muted-2);margin-top:20px}

/* ---------------- ABOUT ----------------
   The only light section on the site, so it needs its own ink and its own
   pink: the neon #ff2d87 that reads as "lit" on black turns acidic on a
   pale wash, and the white body copy would vanish. Both are scoped to this
   block rather than changed globally. */
.intro{
  --ink-on-light:#2f0820;
  --body-on-light:#5b3a4d;
  --pink-on-light:#d6147c;
  --pink-deep-on-light:#9e0a56;

  position:relative;overflow:hidden;
  /* The backdrop's left half holds the dancer and the collage; its right
     half is empty on purpose, and that is where the column lands.

     'contain', not 'cover': this band is far wider than the artwork is
     tall, so cover scales the image up until the dancer is cropped top
     and bottom and fills the whole strip. Contain fits her whole figure
     instead, and the wash underneath carries the few hundred pixels of
     pink left over on the right - the artwork's own edges are that same
     pink, so the join does not read as a seam. */
  background:
    /* Painted front to back. The first layer is a wash that fades in
       across the middle of the band: contained artwork stops short of the
       right edge, and without this its straight vertical edge shows as a
       seam right where the copy begins. By the time that edge is reached
       the wash is opaque, so the artwork dissolves instead of ending. */
    linear-gradient(90deg,
      #fde3f700 0%, #fde3f700 44%, #fde3f7b3 62%,
      #fde3f7 74%, #fde3f7 100%),
    /* 'contain', not 'cover': this band is far wider than the artwork is
       tall, so cover scales the image up until the dancer is cropped top
       and bottom and fills the whole strip. */
    url("assets/about-bg.jpg") left center/contain no-repeat,
    linear-gradient(118deg,#fbd9f2 0%,#fde3f7 46%,#fdeafd 74%,#fbdcf4 100%);
  /* The artwork is sized with 'contain', so it scales with the band's
     height - trimming this padding is what makes the dancer read smaller
     and the whole section more compact, without ever exposing one of the
     image's decorated edges. */
  padding:clamp(40px,4vw,64px) clamp(24px,5vw,72px);
  display:flex;justify-content:flex-end;
}
/* the same artwork, shown only once the two-column idea stops working */
.intro-art{display:none}

.intro-panel{
  width:min(560px,52%);
  /* nudged off the hard right edge so the column is optically centred in
     the empty half rather than jammed against the margin */
  margin-right:clamp(0px,2vw,34px);
}
.intro-heading{display:contents}

.rule-kicker-dark{color:var(--pink-deep-on-light)}
.rule-kicker-dark i:first-child{background:linear-gradient(90deg,transparent,var(--pink-deep-on-light))}
.rule-kicker-dark i:last-child{background:linear-gradient(90deg,var(--pink-deep-on-light),transparent)}

.intro-panel h2{
  font-family:Outfit,sans-serif;font-weight:800;
  font-size:clamp(27px,3.4vw,50px);line-height:1.12;letter-spacing:-.03em;
  margin:clamp(14px,1.5vw,22px) 0 0;color:var(--ink-on-light);
}
/* the brush underline from the comp, drawn as a gradient on the text's own
   background box so it tracks the words at any size */
.intro-panel h2 em{
  font-style:normal;color:var(--pink-on-light);
  background:linear-gradient(90deg,#f0569f,#d6147c) no-repeat left 100%/100% 3px;
  padding-bottom:.12em;
}
.intro-copy{
  margin:clamp(12px,1.2vw,18px) 0 0;max-width:46ch;
  font-size:clamp(13.5px,1.08vw,16.5px);line-height:1.78;color:var(--body-on-light);
}

/* ---- the four things we promise ---- */
.intro-perks{
  list-style:none;margin:clamp(20px,2.2vw,30px) 0 0;padding:0;
  display:grid;
  /* the last label is the longest by a wide margin - giving its column the
     extra room keeps all four captions on two lines and the icon row level */
  grid-template-columns:1fr 1fr 1fr 1.3fr;gap:clamp(8px,1vw,16px);
}
.intro-perks li{
  position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:clamp(7px,.8vw,11px);padding:0 clamp(4px,.7vw,10px);
}
/* hairline rules between the four, never after the last one */
.intro-perks li+li::before{
  content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;
  background:linear-gradient(180deg,transparent,#d79cbd,transparent);
}
.perk-icon{
  width:clamp(36px,3.1vw,46px);height:clamp(36px,3.1vw,46px);
  border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,#fbcbe3,#f4a8ce);
  color:var(--pink-deep-on-light);box-shadow:0 6px 16px #9e0a5626;
}
.perk-icon svg{width:56%;height:56%}
.intro-perks strong{
  font:700 clamp(11px,.92vw,13.5px)/1.32 Outfit,sans-serif;
  color:var(--ink-on-light);letter-spacing:-.005em;
}

.intro-cta{
  margin-top:clamp(20px,2.2vw,32px);
  /* the site button is tuned for a dark backdrop - on pink it needs the
     deeper end of the ramp and a shadow that actually shows */
  background:linear-gradient(100deg,#9e0a56 0%,#d6147c 55%,#ec2f91 100%);
  box-shadow:0 14px 34px #9e0a5640;
}
.intro-cta:hover{box-shadow:0 20px 44px #9e0a5659}

/* ---------------- DANCE STYLES ----------------
   A lit stage rather than a page section. The backdrop photo supplies the
   neon arc, the smoke and the wet-floor reflection; everything above it is
   centred on that arc, so the composition reads as one picture instead of
   a grid dropped onto a background.

   The three cards are angled toward the viewer on a shared perspective,
   with the middle one stepped forward and lit. That tilt is decoration, so
   it is dropped on touch widths where it would only cost legibility. */
.styles{
  position:relative;overflow:hidden;isolation:isolate;
  /* one screen, and everything inside is measured in svh rather than vw so
     the masthead, the deck and the controls shrink together as the window
     gets shorter instead of spilling past the fold */
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4.4svh,56px) clamp(20px,6vw,80px);
  background:#0a0310;
}
.styles-bg{
  position:absolute;inset:0;z-index:0;
  background:url("assets/styles-bg.png") center 38%/cover no-repeat;
}
/* the backdrop is bright through the middle, which is exactly where the
   headline sits - this drops it back so the type keeps its contrast */
.styles-veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(90% 62% at 50% 46%,#0a031066 0%,#0a0310c4 58%,#0a0310f2 100%),
    linear-gradient(180deg,#0a0310 0%,#0a031000 16%,#0a031000 78%,#0a0310 100%);
}
.styles-inner{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto}

/* ---- centred masthead ---- */
.styles-head{text-align:center;margin-bottom:clamp(20px,3.4svh,46px)}
.rule-kicker{
  display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  font-size:clamp(10px,.92vw,13px);font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--pink-soft);
}
/* hairlines that fade out, so the label floats rather than sits in a box */
.rule-kicker i{display:block;width:clamp(34px,6vw,96px);height:1px}
.rule-kicker i:first-child{background:linear-gradient(90deg,transparent,#ff2d87)}
.rule-kicker i:last-child{background:linear-gradient(90deg,#ff2d87,transparent)}

.styles-head h2{
  font-family:Outfit,sans-serif;font-weight:800;
  font-size:clamp(26px,4.2vw,56px);line-height:1.05;letter-spacing:-.03em;
  margin:clamp(10px,1.7svh,20px) 0 0;color:#fff;
  text-shadow:0 8px 44px #00000080;
}
/* the italic leans into whatever follows it, so the word after needs a
   little air put back or it reads as one run-on word */
.styles-head h2 em{font-style:italic;font-weight:600;color:#f3e8f1;padding-right:.14em}
.styles-head h2 b{
  font-weight:800;
  background:linear-gradient(98deg,#ff2d87 0%,#ff5c9d 50%,#ff8ab8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px #ff2d8755);
}
.styles-head>p{
  margin:clamp(8px,1.2svh,16px) auto 0;max-width:620px;
  font-size:clamp(13px,1.15vw,17px);line-height:1.7;color:#d9cfd8;
}

/* ---- the carousel ----
   Two layouts live here. The base one is a plain scroll-snap row, which is
   what you get with no JavaScript and what a keyboard or screen reader
   falls back to. script.js adds .is-coverflow, which lifts the cards out of
   the flow and arranges them on a shared vanishing point instead.

   Every offset below is a percentage of the CARD, not of the stage, so the
   fan keeps its shape at any width and only the card width needs tuning. */
.style-carousel{position:relative}

.style-stage{
  display:flex;gap:clamp(12px,1.6vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;-webkit-overflow-scrolling:touch;
}
.style-stage>.style-card{flex:0 0 min(82%,380px);scroll-snap-align:center}

.style-stage.is-coverflow{
  --cf-w:clamp(250px,26vw,352px);
  --cf-x1:70%;  --cf-s1:.84; --cf-r1:17deg;
  --cf-x2:128%; --cf-s2:.68; --cf-r2:23deg;
  display:block;position:relative;overflow:visible;
  padding-bottom:0;scroll-snap-type:none;
  height:clamp(230px,44svh,430px);
  perspective:1400px;perspective-origin:50% 46%;
  touch-action:pan-y;
}
.style-stage.is-coverflow>.style-card{
  position:absolute;top:0;left:50%;
  flex:none;width:var(--cf-w);margin-left:calc(var(--cf-w) / -2);
  height:100%;
  /* the glide is slow so the fan reads as movement, but the pink border
     and glow hand over quickly - otherwise two cards look lit at once
     while the outgoing one is still fading */
  /* the glide has to finish well inside the 1.3s auto-advance, or each
     card is still sliding when the next one is called forward */
  transition:transform .52s cubic-bezier(.22,.7,.2,1),
             opacity .4s ease,filter .4s ease,
             box-shadow .26s ease,border-color .26s ease;
}

.style-card{
  position:relative;overflow:hidden;isolation:isolate;
  height:clamp(330px,36vw,460px);border-radius:22px;
  background:#15081a;border:1px solid #ffffff1a;
  box-shadow:0 22px 54px #00000099;
  /* no preserve-3d here on purpose: the cards hold no 3D children, and
     giving each its own 3D context makes the browser depth-sort the
     siblings instead of honouring z-index, which lets a side card paint
     over the front one. Flat children under the stage's perspective keep
     the same look with a predictable paint order. */
}

/* --- the five seats on the stage --- */
.is-coverflow>.style-card[data-pos="0"]{
  transform:translateX(0) scale(1) rotateY(0deg);
  z-index:5;opacity:1;filter:none;border-color:#ff2d87;
  box-shadow:0 0 0 1px #ff2d8766,0 0 34px #ff2d8759,
             0 0 92px #ff2d8733,0 34px 78px #000000a6;
}
.is-coverflow>.style-card[data-pos="-1"]{
  transform:translateX(calc(var(--cf-x1) * -1)) scale(var(--cf-s1)) rotateY(var(--cf-r1));
  z-index:4;opacity:.74;filter:brightness(.72) saturate(.9);
}
.is-coverflow>.style-card[data-pos="1"]{
  transform:translateX(var(--cf-x1)) scale(var(--cf-s1)) rotateY(calc(var(--cf-r1) * -1));
  z-index:4;opacity:.74;filter:brightness(.72) saturate(.9);
}
.is-coverflow>.style-card[data-pos="-2"]{
  transform:translateX(calc(var(--cf-x2) * -1)) scale(var(--cf-s2)) rotateY(var(--cf-r2));
  z-index:3;opacity:.32;filter:brightness(.42) saturate(.75);
}
.is-coverflow>.style-card[data-pos="2"]{
  transform:translateX(var(--cf-x2)) scale(var(--cf-s2)) rotateY(calc(var(--cf-r2) * -1));
  z-index:3;opacity:.32;filter:brightness(.42) saturate(.75);
}
.is-coverflow>.style-card[data-pos="hidden"]{
  transform:scale(.55);z-index:1;opacity:0;pointer-events:none;
}
/* only the card at the front invites a click into the form */
.is-coverflow>.style-card:not([data-pos="0"]){cursor:pointer}

.style-card img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 45%;display:block;z-index:0;
  filter:saturate(1.04) contrast(1.06);
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
/* dark at the foot so the caption always has something to sit on */
.card-fade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(0deg,#09020ef7 0%,#09020ed9 22%,#09020e4d 50%,#09020e12 72%,transparent 88%),
    radial-gradient(120% 70% at 50% 0%,#ff2d8724 0%,transparent 62%);
}

/* the style name set huge and nearly invisible behind the caption - it is
   what stops the five cards reading as stock photo tiles */
.card-ghost{
  position:absolute;top:clamp(12px,1.5vw,24px);left:0;right:0;z-index:1;
  font-family:Outfit,sans-serif;font-weight:800;
  font-size:clamp(34px,4.4vw,62px);line-height:.9;letter-spacing:-.04em;
  text-align:center;color:#ffffff14;pointer-events:none;
  -webkit-text-stroke:1px #ffffff1a;
}
.card-ghost.ghost-script{
  font-family:Yellowtail,"Brush Script MT",cursive;font-weight:400;
  font-size:clamp(38px,5vw,70px);letter-spacing:0;
  color:#ff2d8724;-webkit-text-stroke:0;
}

/* ---- caption ---- */
.card-body{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(10px,1.2vw,18px);
  padding:clamp(18px,1.9vw,28px) clamp(18px,1.9vw,28px) clamp(20px,2.1vw,30px);
}
.card-num{
  display:flex;align-items:center;gap:10px;
  font:800 clamp(13px,1.1vw,16px)/1 Outfit,sans-serif;
  letter-spacing:.06em;color:var(--pink);
}
.card-num i{display:block;width:clamp(16px,1.7vw,26px);height:2px;border-radius:2px;background:var(--pink)}
.card-body h3{
  font:700 clamp(17px,1.72vw,24px)/1.18 Outfit,sans-serif;
  margin:clamp(8px,.9vw,13px) 0 clamp(5px,.6vw,9px);color:#fff;letter-spacing:-.015em;
}
.card-body p{
  margin:0;max-width:30ch;
  font-size:clamp(12px,1.02vw,14.5px);line-height:1.55;color:#cdc2cc;
}
.card-go{
  flex:0 0 auto;width:clamp(38px,3.4vw,48px);height:clamp(38px,3.4vw,48px);
  border-radius:50%;display:grid;place-items:center;text-decoration:none;
  font-size:clamp(15px,1.4vw,19px);color:#fff;
  background:#ff2d871f;border:1px solid #ff2d8777;
  transition:background .4s ease,border-color .4s ease,
             transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.card-go span{display:block;transition:transform .4s ease}
.card-go:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

@media(hover:hover){
  /* Hover is the "stop and show me this one" state. The carousel itself
     pauses (script.js), and whichever card is under the pointer is pulled
     out of the fan: full brightness, lifted, straightened a little and
     lit, whether or not it is the one at the front. z-index 6 puts it
     above the front card so a side card can be inspected without first
     being clicked.

     Each seat needs its own hover transform because CSS transforms
     replace rather than compose - translateY comes before scale so the
     lift is a true 10px at every size. */
  .is-coverflow>.style-card:hover{
    z-index:6;opacity:1;filter:none;border-color:#ff2d87;
    box-shadow:0 0 0 1px #ff2d8799,0 0 46px #ff2d8777,
               0 0 128px #ff2d873d,0 40px 88px #000000b3;
  }
  .is-coverflow>.style-card[data-pos="0"]:hover{
    transform:translateY(-10px) scale(1.03);
  }
  .is-coverflow>.style-card[data-pos="-1"]:hover{
    transform:translateX(calc(var(--cf-x1) * -1)) translateY(-10px)
              scale(calc(var(--cf-s1) + .07)) rotateY(calc(var(--cf-r1) / 2));
  }
  .is-coverflow>.style-card[data-pos="1"]:hover{
    transform:translateX(var(--cf-x1)) translateY(-10px)
              scale(calc(var(--cf-s1) + .07)) rotateY(calc(var(--cf-r1) / -2));
  }
  .is-coverflow>.style-card[data-pos="-2"]:hover{
    transform:translateX(calc(var(--cf-x2) * -1)) translateY(-10px)
              scale(calc(var(--cf-s2) + .07)) rotateY(calc(var(--cf-r2) / 2));
  }
  .is-coverflow>.style-card[data-pos="2"]:hover{
    transform:translateX(var(--cf-x2)) translateY(-10px)
              scale(calc(var(--cf-s2) + .07)) rotateY(calc(var(--cf-r2) / -2));
  }
  .style-card:hover img{transform:scale(1.06)}
  .card-go:hover{background:var(--grad);border-color:transparent;box-shadow:0 10px 30px #ff2d8766}
  .card-go:hover span{transform:translateX(3px)}
}

/* ---- arrows and dots ---- */
.car-ui{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,26px);margin-top:clamp(14px,2.4svh,30px);
}
.car-btn{
  width:clamp(40px,3.2vw,46px);height:clamp(40px,3.2vw,46px);
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  font-size:clamp(16px,1.3vw,19px);color:#fff;
  background:#ff2d8714;border:1px solid #ff2d8755;
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.car-btn:hover{background:var(--grad);border-color:transparent;transform:translateY(-2px)}
.car-btn:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

.car-dots{display:flex;align-items:center;gap:9px}
.car-dot{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:#ffffff2e;border:0;
  transition:background .35s ease,width .4s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
/* the live one stretches into a bar, so position is readable at a glance */
.car-dot[aria-selected="true"]{
  width:26px;border-radius:5px;background:var(--grad);box-shadow:0 0 14px #ff2d8777;
}
.car-dot:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* the wet floor the backdrop already implies, carried under the deck */
.style-carousel::after{
  content:"";position:absolute;left:50%;bottom:clamp(44px,6svh,78px);
  width:min(620px,78%);height:clamp(22px,2.6vw,40px);transform:translateX(-50%);
  background:radial-gradient(60% 100% at 50% 0%,#ff2d8730,transparent 72%);
  filter:blur(7px);pointer-events:none;z-index:0;
}

.styles .small-note{text-align:center;margin-top:clamp(12px,1.8svh,24px)}

/* ---------------- CLASSES ----------------
   The JDC code and the batch list, now one lit room. Second light section
   on the site, so like About it carries its own ink and its own pink -
   the neon that reads as lit on black goes acid on a pale wash. */
.classes{
  --ink-on-light:#3b0b3f;
  --body-on-light:#5f3a5e;
  --pink-on-light:#d6147c;
  --pink-deep-on-light:#8f0b50;

  position:relative;overflow:hidden;
  /* 'contain', not 'cover'. Now that the band is capped at one screen it
     is far wider than the artwork is tall, so cover was scaling the image
     up on its width and cropping the dancer top and bottom. Contain fits
     her whole figure, which also reads smaller. Her left, top and bottom
     edges still meet the band's; only the right edge stops short, and the
     wash below already turns opaque well before it, so there is no seam. */
  background:
    url("assets/classes-bg.jpg") left center/contain no-repeat,
    linear-gradient(120deg,#f2c6ee 0%,#f6d2f2 48%,#f3cbef 100%);
  /* one screen, with the panel centred in it. Everything inside is spaced
     in svh rather than vw, so the quote, the heading and the four rows
     shrink together as the window gets shorter instead of running past
     the fold. */
  min-height:100svh;
  padding:clamp(26px,3.8svh,58px) clamp(24px,5vw,72px);
  display:flex;justify-content:flex-end;align-items:center;
}
/* a wash that fades in across the middle, so the copy keeps its contrast
   no matter how the backdrop happens to crop at a given width */
.classes::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    #f6d2f200 0%, #f6d2f200 30%, #f3cbefb3 48%,
    #f4cfefef 60%, #f5d3f1 72%, #f3cbef 100%);
}
.classes-art{display:none}

.classes-panel{position:relative;width:min(640px,56%);margin-right:clamp(0px,1.5vw,28px)}

/* ---- the code, set as the room's headline ---- */
/* shrink-wrapped to the text: the marks are hung off this box, so if it
   stretched to the full panel width the closing one would drift far from
   the words it belongs to */
.floor-quote{margin:0;position:relative;width:fit-content;max-width:100%}
/* the two big marks from the comp, hung off the text block rather than
   sitting in the flow, so they never push the quote around */
.floor-quote::before,.floor-quote::after{
  position:absolute;font:700 clamp(40px,4.4vw,74px)/1 Georgia,serif;
  color:var(--pink-on-light);opacity:.42;pointer-events:none;
}
.floor-quote::before{content:"\201C";left:-.42em;top:-.1em}
.floor-quote::after{content:"\201D";right:-.46em;top:-.1em}
.floor-quote p{
  margin:0;color:var(--ink-on-light);
  font:800 clamp(19px,3.7svh,36px)/1.16 Outfit,sans-serif;letter-spacing:-.025em;
}
.floor-quote .script{
  display:inline-block;font-size:1.26em;line-height:1.05;
  background:linear-gradient(94deg,#e8167f,#b40c63);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- numbered kicker ---- */
.badge-kicker{
  display:flex;align-items:center;gap:clamp(8px,1vw,14px);
  margin:clamp(12px,2svh,26px) 0 0;
  font:700 clamp(10px,1.5svh,13.5px)/1 "DM Sans",sans-serif;
  letter-spacing:.24em;text-transform:uppercase;color:var(--pink-deep-on-light);
}
.badge-kicker i{display:block;height:1px;flex:0 0 clamp(20px,3vw,54px)}
.badge-kicker i:first-child{background:linear-gradient(90deg,transparent,#b4517f)}
.badge-kicker i:last-child{flex:1 1 auto;background:linear-gradient(90deg,#b4517f,transparent)}
.badge-kicker b{
  display:grid;place-items:center;min-width:2.9em;padding:.42em .7em;
  border-radius:999px;background:linear-gradient(100deg,#b40c63,#e8167f);
  color:#fff;letter-spacing:.1em;font-weight:800;
  box-shadow:0 4px 12px #b40c6340;
}

.classes-panel h2{
  font-family:Outfit,sans-serif;font-weight:800;
  font-size:clamp(23px,4.8svh,44px);line-height:1.1;letter-spacing:-.03em;
  margin:clamp(8px,1.2svh,16px) 0 0;color:var(--ink-on-light);
}
.classes-panel h2 .script{
  font-size:1.22em;line-height:.9;display:inline-block;
  background:linear-gradient(94deg,#e8167f,#b40c63);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- the four batches ---- */
.batch-list{
  list-style:none;margin:clamp(14px,2svh,26px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:clamp(7px,1.1svh,13px);
}
.batch{
  display:grid;
  /* icon | title block | tag | arrow. The flexible track has to be the
     title block - give it to any other column and that column stretches,
     which is what made the tag pill run the width of the row. */
  grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:clamp(10px,1.2vw,18px);
  padding:clamp(8px,1.1svh,13px) clamp(11px,1.2vw,18px);
  border-radius:clamp(13px,1.4vw,20px);
  background:linear-gradient(100deg,#ffffffb8,#ffffff8c);
  border:1px solid #ffffffcc;
  box-shadow:0 8px 22px #7a1a5f1f;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,background .4s ease;
}
.batch-icon{
  width:clamp(36px,5.6svh,52px);height:clamp(36px,5.6svh,52px);
  border-radius:clamp(10px,1vw,14px);display:grid;place-items:center;
  background:linear-gradient(145deg,#e8167f,#7d0b49);color:#fff;
  box-shadow:0 6px 16px #8f0b5040;
}
.batch-icon svg{width:62%;height:62%}
/* the comp rules a hairline either side of the title block */
.batch-body{
  min-width:0;
  padding:0 clamp(10px,1.2vw,18px);
  border-left:1px solid #c98fbd80;
  border-right:1px solid #c98fbd80;
}
.batch-body h3{
  margin:0 0 .18em;color:var(--ink-on-light);
  font:800 clamp(15px,2.8svh,24px)/1.2 Outfit,sans-serif;letter-spacing:-.02em;
}
.batch-body p{margin:0;font-size:clamp(11.5px,2svh,15px);line-height:1.42;color:var(--body-on-light)}
.batch-tag{
  padding:.55em .9em;border-radius:999px;white-space:nowrap;
  background:linear-gradient(100deg,#fdf0b4,#f8e089);
  border:1px solid #e9cd72;color:#5a3a06;
  font:800 clamp(8.5px,1.3svh,11.5px)/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.batch-go{
  width:clamp(32px,4.8svh,44px);height:clamp(32px,4.8svh,44px);
  border-radius:50%;display:grid;place-items:center;text-decoration:none;
  background:linear-gradient(140deg,#e8167f,#a50c5c);color:#fff;
  font-size:clamp(13px,1.1vw,16px);box-shadow:0 5px 14px #a50c5c45;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
.batch-go span{display:block;transition:transform .35s ease}
.batch-go:focus-visible{outline:2px solid var(--pink-on-light);outline-offset:3px}

@media(hover:hover){
  .batch:hover{
    transform:translateX(5px);
    background:linear-gradient(100deg,#ffffffd9,#ffffffab);
    box-shadow:0 14px 30px #7a1a5f2e;
  }
  .batch:hover .batch-go{transform:scale(1.08);box-shadow:0 8px 20px #a50c5c5c}
  .batch:hover .batch-go span{transform:translateX(2px)}
}

/* ---------------- CONTACT ----------------
   Dark half of the site, so no local inks are needed: the neon pink and
   the white copy are already tuned for black. */
.contact{
  position:relative;overflow:hidden;
  /* The backdrop is a 3:1 banner against this ~2:1 band, so cover crops
     its sides hard. Anchored left, the neon dancer lands in the empty
     lane between the two columns instead of under either of them. */
  background:#060104 url("assets/contact-bg.jpg") left center/cover no-repeat;
  min-height:100svh;
  padding:clamp(26px,3.6svh,56px) clamp(20px,4vw,64px);
  display:grid;
  /* copy | the dancer's lane | form. The middle track is empty on purpose. */
  grid-template-columns:minmax(0,31fr) 25fr minmax(0,44fr);
  align-items:center;gap:0;
}
/* Two jobs in one layer. It lifts the copy side off the artwork so the
   type holds, and it takes the right side to near-solid black: the
   backdrop has its own neon frame baked in over there, and the form draws
   its own, so without this the two would show as a double outline. */
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    #060104e8 0%, #060104cf 20%, #06010447 31%,
    transparent 40%, transparent 48%, #060104d1 56%,
    #060104 64%, #060104 100%);
}
.contact-art{display:none}

.contact-copy-col{position:relative;z-index:2;grid-column:1}

/* the copy column is narrow, and the shared kicker's rules are sized off
   the viewport - left alone they push the label onto a second line */
.rule-kicker-ink{color:#fff;white-space:nowrap}
.rule-kicker-ink i{width:clamp(14px,1.8vw,30px)}
.rule-kicker-ink i:first-child{background:linear-gradient(90deg,transparent,var(--pink))}
.rule-kicker-ink i:last-child{background:linear-gradient(90deg,var(--pink),transparent)}

.contact h2{
  font-family:Outfit,sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(27px,3.4vw,52px);line-height:1.1;letter-spacing:-.035em;
  margin:clamp(10px,1.6svh,20px) 0 0;color:#fff;
  text-shadow:0 6px 34px #00000080;
}
.contact h2 em{
  position:relative;display:inline-block;font-style:italic;
  background:linear-gradient(94deg,#ff58a6,#e40a68);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* the italic overhangs its advance width, and background-clip:text
     paints only inside this box - without the padding the overhang comes
     out unpainted, which reads as a clipped letter */
  padding:0 .1em .06em .02em;
  filter:drop-shadow(0 6px 22px #ff2d8744);
}
/* the brush stroke under the word. It has to be a pseudo-element: the word
   itself is already using its background to colour the glyphs, so there is
   no background left to draw a rule with. */
.contact h2 em::after{
  content:"";position:absolute;left:.04em;right:.12em;bottom:-.1em;
  height:.07em;min-height:3px;border-radius:999px;
  background:linear-gradient(90deg,#ff58a6,#e40a68);
  box-shadow:0 0 14px #ff2d8770;
}
.contact-lede{
  margin:clamp(10px,1.6svh,20px) 0 0;max-width:32ch;
  font-size:clamp(13px,1.02vw,16.5px);line-height:1.7;color:#d8cbd7;
}

/* ---- phone and place, side by side ---- */
.contact-facts{
  list-style:none;margin:clamp(18px,2.6svh,34px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:clamp(10px,1.3vw,20px);
}
.contact-facts li{display:flex;align-items:center;gap:clamp(8px,.85vw,12px)}
/* the rule the comp sets between the two groups */
.contact-facts li+li{
  padding-left:clamp(10px,1.3vw,20px);
  border-left:1px solid #ff2d8740;
}
.fact-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:clamp(36px,3vw,46px);height:clamp(36px,3vw,46px);
  border-radius:clamp(10px,1vw,14px);
  background:var(--grad);color:#fff;
  box-shadow:0 0 20px #ff2d8759,0 6px 16px #00000073;
}
.fact-icon svg{width:54%;height:54%}
.fact-text{display:flex;flex-direction:column;gap:.08em;min-width:0}
.fact-text span{
  font:700 clamp(10px,.84vw,12.5px)/1.4 "DM Sans",sans-serif;color:#e8d9e5;
}
.fact-text a,.fact-text strong{
  font:800 clamp(13px,1.1vw,17px)/1.38 Outfit,sans-serif;
  color:#fff;text-decoration:none;letter-spacing:-.01em;
}
.fact-text a{transition:color .3s ease}
.fact-text a:hover{color:var(--pink-soft)}

/* ---- the form, as one lit panel ---- */
.enquiry-form{
  position:relative;z-index:2;grid-column:3;
  display:flex;flex-direction:column;gap:clamp(9px,1.4svh,16px);
  padding:clamp(18px,2.8svh,34px) clamp(18px,2vw,34px);
  border-radius:clamp(18px,1.8vw,30px);
  background:#0d0209b3;
  /* the neon edge from the comp: a hard pink line, a close halo and a
     wide bloom, so the panel reads as lit rather than outlined */
  border:2px solid #ff2d87;
  box-shadow:0 0 0 1px #ff2d8733,0 0 24px #ff2d8766,
             0 0 70px #ff2d8738,inset 0 0 34px #ff2d8714;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.field{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(10px,1.2vw,18px)}
.field-message{align-items:start}
.field-icon{
  display:grid;place-items:center;
  width:clamp(38px,3.1vw,48px);height:clamp(38px,3.1vw,48px);
  border-radius:clamp(10px,1vw,14px);
  background:#2a0a1c;border:1px solid #ff2d8733;color:var(--pink);
  box-shadow:0 0 16px #ff2d8724;
}
.field-message .field-icon{margin-top:clamp(5px,.8svh,9px)}
.field-icon svg{width:54%;height:54%}

/* the label lives inside the field, and clears as soon as the field has
   something in it - :placeholder-shown for the text fields, :invalid for
   the select, whose empty first option is what makes it invalid */
.field-wrap{position:relative;display:block;min-width:0}
.field-hint{
  position:absolute;left:clamp(12px,1.1vw,17px);top:50%;transform:translateY(-50%);
  pointer-events:none;transition:opacity .25s ease;
  font:600 clamp(13px,1vw,15.5px)/1 "DM Sans",sans-serif;color:#b5a4b6;
}
.field-hint b{color:#ff4d6d;font-weight:700}
.field-message .field-hint{top:clamp(11px,1.5svh,16px);transform:none}
.field-wrap input:not(:placeholder-shown)~.field-hint,
.field-wrap textarea:not(:placeholder-shown)~.field-hint,
.field-wrap select:valid~.field-hint{opacity:0}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea{
  display:block;width:100%;margin:0;
  background:#1c1b1fcc;border:1px solid #ffffff14;
  border-radius:clamp(9px,1vw,13px);
  padding:clamp(9px,1.3svh,14px) clamp(12px,1.1vw,17px);
  color:#fff;
  font:600 clamp(13px,1vw,15.5px)/1.4 "DM Sans",sans-serif;
  outline:none;resize:vertical;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.enquiry-form select{cursor:pointer}
.enquiry-form select option{background:#15060f;color:#fff}
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus{
  border-color:var(--pink);background:#241020cc;
  box-shadow:0 0 0 3px #ff2d8726,0 0 18px #ff2d8733;
}

.submit-button{
  align-self:center;margin-top:clamp(4px,1svh,12px);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border:0;cursor:pointer;border-radius:999px;
  min-width:min(100%,320px);
  padding:clamp(12px,1.7svh,18px) clamp(28px,2.8vw,48px);
  font:800 clamp(14px,1.12vw,18px)/1 Outfit,sans-serif;color:#fff;
  background:var(--grad);
  box-shadow:0 0 28px #ff2d8759,0 14px 32px #00000080;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
.submit-button span{display:inline-block;transition:transform .35s ease}
.submit-button:hover{transform:translateY(-3px);box-shadow:0 0 42px #ff2d8777,0 20px 44px #00000099}
.submit-button:hover span{transform:translateX(5px)}
.submit-button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ---------------- FOOTER ----------------
   A light strip, so it carries its own ink: the site's neon pink and the
   muted greys of the dark sections both fail on this near-white wash. */
.footer{
  --foot-ink:#1b0a16;
  --foot-muted:#6b5566;
  --foot-pink:#e8167f;

  position:relative;
  /* stretched, not cropped: the artwork is the wave band on its own, a
     flat gradient with no figure in it, so forcing it to the strip's box
     keeps the waves against both edges at any height and distorts nothing
     the eye can name. Cover would scale it up and lose them entirely. */
  background:#fdf4fa url("assets/footer-bg.jpg") center/100% 100% no-repeat;
  padding:clamp(24px,3vw,44px) clamp(18px,4vw,56px);
  color:var(--foot-ink);
}

.footer-main{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(12px,1.8vw,30px);
}
.footer-rule{
  width:1px;align-self:stretch;min-height:30px;
  background:linear-gradient(180deg,transparent,#d99cc4,transparent);
}
.footer-brand img{height:clamp(34px,3.4vw,50px);width:auto;display:block}

.footer-nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,28px);flex-wrap:wrap}
.footer-nav a{
  position:relative;text-decoration:none;color:var(--foot-ink);
  font:700 clamp(12px,1vw,15px)/1 Outfit,sans-serif;white-space:nowrap;
  padding:4px 0;transition:color .3s ease;
}
.footer-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:var(--foot-pink);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.footer-nav a:hover{color:var(--foot-pink)}
.footer-nav a:hover::after{transform:scaleX(1)}

/* takes the slack, so the social marks stay pinned to the right edge */
.footer-tag{
  flex:1 1 180px;margin:0;color:var(--foot-muted);
  font:italic 400 clamp(11.5px,.95vw,14.5px)/1.4 "DM Sans",sans-serif;
}

.footer-social{list-style:none;display:flex;align-items:center;gap:clamp(8px,.9vw,13px);margin:0;padding:0}
.footer-social a{
  display:grid;place-items:center;
  width:clamp(30px,2.5vw,38px);height:clamp(30px,2.5vw,38px);
  border-radius:50%;color:var(--foot-pink);
  border:1.6px solid var(--foot-pink);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.footer-social svg{width:54%;height:54%}
.footer-social a:hover{background:var(--foot-pink);color:#fff;transform:translateY(-2px)}
.footer-social a:focus-visible{outline:2px solid var(--foot-pink);outline-offset:3px}

.footer-base{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  margin-top:clamp(14px,1.7vw,24px);
  padding-top:clamp(14px,1.7vw,24px);
  border-top:1px solid #e0bdd4;
}
.footer-base small{color:var(--foot-muted);font-size:clamp(10.5px,.85vw,13px)}

.back-top{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--foot-pink);
  font:700 clamp(10px,.85vw,12.5px)/1 "DM Sans",sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.back-top-ring{
  display:grid;place-items:center;
  width:clamp(26px,2.2vw,34px);height:clamp(26px,2.2vw,34px);
  border-radius:50%;border:1.6px solid var(--foot-pink);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.back-top-ring svg{width:52%;height:52%}
.back-top:hover .back-top-ring{background:var(--foot-pink);color:#fff;transform:translateY(-3px)}
.back-top:focus-visible{outline:2px solid var(--foot-pink);outline-offset:3px}

/* ---------------- ANIMATION BASE (GSAP targets) ---------------- */
.jdc-anim{opacity:0}
.no-gsap .jdc-anim{opacity:1}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1180px){
  .nav-links{gap:18px}
  .nav-links a{font-size:14px}
  .nav-links a.nav-cta{padding:12px 20px;font-size:14px}
}

@media(max-width:1000px){
  :root{--nav-h:80px}
  .menu-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:46px;height:46px;background:#ff2d8718;border:1px solid #ff2d8755;
    border-radius:12px;padding:0 11px;cursor:pointer;z-index:55;
  }
  .menu-toggle span{width:100%;height:2px;background:var(--pink);display:block;border-radius:2px;transition:transform .35s ease,opacity .3s ease}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  .nav-links{
    display:none;position:fixed;top:var(--nav-h);left:0;right:0;
    background:#120610fa;backdrop-filter:blur(14px);
    flex-direction:column;align-items:stretch;gap:0;
    padding:14px clamp(20px,6vw,40px) 28px;
    border-bottom:1px solid var(--line);box-shadow:0 24px 50px #00000080;
    max-height:calc(100svh - var(--nav-h));overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:16px;padding:16px 0;border-bottom:1px solid #ffffff12}
  .nav-links a::after{display:none}
  .nav-links a.nav-cta{text-align:center;margin-top:18px;border-bottom:0;padding:16px 24px}

  .hero-copy br{display:none}
  /* the dancer's lane disappears with the three-column layout, so she
     becomes a real image above the copy and the band falls back to a
     wash of the same pinks */
  .contact{
    display:block;min-height:0;padding:0 0 clamp(30px,5vw,50px);
    background:linear-gradient(170deg,#140209 0%,#1b0410 48%,#0a0208 100%);
  }
  .contact::before{content:none}
  /* the backdrop has an empty neon frame baked into its right 58%, meant
     to sit behind the form. Shown whole up here it reads as an empty box,
     so the crop is pinned left and deep enough (5:4) that the frame falls
     just outside the right edge. */
  .contact-art{
    display:block;width:100%;height:auto;aspect-ratio:5/4;
    object-fit:cover;object-position:left center;
  }
  .contact-copy-col{margin:clamp(20px,4vw,30px) clamp(20px,5vw,44px) 0}
  .enquiry-form{margin:clamp(18px,3vw,26px) clamp(20px,5vw,44px) 0}
  .contact-lede{max-width:none}
  /* the backdrop's artwork would now sit behind the column, so the panel
     goes full width, the art is shown above it as a real image, and the
     section falls back to a flat wash of the same pink */
  .intro{
    display:block;background:linear-gradient(170deg,#fae2f0 0%,#f6dcec 54%,#f2d0e6 100%);
    padding:0 0 clamp(40px,7vw,62px);
  }
  .intro-art{
    display:block;width:100%;height:auto;aspect-ratio:16/10;
    object-fit:cover;object-position:left center;
  }
  .intro-panel{width:auto;margin:clamp(22px,4vw,34px) clamp(20px,5vw,44px) 0}
  .intro-copy{max-width:none}
  .section-top{flex-direction:column;align-items:flex-start;gap:20px}
  .cat-divider{display:none}
  /* the backdrop's dancer would now sit behind the copy, so she becomes a
     real image above it and the band falls back to a flat wash */
  .classes{display:block;min-height:0;background:linear-gradient(165deg,#f6d2f2 0%,#f0c2ec 52%,#e9b5e4 100%);padding:0 0 clamp(34px,6vw,56px)}
  .classes::before{content:none}
  .classes-art{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:left center}
  .classes-panel{width:auto;margin:clamp(20px,4vw,32px) clamp(20px,5vw,44px) 0}
  .floor-quote::before{left:-.3em}

  /* the deck's tilt is a desktop flourish - at tablet width it starts
     eating the inner card edges, so the cards sit flat and level */
  /* the fan closes up: the neighbours sit nearer and turn less, so the
     front card keeps its width instead of being squeezed */
  .style-stage.is-coverflow{
    --cf-w:clamp(230px,30vw,300px);
    --cf-x1:78%;--cf-s1:.80;--cf-r1:15deg;
    --cf-x2:134%;--cf-s2:.66;--cf-r2:20deg;
    height:clamp(240px,42svh,380px);
  }
  .card-ghost{font-size:clamp(34px,5.6vw,52px)}
  .styles-head h2{font-size:clamp(28px,5.6vw,46px)}
}

@media(max-width:700px){
  /* phones: let the hero grow rather than clip the strip */
  .hero{height:auto;min-height:100svh;max-height:none;padding-bottom:0}
  /* Mobile keeps the complete hero composition instead of replacing it
     with a flat crop.  Every image/canvas layer shares this same oversized
     photo box, so the ring, bubbles and dancer remain pixel-aligned while
     the landscape artwork fills a portrait screen. */
  .hero-bg,.hero-hair,.hero-bubbles,.ring-fx{
    display:block;top:var(--nav-h);bottom:0;height:auto;width:auto;
    left:69%;right:auto;aspect-ratio:1672/941;
    transform:translateX(-69%);
    transition:top .45s ease;
  }
  .hero-bg,.hero-hair{
    background-position:center;background-size:100% 100%;
    -webkit-mask-image:none;mask-image:none;
  }
  /* Re-fit the three hair masks to the unscaled source image used above. */
  .hero-hair{
    -webkit-mask-image:
      radial-gradient(ellipse 5.6% 8% at 59.8% 23%,#000 38%,#00000080 66%,transparent 100%),
      radial-gradient(ellipse 4.6% 6.4% at 67% 17.2%,#000 36%,#00000080 64%,transparent 100%),
      radial-gradient(ellipse 2.7% 5% at 62.3% 21.1%,#000 58%,#000000b3 76%,transparent 100%);
    mask-image:
      radial-gradient(ellipse 5.6% 8% at 59.8% 23%,#000 38%,#00000080 66%,transparent 100%),
      radial-gradient(ellipse 4.6% 6.4% at 67% 17.2%,#000 36%,#00000080 64%,transparent 100%),
      radial-gradient(ellipse 2.7% 5% at 62.3% 21.1%,#000 58%,#000000b3 76%,transparent 100%);
  }
  .ring-canvas,.ring-dust{inset:0;width:100%;height:100%}
  .bubble-canvas{inset:0 auto auto 10%;width:80%;height:80%}
  .hero-bubbles{-webkit-mask-image:none;mask-image:none;opacity:.72}
  .hero-veil{
    background:
      linear-gradient(90deg,#0b0410e8 0%,#0b0410b8 42%,#0b041052 72%,#0b04101a 100%),
      linear-gradient(180deg,#0b041075 0%,transparent 28%,#0b0410d9 100%);
  }
  .hero-inner{padding-top:clamp(40px,10vw,70px);padding-bottom:46px}
  .hero-eyebrow{letter-spacing:.26em;font-size:12px}
  .hero-title .line{font-size:clamp(40px,12vw,62px)}
  .hero-title .script{font-size:clamp(56px,17vw,92px)}
  .hero-copy{margin-top:22px;font-size:15px}
  .hero-actions{gap:18px;margin-top:30px}
  .btn{padding:17px 26px;font-size:15px;width:100%;justify-content:center}
  .btn-ghost{width:100%;justify-content:center}

  .category-strip{
    gap:10px;padding-bottom:clamp(46px,12vw,68px);
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .cat{min-width:0}
  .category-strip{justify-content:center}
  .cat-icon{width:32px;height:32px}
  .cat-label{font-size:9px;text-align:center;white-space:normal}

  /* four across gets too narrow for two-word labels - go two by two */
  .intro-perks{grid-template-columns:1fr 1fr;gap:22px 10px}
  .intro-perks li:nth-child(3)::before{display:none}

  /* the tag drops under the title rather than squeezing the row */
  .classes-art{aspect-ratio:4/3}
  .batch{grid-template-columns:auto 1fr auto;gap:11px}
  .batch-body{grid-column:2;grid-row:1}
  .batch-tag{grid-column:2;grid-row:2;justify-self:start;margin-top:7px}
  .batch-go{grid-column:3;grid-row:1/-1;align-self:center}


  /* the one-line bar stops fitting: brand and socials share the top row,
     the nav drops below them, and the tagline goes - it is flavour, and
     the links are what the row is for */
  .footer-main{gap:12px 16px}
  .footer-tag{display:none}
  .footer-nav{order:3;flex-basis:100%;justify-content:center;gap:14px}
  .footer-rule{display:none}
  .footer-social{margin-left:auto}
  .footer-brand img{height:40px}

  /* one card at a time, each still tall enough for the dancer to read */
  .styles{padding:62px 18px 70px}
  /* one card at a time, with just a sliver of the next one showing so it
     is obvious there is more to swipe to */
  .style-stage.is-coverflow{
    --cf-w:min(70vw,300px);
    --cf-x1:97%;--cf-s1:.78;--cf-r1:14deg;
    height:clamp(230px,40svh,320px);perspective:900px;
  }
  .is-coverflow>.style-card[data-pos="-2"],
  .is-coverflow>.style-card[data-pos="2"]{opacity:0;pointer-events:none}
  .is-coverflow>.style-card[data-pos="0"]{
    box-shadow:0 0 0 1px #ff2d8766,0 0 26px #ff2d8745,0 20px 44px #0009;
  }
  .style-card{height:300px}
  .card-ghost{font-size:46px;top:12px}
  .card-ghost.ghost-script{font-size:52px}
  .style-carousel::after{bottom:52px;height:18px}
}

/* ---- small phones: 425px and down ---------------------------------------
   The 700px block already rearranges the layout - one column, stacked hero,
   grid category strip. What it does not do is resize anything: the type,
   the padding and the card heights are still the ones drawn for a tablet,
   so on a 375px handset the hero alone eats two screens and every section
   reads as a wall.

   This block only shrinks. No element moves to a new place and no rule here
   touches a wider screen, so the desktop design is exactly as it was. */
@media(max-width:480px){
  :root{--nav-h:70px}

  /* --- bar --- */
  .site-header{padding:0 16px;gap:12px}
  .site-header.scrolled{height:62px}
  .brand img{height:38px}
  .menu-toggle{width:42px;height:42px;padding:0 10px;gap:5px;border-radius:10px}
  .nav-links{padding:10px 18px 20px}
  .nav-links a{font-size:15px;padding:13px 0}
  .nav-links a.nav-cta{margin-top:14px;padding:14px 20px;font-size:14px}

  /* --- hero --- */
  .hero-inner{padding:26px 18px 32px}
  .hero-eyebrow{font-size:10.5px;letter-spacing:.22em;margin-bottom:8px}
  .hero-title .line{font-size:clamp(30px,9.4vw,38px)}
  .hero-title .script{font-size:clamp(40px,13.5vw,54px)}
  .brush{width:clamp(150px,44vw,220px);height:12px}
  .hero-copy{font-size:13.5px;line-height:1.62;margin-top:14px}
  .hero-actions{gap:14px;margin-top:22px}
  .btn{padding:15px 20px;font-size:14.5px;gap:10px}
  .btn-ghost{font-size:14.5px;gap:12px}
  .play-ring{width:42px;height:42px}
  .play-ring svg{width:16px;height:16px}

  /* the five tiles sit in their cells rather than hugging the left edge */
  .category-strip{gap:8px;padding:0 14px 32px;justify-items:center}
  .cat{gap:6px}
  .cat-icon{width:32px;height:32px;border-radius:9px}
  .cat-label{font-size:9px}
  .hero-wave{height:20px}

  /* --- shared --- */
  .section-pad{padding:58px 18px}
  .section-kicker{font-size:10px;letter-spacing:.2em}
  h2{font-size:clamp(26px,8.2vw,34px);margin:14px 0}
  .section-top{gap:14px;margin-bottom:30px}
  .section-top h2{margin:12px 0 0}
  .section-top>p{font-size:12.5px;line-height:1.7}
  .section-top>p br{display:none}
  .small-note{font-size:10px;margin-top:14px}

  /* --- about --- */
  .intro-art{aspect-ratio:4/3}
  .intro-panel h2{font-size:clamp(23px,7.2vw,30px)}
  .intro-copy{font-size:13.5px;line-height:1.72}
  .intro-perks{margin-top:22px;gap:18px 8px}
  .perk-icon{width:34px;height:34px;border-radius:11px}
  .intro-perks strong{font-size:10.5px}
  .intro-cta{margin-top:24px}

  /* --- classes --- */
  .floor-quote p{font-size:clamp(19px,6.4vw,25px)}
  .badge-kicker{font-size:9px;letter-spacing:.18em;gap:8px;margin-top:16px}
  .badge-kicker i:first-child{flex-basis:16px}
  .classes-panel h2{font-size:clamp(22px,7vw,28px)}

  /* --- classes --- */
  .batch{padding:10px 11px;border-radius:14px;gap:10px}
  .batch-icon{width:36px;height:36px;border-radius:10px}
  .batch-body{padding-left:10px}
  .batch-body h3{font-size:15px}
  .batch-body p{font-size:11.5px}
  .batch-tag{font-size:8.5px;padding:.5em .8em}
  .batch-go{width:32px;height:32px;font-size:13px}

  /* --- contact --- */
  /* a 700px blur circle is a lot of paint for a phone to carry */
  .contact-art{aspect-ratio:1/1}
  .contact h2{font-size:clamp(24px,7.4vw,31px)}
  .contact-lede{font-size:13px;line-height:1.7}
  /* two facts side by side is too tight for a phone - stack them and drop
     the rule that separated the columns */
  .contact-facts{flex-direction:column;gap:14px}
  .contact-facts li+li{padding-left:0;border-left:0}
  .fact-icon{width:36px;height:36px;border-radius:10px}
  .fact-text a,.fact-text strong{font-size:15px}
  .enquiry-form{padding:15px 14px;gap:10px;border-radius:18px}
  .field{gap:10px}
  .field-icon{width:34px;height:34px;border-radius:10px}
  .field-hint{font-size:13px;left:12px}
  .submit-button{width:100%;padding:13px 20px;font-size:14.5px}
  .enquiry-form{gap:15px;padding-top:4px}
  .enquiry-form label{font-size:9.5px;letter-spacing:.12em}
  .enquiry-form input,.enquiry-form select,.enquiry-form textarea{
    margin-top:8px;padding:12px 13px;font-size:14px;border-radius:10px;
  }
  .submit-button{width:100%;justify-content:center}
  .enquiry-form{border-width:1px}

  /* --- footer --- */
  .footer{padding:20px 16px}
  .footer-brand img{height:32px}
  .footer-nav{gap:11px}
  .footer-nav a{font-size:12px}
  .footer-social a{width:29px;height:29px}
  .footer-base{margin-top:13px;padding-top:13px}
  .back-top{font-size:9px;letter-spacing:.14em}
  .footer-base small{font-size:10px}

  /* --- dance styles --- */
  .styles{padding:52px 16px 60px}
  .styles-head{margin-bottom:28px}
  .rule-kicker{font-size:9px;letter-spacing:.24em;gap:10px}
  .rule-kicker i{width:28px}
  .styles-head h2{font-size:clamp(25px,8vw,33px);margin-top:12px}
  .styles-head>p{font-size:12.5px;margin-top:10px}
  .style-stage.is-coverflow{--cf-w:min(72vw,278px);--cf-x1:97%;height:clamp(215px,38svh,286px)}
  .style-card{height:258px;border-radius:17px}
  .car-ui{gap:12px;margin-top:18px}
  .car-btn{width:36px;height:36px;font-size:15px}
  .car-dot{width:8px;height:8px}
  .car-dot[aria-selected="true"]{width:22px}
  .card-ghost{font-size:38px;top:10px}
  .card-ghost.ghost-script{font-size:44px}
  .card-body{padding:14px 15px 16px;gap:10px}
  .card-num{font-size:12px;gap:8px}
  .card-num i{width:14px}
  .card-body h3{font-size:16.5px;margin:7px 0 4px}
  .card-body p{font-size:12px;line-height:1.5}
  .card-go{width:36px;height:36px;font-size:15px}
  .styles .small-note{margin-top:18px}
}

/* ---- very small phones: 360px and down -----------------------------------
   One more step down for 320-360px handsets, where the block above still
   leaves the headline and the cards slightly over-scaled. Tap targets are
   deliberately left alone - buttons, the menu and the arrows stay at 34px
   and up, so nothing here becomes hard to hit. */
@media(max-width:360px){
  .site-header{padding:0 13px}
  .brand img{height:34px}

  .hero-inner{padding:22px 14px 28px}
  .hero-eyebrow{font-size:9.5px;letter-spacing:.2em}
  .hero-title .line{font-size:28px}
  .hero-title .script{font-size:38px}
  .brush{width:140px;height:10px}
  .hero-copy{font-size:13px;margin-top:12px}
  .btn{padding:14px 16px;font-size:13.5px}
  .btn-ghost{font-size:13.5px}

  .category-strip{gap:6px;padding:0 10px 28px}
  .cat-icon{width:29px;height:29px;border-radius:8px}
  .cat-label{font-size:8.5px}

  .section-pad{padding:48px 14px}
  h2{font-size:24px}
  .section-top>p{font-size:12px}

  .intro-copy,.contact-lede{font-size:13px}
  .intro-panel h2{font-size:21px}
  .intro-perks strong{font-size:10px}
  .perk-icon{width:31px;height:31px}

  .floor-quote p{font-size:18px}
  .classes-panel h2{font-size:21px}

  .batch-icon{width:33px;height:33px}
  .batch-body h3{font-size:14px}
  .batch-go{width:30px;height:30px;font-size:12px}


  .contact h2{font-size:22px}
  .fact-text a,.fact-text strong{font-size:14px}
  .field-icon{width:31px;height:31px}
  .field-hint{font-size:12.5px}

  .footer{padding:17px 13px}
  .footer-brand img{height:28px}
  .footer-nav a{font-size:11.5px}
  .footer-social a{width:27px;height:27px}
  .back-top{font-size:9.5px;gap:8px}

  .styles{padding:44px 13px 52px}
  .styles-head h2{font-size:23px}
  .style-stage.is-coverflow{--cf-w:min(72vw,250px);height:clamp(200px,36svh,258px)}
  .style-card{height:232px}
  .card-ghost{font-size:33px}
  .card-ghost.ghost-script{font-size:38px}
  .card-body h3{font-size:15.5px}
  .card-go{width:33px;height:33px;font-size:14px}
}

/* ---- compact phone system: 320 / 375 / 425px ----------------------------
   These rules keep every section visually proportional on common handset
   widths.  Artwork becomes a short banner, content gutters stay consistent,
   and controls/cards scale down without sacrificing usable tap targets. */
@media(max-width:425px){
  :root{--mobile-gutter:15px}

  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .site-header{padding-inline:var(--mobile-gutter)}
  .site-header.scrolled ~ main .hero-bg,
  .site-header.scrolled ~ main .hero-hair,
  .site-header.scrolled ~ main .hero-bubbles,
  .site-header.scrolled ~ main .ring-fx,
  .site-header.scrolled ~ main .hero-veil{top:62px}

  /* Keep the opening screen compact even on short 320px-wide devices. */
  .hero{min-height:100svh}
  .hero-bg,.hero-hair{
    background-position:center top;
    background-size:80% 80%;
    background-repeat:no-repeat;
  }
  .hero-inner{padding:20px var(--mobile-gutter) 22px;align-items:center}
  .hero-content{width:100%;max-width:360px}
  .hero-content{position:relative;top:105px}
  .hero-title .line{font-size:clamp(28px,8.8vw,35px)}
  .hero-title .script{font-size:clamp(38px,12.5vw,50px)}
  .hero-copy{max-width:32ch;font-size:13px;line-height:1.55}
  .hero-actions{margin-top:17px;gap:9px;flex-wrap:nowrap}
  .hero-actions{position:relative;top:-20px}
  .hero-actions .btn,
  .hero-actions .btn-ghost{width:auto;flex:0 1 auto;justify-content:center}
  .hero-actions .btn{min-height:36px;padding:10px 13px;font-size:11.5px;gap:7px}
  .hero-actions .btn-ghost{font-size:11.5px;gap:7px;white-space:nowrap}
  .play-ring{width:33px;height:33px;border-width:1.5px}
  .play-ring svg{width:13px;height:13px}
  .category-strip{margin-top:-12px;padding:0 8px 26px;gap:4px}
  .cat{gap:5px}
  .cat-icon{width:27px;height:27px;border-radius:8px}
  .cat-label{font-size:7.5px;line-height:1.15;white-space:nowrap}

  /* Shared phone rhythm. */
  .section-pad{padding:44px var(--mobile-gutter)}
  .section-kicker{font-size:9px}
  h2{font-size:clamp(23px,7.4vw,30px)}
  .section-top{margin-bottom:24px}

  /* Image-led sections use short banners instead of tall tablet artwork. */
  .intro,.classes,.contact{padding-bottom:34px}
  .intro-art,.classes-art{aspect-ratio:16/9;max-height:240px}
  .contact-art{display:none}
  .intro-art{object-position:left 38%}
  .classes-art{object-position:left 35%}
  .intro-panel,.classes-panel,
  .contact-copy-col,.enquiry-form{
    margin-left:var(--mobile-gutter);margin-right:var(--mobile-gutter);
  }
  .intro-panel{transform:none!important;opacity:1!important}
  .classes-panel{position:static;transform:none!important;opacity:1!important}
  .intro-panel,.classes-panel,.contact-copy-col{margin-top:20px}
  .contact{padding-top:28px}
  .contact-copy-col{margin-top:0}
  .intro-heading{
    display:block;position:absolute;z-index:3;
    top:clamp(34px,10vw,43px);right:var(--mobile-gutter);
    width:44%;color:var(--ink-on-light);
  }
  .intro-heading .rule-kicker{font-size:7px;letter-spacing:.14em;gap:5px}
  .intro-heading .rule-kicker i{width:12px}
  .intro-panel h2{font-size:clamp(14px,4.3vw,18px);line-height:1.08;margin-top:8px}
  .classes-panel h2,.contact h2{font-size:clamp(21px,6.8vw,27px)}
  .intro-copy,.contact-lede{font-size:12.5px;line-height:1.65}
  .intro-perks{margin-top:18px;gap:15px 6px}
  .perk-icon{width:31px;height:31px;border-radius:9px}
  .intro-perks strong{font-size:9.5px}
  .intro-cta{margin-top:20px}

  /* Styles carousel and cards. */
  .styles{min-height:auto;padding:42px var(--mobile-gutter) 48px}
  .styles-head{margin-bottom:22px}
  .styles-head h2{font-size:clamp(22px,7.2vw,29px)}
  .styles-head>p{font-size:12px;line-height:1.55}
  .style-stage.is-coverflow{--cf-w:min(72vw,260px);height:250px}
  .style-card{border-radius:15px}
  .card-body{padding:12px 13px 14px}
  .card-body h3{font-size:15px}
  .card-body p{font-size:11px}
  .card-go{width:34px;height:34px}
  .car-ui{margin-top:15px}
  .car-btn{width:35px;height:35px}

  /* Class rows. */
  .floor-quote{
    position:absolute;z-index:3;
    top:clamp(36px,10vw,44px);right:var(--mobile-gutter);
    width:52%;max-width:52%;
  }
  .floor-quote p{font-size:clamp(16px,5vw,20px);line-height:1.12}
  .floor-quote::before,.floor-quote::after{font-size:31px}
  .floor-quote::before{left:-.28em}
  .floor-quote::after{right:-.2em}
  .badge-kicker{margin-top:13px}
  .batch-list{margin-top:13px;gap:8px}
  .batch{padding:9px 10px;gap:8px;border-radius:12px}
  .batch-icon{width:32px;height:32px}
  .batch-body{padding-left:8px;padding-right:8px}
  .batch-body h3{font-size:13.5px}
  .batch-body p{font-size:10.5px}
  .batch-tag{font-size:8px}
  .batch-go{width:30px;height:30px}

  /* Contact details and form. */
  .contact-facts{
    display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);
    margin-top:15px;gap:8px;align-items:start;
  }
  .contact-facts li{width:auto;min-width:0;align-items:flex-start;gap:7px}
  .contact-facts li+li{padding-left:0;border-left:0}
  .fact-icon{width:27px;height:27px;border-radius:8px}
  .fact-text{gap:2px;padding-top:1px;text-align:left}
  .fact-text span{font-size:8px;line-height:1.2;white-space:nowrap}
  .fact-text a,.fact-text strong{font-size:10.5px;line-height:1.25;white-space:nowrap}
  .enquiry-form{margin-top:17px;padding:14px 12px;gap:12px;border-radius:15px}
  .field{grid-template-columns:31px minmax(0,1fr);gap:8px;align-items:center}
  .field-icon{width:31px;height:31px}
  .field-wrap{width:100%}
  .field-hint{left:11px;font-size:12px;text-align:left}
  .enquiry-form input,.enquiry-form select,.enquiry-form textarea{
    min-height:40px;padding:10px 11px;font-size:13px;text-align:left;
  }
  .enquiry-form textarea{min-height:68px}
  .submit-button{min-height:42px;padding:12px 18px;font-size:13.5px}

  .footer{padding:17px var(--mobile-gutter)}
  .footer-main{gap:10px 12px}
  .footer-nav{gap:9px 12px}
  .footer-nav a{font-size:11px}
  .footer-base{margin-top:11px;padding-top:11px}
  .footer-base{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;gap:6px;width:100%;
  }
  .footer-base small{font-size:8.5px;white-space:nowrap;text-align:left}
  .back-top{justify-self:end;margin-left:0;font-size:8px;gap:6px;white-space:nowrap}
  .back-top-ring{width:24px;height:24px}
}

@media(max-width:375px){
  :root{--mobile-gutter:13px}
  .brand img{height:32px}
  .menu-toggle{width:39px;height:39px}
  .hero-inner{padding-top:17px;padding-bottom:18px}
  .hero-content{top:98px}
  .hero-actions{top:-22px}
  .hero-copy{font-size:12.5px}
  .category-strip{margin-top:-10px;padding-bottom:23px}
  .cat-icon{width:26px;height:26px}
  .cat-label{font-size:7.2px}
  .section-pad{padding-top:40px;padding-bottom:40px}
  .intro-art,.classes-art,.contact-art{max-height:205px}
  .style-stage.is-coverflow{--cf-w:min(71vw,245px);height:232px}
  .card-ghost{font-size:31px}
  .card-ghost.ghost-script{font-size:36px}
}

@media(max-width:330px){
  :root{--mobile-gutter:11px}
  .hero-title .line{font-size:27px}
  .hero-title .script{font-size:37px}
  .hero-content{top:90px}
  .hero-actions{top:0}
  .hero-copy{font-size:12px}
  .hero-actions{gap:6px}
  .hero-actions .btn{padding-inline:10px;font-size:10.5px}
  .hero-actions .btn-ghost{font-size:10.5px;gap:5px}
  .play-ring{width:30px;height:30px}
  .category-strip{margin-top:-8px;padding-inline:5px;gap:2px}
  .cat-icon{width:24px;height:24px;border-radius:7px}
  .cat-label{font-size:6.8px}
  .intro-art,.classes-art,.contact-art{max-height:180px}
  .style-stage.is-coverflow{--cf-w:226px;height:218px}
  .batch-body h3{font-size:13px}
  .batch-body p{font-size:10px}
  .batch-tag{padding:.45em .65em}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .jdc-anim{opacity:1!important;transform:none!important}
  .hero-hair{display:none}
  .style-stage.is-coverflow{transition:none}

}