/* ===========================================================
   FAM SESSIONS — live preview stylesheet
   Dark immersive + electric cyan neon + retro-groovy headings
   =========================================================== */

:root{
  --bg:#161616; --surface:#1f1f1f; --surface-2:#272727; --line:#343434;
  --text:#f5f5f5; --text-muted:#c7c7c7; --text-dim:#8a8a8a;
  --cyan:#22d3ee; --cyan-bright:#5eeafc; --blue:#2f6bff;
  --grad-neon:linear-gradient(135deg,#2f6bff 0%,#22d3ee 100%);
  --glow:0 0 10px rgba(34,211,238,.55), 0 0 30px rgba(34,211,238,.30);
  --glow-lg:0 0 14px rgba(34,211,238,.7), 0 0 40px rgba(34,211,238,.45);
  --shadow-card:0 8px 28px rgba(0,0,0,.55);
  --maxw:1200px; --gutter:clamp(1rem,4vw,2.5rem); --header-h:70px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --font-display:"Bagel Fat One","Rubik Bubbles",system-ui,sans-serif;
  --font-accent:"Righteous","Fredoka",system-ui,sans-serif;
  --font-body:"Inter","Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--cyan); color:#06222a}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(3.5rem,8vw,6rem)}
.eyebrow{font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.14em;
  font-size:.8rem; color:var(--cyan); margin:0 0 .75rem}
h1,h2,h3{margin:0 0 .5rem; line-height:1.05}
h1{font-family:var(--font-display); font-weight:400}
h2{font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,4.5vw,3rem)}
h3{font-family:var(--font-body); font-weight:700; font-size:1.35rem; line-height:1.2}
p{margin:0 0 1rem; color:var(--text-muted)}
.neon{color:var(--cyan); text-shadow:var(--glow)}
.rule{height:2px; width:84px; border:0; margin:1rem 0 0; background:var(--grad-neon); box-shadow:var(--glow)}
.center{text-align:center}
.center .rule{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.04em; font-size:.95rem;
  padding:.85rem 1.6rem; border-radius:var(--r-pill); border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease}
.btn--primary{background:var(--grad-neon); color:#08252b}
.btn--primary:hover{transform:translateY(-2px); box-shadow:var(--glow-lg)}
.btn--ghost{border-color:var(--cyan); color:var(--cyan); background:transparent}
.btn--ghost:hover{color:var(--cyan-bright); border-color:var(--cyan-bright); box-shadow:var(--glow)}
.btn:focus-visible{outline:2px solid var(--cyan-bright); outline-offset:3px}

/* ---------- Header ---------- */
.header{position:sticky; top:0; z-index:50; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(22,22,22,.6); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:background .3s, border-color .3s}
.header.scrolled{background:rgba(22,22,22,.92); border-bottom-color:var(--line)}
.header .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand img{height:44px; width:auto}
.nav{display:flex; align-items:center; gap:1.6rem}
.nav a{font-weight:500; color:var(--text); font-size:1rem; position:relative; padding:.25rem 0}
.nav a:hover{color:var(--cyan)}
.nav a.active{color:var(--cyan)}
.nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--grad-neon); box-shadow:var(--glow)}
.nav .btn{padding:.6rem 1.1rem}
.navtoggle{display:none; background:none; border:0; color:var(--text); cursor:pointer; padding:.4rem}
.navtoggle svg{width:28px; height:28px}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:88vh; display:flex; align-items:center;
  text-align:center; overflow:hidden; isolation:isolate}
.hero__bg{position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 60% at 50% 35%, rgba(34,211,238,.18), transparent 70%),
             linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.78) 60%, rgba(22,22,22,1) 100%)}
