/* ==========================================================================
   The Good Monks — Design System v4
   Navy · White · Warm Gold. Editorial, cinematic, typography-led.
   ========================================================================== */

:root {
  --navy: #01153e;
  --navy-deep: #010c26;
  --navy-soft: #0a2050;
  --white: #ffffff;
  --off: #f4f4f2;
  --black: #000000;

  /* Warm accent — the element that separates premium from corporate.
     Two tones so contrast passes on both navy and white. */
  --gold: #c8a97e;        /* on navy  — ~6.2:1 */
  --gold-deep: #8a6a3c;   /* on white — ~5.4:1 */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-2: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: 1.5rem;
  --maxw: 1400px;

  /* One vertical rhythm for the whole site. Every section opts into a
     step of this scale rather than inventing its own padding. */
  --sy-sm: clamp(2.75rem, 5.5vw, 4.5rem);
  --sy:    clamp(4rem, 8vw, 7rem);
  --sy-lg: clamp(5rem, 10vw, 9rem);

  /* must track the navbar's actual height — .page-hero and the home hero
     both pad themselves off this to clear the fixed bar */
  --nav-h: 5.5rem;
}

@media (min-width: 768px) {
  :root { --gutter: 2.5rem; --nav-h: 7rem; }
}
@media (min-width: 1280px) {
  :root { --gutter: 3.5rem; }
}

* { box-sizing: border-box; }

html {
  background: var(--navy);
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--white);
  color: var(--navy);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

.font-display {
  font-family: "Fraunces", "Georgia", serif;
  font-feature-settings: "ss01" 1, "liga" 1;
  font-weight: 400;
}

img { max-width: 100%; display: block; }
a, button { cursor: pointer; }

::selection { background-color: var(--navy); color: var(--white); }

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

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section rhythm utilities — the backbone of cross-page alignment */
.page-hero {
  /* clears the fixed nav by measurement, not by a guessed magic number */
  padding-top: calc(var(--nav-h) + var(--sy-sm));
  padding-bottom: var(--sy);
}
.sy    { padding-block: var(--sy); }
.sy-sm { padding-block: var(--sy-sm); }
.sy-lg { padding-block: var(--sy-lg); }
.sy-t  { padding-top: var(--sy); }
.sy-b  { padding-bottom: var(--sy); }

/* -------------------------------------------------------------------- */
/* Typography scale                                                      */
/* -------------------------------------------------------------------- */

h1, h2, h3, h4 { letter-spacing: -0.022em; font-weight: 400; }

.t-hero    { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.06; }
.t-display { font-size: clamp(1.85rem, 3.6vw, 3rem);  line-height: 1.12; }
.t-title   { font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.25; }
.t-lead    { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.65; }

.accent-italic {
  font-style: italic;
  color: var(--gold);
}
.accent-italic--deep { color: var(--gold-deep); }

.eyebrow {
  font-family: "Inter", sans-serif;
  /* nudged up from 0.7rem so the labels register without competing with the
     headings they sit above; tracking eases slightly to absorb the extra width */
  font-size: 0.8rem;
  letter-spacing: 0.235em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold-deep);
  display: block;
}
.eyebrow--light { color: var(--gold); }

/* Section-scale eyebrow — currently only the Trusted By label.
   Compound selector so it outranks the global .eyebrow (including its
   mobile override) without altering the eyebrow scale anywhere else.

   The scale is deliberately NOT monotonic: on mobile the label spans the
   full shell, but from 768-1279px it is boxed into a 2-3 column grid slot
   only ~130-148px wide. Tracking tightens as the size grows, which is both
   what the narrow column allows and what larger uppercase type wants. */
.eyebrow.eyebrow--section {
  font-size: 1.2rem;
  letter-spacing: 0.10em;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .eyebrow.eyebrow--section { font-size: 0.9rem;  letter-spacing: 0.075em; line-height: 1.55; }
}
@media (min-width: 1024px) {
  .eyebrow.eyebrow--section { font-size: 0.85rem; letter-spacing: 0.08em;  line-height: 1.6; }
}
@media (min-width: 1280px) {
  .eyebrow.eyebrow--section { font-size: 1rem;    letter-spacing: 0.075em; line-height: 1.6; }
}
@media (min-width: 1400px) {
  .eyebrow.eyebrow--section { font-size: 1.15rem; letter-spacing: 0.09em;  line-height: 1.6; }
}

.body-copy {
  max-width: 44ch;
  color: rgba(1, 21, 62, 0.76);
}
.body-copy--invert { color: rgba(255, 255, 255, 0.74); }

