:root {
  --color-navy: #070E1B;
  --color-navy-light: #0F1A2E;
  --color-cream: #F8F5F0;
  --color-gold: #C5A065;
  --color-gold-hover: #D4B47A;
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Inter', sans-serif;
  --spotlight-x: 62%;
  --spotlight-y: 42%;

  /* Motion system — strong custom curves; built-in easings lack punch */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) var(--color-navy);
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-navy);
  color: var(--color-cream);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
}

.gold-text {
  color: var(--color-gold);
  font-style: italic;
}

/* Layout */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

section {
  padding: 140px 0;
  position: relative;
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-in-out), transform 0.8s var(--ease-in-out);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 30px 0;
  transition: padding 0.4s var(--ease-out), background-color 0.4s ease, border-color 0.4s ease;
}

header.scrolled {
  /* Was rgba(7,14,27,0.9) + backdrop-filter: blur(20px). The 20px blur
     re-rasterizes everything under the header on every scroll frame,
     which was the biggest single source of scroll jank. Solid color is
     close enough visually and free at runtime. */
  background: rgba(7, 14, 27, 0.96);
  padding: 20px 0;
  border-bottom: 1px solid rgba(197, 160, 101, 0.1);
}

/* Cheap blur only on devices that can handle it well (no coarse pointer
   = desktop, where GPUs are typically fast enough). */
@media (hover: hover) and (pointer: fine) {
  header.scrolled {
    background: rgba(7, 14, 27, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-serif);
  font-size: 28px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-cream);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  color: var(--color-cream);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--color-gold);
  transition: width 0.4s ease;
}

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

.nav-cta {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gold) !important;
  border: 1px solid var(--color-gold);
  padding: 12px 24px;
  text-decoration: none;
}

/* Hover fill only where a real pointer can hover. On touch devices :hover
   sticks after a tap, leaving the button gold until you tap elsewhere. */
@media (hover: hover) {
  .nav-cta:hover {
    background: var(--color-gold);
    color: var(--color-navy) !important;
  }
}

/* Hero - NEW EDITORIAL LAYOUT */
#hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: var(--color-navy);
  position: relative;
  overflow: hidden;
  padding-top: 100px;
}

#hero::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at var(--spotlight-x) var(--spotlight-y), rgba(197, 160, 101, 0.22), transparent 28%),
    radial-gradient(circle at 18% 78%, rgba(248, 245, 240, 0.08), transparent 30%);
  opacity: 0.65;
  filter: blur(12px);
  transform: translateZ(0);
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.is-loading #hero::before {
  opacity: 0;
}

.hero-layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  gap: 80px;
}

.hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.crest-frame {
  background: linear-gradient(145deg, #F8F5F0, #EAE5DD);
  padding: 60px 50px;
  border-radius: 300px 300px 8px 8px;
  /* Arch shape */
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.5),
    inset 0 2px 10px rgba(255, 255, 255, 0.5);
  width: 100%;
  max-width: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 3/4;
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 1.5s ease 0.3s forwards;
}

/* Decorative gold line inside frame */
.crest-frame::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 1px solid rgba(197, 160, 101, 0.3);
  border-radius: 285px 285px 4px 4px;
  pointer-events: none;
}

.crest-frame::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 302px 302px 10px 10px;
  background: linear-gradient(120deg, transparent 20%, rgba(197, 160, 101, 0.36), transparent 54%);
  opacity: 0;
  transform: translateX(-18%);
  pointer-events: none;
  animation: crestGleam 5.8s ease-in-out 2.2s infinite;
}

.crest-frame img {
  position: relative;
  z-index: 1;
  width: 90%;
  height: auto;
  object-fit: contain;
  filter: contrast(1.1) saturate(0.9);
  /* Enhancing the image slightly inside the frame */
}

.hero-content {
  flex: 1;
  text-align: left;
  /* Left aligned for editorial luxury feel */
}

.hero-location {
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 30px;
  color: var(--color-gold);
  opacity: 0;
  animation: fadeInRight 1s ease 0.8s forwards;
}

