/* ==========================================================================
   QGlobal — Corporate Sports Hospitality
   Coded from the "Website Image.png" mockup (7680×29108 = 4× a 1920 layout).
   All measurements below are the mockup values divided by 4.
   ========================================================================== */

:root{
  /* palette — sampled directly from the mockup */
  --ink:        #0C0C0C;
  --white:      #FFFFFF;
  --panel:      #F3F3F3;
  --card:       #2A2A2A;
  --orange:     #FF6537;
  --orange-deep:#E64C1E;
  --rule:       #D8D8D8;
  --rule-soft:  #E8E8E8;
  --muted:      #6E6E6E;
  --muted-dark: rgba(255,255,255,.62);
  --rule-dark:  rgba(255,255,255,.16);
  --ghost:      #EAEAEA;
  --score:      #ABABAB;

  /* layout */
  --container: 1400px;
  --gutter: 48px;
  --secpad: clamp(56px, 5.2vw, 100px);
  --hero-inset-x: 36px;
  --hero-inset-y: 16px;

  /* type */
  --sans: "Hanken Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;

  /* motion */
  --ease-out:  cubic-bezier(.22,.75,.28,1);
  --ease-soft: cubic-bezier(.2,.85,.24,1);
  --ease-tear: cubic-bezier(.72,0,.24,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--ui);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }

.wrap{ width:min(var(--container), 100% - (var(--gutter) * 2)); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; font-size:14px;
}
.skip:focus{ left:12px; top:12px; }

:where(a,button,input,select):focus-visible{
  outline:2px solid var(--orange); outline-offset:3px; border-radius:2px;
}

/* --------------------------------------------------------------------------
   Ticket edges — scalloped perforations, used by the panel, cards, button,
   nav pill and social chips.
   -------------------------------------------------------------------------- */
