/* ==========================================================================
   Tommy's Services — stylesheet

   Plain and simple, but set with intent. Three photographs across six
   sections means typography, colour and whitespace carry the page.

   The one typographic idea worth knowing before reading further:
   wherever Tommy stops describing the visitor's problem and makes her
   offer — "Let Tommy help you…", "Let me help make your experience…" —
   that sentence is set in the display face. Her copy already turns on
   that sentence in every service and at the close of two sections; the
   type just makes the turn visible. See "The turn" below.

   Mobile-first: min-width queries only. Breakpoints are in `em`, which in
   a media query always resolves against the browser default (16px), never
   against the :root size set below.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, latin subset, no third-party requests
   --------------------------------------------------------------------------
   Both files are variable fonts, so one file per family covers every weight
   used here. Fraunces was fetched with its optical-size axis pinned at 9pt
   (the soft, low-contrast end) and carries no free axes, so it needs no
   font-variation-settings. Licences: static/fonts/OFL-*.txt (SIL OFL 1.1).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette. Coral, cream, slate, warm grey and green are hers.
     Two tones are derived because the originals fail contrast as text:
     --coral-deep for anything interactive (4.5:1 on cream, 4.9:1 under
     white), --slate-soft for secondary prose (5.1:1 on cream). Plain
     --coral stays for rules and markers, where contrast rules don't bind. */
  --coral: #f06c53;
  --coral-deep: #c9422b;
  --cream: #f9f6f2;
  --surface: #fffcf8;
  --slate: #304254;
  --slate-soft: #5b6b7c;
  --warm-grey: #b8afaf;
  --rule: #e0d9d3;
  --green: #779d47;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale: 1.25 ratio, base 17px (106.25% of a 16px default). */
  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  --container: 68rem;
  --measure: 68ch;
  /* Form fields want a shorter line than prose: 68ch of input is hard to scan
     back along, and on a wide screen it stretches the whole container. */
  --measure-form: 32rem;
  --gutter: 1.25rem;
  --space-section: 3.25rem;
  --radius: 8px;
}


/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Percentage, not px, so a reader who has raised their browser's base
     size still gets it. 106.25% of a 16px default = 17px. */
  font-size: 106.25%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--coral-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: #fbdcd4;
  color: var(--slate);
}

/* Anchor targets clear the top of the viewport instead of butting against it. */
[id] {
  scroll-margin-top: var(--s-5);
}


/* --------------------------------------------------------------------------
   4. Shared container
   -------------------------------------------------------------------------- */

.site-header,
.hero,
.section,
.site-footer {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  color: var(--slate);
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
}

/* The utility voice: small, upper, tracked. Distinct from both the display
   face and body copy, so navigation never reads as part of the prose. */
.site-nav a {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--slate-soft);
  text-decoration: none;
  transition: color 150ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--coral-deep);
}


/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.announcement {
  margin: 0;
  padding: var(--s-3) var(--gutter);
  background: var(--coral-deep);
  color: var(--on-accent, #fff);
  text-align: center;
  font-weight: 600;
}

.hero {
  padding-block: var(--s-7) var(--s-8);
}

.hero h1 {
  font-size: var(--step-4);
  line-height: 1.05;
  margin-bottom: var(--s-4);
}

.hero .tagline {
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--slate-soft);
  margin-bottom: var(--s-5);
}

.hero-image {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  /* Tommy stands left of centre at roughly 31% across the frame; biasing the
     crop left of centre keeps her and the whole train inside a 5:4 window. */
  object-position: 32% center;
  border-radius: var(--radius);
  margin-top: var(--s-6);
}

/* Photo behind the text. The scrim is not decoration: without it the
   heading's contrast depends entirely on which photo Tommy picked, and a
   bright sky makes it unreadable. This guarantees a dark base whatever the
   image, which is what lets her choose freely. */
.hero--behind {
  position: relative;
  background-image: linear-gradient(rgba(20, 26, 33, 0.62), rgba(20, 26, 33, 0.62)), var(--hero-bg);
  background-size: cover;
  background-position: center;
  padding-block: var(--s-8);
}

.hero--behind h1,
.hero--behind .tagline {
  color: #fff;
}

