/* =============================================================
   AMIN STUDIO — aminstudio.co.uk
   Hand-written static CSS. No framework, no build step.

   Design source: ../../brutalist-v3/design_handoff_amin_portfolio/
   (hero variant A only — variant B was not approved)

   Order of this file:
     1.  Tokens
     2.  Reset + base
     3.  Typography
     4.  Buttons, tags, cards, placeholders
     5.  Site frame + nav
     6.  Hero
     7.  Marquee
     8.  Work
     9.  Services
     10. Stats
     11. FAQ
     12. Contact
     13. Footer
     14. Sticky mobile CTA
     15. Inner pages (404 / privacy / thanks)
     16. Responsive
   ============================================================= */


/* -------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------- */
:root {
  /* colour */
  --cream:      #F4EDE4;
  --canvas:     #E7E1D4;
  --ink:        #111111;
  --pink:       #FF4D8D;
  --yellow:     #FFD84D;
  --teal:       #1FA98C;
  --peri:       #8C9BF0;
  --white:      #FFFFFF;
  --body:       #2A2A2A;
  --muted:      #555555;
  --green:      #C6F6D5;

  /* placeholder fills */
  --ph-base:    #E6DCCB;
  --ph-teal:    #BFE3DA;
  --ph-pink:    #FFCFE1;
  --ph-peri:    #D4D9FB;
  --ph-yellow:  #FDEEAF;

  /* borders */
  --bd:         3px solid var(--ink);
  --bd-thin:    2px solid var(--ink);
  --bd-thick:   4px solid var(--ink);

  /* hard shadows — no blur, ever */
  --sh-card:    8px 8px 0 var(--ink);
  --sh-btn:     5px 5px 0 var(--ink);
  --sh-sm:      4px 4px 0 var(--ink);
  --sh-photo:   9px 9px 0 var(--ink);
  --sh-frame:   14px 14px 0 var(--ink);

  /* radii */
  --r-card:     22px;
  --r-photo:    26px;
  --r-sticker:  14px;
  --r-pill:     999px;

  /* type */
  --font-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'Courier New', monospace;

  /* spacing */
  --sec-y:      clamp(48px, 6vw, 78px);
  --sec-x:      clamp(20px, 4.4vw, 56px);
}


/* -------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: .7; }

ul { margin: 0; padding: 0; list-style: none; }

/* figure carries a 1em/40px default margin in every browser, which would
   knock the testimonial cards out of their grid. */
figure, blockquote { margin: 0; }

/* Paragraphs used as layout rows rather than prose — the default 1em
   top/bottom margin is not wanted on any of these. */
.hero__tags,
.hero__status,
.project__meta,
.project__tags { margin: 0; }

/* Visible keyboard focus everywhere — thick to match the aesthetic. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.sec--ink :focus-visible,
.contact-card :focus-visible { outline-color: var(--white); }

/* Skip link — first thing in the tab order. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--yellow);
  border: var(--bd);
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-weight: 700;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* -------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------- */
.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.03em;
}

.mono { font-family: var(--font-mono); }

.kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}
.kicker--yellow { color: var(--yellow); }
.kicker--ink    { color: var(--ink); }

.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--body);
  margin: 0;
}

/* Highlight boxes inside display headings. box-decoration-break keeps the
   background intact when the phrase wraps across two lines. */
