/* ==========================================================
   Marcela Freire — site oficial
   Paleta: bege / off-white / neutros
   ========================================================== */

:root {
  --ivory:      #F3EDE4;
  --paper:      #FAF7F2;
  --ink:        #2B2520;
  --ink-soft:   rgba(43, 37, 32, 0.66);
  --ink-faint:  rgba(43, 37, 32, 0.42);
  --taupe:      #A38B73;
  --taupe-dk:   #86705A;
  --sand:       #D9CBB8;
  --line:       rgba(163, 139, 115, 0.38);
  --line-soft:  rgba(163, 139, 115, 0.22);
  --glow:       rgba(163, 139, 115, 0.18);
  --photo-white:#FBF8F3;
  --spark:      #C9A877;

  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --col:  520px;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ── Skip link ─────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 16px; z-index: 1001;
  background: var(--ink); color: var(--paper);
  padding: 8px 16px; border-radius: 0 0 6px 6px;
  font-size: 14px; transition: top 0.1s;
}
.skip-link:focus { top: 0; }

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

/* ── Flash de estúdio ──────────────────────────────────── */
.flash {
  position: fixed; inset: 0; z-index: 1000;
  background: #fff; pointer-events: none;
  animation: flash-out 0.9s cubic-bezier(0.25, 0, 0.8, 1) 0.05s both;
}
@keyframes flash-out {
  0%   { opacity: 1; }
  35%  { opacity: 0.75; }
  100% { opacity: 0; visibility: hidden; }
}

/* ── Partículas flutuantes ─────────────────────────────── */
.particles {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none; overflow: hidden;
}
.p {
  position: absolute; border-radius: 50%;
  background: var(--spark);
  box-shadow: 0 0 6px rgba(201, 168, 119, 0.6);
  opacity: 0; will-change: transform, opacity;
  animation: p-rise var(--d, 9s) ease-in var(--delay, 0s) infinite;
}
@keyframes p-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  12%  { opacity: var(--op, 0.45); }
  78%  { opacity: calc(var(--op, 0.45) * 0.25); }
  100% { transform: translateY(-72vh) scale(0.3); opacity: 0; }
}

/* ── Fundo desfocado fixo (só aparece nas laterais no desktop) ─ */
.bg-fixed {
  position: fixed; inset: -60px; z-index: 0;
  background: url('../img/bg.webp') center 22% / cover no-repeat;
  filter: blur(40px) saturate(0.85) brightness(1.08);
  transform: scale(1.18);
  pointer-events: none;
}

/* ── Coluna central ────────────────────────────────────── */
.page {
  position: relative; z-index: 1;
  max-width: var(--col);
  margin: 0 auto;
  box-shadow: 0 0 90px rgba(70, 50, 30, 0.22);
}

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: min(92dvh, 780px);
  min-height: 520px;
  overflow: hidden;
  background: var(--sand);
}
.hero-media {
  position: absolute; left: 0; right: 0; top: -50px; bottom: 0;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  animation: kenburns 2.8s var(--ease) 0.1s both;
}
@keyframes kenburns {
  from { transform: scale(1.14); }
  to   { transform: scale(1.02); }
}
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 85% 90% at 50% 38%, transparent 40%, rgba(43, 30, 20, 0.22) 100%),
    linear-gradient(to bottom,
      rgba(43, 30, 20, 0.22) 0%,
      transparent 20%,
      transparent 48%,
      rgba(43, 30, 20, 0.40) 78%,
      rgba(43, 30, 20, 0.62) 100%);
}
.hero-logo {
  position: absolute; top: 20px; left: 50%; margin-left: -42px; z-index: 3;
  width: 84px; height: auto; pointer-events: none;
  filter: brightness(0) invert(1) drop-shadow(0 1px 10px rgba(30, 20, 10, 0.4));
  animation: rise 1s var(--ease) 0.7s both;
}
.hero-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 24px 58px;
  text-align: center;
  color: var(--photo-white);
}
.hero-rule {
  width: 32px; height: 1px; background: var(--photo-white);
  opacity: 0.85; margin-bottom: 20px;
  transform-origin: center;
  animation: rule-in 0.9s var(--ease) 0.7s both;
}
@keyframes rule-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 0.85; } }

