/* StepnGroove shared stylesheet
   Refactored from the original index.html and classes.html styles.
   Theme variables are kept at the top so the visual theme can be changed centrally.
*/

:root{
      --black:#0d0d0d;
      --black-2:#151515;
      --gold:#c9a45c;
      --gold-light:#e3c57d;
      --cream:#f4efe7;
      --white:#fff;
      --muted:#b8b1a8;
      --line:rgba(255,255,255,.10);
      --max:1240px;
    }


    /* =========================================================
       GLOBAL
    ========================================================= */

    *{
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
      scroll-padding-top:175px;
    }

    body{
      margin:0;
      background:var(--black);
      color:var(--white);
      font-family:Arial,Helvetica,sans-serif;
      line-height:1.55;
      overflow-x:hidden;
    }

    img{
      display:block;
      max-width:100%;
      height:auto;
    }

    picture{
      display:block;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    button{
      font:inherit;
    }

    .container{
      width:min(calc(100% - 40px),var(--max));
      margin:auto;
    }


    /* =========================================================
       FLOATING NAVIGATION
       
       150px deep banner retained as requested.
       Large logo and larger navigation typography.
    ========================================================= */

    .site-header{
      position:fixed;
      z-index:1000;

      top:14px;
      left:50%;
      transform:translateX(-50%);

      width:min(calc(100% - 32px),1380px);

      min-height:150px;

      display:flex;
      align-items:center;

      gap:24px;

      padding:8px 18px 8px 22px;

      background:rgba(13,13,13,.94);

      border:1px solid rgba(201,164,92,.55);

      border-radius:999px;

      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);

      box-shadow:
        0 14px 40px rgba(0,0,0,.32);

      isolation:isolate;
    }


    /* =========================================================
       STEPNGROOVE LOGO
       
       Larger desktop logo to properly use the 150px banner.
       
       IMPORTANT:
       overflow:visible prevents the dancers' heads and
       other parts of the complete logo from being clipped.
    ========================================================= */

    .brand{
      display:flex;

      align-items:center;
      justify-content:center;

      /*
        Moves the logo to the right inside the banner.
        Increase this number if you want it further right.
      */
      margin-left:20px;

      flex:0 0 108px;

      width:108px;
      height:108px;

      overflow:visible;

      position:relative;
      z-index:2;
    }

    .brand picture{
      display:flex;

      align-items:center;
      justify-content:center;

      width:108px;
      height:108px;

      flex:0 0 108px;

      overflow:visible;
    }

    .brand img{
      display:block;

      width:108px;
      height:108px;

      max-width:none;

      object-fit:contain;
      object-position:center;

      flex:0 0 auto;
    }


    /* =========================================================
       MAIN NAVIGATION LINKS
       
       Increased from 12px to 14px to balance the larger logo.
    ========================================================= */

    .nav{
      display:flex;

      align-items:center;
      justify-content:center;

      gap:30px;

      flex:1;

      min-width:0;

      padding-left:10px;
    }

    .nav a{
      font-size:14px;

      font-weight:800;

      letter-spacing:1.15px;

      color:#eee;

      white-space:nowrap;

      transition:
        color .2s ease,
        opacity .2s ease;
    }

    .nav a:hover,
    .nav a.active{
      color:var(--gold);
    }


    /* =========================================================
       BOOK NOW BUTTON
       
       Slightly larger to match the larger navigation.
    ========================================================= */

    .book-btn,
    .primary{
      display:inline-flex;

      align-items:center;
      justify-content:center;

      min-height:54px;

      padding:0 25px;

      border-radius:999px;

      background:var(--gold);

      color:#111;

      font-weight:900;

      letter-spacing:.5px;

      white-space:nowrap;

      transition:
        background .2s ease,
        transform .2s ease;
    }

    .book-btn:hover,
    .primary:hover{
      background:var(--gold-light);

      transform:translateY(-1px);
    }


    /* =========================================================
       HAMBURGER BUTTON
    ========================================================= */

    .menu-toggle{
      display:none;

      width:50px;
      height:50px;

      flex:0 0 50px;

      border:1px solid rgba(201,164,92,.55);

      border-radius:13px;

      background:#111;

      align-items:center;
      justify-content:center;

      flex-direction:column;

      gap:6px;

      cursor:pointer;

      position:relative;
      z-index:2;
    }

    .menu-toggle span{
      display:block;

      width:23px;
      height:2px;

      background:var(--gold);

      border-radius:2px;

      transition:
        transform .2s ease,
        opacity .2s ease;
    }

    .site-header.open
    .menu-toggle span:nth-child(1){
      transform:translateY(8px) rotate(45deg);
    }

    .site-header.open
    .menu-toggle span:nth-child(2){
      opacity:0;
    }

    .site-header.open
    .menu-toggle span:nth-child(3){
      transform:translateY(-8px) rotate(-45deg);
    }


    /* =========================================================
       HERO
    ========================================================= */

    .hero{
      position:relative;

      min-height:790px;

      display:flex;
      align-items:center;

      overflow:hidden;
    }

    .hero picture,
    .hero picture img{
      position:absolute;

      inset:0;

      width:100%;
      height:100%;
    }

    .hero picture{
      z-index:0;
    }

    .hero picture img{
      object-fit:cover;
      object-position:center;
    }

    .hero:after{
      content:"";

      position:absolute;

      inset:0;

      background:
        linear-gradient(
          90deg,
          rgba(0,0,0,.96) 0%,
          rgba(0,0,0,.82) 38%,
          rgba(0,0,0,.28) 72%,
          rgba(0,0,0,.48) 100%
        );

      z-index:1;
    }

    .hero-content{
      position:relative;

      z-index:2;

      width:min(calc(100% - 40px),var(--max));

      margin:auto;

      padding-top:175px;
    }

    .eyebrow{
      color:var(--gold);

      font-size:13px;

      font-weight:900;

      letter-spacing:2px;

      text-transform:uppercase;
    }

    h1,
    h2{
      font-family:Georgia,"Times New Roman",serif;
    }

    h1{
      font-size:clamp(54px,7vw,94px);

      line-height:.92;

      font-weight:400;

      max-width:680px;

      margin:18px 0;
    }

    h1 span{
      color:var(--gold);

      font-style:italic;
    }

    .hero-copy{
      max-width:580px;

      color:#eee;

      font-size:18px;
    }

    .actions{
      display:flex;

      gap:12px;

      flex-wrap:wrap;

      margin-top:28px;
    }

    .secondary{
      display:inline-flex;

      align-items:center;
      justify-content:center;

      min-height:54px;

      padding:0 25px;

      border:1px solid var(--gold);

      border-radius:999px;

      font-weight:900;

      transition:
        background .2s ease,
        transform .2s ease;
    }

    .secondary:hover{
      background:rgba(201,164,92,.12);

      transform:translateY(-1px);
    }


    /* =========================================================
       TRUST STRIP
    ========================================================= */

    .trust{
      display:grid;

      grid-template-columns:repeat(4,1fr);

      background:#111;

      border-block:1px solid var(--line);
    }

    .trust div{
      padding:22px 15px;

      text-align:center;

      border-right:1px solid var(--line);
    }

    .trust div:last-child{
      border-right:0;
    }

    .trust strong{
      display:block;

      color:var(--gold);

      font-size:11px;

      letter-spacing:1.2px;
    }

    .trust span{
      font-size:12px;

      color:#aaa;
    }


    /* =========================================================
       SECTIONS
    ========================================================= */

    .section{
      padding:82px 0;
    }

    .section.alt{
      background:#121212;
    }

    .heading{
      max-width:720px;

      margin:0 auto 38px;

      text-align:center;
    }

    .heading h2{
      font-size:clamp(38px,5vw,58px);

      font-weight:400;

      line-height:1.05;

      margin:8px 0 12px;
    }

    .heading p{
      color:var(--muted);

      margin:0;
    }


    /* =========================================================
       CARDS
    ========================================================= */

    .cards{
      display:grid;

      grid-template-columns:repeat(4,1fr);

      gap:14px;
    }

    .card{
      background:#191919;

      border:1px solid var(--line);

      border-radius:18px;

      overflow:hidden;

      min-width:0;
    }

    .card picture,
    .card picture img{
      width:100%;
    }

    .card picture img{
      height:230px;

      object-fit:cover;

      object-position:center;
    }

    .card-body{
      padding:22px;
    }

    .card h3{
      margin:0 0 8px;

      font-size:20px;
    }

    .card p{
      margin:0;

      color:#aaa;

      font-size:14px;
    }

    .card-link{
      display:inline-block;

      margin-top:15px;

      color:var(--gold);

      font-weight:900;

      font-size:13px;
    }

    .card-link:hover{
      color:var(--gold-light);
    }


    /* =========================================================
       ABOUT / BOOKING
    ========================================================= */

    .split{
      display:grid;

      grid-template-columns:1fr 1fr;

      gap:50px;

      align-items:center;
    }

    .split picture{
      width:100%;
    }

    .split picture img{
      width:100%;

      height:520px;

      object-fit:cover;

      object-position:center;

      border-radius:20px;
    }

    .split h2{
      font-size:clamp(40px,5vw,62px);

      font-weight:400;

      line-height:1.02;

      margin:10px 0 16px;
    }

    .split p{
      color:var(--muted);

      max-width:600px;
    }

    .checklist{
      list-style:none;

      padding:0;

      margin:22px 0;
    }

    .checklist li{
      padding:7px 0;

      color:#ddd;
    }

    .checklist li:before{
      content:"✓";

      color:var(--gold);

      font-weight:900;

      margin-right:10px;
    }


    /* =========================================================
       NEWSLETTER
    ========================================================= */

    .newsletter{
      border:1px solid rgba(201,164,92,.25);

      border-radius:22px;

      background:
        linear-gradient(
          135deg,
          #1a1714,
          #111
        );

      padding:42px;

      text-align:center;
    }

    .newsletter form{
      display:flex;

      max-width:620px;

      margin:22px auto 0;

      gap:10px;
    }

    .newsletter input{
      flex:1;

      min-width:0;

      border:1px solid #444;

      background:#0d0d0d;

      color:#fff;

      border-radius:999px;

      padding:14px 18px;
    }

    .newsletter input:focus{
      outline:2px solid rgba(201,164,92,.45);

      outline-offset:2px;
    }

    .newsletter small{
      display:block;

      color:#777;

      margin-top:10px;
    }



    /* =========================================================
       SOCIAL MEDIA
    ========================================================= */

    .social-section{
      padding:58px 0;
      background:#0d0d0d;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      text-align:center;
    }

    .social-heading{
      max-width:680px;
      margin:0 auto 30px;
    }

    .social-heading .eyebrow{
      margin-bottom:8px;
    }

    .social-heading h2{
      font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(34px,4vw,48px);
      font-weight:400;
      line-height:1.05;
      margin:6px 0 10px;
    }

    .social-heading p{
      color:var(--muted);
      margin:0;
    }

    .social-links{
      display:flex;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      gap:12px;
    }

    .social-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:52px;
      padding:0 20px;
      border:1px solid rgba(201,164,92,.45);
      border-radius:999px;
      background:#151515;
      color:#eee;
      font-size:12px;
      font-weight:900;
      letter-spacing:.8px;
      white-space:nowrap;
      transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
    }

    .social-link:hover{
      background:var(--gold);
      border-color:var(--gold);
      color:#111;
      transform:translateY(-2px);
    }

    .social-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:25px;
      height:25px;
      margin-right:9px;
      flex:0 0 25px;
    }

    .social-icon svg{
      display:block;
      width:21px;
      height:21px;
      fill:currentColor;
    }

    .social-handle{
      color:#999;
      font-size:10px;
      margin-left:7px;
      font-weight:700;
      letter-spacing:.2px;
    }

    .social-link:hover .social-handle{
      color:#111;
    }

    /* Footer social icons */
    .footer-social{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:8px;
      margin-top:18px;
    }

    .footer-social a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px;
      height:38px;
      margin:0;
      border:1px solid rgba(201,164,92,.35);
      border-radius:50%;
      background:#111;
      color:#aaa;
      transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
    }

    .footer-social a:hover{
      color:#111;
      background:var(--gold);
      border-color:var(--gold);
      transform:translateY(-2px);
    }

    .footer-social svg{
      width:18px;
      height:18px;
      fill:currentColor;
    }

    @media(max-width:560px){

      .social-section{
        padding:48px 14px;
      }

      .social-links{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        width:100%;
        max-width:440px;
        margin:auto;
        gap:10px;
      }

      .social-link{
        width:100%;
        min-height:52px;
        padding:0 10px;
        font-size:11px;
      }

      .social-icon{
        margin-right:6px;
      }

      .social-handle{
        display:none;
      }

      .footer-social{
        margin-top:15px;
      }

    }

    @media(max-width:360px){

      .social-links{
        grid-template-columns:1fr;
      }

      .social-link{
        width:100%;
      }

    }

    /* =========================================================
       FOOTER
    ========================================================= */

    footer{
      background:#080808;

      border-top:1px solid var(--line);

      padding:55px 0;
    }

    .footer-grid{
      display:grid;

      grid-template-columns:2fr repeat(3,1fr);

      gap:35px;
    }

    footer h3{
      font-size:11px;

      letter-spacing:1.5px;

      color:var(--gold);

      margin:0 0 15px;
    }

    footer a{
      display:block;

      color:#aaa;

      font-size:13px;

      margin:9px 0;
    }

    footer a:hover{
      color:var(--white);
    }

    .footer-brand p{
      color:#888;

      font-size:13px;

      max-width:350px;
    }

    .copyright{
      border-top:1px solid var(--line);

      padding:18px 20px;

      text-align:center;

      color:#666;

      font-size:12px;
    }


    /* =========================================================
       COOKIE NOTICE
    ========================================================= */

    .cookie{
      position:fixed;

      z-index:2000;

      left:18px;
      right:18px;
      bottom:18px;

      max-width:720px;

      margin:auto;

      background:#111;

      border:1px solid rgba(201,164,92,.35);

      border-radius:14px;

      padding:16px 18px;

      box-shadow:
        0 14px 45px rgba(0,0,0,.45);

      display:none;

      font-size:13px;
    }

    .cookie.show{
      display:block;
    }

    .cookie-actions{
      display:flex;

      gap:8px;

      flex-wrap:wrap;

      margin-top:10px;
    }

    .cookie button{
      border:1px solid #555;

      background:transparent;

      color:#fff;

      border-radius:999px;

      padding:9px 14px;

      cursor:pointer;
    }

    .cookie .accept{
      background:var(--gold);

      border-color:var(--gold);

      color:#111;

      font-weight:900;
    }


    /* =========================================================
       LARGE TABLETS / SMALL DESKTOP
       
       Keeps the larger logo but reduces link spacing slightly
       when screen width becomes tighter.
    ========================================================= */

    @media(max-width:1200px){

      .site-header{
        gap:18px;

        padding-left:18px;
      }

      .brand{
        margin-left:14px;

        flex-basis:96px;

        width:96px;
        height:96px;
      }

      .brand picture{
        width:96px;
        height:96px;

        flex-basis:96px;
      }

      .brand img{
        width:96px;
        height:96px;
      }

      .nav{
        gap:20px;

        padding-left:4px;
      }

      .nav a{
        font-size:12px;

        letter-spacing:1px;
      }

      .book-btn{
        min-height:50px;

        padding:0 20px;

        font-size:12px;
      }

      .cards{
        grid-template-columns:repeat(2,1fr);
      }

    }


    /* =========================================================
       TABLET
    ========================================================= */

    @media(max-width:850px){

      .site-header{
        top:9px;

        width:calc(100% - 20px);

        min-height:76px;

        border-radius:18px;

        flex-wrap:wrap;

        padding:6px 10px 6px 14px;
      }


      /* Tablet logo */

      .brand{
        margin-left:6px;

        flex:0 0 64px;

        width:64px;

        height:64px;

        overflow:visible;
      }

      .brand picture{
        width:64px;

        height:64px;

        flex:0 0 64px;

        overflow:visible;
      }

      .brand img{
        width:64px;

        height:64px;

        max-width:none;

        object-fit:contain;
      }


      /* Hamburger */

      .menu-toggle{
        display:flex;

        margin-left:auto;
      }


      /* Book button hidden */

      .book-btn{
        display:none;
      }


      /* Tablet / mobile navigation */

      .nav{
        display:none;

        order:5;

        flex:0 0 100%;

        width:100%;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        background:#0c0c0c;

        border:1px solid var(--line);

        border-radius:14px;

        padding:6px;

        margin-top:5px;

        max-height:calc(100vh - 95px);

        overflow-y:auto;

        -webkit-overflow-scrolling:touch;
      }

      .site-header.open .nav{
        display:flex;
      }

      .nav a{
        display:flex;

        align-items:center;

        min-height:50px;

        padding:14px;

        font-size:13px;

        letter-spacing:1px;

        border-bottom:1px solid var(--line);
      }

      .nav a:last-child{
        border-bottom:0;
      }


      /* Hero */

      .hero{
        min-height:720px;
      }

      .hero-content{
        padding-top:105px;
      }


      /* Split sections */

      .split{
        grid-template-columns:1fr;
      }

      .split picture{
        order:2;
      }

      .split picture img{
        height:400px;
      }


      /* Trust */

      .trust{
        grid-template-columns:repeat(2,1fr);
      }

      .trust div:nth-child(2){
        border-right:0;
      }

      .trust div:nth-child(-n+2){
        border-bottom:1px solid var(--line);
      }


      /* Footer */

      .footer-grid{
        grid-template-columns:repeat(2,1fr);
      }

    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media(max-width:560px){

      .container{
        width:min(calc(100% - 28px),var(--max));
      }


      /* Floating navigation */

      .site-header{
        width:calc(100% - 16px);

        top:7px;

        min-height:68px;

        padding:5px 8px 5px 12px;
      }


      /* Mobile logo */

      .brand{
        margin-left:5px;

        flex:0 0 58px;

        width:58px;

        height:58px;

        overflow:visible;
      }

      .brand picture{
        width:58px;

        height:58px;

        flex:0 0 58px;

        overflow:visible;
      }

      .brand img{
        width:58px;

        height:58px;

        max-width:none;

        object-fit:contain;
      }


      /* Mobile hamburger */

      .menu-toggle{
        width:42px;

        height:42px;

        flex:0 0 42px;
      }


      /* Hero */

      .hero{
        min-height:700px;
      }

      .hero-content{
        width:calc(100% - 28px);

        padding-top:100px;
      }

      .hero picture img{
        object-position:62% center;
      }

      h1{
        font-size:47px;
      }

      .hero-copy{
        font-size:16px;
      }


      /* Buttons */

      .actions{
        flex-direction:column;
      }

      .actions a{
        width:100%;
      }


      /* Trust */

      .trust{
        grid-template-columns:1fr;
      }

      .trust div{
        border-right:0;

        border-bottom:1px solid var(--line);
      }

      .trust div:last-child{
        border-bottom:0;
      }


      /* Cards */

      .cards{
        grid-template-columns:1fr;
      }


      /* Sections */

      .section{
        padding:58px 0;
      }


      /* Images */

      .split picture img{
        height:320px;
      }


      /* Newsletter */

      .newsletter{
        padding:30px 18px;
      }

      .newsletter form{
        flex-direction:column;
      }

      .newsletter .primary{
        width:100%;
      }


      /* Footer */

      .footer-grid{
        grid-template-columns:1fr;
      }

    }


    /* =========================================================
       SMALL PHONES — 375px
    ========================================================= */

    @media(max-width:375px){

      .site-header{
        width:calc(100% - 12px);

        left:6px;

        transform:none;

        min-height:64px;
      }


      /* Small phone logo */

      .brand{
        margin-left:4px;

        flex:0 0 54px;

        width:54px;

        height:54px;

        overflow:visible;
      }

      .brand picture{
        width:54px;

        height:54px;

        flex:0 0 54px;
      }

      .brand img{
        width:54px;

        height:54px;

        max-width:none;

        object-fit:contain;
      }


      .menu-toggle{
        width:40px;

        height:40px;

        flex-basis:40px;
      }

      h1{
        font-size:43px;
      }

    }


    /* =========================================================
       VERY SMALL PHONES — 320px
    ========================================================= */

    @media(max-width:320px){

      .site-header{
        width:calc(100% - 10px);

        left:5px;
      }


      .brand{
        margin-left:3px;

        flex-basis:50px;

        width:50px;

        height:50px;
      }

      .brand picture{
        width:50px;

        height:50px;

        flex-basis:50px;
      }

      .brand img{
        width:50px;

        height:50px;
      }


      .menu-toggle{
        width:38px;

        height:38px;

        flex-basis:38px;
      }

      h1{
        font-size:40px;
      }

    }


    /* =========================================================
       TOUCH DEVICES
    ========================================================= */

    @media(hover:none) and (pointer:coarse){

      .nav a{
        min-height:50px;
      }

      .book-btn,
      .primary,
      .secondary{
        min-height:50px;
      }

    }


    /* =========================================================
       REDUCED MOTION
    ========================================================= */

    @media(prefers-reduced-motion:reduce){

      html{
        scroll-behavior:auto;
      }

      .menu-toggle span,
      .book-btn,
      .primary,
      .secondary,
      .nav a{
        transition:none;
      }

    }

/* =========================================================
   REFACTORED COMMON UTILITIES
   ========================================================= */

.booking-info{
  background:#181818;
  border:1px solid rgba(201,164,92,.2);
  border-radius:20px;
  padding:28px;
}

.booking-info h3{
  color:var(--gold);
  margin-top:0;
}

.newsletter h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:42px;
  font-weight:400;
  margin:8px 0;
}