.hero-title {
  font-size: clamp(48px, 7vw, 110px);
  letter-spacing: 10px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 300;
  max-width: 550px;
  margin-bottom: 50px;
  color: rgba(248, 245, 240, 0.8);
  opacity: 0;
  animation: fadeInRight 1s ease 1.2s forwards;
  line-height: 1.5;
}

.hero-btn {
  display: inline-block;
  padding: 20px 60px;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeInRight 1s ease 1.4s forwards;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.hero-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-gold);
  transition: left 0.5s ease;
  z-index: -1;
}

@media (hover: hover) {
  .hero-btn:hover {
    color: var(--color-navy);
  }

  .hero-btn:hover::before {
    left: 0;
  }
}

/* Section Headers */
.section-header {
  margin-bottom: 80px;
  max-width: 800px;
}

.section-label {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 20px;
  display: block;
}

.section-title {
  font-size: clamp(36px, 5vw, 60px);
  margin-bottom: 20px;
}

.section-desc {
  font-size: 18px;
  color: rgba(248, 245, 240, 0.7);
  line-height: 1.8;
}

/* Grid Systems */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* About Section */
.about-image {
  position: relative;
  height: 600px;
  background: #162338;
  overflow: hidden;
}

.about-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(110deg, var(--color-navy) 0%, #17243a 48%, rgba(197, 160, 101, 0.72) 50%, var(--color-cream) 100%);
  transform: translateX(0);
  transition: transform 1.35s var(--ease-luxury);
  pointer-events: none;
}

.reveal.active .about-image::before {
  transform: translateX(105%);
}

.about-image img {
  position: absolute;
  top: -15%;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 130%;
  object-fit: cover;
  opacity: 0.8;
  will-change: transform;
  transition: opacity 1.2s ease, scale 1.8s var(--ease-luxury);
}

.about-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, var(--color-navy), transparent);
  z-index: 2;
}

/* Philosophy Cards */
.philosophy-card {
  padding: 40px;
  background: var(--color-navy-light);
  border-top: 1px solid rgba(197, 160, 101, 0.2);
  transition: background 0.5s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.77, 0, 0.175, 1);
  transform-style: preserve-3d;
}

/* Promote to its own compositor layer only while hovering (tilt active). */
.philosophy-card:hover { will-change: transform; }

.philosophy-card:hover {
  background: #1A243A;
}

.philosophy-card > *,
.activity-card > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.85s var(--ease-luxury), transform 0.85s var(--ease-luxury);
}

.philosophy-card.active > *,
.grid-3.reveal.active .activity-card > * {
  opacity: 1;
  transform: translateY(0);
}

.philosophy-card.active > *:nth-child(2),
.grid-3.reveal.active .activity-card > *:nth-child(2) {
  transition-delay: 0.08s;
}

.philosophy-card.active > *:nth-child(3),
.grid-3.reveal.active .activity-card > *:nth-child(3) {
  transition-delay: 0.16s;
}

.philosophy-number {
  font-family: var(--font-serif);
  font-size: 48px;
  color: var(--color-gold);
  opacity: 0.3;
  margin-bottom: 20px;
}

.philosophy-title {
  font-size: 24px;
  margin-bottom: 15px;
}

/* Schedule Timeline */
.timeline {
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 220px;
  width: 1px;
  height: calc(100% - 48px);
  background: linear-gradient(180deg, transparent, rgba(197, 160, 101, 0.42), transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.6s var(--ease-luxury) 0.12s;
}

.timeline.active::before {
  transform: scaleY(1);
}

.timeline-item {
  display: flex;
  border-bottom: 1px solid rgba(248, 245, 240, 0.1);
  padding: 40px 0;
  position: relative;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.85s var(--ease-luxury),
    transform 0.85s var(--ease-luxury),
    padding-left 0.4s var(--ease-out),
    background 0.4s ease;
}

.timeline.active .timeline-item {
  opacity: 1;
  transform: translateY(0);
}

.timeline.active .timeline-item:nth-child(1) { transition-delay: 0.08s; }
.timeline.active .timeline-item:nth-child(2) { transition-delay: 0.16s; }
.timeline.active .timeline-item:nth-child(3) { transition-delay: 0.24s; }
.timeline.active .timeline-item:nth-child(4) { transition-delay: 0.32s; }
.timeline.active .timeline-item:nth-child(5) { transition-delay: 0.40s; }

.timeline-item::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 216px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 0 rgba(197, 160, 101, 0.28);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.55s ease, transform 0.55s var(--ease-luxury), box-shadow 0.55s ease;
}