.hero-eyebrow {
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(251, 248, 243, 0.92);
  margin-bottom: 14px;
  animation: rise 1s var(--ease) 0.85s both;
}
.hero-name {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 5.4rem);
  line-height: 0.95; letter-spacing: -0.015em;
  margin-bottom: 16px;
  text-shadow: 0 2px 30px rgba(30, 20, 10, 0.35);
  animation: rise 1.1s var(--ease) 1s both;
}
.hero-tagline {
  font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(251, 248, 243, 0.78);
  animation: rise 1s var(--ease) 1.2s both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Main ──────────────────────────────────────────────── */
main {
  position: relative; z-index: 1;
  background: var(--ivory);
  padding-bottom: 8px;
}

/* ── Retrato sobreposto ────────────────────────────────── */
.portrait-wrap {
  position: relative; z-index: 5;
  display: flex; justify-content: center;
  margin-top: -24px; margin-bottom: 22px;
}
.portrait-holder { position: relative; width: 168px; height: 168px; }
.portrait {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  background: var(--sand);
  box-shadow:
    0 0 0 3px var(--ivory),
    0 0 0 4px var(--taupe),
    0 18px 44px rgba(60, 40, 20, 0.35),
    0 0 60px rgba(163, 139, 115, 0.3);
  animation: portrait-in 1s var(--ease) 1.1s both;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.portrait::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(43, 30, 20, 0.18); pointer-events: none;
}
@keyframes portrait-in {
  from { opacity: 0; transform: translateY(20px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.portrait-ring {
  position: absolute; top: 50%; left: 50%;
  width: 200px; height: 200px; margin: -100px 0 0 -100px;
  border: 1px solid var(--taupe); border-radius: 50%;
  opacity: 0; pointer-events: none;
  animation: portrait-pulse 3.6s ease-out 2.4s infinite;
}
@keyframes portrait-pulse {
  0%   { opacity: 0;    transform: scale(0.86); }
  35%  { opacity: 0.55; }
  100% { opacity: 0;    transform: scale(1.22); }
}

/* ── Handle ────────────────────────────────────────────── */
.profile-handle {
  position: relative; z-index: 5; display: block;
  text-align: center; margin: 0 auto 22px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--taupe-dk);
  transition: color 0.25s;
  animation: rise 0.9s var(--ease) 1.5s both;
}
.profile-handle .at { color: var(--taupe); margin-right: 1px; }
.profile-handle:hover { color: var(--ink); }

/* ── Banners ───────────────────────────────────────────── */
.links-wrap { max-width: 460px; margin: 0 auto; padding: 8px 16px 0; }
.links { display: flex; flex-direction: column; gap: 12px; }

.banner {
  position: relative; display: block;
  width: 100%; height: 132px;
  border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--sand);
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 30px rgba(70, 50, 30, 0.14);
  will-change: transform;
  transition: transform 0.5s var(--ease), box-shadow 0.4s ease;
}
.banner:active { transform: scale(0.982) !important; }

.banner-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
  transition: transform 0.8s var(--ease);
}
.banner:hover .banner-bg { transform: scale(1.06); }

.banner-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(36, 26, 18, 0.80) 0%, rgba(36, 26, 18, 0.55) 38%, rgba(36, 26, 18, 0.06) 68%, transparent 100%),
    linear-gradient(to top, rgba(36, 26, 18, 0.62) 0%, rgba(36, 26, 18, 0.20) 55%, transparent 100%);
}
.banner-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 22px 20px;
  color: var(--photo-white);
}
.banner-eyebrow {
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--sand); margin-bottom: 6px;
}
.banner-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.55rem; line-height: 1.05; letter-spacing: -0.005em;
}
.banner-wa::after {
  content: ''; position: absolute; top: 20px; bottom: 20px; left: 0;
  width: 3px; background: var(--sand);
  border-radius: 0 2px 2px 0; z-index: 3;
}
.banner-arrow {
  position: absolute; right: 20px; bottom: 20px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(251, 248, 243, 0.5);
  color: var(--photo-white);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.banner:hover .banner-arrow {
  border-color: var(--photo-white);
  background: rgba(251, 248, 243, 0.16);
  transform: translate(2px, -2px);
}
/* Shimmer */
@keyframes shimmer {
  0%   { transform: translateX(-120%) skewX(-14deg); }
  100% { transform: translateX(360%)  skewX(-14deg); }
}
.banner-wa .banner-overlay::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(251, 248, 243, 0.22), transparent);
  animation: shimmer 4.5s ease-in-out 2.6s infinite;
}

