/* ==========================================================================
   Yasmin Shuminov - Nails Academy
   Design tokens
   ========================================================================== */

:root {
  /* Brand palette */
  --color-rose: #c3ada3;
  --color-cream-peach: #ffe8c2;
  --color-taupe: #b69e84;
  --color-white: #fefeff;
  --color-butter: #fff9e1;
  --color-text: #4a3b34;
  --color-text-soft: #6f5f57;

  /* Fonts */
  --font-display: 'Heebo', sans-serif;
  --font-body: 'Heebo', sans-serif;
  --font-script: 'Allura', cursive;
  --font-luxury: 'Marcellus', serif;
  --font-script-he: 'Gveret Levin', cursive;

  /* Layout */
  --header-height: 84px;
  --container-width: 1200px;
  --transition-fast: 0.25s ease;
  --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  /* Scroll-animation system (see "Scroll animation system" at the end of the
     file). Two ease-out curves only - no bounce, no overshoot. */
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);        /* general reveals */
  --anim-ease-wipe: cubic-bezier(0.16, 1, 0.3, 1);    /* top-to-bottom wipes */
  --anim-duration: 1.15s;
  --anim-duration-card: 1.25s;
  --anim-duration-image: 1.5s;
  --anim-stagger: 120ms;
  --anim-shift: 34px;        /* text / form travel */
  --anim-shift-btn: 30px;    /* button travel */
  --anim-shift-image: 56px;  /* image travel */

  /* Hover refinements - same endpoints as before, softer curve */
  --hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hover-lift: 0.45s var(--hover-ease);
  --hover-color: 0.3s ease;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  overflow-x: hidden;
  min-height: 100%;
}

/* Safety net only - the real breakout/min-width fixes are further down.
   `clip` rather than `hidden` on purpose: `overflow-x: hidden` here would
   make body compute `overflow-y: auto`, turning body into its own scroll
   container and breaking the `window.scrollY` reads in main.js (sticky
   header + scroll indicator). `overflow-x: clip` never creates a scroll
   container, so it guards the axis without that side effect. */
body {
  overflow-x: clip;
  position: relative;
  min-height: 100%;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('../assets/images/bckgrn010.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
  pointer-events: none;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--hover-lift), box-shadow var(--hover-lift),
              background var(--hover-color), color var(--hover-color);
}

.btn-primary {
  background: var(--color-text);
  color: var(--color-white);
  box-shadow: 0 8px 24px -8px rgba(74, 59, 52, 0.45);
}

.btn-primary:hover {
  background: var(--color-taupe);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(74, 59, 52, 0.5);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-taupe);
}

.btn-outline:hover {
  background: var(--color-taupe);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: var(--color-rose);
  color: var(--color-text);
  padding: 10px 20px;
  font-size: 0.9rem;
}

.btn-whatsapp:hover {
  background: var(--color-taupe);
  color: var(--color-white);
}

.icon-whatsapp {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  background: transparent;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), height var(--transition-fast);
}

.site-header.scrolled {
  background: rgba(254, 254, 255, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px -8px rgba(74, 59, 52, 0.15);
  height: 72px;
}

.header-inner {
  max-width: var(--container-width);
  height: 100%;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  position: relative;
  padding-bottom: 4px;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 1.5px;
  background: var(--color-taupe);
  transition: width var(--transition-fast);
}

.main-nav a:hover::after {
  width: 100%;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  background: linear-gradient(180deg, rgba(255, 249, 225, 0.25) 0%, rgba(254, 254, 255, 0.35) 55%);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  inset-inline-start: -15%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(circle, var(--color-cream-peach) 0%, rgba(255, 232, 194, 0) 70%);
  opacity: 0.7;
  z-index: 0;
}

.hero-inner {
  --hero-gap: 48px;
  --hero-pad: 24px;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding: 48px var(--hero-pad) 80px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  row-gap: 0;
  column-gap: var(--hero-gap);
}

.hero-content {
  order: 3;
  text-align: center;
  max-width: 640px;
  margin-top: 8px;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-taupe);
  margin-bottom: 16px;
  letter-spacing: 0.08em;
}

.hero-title {
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.25;
  margin-bottom: 36px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.hero-media {
  order: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.hero-media-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-caption-welcome {
  font-family: var(--font-script);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--color-taupe);
  transform: translateY(-30px);
}

.hero-caption-logo {
  width: 102px;
  height: auto;
  margin-top: -22px;
  margin-bottom: 0px;
}

.hero-caption-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-text);
  margin-top: 8px;
}

.hero-caption-role {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text-soft);
  margin-top: 2px;
}

/* Full-bleed breakout, derived from percentages of the container instead of
   100vw. `100vw` counts the classic scrollbar gutter, but the 50% in the old
   `calc(50% - 50vw)` resolved against the scrollbar-free content box, so the
   element hung half a scrollbar width past BOTH edges (measured: -7.5px /
   +7.5px with a 15px scrollbar). This form only uses percentages of the
   container, which already excludes the scrollbar, so it lands exactly.
   Only applies below 768px, where .hero-inner always spans the full
   viewport, so `100% + 2 x padding` is exactly the viewport width.
   The phone block further down multiplies that width by --hero-img-scale, so
   the photo is a hair inside the edges there rather than fully bled. */
.hero-media-frame {
  position: relative;
  width: calc(100% + 2 * var(--hero-pad));
  margin-inline: calc(-1 * var(--hero-pad));
  margin-top: -20px;
  aspect-ratio: 3 / 4;
}

.hero-media-frame::before {
  content: '';
  position: absolute;
  inset: 6% 8%;
  border: 1px solid var(--color-taupe);
  border-radius: 200px 200px 24px 24px;
  z-index: 0;
}

.hero-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  clip-path: inset(0 0 12px 0);
}

/* Phone tuning: the marquee ribbon sits directly under the photo, and on a real
   handset the visible viewport (browser chrome + the floating contact bar at
   the bottom) used to cut it off. Everything above the ribbon is trimmed a
   little - top padding, the caption block, the logo and the photo - so the
   ribbon lands above the fold with room to spare, without touching >=768px.
   --hero-img-scale shrinks the photo AND its bottom crop by the same factor,
   so the 3:4 proportion and the framing of the shot stay exactly as they were. */
