/* MAD Entertainment — shared styles
   White ground, heavy grotesque, full bleed photography, lilac accent. */

:root{
  --ink:     #0A0A0A;
  --ink-70:  #55555A;
  --ink-45:  #8A8A90;
  --paper:   #FFFFFF;
  --lilac:   #EFE2F8;
  --lilac-2: #D9BFEE;
  --rule:    #E2E2E4;

  /* spacing scale: every gap on the site comes from one of these */
  --sp-1: .5rem;
  --sp-2: .75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-head: clamp(2rem, 4vw, 3rem);      /* heading to its content */
  --sp-gap:  clamp(1.25rem, 2.5vw, 2rem); /* grid and flex gaps      */
  --sp-sect: clamp(3rem, 5.5vw, 5rem);    /* the gap between two sections */

  --shell: 1320px;
  --gut: clamp(1.25rem, 4.5vw, 4rem);

  --fs-hero: clamp(2.6rem, 7.5vw, 6rem);
  --fs-h2:   clamp(2.1rem, 5.6vw, 4.25rem);
  --fs-h3:   clamp(1.2rem, 2vw, 1.5rem);
  --fs-lead: clamp(1rem, 1.35vw, 1.1rem);
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;
  color-scheme:light;   /* stops mobile browsers force darkening the page */
}
section[id],[id]{scroll-margin-top:104px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1rem;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* the font joins f to a following i or l ("fi", "fl") into one shape, which in
     "Profile" or "fill" reads like a typo. this keeps every letter separate */
  font-variant-ligatures:no-common-ligatures;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,.display{font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
/* ---------- the gap between sections ---------- */
/* one gap everywhere, --sp-sect: every section gives half of it above and below, so
   any two meeting leave exactly that much. the full width bands that carry their own
   colour give theirs as margin instead, so their colour still stops at their own edge.
   no two margin bands touch, which would collapse the gap to half */
.section,
.gallery,           /* the marquee: white, same as the page */
.contact,           /* the enquiry block: the panel inside it carries the colour */
body > .expand{     /* the typing line above the footer, not the one in the hero */
  padding-block:calc(var(--sp-sect) / 2);
}
.hero{margin-bottom:calc(var(--sp-sect) / 2)}
.aboutband{margin-block:calc(var(--sp-sect) / 2)}
/* phones run tighter: one line changes every gap on the page, the MADgicians page
   sets the same pair of numbers */
@media (max-width:767px){:root{--sp-sect:clamp(3.75rem,15vw,5.5rem)}}
.measure{max-width:58ch}
.measure-sm{max-width:44ch}
.muted{color:var(--ink-70)}

/* Second line of a heading steps in, as on the reference */
.stagger span{display:block}
.stagger span+span{padding-left:clamp(1rem,3.2vw,3.25rem)}

/* ---------- links and buttons ---------- */
.link{
  display:inline-block;font-weight:600;font-size:.9375rem;text-decoration:none;
  padding-bottom:.3rem;border-bottom:2px solid var(--ink);transition:opacity .18s ease;
}
.link:hover{opacity:.55}

.btn{
  display:inline-block;font-weight:600;font-size:.9375rem;text-decoration:none;
  padding:.95rem 1.9rem;border-radius:999px;
  background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
/* hero buttons: black at rest, white on hover. both behave identically. */
.btn--light,.btn--outline{
  background:var(--ink);color:var(--paper);border-color:rgba(255,255,255,.5);
}
.btn--light:hover,.btn--outline:hover,
.btn--light:focus-visible,.btn--outline:focus-visible{
  background:var(--paper);color:var(--ink);border-color:var(--paper);
}

:focus-visible{outline:2.5px solid var(--lilac-2);outline-offset:3px}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  transition:transform .34s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;
  will-change:transform;
}
/* homepage: see through glass, same weight as the MADgicians bar */
.masthead--glass{background:rgba(255,255,255,.72);backdrop-filter:blur(14px)}
.masthead.is-hidden{transform:translateY(-102%)}
.masthead.is-stuck{box-shadow:0 1px 0 rgba(10,10,10,.09)}
.masthead__inner{
  max-width:var(--shell);margin-inline:auto;padding:0 var(--gut);
  min-height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.wordmark{text-decoration:none;display:inline-flex;align-items:center;line-height:0}
.wordmark img{height:30px;width:auto;display:block}
.foot .wordmark img{height:38px}
@media (max-width:767px){.wordmark img{height:26px}}
.nav{display:flex;gap:2.25rem;align-items:stretch;align-self:stretch}
.nav a{
  position:relative;display:flex;align-items:center;
  text-decoration:none;font-size:.9375rem;font-weight:500;
  color:var(--ink-45);transition:color .2s ease;
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:center;
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.nav a:hover{color:var(--ink)}
/* the section currently on screen brightens and underlines */
.nav a.is-current,.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav a.is-current:not(.btn)::after,
.nav a[aria-current="page"]:not(.btn)::after{transform:scaleX(1)}
.nav .btn{
  font-size:.875rem;padding:.7rem 1.5rem;align-self:center;
  background:transparent;color:var(--ink);border-color:var(--ink);
}
.nav .btn:hover,.nav .btn:focus-visible{background:var(--ink);color:var(--paper)}
.nav .btn[aria-current="page"]{font-weight:600}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--ink)}
.burger span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;transition:transform .25s ease,opacity .25s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:767px){
  .burger{display:block}
  .nav{
    position:fixed;inset:var(--head-h,74px) 0 auto 0;display:none;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:.5rem var(--gut) 1.75rem;
  }
  .nav.is-open{display:flex}
  .nav a{padding:1rem 0;font-size:1.15rem;width:100%}
  .nav a:not(.btn){border-bottom:1px solid var(--rule)}
  .nav .btn{margin-top:1.25rem;width:auto}
}

/* ---------- marquee ---------- */
.marquee{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);overflow:hidden;padding:.7rem 0;background:var(--paper)}
.marquee__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee p{
  margin:0;padding-right:2.5rem;white-space:nowrap;
  font-weight:800;font-size:clamp(.95rem,1.5vw,1.15rem);letter-spacing:-.02em;
  display:flex;align-items:center;gap:2.5rem;
}
.marquee p::after{content:"\2726";font-size:.85em}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.marquee--lilac{background:var(--lilac)}