/* ── Rótulo de seção ───────────────────────────────────── */
.section-label {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0 auto 22px; max-width: 300px;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--taupe-dk);
}
.section-label::before, .section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ── Sobre ─────────────────────────────────────────────── */
.about { margin-top: 44px; padding: 0 16px; }
.about-text { max-width: 420px; margin: 0 auto; padding: 0 12px; text-align: center; }
.about-text p {
  font-size: 0.9rem; line-height: 1.8; font-weight: 300;
  letter-spacing: 0.01em; color: var(--ink-soft);
}
.about-text p + p { margin-top: 14px; }
.about-text em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1rem; color: var(--taupe-dk);
}
.about-more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--ease), margin 0.7s var(--ease);
  margin-top: 0;
}
.about-more-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.6s ease; }
.about-more.is-open { grid-template-rows: 1fr; margin-top: 14px; }
.about-more.is-open .about-more-inner { opacity: 1; transition-delay: 0.1s; }

.about-toggle {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  padding: 8px 14px;
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--taupe-dk);
  transition: color 0.2s;
}
.about-toggle:hover { color: var(--ink); }
.about-toggle svg { transition: transform 0.5s var(--ease); }
.about-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.differential {
  max-width: 380px; margin: 28px auto 0; padding: 28px 26px 22px;
  position: relative; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.22rem; line-height: 1.4; color: var(--ink);
  border: 0;
}
.differential::before,
.differential::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(
    to right,
    var(--line) 0%,
    var(--line) calc(50% - 22px),
    transparent calc(50% - 22px),
    transparent calc(50% + 22px),
    var(--line) calc(50% + 22px),
    var(--line) 100%
  );
}
.differential::before { top: 0; }
.differential::after  { bottom: 0; background: var(--line); }
.differential-mark {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -48%);
  padding: 0;
  font-size: 2.4rem; line-height: 1; color: var(--taupe);
  background: none;
}

/* ── Serviços ──────────────────────────────────────────── */
.services { margin-top: 52px; padding: 0 16px; }
.services-grid { max-width: 460px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.service {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: 12px; overflow: hidden; background: var(--sand);
  box-shadow: 0 10px 26px rgba(70, 50, 30, 0.14);
}
.service img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.9s var(--ease);
}
.service:hover img { transform: scale(1.07); }
.service::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(36, 26, 18, 0.70) 0%, rgba(36, 26, 18, 0.12) 46%, transparent 70%);
}
.service figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; color: var(--photo-white);
}
.service-num { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.3em; color: var(--sand); }
.service-name { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.1; }

/* ── Portfólio ─────────────────────────────────────────── */
.portfolio { margin-top: 52px; }
.gallery {
  max-width: 460px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: 1.12fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 8px; height: 360px;
}
.gallery-item {
  position: relative; border-radius: 10px; overflow: hidden;
  background: var(--sand); box-shadow: 0 8px 22px rgba(70, 50, 30, 0.12);
  transition: transform 0.5s var(--ease);
}
.gallery-item:hover { transform: translateY(-2px); }
.gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-main { grid-row: 1 / 3; }

