/* ==========================================================================
   Wisdom Academy — Design Tokens
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* Color */
  --ink:        #1C2A21;
  --ink-soft:   #2C3B30;
  --cream:      #FBF7EE;
  --cream-2:    #F2EAD8;
  --paper:      #FFFFFF;
  --teal:       #33544A;
  --teal-2:     #4B7266;
  --teal-tint:  #E7EFEA;
  --clay:       #B4663E;
  --clay-2:     #C97F52;
  --clay-tint:  #F5E4D6;
  --gold:       #A07E38;
  --line:       #E3D9C3;
  --line-soft:  #EDE5D2;
  --line-dark:  rgba(251,247,238,0.14);
  --line-dark-2:rgba(251,247,238,0.28);
  --muted:      #66766B;
  --muted-dark: #C3CEC5;

  /* Type */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --space-9: 8.5rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;

  --shadow-card: 0 1px 2px rgba(28,42,33,.04), 0 12px 32px -16px rgba(28,42,33,.18);
  --shadow-pop:  0 20px 60px -20px rgba(28,42,33,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-sm: 200ms;
  --dur-md: 320ms;
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  animation: pageIn .5s var(--ease) both;
  transition: opacity .2s ease;
}
@keyframes pageIn{ from{ opacity: 0; } to{ opacity: 1; } }
body.page-fade-out{ opacity: 0; }
@media (prefers-reduced-motion: reduce){
  body{ animation: none; }
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }
input, select, textarea{ font: inherit; color: inherit; }

.container{
  width: 100%;
  max-width: 1216px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px){ .container{ padding-inline: var(--space-6); } }

section{ position: relative; }

/* Focus visibility (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ink); color: var(--cream); padding: .75rem 1.25rem; border-radius: 0 0 6px 0;
}
.skip-link:focus{ left: 0; }

/* ==========================================================================
   Type
   ========================================================================== */
