/* ==========================================================================
   The Munger Company — site styles
   Palette from the brand identity package:
     Deep Navy #142334 · Charcoal Ink #17202A · Heritage Gold #B49A6A
     Warm Ivory #F5F1E8 · White #FFFFFF
   Gold is a keyline/rule colour only — it fails contrast as a text or
   button fill (2.40:1 on ivory), so navy carries every interactive element.
   ========================================================================== */

:root {
  --navy: #142334;
  --navy-hover: #0C1722;
  --ink: #17202A;
  --gold: #B49A6A;
  --ivory: #F5F1E8;
  --band: #EDE8DC;
  --white: #FFFFFF;
  --body: #454F5A;
  --muted: #5F6A73;
  --rule: #DCD5C4;
  --on-navy: #E8EBEF;
  --on-navy-muted: #B9C2CC;
  --navy-rule: #2E3D4E;

  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: 24px;
  --maxw: 1296px;
}

@media (min-width: 900px) {
  :root { --gutter: 48px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 72px; }
}

/* --------------------------------------------------------------- reset -- */

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.012em;
  line-height: 1.14;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-hover); text-decoration: underline; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--white);
  padding: 12px 20px; z-index: 100;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------- layout -- */

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

.section { padding-block: 64px; }
@media (min-width: 900px) { .section { padding-block: 96px; } }

.band {
  background: var(--band);
  border-block: 1px solid var(--rule);
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}
.eyebrow--gold { color: var(--gold); }

.lede { font-size: 18px; line-height: 1.7; }

.ph {
  color: var(--navy);
  background: rgba(180, 154, 106, 0.28);
  padding: 0 4px;
  border-radius: 2px;
}
.on-dark .ph { color: #E7D7BC; background: rgba(180, 154, 106, 0.22); }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-hover); color: var(--white); }

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

.btn--on-dark { border-color: rgba(232, 235, 239, 0.4); color: var(--on-navy); }
.btn--on-dark:hover { border-color: var(--gold); color: var(--white); }

.btn--sm { min-height: 44px; padding: 11px 20px; font-size: 14px; }

/* -------------------------------------------------------------- header -- */

.site-header {
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 20;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}
.site-header__logo { display: block; flex-shrink: 0; min-width: 0; }
.site-header__logo img { width: clamp(148px, 44vw, 190px); }
@media (min-width: 900px) { .site-header__logo img { width: 240px; } }

.site-nav { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Below 900px the header carries only the logo, a call button and the menu:
   the consult button lives in the hero and in the menu, and squeezing it in
   here pushed the row past the viewport. */
.site-header__actions > .btn { display: none; }

.tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
}
.tel:hover { border-color: var(--navy); text-decoration: none; }
.tel svg { color: var(--gold); flex-shrink: 0; }
.tel--compact span { display: none; }

/* Mobile navigation is a native <details> disclosure so it works with
   JavaScript blocked. */
.nav-details { position: static; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  list-style: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle::marker { content: ""; }
.nav-toggle span { display: block; width: 20px; height: 1.6px; background: var(--ink); }
.nav-details[open] .nav-toggle { border-color: var(--navy); }

/* A closed <details> still lays out an absolutely positioned child, which
   pushed the page 28px wider than the viewport. Take it out explicitly. */
.nav-details:not([open]) .mobile-nav { display: none; }

.mobile-nav {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 14px 28px rgba(15, 26, 38, 0.13);
}
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 4px var(--gutter) 18px;
  display: flex;
  flex-direction: column;
}
.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 54px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.mobile-nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }

@media (min-width: 900px) {
  .nav-details { display: none !important; }
  .site-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto;
    margin-right: 8px;
  }
  .site-nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--body);
    padding-block: 4px;
    border-bottom: 2px solid transparent;
  }
  .site-nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--rule); }
  .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
  .site-header__actions { gap: 20px; }
  .site-header__actions > .btn { display: inline-flex; }
  .tel--compact span { display: inline; }
  .tel {
    width: auto;
    height: auto;
    min-height: 44px;
    border: 0;
    padding: 0;
  }
  .tel:hover { border: 0; }
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  background: var(--navy);
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
@media (min-width: 900px) {
  .hero { min-height: 640px; align-items: center; }
}
@media (min-width: 1200px) { .hero { min-height: 700px; } }

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 20, 30, 0.94) 6%, rgba(12, 20, 30, 0.72) 46%, rgba(12, 20, 30, 0.24) 100%);
}
@media (min-width: 900px) {
  .hero__scrim {
    background: linear-gradient(94deg, rgba(12, 20, 30, 0.93) 0%, rgba(12, 20, 30, 0.74) 44%, rgba(12, 20, 30, 0.16) 82%);
  }
}
/* .hero__inner is a .wrap, so it already carries max-width + margin-inline:auto.
   The copy width belongs on a child — putting it here centred the block. */
