/* Innovel Full Stack landing page tokens */
:root {
  --color-red: #d22028;
  --color-red-dark: #a3050d;
  --color-red-deep: #6c1015;
  --color-red-soft: #f8e9e9;
  --color-blue: #2a398d;
  --color-blue-dark: #1c2b7c;
  --color-navy: #122133;
  --color-black: #000;
  --color-white: #fff;
  --color-surface: #f5f5f5;
  --color-input: #f0f0f0;
  --color-muted: rgba(0, 0, 0, 0.51);
  --color-muted-white: rgba(255, 255, 255, 0.76);
  --color-line: rgba(0, 0, 0, 0.11);
  --font-body: "Lato", sans-serif;
  --font-form: "Roboto", sans-serif;
  --font-phone: "Inter", sans-serif;
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-form: 0 6px 8.7px 1px rgba(0, 0, 0, 0.34);
  --shadow-image: 0 8px 10.1px rgba(0, 0, 0, 0.43);
  --shadow-button: 1px 4px 4px rgba(0, 0, 0, 0.18);
  --content-max: 1296px;
  --header-height: 74px;
  --environment-mosaic-width: 558px;
  --environment-mosaic-height: 876px;
  --environment-tile-gap: 22px;
  --environment-stack-gap: 16px;
  --environment-tile-radius: 22px;
  --environment-storefront-radius: 16px;
  --projects-content-width: 1286px;
  --projects-carousel-width: 1260px;
  --projects-card-ratio: 2.04;
  --projects-card-gap: 40px;
  --projects-peek: 112px;
  --projects-control-gap: 56px;
  --partners-row-width: 1222px;
  --partners-logo-gap: 168px;
  --partner-logo-width: 110px;
  --partner-meta-width: 122px;
  --partner-logo-height: 84px;
  --projects-heading-size: 50px;
  --projects-heading-line-height: 59px;
  --projects-transition: 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease: 220ms ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  /* Horizontal scrolling is fully disabled. overflow-x is used instead of
     overflow so vertical scrolling on the root stays native and smooth. */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  margin: 0;
  color: var(--color-black);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  /* overflow-x (not overflow) so the page still scrolls vertically. */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.modal-open {
  overflow: hidden;
}

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

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

button,
a[href] {
  cursor: pointer;
}

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

:focus-visible {
  outline: 3px solid rgba(42, 57, 141, 0.65);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.container {
  width: min(calc(100% - 48px), var(--content-max));
  margin-inline: auto;
}

.section {
  position: relative;
  isolation: isolate;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  color: var(--color-white);
  background: var(--color-blue);
  border-radius: 6px;
  transform: translateY(-160%);
  transition: transform var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.desktop-only {
  display: inline;
}

/* Shared typography and buttons */
.section-title,
.display-title {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.section-title {
  font-size: clamp(2.3rem, 3.05vw, 2.75rem);
  line-height: 1.16;
}

.display-title {
  font-size: clamp(2.55rem, 3.48vw, 3.125rem);
  line-height: 1.1;
}

.section-title span,
.display-title span {
  color: var(--color-red);
}

.display-title--centered,
.section-title--centered {
  text-align: center;
}

.section-lead {
  margin: 10px 0 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.35;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-button);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  transition:
    transform var(--ease),
    box-shadow var(--ease),
    background-color var(--ease);
}

.button img {
  width: 23px;
  height: 21px;
  object-fit: contain;
  flex: 0 0 auto;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 12px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(0);
}

.button--red {
  color: var(--color-white);
  background: var(--color-red);
}

.button--blue {
  color: var(--color-white);
  background: var(--color-blue);
}

.button--blue:hover {
  background: var(--color-blue-dark);
}

.button--light {
  color: var(--color-black);
  background: var(--color-white);
}

.accent-line {
  display: block;
  width: 42px;
  height: 4px;
  background: var(--color-red);
}

/* Header */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header-height);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  width: 158px;
  height: 74px;
  align-items: center;
}

.brand img {
  width: 158px;
  height: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3.1vw, 45px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a,
.header-contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-black);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 3px;
  background: var(--color-red);
  content: "";
  opacity: 0;
  transform: scaleX(0.4);
  transition:
    opacity var(--ease),
    transform var(--ease);
}

.site-nav a:hover::after,
.site-nav a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.header-contact {
  min-height: 34px;
  padding: 8px 19px;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: 20px;
  font-weight: 700;
  box-shadow: var(--shadow-card);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  color: var(--color-blue);
  background: transparent;
  border-radius: 8px;
}

.menu-toggle span {
  display: block;
  width: 23px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  transition:
    transform var(--ease),
    opacity var(--ease);
}

/* Hero */
.hero-section {
  min-height: 689px;
  overflow: hidden;
  color: #fff4ef;
  background:
    url("assets/hero-diagonal.svg") right top / auto 100% no-repeat,
    linear-gradient(135deg, #7c1218 0%, #a3050d 42%, #5d0d11 100%);
}

.hero-section::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 63%;
  height: 92%;
  background: linear-gradient(
    145deg,
    rgba(210, 32, 40, 0.86),
    var(--color-red-dark)
  );
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  content: "";
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(36px, 6vw, 72px);
  min-height: 689px;
  padding-top: 54px;
  padding-bottom: 70px;
}

.hero-copy {
  align-self: center;
  min-width: 0;
  padding: 28px 0 0;
}

.hero-title {
  max-width: 865px;
  margin: 0;
  font-size: clamp(3rem, 4.17vw, 3.75rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.04em;
}

.hero-title span,
.hero-title strong {
  font-weight: 500;
}

.hero-kicker {
  position: relative;
  display: inline-block;
  padding: 0 18px 5px;
  color: var(--color-black);
  background: linear-gradient(
    90deg,
    #fb9100 0%,
    #fca023 20%,
    #ffd903 40%,
    #fee46f 50%,
    #ffd903 65%,
    #f37100 100%
  );
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.14);
}

.hero-kicker-text {
  display: inline-block;
  background: linear-gradient(90deg, #000000 0%, #ff0000 50%, #800000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-kicker::after {
  content: "";
  position: absolute;
  right: -0.9em;
  bottom: -0.7em;
  width: 1.5em;
  aspect-ratio: 260 / 220;
  background: url("arrow.png") center / contain no-repeat;
  pointer-events: none;
}

.hero-title strong {
  display: inline-block;
  color: #ffcc00;
  background: linear-gradient(
    90deg,
    #ffcc00 0%,
    #ffeeaa 50%,
    #ffcc00 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.hero-title em {
  font-style: normal;
}

.hero-description {
  max-width: 795px;
  margin: 10px 0 20px;
  font-size: clamp(1.15rem, 1.55vw, 1.375rem);
  font-weight: 300;
  line-height: 1.22;
}

.hero-duration {
  margin: 0;
  font-size: clamp(1.2rem, 1.68vw, 1.5rem);
  font-weight: 900;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 54px;
}

.hero-actions .button {
  min-width: 0;
}

.hero-actions .button--red {
  min-width: 325px;
}

.hero-actions .button--blue {
  min-width: 257px;
  font-family: var(--font-phone);
  font-size: 1.25rem;
}

.hero-phone-link {
  background: linear-gradient(
    90deg,
    #2a398d 0%,
    #5f76f8 50%,
    #4558c2 100%
  );
  box-shadow:
    0 0 12px rgba(95, 118, 248, 0.35),
    0 0 24px rgba(69, 88, 194, 0.2);
}

.hero-phone-link:hover {
  background: linear-gradient(
    90deg,
    #2a398d 0%,
    #5f76f8 50%,
    #4558c2 100%
  );
  box-shadow:
    0 0 12px rgba(95, 118, 248, 0.35),
    0 0 24px rgba(69, 88, 194, 0.2);
}

.button-play-icon {
  width: 17px;
  height: 19px;
  flex: 0 0 auto;
  background: url("assets/icon-play-outline.svg") center / contain no-repeat;
}

.phone-circle {
  display: inline-grid;
  width: 37px;
  height: 37px;
  place-items: center;
  color: var(--color-blue);
  background: var(--color-white);
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
}

.hero-call-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: 50%;
  box-shadow: var(--shadow-button);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--ease),
    box-shadow var(--ease),
    background-color var(--ease);
}

.hero-call-icon svg {
  width: 22px;
  height: 22px;
}

.hero-form-card {
  align-self: start;
  min-height: 419px;
  padding: 31px 35px 32px;
  color: var(--color-black);
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: var(--shadow-form);
}

.hero-form-card h2 {
  margin: 0 0 27px;
  font-family: var(--font-form);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
}

/* Lead form */
.lead-form {
  display: grid;
  gap: 12px;
  font-family: var(--font-form);
}

.field-group {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.field-group label {
  min-height: 22px;
  color: var(--color-black);
  font-size: 0.75rem;
  line-height: 1.25;
}

.field-group label span {
  margin-right: 3px;
  color: #c40000;
  font-size: 1rem;
}

.field-group input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 8px 11px;
  color: var(--color-black);
  background: var(--color-input);
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font-form);
  font-size: 0.75rem;
  outline: none;
  transition:
    border-color var(--ease),
    box-shadow var(--ease),
    background-color var(--ease);
}

.field-group input::placeholder {
  color: rgba(0, 0, 0, 0.34);
}

.field-group input:focus {
  background: var(--color-white);
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(42, 57, 141, 0.12);
}

.field-group input[aria-invalid="true"] {
  border-color: var(--color-red);
}

.phone-input {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  background: var(--color-input);
  border-radius: 6px;
}

.phone-input img {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  object-fit: cover;
  border-radius: 2px;
}

.phone-input > span:not(.phone-divider) {
  color: var(--color-black);
  font-size: 0.65rem;
}

.phone-divider {
  width: 1px;
  height: 25px;
  margin: 0 8px;
  background: #bdbdbd;
}

.phone-input input {
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.phone-input input:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.field-error {
  min-height: 0;
  color: var(--color-red-dark);
  font-size: 0.68rem;
  line-height: 1.2;
}

.field-error:not(:empty) {
  min-height: 14px;
}

.lead-submit {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--font-form);
  font-size: 0.875rem;
}

.lead-submit[disabled] {
  cursor: wait;
  opacity: 0.68;
}

.form-status {
  min-height: 17px;
  margin: 0;
  color: var(--color-blue);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
}

.form-status.is-error {
  color: var(--color-red-dark);
}

.form-status.is-success {
  color: #08753a;
}

/* Program video */
.program-section {
  min-height: 827px;
  padding: 47px 0 70px;
  background: #fff url("assets/Frame 113.png") center top / 100% 100% no-repeat;
}

.program-section::before {
  content: none;
}

.program-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-intro--centered {
  max-width: 1000px;
  text-align: center;
}

.section-intro--centered .display-title span {
  display: inline-block;
}

.section-intro--centered p {
  max-width: 980px;
  margin: 8px auto 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.3;
}

.program-video {
  position: relative;
  width: min(100%, 782px);
  aspect-ratio: 16 / 9;
  margin-top: 42px;
  overflow: hidden;
  background: #121212;
  border-radius: 29px;
  box-shadow: 0 0 0 13px #f8f8f8;
  cursor: pointer;
}

.program-video.is-playing {
  cursor: default;
}

.program-video-iframe-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #000;
  border-radius: inherit;
  overflow: hidden;
}

.program-video-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.program-video.is-playing .program-video-shade,
.program-video.is-playing .video-play-button,
.program-video.is-playing .video-controls,
.program-video.is-playing > img {
  display: none;
}

.program-video > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.program-video-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    transparent 100%
  );
  pointer-events: none;
}

.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 61px;
  height: 61px;
  padding: 0;
  place-items: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    transform var(--ease),
    background-color var(--ease);
}

.video-play-button:hover {
  background: rgba(255, 255, 255, 0.42);
  transform: translate(-50%, -50%) scale(1.08);
}

.video-play-button img {
  width: 61px;
  height: 61px;
  filter: brightness(0) invert(1);
}

.video-controls {
  position: absolute;
  right: 35px;
  bottom: 24px;
  left: 35px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-white);
}

.video-control {
  display: inline-grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  color: var(--color-white);
  background: transparent;
}

.video-control--play img {
  width: 22px;
  height: 24px;
  object-fit: contain;
}

.video-control img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.video-control--fullscreen img {
  width: 24px;
  height: 24px;
}

.video-control--more {
  width: auto;
  letter-spacing: 4px;
  font-size: 1.15rem;
}

.video-progress {
  position: relative;
  flex: 1;
  height: 7px;
  background: #c40000;
}

.video-progress span {
  display: block;
  width: 39%;
  height: 100%;
  background: #fff;
}

.expert-button {
  margin-top: 72px;
  min-width: 275px;
}

/* The arrow icon becomes a traditional Deepavali cracker rocket. The artwork
   already ships with the project (assets/festive-cracker-rocket.svg: pointed red
   nose, striped gold body, red fins, two-layer flame) and the final CTA button
   already uses the same file, so this adds no new asset and pulls in no icon
   font.

   24x28 preserves the 26:30 viewBox ratio and stays close to the 23x21 arrow it
   replaces. At 28px tall the button still resolves to its existing 56px
   min-height (28 + 13*2 padding), and the 275px min-width is far wider than
   text + 14px gap + icon, so the box does not move or grow at all.

   The halo needs its own layer, hence the wrapper span: an <img> cannot take a
   pseudo-element, and pulsing the img's own filter would make a hover filter
   impossible, because a running animation always beats a normal declaration.
   Keeping the pulse on the wrapper's ::before leaves the img's filter free to
   answer :hover. z-index: 0 on the wrapper creates the stacking context that
   holds the negative-z halo above the button's blue background - without it the
   halo would fall through to the section's context and vanish behind the blue. */
/* 90deg clockwise turns the artwork's nose-up drawing into a rocket lying on its
   side, nose pointing right and the flame trailing on the left. The rotation is
   static and never animated, and it is applied to the wrapper rather than to the
   img so the halo below turns with it - a 90deg clockwise turn carries the
   wrapper's bottom edge (where the glow core sits) round to the left edge, which
   puts the brightest part of the glow behind the flame instead of under a nose
   cone that now points sideways. The img keeps its 24x28 portrait box, so the
   flex row and the 56px button height are unaffected; only the painted result is
   the 28x24 landscape shape. */
.expert-button .expert-button-cracker {
  position: relative;
  z-index: 0;
  display: inline-flex;
  transform: rotate(90deg);
}

/* Centred at 78% height so the bright core of the glow lands on the flame at
   the bottom of the illustration rather than over the nose cone. After the
   wrapper's rotation that bottom edge is the rocket's left side. */
.expert-button .expert-button-cracker::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% -30% -20% -30%;
  background: radial-gradient(
    58% 50% at 50% 78%,
    rgba(255, 219, 138, 0.95) 0,
    rgba(255, 170, 42, 0.55) 36%,
    rgba(255, 132, 0, 0) 72%
  );
  pointer-events: none;
  animation: cracker-rocket-glow 2.4s ease-in-out infinite;
}

.expert-button .expert-button-cracker img {
  width: 24px;
  height: 28px;
  filter: drop-shadow(0 0 2px rgba(255, 206, 92, 0.8));
  transition: filter var(--ease);
}

.expert-button:hover .expert-button-cracker img {
  filter: drop-shadow(0 0 4px rgba(255, 224, 130, 1))
    drop-shadow(0 1px 3px rgba(255, 150, 30, 0.85));
}

/* Opacity is the only animated property: the glow breathes, while the rocket
   itself never moves, spins, rotates or flies. Both extremes are held for a
   moment so the pulse eases like a pendulum instead of ticking evenly. */
@keyframes cracker-rocket-glow {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .expert-button .expert-button-cracker::before {
    animation: none;
    opacity: 0.75;
  }
}

/* Curriculum */
.curriculum-section {
  min-height: 650px;
  padding: 68px 0 76px;
  background: var(--color-white);
}

.curriculum-section::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 324px;
  background: linear-gradient(
    217.75deg,
    var(--color-red) 27.69%,
    var(--color-red-dark) 80.85%
  );
  content: "";
}

.curriculum-inner {
  position: relative;
}

.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 29px;
  margin-top: 55px;
}

.program-card {
  display: flex;
  min-width: 0;
  min-height: 434px;
  flex-direction: column;
  gap: 12px;
  padding: 13px;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 4px 7px 5.3px rgba(0, 0, 0, 0.28);
}

.program-card > img {
  width: 100%;
  aspect-ratio: 315 / 277;
  object-fit: cover;
  border-radius: 14px;
}

.program-card-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.program-card h3 {
  min-height: 27px;
  margin: 0;
  overflow: hidden;
  color: var(--color-blue);
  font-size: clamp(1.05rem, 1.48vw, 1.375rem);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.program-card h3 strong {
  color: var(--color-black);
  font-weight: 800;
}

.program-card .accent-line {
  margin-top: 4px;
}

.program-card h4 {
  margin: 9px 0 0;
  color: var(--color-navy);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.program-card p {
  margin: 7px 0 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.2;
}

.syllabus-button {
  display: flex;
  width: min(100%, 375px);
  margin: 67px auto 0;
}

/* Learning environment */
.environment-section {
  height: 820px;
  min-height: 820px;
  overflow: hidden;
  background: var(--color-white) url("assets/learning-environment-bg.png")
    center / cover no-repeat;
}

.environment-overlay {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.9) 51%,
    rgba(255, 255, 255, 0.48) 78%,
    rgba(255, 255, 255, 0.16) 100%
  );
}

.environment-inner {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: none;
  min-height: 820px;
  grid-template-columns: minmax(0, 1fr) var(--environment-mosaic-width);
  align-items: start;
  gap: 48px;
  margin: 0;
  padding: 0 29px 0 72px;
}

.environment-copy {
  position: relative;
  margin-top: 355px;
  padding-left: 86px;
}

.quote-mark {
  position: absolute;
  top: -18px;
  left: 18px;
  color: rgba(0, 0, 0, 0.3);
  font-family: Georgia, serif;
  font-size: 9.5rem;
  line-height: 1;
}

.environment-copy h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(2.8rem, 4.17vw, 3.75rem);
  font-weight: 700;
  line-height: 0.92;
}

.environment-copy h2 span {
  color: var(--color-red);
}

.environment-mosaic {
  position: relative;
  width: min(100%, var(--environment-mosaic-width));
  aspect-ratio: 558 / 876;
  justify-self: end;
  margin-top: 24px;
  overflow: visible;
}

.environment-tile {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--environment-tile-radius);
  box-shadow: var(--shadow-card);
}

.environment-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.environment-tile--lounge {
  top: 0;
  left: 0;
  width: 48.0287%;
  height: 42.6941%;
}

.environment-tile--storefront {
  top: 0;
  left: 52%;
  width: 48.0287%;
  height: 9.1324%;
  border-radius: var(--environment-storefront-radius);
}

.environment-tile--students {
  top: 10.9589%;
  left: 52%;
  width: 48.0287%;
  height: 44.5205%;
}

.environment-tile--classroom {
  top: 44.5205%;
  left: 0;
  width: 48.0287%;
  height: 44.5205%;
}

.environment-tile--corridor {
  top: 57.3059%;
  left: 52%;
  width: 48.0287%;
  height: 42.6941%;
}

