/* South Sound Studios - Site Header 1.0.3
   Each studio is a set of tokens; switching studio only swaps tokens, logo, menu and buttons. */
.ssh, .ssh-drawer, .ssh-loader {
  --h:84px; --t:0.45s;
  --bg:#000; --surface:#111; --line:rgba(255,255,255,0.1);
  --fg:#fff; --muted:rgba(255,255,255,0.66);
  --accent:#f44f00; --accent-ink:#fff; --accent-glow:rgba(244,79,0,0.45);
  --font:'Roboto', system-ui, -apple-system, sans-serif; --display:'Bebas Neue', Impact, sans-serif;
}
.ssh[data-brand="fx"], .ssh-drawer[data-brand="fx"], .ssh-loader[data-brand="fx"] {
  --bg:#0d0d0d; --surface:#171714; --line:rgba(242,241,232,0.12);
  --fg:#f2f1e8; --muted:rgba(242,241,232,0.62);
  --accent:#c8f53c; --accent-ink:#0d0d0d; --accent-glow:rgba(200,245,60,0.35);
  --font:'Inter', system-ui, -apple-system, sans-serif; --display:'Inter', system-ui, sans-serif;
}
@media (max-width:1279px) { .ssh, .ssh-drawer { --h:76px; } }

/* keep theme / Elementor styles out */
.ssh *, .ssh *::before, .ssh *::after, .ssh-drawer *, .ssh-drawer *::before, .ssh-drawer *::after { box-sizing:border-box; }
.ssh ul, .ssh-drawer ul { list-style:none; margin:0; padding:0; }
.ssh li, .ssh-drawer li { margin:0; padding:0; list-style:none; }
.ssh li::before, .ssh-drawer li::before { content:none; }
.ssh a, .ssh-drawer a { text-decoration:none; box-shadow:none; background-image:none; }
.ssh img, .ssh-drawer img { max-width:none; border:0; border-radius:0; box-shadow:none; }
.ssh svg, .ssh-drawer svg { display:block; }
.ssh button, .ssh-drawer button { margin:0; text-transform:none; letter-spacing:normal; min-height:0; line-height:1; }

/* one studio at a time */
.ssh[data-brand="ss"] .b-fx, .ssh[data-brand="fx"] .b-ss,
.ssh-drawer[data-brand="ss"] .b-fx, .ssh-drawer[data-brand="fx"] .b-ss { display:none !important; }

/* ---------- header bar ---------- */
.ssh { position:fixed; top:0; left:0; right:0; z-index:999; height:calc(var(--h) + env(safe-area-inset-top, 0px)); margin:0;
  padding:env(safe-area-inset-top, 0px) 0 0; background:var(--bg); color:var(--fg); font-family:var(--font);
  transition:background var(--t), color var(--t); }
.ssh-spacer { height:calc(84px + env(safe-area-inset-top, 0px)); }
@media (max-width:1279px) { .ssh-spacer { height:calc(76px + env(safe-area-inset-top, 0px)); } }
body.admin-bar .ssh { top:32px; }
@media screen and (max-width:782px) { body.admin-bar .ssh { top:46px; } }
.ssh-in { position:relative; height:var(--h); max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:22px;
  padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px)); }
.ssh-line { position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--line); overflow:hidden; }
.ssh-line::after { content:''; position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(0.18); transition:background var(--t); }
.ssh.sweep .ssh-line::after { animation:ssh-sweep 0.9s cubic-bezier(.6,.05,.2,1); }
@keyframes ssh-sweep { 0% { transform:scaleX(0); } 60% { transform:scaleX(1); } 100% { transform:scaleX(0.18); } }

/* logo: both in one box, the active one fades in */
.ssh-logo { position:relative; display:block; flex-shrink:0; width:170px; height:66px; transition:width var(--t); }
.ssh[data-brand="fx"] .ssh-logo { width:205px; }
.ssh-logo img { position:absolute; left:0; top:50%; width:auto; transform:translateY(-50%); transition:opacity var(--t), transform var(--t); }
.ssh-logo .ss { height:66px; }
.ssh-logo .fx { height:28px; }
.ssh-logo .fx, .ssh[data-brand="fx"] .ssh-logo .ss { opacity:0; transform:translateY(-30%); pointer-events:none; }
.ssh[data-brand="fx"] .ssh-logo .fx { opacity:1; transform:translateY(-50%); pointer-events:auto; }

/* page links */
.ssh-nav { position:relative; flex:1; min-width:0; height:100%; }
.ssh-menu { position:absolute; inset:0; display:flex; align-items:center; gap:30px; transition:opacity var(--t), transform var(--t); }
.ssh-menu.m-fx, .ssh[data-brand="fx"] .ssh-menu.m-ss { opacity:0; transform:translateY(8px); pointer-events:none; }
.ssh[data-brand="fx"] .ssh-menu.m-fx { opacity:1; transform:none; pointer-events:auto; }
.ssh-menu a { position:relative; display:block; color:var(--muted); font:500 13px var(--font); letter-spacing:0.09em; text-transform:uppercase;
  padding:8px 0; white-space:nowrap; transition:color 0.2s; }
