/* ==========================================================================
   Cannis Rojo Production — crojobeats.com
   Brand colours live in :root. Change --red and --bg and the rest follows.
   ========================================================================== */

:root{
  --red:        #e01b2e;
  --red-soft:   #ff4757;
  --red-deep:   #7d0d19;
  --ember:      #ff8a3d;   /* warm end of the gradient */

  --bg:         #08080a;
  --bg-alt:     #0e0e12;
  --surface:    #15151b;
  --surface-2:  #1d1d25;
  --line:       #26262f;
  --line-soft:  #1b1b22;

  --text:       #f4f4f7;
  --muted:      #9596a5;
  --dim:        #62636f;

  --radius:     12px;
  --radius-lg:  20px;
  --wrap:       1200px;

  --font:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display:    'Bebas Neue', 'Inter', Impact, sans-serif;

  --grad:       linear-gradient(100deg, var(--ember), var(--red-soft) 45%, var(--red) 75%, var(--red-deep));
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,iframe{ max-width:100%; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--red-soft); outline-offset:3px; border-radius:4px; }

/* ── Type ───────────────────────────────────────────────────────────────── */

h1,h2,h3{ margin:0 0 .5em; line-height:1.08; }
p{ margin:0 0 1rem; }

/* Two-tone section heading: plain word + gradient word */
.display{
  font-family:var(--display);
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  font-weight:400;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:.92;
  margin:0 0 1.1rem;
}
.display span{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

h3{ font-size:1.1rem; font-weight:650; letter-spacing:0; }

/* Eyebrow with leading rule */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:.72rem; font-weight:650; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red-soft);
  margin:0 0 1.1rem;
}
.eyebrow i{ display:block; width:38px; height:1px; background:var(--red); flex:0 0 38px; }

.lede{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--muted); max-width:56ch; }
.section__sub{ color:var(--muted); max-width:62ch; margin:0 0 2.8rem; }

.note{ color:var(--dim); font-size:.92rem; margin-top:2rem; }
.note a{ color:var(--red-soft); text-decoration:none; border-bottom:1px solid rgba(255,71,87,.35); }
.note a:hover{ border-color:var(--red-soft); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.7em;
  border:1px solid transparent;
  border-radius:999px;
  font:inherit; font-weight:650; font-size:.93rem;
  text-decoration:none; cursor:pointer;
  transition:transform .16s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{
  background:var(--grad);
  background-size:160% 100%;
  color:#fff;
  box-shadow:0 10px 30px rgba(224,27,46,.28);
}
.btn--primary:hover{ background-position:100% 0; box-shadow:0 14px 38px rgba(224,27,46,.42); }

.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--red); background:rgba(224,27,46,.07); }

.btn--sm{ padding:.6em 1.2em; font-size:.85rem; }
.btn--full{ width:100%; }

/* ── Nav ────────────────────────────────────────────────────────────────── */

.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,10,.78);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto; }
.brand__mark{
  display:grid; place-items:center;
  width:40px; height:40px; flex:0 0 40px;
  border-radius:11px;
  background:var(--grad);
  font-family:var(--display); font-size:1.1rem; letter-spacing:.06em; color:#fff;
  box-shadow:0 6px 20px rgba(224,27,46,.32);
}
.brand__text{
  font-family:var(--display); font-size:1.24rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:1; display:flex; flex-direction:column; gap:3px;
}
.brand__text small{
  font-family:var(--font); font-size:.57rem; font-weight:600;
  letter-spacing:.24em; color:var(--dim);
}