/* ---------- hero ---------- */
/* the video fills the whole hero, and the headline and the copy stack down it in
   normal flow: a spacer, the headline, then the copy's box, with the spacer and the
   copy's box splitting the leftover height evenly so the headline sits centred. when a
   phone set to large text makes the copy need more than its half, the spacer gives way
   first and then the hero grows, instead of the copy running over the headline */
.hero{
  --hero-pad-b:clamp(2.5rem,6vw,4.5rem);   /* the gap under the buttons */
  position:relative;background:var(--ink);overflow:hidden;
  display:flex;flex-direction:column;
  min-height:clamp(440px,76svh,780px);
}
.hero::before{content:"";flex:1 1 0;padding-top:var(--hero-pad-b)}   /* the same padding as .hero__copy, so the two halves match */
.hero__media{position:absolute;inset:0;background:#171719}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 78% 46% at 50% 46%, rgba(0,0,0,.58) 0%, rgba(0,0,0,.2) 62%, rgba(0,0,0,0) 100%),
    linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 34%, rgba(0,0,0,0) 62%);
}
.hero__slug{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.4);font-size:.75rem;letter-spacing:.06em}
.hero__copy{
  flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;z-index:2;
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:0 var(--gut) var(--hero-pad-b);color:var(--paper);
}

/* the headline sits centred in the video, independently of the copy below.
   it is a size container so the headline can scale to the room it has (cqi) */