/* Tools: aligned category cards with consistently sized sprite icons. */
.tools-section {
  padding: clamp(48px, 5vw, 76px) 0;
  background: var(--color-white) url("assets/learning-environment-bg.png")
    center / cover no-repeat;
}
.tools-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(255, 255, 255, 0.86);
}
.tools-inner .section-title {
  max-width: 1000px;
  margin-inline: auto;
  font-size: clamp(28px, 3.05vw, 44px);
  line-height: 1.2;
  font-weight: 600;
  text-wrap: balance;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 44px auto 0;
}
.tool-group {
  min-width: 0;
  padding: 28px 20px 36px;
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.tool-group h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  max-width: 220px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
}
.tool-icons {
  display: grid;
  grid-template-columns: repeat(2, 96px);
  grid-auto-rows: 108px;
  justify-content: center;
  align-content: start;
  gap: 20px 16px;
  min-height: 236px;
  margin: 24px auto 0;
}
.tool-tile {
  position: relative;
  display: block;
  width: 96px;
  height: 108px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 16px;
  transform-origin: center;
  transition:
    transform 280ms cubic-bezier(0.2, 0.75, 0.25, 1),
    filter 280ms ease;
}
.tool-tile:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 5px;
  transform: translateY(-6px) scale(1.1);
  filter: drop-shadow(0 9px 6px #0003);
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .tool-tile:hover {
    transform: translateY(-6px) scale(1.1);
    filter: drop-shadow(0 9px 6px #0003);
    z-index: 1;
  }
}
.tool-html {
  background-image: url("assets/tool-html.png");
}
.tool-css {
  background-image: url("assets/tool-css.png");
}
.tool-java {
  background-image: url("assets/tool-java.png");
}
.tool-python {
  background-image: url("assets/tool-python.png");
}
.tool-mysql {
  background-image: url("assets/tool-mysql.png");
}
.tool-js {
  background-image: url("assets/tool-js.png");
}
.tool-react {
  background-image: url("assets/tool-react.png");
}
.tool-node {
  background-image: url("assets/tool-node.png");
}
.tool-api {
  background-image: url("assets/tool-api.png");
}
.tool-mongo {
  background-image: url("assets/tool-mongo.png");
}
.tool-vscode {
  background-image: url("assets/tool-vscode.png");
}
.tool-git {
  background-image: url("assets/tool-git.png");
}
.tool-github {
  background-image: url("assets/tool-github.png");
}
.tool-postman {
  background-image: url("assets/tool-postman.png");
}
@media (max-width: 1100px) {
  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
  }
}
.tools-mobile-break {
  display: none;
}
/* Mobile reference: category labels beside one horizontal row of icons. */
@media (max-width: 600px) {
  .tools-mobile-break {
    display: block;
  }
  .tools-section {
    padding: 32px 0 38px;
    background: #fff;
  }
  .tools-overlay {
    display: none;
  }
  .tools-section .tools-inner {
    width: calc(100% - 40px);
  }
  .tools-inner .section-title {
    max-width: 340px;
    text-wrap: initial;
    font-size: clamp(16px, 4.6vw, 18px);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .tools-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 400px;
    gap: 18px;
    margin-top: 10px;
  }
  .tool-group {
    display: grid;
    grid-template-columns: 25% minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-height: 91px;
    padding: 12px 8px 12px 15px;
    border: 0;
    border-radius: 7px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }
  .tool-group h3 {
    display: block;
    min-height: 0;
    max-width: none;
    margin: 0;
    font-size: clamp(8px, 2.55vw, 10px);
    line-height: 1.12;
    font-weight: 700;
    text-align: left;
  }
  .tool-icons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: center;
    min-height: 0;
    gap: 2px;
    width: 100%;
    margin: 0;
  }
  .tool-tile {
    width: 100%;
    height: auto;
    aspect-ratio: 192 / 216;
    border-radius: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-tile {
    transition: none;
  }
  .tool-tile:hover,
  .tool-tile:focus-visible {
    transform: none;
  }
}

/* Students */
.students-section {
  min-height: 478px;
  padding: 49px 0 60px;
  background: var(--color-white);
}

/* Carousel viewport — main card plus a partial preview of the next card. */
.student-cards {
  --student-gap: 26px;
  --student-peek: clamp(118px, 12vw, 168px);
  position: relative;
  display: flex;
  gap: var(--student-gap);
  margin-top: 80px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.student-cards::-webkit-scrollbar {
  display: none;
}

.student-cards:active {
  cursor: grabbing;
}

.student-cards:focus-visible {
  outline: none;
}

.student-cards img {
  -webkit-user-drag: none;
}

.student-card {
  position: relative;
  flex: 0 0 calc(100% - var(--student-peek));
  height: 268px;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

/* The next card preview is muted so the main card stays dominant. */
.student-card:not(.is-current) {
  filter: saturate(0.68) brightness(0.86);
}

.student-card:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: -3px;
}

/* The Success Spotlight card design is always shown — no click-to-expand. */
.student-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #8e1420 0%, #b51e2c 50%, #e03340 100%);
  z-index: 1;
}

.student-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

/* Red tint overlay over the right-side cutout (above PNG, below text) */
.student-visual::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  background: linear-gradient(
    180deg,
    rgba(190, 24, 32, 0.1) 0%,
    rgba(150, 14, 24, 0.4) 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* Student cutout — RIGHT ~42%, full height, above red bg */
.student-img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  z-index: 2;
  filter: saturate(1.05);
}

/* Ghost copy and the default name bar are not used in the spotlight card */
.student-ghost,
.student-name {
  display: none;
}

/* Details overlay — text (LEFT 58%) + spotlight (RIGHT 42%) */
.student-hover-details {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: 58% 42%;
}

/* LEFT zone: text content, transparent so smooth gradient shows through */
.student-hover-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 10px 20px 28px;
  color: #fff;
  z-index: 20;
  text-shadow: 0 1px 4px rgba(60, 5, 10, 0.35);
}

.student-hover-name {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.15;
  margin-bottom: 16px;
  white-space: nowrap;
}

.student-hover-field {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.student-hover-field span {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  opacity: 0.75;
  margin-bottom: 2px;
}

/* RIGHT edge: SUCCESS SPOTLIGHT — vertical text, above the image (z 10), far-right edge */
.success-spotlight {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* Why Innovel */
.why-section {
  min-height: 477px;
  color: var(--color-white);
  background: linear-gradient(
    180deg,
    var(--color-red) 0%,
    var(--color-red-deep) 100%
  );
}

.why-inner {
  padding-top: 44px;
}

.why-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.why-heading-row h2 {
  margin: 0;
  font-size: clamp(2.1rem, 3.48vw, 3.125rem);
  font-weight: 400;
  line-height: 1.18;
}

.why-heading-row h2 strong {
  font-weight: 600;
}

.why-cta {
  flex: 0 0 auto;
  min-width: 316px;
  font-size: 1.1rem;
}

.benefit-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  min-height: 128px;
  margin: 78px -35px 0;
  padding: 42px 25px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
}

.benefit-item {
  position: relative;
  min-width: 0;
  text-align: center;
}

.benefit-item > img,
.benefit-icon {
  position: absolute;
  top: -96px;
  left: 50%;
  display: grid;
  width: 83px;
  height: 83px;
  place-items: center;
  transform: translateX(-50%);
}

.benefit-item > img {
  object-fit: contain;
}

.benefit-item:last-child > img {
  filter: brightness(0) invert(1);
}

.benefit-icon {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
}

.benefit-icon img {
  width: 27px;
  height: 34px;
}

.benefit-item h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
}

.benefit-item p {
  max-width: 220px;
  margin: 14px auto 0;
  font-size: 0.8125rem;
  line-height: 1.15;
}

/* Real stories */
.real-stories-section {
  min-height: 854px;
  background: var(--color-white) url("assets/real-stories-bg.png") center /
    cover no-repeat;
}

.real-stories-inner {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  align-items: center;
  gap: 67px;
  min-height: 854px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.featured-story {
  position: relative;
  height: 590px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

.featured-story > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-story-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 81px;
  padding: 12px 21px;
  background: rgba(255, 255, 255, 0.76);
}

.featured-story-caption > span {
  width: 4px;
  height: 49px;
  flex: 0 0 auto;
  background: var(--color-red);
}

.featured-story-caption h2 {
  margin: 0;
  font-family: var(--font-form);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}

.featured-story-caption p {
  margin: 4px 0 0;
  font-family: var(--font-form);
  font-size: 1rem;
}

.story-list-column {
  min-width: 0;
}

.story-list-column > .display-title {
  margin-bottom: 32px;
}

.story-list-card {
  min-height: 560px;
  padding: 28px 39px 21px;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}

.story-list-card h3 {
  margin: 0 0 4px;
  font-family: var(--font-form);
  font-size: 1.5rem;
  font-weight: 700;
}

.story-list {
  margin-top: 29px;
}

.story-row {
  display: flex;
  gap: 19px;
  min-height: 113px;
  padding: 11px 7px;
  border-bottom: 1px solid var(--color-line);
}

.story-row:last-child {
  border-bottom: 0;
}

.story-row > img {
  width: 55px;
  height: 55px;
  flex: 0 0 auto;
}

.story-details {
  min-width: 0;
}

.story-details h4 {
  margin: 2px 0 0;
  font-family: var(--font-form);
  font-size: 1.25rem;
  font-weight: 700;
}

.story-details p {
  margin: 0;
  color: rgba(0, 0, 0, 0.53);
  font-family: var(--font-form);
  font-size: 0.75rem;
}

.story-watch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  margin-top: 4px;
  padding: 0;
  color: var(--color-black);
  background: transparent;
  font-family: var(--font-form);
  font-size: 0.875rem;
  font-weight: 700;
}

.story-watch .story-play-icon {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

/* Projects and partners */
.projects-section {
  min-height: 872px;
  padding: 49px 0 71px;
  background: var(--color-white);
}

.projects-inner {
  width: min(var(--projects-content-width), calc(100% - 154px));
  max-width: none;
}

.projects-inner > .section-title {
  max-width: 700px;
  font-size: var(--projects-heading-size);
  font-weight: 600;
  line-height: var(--projects-heading-line-height);
}

.projects-inner > .section-lead {
  margin-top: 14px;
  font-size: 20px;
  line-height: 26px;
}

.project-carousel {
  display: grid;
  width: min(var(--projects-carousel-width), 100%);
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  column-gap: var(--projects-control-gap);
  margin: 52px auto 0;
}

.projects-viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.project-track {
  display: flex;
  align-items: flex-start;
gap: var(--projects-card-gap);
}

.project-slide {
  min-width: 0;
  min-height: 0;
  flex: 0 0 calc(100% - var(--projects-card-gap) - var(--projects-peek));
  width: auto;
  height: auto;
  aspect-ratio: var(--projects-card-ratio);
  overflow: hidden;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

/* Premium golden aura around each project image.
   The slide is nothing but the image (no card background, no padding), so a
   shadow painted outside its 20px rounded border box hugs the image edges and
   follows the exact same corner radius the image is clipped to. Three soft
   layers stack from a tight warm rim to a wide diffused halo: strongest at the
   edge, gone well before the halo reaches the section background. The original
   --shadow-card layer is kept as the base so the existing card depth is
   unchanged. Painted behind the image, never over it, and with no transition,
   so nothing animates. */
.project-slide {
  box-shadow:
    0 0 8px rgba(255, 204, 0, 0.34),
    0 0 20px rgba(255, 193, 7, 0.26),
    0 0 36px rgba(255, 193, 7, 0.18),
    var(--shadow-card);
}

/* Tablet: cards are half width, so the halo is trimmed slightly to keep the
   same soft read next to its neighbour instead of two halos merging. */
@media (max-width: 1200px) {
  .project-slide {
    box-shadow:
      0 0 7px rgba(255, 204, 0, 0.31),
      0 0 17px rgba(255, 193, 7, 0.23),
      0 0 30px rgba(255, 193, 7, 0.15),
      var(--shadow-card);
  }
}

/* Mobile: one full-bleed card per view, so the halo is softened further to
   stay elegant and avoid crowding the edges of the screen. */
@media (max-width: 767px) {
  .project-slide {
    box-shadow:
      0 0 6px rgba(255, 204, 0, 0.28),
      0 0 14px rgba(255, 193, 7, 0.18),
      var(--shadow-card);
  }
}

.project-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobile-only project navigation (visible in the ≤767px block only). */
.project-mobile-nav {
  display: none;
}

.carousel-button {
  display: grid;
  width: 36px;
  height: 44px;
  flex: 0 0 36px;
  padding: 0;
  place-items: center;
  color: var(--color-black);
  background: transparent;
  transition:
    opacity var(--ease),
    transform var(--ease);
}

.carousel-button:hover:not(:disabled) {
  transform: scale(1.12);
}

.carousel-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.carousel-button img {
  width: 36px;
  height: 26px;
}

.partners-title {
  margin: 79px 0 0;
  font-size: var(--projects-heading-size);
  font-weight: 600;
  line-height: var(--projects-heading-line-height);
  text-align: center;
}

.partners-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 40px);
  align-items: center;
  justify-items: center;
  margin: 84px auto 0;
}
.partner-logo {
  width: 148px;
  max-width: 100%;
  height: 100px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.partner-logo--tally {
  background-image: url("assets/partner-tally.png");
}
.partner-logo--aws {
  background-image: url("assets/partner-aws.png");
}
.partner-logo--meta {
  background-image: url("assets/partner-meta.png");
}
.partner-logo--microsoft {
  background-image: url("assets/partner-microsoft.png");
}
.partner-logo--apple {
  background-image: url("assets/partner-apple.png");
}
.partner-logo--cisco {
  background-image: url("assets/Frame 271.png");
}
.partner-logo--certiport {
  background-image: url("assets/Frame 272.png");
}

/* Certificate */
.certificate-section {
  min-height: 843px;
  color: var(--color-white);
  background: linear-gradient(
    180deg,
    var(--color-red) 0%,
    var(--color-red-deep) 100%
  );
}

.certificate-inner {
  display: grid;
  grid-template-columns: minmax(300px, 482px) minmax(0, 1fr);
  align-items: center;
  gap: 35px;
  min-height: 843px;
  padding-top: 75px;
  padding-bottom: 75px;
}

.certificate-image {
  width: 100%;
  max-height: 654px;
  object-fit: contain;
  box-shadow: 2px 9px 16.4px 3px rgba(0, 0, 0, 0.44);
}

.certificate-copy h2 {
  margin: 0 0 25px;
  font-size: clamp(2.4rem, 3.48vw, 3.125rem);
  font-weight: 700;
  line-height: 1.18;
}

.certificate-benefits {
  display: grid;
  gap: 26px;
  padding: 37px 47px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-md);
}

.certificate-benefit {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.certificate-benefit > img {
  width: 41px;
  height: 51px;
  object-fit: contain;
}

.certificate-benefit:last-child > img {
  filter: brightness(0) invert(1);
}

.certificate-benefit h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.08vw, 1.875rem);
  font-weight: 500;
  line-height: 1.2;
}

.certificate-benefit p {
  margin: 5px 0 0;
  color: var(--color-muted-white);
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  line-height: 1.25;
}

/* FAQ */
.faq-section {
  min-height: 693px;
  padding: 76px 0 54px;
  background: var(--color-white);
}

.faq-copy .section-title {
  font-size: clamp(2.4rem, 3.48vw, 3.125rem);
}

.faq-copy .section-lead {
  margin-top: 12px;
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 897px) minmax(220px, 365px);
  align-items: center;
  justify-content: space-between;
  gap: 55px;
  margin-top: 51px;
}

.faq-accordion {
  min-width: 0;
  padding: 34px 39px;
  background: linear-gradient(
    180deg,
    rgba(210, 32, 40, 0.03),
    rgba(108, 16, 21, 0.03)
  );
  border-radius: 13px;
}

.faq-item + .faq-item {
  margin-top: 8px;
}