/* Worn by an <a> in the hero and a <button> at the foot of the contact form.
   The four declarations below the rule exist for the <button>: it inherits
   neither the page's typeface nor its colours, so without them the same class
   renders as a native grey bevel in the browser's default face. They are
   no-ops on the anchor, which is why they belong on the class and not on a
   form-scoped override. */
.button {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: var(--coral-deep);
  color: var(--on-accent, #fff);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color 150ms ease;

  font-family: inherit;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.button:hover,
.button:focus-visible {
  background: #ab3521;
}


/* --------------------------------------------------------------------------
   7. Sections and their heading motif
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-section);
}

.section > h2 {
  font-size: var(--step-2);
  margin-bottom: var(--s-5);
}

/* One coral rule above each heading. It is the page's only repeated ornament;
   everything else is spacing and type. */
.section > h2::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  margin-bottom: var(--s-4);
  background: var(--coral);
  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   8. The turn
   --------------------------------------------------------------------------
   Every service in Tommy's copy opens with the visitor's worry and closes by
   answering it, and two sections close the same way. Those closing sentences
   — and only those — are set in the display face. It is the one place the
   serif appears inside body copy, so it always means the same thing.
   -------------------------------------------------------------------------- */

.turn,
.closing {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--slate);
}


/* --------------------------------------------------------------------------
   9. About
   -------------------------------------------------------------------------- */

.about-copy {
  max-width: var(--measure);
}

.about-copy p {
  margin-bottom: var(--s-4);
}

/* Held to --step-1 on a phone, where it runs to four lines and would
   otherwise out-shout the heading above it. It grows at 48em. */
.about .closing {
  font-size: var(--step-1);
  margin-top: var(--s-6);
  margin-bottom: 0;
}

/* The portrait lives in the hero, so About normally runs as prose alone.
   If Tommy adds a second photo from the admin later, the grid appears for
   it without anyone touching this file again. */
.about-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: var(--s-6);
}


/* --------------------------------------------------------------------------
   10. Areas — a personal index
   --------------------------------------------------------------------------
   Each entry is a place plus the reason she knows it, so it is set as an
   index rather than a bulleted list: name in the display face, reason
   alongside it, hairline between entries.
   -------------------------------------------------------------------------- */

.places {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.places li {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

.places strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* "Namba, Shinsaibashi, Shinsekai" is long enough to break three ways in a
     narrow column; balancing keeps the entry looking like an index line. */
  text-wrap: balance;
  margin-bottom: var(--s-1);
}

.places span {
  display: block;
  color: var(--slate-soft);
  max-width: var(--measure);
}

.areas .closing {
  font-size: var(--step-1);
  max-width: var(--measure);
  margin-top: var(--s-6);
  margin-bottom: 0;
}

.area-images {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.area-images img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}


/* --------------------------------------------------------------------------
   11. Services
   -------------------------------------------------------------------------- */

.service-cards {
  display: grid;
  gap: var(--s-4);
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-5);
}

.card h3 {
  font-size: var(--step-1);
  margin-bottom: var(--s-3);
}

.card p {
  color: var(--slate-soft);
}

/* The turn is marked by the face and the darker ink, not by size. Setting it
   larger as well was one signal too many: four cards of oversized display
   type shouted, and this is meant to be a quiet page. */
.card .turn {
  color: var(--slate);
  margin-bottom: 0;
}

/* Green appears here and on the price notes, and nowhere else: it marks
   practical information sitting outside the pitch. */
.card .note {
  margin-top: var(--s-4);
  margin-bottom: 0;
  padding-left: var(--s-3);
  border-left: 2px solid var(--green);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--slate-soft);
}


/* --------------------------------------------------------------------------
   12. Prices
   -------------------------------------------------------------------------- */

.price-tiers {
  display: grid;
  gap: var(--s-4);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  /* `padding` is ignored on a table box under border-collapse: collapse, so
     the inset comes from the outer cells' own padding instead. */
}

.price-table caption {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--slate);
  /* A caption sits outside the table's border box, so it reads as a label
     above the card. Flush left, so it lines up with the section heading and
     the card edge below it rather than with the cell padding. */
  padding: 0 0 var(--s-3);
}

.price-table thead th {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--slate-soft);
  text-align: left;
  padding: 0 var(--s-5) var(--s-2);
  border-bottom: 1px solid var(--warm-grey);
}