.index-num {
  font-family: "Fraunces", serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.rule { height: 1px; background: rgba(1, 21, 62, 0.14); border: 0; }
.rule--invert { background: rgba(255, 255, 255, 0.16); }

.hairline { border-color: rgba(1, 21, 62, 0.12); }
.hairline-invert { border-color: rgba(255, 255, 255, 0.14); }

/* -------------------------------------------------------------------- */
/* Hero canvas + atmosphere                                              */
/* -------------------------------------------------------------------- */

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Keeps the headline legible over the brightest part of the field
   without flattening the artwork on the right. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 66% at 18% 46%, rgba(1, 12, 38, 0.94), transparent 72%),
    linear-gradient(180deg, rgba(1, 12, 38, 0.72) 0%, transparent 26%, transparent 62%, rgba(1, 12, 38, 0.78) 100%);
}

.grain { pointer-events: none; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The 70px halo this used to carry bloomed well past the silhouette and, over
   the bright part of the field, merged with the white artwork until the edges
   stopped reading. Tighter radius, lower opacity and a deeper blue keep the
   mark separated from the background without washing it out. */
.hero-mark {
  filter: drop-shadow(0 0 26px rgba(96, 132, 196, 0.22));
  animation: mark-breathe 9s ease-in-out infinite;
}
@keyframes mark-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.015); }
}

.scroll-cue span {
  display: block;
  width: 1px;
  height: 46px;
  margin-inline: auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
  transform-origin: top;
  animation: cue 2.4s var(--ease-2) infinite;
}
@keyframes cue {
  0%      { transform: scaleY(0); opacity: 0; }
  35%     { transform: scaleY(1); opacity: 1; }
  70%,100%{ transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

/* -------------------------------------------------------------------- */
/* Navigation                                                            */
/* -------------------------------------------------------------------- */

#site-nav {
  transition: background-color .6s var(--ease), backdrop-filter .6s var(--ease),
              border-color .6s var(--ease);
  background-color: transparent;
  border-bottom: 1px solid transparent;
}
#site-nav.nav-scrolled {
  background-color: rgba(1, 12, 38, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}
#site-nav.nav-light {
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(1, 21, 62, 0.09);
}

.nav-link {
  position: relative;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding-block: 6px;
  opacity: 0.82;
  transition: opacity .35s var(--ease);
}
.nav-link:hover { opacity: 1; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .45s var(--ease);
}
.nav-link:hover::after { width: 100%; }
.nav-link.active { opacity: 1; }
.nav-link.active::after { width: 100%; }

#mobile-menu {
  transition: clip-path .75s var(--ease), visibility .75s;
  clip-path: circle(0% at calc(100% - 2.2rem) 2.2rem);
  visibility: hidden;
}
#mobile-menu.open {
  clip-path: circle(150% at calc(100% - 2.2rem) 2.2rem);
  visibility: visible;
}
#mobile-menu a { transition: color .3s var(--ease); }
#mobile-menu a:hover { color: var(--gold); }
/* generous hit areas for thumbs */
#mobile-menu nav a { padding-block: 0.25rem; }

/* --------------------------------------------------------------------
   Mobile menu open state.

   The overlay is navy and sits BEHIND the fixed header (z-40 vs z-50), so on
   light-theme pages (about, contact) the black lockup and navy toggle were
   rendering dark-on-dark and effectively disappearing. While the menu is open
   the header must adopt its dark-surface treatment on every page.

   The black and white lockups share an identical alpha mask and differ only in
   RGB, so brightness(0) invert(1) reproduces the white artwork exactly — no
   second image request, and it is a no-op on pages already using the white one.
   -------------------------------------------------------------------- */
body.menu-open #site-nav img {
  filter: brightness(0) invert(1);
  transition: filter .35s var(--ease);
}
body.menu-open #menu-toggle { color: #fff; }

/* A scrolled light nav would otherwise leave a white bar across the overlay */
body.menu-open #site-nav {
  background-color: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hamburger span { transition: transform .4s var(--ease), opacity .3s var(--ease); }
.hamburger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 100%;
  background: var(--gold);
  z-index: 60;
  /* scaleX instead of width: compositor-only, so the bar never triggers
     layout while scrolling. Visual result is identical. */
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  transition: transform .1s linear;
}

/* -------------------------------------------------------------------- */
/* Preloader                                                             */
/* -------------------------------------------------------------------- */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .8s var(--ease), visibility .8s;
}
#preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
#preloader .pre-mark { opacity: 0; }
html.no-js #preloader { display: none; }

/* -------------------------------------------------------------------- */
/* Reveal primitives                                                     */
/* -------------------------------------------------------------------- */

[data-fade]              { opacity: 0; transform: translateY(26px); }
[data-fade="down"]       { transform: translateY(-26px); }
[data-fade="left"]       { transform: translateX(-36px); }
[data-fade="right"]      { transform: translateX(36px); }
[data-fade="scale"]      { transform: scale(0.94); }
[data-fade="none"]       { transform: none; }