@media (max-width: 767px) {
  .hero-inner {
    --hero-img-scale: 0.88;
    padding-top: 42px;
    padding-bottom: 56px;
  }

  .hero-caption-welcome {
    font-size: 2.2rem;
    transform: translateY(-26px);
  }

  .hero-caption-logo {
    width: 84px;
    margin-top: -18px;
  }

  .hero-caption-name {
    font-size: 1.3rem;
    margin-top: 6px;
  }

  .hero-caption-role {
    font-size: 0.95rem;
  }

  .hero-media-frame {
    aspect-ratio: unset;
    width: calc((100% + 2 * var(--hero-pad)) * var(--hero-img-scale));
    margin-inline: 0;
    height: calc((100vw * 4 / 3 - 181px) * var(--hero-img-scale));
    overflow: hidden;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    height: calc(100vw * 4 / 3 * var(--hero-img-scale));
  }

  .hero-content {
    margin-top: 14px;
  }

  /* Half the desktop reveal offset, so the headline and buttons ride higher
     under the ribbon instead of being pushed toward the fold. */
  .hero-content.reveal {
    transform: translateY(44px);
  }

  .hero-content.reveal.is-visible {
    transform: translateY(20px);
  }

  /* The crop above pulls the CTA buttons up into the fixed scroll-indicator's
     zone at the bottom of the viewport; nudge them down to clear it. */
  .hero-title {
    margin-bottom: 44px;
  }
}

/* ==========================================================================
   Hero marquee ribbon
   ========================================================================== */

/* Same scrollbar-safe breakout as .hero-media-frame - see the note there.
   Exact at every width up to --container-width, which covers every phone
   and tablet; the wider case is handled in the min-width: 1200px block. */
.hero-marquee {
  order: 2;
  direction: ltr;
  width: calc(100% + 2 * var(--hero-pad));
  margin-inline: calc(-1 * var(--hero-pad));
  margin-bottom: var(--hero-gap);
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: 14px;
  background: rgba(182, 158, 132, 0.22);
}

@media (max-width: 767px) {
  .hero-marquee {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Past --container-width (1200px) .hero-inner stops growing with the
   viewport, so a percentage breakout can no longer reach the edges and the
   strip has to fall back to a viewport unit to stay full-bleed. The residual
   half-scrollbar overshoot is absorbed by `.hero { overflow: hidden }`, so it
   still cannot put the document into horizontal scroll. */
@media (min-width: 1200px) {
  .hero-marquee {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

.hero-marquee-track {
  display: flex;
  width: max-content;
  direction: ltr;
  will-change: transform;
  backface-visibility: hidden;
  animation-name: hero-marquee-scroll;
  animation-duration: 22s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hero-marquee-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hero-marquee-text {
  font-family: var(--font-luxury);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
  padding-inline: 20px;
}

.hero-marquee-sparkle {
  display: inline-block;
  color: var(--color-taupe);
  font-size: 0.75rem;
  animation: hero-sparkle-twinkle 3.2s ease-in-out infinite;
}

.hero-marquee-sparkle:nth-child(4n+2) {
  animation-delay: 0.6s;
}

.hero-marquee-sparkle:nth-child(4n) {
  animation-delay: 1.4s;
}

@keyframes hero-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes hero-sparkle-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ==========================================================================
   Hero scroll indicator
   ========================================================================== */

.hero-scroll-indicator {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 600;
  display: flex;
  transform: translateX(-50%);
  opacity: 0.8;
  animation: hero-scroll-bounce 2.4s ease-in-out infinite;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.hero-scroll-indicator:hover,
.hero-scroll-indicator:focus-visible {
  opacity: 1;
}

.hero-scroll-indicator.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero-scroll-icon {
  width: 30px;
  height: auto;
  display: block;
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

@media (min-width: 768px) {
  .hero-scroll-indicator {
    bottom: 26px;
  }

  .hero-scroll-icon {
    width: 34px;
  }
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-media.reveal {
  transition-delay: 0.15s;
}

/* Shift the hero content block 40px lower than its default reveal position,
   using transform (not margin) so grid's align-items: center on desktop
   doesn't halve the offset. Travel distance stays 24px, just offset by 40px. */
.hero-content.reveal {
  transform: translateY(64px);
}

.hero-content.reveal.is-visible {
  transform: translateY(40px);
}

/* ==========================================================================
   Tablet & up
   ========================================================================== */

@media (min-width: 768px) {
  .hero-inner {
    --hero-gap: 40px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "content media"
      "marquee marquee";
    text-align: right;
    padding-top: 64px;
    row-gap: 0;
    column-gap: var(--hero-gap);
  }

  .hero-content {
    grid-area: content;
    text-align: right;
  }

  .hero-media {
    grid-area: media;
  }

  .hero-marquee {
    grid-area: marquee;
    margin-top: 0;
    margin-bottom: 0;
  }

  .hero-cta {
    justify-content: flex-start;
  }

  .hero-media-frame {
    width: min(100%, 244px);
    margin-inline: 0;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: 96px;
  }

  .hero-inner {
    --hero-gap: 64px;
    row-gap: 0;
    column-gap: var(--hero-gap);
  }

  .hero-media-frame {
    width: min(100%, 279px);
  }
}

/* ==========================================================================
   Mobile nav
   ========================================================================== */

@media (max-width: 899px) {
  .hamburger {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: var(--header-height);
    inset-inline: 0;
    background: var(--color-white);
    box-shadow: 0 12px 24px -12px rgba(74, 59, 52, 0.2);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition-fast), opacity var(--transition-fast), visibility var(--transition-fast);
  }

  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 24px 24px;
  }

  .main-nav li {
    width: 100%;
  }

  .main-nav a {
    display: block;
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid rgba(182, 158, 132, 0.2);
  }

  .header-whatsapp span {
    display: none;
  }

  .header-whatsapp {
    padding: 10px;
    border-radius: 50%;
  }

  .icon-whatsapp {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 900px) {
  .main-nav {
    position: static;
    background: none;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ==========================================================================
   Courses
   ========================================================================== */

.courses-section {
  position: relative;
  padding: 96px 24px;
  overflow: hidden;
}

.courses-section::before {
  content: '';
  position: absolute;
  top: -10%;
  inset-inline-end: -14%;
  width: 52vw;
  height: 52vw;
  max-width: 580px;
  max-height: 580px;
  background: radial-gradient(circle, var(--color-cream-peach) 0%, rgba(255, 232, 194, 0) 70%);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.courses-inner {
  position: relative;
  z-index: 1;
}

.courses-seal {
  position: absolute;
  top: 20px;
  right: 20px;
  width: clamp(84px, 12vw, 138px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(-48px);
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.courses-seal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.courses-heading {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: center;
}

.courses-title {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
}

.courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 52px;
  column-gap: 28px;
}

.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 32px 48px;
  border-radius: 28px;
  background: rgba(254, 254, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 20px 45px -24px rgba(74, 59, 52, 0.3);
  transition: transform var(--hover-lift), box-shadow var(--hover-lift);
}

.courses-grid .course-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 32px 60px -20px rgba(74, 59, 52, 0.38);
}

.course-card-icon {
  display: block;
  width: clamp(44px, 6.9vw, 53px);
  height: auto;
  margin: 0 auto 18px;
  opacity: 0.72;
  user-select: none;
  pointer-events: none;
}

.course-card-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: 16px;
}

.course-card-title::before {
  content: '';
  position: absolute;
  inset: -14px -22px;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255, 232, 194, 0.55) 0%, rgba(195, 173, 163, 0.28) 50%, rgba(255, 232, 194, 0) 78%);
  filter: blur(14px);
  pointer-events: none;
}

.course-card-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-soft);
}

.course-card-btn {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: calc(100% - 64px);
  max-width: 260px;
  padding: 16px 20px;
  border-radius: 0;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 16px 32px -14px rgba(74, 59, 52, 0.55);
}

.course-card-btn:hover {
  transform: translateX(-50%) translateY(-4px);
  box-shadow: 0 22px 40px -14px rgba(74, 59, 52, 0.62);
}

@media (min-width: 768px) {
  .courses-section {
    padding: 140px 24px;
  }

  .courses-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 56px;
    column-gap: 32px;
  }

  .courses-grid .course-card:nth-child(3) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
  }
}

@media (min-width: 1024px) {
  .courses-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 56px;
    column-gap: 36px;
  }

  .courses-grid .course-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }
}

/* ==========================================================================
   Quote strip (standard section)
   ========================================================================== */

.quote-section {
  position: relative;
  isolation: isolate;
  padding: 64px 24px;
  background-image: url('../Nails.section.png');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

.quote-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(43, 32, 27, 0.6) 0%, rgba(43, 32, 27, 0.68) 100%);
}

