/* IvyBound Consulting — native CSS, no framework, no Elementor (CLAUDE.md §2).
   Design tokens sampled from the live site's computed styles. */
@import url('/css/fonts.css');

:root{
  /* Brand palette sampled from live. Ink is a near-black rather than pure #000:
     same authority, less glare, and it is what modern type practice uses. */
  --ink:#20242b;
  --ink-soft:#5a616b;
  --ink-dark:#12151a;
  --blue:#0170b9;           /* link / accent blue             */
  --green:#00aa82;          /* brand green — FILLS ONLY       */
  --green-text:#00795d;     /* text-safe green: #00aa82 is 2.7:1 on mint, fails AA */
  --teal:#81d8d0;
  --mint:#c4efdd;
  --coral:#ff6060;
  --yellow:#ffd400;         /* CTA button                     */
  --white:#fff;
  --line:#e6e8ec;
  --grad-hero:linear-gradient(45deg,#06aa82 0%,#0b7dbb 100%);
  --grad-card:linear-gradient(#c4efdd 0%,#81d8d0 100%);
  --display:'Saturday Oblique',Georgia,serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --body:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wrap:1200px;
  /* one spacing scale drives every band, so rhythm stays even at all widths */
  --sp:clamp(3rem,6vw,5rem);        /* 48px mobile -> 80px desktop */
  --sp-hero:clamp(3.75rem,8vw,7rem);
  --sp-gap:clamp(1rem,3vw,2rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--white);
     line-height:1.65;font-size:clamp(1rem,.35vw + .95rem,1.0625rem); /* -> 17px */
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink-dark);line-height:1.25;margin:0 0 .6em;font-weight:700}
h1{font-size:clamp(2rem,4vw,3.1rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.4rem)}
h3{font-size:1.15rem}
p{margin:0 0 1.2em}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.75rem 1rem;z-index:200}

/* ---------- header ---------- */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.site-header .wrap{display:flex;align-items:center;gap:2rem;min-height:88px}
.logo img{height:52px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.nav>li{list-style:none;position:relative}
.nav a{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.06em;
       text-transform:uppercase;color:var(--ink-dark)}
.nav a:hover{color:var(--green);text-decoration:none}
.nav ul{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);
        min-width:230px;padding:.5rem 0;margin:0;list-style:none;display:none;
        box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:110}
.nav li:hover>ul,.nav li:focus-within>ul{display:block}
.nav ul a{display:block;padding:.6rem 1.1rem;text-transform:none;font-weight:600;font-size:.8rem}
.btn-book{background:var(--yellow);color:var(--ink-dark)!important;padding:.8rem 1.5rem;
          border-radius:4px;font-weight:800!important;white-space:nowrap}