.faq-question {
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.faq-question:hover {
  border-color: rgba(210, 32, 40, 0.35);
}

/* FAQ indicator: a small standing diya in place of the old arrow / X glyph.
   The markup and the class swapping are untouched - script.js puts
   faq-icon--close on the row that is currently expanded and faq-icon--open on
   the collapsed ones - so only the two visual states are redrawn here:
   collapsed = the lamp alone, expanded = that same lamp plus a lit flame and a
   soft warm halo. The artwork is a new SVG drawn for this indicator; it is not
   one of the hanging-lamp assets and it has no string, so it reads as a
   standing oil lamp. It sits exactly where the old glyph sat, in the same flex
   slot at the far right of the question row, and at 26px it still fits inside
   the row's existing min-height, so no card grows. */
.faq-icon {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background: url("assets/faq-diya.svg") no-repeat center 100% / 24px auto;
}

/* Lit state. Both layers float above the diya's own box, the flame above the
   halo, and neither ever moves: only their brightness breathes, so the lamp
   stays perfectly still while the fire on top of it lives. */
.faq-icon--close::before {
  position: absolute;
  z-index: 1;
  bottom: 13px;
  left: 50%;
  width: 7px;
  height: 9px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 74%, #fff4c9 0 1.1px, rgba(255, 244, 201, 0) 2.1px),
    radial-gradient(circle at 50% 68%, #ffcf5c 0 2.2px, rgba(255, 207, 92, 0) 3.1px),
    radial-gradient(ellipse 50% 48% at 50% 62%, #ff9f1c 0 62%, rgba(255, 159, 28, 0) 80%);
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  content: "";
  /* Peak brightness held static; the breathing is done with opacity alone,
     since brightness() is a paint-only property. */
  filter: brightness(1.1);
  animation: faq-diya-flame 2.6s ease-in-out infinite;
}

.faq-icon--close::after {
  position: absolute;
  z-index: 0;
  bottom: 6px;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 62%, rgba(255, 186, 64, 0.4) 0 18%, rgba(255, 168, 32, 0.17) 42%, rgba(255, 168, 32, 0) 72%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: faq-diya-glow 2.6s ease-in-out infinite;
}

/* Three stops rather than one up-and-down pair: the fire lifts, settles and
   dips again the way a real wick does, and the halo follows it exactly. The
   swing is kept small on purpose - it should read as light, never as a pulse. */
@keyframes faq-diya-flame {
  0%,
  100% {
    opacity: 0.708;
  }

  46% {
    opacity: 1;
  }

  68% {
    opacity: 0.8;
  }
}

@keyframes faq-diya-glow {
  0%,
  100% {
    opacity: 0.6;
  }

  46% {
    opacity: 1;
  }

  68% {
    opacity: 0.74;
  }
}

/* Reduced motion: the open row stays lit, the fire simply stops moving. */
@media (prefers-reduced-motion: reduce) {
  .faq-icon--close::before,
  .faq-icon--close::after {
    animation: none;
  }
}

.faq-answer {
  margin: -1px 17px 0;
  padding: 18px 37px;
  color: var(--color-white);
  background: linear-gradient(180deg, var(--color-red), var(--color-red-dark));
  border-radius: 0 0 10px 10px;
}

.faq-answer p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
}

.faq-illustration {
  width: min(100%, 365px);
  justify-self: center;
}

/* Final conversion CTA */
.final-cta {
  min-height: 425px;
  color: var(--color-white);
  background: linear-gradient(
    180deg,
    var(--color-red) 0%,
    var(--color-red-deep) 100%
  );
}

.final-cta-inner {
  display: flex;
  min-height: 425px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 54px 0;
  text-align: center;
}

.final-cta h2 {
  margin: 0;
  font-size: clamp(2.4rem, 3.48vw, 3.125rem);
  font-weight: 700;
  line-height: 1.2;
}

.final-cta p {
  max-width: 860px;
  margin: 12px 0 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.3;
}

.final-cta-button {
  min-width: 268px;
  margin-top: 35px;
}

/* The cracker rocket is a tall 26:30 illustration, so the generic 23x21 icon box
   would letterbox it down to roughly 18x21. Give it a little more room to keep
   the same visual weight as the arrow icon it replaces, without touching the
   shared .button img rule that every other button icon depends on. */
.final-cta-button .final-cta-cracker {
  width: 26px;
  height: 30px;
}

/* Modal and toast */
.lead-modal {
  width: min(calc(100% - 32px), 500px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  color: var(--color-black);
  background: var(--color-white);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.lead-modal::backdrop {
  background: rgba(10, 14, 28, 0.6);
  backdrop-filter: blur(3px);
}

.modal-inner {
  max-height: calc(100dvh - 32px);
  padding: 30px;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.modal-header h2 {
  margin: 0;
  color: var(--color-blue);
  font-family: var(--font-form);
  font-size: 1.35rem;
  line-height: 1.15;
}

.modal-close {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--color-black);
  background: var(--color-input);
  border-radius: 50%;
  font-size: 1.55rem;
  line-height: 1;
}

.modal-intro {
  margin: 10px 0 22px;
  color: var(--color-muted);
  font-family: var(--font-form);
  font-size: 0.875rem;
}

.toast-region {
  position: fixed;
  z-index: 80;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  width: min(calc(100% - 36px), 360px);
}

.toast {
  padding: 14px 16px;
  color: var(--color-white);
  background: var(--color-blue);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  font-family: var(--font-form);
  font-size: 0.875rem;
  animation: toast-in 220ms ease both;
}

.toast.is-error {
  background: var(--color-red-dark);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Thank-you / enquiry-success page */
.enquiry-success__background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.enquiry-success {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  background: transparent;
  color: #202630;
  overflow-y: auto;
}
.enquiry-success {
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
}
.enquiry-success__dismiss {
  display: grid;
  place-items: center;
  text-decoration: none;
}
.enquiry-success__card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 16px;
  width: min(100%, 680px);
  margin: auto;
  padding: 44px 46px 48px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 46px #0003;
  animation: modal-in 240ms ease-out;
}
.enquiry-success__dismiss {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #777;
  font-size: 26px;
  cursor: pointer;
}
.enquiry-success__icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #059669;
}
.enquiry-success__icon svg {
  width: 26px;
  height: 26px;
}
.enquiry-success__content {
  min-width: 0;
  flex: 1;
}
.enquiry-success h2 {
  margin: 2px 0 8px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.enquiry-success p {
  margin: 0;
  color: #737b82;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.15px;
}
.enquiry-success p strong {
  color: #303842;
  overflow-wrap: anywhere;
}
.enquiry-success__contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin: 20px 0;
}
.enquiry-success__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.enquiry-success__contact > div {
  min-width: 0;
}
.enquiry-success__contact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 4px;
  background: #f7f9fa;
  color: #717983;
  font-size: 20px;
}
.enquiry-success__contact div > span {
  display: block;
  margin-bottom: 4px;
  color: #737b82;
  font-size: 11px;
  line-height: 1.4;
}
.enquiry-success__contact strong,
.enquiry-success__contact a {
  display: block;
  color: #303842;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.enquiry-success__contact a:hover {
  color: #047857;
  text-decoration: underline;
}
.enquiry-success__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 0;
}
.enquiry-success__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 10px 14px;
  border-radius: 5px;
  color: white;
  background: #059669;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.enquiry-success__whatsapp:hover {
  background: #047857;
}
.enquiry-success__whatsapp svg {
  width: 17px;
  height: 17px;
}
.enquiry-success :is(button, a):focus-visible {
  outline: 3px solid #059669;
  outline-offset: 3px;
}
.enquiry-success__confetti {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.enquiry-success__confetti i {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 13px;
  animation: enquiry-confetti 3s ease-in both;
}
.enquiry-success__confetti i:nth-child(3n) {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
@keyframes enquiry-confetti {
  0% {
    transform: translate3d(0, -20px, 0) rotate(0);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--drift), 105vh, 0) rotate(var(--turn));
    opacity: 0;
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 600px) {
  .enquiry-success {
    padding: 18px;
  }
  .enquiry-success__card {
    padding: 38px 22px 28px;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
  }
  .enquiry-success h2 {
    padding-right: 8px;
    font-size: 18px;
  }
  .enquiry-success__contacts {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .enquiry-success__card,
  .enquiry-success__confetti i {
    animation: none;
  }
}

/* Responsive layout */
@media (max-width: 1200px) {
  .site-nav ul {
    gap: 22px;
  }

  .hero-inner {
    gap: 40px;
  }

  .hero-title {
    font-size: clamp(2.65rem, 4.1vw, 3.3rem);
  }

  .environment-inner {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 46vw);
    gap: 28px;
    padding-right: 20px;
    padding-left: 32px;
  }

  .environment-copy {
    margin-top: 280px;
    padding-left: 42px;
  }

  .environment-mosaic {
    width: 100%;
  }

  .projects-inner {
    width: min(calc(100% - 64px), var(--projects-content-width));
  }

  .project-carousel {
    width: 100%;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    column-gap: 24px;
  }

  .project-track {
    gap: 24px;
  }

  .project-slide {
    flex-basis: calc((100% - 24px) / 2);
    height: auto;
  }

  .partners-grid {
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 24px;
    margin-left: 0;
  }

  .partner-logo {
    width: 100%;
    max-width: 148px;
    justify-self: center;
  }

  .benefit-panel {
    margin-inline: 0;
  }

  .real-stories-inner {
    gap: 42px;
  }
}

@media (max-width: 1024px) {
  .site-nav ul {
    position: absolute;
    top: var(--header-height);
    right: 24px;
    left: 24px;
    display: none;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    background: var(--color-white);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-card);
  }

  .site-nav.is-open ul {
    display: grid;
  }

  .site-nav a,
  .header-contact {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
  }

  .site-nav a::after {
    right: auto;
    bottom: 5px;
    left: 14px;
    width: 38px;
  }

  .header-contact {
    justify-content: center;
  }

  .menu-toggle {
    display: block;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr) 315px;
  }

  .hero-form-card {
    padding-inline: 24px;
  }

  .hero-actions {
    margin-top: 38px;
  }

  .hero-actions .button--red {
    min-width: 280px;
  }

  .hero-actions .button--blue {
    min-width: 230px;
  }

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

  .curriculum-section::after {
    height: 470px;
  }

  .student-cards {
    --student-gap: 22px;
    --student-peek: clamp(104px, 13vw, 144px);
  }

  .student-card {
    height: 240px;
  }

  .why-heading-row {
    align-items: flex-start;
  }

  .benefit-panel {
    margin-top: 95px;
  }

  .real-stories-inner {
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 36px;
  }

  .featured-story {
    height: 530px;
  }

  .story-list-card {
    padding-inline: 26px;
  }

  .project-carousel {
    gap: 26px;
  }

  .certificate-inner {
    grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
  }

  .certificate-benefits {
    padding-inline: 30px;
  }

  .faq-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: 66px;
  }

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

  .desktop-only {
    display: none;
  }

  .brand,
  .brand img {
    width: 132px;
  }

  .brand {
    height: 66px;
  }

  .site-nav ul {
    top: var(--header-height);
    right: 16px;
    left: 16px;
  }

  .hero-section {
    position: relative;
    min-height: auto;
    background-size: auto 46%;
    background-position: 100% 62%;
  }

  .hero-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 7%;
    right: -6%;
    width: 58%;
    height: 86%;
    background: rgba(210, 32, 40, 0.1);
    border-radius: 18px;
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  }

  .hero-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 54%;
    height: 100%;
    background: linear-gradient(
      125deg,
      rgba(210, 32, 40, 0.18) 0%,
      rgba(210, 32, 40, 0.46) 38%,
      rgba(210, 32, 40, 0.78) 66%,
      var(--color-red-dark) 100%
    );
    clip-path: polygon(
      55% 0,
      100% 0,
      100% 100%,
      10% 100%,
      3% 92%,
      0 82%,
      1% 70%,
      5% 58%,
      14% 44%,
      26% 22%,
      55% 0
    );
  }

  .hero-inner {
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: 0;
    padding-top: 26px;
    padding-bottom: 46px;
  }

  .hero-copy {
    position: relative;
    padding-top: 0;
    margin-bottom: 26px;
    z-index: 1;
  }

  .hero-phone-link {
    display: none;
  }

  .hero-call-icon {
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-white);
    background: var(--color-red);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    -webkit-tap-highlight-color: transparent;
  }

  .hero-call-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);
    background: var(--color-red-dark);
  }

  .hero-call-icon:active {
    transform: scale(0.94);
    background: var(--color-red-dark);
  }

  .hero-title {
    font-size: clamp(1.85rem, 8.6vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    padding-right: 60px;
  }

  .hero-title strong {
    white-space: normal;
  }

  .hero-title .hero-kicker {
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    padding: 0 12px 5px;
  }

  .hero-title > span:not(.hero-kicker),
  .hero-title > strong {
    font-size: calc(1em - 2px);
  }

  .hero-description {
    max-width: 430px;
    margin: 14px 0 0;
    font-size: 1rem;
    line-height: 1.35;
  }

  .hero-duration {
    margin: 14px 0 0;
    font-size: 1.08rem;
  }

  .hero-actions {
    display: grid;
    gap: 12px;
    margin-top: 22px;
  }

  .hero-actions .button--red,
  .hero-actions .button--blue {
    width: 100%;
    min-width: 0;
  }

  .hero-form-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    min-height: 0;
    align-self: center;
    padding: 22px 18px 24px;
    border-radius: 18px;
    box-shadow:
      0 18px 40px -16px rgba(0, 0, 0, 0.38),
      0 6px 16px rgba(0, 0, 0, 0.08);
  }

  .hero-form-card h2 {
    margin-bottom: 20px;
  }

  .program-section {
    min-height: auto;
    padding: 54px 0 60px;
  }

  .program-section::before {
    inset: 170px 0 0;
    background-size: 90% auto;
  }

  .section-title,
  .display-title {
    font-size: clamp(2rem, 9.1vw, 2.75rem);
  }

  .program-video {
    margin-top: 34px;
    border-radius: 18px;
    box-shadow: 0 0 0 7px rgba(234, 233, 235, 0.15);
  }

  .video-controls {
    right: 14px;
    bottom: 12px;
    left: 14px;
    gap: 6px;
  }

  .video-control {
    width: 25px;
    height: 25px;
  }

  .video-control--play span {
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 15px;
  }

  .video-control img {
    width: 22px;
    height: 22px;
  }

  .video-progress {
    height: 4px;
  }

  .expert-button {
    width: 100%;
    margin-top: 52px;
  }

  .curriculum-section {
    min-height: auto;
    padding: 54px 0 56px;
  }

  .curriculum-grid {
    grid-template-columns: 1fr;
    gap: 21px;
    margin-top: 37px;
  }

  .program-card {
    min-height: 0;
  }

  .program-card > img {
    aspect-ratio: 315 / 210;
  }

  .curriculum-section::after {
    height: 55%;
  }

  .syllabus-button {
    width: 100%;
    margin-top: 43px;
  }

  .environment-section,
  .environment-inner {
    height: auto;
    min-height: auto;
  }

  .environment-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 255, 255, 0.62)
    );
  }

  .environment-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    min-height: auto;
    padding: 72px 16px 48px;
  }

  .environment-copy {
    min-height: auto;
    margin-top: 0;
    padding-left: 42px;
  }

  .quote-mark {
    top: -31px;
    left: 0;
    font-size: 7rem;
  }

  .environment-copy h2 {
    font-size: clamp(2.6rem, 12vw, 3.75rem);
  }

  .environment-mosaic {
    width: min(100%, var(--environment-mosaic-width));
    align-self: center;
    margin-top: 0;
  }

  .students-section {
    min-height: auto;
    padding: 54px 0 55px;
  }

  .student-cards {
    --student-gap: 16px;
    --student-peek: clamp(76px, 21vw, 104px);
  }

  .student-card {
    height: 235px;
  }

  .why-section {
    min-height: auto;
  }

  .why-inner {
    display: flex;
    flex-direction: column;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .why-heading-row {
    display: contents;
  }

  .why-heading-row h2 {
    order: 1;
    margin: 0 0 42px;
    font-size: clamp(1.4rem, 6.2vw, 1.85rem);
    font-weight: 400;
    line-height: 1.22;
    color: #ffffff;
    text-align: left;
  }

  .why-heading-row h2 strong {
    font-weight: 700;
    display: block;
  }

  .benefit-panel {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0 0 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
  }

  .benefit-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 18px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  .benefit-item:last-child {
    grid-column: auto;
    max-width: 100%;
    justify-self: auto;
  }

  .benefit-item > img,
  .benefit-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #841217;
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
  }

  .benefit-item > img {
    object-fit: contain;
  }

  .benefit-item:last-child > img {
    filter: none;
  }

  .benefit-icon {
    padding: 0;
  }

  .benefit-icon img {
    width: 20px;
    height: 25px;
    object-fit: contain;
  }

  .benefit-item h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
  }

  .benefit-item p {
    max-width: 100%;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.85);
  }

  .why-cta {
    order: 3;
    width: 100%;
    min-width: 0;
    padding: 16px 20px;
    font-size: clamp(0.95rem, 4.2vw, 1.05rem);
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #ffffff;
    color: #000000;
    border: none;
    cursor: pointer;
  }

  .why-cta img {
    width: 20px;
    height: 18px;
    object-fit: contain;
  }

  .real-stories-section,
  .real-stories-inner {
    min-height: auto;
  }

  .real-stories-inner {
    display: flex;
    flex-direction: column;
    gap: 39px;
    padding-top: 54px;
    padding-bottom: 58px;
  }

  .featured-story {
    width: min(100%, 420px);
    height: auto;
    aspect-ratio: 420 / 590;
    align-self: center;
  }

  .story-list-column > .display-title {
    margin-bottom: 25px;
  }

  .story-list-card {
    min-height: 0;
    padding: 25px 20px 14px;
  }

  .story-row {
    gap: 13px;
    min-height: 105px;
    padding-inline: 0;
  }

  .projects-section {
    min-height: auto;
    padding: 54px 0 65px;
  }

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

  .projects-inner > .section-title {
    font-size: clamp(2rem, 9.1vw, var(--projects-heading-size));
    line-height: 1.15;
  }

  .projects-inner > .section-lead {
    font-size: 1rem;
    line-height: 1.35;
  }

  .project-carousel {
    display: block;
    width: 100%;
    margin-top: 30px;
  }

  .projects-viewport {
    width: 100%;
    touch-action: pan-y;
  }

  .project-track {
    gap: 0;
  }

  .project-slide {
    flex-basis: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
  }

  .carousel-button {
    display: none;
  }

  .project-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
  }

  .project-dots {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .project-dot {
    display: block;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    transition:
      background 200ms ease,
      transform 200ms ease;
  }

  .project-dot.is-active {
    background: var(--color-red);
    transform: scale(1.25);
  }

  .project-dot:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 2px;
  }

  .project-mobile-next {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }

  .project-mobile-next img {
    display: block;
    width: 16px;
    height: 12px;
  }

  .project-mobile-next:active {
    transform: scale(0.92);
  }

  .partners-title {
    margin-top: 65px;
    font-size: clamp(2rem, 9.1vw, var(--projects-heading-size));
    line-height: 1.15;
  }

  .partners-grid {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 28px;
    margin: 44px auto 0;
    padding: 4px 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

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

  .partner-logo {
    width: 120px;
    max-width: none;
    height: 84px;
    flex: 0 0 auto;
  }

  .partner-logo:last-child {
    grid-column: auto;
    width: 120px;
  }

  .certificate-section,
  .certificate-inner {
    min-height: auto;
  }

  .certificate-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 48px;
    padding-bottom: 54px;
  }

  .certificate-copy {
    display: contents;
  }

  .certificate-copy h2 {
    order: 1;
    margin: 0 0 24px;
    font-size: clamp(1.4rem, 6.2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    text-align: left;
  }

  .certificate-image {
    order: 2;
    width: min(100%, 440px);
    align-self: center;
    margin: 0 0 32px;
  }

  .certificate-benefits {
    order: 3;
    gap: 26px;
    padding: 28px 20px;
  }

  .certificate-benefit {
    grid-template-columns: 41px minmax(0, 1fr);
    gap: 12px;
  }

  .certificate-benefit h3 {
    font-size: 1.35rem;
  }

  .certificate-benefit p {
    font-size: 1rem;
  }

  .faq-section {
    min-height: auto;
    padding: 56px 0 55px;
  }

  .faq-layout {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-top: 34px;
  }

  .faq-accordion {
    width: 100%;
    padding: 20px 14px;
  }

  .faq-question {
    min-height: 62px;
    padding-inline: 16px;
    font-size: 0.95rem;
  }

  .faq-answer {
    margin-inline: 11px;
    padding: 16px 20px;
  }

  .faq-answer p {
    font-size: 1rem;
  }

  /* The desktop illustration is the same asset the tablet layout still shows
     (assets/faq.png, 1254x1254, a square of the blue 3D person, the red
     question mark and the decorative base). It was hidden at this breakpoint
     only, so it is simply shown again here rather than replaced or redrawn -
     nothing about the artwork, its colours or its framing changes. The
     flex-column .faq-layout stacks the accordion first, so order: -1 lifts the
     image above the questions without touching the accordion, its items or
     their spacing. The width is capped well below the 365px desktop size and
     below the 130-170px band asked for; height: auto plus the global
     max-width: 100% on img keeps the square proportions and stops the image
     ever reaching the viewport edge, so no horizontal scroll appears. */
  .faq-illustration {
    order: -1;
    align-self: center;
    width: clamp(130px, 40vw, 170px);
    max-width: 100%;
    height: auto;
  }

  .final-cta {
    min-height: auto;
  }

  .final-cta-inner {
    padding-top: 72px;
    padding-bottom: 72px;
    text-align: center;
  }

  .final-cta h2 {
    font-size: clamp(2.25rem, 10vw, 3.125rem);
  }

  .final-cta p {
    max-width: 560px;
    margin: 18px auto 0;
    font-size: 1rem;
  }

  .final-cta-button {
    width: 100%;
    max-width: 268px;
    margin-top: 34px;
  }
}

@media (max-width: 390px) {
  .container {
    width: min(calc(100% - 24px), var(--content-max));
  }

  .hero-title {
    font-size: clamp(1.65rem, 8.2vw, 1.95rem);
    padding-right: 56px;
  }

  .hero-title .hero-kicker {
    font-size: 0.65em;
    padding-inline: 10px;
  }

  .hero-call-icon {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }

  .hero-call-icon svg {
    width: 20px;
    height: 20px;
  }

  .hero-form-card {
    padding-inline: 14px;
  }

  .environment-inner {
    padding-right: 12px;
    padding-left: 12px;
  }

  .environment-copy {
    padding-left: 32px;
  }

  .story-list-card {
    padding-inline: 14px;
  }

  .certificate-benefit h3 {
    font-size: 1.2rem;
  }

  .certificate-benefit p {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scrollable learning environment photo collection. */
.environment-mosaic {
  height: 772px;
  aspect-ratio: auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #a3050d #ffffff70;
  scrollbar-gutter: stable;
  padding: 0 8px 8px 2px;
  border-radius: 22px;
  -webkit-overflow-scrolling: touch;
}
.environment-mosaic:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 4px;
}
.environment-gallery-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.environment-gallery-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.environment-mosaic .environment-tile {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  flex: none;
  aspect-ratio: 268 / 374;
}
.environment-mosaic .environment-tile--storefront {
  aspect-ratio: 268 / 80;
}
.environment-mosaic .environment-tile--added {
  aspect-ratio: auto;
}
.environment-tile--added img {
  height: auto;
}
@media (max-width: 767px) {
  .environment-mosaic {
    height: clamp(360px, 110vw, 560px);
    border-radius: 16px;
  }
  .environment-gallery-columns {
    gap: 12px;
  }
  .environment-gallery-column {
    gap: 12px;
  }
  .environment-mosaic .environment-tile {
    border-radius: 14px;
  }
}

/* Compact mobile gallery; desktop mosaic remains unchanged. */
.environment-mobile-gallery {
  display: none;
}
@media (max-width: 767px) {
  .environment-section {
    background: #fff;
  }
  .environment-overlay,
  .environment-copy .quote-mark,
  .environment-mosaic {
    display: none;
  }
  .environment-section .environment-inner {
    padding: 24px 16px 10px;
    gap: 12px;
  }
  .environment-section .environment-copy {
    margin: 0;
    padding: 0;
  }
  .environment-section .environment-copy h2 {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
  }
  .environment-section .environment-copy h2 > span {
    font-size: 20px;
    font-weight: 600;
  }
  .environment-mobile-gallery {
    display: block;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 4px;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .environment-mobile-gallery::-webkit-scrollbar {
    display: none;
  }
  .environment-mobile-gallery:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 3px;
  }
  .environment-mobile-track {
    display: flex;
    gap: 3px;
  }
  .environment-mobile-photo {
    flex: 0 0 calc((100% - 9px) / 4);
    aspect-ratio: 88 / 104;
    margin: 0;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 2px #0003;
  }
  .environment-mobile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .environment-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 60;
    display: block;
    width: auto;
    max-width: 92vw;
    height: auto;
    max-height: 80vh;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    object-fit: contain;
    background: #fff;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9) translateY(12px);
    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }
  .environment-popup.is-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
}

