/* ==========================================================================
   The Extraction Lounge — public website
   --------------------------------------------------------------------------
   Scoped entirely under .el-* class names so this stylesheet cannot reach any
   other brand's pages in the application, and nothing from the internal
   platform's CSS can style this site by accident.

   Palette is the approved brand system. Champagne gold is used as an accent
   only — hairlines, small caps labels, underlines — never as a large fill,
   which is what keeps the page premium rather than flashy.
   ========================================================================== */

:root {
  --el-sage:        #A4B096;
  --el-sage-soft:   #C7CEC0;
  --el-sage-deep:   #6E7A61;   /* headings + solid buttons; from the wordmark */
  --el-sage-ink:    #4F5947;   /* text on sage/cream, AA on cream */
  --el-cream:       #F5F2EB;
  --el-cream-warm:  #FAF8F3;
  --el-gold:        #D4B683;   /* brand champagne — decoration only, never text */
  /* The brand gold is a decorative tone: at 12px on cream it measures 1.7:1,
     well under AA. Small-caps labels therefore use this darkened variant,
     which is 5.1:1 on cream and 5.7:1 on white. Hairlines, dots and borders
     keep the exact brand champagne above, where contrast does not apply. */
  --el-gold-deep:   #7E6231;
  --el-charcoal:    #222222;
  --el-white:       #FFFFFF;

  --el-muted:       #5C6157;

  --el-radius:      18px;
  --el-radius-lg:   28px;
  --el-shadow:      0 12px 40px rgba(78, 88, 68, .10);
  --el-shadow-soft: 0 4px 18px rgba(78, 88, 68, .07);

  --el-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --el-sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --el-gutter: 16px;
  --el-max:    1180px;
}

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

.el-body {
  margin: 0;
  background: var(--el-cream-warm);
  color: var(--el-charcoal);
  font-family: var(--el-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* belt-and-braces against sideways scroll */
}

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

.el-body img,
.el-body picture { max-width: 100%; height: auto; display: block; }

/* These are element defaults, so they are written with :where() to carry the
   specificity of a bare tag selector. Written as `.el-body p` they would score
   higher than a single class and silently override the margins set by every
   utility class below — which is exactly what happened: .el-hero__tag's
   30px top margin resolved to 0 and the line collided with the buttons above
   it. Any class rule must be able to win here without !important. */
:where(.el-body) h1,
:where(.el-body) h2,
:where(.el-body) h3 {
  font-family: var(--el-serif);
  font-weight: 500;
  color: var(--el-sage-ink);
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}

:where(.el-body) p { margin: 0 0 1.1em; }
:where(.el-body) a { color: inherit; }

/* Visible focus everywhere. Never removed. */
.el-body a:focus-visible,
.el-body button:focus-visible,
.el-body input:focus-visible,
.el-body select:focus-visible,
.el-body textarea:focus-visible,
.el-body summary:focus-visible {
  outline: 2px solid var(--el-gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.el-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--el-sage-deep);
  color: var(--el-white);
  padding: 12px 20px;
  z-index: 200;
  text-decoration: none;
}
.el-skip:focus { left: 8px; top: 8px; }

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

.el-wrap {
  max-width: var(--el-max);
  margin: 0 auto;
  padding: 0 var(--el-gutter);
}

.el-section { padding: clamp(56px, 9vw, 108px) 0; }
.el-section--cream { background: var(--el-cream); }
.el-section--white { background: var(--el-white); }

/* Small-caps eyebrow label — the main place gold appears as text. */
.el-eyebrow {
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--el-gold-deep);
  font-weight: 400;
  margin: 0 0 18px;
}

.el-display {
  font-family: var(--el-serif);
  font-size: clamp(38px, 7vw, 76px);
  line-height: 1.04;
  margin: 0 0 .35em;
  color: var(--el-charcoal);
  font-weight: 400;
}
.el-display em {
  font-style: italic;
  color: var(--el-sage-deep);
  display: block;
}

.el-h2 { font-size: clamp(27px, 4.4vw, 46px); }
.el-h3 { font-size: clamp(19px, 2.4vw, 24px); }

.el-lead {
  font-size: clamp(16px, 1.9vw, 18px);
  color: var(--el-muted);
  max-width: 56ch;
}

.el-script {
  font-family: var(--el-serif);
  font-style: italic;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--el-sage-deep);
  line-height: 1.25;
}

/* Gold hairline rule with optional centred dots, as in the brand lockup. */
.el-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0;
}
.el-rule::before,
.el-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--el-gold), transparent);
}
.el-rule span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--el-gold);
}

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