.hero__inner { position: relative; padding-block: 40px 44px; }
.hero__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 34em;
}
@media (min-width: 900px) {
  .hero__inner { padding-block: 64px; }
  .hero__text { gap: 24px; max-width: 700px; }
}
.hero h1 {
  font-size: clamp(38px, 7vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--white);
}
.hero p {
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.62;
  color: var(--on-navy);
  max-width: 34em;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* On a photograph a navy fill disappears; the hero CTA inverts so it reads. */
.hero__cta .btn--primary { background: var(--white); color: var(--navy); }
.hero__cta .btn--primary:hover { background: var(--ivory); color: var(--navy); }
.hero__cta .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hero__cta .btn { flex: 0 0 auto; } }

/* --------------------------------------------------------- trust strip -- */

.trust { display: grid; gap: 0; }
.trust > div {
  padding-block: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trust > div + div { border-top: 1px solid var(--rule); }
.trust h2 { font-size: 20px; }
.trust p { font-size: 15px; line-height: 1.6; color: var(--muted); }

@media (min-width: 900px) {
  .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
  .trust > div { padding-block: 38px; }
  .trust > div + div { border-top: 0; border-left: 1px solid var(--rule); padding-left: 44px; }
}

/* ------------------------------------------------------------ projects -- */

.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}
.section-head h2 { font-size: clamp(30px, 4.4vw, 46px); }
@media (min-width: 900px) {
  .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 48px;
  }
  .section-head__text { display: flex; flex-direction: column; gap: 14px; }
}

.project-list { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 900px) { .project-list { gap: 64px; } }