/* Reference course cards and mobile carousel. */
.curriculum-section {
  min-height: 0;
  padding: 60px 0 28px;
  overflow: hidden;
}
.curriculum-section::after {
  content: none;
}
.curriculum-section .curriculum-inner {
  width: 100%;
  max-width: none;
}
.curriculum-inner > .section-title {
  width: min(calc(100% - 144px), 1296px);
  margin: 0 auto;
  font-size: 50px;
  line-height: 1.18;
  font-weight: 500;
}
.curriculum-band {
  position: relative;
  isolation: isolate;
  margin-top: 76px;
}
.curriculum-band::before {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 140px 0 0;
  background: linear-gradient(218deg, #d22028, #a3050d);
}
.curriculum-viewport {
  overflow: visible;
}
.curriculum-viewport:focus-visible {
  outline: 2px solid #2a398d;
  outline-offset: -2px;
}
.curriculum-grid {
  width: min(100%, 1440px);
  margin: 0 auto;
  gap: 30px;
  padding-bottom: 42px;
}
.curriculum-grid .program-card {
  min-height: 0;
  padding: 8px 12px 30px;
  gap: 14px;
  border-radius: 15px;
}
.curriculum-grid .program-card > img {
  aspect-ratio: 315 / 277;
  border-radius: 12px;
}
.curriculum-grid .program-card h3 {
  min-height: 0;
  font-size: clamp(16px, 1.53vw, 22px);
  line-height: 1.15;
  font-weight: 600;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.curriculum-grid .program-card h3 strong {
  font-weight: 600;
}
.curriculum-grid .program-card h4 {
  font-weight: 400;
}
.curriculum-inner .syllabus-button {
  margin: 26px auto 0;
  min-height: 68px;
  font-size: 20px;
  font-weight: 400;
  background: linear-gradient(110deg, #303f99, #0c1464);
}
.curriculum-clone {
  display: none;
}
@media (min-width: 768px) and (max-width: 1100px) {
  .curriculum-grid {
    width: calc(100% - 48px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .curriculum-section {
    padding: 32px 0 0;
  }
  .curriculum-inner > .section-title {
    width: calc(100% - 40px);
    font-size: clamp(16px, 4.58vw, 20px);
    line-height: 1.3;
    font-weight: 600;
  }
  .curriculum-inner > .section-title br {
    display: block;
  }
  .curriculum-band {
    margin-top: 16px;
  }
  .curriculum-band::before {
    top: 70px;
  }
  .curriculum-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }
  .curriculum-viewport::-webkit-scrollbar {
    display: none;
  }
  .curriculum-grid {
    display: flex;
    width: 100%;
    gap: 26px;
    padding: 0 20px 20px;
    margin: 0;
  }
  .curriculum-grid .program-card {
    display: flex;
    flex: 0 0 158px;
    padding: 6px 7px 12px;
    gap: 7px;
    border-radius: 8px;
    box-shadow: 2px 4px 4px #0003;
  }
  .curriculum-grid .program-card > img {
    aspect-ratio: 145 / 124;
    border-radius: 4px;
  }
  .curriculum-grid .program-card h3 {
    font-size: 8.5px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .curriculum-grid .program-card .accent-line {
    width: 19px;
    height: 1px;
    margin-top: 2px;
  }
  .curriculum-grid .program-card h4 {
    font-size: 8px;
    line-height: 1.2;
    margin-top: 5px;
  }
  .curriculum-grid .program-card p {
    font-size: 6px;
    line-height: 1.3;
    margin-top: 3px;
  }
  .curriculum-inner .syllabus-button {
    width: auto;
    min-width: 0;
    min-height: 25px;
    padding: 7px 9px;
    margin: 10px auto 0;
    font-size: 8px;
    font-weight: 600;
    border-radius: 4px;
  }
}

/* Success Stories — desktop-only showcase sizing. Mobile and tablet are untouched. */
@media (min-width: 1201px) {
  .student-cards {
    --student-card-w: clamp(340px, 30vw, 420px);
    --student-gap: 28px;
    --student-peek: clamp(64px, 6vw, 92px);
    width: min(
      calc(
        var(--student-card-w) + var(--student-card-w) + var(--student-gap) +
          var(--student-gap) + var(--student-peek)
      ),
      100%
    );
    margin-inline: auto;
  }

  .student-card {
    flex: 0 0 var(--student-card-w);
    height: clamp(262px, 23vw, 320px);
  }
}

/* Mobile hero reference: keep all header/hero changes below the desktop breakpoint. */
@media (max-width: 767px) {
  :root {
    --header-height: 33px;
  }

  .header-inner.container {
    width: calc(100% - 24px);
  }
  .site-header .brand,
  .site-header .brand img {
    width: 68px;
  }
  .site-header .brand {
    height: 33px;
  }
  .site-header .menu-toggle {
    width: 24px;
    height: 30px;
    padding: 5px 4px;
    margin-left: auto;
    color: #000;
    border-radius: 0;
  }
  .site-header .menu-toggle span {
    width: 16px;
    height: 2px;
    margin: 2px auto;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
  }

  .hero-section {
    background:
      url("assets/hero-diagonal.svg") center top / auto 320px no-repeat,
      linear-gradient(135deg, #7c1218 0%, #a3050d 42%, #5d0d11 100%);
  }
  .hero-section::before {
    display: none;
  }
  .hero-section::after {
    inset: 0;
    width: 100%;
    height: 100%;
    background: #d71925;
    clip-path: polygon(91% 0, 100% 0, 100% 100%, 0 100%, 0 71.5%);
  }
  .hero-inner.container {
    width: min(85%, 440px);
    padding-top: 20px;
    padding-bottom: 17px;
    gap: 17px;
  }
  .hero-copy {
    width: 100%;
    padding: 0;
    margin: 0;
    align-self: stretch;
  }
  .hero-title {
    padding: 0;
    font-size: clamp(12px, 4.08vw, 18px);
    line-height: 25px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .hero-title .hero-kicker {
    padding: 0 6px;
    border-radius: 5px;
    font-size: 0.94em;
    font-weight: 600;
    line-height: 25px;
  }
  .hero-title > span:not(.hero-kicker) {
    font-size: 1.07em;
    font-weight: 600;
  }
  .hero-title > strong {
    padding-left: 6px;
    color: #ed0715;
    font-size: clamp(16px, 5.65vw, 24px);
    font-weight: 600;
    white-space: nowrap;
  }
  .hero-description {
    max-width: 190px;
    margin: 4px 0 0 6px;
    color: #777;
    font-size: 7px;
    font-weight: 400;
    line-height: 10px;
  }
  .hero-duration {
    margin: 5px 0 0 6px;
    font-size: 7px;
    font-weight: 700;
    line-height: 11px;
  }
  .hero-actions {
    display: none;
  }
  .hero-call-icon {
    top: 18px;
    right: 12px;
    width: 26px;
    height: 26px;
    color: #d71925;
    background: #fff;
    box-shadow: 0 2px 4px #0004;
  }
  .hero-call-icon svg {
    width: 15px;
    height: 15px;
  }
  .hero-call-icon:hover,
  .hero-call-icon:active {
    color: #a3050d;
    background: #fff;
  }

  .hero-form-card {
    max-width: none;
    min-height: 0;
    padding: 17px 22px 18px 18px;
    border-radius: 15px;
    box-shadow: 0 4px 5px #0005;
  }
  .hero-form-card h2 {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 22px;
  }
  .hero-form-card .lead-form {
    gap: 15px;
  }
  .hero-form-card .field-group {
    gap: 6px;
  }
  .hero-form-card .field-group label {
    min-height: 14px;
    font-size: 11px;
    line-height: 14px;
  }
  .hero-form-card .field-group label span {
    margin-right: 1px;
    font-size: 14px;
    line-height: 14px;
    vertical-align: top;
  }
  .hero-form-card .field-group input {
    height: 29px;
    padding: 7px 9px;
    border-radius: 5px;
    background: #eee;
    font-size: 7px;
  }
  .hero-form-card .phone-input {
    height: 29px;
    padding: 0 9px;
    background: #eee;
    border-radius: 5px;
  }
  .hero-form-card .phone-input img {
    width: 11px;
    height: 9px;
    margin-right: 3px;
  }
  .hero-form-card .phone-input > span:not(.phone-divider) {
    font-size: 7px;
  }
  .hero-form-card .phone-divider {
    width: 4px;
    height: 4px;
    margin: 0 11px 3px 4px;
    background: transparent;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    transform: rotate(45deg);
    flex-shrink: 0;
  }
  .hero-form-card .phone-input input {
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .hero-form-card .field-error:empty,
  .hero-form-card .form-status:empty {
    display: none;
  }
  .hero-form-card .lead-submit {
    min-height: 31px;
    margin-top: 21px;
    padding: 8px 12px;
    border-radius: 5px;
    background: #30388e;
    box-shadow: none;
    font-size: 10px;
    line-height: 15px;
  }
}

@media (max-width: 767px) {
  .partners-grid {
    touch-action: pan-x pan-y;
    scroll-behavior: auto;
    cursor: grab;
  }
  .partners-grid:active {
    cursor: grabbing;
  }
}

/* Tablet navbar and hero only; mobile ends at 767px, desktop starts at 1025px. */
@media (min-width: 768px) and (max-width: 1024px) {
  .header-inner.container {
    width: calc(100% - 48px);
  }
  .site-header .menu-toggle {
    margin-left: auto;
  }
  .site-header .site-nav ul {
    right: 24px;
    left: auto;
    width: min(360px, calc(100% - 48px));
    max-height: calc(100dvh - var(--header-height) - 16px);
    overflow-y: auto;
  }

  .hero-section {
    min-height: 0;
  }
  .hero-inner.container {
    width: calc(100% - 48px);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    align-items: center;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .hero-copy {
    padding: 0;
  }
  .hero-title {
    max-width: 100%;
    font-size: clamp(30px, 3.5vw, 36px);
    line-height: 1.3;
    letter-spacing: -0.025em;
  }
  .hero-kicker {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 3px 10px 5px;
    margin-bottom: 6px;
  }
  .hero-title strong {
    max-width: 100%;
    white-space: normal;
  }
  .hero-title em {
    white-space: nowrap;
  }
  .hero-description {
    margin: 16px 0;
    font-size: 16px;
    line-height: 1.5;
  }
  .hero-duration {
    font-size: 16px;
    line-height: 1.5;
  }
  .hero-actions {
    flex-direction: column;
    gap: 14px;
    margin-top: 26px;
  }
  .hero-actions .button--red,
  .hero-actions .button--blue {
    width: 100%;
    max-width: 340px;
    min-width: 0;
    min-height: 52px;
    padding: 12px 16px;
    font-size: 16px;
  }
  .hero-form-card {
    align-self: center;
    min-width: 0;
    min-height: 0;
    padding: 28px 24px;
  }
}

/* Desktop: three complete stories and a 15% preview, aligned with the page content. */
@media (min-width: 1025px) {
  .students-inner.container {
    width: 100%;
    max-width: none;
  }
  .students-inner > .display-title {
    padding-inline: 24px;
  }
  .student-cards {
    --student-gap: 28px;
    --student-inset: max(24px, calc((100% - var(--content-max)) / 4));
    width: calc(100% - var(--student-inset));
    margin-left: var(--student-inset);
    margin-right: 0;
    scroll-snap-type: none;
    touch-action: pan-x pan-y;
  }
  .student-card {
    flex: 0 0 calc((100% - 84px) / 3.15);
    height: auto;
    aspect-ratio: 1.4;
  }
  .student-card:not(.is-current) {
    filter: none;
  }
  .student-hover-name {
    font-size: clamp(16px, 1.5vw, 24px);
    white-space: normal;
  }
  .student-hover-left {
    padding: 20px 10px 20px clamp(16px, 1.5vw, 28px);
  }
}

/* Readable mobile branding and hero copy; tablet and desktop keep their sizing. */
@media (max-width: 767px) {
  :root { --header-height: 56px; }
  .site-header .brand,
  .site-header .brand img { width: 116px; }
  .site-header .brand { height: 56px; }
  .site-header .menu-toggle { width: 44px; height: 44px; padding: 10px; }
  .site-header .menu-toggle span { width: 22px; height: 2px; margin: 4px auto; }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .hero-inner.container { padding-top: 24px; gap: 24px; }
  .hero-title { font-size: clamp(22px, 5.9vw, 28px); line-height: 1.3; white-space: normal; }
  .hero-title .hero-kicker { display: table; max-width: calc(100% - 24px); padding: 2px 6px; font-size: 1em; line-height: 1.3; white-space: normal; margin-bottom: 6px; }
  .hero-title > span:not(.hero-kicker) { display: block; font-size: 1em; }
  .hero-title > br { display: none; }
  .hero-title > strong { display: block; padding-left: 0; margin-top: 4px; font-size: clamp(24px, 6.4vw, 30px); line-height: 1.25; white-space: normal; }
  .hero-title em { white-space: nowrap; }
  .hero-description { max-width: 100%; margin: 14px 0 0; color: rgba(255, 244, 239, 0.9); font-size: 15px; line-height: 1.5; }
  .hero-duration { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
  .hero-section::after { clip-path: polygon(100% 30%, 100% 100%, 0 100%, 0 80%); }
  .hero-call-icon { width: 30px; height: 30px; top: 24px; }
  .hero-call-icon svg { width: 17px; height: 17px; }
}

/* Decorative-only festive accents; positioned outside of content and controls. */
:root {
  --festive-glow: rgba(255, 215, 122, 0.72);
  --festive-firework-core: #fff2a6;
  --festive-firework-gold: #ffd04d;
  --festive-firework-ray: rgba(255, 225, 145, 0.9);
  --festive-glow-soft: rgba(255, 215, 122, 0.5);
  --festive-ray: rgba(255, 213, 128, 0.62);
  --festive-ray-soft: rgba(240, 186, 96, 0.32);
}

.site-header.site-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--festive-glow-soft), transparent);
  content: "";
  pointer-events: none;
}

/* Keep fireworks on the visible red polygon and add a hanging gold accent at the edge. */
#home.hero-section {
  position: relative;
}

/* The two hanging accents are separate ornament-sized boxes rather than
   background layers on one full-bleed overlay: each needs its own transform,
   duration and pivot, and rotating a shared inset:0 layer would swing the
   entire hero instead. aspect-ratio mirrors the viewBox of each SVG so the
   rendered size matches the old background-size `auto` height exactly. */
.hero-hanging-lamp,
.hero-hanging-bell {
  position: absolute;
  z-index: 1;
  top: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.92;
  pointer-events: none;
  will-change: transform;
  transform-origin: top center;
}

.hero-hanging-lamp {
  left: 0;
  width: clamp(20px, 2.4vw, 30px);
  aspect-ratio: 33.3668 / 289.9479;
  background-image: url("assets/festive-marigold-hanging.svg");
  animation: hero-lamp-swing 3.2s ease-in-out infinite;
}

.hero-hanging-bell {
  left: 34px;
  width: clamp(18px, 2vw, 26px);
  aspect-ratio: 29.4695 / 171.9999;
  background-image: url("assets/festive-marigold-pendant.svg");
  animation: hero-bell-swing 2.8s ease-in-out infinite;
}

/* A real pendulum eases fastest through the bottom of its arc and drifts at the
   extremes, so the two extremes hold slightly longer than a linear triangle wave
   would. Keyframes are pinned to 50% for that reason: 0/50/100 would spend its
   time decelerating in the middle instead. */
@keyframes hero-lamp-swing {
  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(3deg);
  }
}

@keyframes hero-bell-swing {
  0%,
  100% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-hanging-lamp,
  .hero-hanging-bell {
    animation: none;
  }
}

/* The red panel keeps this layer to itself now; the three fireworks moved out
   because a background layer cannot be transformed or filtered on its own. */
#home.hero-section::after {
  background-image: linear-gradient(
    145deg,
    rgba(210, 32, 40, 0.86),
    var(--color-red-dark)
  );
}

/* Each firework is its own element sized and clipped exactly like ::after was,
   so it still sits behind the red diagonal with the same background-position and
   background-size it had as a layer. transform-origin is the centre of that
   firework (background-position puts an image's left edge at
   (container - image) * pct, so the centre is pct plus (0.5 - pct) * size),
   which is what makes the burst expand outwards from the middle rather than
   from a corner. Scaling the element also scales its clip-path, so the firework
   keeps the identical relationship to the red panel edge at every frame. */
.hero-firework {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 63%;
  height: 92%;
  background-image: url("assets/hero-festive-firework.png");
  background-repeat: no-repeat;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  will-change: transform, opacity, filter;
  animation: hero-firework-burst 3.6s ease-out infinite;
}

.hero-firework--a {
  background-position: 43% 76%;
  background-size: 154px 154px;
  transform-origin: calc(43% + 10.78px) calc(76% - 40.04px);
}

.hero-firework--b {
  background-position: 93% 29%;
  background-size: 142px 142px;
  transform-origin: calc(93% - 61.06px) calc(29% + 29.82px);
}

.hero-firework--c {
  background-position: 94% 84%;
  background-size: 126px 126px;
  transform-origin: calc(94% - 55.44px) calc(84% - 42.84px);
}

/* One shared keyframe set, so all three burst, peak and fade on exactly the
   same frame. Scales up while fading, with brightness peaking early: that
   bright-to-dim falloff is what sells the explosion rather than a plain zoom. */
@keyframes hero-firework-burst {
  0% {
    opacity: 0;
    transform: scale(0.28);
    filter: brightness(1.6);
  }

  8% {
    opacity: 1;
    transform: scale(0.7);
    filter: brightness(2.2);
  }

  22% {
    opacity: 1;
    transform: scale(1.06);
    filter: brightness(1.35);
  }

  46% {
    opacity: 0.7;
    transform: scale(1.24);
    filter: brightness(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
    filter: brightness(0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-firework {
    animation: none;
  }
}

/* Program section uses the free ::after layer for slim marigold pendants. */
.program-section.section::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("assets/festive-marigold-pair.svg"), url("assets/festive-marigold-pendant.svg");
  background-repeat: no-repeat;
  background-position: left -12px top 0, right -14px top 0;
  background-size: clamp(54px, 7vw, 94px) auto, clamp(19px, 2.4vw, 31px) auto;
  content: "";
  opacity: 0.4;
  pointer-events: none;
}

/* Course section starbursts stay in the outer white margins. */
.curriculum-section.section::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    repeating-conic-gradient(from 3deg at 50% 50%, transparent 0deg 13deg, var(--festive-ray-soft) 13.4deg 14deg, transparent 14.4deg 26deg),
    repeating-conic-gradient(from 8deg at 50% 50%, transparent 0deg 13deg, var(--festive-ray-soft) 13.4deg 14deg, transparent 14.4deg 26deg);
  background-repeat: no-repeat;
  background-position: left -58px top 42px, right -58px bottom 24px;
  background-size: 132px 132px;
  content: "";
  pointer-events: none;
}

/* Edge ornaments sit above the environment wash and outside the photo mosaic. */
.environment-section.section::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: url("assets/festive-environment-mandala.png");
  background-repeat: no-repeat;
  background-position: left -56px center;
  background-size: clamp(340px, 34vw, 490px) auto;
  content: "";
  opacity: 0.64;
  pointer-events: none;
}

.environment-section.section::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("assets/festive-marigold-pair.svg"), url("assets/festive-marigold-pendant.svg");
  background-repeat: no-repeat;
  background-position: left 12px top 12px, right 10px top 18px;
  background-size: clamp(52px, 6.5vw, 86px) auto, clamp(20px, 2.2vw, 30px) auto;
  content: "";
  opacity: 0.24;
  pointer-events: none;
}

/* Retain the current tools veil; only add very faint gold corner rays. */
#tools .tools-overlay {
  background-color: rgba(255, 255, 255, 0.86);
  background-image:
    repeating-conic-gradient(from 5deg at 50% 50%, transparent 0deg 12deg, var(--festive-ray-soft) 12.4deg 13deg, transparent 13.4deg 24deg),
    repeating-conic-gradient(from 11deg at 50% 50%, transparent 0deg 12deg, var(--festive-ray-soft) 12.4deg 13deg, transparent 13.4deg 24deg);
  background-repeat: no-repeat;
  background-position: left 4% bottom 5%, right 4% top 8%;
  background-size: 190px 190px;
}

/* Small corner sparks frame, but never cover, the student and project carousels. */
.students-section.section::before,
.projects-section.section::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, var(--festive-glow-soft) 0 2px, transparent 3px),
    repeating-conic-gradient(from 4deg at 50% 50%, transparent 0deg 12deg, var(--festive-ray-soft) 12.4deg 13deg, transparent 13.4deg 24deg),
    radial-gradient(circle at 50% 50%, var(--festive-glow-soft) 0 2px, transparent 3px),
    repeating-conic-gradient(from 9deg at 50% 50%, transparent 0deg 12deg, var(--festive-ray-soft) 12.4deg 13deg, transparent 13.4deg 24deg);
  background-repeat: no-repeat;
  background-position: left -58px top 44px, left -58px top 44px, right -58px bottom 18px, right -58px bottom 18px;
  background-size: 138px 138px;
  content: "";
  pointer-events: none;
}

.projects-section.section::before {
  background-position: left -58px top 24px, left -58px top 24px, right -58px bottom 12px, right -58px bottom 12px;
}

