/* =========================================================
   Sanskarshala — About Us page
   (header, menu, hero leaves: style.css · container, reveal,
    section-title, footer: home.css)
   ========================================================= */

html {
  scroll-padding-top: 9.375rem;     /* anchor jumps land below the sticky section bar */
}

/* ============ PAGE HEADLINE ============ */

.about-hero {
  min-height: 88vh;
  min-height: 88svh;
}

.about-hero .hero__content {
  position: relative;
  z-index: 1;
}

.about-hero__eyebrow {
  margin: 0 0 1.375rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

.about-hero__title {
  max-width: 15em;
  font-size: clamp(2.2rem, 3.8vw + 1rem, 4.6rem);
}

/* ============ IN-PAGE NAVIGATION ============ */

/* pinned just below the hanging menu tab; ::before fills the strip above it */
.subnav {
  --tab-h: 3.625rem;   /* the height of the hanging menu tab (style.css .menu-tab) */
  position: sticky;
  top: var(--tab-h);
  z-index: 20;
  background: rgba(246, 241, 230, 0.98);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  border-bottom: 1px solid rgba(4, 82, 29, 0.12);
}

.subnav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--tab-h);
  background: inherit;
  backdrop-filter: inherit;
  -webkit-backdrop-filter: inherit;
}

/* not stuck yet (about.js): no filler, the green banner above shows in full */
.subnav.is-free::before {
  visibility: hidden;
}

.subnav__list {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  max-width: 87.5rem;
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav__list::-webkit-scrollbar {
  display: none;
}

.subnav__list a {
  display: block;
  padding: 0.625rem 1rem;
  border-radius: 62.4375rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.subnav__list a:hover,
.subnav__list a:focus-visible {
  background: rgba(4, 82, 29, 0.08);
  outline: none;
}

.subnav__list a.is-current {
  background: var(--menu-green);
  color: var(--cream);
}

/* ============ SHARED SECTION BITS ============ */

.about-sec {
  padding: clamp(5rem, 10vw, 9.375rem) 0;
  color: var(--ink);
}

.section-title--light {
  color: var(--cream);
}

/* ============ OUR STORY ============ */

.story-sec {
  background: var(--cream);
}

.story-sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6.875rem);
  align-items: start;
}

.story-sec__side {
  position: static;              /* picture stays in place (no sticky follow) */
}

.story-sec__img {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: clamp(1.75rem, 3vw, 2.75rem) 0 0;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 1.25rem 3.125rem rgba(30, 43, 34, 0.14);
}

/* tall picture, so the left column is as long as the story beside it.
   A little taller than the frame and pinned to the bottom, so the white strip
   along the top of the picture stays hidden. */
.story-sec__img img {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 72% 100%;     /* the teacher and the nearest children */
}

.story-sec__text p {
  margin: 0 0 1.625rem;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.7;
  color: var(--muted);
}

.story-sec__text .story-sec__lead {
  margin-bottom: 2.25rem;
  font-size: clamp(1.45rem, 2.3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--ink);
}

/* the question sits on its own line */
.story-sec__lead em {
  display: block;
  margin-top: 0.5em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--menu-green);
}

.story-sec__text .story-sec__close {
  margin: 2.5rem 0 0;
  padding: 1.625rem 0 0 1.625rem;
  border-left: 0.1875rem solid var(--orange);
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--menu-green);
}

/* ============ MISSION + VISION ============ */

.mv-sec {
  background: var(--menu-green);
  background:
    radial-gradient(ellipse 50% 70% at 10% 10%, rgba(185, 226, 140, 0.12), transparent 70%),
    var(--menu-green);
}

.mv-sec__grid {
  --drop: 4.5rem;                 /* nail → top of card */
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;          /* both cards get the same height */
  padding-top: calc(var(--drop) + 1.375rem);
}

