/* ============================================================
   THE UNFLINCHING FORMATION — brand system
   ============================================================ */
:root{
  /* ---- sampled directly from the logo ---- */
  --navy:        #1C2460;   /* the circle, primary structure  */
  --navy-2:      #2A3277;   /* lifted navy for gradients      */
  --navy-deep:   #131A47;
  --coral:       #E8614D;   /* logo coral — fills and shapes  */
  --coral-ink:   #C2452F;   /* text-safe coral: buttons, links */
  --teal:        #4CB998;
  --teal-ink:    #22705A;   /* text-safe teal                 */
  --amber:       #F4A623;
  --amber-ink:   #96650A;   /* text-safe amber                */
  --amber-soft:  #FBD98F;

  /* ---- neutrals built around the navy ---- */
  --page:        #F7F8FB;
  --surface:     #FFFFFF;
  --tint:        #EAEDF6;   /* light navy wash  */
  --tint-2:      #DDF0E8;   /* light teal wash  */
  --text:        #1B2145;
  --muted:       #5C6486;
  --line:        rgba(28,36,96,.13);

  --radius:      26px;
  --nav-top:     48px;      /* gap between top of screen and the header pill */
  --shadow-sm:   0 2px 10px rgba(28,36,96,.07);
  --shadow:      0 18px 50px -18px rgba(28,36,96,.26);
  --shadow-lg:   0 40px 90px -30px rgba(28,36,96,.42);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--page); color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
  line-height:1.08; letter-spacing:-.02em; margin:0;
  font-weight:600;
}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.section{padding:120px 0}
@media(max-width:900px){ .section{padding:76px 0} body{font-size:16px} }

/* ---------- typography helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--coral-ink);margin-bottom:22px;
}
.eyebrow::before{content:"";width:44px;height:1.5px;background:var(--amber)}
.eyebrow.on-dark{color:var(--amber-soft)}
.eyebrow.on-dark::before{background:var(--amber)}

.h-display{font-size:clamp(2.5rem,5.4vw,4.6rem)}
.h-section{font-size:clamp(2rem,3.5vw,3.15rem)}
.h-card{font-size:clamp(1.28rem,1.8vw,1.55rem);font-weight:600}
.serif-i{font-style:italic;color:var(--amber);font-weight:400}
.lead{font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--muted);line-height:1.75}
.lead.on-dark{color:rgba(255,255,255,.72)}

/* two-column section header (Spara-style split) */
.split-head{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end;margin-bottom:64px}
@media(max-width:900px){.split-head{grid-template-columns:1fr;gap:22px;margin-bottom:42px}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;border-radius:100px;border:1.5px solid transparent;
  font-weight:700;font-size:15px;letter-spacing:.01em;cursor:pointer;
  transition:.28s cubic-bezier(.4,0,.2,1);white-space:nowrap;
}
.btn-primary{background:var(--coral-ink);color:#fff;box-shadow:0 12px 28px -10px rgba(194,69,47,.6)}
.btn-primary:hover{background:var(--navy);transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(194,69,47,.7)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-2px)}
.btn-outline{border-color:var(--line);color:var(--text);background:transparent}
.btn-outline:hover{border-color:var(--coral-ink);color:var(--coral-ink);transform:translateY(-2px)}
.btn-gold{background:var(--amber);color:var(--navy)}
.btn-gold:hover{background:var(--amber-soft);transform:translateY(-2px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--coral-ink);
  font-weight:700;font-size:14.5px;border-bottom:1.5px solid rgba(194,69,47,.3);
  padding-bottom:3px;transition:.25s;
}
.link-arrow:hover{gap:14px;border-color:var(--coral-ink)}
.link-arrow svg{width:14px;height:14px}

/* ============================================================
   NAV — floating pill
   ============================================================ */
.nav-shell{
  position:fixed;top:var(--nav-top);left:0;right:0;z-index:100;padding:0 40px;
}
@media(max-width:1200px){ .nav-shell{padding:0 20px} }

.nav{
  position:relative;max-width:1400px;margin:0 auto;height:96px;border-radius:100px;
  display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 44px;
  flex-wrap:nowrap;isolation:isolate;
  /* the frosted-glass effect: heavy blur + saturation boost on whatever
     is passing underneath, so colours bloom through instead of going grey */
  backdrop-filter:blur(28px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter:blur(28px) saturate(190%) brightness(1.06);
  /* colour only — the pill never moves or resizes */
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;
}

/* the glass sheen — a soft top-lit gradient sitting over the blur,
   which is what stops it reading as plain translucent plastic */
.nav::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(160deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.14) 42%,
    rgba(255,255,255,0)   70%);
  opacity:1;transition:opacity .5s ease,background .5s ease;
  pointer-events:none;
}

/* ---- LIGHT MODE (pill over the cream sections) ---- */
.nav{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 10px 40px -12px rgba(28,36,96,.26),
    inset 0 1px 0 rgba(255,255,255,.75),      /* crisp lit top edge   */
    inset 0 -1px 0 rgba(28,36,96,.05);        /* faint shaded bottom  */
}
/* ---- SETTLED: scrolled away from the top — thickens, stays glass ---- */
.nav.scrolled{
  background:rgba(255,255,255,.86);
  box-shadow:
    0 14px 44px -14px rgba(28,36,96,.30),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(28,36,96,.05);
}
/* ---- DARK MODE: pill over a dark section — smoked glass ---- */
.nav.on-dark{
  background:rgba(28,36,96,.26);
  border-color:rgba(244,166,35,.32);
  box-shadow:
    0 14px 44px -16px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(244,166,35,.28),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
.nav.on-dark.scrolled{background:rgba(28,36,96,.48)}
.nav.on-dark::before{
  background:linear-gradient(160deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.04) 45%,
    rgba(255,255,255,0)   72%);
}

