/* =========================================================
   NUTRI SEM NEURA
   KAREN REBHECA
========================================================= */

:root {
  color-scheme: dark;

  --bg: #07120c;
  --bg-soft: #0b1910;

  --surface: #102218;
  --surface-2: #162c1e;

  --text: #f3ede2;
  --text-soft: #c9c8bd;
  --muted: #858e85;

  --green: #315f3e;
  --green-soft: #65866c;

  --gold: #bc9965;
  --gold-soft: #dbc08f;

  --line: rgba(255, 255, 255, .09);
  --line-gold: rgba(219, 192, 143, .27);

  --whatsapp: #25d366;

  --shadow:
    0 30px 80px
    rgba(0, 0, 0, .30);

  --shadow-soft:
    0 16px 40px
    rgba(0, 0, 0, .16);

  --container: 1180px;

  --serif:
    "Cormorant Garamond",
    Georgia,
    serif;

  --sans:
    "Manrope",
    Arial,
    sans-serif;

  --ease:
    cubic-bezier(.2, .7, .2, 1);

  --transition:
    260ms var(--ease);
}

/* =========================================================
   LIGHT
========================================================= */

html[data-theme="light"] {
  color-scheme: light;

  --bg: #eee7d9;
  --bg-soft: #e4dbc9;

  --surface: #f5efe3;
  --surface-2: #ddd2bf;

  --text: #273329;
  --text-soft: #515c53;
  --muted: #777d76;

  --green: #395e40;
  --green-soft: #6b836c;

  --gold: #8e6c3d;
  --gold-soft: #9e7c4b;

  --line: rgba(25, 40, 27, .10);
  --line-gold: rgba(120, 88, 44, .23);

  --shadow:
    0 28px 70px
    rgba(67, 59, 45, .13);

  --shadow-soft:
    0 15px 40px
    rgba(67, 59, 45, .09);
}

/* =========================================================
   RESET
========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  min-width: 320px;

  overflow-x: hidden;

  color: var(--text);
  background: var(--bg);

  font-family: var(--sans);

  -webkit-font-smoothing: antialiased;

  transition:
    background .35s ease,
    color .35s ease;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;

  width: 100%;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p,
blockquote {
  margin-top: 0;
}

section[id] {
  scroll-margin-top: 82px;
}

::selection {
  color: #142117;
  background: var(--gold-soft);
}

:focus-visible {
  outline:
    2px solid
    var(--gold-soft);

  outline-offset: 4px;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.skip-link {
  position: fixed;
  z-index: 20000;

  top: 10px;
  left: 10px;

  padding: 10px 14px;

  border-radius: 7px;

  color: #07120c;
  background: var(--gold-soft);

  font-size: .7rem;

  transform:
    translateY(-150%);

  transition:
    transform var(--transition);
}

.skip-link:focus {
  transform: none;
}

/* =========================================================
   GLOBAL
========================================================= */

.container {
  width:
    min(
      calc(100% - 48px),
      var(--container)
    );

  margin-inline: auto;
}

.section {
  position: relative;

  padding: 115px 0;
}

.eyebrow {
  display: inline-block;

  margin-bottom: 18px;

  color: var(--gold-soft);

  font-size: .62rem;
  font-weight: 700;

  letter-spacing: .16em;
  text-transform: uppercase;
}

.section-title {
  margin-bottom: 25px;

  font-family: var(--serif);

  font-size:
    clamp(
      3rem,
      5vw,
      5.5rem
    );

  font-weight: 400;

  line-height: .9;
  letter-spacing: -.035em;
}

.section-title em {
  display: block;

  color: var(--gold-soft);

  font-weight: 400;
}

/* =========================================================
   SUPPORT COPY
========================================================= */

.section-heading > p {
  position: relative;

  max-width: 440px;

  margin:
    0 0 10px;

  padding-left: 19px;

  color: var(--text-soft);

  font-size:
    clamp(
      .74rem,
      .82vw,
      .84rem
    );

  line-height: 1.82;
}

.section-heading > p::before {
  position: absolute;

  top: 4px;
  bottom: 4px;
  left: 0;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      var(--gold-soft),
      transparent
    );

  content: "";
}

/* =========================================================
   CURSOR GLOW
========================================================= */

.cursor-glow {
  position: fixed;
  z-index: 9999;

  top: 0;
  left: 0;

  width: 340px;
  height: 340px;

  border-radius: 50%;

  pointer-events: none;

  opacity: 0;

  background:
    radial-gradient(
      circle,
      rgba(219, 192, 143, .065),
      transparent 68%
    );

  transform:
    translate(-50%, -50%);
}

/* =========================================================
   BUTTON
========================================================= */

.button {
  position: relative;

  display: inline-flex;

  min-height: 50px;

  padding:
    0 23px;

  overflow: hidden;

  border-radius: 100px;

  align-items: center;
  justify-content: center;

  gap: 9px;

  font-size: .6rem;
  font-weight: 700;

  letter-spacing: .075em;
  text-transform: uppercase;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.button::after {
  position: absolute;

  top: -150%;
  left: -70%;

  width: 45%;
  height: 400%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .17),
      transparent
    );

  content: "";

  transform: rotate(20deg);

  transition:
    left .6s ease;
}

.button:hover::after {
  left: 145%;
}

.button--primary {
  color: #fff8ed;

  background:
    linear-gradient(
      135deg,
      #8d5d34,
      #b2804c
    );

  box-shadow:
    0 11px 28px
    rgba(100, 60, 28, .25);
}

.button--primary:hover {
  box-shadow:
    0 20px 45px
    rgba(100, 60, 28, .33);
}

.button--secondary {
  border:
    1px solid var(--line);

  color: var(--text);

  background:
    rgba(255, 255, 255, .025);
}