/* wooden rail */
.mv-sec__grid::before {
  content: "";
  position: absolute;
  top: 0.625rem;
  left: calc(var(--gutter) - 0.875rem);
  right: calc(var(--gutter) - 0.875rem);
  height: 1rem;
  border-radius: 0.5rem;
  background:
    radial-gradient(circle at 0.5rem 50%, #e8c36a 0 0.375rem, transparent 0.4375rem),
    radial-gradient(circle at calc(100% - 0.5rem) 50%, #e8c36a 0 0.375rem, transparent 0.4375rem),
    linear-gradient(180deg, #d39a5c 0%, #a8683a 55%, #7a4623 100%);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mv-hang {
  position: relative;
  display: flex;
  flex-direction: column;
}

.mv-hang--vision {
  --delay: 0.12s;
}

/* sways around its nail */
.mv-hang__swing {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  transform-origin: 50% calc(var(--drop) * -1);
  animation: sway 6.5s ease-in-out infinite;
}

.mv-hang--vision .mv-hang__swing {
  animation-delay: 0s;           /* sways in step with Mission, so the pair matches */
}

@keyframes sway {
  0%, 100% { rotate: -1.4deg; }
  50%      { rotate: 1.4deg; }
}

.mv-hang__nail {
  position: absolute;
  top: calc(var(--drop) * -1 - 0.5rem);
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-left: -0.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3c4 0 2px, #e3b54f 0.1875rem, #9c6b17 100%);
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.mv-hang__cords {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 100%;
  height: var(--drop);
  z-index: 1;
}

.mv-hang__cords svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mv-hang__cords path {
  stroke: #f1e3bf;
  stroke-width: 2.5px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

/* clips where the cords hold the card */
.mv-hang__clip {
  position: absolute;
  top: -0.75rem;
  z-index: 3;
  width: 1rem;
  height: 1.625rem;
  margin-left: -0.5rem;
  border-radius: 0.25rem;
  background: linear-gradient(180deg, #f0c85c, #b8862a);
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mv-hang__clip--l { left: calc(16% + 68% * 0.06); }
.mv-hang__clip--r { left: calc(16% + 68% * 0.94); }

.mv-card {
  flex: 1;                       /* fills the row, so Mission and Vision are the same size */
  box-shadow: 0 1.625rem 2.5rem rgba(0, 0, 0, 0.25);
}

.mv-card {
  position: relative;
  padding: clamp(2.25rem, 4vw, 3.75rem);
  border-radius: 1.5rem;
  background: #fff;
  color: var(--ink);
  transition: transform 0.35s ease, opacity 0.8s ease;
}

.mv-hang:hover .mv-card {
  transform: translateY(0.25rem);   /* a gentle tug */
}

.mv-card--vision {
  --delay: 0.12s;
}

/* animated icon (videos/mission.mp4, videos/vision.mp4) */
.mv-card__icon {
  display: block;
  width: clamp(4.5rem, 7vw, 6rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
}

.mv-card__title {
  margin: 1.375rem 0 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--menu-green);
}

.mv-card__text {
  margin: 0;
}

.mv-card__text p {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.95rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

/* ============ THE JAINUINE FOUNDATION ============ */

.foundation-sec {
  --gap: clamp(3.5rem, 6vw, 6rem);    /* space above the kids = space below the green card */
  position: relative;
  overflow: hidden;
  padding-bottom: var(--gap);
  background:
    radial-gradient(ellipse 45% 55% at 0% 0%, rgba(247, 210, 62, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 50% at 100% 100%, rgba(73, 182, 214, 0.16), transparent 70%),
    radial-gradient(ellipse 35% 45% at 100% 10%, rgba(63, 174, 73, 0.12), transparent 70%),
    var(--paper);
}

/* big logo flower turning slowly behind everything */
.foundation-sec__flower {
  position: absolute;
  top: -7.5rem;
  right: -8.75rem;
  width: 32.5rem;
  height: 32.5rem;
  opacity: 0.1;
  animation: spin 60s linear infinite;
  pointer-events: none;
}

.foundation-sec .container {
  position: relative;
}

.foundation-sec__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 1.5rem clamp(2.5rem, 6vw, 6.25rem);
  align-items: center;
}

.foundation-sec__intro {
  max-width: 34em;
  margin: 1.5rem 0 0;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.7;
  color: var(--muted);
}

/* the boy on the paper plane, gently flying */
.foundation-sec__plane {
  width: 100%;
  max-width: 27.5rem;
  justify-self: end;
  filter: drop-shadow(0 1.5rem 1.375rem rgba(30, 43, 34, 0.22));
  animation: fly 6s ease-in-out infinite;
}

@keyframes fly {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50%      { translate: -0.875rem -1.125rem; rotate: 2deg; }
}

.foundation-sec__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.125rem, 2.4vw, 2rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.f-pillar {
  --c1: #ff9a3c;
  --c2: #e8621a;
  position: relative;
  overflow: hidden;
  padding: 1.875rem 1.875rem 2.25rem;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, var(--c1), var(--c2));
  color: #fff;
  box-shadow: 0 1.125rem 2.25rem -0.75rem var(--c2);
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.8s ease;
}

.f-pillar--civic { --c1: #4cc05a; --c2: #1f8a3a; --delay: 0.12s; }
.f-pillar--patriotism { --c1: #4cc3e8; --c2: #1f7fb8; --delay: 0.24s; }

.f-pillar:hover {
  transform: translateY(-0.5rem) rotate(-0.6deg);
  box-shadow: 0 1.75rem 2.75rem -0.75rem var(--c2);
}

.f-pillar__bloom {
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  width: 10.625rem;
  height: 10.625rem;
  fill: rgba(255, 255, 255, 0.14);
  transition: transform 0.8s ease;
}

.f-pillar:hover .f-pillar__bloom {
  transform: rotate(60deg) scale(1.08);
}

.f-pillar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.f-pillar__icon {
  display: grid;
  place-items: center;
  width: 3.625rem;
  height: 3.625rem;
  border-radius: 50%;
  background: #fff;
  color: var(--c2);
  box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.12);
}

.f-pillar__icon svg {
  width: 1.625rem;
  height: 1.625rem;
}

.f-pillar__num {
  font-family: var(--font-serif);
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
}

.f-pillar h3 {
  position: relative;
  margin: 1.625rem 0 0.625rem;
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.f-pillar p {
  position: relative;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.f-pillar p::first-letter {
  text-transform: uppercase;
}

/* closing line on a green banner, children peeking over its top edge */
.foundation-sec__banner {
  position: relative;
  isolation: isolate;
  /* kids are 1005x257; about 93% of their height shows above the card */
  margin: calc(var(--gap) + min(41.25rem, 86%) * 0.238) 0 0;
  padding: clamp(2.5rem, 4.6vw, 4rem) clamp(1.5rem, 4vw, 4rem);
  color: var(--cream);
  text-align: center;
}

/* the green card itself */
.foundation-sec__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 1.75rem;
  background: linear-gradient(100deg, #0f5a22 0%, #17692c 55%, #2a7d3c 100%);
  box-shadow: 0 1.125rem 2.5rem rgba(4, 82, 29, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* in front of the card: only the hands rest on its top edge, faces and shoulders above it */
.foundation-sec__faces {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 1;
  width: min(41.25rem, 86%);
  translate: -50% 7%;             /* just the hands overlap the card */
  pointer-events: none;
}

.foundation-sec__close {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.foundation-sec__close .accent-serif {
  font-size: 1.25em;             /* "good citizens." a little bigger than the rest */
  color: var(--yellow);
}

/* ============ WHY MORAL EDUCATION MATTERS NOW ============ */

.why-sec {
  background: var(--cream);
  overflow-x: clip;   /* the tilted 3D picture never makes the page wider than the screen */
}

.why-sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6.25rem);
  align-items: center;
}

.why-sec__text .section-title {
  margin-bottom: 1.875rem;
}

.why-sec__text p {
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.7;
  color: var(--muted);
}

.why-sec__text .why-sec__em {
  margin: 0;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  background: #fff;
  border-left: 0.25rem solid var(--orange);
  font-size: clamp(1.1rem, 1.45vw, 1.35rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}

/* ---- 3D picture ---- */

.why3d {
  position: relative;
  padding: 2.5rem 0.625rem 4.375rem;
  perspective: 81.25rem;
}

.why3d__stage {
  position: relative;
  aspect-ratio: 2 / 1.12;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 7deg)) rotateY(var(--ry, -16deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.why3d.is-tilting .why3d__stage {
  transition-duration: 0.12s;
}

/* coloured plate behind: gives the frame thickness */
.why3d__plate {
  position: absolute;
  inset: 0;
  border-radius: 1.75rem;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  transform: translate3d(1.375rem, 1.375rem, -3.125rem);
}

/* sky panel */
.why3d__panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1.75rem;
  background: linear-gradient(180deg, #6fc2ee 0%, #b5e1f6 55%, #e6f5fb 100%);
  box-shadow: inset 0 0 0 0.375rem rgba(255, 255, 255, 0.65), 0 1.875rem 3.75rem rgba(30, 43, 34, 0.25);
}

/* glossy reflection that moves with the tilt */
.why3d__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, transparent 60%);
  translate: var(--gloss, 0%) 0;
  transition: translate 0.6s ease;
}

.why3d__sun {
  position: absolute;
  top: 10%;
  right: 12%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c2 0 35%, #ffd84a 60%, rgba(255, 216, 74, 0) 72%);
}

.why3d__cloud {
  position: absolute;
  height: 12%;
  border-radius: 62.4375rem;
  background: #fff;
  opacity: 0.85;
  filter: blur(1px);
  animation: drift 18s linear infinite;
}

.why3d__cloud::before {
  content: "";
  position: absolute;
  left: 22%;
  bottom: 40%;
  width: 45%;
  height: 130%;
  border-radius: 50%;
  background: inherit;
}

.why3d__cloud--1 { top: 12%; left: 8%; width: 24%; }
.why3d__cloud--2 { top: 24%; left: 52%; width: 18%; animation-duration: 24s; animation-delay: -9s; }

@keyframes drift {
  from { translate: -30% 0; }
  to   { translate: 60% 0; }
}

/* the picture stands forward, out of the frame */
.why3d__img {
  position: absolute;
  left: -5%;
  bottom: 0;
  width: 110%;
  transform: translateZ(3.75rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  filter: drop-shadow(0 1.125rem 1rem rgba(0, 0, 0, 0.22));
  border-radius: 0 0 1.75rem 1.75rem;
}

/* school items floating in front */
.why3d__float {
  position: absolute;
  width: 13%;
  aspect-ratio: 1;
  overflow: visible;
  filter: drop-shadow(0 0.625rem 0.5rem rgba(0, 0, 0, 0.25));
  animation: bob 5s ease-in-out infinite;
}

.why3d__float--1 { top: -6%; left: 4%; fill: var(--orange); color: var(--orange); transform: translateZ(7.5rem) rotate(-30deg); }
.why3d__float--2 { top: -10%; right: 10%; fill: #2e9e3e; color: #2e9e3e; transform: translateZ(6.25rem) rotate(12deg); animation-delay: -1.6s; }
.why3d__float--3 { bottom: -8%; right: -4%; width: 11%; fill: #2a9fc9; color: #2a9fc9; transform: translateZ(8.75rem) rotate(-10deg); animation-delay: -3.2s; }

@keyframes bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -0.75rem; }
}

/* soft shadow on the ground */
.why3d__ground {
  position: absolute;
  left: 12%;
  right: 8%;
  bottom: 1.125rem;
  height: 2.25rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(30, 43, 34, 0.28), transparent 70%);
  filter: blur(0.375rem);
}


/* ============ LAUNCH TIMELINE ============ */

.timeline-sec {
  background: var(--bg);
  color: var(--cream);
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  margin: clamp(3rem, 5vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

/* the line joining the dots */
.timeline::before {
  content: "";
  position: absolute;
  top: 0.5625rem;
  left: 0.625rem;
  right: 0.625rem;
  height: 2px;
  background: linear-gradient(90deg, var(--lime) 0 75%, rgba(185, 226, 140, 0.25) 75% 100%);
}

.timeline__item {
  position: relative;
  padding-top: 2.75rem;
}

.timeline__item:nth-child(2) { --delay: 0.1s; }
.timeline__item:nth-child(3) { --delay: 0.2s; }
.timeline__item:nth-child(4) { --delay: 0.3s; }

/* dot */
.timeline__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0.375rem rgba(185, 226, 140, 0.18);
}

.timeline__item--future::before {
  background: var(--bg);
  border: 2px dashed var(--lime);
  box-shadow: none;
}

.timeline__date {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 62.4375rem;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.timeline__item--future .timeline__date {
  background: transparent;
  border: 1.5px solid var(--lime);
  color: var(--lime);
}

.timeline__title {
  margin: 1.125rem 0 0.625rem;
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.timeline__item p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(246, 241, 230, 0.75);
}

/* ============ RESPONSIVE ============ */

@media (max-width: 1000px) {
  .subnav__list {
    justify-content: flex-start;
  }

  .story-sec__grid,
  .why-sec__grid,
  .foundation-sec__head {
    grid-template-columns: 1fr;
  }

  /* stacked: the story is below the picture, so a wide picture is enough */
  .story-sec__img {
    aspect-ratio: 4 / 3;
  }

  /* stacked 3D picture: room on both sides for its tilt, back plate and floating tiles */
  .why3d {
    padding-inline: clamp(1.5rem, 6vw, 3rem);
  }

  .foundation-sec__pillars {
    grid-template-columns: 1fr;
  }

  .foundation-sec__plane {
    justify-self: center;
    max-width: 20rem;
  }

  /* timeline turns vertical */
  .timeline {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .timeline::before {
    top: 0.625rem;
    bottom: 0.625rem;
    left: 0.5625rem;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--lime) 0 75%, rgba(185, 226, 140, 0.25) 75% 100%);
  }

  .timeline__item {
    padding: 0 0 0 3rem;
  }
}

@media (max-width: 720px) {
  .subnav {
    --tab-h: 2.625rem;
  }

  /* stacked: each card gets its own short rail */
  .mv-sec__grid {
    row-gap: calc(var(--drop) + 2.5rem);
  }

  .mv-sec__grid::before {
    display: none;
  }

  .mv-hang::before {
    content: "";
    position: absolute;
    top: calc(var(--drop) * -1 - 0.5rem);
    left: 25%;
    right: 25%;
    height: 0.875rem;
    border-radius: 0.4375rem;
    background: linear-gradient(180deg, #d39a5c 0%, #a8683a 55%, #7a4623 100%);
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.28);
  }

  .mv-sec__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .why3d__stage {
    --rx: 5deg;
    --ry: -9deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-hang__swing,
  .foundation-sec__plane,
  .foundation-sec__flower,
  .why3d__cloud,
  .why3d__float {
    animation: none;
  }
}