/* =============================================================================
   CUE — "The Session" dark theme
   Subject: electronic music production mentorship.
   Visual language: a modern DAW / mixing desk — waveforms, a transport ruler
   with cue-point markers, channel-strip metadata in mono type.
   Accent: CUE orange (#FF5A00). Hand-authored, no build step.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --ink:      #0a0a0b;
  --ink-2:    #0d0d0f;
  --panel:    #101013;
  --panel-2:  #17171b;
  --panel-3:  #1e1e23;
  --line:     #232329;
  --line-2:   #33333b;

  --text:     #ececee;
  --muted:    #7a7a85;
  --muted-2:  #55555f;

  --accent:      #ff5a00;
  --accent-soft: rgba(255, 90, 0, .14);
  --accent-line: rgba(255, 90, 0, .38);
  --accent-glow: rgba(255, 90, 0, .30);

  --font-display: 'Archivo Expanded', 'Archivo', sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --container: 1260px;
  --radius:    12px;
  --radius-sm: 8px;
  --section-y: clamp(72px, 9vw, 138px);
  --header-h:  74px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--accent); color: #0a0a0b; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 20px; border: 3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 44px);
  --gutter: clamp(20px, 5vw, 44px);
}
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 88px); }
.section--panel { background: var(--ink-2); border-block: 1px solid var(--line); }

/* Mono readout label — the structural "parameter" device */
.readout {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.readout::before {
  content: ""; width: 7px; height: 7px; background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow); border-radius: 1px;
}
.readout--muted { color: var(--muted); }
.readout--muted::before { background: var(--muted-2); box-shadow: none; }

.eyebrow { /* alias kept for blocks */ }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 60px); }
.section-head .readout, .section-head .eyebrow { margin-bottom: 22px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .readout { justify-content: center; }

.h-xl { font-size: clamp(2.7rem, 7.2vw, 6rem); }
.h-lg { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.lede { font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--muted); max-width: 62ch; line-height: 1.55; }
.text-accent { color: var(--accent); }
.mono { font-family: var(--font-mono); }

/* ---------- Buttons (transport style) ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #0a0a0b;
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 26px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: var(--btn-bg); color: var(--btn-fg);
  cursor: pointer;
  transition: transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
  white-space: nowrap;
}
.btn::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: var(--cue-icon) center / contain no-repeat;
          mask: var(--cue-icon) center / contain no-repeat;
}
:root {
  --cue-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%201a11%2011%200%201%200%200%2022%2011%2011%200%200%200%200-22zm0%203a8%208%200%201%201%200%2016%208%208%200%200%201%200-16z'/%3E%3Cpolygon%20points='10,7.5%2010,16.5%2017.5,12'/%3E%3C/svg%3E");
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px var(--accent-glow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { --btn-fg: #fff; border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.btn--sm { padding: 11px 18px; font-size: 12px; }
.btn--sm::before { width: 15px; height: 15px; }

.link-cue {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}
.link-cue svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.link-cue:hover { color: var(--accent); }
.link-cue:hover svg { transform: translateX(5px); }

/* ---------- Signature: waveform + cue-ruler ---------- */
.waveform { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; }
.waveform span {
  flex: 1; min-width: 2px; border-radius: 2px;
  background: linear-gradient(to top, var(--accent), rgba(255,90,0,.35));
  transform-origin: bottom; animation: wave 1.4s var(--ease) infinite alternate;
}
@keyframes wave { from { transform: scaleY(.28); } to { transform: scaleY(1); } }

/* CDJ jog-wheel / cue button — signature graphic */
.jog { width: 100%; height: 100%; display: block; overflow: visible; }
.jog__spin { transform-origin: 100px 100px; animation: jog-spin 16s linear infinite; }
@keyframes jog-spin { to { transform: rotate(360deg); } }

/* Transport ruler with cue-point markers — used as hero element + divider */
.cue-ruler {
  position: relative; height: 30px;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 100%) 0 100% / 26px 8px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 100%) 0 100% / 104px 14px no-repeat;
  border-bottom: 1px solid var(--line);
}
.cue-ruler .cue {
  position: absolute; top: 0; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 9px solid var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.cue-ruler .playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text); opacity: .5; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(10,10,11,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(9,9,10,.92); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-logo { display: inline-flex; align-items: center; }
.site-logo svg { height: 30px; width: auto; display: block; }
.site-header .site-logo svg { height: 46px; }

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); position: relative;
}
.main-nav a:hover { color: var(--text); }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; background: var(--accent); transition: width .25s var(--ease);
}
.main-nav a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); background: transparent;
  border-radius: var(--radius-sm); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--text); transition: .25s var(--ease); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(56px, 8vw, 104px); padding-bottom: 0; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(58% 60% at 82% 8%, rgba(255,90,0,.16), transparent 62%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__session {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 26px; margin-bottom: 40px; border-bottom: 1px solid var(--line);
}
.hero__session b { color: var(--text); font-weight: 600; }
.hero__session .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hero h1 { max-width: 16ch; margin-bottom: 30px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__sub { font-size: clamp(1.05rem, 1.5vw, 1.32rem); color: var(--muted); max-width: 52ch; margin-bottom: 38px; line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero__deck { margin-top: clamp(48px, 6vw, 80px); }
.hero__wave { height: clamp(90px, 13vw, 150px); }
.hero__stats { display: flex; gap: clamp(24px, 4vw, 52px); }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1; }
.stat__num em { font-style: normal; color: var(--accent); }
.stat__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 9px; }
.hero__ruler { margin-top: 40px; }

/* Hero entrance + ambient animation */
.hero::before { animation: cue-aurora 14s ease-in-out infinite alternate; }
.hero__session { animation: cue-rise .7s var(--ease) both; }
.hero h1        { animation: cue-rise .8s .08s var(--ease) both; }
.hero__sub      { animation: cue-rise .8s .16s var(--ease) both; }
.hero__cta      { animation: cue-rise .8s .24s var(--ease) both; }
.hero__deck     { animation: cue-rise .9s .32s var(--ease) both; }
.hero h1 em { position: relative; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .09em;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  animation: cue-underline 1s 1s var(--ease) forwards;
}
@keyframes cue-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes cue-underline { to { transform: scaleX(1); } }
@keyframes cue-aurora { from { transform: translate3d(0,0,0); } to { transform: translate3d(-5%,4%,0); } }

/* Sweeping playhead across the hero waveform */
.hero__wave { position: relative; }
.hero__wave::after {
  content: ""; position: absolute; top: -8%; bottom: -8%; left: 0; width: 2px;
  background: linear-gradient(180deg, transparent, #fff 30%, var(--accent) 70%, transparent);
  box-shadow: 0 0 20px 3px var(--accent-glow);
  animation: cue-sweep 5s linear infinite;
}
@keyframes cue-sweep { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Hero background visualiser (grid + spectrum + sweeping playhead) */
.hero__viz { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__viz-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 58px 58px; opacity: .55;
  -webkit-mask-image: radial-gradient(95% 75% at 55% 15%, #000 18%, transparent 82%);
          mask-image: radial-gradient(95% 75% at 55% 15%, #000 18%, transparent 82%);
  animation: cue-aurora 18s ease-in-out infinite alternate;
}
.hero__viz-wave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%; padding-inline: 1.5vw; opacity: .2;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 65%);
          mask-image: linear-gradient(180deg, transparent, #000 65%);
}
.hero__viz-wave .waveform { gap: 4px; }
.hero__viz-wave .waveform span { animation-duration: 1.9s; }
.hero__viz-sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent) 55%, transparent);
  box-shadow: 0 0 34px 7px var(--accent-glow); opacity: .55;
  animation: cue-sweep 6.5s linear infinite;
}

/* ---------- Courses as a tracklist ---------- */
.tracklist { border-top: 1px solid var(--line); }
.track {
  position: relative; display: grid;
  grid-template-columns: 58px minmax(0,1fr) 220px 150px 44px;
  align-items: center; gap: 26px;
  padding: 30px 8px; border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease); overflow: hidden;
}
.track::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease);
}
.track:hover { background: linear-gradient(90deg, var(--accent-soft), transparent 40%); }
.track:hover::before { transform: scaleY(1); }
.track__no { font-family: var(--font-mono); font-size: 13px; color: var(--muted-2); }
.track__main h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -.02em; margin: 0 0 8px; }
.track__main p { font-size: 14.5px; color: var(--muted); margin: 0; max-width: 52ch; }
.track__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2); padding: 5px 10px; border-radius: 5px;
}
.chip--accent { color: var(--accent); border-color: var(--accent-line); }
.track__price { font-family: var(--font-mono); font-size: 15px; color: var(--text); text-align: right; }
.track__price small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .08em; margin-top: 3px; }
/* Compact rows (homepage: all programmes at a glance) */
.track--compact { grid-template-columns: 44px minmax(0,1fr) auto 40px; gap: 20px; padding: 16px 8px; }
.track--compact .track__main h3 { font-size: clamp(1rem, 1.3vw, 1.15rem); margin: 0; font-weight: 700; }
.track--compact .track__tags { justify-content: flex-end; }
.track--compact .track__go { width: 38px; height: 38px; }
.track--compact .track__go svg { width: 16px; height: 16px; }
@media (max-width: 1040px) { .track--compact { grid-template-columns: 40px minmax(0,1fr) 38px; } .track--compact .track__tags { display: none; } }
@media (max-width: 560px)  { .track--compact { grid-template-columns: 30px minmax(0,1fr) 38px; row-gap: 0; padding: 14px 4px; } }
.track__go {
  width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--text); transition: all .25s var(--ease); justify-self: end;
}
.track:hover .track__go { border-color: var(--accent); background: var(--accent); color: #0a0a0b; }
.track__go svg { width: 16px; height: 16px; }

/* ---------- Modules (why grid) ---------- */
.modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.module { background: var(--panel); padding: 34px 28px; transition: background .3s var(--ease); }
.module:hover { background: var(--panel-2); }
.module__meter { display: flex; gap: 3px; align-items: flex-end; height: 22px; margin-bottom: 24px; }
.module__meter i { width: 4px; background: var(--line-2); border-radius: 1px; }
.module:hover .module__meter i { background: var(--accent); }
.module__meter i:nth-child(1){height:40%} .module__meter i:nth-child(2){height:70%} .module__meter i:nth-child(3){height:55%} .module__meter i:nth-child(4){height:100%} .module__meter i:nth-child(5){height:30%}
.module__no { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); letter-spacing: .1em; }
.module h3 { font-size: 1.16rem; margin: 6px 0 10px; letter-spacing: -.02em; }
.module p { font-size: 14px; color: var(--muted); }