.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a{
  text-decoration:none; font-size:.88rem; font-weight:500; color:var(--muted);
  transition:color .18s ease;
}
.nav__links a:hover{ color:var(--text); }
.nav__links .btn{ color:#fff; }

.nav__toggle{
  display:none; width:44px; height:44px; padding:11px;
  background:none; border:1px solid var(--line); border-radius:11px; cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; background:var(--text); border-radius:2px; transition:.22s ease; }
.nav__toggle span+span{ margin-top:5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero{ position:relative; padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,84px); overflow:hidden; }

.hero__glow{
  position:absolute; inset:-40% -20% auto -20%; height:170%;
  background:
    radial-gradient(48% 40% at 14% 26%, rgba(224,27,46,.26), transparent 64%),
    radial-gradient(42% 38% at 86% 6%,  rgba(255,138,61,.13), transparent 62%);
  filter:blur(16px); pointer-events:none;
}
.hero__inner{ position:relative; }

/* Animated waveform, pure CSS */
.wave{
  display:flex; align-items:flex-end; gap:4px; height:52px;
  margin-bottom:clamp(28px,5vw,52px);
}
.wave span{
  width:3px; border-radius:2px;
  background:var(--grad);
  opacity:.75;
  animation:bar 1.5s ease-in-out infinite;
}
.wave span:nth-child(3n)  { animation-duration:1.9s; }
.wave span:nth-child(3n+1){ animation-duration:1.25s; }
.wave span:nth-child(4n)  { animation-delay:-.6s; }
.wave span:nth-child(5n)  { animation-delay:-1.1s; }
.wave span:nth-child(7n)  { animation-delay:-.3s; }
@keyframes bar{
  0%,100%{ height:9px;  opacity:.45; }
  50%    { height:46px; opacity:1; }
}

/* Wordmark: solid line with a gradient echo behind it */
.hero__word{
  position:relative;
  font-family:var(--display);
  font-size:clamp(3.4rem, 13vw, 11rem);
  font-weight:400; letter-spacing:.01em; line-height:.84;
  text-transform:uppercase;
  margin:0 0 1.4rem;
}
.hero__word-solid{ position:relative; z-index:2; }
/* The ghost sits behind the solid word and must wrap identically to it,
   so it gets the same width and no nowrap. */
.hero__word-ghost{
  position:absolute; left:0; top:0; right:0; z-index:1;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translate(.14em, .085em);
  opacity:.5;
  pointer-events:none;
}

.hero__credentials{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.8rem;
}
.hero__credentials span{ position:relative; }
.hero__credentials span + span::before{
  content:"·"; position:absolute; left:-11px; color:var(--dim);
}
.hero__credentials em{
  font-style:normal; color:var(--red-soft);
  padding-left:18px; border-left:1px solid var(--line);
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2rem; }

/* Stat row */
.statrow{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0; list-style:none; margin:clamp(44px,6vw,72px) 0 0; padding:0;
  border-top:1px solid var(--line);
}
.statrow li{
  padding:26px 26px 26px 0;
  border-right:1px solid var(--line);
}
.statrow li:last-child{ border-right:0; }
.statrow strong{
  display:block; font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.6rem);
  letter-spacing:.02em; line-height:1; margin-bottom:.45rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.statrow span{ font-size:.85rem; color:var(--muted); display:block; max-width:22ch; }

/* ── Marquee ────────────────────────────────────────────────────────────── */

.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--bg-alt); padding:18px 0;
}
.marquee__track{
  display:flex; align-items:center; gap:38px; width:max-content;
  animation:slide 34s linear infinite;
}
.marquee__track span{
  font-family:var(--display); font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:.04em; text-transform:uppercase; color:var(--text);
  white-space:nowrap;
}
.marquee__track span:nth-child(4n+3){
  color:transparent; -webkit-text-stroke:1px var(--red);
}
.marquee__track i{ color:var(--red); font-style:normal; font-size:.9rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── Sections ───────────────────────────────────────────────────────────── */

.section{ padding:clamp(66px,9vw,120px) 0; }
.section--alt{ background:var(--bg-alt); border-block:1px solid var(--line-soft); }

/* ── Selected work ──────────────────────────────────────────────────────── */

/* Roster of artists produced */
.roster{
  display:flex; flex-wrap:wrap; gap:10px;
  list-style:none; margin:0 0 2.6rem; padding:0;
}
.roster li{
  font-family:var(--display); font-size:1.15rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:999px;
  padding:.3em 1em; line-height:1.5;
  transition:color .18s ease, border-color .18s ease;
}
.roster li:hover{ color:var(--text); border-color:var(--red); }

/* Highlight releases — typographic, no cover art needed */
.credits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:18px; }

.credit{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px 24px 28px;
  transition:border-color .22s ease, transform .22s ease;
}
.credit:hover{ border-color:rgba(224,27,46,.45); transform:translateY(-4px); }