.eyebrow{
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clay-2);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before{
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
  opacity: .7;
}
.eyebrow.center{ justify-content: center; }
.eyebrow.center::before{ display: none; }
.eyebrow.on-dark{ color: #E7C79A; }

/* Draw the eyebrow's leading line in once its section reveals */
.reveal .eyebrow:not(.center)::before{ width: 0; transition: width .5s var(--ease) .15s; }
.reveal.is-visible .eyebrow:not(.center)::before{ width: 28px; }
@media (prefers-reduced-motion: reduce){
  .reveal .eyebrow:not(.center)::before{ width: 28px; transition: none; }
}

h1, .h1{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  line-height: 1.06;
  letter-spacing: -.01em;
}
h2, .h2{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 1.55rem + 1.8vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: -.01em;
}
h3, .h3{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem);
  line-height: 1.25;
}
.lede{
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 46ch;
}
.section-head{
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.section-head.left{ margin-inline: 0; text-align: left; }
.section-head p{ color: var(--muted); font-size: 1.0625rem; }
.section-head .lede{ max-width: none; margin-inline: auto; }
.section-head.left .lede{ margin-inline: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
  min-height: 48px;
  border: 1px solid transparent;
}
.btn svg{ width: 1em; height: 1em; flex: none; }
.btn:active{ transform: translateY(1px); }

.btn-clay{
  background: var(--clay);
  color: #FFF9F2;
  box-shadow: 0 10px 24px -10px rgba(180,102,62,.55);
}
.btn-clay:hover{ background: var(--clay-2); box-shadow: 0 14px 30px -10px rgba(180,102,62,.6); }

.btn-outline-dark{
  border-color: var(--line-dark-2);
  color: var(--cream);
}
.btn-outline-dark:hover{ background: rgba(251,247,238,.08); border-color: var(--cream); }

.btn-outline{
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover{ border-color: var(--teal); background: var(--teal-tint); }

.btn-ghost{
  color: var(--teal);
  padding-inline: .25rem;
  min-height: auto;
  gap: .4rem;
}
.btn-ghost svg{ transition: transform var(--dur-sm) var(--ease); }
.btn-ghost:hover svg{ transform: translateX(3px); }

.btn-sm{ padding: .7rem 1.3rem; min-height: 40px; font-size: .875rem; }
.btn-block{ width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-block: var(--space-4);
  transition: padding var(--dur-md) var(--ease), background var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  padding-block: .85rem;
  background: rgba(251,247,238,.9);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line-soft);
  box-shadow: 0 8px 30px -20px rgba(28,42,33,.3);
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand{
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--cream);
  transition: color var(--dur-sm) var(--ease);
}
.is-scrolled .brand{ color: var(--ink); }
.brand__mark{
  width: 40px; height: 40px;
  flex: none;
}
.brand__word{
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: .02em;
  line-height: 1.05;
  white-space: nowrap;
}
@media (max-width: 480px){
  .brand__word{ font-size: 1rem; }
}

.nav{ display: none; }
@media (min-width: 960px){
  .nav{
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  .nav__list{ display: flex; gap: var(--space-5); flex-wrap: nowrap; }
  .nav__list a{
    font-size: .875rem;
    font-weight: 500;
    color: var(--cream);
    opacity: .85;
    position: relative;
    padding-block: .3rem;
    white-space: nowrap;
    flex: none;
    transition: opacity var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
  }
  .is-scrolled .nav__list a{ color: var(--ink); }
  .nav__list a::after{
    content: '';
    position: absolute; left: 0; right: 100%; bottom: -2px;
    height: 1px; background: currentColor;
    transition: right var(--dur-md) var(--ease);
  }
  .nav__list a:hover{ opacity: 1; }
  .nav__list a:hover::after{ right: 0; }
  .nav__list a.is-current{ opacity: 1; color: var(--clay-2); }
  .is-scrolled .nav__list a.is-current{ color: var(--clay); }
  .nav__list a.is-current::after{ right: 0; }
}

.header-actions{ display: flex; align-items: center; gap: var(--space-3); }
.header-actions .icon-link{ display: none; }
@media (min-width: 640px){ .header-actions .icon-link{ display: inline-flex; } }
@media (max-width: 380px){ .header-actions .btn-sm{ padding-inline: 1.1rem; font-size: .85rem; } }
.icon-link{
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-dark-2);
  color: var(--cream);
  transition: background var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.is-scrolled .icon-link{ border-color: var(--line); color: var(--ink); }
.icon-link:hover{ background: var(--clay); border-color: var(--clay); color: #fff; }
.icon-link svg{ width: 18px; height: 18px; }

.nav-toggle{
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-dark-2);
  color: var(--cream);
  cursor: pointer;
}
.is-scrolled .nav-toggle{ border-color: var(--line); color: var(--ink); }
@media (min-width: 960px){ .nav-toggle{ display: none; } }
.nav-toggle svg{ width: 20px; height: 20px; }
.nav-toggle .icon-close{ display: none; }
.nav-open .nav-toggle .icon-menu{ display: none; }
.nav-open .nav-toggle .icon-close{ display: block; }

/* Mobile menu panel */
.mobile-nav{
  position: fixed; inset: 0;
  background: var(--ink);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6) var(--space-5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease), visibility var(--dur-md);
}
.nav-open .mobile-nav{ opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav__list{ display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-nav__list a{
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--cream);
  padding-block: .3rem;
  display: inline-block;
  transition: color var(--dur-sm) var(--ease);
}
.mobile-nav__list a.is-current{ color: var(--clay-2); font-style: italic; }
.mobile-nav__foot{ margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-nav__contact{ color: var(--muted-dark); font-size: .9375rem; display: flex; flex-direction: column; gap: .4rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background:
    radial-gradient(1100px 620px at 84% -10%, rgba(180,102,62,.28), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(75,114,102,.32), transparent 55%),
    linear-gradient(180deg, rgba(19,28,23,.78) 0%, rgba(17,25,20,.88) 55%, #131C17 100%),
    url('/assets/images/campus-pool.jpg');
  background-size: cover;
  background-position: center 70%;
  color: var(--cream);
  padding-top: clamp(7.5rem, 6rem + 6vw, 10.5rem);
  padding-bottom: clamp(4rem, 3rem + 4vw, 6.5rem);
  overflow: clip;
}
.hero__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.hero h1{ max-width: 18ch; }
.hero h1 em{
  font-style: italic;
  color: var(--clay-2);
}
.hero__lede{
  max-width: 54ch;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  color: var(--muted-dark);
  margin-top: var(--space-2);
}
.hero__cta{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero__meta{
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: center;
  color: var(--muted-dark);
  font-size: .875rem;
}
.hero__meta span{ display: inline-flex; align-items: center; gap: .5rem; }
.hero__meta svg{ width: 15px; height: 15px; color: var(--clay-2); flex: none; }

/* Stat strip */
.stats{
  border-top: 1px solid var(--line-dark);
  margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  padding-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  width: 100%;
  max-width: 880px;
}
@media (min-width: 720px){ .stats{ grid-template-columns: repeat(4, 1fr); } }
.stat{ text-align: center; }
.stat b{
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  color: var(--cream);
  font-weight: 500;
}
.stat span{ font-size: .8125rem; color: var(--muted-dark); }

/* ==========================================================================
   Generic sections
   ========================================================================== */
.section{ padding-block: clamp(4.5rem, 3.5rem + 4vw, 7.5rem); }
.section-alt{ background: var(--cream-2); }
.section-dark{ background: linear-gradient(180deg,#182420,#131C17); color: var(--cream); }
.section-dark .muted{ color: var(--muted-dark); }

.divider-rule{
  width: 56px; height: 2px;
  background: var(--clay);
  border-radius: 2px;
  margin-inline: auto;
}
.section-head.left .divider-rule{ margin-inline: 0; }

/* Feature grid (Whole-Child Approach) */
.grid-4{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .grid-4{ grid-template-columns: repeat(4, 1fr); } }

.feature-card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease);
}
.feature-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }
.icon-tile{
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--teal-tint);
  color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-tile svg{ width: 24px; height: 24px; }
.icon-tile.clay{ background: var(--clay-tint); color: var(--clay); }
.feature-card h3{ font-size: 1.2rem; }
.feature-card p{ color: var(--muted); font-size: .9375rem; line-height: 1.6; }

/* Two-column media/text */
.split{
  display: grid;
  gap: var(--space-6);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 940px){
  .split{ grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split.reverse .split__media{ order: 2; }
}
.split__text{ display: flex; flex-direction: column; gap: var(--space-4); }
.split__text .lede{ max-width: none; }
.split ul.check-list{ display: flex; flex-direction: column; gap: var(--space-2); }
.check-list li{ display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-soft); font-size: .975rem; }
.check-list svg{ width: 19px; height: 19px; color: var(--clay); flex: none; margin-top: .15em; }

.pull-quote{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--clay);
  padding-left: var(--space-4);
}

/* Photo placeholder */
.photo-slot{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(155deg, var(--teal-tint), var(--cream-2));
  border: 1px solid var(--line-soft);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.photo-slot.wide{ aspect-ratio: 16 / 10; }
.photo-slot.square{ aspect-ratio: 1 / 1; }
.photo-slot::before{
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .4;
  z-index: 0;
}
.photo-slot__icon{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-64%);
  width: 46px; height: 46px; color: var(--teal-2); opacity: .5;
}
.photo-slot__label{
  position: relative; z-index: 1;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(0deg, rgba(28,42,33,.72), transparent);
  color: #fff;
  font-size: .78rem;
  letter-spacing: .04em;
}

.photo-frame{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-card);
}
.photo-frame.wide{ aspect-ratio: 16 / 10; }
.photo-frame.square{ aspect-ratio: 1 / 1; }
.photo-frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame__caption{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(0deg, rgba(15,20,17,.78), transparent);
  color: #fff;
  font-size: .78rem;
  letter-spacing: .02em;
}

/* Programs */
.program-list{ display: flex; flex-direction: column; }
.program-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
  align-items: center;
}
.program-row:last-child{ border-bottom: 1px solid var(--line); }
@media (min-width: 860px){
  .program-row{ grid-template-columns: 140px 1fr auto; gap: var(--space-5); }
}
.program-row__age{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--clay);
}
.program-row__age span{ display: block; font-family: var(--font-sans); font-style: normal; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }
.program-row__body h3{ margin-bottom: .5rem; }
.program-row__body p{ color: var(--muted); font-size: .95rem; max-width: 60ch; }
.program-row__cta{ justify-self: start; }
@media (min-width: 860px){ .program-row__cta{ justify-self: end; } }