/* A small diya/rangoli accent sits in the certificate section's lower safe corner.
   The artwork is one flattened PNG, so the flame is animated as a second layer:
   the same image re-shown through a small box over the flame region only. That
   keeps the bowl, rangoli and lamp position/size static while the flame moves.
   --diya-w/--diya-h keep both layers locked to the same rendered scale. */
.certificate-section.section {
  --diya-w: clamp(76px, 10vw, 142px);
  --diya-h: calc(var(--diya-w) * 0.5813);
}

.certificate-section.section::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("assets/festive-diya-rangoli.png");
  background-repeat: no-repeat;
  background-position: right 8px bottom 4px;
  background-size: var(--diya-w) var(--diya-h);
  content: "";
  filter: brightness(1.12) saturate(1.35);
  opacity: 0.92;
  pointer-events: none;
  animation: diya-body-breathe 3.4s ease-in-out infinite;
}

/* Flame layer: x 36-64% and y 0-47% of the artwork, masked so it fades into the
   static flame underneath instead of showing a seam. Glow animates on a separate
   2.4s cycle from the 2.2s flicker so the two never visibly re-sync. */
.certificate-section.section::after {
  position: absolute;
  z-index: -1;
  right: calc(8px + var(--diya-w) * 0.36);
  bottom: calc(4px + var(--diya-h) * 0.53);
  width: calc(var(--diya-w) * 0.28);
  height: calc(var(--diya-h) * 0.47);
  background-image: url("assets/festive-diya-rangoli.png");
  background-repeat: no-repeat;
  background-position: calc(var(--diya-w) * -0.36) 0;
  background-size: var(--diya-w) var(--diya-h);
  content: "";
  /* Peak of the old 32% glow stop, held static. The glow pulse now lives on
     .certificate-diya-glow as an opacity animation, because animating
     brightness()/drop-shadow() forced a repaint of this layer every frame. */
  filter: brightness(1.26) saturate(1.46) drop-shadow(0 0 11px rgba(255, 188, 92, 0.68)) drop-shadow(0 0 26px rgba(255, 152, 52, 0.4));
  opacity: 0.92;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
  transform-origin: 50% 100%;
  animation: diya-flame-flicker 2.2s ease-in-out infinite;
}

/* Glow layer: same artwork and geometry as ::after, but it only breathes.
   Split out so the flicker can own transform and the glow can own opacity -
   two compositor-only animations on separate layers instead of one paint-only
   filter animation fighting a transform animation on a single element. */
.certificate-diya-glow {
  position: absolute;
  z-index: -1;
  right: calc(8px + var(--diya-w) * 0.36);
  bottom: calc(4px + var(--diya-h) * 0.53);
  display: block;
  width: calc(var(--diya-w) * 0.28);
  height: calc(var(--diya-h) * 0.47);
  background-image: url("assets/festive-diya-rangoli.png");
  background-repeat: no-repeat;
  background-position: calc(var(--diya-w) * -0.36) 0;
  background-size: var(--diya-w) var(--diya-h);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
  animation: diya-glow-pulse 2.4s ease-in-out infinite;
}

@keyframes diya-flame-flicker {
  0%,
  100% {
    opacity: 0.9;
    transform: translateY(0) scale(1);
  }

  15% {
    opacity: 1;
    transform: translateY(-0.5px) scale(1.04);
  }

  30% {
    opacity: 0.84;
    transform: translateY(0.4px) scale(0.985);
  }

  46% {
    opacity: 0.98;
    transform: translateY(-1px) scale(1.05);
  }

  62% {
    opacity: 0.82;
    transform: translateY(0.3px) scale(0.972);
  }

  78% {
    opacity: 0.95;
    transform: translateY(-0.6px) scale(1.028);
  }
}

/* Opacity only: the layer underneath already holds the peak filter, so these
   stops are each stop's old brightness relative to the 1.26 peak, preserving
   the same lit/unlit rhythm without repainting. */
@keyframes diya-glow-pulse {
  0%,
  100% {
    opacity: 0.873;
  }

  32% {
    opacity: 1;
  }

  58% {
    opacity: 0.825;
  }

  80% {
    opacity: 0.952;
  }
}

@keyframes diya-body-breathe {
  0%,
  100% {
    opacity: 0.92;
  }

  50% {
    opacity: 0.97;
  }
}

@media (prefers-reduced-motion: reduce) {
  .certificate-section.section::before,
  .certificate-section.section::after,
  .certificate-diya-glow {
    animation: none !important;
  }

  .certificate-section.section::after {
    opacity: 0.92;
  }
}

/* Mobile-only hanging diya for the certificate panel. The lamp reuses the same
   marigold artwork as the hero, but it needs its own element rather than the
   ::before/::after pair: those two carry the desktop diya and its flame layer,
   and reusing one of them on mobile would mean restating (and risking a
   mismatch on) the desktop mask, filter and layer stack. Hidden by default so
   every width above the mobile breakpoint keeps the desktop design untouched;
   the mobile block below is the only place that turns it on. */
.certificate-hanging-lamp {
  display: none;
}

/* The Why section's mobile rangoli needs a real element for the same reason the
   certificate lamp does: both ::before and ::after on that section are already
   carrying a hanging diya. Hidden by default so every width above the mobile
   breakpoint renders exactly as before; the mobile block is the only place that
   turns it on. */
.why-rangoli {
  display: none;
}

/* The FAQ's four hanging lamps are decorative and belong to the narrow layouts
   only, where the heading, the lead and the accordion all leave a strip of
   background free either side of the container. They reuse the same
   assets/festive-marigold-hanging.svg the hero, certificate and Why sections
   already hang, so the lamp is the project's existing design rather than a new
   one. Four real elements are needed rather than ::before/::after: the FAQ
   already spends ::before on its edge flourish, and there is no free
   pseudo-element left for a fourth lamp. Hidden by default so every width at or
   above 1025px renders exactly as before; the blocks further down are the only
   places that turn them on. */
.faq-hanging-lamp {
  display: none;
}

/* A subdued edge flourish stays behind the FAQ accordion and illustration. */
.faq-section.section::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, var(--festive-glow-soft) 0 2px, transparent 3px),
    repeating-conic-gradient(from 6deg at 50% 50%, transparent 0deg 12deg, var(--festive-ray-soft) 12.4deg 13deg, transparent 13.4deg 24deg);
  background-repeat: no-repeat;
  background-position: right 1% bottom 8%, right -62px bottom -18px;
  background-size: 170px 170px;
  content: "";
  pointer-events: none;
}

/* Mirrored gold mandalas frame the existing CTA without affecting its layout.
   Both layers paint the mandala at the right edge of the full-bleed overlay;
   the ::before mirror is what carries it across to the left edge, so each
   ornament stays anchored to its own side.

   The overlay is transparent apart from the mandala, so translating the whole
   layer moves only the artwork. That means the travel needs no separate
   ornament-sized box and the artwork is never scaled or rotated.

   --arc-r is the radius of the semicircle, so the ornament bulges --arc-r
   outward at mid-path and has travelled 2 * --arc-r downward at the end.
   --arc-dir is -1 on the left layer so it bulges away from the text rather
   than into it. Both keyframe sets read these, so one property retunes the
   whole movement per breakpoint. */
.final-cta.section {
  --arc-r: 38px;
  --arc-dir: 1;
}

.final-cta.section::before,
.final-cta.section::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("assets/festive-final-cta-mandala.png");
  background-repeat: no-repeat;
  background-position: right -35px center;
  background-size: clamp(210px, 17vw, 250px) auto;
  content: "";
  opacity: 0.64;
  pointer-events: none;
  will-change: transform;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.final-cta.section::before {
  --arc-dir: -1;
  transform: scaleX(-1);
  animation-name: rangoli-arc-mirrored;
}

.final-cta.section::after {
  animation-name: rangoli-arc;
}

/* Nine stops sampled off a true circle of radius --arc-r, sweeping the angle
   from 0 to 180 degrees, so the path is genuinely semicircular rather than a
   two-step diagonal. The end stop is straight down at 2 * --arc-r, which is
   where the ornament finishes before snapping back to the top on the next
   iteration: no alternate, no reverse, no return leg. */
@keyframes rangoli-arc {
  0% {
    transform: translate(0, 0);
  }

  12.5% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.0761), calc(var(--arc-r) * 0.3827));
  }

  25% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.2929), calc(var(--arc-r) * 0.7071));
  }

  37.5% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.6173), calc(var(--arc-r) * 0.9239));
  }

  50% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r)), calc(var(--arc-r)));
  }

  62.5% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.6173), calc(var(--arc-r) * 0.9239));
  }

  75% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.2929), calc(var(--arc-r) * 0.7071));
  }

  87.5% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.0761), calc(var(--arc-r) * 0.3827));
  }

  100% {
    transform: translate(0, calc(var(--arc-r) * 2));
  }
}

/* An animation replaces the whole transform value, so the left layer's mirror
   has to be repeated inside its keyframes or it would be dropped mid-travel.
   It sits after translate() so the mirror never inverts the movement. */
@keyframes rangoli-arc-mirrored {
  0% {
    transform: translate(0, 0) scaleX(-1);
  }

  12.5% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.0761), calc(var(--arc-r) * 0.3827)) scaleX(-1);
  }

  25% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.2929), calc(var(--arc-r) * 0.7071)) scaleX(-1);
  }

  37.5% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.6173), calc(var(--arc-r) * 0.9239)) scaleX(-1);
  }

  50% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r)), calc(var(--arc-r))) scaleX(-1);
  }

  62.5% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.6173), calc(var(--arc-r) * 0.9239)) scaleX(-1);
  }

  75% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.2929), calc(var(--arc-r) * 0.7071)) scaleX(-1);
  }

  87.5% {
    transform: translate(calc(var(--arc-dir) * var(--arc-r) * 0.0761), calc(var(--arc-r) * 0.3827)) scaleX(-1);
  }

  100% {
    transform: translate(0, calc(var(--arc-r) * 2)) scaleX(-1);
  }
}

/* Cancelling the animation falls back to the base transform, so the mirror has
   to be restated here for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .final-cta.section::before,
  .final-cta.section::after {
    animation: none;
  }

  .final-cta.section::before {
    transform: scaleX(-1);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .final-cta.section {
    --arc-r: 32px;
  }

  .final-cta.section::before,
  .final-cta.section::after {
    background-position: right -86px center;
    background-size: clamp(180px, 21vw, 220px) auto;
    opacity: 0.58;
  }
}

@media (max-width: 767px) {
  .hero-hanging-lamp {
    width: 14px;
    opacity: 0.72;
  }

  /* The old mobile layer showed only the hanging accent, so the bell stays
     hidden below 768px to preserve the current mobile look. */
  .hero-hanging-bell {
    display: none;
  }

  /* Below 768px ::after spans the whole hero and its clip changes, so the
     firework elements have to follow both exactly. */
  .hero-firework {
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 30%, 100% 100%, 0 100%, 0 80%);
  }

  .hero-firework--a {
    background-size: 64px 64px;
    transform-origin: calc(43% + 4.48px) calc(76% - 16.64px);
  }

  .hero-firework--b {
    background-position: 93% 42%;
    background-size: 68px 68px;
    transform-origin: calc(93% - 29.24px) calc(42% + 5.44px);
  }

  .hero-firework--c {
    background-position: 90% 87%;
    background-size: 56px 56px;
    transform-origin: calc(90% - 22.4px) calc(87% - 20.72px);
  }

  .program-section.section::after {
    background-position: left 2px top 0, right 2px top 0;
    background-size: 25px auto, 14px auto;
    opacity: 0.2;
  }

  .curriculum-section.section::before {
    background-position: left -48px top 14px, right -48px bottom 8px;
    background-size: 96px 96px;
  }

  .environment-section.section::before {
    background-image: url("assets/festive-environment-mandala.png");
    background-position: left -16px center;
    background-size: clamp(280px, 95vw, 360px) auto;
    opacity: 0.64;
  }

  .environment-section.section::after {
    background-position: left 6px top 0, right 8px top 0;
    background-size: 42px auto, 14px auto;
    opacity: 0.2;
  }

  #tools .tools-overlay {
    background-size: 96px 96px;
    background-position: left -32px bottom 0, right -32px top 0;
  }

  .students-section.section::before,
  .projects-section.section::before {
    background-position: left -42px top 22px, left -42px top 22px, right -42px bottom 8px, right -42px bottom 8px;
    background-size: 96px 96px;
    opacity: 0.55;
  }

  .certificate-section.section::before,
  .certificate-section.section::after {
    display: none;
  }

  /* The diya pair above stays off on mobile, so this layer is free for the
     hanging lamp. It hangs from the section's top edge just inside the right
     edge, clear of the heading text on its left and stopping short of the
     certificate image below it, so nothing has to move to make room for it.
     aspect-ratio mirrors the viewBox of the artwork, so the string and the bowl
     keep their drawn proportions instead of being stretched to the box.
     transform-origin stays at the top so the string keeps its attachment point
     and only the lamp swings. */
  .certificate-hanging-lamp {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 10px;
    display: block;
    width: 14px;
    aspect-ratio: 33.3668 / 289.9479;
    background: url("assets/festive-marigold-hanging.svg") center / 100% 100%
      no-repeat;
    opacity: 0.9;
    pointer-events: none;
    will-change: transform;
    transform-origin: top center;
    animation: certificate-lamp-swing 3.5s ease-in-out infinite;
  }


  .faq-section.section::before {
    background-position: right -44px bottom -12px, right -44px bottom -12px;
    background-size: 120px 120px;
    opacity: 0.55;
  }

  .final-cta.section {
    --arc-r: 26px;
  }

  .final-cta.section::before,
  .final-cta.section::after {
    background-position: right -128px center;
    background-size: clamp(150px, 42vw, 200px) auto;
    opacity: 0.5;
  }

  /* Why section, mobile only - one small hanging diya per edge.
     At this breakpoint the heading, all five cards and the CTA run the full
     container width, so the only red that is genuinely free of content is the
     ~12px strip either side of the container plus the gap bands between rows.
     Both diyas are sized and placed to live entirely inside those strips: at
     8px wide the lamp is 70px tall, and a 2deg arc about its top centre widens
     that box by only ~1.2px at the bowl, which leaves both diyas clear of the
     heading's line boxes, every card and the circular icons. z-index: -1
     combined with the section's own isolation keeps them behind the content
     layer, and since neither leaves the viewport there is no horizontal
     overflow to scroll. The section has no other pseudo-element layers, so
     ::before/::after are free here and need no overriding of an existing
     desktop decoration. */
  .why-section.section::before,
  .why-section.section::after {
    position: absolute;
    z-index: -1;
    top: 0;
    width: 8px;
    aspect-ratio: 33.3668 / 289.9479;
    background: url("assets/festive-marigold-hanging.svg") center top / 100% 100%
      no-repeat;
    content: "";
    filter: brightness(1.16) saturate(1.34)
      drop-shadow(0 0 3.5px rgba(255, 186, 74, 0.6));
    opacity: 0.78;
    pointer-events: none;
    transform-origin: top center;
  }

  .why-section.section::before {
    left: 1px;
    animation: why-diya-swing 3.6s ease-in-out infinite;
  }

  .why-section.section::after {
    top: 16px;
    right: 2px;
    animation: why-diya-swing 4.4s ease-in-out -1.1s infinite;
  }

  /* The two corner ornaments are cropped by the section box, so the section has
     to clip on mobile. Without this the top-right instance would extend past the
     right edge and open a horizontal scrollbar. overflow: hidden is safe here:
     .why-inner carries 48px of padding top and bottom, so there are no collapsing
     margins for the new block formatting context to disturb, and the section's
     height is unchanged (verified identical before and after). Desktop is
     untouched - this lives in the mobile block only. */
  .why-section.section {
    overflow: hidden;
  }

  /* Why section rangoli, mobile only. Two static 180deg-rotated corner ornaments
     anchored to the top-left and top-right of the section, each running down its
     side edge; the centre of the section stays clean.

     Anchored with top:0 + left:0 / right:0 so each ornament genuinely starts in
     its corner. The mandala is painted oversized and offset to negative
     coordinates, so the pattern is cut by the element's own top and left (or
     right) edge - i.e. by the screen edge itself - which reads as a motif
     bleeding off the corner rather than a shape sitting inside a box. The
     background is clipped to the element's padding box, and the element is
     anchored inside the section, so neither instance can reach the viewport
     edge and open horizontal scroll.

     A corner-anchored radial mask is what keeps this from looking like a
     rectangle: the pattern is fully opaque in the corner and dissolves before it
     reaches the heading, so there is no hard inner cut-off line. The mask anchor
     is written as 100% 100% on the left instance and 0% 100% on the right
     because the 180deg rotation flips the box - those are the pre-rotation
     coordinates that land on the top-left and top-right corners afterwards.

     The 180deg rotation is the static starting orientation only, applied
     identically to both instances. Nothing here animates: no rotation, no
     travel, no pulse. */
  .why-rangoli {
    position: absolute;
    z-index: -1;
    top: 0;
    display: block;
    width: 190px;
    height: 320px;
    background-image: url("assets/festive-final-cta-mandala.png");
    background-repeat: no-repeat;
    background-size: 250px auto;
    background-position: -30px -95px;
    filter: brightness(1.2) saturate(1.36)
      drop-shadow(0 0 5px rgba(255, 178, 76, 0.5));
    opacity: 0.6;
    pointer-events: none;
    transform: rotate(180deg);
    -webkit-mask-image: radial-gradient(
      115% 108% at 100% 100%,
      #000 14%,
      rgba(0, 0, 0, 0.5) 36%,
      transparent 60%
    );
    mask-image: radial-gradient(
      115% 108% at 100% 100%,
      #000 14%,
      rgba(0, 0, 0, 0.5) 36%,
      transparent 60%
    );
  }

  .why-rangoli--left {
    left: 0;
  }

  /* The right-hand corner ornament is switched off on mobile: display: none
     cancels the display: block the shared .why-rangoli rule above turns on, so
     the right instance is not painted at all. The element and the shared
     mandala asset stay in place for the left instance, which is untouched, and
     because the base .why-rangoli rule is already display: none above 768px
     this stays a mobile-only change. */
  .why-rangoli--right {
    display: none;
  }
}

/* A 2deg arc is a deliberately small swing: the diyas sit in a 12px strip, so a
   wider one would swing the bowl over the card edge. Both extremes hold slightly
   longer than a linear triangle wave would, which is what makes a pendulum read
   as eased rather than ticking. The right-hand diya runs on a slower cycle and
   starts mid-phase, so the pair never moves in lockstep. */
@keyframes why-diya-swing {
  0%,
  100% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-section.section::before,
  .why-section.section::after {
    animation: none;
  }
}

/* The certificate lamp eases fastest through the bottom of its arc and drifts at
   the extremes, so the keyframes are pinned to 50% for the same reason the hero
   pendants are: a 0/50/100 triangle wave would spend its time decelerating in
   the middle instead. Both extremes hold slightly longer than a linear wave. */
@keyframes certificate-lamp-swing {
  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .certificate-hanging-lamp {
    animation: none;
  }
}


@media (max-width: 390px) {
  .program-section.section::after {
    background-size: 20px auto, 11px auto;
  }

  .students-section.section::before,
  .projects-section.section::before {
    opacity: 0.4;
  }
}

@media (max-width: 767px) {
  .environment-popup { width: max-content; }
  .environment-popup-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: inherit;
  }
  .environment-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    color: #222;
    box-shadow: 0 2px 8px #0004;
    font: 30px/1 Arial, sans-serif;
    pointer-events: auto;
  }
  .environment-popup:not(.is-open) .environment-popup-close { pointer-events: none; }
}