.timeline.active .timeline-item::before {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 9px rgba(197, 160, 101, 0.08);
}

.timeline-item:hover {
  padding-left: 20px;
  background: linear-gradient(to right, rgba(197, 160, 101, 0.05), transparent);
}

.timeline-time {
  width: 200px;
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--color-gold);
}

.timeline-content {
  padding-left: 48px;
}

.timeline-content h4 {
  font-size: 22px;
  margin-bottom: 8px;
}

.timeline-content p {
  color: rgba(248, 245, 240, 0.6);
  font-size: 15px;
}

/* Elite Activities */
.activity-card {
  background: var(--color-navy-light);
  padding: 40px;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background 0.5s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}

.activity-card:hover { will-change: transform; }

.activity-card[data-day]::before {
  content: attr(data-day);
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--color-gold);
}

.activity-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0%;
  background: var(--color-gold);
  transition: height 0.5s ease;
}

.activity-card:hover::after {
  height: 100%;
}

.grid-3.reveal .activity-card {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s var(--ease-luxury),
    transform 0.9s var(--ease-luxury),
    background 0.5s ease;
}

.grid-3.reveal.active .activity-card {
  opacity: 1;
  transform: translateY(0);
}

.grid-3.reveal.active .activity-card:nth-child(2) { transition-delay: 0.08s; }
.grid-3.reveal.active .activity-card:nth-child(3) { transition-delay: 0.16s; }
.grid-3.reveal.active .activity-card:nth-child(4) { transition-delay: 0.24s; }
.grid-3.reveal.active .activity-card:nth-child(5) { transition-delay: 0.32s; }
.grid-3.reveal.active .activity-card:nth-child(6) { transition-delay: 0.40s; }

.activity-title {
  font-size: 26px;
  margin-bottom: 10px;
}

.activity-desc {
  font-size: 14px;
  color: rgba(248, 245, 240, 0.6);
}

/* Library Section */
#library {
  background: var(--color-cream);
  color: var(--color-navy);
}

#library .section-label {
  color: var(--color-gold);
}

#library .section-desc {
  color: rgba(7, 14, 27, 0.7);
}

/* Why Capella List */
.why-list {
  list-style: none;
}

.why-list li {
  font-family: var(--font-serif);
  font-size: clamp(24px, 4vw, 40px);
  padding: 30px 0;
  border-bottom: 1px solid rgba(248, 245, 240, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: padding-left 0.4s var(--ease-out), color 0.3s ease;
}

.reveal .why-list li {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity 0.8s var(--ease-luxury),
    transform 0.8s var(--ease-luxury),
    padding-left 0.4s var(--ease-out),
    color 0.3s ease;
}

.reveal.active .why-list li {
  opacity: 1;
  transform: translateX(0);
}

.reveal.active .why-list li:nth-child(2) { transition-delay: 0.07s; }
.reveal.active .why-list li:nth-child(3) { transition-delay: 0.14s; }
.reveal.active .why-list li:nth-child(4) { transition-delay: 0.21s; }
.reveal.active .why-list li:nth-child(5) { transition-delay: 0.28s; }

.why-list li:first-child {
  border-top: 1px solid rgba(248, 245, 240, 0.1);
}

.why-list li:hover {
  padding-left: 30px;
  color: var(--color-gold);
}

.why-list li span {
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--color-gold);
  letter-spacing: 2px;
}