.button--secondary:hover {
  border-color: var(--line-gold);

  background:
    rgba(255, 255, 255, .045);
}

.button--whatsapp {
  width: 100%;

  color: white;

  background:
    linear-gradient(
      135deg,
      #168743,
      #25b95d
    );

  box-shadow:
    0 15px 35px
    rgba(23, 136, 69, .22);
}

/* =========================================================
   PROGRESS
========================================================= */

.progress {
  position: fixed;
  z-index: 10000;

  top: 0;
  left: 0;

  width: 0;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-soft)
    );
}

/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: absolute;
  z-index: 100;

  top: 0;
  left: 0;

  width: 100%;

  transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.site-header::before {
  position: absolute;

  top: 0;
  left: 50%;

  width:
    min(
      calc(100% - 48px),
      var(--container)
    );

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(219, 192, 143, .14),
      transparent
    );

  content: "";

  transform:
    translateX(-50%);
}

.site-header.is-scrolled {
  position: fixed;

  border-bottom:
    1px solid var(--line);

  background:
    color-mix(
      in srgb,
      var(--bg) 91%,
      transparent
    );

  box-shadow:
    0 10px 35px
    rgba(0, 0, 0, .08);

  backdrop-filter:
    blur(22px)
    saturate(130%);
}

.header-inner {
  position: relative;

  display: grid;

  min-height: 82px;

  grid-template-columns:
    minmax(220px, 1fr)
    auto
    minmax(220px, 1fr);

  align-items: center;

  column-gap: 24px;
}

.site-header.is-scrolled
.header-inner {
  min-height: 70px;
}

/* =========================================================
   BRAND
========================================================= */

.header-brand {
  justify-self: start;
}

.brand {
  display: inline-flex;

  align-items: center;

  gap: 12px;
}

.brand-mark,
.brand-monogram {
  position: relative;

  display: flex;

  width: 46px;
  height: 46px;

  flex: 0 0 auto;

  border:
    1px solid var(--line-gold);

  border-radius: 50%;

  align-items: center;
  justify-content: center;

  color: var(--gold-soft);

  font-family: var(--serif);

  font-size: 1rem;

  letter-spacing: -.07em;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(219, 192, 143, .08),
      transparent 70%
    );

  transition:
    border-color var(--transition),
    transform var(--transition);
}

.brand:hover
.brand-mark {
  border-color:
    rgba(219, 192, 143, .5);

  transform:
    rotate(-3deg);
}

.brand-mark i,
.brand-monogram i {
  width: 1px;
  height: 20px;

  margin:
    0 3px;

  background:
    var(--line-gold);

  transform:
    rotate(14deg);
}

.brand-name {
  display: grid;

  line-height: 1;
}

.brand-name strong {
  color: var(--text);

  font-family: var(--serif);

  font-size: 1.08rem;
  font-weight: 500;
}

.brand-name small {
  margin-top: 5px;

  color: var(--muted);

  font-size: .41rem;
  font-weight: 600;

  letter-spacing: .15em;
  text-transform: uppercase;
}

/* =========================================================
   CENTER NAV
========================================================= */

.desktop-nav {
  display: flex;

  justify-self: center;

  padding: 5px;

  border:
    1px solid
    rgba(255, 255, 255, .055);

  border-radius: 100px;

  align-items: center;
  justify-content: center;

  gap: 3px;

  background:
    rgba(255, 255, 255, .018);

  backdrop-filter:
    blur(8px);
}

