/* ==========================================================================
   XZONE. Ink and Crimson.
   Loaded only on XZONE templates, so the live Elementor pages never see it.
   ========================================================================== */

.xz {
  --bg:#09090C;
  --surface:#121218;
  --surface-hi:#17171F;
  --ink:#F2F2F5;
  --muted:#9A9AA6;
  --faint:#85858F;
  --accent:#BC1C34;
  --accent-light:#FF5A70;
  --accent-deep:#7E1226;
  --hair:rgba(255,255,255,0.09);
  --hair-soft:rgba(255,255,255,0.055);

  --rail:1344px;
  --gut:48px;

  --r-sm:9px;
  --r-md:14px;
  --r-lg:22px;
  --r-pill:999px;

  --sp-xs:8px;
  --sp-sm:16px;
  --sp-md:28px;
  --sp-lg:48px;
  --sp-xl:96px;

  --ease:cubic-bezier(.32,.72,0,1);
  --nav-h:74px;
}

@media (max-width:760px){ .xz{ --gut:20px; --nav-h:64px; } }

/* --------------------------------------------------------------------------
   Reset. Wrapped in :where() so specificity is zero and any component rule
   below wins. A bare reset here would quietly beat single class selectors and
   drop every heading back to the body font.
   -------------------------------------------------------------------------- */
.xz :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol){ margin:0; padding:0; }
.xz :where(ul,ol){ list-style:none; }
.xz :where(img,svg,video){ display:block; max-width:100%; }
.xz :where(a){ color:inherit; text-decoration:none; }
.xz :where(button,input,select,textarea){ font:inherit; color:inherit; }

.xz, .xz * { box-sizing:border-box; }

body.xz{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15.5px;
  line-height:1.7;
  letter-spacing:-0.008em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* --------------------------------------------------------------------------
   One shared rail. Hero and body align on the same left edge, every section.
   -------------------------------------------------------------------------- */
/* --rail is the width of the CONTENT, not of the box around it. Capping the
   box instead was costing 96px of gutter out of the middle of every page:
   at 1440 the columns ran 108 to 1332 where the original runs 48 to 1392,
   which is why the whole site read narrower than it should. */
.xz-rail{ width:100%; max-width:calc(var(--rail) + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut); }
.xz-bleed{ width:100%; }

/* Vertical rhythm scales to the band, per the direction. */
.xz-sec{ padding-block:clamp(52px,5.4vw,92px); }
.xz-sec--tight{ padding-block:clamp(40px,3.6vw,60px); }
.xz-sec--rule{ border-top:1px solid var(--hair); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.xz-eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0;
}
.xz-h1{
  font-size:clamp(38px,5.4vw,78px); line-height:1.02; letter-spacing:-0.035em;
  font-weight:600; text-wrap:balance; margin:0;
}
.xz-h2{
  font-size:clamp(30px,3.4vw,46px); line-height:1.08; letter-spacing:-0.032em;
  font-weight:600; text-wrap:balance; margin:0;
}
.xz-h3{
  font-size:21px; line-height:1.3; letter-spacing:-0.02em; font-weight:600; margin:0;
}
.xz-lead{
  font-size:clamp(16.5px,1.5vw,18px); line-height:1.68; letter-spacing:-0.01em;
  color:var(--muted); max-width:58ch; margin:0;
}
.xz-body{ color:var(--muted); max-width:65ch; }
.xz-fine{ font-size:13px; line-height:1.6; color:var(--faint); margin:0; }
.xz-script{ font-family:"Shadows Into Light",cursive; font-weight:400; }
.xz-num{ font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------------------
   Controls. One radius rule: anything interactive is a pill.
   -------------------------------------------------------------------------- */
.xz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14.5px; font-weight:600; letter-spacing:-0.005em;
  padding:12px 22px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; transition:background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.xz-btn--primary{ background:var(--accent); color:var(--ink); }
.xz-btn--ghost{ background:transparent; border-color:var(--hair); color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .xz-btn--primary:hover{ background:var(--accent-deep); }
  .xz-btn--ghost:hover{ border-color:rgba(255,255,255,.22); }
}
.xz-tag{
  display:inline-block; font-size:10.5px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent-light);
  border:1px solid rgba(255,90,112,.28); border-radius:var(--r-pill);
  padding:4px 9px; white-space:nowrap;
}

.xz a:focus-visible, .xz button:focus-visible{
  outline:2px solid var(--accent-light); outline-offset:3px; border-radius:4px;
}

/* --------------------------------------------------------------------------
   Navigation. Fixed, transparent at rest, blurred ground once scrolled.
   The spacer holds the height so nothing jumps.
   -------------------------------------------------------------------------- */
.xz-navspace{ height:calc(var(--nav-h) + env(safe-area-inset-top,0px)); }
.xz-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  display:flex; align-items:center;
  background-color:transparent;
  border-bottom:1px solid transparent;
  transition:background-color 220ms var(--ease), border-bottom-color 220ms var(--ease),
             -webkit-backdrop-filter 220ms var(--ease), backdrop-filter 220ms var(--ease);
}
.xz-nav[data-scrolled="true"]{
  background-color:rgba(9,9,12,.72);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--hair);
}
.xz-nav::before,.xz-nav::after{ display:none !important; }

.xz-nav__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-md); width:100%; }
.xz-nav__logo img{ height:26px; width:auto; }
.xz-nav__list{ display:flex; align-items:center; gap:26px; }
.xz-nav__link{
  font-size:12.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); padding:6px 0; position:relative;
  transition:color 180ms var(--ease);
}
.xz-nav__link::before,.xz-nav__link::after{ display:none !important; }
@media (hover:hover) and (pointer:fine){ .xz-nav__link:hover{ color:var(--accent-light); } }
.xz-nav__link[aria-current="page"]{ color:var(--accent-light); }