/* ---------- Split / about ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split__screen {
  aspect-ratio: 5/4; border-radius: var(--radius); overflow: hidden; position: relative;
  background: radial-gradient(120% 120% at 70% 10%, rgba(255,90,0,.16), transparent 55%), var(--panel);
  border: 1px solid var(--line); display: grid; place-items: center;
}
.split__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
}
.split__screen .site-logo { width: 62%; color: #fff; opacity: .92; position: relative; z-index: 1; }
.split__screen .jog { width: 62%; max-width: 320px; position: relative; z-index: 1; }
.split ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 15px; }
.split li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; }
.split li svg { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 3px; }

/* ---------- Studios ---------- */
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.room {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(30px, 4vw, 48px); min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--panel); transition: border-color .3s var(--ease);
}
.room:hover { border-color: var(--accent-line); }
.room__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.room h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: -.02em; }
.room p { color: var(--muted); font-size: 14.5px; margin-top: 12px; max-width: 40ch; }
.room__wave { position: absolute; inset: auto 0 0 0; height: 40px; opacity: .5; padding: 0 clamp(30px,4vw,48px) 22px; }

/* ---------- Blog ---------- */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.post-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.post-card__thumb { aspect-ratio: 16/10; overflow: hidden; background: radial-gradient(120% 120% at 70% 10%, rgba(255,90,0,.12), transparent 55%), var(--panel-2); position: relative; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-card__thumb img { transform: scale(1.05); }
.post-card__thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.post-card__thumb-fallback svg { width: 42px; height: 42px; color: var(--line-2); }
.post-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { display: flex; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.post-card__cat { color: var(--accent); }
.post-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.12rem; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 20px; }
.post-card .link-cue { margin-top: auto; }

/* ---------- CTA (master fader) ---------- */
.cta { position: relative; }
.cta__panel {
  position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--accent-line);
  background: radial-gradient(90% 140% at 15% 0%, rgba(255,90,0,.22), transparent 55%), var(--panel);
  padding: clamp(48px, 7vw, 88px) clamp(30px, 6vw, 72px);
}
.cta__panel .readout { margin-bottom: 22px; }
.cta h2 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); max-width: 16ch; }
.cta p { color: var(--muted); font-size: 1.12rem; max-width: 46ch; margin: 18px 0 34px; }
.cta__wave { position: absolute; right: 0; bottom: 0; width: 46%; max-width: 520px; height: 60%; opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--line); padding-top: clamp(58px, 7vw, 88px); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 56px; }
.footer-brand svg { height: 36px; width: auto; margin-bottom: 22px; color: #fff; }
.footer-brand p { color: var(--muted); font-size: 14.5px; max-width: 34ch; }
.footer-col h4 { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 20px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.footer-col a { color: var(--muted); font-size: 14.5px; }
.footer-col a:hover { color: var(--accent); }
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a { width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); }
.footer-social a:hover { color: var(--accent); border-color: var(--accent); }
.footer-social svg { width: 17px; height: 17px; margin: auto; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 24px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; }

/* ---------- Blog archive / single ---------- */
.page-hero { padding-top: clamp(54px, 8vw, 96px); padding-bottom: clamp(38px, 5vw, 56px); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); letter-spacing: -.03em; }
.post-body { max-width: 740px; margin-inline: auto; font-size: 17px; line-height: 1.7; }
.post-body h2, .post-body h3 { letter-spacing: -.02em; margin-top: 1.6em; }
.post-body h2 { font-size: 1.7rem; }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body img { border-radius: var(--radius); margin-block: 1.6em; }
.post-body blockquote { border-left: 3px solid var(--accent); margin: 1.6em 0; padding: 4px 0 4px 22px; color: var(--text); font-size: 1.2rem; }
.post-hero-thumb { aspect-ratio: 21/9; border-radius: var(--radius); overflow: hidden; margin-bottom: 44px; border: 1px solid var(--line); }
.post-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Imported article content (unwrapped full-HTML posts) — normalise to the theme */
.post-body .page-wrap, .post-body .container, .post-body main, .post-body article { max-width: none; width: auto; margin: 0; padding: 0; background: transparent; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { font-family: var(--font-display); color: var(--text); line-height: 1.12; }
.post-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; margin: 2em 0 .6em; padding-top: 1.6em; border-top: 1px solid var(--line); }
.post-body h3 { font-size: 1.25rem; margin: 1.6em 0 .5em; }
.post-body p, .post-body li { color: #c9c9cf; }
.post-body strong { color: var(--text); }
.post-body ul, .post-body ol { padding-left: 1.2em; margin: 1em 0; }
.post-body li { margin-bottom: .5em; }
.post-body ul li::marker { color: var(--accent); }
.post-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.post-body a:hover { border-bottom-color: var(--accent); }
/* breadcrumb */
.post-body .breadcrumb, .post-body nav[aria-label="Breadcrumb"] { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.post-body .breadcrumb a { color: var(--muted); border: 0; }
.post-body .breadcrumb a:hover { color: var(--accent); }
/* category / tag pills */
.post-body .category-tag, .post-body .tag, .post-body .pill { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); padding: 6px 12px; border-radius: 6px; margin-bottom: 18px; }
/* deck / intro */
.post-body .article-deck, .post-body .lead, .post-body .intro, .post-body .subtitle { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--text); margin-bottom: 22px; font-family: var(--font-body); }
/* meta row */
.post-body .article-meta, .post-body .meta { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); padding: 16px 0; border-block: 1px solid var(--line); margin-bottom: 36px; }
/* table of contents / callouts / cards */
.post-body .toc, .post-body nav.toc, .post-body .table-of-contents,
.post-body .callout, .post-body .note, .post-body .box, .post-body .card, .post-body aside {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 22px 26px; margin: 28px 0;
}
.post-body .toc a, .post-body .table-of-contents a { border: 0; color: var(--muted); }
.post-body .toc a:hover { color: var(--accent); }
/* tables */
.post-body table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15px; display: block; overflow-x: auto; }
.post-body th, .post-body td { text-align: left; padding: 12px 16px; border: 1px solid var(--line); }
.post-body th { background: var(--panel); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.post-body blockquote { border-left: 3px solid var(--accent); background: var(--panel); margin: 1.8em 0; padding: 18px 24px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text); font-size: 1.15rem; }
.post-body img { border-radius: var(--radius); margin-block: 1.6em; }
/* grey image/screenshot placeholders in the course-style articles */
.post-body .screenshot, .post-body .photo, .post-body [class*="placeholder"] { background: var(--panel-2); border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: 40px 24px; text-align: center; color: var(--muted-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 24px 0; }

/* ---------- Pagination ---------- */
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #0a0a0b; }

/* ---------- Single course (product) ---------- */
.course-hero { position: relative; overflow: hidden; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.course-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 85% 0%, rgba(255,90,0,.16), transparent 60%); pointer-events: none; }
.course-hero .container { position: relative; z-index: 1; }
.course-crumb { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 30px; }
.course-crumb a { color: var(--muted); }
.course-crumb a:hover { color: var(--accent); }
.course-hero__grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.course-hero h1 { margin: 16px 0 20px; }
.course-hero__intro { margin-bottom: 30px; }
.course-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.course-cta .button, .course-cta .single_add_to_cart_button { /* style woo button as ghost btn */
  font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 24px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer;
}
.course-cta .button:hover, .course-cta .single_add_to_cart_button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.course-spec { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 8px 24px 24px; }
.course-spec__row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.course-spec__row span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.course-spec__row b { color: var(--text); font-weight: 600; text-align: right; }
.course-spec__price { padding-top: 20px; font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.course-spec__price span { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.course-spec__price-note { display: block; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 6px; font-weight: 400; }

.learn-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.learn-item { grid-column: span 2; background: var(--panel); padding: 28px 26px; display: flex; gap: 16px; align-items: flex-start; transition: background .3s var(--ease); }
/* No empty cells on the last row: 1 leftover fills the row, 2 leftovers split it */
.learn-item:last-child:nth-child(3n+1) { grid-column: span 6; }
.learn-item:nth-last-child(2):nth-child(3n+1), .learn-item:last-child:nth-child(3n+2) { grid-column: span 3; }
.learn-item:hover { background: var(--panel-2); }
.learn-item__no { font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding-top: 2px; }
.learn-item p { margin: 0; font-size: 15px; color: #c9c9cf; }

.syllabus { border-top: 1px solid var(--line); }
.lesson { display: grid; grid-template-columns: 58px 1fr; gap: 22px; padding: 24px 6px; border-bottom: 1px solid var(--line); align-items: baseline; }
.lesson__no { font-family: var(--font-display); font-size: 1.1rem; color: var(--muted-2); }
.lesson__body h3 { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.01em; margin: 0 0 6px; }
.lesson__body p { margin: 0; color: var(--muted); font-size: 14.5px; }

.incl-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 15px; }
.incl-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; }
.incl-list li svg { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 3px; }

@media (max-width: 900px) {
  .course-hero__grid { grid-template-columns: 1fr; }
  .learn-grid { grid-template-columns: 1fr; }
  .learn-grid .learn-item { grid-column: auto; }
}

/* ---------- Neon-inspired polish (glow borders, beams, hover glows) ---------- */
/* Soft glow on dark cards */
.post-card:hover, .room:hover { box-shadow: 0 24px 60px -30px var(--accent-glow); }
.module { position: relative; }
.module:hover { box-shadow: inset 0 0 0 1px var(--accent-line); }
.learn-item:hover { box-shadow: inset 0 0 0 1px var(--accent-line); }
/* Gradient hairline caps on panels (Neon signature) */
.course-spec, .cta__panel { position: relative; }
.course-spec::before, .cta__panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .55;
}
.course-spec { box-shadow: 0 30px 80px -50px rgba(0,0,0,.9); }
.cta__panel { box-shadow: 0 40px 90px -50px var(--accent-glow); }
.section-head--center .readout { justify-content: center; }