.btn-book:hover{background:#ffdc33;text-decoration:none}
.navbtn{display:none}

/* ---------- hero ---------- */
.hero{background:var(--grad-hero);color:#fff;text-align:center;
  /* Heights matched to live's rendered hero, measured at each breakpoint.
     Note mobile is TALLER than tablet: live keeps the headline at 44px on
     phones, so it wraps to more lines. */
  min-height:703px;display:grid;place-items:center;padding:30px 0}
.hero h1{color:#fff;max-width:1170px;margin:0 auto;
  /* live: Montserrat 75px/600 desktop, 44px at <=1024 */
  font-family:var(--sans);font-weight:600;font-size:75px;line-height:1.2}
.hero .chev{display:inline-block;margin-top:2rem;color:#fff;width:46px;height:46px}
.hero .chev svg{width:100%;height:100%;display:block}
.hero .chev:hover{opacity:.75}

/* hand-drawn underline under the last word */
.u-wrap{position:relative;display:inline-block;white-space:nowrap}
.u-svg{position:absolute;left:0;right:0;bottom:-.34em;width:100%;height:.5em;
  overflow:visible;fill:none;stroke:var(--yellow);
  /* preserveAspectRatio="none" squashes a 150-unit-tall viewBox into ~0.5em,
     so a 7-unit stroke renders under 2px. Scaled up to compensate: 7 / (h/150). */
  stroke-width:26;stroke-linecap:round;stroke-linejoin:round}

/* ---------- generic section ---------- */
.section{padding:var(--sp) 0}
.section-alt{background:#f7fbfa}
.section h2{text-align:center}
.lede{text-align:center;max-width:760px;margin:0 auto var(--sp-gap)}

/* ---------- meet ruchi ---------- */
.split{display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--sp);align-items:center}
.split img{border-radius:6px}

/* ---------- services grid ---------- */
.services{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-gap)}
.svc{flex:0 1 calc(25% - var(--sp-gap) * 3 / 4)}
.svc{text-align:center;text-decoration:none;color:inherit;display:block}
.svc .thumb{aspect-ratio:1;overflow:hidden;border-radius:8px;background:var(--grad-card)}
.svc .thumb img{width:100%;height:100%;object-fit:cover}
.svc h3{margin-top:1rem;font-size:1rem;color:var(--ink-dark);text-transform:uppercase;letter-spacing:.03em}
.svc:hover h3{color:var(--green)}

/* ---------- testimonials ---------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.tgrid img{border-radius:8px;border:1px solid var(--line);width:100%}

/* ---------- cta band ---------- */
.btn{display:inline-block;background:var(--yellow);color:var(--ink-dark);
     padding:1rem 2.4rem;border-radius:4px;font-family:var(--sans);font-weight:800;
     letter-spacing:.05em;text-transform:uppercase;font-size:.85rem}
.btn:hover{background:#ffdc33;text-decoration:none}
.btn-outline{background:transparent;border:2px solid var(--green-text);color:var(--green-text)}
.btn-outline:hover{background:var(--green);color:#fff}

/* ---------- blog ---------- */
.postlist{list-style:none;padding:0;display:grid;gap:2rem;
          grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.postlist li{border:1px solid var(--line);border-radius:8px;padding:1.6rem;background:#fff}
.postlist h2{font-size:1.1rem;text-align:left;margin:0 0 .4rem}
.postlist a{text-decoration:none}
.meta{color:#8a9099;font-size:.8rem;margin:0 0 .6rem}
.crumb{font-size:.85rem;margin-bottom:1rem}
.post{max-width:780px;margin:0 auto;padding:3.5rem 1.5rem}
.post h1{text-align:left}
.prose h2{text-align:left;margin-top:2em;font-size:1.5rem}
.prose img{margin:1.5rem 0;border-radius:6px}
main{min-height:50vh}
main>.wrap{padding-top:var(--sp);padding-bottom:var(--sp)}

/* ---------- footer ---------- */
.site-footer{background:#fff;border-top:1px solid var(--line);padding:var(--sp) 0 0}
.footer-top img{height:56px;width:auto}
.social{display:flex;gap:1.1rem}
.social a{color:var(--ink);display:inline-flex}
.social a:hover{color:var(--green)}
.newsletter{background:#f7fbfa;margin-top:0;padding:var(--sp) 0}
.newsletter p{text-align:center;max-width:680px;margin:0 auto 1.5rem}
.nform{display:grid;gap:.75rem;max-width:1000px;margin:0 auto;
  grid-template-columns:1fr 1fr 1fr 1fr auto}      /* desktop + tablet: one line */
.nform input,.nform select{font-family:var(--body);font-size:.9rem;padding:.7rem .9rem;
  border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
  min-width:0;width:100%}
.nform button{font-family:var(--sans);font-weight:800;text-transform:uppercase;font-size:.8rem;
  letter-spacing:.05em;background:var(--yellow);color:var(--ink-dark);border:0;
  padding:.8rem 1.8rem;border-radius:4px;cursor:pointer}
.nform button:hover{background:#ffdc33}
.hp{position:absolute;left:-9999px}
.legal{border-top:1px solid var(--line);padding:1.25rem 0;text-align:center}
.legal a{color:var(--ink);font-family:var(--sans);font-size:.72rem;font-weight:700;
         letter-spacing:.08em;text-transform:uppercase;margin:0 .9rem}
.disclaimer{text-align:center;font-size:.78rem;color:#8a9099;padding:0 0 2rem;margin:0}

@media (max-width:1023px){
  /* 8 services in a 3-up grid leaves an orphan row of 2 that reads as
     unfinished; flex-wrap with justify-content:center balances the last row. */
  .svc{flex-basis:calc(33.333% - var(--sp-gap) * 2 / 3)}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--sp-gap)}
  .navbtn{display:block;margin-left:auto;width:26px;height:20px;cursor:pointer;position:relative}
  .navbtn span,.navbtn span::before,.navbtn span::after{content:'';position:absolute;left:0;
    width:26px;height:2px;background:var(--ink-dark)}
  .navbtn span{top:9px}.navbtn span::before{top:-8px}.navbtn span::after{top:8px}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:.9rem;
       padding:1rem 0 1.5rem;margin-left:0}
  #navtoggle:checked~.nav{display:flex}
  .nav ul{position:static;display:block;border:0;box-shadow:none;padding-left:1rem}
  .site-header .wrap{flex-wrap:wrap;min-height:70px}
}
@media (max-width:639px){
  /* two form fields per row; submit spans the full width beneath them */
  .nform{grid-template-columns:1fr 1fr}
  .nform button{grid-column:1 / -1}
  .services{gap:1rem}
  .svc{flex-basis:calc(50% - .5rem)}   /* phone: 2-up */
  .svc h3{font-size:.82rem}
}

/* ---------- testimonial carousel ----------
   CSS scroll-snap does the work: native swipe + momentum on touch, trackpad
   scroll on desktop, keyboard on the focusable track. Arrows are progressive
   enhancement (hidden until JS unhides them), so it works with JS off. */
.carousel{position:relative;display:flex;align-items:center;gap:.5rem;
          max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.ctrack{display:flex;gap:1.5rem;list-style:none;margin:0;padding:.5rem 0 1.5rem;
        overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
        scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1}
.ctrack::-webkit-scrollbar{display:none}
.ctrack:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:8px}

.tcard{flex:0 0 85%;scroll-snap-align:center;background:#fff;
       border:1px solid var(--line);border-left:6px solid var(--green);
       border-radius:10px;padding:1.75rem;display:flex;flex-direction:column;
       box-shadow:0 2px 10px rgba(0,0,0,.05)}
.tcard .stars{color:var(--yellow);font-size:1.15rem;letter-spacing:.12em;margin:0 0 .75rem}
.tcard blockquote{margin:0 0 1.25rem;padding:0;border:0;font-size:.95rem;
                  line-height:1.75;color:var(--ink);flex:1}
.tcard .attrib{margin:0;font-family:var(--sans);font-size:.8rem;font-weight:700;
               color:var(--ink-dark);border-top:1px solid var(--line);padding-top:.9rem}
.tcard .attrib span{color:var(--green-text)}

.cbtn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
      background:#fff;color:var(--ink-dark);font-size:1.6rem;line-height:1;cursor:pointer;
      display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.cbtn:hover{background:var(--green);color:#fff;border-color:var(--green)}
.cbtn:disabled{opacity:.3;cursor:default}
.cbtn:disabled:hover{background:#fff;color:var(--ink-dark);border-color:var(--line)}

@media (min-width:640px){ .tcard{flex-basis:calc(50% - .75rem)} }
@media (min-width:1024px){ .tcard{flex-basis:calc(33.333% - 1rem)} }

@media (prefers-reduced-motion:reduce){ .ctrack{scroll-behavior:auto} }

/* Native CSS carousel (Chrome 135+): real arrows and dots with no JS at all.
   Everything above already works without this — pure progressive enhancement. */
@supports selector(::scroll-marker){
  .ctrack{anchor-name:--ctrack}
  .ctrack::scroll-marker-group{position-area:block-end;display:flex;
    justify-content:center;gap:.5rem;margin-top:.5rem}
  .tcard::scroll-marker{content:'';width:9px;height:9px;border-radius:50%;
    background:var(--line);border:0}
  .tcard::scroll-marker:target-current{background:var(--green)}
}

/* Arrows are for pointer users. On phones they steal ~88px of a 390px viewport
   and squeeze the cards, while swipe already works — so hide them there. */
@media (max-width:639px){
  .carousel{padding:0 0 0 1.5rem}
  .cbtn{display:none}
  .ctrack{padding-right:1.5rem}
}

/* sticky header would otherwise cover the target when jumping to #anchor */
section[id],[id]{scroll-margin-top:100px}

/* round university crest badge on each testimonial card */
.tcard{position:relative}
.crest{position:absolute;top:-20px;right:14px;width:64px;height:64px;
       border-radius:50%;background:#fff;border:1px solid var(--line);
       object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.10)}
.tcard .stars{padding-right:56px}

/* autoplay pause/play control — required whenever motion runs >5s (WCAG 2.2.2) */
.cplay{position:absolute;right:1.5rem;bottom:-.25rem;width:34px;height:34px;
       border-radius:50%;border:1px solid var(--line);background:#fff;
       color:var(--ink-dark);cursor:pointer;display:none;place-items:center;
       font-size:.7rem;line-height:1;padding:0}
.cplay[data-shown]{display:grid}
.cplay:hover{background:var(--green);color:#fff;border-color:var(--green)}

@media (min-width:1024px){ .crest{width:72px;height:72px} }

/* check glyphs left where Font Awesome icon-font bullets used to be */
.tick{color:var(--green);font-weight:700;margin-right:.4em}

/* legal links wrapped awkwardly on narrow screens */
@media (max-width:480px){
  .legal a{display:block;margin:.35rem 0}
  .disclaimer{padding-inline:1.5rem}
}

/* ---------- college carousel: two rows, scrolling horizontally ----------
   grid-auto-flow:column with two rows fills top-to-bottom then left-to-right,
   so the pair in each column stays together as you scroll. */
.ctrack-2row{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
             gap:1.25rem;align-items:start}
.ccard{scroll-snap-align:start;width:230px;margin:0}
.ccard img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;
           border:1px solid var(--line);background:var(--bg-alt)}
.ccard h3{font-size:.85rem;margin:.6rem 0 0;font-family:var(--sans);font-weight:600;
          color:var(--ink-dark);line-height:1.35}
.ccarousel .ctrack{padding-bottom:.5rem}

@media (min-width:1024px){ .ccard{width:260px} }
@media (max-width:639px){ .ccard{width:60vw;max-width:250px} }


/* ---------- hero background video ----------
   The gradient stays as the base layer, so the hero looks finished before the
   video loads, if it never loads, or under prefers-reduced-motion. */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero>.wrap{position:relative;z-index:2}
.hero-video{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
            transition:opacity .6s ease}
.hero.has-video .hero-video{opacity:1}
.hero-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  /* cover the box at 16:9 whichever way the viewport is shaped */
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--grad-hero);opacity:1}
/* Kept deliberately heavy. The clip is decorative, and a thin overlay lets
   YouTube's own UI (an error, a region block, a "confirm you're not a bot"
   interstitial) show through behind the headline. This keeps it as texture. */
.hero.has-video .hero-overlay{opacity:.88}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero-overlay{opacity:1}
}

/* ---------- hero responsive geometry (values sampled from live) ---------- */
@media (max-width:1024px){
  .hero{min-height:473px}
  .hero h1{font-size:44px}
}
@media (max-width:640px){
  .hero{min-height:587px;padding:24px 0}
  .hero h1{font-size:44px;line-height:1.22}   /* live keeps 44px on phones */
  .hero .chev{width:38px;height:38px;margin-top:1.25rem}
  .u-svg{stroke-width:34;bottom:-.30em}  /* box is shorter on phones, so scale up */
}

/* display headings are BLUE on live, not navy: 54px #007dbb and 68px #0B7DBB */
h2.script{color:#0b7dbb}
#meet-ruchi h2.script{color:#007dbb}

/* ============================================================================
   BLOCK SYSTEM
   Brand values (colour, type family, button shape) are taken from the live
   site. Everything structural — line-height, spacing rhythm, focus states,
   fluid sizing — is rebuilt to current practice rather than copied.
   Notably NOT copied: line-height:0.1em on the display headings, which
   collapses the line box and overlaps neighbouring content the moment a
   heading wraps.
   ========================================================================= */

/* ---- display headings ---------------------------------------------------- */
h2.script,h3.script{font-family:var(--display);font-weight:600;font-style:oblique;
  color:#0b7dbb;letter-spacing:.03em;line-height:1.15;   /* live: 0.1em — unusable */
  font-size:clamp(2.1rem,1.2rem + 3.81vw,4.25rem);margin:0 0 .5em}  /* live: 68px @1280 */
#meet-ruchi h2.script{color:#007dbb;letter-spacing:.06em;
  font-size:clamp(1.9rem,1.1rem + 3.16vw,3.375rem)}  /* live: 54px @1280 */

/* ---- buttons: yellow pill, as on live ------------------------------------ */
.btn,.btn-book,.nform button{
  display:inline-block;background:var(--yellow);color:#333;
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;line-height:1;border:0;border-radius:999px;cursor:pointer;
  padding:.85em 1.6em;font-size:1.0625rem;text-decoration:none;
  transition:background .18s ease,transform .18s ease}
.btn:hover,.btn-book:hover,.nform button:hover{background:#ffdf3d;text-decoration:none;color:#333}
.btn:active,.btn-book:active,.nform button:active{transform:translateY(1px)}
.btn:focus-visible,.btn-book:focus-visible,.nform button:focus-visible,
a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:3px solid #0b7dbb;outline-offset:3px;border-radius:999px}
.btn-lg{font-size:1.15rem;padding:.95em 1.9em}
.btn-book{font-size:.95rem;padding:.75em 1.35em}
@media (prefers-reduced-motion:reduce){
  .btn,.btn-book,.nform button{transition:none}
}

/* ---- hero ---------------------------------------------------------------- */
/* live runs the gradient at 0.65 over the video; heavier than that and the
   footage disappears */
.hero.has-video .hero-overlay{opacity:.65}

/* ---- what we do: mint wash, as on live ----------------------------------- */
#what-we-do{background:linear-gradient(0deg,#c4efdd 0%,#81d8d0 100%);
  background-color:#eefaf6;position:relative;isolation:isolate}
#what-we-do::before{content:'';position:absolute;inset:0;z-index:-1;
  background:#fff;opacity:.7}          /* live uses the gradient at 0.3 */
.svc h3{font-family:var(--sans);font-weight:600;color:var(--green-text);
  font-size:clamp(1rem,.5rem + .6vw,1.3125rem);   /* live: 21px */
  text-transform:none;letter-spacing:0;line-height:1.3;margin-top:.9rem}
.svc:hover h3{color:#005c47}


/* ---------- schedule block ------------------------------------------------ */
.schedule{background:linear-gradient(180deg,#f4fbf9 0%,#e8f7f3 100%);padding:var(--sp) 0 0}
.schedule-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);
  align-items:center}
.schedule-main{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.schedule-portrait{width:clamp(180px,20vw,288px);aspect-ratio:1;border-radius:50%;
  object-fit:cover;box-shadow:0 6px 24px rgba(0,0,0,.10)}
.schedule-copy{font-family:var(--sans);font-weight:600;color:#0170b9;margin:0;
  font-size:clamp(1.125rem,.6rem + .8vw,1.5rem);line-height:1.4;max-width:34ch}
/* deliberate emphasis run, as on live */
.schedule-copy em{font-style:normal;color:#e02020}
.schedule-aside img{width:100%;max-width:366px;margin-inline:auto;height:auto}

.back-to-top{text-align:center;margin:0;padding:2.25rem 0 var(--sp)}
.back-to-top a{display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--body);font-size:1rem;color:#7a7a7a;text-decoration:none}
.back-to-top a:hover{color:var(--ink-dark)}
.btt-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:6px;
  background:#8fdcd2;color:#12151a;font-size:1.15rem;line-height:1;
  transition:background .18s ease}
.back-to-top a:hover .btt-icon{background:#6fd0c3}

@media (max-width:860px){
  .schedule-grid{grid-template-columns:1fr}
  .schedule-aside{order:-1}
  .schedule-aside img{max-width:280px}
}

/* ---------- footer: logo + social on one row, teal circles ---------------- */
.footer-top{display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:clamp(1.5rem,5vw,4rem);flex-wrap:wrap;text-align:left}
.footer-logo img{height:56px;width:auto}
.social{display:flex;gap:.75rem;list-style:none;margin:0;padding:0}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:#8fdcd2;color:#fff;transition:background .18s ease,transform .18s ease}
.social a:hover{background:var(--green-text);transform:translateY(-2px)}
.social svg{width:19px;height:19px}
@media (prefers-reduced-motion:reduce){ .social a{transition:none} }

/* newsletter: five fields + submit on one line, green-bordered inputs */
.nform{display:grid;gap:.6rem;max-width:1060px;margin:0 auto;
  grid-template-columns:repeat(5,1fr) auto}
.nform input,.nform select{font-family:var(--body);font-size:.95rem;padding:.7rem .85rem;
  border:1px solid #06aa82;border-radius:6px;background:#fff;color:var(--ink);
  min-width:0;width:100%}
.nform input::placeholder{color:#5a616b}
.nform input:focus-visible,.nform select:focus-visible{outline:3px solid #0b7dbb;
  outline-offset:2px;border-radius:6px}
.nform button{text-transform:none;font-size:1rem;padding:.7em 1.6em}

.legal .sep{display:inline-block;width:1px;height:12px;background:#c9ced6;
  margin:0 .35rem;vertical-align:middle}

@media (max-width:1023px){
  .nform{grid-template-columns:repeat(2,1fr)}
  .nform button{grid-column:1 / -1}
}
@media (max-width:520px){
  .nform{grid-template-columns:1fr}
}

/* ---------- meet ruchi block ---------------------------------------------
   Desktop: portrait beside a left-aligned column.
   Mobile:  portrait fills the column width, and the heading and CTA centre to
            match every other section heading on the page. Body copy stays
            left-aligned — centred paragraphs are harder to read. */
#meet-ruchi .mr-portrait{width:100%;height:auto}
#meet-ruchi h2.script{text-align:left}
#meet-ruchi .mr-cta{margin-bottom:0}

@media (max-width:900px){
  #meet-ruchi .split{gap:1.75rem}
  #meet-ruchi .mr-portrait{width:100%;max-width:none}
  #meet-ruchi h2.script{text-align:center}
  #meet-ruchi .mr-cta{text-align:center}
}

/* Phone mockup is decorative: it costs a full screen of scroll on a phone and
   says nothing the copy doesn't. Hidden below the two-column breakpoint. */
@media (max-width:860px){
  .schedule-aside{display:none}
  .schedule-grid{grid-template-columns:1fr}
}

/* ---------- page hero (inner pages) ---------------------------------------
   Photo banner with a bottom-weighted scrim so the type stays legible over
   whatever part of the image sits behind it. Script title + sans subtitle,
   matching live. Content differs per page, so the markup lives in the page and
   only the styling is shared. */
.page-hero{position:relative;isolation:isolate;min-height:clamp(430px,44vw,580px);
  display:grid;place-items:center;text-align:center;overflow:hidden;
  background:#1b2a2e center/cover no-repeat}
.page-hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(2,1,1,0) 0%,rgba(0,0,0,.92) 67%);opacity:.72}
.page-hero .wrap{position:relative;z-index:2;padding-block:2rem}
.page-hero .ph-title{font-family:var(--display);font-weight:700;font-style:normal;
  color:#63d8ce;line-height:1.05;margin:0 0 .1em;
  font-size:clamp(3rem,1.4rem + 6.45vw,6.5625rem)}   /* live: 105px @1280 */
.page-hero .ph-sub{font-family:var(--sans);font-weight:600;color:#fff;
  line-height:1.15;margin:0;
  font-size:clamp(1.6rem,.8rem + 3.3vw,3.4375rem)}   /* live: 55px @1280 */



/* ---------- two-part section heading -------------------------------------- */
.dual-head{text-align:center;margin-bottom:1.5rem}
.dual-head .dh-script{display:block;font-family:var(--display);font-weight:600;
  font-style:oblique;color:#0b7dbb;line-height:1.15;letter-spacing:.02em;
  font-size:clamp(2.1rem,1.2rem + 3.97vw,4.375rem)}  /* live: 70px @1280 */
.dual-head .dh-sans{display:block;font-family:var(--sans);font-weight:600;
  color:var(--green-text);line-height:1.25;margin-top:.15em;
  font-size:clamp(1.25rem,.7rem + 1.5vw,2rem)}        /* live: 32px, #05aa82 */


@media (max-width:860px){
  h1,h2,h3,
  .ph-title,.ph-sub,.dual-head,.dh-script,.dh-sans,
                /* prose stays ranged left */
    .lead-copy{text-align:center}
}

/* Display headings centre everywhere except the Meet Ruchi block on desktop,
   where the portrait sits beside a ranged-left column. */
.u-display{text-align:center}
@media (min-width:901px){ #meet-ruchi h2.u-display{text-align:left} }

/* ============================================================================
   PACKAGE TABS
   Desktop: both packages side by side, tab strip hidden.
   Mobile:  a real ARIA tablist, one panel at a time (static/js/tabs.js).
   ========================================================================= */
.pkg-tabs{margin-top:2rem}
.pkg-tablist{display:none}
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);
  align-items:start}

.pkg-panel{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.5rem,2.5vw,2.5rem);box-shadow:0 2px 16px rgba(0,0,0,.05)}
.pkg-head{text-align:center;margin-bottom:1.25rem}
.pkg-title{font-family:var(--sans);font-weight:600;color:#333;line-height:1.2;
  font-size:clamp(1.3rem,.8rem + 2.125vw,2.5rem);margin:0 0 .3rem}  /* live: 40px */
.pkg-aud{font-family:var(--body);font-weight:600;color:var(--green-text);margin:0;
  font-size:clamp(1rem,.7rem + .92vw,1.4375rem)}                    /* live: 23px */
.pkg-panel > p{text-align:left}
.rm-head{font-family:var(--display);font-weight:600;font-style:oblique;
  color:#0170b9;text-align:center;line-height:1.2;margin:2rem 0 1.25rem;
  font-size:clamp(1.6rem,1rem + 2.66vw,3.125rem)}                   /* live: 50px */
.pkg-cta{text-align:center;margin:1.75rem 0 0}

/* ---- roadmap: a confident, colour-coded journey -------------------------
   Each step is a GRID, not absolute positioning. Row 1 is [badge | ribbon] with
   align-items:center, so the circle and the bar are centred to each other by
   the layout rather than by hand-tuned offsets. Row 2 is the description, which
   therefore always clears both.
   The earlier version positioned the badge absolutely and let the description
   flow underneath it — the circle overlapped the first line of text and the
   ribbon never lined up with the circle. */
.roadmap{list-style:none;margin:0;padding:.25rem 0;counter-reset:milestone}
.roadmap li{position:relative;counter-increment:milestone;
  display:grid;grid-template-columns:var(--rm-badge,2.9rem) 1fr;
  column-gap:.9rem;row-gap:.6rem;align-items:center;
  margin-bottom:1.9rem}
.roadmap li:last-child{margin-bottom:0}

/* row 1, column 1 — the numbered badge */
.roadmap li::before{content:counter(milestone,decimal-leading-zero);
  grid-column:1;grid-row:1;
  width:var(--rm-badge,2.9rem);height:var(--rm-badge,2.9rem);border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--sans);font-weight:800;font-size:.88rem;
  color:#fff;background:#0d3b66;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 5px var(--rm-tint,#d7f5ea)}

/* row 1, column 2 — the tinted stage ribbon */
.rm-title{grid-column:2;grid-row:1;margin:0;
  font-family:var(--sans);font-weight:800;color:#0d3b66;
  font-size:clamp(1.02rem,.75rem + .65vw,1.28rem);line-height:1.3;
  padding:.5em 2.1em .5em .85em;
  background:var(--rm-tint,#d7f5ea);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);
  border-radius:5px 0 0 5px}

/* row 2 — description, clear of both */
.rm-desc{grid-column:2;grid-row:2;margin:0;
  font-size:.98rem;line-height:1.62;color:var(--ink);overflow-wrap:anywhere}

/* the spine, drawn from under the badge to the next step */
.roadmap li::after{content:'';position:absolute;
  left:calc(var(--rm-badge,2.9rem) / 2 - 1.5px);
  top:calc(var(--rm-badge,2.9rem) + 5px);bottom:calc(-1.9rem + 5px);
  width:3px;background:#0d3b66;opacity:.25}
.roadmap li:last-child::after{display:none}

/* stage tints rotate so consecutive steps read as distinct stages */
.roadmap li:nth-child(3n+1){--rm-tint:#d7f5ea}
.roadmap li:nth-child(3n+2){--rm-tint:#d9ecfb}
.roadmap li:nth-child(3n+3){--rm-tint:#e8e2f9}

/* the last milestone is the destination, not another step */
.roadmap li:last-child::before{content:'';background:#0d3b66;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
  background-size:1.35rem;background-position:center;background-repeat:no-repeat}

/* ---- what's included: mint card, blue ticks ------------------------------ */
.included{list-style:none;margin:0;padding:1.5rem 1.5rem 1.5rem 1.25rem;
  background:#fff;border:1px solid #cfeee7;border-left:5px solid #0b7dbb;
  border-radius:10px;box-shadow:0 1px 3px rgba(16,40,50,.05)}
.included li{position:relative;padding-left:2.4rem;margin-bottom:1rem;
  line-height:1.55}
.included li:last-child{margin-bottom:0}
.included li::before{content:'';position:absolute;left:0;top:.15rem;
  width:22px;height:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230170b9' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat}

/* ---- mobile: real tabs --------------------------------------------------- */
@media (max-width:900px){
  /* Option A: the active tab and its panel are one continuous shape — same
     surface, same border, seam between them removed. That is what makes the
     panel read as belonging to the tab. */
  .pkg-tablist{display:flex;gap:.25rem;padding:0 .2rem}
  .pkg-tab{flex:1;font-family:var(--sans);font-weight:600;font-size:.8rem;
    line-height:1.25;padding:.75rem .5rem;cursor:pointer;
    border:1px solid var(--line);border-bottom:0;border-radius:11px 11px 0 0;
    background:#f2f6f8;color:var(--ink-soft);position:relative;top:1px;
    transition:background .16s ease,color .16s ease,border-color .16s ease}
  .pkg-tab[aria-selected="true"]{background:#eafaf5;color:#0f4f47;
    border-color:#cfeee7;box-shadow:0 -2px 0 #63d8ce inset}
  .pkg-tab:focus-visible{outline:3px solid #0b7dbb;outline-offset:2px}
  .pkg-grid{grid-template-columns:1fr}
  .pkg-panel{border:1px solid #cfeee7;border-radius:0 0 12px 12px;
    background:#eafaf5;box-shadow:none;padding:1.25rem 1rem 1.5rem}
}

@media (prefers-reduced-motion:reduce){ .pkg-tab{transition:none} }

/* ---------- colleges block: heading, claim and carousel as one unit --------
   The success-rate heading and claim used to sit loose on the page above the
   carousel, so the spacing between them was arbitrary and differed per page.
   They belong to this block and are spaced with it. */
.colleges-block{background:linear-gradient(180deg,#f7fbfa 0%,#eef8f5 100%)}
.colleges-intro{text-align:center;margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.colleges-intro h2.script{margin:0 0 .35em}
.colleges-intro .claim{margin:0 auto .9em;max-width:46ch;text-wrap:balance}
.colleges-sub{font-family:var(--sans);font-weight:700;color:var(--ink-dark);
  line-height:1.25;margin:0;text-wrap:balance;
  font-size:clamp(1.15rem,.75rem + 1.1vw,1.75rem)}

/* ---------- high school: single package, no tabs -------------------------- */
.pkg-single{max-width:820px;margin-inline:auto}

/* ---------- school types: native <details> (§6) ---------------------------
   Five blocks of ~250 words each. Stacked open that is 1,250 words of wall;
   collapsed, the five options are scannable and the reader opens what applies. */
.schooltypes{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.schooltype{border-bottom:1px solid var(--line)}
.schooltype > summary{cursor:pointer;list-style:none;padding:1.15rem 3rem 1.15rem 0;
  position:relative;font-family:var(--sans);font-weight:700;color:var(--ink-dark);
  font-size:clamp(1.05rem,.75rem + .8vw,1.625rem)}      /* live: 26px */
.schooltype > summary::-webkit-details-marker{display:none}
.schooltype > summary::after{content:'';position:absolute;right:.6rem;top:1.65rem;
  width:11px;height:11px;border-right:2.5px solid var(--green-text);
  border-bottom:2.5px solid var(--green-text);transform:rotate(45deg);
  transition:transform .2s ease}
.schooltype[open] > summary::after{transform:rotate(-135deg)}
.schooltype > summary:hover{color:var(--green-text)}
.schooltype > summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.st-body{padding:0 0 1.5rem}
.st-body p{margin:0 0 1rem;max-width:58ch}
.st-body p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){ .schooltype > summary::after{transition:none} }

/* ---------- admitted-schools list ----------------------------------------- */
#hs-success{text-align:center}
.schoollist{list-style:none;margin:0 auto;padding:0;max-width:900px;
  display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.schoollist li{background:#fff;border:1px solid #cfeee7;border-radius:999px;
  padding:.6rem 1rem;font-family:var(--sans);font-weight:600;font-size:.92rem;
  color:var(--ink-dark)}
.schoollist-more{margin:1.1rem 0 0;color:var(--ink-soft);font-style:italic}

/* ---------- mobile: stop giving the text away to nested padding -----------
   At 390px the roadmap copy was rendering 206px wide — 53% of the viewport —
   because .wrap, .pkg-panel and .roadmap each took their own inset. */
@media (max-width:640px){
  .wrap{padding-inline:1rem}
  .pkg-panel{padding-inline:.75rem}
  /* Row 1 keeps [badge | ribbon]; row 2 spans BOTH columns so the description
     uses the full width instead of sitting in a 60%-wide gutter. */
  .roadmap li{--rm-badge:2.6rem;column-gap:.7rem;margin-bottom:1.6rem}
  .rm-desc{grid-column:1 / -1}
  /* no spine on mobile — the full-width description would run through it */
  .roadmap li::after{display:none}
}

/* ============================================================================
   MEASURE — all three modes
   Reading measure sits best at 45–75 characters. Audited with tests/measure.mjs:
   the page intro was running 135 chars at 1280px because an earlier regex-based
   CSS cleanup deleted this rule's base declaration, leaving only its
   media-query override. The checklist was 29 chars on mobile — too tight —
   because three nested paddings stacked up.
   ========================================================================= */
.lead-copy{max-width:54ch;margin-inline:auto;text-align:center}
.rm-desc{max-width:58ch}
.included li{max-width:56ch}
.pkg-panel > p{max-width:58ch;margin-inline:auto}

@media (max-width:640px){
  /* recover the checklist measure: trim the card and the tick gutter */
  .included{padding:1.15rem 1rem 1.15rem .9rem}
  .included li{padding-left:1.9rem;margin-bottom:.85rem}
  .included li::before{width:19px;height:19px}
}

/* measure caps for the homepage blocks, audited with tests/measure-home.mjs */
.lede{max-width:54ch}                      /* was 760px -> 89 chars at 1280 */
#meet-ruchi .mr-copy p{max-width:57ch}     /* was 84 chars when stacked at 768 */

/* ---------- shop: product cards ------------------------------------------
   §11 required a price on every card. Live shows none — the only "$350" on the
   page is an hourly add-on rate, so every product sent you to Kajabi checkout
   to find out what it cost. Prices below were read off the live offers. */
.page-hero--shop .ph-title{font-size:clamp(3.5rem,1.5rem + 8.6vw,8.75rem)}  /* live: 140px */

.products{display:grid;gap:clamp(1.25rem,2.5vw,2rem);align-items:stretch;
  /* two columns, not auto-fit: four content-heavy cards wrap 3+1 at three
     columns, leaving an orphan and a very narrow measure. */
  grid-template-columns:1fr}
@media (min-width:900px){ .products{grid-template-columns:repeat(2,1fr)} }
.product{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.35rem,2vw,2rem);box-shadow:0 2px 14px rgba(16,40,50,.05);
  display:flex;flex-direction:column;height:100%}
.prod-head{border-bottom:1px solid var(--line);padding-bottom:.9rem;margin-bottom:1rem}
.prod-name{font-family:var(--sans);font-weight:700;color:#0d3b66;line-height:1.25;
  font-size:clamp(1.15rem,.8rem + 1vw,1.6rem);margin:0 0 .45rem}
.prod-price{margin:0;font-family:var(--sans);line-height:1.3;
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.prod-price strong{font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem);font-weight:800;
  color:var(--green-text);font-variant-numeric:tabular-nums}
.prod-pack{font-family:var(--body);font-weight:600;font-size:.85rem;color:var(--ink-soft)}
.prod-body{flex:1}
.prod-body p{max-width:54ch}
.prod-body .included{margin-top:1rem}
.prod-cta{margin:1.5rem 0 0}
.product--free{margin-top:clamp(1.25rem,2.5vw,2rem);
  background:linear-gradient(180deg,#f2fbf8 0%,#e8f7f3 100%);border-color:#cfeee7}
.prod-note{margin:1.5rem 0 0;text-align:center;color:var(--ink-soft);font-size:.92rem}

@media (max-width:860px){ .prod-price{gap:.4rem} }

/* ---------- page-hero variants -------------------------------------------
   Heights matched to live so every page opens at roughly the same scale:
   college 539, high-school 501, coaching 555, about-us 610. */
.page-hero--coaching{background-position:center 30px}
.page-hero--coaching::after{background:linear-gradient(rgba(104,104,104,0) 0%,rgba(80,80,80,.95) 100%);
  opacity:.55}
.ph-plain{font-family:var(--sans);font-weight:600;color:#fff;line-height:1.2;margin:0 0 1.5rem;
  font-size:clamp(1.75rem,.9rem + 3.1vw,3.125rem);text-shadow:0 2px 14px rgba(0,0,0,.35)}
.ph-cta{margin:0}

.page-hero--about{background-position:center top}
/* live scrims this one from the LEFT so the portrait on the right stays clear */
.page-hero--about::after{background:linear-gradient(270deg,rgba(2,1,1,.15) 0%,rgba(0,0,0,.9) 62%);opacity:.78}
.page-hero--about .wrap{max-width:1100px;text-align:left}
.page-hero--about .ph-title{text-align:left}
.ph-quote{font-family:var(--sans);font-weight:500;color:#fff;margin:.5rem 0 0;max-width:22ch;
  line-height:1.3;font-size:clamp(1.15rem,.7rem + 2.2vw,2.1875rem);
  text-shadow:0 2px 14px rgba(0,0,0,.4)}

@media (max-width:860px){
  .page-hero--about::after{background:linear-gradient(rgba(2,1,1,.15) 0%,rgba(0,0,0,.88) 70%);opacity:.72}
  .page-hero--about .wrap,.page-hero--about .ph-title{text-align:center}
  .ph-quote{max-width:30ch;margin-inline:auto}
}

/* ---------- about: prose column and the "More About" band ---------------- */
.prose-col{max-width:58ch;margin-inline:auto}
.prose-col p{margin:0 0 1.25em}
.prose-col .included{margin:1.5rem 0}
.signoff{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.95rem;line-height:1.9}
.signoff strong{font-family:var(--sans);font-weight:700;color:var(--ink-dark)}

/* live sets this band white-on-photo; a solid brand gradient reads better and
   costs no image request */
.about-band{background:linear-gradient(45deg,#06aa82 0%,#0b7dbb 100%);
  text-align:center;padding:clamp(2.5rem,5vw,4.5rem) 0}
.ab-kicker{font-family:var(--sans);font-weight:600;color:#fff;margin:0;line-height:1.1;
  font-size:clamp(1.6rem,.9rem + 3vw,3.5rem)}          /* live: 90px Montserrat white */
.ab-name{font-family:var(--display);font-weight:600;font-style:oblique;color:#63d8ce;
  margin:.15em 0 0;line-height:1.15;
  font-size:clamp(2rem,1rem + 4.3vw,4.25rem)}          /* live: 85px, #63d8ce */

/* newsletter status line — one grid row under the fields */
.nform-msg{grid-column:1 / -1;margin:.25rem 0 0;font-size:.9rem;min-height:1.2em;
  color:var(--ink-soft);text-align:center}
.nform-msg.is-ok{color:var(--green-text);font-weight:600}
.nform-msg.is-error{color:#b3261e;font-weight:600}
.nform button:disabled{opacity:.6;cursor:default}