.hero__title{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding-inline:var(--gut);color:var(--paper);pointer-events:none;
  container-type:inline-size;
}
.hero h1{font-size:var(--fs-hero);max-width:16ch;margin-inline:auto}
.hero__lead{margin-top:var(--sp-4);max-width:46ch;font-size:var(--fs-lead);line-height:1.55;color:rgba(255,255,255,.85)}
.hero__actions{margin-top:var(--sp-5);display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* ---------- media placeholders ---------- */
.media{position:relative;background:#EFEFF1;overflow:hidden;aspect-ratio:var(--r,4/3);display:grid;place-items:center}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media__slug{font-size:.7rem;letter-spacing:.06em;color:var(--ink-45);padding:.5rem 1rem;text-align:center}
/* the filename an empty slot is waiting for. it lives in data-slug and is drawn here,
   so it shows on screen but is not page text for Google to read as content */
.media__slug::before{content:attr(data-slug)}
.media--tall{--r:3/4}
.media--square{--r:1/1}
.media--wide{--r:16/9}

.reel{position:relative;background:#111}
.reel .media__slug{color:rgba(255,255,255,.45)}
.reel__play{position:absolute;inset:0;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:#fff}
.reel__play em{
  font-style:normal;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.8);
  backdrop-filter:blur(4px);font-size:.8rem;font-weight:700;
  transition:background .2s ease,color .2s ease;
}
.reel__play:hover em{background:#fff;color:var(--ink)}

/* ---------- full bleed photo band ---------- */
.bleed{width:100%;height:clamp(260px,42vw,560px);position:relative;background:#EFEFF1;display:grid;place-items:center}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- section heads ---------- */
.head{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:start;margin-bottom:var(--sp-head)}
.head p{color:var(--ink-70);margin:0;padding-top:.45rem;max-width:40ch}
.head-gap{margin-bottom:var(--sp-head)}
/* a subheading that sits under a section, not beside it */
.subhead{
  font-size:clamp(1.6rem,2.5vw,2rem);
  font-weight:700;letter-spacing:-.025em;line-height:1.25;
}
.subhead--center{text-align:center}
@media (max-width:820px){.head{grid-template-columns:1fr;align-items:start}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-gap)}

/* roster grid: 3 wide while closed, 4 wide once opened.
   the columns themselves animate, so the first three shrink to make room. */
.cards--roster{
  grid-template-columns:repeat(3,1fr);
  transition:grid-template-columns .55s cubic-bezier(.16,1,.3,1);
}
.cards--roster.is-open{grid-template-columns:repeat(4,1fr)}
.cards--roster .card--more{display:none}
.cards--roster.is-open .card--more{
  display:block;opacity:0;transform:translateY(18px);
  animation:cardin .5s cubic-bezier(.16,1,.3,1) forwards;
}
/* the fourth card lands as the columns finish shrinking, the rows below follow */
.cards--roster.is-open .card--more:nth-of-type(4){animation-delay:.18s}
.cards--roster.is-open .card--more:nth-of-type(5){animation-delay:.34s}
.cards--roster.is-open .card--more:nth-of-type(6){animation-delay:.40s}
.cards--roster.is-open .card--more:nth-of-type(7){animation-delay:.46s}
.cards--roster.is-open .card--more:nth-of-type(8){animation-delay:.52s}
.cards--roster.is-open .card--more:nth-of-type(9){animation-delay:.58s}
.cards--roster.is-open .card--more:nth-of-type(10){animation-delay:.64s}
.cards--roster.is-open .card--more:nth-of-type(11){animation-delay:.70s}
.cards--roster.is-open .card--more:nth-of-type(12){animation-delay:.76s}
.cards--roster.is-open .card--more:nth-of-type(13){animation-delay:.82s}
.cards--roster.is-open .card--more:nth-of-type(14){animation-delay:.88s}

/* closed, it is always one row of three, at every width, so there is never a lone card
   left on a row of its own. opened, laptops and tablets show three across */
@media (max-width:1080px){
  .cards--roster.is-open{grid-template-columns:repeat(3,1fr)}
}
/* phones: closed, three across with smaller type; opened, two across, roomy enough for
   each act's sentence to show in full */
@media (max-width:780px){
  .cards--roster{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem .75rem}
  .cards--roster .card__name{margin-top:.7rem;font-size:clamp(.875rem,3.4vw,1.3rem)}
  .cards--roster .card__role{margin-top:.2rem;font-size:clamp(.6875rem,2.4vw,.8125rem);line-height:1.35}
  .cards--roster .card__note{margin-top:.45rem;font-size:clamp(.75rem,2.6vw,.875rem);line-height:1.45}
  .cards--roster.is-open{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 1rem}
  .cards--roster.is-open .card__name{margin-top:.8rem;font-size:clamp(1rem,4.2vw,1.3rem)}
  .cards--roster.is-open .card__role{font-size:.75rem}
  .cards--roster.is-open .card__note{margin-top:.5rem;font-size:.875rem;line-height:1.5}
}
/* on the narrowest phones a third of the screen is too narrow for the sentence under
   each name, so the closed row of three shows the name and the kind of act; opened, two
   across, the sentence is back */
@media (max-width:560px){.cards--roster:not(.is-open) .card__note{display:none}}
.card{text-decoration:none;display:block}
.card .media{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.card:hover .media{transform:scale(1.015)}
.card__name{margin-top:1.4rem;font-weight:800;font-size:1.3rem;letter-spacing:-.025em;line-height:1.2}
.card__role{color:var(--ink-45);font-size:.8125rem;font-weight:600;margin-top:.3rem}
/* each act's sentence shows in full, however long; the row grows to fit it */
.card__note{margin-top:1rem;color:var(--ink-70);font-size:.9375rem;line-height:1.55;max-width:34ch}
/* meet the team stays three across on phones, type scaled down to the narrow columns */
@media (max-width:767px){
  .cards--team{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
  .cards--team .card__name{margin-top:.7rem;font-size:clamp(.875rem,3.4vw,1.3rem)}
  .cards--team .card__role{margin-top:.2rem;font-size:clamp(.6875rem,2.4vw,.8125rem);line-height:1.35}
}
/* meet the team: three across at every width, so a narrow window never leaves one
   person alone on a second row */
.cards--team{grid-template-columns:repeat(3,minmax(0,1fr))}
/* two people: the same size as three across, centred, rather than two stretched wide */
.cards--team:has(> .card:nth-child(2):last-child){
  grid-template-columns:repeat(2,calc((100% - 2 * var(--sp-gap)) / 3));justify-content:center;
}
@media (max-width:767px){
  .cards--team:has(> .card:nth-child(2):last-child){grid-template-columns:repeat(2,calc((100% - 1.5rem) / 3))}
}

/* ---------- carousel ---------- */
.rail{position:relative}
.rail__track{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.rail__track::-webkit-scrollbar{display:none}
.rail__track>*{flex:0 0 clamp(280px,41vw,620px);scroll-snap-align:center}
.rail__btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.9);border:0;color:var(--ink);
  font-size:1.2rem;display:grid;place-items:center;transition:background .2s ease;
}
.rail__btn:hover{background:#fff}
.rail__btn--prev{left:clamp(.5rem,2vw,1.5rem)}
.rail__btn--next{right:clamp(.5rem,2vw,1.5rem)}

/* ---------- clients ---------- */
.clients h2{margin-bottom:var(--sp-4)}
.clients hr{border:0;border-top:1px solid var(--ink);margin:0 0 var(--sp-head)}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(2rem,4vw,3.5rem) 1rem;align-items:center}
.logos div{display:grid;place-items:center;min-height:56px}
.logos img{max-height:46px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:opacity .2s ease,filter .2s ease}
.logos div:hover img{filter:none;opacity:1}
.logos span{font-size:.7rem;color:var(--ink-45)}

/* ---------- split text block ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(1.5rem,5vw,5rem);align-items:start}
.split>*+*{padding-top:.45rem}
.split__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);color:var(--ink-70);font-size:.9375rem}
@media (max-width:900px){.split{grid-template-columns:1fr}.split__cols{grid-template-columns:1fr}}

/* ---------- dark contact panel ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
.contact__panel{background:var(--ink);color:var(--paper);padding:clamp(2.5rem,5vw,4.5rem)}
.contact__panel h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.contact__panel p{color:rgba(255,255,255,.7);margin-top:var(--sp-4);max-width:34ch;font-size:.9375rem}
.contact__panel address{font-style:normal;margin-top:var(--sp-5);line-height:1.9;font-size:.9375rem}
.contact__panel address a{text-decoration:none;color:rgba(255,255,255,.75)}
.contact__panel address a:hover{color:#fff}
.contact__panel strong{display:block;font-weight:700}
.contact__form{padding:clamp(2.5rem,5vw,4.5rem);background:var(--paper)}
@media (max-width:900px){
  .contact{grid-template-columns:1fr}
  /* stacked, the form is last and has the page's own colour, so its bottom padding would
     read as extra empty space before the next section: the section's own gap is enough */
  .contact__form{padding-bottom:0}
}

/* ---------- form ---------- */
.form{display:grid;gap:var(--sp-4);max-width:640px}
.field{display:grid;gap:.4rem}
.field label{font-size:.8125rem;font-weight:600;color:var(--ink-70)}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper);border:1px solid var(--rule);color:var(--ink);
  font:inherit;font-size:.9375rem;padding:.8rem .9rem;border-radius:6px;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
.form button{width:100%;border-radius:6px;padding:1.05rem;border:0;cursor:pointer;font:inherit;font-weight:600;background:var(--ink);color:var(--paper)}
.form button:hover{background:#2C2C31}
.form__note{font-size:.8125rem;color:var(--ink-45)}
/* sending bar, added under the button by script.js */
.form{--ok:#1F9D55;--bad:#C23B3B}
.form__status{display:grid;gap:.55rem}
.form__status[hidden]{display:none}
.form__bar{height:4px;border-radius:999px;background:var(--rule);overflow:hidden}
.form__bar span{display:block;width:0;height:100%;border-radius:inherit;background:var(--ok)}
.form__status.is-sending .form__bar span{width:85%;transition:width 1.8s cubic-bezier(.2,.7,.3,1)}
.form__status.is-sent .form__bar span{width:100%;transition:width .35s ease}
.form__status.is-error .form__bar span{width:100%;background:var(--bad)}
.form__msg{margin:0;font-size:.875rem;font-weight:600;color:var(--ink-70)}
.form__status.is-sent .form__msg{color:var(--ok)}
.form__status.is-error .form__msg{color:var(--bad)}
.form button:disabled{opacity:.6;cursor:progress}

/* ---------- cta band ---------- */
.band{background:var(--lilac);text-align:center}
.band h2{margin-inline:auto;max-width:17ch}
.band p{margin:1.5rem auto 2.25rem;color:var(--ink-70);max-width:46ch}

/* ---------- footer ---------- */
.foot{background:var(--paper);border-top:1px solid var(--rule);padding-block:calc(var(--sp-sect) / 2) var(--sp-5)}
.foot__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--sp-head)}
.foot h4{font-size:.8125rem;font-weight:700;margin:0 0 var(--sp-3)}
.foot__brand{margin-top:var(--sp-3);max-width:32ch;font-size:.9375rem}
.foot__find{margin-top:var(--sp-4)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.foot a{text-decoration:none;color:var(--ink-70);font-size:.9375rem}
.foot a:hover{color:var(--ink)}
.foot address{font-style:normal;color:var(--ink-70);font-size:.9375rem;line-height:1.8}
.foot .map{border:0;width:100%;max-width:400px;aspect-ratio:16/10;border-radius:8px;margin-top:var(--sp-3);background:#EFEFF1}
.foot__base{
  margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.8125rem;color:var(--ink-70);
}
@media (max-width:700px){.foot__grid{grid-template-columns:1fr;gap:2.25rem}}

/* ---------- inner page hero ---------- */
.phero{padding-block:var(--sp-sect) var(--sp-head)}
.phero h1{font-size:clamp(2.4rem,6.5vw,5rem);max-width:16ch}
.phero p{margin-top:var(--sp-4);color:var(--ink-70);font-size:var(--fs-lead)}

/* ---------- detail blocks ---------- */
.detail{border-top:1px solid var(--rule);scroll-margin-top:100px}
.detail__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.detail:nth-of-type(even) .detail__media{order:-1}
.detail dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);margin:var(--sp-5) 0 0;font-size:.9375rem}
.detail dt{font-weight:700;white-space:nowrap}
.detail dd{margin:0;color:var(--ink-70)}
@media (max-width:900px){
  .detail__grid{grid-template-columns:1fr}
  .detail:nth-of-type(even) .detail__media{order:0}
}

/* ---------- programme list ---------- */
.run{border-top:1px solid var(--ink)}
.run__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:1.5rem;align-items:baseline;
  padding:1.75rem 1.25rem 1.75rem 0;border-bottom:1px solid var(--rule);text-decoration:none;
  transition:background .2s ease,padding-left .2s ease;
}
.run__row:hover,.run__row:focus-visible{background:var(--lilac);padding-left:1.25rem}
.run__name{font-weight:800;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.03em;line-height:1.1}
.run__for{color:var(--ink-70);font-size:.9375rem}
.run__len{font-weight:600;font-size:.8125rem;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .run__row{grid-template-columns:1fr;gap:.5rem;padding-block:1.4rem}
  .run__len{order:-1;color:var(--ink-45)}
}

/* helpers used by the inner pages */
.kicker{font-weight:700;font-size:.8125rem;color:var(--ink-45)}
.statement__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(1.5rem,5vw,5rem)}
@media (max-width:900px){.statement__grid{grid-template-columns:1fr}}
.house{background:var(--lilac)}
.quote q{font-weight:800;font-size:var(--fs-h2);letter-spacing:-.03em;line-height:1.05}
.quote figcaption{margin-top:1.75rem;color:var(--ink-45);font-size:.875rem}
.programme__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-head)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__track{animation:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- MAD expands into Making A Difference ---------- */
.expand{
  background:var(--paper);color:var(--ink);
  padding-block:.85rem;
  display:grid;place-items:center;overflow:hidden;
}
.expand__line{
  margin:0;
  font-weight:800;
  font-size:calc(clamp(1rem,2.2vw,1.45rem) * var(--fit,1));   /* --fit: see script.js */
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  display:inline-flex;
  align-items:baseline;
}
.expand__seed{display:inline-block}
.expand__type{display:inline-block;white-space:pre}
.expand__caret{
  display:inline-block;width:.07em;height:.85em;background:currentColor;
  margin-inline:.035em;vertical-align:-.06em;opacity:0;
  transition:opacity .25s ease;
}
.expand.is-typing .expand__caret{opacity:1}
.expand__caret.is-blinking{animation:blink .58s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .expand__caret{display:none}
}


/* ---------- social links ---------- */
/* icon plus username pills, stacked, all as wide as the longest one */
.foot .social,.social{display:grid;justify-content:start;gap:var(--sp-2);margin-top:var(--sp-4);padding:0;list-style:none}
.foot .social a,.social a{
  height:44px;border-radius:999px;padding:0 1.15rem 0 1rem;
  display:flex;align-items:center;gap:.6rem;
  font-size:.875rem;font-weight:500;white-space:nowrap;
  border:1.5px solid rgba(10,10,10,.22);color:var(--ink);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.foot .social a:hover,.social a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.foot .social svg,.social svg{width:18px;height:18px;fill:currentColor;display:block}


/* ---------- phones ---------- */
@media (max-width:560px){
  .hero h1{font-size:clamp(2rem,9vw,2.9rem)}
  .hero{--hero-pad-b:1.75rem}
  .hero__lead{margin-top:1rem;font-size:.9375rem}
  .hero__actions{margin-top:1.5rem;gap:.6rem;width:100%}
  .hero__actions .btn{flex:1 1 auto;text-align:center;padding:.85rem 1.1rem}
  .stagger span+span{padding-left:.75rem}
  .rail__btn{width:42px;height:42px}
  .rail__track>*{flex:0 0 86%}
  .logos{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .contact__panel,.contact__form{padding:2rem 1.25rem}
  .contact__form{padding-bottom:0}
  .foot .map{aspect-ratio:3/2}
}

/* ---------- centred section heading ---------- */
.head--center{
  display:block;text-align:center;
  max-width:44rem;margin-inline:auto;
  margin-bottom:var(--sp-head);
}
.head--center h2{
  font-size:clamp(1.75rem,4.2vw,3.25rem);
  margin-inline:auto;max-width:18ch;
}
.head--center p{
  color:var(--ink-70);margin:var(--sp-3) auto 0;padding-top:0;
  max-width:52ch;font-size:var(--fs-lead);
}
.section .head--center:last-child{margin-bottom:0}

/* ---------- unfolding roster ---------- */
@keyframes cardin{to{opacity:1;transform:none}}

.more{display:flex;justify-content:center;margin-top:var(--sp-head)}
.more .btn{cursor:pointer;font-family:inherit}

@media (prefers-reduced-motion:reduce){
  .cards--roster{transition:none}
  .cards--roster.is-open .card--more{animation:none;opacity:1;transform:none}
}

/* ---------- client logos: two rows that drift, and can be dragged ---------- */
/* script.js moves the rows. without it the band is simply a sideways scroller */
.logowall{
  display:grid;row-gap:calc(14px * var(--ls));
  overflow-x:auto;scrollbar-width:none;
  /* fade the logos out at both edges so they don't cut off hard */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.logowall::-webkit-scrollbar{display:none}
.logowall.is-driven{
  overflow:hidden;
  touch-action:pan-y;      /* a sideways swipe moves the logos, up and down still scrolls the page */
  cursor:grab;-webkit-user-select:none;user-select:none;
}
.logowall.is-driven.is-dragging{cursor:grabbing}
.logowall__row{display:flex;width:max-content;align-items:center;will-change:transform}
/* each logo is trimmed to its artwork and carries its own --h (px at desktop),
   worked out so every logo covers about the same area: long wordmarks sit
   lower, compact marks stand taller, and none of them shouts over the rest */
.logowall{--ls:1}
.logowall__item{
  flex:0 0 auto;
  height:calc(80px * var(--ls));
  display:grid;place-items:center;
  padding-inline:clamp(1.25rem,3vw,2.5rem);
}
.logowall__item img{
  height:calc(var(--h,46) * 1px * var(--ls));width:auto;
  filter:grayscale(1);opacity:.65;
  transition:opacity .2s ease,filter .2s ease;
  -webkit-user-drag:none;
}
.logowall__item:hover img{filter:none;opacity:1}
@media (max-width:767px){.logowall{--ls:.75}}



/* ---------- entertainment dropdown ---------- */
.select{position:relative}
.select__toggle{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:6px;
  padding:.8rem .9rem;font-size:.9375rem;color:var(--ink-45);
  transition:border-color .15s ease;
}
.select__toggle::-webkit-details-marker{display:none}
.select__toggle:hover{border-color:var(--ink-45)}
.select[open] .select__toggle{border-color:var(--ink);color:var(--ink);border-bottom-left-radius:0;border-bottom-right-radius:0}
.select__toggle:focus-visible{outline:2.5px solid var(--lilac-2);outline-offset:2px}
.select__toggle.is-filled{color:var(--ink);font-weight:500}
.select__toggle [data-label]{min-width:0;line-height:1.45}   /* several picks wrap, the arrow stays put */
.select__chev{width:18px;height:18px;flex:0 0 auto;transition:transform .2s ease}
.select[open] .select__chev{transform:rotate(180deg)}

.select__panel{
  position:absolute;z-index:20;left:0;right:0;top:100%;
  background:var(--paper);border:1px solid var(--ink);border-top:0;
  border-radius:0 0 6px 6px;
  max-height:264px;overflow-y:auto;
  box-shadow:0 14px 30px rgba(10,10,10,.1);
  padding:.35rem;
}
.opt{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem .65rem;border-radius:4px;cursor:pointer;
  font-size:.9375rem;color:var(--ink-70);
  transition:background .12s ease,color .12s ease;
}
.opt:hover{background:#F4F4F6;color:var(--ink)}
/* the tick is drawn (an svg), so every browser puts it in the same place. it is
   balanced on the middle of the box by its weight, not just its outline, and fills
   most of it. it grows in from nothing as the box is ticked */
.opt input{
  appearance:none;-webkit-appearance:none;margin:0;padding:0;flex:0 0 auto;   /* no padding: .field input gives inputs text box padding, which stretched this box */
  width:18px;height:18px;border:1.5px solid var(--rule);border-radius:4px;
  cursor:pointer;
  background:no-repeat center / 0 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.17 7.8 5.97 11.5 13.77 3.1' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E");
  transition:background-color .15s ease,border-color .15s ease,background-size .15s ease;
}
.opt input:checked{background-color:var(--ink);border-color:var(--ink);background-size:100% 100%}
.opt input:focus-visible{outline:2.5px solid var(--lilac-2);outline-offset:2px}
.opt:has(input:checked){color:var(--ink);font-weight:500}

@media (prefers-reduced-motion:reduce){
  .select__chev,.opt input{transition:none}
}

/* ---------- hero background video ---------- */
/* a quick fade: the still under it is the video's own first frame, a dark stage, so
   there is nothing to blend, and a slow fade would dim the curtain opening */
.hero__video{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .25s ease}
.hero__video.is-ready{opacity:1}
.hero__video iframe{
  position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;              /* 16:9 by width  */
  min-width:177.78vh;min-height:100%;      /* 16:9 by height */
  transform:translate(-50%,-50%);
  border:0;pointer-events:none;
}

/* ---------- hero: centred copy, no display headline ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hero__copy{text-align:center}
.hero__lead{
  margin-inline:auto;
  font-size:clamp(1.05rem,1.75vw,1.35rem);
  line-height:1.5;
  max-width:52ch;
  color:rgba(255,255,255,.94);
  text-wrap:balance;   /* when it wraps on a phone, two even lines rather than one word left over */
}
.hero__actions{justify-content:center}
@media (max-width:560px){
  .hero__actions{width:auto}
  .hero__actions .btn{flex:0 1 auto}
}
/* phones: every pill button shares one size, the hero buttons at 80% of desktop.
   madgicians.css reuses the same --mbtn values for its own buttons */
@media (max-width:767px){
  :root{--mbtn-fs:.75rem;--mbtn-pad:.76rem 1.52rem}
  .btn,.nav .btn,.hero__actions .btn{font-size:var(--mbtn-fs);padding:var(--mbtn-pad)}
}
@media (max-width:560px){
  :root{--mbtn-pad:.68rem .88rem}
}

/* the social links in two columns, one per brand (MAD Entertainment, The MADgicians),
   each headed in the same style as "Pages". icons only, side by side. at rest they take
   the text colour; under the mouse each lights up in its own colours */
.foot__socials{
  display:grid;grid-template-columns:repeat(2,max-content);gap:var(--sp-3) clamp(2rem,5vw,3.5rem);
  margin-top:var(--sp-4);align-items:start;
}
.foot__defs{position:absolute;width:0;height:0;overflow:hidden}
.foot .foot__social .social{display:flex;align-items:center;gap:20px;margin-top:0;min-height:29px}   /* as tall as the YouTube mark, so both rows sit on one line */
/* each link takes up exactly the room its icon fills, so the first icon lines up with
   the heading above and the gaps between icons all look the same. the 8px of padding
   (taken back by the margin) gives a finger a bigger target without moving anything */
.foot .foot__social .social a{
  width:auto;height:auto;padding:8px;margin:-8px;justify-content:center;
  border:0;border-radius:50%;background:none;color:inherit;
  transition:color .18s ease;
}
.foot .foot__social .social svg{width:24px;height:24px}
/* YouTube's mark is a wide, short rectangle, so at the same size it looks smaller than
   the square Instagram and round Facebook marks. it is drawn wider to carry the same weight */
.foot .foot__social a[aria-label^="YouTube"] svg{width:29px;height:29px}
.foot__social .foot__yt-play,.foot__social .foot__fb-f{fill:transparent;transition:fill .18s ease}
.foot .foot__social .social a:hover{background:none;border:0}
.foot .foot__social a[aria-label^="Instagram"]:hover svg{fill:url(#ftIg)}
.foot .foot__social a[aria-label^="Facebook"]:hover{color:#1877F2}
.foot .foot__social a[aria-label^="Facebook"]:hover .foot__fb-f{fill:#fff}
.foot .foot__social a[aria-label^="YouTube"]:hover{color:#FF0000}
.foot .foot__social a[aria-label^="YouTube"]:hover .foot__yt-play{fill:#fff}

/* ================= scroll reveal ================= */
/* headings come in a word at a time, everything else rises as a block */
.reveal-words > .rw{
  display:inline-block;
  opacity:0;transform:translateY(.42em);
  transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.reveal-words.is-in > .rw{opacity:1;transform:none}

.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal-words > .rw,.reveal{opacity:1;transform:none;transition:none}
}


/* ================= about: photo left, black extending right ================= */
.aboutband{
  background:var(--ink);color:var(--paper);
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:stretch;
}
/* the photo is cropped square, taking the empty wall off the top so the band is no
   taller than the short text needs. the group sits in the lower two thirds of the
   photo, so the crop holds low (85%) to keep every head and the feet in */
.aboutband__media{aspect-ratio:1/1;overflow:hidden;justify-self:stretch;align-self:stretch}   /* square at least, taller if the text needs it */
.aboutband__media img{width:100%;height:100%;object-fit:cover;object-position:50% 85%;display:block}
/* the heading and text sit in the middle of the black, both ways, as one left
   aligned block: both share the one width, so their left edges line up */
.aboutband__copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-sect) clamp(1.75rem,5vw,5.5rem);
}
.aboutband__copy > *{width:min(100%,34rem);margin-inline:auto}
.aboutband h2{color:var(--paper)}
.aboutband__text{margin-top:var(--sp-head)}
.aboutband__text p{color:rgba(255,255,255,.78);font-size:var(--fs-lead);line-height:1.6}
.aboutband__text p + p{margin-top:var(--sp-3)}

@media (max-width:900px){
  .aboutband{grid-template-columns:1fr}
  .aboutband__media{aspect-ratio:4/3}
  .aboutband__media img{object-position:50% 55%}   /* heads to knees, the group centred */
  .aboutband__copy{padding:var(--sp-sect) var(--gut)}
}

/* ---------- the MAD line, hero sized ---------- */
.hero .expand--hero{   /* .hero, to outrank the 16ch max-width on .hero h1 */
  background:none;padding:0;overflow:visible;
  display:block;color:inherit;margin-bottom:0;
  max-width:none;width:100%;text-align:center;
}
/* "Making A Difference" is about 9.9em wide with the caret, so 9.8cqi keeps the whole
   line inside the headline's box on any screen. the rem floor alone ran it off the edge
   of phones narrower than about 430px, and further on phones set to large text */
.expand--hero .expand__line{
  font-size:calc(clamp(2.6rem,9vw,7rem) * var(--fit,1));
  letter-spacing:-.005em;
  line-height:1;
}
@supports (width:1cqi){
  .expand--hero .expand__line{font-size:calc(min(clamp(2.6rem,9vw,7rem), 9.8cqi) * var(--fit,1))}
}
.expand--hero .expand__caret{width:.055em;height:.8em;margin-inline:.03em}

/* ---------- gallery: rolls on its own ---------- */
.gallery{overflow:hidden;background:var(--paper)}
.gallery__track{
  display:flex;width:max-content;gap:clamp(.45rem,.9vw,.75rem);   /* the photos spaced apart */
  animation:slide 72s linear infinite;
}
.gallery:hover .gallery__track{animation-play-state:paused}
.gallery__item{
  position:relative;flex:0 0 clamp(260px,30vw,480px);
  aspect-ratio:5/4;background:#EFEFF1;overflow:hidden;
  display:grid;place-items:center;
}
.gallery__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* arrows step one photo either way. script.js takes over the drift from the
   CSS animation (is-driven) so the two can share one position */
.gallery{position:relative}
.gallery.is-driven .gallery__track{animation:none;will-change:transform}
/* it can be dragged, swiped and flicked like the client logos: a sideways swipe moves it,
   up and down still scrolls the page */
.gallery.is-driven .gallery__track{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.gallery.is-driven.is-dragging .gallery__track{cursor:grabbing}
.gallery__item img{-webkit-user-drag:none}
.gallery .rail__btn{padding:0;box-shadow:0 2px 14px rgba(10,10,10,.14)}
.gallery .rail__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  .gallery{overflow-x:auto}
  .gallery__track{animation:none}
  .gallery.is-driven{overflow-x:hidden}
}

/* ---------- showreel pop up (both pages) ---------- */
/* 16:9, as wide as fits the screen while leaving room for the close button above */
.reelbox{
  width:min(100% - 2 * var(--gut), 1120px, (100svh - 9rem) * 16 / 9);
  max-width:none;max-height:none;padding:0;border:0;overflow:visible;
  background:transparent;color:#F3F2EF;
}
.reelbox::backdrop{background:rgba(7,7,10,.88);backdrop-filter:blur(6px)}
.reelbox[open]{animation:reelin .4s cubic-bezier(.16,1,.3,1)}
.reelbox[open]::backdrop{animation:reelfade .3s ease}
@keyframes reelin{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes reelfade{from{opacity:0}}
.reelbox__frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid rgba(243,242,239,.12)}
.reelbox__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reelbox__close{
  position:absolute;right:0;bottom:calc(100% + .75rem);
  width:44px;height:44px;display:grid;place-items:center;padding:0;
  border-radius:50%;border:1px solid rgba(243,242,239,.32);
  background:transparent;color:#F3F2EF;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.reelbox__close svg{width:20px;height:20px}
.reelbox__close:hover{background:#fff;border-color:#fff;color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .reelbox[open],.reelbox[open]::backdrop{animation:none}
}

/* ---------- WhatsApp button ---------- */
/* hidden until the enquiry form has been scrolled to, then it stays put for the rest of
   the visit. bottom right on every screen size, under the top bar and any pop up.
   the same frosted glass as the top bar (.masthead--glass): the same tint, the same
   blur and the same faint hairline, with a soft shadow since it floats. the mark and
   the label are in WhatsApp's green */
.wa{
  /* a deeper green on the white pages, so the label is readable against them, and
     WhatsApp's own green on the dark one */
  --wa-ink:#128C4B;
  position:fixed;z-index:50;
  right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);
  display:flex;align-items:center;justify-content:flex-end;
  width:56px;height:56px;overflow:hidden;
  border:1px solid rgba(10,10,10,.09);border-radius:999px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--wa-ink);text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.92);
  transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1),
             visibility .35s,width .55s cubic-bezier(.16,1,.3,1),
             background .2s ease,color .2s ease,border-color .2s ease;
}
/* the dark page gets its own bar's glass: near black, with a light hairline */
.mg .wa{--wa-ink:#25D366;background:rgba(7,7,10,.72);border-color:rgba(243,242,239,.12);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.wa__icon{flex:0 0 54px;display:grid;place-items:center}
.wa__icon svg{width:27px;height:27px}
/* the label is clipped off to the left until the button widens for it */
.wa__label{
  white-space:nowrap;padding-left:1.15rem;
  font-size:.875rem;font-weight:700;letter-spacing:-.01em;line-height:1;
  opacity:0;transition:opacity .2s ease;
}
.wa.is-on{opacity:1;visibility:visible;transform:none}
/* --wa-w is the width the label needs, worked out by the script once it can measure it */
.wa.is-wide{width:var(--wa-w,15rem)}
.wa.is-wide .wa__label{opacity:1;transition-delay:.14s}
@media (hover:hover){
  .wa.is-on:hover{background:var(--wa-ink);border-color:var(--wa-ink);color:#fff;transform:translateY(-2px)}
}
/* a dark green ring, so the focus mark shows on the light pages and the dark one alike */
.wa:focus-visible{outline:2px solid #0E7A3E;outline-offset:2px}
@media (max-width:767px){
  .wa{width:52px;height:52px}
  .wa__icon{flex-basis:50px}
  .wa__icon svg{width:25px;height:25px}
  .wa__label{font-size:.8125rem;padding-left:1rem}
}
@media (prefers-reduced-motion:reduce){
  .wa{transition:opacity .2s ease,visibility .2s;transform:none}
  .wa.is-on:hover{transform:none}
}

/* ---------- the text only pages: privacy, accessibility ---------- */
.prose{max-width:62ch}
.prose h2{
  font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.02em;
  margin:clamp(2.25rem,4vw,3rem) 0 .85rem;
}
.prose > :first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-70);line-height:1.75}
.prose ul{margin:0 0 1.1em;padding-left:1.15rem}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.prose__date{font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-45)}

/* ---------- pop ups: no ring on opening ---------- */
/* every pop up (the real photographs notice, the showreel, the media photos) carries
   autofocus, so on opening the pop up itself takes the focus rather than its first
   button. without it Safari draws its focus ring round the close button every time the
   pop up opens. the pop up shows no ring of its own; Tab still reaches the close button
   (with its ring, for keyboard users) and Escape still closes it */
dialog[autofocus]:focus{outline:none}

/* ---------- the real photographs notice ---------- */
/* deliberately plain: a dark slab with plain type, the way a browser or a video site
   tells you something. it sits in the middle of the screen over a dimmed page and only
   opens when the reader asks: the "Real photos" label on the photos, or the footer link */
.vouch{
  --vouch-pad:clamp(1.25rem,2.2vw,1.5rem);
  --vouch-radius:10px;
  border:0;padding:var(--vouch-pad);
  background:#202124;color:#F1F1F1;
  border-radius:var(--vouch-radius);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  font-size:.875rem;line-height:1.6;
  overflow:hidden;                 /* so the photograph's corners follow the card's */
}
/* the photograph the notice is about, carrying its own line. it bleeds out to the card's
   edges by pulling back its own padding, so nothing frames it twice */
.vouch__shot{
  display:block;height:auto;
  width:calc(100% + var(--vouch-pad) * 2);max-width:none;   /* past the global img cap */
  margin:calc(var(--vouch-pad) * -1) calc(var(--vouch-pad) * -1) clamp(.9rem,1.8vw,1.15rem);
  border-radius:var(--vouch-radius) var(--vouch-radius) 0 0;
}
.vouch__title{
  display:flex;align-items:center;gap:.45rem;   /* the picture mark sits on the line */
  margin:0 2.25rem .5rem 0;        /* clear of the cross */
  font-size:.9375rem;font-weight:600;letter-spacing:0;line-height:1.4;
}
/* set to the headline's own size, so it reads as part of it */
.vouch__pic{width:1.5em;height:1.5em;flex:0 0 auto;display:block;color:#9AA0A6}
.vouch__lead{margin:0 0 .6rem;color:#DADCE0}
.vouch__note{margin:0;color:#9AA0A6;font-size:.8125rem}

/* the middle of the screen, page dimmed. it is opened as a modal, which is what puts it
   in the browser's top layer, so nothing on the page can cover it and no z-index of ours
   is involved */
.vouch{width:min(30rem,calc(100vw - 2rem));margin:auto}
.vouch::backdrop{background:rgba(0,0,0,.55)}
/* it pops out: fades in while growing from slightly smaller, and the dimming fades in
   with it. closing plays it the other way (script.js adds .is-closing, then closes it
   once the fade is done) */
.vouch[open]{animation:vouchIn .34s cubic-bezier(.16,1,.3,1)}
.vouch[open]::backdrop{animation:vouchDim .34s ease}
.vouch.is-closing{animation:vouchOut .24s ease forwards}
.vouch.is-closing::backdrop{animation:vouchUndim .24s ease forwards}
@keyframes vouchIn{from{opacity:0;transform:scale(.92)}}
@keyframes vouchOut{to{opacity:0;transform:scale(.95)}}
@keyframes vouchDim{from{opacity:0}}
@keyframes vouchUndim{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .vouch[open],.vouch[open]::backdrop,.vouch.is-closing,.vouch.is-closing::backdrop{animation:none}
}

/* it sits over the photograph now, so it carries its own dark disc to stay readable
   whatever is behind it */
.vouch__close{
  position:absolute;top:.6rem;right:.6rem;
  width:34px;height:34px;display:grid;place-items:center;
  background:rgba(0,0,0,.45);border:0;padding:0;cursor:pointer;color:#F1F1F1;
  border-radius:50%;transition:background .2s ease,color .2s ease;
}
.vouch__close:hover{background:rgba(0,0,0,.68);color:#fff}
.vouch__close:focus-visible{outline:2px solid #8AB4F8;outline-offset:2px}
.vouch__x{width:15px;height:15px;position:relative}

/* the "Real photos" label: above the homepage gallery strip on the left, and beside the
   Media label on the MADgicians page. a small pill, its info mark first, as on the footer
   link. it opens the notice above */
.realtag{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem .7rem;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.75rem;font-weight:600;line-height:1;letter-spacing:.01em;
  color:#fff;background:rgba(32,33,36,.45);
  transition:background .2s ease;
}
.realtag svg{width:1.15em;height:1.15em;flex:0 0 auto;display:block}
/* see through at rest, so it stays quiet; solid when the mouse is on it */
@media (hover:hover){.realtag:hover{background:#202124}}   /* not on touch screens, where it would stick after a tap */
.realtag:focus-visible{outline:2px solid #8AB4F8;outline-offset:2px}
/* its own row above the strip, lined up with the page's left edge. the row has a set
   height so the arrows, which centre on the whole gallery, can step down by half of it
   and stay centred on the photos */
.gallery{--tagrow:2.5rem}
.realtag-row{display:flex;align-items:flex-start;height:var(--tagrow)}
.gallery .rail__btn{top:calc(50% + var(--tagrow) / 2)}
/* on the dark page it sits in the Media label's row, a faint light pill. the row centres
   everything on one line (seclabel--tag), so the pill, the caption and the neon dash share
   a middle. the caption's wide letter spacing leaves a space after its last letter, which
   the pill's negative margin takes back so the gap looks like the dash's gap. the caption
   is all capitals, which sit high in their line, so the pill lifts a touch to centre on
   the letters rather than the line */
.seclabel--tag{align-items:center}
.seclabel--tag::before{margin-top:0}
.seclabel .realtag{position:relative;top:-.2rem;margin-left:-.3rem;color:var(--inv);background:rgba(243,242,239,.06)}
@media (hover:hover){.seclabel .realtag:hover{background:rgba(243,242,239,.2)}}

/* the other way in, last in the Pages list: an info mark so it reads as a notice to open
   rather than another page to go to, and underlined so it reads as something to press */
.foot__note{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.9375rem;line-height:1.4;text-align:left;   /* the links it sits with */
  color:var(--ink-70);
  text-decoration:underline;text-underline-offset:.2em;
  transition:color .2s ease;
}
.foot--dark .foot__note{color:var(--dim)}
/* the mark is set to the text's own size and centred against it */
.foot__note svg{width:1em;height:1em;flex:0 0 auto;display:block}
.foot__note:hover{color:var(--ink)}
.foot--dark .foot__note:hover{color:var(--inv)}