.xz-burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
@media (max-width:900px){
  .xz-nav__list{ display:none; }
  .xz-burger{ display:block; }
  .xz-nav__list.is-open{
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    position:absolute; top:calc(var(--nav-h) + env(safe-area-inset-top,0px)); left:0; right:0;
    background:rgba(9,9,12,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
    padding:18px var(--gut) 24px;
  }
  .xz-nav__list.is-open .xz-nav__link{ font-size:14px; padding:10px 0; letter-spacing:.1em; }
}

/* --------------------------------------------------------------------------
   Index rows. The mixed media pattern: thumbnails lock by HEIGHT, so a 16:9
   still, a square flyer and an A4 portrait sit in one list, none of them
   cropped. This is the move that lets seven studios share a feed.
   -------------------------------------------------------------------------- */
.xz-index{ margin-top:var(--sp-lg); border-top:1px solid var(--hair); }
.xz-row{
  display:grid; grid-template-columns:48px 238px 1fr auto; gap:26px;
  align-items:center; padding-block:16px;
  border-bottom:1px solid var(--hair-soft);
}
.xz-row::before,.xz-row::after{ display:none !important; }
.xz-row__n{ font-size:12px; font-weight:500; letter-spacing:.08em; color:var(--faint); font-variant-numeric:tabular-nums; }
.xz-row__shot{ position:relative; height:124px; display:flex; align-items:center; }
.xz-row__shot img{ height:124px; width:auto; border-radius:var(--r-sm); border:1px solid var(--hair); }
.xz-row__med{
  position:absolute; left:7px; top:7px; font-size:9px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); background:rgba(9,9,12,.72);
  border:1px solid rgba(255,255,255,.15); border-radius:5px; padding:3px 6px;
}
.xz-row__txt{ display:block; }
.xz-row__t{ display:block; font-size:21px; font-weight:600; letter-spacing:-0.02em; line-height:1.3; margin:0; transition:color 180ms var(--ease); }
.xz-row__l{ display:block; font-size:14px; line-height:1.6; color:var(--faint); margin-top:6px; }
.xz-row__rhs{ display:flex; align-items:center; gap:20px; }
.xz-row__arw{ color:var(--faint); transition:color 180ms var(--ease); }
@media (hover:hover) and (pointer:fine){
  a.xz-row:hover .xz-row__t{ color:var(--accent-light); }
  a.xz-row:hover .xz-row__arw{ color:var(--accent-light); }
  a.xz-row:hover .xz-row__shot img{ border-color:rgba(255,90,112,.45); }
}
@media (max-width:760px){
  .xz-row{ grid-template-columns:96px 1fr; gap:14px; align-items:flex-start; padding-block:14px; }
  .xz-row__n,.xz-row__rhs{ display:none; }
  .xz-row__shot{ height:auto; }
  .xz-row__shot img{ width:96px; height:auto; }
  .xz-row__t{ font-size:16px; }
  .xz-row__l{ font-size:12.5px; margin-top:4px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.xz-foot{ border-top:1px solid var(--hair); padding-block:clamp(44px,4.5vw,64px) 26px; }
.xz-foot__grid{ display:grid; grid-template-columns:minmax(0,300px) repeat(3,minmax(0,1fr)); gap:40px 56px; align-items:start; }
.xz-foot__cols{ display:contents; }
@media (max-width:1000px){
  .xz-foot__grid{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .xz-foot__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 28px; }
}
@media (max-width:620px){
  .xz-foot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; }
  .xz-foot__cols > :first-child{ grid-column:1 / -1; }
}
.xz-foot__h{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:11px; }
.xz-foot__link{ display:block; color:var(--muted); font-size:14px; line-height:1.95; transition:color 180ms var(--ease); }
.xz-foot__link::before,.xz-foot__link::after{ display:none !important; }
@media (hover:hover) and (pointer:fine){ .xz-foot__link:hover{ color:var(--ink); } }
/* Two CSS columns inside a 225px cell gave every label 98px to live in, so
   "Music production" arrived on two lines. It splits only when there is room
   for a second column to be worth having. */
.xz-foot__split{ display:grid; grid-template-columns:minmax(0,1fr); align-content:start; }
/* Only the studios list splits, and only where two columns of short labels
   genuinely fit. Company has four items and stays one column, as it does on
   the original. */
.xz-foot__split--two{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:column; grid-template-rows:repeat(4,auto); column-gap:30px; }
@media (max-width:1000px){ .xz-foot__split--two{ column-gap:22px; } }
@media (max-width:380px){ .xz-foot__split--two{ grid-auto-flow:row; grid-template-columns:minmax(0,1fr); grid-template-rows:none; } }
.xz-foot__legal{ display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between; align-items:center;
  margin-top:clamp(32px,3.5vw,44px); padding-top:20px; border-top:1px solid var(--hair); }

/* --------------------------------------------------------------------------
   Reveal. Hidden only once JS has proved it is running, so no-JS, crawlers
   and print all render the content visible.
   -------------------------------------------------------------------------- */
.xz-js .xz-reveal{ opacity:0; transform:translateY(14px); }
.xz-js .xz-reveal.is-in{ opacity:1; transform:none; transition:opacity 620ms var(--ease), transform 620ms var(--ease); }

@media (prefers-reduced-motion:reduce){
  .xz *,.xz *::before,.xz *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .xz-js .xz-reveal{ opacity:1 !important; transform:none !important; }
}

/* --------------------------------------------------------------------------
   Wordmark, skip link, footer detail, hero.
   -------------------------------------------------------------------------- */
.xz-wordmark{
  font-size:15px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap; display:inline-block;
}
.xz-wordmark b{ font-weight:600; color:var(--accent-light); margin-left:.26em; }

.xz-skip{ position:absolute; left:-9999px; }
.xz-skip:focus{ left:var(--gut); top:12px; z-index:200; background:var(--accent); color:#fff; padding:10px 16px; border-radius:var(--r-pill); }

.xz-nav__cta{ padding:9px 18px; font-size:13px; }
@media (max-width:900px){ .xz-nav__cta{ margin-top:10px; } }

.xz-foot__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.xz-foot__blurb{ font-size:14.5px; line-height:1.6; color:var(--muted); max-width:34ch; margin:0; }
.xz-foot__social{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.xz-foot__social .xz-foot__link{ line-height:1.4; }
.xz-foot__addr{ margin-top:14px; font-size:13px; font-style:normal; line-height:1.65; color:var(--faint); }

/* ---- hero ----
   Full height, two bands. The words sit on the floor of the upper band with
   the corridor beside them; the signal runs along the bottom. The corridor
   needs width to read as a room, so under 1080px it stands down and the same
   seven doors arrive as a grid underneath instead. */
.xz-hero{
  position:relative;
  height:calc(100svh - var(--nav-h)); min-height:640px;
  display:flex; flex-direction:column;
  background:var(--bg);
  overflow-x:clip;
}
.xz-hero__glow{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(70% 55% at 18% 8%, rgba(188,28,52,.24), transparent 62%),
    radial-gradient(50% 45% at 88% 76%, rgba(126,18,38,.20), transparent 64%);
}
.xz-hero__top{
  position:relative; z-index:1;
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(24px,4vh,56px) clamp(28px,5vh,64px);
}
.xz-hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(32px,4.5vw,72px); align-items:end;
}
.xz-hero__txt{ min-width:0; }
.xz-hero__h1{ max-width:15ch; margin-top:18px; }
.xz-hero__h1 em{ font-style:normal; color:var(--accent-light); }
.xz-hero__lead{ margin-top:24px; max-width:46ch; }
.xz-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ---- the corridor ---- */
.xz-hero__hall{ align-self:stretch; display:flex; align-items:center; justify-content:center; min-height:0; }
.xz-hall{ width:100%; max-width:750px; aspect-ratio:300/252; height:auto; display:block; margin:0 auto; overflow:visible; }
.xz-hall__d{ transition:opacity 300ms var(--ease); }
.xz-hall__hit{ cursor:pointer; outline:none; }
.xz-hall__hit path{ pointer-events:auto; }
/* At rest the corridor is almost black: the six side doors are shut and only
   the far one leaks. Opening one is the whole interaction, so nothing else
   moves when it does. */
.xz-hall__glow,.xz-hall__spill{ opacity:0; transition:opacity 260ms cubic-bezier(.55,0,.85,.35); }
.xz-hall__d[data-room="radio"] .xz-hall__glow{ opacity:.22; }
.xz-hall__d[data-room="radio"] .xz-hall__spill{ opacity:.16; }
.xz-hall__d.is-on .xz-hall__glow,.xz-hall__d.is-on .xz-hall__spill{ opacity:1; }
.xz-hall__hit:focus-visible path{ fill:rgba(255,90,112,0.14); }

/* ---- the signal ---- */
.xz-hero__zone{ position:relative; flex:0 0 36%; min-height:170px; pointer-events:none; overflow:hidden; }
.xz-signal{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 600ms var(--ease); }
.xz-signal.is-on{ opacity:1; }
.xz-hero__fade{ position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(to bottom, rgba(9,9,12,0), var(--bg)); }

/* the grid of doors only exists where the corridor cannot */
.xz-rooms{ display:none; }
@media (max-width:1080px){
  .xz-hero__grid{ grid-template-columns:minmax(0,1fr); }
  .xz-hero__hall{ display:none; }
  .xz-rooms{ display:block; }
}
@media (max-width:760px){
  .xz-hero{ min-height:560px; }
  .xz-hero__zone{ flex-basis:30%; min-height:132px; }
}
@media (prefers-reduced-motion:reduce){ .xz-signal{ transition:none; } }

/* ---- the seven doors: visible at every width, unlike the original ---- */
.xz-doors{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px; margin-top:clamp(44px,5vw,72px);
  background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-md); overflow:hidden;
}
.xz-door{
  background:var(--bg); padding:22px 18px 20px; min-height:132px;
  display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  transition:background-color 220ms var(--ease);
}
.xz-door::before,.xz-door::after{ display:none !important; }
.xz-door__n{ font-size:11px; letter-spacing:.14em; color:var(--faint); font-variant-numeric:tabular-nums; }
.xz-door__name{ font-size:15px; font-weight:600; letter-spacing:-0.016em; line-height:1.25; }
@media (hover:hover) and (pointer:fine){
  .xz-door:hover{ background:var(--surface-hi); }
  .xz-door:hover .xz-door__name{ color:var(--accent-light); }
}
@media (max-width:1100px){ .xz-doors{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:760px){ .xz-doors{ grid-template-columns:repeat(2,minmax(0,1fr)); } .xz-door{ min-height:104px; padding:16px 14px; } }
@media (max-width:330px){ .xz-doors{ grid-template-columns:minmax(0,1fr); } }
/* Seven does not divide by four or by two, so at those widths the last door
   takes the orphan cell instead of leaving a hole in the grid. */
@media (max-width:1100px){ .xz-doors:not(.xz-doors--six) > :last-child{ grid-column:span 2; } }
@media (max-width:330px){ .xz-doors:not(.xz-doors--six) > :last-child{ grid-column:auto; } }
/* ---- section head ---- */
.xz-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.xz-head__h{ margin-top:16px; }
.xz-head__lead{ margin-top:16px; }
.xz-out{ font-size:13px; font-weight:500; color:var(--muted); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:color 180ms var(--ease); }
.xz-out::before,.xz-out::after{ display:none !important; }
.xz-out__ar{ color:var(--accent-light); }
@media (hover:hover) and (pointer:fine){ .xz-out:hover{ color:var(--ink); } }

/* ---- welcome ---- */
.xz-welcome__in{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.xz-welcome__hi{ font-size:clamp(30px,3.6vw,38px); line-height:1.1; color:var(--ink); }
.xz-welcome__eye{ margin-top:14px; }
.xz-welcome__body{ margin-top:22px; display:flex; flex-direction:column; gap:18px; max-width:66ch; }
.xz-welcome__body p{ font-size:clamp(16px,1.5vw,18px); line-height:1.68; color:var(--muted); }

/* ---- release sequence ----
   Pinned on a wide screen. Below 860px the pin is released entirely and the
   seven steps stack in normal flow, which is how the original behaves. */
.xz-seq{ padding-block:clamp(52px,5.4vw,88px) 0; }
/* Not 18ch. The ch unit resolves against the element it is set on, and this
   is a wrapper at body size, so 18ch came out as 185px and dropped a 46px
   heading into a column one word wide. Cap the heading itself or nothing. */
.xz-seq__head{ max-width:none; }
.xz-seq__head .xz-h2{ max-width:none; }
.xz-seq__eye{ margin-top:14px; }
.xz-seq__track{ position:relative; margin-top:clamp(24px,2.6vw,40px); }
.xz-seq__pin{ padding-block:clamp(40px,5vw,72px); }
.xz-seq__stage{ display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }

.xz-seq__rail{ display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--hair); padding-left:18px; }
.xz-seq__mark{ font-size:13px; line-height:1.9; color:var(--faint); transition:color 220ms var(--ease); }
.xz-seq__mark.is-on{ color:var(--accent-light); }

.xz-seq__cards{ position:relative; }
.xz-seq__card{ max-width:60ch; }
.xz-seq__kicker{ color:var(--accent-light); }
.xz-seq__title{ margin-top:14px; }
.xz-seq__body{ margin-top:18px; }
.xz-seq__link{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:13.5px; font-weight:500; color:var(--muted); transition:color 180ms var(--ease); }
.xz-seq__link::before,.xz-seq__link::after{ display:none !important; }
@media (hover:hover) and (pointer:fine){ .xz-seq__link:hover{ color:var(--accent-light); } }

/* pinned mode is switched on by JS only when there is room for it */
.xz-seq.is-pinned .xz-seq__pin{ position:sticky; top:calc(var(--nav-h) + env(safe-area-inset-top,0px)); min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center; padding-block:clamp(32px,4vw,56px); }
.xz-seq.is-pinned .xz-seq__stage{ width:100%; align-items:center; }
.xz-seq.is-pinned .xz-seq__cards{ min-height:clamp(260px,34vh,330px); }
.xz-seq.is-pinned .xz-seq__card{ position:absolute; inset:0 auto auto 0; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity 380ms var(--ease), transform 380ms var(--ease); }
.xz-seq.is-pinned .xz-seq__card.is-on{ opacity:1; transform:none; pointer-events:auto; }

/* stacked fallback: every step visible, separated by a rule */
.xz-seq:not(.is-pinned) .xz-seq__rail{ display:none; }
.xz-seq:not(.is-pinned) .xz-seq__stage{ grid-template-columns:minmax(0,1fr); }
.xz-seq:not(.is-pinned) .xz-seq__cards{ display:flex; flex-direction:column; gap:0; }
.xz-seq:not(.is-pinned) .xz-seq__card{ padding-block:clamp(30px,4vw,44px); border-top:1px solid var(--hair-soft); }
.xz-seq:not(.is-pinned) .xz-seq__card:first-child{ border-top:0; padding-top:0; }

/* ---- events ---- */
.xz-ev{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,3.5vw,56px); margin-top:clamp(32px,4vw,48px); align-items:start; }
@media (max-width:860px){ .xz-ev{ grid-template-columns:minmax(0,1fr); } }
.xz-ev__empty{ border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); background:var(--surface); }
.xz-ev__note{ margin-block:12px 22px; }
.xz-ev__pasth{ padding-bottom:12px; border-bottom:1px solid var(--hair); }
.xz-ev__row{ display:grid; gap:4px; padding-block:18px; border-bottom:1px solid var(--hair-soft); }
.xz-ev__date{ font-size:12.5px; letter-spacing:.06em; color:var(--faint); }
.xz-ev__name{ font-size:17px; font-weight:600; letter-spacing:-0.016em; }
.xz-ev__venue{ font-size:13.5px; color:var(--muted); }
.xz-ev__state{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:4px; }