/* Safari/Firefox without backdrop-filter get a solid-enough pill instead,
   otherwise the nav text would sit on almost nothing and be unreadable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(255,255,255,.92)}
  .nav.scrolled{background:rgba(255,255,255,.97)}
  .nav.on-dark{background:rgba(28,36,96,.88)}
  .nav.on-dark.scrolled{background:rgba(28,36,96,.94)}
}
.nav.on-dark .brand-text b{color:var(--page)}
.nav.on-dark .brand-text span{color:var(--amber)}
.nav.on-dark .nav-links a{color:rgba(255,255,255,.82)}
.nav.on-dark .nav-links a:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav.on-dark .nav-links a.active{color:var(--amber)}
.nav.on-dark .nav-links a.active::after{background:var(--amber)}
.nav.on-dark .nav-cta .signin{color:rgba(255,255,255,.85)}
.nav.on-dark .nav-cta .signin:hover{color:#fff}
.nav.on-dark .burger{border-color:rgba(255,255,255,.3)}


.brand{display:flex;align-items:center;gap:12px}
/* the mark and the lettering are separate, so the circle can be small
   without shrinking the words with it */
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand-icon{
  width:50px;aspect-ratio:1/1;flex:none;
  background:url('assets/mark.png') center/contain no-repeat;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.brand-word{
  width:206px;aspect-ratio:1199/230;flex:none;
  background:url('assets/wordmark.png') left center/contain no-repeat;
}
.brand:hover .brand-icon{transform:rotate(22deg)}
.nav.on-dark .brand-word,
footer .brand-word{background-image:url('assets/wordmark-light.png')}
.nav.on-dark .brand-icon,
footer .brand-icon{background-image:url('assets/mark-inverse.png')}
.brand-icon,.brand-word{transition:background-image 0s,transform .5s cubic-bezier(.22,1,.36,1)}
@media(max-width:1200px){ .brand-icon{width:42px} .brand-word{width:176px} }
@media(max-width:420px){  .brand-icon{width:34px} .brand-word{width:138px} }
.brand-text{display:none}
.brand-text b,.brand-text span{transition:color .4s ease}
.brand-text{line-height:1.05}
.brand-text b{
  font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:700;
  letter-spacing:.01em;display:block;color:var(--navy)
}
.brand-text span{
  font-size:8.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--coral-ink);font-weight:700;
}

.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;white-space:nowrap;flex:0 1 auto}
.nav-links a{
  padding:11px 17px;border-radius:100px;font-size:15px;font-weight:600;color:var(--text);
  transition:.22s;position:relative;
}
.nav-links a:hover{color:var(--coral-ink);background:rgba(194,69,47,.06)}
.nav-links a.active{color:var(--coral-ink)}
.nav-links a.active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;
  background:var(--coral-ink);border-radius:2px;
}
.nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap}
.nav-cta .signin{padding:11px 16px;font-size:15px;font-weight:600}
.nav-cta .signin:hover{color:var(--coral-ink)}
.nav-cta .btn{padding:16px 32px;font-size:15px}

/* menu button and panel are defined in the MOBILE MENU section below */

@media(max-width:1200px){
  .nav-links,.nav-cta .signin{display:none}
  .burger{display:grid}
  .mobile-menu{display:flex}
  .nav{height:76px;padding:0 14px 0 24px}
}
/* tighter gap on phones, where vertical space is scarce */
@media(max-width:700px){ :root{--nav-top:22px} }
@media(max-width:520px){ .nav-cta .btn{display:none} }

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;isolation:isolate;background:var(--navy)}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% center;opacity:1}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  /* a single 30% navy wash. One layer only: stacked gradients multiply,
     and it sits inside .hero-bg so it tints the photo, never the type. */
  background:rgba(28,36,96,.30);
}
/* fallback texture when no photo is present */
.hero-bg .fallback{
  position:absolute;inset:0;
  background:
    radial-gradient(75% 65% at 20% 80%,rgba(42,50,119,.95),transparent 72%),
    radial-gradient(55% 50% at 84% 18%,rgba(76,185,152,.16),transparent 70%),
    linear-gradient(165deg,#222A6B,#131A47);
}
.hero-inner{position:relative;z-index:5;width:100%;padding:0 0 74px}
.hero h1{color:#fff;max-width:15ch;margin-bottom:0}
.hero .lead{color:rgba(255,255,255,.82);max-width:60ch;margin-bottom:40px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.scroll-hint{
  position:absolute;right:28px;bottom:96px;z-index:5;writing-mode:vertical-rl;
  color:rgba(255,255,255,.5);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
}
@media(max-width:900px){ .hero{min-height:88vh} .hero-inner{padding-bottom:52px} .scroll-hint{display:none} }

/* value marquee under hero */
.marquee{background:var(--navy);border-top:1px solid rgba(244,166,35,.22);overflow:hidden;padding:20px 0}
.marquee-track{display:flex;gap:0;width:max-content;animation:slide 38s linear infinite}
.marquee-track span{
  color:var(--amber-soft);font-family:'Cormorant Garamond',serif;font-size:15px;font-style:italic;
  padding:0 34px;white-space:nowrap;opacity:.9;
}
.marquee-track span::after{content:"✦";color:var(--coral);margin-left:34px;font-style:normal;font-size:11px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   ARCH PHOTO FRAME (brand motif)
   ============================================================ */
.arch{
  position:relative;overflow:hidden;
  border-radius:280px 280px var(--radius) var(--radius);
  background:linear-gradient(150deg,var(--tint),var(--tint-2));
  box-shadow:var(--shadow);
}
.frame{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(150deg,var(--tint),var(--tint-2));
  box-shadow:var(--shadow);
}
.frame img,.arch img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ph-label{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:rgba(28,36,96,.35);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
}

/* ============================================================
   INTRO / MISSION
   ============================================================ */
.mission{display:grid;grid-template-columns:.95fr 1.05fr;gap:80px;align-items:center}
@media(max-width:960px){.mission{grid-template-columns:1fr;gap:44px}}
.mission-media{position:relative}
.mission-media .arch{aspect-ratio:4/5}
.mission-badge{
  position:absolute;right:-22px;bottom:38px;background:var(--navy);color:var(--page);
  border-radius:22px;padding:22px 26px;max-width:230px;box-shadow:var(--shadow-lg);
  border:1px solid rgba(244,166,35,.3);
}
.mission-badge b{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--amber);display:block;line-height:1}
.mission-badge span{font-size:12.5px;color:rgba(255,255,255,.7);line-height:1.5;display:block;margin-top:8px}
@media(max-width:960px){.mission-badge{right:16px}}

.pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:38px}
.pillar{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  box-shadow:var(--shadow-sm);
}
.pillar b{display:block;font-family:'Cormorant Garamond',serif;font-size:17px;margin-bottom:5px}
.pillar span{font-size:13.5px;color:var(--muted);line-height:1.55}
@media(max-width:560px){.pillars{grid-template-columns:1fr}}

/* ============================================================
   OFFERINGS GRID
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}}

.o-card{
  position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:.35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
}
.o-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(194,69,47,.25)}
.o-card-top{
  height:104px;background:linear-gradient(140deg,var(--navy-2),var(--navy));position:relative;
}
.o-card-top::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(90% 140% at 85% 0%,rgba(194,69,47,.75),transparent 60%);
}
.o-icon{
  position:absolute;left:26px;bottom:-28px;width:64px;height:64px;border-radius:19px;
  background:var(--tint);display:grid;place-items:center;z-index:2;
  border:1px solid rgba(244,166,35,.5);box-shadow:0 10px 24px -10px rgba(28,36,96,.5);
}
.o-icon svg{width:34px;height:34px}
.o-body{padding:48px 26px 28px;display:flex;flex-direction:column;flex:1}
.o-body h3{margin-bottom:12px}
.o-body p{font-size:14.8px;color:var(--muted);line-height:1.65;flex:1;margin-bottom:22px}
.tag{
  position:absolute;top:22px;right:22px;z-index:2;font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
  background:var(--amber);padding:6px 13px;border-radius:100px;
}

/* ============================================================
   AGE TRACKS
   ============================================================ */
.tracks{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:980px){.tracks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tracks{grid-template-columns:1fr}}
.track{
  border-radius:var(--radius);padding:34px 28px 30px;background:#fff;
  border:1px solid var(--line);transition:.35s;position:relative;overflow:hidden;
}
.track::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:.4s;
}
.track:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.track:hover::before{transform:scaleX(1)}
.track .age{
  font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--coral-ink);margin-bottom:16px;display:block;
}
.track h3{font-size:1.5rem;margin-bottom:12px}
.track p{font-size:14.3px;color:var(--muted);line-height:1.6}
.track .num{
  position:absolute;right:22px;top:16px;font-family:'Cormorant Garamond',serif;font-size:64px;
  font-weight:700;color:rgba(194,69,47,.07);line-height:1;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.step{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:110px}
.step:last-child{margin-bottom:0}
.step:nth-child(even) .step-media{order:2}
@media(max-width:960px){
  .step{grid-template-columns:1fr;gap:36px;margin-bottom:64px}
  .step:nth-child(even) .step-media{order:0}
}
.step-media .frame{aspect-ratio:4/3;transform:rotate(-2.2deg)}
.step:nth-child(even) .step-media .frame{transform:rotate(2.2deg)}
.step-num{
  font-family:'Cormorant Garamond',serif;font-size:clamp(4rem,7vw,6.4rem);font-weight:700;
  color:var(--tint);line-height:.85;display:block;margin-bottom:18px;
}
.step h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:16px}
.step p{color:var(--muted);margin-bottom:24px;max-width:46ch}