.desktop-nav a {
  position: relative;

  display: inline-flex;

  min-height: 34px;

  padding:
    0 13px;

  border-radius: 100px;

  align-items: center;
  justify-content: center;

  color: var(--text-soft);

  font-size: .5rem;
  font-weight: 700;

  letter-spacing: .075em;
  text-transform: uppercase;

  white-space: nowrap;

  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.desktop-nav a::after {
  position: absolute;

  bottom: 5px;
  left: 50%;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: var(--gold-soft);

  content: "";

  opacity: 0;

  transform:
    translate(-50%, 4px);

  transition:
    opacity var(--transition),
    transform var(--transition);
}

.desktop-nav a:hover {
  color: var(--text);

  background:
    rgba(255, 255, 255, .045);

  transform:
    translateY(-1px);
}

.desktop-nav a:hover::after {
  opacity: 1;

  transform:
    translate(-50%, 0);
}

/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {
  display: flex;

  justify-self: end;

  align-items: center;

  gap: 7px;
}

.header-action {
  display: inline-flex;

  min-height: 38px;

  padding:
    0 13px;

  border:
    1px solid var(--line);

  border-radius: 100px;

  align-items: center;
  justify-content: center;

  gap: 7px;

  color: var(--text-soft);

  background:
    rgba(255, 255, 255, .02);

  font-size: .48rem;
  font-weight: 700;

  letter-spacing: .06em;
  text-transform: uppercase;

  white-space: nowrap;

  transition:
    color var(--transition),
    border-color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.header-action:hover {
  color: var(--text);

  border-color: var(--line-gold);

  background:
    rgba(255, 255, 255, .045);

  transform:
    translateY(-2px);
}

.header-action--whatsapp i {
  color: var(--whatsapp);
}

/* =========================================================
   THEME
========================================================= */

.theme-toggle {
  display: grid;

  width: 39px;
  height: 39px;

  flex: 0 0 auto;

  place-items: center;

  border:
    1px solid var(--line);

  border-radius: 50%;

  color: var(--gold-soft);

  background:
    rgba(255, 255, 255, .02);

  cursor: pointer;

  transition:
    border-color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.theme-toggle:hover {
  border-color: var(--line-gold);

  background:
    rgba(255, 255, 255, .045);

  transform:
    rotate(10deg);
}

/* =========================================================
   MOBILE TOGGLE
========================================================= */

.menu-toggle {
  position: relative;

  display: none;

  width: 44px;
  height: 44px;

  flex: 0 0 auto;

  padding: 0;

  place-items: center;

  border:
    1px solid var(--line);

  border-radius: 50%;

  color: var(--gold-soft);

  background:
    color-mix(
      in srgb,
      var(--surface) 78%,
      transparent
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .04),
    0 8px 24px
    rgba(0, 0, 0, .10);

  backdrop-filter:
    blur(12px);

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;

  touch-action: manipulation;

  transition:
    border-color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.menu-toggle::before {
  position: absolute;

  inset: 5px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(219, 192, 143, .13),
      transparent 72%
    );

  content: "";

  pointer-events: none;
}

.menu-toggle__icon {
  position: relative;
  z-index: 2;

  color: var(--gold-soft);

  font-size: 1.35rem;

  line-height: 1;

  transition:
    transform .32s var(--ease),
    color var(--transition);
}

body.menu-open
.menu-toggle {
  border-color: var(--line-gold);

  background:
    color-mix(
      in srgb,
      var(--surface) 88%,
      var(--gold) 12%
    );
}

body.menu-open
.menu-toggle__icon {
  transform:
    rotate(90deg)
    scale(.94);
}

/* =========================================================
   MOBILE NAV
========================================================= */

.mobile-nav {
  position: fixed;
  z-index: 90;

  inset: 0;

  width: 100%;
  height: 100vh;
  height: 100dvh;

  padding:
    105px
    max(25px, env(safe-area-inset-right))
    max(30px, env(safe-area-inset-bottom))
    max(25px, env(safe-area-inset-left));

  overflow-y: auto;

  color: var(--text);

  background:
    radial-gradient(
      circle at 85% 4%,
      rgba(219, 192, 143, .10),
      transparent 32%
    ),
    var(--bg);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(-10px);

  transition:
    opacity .28s ease,
    visibility .28s ease,
    transform .35s var(--ease);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transform: none;
}

.mobile-nav__content {
  display: flex;

  min-height:
    calc(100dvh - 135px);

  flex-direction: column;
}

.mobile-brand {
  display: flex;

  margin-bottom: 30px;

  align-items: center;

  gap: 12px;
}

.mobile-brand > span:last-child {
  display: grid;

  font-family: var(--serif);

  font-size: 1.35rem;
}

.mobile-brand small {
  margin-top: 5px;

  color: var(--muted);

  font-family: var(--sans);

  font-size: .45rem;

  letter-spacing: .12em;
  text-transform: uppercase;
}

.mobile-nav nav {
  display: grid;
}

.mobile-nav nav a {
  display: grid;

  padding:
    11px 0;

  border-bottom:
    1px solid var(--line);

  grid-template-columns:
    35px 1fr;

  align-items: center;

  color: var(--text);

  font-family: var(--serif);

  font-size:
    clamp(
      2rem,
      10vw,
      3.1rem
    );

  opacity: 0;

  transform:
    translateY(12px);

  transition:
    color var(--transition),
    opacity .4s ease,
    transform .4s var(--ease);
}

.mobile-nav nav a > span {
  color: var(--gold-soft);

  font-family: var(--sans);

  font-size: .44rem;
  font-weight: 600;
}

.mobile-nav.is-open
nav a {
  opacity: 1;

  transform: none;
}

.mobile-nav.is-open
nav a:nth-child(1) {
  transition-delay: 70ms;
}

.mobile-nav.is-open
nav a:nth-child(2) {
  transition-delay: 100ms;
}

.mobile-nav.is-open
nav a:nth-child(3) {
  transition-delay: 130ms;
}

.mobile-nav.is-open
nav a:nth-child(4) {
  transition-delay: 160ms;
}

.mobile-nav.is-open
nav a:nth-child(5) {
  transition-delay: 190ms;
}

.mobile-nav.is-open
nav a:nth-child(6) {
  transition-delay: 220ms;
}

.mobile-nav__actions {
  display: flex;

  margin-top: auto;
  padding-top: 28px;

  flex-wrap: wrap;

  gap: 8px;
}

.mobile-nav__actions a,
.mobile-nav__actions button {
  display: inline-flex;

  min-height: 43px;

  padding:
    0 15px;

  border:
    1px solid var(--line);

  border-radius: 100px;

  align-items: center;
  justify-content: center;

  gap: 7px;

  color: var(--text-soft);

  background:
    rgba(255, 255, 255, .02);

  font-size: .56rem;
  font-weight: 600;

  cursor: pointer;
}

.mobile-nav__actions
.bi-whatsapp {
  color: var(--whatsapp);
}

/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  min-height: 800px;

  overflow: hidden;

  background: var(--bg);
}

.ambient-canvas {
  position: absolute;
  z-index: 0;

  inset: 0;

  width: 100%;
  height: 100%;

  opacity: .72;

  pointer-events: none;
}

.hero::before {
  position: absolute;

  top: 0;
  right: 0;

  width: 48%;
  height: 100%;

  background:
    linear-gradient(
      180deg,
      var(--surface),
      var(--bg)
    );

  content: "";
}

.hero-letters {
  position: absolute;

  top: 50%;
  right: -5%;

  color:
    rgba(219, 192, 143, .035);

  font-family: var(--serif);

  font-size: 37vw;

  line-height: 1;

  transform:
    translateY(-50%);

  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 2;

  display: grid;

  min-height: 800px;

  padding-top: 82px;

  grid-template-columns:
    .95fr 1.05fr;

  gap: 80px;

  align-items: center;
}

.hero-content h1 {
  max-width: 650px;

  margin-bottom: 27px;

  font-family: var(--serif);

  font-size:
    clamp(
      4rem,
      6.8vw,
      7.3rem
    );

  font-weight: 400;

  line-height: .82;
  letter-spacing: -.055em;
}

.hero-content h1 em {
  display: block;

  margin-top: 10px;

  color: var(--gold-soft);

  font-weight: 400;
}

.hero-description {
  max-width: 540px;

  margin-bottom: 29px;

  color: var(--text-soft);

  font-size: .81rem;

  line-height: 1.85;
}

.hero-description strong {
  color: var(--text);
}

.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}

.hero-details {
  display: flex;

  margin-top: 45px;

  gap: 50px;
}

.hero-details div {
  display: grid;

  max-width: 190px;
}

.hero-details small {
  margin-bottom: 4px;

  color: var(--muted);

  font-size: .49rem;

  text-transform: uppercase;
}

.hero-details strong {
  font-family: var(--serif);

  font-size: 1rem;
  font-weight: 500;
}

/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
  position: relative;

  min-height: 630px;
}