.badge-row{ display: flex; flex-wrap: wrap; gap: .6rem; }
.badge{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.badge svg{ width: 15px; height: 15px; color: var(--clay); }

/* Framework pillars */
.pillar{
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
.pillar__num{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--clay-2);
  flex: none;
  width: 2.4ch;
}
.pillar h3{ font-size: 1.15rem; margin-bottom: .4rem; }
.pillar p{ color: var(--muted-dark); font-size: .9375rem; }

/* Beyond classroom cards */
.beyond-card{
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
}
.beyond-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.beyond-card__body{ padding: var(--space-4); display: flex; flex-direction: column; gap: .6rem; }
.beyond-card__body p{ color: var(--muted); font-size: .9rem; }

/* Difference comparison */
.difference-grid{
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 780px){ .difference-grid{ grid-template-columns: repeat(3, 1fr); } }
.difference-item{
  background: #17221D;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  text-align: center;
}
.difference-item .not{
  font-size: .875rem;
  color: var(--muted-dark);
  text-decoration: line-through;
  text-decoration-color: rgba(199,140,90,.7);
  text-decoration-thickness: 1.5px;
}
.difference-item .yes{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--cream);
}
.difference-item svg{ width: 20px; height: 20px; color: var(--clay-2); }

/* Testimonials */
.testi-track{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){ .testi-track{ grid-template-columns: repeat(2, 1fr); } }
.testi-card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.testi-card__stars{ display: flex; gap: .2rem; color: var(--clay); }
.testi-card__stars svg{ width: 15px; height: 15px; }
.testi-card p{ font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); }
.testi-card__who{ display: flex; align-items: center; gap: .7rem; margin-top: auto; padding-top: var(--space-2); }
.testi-avatar{
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--teal-tint); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: .95rem;
}
.testi-card__who b{ display: block; font-size: .875rem; }
.testi-card__who span{ display: block; font-size: .75rem; color: var(--muted); }