.credit__role{
  font-size:.66rem; font-weight:650; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red-soft); margin:0 0 .8rem;
}
.credit h3{
  font-family:var(--display); font-size:2rem; letter-spacing:.03em;
  text-transform:uppercase; line-height:1; margin:0 0 .3rem;
}
.credit__artist{
  margin:0 0 .9rem; font-size:.95rem; font-weight:600; color:var(--text);
}
.credit__note{ margin:0; font-size:.86rem; color:var(--muted); }

/* Spotify catalog embed */
.spotify{ margin-top:26px; border-radius:var(--radius-lg); overflow:hidden; }
.spotify iframe{ display:block; width:100%; border:0; border-radius:var(--radius-lg); }

/* ── Beat catalog ───────────────────────────────────────────────────────── */

.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:24px; }
.chip{
  background:var(--surface); color:var(--muted);
  border:1px solid var(--line); border-radius:999px;
  padding:.48em 1.15em; font:inherit; font-size:.84rem; font-weight:550;
  cursor:pointer; transition:.18s ease;
}
.chip:hover{ color:var(--text); border-color:#3a3a46; }
.chip.is-active{ background:var(--red); border-color:var(--red); color:#fff; }

.beatlist{ display:flex; flex-direction:column; gap:10px; }

.beat{
  display:grid; grid-template-columns:auto 1fr auto auto auto;
  align-items:center; gap:16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 18px;
  transition:border-color .2s ease, background .2s ease;
}
.beat:hover{ border-color:rgba(224,27,46,.45); background:var(--surface-2); }
.beat.is-playing{ border-color:var(--red); background:rgba(224,27,46,.07); }
.beat[hidden]{ display:none; }

.beat__play{
  display:grid; place-items:center;
  width:44px; height:44px; flex:0 0 44px;
  border:none; border-radius:50%;
  background:rgba(224,27,46,.14); color:var(--red-soft);
  cursor:pointer; transition:.18s ease;
}
.beat__play:hover{ background:var(--red); color:#fff; }
.beat__play svg{ width:20px; height:20px; fill:currentColor; margin-left:2px; }
.beat.is-playing .beat__play{ background:var(--red); color:#fff; }
.beat.is-playing .beat__play svg{ margin-left:0; }

.beat__meta h3{ margin:0; font-size:1rem; }
.beat__meta p{ margin:0; font-size:.82rem; color:var(--muted); }

.beat__tags span{
  display:inline-block; font-size:.68rem; font-weight:650;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.3em .85em;
}
.beat__price{ font-weight:700; font-size:.98rem; }

/* ── Services list ──────────────────────────────────────────────────────── */

.svc{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
}
.svc__item{
  display:grid; grid-template-columns:auto 1fr; gap:24px;
  padding:30px 0; border-bottom:1px solid var(--line);
  transition:background .2s ease;
}
.svc__item:hover{ background:rgba(224,27,46,.03); }
.svc__num{
  font-family:var(--display); font-size:1.6rem; letter-spacing:.04em;
  color:transparent; -webkit-text-stroke:1px var(--red); line-height:1;
  padding-top:.15em;
}
.svc__item h3{ margin:0 0 .4rem; font-size:1.18rem; }
.svc__item p{ margin:0; color:var(--muted); max-width:62ch; font-size:.95rem; }

/* ── Membership tiers ───────────────────────────────────────────────────── */

.tiers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:18px; align-items:stretch;
}
.tier{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px 28px;
}
.tier--featured{
  border-color:var(--red);
  background:linear-gradient(180deg, rgba(224,27,46,.11), var(--surface) 46%);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
}
.tier__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:.45em 1.05em; border-radius:999px; white-space:nowrap;
}
.tier__price{
  font-family:var(--display); font-size:3.4rem; line-height:1;
  margin:.4rem 0 .2rem; letter-spacing:.02em;
}
.tier__price .cur{ font-size:1.5rem; vertical-align:super; color:var(--dim); }
.tier__price small{
  font-family:var(--font); font-size:.88rem; font-weight:500;
  color:var(--muted); letter-spacing:0;
}
.tier__note{ font-size:.78rem; color:var(--dim); margin:0 0 1.4rem; }

.tier ul{ list-style:none; margin:0 0 1.9rem; padding:0; flex:1; }
.tier li{
  position:relative; padding-left:26px; margin-bottom:.75rem;
  font-size:.92rem; color:var(--muted);
}
.tier li strong{ color:var(--text); }
.tier li::before{ content:"✓"; position:absolute; left:0; top:-1px; color:var(--red); font-weight:700; }

.member-portal{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  margin-top:26px; padding:26px 30px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.member-portal h3{ margin:0 0 .25rem; }
.member-portal p{ margin:0; color:var(--muted); font-size:.92rem; }

/* ── Booking calendar ───────────────────────────────────────────────────── */

.calendar{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; padding:8px;
}
/* GoHighLevel's form_embed.js hides booking widgets by default (it only expects
   forms and surveys). It sets inline styles without !important, so these win. */
.calendar iframe{
  display:block !important;
  width:100% !important;
  height:760px !important;
  min-height:760px !important;
  border:0;
  background:#fff;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
}

/* ── Studio / about ─────────────────────────────────────────────────────── */

.about{ display:grid; grid-template-columns:1.35fr .65fr; gap:52px; align-items:start; }

.about__lead{
  font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.8rem);
  letter-spacing:.02em; line-height:1.08; text-transform:uppercase;
  color:var(--text); margin:0 0 1.5rem; max-width:24ch;
}
.about__copy p{ color:var(--muted); max-width:60ch; }
.about__sign{
  font-family:var(--display); font-size:1.3rem; letter-spacing:.06em;
  color:var(--text) !important; margin-top:1.8rem;
}

/* Right column: portrait stacked above the facts panel.
   The <img> removes itself if the file isn't there yet, so the panel
   simply moves up and nothing looks broken. */
.about__side{ display:grid; gap:18px; align-content:start; }

.about__photo{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius-lg); border:1px solid var(--line);
}

.about__panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:30px 28px;
}