/* ---------- 404 ---------- */
.error-404 { position: relative; overflow: hidden; min-height: 60vh; display: flex; align-items: center; }
.error-404__beam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 55% at 50% 0%, rgba(255,90,0,.20), transparent 62%); }
.error-404__inner { text-align: center; max-width: 660px; margin-inline: auto; position: relative; z-index: 1; }
.error-404 .readout { justify-content: center; margin-bottom: 24px; }
.error-404__code { font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 16vw, 11rem); line-height: 1; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.5vw, 16px); }
.error-404__cue { width: clamp(70px, 14vw, 140px); display: inline-flex; }
.error-404 h1 { margin: 16px 0 14px; }
.error-404 .lede { margin-inline: auto; }
.error-404__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 32px 0 40px; }
.error-404__links { display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 26px; border-top: 1px solid var(--line); }
.error-404__links a:hover { color: var(--accent); }

/* ---------- WooCommerce (shop / archive / cart / checkout / account) ---------- */
.woo-wrap { min-height: 50vh; }
.woocommerce .woocommerce-result-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.woocommerce .woocommerce-ordering select { background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px 14px; font-family: var(--font-mono); font-size: 12px; }
.woocommerce .woocommerce-breadcrumb { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 30px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--accent); }
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 30px 0 0; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 0; transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.woocommerce ul.products li.product:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 24px 60px -30px var(--accent-glow); }
.woocommerce ul.products li.product a img { margin: 0; border-radius: 0; aspect-ratio: 4/3; object-fit: cover; background: var(--panel-2); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--text); padding: 20px 22px 6px; }
.woocommerce ul.products li.product .price { display: block; padding: 0 22px; font-family: var(--font-mono); color: var(--muted); font-size: 14px; }
.woocommerce ul.products li.product .price .amount { color: var(--text); }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { margin: 16px 22px 22px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 11px 18px; border-radius: var(--radius-sm); background: var(--accent); color: #0a0a0b; border: 0; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product .added_to_cart:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--accent-glow); background: var(--accent); color: #0a0a0b; }
/* dark placeholder image */
.woocommerce ul.products li.product img[src*="placeholder"], .woocommerce img.wp-post-image[src*="placeholder"] { opacity: .12; filter: grayscale(1) invert(1); }
/* cart / checkout / account tables + forms */
.woocommerce table.shop_table, .woocommerce .cart-collaterals .cart_totals { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); border-collapse: separate; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top: 1px solid var(--line); color: var(--text); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce .select2-container--default .select2-selection--single, .woocommerce #order_review, .woocommerce-account .woocommerce-Input { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--text); padding: 12px 14px; }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button.alt { background: var(--accent); color: #0a0a0b; border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 0; padding: 13px 22px; }
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover { background: var(--accent-600); color: #0a0a0b; }
.woocommerce a.button.wc-backward, .woocommerce .button:not(.alt) { background: transparent; border: 1px solid var(--line-2); color: var(--text); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--panel); }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { background: var(--panel); border-top: 3px solid var(--accent); color: var(--text); border-radius: var(--radius-sm); }
.woocommerce .woocommerce-message a, .woocommerce-info a { color: var(--accent); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 14px 18px; color: var(--muted); font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--accent); background: var(--panel); }
@media (max-width: 1000px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* ---------- Booking flow ---------- */
.booking { position: relative; overflow: hidden; }
.booking__beam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 50% at 80% 10%, rgba(255,90,0,.16), transparent 60%); }
.booking .container { position: relative; z-index: 1; }
.booking__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: stretch; margin-top: 34px; }
.booking__grid > div:first-child { display: flex; }
.booking__aside { display: flex; flex-direction: column; justify-content: center; }
.booking__steps { display: grid; gap: 18px; width: 100%; align-content: stretch; }
.booking__steps .step { height: 100%; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 20px; align-items: start; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); position: relative; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.step:hover { border-color: var(--line-2); box-shadow: 0 24px 60px -34px var(--accent-glow); }
.step__no { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--accent); }
.step h3 { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.01em; margin: 0 0 8px; }
.step p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; }
.booking__aside { border: 1px solid var(--accent-line); border-radius: var(--radius); background: radial-gradient(90% 120% at 20% 0%, rgba(255,90,0,.16), transparent 55%), var(--panel); padding: clamp(30px, 4vw, 44px); position: relative; box-shadow: 0 40px 90px -50px var(--accent-glow); }
.booking__aside h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 14px 0 10px; }
.booking__aside p { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.booking__contacts { display: grid; gap: 12px; margin-top: 8px; }
.booking__contact { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--text); transition: border-color .25s var(--ease), color .25s var(--ease); }
.booking__contact:hover { border-color: var(--accent); color: var(--accent); }
.booking__contact svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 900px) { .booking__grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; transition: border-color .3s var(--ease); }
.faq__item[open] { border-color: var(--accent-line); }
.faq__item summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.5rem; color: var(--accent); transition: transform .3s var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item .faq__a { padding: 0 26px 24px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ---------- ACF content block ---------- */
.custom-content { padding-block: var(--section-y); }
.custom-content .container { max-width: 820px; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .modules { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split__screen { order: -1; aspect-ratio: 16/9; max-height: 380px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .hero__deck { grid-template-columns: 1fr; }
  .hero__wave { order: 2; }
  .track { grid-template-columns: 46px minmax(0,1fr) 130px 40px; }
  .track__tags { display: none; }
}
@media (max-width: 980px) {
  .main-nav, .header-actions .btn { display: none; }
  .nav-toggle { display: flex; }
  .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--ink-2); border-bottom: 1px solid var(--line); padding: 10px 24px 24px; transform: translateY(-120%); transition: transform .35s var(--ease); z-index: 99; }
  body.nav-open .main-nav { display: flex; transform: translateY(0); }
  .main-nav a { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .main-nav a::after { display: none; }
}
@media (max-width: 760px) {
  .rooms { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .modules { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .track { grid-template-columns: 34px minmax(0,1fr) 40px; row-gap: 6px; }
  .track__price { display: none; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   NEON LAYER — aurora mesh, gradient-glow borders, bento, flow, grain.
   Adopts Neon.com's structural language on the CUE orange/cue identity.
   ===================================================================== */
:root {
  --radius:    16px;
  --radius-lg: 22px;
  --pill:      100px;
  --glow-violet: rgba(124, 58, 237, .16);
  --glow-amber:  rgba(255, 145, 40, .18);
}

/* Subtle film grain over everything (Neon texture) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Aurora mesh — soft drifting colour blobs behind sections */
.mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mesh span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.mesh .m1 { width: 46%; height: 70%; top: -18%; right: -6%; background: radial-gradient(circle, rgba(255,90,0,.42), transparent 68%); animation: mesh-a 20s ease-in-out infinite alternate; }
.mesh .m2 { width: 40%; height: 60%; bottom: -20%; left: -8%; background: radial-gradient(circle, var(--glow-violet), transparent 70%); animation: mesh-b 24s ease-in-out infinite alternate; }
.mesh .m3 { width: 34%; height: 50%; top: 30%; left: 40%; background: radial-gradient(circle, var(--glow-amber), transparent 72%); animation: mesh-a 28s ease-in-out infinite alternate; }
@keyframes mesh-a { to { transform: translate3d(-8%, 6%, 0) scale(1.1); } }
@keyframes mesh-b { to { transform: translate3d(9%, -7%, 0) scale(1.08); } }
.has-mesh { position: relative; }
.has-mesh > .container { position: relative; z-index: 1; }

/* Gradient-glow border — the Neon signature card treatment */
.module, .learn-item, .post-card, .room, .step, .booking__aside, .faq__item,
.woocommerce ul.products li.product, .bento__cell {
  position: relative; border-radius: var(--radius);
}
.module::after, .learn-item::after, .post-card::after, .room::after, .step::after,
.booking__aside::after, .faq__item::after, .woocommerce ul.products li.product::after, .bento__cell::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,90,0,.55), rgba(255,255,255,.08) 38%, transparent 66%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .45; transition: opacity .3s var(--ease);
}
.module:hover::after, .learn-item:hover::after, .post-card:hover::after, .room:hover::after,
.step:hover::after, .booking__aside::after, .faq__item[open]::after,
.woocommerce ul.products li.product:hover::after, .bento__cell:hover::after { opacity: 1; }
/* keep the modules grid seams clean under glow borders */
.modules { background: transparent; border: 0; gap: 16px; }
.module { background: var(--panel); border: 1px solid var(--line); }

/* Pill buttons with permanent soft glow + hover scale (Neon) */
.btn { border-radius: var(--pill); box-shadow: 0 6px 24px -10px var(--accent-glow); }
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 40px -12px var(--accent-glow); }
.btn--ghost { box-shadow: none; }
.btn--ghost:hover { box-shadow: none; }

/* Bento grid (asymmetric feature blocks) */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; }
.bento__cell { background: var(--panel); border: 1px solid var(--line); padding: 30px 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: background .3s var(--ease), transform .3s var(--ease); }
.bento__cell:hover { background: var(--panel-2); transform: translateY(-3px); }
.bento__cell--wide { grid-column: span 2; }
.bento__cell--tall { grid-row: span 2; }
.bento__cell .module__meter { margin-bottom: auto; }
.bento__head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.bento__cell h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; margin: 10px 0 8px; }
.bento__cell p { color: var(--muted); font-size: 14.5px; margin: 0; }
.bento__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; }
.bento__big em { font-style: normal; color: var(--accent); }
.bento__wave { height: 54px; margin-top: 18px; opacity: .5; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento__cell--wide { grid-column: span 2; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento__cell--wide, .bento__cell--tall { grid-column: auto; grid-row: auto; } }

/* Connected journey flow (nodes + glowing gradient line) */
.flow { position: relative; display: grid; grid-template-columns: repeat(var(--flow-cols, 5), 1fr); gap: 16px; margin-top: 20px; }
.flow::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent), transparent); opacity: .6; }
.flow__node { position: relative; text-align: center; z-index: 1; }
.flow__dot { width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line-2); font-family: var(--font-display); font-weight: 800; color: var(--accent); box-shadow: 0 0 0 6px var(--ink), 0 0 30px -6px var(--accent-glow); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.flow__node:hover .flow__dot { transform: translateY(-4px); box-shadow: 0 0 0 6px var(--ink), 0 0 40px -4px var(--accent-glow); border-color: var(--accent); }
.flow__step { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; }
.flow__node h4 { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; margin: 0 0 6px; }
.flow__node p { font-size: 13px; color: var(--muted); margin: 0; }
@media (max-width: 800px) { .flow { grid-template-columns: 1fr 1fr; gap: 28px 16px; } .flow::before { display: none; } }
@media (max-width: 460px) { .flow { grid-template-columns: 1fr; } }