/* ---- closing call ---- */
.xz-cta__in{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.xz-cta__h{ max-width:none; }
.xz-cta__meta{ margin-block:22px 30px; font-size:15.5px; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; }
.xz-cta__meta a{ transition:color 180ms var(--ease); }
.xz-cta__meta a::before,.xz-cta__meta a::after{ display:none !important; }
@media (hover:hover) and (pointer:fine){ .xz-cta__meta a:hover{ color:var(--accent-light); } }
.xz-cta__sep{ color:var(--faint); }

/* ---- capability marquee ---- */
.xz-mq{ border-block:1px solid var(--hair); padding-block:22px; overflow:hidden; }
.xz-mq__belt{ display:flex; width:max-content; will-change:transform; animation:xz-belt 64s linear infinite; }
.xz-mq__run{ display:flex; align-items:center; gap:0; }
.xz-mq__item{ display:inline-flex; align-items:center; gap:22px; padding-right:22px; white-space:nowrap;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.xz-mq__dot{ color:var(--accent); font-size:7px; }
@keyframes xz-belt{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.xz-mq:hover .xz-mq__belt{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .xz-mq__belt{ animation:none; } .xz-mq{ overflow-x:auto; } }
/* ---- doors reused beyond the hero ---- */
.xz-doors__lab{ margin-top:clamp(40px,4.5vw,64px); margin-bottom:16px; }
.xz-doors--six{ grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:1100px){ .xz-doors--six{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .xz-doors--six{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:330px){ .xz-doors--six{ grid-template-columns:minmax(0,1fr); } }

/* ---- preloader ----
   Injected by JS, never present in the HTML, so a crawler or a visitor with
   no script never meets a curtain they cannot lift. */
.xz-pre{
  /* The curtain is injected as a child of <html>, not of body.xz, so none of
     the theme tokens reach it by inheritance. It carries its own copies. */
  --bg:#09090C; --ink:#F2F2F5; --faint:#85858F;
  --accent-light:#FF5A70; --hair:rgba(255,255,255,0.09);
  --ease:cubic-bezier(.32,.72,0,1);
  box-sizing:border-box;
  font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  position:fixed; inset:0; z-index:2147483000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity 520ms var(--ease);
}
.xz-pre[data-done="true"]{ opacity:0; pointer-events:none; }
.xz-pre__mark{
  font-size:clamp(18px,2.4vw,26px); font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink); filter:grayscale(1); transition:filter 180ms linear;
}
.xz-pre__mark b{ font-weight:600; color:var(--accent-light); margin-left:.28em; }
.xz-pre__bar{ width:min(280px,58vw); height:2px; background:var(--hair); overflow:hidden; border-radius:2px; }
.xz-pre__fill{ display:block; height:100%; width:0; background:var(--accent-light); transition:width 140ms linear; }
.xz-pre__n{ font-size:12px; letter-spacing:.14em; color:var(--faint); font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce){ .xz-pre{ display:none !important; } }
/* ---- studio pages: one stylesheet, seven rooms ---- */
.xz-back{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--muted); transition:color 180ms var(--ease); }
.xz-back::before,.xz-back::after{ display:none !important; }
@media (hover:hover) and (pointer:fine){ .xz-back:hover{ color:var(--ink); } }
.xz-studio__count{ margin-top:38px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-light); font-variant-numeric:tabular-nums; }
.xz-studio__h{ margin-top:18px; max-width:16ch; }
.xz-studio__lead{ margin-top:26px; max-width:38ch; font-size:clamp(19px,1.7vw,25px); line-height:1.4; letter-spacing:-0.018em; color:var(--accent-light); }
.xz-studio__intro{ margin-top:22px; max-width:66ch; }
.xz-studio__fix{ margin-top:26px; }

.xz-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:12px; margin-top:26px; }
.xz-card{ background:rgba(255,255,255,0.03); border:1px solid var(--hair); border-radius:var(--r-lg); padding:26px 26px 28px; }
.xz-card__t{ font-size:18px; font-weight:600; letter-spacing:-0.016em; }
.xz-card__l{ margin-top:10px; font-size:14.5px; line-height:1.6; color:var(--muted); }

.xz-steps{ margin-top:8px; max-width:820px; }
.xz-step{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; align-items:baseline; padding-block:26px; border-bottom:1px solid var(--hair); }
.xz-step:last-child{ border-bottom:0; padding-bottom:0; }
.xz-step__n{ font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--accent-light); font-variant-numeric:tabular-nums; }
.xz-step__b{ display:block; }
.xz-step__t{ display:block; font-size:20px; font-weight:600; letter-spacing:-0.02em; }
.xz-step__l{ display:block; margin-top:8px; font-size:15.5px; line-height:1.62; color:var(--muted); }
@media (max-width:520px){ .xz-step{ grid-template-columns:40px minmax(0,1fr); gap:14px; } }