.quote-section-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.quote-section-divider {
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-cream-peach);
  opacity: 0.85;
}

.quote-section-sparkle {
  font-size: 0.9rem;
  color: var(--color-cream-peach);
  animation: hero-sparkle-twinkle 3.2s ease-in-out infinite;
}

.quote-section-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.4vw, 1.85rem);
  line-height: 1.65;
  color: var(--color-white);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  /* Right-to-left, matching the text-block rule of the scroll system.
     This one replays every time the strip re-enters the viewport. */
  transform: translate3d(var(--anim-shift), 0, 0);
  transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease);
  will-change: opacity, transform;
}

.quote-section-text.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.quote-section-emphasis {
  font-weight: 700;
  font-size: 1.18em;
}

@media (min-width: 768px) {
  .quote-section {
    padding: 96px 24px;
  }
}

/* ==========================================================================
   Know me (About Yasmin)
   ========================================================================== */

.knowme-section {
  position: relative;
  padding: 80px 24px;
}

.knowme-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  row-gap: 40px;
}

.knowme-media {
  order: 1;
  width: 100%;
  display: flex;
  justify-content: center;
}

.knowme-content {
  order: 2;
  text-align: center;
}

.knowme-media-frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 701 / 770;
  border-radius: 16px;
  overflow: visible;
  /* Frame stays clipped flush on the sides/bottom (rounded to match the
     frame), but the top clip plane is pushed far away so the enlarged
     image can break past the top edge instead of being cropped there. */
  clip-path: inset(-200px 0 0 0 round 16px);
}

/* Frame border left open on top so it never crosses her face/hair as the
   image breaks past the top edge — complete on the other three sides. */
.knowme-frame-border {
  position: absolute;
  inset: 10px;
  border: 1px solid var(--color-taupe);
  border-top: none;
  border-radius: 0 0 10px 10px;
  pointer-events: none;
  z-index: 2;
}

.knowme-image {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
}

.knowme-title {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin-bottom: 28px;
}

.knowme-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  margin-inline: auto;
}

.knowme-text p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-text-soft);
}

@media (min-width: 768px) {
  .knowme-section {
    padding: 120px 24px;
  }

  .knowme-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "content media";
    column-gap: 64px;
  }

  .knowme-content {
    grid-area: content;
    text-align: right;
  }

  .knowme-media {
    grid-area: media;
    justify-content: flex-start;
  }

  .knowme-text {
    margin-inline: 0;
  }

  .knowme-media-frame {
    max-width: 420px;
  }
}

@media (min-width: 1024px) {
  .knowme-inner {
    column-gap: 80px;
  }

  .knowme-media-frame {
    max-width: 460px;
  }
}

/* Mobile only: a larger focal image on the left with the heading beside its
   top edge, and body text flowing full-width beneath the image. Scoped to
   max-width so tablet/desktop (min-width: 768px above) are untouched.
   .knowme-content becomes display:contents here so its children (title/text)
   can be placed directly into the grid without touching the desktop DOM
   structure; the fade-in "reveal" class lives on those children rather than
   the wrapper so the animation still plays once the wrapper has no box. */
@media (max-width: 767px) {
  .knowme-section {
    padding-inline: 0;
  }

  .knowme-inner {
    grid-template-columns: minmax(96px, 104px) 1fr;
    grid-template-areas:
      "heading media"
      "text text";
    align-items: start;
    column-gap: 16px;
    row-gap: 20px;
  }

  .knowme-content {
    display: contents;
  }

  .knowme-title {
    grid-area: heading;
    text-align: right;
    font-size: clamp(1.95rem, 9vw, 2.475rem);
    line-height: 1.1;
    margin-bottom: 0;
  }

  .knowme-media {
    grid-area: media;
    justify-content: flex-start;
  }

  .knowme-text {
    grid-area: text;
    text-align: right;
    margin-inline: 0;
  }
}

/* ==========================================================================
   Magazine feature
   ========================================================================== */