.price-table tbody th {
  font-weight: 400;
  text-align: left;
  color: var(--slate-soft);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--rule);
}

.price-table tbody td {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  /* Prices are short and must never be the thing that wraps; the long
     group labels beside them wrap freely instead. */
  white-space: nowrap;
  padding: var(--s-3) var(--s-5) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}

.price-table thead th:last-child {
  text-align: right;
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
  border-bottom: 0;
  padding-bottom: var(--s-5);
}

.price-notes {
  margin: var(--s-6) 0 0;
  padding-left: var(--s-4);
  max-width: var(--measure);
  color: var(--slate-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}

.price-notes li {
  padding-left: var(--s-2);
  margin-bottom: var(--s-3);
}

.price-notes li::marker {
  color: var(--green);
}

.price-notes li:last-child {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */

/* :not(.flash) so the prose measure stays on prose. The flash paragraphs are
   panels, not copy, and take the form's narrower measure below. */
.contact p:not(.flash) {
  max-width: var(--measure);
}

/* The mailto is a fallback, not the path Tommy wants people on — the form
   is the whole reason this replaces her "email me and remember three
   questions" instruction. At --step-1 and bold it outshouted the Send
   button directly above it, so it reads as an ordinary link. */
.contact a {
  font-weight: 600;
}

/* A quiet annotation: present for anyone who needs it, not competing with
   the label it qualifies. --slate-soft on cream is 5.1:1. */
.req {
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--slate-soft);
}


/* The form ------------------------------------------------------------------

   Every <label> wraps its own control. Making the label a block and the
   control a block inside it is the whole fix: without it they run inline and
   each label lands *after* the field it asks about, which is how this form
   first shipped. The 1:3 ratio between the label-to-field gap (--s-2) and the
   gap between fields (--s-5) is what binds each question to its own answer.
   ---------------------------------------------------------------------------- */

.contact-form {
  display: grid;
  gap: var(--s-5);
  max-width: var(--measure-form);
  margin-top: var(--s-6);
}

/* Her three middle questions are sentences she would say out loud — "When are
   you coming to Japan?" — not field names. So they are set in sentence case at
   full ink, not in the small tracked uppercase this file uses for nav and
   table headers: shouting a question changes what it sounds like. */
.contact-form label {
  display: block;
  font-weight: 600;
  line-height: 1.4;
  color: var(--slate);
  text-wrap: pretty;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-4);
  /* Controls inherit neither family nor size; left alone they fall back to the
     browser's default face. And 1rem here is 17px: never set a control below
     16px, or iOS Safari zooms the page on focus and the visitor has to pinch
     back out to see the rest of the form. */
  font-family: inherit;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--slate);
  background: var(--surface);
  /* --slate-soft (5.1:1 on cream), not --warm-grey (2.0:1). The field fill is
     barely off the page ground, so the border is the only thing identifying
     the control and it has to clear 3:1 — WCAG 1.4.11. */
  border: 1px solid var(--slate-soft);
  border-radius: var(--radius);
  /* iOS otherwise imposes its own rounding and an inset shadow. */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 150ms ease;
}

/* About three lines. rows="5" made "Anything else?" the largest thing on the
   form, which inverts it — the three questions above are what Tommy needs
   answered and this is a spare remark. Draggable if they do have more to say. */
.contact-form textarea {
  height: 7rem;
  min-height: 4.5rem;
  resize: vertical;
}

/* The page's focus ring is slate, which sits too close to the resting border
   to be caught at a glance. Fields take the coral this file reserves for
   interactive things, and move their border with it, so the one field in five
   that has focus is unmistakable. --coral-deep is 4.5:1 on cream; plain
   --coral is 2.8:1 and would not carry it. */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 2px;
  border-color: var(--coral-deep);
}

/* Full width on a phone: it is the end of the form and the easiest possible
   tap target. It shrinks back to its label at 48em. */
.contact-form .button {
  margin-top: var(--s-3);
}

/* Held clear of the Send button, or it reads as a second control fastened to
   it rather than the alternative to sending. */
.contact-direct {
  margin-top: var(--s-6);
}


/* What the visitor is told afterwards ----------------------------------------

   The page reloads and this paragraph is the entire answer, so it has to work
   for everyone. Both states are set in --slate at full strength and told apart
   by a glyph and by weight; the coloured left rule is a third signal and never
   the only one, so the difference survives greyscale and colour-blindness. The
   rule itself is the idiom the price notes on the service cards already use.
   ---------------------------------------------------------------------------- */