.xz-panel{ background:var(--accent); border-radius:24px; padding:clamp(30px,3.4vw,44px) clamp(24px,3.6vw,48px); display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; }
.xz-panel__txt{ flex:1 1 320px; min-width:min(280px,100%); }
.xz-panel__h{ font-size:clamp(24px,2.4vw,32px); font-weight:600; letter-spacing:-0.028em; color:var(--ink); }
.xz-panel__l{ margin-top:10px; max-width:52ch; font-size:15.5px; line-height:1.6; color:rgba(242,242,245,0.84); }
.xz-panel__btn{ font-size:14.5px; font-weight:600; color:var(--bg); background:var(--ink); border-radius:var(--r-pill); padding:14px 26px; white-space:nowrap; }
.xz-panel__btn::before,.xz-panel__btn::after{ display:none !important; }

/* ==========================================================================
   Fidelity pass: the pieces the first build paraphrased.
   ========================================================================== */

/* ---- welcome ---- */
.xz-welcome__rule{ display:block; width:44px; height:2px; background:var(--accent); border-radius:2px; }
.xz-welcome__hi{ margin-top:22px; }
.xz-welcome__say{ margin-top:20px; max-width:26ch; font-size:clamp(26px,3.4vw,44px); font-weight:600; line-height:1.18; letter-spacing:-0.03em; color:var(--ink); }
.xz-welcome__body{ margin-top:24px; max-width:64ch; }

/* ---- sequence: the rail is navigation, the card carries the whole step ---- */
.xz-seq__rail{ gap:6px; }
.xz-seq__mark{ display:flex; align-items:baseline; gap:12px; font-size:13.5px; line-height:1.7; color:var(--faint); transition:color 220ms var(--ease); }
.xz-seq__mark::before,.xz-seq__mark::after{ display:none !important; }
.xz-seq__mn{ font-size:11px; letter-spacing:.1em; opacity:.72; font-variant-numeric:tabular-nums; }
.xz-seq__mark.is-on{ color:var(--accent-light); }
@media (hover:hover) and (pointer:fine){ .xz-seq__mark:hover{ color:var(--ink); } }
.xz-seq__title{ margin-top:14px; }
.xz-seq__body{ margin-top:18px; max-width:56ch; }
.xz-seq__foot{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:24px; }
.xz-seq__count{ font-size:12px; letter-spacing:.12em; color:var(--faint); font-variant-numeric:tabular-nums; }
.xz-seq.is-pinned .xz-seq__cards{ min-height:clamp(320px,44vh,430px); }