.magazine-section {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  min-height: 560px;
  padding-block: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Oversized on the block axis so the parallax drift (--parallax, set by JS on
   the section) can never expose a gap at the top or bottom edge. */
.magazine-section::before {
  content: '';
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  background-image: url('../Yasmin.magazine.back.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  pointer-events: none;
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

.magazine-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  pointer-events: none;
}

.magazine-bg-row {
  width: 100%;
  overflow: hidden;
  direction: ltr;
}

.magazine-bg-row-1 { opacity: 0.5; }
.magazine-bg-row-2 { opacity: 0.32; }
.magazine-bg-row-3 { opacity: 0.5; }
.magazine-bg-row-4 { opacity: 0.32; }
.magazine-bg-row-5 { opacity: 0.5; }
.magazine-bg-row-6 { opacity: 0.32; }
.magazine-bg-row-7 { opacity: 0.5; }
.magazine-bg-row-8 { opacity: 0.32; }

.magazine-bg-track {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Odd rows scroll left-to-right, even rows scroll right-to-left */
.magazine-bg-row-1 .magazine-bg-track {
  animation-name: magazine-bg-scroll-reverse;
  animation-duration: 34s;
}

.magazine-bg-row-2 .magazine-bg-track {
  animation-name: magazine-bg-scroll;
  animation-duration: 44s;
}

.magazine-bg-row-3 .magazine-bg-track {
  animation-name: magazine-bg-scroll-reverse;
  animation-duration: 30s;
}

.magazine-bg-row-4 .magazine-bg-track {
  animation-name: magazine-bg-scroll;
  animation-duration: 34s;
}

.magazine-bg-row-5 .magazine-bg-track {
  animation-name: magazine-bg-scroll-reverse;
  animation-duration: 44s;
}

.magazine-bg-row-6 .magazine-bg-track {
  animation-name: magazine-bg-scroll;
  animation-duration: 30s;
}

.magazine-bg-row-7 .magazine-bg-track {
  animation-name: magazine-bg-scroll-reverse;
  animation-duration: 34s;
}

.magazine-bg-row-8 .magazine-bg-track {
  animation-name: magazine-bg-scroll;
  animation-duration: 44s;
}

.magazine-bg-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.magazine-bg-text {
  font-family: var(--font-luxury);
  font-size: clamp(1.7rem, 8vw, 3.4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-taupe);
  padding-inline: 20px;
}

.magazine-bg-dot {
  display: inline-block;
  color: var(--color-taupe);
  font-size: 0.9rem;
  transform: translateY(-0.35em);
}

@keyframes magazine-bg-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes magazine-bg-scroll-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.magazine-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

/* `isolation` keeps the stacking context the old permanent reveal transform
   used to create, so the `::before` halo still paints over the white card
   once the entrance animation is finished and the transform is gone. */
.magazine-frame {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 240px;
  background: var(--color-white);
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(182, 158, 132, 0.4);
  box-shadow: 0 24px 50px -22px rgba(74, 59, 52, 0.4), 0 8px 18px rgba(74, 59, 52, 0.14);
}

.magazine-frame::before {
  content: '';
  position: absolute;
  inset: -26px;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 232, 194, 0.6) 0%, rgba(255, 232, 194, 0) 70%);
  filter: blur(4px);
}

.magazine-frame::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 11px;
  box-shadow: inset 0 0 40px rgba(74, 59, 52, 0.16);
  pointer-events: none;
}

.magazine-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1350;
  object-fit: cover;
  border-radius: 11px;
}

@media (min-width: 768px) {
  .magazine-section {
    min-height: 760px;
    padding-block: 100px;
  }

  .magazine-frame {
    max-width: 320px;
    padding: 12px;
  }
}

@media (min-width: 1024px) {
  .magazine-section {
    min-height: 860px;
  }

  .magazine-frame {
    max-width: 380px;
    padding: 14px;
  }
}

/* ==========================================================================
   Vision
   ========================================================================== */

.vision-section {
  position: relative;
  padding: 72px 24px;
  background-image: url('../Yasmin.latter3.png');
  background-size: 150%;
  background-position: center;
  background-repeat: no-repeat;
}

.vision-inner {
  display: flex;
  justify-content: center;
}

.vision-card {
  width: 100%;
  max-width: 680px;
  text-align: center;
  padding: 40px 28px;
  border-radius: 20px;
  background: rgba(254, 254, 255, 0.72);
  border: 1px solid rgba(182, 158, 132, 0.4);
  box-shadow: 0 24px 64px -24px rgba(74, 59, 52, 0.35);
}

.vision-title {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin-bottom: 14px;
}

.vision-subtitle {
  font-family: var(--font-script-he);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.6vw, 1.85rem);
  line-height: 1.3;
  color: var(--color-taupe);
  margin-bottom: 22px;
}

.vision-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8625rem;
  line-height: 1.85;
  color: var(--color-text-soft);
  max-width: 560px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .vision-section {
    padding: 120px 24px;
  }

  .vision-card {
    padding: 56px 64px;
  }
}

@media (max-width: 480px) {
  .vision-section {
    padding: 48px 16px;
  }

  .vision-card {
    padding: 32px 20px;
  }
}

/* Past this width the section box becomes wider than it is tall relative to
   the letter photo's own ratio, so sizing off the width axis (as the base
   rule does) would keep zooming in unboundedly as the viewport widens.
   Sizing off the height axis instead keeps the enlargement capped at a
   consistent, non-excessive crop no matter how wide the screen gets. */
@media (min-width: 1024px) {
  .vision-section {
    background-size: auto 150%;
  }
}

/* ==========================================================================
   Vision CTA
   ========================================================================== */

.vision-cta-wrap {
  display: flex;
  justify-content: center;
  padding: 40px 24px 32px;
}

.vision-cta-btn {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 12px;
  padding: 18px 38px;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  border: 1px solid rgba(254, 254, 255, 0.14);
  box-shadow: 0 16px 36px -14px rgba(74, 59, 52, 0.45);
  transition: transform var(--hover-lift), box-shadow var(--hover-lift), background var(--hover-color);
}

.vision-cta-btn:hover,
.vision-cta-btn:focus-visible {
  background: var(--color-taupe);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -16px rgba(74, 59, 52, 0.55);
}

.vision-cta-btn:focus-visible {
  outline: 2px solid var(--color-taupe);
  outline-offset: 4px;
}

.vision-cta-label {
  white-space: nowrap;
}

.vision-cta-arrow {
  display: inline-block;
  color: var(--color-cream-peach);
  animation: vision-cta-arrow-slide 2.2s ease-in-out infinite;
}

@keyframes vision-cta-arrow-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}

.vision-cta-wrap-after-testimonials {
  padding-top: 8px;
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  .vision-cta-wrap {
    padding: 56px 24px 32px;
  }

  .vision-cta-wrap-after-testimonials {
    padding-top: 16px;
    padding-bottom: 72px;
  }

  .vision-cta-btn {
    padding: 20px 44px;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .vision-cta-btn {
    padding: 16px 30px;
    font-size: 0.98rem;
  }
}

/* This button was the one element actually forcing the document into
   horizontal scroll. Its label is `white-space: nowrap`, so the button had a
   hard intrinsic width of 313px that could not shrink, and unlike the hero
   breakouts nothing above it clips. On any viewport narrower than that it
   spilled past both edges - and because the document is RTL, the browser
   pins the initial scroll position to the right, which is what shifted the
   whole page left and cut content off. Tighter padding keeps it on one line
   down to 360px; below that the label is allowed to wrap instead of
   overflowing, and max-width: 100% guarantees it can never spill again. */
@media (max-width: 400px) {
  .vision-cta-btn {
    padding-inline: 22px;
    gap: 8px;
  }

  .vision-cta-label {
    white-space: normal;
  }
}

/* ==========================================================================
   4 principles
   ========================================================================== */

.principles-section {
  background: linear-gradient(180deg, #221c19 0%, #17120f 100%);
  padding: 72px 0;
}

.principles-heading {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.5rem, 5.5vw, 2.3rem);
  line-height: 1.4;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0.01em;
  max-width: 600px;
  margin: 0 auto 56px;
  padding-inline: 24px;
}

.principles-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  max-width: 480px;
}