[data-mask-reveal] { clip-path: inset(0% 0% 100% 0%); }

/* Safety net: if main.js never runs, nothing may stay invisible.
   The .no-js class is stripped by the engine on DOMContentLoaded. */
html.no-js [data-fade] { opacity: 1; transform: none; }
html.no-js [data-mask-reveal] { clip-path: none; }
html.no-js .img-reveal img { transform: none; }

.img-reveal { position: relative; overflow: hidden; }
.img-reveal img { transform: scale(1.12); will-change: transform; }

/* -------------------------------------------------------------------- */
/* Buttons                                                               */
/* -------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 3rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 1.05rem 1.9rem;
  border: 1px solid currentColor;
  overflow: hidden;
  transition: background-color .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease);
  white-space: nowrap;
}
.btn .arw {
  display: inline-block;
  transition: transform .45s var(--ease);
}
.btn:hover .arw { transform: translate(3px, -3px); }
.btn:active { transform: translateY(1px); }

/* sweep highlight on hover — reads as a light pass, not a colour flip */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform .8s var(--ease);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(110%); }

.btn-solid  { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-solid:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

.btn-line   { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-line:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.btn-dark   { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-dark:hover { background: transparent; color: var(--navy); }

.btn-ghost  { background: transparent; color: var(--navy); border-color: rgba(1,21,62,0.28); }
.btn-ghost:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* CTA pairs: side by side with room, full-width stack once they'd crowd */
.cta-stack { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 767px) {
  .cta-stack { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
  .cta-stack > .btn { width: 100%; }
}

.magnetic { will-change: transform; }
.magnetic-inner { display: inline-flex; align-items: center; gap: 0.85rem; will-change: transform; }

.link-underline {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size .45s var(--ease);
  padding-bottom: 2px;
}
.link-underline:hover { background-size: 100% 1px; }

/* -------------------------------------------------------------------- */
/* Trusted-by marquee                                                    */
/*                                                                       */
/* The supplied logo artwork is dark ink keyed onto transparency, so the */
/* band sits on a light surface — that is the only way the marks can be  */
/* shown in their true brand colours. No filters, no hover recolour.     */
/* -------------------------------------------------------------------- */

.marquee-row {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  /* Duration is tuned per breakpoint to hold a constant ~34px/s scroll.
     The track is far longer than it used to be, so a fixed duration would
     have made the marquee race. */
  animation: marquee-left 72s linear infinite;
  will-change: transform;
}
.marquee-track.reverse { animation-name: marquee-right; }
.marquee-row:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.marquee-logo {
  width: auto;
  flex-shrink: 0;
  /* true brand colour, always */
  opacity: 1;
  /* insurance only: height + auto width already preserves the ratio, but this
     guarantees no distortion if a box ever gets clamped */
  object-fit: contain;
  transition: transform .5s var(--ease);
}
.marquee-logo:hover { transform: scale(1.06); }

/* Six tiers keyed to the mark's own aspect ratio. A 5:1 wordmark set to the
   same height as a square badge reads far larger, so wide marks get the
   shortest height and tall/square marks the tallest — which lands every logo
   at comparable optical weight without touching its proportions.
   Mobile first, scaled up at each step. */
.marquee-logo--w1 { height: 4.05rem; }  /* tall        AR <  0.85 */
.marquee-logo--w2 { height: 3.8rem; }   /* square      0.85 - 1.15 */
.marquee-logo--w3 { height: 3.35rem; }  /* landscape   1.15 - 1.60 */
.marquee-logo--w4 { height: 2.85rem; }  /* wide        1.60 - 2.40 */
.marquee-logo--w5 { height: 2.45rem; }  /* wider       2.40 - 3.50 */
.marquee-logo--w6 { height: 2.1rem; }   /* widest      AR >= 3.50 */

@media (min-width: 768px) {
  .marquee-track { gap: 2.875rem; animation-duration: 78s; }
  .marquee-logo--w1 { height: 4.25rem; }
  .marquee-logo--w2 { height: 4rem; }
  .marquee-logo--w3 { height: 3.5rem; }
  .marquee-logo--w4 { height: 3rem; }
  .marquee-logo--w5 { height: 2.55rem; }
  .marquee-logo--w6 { height: 2.2rem; }
}

@media (min-width: 1280px) {
  .marquee-track { gap: 3.25rem; animation-duration: 85s; }
  .marquee-logo--w1 { height: 4.5rem; }
  .marquee-logo--w2 { height: 4.2rem; }
  .marquee-logo--w3 { height: 3.7rem; }
  .marquee-logo--w4 { height: 3.15rem; }
  .marquee-logo--w5 { height: 2.7rem; }
  .marquee-logo--w6 { height: 2.3rem; }
}

/* -------------------------------------------------------------------- */
/* Ticker                                                                */
/* -------------------------------------------------------------------- */

.ticker { overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; animation: marquee-left 40s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* -------------------------------------------------------------------- */
/* Section index rail (vertical counters)                                */
/* -------------------------------------------------------------------- */

.rail { display: flex; flex-direction: column; gap: 1.15rem; }
.rail-item {
  font-family: "Fraunces", serif;
  font-size: 0.82rem;
  color: rgba(1, 21, 62, 0.3);
  position: relative;
  transition: color .4s var(--ease);
}
.rail-item.is-active { color: var(--gold-deep); }
.rail-item.is-active::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 8px; height: 1px;
  background: var(--gold-deep);
}

/* -------------------------------------------------------------------- */
/* Service rows                                                          */
/* -------------------------------------------------------------------- */

.service-row {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(1, 21, 62, 0.13);
}
.service-row:last-of-type { border-bottom: 1px solid rgba(1, 21, 62, 0.13); }
.service-fill {
  position: absolute; inset: 0;
  background: var(--navy);
  transform: translateY(101%);
  transition: transform .6s var(--ease-2);
  z-index: 0;
}
.service-row:hover .service-fill { transform: translateY(0); }
.service-content { position: relative; z-index: 1; transition: color .45s var(--ease), transform .6s var(--ease); }
.service-row:hover .service-content { color: var(--white); }
.service-row:hover .s-title { transform: translateX(10px); }
.service-row .s-num { color: var(--gold-deep); transition: color .45s var(--ease); }
.service-row:hover .s-num { color: var(--gold); }
.service-row .s-arw { opacity: 0; transform: translateX(-8px); transition: all .5s var(--ease); }
.service-row:hover .s-arw { opacity: 1; transform: translateX(0); }

/* -------------------------------------------------------------------- */
/* Media panels                                                          */
/* -------------------------------------------------------------------- */

.media-panel { position: relative; overflow: hidden; }
.media-panel img { width: 100%; height: 100%; object-fit: cover; }
.media-panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(1,12,38,0.86) 0%, rgba(1,21,62,0.74) 55%, rgba(1,12,38,0.9) 100%);
}
.media-panel > .panel-content { position: relative; z-index: 2; }

.founder-portrait { overflow: hidden; background: var(--off); }
.founder-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform .9s var(--ease);
}
.founder-portrait:hover img { transform: scale(1.06); }

/* editorial imagery — slow push-in on hover */
.media-hover { overflow: hidden; }
.media-hover img { transition: transform 1.1s var(--ease); }
.media-hover:hover img { transform: scale(1.05); }

/* -------------------------------------------------------------------- */
/* Misc                                                                  */
/* -------------------------------------------------------------------- */

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--white);
  padding: .75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(1, 21, 62, 0.2);
  padding: .85rem 0;
  font-family: "Fraunces", serif;
  font-size: 1.0625rem;
  color: var(--navy);
  transition: border-color .4s var(--ease);
}
.field:focus { outline: none; border-bottom-color: var(--gold-deep); }
.field::placeholder { color: rgba(1, 21, 62, 0.3); }

