/* =================================================================
   BRAND INNATUS - BRAND (CHI SIAMO) PAGE
   Misure dal frame Figma "Innatus - Brand" (1440 x 3852).
   NB: tutti i selettori che dichiarano un font sono scritti con almeno
   due classi, perche' "body.innatus-page main *" di base/typography.css
   vale (0,1,2) e batterebbe i selettori a classe singola.
================================================================== */

.innatus-brand-page {
  /* Texture carta sul body, come in pages/contacts.css */
  background-color: #EBE2D8;
  background-image: url("../../img/Texturelabs_Paper_241XL 1.webp");
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  color: var(--innatus-text);

  --brand-rule: rgba(0, 0, 0, 0.5);
  --brand-gold: #CF933D;
  --brand-green: #3C4534;
  --brand-ink: #010101;
  --brand-muted: #4A494A;
  --brand-stone: #5C5A54;
  --brand-veil: rgba(255, 255, 255, 0.5);
}

.innatus-brand-main {
  padding-top: 132px;
  background: transparent; /* la texture arriva dal body */
  overflow-x: clip;
}

/* ---- Filetti di sezione a tutta schermata (Vector 130/129/131) ---- */
.innatus-brand-sep {
  position: relative;
}

.innatus-brand-sep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 0;
  transform: translateX(-50%);
  border-top: 1px solid var(--brand-rule);
  pointer-events: none;
}

/* ---- Eyebrow di sezione: Helvetica 700 16/18 ---- */
.innatus-brand-page .innatus-brand-eyebrow {
  margin: 0;
  font-family: var(--font-helvetica);
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.innatus-brand-eyebrow--center {
  display: block;
  text-align: center;
}

/* "I NOSTRI VALORI" e' verde, non oro */
.innatus-brand-page .innatus-brand-eyebrow--green {
  color: var(--brand-green);
}

/* ---- Pulsanti ---- */
/* Figma "Rectangle 757" + "SCARICA IL CATALOGO": 296x50, spigoli vivi, bordo 1px
   verde, PingFang 600 18/25; 75px sotto l'ultimo paragrafo */
.innatus-brand-page .innatus-brand-outline-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 296px;
  max-width: 100%;
  height: 50px;
  margin-top: clamp(40px, 5.2vw, 75px);
  padding: 0 20px;
  border: 1px solid var(--brand-green);
  border-radius: 0;
  color: var(--brand-green);
  background: transparent;
  font-family: var(--font-pingfang);
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.innatus-brand-outline-btn:hover,
.innatus-brand-outline-btn:focus-visible {
  background: var(--brand-green);
  color: #FFFFFF;
}

/* Figma: 232x56, raggio 100px, label Poppins 16/24 bianca */
.innatus-brand-page .innatus-brand-filled-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 232px;
  max-width: 100%;
  height: 56px;
  margin-top: 30px;
  padding: 0 24px;
  border: none;
  border-radius: 100px;
  color: #FFFFFF;
  background: #571A29;
  font-family: 'Poppins', var(--font-helvetica);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  transition: background 0.25s ease;
}

.innatus-brand-filled-btn:hover,
.innatus-brand-filled-btn:focus-visible {
  background: #3E121D;
}

.innatus-brand-outline-btn:focus-visible,
.innatus-brand-filled-btn:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 3px;
}

/* ---- Hero "Chi siamo" ---- */
/* Figma: filetto di chiusura 122px sotto la foto (1037 vs 915) */
.innatus-brand-hero {
  width: min(1330px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 8.5vw, 122px);
}

/* Colonna sinistra: testo (riga 1) e blocco logo + racconto (riga 2).
   Colonna destra: la foto occupa entrambe le righe (Figma 278 -> 915). */
.innatus-brand-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 543px);
  grid-template-areas:
    "copy   media"
    "origin media";
  grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 5vw, 64px);
}

.innatus-brand-hero-copy {
  grid-area: copy;
}

/* Eyebrow della hero: LEMON MILK 24/32 oro (layer "CHI SIAMO") */
.innatus-brand-page .innatus-brand-hero-copy .innatus-brand-eyebrow {
  font-family: 'LEMON MILK', 'League Spartan', sans-serif;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 32px;
  font-feature-settings: 'liga' off;
  color: var(--brand-gold);
}