.strip {
  display: flex; gap: 10px; margin-top: 10px;
  padding: 4px 16px 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.strip::-webkit-scrollbar { display: none; }
.strip.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.strip img {
  flex: 0 0 auto; width: 158px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 10px; scroll-snap-align: start;
  background: var(--sand); box-shadow: 0 8px 20px rgba(70, 50, 30, 0.14);
  user-select: none;
}

/* ── Marcas (marquee) ──────────────────────────────────── */
.brands-section {
  margin: 44px 0 0; padding: 28px 0 0; text-align: center;
  border-top: 1px solid var(--line-soft);
}
.brands-label {
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--taupe-dk); margin-bottom: 20px;
}
.brands-marquee {
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.brands-track {
  display: flex; align-items: center; gap: 44px;
  width: max-content; height: 38px;
  padding-right: 44px;
  animation: brands-scroll 48s linear infinite;
}
.brands-track:hover { animation-play-state: paused; }
@keyframes brands-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bwordmark {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 38px; line-height: 1;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); opacity: 0.62; white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: opacity 0.3s, color 0.3s, border-color 0.3s;
}
.bwordmark:hover { opacity: 1; color: var(--taupe-dk); border-bottom-color: var(--taupe); }
.bwordmark.serif { font-family: var(--serif); font-weight: 500; font-style: italic; letter-spacing: 0.03em; font-size: 1.25rem; text-transform: none; }
.bwordmark.thin  { font-weight: 300; letter-spacing: 0.26em; font-size: 0.88rem; }
.bwordmark.bold  { font-weight: 700; letter-spacing: 0.08em; font-size: 1rem; }

/* ── Agências ──────────────────────────────────────────── */
.agencies { max-width: 460px; margin: 34px auto 0; padding: 0 20px; text-align: center; }
.agency-group + .agency-group { margin-top: 26px; }
.agency-label {
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
  padding: 8px 14px; border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.25s;
}
.chip:hover { border-color: var(--taupe-dk); color: var(--ink); background: var(--glow); transform: translateY(-2px); }
.chip-main { color: var(--ink); border-color: var(--taupe); background: rgba(250, 247, 242, 0.7); }

/* ── Contato ───────────────────────────────────────────── */
.contact { margin-top: 52px; padding: 0 16px; }
.contact-card {
  max-width: 460px; margin: 0 auto; padding: 38px 26px 34px;
  text-align: center; border-radius: 16px;
  background: linear-gradient(160deg, rgba(250, 247, 242, 0.95), rgba(231, 219, 202, 0.85));
  border: 1px solid var(--line-soft);
  box-shadow: 0 16px 44px rgba(70, 50, 30, 0.14);
}
.contact-eyebrow {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--taupe-dk); margin-bottom: 12px;
}
.contact-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 2rem; line-height: 1.1; margin-bottom: 14px;
}
.contact-text {
  max-width: 320px; margin: 0 auto 24px;
  font-size: 0.86rem; line-height: 1.75; color: var(--ink-soft);
}
.btn-wa {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px; border-radius: 100px;
  background: var(--ink); color: var(--paper);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(43, 37, 32, 0.28);
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease, background 0.3s;
}
.btn-wa::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(251, 248, 243, 0.25), transparent);
  animation: shimmer 4.5s ease-in-out 1.5s infinite;
  pointer-events: none;
}
.btn-wa:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(43, 37, 32, 0.34); background: #1c1814; }
.btn-wa:active { transform: scale(0.97); }

/* ── Redes sociais ─────────────────────────────────────── */
.social { max-width: 460px; margin: 34px auto 0; padding: 0 24px; display: flex; justify-content: center; gap: 14px; }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--taupe-dk);
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.3s var(--ease);
}
.social-link:hover { border-color: var(--taupe-dk); color: var(--ink); background: var(--glow); transform: translateY(-3px); }

/* ── Rodapé ────────────────────────────────────────────── */
.footer { text-align: center; padding: 34px 20px 48px; }
.footer-logo { width: 84px; height: auto; margin: 0 auto 14px; opacity: 0.92; }
.footer p { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; color: var(--ink-faint); }

/* ── Revelar ao rolar ──────────────────────────────────── */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── Telas pequenas ────────────────────────────────────── */
@media (max-width: 380px) {
  .hero-name { font-size: 3rem; }
  .banner-title { font-size: 1.35rem; }
  .banner { height: 120px; }
  .gallery { height: 320px; }
  .strip img { width: 140px; }
}

/* ── Desktop ───────────────────────────────────────────── */
@media (min-width: 700px) {
  .hero { height: min(92dvh, 780px); }
}

/* ── Movimento reduzido ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flash, .particles, .portrait-ring, .banner-wa .banner-overlay::after, .btn-wa::after { display: none; }
  .hero-img, .hero-rule, .hero-eyebrow, .hero-name, .hero-tagline,
  .portrait, .profile-handle, .hero-logo { animation: none; }
  .brands-track { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}