.hero .wrap{padding-block:6rem}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem); margin-bottom:1.25rem; text-wrap:balance}
.hero p{font-size:clamp(1.05rem,2vw,1.3rem); max-width:46ch; margin-inline:auto; color:#e8e8e8}
.hero .btns{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem}

/* ---------- Marquee ---------- */
.marquee{background:var(--surface); border-block:1px solid var(--line); overflow:hidden; padding-block:.85rem}
.marquee__track{display:flex; width:max-content; animation:scroll 28s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.08em;
  color:var(--cyan); font-size:1.05rem; padding-inline:1.6rem; white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- Cards ---------- */
.grid{display:grid; gap:1.5rem}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-6px); border-color:var(--cyan); box-shadow:var(--shadow-card), var(--glow)}
.card__img{aspect-ratio:16/10; overflow:hidden; background:#0e0e0e}
.card__img img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.card:hover .card__img img{transform:scale(1.05)}
.card__body{padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.card__body p{font-size:.97rem; margin:0; flex:1}
.card__link{font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.04em;
  font-size:.85rem; color:var(--cyan); margin-top:.4rem}

/* event card variant */
.ecard{position:relative; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--surface); min-height:150px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.1rem; transition:transform .2s, border-color .2s, box-shadow .2s}
.ecard:hover{transform:translateY(-4px); border-color:var(--cyan); box-shadow:var(--glow)}
.ecard__city{color:var(--text-dim); font-size:.85rem; font-family:var(--font-accent); letter-spacing:.06em; text-transform:uppercase}
.ecard__name{font-weight:700; font-size:1.05rem; line-height:1.25; margin-top:.25rem}
.badge{display:inline-block; align-self:flex-start; margin-bottom:.6rem; font-family:var(--font-accent);
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#08252b;
  background:var(--grad-neon); padding:.2rem .55rem; border-radius:var(--r-pill)}

/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:.6rem}
.gallery button{padding:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:#0e0e0e; cursor:pointer; aspect-ratio:4/3}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .35s}
.gallery button:hover img{transform:scale(1.06)}
.gallery button:hover{border-color:var(--cyan); box-shadow:var(--glow)}

/* lightbox */
.lb{position:fixed; inset:0; z-index:200; background:rgba(8,8,8,.93);
  display:none; align-items:center; justify-content:center; padding:24px}
.lb.open{display:flex}
.lb img{max-width:90vw; max-height:86vh; object-fit:contain; border-radius:10px; box-shadow:0 0 40px rgba(34,211,238,.35)}
.lb__btn{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  background:rgba(31,31,31,.7); border:1px solid var(--line); color:#fff; font-size:26px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px)}
.lb__prev{left:18px} .lb__next{right:18px}
.lb__close{top:18px; right:18px; transform:none}

/* ---------- CTA band ---------- */
.cta{position:relative; text-align:center; overflow:hidden; isolation:isolate}
.cta::after{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 100% at 50% 50%, rgba(47,107,255,.25), transparent 70%)}
.cta h2{margin-bottom:.5rem}

/* ---------- Equipment feature blocks ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; margin-block:clamp(2rem,5vw,4rem)}
.feature:nth-child(even) .feature__img{order:2}
.feature__img{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#0e0e0e; box-shadow:var(--shadow-card)}
.feature__img img{width:100%; aspect-ratio:4/3; object-fit:cover}
.feature ul{margin:.5rem 0 0; padding:0; list-style:none}
.feature li{padding:.35rem 0 .35rem 1.5rem; position:relative; color:var(--text-muted)}
.feature li::before{content:"♥"; position:absolute; left:0; color:var(--cyan); font-size:.9rem}

/* ---------- Footer ---------- */
.footer{background:var(--surface); border-top:1px solid var(--line); padding-block:3rem; margin-top:2rem}
.footer .wrap{display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start}
.footer img{height:54px; margin-bottom:1rem}
.footer h4{font-family:var(--font-accent); letter-spacing:.06em; text-transform:uppercase; font-size:.85rem; color:var(--text); margin:0 0 .6rem}
.footer a{color:var(--text-muted); display:block; padding:.2rem 0}
.footer a:hover{color:var(--cyan)}
.footer .copy{width:100%; border-top:1px solid var(--line); margin-top:1rem; padding-top:1.5rem;
  color:var(--text-dim); font-size:.85rem}

/* section header helper */
.shead{max-width:60ch}
.shead.center{margin-inline:auto}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav{position:fixed; inset:var(--header-h) 0 auto 0; background:rgba(20,20,20,.98);
    flex-direction:column; align-items:flex-start; gap:0; padding:1rem var(--gutter) 2rem;
    border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .3s; height:auto}
  .nav.open{transform:translateY(0)}
  .nav a{width:100%; padding:.8rem 0; border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:.8rem}
  .navtoggle{display:block}
  .feature{grid-template-columns:1fr}
  .feature:nth-child(even) .feature__img{order:0}
}

/* ── Mobile hero optimisation (service sub-pages) ── */
@media (max-width:640px){
  .hero{min-height:52vh !important}
  .hero .wrap{padding-top:5.5rem !important; padding-bottom:2rem !important}
  .hero h1{font-size:clamp(2rem,9vw,3rem) !important}
  .hero p{font-size:1rem !important; max-width:100% !important}
  /* Keep the focal point of background images visible on portrait mobile */
  .hero__bg{background-position:center top !important}
}