/* Airier stats with a soft pulse (Neon key-metric glow) */
.stat__num em { text-shadow: 0 0 24px var(--accent-glow); animation: pulse-glow 3.5s ease-in-out infinite; }
@keyframes pulse-glow { 50% { text-shadow: 0 0 34px rgba(255,90,0,.6); } }

@media (prefers-reduced-motion: reduce) {
  .mesh span, .stat__num em { animation: none; }
}

/* ---------- Reveal + reduced motion ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .waveform span { animation: none; transform: scaleY(.6); }
  .jog__spin { animation: none; }
  .hero::before, .hero__session, .hero h1, .hero__sub, .hero__cta, .hero__deck,
  .hero h1 em::after, .hero__wave::after { animation: none; }
  .hero h1 em::after { transform: scaleX(1); }
  .hero__wave::after, .hero__viz-sweep { display: none; }
  .hero__viz-grid { animation: none; }
}

/* =====================================================================
   PRO / SIMPLE OVERRIDE — strip gimmicks, add restraint & whitespace.
   Loaded last so it wins the cascade.
   ===================================================================== */
:root {
  --font-display: 'Archivo', system-ui, sans-serif;
  --section-y: clamp(88px, 11vw, 168px);
}

/* Kill the decorative noise/gimmicks */
body::after { display: none !important; }                 /* film grain */
.mesh, .hero__viz, .bento__wave, .room__wave, .cta__wave,
.hero__ruler, .cue-ruler { display: none !important; }    /* scan line, waveforms, rulers */
.stat__num em { animation: none !important; text-shadow: none !important; }
.waveform { display: none !important; }                   /* no busy EQ bars */
.hero h1 em::after { display: none !important; }          /* no animated underline */

/* Calmer, cleaner headings */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; }
.h-xl { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; font-weight: 800; }
.h-lg { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.05; }
.h-md { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); }

/* Simpler eyebrow/readout — quiet, not shouty */
.readout, .hero__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.readout::before { width: 6px; height: 6px; background: var(--accent); box-shadow: none; }

/* Clean hero */
.hero { padding-block: clamp(70px, 12vw, 150px); }
.hero::before { background: radial-gradient(60% 60% at 88% 6%, rgba(255,90,0,.10), transparent 62%); animation: none; }
.hero__inner { max-width: 900px; }
.hero__eyebrow { display: inline-block; margin-bottom: 26px; }
.hero h1 { margin-bottom: 26px; }
.hero__sub { font-size: clamp(1.05rem, 1.4vw, 1.28rem); color: var(--muted); max-width: 56ch; line-height: 1.6; margin-bottom: 40px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(36px, 6vw, 80px); margin-top: clamp(56px, 8vw, 96px); padding-top: 40px; border-top: 1px solid var(--line); }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--text); letter-spacing: -.02em; }
.stat__label { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: 8px; }

/* Simple, quiet cards — remove gradient-glow borders, use clean 1px + subtle hover */
.module::after, .learn-item::after, .post-card::after, .room::after, .step::after,
.booking__aside::after, .faq__item::after, .woocommerce ul.products li.product::after,
.bento__cell::after, .course-spec::before, .cta__panel::before { display: none !important; }
.module, .learn-item, .post-card, .room, .step, .bento__cell, .booking__aside, .faq__item,
.woocommerce ul.products li.product { border: 1px solid var(--line); background: var(--panel); transition: border-color .25s var(--ease), transform .25s var(--ease); }
.module:hover, .post-card:hover, .room:hover, .step:hover, .bento__cell:hover,
.woocommerce ul.products li.product:hover { border-color: var(--line-2); box-shadow: none; transform: translateY(-3px); }
.learn-item:hover { box-shadow: none; }
.course-spec { box-shadow: none; }
.cta__panel { box-shadow: none; }

/* Quieter buttons */
.btn { box-shadow: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -14px var(--accent-glow); }

/* Softer track rows (courses) — remove the sliding accent lane feel, keep clean */
.track:hover { background: var(--panel); }

/* Flow diagram — calmer line + dots */
.flow::before { background: var(--line-2); opacity: 1; height: 1px; }
.flow__dot { box-shadow: 0 0 0 6px var(--ink); }
.flow__node:hover .flow__dot { box-shadow: 0 0 0 6px var(--ink); border-color: var(--accent); transform: translateY(-3px); }

/* Booking — drop the beam glow */
.booking__beam, .error-404__beam { background: radial-gradient(50% 55% at 50% 0%, rgba(255,90,0,.07), transparent 62%); }

/* Reveal: gentler */
[data-reveal] { transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }

@media (min-width: 900px) {
  .section-head { margin-bottom: clamp(48px, 5vw, 72px); }
}

/* =====================================================================
   TRANSITIONS & REVEALS — professional motion polish
   ===================================================================== */