/* ---- the corridor's caption ----
   The doorways carry no labels of their own, so the room being pointed at
   says its own name underneath. Reserved height, so nothing jumps. */
.xz-hero__hall{ flex-direction:column; justify-content:center; gap:4px; }
.xz-hall__cap{ margin:0; text-align:center; font-size:13.5px; line-height:1.6; color:var(--muted); min-height:3.2em; max-width:52ch; align-self:center; transition:color 200ms var(--ease); }
.xz-hall__cap b{ color:var(--ink); font-weight:600; }

/* ---- careers, and the shared furniture it introduced ----
   The old version of this page ran a single 60ch column down the middle with
   half the screen empty beside it. Prose here runs in two columns from 900px
   up, which is what stops a long page reading as a wall. */
.xz-split{ margin-top:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:clamp(20px,2.6vw,44px); }
.xz-split > p{ max-width:62ch; }
.xz-note{ margin-top:clamp(22px,2.6vw,34px); max-width:78ch; }

.xz-cols{ margin-top:clamp(26px,3vw,42px); display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(22px,3vw,48px); }
.xz-col{ min-width:0; }
.xz-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.xz-chip{ font-size:13px; line-height:1.4; color:var(--muted); border:1px solid var(--hair); border-radius:var(--r-pill); padding:7px 14px; }

/* ---- the enquiry form ----
   It composes a mail rather than posting anywhere, which is what the original
   did. Without JavaScript the button is still a plain mailto link, so the page
   never presents a form that silently does nothing. */
.xz-form{ margin-top:clamp(26px,3vw,40px); display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px clamp(18px,2.4vw,32px); max-width:1000px; }
.xz-f{ display:flex; flex-direction:column; gap:8px; margin:0; min-width:0; }
.xz-f--wide{ grid-column:1 / -1; }
.xz-f__l{ font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.xz-f__i{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--hair); border-radius:var(--r-sm);
  padding:13px 14px; font-size:15px; line-height:1.5;
  transition:border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.xz-f__i:focus{ outline:none; border-color:var(--accent-light); background:var(--surface-hi); }
.xz-f__i::placeholder{ color:var(--faint); }
textarea.xz-f__i{ resize:vertical; min-height:120px; }
select.xz-f__i{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:40px; }
.xz-f__go{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:16px; margin-top:6px; }

/* ---- the corridor, sized like the original ----
   In Framer the hall is bigger than the band it sits in and falls past the
   bottom of it into the signal, which is what makes it read as a room rather
   than a picture of one. Taking it out of flow is what allows that: the row
   keeps its height, the drawing does not have to fit inside it. */
@media (min-width:1081px){
  .xz-hero__grid{ grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr); }
  .xz-hero__hall{ position:relative; display:block; align-self:stretch; overflow:visible; }
  .xz-hero__hall .xz-hall{
    position:absolute; left:50%; top:50%;
    width:min(780px, calc(100% + 132px)); max-width:none;
    transform:translate(-50%, -42%);
  }
  .xz-hall__cap{
    position:absolute; left:50%; bottom:-92px; transform:translateX(-50%);
    width:min(100%, 52ch); margin:0; z-index:2;
    text-shadow:0 1px 10px rgba(9,9,12,0.9);
  }
}

/* ---- XZONE: the player facade and the record wall ---- */
.xz-play{
  position:relative; margin-top:clamp(22px,2.6vw,34px);
  aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--hair); background:var(--surface);
}
.xz-play__still{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; transition:opacity 320ms var(--ease), transform 600ms var(--ease); }
.xz-play::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 70% at 50% 50%, rgba(9,9,12,.25), rgba(9,9,12,.78));
}
.xz-play__go{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:none; border:0; cursor:pointer;
  font-size:clamp(15px,1.5vw,18px); font-weight:600; letter-spacing:-0.012em; color:var(--ink);
}
.xz-play__tri{
  display:grid; place-items:center; width:58px; height:58px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--ink); font-size:17px; padding-left:3px;
  box-shadow:0 10px 40px rgba(188,28,52,.36);
  transition:transform 260ms var(--ease), background-color 260ms var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .xz-play:hover .xz-play__still{ opacity:.78; transform:scale(1.015); }
  .xz-play:hover .xz-play__tri{ transform:scale(1.07); background:var(--accent-light); }
}
.xz-play__go:focus-visible{ outline:2px solid var(--accent-light); outline-offset:-6px; }
.xz-play iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }
.xz-play.is-live .xz-play__go,.xz-play.is-live .xz-play__still{ display:none; }
.xz-play.is-live::after{ display:none; }

.xz-am{ margin-top:clamp(24px,3vw,38px); display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; }
.xz-am__f{ width:100%; height:252px; border:1px solid var(--hair); border-radius:var(--r-md); background:var(--surface); display:block; }
@media (max-width:520px){ .xz-am__f{ height:230px; } }

/* ---- contact details, and the chip that is a link ---- */
.xz-dl{ margin-top:16px; }
.xz-dl dt{ font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-top:16px; }
.xz-dl dt:first-child{ margin-top:0; }
.xz-dl dd{ margin:4px 0 0; font-size:clamp(16px,1.5vw,18px); }
.xz-addr{ margin-top:16px; font-style:normal; font-size:15.5px; line-height:1.7; color:var(--muted); }
.xz-link{ color:var(--ink); border-bottom:1px solid var(--hair); padding-bottom:1px; transition:color 180ms var(--ease), border-color 180ms var(--ease); }
.xz-link::before,.xz-link::after{ display:none !important; }
@media (hover:hover) and (pointer:fine){ .xz-link:hover{ color:var(--accent-light); border-color:var(--accent-light); } }
.xz-chip--link{ display:inline-block; transition:color 180ms var(--ease), border-color 180ms var(--ease); }
.xz-chip--link::before,.xz-chip--link::after{ display:none !important; }
@media (hover:hover) and (pointer:fine){ .xz-chip--link:hover{ color:var(--ink); border-color:var(--accent-light); } }

/* ---- worx: the brand cards and the wall ---- */
.xz-card--link{ display:flex; flex-direction:column; transition:border-color 220ms var(--ease), background-color 220ms var(--ease); }
.xz-card--link::before,.xz-card--link::after{ display:none !important; }
.xz-card__go{ margin-top:auto; padding-top:18px; font-size:13px; font-weight:500; color:var(--accent-light); }
@media (hover:hover) and (pointer:fine){
  .xz-card--link:hover{ border-color:rgba(255,90,112,.4); background:var(--surface); }
}

.xz-wall{
  margin-top:clamp(24px,3vw,40px);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px;
}
.xz-wall__i{
  display:block; position:relative; overflow:hidden;
  border-radius:var(--r-sm); border:1px solid var(--hair); background:var(--surface);
  aspect-ratio:1/1;
}
.xz-wall__i::before,.xz-wall__i::after{ display:none !important; }
.xz-wall__i img{ width:100%; height:100%; object-fit:cover; transition:transform 480ms var(--ease), opacity 320ms var(--ease); opacity:.92; }
@media (hover:hover) and (pointer:fine){
  .xz-wall__i:hover img{ transform:scale(1.045); opacity:1; }
  .xz-wall__i:hover{ border-color:rgba(255,90,112,.45); }
}
.xz-wall__i:focus-visible{ outline:2px solid var(--accent-light); outline-offset:2px; }
@media (max-width:520px){ .xz-wall{ grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:8px; } }