.factlist{ margin:0 0 1.8rem; display:grid; gap:22px; }
.factlist dt{
  font-size:.66rem; font-weight:650; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red-soft); margin-bottom:.45rem;
}
.factlist dd{ margin:0; font-size:.93rem; }
.factlist dd span{ color:var(--dim); }

/* How a session runs */
.flow{
  list-style:none; margin:clamp(48px,7vw,80px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  gap:0; border-top:1px solid var(--line);
}
.flow li{
  padding:28px 26px 28px 0;
  border-right:1px solid var(--line);
}
.flow li:last-child{ border-right:0; }
.flow__step{
  display:block; font-size:.66rem; font-weight:650; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red-soft); margin-bottom:.9rem;
}
.flow h3{
  font-family:var(--display); font-size:1.55rem; letter-spacing:.03em;
  text-transform:uppercase; line-height:1; margin:0 0 .6rem;
}
.flow p{ margin:0; font-size:.88rem; color:var(--muted); max-width:30ch; }

/* ── Contact ────────────────────────────────────────────────────────────── */

.contact{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start; }

.contact__list{ list-style:none; margin:2rem 0 0; padding:0; }
.contact__list li{
  display:flex; align-items:baseline; gap:14px;
  padding:14px 0; border-top:1px solid var(--line);
}
.contact__list span{
  flex:0 0 92px; font-size:.68rem; font-weight:650;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.contact__list a{ text-decoration:none; font-weight:550; }
.contact__list a:hover{ color:var(--red-soft); }

.formframe{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; padding:8px;
}
.formframe iframe{ display:block; width:100%; min-height:700px; border:0; background:#fff; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer{ background:var(--bg); border-top:1px solid var(--line); padding:54px 0 40px; }
.footer__top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:26px; padding-bottom:30px; border-bottom:1px solid var(--line);
}
.footer nav{ display:flex; flex-wrap:wrap; gap:24px; }
.footer nav a{ text-decoration:none; color:var(--muted); font-size:.9rem; }
.footer nav a:hover{ color:var(--text); }
.footer__legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  margin:24px 0 0; color:var(--dim); font-size:.82rem;
}

/* ── Sticky player ──────────────────────────────────────────────────────── */

