/* 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;
}
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)}
/* on a screen the closing line and the footer sit closer to the page above them than a
   section would: the line is a sign off, not another section. phones are tight enough
   already, so they keep the normal half gap */
@media (min-width:768px){body > .expand{padding-top:calc(var(--sp-sect) / 4)}}
.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 ---------- */
.hero{position:relative;background:var(--ink);overflow:hidden}
.hero__media{position:relative;min-height:clamp(440px,76svh,780px);height:clamp(440px,76svh,780px);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{
  position:absolute;z-index:2;left:0;right:0;bottom:clamp(2.5rem,6vw,4.5rem);
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);color:var(--paper);
}

/* the headline sits centred in the video, independently of the copy below */
.hero__title{
  position:absolute;z-index:2;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding-inline:var(--gut);color:var(--paper);pointer-events:none;
}
.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}
.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}

@media (max-width:1080px){
  .cards--roster{grid-template-columns:repeat(2,1fr)}
  .cards--roster.is-open{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:780px){
  .cards--roster,.cards--roster.is-open{grid-template-columns:repeat(2,1fr)}
  /* two wide, so a fourth card shows up front and the closed grid is a full 2 by 2 */
  .cards--roster .card--more:nth-of-type(4){display:block}
  .cards--roster.is-open .card--more:nth-of-type(4){animation:none;opacity:1;transform: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}
.card__note{
  margin-top:1rem;color:var(--ink-70);font-size:.9375rem;line-height:1.55;max-width:34ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* phones keep the roster two wide, so the cards tighten up to fit */
@media (max-width:520px){
  .cards--roster{gap:2rem 1rem}
  .cards--roster .card__name{margin-top:.8rem;font-size:1.05rem}
  .cards--roster .card__role{margin-top:.2rem;font-size:.75rem}
  .cards--roster .card__note{margin-top:.5rem;font-size:.8125rem;line-height:1.45}
}
/* 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}
}
/* 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}}

/* ---------- 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:clamp(1rem,2.2vw,1.45rem);
  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__copy{bottom: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}
  .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: auto scrolling band ---------- */
.logowall{
  overflow:hidden;
  /* 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%);
}
/* 27 logos, about four seconds each, the same pace the band has always had */
.logowall__track{
  display:flex;width:max-content;align-items:center;
  animation:slide 108s linear infinite;
}
.logowall:hover .logowall__track,
.logowall__track:focus-within{animation-play-state:paused}
/* 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;
}
.logowall__item:hover img{filter:none;opacity:1}
@media (max-width:767px){.logowall{--ls:.75}}

@media (prefers-reduced-motion:reduce){
  .logowall{overflow-x:auto}
  .logowall__track{animation:none}
}



/* ---------- 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__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)}
.opt input{
  appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
  width:18px;height:18px;border:1.5px solid var(--rule);border-radius:4px;
  display:grid;place-items:center;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.opt input::after{
  content:"";width:9px;height:5px;
  border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);
  transform:rotate(-45deg) scale(0);transition:transform .15s ease;
}
.opt input:checked{background:var(--ink);border-color:var(--ink)}
.opt input:checked::after{transform:rotate(-45deg) scale(1)}
.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,.opt input::after{transition:none}
}

/* ---------- hero background video ---------- */
.hero__video{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .8s 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);
}
.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}
}

/* icons centred, directly above the footer separator */
.foot .social{margin-top:var(--sp-4)}

/* ================= 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;
}
.aboutband__media{aspect-ratio:4/5;overflow:hidden}
.aboutband__media img{width:100%;height:100%;object-fit:cover;display:block}
.aboutband__copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-sect) clamp(1.75rem,5vw,5.5rem);
}
.aboutband h2{color:var(--paper)}
.aboutband__text{margin-top:var(--sp-head);max-width:56ch}
.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-4)}

@media (max-width:900px){
  .aboutband{grid-template-columns:1fr}
  .aboutband__media{aspect-ratio:4/3}
  .aboutband__copy{padding:var(--sp-sect) var(--gut)}
}

/* ---------- the MAD line, hero sized ---------- */
.expand--hero{
  background:none;padding:0;overflow:visible;
  display:block;color:inherit;margin-bottom:0;
  max-width:none;width:100%;text-align:center;
}
.expand--hero .expand__line{
  font-size:clamp(2.6rem,9vw,7rem);
  letter-spacing:-.005em;
  line-height: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:2px;
  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}
.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.
   hollow like the site's own buttons: the page shows through, with the ring, the mark
   and the label all 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:1.5px solid var(--wa-ink);border-radius:999px;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--wa-ink);text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  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 shows through in its own colour */
.mg .wa{--wa-ink:#25D366;background:rgba(7,7,10,.82)}
.wa__icon{flex:0 0 53px;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);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:49px}
  .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)}

/* ---------- 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 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 with the same info mark as 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 */
.realtag:hover{background:#202124}
.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)}
.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)}