/* CTA Section */
#cta {
  text-align: center;
  background: radial-gradient(circle at 50% 50%, #162338 0%, #070E1B 70%);
}

.cta-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: left;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--ease-luxury), transform 0.75s var(--ease-luxury);
}

.cta-form.active .form-field,
.cta-form.active .submit-btn,
.cta-form.active .form-status {
  opacity: 1;
  transform: translateY(0);
}

.cta-form.active .form-field:nth-child(2) { transition-delay: 0.08s; }
.cta-form.active .form-field:nth-child(3) { transition-delay: 0.16s; }
.cta-form.active .submit-btn { transition-delay: 0.24s; }
.cta-form.active .form-status { transition-delay: 0.30s; }

.reveal.is-settled,
.reveal.is-settled *,
.cta-form.is-settled,
.cta-form.is-settled * {
  transition-delay: 0s;
}

.cta-form .submit-btn,
.cta-form .form-status {
  opacity: 0;
  transform: translateY(18px);
}

.form-label {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(248, 245, 240, 0.85);
}

.form-optional {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--color-gold);
  opacity: 0.8;
  margin-left: 6px;
}

.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(248, 245, 240, 0.45);
  padding: 14px 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-cream);
  outline: none;
  transition: border-color 0.4s ease, padding-left 0.35s var(--ease-out);
}

.form-input:focus {
  border-bottom: 1px solid var(--color-gold);
  padding-left: 10px;
}

.form-input:focus-visible {
  border-bottom: 1px solid var(--color-gold);
  outline: 2px solid rgba(197, 160, 101, 0.5);
  outline-offset: 4px;
}

.form-input::placeholder {
  color: rgba(248, 245, 240, 0.55);
}

/* Autofill: browsers force a light background + dark text, which turns the
   inputs white on this dark form. Pin the look back to the dark theme.
   The huge inset box-shadow paints over the default fill (there's no way to
   set background-color directly for autofill), and the 9999s transition keeps
   the browser's light fill from ever flashing in. */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-cream);
  caret-color: var(--color-cream);
  -webkit-box-shadow: 0 0 0 1000px var(--color-navy-light) inset;
  box-shadow: 0 0 0 1000px var(--color-navy-light) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.form-input:-webkit-autofill:focus {
  border-bottom-color: var(--color-gold);
}

/* ---- Field validation ---- */
.form-input.is-invalid,
.form-input.is-invalid:focus {
  border-bottom-color: #E29B9B;
}

.field-error {
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.3px;
  line-height: 1.4;
  color: #E29B9B;
}

/* Take up no space until there's a message to show. */
.field-error:empty {
  display: none;
}

.submit-btn {
  margin-top: 40px;
  padding: 24px;
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-gold);
  transition: left 0.5s ease;
  z-index: -1;
}

@media (hover: hover) {
  .submit-btn:hover {
    color: var(--color-navy);
  }

  .submit-btn:hover::before {
    left: 0;
  }
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.submit-btn:disabled::before {
  left: -100%;
}

.form-status {
  min-height: 22px;
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(248, 245, 240, 0.6);
  transition: color 0.3s ease;
}

/* Make the post-submit feedback impossible to miss: a bordered, tinted box
   with full-size, non-uppercase text instead of a faint caption. */
.form-status[data-state="success"],
.form-status[data-state="error"] {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 4px;
  border: 1px solid currentColor;
  font-size: 15px;
  letter-spacing: 0.3px;
  text-transform: none;
  text-align: center;
}

.form-status[data-state="success"] {
  color: var(--color-gold);
  background: rgba(197, 160, 101, 0.12);
}

.form-status[data-state="error"] {
  color: #E29B9B;
  background: rgba(226, 155, 155, 0.12);
}

/* ---- Post-submit success scene ---- */
/* Wraps the form and the success panel. Its height is animated in JS from the
   form's height down to the message's height, so the block collapses smoothly
   instead of leaving an empty gap. */
.cta-switch {
  position: relative;
  overflow: hidden;
  transition: height 0.6s var(--ease-luxury);
}

/* The form lifts out of flow and glides up so the container can shrink under
   it without the message jumping into the freed space. */
.cta-form.is-sent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

.form-success {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 20px 0;
}

.form-success[hidden] {
  display: none;
}

.form-success-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
}