.flash {
  display: flex;
  gap: var(--s-3);
  max-width: var(--measure-form);
  margin: var(--s-5) 0;
  padding: var(--s-4);
  color: var(--slate);
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warm-grey);
  border-radius: var(--radius);
}

/* Its own flex column, so a message that wraps indents under itself rather
   than running back under the glyph. */
.flash::before {
  flex: none;
  font-weight: 700;
}

.flash-success {
  border-left-color: var(--green);
}

.flash-success::before {
  content: "✓";
}

/* Weight and glyph do the work. The coral is 4.5:1 on the panel and reads as
   urgency, but nothing here depends on seeing it. */
.flash-error {
  font-weight: 600;
  border-left-color: var(--coral-deep);
}

.flash-error::before {
  content: "!";
  color: var(--coral-deep);
}

/* Honeypot: off-screen, not display:none — a bot that skips hidden fields
   would skip this one too, defeating the trap. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--s-5) var(--s-6);
  border-top: 1px solid var(--rule);
  color: var(--slate-soft);
  font-size: var(--step--1);
}


/* --------------------------------------------------------------------------
   15. 768px and up — type scale steps to 1.333, base 18px
   -------------------------------------------------------------------------- */

@media (min-width: 48em) {
  :root {
    --step--1: 0.75rem;
    --step-1: 1.333rem;
    --step-2: 1.777rem;
    --step-3: 2.369rem;
    --step-4: 3.157rem;

    --gutter: 2rem;
    --space-section: 5rem;
  }

  html {
    font-size: 112.5%; /* 18px */
  }

  .site-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-block: var(--s-5);
  }

  .site-nav {
    justify-content: flex-end;
    column-gap: var(--s-5);
  }

  .hero {
    padding-block: var(--s-8);
  }

  .hero-image {
    aspect-ratio: 4 / 3;
    object-position: center;
  }

  .section > h2 {
    margin-bottom: var(--s-6);
  }

  .about .closing {
    font-size: var(--step-2);
  }

  /* Place and reason side by side: the index reads as a column of names
     with their reasons aligned against them. */
  .places li {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--s-5);
    align-items: baseline;
    padding-block: var(--s-5);
  }

  .places strong {
    margin-bottom: 0;
  }

  .area-images {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }

  .area-images img {
    aspect-ratio: 3 / 4;
  }

  .about-grid:has(img) {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--s-6);
    align-items: start;
  }

  .about-grid img {
    margin-top: 0;
  }

  .service-cards,
  .price-tiers {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }

  /* Service cards stretch to a common height because they read as a set of
     boxes. Price tables must not: stretching a table distributes the extra
     height into its rows, so a three-row tier ends up with visibly taller
     rows than a four-row one sitting beside it. */
  .price-tiers {
    align-items: start;
  }

  .card {
    padding: var(--s-6);
  }

  /* Off the phone, the form column is wide enough that a stretched button
     reads as a banner rather than a control. It shrinks to its label and
     matches the hero's CTA, which is the same component. */
  .contact-form .button {
    justify-self: start;
  }
}


/* --------------------------------------------------------------------------
   16. 960px and up — the hero splits
   -------------------------------------------------------------------------- */

@media (min-width: 60em) {
  .hero {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s-8);
    align-items: center;
  }

  .hero .tagline {
    font-size: var(--step-2);
    max-width: 26ch;
  }

  .hero-image {
    margin-top: 0;
  }

  /* About is the one section that is prose and nothing else — no cards, no
     grid, and (by design) no photo, since her portrait is already in the
     hero. Capping the measure at 68ch on a 1440px screen therefore left the
     right half of the section empty. Setting the heading beside the prose
     on the same 5/7 split as the hero uses the width and gives the desktop
     layout a consistent spine. Sections whose content needs the full width
     keep their heading above it.

     Scoped to the no-photo case: the moment Tommy adds an About image from
     the admin, this section has something to fill the width with, and it
     reverts to heading-above with the copy/photo grid below. */
  .about:not(:has(.about-grid img)) {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: var(--s-8);
    align-items: start;
  }
}


/* --------------------------------------------------------------------------
   17. Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}