.principles-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.principles-number {
  font-family: var(--font-luxury);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--color-cream-peach);
  opacity: 0.92;
  margin-bottom: 14px;
}

.principles-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-white);
  margin: 0 0 10px;
}

.principles-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(254, 254, 255, 0.72);
  max-width: 320px;
  margin: 0;
}

@media (min-width: 768px) {
  .principles-section {
    padding: 100px 0;
  }

  .principles-heading {
    font-size: clamp(2rem, 3.2vw, 2.5rem);
    margin-bottom: 72px;
  }

  .principles-grid {
    max-width: 900px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 64px 48px;
  }

  .principles-item {
    flex: 0 1 340px;
  }

  .principles-number {
    font-size: 4rem;
  }

  .principles-title {
    font-size: 1.2rem;
  }

  .principles-desc {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .principles-grid {
    max-width: 1080px;
    flex-wrap: nowrap;
    gap: 40px;
  }

  .principles-item {
    flex: 1 1 0;
  }
}

/* ==========================================================================
   Sticky bottom fade
   ========================================================================== */

.viewport-fade-bottom {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: 110px;
  z-index: 500;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(254, 254, 255, 0.5) 0%,
    rgba(254, 254, 255, 0.475) 25%,
    rgba(254, 254, 255, 0.375) 50%,
    rgba(254, 254, 255, 0.175) 75%,
    rgba(254, 254, 255, 0) 100%);
  transition: opacity 0.4s ease;
}

.viewport-fade-bottom.fade-hidden {
  opacity: 0;
}

@media (max-width: 899px) {
  .viewport-fade-bottom {
    height: 150px;
    background: linear-gradient(to top,
      rgba(254, 254, 255, 0.5) 0%,
      rgba(254, 254, 255, 0.5) 15%,
      rgba(254, 254, 255, 0.45) 40%,
      rgba(254, 254, 255, 0.275) 70%,
      rgba(254, 254, 255, 0) 100%);
  }
}

/* ==========================================================================
   Our Courses (visual course picker)
   ========================================================================== */

.our-courses-section {
  padding: 96px 24px 56px;
}

.our-courses-heading {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 44px;
  text-align: center;
}

.our-courses-title {
  font-family: var(--font-luxury);
  font-weight: 400;
  letter-spacing: 0.12em;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}

.our-courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  max-width: 1140px;
  margin-inline: auto;
}

.our-course-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-white);
  border-radius: 0;
  box-shadow: 0 30px 60px -38px rgba(74, 59, 52, 0.28);
  text-decoration: none;
  transition: transform var(--hover-lift), box-shadow var(--hover-lift);
}

.our-course-card:hover,
.our-course-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 36px 70px -34px rgba(74, 59, 52, 0.34);
}

.our-course-image-frame {
  position: relative;
  width: calc(100% - 44px);
  margin: 22px auto 0;
}

.our-course-image-wrap {
  box-sizing: border-box;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 8px solid var(--color-white);
  box-shadow: 0 14px 32px -18px rgba(74, 59, 52, 0.3), 0 0 0 1px rgba(182, 158, 132, 0.25);
}

.our-course-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--transition-slow);
}

.our-course-card:hover .our-course-image,
.our-course-card:focus-visible .our-course-image {
  transform: scale(1.06);
}

.our-course-name {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: calc(100% + 40px);
  padding: 15px 26px;
  background: var(--color-text);
  border: 1px solid var(--color-taupe);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--color-cream-peach);
  text-align: center;
  box-shadow: 0 14px 28px -16px rgba(74, 59, 52, 0.4);
  transition: color var(--hover-color), background var(--hover-color), border-color var(--hover-color);
}

.our-course-card:hover .our-course-name,
.our-course-card:focus-visible .our-course-name {
  background: var(--color-taupe);
  border-color: var(--color-taupe);
  color: var(--color-white);
}

.our-course-desc {
  margin: 46px 0 0;
  padding: 0 30px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-soft);
  text-align: center;
}

.our-course-logo {
  width: 46px;
  height: auto;
  margin: 24px auto 28px;
  display: block;
  opacity: 0.82;
}

@media (min-width: 640px) {
  .our-courses-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px;
  }
}

@media (min-width: 768px) {
  .our-courses-section {
    padding: 120px 24px 64px;
  }
}

@media (min-width: 1024px) {
  .our-courses-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
  }

  .our-course-image-frame {
    width: calc(100% - 64px);
    margin-top: 32px;
  }
}

/* ==========================================================================
   Section divider (Our Courses -> Testimonials)
   ========================================================================== */

.section-divider {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 360px;
  margin-inline: auto;
  padding: 24px 24px 32px;
}

.section-divider-line {
  flex: 1 1 auto;
  height: 1px;
  max-width: 120px;
}

.section-divider-line:first-child {
  background: linear-gradient(90deg, transparent, var(--color-taupe));
}

.section-divider-line:last-child {
  background: linear-gradient(90deg, var(--color-taupe), transparent);
}

.section-divider-ornament {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-taupe);
  animation: hero-sparkle-twinkle 3.2s ease-in-out infinite;
}

@media (min-width: 768px) {
  .section-divider {
    max-width: 440px;
    gap: 22px;
    padding: 28px 24px 40px;
  }

  .section-divider-line {
    max-width: 160px;
  }

  .section-divider-ornament {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   Testimonials video carousel
   ========================================================================== */

.testimonials-section {
  position: relative;
  padding: 28px 0 48px;
  overflow: hidden;
}

.testimonials-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(90px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonials-stars.is-inview {
  opacity: 1;
  transform: translateX(0);
}

.testimonials-star {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  fill: rgba(255, 232, 194, 0.6);
  stroke: var(--color-taupe);
  stroke-width: 1;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(182, 158, 132, 0.5));
}

.testimonials-heading {
  text-align: center;
  padding-inline: 24px;
  margin-bottom: 36px;
}

.testimonials-title {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
}

.testimonials-carousel {
  direction: ltr;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 16px;
}

.testimonials-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
  outline: none;
}

.testimonials-track {
  position: relative;
  display: flex;
  gap: 20px;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonials-track.is-dragging,
.testimonials-track.is-snapping {
  transition: none;
}

.testimonial-card {
  flex: 0 0 100%;
  max-width: 400px;
  user-select: none;
}

.testimonial-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
}

.testimonial-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

.testimonial-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(254, 254, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px -10px rgba(74, 59, 52, 0.5);
  color: var(--color-white);
  cursor: pointer;
  z-index: 2;
  pointer-events: auto;
  transition: opacity 0.25s ease, transform 0.25s ease, background var(--transition-fast);
}

.testimonial-play-btn svg {
  width: 22px;
  height: 22px;
  margin-inline-start: 3px;
}

.testimonial-play-btn:hover {
  background: rgba(254, 254, 255, 0.38);
}

.testimonial-video-frame.is-playing .testimonial-play-btn {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}

.testimonial-name {
  direction: rtl;
  margin-bottom: 16px;
  text-align: center;
  font-family: var(--font-script-he);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--color-text);
}