.hi {
  background: var(--pink);
  color: var(--ink);
  padding: 0 10px;
  border-radius: 8px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.hi--teal   { background: var(--teal); color: var(--white); }
.hi--yellow { background: var(--yellow); }


/* -------------------------------------------------------------
   4. BUTTONS, TAGS, CARDS, PLACEHOLDERS
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  background: var(--white);
  color: var(--ink);
  border: var(--bd);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-btn);
  cursor: pointer;
  transition: transform .09s ease, box-shadow .09s ease;
}
/* Press-in hover: the element moves into its own shadow. */
.btn:hover,
.btn:focus-visible {
  opacity: 1;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.btn--pink   { background: var(--pink); }
.btn--yellow { background: var(--yellow); }
.btn--teal   { background: var(--teal); color: var(--white); }
.btn--ink    { background: var(--ink); color: var(--white); }
.btn--sm     { font-size: 15px; padding: 11px 20px; box-shadow: var(--sh-sm); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  background: var(--white);
  border: var(--bd-thin);
  border-radius: var(--r-pill);
}
.tag--yellow { background: var(--yellow); }
.tag--pink   { background: var(--pink); }
.tag--teal   { background: var(--teal); color: var(--white); }
.tag--green  { background: var(--green); }

.tag--green .dot {
  width: 9px; height: 9px;
  margin-right: 8px;
  background: var(--teal);
  border-radius: var(--r-pill);
}

.card {
  background: var(--white);
  border: var(--bd);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.card--cream { background: var(--cream); }
.card--pink  { background: var(--pink); }

/* Striped placeholder. Swap the whole block for an <img> when real
   assets land — see ../../../aminstudio-notes/IMAGES.md. */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ph-base);
  background-image: repeating-linear-gradient(45deg,
                    rgba(0, 0, 0, .06) 0 11px, transparent 11px 22px);
}
.ph--teal   { background-color: var(--ph-teal); }
.ph--pink   { background-color: var(--ph-pink); }
.ph--peri   { background-color: var(--ph-peri); }
.ph--yellow { background-color: var(--ph-yellow); }

.ph__label {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--white);
  border: var(--bd-thin);
  border-radius: 8px;
}


/* -------------------------------------------------------------
   5. SITE FRAME + NAV
   ------------------------------------------------------------- */
.site {
  width: 100%;
  max-width: 1280px;
  margin: 40px auto 54px;
  background: var(--cream);
  border: var(--bd-thick);
  border-radius: var(--r-photo);
  box-shadow: var(--sh-frame);
  /* clip, not hidden — `hidden` would kill position:sticky on descendants */
  overflow: clip;
}

.sec {
  padding: var(--sec-y) var(--sec-x);
  scroll-margin-top: 24px;
}
.sec--ink   { background: var(--ink); color: var(--white); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(20px, 3.4vw, 44px);
  background: var(--cream);
  border-bottom: var(--bd-thick);
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 23px;
  letter-spacing: -.02em;
}
.logo:hover { opacity: 1; }
.logo__mark {
  width: 36px; height: 36px;
  flex-shrink: 0;
  background: var(--pink);
  border: var(--bd);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
}
.logo__light { font-weight: 700; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 32px);
  font-weight: 600;
  font-size: 16px;
}

/* Burger — hidden on desktop, revealed at the layout breakpoint. */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0;
  background: var(--yellow);
  border: var(--bd);
  border-radius: 12px;
  box-shadow: var(--sh-sm);
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 20px; height: 3px;
  margin: 0 auto;
  background: var(--ink);
}


/* -------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------- */
.hero {
  position: relative;
  text-align: center;
}

/* Decorative teal circle bleeding off the left edge, behind the content. */
.hero__blob {
  position: absolute;
  left: -40px; top: 120px;
  width: 120px; height: 120px;
  background: var(--teal);
  border: var(--bd);
  border-radius: var(--r-pill);
  z-index: 0;
}

/* Single centred column. Every row inside is a flex container, so each
   one needs centring in its own right — text-align alone won't do it. */
.hero__grid {
  position: relative;
  z-index: 1;
}

.hero__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.hero__title {
  font-size: clamp(2.75rem, 7.6vw, 96px);
}

.hero__lede {
  max-width: 540px;
  margin: 26px auto 0;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.hero__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-size: 13px;
  color: var(--muted);
}


/* -------------------------------------------------------------
   7. MARQUEE
   ------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--yellow);
  border-top: var(--bd-thick);
  border-bottom: var(--bd-thick);
}

.marquee__track {
  display: inline-flex;
  gap: 54px;
  padding: 16px 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -.01em;
}
.marquee__set {
  display: inline-flex;
  gap: 54px;
  align-items: center;
}
/* .is-ready is added by site.js to each [data-marquee] once its list has
   been duplicated. Without JS nothing animates and the strip sits still,
   rather than scrolling away into empty space.

   Longhands rather than the `animation` shorthand, so the pause-on-hover
   rule below isn't reset by it. */