/* FAQ */
.faq-list{ max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-serif);
  font-size: 1.1rem;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .plus{
  flex: none;
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}
.faq-item summary .plus svg{ width: 13px; height: 13px; }
.faq-item[open] summary .plus{ transform: rotate(45deg); background: var(--clay); border-color: var(--clay); color: #fff; }
.faq-item__body{ padding-bottom: var(--space-4); color: var(--muted); font-size: .95rem; max-width: 68ch; }
.faq-item__body p + p{ margin-top: .6em; }

/* Admissions / form */
.admissions{
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 980px){ .admissions{ grid-template-columns: 1.05fr .95fr; gap: var(--space-8); } }

.form-card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 2vw + 1rem, var(--space-6));
  box-shadow: var(--shadow-card);
}
.form-grid{ display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 560px){ .form-grid{ grid-template-columns: 1fr 1fr; } }
.field{ display: flex; flex-direction: column; gap: .45rem; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: .8125rem; font-weight: 600; color: var(--ink-soft); }
.field .req{ color: var(--clay); }
.field input, .field select, .field textarea{
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .8rem .95rem;
  background: var(--cream);
  min-height: 48px;
  transition: border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
}
.field textarea{ min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--teal); background: #fff; outline: none; }
.field-radios{ display: flex; flex-wrap: wrap; gap: .6rem; }
.field-radios label{
  font-size: .8125rem; font-weight: 500; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem 1rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: all var(--dur-sm) var(--ease);
}
.field-radios input{ accent-color: var(--clay); }
.field-radios label:has(input:checked){ background: var(--teal-tint); border-color: var(--teal-2); }
.form-note{ font-size: .8rem; color: var(--muted); }

.info-card{
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 2vw + 1rem, var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}
.info-card h3{ color: var(--cream); }
.info-row{ display: flex; gap: .85rem; align-items: flex-start; }
.info-row .icon-tile{ background: rgba(251,247,238,.08); color: #E7C79A; width: 42px; height: 42px; flex: none; }
.info-row .icon-tile svg{ width: 19px; height: 19px; }
.info-row b{ display: block; font-size: .9rem; }
.info-row div{ min-width: 0; }
.info-row span:not(.icon-tile){ display: block; font-size: .875rem; color: var(--muted-dark); margin-top: .15rem; }
.info-map{
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line-dark);
  aspect-ratio: 16/9;
}
.info-map iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(.3) contrast(1.05); }
.info-card__social{ display: flex; gap: .6rem; margin-top: auto; }