/* No-JS safety: never hide content if JS is unavailable */
html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Scroll-reveal: smooth, subtle, staggered via JS transition-delay */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .65s var(--ease), transform .65s var(--ease); will-change: opacity, transform; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Consistent, smooth micro-interactions on interactive elements */
a, .chip, .track__go, .footer-social a, .booking__contact, .flow__dot,
.main-nav a, .link-cue, .btn, .course-spec__row, summary,
.woocommerce ul.products li.product .button { transition-timing-function: var(--ease); }
.chip { transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.chip:hover { border-color: var(--accent-line); color: var(--accent); }
.track { transition: background .3s var(--ease); }
.track__go { transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.track:hover .track__go { transform: translateX(3px); }
.post-card__thumb img { transition: transform .6s var(--ease); }
.faq__item { transition: border-color .3s var(--ease); }
.faq__item .faq__a { overflow: hidden; }
.site-logo svg { transition: transform .4s var(--ease); }
.site-logo:hover svg { transform: scale(1.03); }

/* Gentle fade for anchor jumps landing */
:target { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* =====================================================================
   HERO BACKGROUND — slow, professional drifting aurora (subtle)
   ===================================================================== */
.hero { position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -25%; right: -8%; width: 68%; height: 95%;
  background: radial-gradient(closest-side, rgba(255,90,0,.16), transparent 72%);
  filter: blur(24px); opacity: .9;
  animation: heroGlowA 22s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -14%; bottom: -30%; width: 56%; height: 75%;
  background: radial-gradient(closest-side, rgba(255,120,40,.09), transparent 72%);
  filter: blur(36px);
  animation: heroGlowB 30s ease-in-out infinite alternate;
}
@keyframes heroGlowA { from { transform: translate(0,0) scale(1); } to { transform: translate(-9%,7%) scale(1.18); } }
@keyframes heroGlowB { from { transform: translate(0,0) scale(1); } to { transform: translate(11%,-9%) scale(1.22); } }

/* A whisper of the same glow drifting behind the whole page (very subtle) */
body { position: relative; }
.site-header ~ * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

/* =====================================================================
   MODAL + CF7 FORM + ROTATING-WORD HERO
   ===================================================================== */
/* Modal */
.modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: mFade .3s var(--ease); }
.modal__panel {
  position: relative; width: calc(100% - 40px); max-width: 620px; margin: 6vh auto; max-height: 86vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 46px); box-shadow: 0 40px 120px -40px rgba(0,0,0,.9);
  animation: mIn .38s var(--ease);
}
.modal__panel .readout { margin-bottom: 16px; }
.modal__panel h3 { margin: 0 0 6px; }
.modal__lead { color: var(--muted); margin: 0 0 26px; }
.modal__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 1px solid var(--line-2); background: transparent; border-radius: 50%; color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.modal__close svg { width: 17px; height: 17px; }
.modal__close:hover { border-color: var(--accent); color: var(--accent); }
body.modal-lock { overflow: hidden; }
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* Contact Form 7 — dark, on-brand */
.wpcf7-form .cf7-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.wpcf7-form .cf7-field, .wpcf7-form p { margin: 0 0 4px; }
.wpcf7-form .cf7-full { grid-column: 1 / -1; }
.wpcf7-form label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel],
.wpcf7-form select, .wpcf7-form textarea {
  width: 100%; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  color: var(--text); padding: 13px 14px; font-family: var(--font-body); font-size: 15px; box-sizing: border-box;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wpcf7-form ::placeholder { color: var(--muted-2); }
.wpcf7-form textarea { min-height: 110px; resize: vertical; }
.wpcf7-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237a7a85'%20stroke-width='2'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 40px; }
.wpcf7-form .cf7-submit { margin-top: 22px; }
.wpcf7-form .wpcf7-submit {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; padding: 15px 26px; border-radius: var(--pill); border: 0;
  background: var(--accent); color: #0a0a0b; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wpcf7-form .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px var(--accent-glow); }
.wpcf7-not-valid-tip { color: #ff6b5e; font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0; text-transform: none; margin-top: 6px; }
.wpcf7-form input.wpcf7-not-valid, .wpcf7-form textarea.wpcf7-not-valid, .wpcf7-form select.wpcf7-not-valid { border-color: #ff6b5e; }
.wpcf7-response-output { border: 1px solid var(--line-2) !important; border-radius: var(--radius-sm); color: var(--text); margin: 18px 0 0 !important; padding: 14px 16px !important; font-size: 14px; }
.wpcf7-mail-sent-ok { border-color: var(--accent) !important; }
.wpcf7 .wpcf7-spinner { background-color: var(--muted); }
@media (max-width: 520px) { .wpcf7-form .cf7-grid { grid-template-columns: 1fr; } }

/* Rotating-word hero (framer-style, vanilla) */
.rotator { display: inline-grid; position: relative; vertical-align: bottom; overflow: hidden; padding-bottom: .08em; }
.rotator__word { grid-area: 1 / 1; color: var(--accent); opacity: 0; transform: translateY(.75em); transition: opacity .5s var(--ease), transform .5s var(--ease); white-space: nowrap; }
.rotator__word.is-active { opacity: 1; transform: none; }
.rotator__word.is-out { opacity: 0; transform: translateY(-.75em); }
html:not(.js) .rotator__word { opacity: 0; }
html:not(.js) .rotator__word:first-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rotator__word { transition: none; }
  .modal__panel, .modal__overlay { animation: none; }
}

/* =====================================================================
   ANIMATED HERO EXTRAS — dot grid, gradient title, button shine, dividers
   ===================================================================== */
/* cursor-reactive dot grid canvas */
.hero__dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero .hero__inner { position: relative; z-index: 2; }

/* gradient title accent (orange, like the reference's gradient title) */
.hero h1 em, .grad {
  background: linear-gradient(100deg, #ff5a00 0%, #ff8a3d 55%, #ffb056 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Premium button hover — light sweep + lift */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn:hover::after { animation: btnShine .75s var(--ease); }
.btn--ghost::after { background: linear-gradient(100deg, transparent, rgba(255,90,0,.22), transparent); }
@keyframes btnShine { from { left: -130%; } to { left: 130%; } }

/* Divider lines — hairline that fades at the edges with an orange node */
.divider { position: relative; height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent); }
.divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%,-50%) rotate(45deg); background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.divider-wrap { padding-block: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover::after { animation: none; }
}

/* =====================================================================
   PARTICLE FIELD placement + gradient fix + pathway build + mobile menu
   ===================================================================== */
/* particle canvas (hero + studio rooms) */
.field-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero .field-canvas { z-index: 0; }
.room { position: relative; }
.room .field-canvas { border-radius: inherit; }
.room > *:not(.field-canvas) { position: relative; z-index: 1; }

/* Gradient title — broaden to all heading <em> + fix last-glyph clipping */
h1 em, h2 em, h3 em, .grad {
  background: linear-gradient(100deg, #ff5a00 0%, #ff8a3d 55%, #ffb056 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: normal; padding-right: .08em; margin-right: -.06em;
}

/* Pathway: build left-to-right when it scrolls into view */
html.js .flow__node { opacity: 0; transform: translateY(16px) scale(.94); }
.flow.is-building .flow__node { animation: flowIn .55s var(--ease) forwards; }
.flow.is-building .flow__node:nth-child(1) { animation-delay: .15s; }
.flow.is-building .flow__node:nth-child(2) { animation-delay: .45s; }
.flow.is-building .flow__node:nth-child(3) { animation-delay: .75s; }
.flow.is-building .flow__node:nth-child(4) { animation-delay: 1.05s; }
.flow.is-building .flow__node:nth-child(5) { animation-delay: 1.35s; }
@keyframes flowIn { to { opacity: 1; transform: none; } }
.flow::before { transform: scaleX(0); transform-origin: left; transition: transform 1.7s var(--ease); }
.flow.is-building::before { transform: scaleX(1); }

/* Full-screen mobile menu with socials */
.main-nav__extra { display: none; }
@media (max-width: 980px) {
  .main-nav {
    position: fixed; inset: 0; height: 100dvh; width: 100%; z-index: 90;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
    background: var(--ink); border: 0; padding: 108px clamp(26px, 7vw, 44px) 44px;
    transform: translateX(100%); transition: transform .45s var(--ease), visibility 0s linear .45s; overflow-y: auto;
    visibility: hidden; /* off-canvas menu must not be focusable or add horizontal scroll */
  }
  body.nav-open .main-nav { transform: none; visibility: visible; transition-delay: 0s; }
  html { overflow-x: clip; }
  body.nav-open { overflow: hidden; }
  .main-nav a { width: 100%; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 8vw, 2.5rem); letter-spacing: -.02em; text-transform: none; color: var(--text); padding: 11px 0; border: 0; }
  .main-nav a:hover { color: var(--accent); }
  .main-nav a::after { display: none; }
  .main-nav__extra { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; margin-top: auto; padding-top: 40px; }
  .main-nav__extra .btn { align-self: flex-start; width: -moz-fit-content; width: fit-content; }
  .main-nav__social { display: flex; gap: 12px; }
  .main-nav__social a { width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 12px; display: grid; place-items: center; color: var(--muted); padding: 0; font-size: 0; }
  .main-nav__social a:hover { color: var(--accent); border-color: var(--accent); }
  .main-nav__social svg { width: 19px; height: 19px; margin: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .flow__node { opacity: 1 !important; transform: none !important; animation: none !important; }
  .flow::before { transform: none !important; }
}

/* ---- FAQ smooth open/close ---- */
.faq__a { overflow: hidden; transition: height .35s var(--ease); }

/* ---- Course rows: keep the arrow off the edge ---- */
.track { padding-inline: 22px; }

/* ---- Bento feature cell particle field ---- */
.bento__cell { position: relative; }
.bento__cell .field-canvas { border-radius: inherit; z-index: 0; }
.bento__cell > *:not(.field-canvas) { position: relative; z-index: 1; }

/* =====================================================================
   BLOG SINGLE — align article to the site container, comfortable measure
   ===================================================================== */
.article { width: 100%; }
.article__head { max-width: 820px; }           /* left-aligned to container, not centered */
.article__title { font-family: var(--font-display); font-weight: 800; text-transform: none; letter-spacing: -.03em; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.04; margin: 0 0 34px; }
.article .post-hero-thumb { width: 100%; max-width: none; aspect-ratio: 16/8; margin: 0 0 44px; }
/* reading column: left-aligned, comfortable width — overrides the centered .post-body */
.article__body { max-width: 760px; margin-inline: 0; }
.article__body .elementor, .article__body .elementor-widget, .article__body .elementor-widget-container,
.article__body .elementor-element, .article__body .e-con, .article__body .e-con-inner,
.article__body [class*="elementor-column"], .article__body [class*="elementor-section"] {
  width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important;
}
.article__foot { max-width: 760px; margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .article .post-hero-thumb { aspect-ratio: 16/9; } }

/* =====================================================================
   BACKGROUND DOT-GRID inside cards (subtle, behind content)
   ===================================================================== */
.room, .bento__cell, .course-spec, .cta__panel, .booking__aside { position: relative; overflow: hidden; }
.room > .field-canvas, .bento__cell > .field-canvas, .course-spec > .field-canvas,
.cta__panel > .field-canvas, .booking__aside > .field-canvas { position: absolute; inset: 0; z-index: 0; border-radius: inherit; opacity: .6; }
.room > *:not(.field-canvas), .bento__cell > *:not(.field-canvas), .course-spec > *:not(.field-canvas),
.cta__panel > *:not(.field-canvas), .booking__aside > *:not(.field-canvas) { position: relative; z-index: 1; }

/* =====================================================================
   TUTORS + TESTIMONIALS
   ===================================================================== */
.tutors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tutor-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.tutor-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.tutor-card__photo { position: relative; aspect-ratio: 4/5; overflow: hidden; background: radial-gradient(120% 120% at 70% 10%, rgba(255,90,0,.14), transparent 55%), var(--panel-2); }
.tutor-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tutor-card:hover .tutor-card__photo img { transform: scale(1.04); }
.tutor-card__ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 3.5rem; color: var(--line-2); }
.tutor-card__loc { position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); background: rgba(10,10,11,.7); backdrop-filter: blur(6px); border: 1px solid var(--line-2); padding: 5px 11px; border-radius: 100px; }
.tutor-card__body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; }
.tutor-card__body h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; margin: 0 0 4px; }
.tutor-card__role { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.tutor-card__body p { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.tutor-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); }
.tutor-card__social { display: flex; gap: 8px; }
.tutor-card__social a, .tutor-single__social a { width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.tutor-card__social a:hover, .tutor-single__social a:hover { color: var(--accent); border-color: var(--accent); }
.tutor-card__social svg, .tutor-single__social svg { width: 16px; height: 16px; margin: auto; }

.tutor-single__grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.tutor-single__photo { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: radial-gradient(120% 120% at 70% 10%, rgba(255,90,0,.14), transparent 55%), var(--panel-2); position: relative; }
.tutor-single__photo img { width: 100%; height: 100%; object-fit: cover; }
.tutor-single__spec { margin-top: 24px; }
.tutor-single__social { display: flex; gap: 10px; margin-top: 24px; }
.tutor-single__role { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 12px 0 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.testimonials { columns: 3; column-gap: 22px; }
.testimonial { break-inside: avoid; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 26px 26px 22px; }
.testimonial__stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testimonial__stars svg { width: 16px; height: 16px; color: var(--line-2); }
.testimonial__stars svg.is-on { color: var(--accent); }
.testimonial blockquote { margin: 0 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.testimonial figcaption { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; }
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__avatar--ph { display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line-2); font-family: var(--font-display); font-weight: 800; color: var(--accent); }
.testimonial figcaption strong { display: block; font-size: 14.5px; }
.testimonial figcaption em { font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }

@media (max-width: 900px) { .tutors-grid { grid-template-columns: repeat(2, 1fr); } .testimonials { columns: 2; } .tutor-single__grid { grid-template-columns: 1fr; } .tutor-single__photo { max-width: 360px; } }
@media (max-width: 560px) { .tutors-grid { grid-template-columns: 1fr; } .testimonials { columns: 1; } }

/* =====================================================================
   BENTO — 1 big left + 3 small right; gradient + orange meter
   ===================================================================== */
.bento { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: stretch; }
.bento__col { display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px; }
.bento__cell--feature { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 38px; }
.bento__big em { font-style: normal; padding-right: .06em; margin-right: -.05em;
  background: linear-gradient(100deg,#ff5a00 0%,#ff8a3d 55%,#ffb056 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.module__meter i { background: var(--accent); }        /* meter icon always orange */
.module:hover .module__meter i, .bento__cell:hover .module__meter i { background: var(--accent); }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } }

/* =====================================================================
   SLIDER (testimonials etc.)
   ===================================================================== */
.slider { position: relative; }
.slider__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; -ms-overflow-style: none; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.testimonials { columns: auto; }        /* override masonry columns */
.slider__track > * { scroll-snap-align: start; flex: 0 0 clamp(280px, 33%, 420px); margin: 0; }
.slider__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.slider__btn { width: 46px; height: 46px; border: 1px solid var(--line-2); background: transparent; border-radius: 50%; color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.slider__btn svg { width: 18px; height: 18px; }
.slider__btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.slider__btn:disabled { opacity: .35; cursor: default; }
.slider__btn:disabled:hover { border-color: var(--line-2); color: var(--text); background: transparent; }
@media (max-width: 640px) { .slider__track > * { flex-basis: 82%; } }

/* =====================================================================
   BOOKING MODAL — steps + Calendly + social icon polish
   ===================================================================== */
.modal__step[hidden] { display: none; }
.modal__skip { margin-top: 14px; background: none; border: 0; color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; cursor: pointer; padding: 6px 0; }
.modal__skip:hover { color: var(--accent); }
.modal:has([data-step="calendly"]:not([hidden])) .modal__panel { max-width: 760px; }
.calendly-inline-widget { border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); }

/* Cleaner brand social icons (used in footer, header, tutors, booking) */
.footer-social a, .main-nav__social a, .tutor-card__social a, .tutor-single__social a, .booking__contact { transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }

/* Hero light beams — fade out over the text (left) so copy stays readable */
.hero > .field-canvas {
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 22%, #000 58%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 22%, #000 58%, #000 100%);
}

/* Card beams: fade out on the left so they show more toward the right (like the hero) */
.room > .field-canvas, .bento__cell > .field-canvas, .course-spec > .field-canvas,
.cta__panel > .field-canvas, .booking__aside > .field-canvas {
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 20%, #000 62%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 20%, #000 62%, #000 100%);
}

/* =====================================================================
   Unify button hover: give WooCommerce / form / view-course buttons the
   same lift + glow + light-sweep shine as the hero .btn buttons.
   ===================================================================== */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button.alt, .cue-view-course, .woocommerce #respond input#submit {
  position: relative; overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.woocommerce a.button::after, .woocommerce button.button::after, .cue-view-course::after,
.woocommerce .button.alt::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.woocommerce a.button:hover::after, .woocommerce button.button:hover::after,
.cue-view-course:hover::after, .woocommerce .button.alt:hover::after { animation: btnShine .75s var(--ease); }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce .button.alt:hover, .cue-view-course:hover, .woocommerce #respond input#submit:hover,
.wpcf7-form .wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px var(--accent-glow);
}
.wpcf7-form .wpcf7-submit { transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease); }
/* icon buttons get a matching subtle lift too */
.slider__btn:hover, .modal__close:hover, .track:hover .track__go { transform: translateY(-2px); }