.post {
  position: absolute;

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 7px;

  background: var(--surface);

  box-shadow: var(--shadow);
}

.post img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.post--one {
  z-index: 3;

  top: 80px;
  left: 60px;

  width: 330px;
  height: 470px;

  transform:
    rotate(-2deg);
}

.post--two {
  z-index: 2;

  top: 35px;
  right: -25px;

  width: 230px;
  height: 330px;

  transform:
    rotate(5deg);
}

.hero-badge {
  position: absolute;
  z-index: 6;

  right: 7px;
  bottom: 65px;

  display: flex;

  padding:
    12px 15px;

  border:
    1px solid var(--line-gold);

  border-radius: 8px;

  align-items: center;

  gap: 12px;

  background:
    color-mix(
      in srgb,
      var(--surface) 92%,
      transparent
    );

  box-shadow: var(--shadow-soft);

  backdrop-filter:
    blur(15px);
}

.hero-badge__icon {
  display: grid;

  width: 38px;
  height: 38px;

  place-items: center;

  border:
    1px solid var(--line-gold);

  border-radius: 50%;

  color: var(--gold-soft);

  font-family: var(--serif);
}

.hero-badge > span:last-child {
  display: grid;
}

.hero-badge strong {
  font-family: var(--serif);

  font-size: .95rem;
  font-weight: 500;
}

.hero-badge small {
  color: var(--muted);

  font-size: .47rem;
}

/* =========================================================
   SCROLL
========================================================= */

.scroll-indicator {
  position: absolute;
  z-index: 5;

  bottom: 27px;
  left: 50%;

  display: grid;

  place-items: center;

  gap: 7px;

  color: var(--muted);

  font-size: .43rem;

  letter-spacing: .14em;
  text-transform: uppercase;

  transform:
    translateX(-50%);
}

.scroll-indicator span {
  position: relative;

  width: 1px;
  height: 35px;

  overflow: hidden;

  background: var(--line);
}

.scroll-indicator span::after {
  position: absolute;

  top: -35px;

  width: 1px;
  height: 35px;

  background: var(--gold-soft);

  content: "";

  animation:
    scrollLine
    2s ease-in-out
    infinite;
}

@keyframes scrollLine {
  to {
    transform:
      translateY(70px);
  }
}

/* =========================================================
   MARQUEE
========================================================= */

.marquee {
  overflow: hidden;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  background: var(--bg-soft);
}

.marquee-track {
  display: flex;

  width: max-content;

  animation:
    marquee
    30s linear
    infinite;
}

.marquee span {
  display: inline-flex;

  height: 50px;

  padding:
    0 30px;

  align-items: center;

  color: var(--gold-soft);

  font-family: var(--serif);

  font-size: .9rem;

  opacity: .45;

  white-space: nowrap;
}

.marquee span::after {
  margin-left: 55px;

  content: "•";
}

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

/* =========================================================
   ABOUT
========================================================= */

.about {
  background: var(--surface);
}

.about-grid {
  display: grid;

  max-width: 1040px;

  margin-inline: auto;

  grid-template-columns:
    .9fr 1.1fr;

  gap: 85px;

  align-items: center;
}

.about-photo {
  position: relative;
}

.about-photo__frame {
  position: relative;

  overflow: hidden;

  aspect-ratio:
    4 / 5;

  border-radius:
    140px
    140px
    10px
    10px;

  box-shadow: var(--shadow);
}

.about-photo__frame img {
  height: 100%;

  object-fit: cover;
  object-position: center top;
}

.about-photo__signature {
  position: absolute;

  right: -28px;
  bottom: 35px;

  display: flex;

  padding:
    14px 16px;

  border:
    1px solid var(--line-gold);

  border-radius: 8px;

  align-items: center;

  gap: 10px;

  background: var(--bg);

  box-shadow: var(--shadow-soft);
}

.about-photo__signature > span {
  display: grid;

  width: 38px;
  height: 38px;

  place-items: center;

  border:
    1px solid var(--line-gold);

  border-radius: 50%;

  color: var(--gold-soft);

  font-family: var(--serif);
}

.about-photo__signature div {
  display: grid;
}

.about-photo__signature strong {
  font-family: var(--serif);

  font-size: 1rem;
  font-weight: 500;
}

.about-photo__signature small {
  color: var(--muted);

  font-size: .46rem;
}

.about-copy > p {
  color: var(--text-soft);

  font-size: .76rem;

  line-height: 1.85;
}

.about-copy blockquote {
  margin:
    28px 0;

  padding-left: 20px;

  border-left:
    1px solid var(--gold-soft);

  color: var(--gold-soft);

  font-family: var(--serif);

  font-size: 1.4rem;

  line-height: 1.45;
}

.about-meta {
  display: flex;

  margin-top: 35px;

  gap: 35px;
}

.about-meta div {
  display: grid;

  max-width: 130px;
}