.el-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;                    /* comfortable tap target */
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--el-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease,
              border-color .25s ease, transform .25s ease;
}
.el-btn--solid {
  background: var(--el-sage-deep);
  color: var(--el-white);
}
.el-btn--solid:hover { background: var(--el-sage-ink); transform: translateY(-1px); }

.el-btn--ghost {
  background: transparent;
  color: var(--el-sage-ink);
  border-color: var(--el-sage-deep);
}
.el-btn--ghost:hover { background: var(--el-sage-deep); color: var(--el-white); }

.el-btn--light {
  background: var(--el-white);
  color: var(--el-sage-ink);
}
.el-btn--light:hover { background: var(--el-cream); }

.el-btns { display: flex; flex-wrap: wrap; gap: 14px; }

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

.el-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--el-cream-warm);
  border-bottom: 1px solid rgba(212, 182, 131, .35);
}

/* Mobile first: the logo and the menu button, nothing else. The two desktop
   navs and the header CTA are hidden here and only introduced at the desktop
   breakpoint — without this they overflow the bar and collide with the
   button. */
.el-header__bar {
  max-width: var(--el-max);
  margin: 0 auto;
  padding: 10px var(--el-gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand burger";
  align-items: center;
  gap: 10px;
}

.el-nav { display: none; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.el-nav--left  { grid-area: left; }
.el-nav--right { grid-area: right; justify-content: flex-end; }

.el-nav a {
  font-size: 12px;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--el-sage-ink);
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
}
.el-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--el-gold);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.el-nav a:hover::after,
.el-nav a[aria-current="page"]::after { transform: scaleX(1); }

.el-brand {
  grid-area: brand;
  display: block;
  padding: 0 clamp(10px, 2vw, 22px);
}
.el-brand img {
  width: clamp(104px, 13vw, 150px);
  transition: width .3s ease;
}

.el-header__cta { display: none; }

/* Compact state once the page scrolls. */
.el-header.is-compact .el-brand img { width: clamp(72px, 8vw, 92px); }
.el-header.is-compact { box-shadow: var(--el-shadow-soft); }

/* ------------------------------------------------------- mobile nav */

.el-burger {
  grid-area: burger;
  justify-self: end;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.el-burger span {
  display: block;
  height: 1.5px;
  background: var(--el-sage-ink);
  transition: transform .3s ease, opacity .2s ease;
}
.el-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.el-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.el-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.el-mobile {
  border-top: 1px solid rgba(212, 182, 131, .35);
  background: var(--el-cream-warm);
  padding: 8px var(--el-gutter) 22px;
}
.el-mobile[hidden] { display: none; }
.el-mobile nav { display: flex; flex-direction: column; }
.el-mobile nav a {
  padding: 15px 4px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--el-sage-ink);
  border-bottom: 1px solid rgba(164, 176, 150, .28);
}
.el-mobile .el-btn { margin-top: 18px; width: 100%; }

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

.el-hero {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--el-cream);
}
.el-hero__copy {
  padding: clamp(44px, 7vw, 92px) var(--el-gutter);
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.el-hero__media { position: relative; min-height: 320px; background: var(--el-sage-soft); }
.el-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.el-hero__script {
  position: absolute;
  right: 6%;
  bottom: 10%;
  color: var(--el-white);
  text-shadow: 0 2px 14px rgba(40, 46, 34, .5);
  text-align: center;
  display: none;
}

.el-hero__tag {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--el-muted);
}
.el-hero__tag::before {
  content: ""; height: 1px; width: 52px; background: var(--el-gold);
}

/* -------------------------------------------------------- category strip */

.el-strip { background: var(--el-sage-soft); }
.el-strip__inner {
  max-width: var(--el-max);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 40px) var(--el-gutter);
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  align-items: center;
}
.el-strip__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
}
.el-strip__item {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--el-sage-ink);
  text-decoration: none;
  line-height: 1.5;
}
.el-strip__item svg { margin: 0 auto 10px; display: block; }
.el-strip__item:hover { color: var(--el-charcoal); }

.el-strip__claim {
  font-family: var(--el-serif);
  font-size: clamp(20px, 2.6vw, 27px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--el-sage-ink);
  text-align: center;
  line-height: 1.3;
  margin: 0;
}

/* ------------------------------------------------------------- split rows */