/* Booking (Calendly) modal — wider panel to fit the scheduler */
.modal--book .modal__panel { max-width: 760px; }
.modal--book .calendly-inline-widget { border-radius: var(--radius-sm); overflow: hidden; margin-top: 8px; }

/* =====================================================================
   MARQUEE — scrolling keyword band
   ===================================================================== */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--ink-2); padding-block: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: cue-marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(1.3rem, 2.8vw, 2.3rem); color: var(--text); padding-inline: 26px; }
.marquee__item.is-outline { color: transparent; -webkit-text-stroke: 1px var(--muted-2); }
.marquee__item::after { content: ""; width: 8px; height: 8px; margin-left: 52px; background: var(--accent); transform: rotate(45deg); flex: none; }
@keyframes cue-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- Promo / announcement bar (small marquee) ---- */
.promo-wrap { display: block; }
.promo-wrap__link { display: block; color: inherit; }
.marquee--promo { background: var(--accent); border-block: 0; padding-block: 9px; -webkit-mask-image: none; mask-image: none; }
.marquee--promo .marquee__track { animation-duration: 24s; }
.marquee--promo .marquee__item { font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #0a0a0b; padding-inline: 18px; }
.marquee--promo .marquee__item.is-outline { -webkit-text-stroke: 0; color: #0a0a0b; }
.marquee--promo .marquee__item::after { background: #0a0a0b; width: 5px; height: 5px; margin-left: 30px; }
.promo-wrap__link:hover .marquee--promo { background: var(--accent-600); }

/* Mobile: let long eyebrows/readouts wrap instead of overflowing */
@media (max-width: 620px) {
  .hero__eyebrow, .readout { white-space: normal; line-height: 1.5; }
  .hero__eyebrow { font-size: 11px; letter-spacing: .1em; }
  .hero__stats { gap: 22px 30px; }
}

/* ---------- Complianz consent banner — brand skin ---------- */
.cmplz-cookiebanner.cmplz-cookiebanner {
  --cmplz_banner_background_color: #111114 !important;
  --cmplz_banner_border_color: rgba(255,255,255,.08) !important;
  --cmplz_text_color: #e8e8ec !important;
  --cmplz_link_color: #ff5a00 !important;
  --cmplz_button_accept_background_color: #ff5a00 !important;
  --cmplz_button_accept_text_color: #0b0b0d !important;
  --cmplz_button_accept_border_color: #ff5a00 !important;
  --cmplz_button_deny_background_color: transparent !important;
  --cmplz_button_deny_text_color: #ffffff !important;
  --cmplz_button_deny_border_color: rgba(255,255,255,.22) !important;
  --cmplz_button_settings_background_color: transparent !important;
  --cmplz_button_settings_text_color: #ffffff !important;
  --cmplz_button_settings_border_color: rgba(255,255,255,.22) !important;
  --cmplz_button_border_radius: 999px !important;
  --cmplz_banner_border_radius: 16px !important;
  --cmplz_banner_border_width: 1px !important;
  display: flex !important; flex-direction: column !important; gap: 14px !important;
  background: #111114 !important; color: #e8e8ec !important;
  border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55) !important;
  font-family: var(--font-body) !important;
  max-width: 460px !important; width: calc(100% - 32px) !important;
  left: auto !important; right: 16px !important; bottom: 16px !important; top: auto !important; margin: 0 !important;
  padding: 22px 22px 18px !important;
}
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 !important; margin: 0 !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-title { font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: -.01em !important; font-size: 18px !important; text-align: left !important; color: #fff !important; padding: 0 !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-logo { display: none !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-body { padding: 0 !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-message { font-size: 14px !important; line-height: 1.55 !important; color: #b9b9c2 !important; text-align: left !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons { display: flex !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 1 1 0 !important; width: auto !important; min-height: 46px !important; padding: 12px 18px !important; font-family: var(--font-mono) !important; font-size: 12px !important; letter-spacing: .1em !important; text-transform: uppercase !important; font-weight: 700 !important; border-radius: 999px !important; transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease) !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: #ff5a00 !important; color: #0b0b0d !important; border: 1px solid #ff5a00 !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-btn.cmplz-deny, .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-btn:hover { transform: translateY(-1px); }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover { border-color: #fff !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links { display: flex !important; gap: 14px !important; padding: 0 !important; margin: 0 !important; justify-content: flex-start !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links a, .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-link { font-size: 12px !important; color: #8a8a94 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links a:hover { color: #ff5a00 !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close { color: #8a8a94 !important; position: static !important; width: 28px !important; height: 28px !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close:hover { color: #fff !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close svg { fill: currentColor !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories { gap: 8px !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 10px !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-category-header, .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-category-title { color: #fff !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-description { color: #b9b9c2 !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents { display: none !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-soft-cookie-wall, .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-tcf { display: none !important; }
@media (max-width: 560px) { .cmplz-cookiebanner.cmplz-cookiebanner { right: 8px !important; bottom: 8px !important; width: calc(100% - 16px) !important; padding: 18px 18px 16px !important; } }
.cmplz-manage-consent.cmplz-show { display: none !important; } /* no floating "Manage consent" tab — footer link handles it */
.cmplz-cookiebanner.cmplz-cookiebanner:not(.cmplz-show) { display: none !important; }

/* ---------- Learn / feature grids: clean card grid (no double borders, no jammed rounded cells) ---------- */
.learn-grid { gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; }
.learn-item { border-radius: var(--radius-sm); padding: 22px 24px; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); }
.learn-item__no { min-width: 26px; padding-top: 3px; font-size: 12px; letter-spacing: .06em; }
.learn-item p { font-size: 15px; line-height: 1.55; }
.learn-item:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
@media (max-width: 900px) { .learn-grid { gap: 10px; } .learn-item { padding: 18px 20px; } }

/* ---------- Footer credit ---------- */
.footer-credit a { color: var(--accent); font-weight: 700; text-decoration: none; }
.footer-credit a:hover { color: #fff; }

/* ---------- FAQ search + filters ---------- */
.faq-tools { max-width: 820px; margin: 0 auto 26px; display: grid; gap: 16px; }
.faq-search { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 56px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.faq-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,90,0,.12); }
.faq-search svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.faq-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font-family: var(--font-body); font-size: 16px; }
.faq-search input::placeholder { color: var(--muted-2); }
.faq-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.faq-search__clear { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.faq-search__clear:hover { color: var(--accent); }
.faq-search__clear[hidden] { display: none; }
.faq-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-filters .chip { cursor: pointer; background: transparent; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.faq-filters .chip:hover { color: var(--text); border-color: var(--line-2); }
.faq-filters .chip.is-active { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.faq-filters__count { opacity: .55; margin-left: 4px; }
.faq-empty { color: var(--muted); font-size: 15px; padding: 18px 0 0; }
.faq-empty a { color: var(--accent); }
.faq__item[hidden] { display: none; }
.faq__item summary mark { background: rgba(255,90,0,.22); color: inherit; border-radius: 3px; padding: 0 2px; }
@media (max-width: 560px) { .faq-search { height: 50px; padding: 0 14px; } .faq-search input { font-size: 15px; } }

/* cookie banner: keep buttons inside the card */
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons { flex-wrap: wrap !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-width: 0 !important; flex: 1 1 140px !important; }

/* ---------- Enrolment flow: compact horizontal cards on tablet/mobile ---------- */
@media (max-width: 800px) {
  .flow { grid-template-columns: 1fr 1fr; gap: 12px; }
  .flow__node { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
  .flow__dot { width: 52px; height: 52px; margin: 0; font-size: .95rem; box-shadow: none; }
  .flow__step { margin: 4px 0 4px; }
  .flow__node h4 { font-size: 1rem; }
  .flow__node p { font-size: 13.5px; }
}
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }
/* cookie banner: never scroll, buttons always fit */
.cmplz-cookiebanner.cmplz-cookiebanner { overflow: hidden !important; box-sizing: border-box !important; }
.cmplz-cookiebanner.cmplz-cookiebanner * { box-sizing: border-box; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons { max-width: 100% !important; overflow: hidden !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 1 1 0 !important; min-width: 0 !important; padding: 12px 12px !important; letter-spacing: .06em !important; overflow: hidden !important; text-overflow: ellipsis; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close:focus { outline: none !important; box-shadow: none !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close:focus-visible { outline: 2px solid #ff5a00 !important; outline-offset: 2px; border-radius: 6px; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-btn:focus { outline: none !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }

/* ---------- Check lists: badge-style ticks, tighter rhythm (site-wide) ---------- */
.incl-list, .split ul { gap: 10px; }
.incl-list li, .split li { align-items: flex-start; gap: 14px; font-size: 15.5px; line-height: 1.55; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); transition: border-color .25s var(--ease), transform .25s var(--ease); }
.incl-list li:hover, .split li:hover { border-color: var(--accent-line); }
.incl-list li svg, .split li svg { width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); box-sizing: border-box; }
.incl-list li span, .split li span { color: #d6d6dc; }
.incl-list--plain li { padding: 0; border: 0; background: none; }

/* ---------- Booking conditions page ---------- */
.cond-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.cond-card { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 28px 28px 24px; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.cond-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.cond-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cond-card__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--accent); width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--accent-line); background: var(--accent-soft); display: grid; place-items: center; flex: none; }
.cond-card__head h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; margin: 0; }
.cond-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cond-card__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: #d6d6dc; }
.cond-card__list li svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin-top: 2px; box-sizing: border-box; }
.cond-note { margin-top: 22px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border: 1px solid var(--accent-line); border-radius: var(--radius); background: radial-gradient(90% 120% at 0% 0%, rgba(255,90,0,.12), transparent 55%), var(--panel); }
.cond-note svg { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.cond-note p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.cond-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 800px) { .cond-grid { grid-template-columns: 1fr; gap: 12px; } .cond-card { padding: 22px 20px 18px; } }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close, .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close:focus, .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; background: none !important; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close svg { width: 16px !important; height: 16px !important; }

/* ---------- Apply: application panel ---------- */
.apply-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(32px, 5vw, 60px); border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--panel); }
.apply-panel__beam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 100% 0%, rgba(255,90,0,.18), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgba(255,90,0,.08), transparent 60%); }
.apply-panel > *:not(.apply-panel__beam) { position: relative; z-index: 1; }
.apply-panel__copy .lede { max-width: 52ch; }
.apply-panel__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.apply-panel__meta .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; color: var(--text); }
.apply-panel__meta .chip svg { width: 14px; height: 14px; color: var(--accent); }
.btn--lg { padding: 18px 30px; font-size: 14px; }
.apply-panel__aside { border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(0,0,0,.25); padding: 26px 26px 22px; }
.apply-panel__aside h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.apply-panel__aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.apply-panel__aside li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: #d6d6dc; }
.apply-panel__aside li span { font-family: var(--font-mono); font-size: 11px; color: var(--accent); padding-top: 4px; min-width: 22px; }
.apply-panel__aside p { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .apply-panel { grid-template-columns: 1fr; padding: 26px 22px; } .apply-panel__copy .btn { width: 100%; justify-content: center; } }
@media (max-width: 800px) {
  .flow__node { grid-template-columns: 52px 1fr; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 2px; }
  .flow__dot { grid-column: 1; grid-row: 1 / 4; align-self: start; }
  .flow__step, .flow__node h4, .flow__node p { grid-column: 2; }
  .flow__step { margin: 4px 0 2px; }
  .flow__node h4 { margin: 0 0 6px; }
}