/* ---- the mark ---- */
.xz-logo{ display:block; height:29px; width:auto; }
.xz-logo--foot{ height:34px; }
.xz-nav__logo{ display:flex; align-items:center; }
.xz-nav__logo::before,.xz-nav__logo::after{ display:none !important; }
.xz-foot__logo{ display:inline-flex; }
.xz-foot__logo::before,.xz-foot__logo::after{ display:none !important; }
@media (max-width:760px){ .xz-logo{ height:24px; } .xz-logo--foot{ height:30px; } }
img.xz-pre__mark{ height:clamp(26px,3.4vw,40px); width:auto; }

/* ---- footer, finished ----
   The legal row was inheriting body type, which made the company number as
   loud as a heading. Small print reads as small print, and the small print reads as small print. */
.xz-foot__legal p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--faint); }
.xz-foot__legal p:last-child{ text-align:right; }
@media (max-width:620px){ .xz-foot__legal{ justify-content:flex-start; gap:6px; } .xz-foot__legal p:last-child{ text-align:left; } }

/* the mark sits on the same baseline grid as the rest of the brand block */
.xz-foot__brand{ gap:18px; }
.xz-foot__logo{ display:inline-flex; align-items:center; }
.xz-foot__addr{ margin-top:14px; }

/* ---- the two rooms inside rooms ---- */

/* A note that is advice rather than a call to action, so it is not dressed as
   one: bordered and quiet instead of crimson and loud. */
.xz-note-panel{
  border:1px solid var(--hair); border-left:2px solid var(--accent);
  border-radius:var(--r-md); background:var(--surface);
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.6vw,34px);
  max-width:86ch;
}
.xz-note-panel__h{ font-size:clamp(17px,1.8vw,20px); font-weight:600; letter-spacing:-0.018em; }
.xz-note-panel__l{ margin-top:10px; font-size:15px; line-height:1.68; color:var(--muted); }

/* ---- tick list ---- */
.xz-ticks{ border:0; padding:0; margin:0; min-width:0; }
.xz-ticks__grid{ margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
.xz-tick{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  border:1px solid var(--hair); border-radius:var(--r-sm);
  background:var(--surface); padding:12px 14px;
  font-size:14.5px; line-height:1.35; color:var(--muted);
  transition:border-color 180ms var(--ease), color 180ms var(--ease), background-color 180ms var(--ease);
}
.xz-tick input{
  appearance:none; width:17px; height:17px; flex:0 0 17px; margin:0;
  border:1px solid var(--hair); border-radius:5px; background:transparent;
  display:grid; place-items:center; cursor:pointer;
  transition:border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.xz-tick input::after{
  content:""; width:9px; height:9px; border-radius:2px; transform:scale(0);
  background:var(--bg); transition:transform 160ms var(--ease);
}
.xz-tick input:checked{ background:var(--accent-light); border-color:var(--accent-light); }
.xz-tick input:checked::after{ transform:scale(1); }
.xz-tick:has(input:checked){ color:var(--ink); border-color:rgba(255,90,112,.4); background:var(--surface-hi); }
.xz-tick input:focus-visible{ outline:2px solid var(--accent-light); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .xz-tick:hover{ color:var(--ink); border-color:rgba(255,255,255,.2); } }

/* ---- the studio tiles ----
   Uneven on purpose. Seven tiles on a regular grid leave a hole, and a room
   that has a photograph earns more of the page than one that does not.
   The split is the Framer original: 845 to 487 at a 1344 rail with 12px
   gutters, which is 1.7351fr to 1fr once the gutter is taken out. */
.xz-tiles{ display:grid; gap:12px; margin-top:clamp(26px,3vw,44px); }
.xz-tiles__r{ display:grid; gap:12px; }
.xz-tiles__r--a{ grid-template-columns:1.7351fr 1fr; }
.xz-tiles__r--b{ grid-template-columns:1fr 1.7351fr; }
.xz-tiles__r--c{ grid-template-columns:1fr 1fr; }
.xz-tiles__r--d{ grid-template-columns:1fr; }

.xz-tile{
  position:relative; display:flex; flex-direction:column; overflow:clip;
  background:rgba(255,255,255,0.05); border-radius:24px;
  min-height:424px; isolation:isolate;
  transition:background-color 320ms var(--ease), transform 480ms var(--ease);
}
.xz-tile::before,.xz-tile::after{ display:none !important; }
.xz-tiles__r--c .xz-tile{ min-height:300px; }
.xz-tiles__r--d .xz-tile{ min-height:228px; }

.xz-tile__shot{ display:block; height:230px; flex:0 0 230px; overflow:clip; }
.xz-tile__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 700ms var(--ease); }

.xz-tile__body{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:32px 32px 34px;
}
.xz-tile__n{ font-size:12px; font-weight:500; letter-spacing:0.08em; line-height:1.2; color:var(--accent-light); font-variant-numeric:tabular-nums; }
.xz-tile__name{ font-size:21px; font-weight:600; letter-spacing:-0.02em; line-height:1.3; color:var(--ink); }
.xz-tile__line{ font-size:15.5px; font-weight:400; letter-spacing:-0.008em; line-height:1.7; color:var(--muted); max-width:62ch; }

@media (hover:hover) and (pointer:fine){
  .xz-tile:hover{ background:rgba(255,255,255,0.075); }
  .xz-tile:hover .xz-tile__img{ transform:scale(1.035); }
  .xz-tile:hover .xz-tile__name{ color:var(--accent-light); }
}
.xz-tile:focus-visible{ outline:2px solid var(--accent-light); outline-offset:3px; }

@media (max-width:1100px){
  .xz-tile{ min-height:360px; }
  .xz-tiles__r--c .xz-tile{ min-height:280px; }
  .xz-tiles__r--d .xz-tile{ min-height:220px; }
}
@media (max-width:860px){
  .xz-tiles__r--a,.xz-tiles__r--b,.xz-tiles__r--c{ grid-template-columns:1fr; }
  .xz-tile,.xz-tiles__r--c .xz-tile,.xz-tiles__r--d .xz-tile{ min-height:0; }
  .xz-tile__body{ padding:24px 24px 26px; gap:14px; }
  .xz-tile__shot{ height:200px; flex-basis:200px; }
}

/* ==========================================================================
   Glass: the menus, and the buttons everywhere.

   One surface recipe, used in three places. A very low-opacity fill doing
   almost nothing on its own, a heavy blur that darkens as well as blurs, a
   hairline border, and two inset lines — light along the top edge, dark along
   the bottom — which is the whole trick: it reads as a pane of something with
   thickness rather than a translucent rectangle.
   ========================================================================== */
.xz{
  --glass-fill:rgba(20,20,26,0.14);
  --glass-blur:blur(42px) saturate(1.9) brightness(0.62);
  --glass-edge:1px solid rgba(255,255,255,0.16);
  --glass-lift:0 30px 72px rgba(0,0,0,0.44),
               inset 0 1px 0 rgba(255,255,255,0.24),
               inset 0 -1px 0 rgba(0,0,0,0.22);
  --nav-h:60px;
}
@media (max-width:760px){ .xz{ --gut:20px; --nav-h:56px; } }

/* --------------------------------------------------------------------------
   Nav bar
   -------------------------------------------------------------------------- */
.xz-nav__logo img{ height:29px; }
.xz-nav__list{ gap:4px; }
.xz-nav__item{ position:relative; display:flex; align-items:center; }

.xz-nav__link{
  font-weight:600; padding:11px 14px; border-radius:var(--r-pill);
  background:transparent; border:1px solid transparent;
  transition:color 180ms var(--ease), background-color 220ms var(--ease), border-color 220ms var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .xz-nav__link:hover{ color:var(--ink); background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.10); }
  .xz-nav__item--menu:hover > .xz-nav__link,
  .xz-nav__item--menu:hover > .xz-nav__caret{ color:var(--accent-light); }
}
.xz-nav__item--menu.is-open > .xz-nav__link{ color:var(--accent-light); background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.10); }