.newsletter p{
  color:var(--muted);
}

.footer-brand .brand{
  display:flex;
}

.schedule-panel .primary{
  margin-top:18px;
  width:100%;
}

/* =========================================================
   INNER PAGE / CLASSES STYLES
========================================================= */

.page-hero{position:relative;min-height:590px;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero picture,.page-hero picture img{position:absolute;inset:0;width:100%;height:100%}
.page-hero picture{z-index:0}
.page-hero picture img{object-fit:cover;object-position:center}
.page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 38%,rgba(0,0,0,.34) 72%,rgba(0,0,0,.48) 100%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 55%);z-index:1}
.page-hero-content{position:relative;z-index:2;width:min(calc(100% - 40px),var(--max));margin:auto;padding-top:205px;padding-bottom:75px}
.page-hero h1{max-width:780px;margin:14px 0 18px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(54px,7vw,92px);line-height:.92;font-weight:400}
.page-hero h1 span{color:var(--gold);font-style:italic}
.page-hero-copy{max-width:650px;color:#eee;font-size:18px}
.page-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.section-intro{max-width:760px;margin:0 auto 40px;text-align:center}
.section-intro h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,5vw,58px);font-weight:400;line-height:1.05;margin:8px 0 12px}
.section-intro p{color:var(--muted);margin:0}
.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.class-card{display:flex;flex-direction:column;background:#171717;border:1px solid rgba(201,164,92,.3);border-radius:18px;overflow:hidden;min-width:0;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.class-card:hover{transform:translateY(-4px);border-color:rgba(201,164,92,.75);box-shadow:0 16px 35px rgba(0,0,0,.25)}
.class-card picture,.class-card picture img{width:100%}
.class-card picture img{height:245px;object-fit:cover;object-position:center}
.class-card-body{display:flex;flex:1;flex-direction:column;padding:21px}
.class-level{color:var(--gold);font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}
.class-card h3{font-family:Georgia,"Times New Roman",serif;font-size:28px;line-height:1.05;font-weight:400;margin:9px 0 12px}
.class-card p{color:#aaa;font-size:14px;margin:0 0 18px}
.class-meta{border-top:1px solid var(--line);margin-top:auto;padding-top:14px}
.class-meta-row{display:flex;gap:9px;align-items:flex-start;color:#ddd;font-size:12px;margin:8px 0}
.class-meta-row strong{color:var(--gold);min-width:70px;font-size:10px;letter-spacing:.8px;text-transform:uppercase}
.class-card .primary{width:100%;min-height:48px;margin-top:17px;font-size:12px}
.class-note{text-align:center;color:#777;font-size:12px;margin:24px 0 0}
.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#111;border:1px solid rgba(201,164,92,.35);border-radius:18px;overflow:hidden}
.feature{padding:25px 18px;text-align:center;border-right:1px solid var(--line)}
.feature:last-child{border-right:0}
.feature-icon{display:block;color:var(--gold);font-size:26px;line-height:1;margin-bottom:10px}
.feature strong{display:block;color:#eee;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}
.feature span{display:block;color:#888;font-size:12px}
.schedule-box{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:stretch}
.schedule-panel{background:#171717;border:1px solid var(--line);border-radius:18px;padding:26px}
.schedule-panel h3{margin:0 0 16px;color:var(--gold);font-size:12px;letter-spacing:1.4px;text-transform:uppercase}
.schedule-row{display:grid;grid-template-columns:110px 1fr;gap:15px;padding:13px 0;border-top:1px solid var(--line)}
.schedule-row:first-of-type{border-top:0}
.schedule-day{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.schedule-row strong{display:block;font-size:15px;margin-bottom:3px}
.schedule-row span{color:#999;font-size:12px}
.info-list{list-style:none;padding:0;margin:0}
.info-list li{color:#ccc;padding:9px 0 9px 22px;position:relative;font-size:14px}
.info-list li:before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:900}
.class-cta{position:relative;overflow:hidden;border:1px solid rgba(201,164,92,.35);border-radius:22px;min-height:285px;display:flex;align-items:center}
.class-cta picture,.class-cta picture img{position:absolute;inset:0;width:100%;height:100%}
.class-cta picture{z-index:0}
.class-cta picture img{object-fit:cover;object-position:center}
.class-cta:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.63) 52%,rgba(0,0,0,.48));z-index:1}
.class-cta-content{position:relative;z-index:2;width:min(650px,100%);padding:42px}
.class-cta h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,5vw,58px);font-weight:400;line-height:1;margin:7px 0 12px}
.class-cta p{color:#ddd;max-width:560px;margin:0 0 20px}

@media(max-width:1200px){.class-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){
  .page-hero{min-height:660px}
  .page-hero-content{padding-top:145px;padding-bottom:60px}
  .feature-strip{grid-template-columns:repeat(2,1fr)}
  .feature:nth-child(2){border-right:0}
  .feature:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .schedule-box{grid-template-columns:1fr}
}
@media(max-width:560px){
  .page-hero{min-height:680px}
  .page-hero-content{width:calc(100% - 28px);padding-top:120px;padding-bottom:48px}
  .page-hero h1{font-size:47px}
  .page-hero-copy{font-size:16px}
  .page-actions{flex-direction:column}
  .page-actions a{width:100%}
  .class-grid{grid-template-columns:1fr}
  .class-card picture img{height:230px}
  .feature-strip{grid-template-columns:1fr}
  .feature{border-right:0;border-bottom:1px solid var(--line)}
  .feature:last-child{border-bottom:0}
  .class-cta{min-height:390px}
  .class-cta-content{padding:30px 22px;align-self:flex-end}
  .class-cta .primary{width:100%}
  .schedule-row{grid-template-columns:1fr;gap:4px}
}
@media(prefers-reduced-motion:reduce){.class-card{transition:none}}

/* =========================================================
   REFACTORED COMMON UTILITIES
   ========================================================= */

.booking-info{
  background:#181818;
  border:1px solid rgba(201,164,92,.2);
  border-radius:20px;
  padding:28px;
}

.booking-info h3{
  color:var(--gold);
  margin-top:0;
}

.newsletter h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:42px;
  font-weight:400;
  margin:8px 0;
}

.newsletter p{
  color:var(--muted);
}

.footer-brand .brand{
  display:flex;
}

.schedule-panel .primary{
  margin-top:18px;
  width:100%;
}

/* =========================================================
   VISITOR COUNTER
   ========================================================= */

.visitor-count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-left: 12px;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.visitor-count span {
  color: var(--muted);
}

.visitor-count strong {
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}

@media (max-width: 980px) {
  .visitor-count {
    display: none;
  }
}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 70px;
  align-items: start;
}

.contact-copy h2,
.contact-form-wrap h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-weight: 400;
  margin: 8px 0 20px;
}

.contact-copy > p {
  color: var(--muted);
  max-width: 620px;
}

.contact-form-wrap {
  background: #181818;
  border: 1px solid rgba(201,164,92,.2);
  border-radius: 20px;
  padding: 32px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.form-field label span {
  color: var(--gold);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: #111;
  color: var(--cream);
  font: inherit;
  padding: 13px 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-field input,
.form-field select {
  min-height: 48px;
}

.form-field textarea {
  min-height: 170px;
  resize: vertical;
  line-height: 1.6;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,164,92,.12);
}

.form-field select option {
  background: #111;
  color: var(--cream);
}

.consent-field {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.consent-field label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.consent-field input {
  margin-top: 4px;
  accent-color: var(--gold);
}

.form-note {
  color: var(--muted);
  font-size: 12px;
}

.form-errors,
.form-success {
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 24px;
}

.form-errors {
  border: 1px solid rgba(220,80,80,.35);
  background: rgba(120,30,30,.16);
}

.form-errors strong {
  color: var(--cream);
}

.form-errors ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.form-success {
  border: 1px solid rgba(201,164,92,.25);
  background: rgba(201,164,92,.06);
}

.form-success p {
  color: var(--muted);
  margin-bottom: 24px;
}

.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }
}

@media (max-width: 650px) {
  .contact-form-wrap {
    padding: 22px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .contact-copy h2,
  .contact-form-wrap h2 {
    font-size: 34px;
  }
}

/* =======================================================
   FOOTER META
======================================================= */

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-visitor-count,
.footer-website-enquiries {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-visitor-count span,
.footer-website-enquiries span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.footer-visitor-count strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.footer-website-enquiries a {
  color: var(--text);
  text-decoration: none;
  transition: color .2s ease;
}

.footer-website-enquiries a:hover,
.footer-website-enquiries a:focus {
  color: var(--accent);
}

@media (max-width: 700px) {
  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .footer-visitor-count,
  .footer-website-enquiries {
    flex-wrap: wrap;
  }
}