.testimonials-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(254, 254, 255, 0.85);
  border: 1px solid rgba(182, 158, 132, 0.4);
  color: var(--color-text);
  box-shadow: 0 8px 20px -10px rgba(74, 59, 52, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
  z-index: 2;
}

.testimonials-arrow svg {
  width: 18px;
  height: 18px;
}

.testimonials-arrow:hover {
  background: var(--color-taupe);
  color: var(--color-white);
  transform: translateY(-2px);
}

.testimonials-dots {
  direction: ltr;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.testimonials-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(182, 158, 132, 0.35);
  transition: background var(--transition-fast), width var(--transition-fast);
}

.testimonials-dot.is-active {
  background: var(--color-taupe);
  width: 26px;
  border-radius: 6px;
}

/* Mobile only: edge-to-edge video carousel, arrows overlaid on the video */
@media (max-width: 767px) {
  .testimonials-carousel {
    gap: 0;
    padding-inline: 0;
  }

  .testimonial-card {
    max-width: none;
  }

  .testimonials-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }

  .testimonials-arrow-prev {
    left: 8px;
  }

  .testimonials-arrow-next {
    right: 8px;
  }
}

@media (min-width: 768px) {
  .testimonials-section {
    padding: 32px 0 72px;
  }

  .testimonials-stars {
    gap: 12px;
    margin-bottom: 24px;
  }

  .testimonials-star {
    width: 33px;
    height: 33px;
  }

  .testimonials-heading {
    margin-bottom: 48px;
  }

  .testimonials-carousel {
    gap: 16px;
    padding-inline: 32px;
  }

  .testimonial-card {
    flex-basis: 56%;
    max-width: 480px;
  }

  .testimonials-arrow {
    width: 48px;
    height: 48px;
  }

  .testimonials-arrow svg {
    width: 20px;
    height: 20px;
  }

  .testimonial-play-btn {
    width: 72px;
    height: 72px;
  }

  .testimonial-play-btn svg {
    width: 26px;
    height: 26px;
  }
}

@media (min-width: 1024px) {
  .testimonials-carousel {
    gap: 24px;
  }

  .testimonial-card {
    flex-basis: 40%;
    max-width: 560px;
  }

  .testimonials-arrow {
    width: 52px;
    height: 52px;
  }
}

/* ==========================================================================
   Why now
   ========================================================================== */

.why-now-section {
  position: relative;
  background: var(--color-white);
  padding: 56px 0;
  overflow: hidden;
}

/* Same oversize-then-drift treatment as the magazine backdrop. */
.why-now-section::before {
  content: '';
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  background-image: url('../Money.nails.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  pointer-events: none;
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

.why-now-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
}

.why-now-logo {
  width: 76px;
  max-width: 19.5vw;
  height: auto;
  margin: 0 auto 24px;
  filter: grayscale(100%);
  opacity: 0.75;
}

.why-now-text p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--color-text-soft);
}

.why-now-text p + p {
  margin-top: 22px;
}

.why-now-highlight {
  color: var(--color-text);
  font-weight: 600;
}

@media (min-width: 768px) {
  .why-now-section {
    padding: 80px 0;
  }

  .why-now-logo {
    width: 86px;
    max-width: 12vw;
    margin-bottom: 32px;
  }

  .why-now-text p {
    font-size: 1.15rem;
    line-height: 2;
  }

  .why-now-text p + p {
    margin-top: 28px;
  }
}

/* ==========================================================================
   Instagram
   ========================================================================== */

.instagram-section {
  position: relative;
  padding: 56px 0 64px;
  background: var(--color-butter);
}

.instagram-heading {
  text-align: center;
  margin-bottom: 32px;
}

.instagram-eyebrow {
  font-family: var(--font-luxury);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-taupe);
  margin-bottom: 6px;
}

.instagram-title {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
}

.instagram-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.instagram-avatar-frame {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, var(--color-cream-peach), var(--color-taupe));
}

.instagram-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-white);
}

.instagram-username {
  direction: ltr;
  font-family: var(--font-luxury);
  font-size: 1.05rem;
  color: var(--color-text);
}

.instagram-follow-btn {
  padding: 10px 28px;
  font-size: 0.95rem;
}

.instagram-follow-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  max-width: 720px;
  margin-inline: auto;
}

.instagram-post {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-taupe);
}

.instagram-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

@media (min-width: 600px) {
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
}

@media (min-width: 768px) {
  .instagram-section {
    padding: 80px 0;
  }

  .instagram-heading {
    margin-bottom: 40px;
  }

  .instagram-avatar-frame {
    width: 108px;
    height: 108px;
  }

  .instagram-profile-card {
    margin-bottom: 40px;
  }

  .instagram-grid {
    gap: 10px;
  }
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-section {
  position: relative;
  padding: 88px 24px;
  overflow: hidden;
  background: linear-gradient(165deg, #3c2c1f 0%, #2a1d15 50%, #1e140e 100%);
}

/* The two glows drift against each other as the section scrolls past.
   `--parallax` is set by JS on the section, never on the glows themselves, so
   reading their position can never feed back into the value. */
.contact-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.contact-glow-1 {
  transform: translate3d(0, var(--parallax, 0px), 0);
  top: -12%;
  inset-inline-start: -16%;
  width: 46vw;
  height: 46vw;
  max-width: 460px;
  max-height: 460px;
  background: radial-gradient(circle, rgba(255, 232, 194, 0.3) 0%, rgba(255, 232, 194, 0) 70%);
}

.contact-glow-2 {
  /* Counter-drift, so the two glows never move as one block */
  transform: translate3d(0, calc(var(--parallax, 0px) * -0.7), 0);
  bottom: -14%;
  inset-inline-end: -12%;
  width: 40vw;
  height: 40vw;
  max-width: 420px;
  max-height: 420px;
  background: radial-gradient(circle, rgba(214, 174, 128, 0.24) 0%, rgba(214, 174, 128, 0) 70%);
}

.contact-inner {
  position: relative;
  z-index: 1;
}

.contact-heading {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 36px;
  text-align: center;
}

.contact-title {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  color: var(--color-cream-peach);
}

.contact-form {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 36px 24px;
  border-radius: 24px;
  background: rgba(255, 253, 248, 0.96);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 232, 194, 0.4);
  box-shadow: 0 24px 64px -20px rgba(0, 0, 0, 0.55);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.form-field label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-field .required {
  color: #b3564c;
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field select {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(182, 158, 132, 0.35);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field input[type="text"]:focus,
.form-field input[type="tel"]:focus,
.form-field input[type="email"]:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-taupe);
  box-shadow: 0 0 0 3px rgba(182, 158, 132, 0.2);
}

.form-field.has-error input,
.form-field.has-error select {
  border-color: #b3564c;
}

.form-error {
  display: none;
  font-size: 0.8rem;
  color: #b3564c;
}

.form-field.has-error .form-error {
  display: block;
}

.select-wrap {
  position: relative;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 40px;
  cursor: pointer;
}

.select-arrow {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--color-taupe);
  pointer-events: none;
}

.form-field-checkbox {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 10px;
  margin-bottom: 24px;
}

.form-field-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-taupe);
  cursor: pointer;
}