.player{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:rgba(14,14,18,.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.player[hidden]{ display:none; }
.player__inner{ display:flex; align-items:center; gap:14px; height:66px; }

.player__btn{
  display:grid; place-items:center;
  width:40px; height:40px; flex:0 0 40px;
  border:none; border-radius:50%; background:var(--red); color:#fff; cursor:pointer;
}
.player__btn svg{ width:18px; height:18px; fill:currentColor; }

.player__title{
  flex:0 1 200px; min-width:0; font-weight:650; font-size:.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__seek{
  flex:1 1 auto; min-width:60px;
  -webkit-appearance:none; appearance:none;
  height:4px; border-radius:4px; background:var(--line); cursor:pointer;
}
.player__seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; border-radius:50%; background:var(--red); border:0;
}
.player__seek::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:var(--red); border:0;
}
.player__time{ font-variant-numeric:tabular-nums; font-size:.82rem; color:var(--muted); flex:0 0 auto; }
.player__close{
  background:none; border:none; color:var(--muted);
  font-size:1.7rem; line-height:1; cursor:pointer; padding:0 4px; flex:0 0 auto;
}
.player__close:hover{ color:var(--text); }

body.player-open{ padding-bottom:66px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width:980px){
  .about,.contact{ grid-template-columns:1fr; gap:34px; }
  .flow li{ padding-right:18px; }
  .flow li:nth-child(2n){ border-right:0; }
}

@media (max-width:860px){
  .nav__toggle{ display:block; }
  .nav__links{
    position:fixed; inset:76px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-alt); border-bottom:1px solid var(--line);
    padding:10px 24px 24px;
    transform:translateY(-140%); transition:transform .28s ease;
    max-height:calc(100vh - 76px); overflow-y:auto;
  }
  .nav__links.is-open{ transform:translateY(0); }
  .nav__links a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav__links .btn{ margin-top:16px; border-bottom:none; justify-content:center; }

  .statrow li{ padding-right:18px; }
  .statrow li:nth-child(2n){ border-right:0; }

  .beat{ grid-template-columns:auto 1fr auto; row-gap:12px; }
  .beat__tags{ grid-column:2; }
  .beat__price{ grid-column:3; grid-row:1; }
  .beat .btn{ grid-column:1 / -1; }

  .player__title{ flex-basis:110px; }
  .player__time{ display:none; }
}