.is-ready .marquee__track {
  animation-name: marquee-scroll;
  animation-duration: 26s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}


/* -------------------------------------------------------------
   8. WORK
   ------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.section-head h2 { margin-top: 12px; }
.section-head__intro {
  max-width: 340px;
  margin: 0;
  font-size: 16px;
  color: var(--body);
}

.h2-lg { font-size: clamp(2rem, 4.4vw, 56px); }
.h2-md { font-size: clamp(1.95rem, 4.1vw, 52px); }

.work__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;
  overflow: hidden;
}
/* Card 02 flips: image on the left, wider text column on the right. */
.project--flip { grid-template-columns: 1.15fr 1fr; }

.project__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(28px, 3.4vw, 44px);
}
.project__meta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.project__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  border: var(--bd);
  border-radius: var(--r-sticker);
  box-shadow: var(--sh-sm);
}
.project__num--teal   { background: var(--teal); color: var(--white); }
.project__num--pink   { background: var(--pink); }
.project__num--yellow { background: var(--yellow); }

.project__title { font-size: clamp(1.8rem, 3.15vw, 40px); }
/* Descriptor line under the name, e.g. "Plumbing and heating, Hove". */
.project__title .kicker { display: block; margin-top: 12px; line-height: 1.3; }
.project__copy {
  max-width: 380px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
}
.project__tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.project__cta { align-self: flex-start; margin-top: 6px; }
.project__media { min-height: 400px; }

/* A real screenshot in place of a striped placeholder. It fills the cell
   at whatever height the text column sets, cropping from the right so the
   logo and headline on the left stay in frame. The rule down its edge is
   there because the screenshot's white stucco otherwise runs straight into
   the white card body with no visible join. Card 02 is the flipped one, so
   the image sits on the left. */
.project__media--shot {
  position: relative;
  border-right: var(--bd);
}
.project__media--shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}


/* -------------------------------------------------------------
   9. SERVICES
   ------------------------------------------------------------- */
.services__title { margin: 12px 0 44px; color: var(--white); }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service { padding: 34px 30px; }
/* display:block — these are <span>s, and width/height do nothing on an
   inline element. */
.service__shape {
  display: block;
  width: 66px; height: 66px;
  margin-bottom: 24px;
  border: var(--bd);
  box-shadow: var(--sh-sm);
}
.service__shape--circle  { background: var(--pink);   border-radius: var(--r-pill); }
.service__shape--square  { background: var(--teal);   border-radius: 12px; }
.service__shape--diamond { background: var(--yellow); border-radius: 12px;
                           transform: rotate(45deg); margin: 0 0 34px 8px; }
.service__title { font-size: 26px; margin: 0 0 12px; }
.service__copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #333;
}

/* -------------------------------------------------------------
   10. STATS
   Three cards in the slot the old About section occupied.
   ------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.stat { padding: 22px; }
/* Both are <span>s — without display:block the number and the label
   sit on the same line and the margin-top is ignored. */
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.stat__label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
}



/* -------------------------------------------------------------
   11. FAQ
   Not in the original mock — added for SEO/FAQPage schema.
   <details>/<summary> keeps every answer in the served HTML with
   zero JavaScript, so crawlers read it whether it's open or not.
   ------------------------------------------------------------- */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 860px;
}

.faq__item { padding: 0; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(17px, 1.8vw, 21px);
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

.faq__sign {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1;
  background: var(--yellow);
  border: var(--bd-thin);
  border-radius: var(--r-pill);
  transition: transform .12s ease;
}
.faq__item[open] .faq__sign { transform: rotate(45deg); }

.faq__a {
  padding: 0 26px 26px;
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}



/* -------------------------------------------------------------
   12. CONTACT
   ------------------------------------------------------------- */
.contact { padding-top: 70px; padding-bottom: 70px; }

.contact-card {
  padding: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);
  text-align: center;
}
.contact-card h2 {
  margin: 16px 0 0;
  font-size: clamp(2.6rem, 5.95vw, 76px);
}
.contact-card .lede {
  max-width: 520px;
  margin: 22px auto 0;
}
.contact__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.contact__promise {
  margin: 24px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
}