.form-field-checkbox label {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-soft);
  cursor: pointer;
}

.form-field-checkbox .form-error {
  flex-basis: 100%;
  margin-inline-start: 30px;
}

.contact-submit {
  width: 100%;
  margin-top: 4px;
}

@media (min-width: 768px) {
  .contact-section {
    padding: 130px 24px;
  }

  .contact-heading {
    margin-bottom: 48px;
  }

  .contact-form {
    padding: 48px 56px;
  }
}

@media (max-width: 480px) {
  .contact-form {
    padding: 28px 18px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 40px 24px 32px;
  background: linear-gradient(165deg, #3c2c1f 0%, #2a1d15 50%, #1e140e 100%);
  text-align: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 249, 225, 0.85);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--color-cream-peach);
  text-decoration: underline;
}

.footer-divider {
  width: 100%;
  max-width: 280px;
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 194, 0.55), transparent);
}

.footer-copyright {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(255, 249, 225, 0.65);
}

@media (min-width: 768px) {
  .site-footer {
    padding: 48px 24px 40px;
  }

  .footer-divider {
    margin: 18px 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .quote-section-text {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .courses-heading,
  .course-card {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .hero-marquee-track,
  .hero-marquee-sparkle,
  .hero-scroll-indicator,
  .vision-cta-arrow,
  .magazine-bg-track {
    animation: none;
  }

  .testimonials-track,
  .testimonials-stars {
    transition: none;
  }

  .testimonials-stars {
    opacity: 1;
    transform: none;
  }

  .courses-seal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .viewport-fade-bottom {
    transition: none;
  }
}

/* ==========================================================================
   Accessibility launcher (UserWay custom trigger)
   Only the floating icon is styled here - the UserWay panel is left as-is.
   `left` is used deliberately instead of `inset-inline-start`: the document is
   RTL, so the logical start side would place the icon bottom-right.
   ========================================================================== */

.a11y-trigger {
  position: fixed;
  left: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(182, 158, 132, 0.45);
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(254, 254, 255, 0.95), rgba(255, 249, 225, 0.95));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-taupe);
  box-shadow: 0 6px 18px -8px rgba(74, 59, 52, 0.35);
  opacity: 0.85;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

.a11y-trigger:hover,
.a11y-trigger:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  border-color: var(--color-rose);
  color: var(--color-text);
  box-shadow: 0 10px 24px -10px rgba(74, 59, 52, 0.45);
}

.a11y-trigger:focus-visible {
  outline: 2px solid var(--color-rose);
  outline-offset: 3px;
}

.a11y-trigger:active {
  transform: translateY(0);
}

.a11y-trigger-icon {
  width: 24px;
  height: 24px;
}

/* Hide UserWay's own launcher only - the widget wrapper and panel stay untouched */
#userwayAccessibilityIcon,
.uwy .uai {
  display: none !important;
}

@media (max-width: 599px) {
  .a11y-trigger {
    left: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 42px;
    height: 42px;
  }

  .a11y-trigger-icon {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-trigger {
    transition: none;
  }

  .a11y-trigger:hover,
  .a11y-trigger:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Floating contact bar (mobile only)
   Hidden on load; JS toggles `.is-visible` once the courses section is reached
   and removes it again whenever the hero is back in view, so the same
   opacity/transform transition plays as a fade-out and a fade-in.
   Centred with `inset-inline: 0` + `margin-inline: auto` rather than a
   `translateX(-50%)` trick, so the transform stays free for the reveal
   animation and the centring is direction-agnostic in this RTL document.
   ========================================================================== */

.floating-contact {
  display: none;
}

@media (max-width: 899px) {
  .floating-contact {
    position: fixed;
    inset-inline: 0;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    /* Above the bottom fade (500), below the accessibility launcher (900)
       and the header (1000) */
    z-index: 880;
    display: block;
    width: max-content;
    max-width: calc(100vw - 120px);
    margin-inline: auto;
    padding: 7px 10px;
    border: 1px solid rgba(182, 158, 132, 0.45);
    border-radius: 999px;
    background: linear-gradient(150deg, rgba(254, 254, 255, 0.96), rgba(255, 249, 225, 0.96));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px -12px rgba(74, 59, 52, 0.45),
                0 2px 6px -3px rgba(182, 158, 132, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(26px) scale(0.94);
    pointer-events: none;
    transition: opacity var(--transition-slow), transform var(--transition-slow),
                visibility var(--transition-slow);
  }

  .floating-contact.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .floating-contact-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .floating-contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    color: var(--color-taupe);
    transition: color var(--transition-fast), background-color var(--transition-fast),
                transform var(--transition-fast);
  }

  .floating-contact-link:hover,
  .floating-contact-link:focus-visible {
    color: var(--color-text);
    background-color: rgba(255, 232, 194, 0.55);
    transform: translateY(-2px);
  }

  .floating-contact-link:focus-visible {
    outline: 2px solid var(--color-rose);
    outline-offset: 2px;
  }

  .floating-contact-link:active {
    transform: scale(0.92);
    background-color: rgba(255, 232, 194, 0.75);
  }

  .floating-contact-icon {
    width: 23px;
    height: 23px;
    stroke-linecap: round;
  }
}

/* Very small handsets: tighten up so the bar still clears the a11y launcher */
@media (max-width: 359px) {
  .floating-contact {
    padding: 6px 8px;
  }

  .floating-contact-list {
    gap: 4px;
  }

  .floating-contact-link {
    width: 40px;
    height: 40px;
  }

  .floating-contact-icon {
    width: 21px;
    height: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-contact {
    transition: opacity 0.01ms, visibility 0.01ms;
    transform: none;
  }

  .floating-contact.is-visible {
    transform: none;
  }

  .floating-contact-link {
    transition: none;
  }

  .floating-contact-link:hover,
  .floating-contact-link:focus-visible,
  .floating-contact-link:active {
    transform: none;
  }
}

/* ==========================================================================
   Scroll animation system
   --------------------------------------------------------------------------
   One engine for the whole page below the hero. Elements opt in with
   `data-anim="<variant>"`; js/main.js watches them and adds `.is-inview` when
   they enter the viewport, which starts a CSS animation.

   Why animations and not transitions: once the entrance finishes, JS adds
   `.anim-done`, which drops the animation entirely. The element then falls
   back to its own base styles, so hover transforms (card lift, image zoom)
   are never fought over by a lingering reveal transform.

   Both classes are removed again once the element has scrolled clear of the
   viewport, which returns it to the hidden start state below and re-arms it.
   Every entrance therefore replays - arriving from below or from above, for
   as long as the page is open. Restarting is free: the animation is simply
   absent while the element is parked, so nothing accumulates per replay.

   `.anim-ready` is set on <html> by main.js before first paint - without JS
   nothing is ever hidden, so the page degrades to plain static content.
   ========================================================================== */

.anim-ready [data-anim]:not(.is-inview):not(.anim-done) {
  opacity: 0;
}

[data-anim].is-inview {
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--anim-ease);
  animation-fill-mode: both;
  animation-delay: calc(var(--anim-index, 0) * var(--anim-stagger));
  will-change: opacity, transform;
}

/* Text blocks - fade in while sliding gently from right to left */
@keyframes anim-text {
  from { opacity: 0; transform: translate3d(var(--anim-shift), 0, 0); }
  to   { opacity: var(--anim-opacity, 1); transform: translate3d(0, 0, 0); }
}

[data-anim="text"].is-inview {
  animation-name: anim-text;
}

/* Buttons - fade in while sliding gently from left to right */
@keyframes anim-btn {
  from { opacity: 0; transform: translate3d(calc(-1 * var(--anim-shift-btn)), 0, 0); }
  to   { opacity: var(--anim-opacity, 1); transform: translate3d(0, 0, 0); }
}

[data-anim="btn"].is-inview {
  animation-name: anim-btn;
}

/* Cards - fade in while scaling smoothly from 95% to 100% */
@keyframes anim-card {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: var(--anim-opacity, 1); transform: scale(1); }
}

[data-anim="card"].is-inview {
  animation-name: anim-card;
  animation-duration: var(--anim-duration-card);
}

/* Images - gentle directional slide, slower than the text around them */
@keyframes anim-image-left {
  from { opacity: 0; transform: translate3d(calc(-1 * var(--anim-shift-image)), 0, 0); }
  to   { opacity: var(--anim-opacity, 1); transform: translate3d(0, 0, 0); }
}

@keyframes anim-image-right {
  from { opacity: 0; transform: translate3d(var(--anim-shift-image), 0, 0); }
  to   { opacity: var(--anim-opacity, 1); transform: translate3d(0, 0, 0); }
}

@keyframes anim-image-up {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to   { opacity: var(--anim-opacity, 1); transform: translate3d(0, 0, 0); }
}

[data-anim="image-left"].is-inview,
[data-anim="image-right"].is-inview,
[data-anim="image-up"].is-inview {
  animation-duration: var(--anim-duration-image);
}

[data-anim="image-left"].is-inview  { animation-name: anim-image-left; }
[data-anim="image-right"].is-inview { animation-name: anim-image-right; }
[data-anim="image-up"].is-inview    { animation-name: anim-image-up; }

/* Top-to-bottom reveal - a clip wipe rather than a slide, so the element
   uncovers itself in place. The fade lands ahead of the wipe so the edge is
   never a hard line. Insets are percentages on every side so the two states
   always interpolate, and the horizontal/top slack keeps the wipe from
   clipping anything that legitimately overflows the box. */
@keyframes anim-wipe {
  from { opacity: 0; clip-path: inset(-25% -14% 100% -14%); }
  55%  { opacity: var(--anim-opacity, 1); }
  to   { opacity: var(--anim-opacity, 1); clip-path: inset(-25% -14% -25% -14%); }
}

[data-anim="wipe"].is-inview {
  animation-name: anim-wipe;
  animation-duration: 1.3s;
  animation-timing-function: var(--anim-ease-wipe);
}

/* Same wipe, tuned for the portrait: its image deliberately breaks past the
   top of its frame, so the top inset has to stay well clear of it. */
@keyframes anim-wipe-portrait {
  from { opacity: 0; clip-path: inset(-30% -20% 100% -20%); }
  45%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(-30% -20% -4% -20%); }
}

[data-anim="wipe-portrait"].is-inview {
  animation-name: anim-wipe-portrait;
  animation-duration: 1.6s;
  animation-timing-function: var(--anim-ease-wipe);
}

/* Quiet fade for ornaments */
@keyframes anim-fade {
  from { opacity: 0; }
  to   { opacity: var(--anim-opacity, 1); }
}

[data-anim="fade"].is-inview {
  animation-name: anim-fade;
  animation-duration: var(--anim-duration-image);
}

/* Entrance over: drop the animation so the element falls back to its own
   styles (hover transforms included) and release the compositor hint, so
   nothing stays promoted to a layer for the rest of the visit.
   This must stay after every `animation-name` rule above - it shares their
   specificity, so it only wins by coming last. */
[data-anim].anim-done {
  animation: none;
  will-change: auto;
}

/* Elements whose resting opacity is not 1 - the keyframes fade up to this
   value instead of overshooting to fully opaque. */
.why-now-logo { --anim-opacity: 0.75; }
.principles-number { --anim-opacity: 0.92; }

/* --------------------------------------------------------------------------
   Hover refinements
   -------------------------------------------------------------------------- */

/* Pointer devices only: on touch, :hover sticks after a tap. */
@media (hover: hover) {
  .instagram-video {
    transition: transform 0.7s var(--hover-ease);
  }

  .instagram-post:hover .instagram-video {
    transform: scale(1.05);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion - nothing hides, nothing moves, nothing drifts
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-anim]:not(.is-inview):not(.anim-done) {
    opacity: var(--anim-opacity, 1);
  }

  [data-anim].is-inview,
  [data-anim].anim-done {
    animation: none;
    will-change: auto;
  }

  .magazine-section::before,
  .why-now-section::before,
  .contact-glow {
    transform: none;
    will-change: auto;
  }

  .instagram-video {
    transition: none;
  }

  .instagram-post:hover .instagram-video {
    transform: none;
  }
}