/* Helvetica 700 36/41, letter-spacing 0.05em, verde, maiuscolo */
.innatus-brand-page .innatus-brand-hero-copy h1 {
  max-width: 603px;
  margin: 37px 0 0;
  text-transform: uppercase;
  font-family: var(--font-helvetica);
  font-weight: 700;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 41px;
  letter-spacing: 0.05em;
  color: var(--brand-green);
}

/* Roboto 400 32/38 nero */
.innatus-brand-page .innatus-brand-hero-text {
  max-width: 631px;
  margin: 32px 0 0;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(19px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 38px;
  color: #000000;
}

/* image 46: 543x637, raggio 18px; parte ~38px sotto l'eyebrow "CHI SIAMO" */
.innatus-brand-hero-media {
  grid-area: media;
  position: relative;
  align-self: start;
  margin-top: 38px;
  aspect-ratio: 543 / 637;
  border-radius: 18px;
  overflow: hidden;
}

.innatus-brand-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Blocco origine: logo ruotato + racconto ---- */
/* Nella colonna sinistra sotto il testo; il fondo di "INSIEME CI RIUSCIREMO."
   e' allineato al fondo della foto. Logo a ~13px dal bordo, testo 72px dopo. */
.innatus-brand-origin {
  grid-area: origin;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  align-self: end;
  gap: clamp(24px, 5vw, 72px);
  margin-top: 40px;
}

/* Logo ruotato: il contenitore ha le misure del logo gia' girato (145x320),
   cosi' il layout non usa quelle orizzontali dell'immagine */
.innatus-brand-origin-lockup {
  position: relative;
  flex-shrink: 0;
  width: 145px;
  height: 320px;
  margin-left: 13px;
}

.innatus-brand-origin-lockup img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: auto;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.innatus-brand-origin-copy {
  max-width: 439px;
}

/* Roboto 400 17.5/25, letter-spacing 0.005em; una riga vuota tra i paragrafi */
.innatus-brand-page .innatus-brand-origin-copy p {
  margin: 0 0 25px;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(15px, 1.25vw, 17.5px);
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.005em;
  color: #000000;
}

/* Helvetica 700 33/38, letter-spacing 0.05em, #5C5A54, su una riga */
.innatus-brand-page .innatus-brand-origin-copy h2 {
  max-width: none;
  margin: 17px 0 0;
  white-space: nowrap;
  font-family: var(--font-helvetica);
  font-weight: 700;
  font-size: clamp(22px, 2.3vw, 33px);
  line-height: 38px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-stone);
}

/* ---- La nostra filosofia: foto a sinistra a filo, testo a destra ---- */
.innatus-brand-philosophy {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 39.4vw, 568px);
  padding: clamp(40px, 5vw, 60px) 0;
  overflow: hidden;
  /* Rectangle 833: velo bianco al 50% su tutta la fascia */
  background: var(--brand-veil);
}

/* La foto occupa il 45.3% sinistro (653 su 1440) ed e' specchiata */
.innatus-brand-philosophy-media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45.35%;
  z-index: 0;
  border-radius: 0;
  overflow: hidden;
}

.innatus-brand-philosophy-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.innatus-brand-philosophy-copy {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 5.8vw, 83px) 0 clamp(20px, 48.96vw, 705px);
}

/* Figma: LEMON MILK 700 24/32 verde, maiuscolo, 18px sotto l'eyebrow */
.innatus-brand-page .innatus-brand-philosophy-copy h2 {
  max-width: 652px;
  margin: 18px 0 0;
  font-family: 'LEMON MILK', 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 32px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--brand-green);
}

/* Figma: Helvetica 400 17.25, larghezza 652; 45px sotto il titolo, 10px tra i
   primi due paragrafi e una riga vuota prima dell'ultimo.
   :not() esclude l'eyebrow "LA NOSTRA FILOSOFIA", anch'esso un <p>, che
   altrimenti prenderebbe questo stile (nero, peso 400) invece del suo. */
