/* The reference has one 1090 × 475 hero canvas. Keep its proportions intact
   across desktop viewport aspect ratios; do not independently zoom the art. */
.reference-home .demo-strip b{font-style:italic;margin-right:2.6vw;font-weight:600}
.ref-hero .cp-hero-picture{clip-path:none;overflow:visible}
.ref-hero .cp-hero-picture img{object-fit:contain}
.header .header-messengers .messenger-icon{display:block;width:clamp(24px,1.65vw,34px);height:clamp(24px,1.65vw,34px);padding:0;background:transparent;flex:none;transition:transform .18s ease,filter .18s ease}
.header .header-messengers button:hover .messenger-icon{transform:translateY(-2px);filter:drop-shadow(0 3px 4px #19356826)}
.header .header-messengers button:focus-visible{outline:2px solid #245bff;outline-offset:4px;border-radius:50%}
@media(prefers-reduced-motion:reduce){.header .header-messengers .messenger-icon{transition:none}}
.header-messengers{display:flex;align-items:center;gap:inherit;flex:none}
.header .header-channels .header-phone{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:10px 14px;border:1px solid #245bff26;border-radius:0;background:#245bff0d;color:#245bff;gap:9px;white-space:nowrap;font-size:clamp(13px,1.05vw,20px)}
.header .header-phone>span,.header .header-phone>strong{display:block;line-height:1}
.header-phone strong{font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.header .header-channels .header-phone,.header .header-cta{height:52px!important;min-height:52px!important;padding-top:0!important;padding-bottom:0!important}
.header .header-phone:hover{background:#245bff18;border-color:#245bff66}
html{scroll-padding-top:calc(var(--cp-top-height) + 16px)}
body>.header{position:sticky;top:0;z-index:30;transition:background-color .2s,box-shadow .2s}
body>.header.is-scrolled,
body.reference-home:has(.cp-hero)>.header.is-scrolled{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(20,33,48,.06);
}
.mobile-menu{position:fixed;top:var(--cp-top-height);max-height:calc(100dvh - var(--cp-top-height));overflow-y:auto}
.ref-hero .cp-ticker{border:0}
.ref-hero .cp-ticker i{display:none}
/* Sample the full-size artwork at exactly the same scale as the visible image.
   Its diagonal meets x=0 at y=1072 of 1180; continue that line to the baseline.
   A subpixel overlap prevents a rasterization gap at browser zoom levels. */
.ref-hero .cp-hero-picture{line-height:0}
.ref-hero .cp-hero-picture::before{
  content:"";
  position:absolute;
  right:calc(100% - .5px);
  bottom:0;
  width:100%;
  height:100%;
  background:url("assets/hero-tickets-menu-bg.webp") left top / 100% 100% no-repeat;
  transform:scaleX(-1);
  clip-path:polygon(0 90.76%,0 100%,4.5% 100%);
  pointer-events:none;
}
.ref-hero .cp-hero-picture strong{background:none;padding:0;right:4%;top:27%;font-weight:400}
@media(min-width:901px){
  .reference-home .demo-strip{min-height:0;padding:0.55vw 3.15vw;font-size:clamp(8px,.75vw,14px)}
  body.reference-home:has(.cp-hero)>.header{height:5.3vw;min-height:0;padding-left:3.15vw;padding-right:3.15vw;gap:1.3vw;background:transparent;border-bottom:0}
  .reference-home .header .brand{width:11vw;min-width:105px;flex:none}
  .reference-home .desktop-nav{font-size:clamp(10.8px,1.008vw,19.2px);gap:1.1vw;flex:none}
  .reference-home .header-channels{display:grid;grid-template-columns:max-content 1fr;gap:0;width:24.7vw;margin-left:auto;margin-right:0;flex:none}
  .reference-home .header-messengers{gap:.9vw}
  .reference-home .header-channels .header-phone{justify-self:center;transform:translateX(.65vw);gap:.45vw;padding:.55vw .7vw;font-size:clamp(13px,1.05vw,20px)}
  .reference-home .header-channels button{font-size:clamp(9px,.82vw,16px);gap:.35vw}
  .reference-home .header-channels .ref-icon{width:1.65vw;height:1.65vw;min-width:17px;min-height:17px;padding:3px}
  .reference-home .header-cta{min-width:0;width:9vw;flex:none;font-size:clamp(10px,.9vw,17px);padding:.9vw .6vw;min-height:0;margin:0}
  .ref-hero{overflow:visible;background:var(--paper)}
  .ref-hero>.container{display:block;flex:none;position:relative;container-type:inline-size;aspect-ratio:1090/475;width:100%;height:auto;min-height:0;margin-block:auto;padding:0;isolation:isolate}
  .ref-hero .cp-hero-copy{position:static;container-type:normal;width:auto;min-width:0;padding:0;pointer-events:none}
  .ref-hero h1{position:absolute;left:3.15%;top:2%;margin:0;line-height:1.04;z-index:3;max-width:none}
  .ref-hero h1 .ref-title-primary{font-size:9.265cqw;transform:scaleX(.78);line-height:.97;letter-spacing:-.04em}
  .ref-hero h1 .ref-title-secondary{font-size:7.65cqw;transform:scaleX(.675);line-height:.9;margin-top:0;letter-spacing:-.04em}
  .ref-hero .cp-hero-copy>p{position:absolute;left:3.15%;top:47.2%;font-size:1.7cqw;line-height:1.25;margin:0;max-width:44%;z-index:3}
  /* Centre between the two-line description's bottom (47.2% + 4.25cqw)
     and the buttons' top (77.2%), accounting for the icon row's own height. */
  .ref-hero .cp-uses{position:absolute;left:3.15%;top:calc(62.2% + 2.125cqw);transform:translateY(-50%);display:flex;flex-wrap:nowrap;gap:2cqw;max-width:47%;margin:0;font-size:.95cqw;z-index:3}
  .ref-hero .cp-uses>span{font-size:inherit;gap:.7cqw}
  .ref-hero .cp-uses .ref-icon{width:1.65cqw;height:1.65cqw}
  .ref-hero .hero-actions{position:absolute;left:3.15%;top:77.2%;width:42%;max-width:none;height:9.2%;display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw;margin:0;z-index:3}
  .ref-hero .hero-actions>.button{min-height:0;height:100%;min-width:0;max-width:none;padding:0 1cqw;font-size:1.05cqw;line-height:1.15;border-radius:0;gap:1cqw}
  .ref-hero .hero-actions>.outline{border-width:2px}
  .ref-hero .cp-hero-picture{position:absolute;right:0;bottom:calc(-1 * max(0px, (100dvh - var(--cp-top-height) - 100cqw * 475 / 1090) / 2));top:auto;left:auto;width:52%;height:auto;min-height:0;margin:0;aspect-ratio:auto;z-index:1;clip-path:none}
  .ref-hero .cp-hero-picture img{position:static;display:block;width:100%;height:auto;object-fit:contain}
  .ref-hero .cp-hero-picture strong{font-size:1.95cqw;line-height:1.18;right:4.7%;top:27%}
  /* Halfway from the buttons' bottom (86.4%) to the viewport's bottom,
     including the free space below the centred hero canvas. */
  .ref-hero .cp-ticker{position:absolute;left:3.15%;top:calc(93.2% + max(0px, (100dvh - var(--cp-top-height) - 100cqw * 475 / 1090) / 4));bottom:auto;transform:translateY(-50%);width:42%;min-height:0;padding:0;margin:0;font-size:.7cqw;display:grid;grid-template-columns:max-content minmax(0,1fr) 20.3cqw;gap:1.4cqw;line-height:1.15;z-index:3;align-items:center}
  .ref-hero .cp-ticker b{white-space:nowrap;font-weight:500}
  .ref-hero .cp-ticker i{display:block;position:relative;width:100%;height:2px;background:#245bff}
  .ref-hero .cp-ticker i::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-left:.65cqw solid #245bff;border-top:.22cqw solid transparent;border-bottom:.22cqw solid transparent}
  .ref-hero .cp-ticker span{white-space:nowrap}
}
@media(min-width:901px) and (max-width:1200px){.reference-home .header-channels>.header-phone{display:none}.reference-home .header-channels{display:flex;width:auto;margin-right:10vw}.reference-home .header{gap:1vw}.reference-home .desktop-nav{gap:.9vw}}
@media(max-width:900px){
  .ref-hero h1 .ref-title-primary{font-size:9.775vw}
  .ref-hero h1 .ref-title-secondary{font-size:7.225vw}
  .ref-hero>.container{flex:1}
  /* Let the actual image define the box: a separate aspect ratio creates a
     taller backdrop and a visible step at the extension when zoomed in. */
  .ref-hero .cp-hero-picture{flex:none;min-height:0!important;aspect-ratio:auto;width:100%;height:auto!important;margin-top:24px}
  .ref-hero .cp-hero-picture img{position:static;width:100%;height:auto;display:block;object-fit:contain}
  .ref-hero .cp-hero-picture strong{font-size:clamp(18px,3.4vw,27px);top:27%;right:4.7%}
  .ref-hero .cp-ticker{flex:none;width:100%;padding:15px 0;min-height:0}
}
@media(max-width:600px){
  .ref-hero h1 .ref-title-primary{font-size:10.03vw}
  .ref-hero h1 .ref-title-secondary{font-size:7.395vw}
}









/* Match the illustration backdrop to the navigation and hero copy. */
.ref-hero{background:var(--paper)}
.ref-hero .hero-actions>.outline{background:var(--paper)}

/* Use the approved home-page header composition on every desktop page. */
@media(min-width:901px){
  .header{height:5.3vw;min-height:0;padding-left:3.15vw;padding-right:3.15vw;gap:1.3vw;background:transparent;border-bottom:0}
  .header .brand{width:11vw;min-width:105px;flex:none}
  .desktop-nav{font-size:clamp(10.8px,1.008vw,19.2px);gap:1.1vw;flex:none}
  .header-channels{display:grid;grid-template-columns:max-content 1fr;gap:0;width:24.7vw;margin-left:auto;margin-right:0;flex:none}
  .header-messengers{gap:.9vw}
  .header-channels .header-phone{justify-self:center;transform:translateX(.65vw);gap:.45vw;padding:.55vw .7vw;font-size:clamp(13px,1.05vw,20px)}
  .header-channels button{font-size:clamp(9px,.82vw,16px);gap:.35vw}
  .header-channels .ref-icon{width:1.65vw;height:1.65vw;min-width:17px;min-height:17px;padding:3px}
  .header-cta{min-width:0;width:9vw;flex:none;font-size:clamp(10px,.9vw,17px);padding:.9vw .6vw;min-height:0;margin:0}
}
@media(min-width:901px) and (max-width:1200px){
  .header-channels>.header-phone{display:none}
  .header-channels{display:flex;width:auto;margin-right:10vw}
  .header{gap:1vw}
  .desktop-nav{gap:.9vw}
}