.ssh-menu a:hover, .ssh-menu a.on { color:var(--fg); }
.ssh-menu a.on::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); border-radius:2px; }

/* studio switch */
.ssh-switch { position:relative; display:flex; flex-shrink:0; padding:4px; border-radius:40px; background:rgba(255,255,255,0.06); border:1px solid var(--line); }
.ssh-switch a { position:relative; z-index:1; display:flex; align-items:center; gap:8px; color:var(--muted); font:500 12px var(--font);
  letter-spacing:0.06em; text-transform:uppercase; padding:9px 15px; border-radius:40px; white-space:nowrap; transition:color var(--t); }
.ssh-switch a:hover { color:var(--fg); }
.ssh-switch a img, .ssh-switch a svg { width:auto; height:16px; }
.ssh-switch a.on { color:var(--accent-ink); }
.ssh-switch .play path { fill:#c8f53c; transition:fill var(--t); }
.ssh-switch a.on .play path { fill:currentColor; }
.ssh-switch .thumb { position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:0; border-radius:40px; background:var(--accent);
  box-shadow:0 6px 18px var(--accent-glow); transition:transform var(--t) cubic-bezier(.6,.05,.2,1), width var(--t), background var(--t); }

/* buttons */
.ssh-ghost { flex-shrink:0; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px; border-radius:40px;
  border:1.5px solid var(--line); color:var(--fg); font:500 14px var(--font); white-space:nowrap; transition:border-color 0.2s, color 0.2s; }
.ssh-ghost:hover { border-color:var(--accent); color:var(--accent); }
.ssh-ghost svg { width:17px; height:17px; fill:currentColor; flex-shrink:0; }
@media (min-width:1280px) and (max-width:1439px) {
  .ssh-in > .ssh-ghost { width:44px; padding:0; justify-content:center; }
  .ssh-in > .ssh-ghost span { display:none; }
}
.ssh-book { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:40px;
  background:var(--accent); color:var(--accent-ink); font:600 14px var(--font); letter-spacing:0.01em; white-space:nowrap;
  box-shadow:0 8px 22px var(--accent-glow); transition:background var(--t), color var(--t), box-shadow var(--t), transform 0.2s; }
.ssh-book:hover { transform:translateY(-1px); color:var(--accent-ink); }
.ssh-book svg { width:16px; height:16px; fill:currentColor; }
.ssh a:focus-visible, .ssh button:focus-visible, .ssh-drawer a:focus-visible, .ssh-drawer button:focus-visible { outline:2px solid var(--fg); outline-offset:3px; }

.ssh-burger { display:none; flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent;
  cursor:pointer; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.ssh-burger:hover, .ssh-burger:focus { background:transparent; }
.ssh-burger i { display:block; width:18px; height:2px; background:var(--fg); border-radius:2px; transition:background var(--t); }

/* phones and tablets: menu button on the right, logo in the middle, buttons in the side menu */
@media (max-width:1279px) {
  .ssh-in { gap:12px; justify-content:space-between; }
  .ssh-nav, .ssh-switch, .ssh-in > .ssh-book, .ssh-in > .ssh-ghost { display:none !important; }
  .ssh .ssh-burger { display:flex; margin-left:auto; }
  .ssh-logo, .ssh[data-brand="fx"] .ssh-logo { position:absolute; left:50%; top:50%; width:200px; height:70px; transform:translate(-50%,-50%); }
  .ssh-logo img { left:50%; transform:translate(-50%,-50%); }
  .ssh-logo .fx, .ssh[data-brand="fx"] .ssh-logo .ss { transform:translate(-50%,-30%); }
  .ssh[data-brand="fx"] .ssh-logo .fx { transform:translate(-50%,-50%); }
  .ssh-logo .ss { height:70px; }
  .ssh-logo .fx { height:26px; }
}
@media (max-width:360px) {
  .ssh-logo, .ssh[data-brand="fx"] .ssh-logo { width:160px; }
  .ssh-logo .ss { height:60px; }
  .ssh-logo .fx { height:22px; }
}

/* ---------- side menu ---------- */
.ssh-drawer { position:fixed; inset:0; z-index:100001; visibility:hidden; font-family:var(--font); }
.ssh-drawer.open { visibility:visible; }
.ssh-shade { position:absolute; inset:0; background:rgba(0,0,0,0.6); opacity:0; transition:opacity 0.35s; }
.ssh-drawer.open .ssh-shade { opacity:1; }
.ssh-panel { position:absolute; top:0; bottom:0; right:0; width:min(88vw, 400px); background:var(--bg); color:var(--fg);
  border-left:1px solid var(--line); transform:translateX(102%); transition:transform 0.42s cubic-bezier(.6,.05,.2,1), background var(--t), color var(--t);
  display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:calc(18px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) 24px; }
.ssh-drawer.open .ssh-panel { transform:none; }
.ssh-panel-top { display:flex; justify-content:flex-end; }
.ssh-close { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; }
.ssh-close:hover, .ssh-close:focus { background:transparent; color:var(--fg); }
.ssh-close svg { width:20px; height:20px; fill:currentColor; }
.ssh-biglogo { position:relative; flex-shrink:0; height:118px; margin:12px 0 22px; }
.ssh-biglogo img { position:absolute; left:50%; top:50%; height:auto; transition:opacity var(--t), transform var(--t); }
.ssh-biglogo .ss { width:min(100%, 270px); transform:translate(-50%,-50%); }
.ssh-biglogo .fx { width:min(100%, 250px); transform:translate(-50%,-30%); opacity:0; }
.ssh-drawer[data-brand="fx"] .ssh-biglogo .ss { opacity:0; transform:translate(-50%,-70%); }
.ssh-drawer[data-brand="fx"] .ssh-biglogo .fx { opacity:1; transform:translate(-50%,-50%); }
.ssh-pick { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:22px; flex-shrink:0; }
.ssh-pick a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:18px 12px 16px; border-radius:16px;
  text-align:center; background:var(--surface); border:1.5px solid var(--line); color:var(--fg); font:500 12px var(--font);
  transition:border-color var(--t), background var(--t); }
.ssh-pick a.on { border-color:var(--accent); }
.ssh-pick .lg { display:flex; align-items:center; justify-content:center; width:100%; height:50px; }
.ssh-pick .lg img { display:block; width:min(100%, 118px); height:auto; transition:opacity var(--t); }
.ssh-pick a:not(.on) .lg img { opacity:0.55; }
.ssh-pick small { display:block; color:var(--muted); font-size:12px; line-height:1.35; }
.ssh-dmenu { margin:0 0 22px; display:none; }
.ssh-drawer[data-brand="ss"] .ssh-dmenu.m-ss, .ssh-drawer[data-brand="fx"] .ssh-dmenu.m-fx { display:block; }
.ssh-dmenu a { display:flex; align-items:center; justify-content:space-between; padding:15px 2px; border-bottom:1px solid var(--line);
  color:var(--fg); font-family:var(--display); font-size:30px; line-height:1; letter-spacing:0.02em; }
.ssh-drawer[data-brand="fx"] .ssh-dmenu a { font-size:20px; font-weight:800; letter-spacing:-0.01em; text-transform:uppercase; padding:17px 2px; }
.ssh-dmenu a:hover, .ssh-dmenu a.on { color:var(--accent); }
.ssh-dmenu a svg { width:20px; height:20px; fill:var(--muted); }
.ssh-dbtns { display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.ssh-dbtns .ssh-book { height:52px; font-size:15px; width:100%; }

/* ---------- loading screen while switching studio ---------- */
.ssh-loader { position:fixed; inset:0; z-index:100002; display:flex; align-items:center; justify-content:center; background:var(--bg);
  opacity:0; visibility:hidden; transition:opacity 0.28s ease, visibility 0s linear 0.28s; }
.ssh-loader.show { opacity:1; visibility:visible; transition:opacity 0.28s ease; }
.ssh-loader.instant { transition:none !important; }
.ssh-loader-in { position:relative; width:min(72vw, 300px); height:150px; }
.ssh-loader-in img { position:absolute; left:50%; top:42%; width:100%; height:auto; max-width:none; transform:translate(-50%,-50%) scale(0.96); opacity:0;
  transition:opacity 0.3s ease, transform 0.6s cubic-bezier(.2,.8,.2,1); }
.ssh-loader[data-brand="ss"] img.ss, .ssh-loader[data-brand="fx"] img.fx { opacity:1; transform:translate(-50%,-50%) scale(1); }
.ssh-loader[data-brand="fx"] img.fx { width:88%; }
.ssh-loader-bar { position:absolute; left:15%; right:15%; bottom:0; height:3px; border-radius:3px; background:var(--line); overflow:hidden; }
.ssh-loader-bar i { position:absolute; top:0; bottom:0; left:0; width:40%; border-radius:3px; background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow); animation:ssh-load 1.1s cubic-bezier(.6,.05,.3,1) infinite; }
@keyframes ssh-load { 0% { transform:translateX(-110%); } 100% { transform:translateX(260%); } }

@media (prefers-reduced-motion:reduce) { .ssh *, .ssh-drawer *, .ssh, .ssh-drawer, .ssh-loader, .ssh-loader * { transition:none !important; animation:none !important; } }