/* ============================================================
   DARK PROMISE BAND
   ============================================================ */
.band{background:var(--navy);color:var(--page);position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;top:-30%;right:-10%;width:60%;height:160%;
  background:radial-gradient(circle,rgba(42,50,119,.85),transparent 64%);
}
.band::after{
  content:"";position:absolute;bottom:-40%;left:-12%;width:52%;height:150%;
  background:radial-gradient(circle,rgba(76,185,152,.14),transparent 64%);
}
.band .wrap{position:relative;z-index:2}
.band h2{color:#fff;max-width:20ch}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:26px 44px;margin:56px 0 52px}
@media(max-width:820px){.checks{grid-template-columns:1fr;gap:22px}}
.check{display:flex;gap:16px;align-items:flex-start}
.check .dot{
  width:30px;height:30px;flex:none;border-radius:50%;border:1px solid rgba(244,166,35,.55);
  display:grid;place-items:center;margin-top:2px;background:rgba(244,166,35,.1);
}
.check .dot svg{width:14px;height:14px;stroke:var(--amber)}
.check p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.6}
.band-cta{text-align:center}

/* ============================================================
   VALUES
   ============================================================ */
.values{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1000px){.values{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.values{grid-template-columns:1fr 1fr}}
.value{
  background:linear-gradient(160deg,var(--navy-2),var(--navy));color:var(--page);
  border-radius:22px;padding:32px 24px;border:1px solid rgba(244,166,35,.22);
  transition:.35s;position:relative;overflow:hidden;
}
.value:hover{transform:translateY(-6px);border-color:rgba(244,166,35,.6)}
.value i{
  font-family:'Cormorant Garamond',serif;font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.2em;color:var(--amber);display:block;margin-bottom:44px;
}
.value h3{font-size:1.5rem;color:#fff;margin-bottom:10px}
.value p{font-size:13.6px;color:rgba(255,255,255,.62);line-height:1.6}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.t-viewport{overflow:hidden;border-radius:var(--radius)}
.t-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.t-slide{min-width:100%;display:grid;grid-template-columns:.8fr 1.2fr;gap:0}
@media(max-width:860px){.t-slide{grid-template-columns:1fr}}
.t-photo{aspect-ratio:1/1;position:relative;overflow:hidden;
  border-radius:var(--radius) 0 0 var(--radius);
  background:linear-gradient(150deg,var(--tint),var(--tint-2))}
@media(max-width:860px){.t-photo{border-radius:var(--radius) var(--radius) 0 0;aspect-ratio:16/10}}
.t-card{
  background:#fff;border:1px solid var(--line);border-left:none;
  border-radius:0 var(--radius) var(--radius) 0;padding:52px 48px;
  display:flex;flex-direction:column;justify-content:center;
}
@media(max-width:860px){.t-card{border-left:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);padding:34px 28px}}
.t-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.quote-mark{font-family:'Cormorant Garamond',serif;font-size:62px;color:var(--coral-ink);line-height:.7;font-weight:700}
.stars{display:flex;gap:4px}
.stars svg{width:18px;height:18px;fill:var(--amber)}
.t-card h4{font-size:1.45rem;margin-bottom:14px}
.t-card p.q{color:var(--muted);font-size:15.5px;line-height:1.75;margin-bottom:28px}
.t-who b{display:block;font-family:'Cormorant Garamond',serif;font-size:17px}
.t-who span{font-size:13px;color:var(--muted)}
.dots{display:flex;gap:8px;margin-bottom:26px}
.dots button{
  width:26px;height:5px;border-radius:4px;border:none;background:var(--tint);
  cursor:pointer;transition:.3s;padding:0;
}
.dots button.active{background:var(--coral-ink);width:38px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{display:grid;grid-template-columns:.75fr 1.25fr;gap:26px;align-items:stretch}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.c-info{
  background:var(--tint);border-radius:var(--radius);padding:44px 36px;
  display:flex;flex-direction:column;
}
.c-info h3{font-size:1.7rem;margin-bottom:34px}
.c-item{margin-bottom:26px}
.c-item .lbl{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-ink);display:block;margin-bottom:6px}
.c-item .val{font-size:16px;color:var(--text);font-weight:500}
.socials{margin-top:auto;padding-top:28px;display:flex;gap:10px}
.socials a{
  width:42px;height:42px;border-radius:50%;background:rgba(28,36,96,.07);
  display:grid;place-items:center;transition:.28s;
}
.socials a:hover{background:var(--coral-ink)}
.socials svg{width:18px;height:18px;stroke:var(--navy);transition:.28s}
.socials a:hover svg{stroke:#fff}

.c-form{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(150deg,var(--navy-2),var(--navy));padding:44px 40px;
}
.c-form::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 80% at 90% 10%,rgba(42,50,119,.9),transparent 64%);
}
.c-form form{position:relative;z-index:2}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:560px){.f-row{grid-template-columns:1fr}}
.field label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber-soft);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;padding:15px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);color:#fff;font-size:15px;font-family:inherit;
  transition:.25s;
}
.field textarea{min-height:118px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.38)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);background:rgba(255,255,255,.12);
}
.field select option{background:var(--navy);color:#fff}
.c-form .btn{width:100%;margin-top:20px}
.form-note{color:rgba(255,255,255,.45);font-size:12.5px;text-align:center;margin-top:14px;position:relative;z-index:2}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{
  position:relative;overflow:hidden;border-radius:36px;
  background:linear-gradient(120deg,var(--tint-2),var(--tint));
  padding:70px 60px;display:grid;grid-template-columns:1.3fr .7fr;
  gap:34px;align-items:center;
}
@media(max-width:860px){.cta-banner{grid-template-columns:1fr;padding:46px 30px;text-align:center}}
.cta-banner .circles{position:absolute;inset:0;pointer-events:none}
.cta-banner .circles i{position:absolute;border-radius:50%;border:1.5px solid rgba(194,69,47,.16)}
.cta-banner .circles i:nth-child(1){width:280px;height:280px;left:-90px;top:-90px;background:rgba(255,255,255,.35)}
.cta-banner .circles i:nth-child(2){width:200px;height:200px;right:60px;bottom:-90px;background:rgba(244,166,35,.16)}
.cta-banner .circles i:nth-child(3){width:340px;height:340px;right:-130px;top:-70px}
.cta-banner > *{position:relative;z-index:2}
.cta-banner h2{margin-bottom:14px}
.cta-banner p{color:rgba(28,36,96,.7);max-width:46ch}
@media(max-width:860px){.cta-banner p{margin:0 auto}}
.cta-banner .btn{justify-self:end}
@media(max-width:860px){.cta-banner .btn{justify-self:center}}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--navy);color:var(--page);padding:90px 0 0;margin-top:0}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.5fr;gap:48px;padding-bottom:64px}
@media(max-width:960px){.f-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
.f-brand .brand-text b{color:#fff}
.f-brand p{color:rgba(255,255,255,.55);font-size:14.5px;margin-top:20px;max-width:34ch;line-height:1.7}
.f-col h5{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin:0 0 22px;
}
.f-col a{display:block;color:rgba(255,255,255,.68);font-size:14.8px;padding:7px 0;transition:.22s}
.f-col a:hover{color:#fff;padding-left:6px}
.news p{color:rgba(255,255,255,.55);font-size:14.5px;margin-bottom:18px}
.news-form{display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:5px 5px 5px 20px;gap:8px}
.news-form input{flex:1;background:transparent;border:none;color:#fff;font-family:inherit;font-size:14.5px;outline:none;min-width:0}
.news-form input::placeholder{color:rgba(255,255,255,.4)}
.news-form button{
  background:var(--coral-ink);color:#fff;border:none;border-radius:100px;padding:12px 22px;
  font-weight:700;font-size:14px;cursor:pointer;transition:.25s;white-space:nowrap;
}
.news-form button:hover{background:var(--amber);color:var(--navy)}
.news small{display:block;color:rgba(255,255,255,.35);font-size:12.5px;margin-top:12px}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:26px 0;display:flex;
  justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  color:rgba(255,255,255,.45);font-size:13.5px;
}
.f-bottom .tagline{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--amber-soft)}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
  html{scroll-behavior:auto}
}

/* ==================================================================
   INNER PAGE COMPONENTS
   ================================================================== */

/* ---------- page banner (top of every inner page) ---------- */
.page-hero{
  position:relative;overflow:hidden;background:var(--navy);
  padding:calc(var(--nav-top) + 190px) 0 96px;color:var(--page);
}
.page-hero::before{
  content:"";position:absolute;top:-40%;right:-8%;width:58%;height:170%;
  background:radial-gradient(circle,rgba(42,50,119,.9),transparent 64%);
}
.page-hero::after{
  content:"";position:absolute;bottom:-55%;left:-10%;width:52%;height:160%;
  background:radial-gradient(circle,rgba(76,185,152,.16),transparent 64%);
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:#fff;max-width:17ch;margin-bottom:22px;font-size:clamp(2.3rem,4.6vw,3.9rem)}
.page-hero .lead{color:rgba(255,255,255,.76);max-width:58ch}
.page-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
@media(max-width:900px){.page-hero{padding:calc(var(--nav-top) + 130px) 0 68px}}

.crumbs{
  display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:24px;
}
.crumbs a{color:var(--amber);transition:.2s}
.crumbs a:hover{color:var(--amber-soft)}
.crumbs span{opacity:.5}

/* ---------- prose block ---------- */
.prose{max-width:68ch}
.prose h3{font-size:1.6rem;margin:44px 0 14px}
.prose h3:first-child{margin-top:0}
.prose p{color:var(--muted);margin-bottom:18px;line-height:1.8}
.prose ul{margin:0 0 22px;padding-left:0;list-style:none}
.prose li{
  position:relative;padding-left:32px;margin-bottom:12px;color:var(--muted);line-height:1.7;
}
.prose li::before{
  content:"";position:absolute;left:8px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--amber);
}
.prose blockquote{
  margin:34px 0;padding:26px 30px;border-left:3px solid var(--coral-ink);
  background:var(--tint);border-radius:0 18px 18px 0;
}
.prose blockquote p{
  margin:0;font-family:'Cormorant Garamond',serif;font-size:1.22rem;font-style:italic;
  color:var(--text);line-height:1.55;
}

/* ---------- two-column layout with sticky aside ---------- */
.with-aside{display:grid;grid-template-columns:1.55fr .85fr;gap:64px;align-items:start}
@media(max-width:960px){.with-aside{grid-template-columns:1fr;gap:44px}}
.aside-card{
  position:sticky;top:calc(var(--nav-top) + 76px);background:var(--tint);border-radius:var(--radius);
  padding:34px 30px;border:1px solid rgba(244,166,35,.35);
}
.aside-card h4{font-size:1.35rem;margin-bottom:14px}
.aside-card p{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:22px}
.aside-card .btn{width:100%}
@media(max-width:960px){.aside-card{position:static}}

/* ---------- stat row ---------- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.stat-row{grid-template-columns:1fr}}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;box-shadow:var(--shadow-sm);
}
.stat b{
  display:block;font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:700;
  color:var(--coral-ink);line-height:1;margin-bottom:12px;
}
.stat span{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- team grid ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:980px){.team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.team{grid-template-columns:1fr}}
.member .arch{aspect-ratio:3/4;border-radius:200px 200px 20px 20px;margin-bottom:20px}
.member h4{font-size:1.3rem;margin-bottom:5px}
.member span{font-size:13.5px;color:var(--coral-ink);font-weight:700;letter-spacing:.06em}
.member p{font-size:14px;color:var(--muted);line-height:1.6;margin-top:10px}

/* ---------- package / pricing cards ---------- */
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
@media(max-width:980px){.packages{grid-template-columns:1fr}}
.pkg{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 32px;box-shadow:var(--shadow-sm);transition:.35s;position:relative;
  display:flex;flex-direction:column;
}
.pkg:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pkg.featured{
  background:linear-gradient(160deg,var(--navy-2),var(--navy));color:var(--page);
  border-color:rgba(244,166,35,.35);
}
.pkg.featured h3,.pkg.featured .price b{color:#fff}
.pkg.featured p,.pkg.featured li{color:rgba(255,255,255,.7)}
.pkg .ribbon{
  position:absolute;top:-13px;left:32px;background:var(--amber);color:var(--navy);
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 15px;border-radius:100px;
}
.pkg h3{font-size:1.55rem;margin-bottom:10px}
.pkg > p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:26px}
.pkg .price{
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
.pkg.featured .price{border-color:rgba(255,255,255,.16)}
.pkg .price b{font-family:'Cormorant Garamond',serif;font-size:2.3rem;font-weight:700;line-height:1}
.pkg .price small{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.pkg ul{list-style:none;padding:0;margin:0 0 30px;flex:1}
.pkg li{
  position:relative;padding-left:28px;margin-bottom:13px;font-size:14.5px;
  color:var(--muted);line-height:1.6;
}
.pkg li::before{
  content:"";position:absolute;left:4px;top:9px;width:11px;height:6px;
  border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(-45deg);
}
.pkg .btn{width:100%}

/* ---------- FAQ accordion ---------- */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  padding:26px 44px 26px 0;position:relative;
  font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;color:var(--text);
  line-height:1.35;
}
.faq-q::after{
  content:"";position:absolute;right:8px;top:32px;width:11px;height:11px;
  border-right:2px solid var(--coral-ink);border-bottom:2px solid var(--coral-ink);
  transform:rotate(45deg);transition:transform .35s ease;
}
.faq-item.open .faq-q::after{transform:rotate(-135deg)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-a{max-height:420px}
.faq-a p{color:var(--muted);line-height:1.8;padding:0 40px 28px 0}

/* ---------- simple feature list on dark ---------- */
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:880px){.mini-grid{grid-template-columns:1fr}}
.mini{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 26px;
  transition:.3s;
}
.mini:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(194,69,47,.22)}
.mini .ic{
  width:52px;height:52px;border-radius:15px;background:var(--tint);
  display:grid;place-items:center;margin-bottom:18px;
}
.mini .ic svg{width:28px;height:28px}
.mini h4{font-size:1.22rem;margin-bottom:9px}
.mini p{font-size:14.3px;color:var(--muted);line-height:1.65}

/* ---------- alternating feature rows ---------- */
.alt-row{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-bottom:96px}
.alt-row:last-child{margin-bottom:0}
.alt-row:nth-child(even) .alt-media{order:2}
@media(max-width:960px){
  .alt-row{grid-template-columns:1fr;gap:34px;margin-bottom:58px}
  .alt-row:nth-child(even) .alt-media{order:0}
}
.alt-media .frame{aspect-ratio:4/3}
.alt-row h3{font-size:clamp(1.5rem,2.3vw,2rem);margin-bottom:16px}
.alt-row p{color:var(--muted);margin-bottom:22px}

/* ---------- section on sand ---------- */
.on-sand{background:var(--tint)}
.on-sand .o-card,.on-sand .mini,.on-sand .stat,.on-sand .track{background:#fff}

/* age-track cards used as links */
a.track{display:block;color:inherit;text-decoration:none}
a.track h3{color:var(--text)}

/* ==================================================================
   UF MARK — the logo circle, split into five layers so the ring of
   figures can assemble itself and then turn slowly.
     <span class="uf-mark"><i class="m-circle"></i><i class="m-teal"></i>
     <i class="m-coral"></i><i class="m-amber"></i><i class="m-v"></i></span>
   Add .on-dark for the white-circle colourway used on navy sections.
   ================================================================== */
.uf-mark{position:relative;display:inline-block;width:100%;aspect-ratio:1/1;flex:none;line-height:0}
.uf-mark i{
  position:absolute;inset:0;display:block;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  transform-origin:50% 50%;will-change:transform,opacity;
}
.m-circle{background-image:url('assets/mark-navy.png')}
.m-teal  {background-image:url('assets/mark-teal.png')}
.m-coral {background-image:url('assets/mark-coral.png')}
.m-amber {background-image:url('assets/mark-amber.png')}
.m-v     {background-image:url('assets/mark-v.png')}

/* on navy surfaces the circle goes white and the V goes navy */
.uf-mark.on-dark .m-circle{background-image:url('assets/mark-navy-light.png')}
.uf-mark.on-dark .m-v     {background-image:url('assets/mark-v-dark.png')}

/* ---------- ASSEMBLY: the four figures gather into a circle ---------- */
@keyframes uf-pop{
  0%  {transform:scale(.72);opacity:0}
  60% {transform:scale(1.03);opacity:1}
  100%{transform:none;opacity:1}
}
@keyframes uf-swing-a{
  0%  {transform:rotate(-72deg) scale(.7);opacity:0}
  100%{transform:none;opacity:1}
}
@keyframes uf-swing-b{
  0%  {transform:rotate(72deg) scale(.7);opacity:0}
  100%{transform:none;opacity:1}
}
@keyframes uf-swing-c{
  0%  {transform:rotate(-120deg) scale(.7);opacity:0}
  100%{transform:none;opacity:1}
}
@keyframes uf-v-in{
  0%  {transform:translateY(16%) scale(.8);opacity:0}
  100%{transform:none;opacity:1}
}
.uf-mark.fly i{animation-fill-mode:both;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.uf-mark.fly .m-circle{animation:uf-pop     .75s .00s}
.uf-mark.fly .m-teal  {animation:uf-swing-a .95s .18s}
.uf-mark.fly .m-coral {animation:uf-swing-b .95s .30s}
.uf-mark.fly .m-amber {animation:uf-swing-c .95s .42s}
.uf-mark.fly .m-v     {animation:uf-v-in    .70s .78s}

/* ---------- IDLE: the ring keeps turning, very slowly ---------- */
@keyframes uf-turn{ to{transform:rotate(360deg)} }
@keyframes uf-breathe{
  0%,100%{transform:translateY(0)   scale(1)}
  50%    {transform:translateY(-2%) scale(1.03)}
}
.uf-mark.fly.aloft .m-teal,
.uf-mark.fly.aloft .m-coral,
.uf-mark.fly.aloft .m-amber{animation:uf-turn 90s linear infinite}
.uf-mark.fly.aloft .m-v{animation:uf-breathe 6s ease-in-out infinite}

/* ---------- hover: a small nudge of the ring ---------- */
.uf-hover .uf-mark i{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.uf-hover:hover .m-teal {transform:rotate(9deg)}
.uf-hover:hover .m-coral{transform:rotate(-9deg)}
.uf-hover:hover .m-amber{transform:rotate(9deg)}
.uf-hover:hover .m-v    {transform:scale(1.09)}

@media(prefers-reduced-motion:reduce){
  .uf-mark.fly i,.uf-mark.fly.aloft i{animation:none}
  .uf-mark i{opacity:1;transform:none}
  .uf-hover:hover .uf-mark i{transform:none}
}

/* ---------- brand moment band: the emblem's own room ---------- */
.brand-moment{
  background:linear-gradient(180deg,var(--page) 0%,var(--tint) 100%);
  padding:104px 0 108px;text-align:center;position:relative;overflow:hidden;
}
.brand-moment::before,.brand-moment::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;
}
.brand-moment::before{width:520px;height:520px;top:-150px;border:1.5px solid rgba(194,69,47,.10)}
.brand-moment::after{width:800px;height:800px;top:-290px;border:1.5px solid rgba(244,166,35,.30)}
.brand-moment .wrap{position:relative;z-index:2}
.brand-moment .emblem{width:230px;margin:0 auto 42px;display:block}
.brand-moment .rule{width:64px;height:2px;background:var(--amber);margin:0 auto 26px;border-radius:2px}
.brand-moment h2{font-size:clamp(1.7rem,3.1vw,2.6rem);max-width:20ch;margin:0 auto 20px}
.brand-moment p{color:var(--muted);max-width:56ch;margin:0 auto;
  font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.75}
@media(max-width:900px){
  .brand-moment{padding:70px 0 74px}
  .brand-moment .emblem{width:162px;margin-bottom:30px}
  .brand-moment::after{width:520px;height:520px;top:-190px}
}

/* a large, very faint emblem used as a watermark inside dark bands */
.emblem-watermark{
  position:absolute;right:-60px;bottom:-70px;width:420px;opacity:.07;
  pointer-events:none;z-index:1;
}
@media(max-width:900px){ .emblem-watermark{width:260px;right:-70px;bottom:-50px} }

@media(prefers-reduced-motion:reduce){
  .uf-mark.fly i,.uf-mark.fly.aloft,.uf-mark.fly.aloft i{animation:none}
  .uf-mark i{opacity:1;transform:none}
  .uf-hover:hover .p-wl,.uf-hover:hover .p-wr,
  .uf-hover:hover .p-ct,.uf-hover:hover .p-cs{transform:none}
}



/* ==================================================================
   ACCENT ROTATION
   The logo carries four colours, so the site cycles them rather than
   leaning on navy and coral alone. Order follows the mark: teal,
   amber, coral — navy stays the structural colour.
   ================================================================== */
.grid-3 .o-card:nth-child(3n+1) .o-icon{background:var(--tint-2);border-color:rgba(76,185,152,.5)}
.grid-3 .o-card:nth-child(3n+1) .o-card-top::after{background:radial-gradient(90% 140% at 85% 0%,rgba(76,185,152,.7),transparent 60%)}

.grid-3 .o-card:nth-child(3n+2) .o-icon{background:#FBEED5;border-color:rgba(244,166,35,.55)}
.grid-3 .o-card:nth-child(3n+2) .o-card-top::after{background:radial-gradient(90% 140% at 85% 0%,rgba(244,166,35,.72),transparent 60%)}

.grid-3 .o-card:nth-child(3n+3) .o-icon{background:#FBE3DE;border-color:rgba(232,97,77,.5)}
.grid-3 .o-card:nth-child(3n+3) .o-card-top::after{background:radial-gradient(90% 140% at 85% 0%,rgba(232,97,77,.72),transparent 60%)}

/* age tracks — one colour per developmental stage */
.tracks .track:nth-child(1)::before{background:var(--teal)}
.tracks .track:nth-child(2)::before{background:var(--amber)}
.tracks .track:nth-child(3)::before{background:var(--coral)}
.tracks .track:nth-child(4)::before{background:var(--navy)}
.tracks .track:nth-child(1) .age{color:var(--teal-ink)}
.tracks .track:nth-child(2) .age{color:var(--amber-ink)}
.tracks .track:nth-child(3) .age{color:var(--coral-ink)}
.tracks .track:nth-child(4) .age{color:var(--navy)}
.tracks .track:nth-child(1) .num{color:rgba(76,185,152,.18)}
.tracks .track:nth-child(2) .num{color:rgba(244,166,35,.20)}
.tracks .track:nth-child(3) .num{color:rgba(232,97,77,.16)}
.tracks .track:nth-child(4) .num{color:rgba(28,36,96,.10)}

/* the five value tiles get a colour each */
.values .value:nth-child(1) i{color:var(--teal)}
.values .value:nth-child(2) i{color:var(--amber)}
.values .value:nth-child(3) i{color:var(--coral)}
.values .value:nth-child(4) i{color:var(--teal)}
.values .value:nth-child(5) i{color:var(--amber)}
.values .value:nth-child(1):hover{border-color:rgba(76,185,152,.75)}
.values .value:nth-child(2):hover{border-color:rgba(244,166,35,.75)}
.values .value:nth-child(3):hover{border-color:rgba(232,97,77,.75)}
.values .value:nth-child(4):hover{border-color:rgba(76,185,152,.75)}
.values .value:nth-child(5):hover{border-color:rgba(244,166,35,.75)}

/* the promise checklist alternates its tick colours */
.checks .check:nth-child(3n+1) .dot{border-color:rgba(76,185,152,.6);background:rgba(76,185,152,.12)}
.checks .check:nth-child(3n+1) .dot svg{stroke:var(--teal)}
.checks .check:nth-child(3n+2) .dot{border-color:rgba(244,166,35,.6);background:rgba(244,166,35,.12)}
.checks .check:nth-child(3n+2) .dot svg{stroke:var(--amber)}
.checks .check:nth-child(3n+3) .dot{border-color:rgba(232,97,77,.6);background:rgba(232,97,77,.14)}
.checks .check:nth-child(3n+3) .dot svg{stroke:var(--coral)}

/* the three "before you write" tiles on Contact */
.mini-grid .mini:nth-child(1) .ic{background:var(--tint-2)}
.mini-grid .mini:nth-child(2) .ic{background:#FBEED5}
.mini-grid .mini:nth-child(3) .ic{background:#FBE3DE}

/* the CTA banner picks up the logo's circle motif in all three accents */
.cta-banner{background:linear-gradient(120deg,var(--tint-2),var(--tint))}
.cta-banner .circles i:nth-child(1){background:rgba(255,255,255,.5);border-color:rgba(76,185,152,.4)}
.cta-banner .circles i:nth-child(2){background:rgba(244,166,35,.18);border-color:rgba(244,166,35,.4)}
.cta-banner .circles i:nth-child(3){border-color:rgba(232,97,77,.3)}

/* the brand-moment rings echo the mark */
.brand-moment::before{border-color:rgba(232,97,77,.22)}
.brand-moment::after{border-color:rgba(76,185,152,.3)}
.brand-moment .rule{background:var(--coral)}

/* Cormorant is a light face — headings need a touch more presence */
h1,h2,h3,h4{letter-spacing:-.012em}
.h-display{font-weight:600;line-height:1.02}
.h-section{font-weight:600}
.brand-moment h2,.page-hero h1,.hero h1{font-weight:600}

/* the hero headline breaks to two lines, with the accent word starting line two */
.hero h1{max-width:none}
.hero h1 .l1{white-space:nowrap}
@media(max-width:860px){
  .hero h1 .l1{white-space:normal}
  .hero h1 .lb{display:none}
  .hero h1{max-width:16ch}
}

/* ==================================================================
   MOBILE PASS
   ================================================================== */

/* the About outcomes row: four across on desktop, never on a phone */
.stat-row.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){ .stat-row.four{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){  .stat-row.four{grid-template-columns:1fr} }

/* iOS zooms the whole page in when a focused field is under 16px.
   Every input goes to 16px on small screens to stop that. */
@media(max-width:820px){
  .field input,.field select,.field textarea,.news-form input{font-size:16px}
}

/* 100vh on a phone includes the browser chrome, so the hero jumps as the
   address bar hides. dvh tracks the visible area instead. */
@supports (height:100dvh){
  .hero{min-height:100dvh}
  @media(max-width:900px){ .hero{min-height:88dvh} }
}

@media(max-width:600px){
  .wrap{padding:0 20px}
  .section{padding:62px 0}

  /* five value tiles side by side is unreadable at this width */
  .values{grid-template-columns:1fr}

  /* dark panels were carrying desktop padding */
  .c-form{padding:30px 22px}
  .c-info{padding:32px 24px}
  .pkg{padding:30px 24px}
  .aside-card{padding:28px 22px}
  .brand-moment{padding:58px 0 62px}

  /* headline and section headings ease off a little */
  .h-display{font-size:clamp(2.1rem,10vw,2.9rem)}
  .h-section{font-size:clamp(1.75rem,7.5vw,2.3rem)}

  /* full width buttons read better than two half ones */
  .hero-actions,.page-hero-actions{flex-direction:column;align-items:stretch;width:100%}
  .hero-actions .btn,.page-hero-actions .btn{width:100%}
  .cta-banner{padding:38px 24px}
}

/* comfortable tap targets: 44px is the accessibility minimum */
@media(hover:none){
  .f-col a{padding:11px 0}
  .link-arrow{padding-bottom:8px}
  .dots{gap:4px}
  .dots button{height:22px;background:transparent;position:relative;width:34px}
  .dots button::after{
    content:"";position:absolute;left:4px;right:4px;top:9px;height:5px;
    border-radius:4px;background:var(--tint);transition:.3s;
  }
  .dots button.active::after{background:var(--coral-ink)}
  .socials a{width:46px;height:46px}
}

/* the newsletter pill gets cramped on the narrowest phones */
@media(max-width:400px){
  .news-form{flex-direction:column;border-radius:18px;padding:14px;gap:10px}
  .news-form input{width:100%;text-align:center}
  .news-form button{width:100%}
}

/* nothing should ever scroll sideways */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}

/* on a phone the subject sits centre frame and the scrim goes vertical,
   because there is no left column to protect */
@media(max-width:820px){
  .hero-bg img{object-position:58% center}
  .hero-bg::after{background:rgba(28,36,96,.40)}
}


/* ==================================================================
   HEADER FIT
   Between 1200px and 1440px the six links, the logo and the button
   are too wide at full size, so everything steps down one notch and
   Sign In drops out. Below 1200 the links move into the menu button.
   Nothing ever wraps to a second line.
   ================================================================== */
@media(min-width:1201px) and (max-width:1440px){
  .nav{padding:0 18px 0 32px;height:88px}
  .nav-links{gap:1px}
  .nav-links a{padding:9px 12px;font-size:14px}
  .nav-cta .signin{display:none}
  .nav-cta .btn{padding:14px 26px;font-size:14.5px}
  .brand{gap:9px}
  .brand-icon{width:44px}
  .brand-word{width:174px}
}
/* a last-resort guard: if a narrow window ever squeezes the links,
   they scroll sideways rather than stacking */
.nav-links{min-width:0;overflow:visible}
.nav-links a{flex:0 0 auto}

/* ==================================================================
   TESTIMONIALS WITHOUT A PHOTOGRAPH
   The quote carries the slide. An initials disc stands in for the
   face so the attribution still has a visual anchor.
   ================================================================== */
.t-slide{grid-template-columns:1fr}
.t-photo{display:none}
.t-card{
  border:1px solid var(--line);border-left:1px solid var(--line);
  border-radius:var(--radius);
  padding:60px clamp(28px,5vw,72px);
  background:linear-gradient(160deg,#fff 0%,var(--tint) 100%);
  position:relative;overflow:hidden;text-align:left;
}
.t-card::after{
  content:"";position:absolute;right:-90px;bottom:-110px;
  width:320px;height:320px;border-radius:50%;
  border:1.5px solid rgba(76,185,152,.28);pointer-events:none;
}
.t-card::before{
  content:"";position:absolute;right:-40px;bottom:-60px;
  width:200px;height:200px;border-radius:50%;
  background:rgba(244,166,35,.10);pointer-events:none;
}
.t-card > *{position:relative;z-index:2}
.t-top{margin-bottom:26px}
.quote-mark{font-size:80px;color:var(--coral)}
.t-card h4{font-size:clamp(1.5rem,2.6vw,2.15rem);margin-bottom:18px;max-width:20ch}
.t-card p.q{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.75;max-width:58ch;margin-bottom:34px}

.t-who{display:flex;align-items:center;gap:15px}
.t-avatar{
  width:52px;height:52px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--navy-2),var(--navy));
  color:#fff;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;font-weight:800;letter-spacing:.06em;
  border:2px solid rgba(244,166,35,.45);
}
.t-who-text{display:flex;flex-direction:column;line-height:1.3}
.t-who-text b{font-family:'Cormorant Garamond',serif;font-size:19px}
.t-who-text span{font-size:13.5px;color:var(--muted)}
@media(max-width:600px){
  .t-card{padding:36px 24px}
  .quote-mark{font-size:60px}
  .t-card::after{width:220px;height:220px;right:-70px;bottom:-80px}
}

/* team: a brand monogram holds the space until real portraits land */
.mono-frame{display:grid;place-items:center;
  background:linear-gradient(155deg,var(--tint),var(--tint-2))}
.mono{
  font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:600;
  letter-spacing:.12em;color:rgba(28,36,96,.30);
}

/* ==================================================================
   ROTATING HERO
   Several photographs crossfade in the hero, each easing out of a
   slight blur and zoom as it arrives. Same technique the reference
   site uses, with our navy scrim kept on top so the headline reads.
   ================================================================== */
.hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:60% center;
  opacity:0;transform:scale(1.07);filter:blur(7px);
  transition:opacity 1.1s ease,
             transform 2.4s cubic-bezier(.22,1,.36,1),
             filter 1.1s ease;
  will-change:opacity,transform;
}
.hero-bg img.on{opacity:1;transform:scale(1);filter:blur(0)}

/* the scrim has to sit above the photographs, not below them */
.hero-bg::after{z-index:3}
.hero-bg .fallback{z-index:0}
.hero-bg img{z-index:1}
.hero-bg img.on{z-index:2}

@media(prefers-reduced-motion:reduce){
  .hero-bg img{transition:opacity .4s ease;transform:none;filter:none}
  .hero-bg img.on{transform:none;filter:none}
}

/* the photograph now carries the hero, so the type earns its legibility
   from a soft shadow rather than from darkening the image underneath */
.hero h1,.hero .lead{
  text-shadow:0 2px 24px rgba(19,26,71,.55), 0 1px 4px rgba(19,26,71,.45);
}
.hero .btn-ghost{
  background:rgba(19,26,71,.28);
  border-color:rgba(255,255,255,.65);
  box-shadow:0 8px 28px -12px rgba(19,26,71,.6);
}
.hero .scroll-hint{text-shadow:0 1px 6px rgba(19,26,71,.6)}

/* ==================================================================
   MOBILE MENU
   Button: the four figures from the mark, as dots in brand colours.
   They rotate together into a cross when the sheet is open.
   Panel: a sheet that rises from the bottom, so the links land where
   a thumb actually reaches on a tall phone.
   ================================================================== */
.burger{
  display:none;position:relative;width:48px;height:48px;border-radius:50%;
  border:1.5px solid var(--line);background:transparent;cursor:pointer;
  padding:0;transition:border-color .35s ease,transform .45s cubic-bezier(.22,1,.36,1);
  -webkit-tap-highlight-color:transparent;
}
.burger .d{
  position:absolute;width:8px;height:8px;border-radius:50%;
  top:50%;left:50%;margin:-4px 0 0 -4px;
  transition:transform .55s cubic-bezier(.34,1.4,.5,1), background .35s ease, width .45s ease;
}
.d1{background:var(--teal);  transform:translate(-7px,-7px)}
.d2{background:var(--amber); transform:translate( 7px,-7px)}
.d3{background:var(--coral); transform:translate(-7px, 7px)}
.d4{background:var(--navy);  transform:translate( 7px, 7px)}

.burger:hover{border-color:var(--coral)}
.burger:hover .d1{transform:translate(-9px,-9px)}
.burger:hover .d2{transform:translate( 9px,-9px)}
.burger:hover .d3{transform:translate(-9px, 9px)}
.burger:hover .d4{transform:translate( 9px, 9px)}

/* open: the four dots stretch into two crossed strokes */
.burger.open{border-color:var(--coral);transform:rotate(45deg)}
.burger.open .d{width:20px;border-radius:4px;margin-left:-10px}
.burger.open .d1,.burger.open .d4{background:var(--coral)}
.burger.open .d2,.burger.open .d3{background:var(--navy)}
.burger.open .d1{transform:translate(0,-5px)}
.burger.open .d4{transform:translate(0, 5px)}
.burger.open .d2{transform:translate(0,-5px) rotate(90deg)}
.burger.open .d3{transform:translate(0, 5px) rotate(90deg)}
.nav.on-dark .burger{border-color:rgba(255,255,255,.35)}
.nav.on-dark .burger.open .d2,.nav.on-dark .burger.open .d3{background:#fff}

/* ---------- the scrim behind the sheet ---------- */
.sheet-scrim{
  position:fixed;inset:0;z-index:98;background:rgba(19,26,71,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .45s ease;
}
.sheet-scrim.on{opacity:1}

/* ---------- the sheet ---------- */
.mobile-menu{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:99;
  background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);
  border-radius:30px 30px 0 0;
  padding:14px 26px calc(26px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -24px 60px -20px rgba(19,26,71,.45);
  transform:translateY(102%);
  transition:transform .55s cubic-bezier(.22,1,.36,1);
  max-height:82vh;overflow-y:auto;overscroll-behavior:contain;
}
.mobile-menu.open{transform:translateY(0)}

.sheet-grip{
  display:block;width:44px;height:5px;border-radius:4px;
  background:rgba(28,36,96,.18);margin:0 auto 16px;
}

.sheet-links{display:block}
.mobile-menu a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;
  color:var(--navy);padding:12px 0;
  border-bottom:1px solid rgba(28,36,96,.09);
  opacity:0;transform:translateY(14px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1),color .25s ease;
}
.mobile-menu a::after{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--tint);transition:background .3s ease,transform .3s ease;
}
.mobile-menu a:active{color:var(--coral-ink)}
.mobile-menu a.active{color:var(--coral-ink)}
.mobile-menu a.active::after{background:var(--coral);transform:scale(1.25)}
/* each link arrives a beat after the one above it */
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu.open .sheet-links a:nth-child(1){transition-delay:.10s}
.mobile-menu.open .sheet-links a:nth-child(2){transition-delay:.15s}
.mobile-menu.open .sheet-links a:nth-child(3){transition-delay:.20s}
.mobile-menu.open .sheet-links a:nth-child(4){transition-delay:.25s}
.mobile-menu.open .sheet-links a:nth-child(5){transition-delay:.30s}
.mobile-menu.open .sheet-links a:nth-child(6){transition-delay:.35s}

.mobile-menu .sheet-cta{
  display:flex;width:100%;margin-top:18px;font-size:16px;padding:17px 32px;
  border-bottom:none;transition-delay:.42s;
  /* .mobile-menu a sets a navy colour and outranks .btn-primary, so the
     button label has to be reasserted here or it comes out dark on coral */
  color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
}
.mobile-menu .sheet-cta:active{color:#fff}
.mobile-menu .sheet-cta::after{display:none}

/* the mark, very faint, anchoring the bottom corner */
.sheet-mark{
  display:block;width:64px;height:64px;margin:16px auto 0;opacity:.12;
  background:url('assets/mark.png') center/contain no-repeat;
}

@media(max-width:1200px){ .burger{display:block} .mobile-menu{display:block} }
@media(prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu a,.burger,.burger .d{transition-duration:.01ms}
}