.xz-nav__link:has(+ .xz-nav__caret){ padding-right:4px; }
.xz-nav__caret{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--ink);
  padding:11px 12px 11px 4px; border-radius:var(--r-pill);
  transition:color 180ms var(--ease), transform 260ms var(--ease);
}
.xz-nav__caret svg{ display:block; }
.xz-nav__item--menu.is-open > .xz-nav__caret{ color:var(--accent-light); transform:rotate(180deg); }

/* --------------------------------------------------------------------------
   The panel
   -------------------------------------------------------------------------- */
.xz-dd{
  position:absolute; top:calc(100% + 6px); left:0; z-index:20;
  width:300px; max-width:calc(100vw - 2 * var(--gut));
  padding:8px; border-radius:20px;
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:var(--glass-edge);
  box-shadow:var(--glass-lift);
  opacity:0; transform:translateY(-6px) scale(.985); transform-origin:top left;
  pointer-events:none;
  transition:opacity 190ms var(--ease), transform 280ms var(--ease);
}
/* A browser with no backdrop-filter would show the page straight through a
   14% fill, which is unreadable. It gets a solid panel instead. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .xz-dd{ background:rgba(14,14,19,0.97); }
}
.xz-nav__item--menu.is-open > .xz-dd{ opacity:1; transform:none; pointer-events:auto; }

.xz-dd__lab{
  padding:10px 14px 8px; margin:0;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.xz-dd__i{
  display:block; padding:11px 14px; border-radius:13px;
  transition:background-color 170ms var(--ease);
}
.xz-dd__i::before,.xz-dd__i::after{ display:none !important; }
.xz-dd__n{ display:block; font-size:14px; font-weight:600; letter-spacing:-0.012em; line-height:1.3; color:var(--ink); }
.xz-dd__d{ display:block; margin-top:3px; font-size:12.5px; line-height:1.45; letter-spacing:-0.004em; color:var(--muted); }
.xz-dd__i--sub{ margin-left:14px; border-left:1px solid var(--hair); border-radius:0 13px 13px 0; }
.xz-dd__i--sub .xz-dd__n{ font-weight:500; color:var(--muted); }
@media (hover:hover) and (pointer:fine){
  .xz-dd__i:hover{ background:rgba(255,255,255,0.08); }
  .xz-dd__i:hover .xz-dd__n{ color:var(--accent-light); }
}
.xz-dd__i:focus-visible{ outline:2px solid var(--accent-light); outline-offset:-2px; }

/* --------------------------------------------------------------------------
   Small screens: the panel stops floating and becomes part of the drawer
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .xz-nav__list.is-open{ gap:2px; }
  .xz-nav__item{ width:100%; flex-wrap:wrap; }
  .xz-nav__list.is-open .xz-nav__link{ flex:1 1 auto; padding:10px 12px; }
  .xz-dd{
    position:static; width:100%; max-width:none; order:3;
    opacity:1; transform:none; pointer-events:auto;
    display:none; margin:2px 0 10px; box-shadow:none;
    background:rgba(255,255,255,0.03); -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .xz-nav__item--menu.is-open > .xz-dd{ display:block; }
  .xz-dd__i--sub{ margin-left:10px; }
}

/* --------------------------------------------------------------------------
   Buttons, everywhere

   The primary keeps its weight — a call to action you can see through is a
   call to action nobody presses — so it gets the thickness without the
   transparency: a vertical gradient with a lit top edge and a shadowed base.
   The quiet ones are the actual glass.
   -------------------------------------------------------------------------- */
.xz-btn{ position:relative; isolation:isolate; }

.xz-btn--primary,.xz-panel__btn,.xz-nav__cta{
  background-image:linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 52%, rgba(0,0,0,0.16) 100%);
  box-shadow:0 10px 30px rgba(188,28,52,0.30),
             inset 0 1px 0 rgba(255,255,255,0.26),
             inset 0 -1px 0 rgba(0,0,0,0.26);
  transition:transform 240ms var(--ease), box-shadow 240ms var(--ease), filter 240ms var(--ease);
}
.xz-panel__btn{
  box-shadow:0 10px 30px rgba(0,0,0,0.26),
             inset 0 1px 0 rgba(255,255,255,0.7),
             inset 0 -1px 0 rgba(0,0,0,0.14);
}
@media (hover:hover) and (pointer:fine){
  .xz-btn--primary:hover,.xz-nav__cta:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 14px 38px rgba(188,28,52,0.38), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.26); }
  .xz-panel__btn:hover{ transform:translateY(-1px); box-shadow:0 14px 34px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.14); }
}
.xz-btn--primary:active,.xz-nav__cta:active,.xz-panel__btn:active{ transform:translateY(0) scale(.985); }

.xz-btn--ghost{
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:var(--glass-edge);
  color:var(--ink);
  box-shadow:0 12px 30px rgba(0,0,0,0.3),
             inset 0 1px 0 rgba(255,255,255,0.2),
             inset 0 -1px 0 rgba(0,0,0,0.2);
  transition:transform 240ms var(--ease), border-color 240ms var(--ease), background-color 240ms var(--ease);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .xz-btn--ghost{ background:rgba(255,255,255,0.06); }
}
@media (hover:hover) and (pointer:fine){
  .xz-btn--ghost:hover{ transform:translateY(-1px); border-color:rgba(255,90,112,0.42); background:rgba(255,255,255,0.09); }
}

.xz-play__tri{
  box-shadow:0 10px 40px rgba(188,28,52,0.36),
             inset 0 1px 0 rgba(255,255,255,0.28),
             inset 0 -1px 0 rgba(0,0,0,0.26);
}
.xz-chip--link,.xz-tick{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}

@media (prefers-reduced-motion:reduce){
  .xz-dd{ transition:none; }
  .xz-btn--primary,.xz-btn--ghost,.xz-panel__btn,.xz-nav__cta{ transition:none; }
  .xz-btn--primary:hover,.xz-btn--ghost:hover,.xz-panel__btn:hover,.xz-nav__cta:hover{ transform:none; }
}