/* Soft gold halo that breathes out behind the seal. */
.form-success-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 160, 101, 0.45), transparent 70%);
  opacity: 0;
}

.form-success-mark {
  position: relative;
  width: 96px;
  height: 96px;
  opacity: 0;
  transform: scale(0.82);
}

.fsm-ring,
.fsm-check {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Circumference ≈ 2·π·36 ≈ 226; the check path ≈ 48. Both start fully
   "undrawn" and animate their dashoffset to 0 so they appear to draw on. */
.fsm-ring {
  stroke-dasharray: 227;
  stroke-dashoffset: 227;
}

.fsm-check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}

.form-success-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 42px);
  color: var(--color-gold);
  opacity: 0;
  transform: translateY(14px);
}

.form-success-text {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(248, 245, 240, 0.75);
  max-width: 420px;
  opacity: 0;
  transform: translateY(14px);
}

/* Staged choreography once the panel is shown. */
.form-success.is-visible .form-success-mark {
  animation: fsMarkIn 0.6s var(--ease-out) forwards;
}

.form-success.is-visible .fsm-ring {
  animation: fsDraw 0.85s var(--ease-out) 0.1s forwards;
}

.form-success.is-visible .fsm-check {
  animation: fsDraw 0.5s var(--ease-out) 0.75s forwards;
}

.form-success.is-visible .form-success-glow {
  animation: fsGlow 1.8s var(--ease-out) 0.7s forwards;
}

.form-success.is-visible .form-success-title {
  animation: fsTextIn 0.7s var(--ease-luxury) 0.95s forwards;
}

.form-success.is-visible .form-success-text {
  animation: fsTextIn 0.7s var(--ease-luxury) 1.1s forwards;
}

@keyframes fsMarkIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fsDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fsGlow {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  55% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: 0.55;
    transform: scale(1.28);
  }
}

@keyframes fsTextIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion: skip the drawing/fade choreography, show the seal at rest. */
@media (prefers-reduced-motion: reduce) {

  .form-success-mark,
  .fsm-ring,
  .fsm-check,
  .form-success-title,
  .form-success-text {
    animation: none !important;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }

  .form-success-glow {
    display: none;
  }
}

/* Footer */
footer {
  padding: 80px 0;
  border-top: 1px solid rgba(248, 245, 240, 0.1);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-logo {
  font-size: 24px;
}

.footer-info {
  max-width: 300px;
}

.footer-info p {
  margin-top: 20px;
  font-size: 14px;
  color: rgba(248, 245, 240, 0.7);
  line-height: 1.8;
}

.footer-contact {
  text-align: right;
}

.footer-label {
  font-size: 14px;
  color: rgba(248, 245, 240, 0.72);
}

.footer-label-spaced {
  margin-top: 20px;
}

.footer-phone {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--color-gold);
  -webkit-text-fill-color: var(--color-gold);
  text-decoration: none;
}

.footer-email {
  margin-top: 5px;
  font-size: 16px;
}

.footer-bottom {
  margin-top: 80px;
  padding-top: 30px;
  border-top: 1px solid rgba(248, 245, 240, 0.1);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(248, 245, 240, 0.6);
}

/* Animations */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes crestGleam {
  0%, 58%, 100% {
    opacity: 0;
    transform: translateX(-18%);
  }

  68% {
    opacity: 0.55;
  }

  82% {
    opacity: 0;
    transform: translateX(18%);
  }
}

/* Movement-free entrance for prefers-reduced-motion */
@keyframes fadeInReduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-hover));
  z-index: 101;
  box-shadow: 0 0 12px rgba(197, 160, 101, 0.6);
  will-change: width;
  pointer-events: none;
}