.innatus-brand-page .innatus-brand-philosophy-copy p:not(.innatus-brand-eyebrow) {
  max-width: 652px;
  margin: 10px 0 0;
  font-family: var(--font-helvetica);
  font-size: clamp(14px, 1.2vw, 17.25px);
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.005em;
  color: var(--brand-ink);
}

.innatus-brand-page .innatus-brand-philosophy-copy h2 + p:not(.innatus-brand-eyebrow) {
  margin-top: 45px;
}

/* Riga vuota prima del terzo paragrafo ("Prendersi cura...") */
.innatus-brand-page .innatus-brand-philosophy-copy h2 + p + p + p:not(.innatus-brand-eyebrow) {
  margin-top: 25px;
}

/* ---- I nostri valori ---- */
.innatus-brand-values {
  width: min(1332px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(44px, 5vw, 60px) 0 clamp(50px, 6vw, 78px);
  text-align: center;
}

/* Vector 116: filetto corto da 83px */
.innatus-brand-values-divider {
  display: block;
  width: 83px;
  height: 0;
  margin: 22px auto 0;
  background: none;
  border-top: 1px solid #000000;
}

.innatus-brand-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  margin-top: clamp(36px, 5vw, 58px);
}

.innatus-brand-value {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* Vector 123/132/133: filetti verticali da 241px tra le colonne */
.innatus-brand-value + .innatus-brand-value::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  height: 241px;
  width: 0;
  transform: translateY(-50%);
  border-left: 1px solid #000000;
  background: none;
}

/* Riquadro 100x100, bordo 2px #464747, raggio 0 25px */
.innatus-brand-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin: 0 0 41px;
  border: 2px solid #464747;
  border-radius: 0 25px;
  color: #464747;
}

/* img/Brand-*icon.svg alla loro misura nativa (da 47x59 a 76x46),
   ridotte in proporzione se il riquadro e' piu' piccolo (mobile) */
.innatus-brand-value-icon img {
  display: block;
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 78%;
}

.innatus-brand-page .innatus-brand-value h3 {
  max-width: 279px;
  margin: 0 0 9px;
  font-family: var(--font-helvetica);
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--brand-ink);
}

.innatus-brand-page .innatus-brand-value p {
  max-width: 288px;
  margin: 0;
  font-family: var(--font-helvetica);
  font-size: clamp(14px, 1.2vw, 17.25px);
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.005em;
  color: var(--brand-muted);
}

/* ---- Il nostro impegno: testo a sinistra, foto a filo destro ---- */
/* Figma: testo a 115px dal bordo, foto 815x480 da x=654 fino al bordo destro,
   in alto allineata al titolo; 84px sopra l'eyebrow, 67px sotto la foto */
.innatus-brand-commitment {
  display: grid;
  grid-template-columns: minmax(0, 539fr) minmax(0, 815fr);
  align-items: start;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: clamp(48px, 5.8vw, 84px) 0 clamp(40px, 4.65vw, 67px) clamp(20px, 8vw, 115px);
  /* Rectangle 631: velo bianco al 50% */
  background: var(--brand-veil);
}

.innatus-brand-commitment-copy {
  max-width: 652px;
  padding-right: clamp(20px, 2.8vw, 40px);
}

/* Figma: LEMON MILK 700 24/32 verde, maiuscolo, 17px sotto l'eyebrow */
.innatus-brand-page .innatus-brand-commitment-copy h2 {
  margin: 17px 0 0;
  font-family: 'LEMON MILK', 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: clamp(25px, 1.9vw, 30px);
  line-height: 32px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--brand-green);
}

/* Figma: Helvetica 400 17.25/25; 56px sotto il titolo, 14px tra i paragrafi.
   :not() esclude l'eyebrow "IL NOSTRO IMPEGNO", anch'esso un <p> */
.innatus-brand-page .innatus-brand-commitment-copy p:not(.innatus-brand-eyebrow) {
  margin: 14px 0 0;
  font-family: var(--font-helvetica);
  font-size: clamp(14px, 1.2vw, 17.25px);
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.005em;
  color: var(--brand-ink);
}

.innatus-brand-page .innatus-brand-commitment-copy h2 + p:not(.innatus-brand-eyebrow) {
  margin-top: 56px;
}