/* FAQ hanging lamps, tablet and mobile only (max-width: 1024px).
   Four instances of the project's existing marigold hanging diya: the same
   assets/festive-marigold-hanging.svg, the same aspect-ratio, the same
   brightness/saturate/drop-shadow filter and the same small amplitude as the
   lamps in the hero, the certificate panel and the Why section, so the four
   lamps read as the same ornament already used elsewhere in the page.

   Where they go. The FAQ is the one section whose content is inset on both
   sides - .container is min(100% - 48px, ...) on tablet and min(100% - 32px,
   ...) on mobile - which leaves a strip of background running the full height
   of the section down each edge, 24px per side on tablet, 16px on mobile and
   12px at 390px and below. That strip is the only region the heading, the lead,
   the accordion and the toggle icons never enter, so all four lamps live there
   and the FAQ content stays completely clear. At tablet the illustration column
   is still part of the grid, and it too stops at the container edge, so nothing
   is covered there either.

   How they hang. Each box is the full SVG: its top ~78% is the thin cord and
   only the bottom ~22% is the lamp, so anchoring a box by its top edge produces
   a genuinely hanging lamp with the string visible above it - the two top lamps
   are pinned to the very top of the section, and the two lower lamps are pinned
   near the bottom edge so their cords run upward alongside the last questions.
   transform-origin: top center puts the pivot on the cord, not on the lamp, so
   the swing pivots about the hanging point and the string stays attached
   throughout.

   Sizing. A 2deg arc about the top centre swings the bottom of a box of height
   H sideways by H * sin(2deg) ~ H * 0.035, so the widest reach of each lamp is
   its own width plus that offset: 14 + 4 = 18px of the 24px tablet strip, and
   8 + 2.5 = 10.5px of the 12px strip at 390px. Every instance therefore stays
   inside its strip for the whole cycle, and z-index: -1 with the section's own
   isolation keeps them behind the content layer regardless. */
@media (max-width: 1024px) {
  .faq-hanging-lamp {
    position: absolute;
    z-index: -1;
    display: block;
    width: 14px;
    aspect-ratio: 33.3668 / 289.9479;
    background: url("assets/festive-marigold-hanging.svg") center top / 100% 100%
      no-repeat;
    filter: brightness(1.16) saturate(1.34)
      drop-shadow(0 0 3.5px rgba(255, 186, 74, 0.6));
    opacity: 0.9;
    pointer-events: none;
    will-change: transform;
    transform-origin: top center;
  }

  .faq-hanging-lamp--top-left {
    top: 0;
    left: 6px;
    animation: faq-lamp-swing 3.6s ease-in-out infinite;
  }

  .faq-hanging-lamp--top-right {
    top: 0;
    right: 6px;
    animation: faq-lamp-swing 4s ease-in-out -1.2s infinite;
  }

  .faq-hanging-lamp--bottom-left {
    bottom: 28px;
    left: 6px;
    animation: faq-lamp-swing 3.3s ease-in-out -0.7s infinite;
  }

  .faq-hanging-lamp--bottom-right {
    bottom: 28px;
    right: 6px;
    animation: faq-lamp-swing 3.8s ease-in-out -1.9s infinite;
  }
}

/* Mobile, and the smallest phones. The strip either side of the container
   narrows from 24px to 16px (and to 12px below 390px), so the lamps step down
   to match and stay clear of the accordion's edge: 10px wide is 11.5px of
   reach in a 16px strip, and 8px wide is 10.5px of reach in a 12px one.

   The 3px offset is not cosmetic. A 2deg arc pivoted on the cord moves the
   bottom of the box sideways by H * sin(2deg), which is 3.0px for a 10px lamp
   and 2.4px for an 8px one, so an offset smaller than that lets the widest
   part of the artwork - the lamp's rim, near the bottom of the box - swing
   fractionally past the edge of the screen. 3px absorbs the whole arc while
   still leaving 3px between the lamp and the accordion at 391-767px and 1px at
   390px, where the container is inset only 12px. */
@media (max-width: 767px) {
  .faq-hanging-lamp {
    width: 10px;
  }

  .faq-hanging-lamp--top-left,
  .faq-hanging-lamp--bottom-left {
    left: 3px;
  }

  .faq-hanging-lamp--top-right,
  .faq-hanging-lamp--bottom-right {
    right: 3px;
  }
}

@media (max-width: 390px) {
  .faq-hanging-lamp {
    width: 8px;
  }

  .faq-hanging-lamp--bottom-left,
  .faq-hanging-lamp--bottom-right {
    bottom: 20px;
  }
}
/* A 2deg arc pivoted on the cord, matching why-diya-swing: both extremes hold
   slightly longer than a linear triangle wave would, which is what makes a
   pendulum read as eased rather than ticking. The four lamps run on four
   different cycles and start at four different phases, so the pair never moves
   in lockstep. Rotation only - no translation, scale or fade - so each lamp
   stays on its own axis and its cord stays joined to it. */
@keyframes faq-lamp-swing {
  0%,
  100% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-hanging-lamp {
    animation: none;
  }
}

/* ==========================================================================
   HERO - FESTIVE VISUAL LAYER
   Diwali + Saraswathi Pooja + Ayudha Pooja + Karthikai Deepam.

   Scope: this block only changes the hero's background treatment, adds a
   decorative ornament layer and animates that layer. No hero content, control,
   form field, size, position, font or breakpoint rule is modified, and no
   .hero-* rule above is deleted or rewritten - everything here is additive and
   sits at the end of the sheet so it wins on source order where it must.

   Why the copy side stays light. The hero copy is dark type, so the deep
   crimson/maroon panel is kept on the right-hand diagonal, exactly where the
   white form card already sits - the card is never darkened and the copy keeps
   full contrast. The left half becomes a warm champagne ground with gold
   lighting rather than flat white, so the toranam, marigolds and fountains
   read against it instead of floating on a blank page.

   Nothing here is a bitmap. Every effect is gradients plus a transform, so the
   layer adds no requests and no layout. The only per-frame repaints are the
   three pushvanam plumes, which animate background-position on a ~110x100 box.

   Every animated element also carries a good static base state, so switching
   its animation off (reduced motion, below) leaves the ornament visible rather
   than blank.
   ========================================================================== */

/* --- Background: deep maroon ground, warm crimson depth ------------------- */
/* The gold ornaments (pushvanam, crackers, kambi, diyas, marigold) are painted
   in gold/amber at low alpha, which only reads against a dark ground. On the
   earlier ivory/champagne base the whole layer measured ~1.6:1 median contrast
   and disappeared; the ground is therefore a deep warm maroon, with the floor
   light pulled back so it lights the diyas without washing the panel out. */
#home.hero-section {
  position: relative;
  background-color: #6a0f18;
  background-image:
    url("assets/hero-diagonal.svg"),
    radial-gradient(54% 66% at 50% 99%, rgba(255, 194, 104, 0.26), rgba(255, 176, 92, 0) 70%),
    linear-gradient(168deg, #8f1322 0%, #6a0f18 46%, #47070f 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right top, center bottom, center top;
  background-size: auto 100%, 100% 100%, 100% 100%;
  /* hero-diagonal.svg is a light champagne graphic from the original pale hero.
     Multiplied rather than laid over, it darkens into the maroon instead of
     dropping light blobs behind the near-white headline. */
  background-blend-mode: multiply, normal, normal;
}

/* --- Background: the crimson / burgundy / maroon panel --------------------- */
/* The two gold pools are deliberately small and pinned to the corners where the
   diyas and fountain plumes actually sit, rather than spread across the panel.
   A wide, strong pool over the crimson lifts the whole lower half into a flat
   brown and destroys the maroon; kept tight, the gradient keeps its
   #4a0611 - #82091b depth everywhere else and the gold reads as light falling
   on the lamps. Verified by sampling the rendered pixels. */
#home.hero-section::after {
  background-image:
    radial-gradient(34% 30% at 84% 94%, rgba(255, 186, 100, 0.24), rgba(255, 146, 58, 0.05) 46%, rgba(255, 146, 58, 0) 74%),
    radial-gradient(50% 44% at 102% 6%, rgba(255, 162, 70, 0.24), rgba(255, 162, 70, 0) 70%),
    radial-gradient(40% 36% at 6% 104%, rgba(255, 176, 84, 0.14), rgba(255, 176, 84, 0) 72%),
    linear-gradient(150deg, rgba(200, 19, 29, 0.55) 0%, rgba(171, 10, 23, 0.44) 26%, rgba(130, 9, 27, 0.3) 58%, rgba(74, 6, 17, 0.12) 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}

/* Only the mobile breakpoint resizes hero-diagonal.svg (auto 320px, centred);
   768px and up keeps the base right-top / auto 100% sizing, so nothing has to be
   restated for it. */
@media (max-width: 767px) {
  #home.hero-section {
    background-position: center top, center bottom, center top;
    background-size: auto 320px, 100% 100%, 100% 100%;
  }
}

/* --- Ambient golden lighting over the whole hero -------------------------- */
/* Restrained on purpose: it breathes between 0.88 and 1 so the dark hero copy
   sitting on the left keeps exactly the contrast it has now. */
.hero-festive-light {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image:
    radial-gradient(46% 42% at 88% 84%, rgba(255, 188, 86, 0.2), rgba(255, 150, 60, 0.06) 46%, rgba(255, 150, 60, 0) 74%),
    radial-gradient(44% 40% at 34% 96%, rgba(255, 206, 126, 0.2), rgba(255, 176, 92, 0) 72%),
    radial-gradient(50% 44% at 100% 4%, rgba(255, 164, 70, 0.18), rgba(255, 164, 70, 0) 74%),
    radial-gradient(34% 38% at 4% 90%, rgba(255, 198, 110, 0.15), rgba(255, 176, 92, 0) 74%);
  opacity: 0.94;
  pointer-events: none;
  will-change: opacity;
  animation: hero-light-breathe 11s ease-in-out infinite;
}

@keyframes hero-light-breathe {
  0%,
  100% {
    opacity: 0.88;
  }

  45% {
    opacity: 1;
  }
}

/* --- Gold rim light along the panel's leading edge ------------------------ */
/* A hairline of warm gold exactly on the diagonal over a wider blurred bleed.
   Both are thin band clip-paths rather than a border, so the rim follows the
   panel's real edge at every viewport instead of approximating the angle -
   which a rotated gradient could not do, because the panel's slope changes
   with the hero's aspect ratio.

   The wide band is on the element and the hairline on ::before, not the other
   way round: a clip-path also clips the element's own pseudo-children, so a
   wide ::before under a narrow element band would be cut back to the narrow
   band and the bleed would disappear. Nested the other way, the hairline sits
   wholly inside the bleed and loses nothing. */
.hero-festive-rim {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  display: block;
  width: 63%;
  height: 92%;
  background-image: linear-gradient(180deg, rgba(255, 236, 176, 0.95) 0%, rgba(255, 186, 78, 0.8) 46%, rgba(255, 142, 44, 0.68) 100%);
  clip-path: polygon(0 100%, 100% 0%, 100% 5.4%, 0 105.4%);
  filter: blur(10px) brightness(1.5) saturate(1.1);
  opacity: 0.42;
  pointer-events: none;
  animation: hero-rim-pulse 7.4s ease-in-out infinite;
}

.hero-festive-rim::before {
  position: absolute;
  inset: 0;
  background-image: inherit;
  clip-path: polygon(0 100%, 100% 0%, 100% 1.8%, 0 101.8%);
  content: "";
  filter: blur(2.5px) brightness(1.3) saturate(1.15);
  opacity: 0.9;
  pointer-events: none;
}

/* Scales the whole rim (bleed and hairline together) rather than only the
   hairline, so the two never drift apart in brightness. */
@keyframes hero-rim-pulse {
  0%,
  100% {
    opacity: 0.4;
  }

  40% {
    opacity: 0.58;
  }

  70% {
    opacity: 0.46;
  }
}

/* --- Corner gold ornament (kolam / mandala rays) ------------------------- */
/* The radial mask is what stops this reading as a box: the pattern is solid in
   the corner it is anchored to and dissolves before it reaches the content, so
   there is no hard inner cut-off. */
.hero-festive-motif {
  position: absolute;
  z-index: 1;
  display: block;
  width: clamp(200px, 20vw, 300px);
  aspect-ratio: 1;
  background-image:
    radial-gradient(circle 2.4px at 50% 50%, rgba(255, 214, 128, 0.6) 0 60%, rgba(255, 214, 128, 0) 100%),
    repeating-conic-gradient(from 3deg at 50% 50%, rgba(255, 208, 116, 0.14) 0deg 1.1deg, rgba(255, 208, 116, 0) 1.1deg 11deg),
    repeating-conic-gradient(from 9deg at 50% 50%, rgba(255, 208, 116, 0.09) 0deg 0.9deg, rgba(255, 208, 116, 0) 0.9deg 17deg),
    radial-gradient(circle at 50% 50%, rgba(255, 208, 116, 0) 0 21%, rgba(255, 206, 112, 0.17) 21.4% 22.2%, rgba(255, 208, 116, 0) 22.6% 40%, rgba(255, 206, 112, 0.13) 40.4% 41.1%, rgba(255, 208, 116, 0) 41.5% 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 30%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 30%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.9;
  pointer-events: none;
  animation: hero-motif-turn 190s linear infinite;
}

.hero-festive-motif--a {
  bottom: -104px;
  left: -116px;
}

.hero-festive-motif--b {
  top: -86px;
  right: -124px;
  width: clamp(220px, 22vw, 330px);
  opacity: 0.66;
}

@keyframes hero-motif-turn {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* --- Thoranam: mango-leaf garland with marigolds across the top ---------- */
/* A leaf garland is the single clearest "this is a temple door" cue, and it
   lives in the strip above the hero copy, so it overlaps nothing. Two staggered
   24px leaf tiles interlock into one dense band, marigold heads are threaded
   through every second leaf, and a slower 96px tile drops a marigold on a gold
   thread below. */
.hero-toranam {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 34px;
  background-image:
    radial-gradient(circle 6px at 50% 27px, rgba(246, 186, 56, 0.98) 0 3.2px, rgba(214, 104, 22, 0.95) 3.6px 5.6px, rgba(214, 104, 22, 0) 5.9px),
    linear-gradient(180deg, rgba(206, 158, 62, 0) 0 13px, rgba(206, 158, 62, 0.9) 13px 20px, rgba(206, 158, 62, 0) 20px 100%),
    radial-gradient(circle 6.4px at 50% 12px, rgba(250, 196, 66, 0.98) 0 3.4px, rgba(224, 118, 27, 0.96) 3.8px 5.9px, rgba(224, 118, 27, 0) 6.2px),
    radial-gradient(ellipse 13px 6px at 50% 15px, rgba(72, 160, 76, 0.97) 0 58%, rgba(47, 111, 54, 0.97) 62% 100%, rgba(47, 111, 54, 0) 100%),
    radial-gradient(ellipse 13px 6px at 50% 9px, rgba(61, 143, 69, 0.95) 0 58%, rgba(39, 95, 46, 0.95) 62% 100%, rgba(39, 95, 46, 0) 100%),
    linear-gradient(180deg, rgba(198, 150, 58, 0.95) 0 1.6px, rgba(160, 116, 40, 0.5) 1.6px 2.4px, rgba(198, 150, 58, 0) 2.4px 100%);
  background-size:
    96px 34px,
    96px 34px,
    48px 34px,
    24px 34px,
    24px 34px,
    100% 34px;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    12px 0,
    0 0;
  background-repeat:
    repeat-x,
    repeat-x,
    repeat-x,
    repeat-x,
    repeat-x,
    no-repeat;
  filter: drop-shadow(0 2px 3px rgba(112, 56, 8, 0.26));
  opacity: 0.96;
  pointer-events: none;
}

/* --- Pushvanam: ground fountain fireworks -------------------------------- */
/* A fountain, not a burst. ::before is a plume of five tiled dot fields, each
   tile moving up by exactly its own height, which makes the whole field a
   seamless conveyor: dots leave the pot at the bottom, slow and fan out
   through the mask, and fade before they reach the top - the shape a real
   pushvanam makes. The element itself carries the surge envelope, and the
   three instances run three different durations and phases so the row never
   pulses in lockstep. */
/* The height cap is set by the hero's own padding: the copy column is centred
   inside .hero-inner's content box, so the strip below it is never smaller than
   the 70px bottom padding. Anything taller would put the brightest part of a
   plume behind the buttons - the mask keeps the top of the box near zero alpha
   either way, but the geometry should not rely on that. */
.hero-pushvanam {
  position: absolute;
  z-index: 1;
  bottom: 0;
  display: block;
  width: clamp(96px, 8.4vw, 132px);
  height: clamp(62px, 5.6vw, 88px);
  background-image:
    radial-gradient(ellipse 44% 20% at 50% 96%, rgba(255, 186, 88, 0.55), rgba(255, 150, 60, 0) 72%),
    radial-gradient(ellipse 26% 48% at 50% 76%, rgba(255, 168, 66, 0.24), rgba(255, 140, 50, 0) 76%);
  opacity: 0.9;
  transform-origin: 50% 100%;
  pointer-events: none;
  will-change: transform, opacity;
  animation: hero-pushvanam-surge 3.1s ease-in-out infinite;
}

.hero-pushvanam::before {
  position: absolute;
  inset: 0 0 7px;
  background-image:
    radial-gradient(circle 2.3px at 50% 50%, rgba(255, 247, 214, 0.98) 0 42%, rgba(255, 203, 96, 0) 100%),
    radial-gradient(circle 2.7px at 34% 50%, rgba(255, 222, 140, 0.9) 0 42%, rgba(255, 168, 56, 0) 100%),
    radial-gradient(circle 3px at 68% 50%, rgba(255, 196, 104, 0.84) 0 42%, rgba(255, 146, 42, 0) 100%),
    radial-gradient(circle 3.4px at 13% 50%, rgba(255, 182, 88, 0.62) 0 42%, rgba(255, 130, 32, 0) 100%),
    radial-gradient(circle 3.6px at 87% 50%, rgba(255, 186, 92, 0.62) 0 42%, rgba(255, 132, 34, 0) 100%);
  background-size:
    8px 14px,
    13px 24px,
    19px 34px,
    28px 50px,
    32px 60px;
  background-position:
    center bottom,
    center bottom,
    center bottom,
    center bottom,
    center bottom;
  background-repeat: repeat-y;
  -webkit-mask-image: radial-gradient(58% 96% at 50% 100%, #000 6%, rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 0.5) 70%, transparent 96%);
  mask-image: radial-gradient(58% 96% at 50% 100%, #000 6%, rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 0.5) 70%, transparent 96%);
  content: "";
  will-change: background-position;
  animation: hero-pushvanam-rise 1.15s linear infinite;
}

.hero-pushvanam::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 32%;
  min-width: 22px;
  height: 15%;
  transform: translateX(-50%);
  border-radius: 2px 2px 5px 5px / 1px 1px 7px 7px;
  background-image: linear-gradient(180deg, #a24a17 0 24%, #7a2c0b 26% 62%, #4a1704 64% 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 150, 0.45),
    0 0 12px 3px rgba(255, 158, 52, 0.45);
  content: "";
}

.hero-pushvanam--a {
  left: 2%;
  animation-duration: 3.1s;
}

.hero-pushvanam--b {
  left: 27%;
  width: clamp(78px, 6.8vw, 106px);
  height: clamp(52px, 4.6vw, 72px);
  opacity: 0.66;
  animation-duration: 2.4s;
  animation-delay: -0.9s;
}

.hero-pushvanam--b::before {
  animation-duration: 0.86s;
}

.hero-pushvanam--c {
  right: 4%;
  animation-duration: 3.7s;
  animation-delay: -1.8s;
}

.hero-pushvanam--c::before {
  animation-duration: 1.42s;
}

/* Each tile travels up by exactly its own height, so the field repeats without
   a seam and the dots read as continuous upward flow rather than a loop. */
@keyframes hero-pushvanam-rise {
  from {
    background-position:
      center bottom,
      center bottom,
      center bottom,
      center bottom,
      center bottom;
  }

  to {
    background-position:
      center -20px,
      center -34px,
      center -50px,
      center -78px,
      center -92px;
  }
}

/* The lit charge, not a fade loop: the fountain surges, dips, surges again. The
   uneven keyframe spacing is the whole point - an even cycle reads as a pulse
   animation, an uneven one reads as a fuse burning down. */
@keyframes hero-pushvanam-surge {
  0%,
  100% {
    opacity: 0.78;
    transform: scaleY(0.92) scaleX(1);
  }

  16% {
    opacity: 1;
    transform: scaleY(1.07) scaleX(1.02);
  }

  41% {
    opacity: 0.58;
    transform: scaleY(0.88) scaleX(0.99);
  }

  63% {
    opacity: 0.95;
    transform: scaleY(1.04) scaleX(1.01);
  }

  82% {
    opacity: 0.68;
    transform: scaleY(0.94) scaleX(1);
  }
}

/* --- Kambi mathappu: hand-held sparkler ---------------------------------- */
/* A 3px bamboo stick with a silver coil, and a spark head that expands out of
   the tip and is replaced by a fresh one - which is exactly what a real kambi
   looks like, and why the head animates scale rather than a loop of dots. */
.hero-kambi {
  position: absolute;
  z-index: 1;
  bottom: 0;
  display: block;
  width: 44px;
  height: 96px;
  background-image: radial-gradient(circle 26px at 50% 22%, rgba(255, 200, 104, 0.62), rgba(255, 176, 92, 0) 74%);
  opacity: 0.94;
  transform-origin: 50% 100%;
  pointer-events: none;
  will-change: transform;
  animation: hero-kambi-sway 4.2s ease-in-out infinite;
}

.hero-kambi::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 9px;
  height: 70%;
  transform: translateX(-50%);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 11.6%, #e8ebf1 11.6% 14.2%, #a6aeba 14.2% 17.4%, rgba(0, 0, 0, 0) 17.4% 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0 32%, #7a4a1c 32% 68%, rgba(0, 0, 0, 0) 68% 100%),
    linear-gradient(180deg, #f3d795 0 6%, #c08d3f 7% 12%, #7a4a1c 13% 62%, #4e2c0c 100%);
  filter: drop-shadow(0 0 4px rgba(255, 186, 84, 0.45));
  content: "";
}

.hero-kambi::after {
  position: absolute;
  bottom: 68%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, 50%) scale(0.85);
  background-image:
    radial-gradient(circle 3px at 50% 50%, rgba(255, 254, 240, 1) 0 42%, rgba(255, 206, 110, 0.5) 62%, rgba(255, 206, 110, 0) 100%),
    radial-gradient(circle 2.1px at 50% 50%, rgba(255, 246, 206, 0.95) 0 42%, rgba(255, 246, 206, 0) 100%),
    radial-gradient(circle 2.3px at 50% 50%, rgba(255, 214, 126, 0.82) 0 42%, rgba(255, 214, 126, 0) 100%);
  background-size:
    100% 100%,
    6px 6px,
    9px 9px;
  background-repeat: no-repeat, repeat, repeat;
  background-position: center, center, center;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 20%, rgba(0, 0, 0, 0.92) 44%, rgba(0, 0, 0, 0.55) 68%, rgba(0, 0, 0, 0) 92%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 20%, rgba(0, 0, 0, 0.92) 44%, rgba(0, 0, 0, 0.55) 68%, rgba(0, 0, 0, 0) 92%);
  opacity: 1;
  content: "";
  will-change: transform, opacity;
  animation: hero-kambi-sparks 0.62s linear infinite;
}

.hero-kambi--a {
  right: 19%;
  bottom: 2px;
  animation-duration: 4.2s;
}

.hero-kambi--a::after {
  animation-duration: 0.62s;
}

.hero-kambi--b {
  left: 38%;
  height: 82px;
  width: 38px;
  opacity: 0.84;
  animation-duration: 3.4s;
  animation-delay: -1.5s;
}

.hero-kambi--b::after {
  width: 38px;
  height: 38px;
  animation-duration: 0.5s;
  animation-delay: -0.22s;
}

/* Both extremes hold a little longer than a linear triangle wave, so the stick
   eases through the bottom of its arc and drifts at the ends. */
@keyframes hero-kambi-sway {
  0%,
  100% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(4deg);
  }
}

@keyframes hero-kambi-sparks {
  0% {
    transform: translate(-50%, 50%) scale(0.5);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 50%) scale(1.18);
    opacity: 0.12;
  }
}