.about-meta strong {
  color: var(--gold-soft);

  font-family: var(--serif);

  font-size: 2.5rem;

  font-weight: 400;
}

.about-meta span {
  color: var(--muted);

  font-size: .51rem;

  text-transform: uppercase;
}

/* =========================================================
   PURPOSE
========================================================= */

.purpose {
  background: var(--bg);
}

.purpose-card {
  max-width: 1030px;

  margin-inline: auto;

  padding:
    100px 80px;

  border:
    1px solid var(--line);

  border-radius: 18px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(219, 192, 143, .10),
      transparent 43%
    ),
    var(--bg-soft);

  box-shadow: var(--shadow-soft);
}

.purpose-card h2 {
  max-width: 800px;

  margin:
    0 auto 27px;

  font-family: var(--serif);

  font-size:
    clamp(
      3.1rem,
      5vw,
      5.7rem
    );

  font-weight: 400;

  line-height: .9;
}

.purpose-card h2 em {
  display: block;

  color: var(--gold-soft);
}

.purpose-line {
  width: 55px;
  height: 1px;

  margin:
    30px auto;

  background: var(--gold-soft);
}

.purpose-card p {
  max-width: 650px;

  margin:
    0 auto 12px;

  color: var(--text-soft);

  font-size: .77rem;

  line-height: 1.8;
}

/* =========================================================
   HEADINGS
========================================================= */

.section-heading {
  display: grid;

  margin-bottom: 55px;

  grid-template-columns:
    1fr .85fr;

  gap: 70px;

  align-items: end;
}

/* =========================================================
   THEMES
========================================================= */

.themes {
  background: var(--surface);
}

.themes-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 10px;
}

.theme-card {
  min-height: 300px;

  padding: 28px;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background: var(--bg-soft);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.theme-card:hover {
  transform:
    translateY(-7px);

  border-color: var(--line-gold);

  box-shadow: var(--shadow-soft);
}

.theme-card > span {
  display: block;

  margin-bottom: 45px;

  color: var(--gold-soft);

  font-family: var(--serif);
}

.theme-card i {
  display: grid;

  width: 39px;
  height: 39px;

  margin-bottom: 18px;

  place-items: center;

  border:
    1px solid var(--line-gold);

  border-radius: 50%;

  color: var(--gold-soft);
}

.theme-card h3 {
  margin-bottom: 12px;

  font-family: var(--serif);

  font-size: 1.45rem;
  font-weight: 500;
}

.theme-card p {
  margin: 0;

  color: var(--muted);

  font-size: .63rem;

  line-height: 1.7;
}

.tags {
  display: flex;

  max-width: 900px;

  margin:
    55px auto 0;

  flex-wrap: wrap;
  justify-content: center;

  gap: 8px;
}

.tags span {
  padding:
    10px 15px;

  border:
    1px solid var(--line);

  border-radius: 100px;

  color: var(--text-soft);

  font-size: .52rem;

  text-transform: uppercase;

  transition:
    color var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.tags span:hover {
  color: var(--gold-soft);

  border-color: var(--line-gold);

  transform:
    translateY(-2px);
}

/* =========================================================
   CONTENT
========================================================= */

.content-section {
  padding-top: 92px;
  padding-bottom: 100px;

  background: var(--bg);
}

.content-section
.section-heading {
  max-width: 980px;

  margin:
    0 auto 38px;

  grid-template-columns:
    1fr .72fr;

  gap: 45px;
}

.content-section
.eyebrow {
  margin-bottom: 12px;

  font-size: .52rem;
}

.content-section
.section-title {
  max-width: 570px;

  margin-bottom: 0;

  font-size:
    clamp(
      2.65rem,
      4.3vw,
      4.55rem
    );

  line-height: .9;
}

.content-section
.section-heading > p {
  max-width: 410px;

  font-size:
    clamp(
      .78rem,
      .92vw,
      .9rem
    );

  line-height: 1.8;
}

.content-section
.section-heading > p strong {
  color: var(--gold-soft);

  font-weight: 600;
}

.content-grid {
  display: grid;

  width: 100%;
  max-width: 1080px;

  margin-inline: auto;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 11px;
}

.content-card {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 10px;

  background: var(--surface);

  box-shadow:
    0 8px 28px
    rgba(0, 0, 0, .08);

  transition:
    transform .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
}

.content-card:hover {
  transform:
    translateY(-5px);

  border-color: var(--line-gold);

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, .17);
}

.content-card__image {
  position: relative;

  overflow: hidden;

  aspect-ratio:
    1 / 1.08;

  background: var(--surface-2);
}

.content-card__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .65s var(--ease);
}

.content-card:hover
.content-card__image img {
  transform:
    scale(1.025);
}

.content-card__copy {
  padding:
    15px 14px 14px;
}

.content-card__copy > span {
  display: block;

  min-height: 20px;

  margin-bottom: 6px;

  color: var(--gold-soft);

  font-size: .39rem;
  font-weight: 700;

  line-height: 1.35;

  letter-spacing: .065em;
  text-transform: uppercase;
}

.content-card h3 {
  min-height: 52px;

  margin-bottom: 13px;

  font-family: var(--serif);

  font-size:
    clamp(
      .98rem,
      1.15vw,
      1.16rem
    );

  font-weight: 500;

  line-height: 1.12;
}

.content-card__copy > div {
  display: flex;

  padding-top: 10px;

  border-top:
    1px solid var(--line);

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  color: var(--muted);

  font-size: .4rem;
  font-weight: 700;

  text-transform: uppercase;
}