.perf-y{                                   /* notches on left + right edges */
  --r:11px; --s:84px;
  -webkit-mask:
    radial-gradient(var(--r) at left,  #0000 98%, #000) left  / 51% var(--s) repeat-y,
    radial-gradient(var(--r) at right, #0000 98%, #000) right / 51% var(--s) repeat-y;
  mask:
    radial-gradient(var(--r) at left,  #0000 98%, #000) left  / 51% var(--s) repeat-y,
    radial-gradient(var(--r) at right, #0000 98%, #000) right / 51% var(--s) repeat-y;
}
.perf-x{                                   /* notches on top + bottom edges */
  --r:9px; --s:42px;
  -webkit-mask:
    radial-gradient(var(--r) at top,    #0000 98%, #000) top    / var(--s) 51% repeat-x,
    radial-gradient(var(--r) at bottom, #0000 98%, #000) bottom / var(--s) 51% repeat-x;
  mask:
    radial-gradient(var(--r) at top,    #0000 98%, #000) top    / var(--s) 51% repeat-x,
    radial-gradient(var(--r) at bottom, #0000 98%, #000) bottom / var(--s) 51% repeat-x;
}

/* --------------------------------------------------------------------------
   Section bar — hairline + "01 / About Us / © 2026"
   -------------------------------------------------------------------------- */
.secbar{
  display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center;
  border-top:1px solid var(--rule);
  padding-top:15px;
  font-family:var(--ui);
  font-size:13px; letter-spacing:.01em; color:var(--ink);
}
.secbar span:nth-child(2){ text-align:center; }
.secbar span:nth-child(3){ text-align:right; }
.secbar--dark{ border-top-color:var(--rule-dark); color:var(--muted-dark); }

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.logo{
  font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:.005em;
  color:#fff; line-height:1;
}
.logo__q{ color:var(--orange); }
.logo--dark{ color:var(--ink); }

/* ==========================================================================
   HERO  — mockup: inset 37px sides / 16px top, 1845×913
   ========================================================================== */
.hero{
  position:relative;
  margin: var(--hero-inset-y) var(--hero-inset-x) 0;
  width: calc(100% - (var(--hero-inset-x) * 2));
  height: calc(100vh - var(--hero-inset-y));
  height: calc(100dvh - var(--hero-inset-y));
  min-height: calc(100vh - var(--hero-inset-y));
  min-height: calc(100dvh - var(--hero-inset-y));
  overflow:hidden;
  background:#0A0E18;
  display:flex; flex-direction:column;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2;
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,9,16,.62) 0%, rgba(6,9,16,.10) 24%, rgba(6,9,16,.16) 46%, rgba(6,9,16,.66) 68%, rgba(6,9,16,.88) 100%);
}
/* hero inner content aligns to the 1400 container, not the hero box:
   container left (260) − hero inset (36) = 224px */
.hero__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(20px,2.2vw,42px) clamp(20px,11.67vw,224px) 0;
}
.hero__cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:500; color:#fff;
}
.hero__cta span{ transition:transform .25s ease; }
.hero__cta:hover span{ transform:translateX(5px); }

.hero__play{
  position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  border:1.4px solid rgba(255,255,255,.72); background:rgba(255,255,255,.06);
  display:grid; place-items:center; cursor:pointer;
  backdrop-filter:blur(2px);
  transition:background .25s ease, transform .25s ease;
}
.hero__play:hover{ background:rgba(255,255,255,.18); transform:translate(-50%,-50%) scale(1.06); }

.hero__play svg{ width:26px; height:26px; fill:#fff; margin-left:2px; }

.hero__copy{
  margin-top:auto;
  padding: 0 clamp(20px,11.67vw,224px);
}
.hero__eyebrow{
  margin:0 0 6px;
  font-family:var(--sans);
  font-size:clamp(15px,1.15vw,22px); font-weight:500; color:#fff; letter-spacing:-.005em;
}
.hero__title{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(44px, 8.9vw, 171px);
  font-weight:800; line-height:.95; letter-spacing:-.038em; color:#fff;
}
.hero__nav{
  align-self:center;
  margin:clamp(22px,2.6vw,50px) 0 clamp(18px,2.1vw,40px);
  background:var(--orange-deep);
  display:flex; gap:clamp(24px,2.9vw,56px);
  padding:14px clamp(22px,2.2vw,42px);
  --r:5px; --s:16px;
}
.hero__nav a{
  font-size:14px; font-weight:500; color:#fff; letter-spacing:.005em;
  transition:opacity .2s ease;
}
.hero__nav a:hover{ opacity:.72; }

/* --- sticky nav: appears once the hero nav scrolls out of view ----------- */
.stickynav{
  position:fixed; z-index:60; top:0; left:0; right:0;
  display:flex; justify-content:center;
  padding:16px 20px;
  pointer-events:none;
  opacity:0; transform:translateY(-130%);
  transition:opacity .3s ease, transform .38s cubic-bezier(.22,.9,.3,1);
}
.stickynav.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.stickynav__pill{
  display:flex; gap:clamp(24px,2.9vw,56px);
  background:var(--orange-deep);
  padding:14px clamp(22px,2.2vw,42px);
  box-shadow:0 10px 30px rgba(12,12,12,.22);
  --r:5px; --s:16px;
}
.stickynav__pill a{
  font-size:14px; font-weight:500; color:#fff; letter-spacing:.005em;
  transition:opacity .2s ease;
}
.stickynav__pill a:hover{ opacity:.72; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ padding:var(--secpad) 0 clamp(60px,5.6vw,108px); }
.about__grid{
  display:grid; grid-template-columns: 40.4% 1fr;   /* lead starts at x=825 of 1920 */
  gap:0;
  margin-top:clamp(46px,4.6vw,88px);
}
.about__kicker{
  margin:0;
  font-size:clamp(14px,.94vw,17px); line-height:1.75; color:var(--muted);
}
.rating{ margin-top:clamp(34px,3.4vw,64px); }
.rating__stars{ display:flex; gap:5px; }
.rating__stars svg{ width:14px; height:13px; fill:#F2374B; }
.rating__score{
  margin:12px 0 18px;
  font-family:var(--sans);
  font-size:clamp(40px,3.35vw,64px); font-weight:800; line-height:1;
  letter-spacing:-.03em; color:var(--score);
}
.rating__score span{ color:var(--score); }
.rating__proof{ display:flex; align-items:center; gap:16px; }
.rating__proof img{ width:192px; height:auto; }
.rating__proof span{ font-size:13px; color:var(--ink); }

.about__lead{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(28px,2.6vw,50px);
  font-weight:800; line-height:1.26; letter-spacing:-.026em;
  text-indent:3.4em;                     /* first-line indent, as drawn */
  max-width:720px;                       /* holds the mockup's 5-line break + short first line */
}

/* ==========================================================================
   EVERY ASPECT COVERED — ticket panel
   ========================================================================== */
.aspect{ padding-bottom:0; }
.ticketpanel{
  position:relative;
  margin-inline:48px;
  background:var(--panel);
  --r:11px; --s:84px;
  --pad-x:clamp(24px,11vw,212px);
  --pad-y:clamp(48px,5.2vw,100px);
}
/* columns are the mockup's own proportions: text 391 | tear gutter 90 | art 919 */
.ticketpanel__inner{
  display:grid;
  grid-template-columns: minmax(0,391fr) minmax(0,90fr) minmax(0,919fr);
  align-items:center;
  gap:0;
  padding:var(--pad-y) var(--pad-x);
  min-height:clamp(420px,47vw,904px);
}
/* the tear rides the grid, so text can never run past it at any width */
.ticketpanel__tear{
  grid-column:2; grid-row:1;
  justify-self:start; align-self:stretch;
  margin-block:calc(-1 * var(--pad-y));
  position:relative;
  border-left:2px dashed #D2D2D2;
  pointer-events:none;
}
.ticketpanel__tear::before,
.ticketpanel__tear::after{
  content:""; position:absolute; left:-19px;
  width:36px; height:36px; border-radius:50%; background:var(--white);
}
.ticketpanel__tear::before{ top:-18px; }
.ticketpanel__tear::after{ bottom:-18px; }

.aspect__text{ grid-column:1; width:min(340px,100%); }
.aspect__title{
  margin:0 0 22px;
  font-family:var(--sans);
  font-size:clamp(19px,1.36vw,26px);
  font-weight:700; line-height:1.28; text-transform:uppercase; letter-spacing:-.005em;
}
.aspect__body{
  margin:0; padding-top:22px;
  border-top:1px solid #DCDCDC;
  font-size:clamp(13px,.78vw,15px); line-height:1.7; color:var(--muted);
}

/* --- physical card deck --------------------------------------------------
   Every card shares one base box; the stack is built purely from transforms,
   so a card can travel between slots. Slot geometry (scale + rise) is the
   mockup's own measured stack: 918 / 826 / 780 / 734 wide, rising 39/42/29px.
   Slot values live in script.js so the JS can animate between them.
   ------------------------------------------------------------------------- */
.aspect__art{ grid-column:3; }
.deck{
  position:relative; width:100%; max-width:918px;
  aspect-ratio:918 / 568; margin-inline:auto;
}
.deck__card{
  position:absolute; left:0; top:19.37%; width:100%; margin:0;
  aspect-ratio:918 / 458;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform, opacity;
  /* no radius / shadow — the mockup's cards are hard-edged */
}
.deck__card img{
  display:block; width:100%; height:100%; object-fit:cover;
  pointer-events:none; user-select:none;
}

/* ==========================================================================
   EVENTS
   ========================================================================== */
.events{ padding:var(--secpad) 0 clamp(50px,5vw,96px); }
.events__title{
  margin:clamp(60px,6.2vw,120px) 0 0;
  text-align:center;
  font-family:var(--sans);
  font-size:clamp(30px,2.95vw,56px); font-weight:700; letter-spacing:-.03em; line-height:1.1;
}

.tabs{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(18px,2.1vw,40px);
  margin-top:clamp(22px,2.2vw,42px);
}
.tab{
  background:none; border:0; padding:4px 2px 9px; cursor:pointer;
  font-family:var(--ui); font-size:clamp(13px,.83vw,16px); color:var(--ink);
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.tab:hover{ color:var(--orange-deep); }
.tab.is-active{ border-bottom-color:var(--orange); }

/* --- marquee stage ------------------------------------------------------- */
.stage{
  position:relative; overflow:hidden;
  display:flex; justify-content:center;
  padding:clamp(30px,3.4vw,66px) 0 clamp(24px,2.6vw,50px);
}
.stage__marquee{
  position:absolute; left:0; right:0;
  white-space:nowrap; pointer-events:none; overflow:hidden;
  font-family:var(--sans);
  font-size:clamp(56px,10.35vw,199px);
  font-weight:800; letter-spacing:-.035em; line-height:1;
}
.stage__marquee--dark{  top:26%; color:var(--ink); }
.stage__marquee--ghost{ top:57%; color:var(--ghost); }

/* two identical halves translated by exactly 50% = seamless loop */
.marquee__track{ display:inline-flex; will-change:transform; }
.marquee__track > span{ padding-right:.28em; }
.stage__marquee--dark  .marquee__track{ animation:marq-right 34s linear infinite; }
.stage__marquee--ghost .marquee__track{ animation:marq-left  34s linear infinite; }
@keyframes marq-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes marq-left { from{ transform:translateX(0); }    to{ transform:translateX(-50%); } }
.stage__shot{
  position:relative; z-index:2; margin:0;
  width:min(996px, 64vw);
}
.stage__shot img{ width:100%; height:auto; }

/* --- accordion ----------------------------------------------------------- */
.accordion{ margin-top:clamp(30px,3.2vw,62px); }
.acc-item{ border-bottom:1px solid var(--rule-soft); }
.acc-head{
  width:100%; background:none; border:0; text-align:left; cursor:pointer;
  display:grid; grid-template-columns:minmax(0,1fr) 500px 60px;
  align-items:center; gap:40px;
  padding:clamp(18px,1.9vw,36px) 0;
}
.acc-title-wrap{ display:block; min-width:0; }
.acc-title{
  display:block; margin:0;
  font-family:var(--sans);
  font-size:clamp(28px,3.35vw,64px); font-weight:400; letter-spacing:-.03em; line-height:1.1;
  transition:opacity .25s ease;
}
.acc-desc{ display:block; margin:0; font-size:clamp(12px,.78vw,15px); line-height:1.6; color:var(--muted); }
.acc-num{ display:block; font-size:clamp(14px,1.15vw,22px); color:var(--muted); text-align:right; }
.acc-item:not(.is-open) .acc-title{ opacity:.42; }
.acc-item:not(.is-open):hover .acc-title{ opacity:.72; }

.acc-rule{
  display:block; height:3px; width:56px; background:var(--orange);
  margin:6px 0 0; opacity:0;
  transition:opacity .25s ease;
}
.acc-item.is-open .acc-rule{ opacity:1; }

.acc-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s ease;
}
.acc-item.is-open .acc-body{ grid-template-rows:1fr; }
.acc-body > div{ overflow:hidden; }
.acc-panel{
  display:grid; grid-template-columns:315px 594px;
  justify-content:space-between; align-items:start;
  gap:40px;
  padding:clamp(16px,1.7vw,32px) 0 clamp(24px,2.4vw,46px);
}
.acc-panel img{ width:100%; height:auto; }
.acc-events{ list-style:none; margin:0; padding:0; }
.acc-events li{
  display:grid; grid-template-columns:1fr auto auto;
  align-items:baseline; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--rule-soft);
}
.acc-events li:first-child{ border-top:1px solid var(--rule-soft); }
.acc-ev-name{ font-family:var(--sans); font-size:clamp(14px,.94vw,18px); font-weight:700; letter-spacing:-.01em; }
.acc-ev-venue{ font-size:clamp(11px,.68vw,13px); font-style:italic; color:var(--muted); }
.acc-ev-date{ font-size:clamp(11px,.68vw,13px); font-style:italic; font-weight:700; min-width:96px; text-align:right; }

/* ==========================================================================
   WHAT WE OFFER — dark
   ========================================================================== */
.offer{
  background:var(--ink); color:#fff;
  padding:var(--secpad) 0 clamp(56px,5.6vw,108px);
}
.offer__title{
  margin:clamp(46px,4.8vw,92px) 0 clamp(46px,4.8vw,92px);
  margin-left:40%;
  font-family:var(--sans);
  font-size:clamp(34px,3.55vw,68px); font-weight:800; line-height:1.14; letter-spacing:-.032em;
}
.cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
/* all four idle dark; orange is the hover state */
.card{
  background:var(--card);
  min-height:clamp(340px,24.3vw,466px);
  padding:clamp(26px,2.1vw,40px) clamp(18px,1.5vw,28px) clamp(26px,2.1vw,40px);
  display:flex; flex-direction:column;
  --r:9px; --s:42px;
  transition:background .34s ease;
}
@media (hover:hover){
  .card:hover{ background:var(--orange-deep); }
}
.card:focus-within{ background:var(--orange-deep); }
.card__icon{ display:block; color:#fff; }
.card__icon svg{ width:clamp(38px,3.15vw,60px); height:auto; }
.card__title{
  margin:auto 0 12px;
  font-family:var(--sans);
  font-size:clamp(15px,1.02vw,19px); font-weight:700; line-height:1.32; letter-spacing:-.01em;
}
.card__body{
  margin:0;
  font-size:clamp(12px,.73vw,14px); line-height:1.62; color:rgba(255,255,255,.68);
  transition:color .34s ease;
}
@media (hover:hover){
  .card:hover .card__body{ color:rgba(255,255,255,.88); }
}
.card:focus-within .card__body{ color:rgba(255,255,255,.88); }

/* ==========================================================================
   ENQUIRY
   ========================================================================== */
.enquiry{ padding:var(--secpad) 0 clamp(50px,5vw,96px); }
.enquiry__grid{
  display:grid; grid-template-columns:506px 1fr;
  gap:54px;
  margin-top:clamp(46px,4.6vw,88px);
}
.enquiry__art{ margin:0; }
.enquiry__art img{ width:100%; height:auto; object-fit:cover; }
.enquiry__title{
  margin:0 0 18px;
  font-family:var(--sans);
  font-size:clamp(28px,2.95vw,56px); font-weight:700; line-height:1.18; letter-spacing:-.03em;
}
/* class, not `span` — the motion layer injects a span per word inside this
   heading, and a bare descendant selector would indent every one of them */
.enquiry__title .enquiry__title-b{ display:inline-block; padding-left:.28em; }
.enquiry__body{
  margin:0 0 clamp(30px,3vw,58px);
  font-size:clamp(13px,.83vw,16px); line-height:1.7; color:var(--muted); max-width:52ch;
}

.form{ display:block; }
.field{ position:relative; padding-top:22px; margin-bottom:33px; }
.field label{
  position:absolute; left:0; top:22px;
  font-size:clamp(12px,.78vw,15px); color:var(--muted);
  pointer-events:none;
  transition:transform .22s ease, font-size .22s ease, color .22s ease;
  transform-origin:left top;
}
.field input,
.field select{
  width:100%; background:none; border:0; border-bottom:1px solid var(--rule);
  padding:0 0 13px; font-size:clamp(13px,.83vw,16px); line-height:1.5;
  border-radius:0;
  transition:border-color .22s ease;
}
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.field input:focus,
.field select:focus{ outline:none; border-bottom-color:var(--ink); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
  transform:translateY(-20px); font-size:12px; color:var(--muted);
}
.field--select .field__chev{
  position:absolute; right:2px; bottom:14px; width:16px; height:16px; color:var(--muted);
  pointer-events:none;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field-row .field{ margin-bottom:33px; }

.submit{
  margin-top:8px;
  background:var(--orange); color:#fff; border:0; cursor:pointer;
  padding:17px 34px; font-size:14px; font-weight:500; letter-spacing:.005em;
  --r:4px; --s:14px;
  transition:background .2s ease;
}
.submit:hover{ background:var(--orange-deep); }
.form__note{ margin:16px 0 0; font-size:13px; color:var(--muted); min-height:1.2em; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ padding-top:clamp(40px,4vw,76px); }
.footer__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);
  padding-top:clamp(40px,4.2vw,80px);
  padding-bottom:clamp(40px,4.2vw,80px);
}
.footer__brand p{
  margin:20px 0 26px;
  font-size:13px; line-height:1.75; color:var(--muted); max-width:31ch;
}
.footer__col{
  padding-left:clamp(24px,4vw,77px);
  border-left:1px solid var(--rule);
}
.footer__label{ margin:0 0 26px; font-size:13px; color:var(--muted); }
.footer__links{ list-style:none; margin:0; padding:0; }
.footer__links li + li{ margin-top:16px; }
.footer__links a{
  font-family:var(--sans);
  font-size:clamp(16px,1.15vw,22px); font-weight:700; letter-spacing:-.015em;
  transition:color .2s ease;
}
.footer__links a:hover{ color:var(--orange-deep); }

.footer__contact{ list-style:none; margin:0; padding:0; }
.footer__contact li{ display:flex; align-items:center; gap:14px; }
.footer__contact li + li{ margin-top:16px; }
.footer__contact svg{ width:19px; height:19px; flex:none; color:var(--ink); }
.footer__contact a,
.footer__contact span{
  font-family:var(--sans);
  font-size:clamp(15px,1.15vw,22px); font-weight:700; letter-spacing:-.015em;
}
.footer__contact a:hover{ color:var(--orange-deep); }

.social{ list-style:none; margin:0; padding:0; display:flex; gap:9px; }
.social a{
  display:grid; place-items:center;
  width:36px; height:36px; background:var(--orange); color:#fff;
  --r:3.5px; --s:12px;
  transition:background .2s ease;
}
.social a:hover{ background:var(--orange-deep); }
.social svg{ width:18px; height:18px; }

.legal{ background:var(--ink); color:rgba(255,255,255,.72); }
.legal p{
  margin:0; padding:25px 24px; text-align:center; font-size:12.5px;
}
.legal a{ color:inherit; }
.legal a:hover{ color:#fff; }

/* Playfair's ink descends ~9.5% of the font size past the line box, so the band
   needs a deeper bottom pad to contain the Q's tail. Without it the glyph pushed
   past the band and made the document taller than the footer — which showed up
   as a white stripe under the orange. overflow:hidden is the belt-and-braces. */
.wordmark{
  background:var(--orange);
  display:flex; justify-content:center; align-items:flex-start;
  padding:clamp(10px,1.2vw,22px) 20px clamp(18px,2.2vw,42px);
  overflow:hidden;
}
.wordmark span{
  display:block;
  font-family:var(--serif); font-weight:500; color:#fff;
  font-size:clamp(58px,15.6vw,300px);
  line-height:1.12;                     /* full word, descender and Q tail all clear */
  letter-spacing:-.005em;
}

/* ==========================================================================
   MOTION
   Everything below is animation only — remove this block and the layout is
   byte-for-byte the static design again.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll reveals
   A single primitive: [data-rv] starts hidden, .is-in lands it. The variant
   name picks the starting offset; --rv-d is the per-element delay.

   The offsets use the independent `translate` and `scale` properties rather
   than `transform`, so a reveal never overwrites a transform the design
   already owns — the hero play button keeps both its centring translate and
   its hover scale, which a `transform:none` on .is-in would have eaten.
   -------------------------------------------------------------------------- */
.js [data-rv]{
  opacity:0;
  transition:
    opacity   .82s var(--ease-out) var(--rv-d,0ms),
    translate .95s var(--ease-out) var(--rv-d,0ms),
    scale     .95s var(--ease-out) var(--rv-d,0ms);
}
.js [data-rv="fade"]  { }
.js [data-rv="up"]    { translate:0 38px; }
.js [data-rv="up-sm"] { translate:0 18px; }
.js [data-rv="rise"]  { translate:0 70px; scale:.88; }   /* offer cards */
.js [data-rv="shot"]  { scale:.94; }
.js [data-rv="pop"]   { scale:.6; }                      /* hero play button */
.js [data-rv="art"]   { scale:1.07; }
/* The wipe lives on the image, never on the observed element: an element
   clipped to zero area does not intersect anything, so putting clip-path on
   the figure itself would mean the reveal could never be triggered. */
.js [data-rv="art"] img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--ease-out) var(--rv-d,0ms);
}
.js [data-rv="art"].is-in img{ clip-path:inset(0 0 0 0); }

.js [data-rv].is-in{ opacity:1; translate:none; scale:none; }

/* --------------------------------------------------------------------------
   2. Word reveals
   .w  — blur-to-sharp, staggered left to right (hero, section headings)
   .sw — scattered words that rotate and drop into the line (about lead)
   Both are injected by script.js; the delay rides on --d.
   -------------------------------------------------------------------------- */
/* An inline-block is a block container, so it inherits text-indent and would
   re-apply the about lead's 3.4em first-line indent to every single word. The
   indent belongs to the paragraph's first line, not to each word in it. */
.w,
.sw{ display:inline-block; text-indent:0; will-change:opacity, transform, filter; }

.w{
  opacity:0;
  filter:blur(.16em);
  transform:translateY(.1em);
  transition:
    opacity .66s ease           var(--d,0ms),
    filter  .66s ease           var(--d,0ms),
    transform .8s var(--ease-soft) var(--d,0ms);
}
.is-in .w{ opacity:1; filter:blur(0); transform:none; }

.sw{
  opacity:0;
  transform:translate(var(--tx,0), var(--ty,0)) rotate(var(--rz,0deg)) scale(var(--sc,1));
  transition:
    opacity  .5s ease              var(--d,0ms),
    transform 1.05s var(--ease-soft) var(--d,0ms);
}
.is-in .sw{ opacity:1; transform:none; }

/* words stop being transform containers once they have landed, so text
   selection and sub-pixel rendering go back to normal */
.has-landed .w,
.has-landed .sw{ will-change:auto; }

/* --------------------------------------------------------------------------
   3. Per-section motion
   -------------------------------------------------------------------------- */

/* hero — a very slow drift so the still reads as live footage */
.hero__bg{ animation:heroDrift 34s ease-in-out infinite alternate; }
@keyframes heroDrift{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to  { transform:scale(1.11) translate3d(-1.4%,-1.1%,0); }
}

/* aspect deck — caption sits on the card, as in the reference */
.deck__card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 4.4% 4.2%;
  font-family:var(--ui);
  font-size:clamp(11px,.94vw,16px); color:#fff; line-height:1.4;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
  pointer-events:none;
}

/* events accordion — a collapsed row is blurred back, not just dimmed */
.acc-title,
.acc-desc{
  transition:opacity .4s ease, filter .4s ease;
}
.acc-item:not(.is-open) .acc-title{ opacity:.4;  filter:blur(.055em); }
.acc-item:not(.is-open) .acc-desc { opacity:.55; filter:blur(.1em); }
.acc-item:not(.is-open):hover .acc-title{ opacity:.7;  filter:blur(.018em); }
.acc-item:not(.is-open):hover .acc-desc { opacity:.75; filter:blur(.03em); }

/* rows land one after another once the accordion scrolls in */
.accordion.is-in .acc-item{
  animation:accIn .72s var(--ease-out) both;
  animation-delay:var(--i,0ms);
}
@keyframes accIn{
  from{ opacity:0; transform:translateY(28px); }
  to  { opacity:1; transform:none; }
}
/* the open panel's two halves follow the row in */
.acc-item.is-open .acc-panel > *{
  animation:accPanelIn .6s var(--ease-out) both;
  animation-delay:calc(var(--i,0ms) + 160ms);
}
.acc-item.is-open .acc-panel > * + *{
  animation-delay:calc(var(--i,0ms) + 250ms);
}
@keyframes accPanelIn{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* what we offer — the reference keeps the second ticket lit */
.card--feature{ background:var(--orange); }
.card--feature .card__body{ color:rgba(255,255,255,.86); }
@media (hover:hover){
  .card--feature:hover{ background:var(--orange-deep); }
}

/* ==========================================================================
   INTRO — the ticket that tears itself open
   One orange ticket fills the viewport. The right stub folds away along the
   perforation (a true 45° fold: the back leaf is the front leaf mirrored
   about the fold line, which is why the text on it reads backwards), then
   the main body slides off to the left while the page zooms up behind it.
   The fold geometry is driven from script.js; everything else is here.
   ========================================================================== */
html.intro,
html.intro body{ overflow:hidden; height:100%; }

html.intro #page{
  transform:scale(.55);
  transform-origin:50% 50vh;
}
html.intro-open #page{
  transform:scale(1);
  transition:transform 1700ms cubic-bezier(.8,0,.3,1);
}

.tkintro{ display:none; }
html.intro .tkintro{
  display:block;
  position:fixed; z-index:300;
  inset:1.5vh 1.8vw;
  --tear:71%;                       /* where the perforation runs */
  --ink-on-orange:rgba(255,255,255,.82);
  /* an irregular repeat reads as a barcode without shipping an image */
  --bars:repeating-linear-gradient(90deg,
    #fff 0 3px, #0000 3px 7px,  #fff 7px 9px,   #0000 9px 14px,
    #fff 14px 19px, #0000 19px 21px, #fff 21px 23px, #0000 23px 28px,
    #fff 28px 30px, #0000 30px 36px, #fff 36px 41px, #0000 41px 44px);
  /* the rotated barcode runs over a much taller box, so its repeat is coarser
     — otherwise 70-odd bars turn into a moiré stripe instead of a code */
  --barsv:repeating-linear-gradient(180deg,
    #fff 0 5px, #0000 5px 12px, #fff 12px 15px, #0000 15px 24px,
    #fff 24px 33px, #0000 33px 36px, #fff 36px 39px, #0000 39px 49px,
    #fff 49px 52px, #0000 52px 63px, #fff 63px 71px, #0000 71px 77px);
}

/* --- the two halves ------------------------------------------------------ */
.tkintro__body,
.tkintro__stub{ position:absolute; top:0; bottom:0; background:var(--orange-deep); }

.tkintro__body{
  left:0; width:var(--tear);
  will-change:transform;
  /* big scallops down the outer (left) edge, fine perforation on the tear */
  -webkit-mask:
    radial-gradient(1.9vh at left,  #0000 98%, #000) left  / 51% 7vh  repeat-y,
    radial-gradient(.42vh at right, #0000 98%, #000) right / 51% 1.5vh repeat-y;
  mask:
    radial-gradient(1.9vh at left,  #0000 98%, #000) left  / 51% 7vh  repeat-y,
    radial-gradient(.42vh at right, #0000 98%, #000) right / 51% 1.5vh repeat-y;
}
html.intro-open .tkintro__body{
  transform:translateX(-102%);
  transition:transform 1650ms var(--ease-tear);
}

/* the stub carries no paint of its own — its two leaves do */
.tkintro__stub{
  left:var(--tear); right:0; background:none;
  overflow:visible;                  /* the folded leaf reaches past the edge */
}
.tkintro__leaf{
  position:absolute; inset:0;
  background:var(--orange-deep);
  -webkit-mask:
    radial-gradient(.42vh at left, #0000 98%, #000) left  / 51% 1.5vh repeat-y,
    radial-gradient(1.9vh at right, #0000 98%, #000) right / 51% 7vh  repeat-y;
  mask:
    radial-gradient(.42vh at left, #0000 98%, #000) left  / 51% 1.5vh repeat-y,
    radial-gradient(1.9vh at right, #0000 98%, #000) right / 51% 7vh  repeat-y;
}
.tkintro__leaf--back{
  transform-origin:0 0;
  /* the reflection swaps x and y, so the offset is written pre-swapped to
     land the shadow down-and-left of the lifted leaf on screen */
  filter:drop-shadow(9px -7px 18px rgba(12,12,12,.32));
}
/* Sized by script.js to the folded corner only, so the lit band stays welded
   to the crease: bottom-left of that box is the fold, top-right is the tip. */
.tkintro__sheen{
  position:absolute; right:0; top:0; width:0; height:0;
  background:linear-gradient(45deg,
    rgba(255,255,255,.70) 0%, rgba(255,255,255,.34) 9%, rgba(255,255,255,.06) 30%,
    rgba(0,0,0,.03) 62%, rgba(0,0,0,.13) 100%);
}

/* the two punched holes that sit on the perforation */
.tkintro__notch{
  position:absolute; left:var(--tear);
  width:3.6vh; height:3.6vh; border-radius:50%;
  background:var(--white);
  transform:translate(-50%,-50%);
  z-index:3; pointer-events:none;
}
.tkintro__notch--t{ top:0; }
.tkintro__notch--b{ top:100%; }
html.intro-open .tkintro__notch{
  opacity:0; transition:opacity .28s ease .1s;
}

/* --- printing ------------------------------------------------------------ */
.tkintro__head{
  position:absolute; left:26.4%; top:15.5%; margin:0;
  font-family:var(--sans); font-weight:800; color:var(--white);
  font-size:min(11vh, 7.6vw); line-height:.98; letter-spacing:-.035em;
}
.tkintro__meta{
  position:absolute; left:27.8%; top:54.5%; margin:0;
  width:18%; min-width:150px;
  font-family:var(--ui); font-size:clamp(9px,1.55vh,14px);
  letter-spacing:.06em; color:var(--ink-on-orange);
}
.tkintro__meta > div{ display:flex; justify-content:space-between; gap:1em; }
.tkintro__meta dt,
.tkintro__meta dd{ margin:0; white-space:nowrap; }
.tkintro__rule{
  position:absolute; left:27.8%; top:75%; width:39.5%; height:1px;
  background:rgba(255,255,255,.42);
}
.tkintro__num{
  position:absolute; left:27.8%; top:80.5%; margin:0;
  font-family:var(--ui); font-weight:700; font-size:clamp(11px,2vh,18px);
  letter-spacing:.02em; color:var(--white);
}
.tkintro__bar--v{
  position:absolute; left:10.4%; top:16%; width:11.3%; height:69%;
  background:var(--barsv);
}
.tkintro__vnum{
  position:absolute; left:22.4%; top:16%; height:69%;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--ui); font-weight:700; font-size:clamp(9px,1.6vh,15px);
  letter-spacing:.02em; color:var(--white); white-space:nowrap;
}

/* stub side */
.tkintro__stubinner{ position:absolute; inset:0; }
.tkintro__meta--stub{ left:14%; top:16%; width:63%; min-width:0; }
.tkintro__bar--h{
  position:absolute; left:17%; top:57.5%; width:65%; height:8.6%;
  background:var(--bars);
}
.tkintro__hnum{
  position:absolute; left:16%; top:70%; margin:0;
  font-family:var(--ui); font-size:clamp(9px,1.6vh,15px);
  letter-spacing:.01em; color:var(--white); white-space:nowrap;
}

/* A phone-width stub is too narrow to print anything into, so the stub keeps
   only its barcode (turned upright to fill the column) and the body carries
   the rest. The tear, the scallops and the fold are unchanged. */
@media (max-width:760px){
  html.intro .tkintro{ --tear:72%; inset:1vh 2.4vw; }
  .tkintro__head{ left:20%; top:13%; font-size:min(7.4vh, 13.5vw); }
  .tkintro__bar--v{ left:5%; top:15%; width:9.5%; height:62%; }
  .tkintro__vnum{ display:none; }
  .tkintro__meta{ left:20%; top:52%; width:64%; min-width:0; }
  .tkintro__rule{ left:20%; top:71%; width:64%; }
  .tkintro__num{ left:20%; top:76%; }

  .tkintro__meta--stub,
  .tkintro__hnum{ display:none; }
  .tkintro__bar--h{
    left:26%; top:34%; width:48%; height:30%;
    background:var(--barsv);
  }
  .tkintro__notch{ width:2.6vh; height:2.6vh; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  .acc-head{ grid-template-columns:minmax(0,1fr) 1fr 48px; gap:28px; }
  .acc-panel{ grid-template-columns:240px 1fr; }
  .enquiry__grid{ grid-template-columns:380px 1fr; gap:40px; }
  .offer__title{ margin-left:30%; }
}

@media (max-width:960px){
  :root{ --gutter:28px; }
  :root{ --hero-inset-x:16px; --hero-inset-y:12px; }
  .hero__play{ top:38%; }

  .about__grid{ grid-template-columns:1fr; gap:44px; }
  .about__lead{ text-indent:0; max-width:none; }

  .ticketpanel{ margin-inline:20px; }
  .ticketpanel__inner{ grid-template-columns:1fr; gap:40px; min-height:0; }
  .ticketpanel__tear{ display:none; }
  .aspect__text{ grid-column:1; width:100%; }
  .aspect__art{ grid-column:1; }
  .stickynav{ padding:12px 16px; }

  .acc-head{ grid-template-columns:1fr 44px; gap:16px; row-gap:8px; }
  .acc-desc{ grid-column:1 / -1; }
  .acc-panel{ grid-template-columns:1fr; }
  .acc-events li{ grid-template-columns:1fr auto; row-gap:2px; }
  .acc-ev-venue{ grid-column:1; }
  .acc-ev-date{ grid-column:2; grid-row:1; }

  .cards{ grid-template-columns:repeat(2,1fr); }
  .offer__title{ margin-left:0; }

  .enquiry__grid{ grid-template-columns:1fr; }
  .enquiry__art{ max-width:420px; }

  .footer__grid{ grid-template-columns:1fr; gap:40px; }
  .footer__col{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:32px; }
}

@media (max-width:600px){
  :root{ --gutter:20px; }
  :root{ --hero-inset-x:10px; --hero-inset-y:10px; }
  .hero__nav{ gap:20px; padding:12px 20px; }
  .secbar{ font-size:11.5px; }
  .cards{ grid-template-columns:1fr; }
  .card{ min-height:0; }
  .stickynav__pill{ gap:18px; padding:12px 18px; }
  .stickynav__pill a{ font-size:13px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .stage__shot{ width:min(996px, 82vw); }
  .legal p{ font-size:11.5px; padding:20px; }
}

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

  /* nothing is hidden waiting for a reveal that will never be animated */
  .js [data-rv],
  .js [data-rv].is-in{ opacity:1 !important; translate:none !important; scale:none !important; }
  .js [data-rv="art"] img{ clip-path:none !important; }
  .w, .sw{ opacity:1 !important; filter:none !important; transform:none !important; }
  .hero__bg{ animation:none; }
  .accordion.is-in .acc-item,
  .acc-item.is-open .acc-panel > *{ animation:none; }
  .acc-item:not(.is-open) .acc-title,
  .acc-item:not(.is-open) .acc-desc{ filter:none; }
  .tkintro{ display:none !important; }
}