/* --- Diwali cracker bursts at the decorative edges ------------------------ */
/* A bright core, two tiled spark fields and a mask that keeps the energy in a
   ring, then one short burst: expand, brighten early, dim, gone. Base opacity
   and scale are a finished mid-burst frame, so reduced motion still shows a
   lit cracker rather than an empty box. */
.hero-cracker {
  position: absolute;
  z-index: 1;
  display: block;
  width: 108px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image:
    radial-gradient(circle 2.6px at 50% 50%, rgba(255, 252, 232, 1) 0 42%, rgba(255, 196, 92, 0.55) 58%, rgba(255, 196, 92, 0) 100%),
    radial-gradient(circle 1.4px at 50% 50%, rgba(255, 238, 190, 0.95) 0 42%, rgba(255, 178, 74, 0) 100%),
    radial-gradient(circle 1.1px at 50% 50%, rgba(255, 206, 116, 0.82) 0 42%, rgba(255, 150, 52, 0) 100%);
  background-size:
    100% 100%,
    12px 12px,
    19px 19px;
  background-repeat: no-repeat, repeat, repeat;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 20%, rgba(0, 0, 0, 0.94) 40%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0.22) 80%, rgba(0, 0, 0, 0) 96%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 20%, rgba(0, 0, 0, 0.94) 40%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0.22) 80%, rgba(0, 0, 0, 0) 96%);
  opacity: 0.9;
  transform: scale(0.8);
  pointer-events: none;
  will-change: transform, opacity, filter;
  animation: hero-cracker-burst 2.7s cubic-bezier(0.2, 0.72, 0.3, 1) infinite;
}

.hero-cracker--a {
  bottom: 34px;
  left: -26px;
  animation-duration: 2.7s;
}

.hero-cracker--b {
  bottom: 26px;
  right: -28px;
  animation-duration: 3.3s;
  animation-delay: -1.1s;
}

.hero-cracker--c {
  bottom: 66px;
  left: 46%;
  width: 76px;
  animation-duration: 2.2s;
  animation-delay: -1.7s;
}

@keyframes hero-cracker-burst {
  0% {
    opacity: 0;
    transform: scale(0.18);
    filter: brightness(1.4);
  }

  7% {
    opacity: 1;
  }

  27% {
    opacity: 0.95;
    transform: scale(1);
    filter: brightness(1.6);
  }

  62% {
    opacity: 0.3;
    transform: scale(1.5);
    filter: brightness(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.75);
    filter: brightness(0.8);
  }
}

/* --- Karthikai Deepam: three different small diyas ------------------------ */
/* Each lamp has its own silhouette, base and flame, so the hero never repeats
   one lamp: a shallow terracotta diya, a tall brass standing lamp, and a
   lotus-petal diya. Shared flame and glow keyframes keep them in step with the
   rest of the layer; the instances run on different durations and phases. */
.hero-diya {
  position: absolute;
  z-index: 1;
  bottom: 0;
  display: block;
  background-image: radial-gradient(ellipse 26px 12px at 50% 82%, rgba(255, 176, 64, 0.48), rgba(255, 150, 60, 0) 74%);
  opacity: 0.95;
  pointer-events: none;
  will-change: opacity;
  animation: hero-diya-glow 4.2s ease-in-out infinite;
}

/* Terracotta diya: wide, shallow, slightly tapered clay bowl. */
.hero-diya--clay {
  left: 12%;
  width: 38px;
  height: 26px;
  animation-duration: 4.2s;
}

.hero-diya--clay::before {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 13px;
  border-radius: 4px 4px 13px 13px / 3px 3px 13px 13px;
  background-image: linear-gradient(180deg, #b8541c 0 24%, #83310d 26% 64%, #4e1a05 66% 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 196, 128, 0.35),
    inset 0 -3px 3px rgba(0, 0, 0, 0.4);
  content: "";
}

/* Brass standing lamp: round foot, thin stem, flared cup. */
.hero-diya--brass {
  right: 13%;
  width: 26px;
  height: 46px;
  background-image: radial-gradient(ellipse 24px 14px at 50% 88%, rgba(255, 184, 72, 0.44), rgba(255, 150, 60, 0) 76%);
  animation-duration: 3.4s;
  animation-delay: -1.2s;
}

.hero-diya--brass::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 62%;
  transform: translateX(-50%);
  background-image:
    radial-gradient(ellipse 46% 20% at 50% 20%, #f6cf7c 0 58%, #a9762a 62% 100%, rgba(169, 118, 42, 0) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, #cf9f47 40% 60%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(ellipse 44% 34% at 50% 88%, #e6bc62 0 60%, #8f6520 64% 100%, rgba(143, 101, 32, 0) 100%);
  background-repeat: no-repeat;
  background-size:
    86% 26%,
    16% 52%,
    90% 28%;
  background-position:
    center top,
    center 28%,
    center bottom;
  filter: drop-shadow(0 0 4px rgba(255, 186, 80, 0.5));
  content: "";
}

/* Lotus diya: a fan of petals, wide and low. */
.hero-diya--lotus {
  left: 47%;
  width: 46px;
  height: 30px;
  animation-duration: 5s;
  animation-delay: -2.4s;
}

.hero-diya--lotus::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 17px;
  transform: translateX(-50%);
  border-radius: 0 0 46px 46px / 0 0 17px 17px;
  background-image: repeating-conic-gradient(from -14deg at 50% 100%, rgba(255, 196, 72, 0.95) 0deg 12deg, rgba(190, 98, 18, 0.95) 12deg 26deg);
  box-shadow:
    inset 0 -3px 4px rgba(120, 50, 0, 0.45),
    0 0 8px rgba(255, 168, 60, 0.4);
  content: "";
}

.hero-diya::after {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 7px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50% 50% 46% 46% / 66% 66% 34% 34%;
  background-image: radial-gradient(ellipse 50% 42% at 50% 72%, #fffdf2 0 18%, #ffd774 34%, #ff9d2e 66%, rgba(255, 120, 20, 0) 100%);
  filter: drop-shadow(0 0 5px rgba(255, 178, 66, 0.7));
  opacity: 0.95;
  content: "";
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  animation: hero-flame-flicker 1.5s ease-in-out infinite;
}

.hero-diya--brass::after {
  bottom: 28px;
  width: 6px;
  height: 17px;
  animation-duration: 1.15s;
  animation-delay: -0.4s;
}

.hero-diya--lotus::after {
  bottom: 12px;
  width: 8px;
  height: 17px;
  animation-duration: 1.9s;
  animation-delay: -0.9s;
}

@keyframes hero-flame-flicker {
  0%,
  100% {
    opacity: 0.92;
    transform: translateX(-50%) scale(1, 1);
  }

  22% {
    opacity: 1;
    transform: translateX(-50%) scale(0.94, 1.1);
  }

  47% {
    opacity: 0.84;
    transform: translateX(-50%) scale(1.05, 0.92);
  }

  71% {
    opacity: 0.97;
    transform: translateX(-50%) scale(0.97, 1.06);
  }
}

@keyframes hero-diya-glow {
  0%,
  100% {
    opacity: 0.82;
  }

  38% {
    opacity: 1;
  }

  68% {
    opacity: 0.9;
  }
}

/* --- Marigold accents ----------------------------------------------------- */
/* A conic petal ring under a radial mask, so the flower dissolves at the rim
   instead of ending on a hard circle. */
.hero-marigold {
  position: absolute;
  z-index: 1;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-image:
    radial-gradient(circle 4px at 50% 50%, rgba(248, 200, 74, 1) 0 54%, rgba(212, 132, 20, 0.95) 60% 100%, rgba(212, 132, 20, 0) 100%),
    repeating-conic-gradient(from 0deg at 50% 50%, #f0a12a 0deg 9deg, #dc6f18 9deg 18deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, rgba(0, 0, 0, 0.62) 82%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, rgba(0, 0, 0, 0.62) 82%, rgba(0, 0, 0, 0) 100%);
  filter: drop-shadow(0 0 5px rgba(255, 150, 40, 0.45));
  opacity: 0.9;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: hero-marigold-sway 5.6s ease-in-out infinite;
}

/* Anchored to bleed off the outer edges rather than sit inside them: at 1200px
   and below the container is only 100% - 48px, so a flower parked at left: 8px
   would show 24px of itself behind the first button. */
.hero-marigold--a {
  bottom: 46px;
  left: -16px;
  animation-duration: 5.6s;
}

.hero-marigold--b {
  right: -14px;
  bottom: 58px;
  width: 33px;
  height: 33px;
  animation-duration: 4.4s;
  animation-delay: -1.6s;
}

.hero-marigold--c {
  top: 46px;
  right: 16px;
  width: 30px;
  height: 30px;
  opacity: 0.8;
  animation-duration: 4.9s;
  animation-delay: -3s;
}

@keyframes hero-marigold-sway {
  0%,
  100% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

/* --- Tablet -------------------------------------------------------------- */
/* 768-1024 is the tightest case after mobile, for a different reason: the
   hero-inner drops its min-height, the row is sized by the taller of the copy
   and the form card, and both are centred with only 48px of bottom padding.
   So the clear strip below the content is at its thinnest here and every
   ornament steps down to match. The gold rim needs no change at all - this
   range still uses the base panel, whose edge is the same straight diagonal
   the rim is banded onto. */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-festive-motif--a {
    bottom: -84px;
    left: -92px;
  }

  .hero-festive-motif--b {
    top: -66px;
    right: -98px;
  }

  .hero-pushvanam {
    height: clamp(46px, 6.4vw, 62px);
  }

  .hero-pushvanam--a {
    left: 3%;
  }

  .hero-pushvanam--b {
    left: 30%;
    height: clamp(38px, 5.2vw, 50px);
  }

  .hero-pushvanam--c {
    right: 5%;
  }

  .hero-kambi {
    width: 32px;
    height: 58px;
  }

  .hero-kambi::after {
    width: 32px;
    height: 32px;
  }

  .hero-kambi--a {
    right: 16%;
  }

  .hero-kambi--b {
    display: none;
  }

  .hero-cracker {
    width: 84px;
  }

  .hero-cracker--a {
    bottom: 8px;
    left: -34px;
  }

  .hero-cracker--b {
    bottom: 4px;
    right: -36px;
  }

  .hero-cracker--c {
    display: none;
  }

  .hero-marigold--a {
    bottom: 40px;
    left: -16px;
  }

  .hero-marigold--b {
    right: -14px;
    bottom: 46px;
  }

  .hero-marigold--c {
    top: 40px;
    right: 10px;
  }

  .hero-toranam {
    height: 30px;
  }
}

/* --- Mobile -------------------------------------------------------------- */
/* Mobile is the tight case: the copy and the form card run 85% of the width
   centred, so the only genuinely free area is the 7.5% strip down each edge
   and the ground line below the card. Every ornament is scaled into one of
   those two bands - nothing is allowed into the centre - which is why the
   ornaments step down with clamp() rather than reusing the desktop sizes. The
   section's own overflow: hidden clips the pieces that bleed off-canvas, so
   none of them can open a horizontal scrollbar. */
@media (max-width: 767px) {
  .hero-festive-light {
    background-image:
      radial-gradient(72% 22% at 62% 96%, rgba(255, 188, 86, 0.3), rgba(255, 150, 60, 0) 76%),
      radial-gradient(38% 14% at 50% 82%, rgba(255, 206, 126, 0.18), rgba(255, 176, 92, 0) 74%),
      radial-gradient(46% 20% at 100% 4%, rgba(255, 164, 70, 0.16), rgba(255, 164, 70, 0) 76%);
  }

  /* The mobile panel edge is a single straight run from (100% 30%) to (0 80%),
     so the rim is just re-banded onto that line and stays on screen. Wide bleed
     on the element, hairline on ::before - same nesting reason as desktop. */
  .hero-festive-rim {
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 30%, 0 80%, 0 90%, 100% 40%);
    filter: blur(8px) brightness(1.45) saturate(1.1);
    opacity: 0.36;
  }

  .hero-festive-rim::before {
    clip-path: polygon(100% 30%, 0 80%, 0 84.4%, 100% 34.4%);
    filter: blur(2px) brightness(1.28) saturate(1.15);
    opacity: 0.86;
  }

  /* Bottom-left only: the top-right corner belongs to the call icon. */
  .hero-festive-motif--a {
    bottom: -46px;
    left: -62px;
    width: 150px;
  }

  .hero-festive-motif--b {
    display: none;
  }

  .hero-toranam {
    width: 58%;
    height: 24px;
    background-size:
      68px 24px,
      68px 24px,
      34px 24px,
      17px 24px,
      17px 24px,
      100% 24px;
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      8.5px 0,
      0 0;
    opacity: 0.92;
  }

  .hero-pushvanam {
    width: clamp(38px, 10vw, 58px);
    height: clamp(50px, 13vw, 76px);
  }

  .hero-pushvanam--a {
    left: 0;
  }

  .hero-pushvanam--b {
    display: none;
  }

  .hero-pushvanam--c {
    right: 0;
    width: clamp(30px, 8vw, 46px);
    height: clamp(40px, 10.5vw, 60px);
    animation-delay: -2.4s;
  }

  .hero-pushvanam--c::before {
    animation-duration: 1.6s;
  }

  .hero-kambi {
    width: clamp(16px, 4.4vw, 26px);
    height: clamp(38px, 10.4vw, 62px);
  }

  .hero-kambi::after {
    width: clamp(20px, 5.5vw, 33px);
    height: clamp(20px, 5.5vw, 33px);
    bottom: 68%;
  }

  .hero-kambi--a {
    right: 1%;
    bottom: 24%;
  }

  .hero-kambi--b {
    display: none;
  }

  .hero-cracker {
    width: clamp(34px, 9vw, 54px);
  }

  .hero-cracker--a {
    bottom: 9%;
    left: 0;
  }

  .hero-cracker--b {
    bottom: 17%;
    right: 0;
  }

  .hero-cracker--c {
    display: none;
  }

  .hero-diya {
    background-image: radial-gradient(ellipse 18px 9px at 50% 82%, rgba(255, 176, 64, 0.46), rgba(255, 150, 60, 0) 74%);
  }

  .hero-diya--clay {
    left: 1%;
    width: clamp(20px, 5.4vw, 30px);
    height: clamp(14px, 3.8vw, 21px);
  }

  .hero-diya--clay::before {
    height: clamp(7px, 1.9vw, 11px);
    border-radius: 3px 3px 10px 10px / 2px 2px 10px 10px;
  }

  .hero-diya--clay::after {
    bottom: 8px;
    width: 4px;
    height: 9px;
  }

  .hero-diya--brass {
    right: 1%;
    width: clamp(15px, 4vw, 22px);
    height: clamp(26px, 7vw, 40px);
  }

  .hero-diya--brass::before {
    height: 62%;
  }

  .hero-diya--brass::after {
    bottom: 16px;
    width: 4px;
    height: 10px;
  }

  .hero-diya--lotus {
    left: 0.5%;
    bottom: 27%;
    width: clamp(24px, 6.4vw, 36px);
    height: clamp(17px, 4.4vw, 25px);
  }

  .hero-diya--lotus::before {
    height: clamp(9px, 2.4vw, 14px);
    border-radius: 0 0 46px 46px / 0 0 9px 9px;
  }

  .hero-diya--lotus::after {
    bottom: 7px;
    width: 5px;
    height: 10px;
  }

  .hero-marigold {
    width: clamp(17px, 4.6vw, 27px);
    height: clamp(17px, 4.6vw, 27px);
  }

  .hero-marigold--a {
    bottom: 40%;
    left: 1px;
  }

  .hero-marigold--b {
    right: 2px;
    bottom: 44%;
    width: clamp(14px, 3.8vw, 22px);
    height: clamp(14px, 3.8vw, 22px);
  }

  .hero-marigold--c {
    display: none;
  }
}

@media (max-width: 390px) {
  .hero-toranam {
    width: 52%;
  }

  .hero-cracker {
    width: 32px;
  }
}

/* --- Luminance lift for the whole festive layer ----------------------------- */
/* Measured on the maroon ground, the ornaments averaged ~1.4:1 median contrast
   against the panel: the gold/amber ramps are physically too dark to separate
   from a deep crimson, so the layer measured as "nothing there". A uniform
   saturate+brightness lift on the decorative spans raises their luminance
   against the maroon without touching geometry, so nothing can shift, resize
   or overlap the approved copy, buttons or form. Decoration only - these
   elements are aria-hidden and pointer-events: none. */
.hero-section > span[class*="hero-"] {
  filter: saturate(1.28) brightness(1.45);
}

/* --- Reduced motion ------------------------------------------------------- */
/* Every ornament above carries a complete static base state - finished plume,
   lit spark head, mid-burst cracker, still flame - so cancelling the animation
 * leaves the whole festive layer on screen, frozen, exactly where it was. */
@media (prefers-reduced-motion: reduce) {
  .hero-festive-light,
  .hero-festive-rim,
  .hero-festive-motif,
  .hero-pushvanam,
  .hero-pushvanam::before,
  .hero-kambi,
  .hero-kambi::after,
  .hero-cracker,
  .hero-diya,
  .hero-diya::after,
  .hero-marigold {
    animation: none !important;
  }
}

/* Learning-environment lamps: the PNG supplies each diya; stable CSS cords
   hang them from the section edge. The image itself only changes in glow.
   --environment-lamp-halo-blur is the radius of the wide, diffused outer
   layer of that glow: it is the one number that has to shrink with the lamp,
   so it is kept as a token and softened in the mobile block below. */
.environment-section {
  --environment-lamp-gold: #d99b37;
  --environment-lamp-glow: rgba(255, 190, 78, 0.56);
  --environment-lamp-glow-soft: rgba(255, 190, 78, 0.26);
  --environment-lamp-halo-blur: 10px;
  --environment-lamp-halo-tint: rgba(255, 176, 32, 0.2);
  --environment-lamp-halo-tint-peak: rgba(255, 176, 32, 0.32);
  --environment-lamp-halo-tint-mid: rgba(255, 176, 32, 0.24);
}

.environment-hanging-lamp {
  position: absolute;
  z-index: 2;
  top: 0;
  display: block;
  width: clamp(28px, 3vw, 38px);
  height: var(--environment-lamp-drop);
  pointer-events: none;
}

.environment-hanging-lamp::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(var(--environment-lamp-drop) - var(--environment-lamp-art-height));
  background: linear-gradient(90deg, transparent, var(--environment-lamp-gold) 35%, #f4ca77 50%, var(--environment-lamp-gold) 70%, transparent);
  content: "";
}

.environment-hanging-lamp::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--environment-lamp-art-height);
  background-image: url("assets/glow-lamp.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
filter: brightness(1.08) drop-shadow(0 0 8px var(--environment-lamp-glow)) drop-shadow(0 0 calc(var(--environment-lamp-halo-blur) * 1.55) var(--environment-lamp-halo-tint-peak));
  opacity: 0.92;
  content: "";
  animation: environment-lamp-glow 2.6s ease-in-out infinite;
  will-change: opacity;
}