.content-card__copy > div i {
  display: grid;

  width: 23px;
  height: 23px;

  place-items: center;

  border:
    1px solid var(--line);

  border-radius: 50%;

  transition:
    color var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.content-card:hover
.content-card__copy > div i {
  color: var(--gold-soft);

  border-color: var(--line-gold);

  transform:
    rotate(8deg);
}

.content-cta {
  margin-top: 32px;

  text-align: center;
}

.content-cta .button {
  min-height: 45px;

  font-size: .52rem;
}

/* =========================================================
   JOURNEY
========================================================= */

.journey {
  color: #f4e9db;

  background: #48271c;
}

.journey-grid {
  display: grid;

  max-width: 1050px;

  grid-template-columns:
    .8fr 1.2fr;

  gap: 80px;
}

.journey-copy {
  position: sticky;

  top: 125px;

  align-self: start;
}

.journey-copy
.section-title {
  color: #f4e9db;
}

.journey-copy > p {
  color:
    rgba(244, 233, 219, .75);

  font-size: .76rem;

  line-height: 1.82;
}

.timeline {
  display: grid;

  gap: 8px;
}

.timeline article {
  display: grid;

  min-height: 125px;

  padding: 20px;

  border:
    1px solid
    rgba(255, 255, 255, .08);

  border-radius: 9px;

  grid-template-columns:
    55px 1fr;

  align-items: center;

  gap: 10px;

  background:
    rgba(255, 255, 255, .035);

  transition:
    transform var(--transition),
    background var(--transition);
}

.timeline article:hover {
  transform:
    translateX(5px);

  background:
    rgba(255, 255, 255, .055);
}

.timeline article > span {
  display: grid;

  width: 43px;
  height: 43px;

  place-items: center;

  border:
    1px solid
    rgba(219, 192, 143, .35);

  border-radius: 50%;

  color: #dbc08f;

  font-family: var(--serif);
}

.timeline small {
  display: block;

  margin-bottom: 5px;

  color: #d9b57a;

  font-size: .47rem;

  text-transform: uppercase;
}

.timeline h3 {
  margin:
    0 0 7px;

  font-family: var(--serif);

  font-size: 1.35rem;
  font-weight: 500;
}

.timeline p {
  margin: 0;

  color:
    rgba(244, 233, 219, .67);

  font-size: .61rem;

  line-height: 1.65;
}

/* =========================================================
   CONTACT
========================================================= */

.contact-section {
  overflow: hidden;

  background: var(--surface);
}

.contact-orb {
  position: absolute;

  border-radius: 50%;

  filter:
    blur(110px);

  pointer-events: none;
}

.contact-orb--one {
  top: -120px;
  right: -150px;

  width: 430px;
  height: 430px;

  background:
    rgba(93, 130, 75, .12);
}

.contact-orb--two {
  bottom: -180px;
  left: -100px;

  width: 450px;
  height: 450px;

  background:
    rgba(188, 153, 101, .08);
}

.contact-panel {
  position: relative;
  z-index: 2;

  display: grid;

  max-width: 1070px;

  margin-inline: auto;

  padding: 50px;

  border:
    1px solid var(--line);

  border-radius: 18px;

  grid-template-columns:
    .85fr 1.15fr;

  gap: 65px;

  background:
    var(--bg-soft);

  box-shadow: var(--shadow);
}

.contact-intro > p {
  max-width: 410px;

  color: var(--text-soft);

  font-size: .78rem;

  line-height: 1.82;
}

.contact-benefits {
  display: grid;

  margin-top: 35px;

  gap: 10px;
}

.contact-benefits > div {
  display: flex;

  padding: 14px;

  border:
    1px solid var(--line);

  border-radius: 8px;

  align-items: center;

  gap: 12px;

  background:
    rgba(255, 255, 255, .015);
}

.contact-benefits > div > i {
  display: grid;

  width: 36px;
  height: 36px;

  flex: 0 0 auto;

  place-items: center;

  border:
    1px solid var(--line-gold);

  border-radius: 50%;

  color: var(--gold-soft);
}

.contact-benefits span {
  display: grid;
}

.contact-benefits strong {
  font-family: var(--serif);

  font-size: 1rem;
  font-weight: 500;
}

.contact-benefits small {
  color: var(--muted);

  font-size: .52rem;
}

/* =========================================================
   FORM
========================================================= */

.whatsapp-form {
  padding: 28px;

  border:
    1px solid var(--line);

  border-radius: 13px;

  background: var(--bg);
}

.form-heading {
  display: grid;

  margin-bottom: 25px;
}

.form-heading span {
  margin-bottom: 4px;

  color: var(--gold-soft);

  font-size: .48rem;
  font-weight: 700;

  text-transform: uppercase;
}

.form-heading strong {
  font-family: var(--serif);

  font-size: 2rem;
  font-weight: 500;
}

.form-row {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;
}

.field {
  display: block;

  margin-bottom: 14px;
}

.field > span {
  display: block;

  margin-bottom: 8px;

  color: var(--text-soft);

  font-size: .52rem;
  font-weight: 700;

  text-transform: uppercase;
}

.field-control {
  position: relative;

  display: flex;

  min-height: 51px;

  border:
    1px solid var(--line);

  border-radius: 8px;

  align-items: center;

  background:
    rgba(255, 255, 255, .02);

  transition:
    border-color var(--transition),
    background var(--transition);
}

.field-control:focus-within {
  border-color: var(--line-gold);

  background:
    rgba(255, 255, 255, .035);
}

.field-control > i:first-child {
  margin-left: 15px;

  color: var(--gold-soft);
}

.field-control input,
.field-control select,
.field-control textarea {
  width: 100%;

  border: 0;
  outline: 0;

  color: var(--text);

  background: transparent;

  font-size: .67rem;
}

.field-control input,
.field-control select {
  height: 49px;

  padding:
    0 13px;
}

.field-control select {
  padding-right: 38px;

  appearance: none;
}

.field-control select option {
  color: var(--text);

  background: var(--bg);
}

.field-chevron {
  position: absolute;

  right: 14px;

  color: var(--muted);

  pointer-events: none;
}

.field-control--textarea {
  align-items: flex-start;
}

.field-control--textarea > i {
  margin-top: 16px;
}

.field-control textarea {
  min-height: 130px;

  padding:
    15px 13px;

  resize: vertical;

  line-height: 1.65;
}

.field-control input::placeholder,
.field-control textarea::placeholder {
  color: var(--muted);
}

.character-counter {
  display: flex;

  margin-top: 6px;

  justify-content: space-between;

  gap: 15px;

  color: var(--muted);

  font-size: .45rem;
}

.consent {
  display: flex;

  margin:
    6px 0 20px;

  align-items: flex-start;

  gap: 9px;

  color: var(--muted);

  font-size: .51rem;

  line-height: 1.6;

  cursor: pointer;
}

.consent input {
  position: absolute;

  opacity: 0;
}

.consent-check {
  display: grid;

  width: 18px;
  height: 18px;

  flex: 0 0 auto;

  place-items: center;

  border:
    1px solid var(--line-gold);

  border-radius: 4px;

  color: transparent;
}

.consent input:checked
+ .consent-check {
  color: #07120c;

  background: var(--gold-soft);
}

.form-error {
  min-height: 17px;

  margin:
    10px 0 0;

  color: #da877c;

  font-size: .5rem;

  text-align: center;
}

/* =========================================================
   FINAL
========================================================= */

.final-cta {
  padding:
    100px 0;

  background: var(--surface);
}

.final-cta__card {
  max-width: 980px;

  margin-inline: auto;

  padding: 75px;

  border:
    1px solid var(--line);

  border-radius: 18px;

  text-align: center;

  background:
    var(--bg-soft);
}

.final-cta__card > span {
  display: grid;

  width: 52px;
  height: 52px;

  margin:
    0 auto 25px;

  place-items: center;

  border:
    1px solid var(--line-gold);

  border-radius: 50%;

  color: var(--gold-soft);

  font-family: var(--serif);
}

.final-cta h2 {
  max-width: 720px;

  margin:
    0 auto 20px;

  font-family: var(--serif);

  font-size:
    clamp(
      3rem,
      5vw,
      5rem
    );

  font-weight: 400;

  line-height: .95;
}

.final-cta h2 em {
  color: var(--gold-soft);
}

.final-cta p {
  color: var(--muted);

  font-size: .72rem;
}

.final-cta__card > div {
  display: flex;

  margin-top: 28px;

  justify-content: center;

  flex-wrap: wrap;

  gap: 9px;
}

/* =========================================================
   FOOTER
========================================================= */

.footer {
  padding:
    30px 0 45px;

  background: var(--bg);
}

.footer-grid {
  display: grid;

  padding-top: 37px;

  border-top:
    1px solid var(--line);

  grid-template-columns:
    1fr 1fr;

  gap: 50px;

  align-items: end;
}

.footer-grid
> div:first-child > p {
  max-width: 570px;

  margin:
    22px 0 0;

  color: var(--muted);

  font-size: .52rem;

  line-height: 1.75;
}

.footer-right {
  text-align: right;
}

.footer-right > div {
  display: flex;

  margin-bottom: 18px;

  justify-content: flex-end;

  gap: 8px;
}

.footer-right a {
  display: grid;

  width: 38px;
  height: 38px;

  place-items: center;

  border:
    1px solid var(--line);

  border-radius: 50%;

  transition:
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.footer-right a:hover {
  color: var(--gold-soft);

  border-color: var(--line-gold);

  transform:
    translateY(-3px);
}

.footer-right small {
  color: var(--muted);

  font-size: .48rem;
}

/* =========================================================
   FLOATING
========================================================= */

.floating-whatsapp {
  position: fixed;
  z-index: 80;

  right: 20px;
  bottom: 20px;

  display: inline-flex;

  min-height: 49px;

  padding:
    0 18px;

  border-radius: 100px;

  align-items: center;

  gap: 8px;

  color: white;

  background: #1fae57;

  box-shadow:
    0 12px 30px
    rgba(12, 93, 43, .30);

  font-size: .57rem;
  font-weight: 700;

  text-transform: uppercase;

  transition:
    transform var(--transition);
}

.floating-whatsapp:hover {
  transform:
    translateY(-4px);
}

.back-top {
  position: fixed;
  z-index: 70;

  right: 22px;
  bottom: 80px;

  display: grid;

  width: 43px;
  height: 43px;

  place-items: center;

  border:
    1px solid var(--line);

  border-radius: 50%;

  color: var(--text);

  background: var(--surface);

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(8px);

  cursor: pointer;

  transition:
    opacity var(--transition),
    visibility var(--transition),
    transform var(--transition);
}

.back-top.is-visible {
  opacity: 1;
  visibility: visible;

  transform: none;
}

/* =========================================================
   TOAST
========================================================= */

.toast {
  position: fixed;
  z-index: 200;

  left: 50%;
  bottom: 25px;

  display: flex;

  max-width:
    calc(100% - 30px);

  padding:
    13px 17px;

  border:
    1px solid var(--line);

  border-radius: 100px;

  align-items: center;

  gap: 8px;

  color: var(--text);

  background: var(--surface);

  box-shadow: var(--shadow-soft);

  opacity: 0;
  visibility: hidden;

  transform:
    translate(-50%, 15px);

  font-size: .55rem;

  transition:
    opacity var(--transition),
    visibility var(--transition),
    transform var(--transition);
}

.toast i {
  color: #58bc76;
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;

  transform:
    translate(-50%, 0);
}

/* =========================================================
   REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform:
    translateY(20px);
}

.reveal.is-visible {
  opacity: 1;

  transform: none;

  transition:
    opacity .7s ease,
    transform .7s var(--ease);
}

/* =========================================================
   NOTEBOOK
========================================================= */

@media (max-width: 1200px) {

  .header-inner {
    grid-template-columns:
      minmax(190px, 1fr)
      auto
      minmax(190px, 1fr);

    column-gap: 14px;
  }

  .desktop-nav a {
    padding-inline: 10px;

    font-size: .47rem;
  }

  .header-action {
    padding-inline: 10px;

    font-size: .45rem;
  }

}

@media (max-width: 1080px) {

  .content-grid {
    max-width: 850px;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

}

/* =========================================================
   MOBILE HEADER
========================================================= */

@media (max-width: 1060px) {

  .header-inner {
    display: flex;

    min-height: 72px;

    align-items: center;
    justify-content: space-between;
  }

  .desktop-nav,
  .header-actions {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

  .container {
    width:
      min(
        calc(100% - 32px),
        var(--container)
      );
  }

  .section {
    padding:
      82px 0;
  }

  .hero {
    min-height: auto;
  }

  .hero::before {
    display: none;
  }

  .hero-grid {
    display: flex;

    min-height: auto;

    padding:
      130px 0 75px;

    flex-direction: column;
  }

  .hero-content {
    width: 100%;
  }

  .hero-visual {
    width: 100%;
    max-width: 600px;

    min-height: 560px;
  }

  .about-grid,
  .section-heading,
  .journey-grid,
  .contact-panel {
    grid-template-columns: 1fr;
  }

  .about-grid {
    gap: 55px;
  }

  .about-photo {
    width:
      min(
        100%,
        480px
      );

    margin-inline: auto;
  }

  .section-heading {
    gap: 12px;
  }

  .themes-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .journey-copy {
    position: static;
  }

  .contact-panel {
    gap: 40px;

    padding: 35px;
  }

  .content-section
  .section-heading {
    display: block;
  }

  .content-section
  .section-title {
    margin-bottom: 17px;
  }

  .content-grid {
    max-width: 660px;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}

/* =========================================================
   PHONE
========================================================= */

@media (max-width: 620px) {

  .container {
    width:
      min(
        calc(100% - 28px),
        var(--container)
      );
  }

  .header-inner {
    min-height: 68px;
  }

  .site-header.is-scrolled
  .header-inner {
    min-height: 64px;
  }

  .brand {
    gap: 9px;
  }

  .brand-mark,
  .brand-monogram {
    width: 41px;
    height: 41px;
  }

  .brand-name strong {
    font-size: .93rem;
  }

  .brand-name small {
    font-size: .37rem;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
  }

  .menu-toggle__icon {
    font-size: 1.25rem;
  }

  .mobile-nav {
    padding-top: 92px;
  }

  .hero-grid {
    padding-top: 110px;
  }

  .hero-content h1 {
    font-size:
      clamp(
        3.5rem,
        16vw,
        5rem
      );
  }

  .hero-description {
    font-size: .75rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .hero-details {
    gap: 22px;
  }

  .hero-visual {
    min-height: 440px;
  }

  .post--one {
    top: 50px;
    left: 50%;

    width: 240px;
    height: 340px;

    transform:
      translateX(-58%)
      rotate(-2deg);
  }

  .post--two {
    top: 15px;
    right: -10px;

    width: 145px;
    height: 210px;
  }

  .hero-badge {
    right: 0;
    bottom: 10px;
  }

  .scroll-indicator {
    display: none;
  }

  .about-photo__signature {
    right: 10px;
  }

  .purpose-card {
    padding:
      65px 22px;
  }

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

  .theme-card {
    min-height: auto;
  }

  .section-heading > p {
    max-width: 340px;

    font-size: .7rem;
  }

  .content-section {
    padding:
      68px 0 72px;
  }

  .content-section
  .section-title {
    max-width: 340px;

    font-size:
      clamp(
        2.35rem,
        12vw,
        3.25rem
      );
  }

  .content-section
  .section-heading > p {
    font-size: .72rem;
  }

  .content-grid {
    display: flex;

    width: auto;
    max-width: none;

    margin:
      0 -14px;

    padding:
      0 14px 12px;

    overflow-x: auto;

    gap: 10px;

    scroll-snap-type:
      x mandatory;

    scrollbar-width: none;
  }

  .content-grid::-webkit-scrollbar {
    display: none;
  }

  .content-card {
    width: 68vw;
    max-width: 265px;

    flex:
      0 0 68vw;

    scroll-snap-align: start;
  }

  .content-card__image {
    aspect-ratio:
      1 / 1.02;
  }

  .content-card__copy {
    padding: 13px;
  }

  .content-card h3 {
    font-size: 1.02rem;
  }

  .content-cta
  .button {
    width: auto;
  }

  .timeline article {
    grid-template-columns:
      50px 1fr;
  }

  .contact-panel {
    padding: 22px;

    border-radius: 12px;
  }

  .whatsapp-form {
    padding: 19px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .character-counter {
    flex-direction: column;
  }

  .final-cta__card {
    padding:
      60px 22px;
  }

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

  .footer-right {
    text-align: left;
  }

  .footer-right > div {
    justify-content: flex-start;
  }

  .floating-whatsapp {
    width: 49px;
    height: 49px;

    padding: 0;

    justify-content: center;
  }

  .floating-whatsapp span {
    display: none;
  }

  .back-top {
    bottom: 79px;
  }

  .cursor-glow {
    display: none;
  }

}

/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 390px) {

  .brand-name small {
    display: none;
  }

  .hero-content h1 {
    font-size: 3.4rem;
  }

  .content-card {
    width: 72vw;

    flex-basis: 72vw;
  }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;
  }

  .ambient-canvas,
  .cursor-glow {
    display: none;
  }

  .reveal {
    opacity: 1;

    transform: none;
  }

}