/* -------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 32px clamp(20px, 3.4vw, 44px);
  border-top: var(--bd-thick);
}
.footer .logo { font-size: 19px; }
.footer .logo__mark { width: 28px; height: 28px; }

.footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}


/* -------------------------------------------------------------
   14. STICKY MOBILE CTA
   Hidden on desktop. On a phone this is the whole conversion path.
   ------------------------------------------------------------- */
.mobile-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: var(--bd-thick);
}
.mobile-cta .btn {
  flex: 1;
  justify-content: center;
  padding: 13px 12px;
  font-size: 15px;
  box-shadow: 3px 3px 0 var(--ink);
}


/* -------------------------------------------------------------
   15. INNER PAGES (404 / privacy / thank-you)
   ------------------------------------------------------------- */
.page { padding: clamp(48px, 6vw, 90px) var(--sec-x); }
.page__inner { max-width: 720px; }
.page h1 { font-size: clamp(2.4rem, 6vw, 68px); margin-bottom: 20px; }
.page h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -.02em;
  margin: 40px 0 12px;
}
.page p, .page li { color: var(--body); line-height: 1.65; }
.page ul { list-style: disc; padding-left: 22px; margin: 12px 0; }
.page li { margin-bottom: 8px; }
.page a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

.page--center { text-align: center; }
.page--center .page__inner { margin: 0 auto; }
.page--center .page__actions { justify-content: center; }

.page__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.breadcrumb {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }


/* -------------------------------------------------------------
   16. RESPONSIVE
   Thick borders and hard shadows stay at every size — they are the
   design. Shadows shrink a little so nothing overflows on a phone.
   ------------------------------------------------------------- */

/* Frame needs breathing room for its 14px shadow. */
@media (max-width: 1400px) {
  .site { margin: 24px 24px 44px; max-width: none; }
}

/* Layout collapse. */
@media (max-width: 1024px) {
  .nav__links {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px var(--sec-x) 24px;
    background: var(--cream);
    border-bottom: var(--bd-thick);
    font-size: 18px;
  }
  .nav { position: relative; }
  .nav__links.is-open { display: flex; }
  .nav__links a:not(.btn) { padding: 10px 0; }
  .nav__links .btn { justify-content: center; margin-top: 10px; }
  .nav__burger { display: flex; }

  .project,
  .project--flip {
    grid-template-columns: 1fr;
  }
  /* On one column the image always leads, whichever way the card flipped. */
  .project__media { order: -1; min-height: 260px; }
  .project__media--shot {
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-right: 0;
    border-bottom: var(--bd);
  }

  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  :root {
    --sh-card:  5px 5px 0 var(--ink);
    --sh-btn:   4px 4px 0 var(--ink);
    --sh-photo: 6px 6px 0 var(--ink);
    --sh-frame: 0 0 0 var(--ink);
  }

  /* Drop the frame — full-bleed reads better on a phone and buys
     back the horizontal space the border was eating. */
  .site {
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  /* Frame is gone, so the body is what shows through behind the
     bottom padding — match it to the page, not the canvas grey. */
  body {
    background: var(--cream);
    padding-bottom: 84px;         /* clears the sticky CTA bar */
  }
  .mobile-cta { display: flex; }

  /* Let the H1 break where it wants to rather than at the hard-coded
     desktop line breaks — "IN HOVE FOR" overflows below ~340px.
     Safe because there is whitespace after each <br> in the markup,
     so the lines still separate with a space when the br is hidden. */
  .hero__title br { display: none; }

  .hero__blob { display: none; }

  .stats { grid-template-columns: 1fr; }
  .stat { display: flex; align-items: baseline; gap: 12px; }
  .stat__label { margin-top: 0; }

  .footer { flex-direction: column; align-items: flex-start; }
  .footer__links { gap: 16px; }

  .section-head__intro { max-width: none; }
}

/* Respect the OS setting. The marquee is the only real motion here. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .btn { transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}