/* CTA banner */
.cta-band{
  background: linear-gradient(135deg, var(--teal), #274038);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
}
.cta-band::after{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(700px 300px at 90% 0%, rgba(180,102,62,.35), transparent 60%);
}
.cta-band > *{ position: relative; }
.cta-band h2{ color: #fff; }
.cta-band p{ color: var(--muted-dark); max-width: 52ch; }

/* Footer */
.site-footer{
  background: #131C17;
  color: var(--muted-dark);
  padding-block: var(--space-8) var(--space-5);
}
.footer-grid{
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 860px){ .footer-grid{ grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: var(--space-5); } }
.footer-brand{ display: flex; flex-direction: column; gap: var(--space-3); max-width: 320px; }
.footer-brand .brand{ color: var(--cream); }
.footer-brand p{ font-size: .875rem; }
.footer-col h4{ color: var(--cream); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-3); }
.footer-col ul{ display: flex; flex-direction: column; gap: .65rem; }
.footer-col a{ font-size: .9rem; transition: color var(--dur-sm) var(--ease); }
.footer-col a:hover{ color: var(--cream); }
.footer-bottom{
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  font-size: .8125rem;
}
.footer-social{ display: flex; gap: .6rem; }

/* Page hero (subpages) */
.page-hero{
  background:
    linear-gradient(180deg, rgba(19,28,23,.82) 0%, rgba(17,25,20,.9) 60%, #131C17 100%),
    var(--hero-img, url('/assets/images/campus-villas.jpg'));
  background-size: cover;
  background-position: center 60%;
  color: var(--cream);
  padding-top: clamp(7.5rem, 6rem + 5vw, 10rem);
  padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  text-align: center;
}
.page-hero__inner{ display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.page-hero h1{ max-width: 20ch; }
.page-hero .lede{ max-width: 56ch; color: var(--muted-dark); margin-top: var(--space-2); }
.page-hero__cta{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }

/* Team grid */
.team-grid{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px){ .team-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px){ .team-grid{ grid-template-columns: repeat(4, 1fr); } }
.team-card{ text-align: center; }
.team-card__photo{
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  margin-bottom: var(--space-3);
  border: 1px solid var(--line-soft);
}
.team-card__photo img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-md) var(--ease); }
.team-card:hover .team-card__photo img{ transform: scale(1.04); }
.team-card b{ display: block; font-family: var(--font-serif); font-size: 1.05rem; }
.team-card span{ display: block; font-size: .8125rem; color: var(--muted); margin-top: .2rem; }

/* Process steps */
.process-steps{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 760px){ .process-steps{ grid-template-columns: repeat(4, 1fr); } }
.process-step{
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.process-step__num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--cream);
  font-family: var(--font-serif); font-style: italic; font-size: 1.1rem;
  margin-bottom: var(--space-3);
}
.process-step h3{ font-size: 1.05rem; margin-bottom: .4rem; }
.process-step p{ font-size: .875rem; color: var(--muted); }
.process-arrow{ display: none; }
@media (min-width: 760px){
  .process-step:not(:last-child)::after{
    content: '';
    position: absolute; top: 50%; right: -18px; transform: translateY(-50%);
    width: 12px; height: 12px;
    border-top: 1.5px solid var(--line); border-right: 1.5px solid var(--line);
    rotate: 45deg;
  }
}

/* Value cards (reuses feature-card look but centered) */
.value-card{ text-align: left; }

/* Focus card (schedule / format) */
.format-card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.format-card h3{ font-size: 1.1rem; }
.format-card ul{ display: flex; flex-direction: column; gap: .5rem; }
.format-card li{ display: flex; gap: .6rem; font-size: .875rem; color: var(--ink-soft); }
.format-card li svg{ width: 16px; height: 16px; color: var(--clay); flex: none; margin-top: .2em; }

/* Simple breadcrumb-free section intro left aligned with icon badge */
.stat-inline{ display: flex; flex-wrap: wrap; gap: var(--space-5); }
.stat-inline .stat{ text-align: left; }

/* Utility */
.muted{ color: var(--muted); }
.mt-0{ margin-top: 0 !important; }
.center{ text-align: center; }
.max-w{ max-width: 640px; margin-inline: auto; }
.stack{ display: flex; flex-direction: column; gap: var(--space-4); }
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; } }

/* Staggered entrance for card grids: the container itself just gates visibility,
   individual items cascade in with a short delay between each. */