/* "SCOPRI LE NOSTRE LINEE": nel mockup in maiuscolo, 40px sotto il testo */
.innatus-brand-page .innatus-brand-commitment-copy .innatus-brand-filled-btn {
  margin-top: 40px;
  font-size: 14px;
  text-transform: uppercase;
}

/* DSC01443: 815x480, esce dal bordo destro del frame.
   Allineata in alto al titolo: sotto eyebrow (18px) + 17px di stacco */
.innatus-brand-commitment-media {
  margin-top: 35px;
  position: relative;
  aspect-ratio: 815 / 480;
  border-radius: 0;
  overflow: hidden;
}

.innatus-brand-commitment-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Fascia di chiusura: 279px, #EAE7E2 ---- */
.innatus-brand-quote {
  position: relative;
  padding: 75px 24px 55px;
  background: #EAE7E2;
  text-align: center;
  /* niente overflow: hidden, il rametto sale sulla sezione sopra */
}

/* Figma "pianta" (Group 95, specchiato): img/Leaf-1.png a sinistra, sale di
   ~130px sopra la fascia e finisce sul suo bordo inferiore */
.innatus-brand-quote-leaf {
  position: absolute;
  left: clamp(-100px, -0.8vw, -50px);
  bottom: -100px;
  width: auto;
  height: clamp(430px, 32.5vw, 550px);
  transform: scaleX(-1);
  pointer-events: none;
}

/* Il rametto sborda sotto la fascia (bottom negativo): il footer gli sta sopra */
.innatus-brand-page .site-footer {
  position: relative;
  z-index: 2;
}

/* Lora 400 36/46, verde, non corsivo */
.innatus-brand-page .innatus-brand-quote-text {
  position: relative;
  z-index: 1;
  max-width: 1171px;
  margin: 0 auto;
  font-family: 'Lora', serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 46px;
  color: var(--brand-green);
}

/* Helvetica 700 16/18, verde */
.innatus-brand-page .innatus-brand-quote-caption {
  position: relative;
  z-index: 1;
  margin: 38px 0 0;
  font-family: var(--font-helvetica);
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--brand-green);
}

/* ---- Reveal on scroll ---- */
.innatus-brand-page .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.innatus-brand-page .reveal.from-left {
  transform: translateX(-48px);
}

.innatus-brand-page .reveal.from-right {
  transform: translateX(48px);
}

.innatus-brand-page .reveal.from-bottom {
  transform: translateY(40px);
}

.innatus-brand-page .reveal.active {
  opacity: 1;
  transform: translate(0, 0);
}

/* =================================================================
   RESPONSIVE - BRAND
   Scala: 1100 / 900 / 700 / 560 / 400 (vedi base/responsive.css).
================================================================== */

/* =================================================================
   RESPONSIVE
   Tutte le media query del file, raggruppate per soglia e in ordine
   decrescente. Dentro ogni blocco le regole sono nell'ordine in cui
   comparivano prima, cosi' la cascata resta identica.
================================================================== */

@media (max-width: 1100px) {
  /* ---- Tablet landscape ----
  La hero passa a colonna unica: la foto da 543px e la colonna di testo
  non ci stanno piu' affiancate senza spezzare il titolo. */
  .innatus-brand-main {
    padding-top: 110px;
  }

  .innatus-brand-hero,
  .innatus-brand-values {
    width: min(1330px, calc(100% - var(--inn-gutter) * 2));
  }

  .innatus-brand-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "copy"
      "origin";
    grid-template-rows: auto;
  }

  .innatus-brand-hero-media {
    margin-top: 0;
    margin-bottom: 28px;
    aspect-ratio: 16 / 9;
  }

  .innatus-brand-page .innatus-brand-origin-copy h2 {
    white-space: normal;
  }

  /* A capo del Figma solo su desktop */
  .innatus-brand-desktop-br {
    display: none;
  }

  .innatus-brand-page .innatus-brand-hero-copy h1,
  .innatus-brand-page .innatus-brand-hero-text {
    max-width: 100%;
  }

  .innatus-brand-page .innatus-brand-hero-copy h1 {
    line-height: 1.2;
  }

  .innatus-brand-page .innatus-brand-hero-text {
    line-height: 1.35;
  }

  .innatus-brand-origin {
    grid-template-columns: 1fr;
  }

  .innatus-brand-origin-lockup {
    display: none;
  }

  .innatus-brand-origin-copy {
    max-width: 100%;
  }

  /* La foto passa da meta' sinistra a fondo della fascia */
  .innatus-brand-philosophy-media {
    width: 100%;
  }

  .innatus-brand-philosophy-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.78);
  }

  .innatus-brand-philosophy-copy {
    padding: 0 var(--inn-gutter);
  }

  .innatus-brand-commitment {
    grid-template-columns: 1fr;
    padding-right: var(--inn-gutter);
    padding-left: var(--inn-gutter);
  }

  .innatus-brand-commitment-media {
    order: -1;
    margin-top: 0;
    margin-bottom: 28px;
  }

  .innatus-brand-values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
  }

  .innatus-brand-value:nth-child(3)::before {
    display: none;
  }

  .innatus-brand-value + .innatus-brand-value::before {
    height: 180px;
  }
}