.environment-hanging-lamp--a {
  left: 44%;
  --environment-lamp-drop: 142px;
  --environment-lamp-art-height: 66px;
}

.environment-hanging-lamp--b {
  left: 53%;
  --environment-lamp-drop: 220px;
  --environment-lamp-art-height: 66px;
}

.environment-hanging-lamp--c {
  left: 49%;
  --environment-lamp-drop: 304px;
  --environment-lamp-art-height: 66px;
}

/* Flame light, not lamp motion. drop-shadow() draws a soft halo outside the
   diya's own alpha and leaves the artwork itself perfectly sharp. The peak
   frame of the glow is now baked into the ::after filter above, because
   brightness() and drop-shadow() are paint-only: animating them made all three
   lamps re-raster every frame. What is left to animate is opacity alone, and
   each stop is that stop's old opacity scaled by (its old brightness / 1.08),
   so the composited brightness at every point of the cycle is unchanged. The
   second, wider layer is the diffuse spill onto the air around the lamp - it
   fades to nothing well before it reaches the section background. */
@keyframes environment-lamp-glow {
  0%,
  100% {
    opacity: 0.798;
  }

  46% {
    opacity: 1;
  }

  68% {
    opacity: 0.833;
  }
}

/* Staggered flicker: the three lamps are lit from different points of the same
   cycle, so the section never pulses as one block. */
.environment-hanging-lamp--a::after {
  animation-delay: 0s;
}

.environment-hanging-lamp--b::after {
  animation-delay: 0.7s;
}

.environment-hanging-lamp--c::after {
  animation-delay: 1.3s;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .environment-hanging-lamp {
    width: 28px;
  }

  .environment-hanging-lamp--a {
    left: 42%;
    --environment-lamp-drop: 130px;
    --environment-lamp-art-height: 54px;
  }

  .environment-hanging-lamp--b {
    left: 47%;
    --environment-lamp-drop: 208px;
    --environment-lamp-art-height: 54px;
  }

  .environment-hanging-lamp--c {
    left: 45%;
    --environment-lamp-drop: 270px;
    --environment-lamp-art-height: 54px;
  }
}

@media (max-width: 767px) {
  .environment-hanging-lamp {
    width: 15px;
    --environment-lamp-art-height: 24px;
    --environment-lamp-halo-blur: 7px;
  }

  .environment-hanging-lamp--a {
    left: 82%;
    --environment-lamp-drop: 50px;
  }

  .environment-hanging-lamp--b {
    left: 89%;
    --environment-lamp-drop: 56px;
  }

  .environment-hanging-lamp--c {
    left: 96%;
    --environment-lamp-drop: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .environment-hanging-lamp::after {
    animation: none;
  }
}

/* ==========================================================================
   COURSE CARDS - FESTIVE LIGHT PARTICLES
   Decoration only. One absolutely positioned, aria-hidden, pointer-events:none
   element anchored to the bottom of the course-card band. It adds no layout
   height and nothing else in the section is restyled.

   Where it sits, and why it is safe. The element is a child of .curriculum-band
   at z-index: -1. That band already establishes its own stacking context
   (isolation: isolate), so the negative layer is confined to it: it paints
   after the band's red ::before, which means the particles show on the red
   band, and it paints before the in-flow grid, which means the cards always
   cover them. A particle can therefore never appear on top of a card - at most
   it shows through the gaps between cards - and it cannot reach the heading or
   the syllabus button, which sit outside the band entirely. The section's
   overflow: hidden keeps everything inside the section.

   The particles are three offset dot fields painted as radial-gradient layers:
   the element's own background plus ::before and ::after. Each field is a
   hand-placed scatter rather than a repeating tile, which is what stops the
   pattern reading as a grid, and each dot carries its own radius (1.1-2.7px)
   and alpha (0.38-0.78) so the field has depth instead of a uniform stamp. The
   fields are dense along the bottom edge and thin out upward.

   A single vertical mask fades the top of the block to fully transparent, so
   the scatter dissolves into the background instead of ending on a straight
   line. The box is deliberately taller than the 42px (20px on mobile) of grid
   padding under the cards, so the upward scatter occupies the card row and
   shows only in the gaps, which gives the field depth without ever putting a
   particle on a card.
   ========================================================================== */
.curriculum-sparkles {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(140px, 22%, 165px);
  pointer-events: none;
  background-image:
    radial-gradient(circle 2.4px at 2% 97%, rgba(255, 243, 214, 0.5) 0 45%, rgba(255, 243, 214, 0) 100%),
    radial-gradient(circle 1.8px at 6% 88%, rgba(255, 251, 238, 0.72) 0 45%, rgba(255, 251, 238, 0) 100%),
    radial-gradient(circle 1.2px at 9% 63%, rgba(255, 250, 238, 0.44) 0 45%, rgba(255, 250, 238, 0) 100%),
    radial-gradient(circle 2.7px at 13% 99%, rgba(255, 229, 169, 0.45) 0 45%, rgba(255, 229, 169, 0) 100%),
    radial-gradient(circle 1.6px at 17% 80%, rgba(255, 246, 222, 0.62) 0 45%, rgba(255, 246, 222, 0) 100%),
    radial-gradient(circle 2.2px at 22% 93%, rgba(255, 238, 197, 0.55) 0 45%, rgba(255, 238, 197, 0) 100%),
    radial-gradient(circle 1.4px at 26% 85%, rgba(255, 252, 243, 0.78) 0 45%, rgba(255, 252, 243, 0) 100%),
    radial-gradient(circle 1.3px at 29% 55%, rgba(255, 248, 230, 0.4) 0 45%, rgba(255, 248, 230, 0) 100%),
    radial-gradient(circle 2.5px at 32% 98%, rgba(255, 230, 172, 0.44) 0 45%, rgba(255, 230, 172, 0) 100%),
    radial-gradient(circle 1.7px at 36% 90%, rgba(255, 245, 219, 0.66) 0 45%, rgba(255, 245, 219, 0) 100%),
    radial-gradient(circle 2.1px at 41% 83%, rgba(255, 237, 195, 0.5) 0 45%, rgba(255, 237, 195, 0) 100%),
    radial-gradient(circle 1.5px at 45% 95%, rgba(255, 251, 240, 0.72) 0 45%, rgba(255, 251, 240, 0) 100%),
    radial-gradient(circle 2.3px at 50% 89%, rgba(255, 231, 172, 0.46) 0 45%, rgba(255, 231, 172, 0) 100%),
    radial-gradient(circle 1.4px at 52% 66%, rgba(255, 249, 236, 0.4) 0 45%, rgba(255, 249, 236, 0) 100%),
    radial-gradient(circle 1.8px at 55% 99%, rgba(255, 246, 225, 0.6) 0 45%, rgba(255, 246, 225, 0) 100%),
    radial-gradient(circle 1.5px at 59% 86%, rgba(255, 252, 244, 0.76) 0 45%, rgba(255, 252, 244, 0) 100%),
    radial-gradient(circle 2.2px at 64% 94%, rgba(255, 237, 196, 0.5) 0 45%, rgba(255, 237, 196, 0) 100%),
    radial-gradient(circle 1.9px at 69% 81%, rgba(255, 245, 220, 0.64) 0 45%, rgba(255, 245, 220, 0) 100%),
    radial-gradient(circle 1.2px at 72% 58%, rgba(255, 250, 240, 0.38) 0 45%, rgba(255, 250, 240, 0) 100%),
    radial-gradient(circle 2.6px at 74% 97%, rgba(255, 230, 172, 0.42) 0 45%, rgba(255, 230, 172, 0) 100%),
    radial-gradient(circle 1.6px at 79% 89%, rgba(255, 248, 231, 0.68) 0 45%, rgba(255, 248, 231, 0) 100%),
    radial-gradient(circle 2.2px at 84% 93%, rgba(255, 237, 196, 0.52) 0 45%, rgba(255, 237, 196, 0) 100%),
    radial-gradient(circle 1.5px at 88% 84%, rgba(255, 252, 243, 0.74) 0 45%, rgba(255, 252, 243, 0) 100%),
    radial-gradient(circle 2.4px at 93% 98%, rgba(255, 230, 172, 0.46) 0 45%, rgba(255, 230, 172, 0) 100%),
    radial-gradient(circle 1.3px at 91% 65%, rgba(255, 247, 226, 0.4) 0 45%, rgba(255, 247, 226, 0) 100%),
    radial-gradient(circle 1.7px at 97% 90%, rgba(255, 246, 225, 0.62) 0 45%, rgba(255, 246, 225, 0) 100%);
  background-repeat: repeat-x;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 46%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 46%, #000 100%);
  animation: curriculum-sparkles-a 5.6s ease-in-out infinite;
}

.curriculum-sparkles::before,
.curriculum-sparkles::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: 100% 100%;
}

/* Second and third scatters. They sit on the same coordinates as the first
   field and differ in dot size, alpha and position, so overlapping them reads
   as depth rather than as a repeated pattern. */
.curriculum-sparkles::before {
  background-image:
    radial-gradient(circle 1.6px at 4% 94%, rgba(255, 252, 240, 0.6) 0 45%, rgba(255, 252, 240, 0) 100%),
    radial-gradient(circle 2.2px at 11% 84%, rgba(255, 240, 204, 0.48) 0 45%, rgba(255, 240, 204, 0) 100%),
    radial-gradient(circle 1.3px at 19% 97%, rgba(255, 253, 246, 0.7) 0 45%, rgba(255, 253, 246, 0) 100%),
    radial-gradient(circle 1.9px at 24% 91%, rgba(255, 243, 212, 0.54) 0 45%, rgba(255, 243, 212, 0) 100%),
    radial-gradient(circle 1.4px at 33% 87%, rgba(255, 251, 238, 0.64) 0 45%, rgba(255, 251, 238, 0) 100%),
    radial-gradient(circle 2.4px at 38% 96%, rgba(255, 232, 176, 0.42) 0 45%, rgba(255, 232, 176, 0) 100%),
    radial-gradient(circle 1.5px at 43% 78%, rgba(255, 252, 242, 0.56) 0 45%, rgba(255, 252, 242, 0) 100%),
    radial-gradient(circle 2.1px at 47% 92%, rgba(255, 239, 200, 0.5) 0 45%, rgba(255, 239, 200, 0) 100%),
    radial-gradient(circle 1.7px at 57% 96%, rgba(255, 250, 234, 0.66) 0 45%, rgba(255, 250, 234, 0) 100%),
    radial-gradient(circle 1.3px at 61% 82%, rgba(255, 253, 247, 0.58) 0 45%, rgba(255, 253, 247, 0) 100%),
    radial-gradient(circle 2.3px at 67% 92%, rgba(255, 234, 180, 0.44) 0 45%, rgba(255, 234, 180, 0) 100%),
    radial-gradient(circle 1.6px at 71% 88%, rgba(255, 249, 231, 0.62) 0 45%, rgba(255, 249, 231, 0) 100%),
    radial-gradient(circle 1.4px at 77% 96%, rgba(255, 252, 241, 0.68) 0 45%, rgba(255, 252, 241, 0) 100%),
    radial-gradient(circle 2.2px at 81% 86%, rgba(255, 238, 198, 0.5) 0 45%, rgba(255, 238, 198, 0) 100%),
    radial-gradient(circle 1.5px at 86% 99%, rgba(255, 251, 236, 0.6) 0 45%, rgba(255, 251, 236, 0) 100%),
    radial-gradient(circle 1.8px at 90% 90%, rgba(255, 244, 218, 0.54) 0 45%, rgba(255, 244, 218, 0) 100%),
    radial-gradient(circle 1.3px at 95% 94%, rgba(255, 253, 245, 0.7) 0 45%, rgba(255, 253, 245, 0) 100%),
    radial-gradient(circle 2px at 98% 82%, rgba(255, 235, 182, 0.46) 0 45%, rgba(255, 235, 182, 0) 100%);
  animation: curriculum-sparkles-b 4.2s ease-in-out -1.3s infinite;
}

.curriculum-sparkles::after {
  background-image:
    radial-gradient(circle 1.2px at 1% 88%, rgba(255, 253, 244, 0.52) 0 45%, rgba(255, 253, 244, 0) 100%),
    radial-gradient(circle 1.8px at 8% 99%, rgba(255, 241, 206, 0.44) 0 45%, rgba(255, 241, 206, 0) 100%),
    radial-gradient(circle 1.1px at 15% 75%, rgba(255, 252, 240, 0.38) 0 45%, rgba(255, 252, 240, 0) 100%),
    radial-gradient(circle 1.6px at 21% 96%, rgba(255, 248, 228, 0.56) 0 45%, rgba(255, 248, 228, 0) 100%),
    radial-gradient(circle 1.3px at 28% 90%, rgba(255, 253, 247, 0.64) 0 45%, rgba(255, 253, 247, 0) 100%),
    radial-gradient(circle 1.9px at 35% 98%, rgba(255, 233, 178, 0.4) 0 45%, rgba(255, 233, 178, 0) 100%),
    radial-gradient(circle 1.2px at 42% 84%, rgba(255, 251, 236, 0.46) 0 45%, rgba(255, 251, 236, 0) 100%),
    radial-gradient(circle 1.7px at 49% 97%, rgba(255, 245, 220, 0.58) 0 45%, rgba(255, 245, 220, 0) 100%),
    radial-gradient(circle 1.1px at 56% 91%, rgba(255, 253, 245, 0.5) 0 45%, rgba(255, 253, 245, 0) 100%),
    radial-gradient(circle 1.8px at 63% 99%, rgba(255, 236, 186, 0.42) 0 45%, rgba(255, 236, 186, 0) 100%),
    radial-gradient(circle 1.4px at 68% 87%, rgba(255, 250, 231, 0.54) 0 45%, rgba(255, 250, 231, 0) 100%),
    radial-gradient(circle 1.2px at 74% 95%, rgba(255, 252, 238, 0.6) 0 45%, rgba(255, 252, 238, 0) 100%),
    radial-gradient(circle 1.9px at 80% 98%, rgba(255, 234, 180, 0.4) 0 45%, rgba(255, 234, 180, 0) 100%),
    radial-gradient(circle 1.3px at 85% 85%, rgba(255, 252, 241, 0.48) 0 45%, rgba(255, 252, 241, 0) 100%),
    radial-gradient(circle 1.6px at 89% 97%, rgba(255, 246, 224, 0.56) 0 45%, rgba(255, 246, 224, 0) 100%),
    radial-gradient(circle 1.1px at 94% 88%, rgba(255, 253, 246, 0.62) 0 45%, rgba(255, 253, 246, 0) 100%),
    radial-gradient(circle 1.7px at 99% 95%, rgba(255, 240, 204, 0.44) 0 45%, rgba(255, 240, 204, 0) 100%);
  animation: curriculum-sparkles-c 6s ease-in-out -3.1s infinite;
}

/* Tablet. The field is already proportional to the band, so it only needs to
   shrink with the shorter card stack. */
@media (min-width: 768px) and (max-width: 1024px) {
  .curriculum-sparkles {
    height: clamp(130px, 21%, 155px);
  }
}

/* Mobile. The field is shorter, and a 190% background tile on repeat-x shows
   roughly half of each scatter spread across the same width: the particle
   count visibly drops without rewriting a single dot position. Because the
   tile is wider than the box, the repeat can never place a tile inside the
   section, so nothing can reach past the edge or open a scrollbar. */
@media (max-width: 767px) {
  .curriculum-sparkles {
    height: clamp(105px, 19%, 135px);
    background-size: 190% 100%;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 52%, #000 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 52%, #000 100%);
  }

  .curriculum-sparkles::before,
  .curriculum-sparkles::after {
    background-size: 190% 100%;
  }
}

/* Reduced motion. Each field already carries a finished mid-twinkle static
   state in its own alpha, so cancelling the animation leaves the same scatter
   on screen, frozen, exactly where it was. */
@media (prefers-reduced-motion: reduce) {
  .curriculum-sparkles,
  .curriculum-sparkles::before,
  .curriculum-sparkles::after {
    animation: none;
  }
}

/* Opacity only, no transform: the particles brighten and dim where they sit.
   The three cycles differ in length, peak position and start phase, so the
   fields never pulse in step, and each one is held at its extremes for longer
   than a linear wave would - the same easing the festive lamps use, so the
   sparkle reads as a soft breathing light rather than a flash. */
@keyframes curriculum-sparkles-a {
  0%,
  100% {
    opacity: 0.62;
  }

  42% {
    opacity: 1;
  }
}

@keyframes curriculum-sparkles-b {
  0%,
  100% {
    opacity: 0.5;
  }

  64% {
    opacity: 0.94;
  }
}

@keyframes curriculum-sparkles-c {
  0%,
  100% {
    opacity: 0.44;
  }

  38% {
    opacity: 0.86;
  }
}

/* ==========================================================================
   RENDERING COST OF OFF-SCREEN SECTIONS
   --------------------------------------------------------------------------
   Scroll performance is dominated by how much of the page the browser has to
   keep renderable, not by how much of it is on screen. Every section below
   carries a large background layer plus several decorative animations, so while
   the reader is in the hero the browser was still laying out, painting and
   compositing all of it.

   content-visibility: auto lets the browser skip layout, paint and compositing
   for any of these sections that is entirely off-screen, and render it the
   moment it approaches the viewport. The visible result is identical - the
   section is fully rendered by the time the reader can see any of it.

   contain-intrinsic-size supplies a placeholder height for the skipped state so
   the scrollbar keeps a sane length before a section has ever been rendered.
   The leading `auto` keyword makes the browser remember each section's real
   measured size once it has been seen, so after the first pass the scrollbar
   length matches the laid-out page exactly and does not jump.

   #home is deliberately excluded: it is above the fold and is the Largest
   Contentful Paint element, so it must render immediately. Nothing here is
   skipped while it is being looked at, and none of these sections contain a
   position:fixed descendant, which containment would otherwise re-anchor.
   --------------------------------------------------------------------------
   Fallback heights are roughly the average of the desktop and mobile layouts;
   the remembered size takes over as soon as a section has been rendered once. */
main > section:not(#home) {
  content-visibility: auto;
}

#program {
  contain-intrinsic-size: auto 800px;
}

#course {
  contain-intrinsic-size: auto 620px;
}

#environment {
  contain-intrinsic-size: auto 520px;
}

#tools {
  contain-intrinsic-size: auto 580px;
}

#students {
  contain-intrinsic-size: auto 520px;
}

#why-innovel {
  contain-intrinsic-size: auto 700px;
}

#real-stories {
  contain-intrinsic-size: auto 760px;
}

#projects {
  contain-intrinsic-size: auto 900px;
}

#certificate {
  contain-intrinsic-size: auto 1000px;
}

#faq {
  contain-intrinsic-size: auto 880px;
}

#contact {
  contain-intrinsic-size: auto 425px;
}