.el-split {
  display: grid;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.el-split__media img { border-radius: var(--el-radius); box-shadow: var(--el-shadow); }

/* ---------------------------------------------------------------- benefits */

.el-cards {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
  grid-template-columns: 1fr;
}
.el-card {
  background: var(--el-white);
  border: 1px solid rgba(164, 176, 150, .28);
  border-radius: var(--el-radius);
  padding: clamp(24px, 3.4vw, 34px);
  box-shadow: var(--el-shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
.el-card:hover { transform: translateY(-3px); box-shadow: var(--el-shadow); }
.el-card h3 { margin-top: 0; }
.el-card p:last-child { margin-bottom: 0; }
.el-card__icon { margin-bottom: 16px; }

.el-card__media {
  margin: calc(-1 * clamp(24px, 3.4vw, 34px));
  margin-bottom: 20px;
  border-radius: var(--el-radius) var(--el-radius) 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--el-sage-soft);
}
.el-card__media img { width: 100%; height: 100%; object-fit: cover; }

.el-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--el-gold-deep);
}

/* ------------------------------------------------------------ before/after */

.el-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 460px;
}
.el-ba figure { margin: 0; }
.el-ba img,
.el-ba__ph {
  border-radius: 10px 10px 0 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--el-sage-soft);
}
.el-ba figcaption {
  background: var(--el-sage);
  color: var(--el-white);
  text-align: center;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 9px 4px;
  border-radius: 0 0 10px 10px;
}

/* A placeholder tile must be unmistakably a placeholder — never mistakable
   for a real client photograph. */
.el-ba__ph,
.el-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-sage-ink);
  background-color: var(--el-cream);
  background-image: repeating-linear-gradient(
    45deg, rgba(164, 176, 150, .22) 0 10px, transparent 10px 20px);
  border: 1px dashed var(--el-sage);
}

.el-note {
  font-size: 13px;
  color: var(--el-muted);
  border-left: 2px solid var(--el-gold);
  padding-left: 16px;
  margin: 24px 0 0;
  max-width: 62ch;
}

/* ------------------------------------------------------------- lifestyle */

/* Deeper sage, not the primary tone: this surface carries white body text,
   which is 2.28:1 on --el-sage and 4.55:1 here. */
.el-band {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--el-sage-deep);
  color: var(--el-white);
}
.el-band__media { min-height: 280px; background: var(--el-sage-soft); }
.el-band__media img { width: 100%; height: 100%; object-fit: cover; }
.el-band__copy { padding: clamp(40px, 6vw, 80px) var(--el-gutter); }
.el-band__copy h2 { color: var(--el-white); }
.el-band__copy p { color: var(--el-white); }
.el-band__tag {
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--el-white);
}

/* ------------------------------------------------------------ testimonials */

.el-quote {
  background: var(--el-white);
  border: 1px solid rgba(164, 176, 150, .28);
  border-radius: var(--el-radius);
  padding: clamp(24px, 3.4vw, 34px);
  box-shadow: var(--el-shadow-soft);
}
.el-quote blockquote {
  margin: 0 0 18px;
  font-family: var(--el-serif);
  font-size: clamp(18px, 2.2vw, 22px);
  font-style: italic;
  color: var(--el-sage-ink);
  line-height: 1.45;
}
.el-quote figcaption {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--el-muted);
}
.el-stars { color: var(--el-gold); letter-spacing: .2em; margin-bottom: 10px; }

/* -------------------------------------------------------------------- CTA */

.el-cta {
  background: var(--el-cream);
  text-align: center;
  padding: clamp(52px, 8vw, 96px) var(--el-gutter);
}
.el-cta .el-btns { justify-content: center; }

/* ------------------------------------------------------------------ forms */

.el-form { display: grid; gap: 18px; }
.el-field { display: grid; gap: 7px; }
.el-field label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--el-sage-ink);
}
.el-field .el-req { color: var(--el-gold-deep); }

.el-field input,
.el-field select,
.el-field textarea {
  font-family: var(--el-sans);
  font-size: 16px;               /* 16px avoids iOS zoom-on-focus */
  font-weight: 300;
  color: var(--el-charcoal);
  background: var(--el-white);
  border: 1px solid rgba(164, 176, 150, .55);
  border-radius: 12px;
  padding: 14px 16px;
  width: 100%;
  min-height: 48px;
}
.el-field textarea { min-height: 150px; resize: vertical; }
.el-field input:focus,
.el-field select:focus,
.el-field textarea:focus { border-color: var(--el-sage-deep); }

.el-row { display: grid; gap: 18px; grid-template-columns: 1fr; }

.el-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  color: var(--el-muted);
  line-height: 1.6;
}
.el-check input {
  width: 20px; height: 20px; min-height: 0; margin-top: 3px;
  accent-color: var(--el-sage-deep);
}

/* Honeypot: off-screen but not display:none, so bots still fill it. */
.el-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.el-result {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(56px, 9vw, 110px) var(--el-gutter);
}