/* Active nav link */
.nav-links a.active {
  color: var(--color-gold);
}

.nav-links a.active::after {
  width: 100%;
}

/* Split text reveal (word-by-word) */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.2;
}

.word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  /* `will-change: transform` was here on every letter — hundreds of them.
     Each one became its own GPU layer, ballooning memory and slowing
     compositing. The transition still gets the speedup it needs; layers
     are created on demand and released when done. */
}

.split-active .word-inner {
  transform: translateY(0);
}

/* Magnetic buttons — promote a layer only on hover, when transform actually animates. */
.hero-btn:hover,
.nav-cta:hover,
.submit-btn:hover {
  will-change: transform;
}

.hero-btn,
.submit-btn {
  transition:
    color 0.5s ease,
    opacity 0.75s var(--ease-luxury),
    transform 0.2s var(--ease-out);
}

.nav-cta {
  transition: background 0.4s ease, color 0.4s ease, transform 0.2s var(--ease-out);
}

/* Tactile press feedback — confirms the interface heard the tap.
   On touch devices (no magnetic transform) this is the primary feedback. */
.hero-btn:active,
.submit-btn:active,
.nav-cta:active {
  transform: scale(0.97);
}

/* Parallax image wrapper helper. transform is animated on every scroll
   frame, so the layer hint genuinely pays for itself here. */
[data-parallax] {
  will-change: transform;
  transform: translateZ(0);
}

/* Responsive */
@media (max-width: 1024px) {

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .nav-links {
    display: none;
  }

  .timeline-time {
    width: 120px;
    font-size: 20px;
  }

  .timeline::before {
    left: 140px;
  }

  .timeline-item::before {
    left: 136px;
  }

  .timeline-content {
    padding-left: 44px;
  }

  section {
    padding: 80px 0;
  }

  #activities .section-header {
    margin-bottom: 42px;
  }

  #activities .grid-3 {
    gap: 18px;
  }

  #activities .activity-card {
    min-height: 0;
    padding: 28px 24px;
    justify-content: flex-start;
  }

  /* Hero Mobile Adjustments */
  .hero-layout {
    flex-direction: column;
    /* Stack vertically */
    text-align: center;
    padding: 0 20px;
    gap: 40px;
  }

  .hero-content {
    text-align: center;
    /* Center text on mobile */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .crest-frame {
    max-width: 300px;
    /* Smaller frame on mobile */
    padding: 40px 30px;
  }

  .footer-content,
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-content {
    gap: 42px;
  }

  .footer-info {
    max-width: 320px;
  }

  .footer-contact {
    text-align: center;
  }

  .footer-phone {
    font-size: 26px;
    line-height: 1.2;
  }

  .footer-bottom {
    gap: 12px;
    margin-top: 56px;
  }
}

/* Header fits the "Консультация" CTA on narrow phones: the logo + button
   need ~375px at the desktop sizes, so below that the flex row squeezes the
   button and clips its text. Shrink both, tighten the gutter and keep the
   button from shrinking so the label always fits with symmetric edges. */
@media (max-width: 600px) {
  .container {
    padding: 0 20px;
  }

  nav {
    gap: 16px;
  }

  .logo {
    font-size: 22px;
    letter-spacing: 3px;
  }

  .nav-cta {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 10px 16px;
  }
}

/* On ~320px phones the timeline's two-column row leaves only ~116px for the
   content, and a long unbreakable word ("Интеллектуальные") can't fit, forcing
   horizontal scroll. Tighten the content gutter and type so it stays inside. */
@media (max-width: 360px) {
  .timeline-content {
    padding-left: 28px;
  }

  .timeline-content h4 {
    font-size: 17px;
  }

  .timeline-content p {
    font-size: 14px;
  }
}

/* =====================================================================
   Premium polish: intro preloader, gold shimmer, film grain, dividers
   ===================================================================== */