/* ---------- Section rhythm: dividers + alternating tints so nothing reads as a black void ---------- */
main > .section { position: relative; }
main > .section + .section { border-top: 1px solid var(--line); }
main > .section + .section::before { content: ""; position: absolute; left: 50%; top: -1px; width: min(520px, 60%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255,90,0,.45), transparent); pointer-events: none; }
main > .section:nth-of-type(even):not(.section--panel):not(.cta):not(.booking):not(.hero) { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%), var(--ink); }
.section--panel { background: radial-gradient(70% 60% at 50% 0%, rgba(255,90,0,.06), transparent 60%), var(--ink-2); }
/* faster, softer reveal */
[data-reveal] { transform: translateY(10px); transition-duration: .5s; }

/* Articles pasted with their own page chrome: hide the bits the theme already provides */
.post-body .skip-link, .post-body .progress-bar, .post-body .article-header h1, .post-body header.article-header .article-title { display: none !important; }
.post-body .article-header { margin-bottom: 8px; }
/* article meta: author chip */
.post-body .article-meta { align-items: center; gap: 14px; }
.post-body .author-chip { display: flex; align-items: center; gap: 10px; }
.post-body .author-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.post-body .author-chip > div { display: flex; flex-direction: column; line-height: 1.3; }
.post-body .author-name { color: var(--text); font-weight: 700; letter-spacing: 0; text-transform: none; font-family: var(--font-body); font-size: 14px; }
.post-body .author-chip > div > span:last-child { font-size: 11px; }
.post-body .meta-divider { width: 1px; height: 18px; background: var(--line-2); display: inline-block; }
@media (max-width: 560px) { .post-body .meta-divider { display: none; } }

.faq__item summary .faq__q { flex: 1 1 auto; min-width: 0; }