/* Contact form result message — success and failure must not look alike.
   Tones are drawn from the existing palette rather than new brand colours. */
#form-status { transition: color .3s var(--ease); }
#form-status[data-state="pending"] { color: rgba(1, 21, 62, 0.55); }
#form-status[data-state="success"] { color: var(--gold-deep); }
#form-status[data-state="error"]   { color: #8a3c3c; }

/* -------------------------------------------------------------------- */
/* Mobile refinements                                                    */
/* -------------------------------------------------------------------- */

@media (max-width: 767px) {
  .btn {
    padding: 0.95rem 1.4rem;
    font-size: 0.78rem;
    min-height: 3rem;
  }
  .body-copy { max-width: 38ch; }
  /* up from 0.65rem — the longest label ("Branding · Marketing · Growth")
     still clears a 320px viewport at this size */
  .eyebrow { font-size: 0.75rem; letter-spacing: 0.19em; }

  /* touch devices never get the hover-pause */
  .ticker-track  { animation-duration: 28s; }
}

@media (hover: none) {
  .marquee-logo:hover { transform: none; }
  .btn:hover::before { transform: translateX(-110%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .ticker-track, .hero-mark, .scroll-cue span { animation: none !important; }
  #preloader { display: none; }
  [data-fade] { opacity: 1; transform: none; }
  [data-mask-reveal] { clip-path: none; }
  .img-reveal img { transform: none; }
  .btn::before { display: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}