.project-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card { display: block; color: inherit; }
.card:hover { text-decoration: none; }
.card__media {
  background: var(--band);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  max-width: 100%;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card:hover .card__media img { transform: scale(1.03); }
.card__body {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card__body h3 { font-size: clamp(23px, 3vw, 30px); }
.card--feature .card__body h3 { font-size: clamp(26px, 3.6vw, 36px); }
.card--feature .card__media { aspect-ratio: 16 / 9; }
.card__meta {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.card__body p { font-size: 16px; line-height: 1.6; color: var(--muted); }

.card__foot {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .card__foot { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 64px; }
  .card__foot > div:first-child { max-width: 620px; }
}
.spec-row { display: flex; gap: 40px; flex-shrink: 0; }
.spec { display: flex; flex-direction: column; gap: 4px; }
.spec dt {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------- process -- */

.steps {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.step:first-child { border-top-width: 2px; border-top-color: var(--gold); }
.step__n {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.step:first-child .step__n { color: var(--gold); }
.step h3 { font-size: 22px; }
.step p { font-size: 15.5px; line-height: 1.62; color: var(--muted); }

/* --------------------------------------------------------------- about -- */

.split {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; }
}
.split__text { display: flex; flex-direction: column; gap: 20px; }
.split__text h2 { font-size: clamp(30px, 4.4vw, 46px); }
.split__media { aspect-ratio: 11 / 9; overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.byline { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.byline::before { content: ""; width: 40px; height: 1px; background: var(--gold); flex-shrink: 0; }
.byline span { font-size: 14px; font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------ contact -- */

.contact { background: var(--navy); color: var(--on-navy-muted); }
.contact h2 { color: var(--white); font-size: clamp(30px, 4.4vw, 44px); }
.contact a { color: var(--on-navy); }
.contact a:hover { color: var(--white); }

.contact__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 80px; }
}
.contact__aside { display: flex; flex-direction: column; gap: 20px; }
.contact__aside p { color: var(--on-navy-muted); }

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--navy-rule);
  list-style: none;
}
.contact-list li { display: flex; align-items: flex-start; gap: 14px; }
.contact-list svg { color: var(--gold); flex-shrink: 0; margin-top: 4px; }
.contact-list a, .contact-list span { font-size: 16px; line-height: 1.55; }
.contact-list a { min-height: 44px; display: flex; align-items: center; }

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

.form {
  background: var(--white);
  border-radius: 2px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--body);
}
@media (min-width: 700px) { .form { padding: 40px; gap: 22px; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .fieldset__legend {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--white);
  padding: 14px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--navy);
  outline-offset: 0;
  border-color: var(--navy);
}
.field--pair { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .field--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 15px;
  color: var(--body);
}
.chip input:checked + span {
  border-color: var(--navy);
  background: rgba(20, 35, 52, 0.06);
  color: var(--navy);
  font-weight: 500;
}
.chip input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }

.form__foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
@media (min-width: 620px) {
  .form__foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}
.form__note { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  padding: 14px 16px;
  border-radius: 2px;
  font-size: 15px;
  line-height: 1.55;
}
.alert--error { background: #FBEAE7; border: 1px solid #C0503C; color: #7E2D1E; }

/* ------------------------------------------------------- project pages -- */

.page-head { padding-block: 40px 28px; }
@media (min-width: 900px) { .page-head { padding-block: 56px 36px; } }
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}
.page-head__row { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 980px) {
  .page-head__row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 72px; }
  .page-head__row > p { max-width: 480px; }
}
.page-head h1 { font-size: clamp(36px, 6vw, 60px); letter-spacing: -0.022em; }

/* .meta-bar and the two-column prose block were removed with the invented
   project details. Restore from git when there are real dates and narratives. */

/* Still used by privacy.html to flag copy nobody has confirmed yet. */
.draft-note {
  margin-block: 32px 0;
  padding: 14px 18px;
  border: 1px dashed rgba(180, 154, 106, 0.85);
  background: rgba(180, 154, 106, 0.12);
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.figure { display: flex; flex-direction: column; gap: 10px; }
.figure img { width: 100%; }
.caption { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }

.gallery {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.gallery .figure--wide { grid-column: 1 / -1; }

/* Testimonial styles, kept for when there are real client quotes to publish.
   The sample quotes were removed rather than shipped as fake endorsements. */
.quote { display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
.quote::before { content: ""; width: 48px; height: 2px; background: var(--gold); }
.quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 31px);
  line-height: 1.42;
  color: var(--ink);
}
.quote cite { font-style: normal; font-size: 15px; font-weight: 500; color: var(--muted); }

.next-project { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; color: inherit; }
@media (min-width: 900px) { .next-project { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; } }
.next-project:hover { text-decoration: none; }
.next-project__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--band); }
.next-project__media img { width: 100%; height: 100%; object-fit: cover; }
.next-project__text { display: flex; flex-direction: column; gap: 12px; }
.next-project h2 { font-size: clamp(28px, 4vw, 42px); }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--navy); }

.cta-band { background: var(--navy); }
.cta-band__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 980px) {
  .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 64px; }
}
.cta-band h2 { color: var(--white); font-size: clamp(28px, 4vw, 42px); max-width: 680px; }
.cta-band p { color: var(--on-navy-muted); max-width: 680px; margin-top: 12px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }

/* -------------------------------------------------------------- footer -- */

.site-footer { background: #0F1A26; color: var(--on-navy-muted); }
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 32px;
}
@media (min-width: 900px) {
  .site-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
}
.site-footer img { width: 180px; }
.site-footer a { color: var(--on-navy-muted); }
.site-footer a:hover { color: var(--white); }
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  font-size: 13.5px;
}

/* --------------------------------------------------------------- legal -- */

/* One long column of running text, which nothing else on this site is. The
   gap carries the section breaks so the page needs no rules, and the list
   markers pick up the gold used as a keyline everywhere else. */
.legal { max-width: 720px; display: flex; flex-direction: column; gap: 38px; }
.legal section { display: flex; flex-direction: column; gap: 14px; }
.legal h2 { font-size: clamp(23px, 3vw, 30px); }
.legal ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 11px; }
.legal li { padding-left: 4px; }
.legal li::marker { color: var(--gold); }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal address { font-style: normal; line-height: 1.85; }
.legal .draft-note { margin-block: 0; }

.legal__updated {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------- utility -- */

.stack { display: flex; flex-direction: column; }
.gap-12 { gap: 12px; }
.gap-20 { gap: 20px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.mt-32 { margin-top: 32px; }
.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;
}

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