/* Self-hosted, SIL OFL 1.1 (Google Fonts), latin subset */
  @font-face { font-family: "Big Shoulders Display"; src: url(fonts/big-shoulders-display.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
  @font-face { font-family: "Libre Franklin"; src: url(fonts/libre-franklin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
  @font-face { font-family: "Libre Franklin"; src: url(fonts/libre-franklin-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
  @font-face { font-family: "Syncopate"; src: url(fonts/syncopate-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
  :root {
    --ink: #000;
    --ink-soft: #2a2a2a;
    --paper: #fff;
    --blue: #1A75BB;
    --red: #FC3516;
    --midnight: #022052;
    --sweep: linear-gradient(100deg, var(--blue) 0%, var(--red) 100%);
    --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --wide: "Syncopate", "Arial", sans-serif;
    --text: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
    --gutter: clamp(1rem, 4vw, 3.5rem);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    color-scheme: light;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scrollbar-color: var(--blue) var(--paper); }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.0625rem/1.65 var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--blue); color: var(--paper); }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
  :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
  .skip {
    position: absolute; left: var(--gutter); top: -4rem; z-index: 50;
    background: var(--ink); color: var(--paper); padding: .6rem 1rem; font-weight: 600;
  }
  .skip:focus { top: .75rem; }

  /* ---------- Buttons ---------- */
  .btn {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; gap: .6em;
    padding: .9em 1.35em .85em;
    font: 700 .72rem/1 var(--wide);
    letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    color: var(--paper); background: var(--ink);
    border: 1px solid var(--ink);
    transition: color .3s var(--ease-out-expo), border-color .3s var(--ease-out-expo);
  }
  .btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    /* 20% ink over the sweep keeps white label text ≥4.5:1 at both ends */
    background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), var(--sweep);
    clip-path: inset(0 100% 0 0);
    transition: clip-path .45s var(--ease-out-expo);
  }
  .btn:hover::before, .btn:focus-visible::before { clip-path: inset(0 0 0 0); }
  .btn:hover, .btn:focus-visible { border-color: transparent; }
  .btn svg { width: 1em; height: 1em; flex: none; transition: transform .35s var(--ease-out-expo); }
  .btn:hover svg { transform: translateX(3px); }
  .btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .btn--light:hover, .btn--light:focus-visible { color: var(--paper); }

  /* ---------- Nav ---------- */
  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.25rem var(--gutter);
    color: var(--paper);
    transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
  }
  .nav.is-solid {
    background: rgba(255,255,255,.96);
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 8px 24px -16px rgba(0,0,0,.25);
  }
  .nav__mark { display: block; width: 4.25rem; }
  .nav__mark img { width: 100%; transition: filter .35s ease; }
  .nav.is-solid .nav__mark img { filter: invert(1); }
  .nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
  .nav__links a:not(.btn) {
    font: 600 1.075rem/1 var(--text); text-decoration: none;
    background: linear-gradient(var(--red), var(--red)) no-repeat left 100% / 0 2px;
    padding-bottom: .3rem;
    transition: background-size .35s var(--ease-out-expo);
  }
  .nav__links a:not(.btn):hover { background-size: 100% 2px; }
  .nav .btn { font-size: .84rem; background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .nav.is-solid .btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .nav .btn:hover, .nav .btn:focus-visible { color: var(--paper); border-color: transparent; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; min-height: 100svh;
    display: grid; align-items: end;
    color: var(--paper); background: #05070c;
    overflow: hidden;
  }
  .hero__photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 62% 30%;
  }
  .hero::after { /* nightclub gradient: ink room, off-center stage glows */
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(60% 55% at 82% 18%, rgba(26,117,187,.55), transparent 70%),
      radial-gradient(45% 50% at 8% 92%, rgba(252,53,22,.42), transparent 70%),
      radial-gradient(35% 30% at 55% 60%, rgba(2,32,82,.35), transparent 75%),
      linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 35%, rgba(2,8,24,.82) 100%);
  }
  .hero__body {
    position: relative; z-index: 1;
    padding: 0 var(--gutter) clamp(2.5rem, 7vh, 5.5rem);
    max-width: 78rem;
  }
  .hero__wordmark { width: clamp(10rem, 22vw, 19rem); margin-bottom: clamp(3rem, 10vh, 7rem); }
  .hero h1 {
    margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
    font: 800 clamp(2.9rem, 7.2vw, 6rem)/.9 var(--display);
    letter-spacing: -.01em; text-transform: uppercase;
    max-width: 12ch; text-wrap: balance;
  }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

  /* ---------- Exchanges (trading fours) ---------- */
  main { display: block; }
  .exchange {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 2rem);
    padding: 0 var(--gutter);
    align-items: center;
  }
  .call { position: relative; margin: 0; }
  .plate { position: relative; overflow: hidden; background: #0a0a0a; }
  .plate img { width: 100%; height: 100%; object-fit: cover; }
  .plate::after { /* section wash: Bop Blue → Signal Red */
    content: ""; position: absolute; inset: 0;
    background: var(--sweep);
    mix-blend-mode: color;
    opacity: .78;
  }
  .plate::before { /* keeps highlights luminous under the wash */
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(26,117,187,.18), rgba(252,53,22,.18));
    mix-blend-mode: screen;
  }
  .js .plate.is-pending::after, .js .plate.is-pending::before { clip-path: inset(0 100% 0 0); }
  .js .plate::after, .js .plate::before { transition: clip-path .75s var(--ease-out-expo); clip-path: inset(0 0 0 0); }

  .response h2 {
    margin: 0 0 .9rem;
    font: 800 clamp(2.4rem, 5vw, 4.4rem)/.92 var(--display);
    letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance;
  }
  .response h3 {
    margin: 0 0 1.25rem;
    font: 700 .78rem/1.3 var(--wide);
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--blue);
  }
  .response p { margin: 0 0 1.75rem; max-width: 60ch; color: var(--ink-soft); }
  .rule { display: block; width: 3.5rem; height: 3px; background: var(--sweep); margin-bottom: 1.5rem; }

  /* First exchange: big call bleeding left, response right */
  .ex-1 { padding-top: clamp(4rem, 10vw, 8.5rem); }
  .ex-1 .call { grid-column: 1 / span 7; margin-left: calc(var(--gutter) * -1); }
  .ex-1 .plate { aspect-ratio: 7 / 5; }
  .ex-1 .response { grid-column: 9 / span 4; }

  /* Second exchange answers from the right, shorter phrase, set lower */
  .ex-2 { padding-top: clamp(4.5rem, 11vw, 9.5rem); }
  .ex-2 .response { grid-column: 1 / span 5; grid-row: 1; }
  .ex-2 .call { grid-column: 7 / span 6; grid-row: 1; margin-right: calc(var(--gutter) * -1); }
  .ex-2 .plate { aspect-ratio: 4 / 3; }

  /* Media: the full band takes the chorus */
  .media {
    margin-top: clamp(5rem, 12vw, 10rem);
    padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter) clamp(4rem, 9vw, 7rem);
    background: var(--ink); color: var(--paper);
    position: relative; overflow: hidden;
  }
  .media::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(40% 60% at 100% 0%, rgba(26,117,187,.35), transparent 70%),
      radial-gradient(35% 55% at 0% 100%, rgba(252,53,22,.28), transparent 70%);
  }
  .media__inner {
    position: relative;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 2rem); row-gap: 2.5rem;
    max-width: 90rem; margin: 0 auto;
  }
  .media__text { grid-column: 1 / span 4; align-self: end; }
  .media__text h2 {
    margin: 0 0 1.25rem;
    font: 800 clamp(2.4rem, 4.6vw, 4rem)/.92 var(--display);
    text-transform: uppercase; text-wrap: balance;
  }
  .media__text p { margin: 0; color: rgba(255,255,255,.82); max-width: 44ch; }
  .media__video { grid-column: 5 / span 8; margin: 0; }
  .video {
    position: relative; aspect-ratio: 16 / 9; background: #111;
    box-shadow: 0 28px 56px -28px rgba(0,0,0,.9);
  }
  .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .video__play {
    position: absolute; inset: 0; width: 100%; padding: 0; border: 0; cursor: pointer;
    background: #000; color: var(--paper);
  }
  .video__play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .4s var(--ease-out-expo), transform .8s var(--ease-out-expo); }
  .video__play:hover img { opacity: 1; transform: scale(1.015); }
  .video__icon {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: clamp(4rem, 8vw, 5.5rem); aspect-ratio: 1; border-radius: 50%; z-index: 2;
    display: grid; place-items: center;
    background: var(--sweep);
    box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
    transition: scale .35s var(--ease-out-expo);
  }
  .video__play:hover .video__icon { scale: 1.08; }
  .video__icon svg { width: 34%; margin-left: 8%; }
  .media__video figcaption {
    margin-top: 1rem;
    font: 700 .72rem/1.3 var(--wide); letter-spacing: .14em; text-transform: uppercase;
    display: flex; align-items: center; gap: .75rem;
  }
  .media__video figcaption::before { content: ""; width: 2.5rem; height: 2px; background: var(--sweep); }

  /* Calendar: back to the white room */
  .calendar { padding: clamp(4.5rem, 10vw, 8.5rem) var(--gutter) clamp(4.5rem, 9vw, 7rem); }
  .calendar__head {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 2rem); align-items: end; margin-bottom: 2.25rem;
    max-width: 90rem; margin-inline: auto;
  }
  .calendar h2 {
    grid-column: 1 / span 6; margin: 0;
    font: 900 clamp(3.2rem, 8vw, 6rem)/.86 var(--display);
    text-transform: uppercase; letter-spacing: -.01em;
    /* the one gradient-filled heading the brand allows */
    background: var(--sweep); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-bottom: .06em;
  }
  .calendar__head p { grid-column: 8 / span 5; margin: 0; color: var(--ink-soft); }
  .calendar__head strong { font-weight: 600; white-space: nowrap; text-decoration: underline 2px var(--red); text-underline-offset: .2em; }
  .cal-frame {
    max-width: 90rem; margin: 0 auto;
    border-top: 3px solid transparent;
    border-image: var(--sweep) 1;
    background: var(--paper);
    box-shadow: 0 24px 48px -32px rgba(0,0,0,.35);
  }
  .cal-frame iframe { display: block; width: 100%; height: clamp(28rem, 60vw, 38rem); border: 0; }
  .connect {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
    background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), var(--sweep);
    color: var(--paper); text-decoration: none;
    font: 900 clamp(4rem, 13vw, 11rem)/.8 var(--display); text-transform: uppercase; letter-spacing: -.01em;
  }
  .connect svg { width: clamp(2.5rem, 7vw, 6rem); height: auto; flex: none; transition: transform .45s var(--ease-out-expo); }
  .connect:hover svg, .connect:focus-visible svg { transform: translate(.4rem, -.4rem); }
  .connect:focus-visible { outline-color: var(--ink); outline-offset: -6px; }

  /* Footer */
  .foot {
    background: var(--ink); color: var(--paper);
    padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem;
  }
  .foot__inner {
    max-width: 90rem; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem;
  }
  .foot__wordmark { width: clamp(12rem, 22vw, 17rem); }
  .foot nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
  /* Same hover as the nav: a Signal Red underline grows from the left */
  .foot nav a {
    text-decoration: none; font-weight: 600;
    background: linear-gradient(var(--red), var(--red)) no-repeat left 100% / 0 2px;
    padding-bottom: .3rem;
    transition: background-size .35s var(--ease-out-expo);
  }
  .foot nav a:hover, .foot nav a:focus-visible, .foot nav a[aria-current="page"] { background-size: 100% 2px; }
  .foot__credit {
    max-width: 90rem; margin: 2.5rem auto 0; padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: .82rem; color: rgba(255,255,255,.7);
  }


  /* ---------- Inner pages (About, Education) ---------- */
  .nav__links a[aria-current="page"]:not(.btn) { background-size: 100% 2px; }
  .hero--page .hero__body { padding-top: 9rem; }
  .hero__lede { margin: -.75rem 0 0; max-width: 40ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(255,255,255,.88); }

  /* About: three chapters, each opened by a washed photo band */
  .band { height: clamp(16rem, 52vh, 32rem); }
  .statement-wrap { grid-column: 1 / span 10; }
  .band img { object-position: 50% 40%; }
  .chapter__body {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 2rem); row-gap: 2.5rem;
    padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) clamp(5rem, 10vw, 8.5rem);
    max-width: 90rem; margin: 0 auto;
  }
  .statement {
    margin: 0;
    font: 800 clamp(2rem, 3.8vw, 3.4rem)/1 var(--display);
    text-transform: uppercase; text-wrap: balance;
  }
  .pair--a { grid-column: 1 / span 5; }
  .pair--b { grid-column: 7 / span 5; }
  .pair h3, .detail h2 {
    margin: 0 0 .75rem;
    font: 800 clamp(1.5rem, 2.2vw, 1.9rem)/1 var(--display); text-transform: uppercase;
  }
  .pair p, .detail p, .chapter__text p { margin: 0 0 1.75rem; color: var(--ink-soft); max-width: 62ch; }
  .chapter__head { grid-column: 1 / span 5; }
  .chapter__text { grid-column: 7 / span 6; padding-top: .5rem; }
  .chapter__head h2 {
    margin: 0 0 .9rem;
    font: 800 clamp(2.4rem, 5vw, 4.4rem)/.92 var(--display);
    text-transform: uppercase; text-wrap: balance;
  }
  .chapter__head h3 {
    margin: 0; font: 700 .78rem/1.3 var(--wide); letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
  }

  /* Education: sticky word index */
  .index {
    position: relative;
    padding: clamp(4.5rem, 9vw, 8rem) var(--gutter) clamp(5rem, 10vw, 8.5rem);
    max-width: 90rem; margin: 0 auto;
  }
  .index__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.5vw, 2rem); }
  .index__mark { position: absolute; left: 0; top: 0; width: 1px; height: 1px; scroll-margin-top: 0; }
  .index__words { grid-column: 1 / span 5; align-self: start; }
  .index__slides { display: grid; }
  .index__slides > .detail { grid-area: 1 / 1; }
  /* Live (desktop + JS): the stage sticks while a tall track scrolls; the paragraphs crossfade */
  .index.is-track { height: 230vh; }
  .index.is-track .index__stage { position: sticky; top: 7rem; }
  .index.is-track .index__mark[data-for="masterclasses"] { top: 50%; }
  .index.is-live .detail { transition: opacity .5s var(--ease-out-expo), translate .5s var(--ease-out-expo); }
  .index.is-live .detail:not(.is-active) { opacity: 0; translate: 0 .75rem; pointer-events: none; }
  .index.is-track .index__detail .plate { aspect-ratio: auto; height: 42vh; }
  .index.is-tabs .index__plate { aspect-ratio: 4 / 3; }
  /* The plate crossfades with the paragraph: drummer for Clinics, Simon for Masterclasses */
  .index__plate { display: grid; background: none; }
  .index.is-live .index__plate { display: block; background: #0a0a0a; }
  .index.is-live .index__plate img { position: absolute; inset: 0; transition: opacity .6s var(--ease-out-expo); }
  .index.is-live .index__plate img:not(.is-active) { opacity: 0; }
  .index__words ul { list-style: none; margin: 0; padding: 0; }
  .index__words a {
    display: inline-block; text-decoration: none; color: var(--ink);
    margin: 0; padding-bottom: .12em;
    font: 900 clamp(3rem, 5.8vw, 6rem)/.9 var(--display); text-transform: uppercase; letter-spacing: -.01em;
    transition: color .4s var(--ease-out-expo);
  }
  .index__words a::after {
    content: ""; display: block; height: 4px; width: 0; margin-top: .12em;
    background: var(--sweep); transition: width .5s var(--ease-out-expo);
  }
  .index__words.is-live a { color: #8a8a8a; }
  .index__words.is-live a:hover, .index__words.is-live a.is-active { color: var(--ink); }
  /* Scroll-linked: the active word's Sweep rule reveals left→right as its half of the track is read */
  .index__words.is-live a::after {
    width: 100%; transition: none;
    clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
  }
  .index__words.is-live a:not(.is-active)::after { visibility: hidden; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .index__detail { grid-column: 7 / span 6; }
  .index__detail .plate { margin: 0 calc(var(--gutter) * -1) 0 0; }
  .index__plate img { aspect-ratio: 4 / 3; }
  .index.is-live .index__plate img { aspect-ratio: auto; }
  .detail { padding-top: clamp(2rem, 4vw, 3rem); scroll-margin-top: 5rem; }
  .index:not(.is-live) .detail + .detail { padding-top: clamp(3rem, 6vw, 4.5rem); }
  .index .detail p { margin-bottom: 0; }
  .index__actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: 1.5rem; }
  .btn--outline-ink { background: transparent; color: var(--ink); }
  .btn--outline-ink:hover, .btn--outline-ink:focus-visible { color: var(--paper); }

  @media (max-width: 960px) {
    .statement-wrap, .pair--a, .pair--b,
    .chapter__head, .chapter__text { grid-column: 1 / -1; grid-row: auto; }
    .index__words, .index__detail { grid-column: 1 / -1; }
    .index__slides { display: block; }
    .index__words { margin-bottom: 2.5rem; }
    .index__words ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
    .index__words a { font-size: 2rem; text-decoration: underline 2px var(--red); text-underline-offset: .15em; }
    .index__words a::after { display: none; }
    /* Tabs (mobile + JS): active tab in ink with a full Sweep rule, the other faded */
    .index.is-tabs .index__words { margin-bottom: 1.5rem; }
    .index.is-tabs .index__words ul { gap: 1.5rem; }
    .index.is-tabs .index__words a { text-decoration: none; padding-bottom: .35rem; }
    .index.is-tabs .index__words a::after { display: block; clip-path: none; height: 3px; }
    /* Tabs size to the shown paragraph (no height reserved for the other); the new one fades in */
    .index.is-tabs .detail:not(.is-active) { display: none; }
    .index.is-tabs .detail.is-active { animation: tab-in .5s var(--ease-out-expo); }
    .index__detail .plate { margin: 0 calc(var(--gutter) * -1); }
  }

  @keyframes tab-in { from { opacity: 0; translate: 0 .5rem; } }

  /* Mobile persistent CTA */
  .dock { display: none; }

  @media (max-width: 960px) {
    .ex-1 .call, .ex-2 .call { grid-column: 1 / -1; margin-right: 0; }
    .ex-1 .response, .ex-2 .response { grid-column: 1 / -1; grid-row: auto; margin-top: 2rem; }
    .ex-1 .call { margin-left: calc(var(--gutter) * -1); }
    .ex-2 .call { grid-row: 1; margin-right: calc(var(--gutter) * -1); margin-left: 12%; }
    .ex-2 .response { grid-row: 2; }
    .media__text, .media__video { grid-column: 1 / -1; }
    .calendar h2, .calendar__head p { grid-column: 1 / -1; }
    .calendar__head p { margin-top: 1.25rem; }
  }
  @media (max-width: 640px) {
    .nav .btn { display: none; }
    .nav__mark { width: 3.25rem; }
    .dock {
      display: block; position: fixed; z-index: 30; left: .75rem; right: .75rem; bottom: .75rem;
      transition: opacity .35s var(--ease-out-expo), translate .45s var(--ease-out-expo);
    }
    .hero__body { padding-bottom: 6.5rem; } /* clears the always-on dock */
    .dock .btn { width: 100%; justify-content: center; padding-block: 1.1em; box-shadow: 0 12px 28px -10px rgba(0,0,0,.5); }
    .foot { padding-bottom: 6rem; }
    .hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
    .ex-1 .plate { aspect-ratio: 4 / 3; }
    .cal-frame iframe { height: 32rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0s !important; }
  }