/* ---- Intro Preloader ---- */
body.is-loading {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060c18;
  will-change: transform;
  transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Vignette blends the emblem's dark square edges into the backdrop */
.preloader::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, transparent 26%, #060c18 70%);
}

.preloader.loaded {
  transform: translateY(-100%);
}

.preloader-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preloader-emblem {
  width: 130px;
  height: auto;
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  animation: preEmblem 1s cubic-bezier(0.23, 1, 0.32, 1) 0.15s forwards;
}

.preloader-word {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: 30px;
  text-transform: uppercase;
  color: var(--color-cream);
  letter-spacing: 2px;
  opacity: 0;
  animation: preWord 1.1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s forwards;
}

.preloader-line {
  margin-top: 18px;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  animation: preLine 0.9s ease 1s forwards;
}

@keyframes preEmblem {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes preWord {
  from {
    opacity: 0;
    letter-spacing: 2px;
  }

  to {
    opacity: 1;
    letter-spacing: 12px;
  }
}

@keyframes preLine {
  to {
    width: 160px;
  }
}

/* ---- Cinematic overlays: film grain + vignette ---- */
.grain,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.vignette {
  z-index: 9996;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
}

.grain {
  z-index: 9997;
  /* Was inset:-150% / 400%×400% with mix-blend-mode: overlay — the blend
     mode was the actual scroll killer, not the size. Drop the blend mode
     but keep a small overhang so the ±6% grainShift translate can never
     expose the page background on the sides. */
  inset: -8%;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.1s steps(5) infinite;
}

/* Pause grain animation while the user scrolls, and disable entirely on
   coarse-pointer (mobile) where the cost outweighs the look. */
@media (pointer: coarse) {
  .grain { display: none; }
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(4%, -6%); }
  60% { transform: translate(-4%, 6%); }
  80% { transform: translate(6%, -4%); }
  100% { transform: translate(0, 0); }
}

/* ---- Gold gleam sweep on buttons ---- */
.hero-btn,
.submit-btn,
.nav-cta {
  position: relative;
  overflow: hidden;
}

.hero-btn::after,
.submit-btn::after,
.nav-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(248, 245, 240, 0.45), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
}

.hero-btn:hover::after,
.submit-btn:hover::after,
.nav-cta:hover::after {
  animation: shimmerSweep 0.9s ease;
}

@keyframes shimmerSweep {
  to {
    left: 150%;
  }
}

/* ---- Drawing gold section dividers ---- */
.section-divider {
  display: flex;
  justify-content: center;
  padding: 0 40px;
}

.section-divider span {
  display: block;
  width: 0;
  max-width: 1200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  transition: width 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.section-divider.drawn span {
  width: 100%;
}

/* Keep words intact while revealing letter-by-letter */
.word-wrap-group {
  display: inline-block;
  white-space: nowrap;
}

/* ---- Respect reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .grain {
    animation: none;
  }

  .preloader {
    transition: opacity 0.4s ease;
  }

  #hero::before,
  .crest-frame::after,
  .about-image::before,
  .timeline::before,
  .timeline-item::before {
    animation: none;
    transition: none;
  }

  #hero::before {
    opacity: 0.35;
  }

  .about-image::before,
  .timeline-item::before {
    display: none;
  }

  /* Keep comprehension-aiding fades; drop positional movement */
  .reveal,
  .reveal.active {
    transform: none;
    transition: opacity 0.4s ease;
  }

  .crest-frame,
  .hero-location,
  .hero-subtitle,
  .hero-btn {
    animation-name: fadeInReduced;
  }

  .hero-btn::after,
  .submit-btn::after,
  .nav-cta::after {
    display: none;
  }

  .section-divider span {
    transition: none;
    width: 100%;
  }

  .philosophy-card > *,
  .activity-card > *,
  .grid-3.reveal .activity-card,
  .timeline-item,
  .reveal .why-list li,
  .form-field,
  .cta-form .submit-btn,
  .cta-form .form-status {
    opacity: 1;
    transform: none;
    transition: none;
  }
}