@media (max-width: 900px) {
  /* ---- Tablet portrait ----
  La fascia "filosofia" ha la foto a fondo e il testo sopra: serve piu'
  respiro verticale perche' i tre paragrafi non tocchino i bordi. */
  .innatus-brand-philosophy {
    min-height: 0;
    padding: clamp(40px, 6vw, 60px) 0;
  }

  .innatus-brand-commitment {
    padding-top: clamp(40px, 6vw, 60px);
  }

  .innatus-brand-values-grid {
    gap: 36px 40px;
  }

  .innatus-brand-value + .innatus-brand-value::before {
    left: -20px;
    height: 150px;
  }
}

@media (max-width: 700px) {
  /* ---- Mobile large ---- */
  .innatus-brand-main {
    padding-top: 88px;
  }

  /* Rametto piu' piccolo e trasparente: non deve coprire la citazione */
  .innatus-brand-quote-leaf {
    height: 200px;
    opacity: 0.5;
  }

  .innatus-brand-values-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .innatus-brand-value + .innatus-brand-value::before {
    display: none;
  }

  .innatus-brand-page .innatus-brand-quote-text {
    font-size: clamp(20px, 5.4vw, 26px);
    line-height: 1.35;
  }

  /* CTA a tutta larghezza e alte quanto l'area di tocco */
  .innatus-brand-page .innatus-brand-filled-btn,
  .innatus-brand-page .innatus-brand-outline-btn {
    width: 100%;
    min-height: var(--inn-tap);
  }

  /* Il titolo della hero e' in maiuscolo con interlinea fissa a 41px:
     su schermo stretto va a capo tre volte e si sgrana. */
  .innatus-brand-page .innatus-brand-hero-copy h1 {
    font-size: clamp(22px, 5.8vw, 28px);
    line-height: 1.22;
  }

  .innatus-brand-page .innatus-brand-hero-text {
    font-size: clamp(16px, 4.4vw, 20px);
    line-height: 1.4;
  }

  .innatus-brand-page .innatus-brand-commitment-copy h2,
  .innatus-brand-page .innatus-brand-philosophy-copy h2 {
    font-size: clamp(20px, 5.2vw, 25px);
    line-height: 1.25;
  }

  /* Il distacco fra titolo e primo paragrafo era di 45-56px da Figma:
     su mobile diventa un buco. */
  .innatus-brand-page .innatus-brand-philosophy-copy h2 + p:not(.innatus-brand-eyebrow),
  .innatus-brand-page .innatus-brand-commitment-copy h2 + p:not(.innatus-brand-eyebrow) {
    margin-top: 20px;
  }

  .innatus-brand-hero-media {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  /* ---- Mobile standard ---- */
  .innatus-brand-value-icon {
    width: 82px;
    height: 82px;
    margin-bottom: 28px;
  }

  .innatus-brand-quote {
    padding: 56px var(--inn-gutter) 44px;
  }
}

@media (max-width: 400px) {
  /* ---- Mobile small ---- */
  .innatus-brand-main {
    padding-top: 78px;
  }

  .innatus-brand-quote-leaf {
    height: 160px;
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .innatus-brand-page .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .innatus-brand-outline-btn,
  .innatus-brand-filled-btn {
    transition: none !important;
  }
}