/* ---------- Mobile card carousels ---------- */
@media (max-width: 760px) {
  .is-carousel { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0 6px; margin-inline: calc(-1 * var(--gutter, 20px)); padding-inline: var(--gutter, 20px); scroll-padding-inline: var(--gutter, 20px); background: none !important; border: 0 !important; border-radius: 0 !important; }
  .is-carousel::-webkit-scrollbar { display: none; }
  .is-carousel > * { flex: 0 0 min(84%, 340px) !important; width: auto !important; min-width: 0; scroll-snap-align: start; grid-column: auto !important; height: auto; align-self: stretch; }
  .is-carousel > *:last-child { margin-right: var(--gutter, 20px); }
  .carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .carousel-dots button { width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0; background: var(--line-2); transition: width .25s var(--ease), background .25s var(--ease); cursor: pointer; }
  .carousel-dots button.is-active { width: 20px; border-radius: 3px; background: var(--accent); }
  /* cards inside carousels: consistent height + text wraps inside the card */
  .is-carousel .prog-card, .is-carousel .room, .is-carousel .module, .is-carousel .cond-card, .is-carousel .learn-item, .is-carousel .post-card, .is-carousel .tutor-card { height: 100%; box-sizing: border-box; }
  .is-carousel .chip, .is-carousel .btn { white-space: normal; text-align: center; }
  .is-carousel .prog-card .btn { width: 100%; justify-content: center; }
}
.carousel-dots { display: none; }
@media (max-width: 760px) { .carousel-dots { display: flex; } }

/* ---------- Mobile overflow guards ---------- */
@media (max-width: 560px) {
  .prog-grid > *, .learn-grid > *, .cond-grid > *, .rooms > *, .tutors-grid > *, .grid > *, .split > * { min-width: 0; }
  .prog-card .chip, .chip { white-space: normal; line-height: 1.4; }
  .prog-card .btn, .btn--sm { white-space: normal; text-align: center; }
  .prog-card .prog-meta { font-size: 12.5px; }
}
@media (max-width: 760px) { .tutor-card__photo { aspect-ratio: 1 / 1; } }
@media (max-width: 900px) { .learn-grid { grid-template-columns: 1fr !important; } .learn-grid > * { grid-column: auto !important; } }

/* accessibility-only text must never render */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* archive pagination */
.navigation.pagination { margin-top: 40px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.navigation.pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.navigation.pagination a.page-numbers:hover { color: var(--text); border-color: var(--accent); }
.navigation.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #0b0b0d; font-weight: 700; }

/* ---------- Chips: always a single box (border can never break across lines) ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; box-sizing: border-box; line-height: 1.35; vertical-align: middle; }
.prog-card .chip, .track .chip, .course-spec .chip { margin-bottom: 4px; }
@media (max-width: 560px) {
  .prog-card .chip, .is-carousel .chip { white-space: normal; text-align: left; letter-spacing: .08em; padding: 6px 10px; }
}

/* ---------- Carousel cards: equal height, CTA pinned to the bottom ---------- */
@media (max-width: 760px) {
  .is-carousel { align-items: stretch !important; }
  .is-carousel > * { height: auto !important; min-height: 0; display: flex; flex-direction: column; }
  .is-carousel > *.carousel-dots { display: flex; flex-direction: row; }
  .is-carousel .prog-card, .is-carousel .room, .is-carousel .module, .is-carousel .cond-card, .is-carousel .learn-item, .is-carousel .post-card, .is-carousel .tutor-card { height: auto; flex: 1 1 auto; }
  .is-carousel .learn-item { flex-direction: row; }
  .is-carousel .prog-card > .btn, .is-carousel .prog-card > .prog-cta, .is-carousel .room > .btn, .is-carousel .cond-card > .btn { margin-top: auto; }
  .is-carousel .prog-card p:last-of-type { margin-bottom: 18px; }
  .is-carousel .prog-card .btn { font-size: 12px; letter-spacing: .12em; padding-inline: 16px; }
  .is-carousel .tutor-card > .tutor-card__body, .is-carousel .post-card > .post-card__body { flex: 1 1 auto; }
}

/* ---------- Mobile menu v2 ---------- */
.main-nav__head, .main-nav__meta { display: none; }
.main-nav > a[data-i]::before { content: none; }
@media (max-width: 980px) {
  /* logo + close button stay above the panel */
  .site-header .site-logo, .site-header .header-actions { position: relative; z-index: 95; }
  body.nav-open .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.nav-open .nav-toggle { border-color: var(--accent-line); background: var(--accent-soft); }

  .main-nav {
    justify-content: flex-start; gap: 0;
    padding: calc(var(--header-h) + 10px) clamp(22px, 6.5vw, 40px) max(26px, env(safe-area-inset-bottom));
    background: radial-gradient(90% 46% at 100% 0%, rgba(255,90,0,.16), transparent 62%), var(--ink);
  }
  .main-nav::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 75%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 75%);
  }
  .main-nav > * { position: relative; }
  .main-nav__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .main-nav__head .readout { margin: 0; }
  .main-nav__loc { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

  .main-nav > a[data-i] {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 14px 0; border: 0; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-weight: 700; font-size: clamp(1.55rem, 6.8vw, 2.2rem); letter-spacing: -.02em; line-height: 1.05; text-transform: none; color: var(--text);
    opacity: 0; transform: translateY(16px);
    transition: opacity .45s var(--ease), transform .55s var(--ease), color .2s var(--ease), padding-left .25s var(--ease);
  }
  .main-nav > a[data-i]::before { content: attr(data-i); font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .14em; color: var(--accent); flex: none; width: 24px; }
  .main-nav > a[data-i]::after {
    content: ""; display: block; position: static; margin-left: auto; width: 9px; height: 9px; flex: none; background: none; border-radius: 0;
    border: 0; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); opacity: .7;
    transition: transform .25s var(--ease), border-color .2s var(--ease);
  }
  .main-nav > a[data-i]:hover, .main-nav > a[data-i]:active { color: var(--accent); }
  .main-nav > a[data-i]:hover::after { width: 9px; height: 9px; border-color: var(--accent); transform: rotate(45deg) translate(2px, -2px); }
  .main-nav > a.is-current { color: var(--accent); }
  .main-nav > a.is-current::after { border-color: var(--accent); }
  body.nav-open .main-nav > a[data-i] { opacity: 1; transform: none; }
  body.nav-open .main-nav > a[data-i]:nth-of-type(1) { transition-delay: .06s; }
  body.nav-open .main-nav > a[data-i]:nth-of-type(2) { transition-delay: .11s; }
  body.nav-open .main-nav > a[data-i]:nth-of-type(3) { transition-delay: .16s; }
  body.nav-open .main-nav > a[data-i]:nth-of-type(4) { transition-delay: .21s; }
  body.nav-open .main-nav > a[data-i]:nth-of-type(5) { transition-delay: .26s; }
  body.nav-open .main-nav > a[data-i]:nth-of-type(6) { transition-delay: .31s; }
  body.nav-open .main-nav > a[data-i]:nth-of-type(7) { transition-delay: .36s; }

  .main-nav__extra {
    margin-top: auto; padding-top: 26px; gap: 18px; width: 100%; align-items: stretch;
    opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease) .38s, transform .55s var(--ease) .38s;
  }
  body.nav-open .main-nav__extra { opacity: 1; transform: none; }
  .main-nav__extra .btn {
    width: 100%; align-self: stretch; justify-content: center;
    font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
    padding: 17px 24px; border-radius: var(--pill); border: 0; color: var(--btn-fg);
  }
  .main-nav__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .main-nav__meta a {
    display: inline; width: auto; padding: 0; border: 0; opacity: 1; transform: none;
    font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; color: var(--muted);
  }
  .main-nav__meta a:hover { color: var(--text); }
  .main-nav__social { gap: 10px; }
  .main-nav__social:empty { display: none; }
}
@media (max-width: 760px) {
  .is-carousel .chip, .prog-card .chip { font-size: 10px; letter-spacing: .06em; padding: 6px 10px; }
  .is-carousel .prog-card .btn { font-size: 11.5px; letter-spacing: .1em; padding: 15px 14px; gap: 9px; }
}
/* Long CTAs must never overflow a phone: allow wrapping, keep them tidy */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; box-sizing: border-box; line-height: 1.3; }
  .btn::before { flex: none; }
  main .btn:not(.btn--sm):not(.header-actions .btn) { width: 100%; justify-content: center; }
  .hero__cta, .cta-row, .btn-row { display: flex; flex-direction: column; gap: 12px; }
}

/* ---------- FAQ accordion: padding lives on the inner wrapper so height animates cleanly ---------- */
.faq__item .faq__a { padding: 0; overflow: hidden; transition: height .38s var(--ease); will-change: height; }
.faq__item .faq__a-in { padding: 0 26px 24px; }
.faq__item .faq__a-in > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .faq__item .faq__a-in { padding: 0 20px 20px; } .faq__item summary { padding: 18px 20px; } }
/* Jog wheel must always sit fully inside its panel, whatever the panel's ratio */
.split__screen { container-type: size; }
.split__screen .jog { width: auto; height: 72%; max-height: 320px; max-width: 78%; aspect-ratio: 1 / 1; }
.split__screen .site-logo { width: auto; height: 46%; max-width: 70%; }
.split__screen .site-logo svg { width: 100%; height: 100%; }
@media (max-width: 980px) { .split__screen { aspect-ratio: 16 / 10; max-height: 360px; } .split__screen .jog { height: 78%; } }
.split__screen .jog { height: min(72cqh, 320px); width: min(72cqh, 320px); max-width: none; }
.split__screen .site-logo { height: 46cqh; width: auto; max-width: 70cqw; }
@media (max-width: 980px) { .split__screen .jog { height: min(80cqh, 320px); width: min(80cqh, 320px); } }
/* Mobile menu: no grid texture, just the soft glow */
.main-nav::before { content: none !important; }
/* Button text must never vanish on hover, wherever the button sits (nav, footer, 404, cards) */
a.btn:hover, .main-nav a.btn:hover, .main-nav__extra a.btn:hover, .error-404__links a.btn:hover, .footer-col a.btn:hover, .post-body a.btn:hover, button.btn:hover { color: var(--btn-fg); }
a.btn--ghost:hover, .main-nav a.btn--ghost:hover, .error-404__links a.btn--ghost:hover, button.btn--ghost:hover { color: #fff; }