/* Footer links: the hit area should be the words, not the whole column. */
.xz-foot__split .xz-foot__link,.xz-foot__cols > div > .xz-foot__link{ width:max-content; max-width:100%; }

/* The corridor carries no labels and Framer shows none, so the caption is
   an answer to a question rather than a sign: it is not there until a
   doorway is pointed at. */
.xz-hall__cap{ opacity:0; transition:opacity 220ms var(--ease); }
.xz-hall.is-lit + .xz-hall__cap{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .xz-hall__cap{ transition:none; } }

/* The studios panel is 633px tall. On a laptop with a 600px viewport that
   runs off the bottom of the screen with nothing to scroll, so it is
   capped to what is actually visible and scrolls inside itself. A panel
   taller than the window is a menu with items nobody can reach. */
.xz-dd{ max-height:calc(100svh - var(--nav-h) - 28px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.xz-dd::-webkit-scrollbar{ width:8px; }
.xz-dd::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:99px; }
.xz-dd--flip{ left:auto; right:0; transform-origin:top right; }
@media (max-width:900px){ .xz-dd{ max-height:none; overflow:visible; } }

/* ==========================================================================
   The release sequence, rebuilt.

   The old version put a rail and a card in a full-height pinned section and
   left the right two thirds of the screen empty. This is the original's
   layout: one panel, three columns, and a plate on the right carrying the
   step's glyph, its number and the room it belongs to.
   ========================================================================== */
.xz-seq__head{ max-width:none; }
.xz-seq__head .xz-h2{ max-width:none; }
.xz-seq__eye{ margin:0 0 18px; }

.xz-seq__panel{
  border:1px solid var(--hair); border-radius:28px;
  background:rgba(255,255,255,0.018);
  padding:clamp(24px,3vw,44px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.xz-seq.is-pinned .xz-seq__panel{ width:100%; }

.xz-seq__stage{ grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:clamp(24px,3.4vw,52px); align-items:stretch; }

/* ---- the rail ---- */
.xz-seq__rail{ border-left:0; padding-left:0; gap:0; }
.xz-seq__mark{
  display:grid; grid-template-columns:22px 18px minmax(0,1fr); align-items:center; gap:10px;
  padding:7px 0; font-size:13.5px; line-height:1.4; color:var(--faint);
  transition:color 220ms var(--ease);
}
.xz-seq__mn{ font-size:11.5px; letter-spacing:.06em; opacity:.8; font-variant-numeric:tabular-nums; }
.xz-seq__dash{ display:block; height:1px; background:currentColor; opacity:.45; transition:background-color 220ms var(--ease), opacity 220ms var(--ease); }
.xz-seq__ml{ min-width:0; }
.xz-seq__mark.is-on{ color:var(--ink); }
.xz-seq__mark.is-on .xz-seq__dash{ background:var(--accent); opacity:1; }
@media (hover:hover) and (pointer:fine){ .xz-seq__mark:hover{ color:var(--ink); } }

/* ---- the step ---- */
.xz-seq.is-pinned .xz-seq__cards{ min-height:clamp(320px,46vh,440px); }
.xz-seq__card{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,394px); gap:clamp(24px,3.4vw,48px); align-items:center; }
.xz-seq__txt{ min-width:0; }
.xz-seq__title{ margin-top:14px; }
.xz-seq__body{ margin-top:18px; max-width:44ch; }
.xz-seq__foot{ margin-top:26px; display:flex; }
.xz-seq__link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:500; letter-spacing:-0.005em; color:var(--muted);
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09);
  border-radius:var(--r-pill); padding:9px 18px;
  transition:color 200ms var(--ease), border-color 200ms var(--ease), background-color 200ms var(--ease), transform 240ms var(--ease);
}
.xz-seq__link::before,.xz-seq__link::after{ display:none !important; }
.xz-seq__dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 6px; }
@media (hover:hover) and (pointer:fine){
  .xz-seq__link:hover{ color:var(--ink); border-color:rgba(255,90,112,.4); background:rgba(255,255,255,0.08); transform:translateY(-1px); }
}

/* ---- the plate ---- */
.xz-art{
  position:relative; aspect-ratio:1/1; width:100%; max-width:394px; justify-self:end;
  display:grid; place-items:center;
  border:1px solid var(--hair); border-radius:24px;
  background:linear-gradient(150deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 58%, rgba(255,255,255,0));
  overflow:hidden; isolation:isolate;
}
.xz-art__halo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(52% 52% at 50% 50%, rgba(188,28,52,.30), rgba(188,28,52,0) 70%);
}
.xz-art__ring{
  position:absolute; z-index:1; width:76%; aspect-ratio:1/1; border-radius:50%;
  border:1px solid rgba(255,255,255,0.075);
}
.xz-art__g{ position:relative; z-index:2; width:42%; height:auto; color:var(--ink); opacity:.92; }
.xz-art__n{
  position:absolute; z-index:2; top:18px; left:20px;
  font-size:11.5px; letter-spacing:.12em; color:var(--faint); font-variant-numeric:tabular-nums;
}
.xz-art__cap{
  position:absolute; z-index:2; bottom:18px; left:20px; right:20px;
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; letter-spacing:-0.004em; color:var(--muted);
}
.xz-art__rule{ display:block; width:18px; height:1px; background:var(--accent); flex:0 0 18px; }

/* ---- narrower ---- */
@media (max-width:1100px){
  .xz-seq__stage{ grid-template-columns:minmax(0,170px) minmax(0,1fr); }
  .xz-seq__card{ grid-template-columns:minmax(0,1fr) minmax(0,300px); }
}
@media (max-width:860px){
  .xz-seq__panel{ border-radius:20px; }
  .xz-seq__card{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .xz-art{ max-width:320px; justify-self:start; }
  .xz-seq__body{ max-width:60ch; }
}
@media (max-width:620px){
  .xz-art{ display:none; }
}

/* The pinned card was pinned by three corners — inset:0 auto auto 0 — which
   leaves width:auto, so it sized to its contents and hung out of the panel.
   Pin the fourth corner and it is bounded again. */
/* All four corners: the card then fills the stage, and the plate, which takes
   its height from the card, fills it with the step rather than floating in
   the middle of a panel with slack underneath. */
.xz-seq.is-pinned .xz-seq__card{ inset:0; }
.xz-seq__card{ align-items:stretch; }
.xz-seq__txt{ display:flex; flex-direction:column; justify-content:center; }

/* The plate takes its size from the height of the stage rather than a fixed
   394px, so a short window shrinks it instead of overflowing. */
.xz-art{ height:100%; width:auto; max-height:394px; max-width:100%; aspect-ratio:1/1; }
.xz-seq.is-pinned .xz-seq__cards{ min-height:min(394px, 52vh); }
@media (max-width:860px){
  .xz-art{ height:auto; width:min(100%,320px); max-height:none; }
  .xz-seq.is-pinned .xz-seq__cards{ min-height:0; }
}

/* A 60ch cap left over from the single column version was still on the card,
   so pinning all four corners bounded it to 616px inside a 789px stage and
   squeezed the step text to 182px. The cap belongs on the paragraph. */
.xz-seq.is-pinned .xz-seq__card{ max-width:none; }
.xz-seq__title{ font-size:clamp(26px,2.6vw,34px); line-height:1.12; }