@media (max-width:560px){
  .hero__word-ghost{ display:none; }
  .statrow{ grid-template-columns:1fr; }
  .statrow li{ border-right:0; border-bottom:1px solid var(--line); padding:20px 0; }
  .statrow li:last-child{ border-bottom:0; }
  .svc__item{ grid-template-columns:1fr; gap:10px; }
  .flow{ grid-template-columns:1fr; }
  .flow li{ border-right:0; border-bottom:1px solid var(--line); padding:22px 0; }
  .flow li:last-child{ border-bottom:0; }
  .footer__legal{ flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .wave span,.marquee__track{ animation:none !important; }
  .wave span{ height:24px; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}


/* Label on the studio facts panel inside the About section. */
.about__panel-title{
  font-family:var(--display); font-size:1.35rem; letter-spacing:.02em;
  margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--line);
}

/* ══════════════════════════════════════════════════════════════════════════
   PRICING — added when the real rates came in.
   These sit at the end of the file on purpose, so they override the base
   rules above without anyone having to hunt through the middle of the sheet.
   ══════════════════════════════════════════════════════════════════════════ */

/* Service name and its price share a baseline, and wrap on narrow screens. */
.svc__item h3{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.svc__item p a{
  color:var(--red-soft); text-decoration:none;
  border-bottom:1px solid rgba(255,71,87,.35);
}
.svc__item p a:hover{ border-color:var(--red-soft); }

.svc__price{
  font-family:var(--display); font-size:1.25rem; letter-spacing:.03em;
  color:var(--red-soft); white-space:nowrap;
}
.svc__price small{
  font-family:var(--font); font-size:.72rem; font-weight:500;
  letter-spacing:.04em; color:var(--dim);
}

/* The two beat licence tiers, above the beat list. */
.licenses{
  list-style:none; margin:0 0 34px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;
}
.licenses li{
  display:grid; grid-template-columns:1fr auto; gap:4px 16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px;
}
.licenses__name{ font-weight:600; font-size:.98rem; align-self:center; }
.licenses__price{
  font-family:var(--display); font-size:1.5rem; letter-spacing:.03em;
  color:var(--red-soft); align-self:center;
}
.licenses__note{
  grid-column:1 / -1; color:var(--dim); font-size:.84rem; line-height:1.5;
}

/* One membership, so don't stretch the card across the full width. */
.tiers--single{
  grid-template-columns:minmax(0,420px); justify-content:center;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGO — the real Cannis Rojo marks, added once the artwork arrived.
   Both PNGs are white artwork on transparency, so they sit on the dark
   background with no extra treatment. These override the older text
   lockup rules above.
   ══════════════════════════════════════════════════════════════════════════ */

/* CR monogram in the nav and footer, replacing the old gradient square. */
.brand__logo{
  height:38px; width:auto; display:block;
  flex:0 0 auto;
  transition:transform .18s ease, filter .18s ease;
}
.brand:hover .brand__logo{
  transform:translateY(-1px);
  filter:drop-shadow(0 0 12px rgba(224,27,46,.55));
}

/* Hero wordmark. The h1 keeps the heading semantics; the alt text carries
   the name for search engines and screen readers. */
.hero__word{
  margin:0 0 1.4rem;
  line-height:1;
}
.hero__logo{
  display:block;
  width:min(680px, 88%);
  height:auto;
  filter:drop-shadow(0 18px 50px rgba(224,27,46,.22));
}

@media (max-width:560px){
  .brand__logo{ height:32px; }
  .hero__logo{ width:92%; }
}


/* Hero banner artwork (replaces the standalone wordmark; the banner has it baked in) */
.hero__banner{
     display:block;
     width:100%;
     max-width:880px;
     height:auto;
     border-radius:18px;
     border:1px solid rgba(255,255,255,.07);
     box-shadow:0 26px 70px rgba(0,0,0,.55), 0 0 70px rgba(224,27,46,.16);
}
@media (max-width:760px){
     .hero__banner{ border-radius:14px; }
}


/* Centred hero */
.hero__inner{ text-align:center; }
.hero__banner{ margin-inline:auto; max-width:100%; }
.hero__credentials{ justify-content:center; flex-wrap:wrap; }
.hero__cta{ justify-content:center; flex-wrap:wrap; }
.hero__inner .lede{ margin-inline:auto; }

/* Portrait leads the About section, above the bio */
.about__portrait{
     display:block;
     width:100%;
     max-width:460px;
     aspect-ratio:4/5;
     object-fit:cover;
     object-position:center 18%;
     border-radius:var(--radius-lg);
     border:1px solid var(--line);
     margin:0 auto 46px;
}


/* Centred section headers across the page.
   Body copy inside cards and lists stays left-aligned for readability. */
.eyebrow{ justify-content:center; }
.display{ text-align:center; }
.section__sub{ text-align:center; margin-inline:auto; }
.section > .wrap > .note{ text-align:center; }
.about__lead{ text-align:center; margin-inline:auto; }
.chips{ justify-content:center; }
.tiers--single{ justify-content:center; }


/* Stat row captions: the span is capped narrower than its cell, so it needs
   auto margins to sit centred, and the cell needs symmetric padding. */
.statrow li{ padding-inline:26px; }
.statrow span{ margin-inline:auto; }

.roster{ justify-content:center; }


/* Centred About section: one column, centred, instead of copy-left / panel-right */
.about{
     grid-template-columns:1fr;
     max-width:720px;
     margin-inline:auto;
     gap:40px;
}
.about__copy p{ margin-inline:auto; }
.about__sign{ text-align:center; }
.about__side{ max-width:460px; margin-inline:auto; width:100%; }


/* Studio / mobile booking switch */
.bookmode{
     display:flex; justify-content:center; flex-wrap:wrap;
     gap:12px; margin:0 0 26px;
}
.bookmode__btn{
     appearance:none; cursor:pointer;
     display:flex; flex-direction:column; align-items:center; gap:3px;
     padding:14px 26px;
     font-family:var(--display); font-size:1.05rem; letter-spacing:.04em;
     text-transform:uppercase;
     color:var(--muted);
     background:var(--surface);
     border:1px solid var(--line);
     border-radius:var(--radius);
     transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.bookmode__btn small{
     font-family:var(--font); font-size:.74rem; letter-spacing:.01em;
     text-transform:none; color:var(--dim);
}
.bookmode__btn:hover{ color:var(--text); border-color:var(--line-soft); }
.bookmode__btn.is-on{
     color:#fff;
     background:linear-gradient(135deg, var(--ember), var(--red));
     border-color:transparent;
}
.bookmode__btn.is-on small{ color:rgba(255,255,255,.85); }
.calendar.is-hidden{ display:none !important; }
@media (max-width:560px){
     .bookmode{ flex-direction:column; }
     .bookmode__btn{ width:100%; }
}