@font-face{font-family:"Clash Display";src:url("../fonts/clash-display-700.woff2") format("woff2");font-weight:700;font-display:swap}
  @font-face{font-family:"Satoshi";src:url("../fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-display:swap}
  @font-face{font-family:"Satoshi";src:url("../fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-display:swap}
  :root{
    --bg:#080808; --surface:#121212; --fg:#ffffff; --muted:#a6a6ac; --faint:#7d7d83;
    --red:#d10000; --red-hi:#eb1b1b;
    --glass:rgba(20,20,23,.52); --glass-bd:rgba(255,255,255,.13); --glass-hi:rgba(255,255,255,.08);
    --blur:blur(20px) saturate(150%);
    --disp:"Clash Display","Satoshi",system-ui,sans-serif;
    --font:"Satoshi",-apple-system,"Segoe UI",Roboto,sans-serif;
    --wrap:1360px;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--red);color:#fff}
  :focus-visible{outline:2px solid var(--red-hi);outline-offset:3px;border-radius:4px}

  .glass{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
    border:1px solid var(--glass-bd);box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 46px -20px rgba(0,0,0,.7)}
  @media (prefers-reduced-transparency: reduce){.glass{background:rgba(17,17,19,.97);backdrop-filter:none;-webkit-backdrop-filter:none}}

  /* NAV */
  /* Centred with auto margins rather than `left:50%;transform:translateX(-50%)`. The transform is
     not needed for centring here and transforms are one of the things that can promote an element
     to a Backdrop Root, which is exactly what has to be avoided on this box — see below. */
  .nav{position:fixed;top:14px;left:0;right:0;margin-inline:auto;z-index:60;width:min(var(--wrap),calc(100% - 26px));border-radius:16px}

  /* ⚠️ THE NAV'S FROSTED LAYER IS PAINTED BY THIS PSEUDO-ELEMENT, NOT BY THE .nav BOX ITSELF.
     An element carrying `backdrop-filter` becomes a BACKDROP ROOT: any DESCENDANT with its own
     `backdrop-filter` then samples that root instead of the page behind it. The Services .dropdown
     is a descendant of .nav and hangs BELOW the nav's box, so there was nothing inside the root for
     it to sample — the dropdown rendered with zero blur (a razor-sharp screenshot showing straight
     through the open menu) while the nav above it blurred perfectly. Same declaration, same
     browser, opposite result, purely because one was nested inside the other.
     Painting the frost on .nav::before takes .nav out of the backdrop-root role, so the dropdown
     samples the page exactly like the nav does.
     ⚠️ DO NOT put `backdrop-filter` back on .nav (or on any ancestor of .dropdown). */
  .nav.glass{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
    background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
  @media (prefers-reduced-transparency: reduce){
    .nav.glass::before{background:rgba(17,17,19,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
  }
  .nav-in{display:flex;align-items:center;gap:22px;height:80px;padding:0 26px}
  .nav a{text-decoration:none!important}
  .brand{display:flex;align-items:center;gap:14px;margin-right:auto}
  .brand img{height:58px;width:auto;display:block;flex-shrink:0}
  .brand-name{font-family:var(--font);font-weight:500;text-transform:none;font-size:17px;letter-spacing:0;line-height:1;color:var(--red);white-space:nowrap}
  @media(max-width:520px){.brand img{height:46px}.brand-name{font-size:15px}}
  @media(max-width:360px){.brand-name{display:none}}
  .nav-links{display:flex;gap:24px;align-items:center}
  .nav-links a{font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--muted);transition:color .2s;white-space:nowrap}
  .nav-links a:hover{color:#fff}
  .nav-links a.nav-account{color:var(--red)}
  .nav-links a.nav-account:hover{color:var(--red-hi)}
  .nav-item{position:relative}
  .has-drop>a{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
  .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.75;transition:transform .25s}
  .has-drop:hover .caret,.has-drop:focus-within .caret{transform:rotate(180deg)}
  .has-drop::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:22px}
  .dropdown{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:256px;
    background:rgba(16,16,18,.74);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
    border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;
    opacity:0;visibility:hidden;transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1),visibility .25s;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)}
  .has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .dropdown a{padding:12px 16px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background .18s,color .18s}
  .dropdown a:hover{background:rgba(255,255,255,.07);color:#fff}
  .nav-book{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--red);padding:11px 18px;border-radius:10px;transition:.2s}
  .nav-book:hover{background:var(--red-hi)}
  .nav-toggle{display:none;flex:0 0 auto;position:relative;width:28px;height:18px;background:transparent;border:none;cursor:pointer;padding:0;margin-left:8px}
  .nav-toggle span{position:absolute;left:0;width:28px;height:2px;background:var(--fg);border-radius:2px;transition:top .25s,transform .25s,opacity .25s}
  .nav-toggle span:nth-child(1){top:2px}
  .nav-toggle span:nth-child(2){top:8px}
  .nav-toggle span:nth-child(3){top:14px}
  .nav.open .nav-toggle span:nth-child(1){top:8px;transform:rotate(45deg)}
  .nav.open .nav-toggle span:nth-child(2){opacity:0}
  .nav.open .nav-toggle span:nth-child(3){top:8px;transform:rotate(-45deg)}
  @media(max-width:820px){
    .nav-toggle{display:block}
    .nav-links{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
      background:rgba(12,12,15,.98);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.14);
      border-radius:16px;padding:12px;box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
      opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
    .nav.open .nav-links{opacity:1;visibility:visible;transform:none}
    .nav-links>a,.has-drop>a{padding:13px 14px;border-radius:10px;font-size:16px;width:100%;color:#ececed}
    .nav-links>a:hover,.has-drop>a:hover{background:rgba(255,255,255,.07);color:#fff}
    .nav-links a.nav-account{color:var(--red)}
    .has-drop{position:static}
    .caret{display:block;position:relative}
    /* enlarge the caret's tap target (invisible zone) so it's easy to hit; it sits at the far
       right (a is space-between) so it never overlaps the "Services" label's tap area */
    .caret::after{content:"";position:absolute;top:-20px;bottom:-20px;left:-30px;right:-18px}
    .has-drop>a{justify-content:space-between}
    .has-drop.open .caret{transform:rotate(180deg)}
    .dropdown{position:static;visibility:visible;transform:none;background:transparent;border:none;box-shadow:none;min-width:0;margin:0;max-height:0;overflow:hidden;opacity:0;padding:0 0 0 12px;transition:max-height .32s cubic-bezier(.16,1,.3,1),opacity .25s,padding .25s}
    .has-drop.open .dropdown{max-height:420px;opacity:1;padding:2px 0 6px 12px}
    .has-drop:hover .dropdown,.has-drop:focus-within .dropdown{transform:none}
    .dropdown a{padding:10px 14px;font-size:14.5px;color:var(--muted)}
  }
  /* dim + blur the page behind the open MOBILE menu (fixes bleed-through). This one is a
     full-viewport scrim on purpose: the mobile menu is a full-width panel and the whole page
     behind it is being covered. */
  body:has(.nav.open)::before{content:"";position:fixed;inset:0;z-index:55;background:rgba(6,6,9,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  /* ⚠️ THE DESKTOP DROPDOWN GETS NO PAGE-LEVEL EFFECT AT ALL — no scrim, no blur, no dim.
     The blur and the darkening belong to the PANEL, and only the panel: that is the .dropdown rule
     above, which pairs `background:rgba(16,16,18,.74)` with `backdrop-filter:blur(22px)`. Together
     those darken and blur exactly the slice of page sitting behind the menu and nothing else.

     Settled 2026-08-10 after three rounds. A `body:has(.nav .has-drop:hover)::before` overlay lived
     here twice; because it is `position:fixed;inset:0` it always hits the whole viewport, and every
     variant of it was rejected — with blur it read as the page going out of focus, without blur it
     read as the page going dark for no reason. There is no version of a full-viewport overlay that
     produces "only behind the dropdown", so do not add one back. If the effect behind the panel
     needs to be stronger, raise the alpha or the blur radius ON `.dropdown` itself.

     (The mobile rule above is different and stays: that menu really does cover the whole screen,
     so a full-viewport scrim is the honest thing to draw.) */

  /* HERO — asymmetric editorial split */
  .hero{min-height:100dvh;display:grid;grid-template-columns:1.28fr .72fr}
  .hero-content{align-self:center;padding:120px clamp(24px,4vw,56px) 64px clamp(24px,6vw,92px);max-width:860px}
  .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);margin:0 0 22px}
  .hero-locale{margin:16px 0 0;color:var(--muted)}
  h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(38px,4.7vw,66px);line-height:.98;letter-spacing:-.012em;margin:0}
  /* Closing punctuation of a heading is set in the studio red. Applied by
     mr_text_render() (functions.php) to any 'heading' field, so it covers the
     section h2s that used to carry an inline style. */
  h1 .p,h2 .p,h3 .p{color:var(--red)}

  /* HERO WORD ROLL — the last word of the h1 cycles (see home.js).
     vertical-align:bottom keeps the clipped box seated on the baseline of the rest of the
     line; without it the box's own line-box shifts the whole headline. */
  /* Width is FIXED to the widest word by home.js and never animates — see the note there.
     Animating it re-wrapped the headline on mobile and shoved the page down on every spin. */
  .mr-cyc{ display:inline-block; overflow:hidden; vertical-align:bottom; }
  .mr-cyc-track{ display:block; will-change:transform,filter; transform-origin:50% 50%; }
  .mr-cyc-track > span{ display:block; white-space:nowrap; }

  .sub{font-size:clamp(17px,1.5vw,19px);font-weight:500;color:var(--muted);max-width:44ch;margin:26px 0 0;line-height:1.55}
  .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;max-width:560px}
  .cta .btn{flex:1 1 240px;justify-content:center;min-width:0}
  .btn{font-family:var(--font);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:15px 26px;border-radius:10px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:1px solid transparent;text-decoration:none!important;transition:.22s cubic-bezier(.16,1,.3,1)}
  .btn-red{background:var(--red);color:#fff}
  .btn-red:hover{background:var(--red-hi);transform:translateY(-2px)}
  .btn-red:active{transform:translateY(0) scale(.98)}
  .btn-grey{background:#1a1a1a;color:#fff;border-color:#2e2e2e}
  .btn-grey:hover{background:#242424;border-color:#3a3a3a;transform:translateY(-2px)}

  /* VISUAL */
  .hero-visual{position:relative;overflow:hidden}
  .hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.82) contrast(1.04)}
  .hero-visual::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,var(--bg) 0%,rgba(8,8,8,.35) 18%,transparent 46%),linear-gradient(0deg,rgba(8,8,8,.5),transparent 30%)}

  @media(max-width:860px){
    .hero{grid-template-columns:1fr;grid-template-rows:38vh 1fr}
    .hero-content{padding:24px 24px 56px;order:2}
    .hero-visual{order:1}
    .hero-visual::after{background:linear-gradient(0deg,var(--bg) 2%,rgba(8,8,8,.2) 40%,transparent 70%)}
  }

  /* MOTION — motivated hero entrance (reading-order reveal) */
  @media (prefers-reduced-motion: no-preference){
    .anim{opacity:0;transform:translateY(16px);animation:rise .85s cubic-bezier(.16,1,.3,1) forwards}
    .d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.30s}.d4{animation-delay:.42s}
    .hero-visual img{opacity:0;transform:scale(1.05);animation:settle 1.2s cubic-bezier(.16,1,.3,1) .1s forwards}
    @keyframes rise{to{opacity:1;transform:none}}
    @keyframes settle{to{opacity:1;transform:none}}
  }

  /* SECTION SHELL */
  .section{padding-block:clamp(64px,9vw,120px)}
  .wrap{max-width:1360px;margin:0 auto;padding-inline:clamp(20px,5vw,52px)}

  /* BENTO */
  .bento{display:grid;grid-template-columns:1fr;gap:14px}
  .cell{background:#121212;border:1px solid #222;border-radius:16px;padding:clamp(22px,2.2vw,30px);position:relative;overflow:hidden}
  .b-statement{display:flex;flex-direction:column;gap:22px;justify-content:center;min-height:230px}
  .b-h{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.5vw,40px);line-height:1.02;letter-spacing:-.01em;margin:0;color:#fff}
  .b-body{font-size:15px;color:var(--muted);margin:0;max-width:46ch;line-height:1.55}
  .b-link{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);display:inline-flex;gap:7px;align-items:center}
  .b-link:hover{color:var(--red-hi)}
  .b-stat{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:148px}
  .b-num{font-family:var(--disp);font-weight:700;font-size:clamp(38px,3.6vw,56px);line-height:1;color:#fff;letter-spacing:-.01em}
  .b-num em{color:var(--red);font-style:normal}
  .b-lab{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
  .b-image{padding:0}
  .b-image img{width:100%;height:100%;min-height:200px;object-fit:cover;filter:brightness(.82) contrast(1.05)}
  .b-artists{display:flex;flex-direction:column;gap:16px;justify-content:center}
  .b-names{display:flex;flex-wrap:wrap;gap:10px 22px}
  .b-names span{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(16px,1.5vw,21px);color:#e6e6e8;letter-spacing:.01em}
  .b-dolby{background:linear-gradient(150deg,rgba(209,0,0,.15),rgba(209,0,0,.04));border-color:rgba(209,0,0,.32);display:flex;flex-direction:column;gap:10px;justify-content:center}
  .b-dolby-tag{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#ff5a5a}
  .b-dolby-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(18px,1.7vw,24px);line-height:1.05;color:#fff}
  @media(min-width:640px){.bento{grid-template-columns:repeat(2,1fr)}.b-statement{grid-column:1 / -1}}
  @media(min-width:960px){
    .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(148px,auto)}
    .b-statement{grid-column:1 / 3;grid-row:1 / 3}
    .b-stat20{grid-column:3;grid-row:1}.b-stat15{grid-column:4;grid-row:1}
    .b-image{grid-column:3 / 5;grid-row:2}
    .b-artists{grid-column:1 / 3;grid-row:3}
    .b-dolby{grid-column:3 / 5;grid-row:3}
  }

  /* LEGACY BENTO (light section) */
  .legacy{background:#ededee;color:#0f0f10}
  .legacy .wrap{padding-block:clamp(56px,8vw,104px)}
  .bento4{display:grid;grid-template-columns:1fr;gap:14px}
  @media(min-width:860px){
    .bento4{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(206px,auto)}
    .t-redef{grid-column:1;grid-row:1}
    .t-ta{grid-column:2 / 4;grid-row:1}
    .t-tb{grid-column:1 / 3;grid-row:2}
    .t-stats{grid-column:3;grid-row:2}
  }
  .tile{border-radius:18px;padding:clamp(24px,2.4vw,38px);display:flex;flex-direction:column;min-height:206px}
  .tile-dark{background:#0c0c0c;color:#fff}
  .tile-light{background:#fff;color:#0f0f10;border:1px solid #e3e3e5}
  .tile-grey{background:#1a1a1a;border:1px solid #262626}
  .tile-red{background:var(--red);border:1px solid var(--red)}
  .img-tile{padding:0;overflow:hidden;background:#0c0c0c}
  .img-tile img{width:100%;height:100%;object-fit:cover;min-height:206px;filter:brightness(.92) contrast(1.03)}
  .t-h{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;margin:0;font-size:clamp(22px,2.1vw,33px)}
  .t-body{font-size:15px;line-height:1.55;margin:14px 0 0;max-width:44ch}
  .tile-dark .t-body{color:#b0b0b4}
  .tile-light .t-body{color:#55555c}
  .t-link{margin-top:auto;padding-top:22px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);display:inline-flex;gap:7px;align-items:center}
  .t-link:hover{color:var(--red-hi)}
  .t-btn{margin-top:auto;align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--red);padding:13px 22px;border-radius:10px;transition:.2s}
  .t-btn:hover{background:var(--red-hi);transform:translateY(-2px)}
  .t-stats{flex-direction:column;align-items:stretch;justify-content:center;gap:0}
  .t-stats .stat{display:flex;flex-direction:column;align-items:flex-end;text-align:right;padding:16px 0;border-bottom:1px solid #ececee}
  .t-stats .stat:first-child{padding-top:0}
  .t-stats .stat:last-child{border-bottom:none;padding-bottom:0}
  .stat-num{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3vw,46px);line-height:1;letter-spacing:-.01em;color:#0f0f10}
  .stat-num em{color:var(--red);font-style:normal}
  .stat-lab{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-top:8px}

  /* SELECTED WORK (grey bento tile) — a continuous marquee of album covers.
     Full-bleed inside the tile: the covers ARE the content, so the tile's usual padding is
     dropped and its radius does the clipping. Hovering a cover blurs and greys just that one
     and fades its release + artist over the top; the scroll pauses so it can be read. */
  .work{padding:0;overflow:hidden;position:relative;justify-content:center}
  /* The covers are EXPLICITLY sized and vertically centred, not height:100%. With height:100%
     their intrinsic size drove the tile, so adding padding grew the tile instead of shrinking
     them — and because this is the tallest tile in the row, it stretched the whole bento row.
     A capped height lets the row stay governed by the "Redefining the industry" tile beside it,
     and the leftover space becomes the grey frame. */
  .work-marquee{overflow:hidden;width:100%;height:100%;display:flex;align-items:center;
    padding:0 clamp(16px,2vw,26px)}
  .work-track{display:flex;align-items:center;gap:clamp(12px,1.3vw,18px);margin:0;list-style:none;
    width:max-content;animation:workScroll 70s linear infinite}
  .work-marquee:hover .work-track,
  .work-marquee:focus-within .work-track{animation-play-state:paused}
  @keyframes workScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .work-item{position:relative;flex:0 0 auto;height:clamp(132px,15.5vw,214px);aspect-ratio:1;
    border-radius:8px;overflow:hidden;background:#0e0e0e}
  .work-art{width:100%;height:100%;object-fit:cover;display:block;
    transition:filter .38s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
  .work-item:hover .work-art{filter:blur(7px) grayscale(1) brightness(.42);transform:scale(1.07)}

  .work-meta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:6px;text-align:center;padding:14px;opacity:0;
    transition:opacity .3s cubic-bezier(.16,1,.3,1)}
  .work-item:hover .work-meta{opacity:1}
  .work-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;color:#fff;
    font-size:15px;line-height:1.12;letter-spacing:-.005em}
  .work-artist{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:rgba(255,255,255,.72)}

  /* Touch devices have no hover, and this tile has no click target — so the labels would be
     unreachable. Show them permanently under a scrim instead of hiding them behind a gesture
     that cannot happen. */
  @media (hover:none){
    .work-art{filter:grayscale(.25) brightness(.62)}
    .work-meta{opacity:1;justify-content:flex-end;padding:10px;
      background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 45%,transparent 78%)}
    .work-title{font-size:13px}
    .work-artist{font-size:10.5px}
  }
  @media (prefers-reduced-motion: reduce){
    .work-track{animation:none}
    .work-marquee{overflow-x:auto;scrollbar-width:none}
    .work-marquee::-webkit-scrollbar{display:none}
    .work-item:hover .work-art{transform:none}
  }

  /* STUDIO ALERTS (red bento tile) — live top-3 promos, injected by home.js.
     The "transport" replaces generic carousel dots: one segment per alert, the active one filling
     left→right over the dwell. It reads as a DAW transport bar and carries three real signals
     (which alert, how many, time until it advances) instead of decorating. */
  /* The whole panel is one centered stack — eyebrow, headline, body, CTA, transport — optically
     centered in the tile rather than pinned to its edges. */
  .alerts{position:relative;overflow:hidden;justify-content:center;align-items:center;text-align:center}
  .alerts-view{display:flex;flex-direction:column;align-items:center;flex:0 1 auto;min-height:0;
    transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1)}
  .alerts.is-swapping .alerts-view{opacity:0;transform:translateY(6px)}
  .alerts-eyebrow{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 14px}
  .alerts-h{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;
    margin:0;font-size:clamp(22px,2.1vw,33px);color:#fff}
  .alerts-body{font-size:15px;line-height:1.55;margin:12px auto 0;max-width:52ch;color:rgba(255,255,255,.88)}
  /* This box is alerts + news only — no CTA. The foot holds just the nav, and collapses
     entirely when there's a single alert (nothing to page through). */
  .alerts-foot{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:26px}
  .alerts-foot:empty{display:none}
  /* nav row: ‹ [transport] › — arrow spec lifted from the engineer pages' "HEAR THEM ON"
     carousel (pages.css .mr-track-nav) so both carousels on the site read as one component.
     Its dots are dropped here: the transport already carries position/count, and that
     carousel's red active-dot would be invisible on a red tile. */
  .alerts-nav{display:flex;align-items:center;gap:9px}
  .alerts-navbtn{background:transparent;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;
    padding:1px 5px;border-radius:8px;transition:background .2s}
  .alerts-navbtn:hover{background:#ffffff14}
  .alerts-transport{display:flex;align-items:center;gap:7px}
  .alerts-seg{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.28);border:0;border-radius:2px;
    padding:0;width:34px;height:3px;cursor:pointer;position:relative;overflow:hidden;transition:background .25s}
  .alerts-seg:hover{background:rgba(255,255,255,.55)}
  .alerts-seg::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left center}
  .alerts-seg.is-done::after{transform:scaleX(1)}
  .alerts-seg.is-active::after{animation:alertsPlay var(--dwell,7s) linear forwards}
  .alerts.is-paused .alerts-seg.is-active::after{animation-play-state:paused}
  @keyframes alertsPlay{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* the global :focus-visible ring is red — invisible on a red tile, so override to white */
  .alerts-seg:focus-visible,.alerts-navbtn:focus-visible{outline:2px solid #fff;outline-offset:3px}
  @media(max-width:560px){
    .alerts-body{font-size:14.5px}
  }
  @media (prefers-reduced-motion: reduce){
    .alerts-view{transition:none}
    .alerts.is-swapping .alerts-view{opacity:1;transform:none}
    .alerts-seg.is-active::after{animation:none;transform:scaleX(1)}
  }

  /* ARTISTS (light section, black panel) */
  .artists{background:#ededee}
  .artists .wrap{padding-block:clamp(60px,8vw,110px)}
  .artists-head{margin-bottom:clamp(26px,3vw,40px)}
  .artists-head h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(32px,5vw,60px);line-height:1;letter-spacing:-.01em;margin:0;color:#0f0f10}
  .artists-panel{background:#0c0c0c;border-radius:22px;padding:clamp(20px,2.6vw,40px)}
  .artists-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  @media(max-width:900px){.artists-grid{grid-template-columns:repeat(2,1fr)}}
  .artist{display:flex;flex-direction:column;gap:14px}
  .artist-photo{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:3/4;background:#1a1a1a;border:1px solid #262626}
  .artist-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .artist:hover .artist-photo img{transform:scale(1.06)}
  .artist-name{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.4vw,19px);letter-spacing:.02em;text-align:center;color:#fff}

  /* CONTACT (light) */
  .contact{background:#ededee;color:#0f0f10}
  .contact .wrap{padding-block:clamp(50px,7vw,96px)}
  .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,4vw,60px);align-items:center}
  @media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
  .c-h{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4.4vw,52px);line-height:1;letter-spacing:-.01em;margin:0 0 28px;color:#0f0f10}
  .c-block{margin-bottom:22px}
  .c-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:8px}
  .c-text{font-size:17px;line-height:1.5;margin:0;color:#2a2a2e}
  .c-text a{color:#0f0f10;border-bottom:1px solid rgba(209,0,0,.4);padding-bottom:1px}
  .c-text a:hover{color:var(--red)}
  .c-btn{margin-top:10px}
  /* .contact-map is now just the column: the framed map, then the address card BENEATH it.
     It used to be the frame itself with the card absolutely positioned inside — which covered
     the pin on mobile and hid Google's attribution. */
  .contact-map{display:flex;flex-direction:column;gap:12px}
  .contact-map-shell{position:relative;border-radius:18px;overflow:hidden;border:1px solid #d8d8dc;
    aspect-ratio:16/11;box-shadow:0 20px 50px -28px rgba(0,0,0,.4)}
  .contact-map img{width:100%;height:100%;object-fit:cover}
  .contact-map iframe,.contact-map-frame{display:block;width:100%;height:100%;border:0}
  .map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);width:22px;height:22px;pointer-events:none}
  .map-pin::before{content:"";position:absolute;inset:0;background:var(--red);border-radius:50% 50% 50% 0;transform:rotate(45deg);border:2px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.35)}
  .map-pin::after{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:7px;height:7px;background:#fff;border-radius:50%}
  /* A normal card UNDER the map — not an overlay. Nothing of the map is obscured, Google's logo
     and "Map data ©2026 Google" attribution stay fully visible inside the iframe, and on a narrow
     screen the card can wrap onto two rows without eating the map. */
  .map-overlay{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
    background:#ffffff;border:1px solid #e0e0e4;border-radius:12px;padding:13px 16px;
    box-shadow:0 12px 30px -22px rgba(0,0,0,.4)}
  @media(max-width:520px){
    .map-overlay{flex-direction:column;align-items:flex-start;gap:12px}
    .map-btns{width:100%}
    .map-btn{flex:1 1 0;text-align:center}
  }
  .map-place b{display:block;font-family:var(--font);font-weight:700;font-size:14px;color:#0f0f10;line-height:1.2}
  .map-place span{font-size:12px;color:#55555c}
  .map-btns{display:flex;gap:8px}
  .map-btn{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:9px 14px;border-radius:8px;background:var(--red);color:#fff;white-space:nowrap;transition:.2s}
  .map-btn:hover{background:var(--red-hi)}
  .map-btn-ghost{background:transparent;color:#0f0f10;border:1px solid rgba(0,0,0,.18)}
  .map-btn-ghost:hover{border-color:#0f0f10;background:transparent}

  /* FOOTER */
  footer.site{background:#080808;color:#fff;border-top:1px solid #1a1a1a}
  footer.site .wrap{padding-block:clamp(46px,6vw,70px) 30px}
  .foot-top{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid #1a1a1a}
  .foot-brand{display:flex;align-items:center;gap:12px}
  .foot-brand img{height:52px;width:auto;display:block}
  .foot-brand b{font-family:var(--font);font-weight:500;text-transform:none;font-size:17px;color:#e6e6e8;letter-spacing:0}
  .foot-nav{display:flex;gap:26px;flex-wrap:wrap}
  .foot-nav a{font-size:14px;font-weight:600;color:var(--muted);transition:color .2s}
  .foot-nav a:hover{color:#fff}
  .foot-social{display:flex;gap:11px}
  .foot-social a{width:40px;height:40px;border-radius:10px;border:1px solid #262626;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.2s}
  .foot-social a:hover{color:#fff;border-color:var(--red);background:rgba(209,0,0,.1)}
  .foot-social svg{width:18px;height:18px;fill:currentColor}
  .foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;font-size:12.5px;color:var(--faint)}
  .foot-bottom a{color:var(--muted);border-bottom:1px solid rgba(209,0,0,.4);padding-bottom:1px}
  .foot-bottom a:hover{color:#fff}

  /* SCROLL REVEAL */
  @media (prefers-reduced-motion: no-preference){
    .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*.06s)}
    .reveal.in{opacity:1;transform:none}
  }

  /* ============================================================================
     NO SPINNERS ANYWHERE — every loading spinner on the site becomes the app's
     shimmer skeleton (components/Skeleton.js: #232327 base, soft white sweep).
     Covers WooCommerce + WC Blocks + WC Bookings, Loyalty (wlr), Better Messages
     (bm / Toastify / uppy), Elementor and PhotoSwipe. No spinning wheel, ever.
     ============================================================================ */
  @keyframes mrShimmer{ 0%{ background-position:-130px 0 } 78%,100%{ background-position:calc(100% + 130px) 0 } }
  @keyframes mrSweep{ 0%{ transform:translateX(-130%) } 78%,100%{ transform:translateX(360%) } }

  /* WooCommerce / blockUI AJAX overlay (add-to-cart, cart, checkout, booking cost calc):
     a calm dark sheet with a single light band sweeping across — no wheel. */
  .blockUI.blockOverlay{
    background:rgba(10,10,12,.55) !important; opacity:1 !important; overflow:hidden !important; cursor:default !important;
  }
  .blockUI.blockOverlay::before{
    content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; left:0 !important; right:auto !important;
    width:38% !important; min-width:120px !important; max-width:240px !important; height:auto !important;
    margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent) !important;
    animation:mrSweep 1.5s ease-in-out infinite !important;
  }
  .blockUI.blockOverlay::after{ display:none !important; content:none !important; }

  /* WooCommerce generic .loader */
  .woocommerce .loader::before,
  .woocommerce .loader::after{ animation:none !important; display:none !important; content:none !important; }

  /* button loading states (add-to-cart, place order, WC-blocks) → shimmer sweep, no wheel */
  .woocommerce .button.loading,
  .woocommerce a.button.loading,
  .woocommerce button.button.loading,
  .woocommerce input.button.loading,
  .woocommerce #respond input#submit.loading,
  .wc-block-grid__product-add-to-cart .wp-block-button__link.loading,
  .wc-block-components-button.loading{ position:relative !important; overflow:hidden !important; }
  .woocommerce .button.loading::after,
  .woocommerce a.button.loading::after,
  .woocommerce button.button.loading::after,
  .woocommerce input.button.loading::after,
  .woocommerce #respond input#submit.loading::after,
  .wc-block-grid__product-add-to-cart .wp-block-button__link.loading::after,
  .wc-block-components-button.loading::after{
    content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; left:0 !important; right:auto !important;
    width:40% !important; height:auto !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent) !important;
    animation:mrSweep 1.4s ease-in-out infinite !important; opacity:1 !important;
  }

  /* every other plugin spinner: stop it rotating; standalone wheels → a shimmer chip */
  .wlr-myaccount-page .spinner,
  .Toastify__spinner,
  .bm-spin-animation,
  .bm-lightbox-loader-child,
  .bm-uppy-dashboard .uppy-StatusBar-spinner,
  .elementor-custom-embed-play.elementor-playing i,
  .elementor-custom-embed-play.elementor-playing svg,
  .eicon-animation-spin,
  .pswp__preloader__donut{ animation:none !important; }
  .wlr-myaccount-page .spinner,
  .Toastify__spinner,
  .bm-lightbox-loader-child,
  .bm-uppy-dashboard .uppy-StatusBar-spinner{
    border:0 !important; border-radius:8px !important; box-shadow:none !important;
    background:#232327 linear-gradient(90deg,transparent 0,rgba(255,255,255,.11) 50%,transparent 100%) no-repeat !important;
    background-size:130px 100% !important; background-position:-130px 0 !important;
    animation:mrShimmer 1.6s ease-in-out infinite !important;
  }

  @media (prefers-reduced-motion: reduce){
    .blockUI.blockOverlay::before,
    .woocommerce .button.loading::after,
    .wlr-myaccount-page .spinner,
    .Toastify__spinner,
    .bm-lightbox-loader-child{ animation:none !important; }
  }