/* -------------------------------------------------------------------- FAQ */

.el-faq { max-width: 820px; margin: 0 auto; }
.el-faq details {
  border-bottom: 1px solid rgba(164, 176, 150, .4);
  padding: 6px 0;
}
.el-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--el-serif);
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--el-sage-ink);
}
.el-faq summary::-webkit-details-marker { display: none; }
.el-faq summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  color: var(--el-gold-deep);
  font-family: var(--el-sans);
  font-size: 22px;
}
.el-faq details[open] summary::after { content: "–"; }
.el-faq details p { color: var(--el-muted); padding-right: 40px; }

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

.el-doc { max-width: 780px; margin: 0 auto; }
.el-doc h2 { font-size: clamp(22px, 3vw, 30px); margin-top: 1.6em; }
.el-doc ul { color: var(--el-muted); padding-left: 20px; }
.el-doc li { margin-bottom: .5em; }

/* An owner-review block. Clearly flagged so unreviewed placeholder legal
   language can never be mistaken for settled policy. */
.el-review {
  background: var(--el-cream);
  border: 1px dashed var(--el-gold-deep);
  border-radius: var(--el-radius);
  padding: 20px 24px;
  margin: 22px 0;
  font-size: 14px;
  color: var(--el-sage-ink);
}
.el-review strong {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--el-gold-deep);
  margin-bottom: 8px;
}

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

.el-footer { background: var(--el-cream); border-top: 1px solid rgba(212, 182, 131, .4); }
.el-footer__grid {
  max-width: var(--el-max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 70px) var(--el-gutter);
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  grid-template-columns: 1fr;
}
.el-footer__brand img { width: 150px; }
.el-footer__h {
  font-family: var(--el-sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--el-gold-deep);
  margin: 0 0 14px;
}
.el-footer__h--space { margin-top: 24px; }
.el-footer__list { list-style: none; margin: 0; padding: 0; }
.el-footer__list li { margin-bottom: 9px; font-size: 14px; color: var(--el-muted); }
.el-footer__list a { color: var(--el-muted); text-decoration: none; }
.el-footer__list a:hover { color: var(--el-sage-ink); text-decoration: underline; }
.el-footer__script { margin: 18px 0 0; }

.el-footer__base {
  background: var(--el-sage-deep);   /* white text: 4.55:1 */
  color: var(--el-white);
}
.el-footer__base > * { margin: 0; }
.el-footer__base {
  padding: 18px var(--el-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}
.el-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }
.el-footer__legal a { color: var(--el-white); text-decoration: none; }
.el-footer__legal a:hover { text-decoration: underline; }

/* ============================ responsive ================================= */

@media (min-width: 620px) {
  .el-strip__items  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el-row           { grid-template-columns: 1fr 1fr; }
  .el-cards         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-footer__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  :root { --el-gutter: 28px; }

  .el-hero        { grid-template-columns: 1.02fr 1fr; }
  .el-hero__copy  { padding-right: 28px; max-width: none; }
  .el-hero__media { min-height: 620px; }
  .el-hero__script { display: block; }

  .el-strip__inner { grid-template-columns: 1fr auto; }
  .el-strip__items { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .el-strip__claim {
    border-left: 1px solid rgba(110, 122, 97, .35);
    padding-left: clamp(20px, 3vw, 40px);
    text-align: left;
  }

  .el-split        { grid-template-columns: 1fr 1fr; }
  .el-split--wide  { grid-template-columns: 1fr 1.15fr; }
  .el-cards        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el-band         { grid-template-columns: 1fr 1fr; }
  .el-footer__grid { grid-template-columns: 1.1fr 1fr 1.1fr 1fr; }

  .el-burger { display: none; }
  .el-mobile { display: none !important; }
  .el-nav    { display: flex; }

  /* The secondary nav and the CTA each get their own row on the right, so
     they can never occupy the same grid area and overlap. The logo and the
     primary nav span both rows, which keeps the logo optically centred. */
  .el-header__bar {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "left brand right"
      "left brand cta";
    grid-template-rows: auto auto;
    row-gap: 4px;
  }
  .el-nav--left   { grid-area: left;  align-self: center; }
  .el-brand       { grid-area: brand; }
  .el-nav--right  { grid-area: right; align-self: end; }
  .el-header__cta { grid-area: cta; display: inline-flex; justify-self: end; }
}

/* ------------------------------------------------------------- motion */

.el-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.el-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .el-body *,
  .el-body *::before,
  .el-body *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .el-reveal { opacity: 1; transform: none; }
}

@media print {
  .el-header, .el-footer__base, .el-btn { display: none !important; }
}