.grid-4.reveal, .team-grid.reveal, .testi-track.reveal, .difference-grid.reveal, .process-steps.reveal{
  opacity: 1; transform: none; transition: none;
}
.grid-4.reveal > *, .team-grid.reveal > *, .testi-track.reveal > *, .difference-grid.reveal > *, .process-steps.reveal > *{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.grid-4.reveal.is-visible > *, .team-grid.reveal.is-visible > *, .testi-track.reveal.is-visible > *, .difference-grid.reveal.is-visible > *, .process-steps.reveal.is-visible > *{
  opacity: 1;
  transform: translateY(0);
}
.grid-4.reveal > *:nth-child(1), .team-grid.reveal > *:nth-child(1), .testi-track.reveal > *:nth-child(1), .difference-grid.reveal > *:nth-child(1), .process-steps.reveal > *:nth-child(1){ transition-delay: 0ms; }
.grid-4.reveal > *:nth-child(2), .team-grid.reveal > *:nth-child(2), .testi-track.reveal > *:nth-child(2), .difference-grid.reveal > *:nth-child(2), .process-steps.reveal > *:nth-child(2){ transition-delay: 70ms; }
.grid-4.reveal > *:nth-child(3), .team-grid.reveal > *:nth-child(3), .testi-track.reveal > *:nth-child(3), .difference-grid.reveal > *:nth-child(3), .process-steps.reveal > *:nth-child(3){ transition-delay: 140ms; }
.grid-4.reveal > *:nth-child(4), .team-grid.reveal > *:nth-child(4), .testi-track.reveal > *:nth-child(4), .difference-grid.reveal > *:nth-child(4), .process-steps.reveal > *:nth-child(4){ transition-delay: 210ms; }
.grid-4.reveal > *:nth-child(5), .team-grid.reveal > *:nth-child(5){ transition-delay: 280ms; }
.grid-4.reveal > *:nth-child(6), .team-grid.reveal > *:nth-child(6){ transition-delay: 340ms; }
.grid-4.reveal > *:nth-child(7), .team-grid.reveal > *:nth-child(7){ transition-delay: 400ms; }
.grid-4.reveal > *:nth-child(n+8), .team-grid.reveal > *:nth-child(n+8){ transition-delay: 460ms; }
@media (prefers-reduced-motion: reduce){
  .grid-4.reveal > *, .team-grid.reveal > *, .testi-track.reveal > *, .difference-grid.reveal > *, .process-steps.reveal > *{ opacity: 1; transform: none; }
}

/* Photos ease in with a gentle settle-zoom alongside the fade */
.photo-frame.reveal img, .photo-slot.reveal img{
  transform: scale(1.08);
  transition: transform 1.1s var(--ease);
}
.photo-frame.reveal.is-visible img, .photo-slot.reveal.is-visible img{
  transform: scale(1);
}
.photo-frame img{ transition: transform .6s var(--ease); }
.photo-frame:hover img{ transform: scale(1.035); }
@media (prefers-reduced-motion: reduce){
  .photo-frame.reveal img{ transform: none; transition: none; }
  .photo-frame:hover img{ transform: none; }
}

/* Hero: graceful staggered entrance on page load (not scroll-triggered) */
.hero__inner > *, .page-hero__inner > *{
  opacity: 0;
  transform: translateY(16px);
  animation: heroIn .85s var(--ease) forwards;
}
.hero__inner > *:nth-child(1), .page-hero__inner > *:nth-child(1){ animation-delay: .05s; }
.hero__inner > *:nth-child(2), .page-hero__inner > *:nth-child(2){ animation-delay: .16s; }
.hero__inner > *:nth-child(3), .page-hero__inner > *:nth-child(3){ animation-delay: .27s; }
.hero__inner > *:nth-child(4), .page-hero__inner > *:nth-child(4){ animation-delay: .38s; }
.hero__inner > *:nth-child(5), .page-hero__inner > *:nth-child(5){ animation-delay: .48s; }
.hero__inner > *:nth-child(6){ animation-delay: .58s; }
@keyframes heroIn{ to{ opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero__inner > *, .page-hero__inner > *{ opacity: 1; transform: none; animation: none; }
}

.back-to-top{
  position: fixed;
  right: var(--space-4); bottom: var(--space-4);
  width: 46px; height: 46px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease), visibility var(--dur-md);
  z-index: 60;
}
.back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg{ width: 18px; height: 18px; }

/* ==========================================================================
   Signature motion: card tilt, marquee
   ========================================================================== */

/* 3D tilt on hover for cards */
.tilt{ transition: transform .35s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* Kinetic marquee strip */
.marquee{
  overflow: hidden;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: #17221D;
  padding-block: var(--space-3);
}
.marquee__track{
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marqueeScroll 32s linear infinite;
}
.marquee__item{
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1vw + .8rem, 1.5rem);
  color: var(--muted-dark);
  white-space: nowrap;
}
.marquee__item svg{ width: 16px; height: 16px; color: var(--clay-2); flex: none; }
@keyframes marqueeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}