/* ===== NAV · LIQUID GLASS PILL (shared by desktop and mobile) =====
   Clear glass with no colour of its own: it blurs and brightens whatever is behind it. On the light sections the
   script adds .on-light so the text flips to dark and stays readable. */
  :root{--nv-fg:#fff;--nv-fg2:rgba(255,255,255,.82);--nv-edge:rgba(255,255,255,.42);--nv-tint:rgba(255,255,255,.1);--nv-hi:rgba(255,255,255,.2);--nv-shadow:rgba(0,0,0,.22);}
  .site-header-wrap.on-light{--nv-fg:#14112e;--nv-fg2:rgba(20,17,46,.78);--nv-edge:rgba(255,255,255,.85);--nv-tint:rgba(255,255,255,.5);--nv-hi:rgba(255,255,255,.7);--nv-shadow:rgba(40,30,90,.2);}
  .site-header-wrap{padding-bottom:10px;}
  .site-header-wrap > header{
    margin:12px clamp(12px,2.4vw,48px) 0;border:1px solid transparent;border-radius:999px;
    box-shadow:0 0 0 rgba(0,0,0,0);
    transition:border-color .4s ease,box-shadow .4s ease;
  }
  /* At the very top the nav blends into the hero; once you scroll (or open the phone menu) it turns into the glass pill. */
  .site-header-wrap > header.scrolled,body.mobile-nav-active .site-header-wrap > header{
    border-color:var(--nv-edge);box-shadow:0 12px 34px var(--nv-shadow),0 2px 6px rgba(0,0,0,.08);
  }
  .site-header-wrap > header.scrolled::before,body.mobile-nav-active .site-header-wrap > header::before{opacity:1!important;}
  .site-header-wrap > header.scrolled::after,body.mobile-nav-active .site-header-wrap > header::after{opacity:.7;}
  .site-header-wrap > header::before{
    display:block;opacity:0!important;border-radius:inherit;
    background:linear-gradient(180deg,var(--nv-hi),var(--nv-tint) 55%,rgba(255,255,255,.04));
    -webkit-backdrop-filter:blur(16px) saturate(190%) brightness(1.06);backdrop-filter:blur(16px) saturate(190%) brightness(1.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.18),inset 0 0 24px rgba(255,255,255,.08);
    transition:opacity .4s ease,background .35s ease;
  }
  .site-header-wrap > header::after{ /* specular glints on the rim */
    content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;
    background:
      radial-gradient(ellipse 22% 120% at 14% -30%,rgba(255,255,255,.55),transparent 70%),
      linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent) 66% 100%/24% 1px no-repeat;
    opacity:0;transition:opacity .4s ease;
  }
  .nav{position:relative;z-index:1;max-width:none;margin:0;padding:10px 12px 10px clamp(22px,2.6vw,44px);color:var(--nv-fg);}
  .logo{font-size:clamp(22px,1.9vw,30px);color:var(--nv-fg);}
  /* Logo keeps its original colours: "PROFS" blue, the dot pink; only "TG" follows the glass tone so it stays readable. */
  .logo span:not(.dot){color:var(--blue2);}
  .logo .dot{color:var(--pink);}
  .nav-links{margin-left:auto;margin-right:clamp(10px,1.4vw,24px);gap:4px;}
  .nav-links>a,.nav-dropdown summary{padding:11px clamp(14px,1.4vw,22px);border-radius:999px;font-size:clamp(14px,1.05vw,16px);font-weight:600;color:var(--nv-fg2);}
  .nav-links>a:hover,.nav-dropdown summary:hover,.nav-links>a:focus-visible,.nav-dropdown summary:focus-visible{background:rgba(255,255,255,.14);color:var(--nv-fg);}
  /* The current section is marked with a purple underline (no filled pill), in the hero and on the glass alike. */
  .nav-links>a.active,.nav-dropdown.active>summary{color:var(--nv-fg);font-weight:700;background:none;box-shadow:none;}
  .nav-links>a.active::after,.nav-dropdown.active>summary::before{left:18%;right:18%;bottom:2px;height:3px;border-radius:3px;background:linear-gradient(90deg,#6f4bf2,#a47dff);box-shadow:0 0 10px rgba(122,77,242,.75);opacity:1;}
  .nav-submenu{border:1px solid var(--nv-edge);background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.1));-webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.05);backdrop-filter:blur(22px) saturate(190%) brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 44px var(--nv-shadow);}
  .nav-submenu a,.nav-submenu a.nav-batch-link{color:var(--nv-fg);}
  .nav-submenu .nav-course-links a{color:var(--nv-fg2);}
  .nav-submenu a:hover,.nav-submenu a:focus-visible{background:rgba(255,255,255,.2);}
  .nav-right{gap:0;}
  .nav-right::before{content:"";width:1px;height:30px;margin-right:clamp(12px,1.3vw,20px);background:var(--nv-edge);opacity:.7;}
  .nav-right .btn.btn-primary{
    display:inline-flex;align-items:center;gap:10px;padding:13px clamp(18px,1.6vw,26px);border-radius:999px;
    font-size:clamp(14px,1.05vw,16px);font-weight:700;color:#fff;border:0;
    background:linear-gradient(135deg,var(--blue),var(--blue2));     /* the original Student Login blue */
    box-shadow:0 8px 24px rgba(59,107,245,.35);
  }
  .nav-right .btn.btn-primary::before{content:"";flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 9.2 12 4l10.5 5.2L12 14.4z' fill='%23000'/%3E%3Cpath d='M6 12.6v4.4c0 1.6 2.7 3 6 3s6-1.4 6-3v-4.4L12 16z' fill='%23000'/%3E%3Cpath d='M22 10v5' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 9.2 12 4l10.5 5.2L12 14.4z' fill='%23000'/%3E%3Cpath d='M6 12.6v4.4c0 1.6 2.7 3 6 3s6-1.4 6-3v-4.4L12 16z' fill='%23000'/%3E%3Cpath d='M22 10v5' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;}
  .nav-right .btn.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);}
  .nav-toggle{
    width:46px;height:46px;flex:0 0 46px;border-radius:16px;border:1px solid var(--nv-edge);
    background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  }
  .nav-toggle span{background:var(--nv-fg);}
  .nav-toggle.open{background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.16));border-color:var(--nv-edge);}
  .mobile-nav-backdrop{z-index:-2;}   /* dim the page, but never the bar itself */
  @media(max-width:1100px){
    .nav{padding:8px 8px 8px 22px;}
    .nav-right{margin-left:auto;gap:10px;}
    .nav-right::before{display:none;}
    .logo{font-size:clamp(20px,5.6vw,26px);}
    .nav-right .btn.btn-primary{display:none;}   /* on phones Student Login lives inside the menu */
  }
  @media(max-width:420px){
    .site-header-wrap > header{margin-left:10px;margin-right:10px;}
    .nav{padding:7px 7px 7px 16px;}
    .nav-right{gap:8px;}
    .nav-right .btn.btn-primary{padding:11px 14px;font-size:13px;gap:7px;}
    .nav-right .btn.btn-primary::before{width:18px;height:18px;}
    .nav-toggle{width:42px;height:42px;flex-basis:42px;border-radius:14px;}
  }
  /* The opened menu: a second liquid-glass card under the bar, with an icon for every item. */
  .nav-links.mobile-open{
    left:0;right:0;top:calc(100% + 10px);padding:12px 14px 16px;gap:6px;border-radius:28px;
    border:1px solid var(--nv-edge);
    background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.12));
    -webkit-backdrop-filter:blur(24px) saturate(190%) brightness(1.04);backdrop-filter:blur(24px) saturate(190%) brightness(1.04);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 26px rgba(255,255,255,.08),0 22px 60px var(--nv-shadow);
  }
  .nav-links.mobile-open>a,.nav-links.mobile-open .nav-dropdown summary{
    min-height:56px;padding:12px 16px;gap:18px;border-radius:16px;justify-content:flex-start;font-size:17px;font-weight:500;color:var(--nv-fg);
  }
  .nav-links.mobile-open>a::after{content:none;}
  .nav-links.mobile-open .nav-dropdown summary::after{margin-left:auto;margin-right:6px;}
  .nav-links.mobile-open>a.active,.nav-links.mobile-open .nav-dropdown.active>summary{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.14));border-color:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
  .nav-links.mobile-open [data-ic]::before,
  .nav-links.mobile-open .nav-dropdown.active>summary[data-ic]::before{
    content:"";display:block!important;position:static;flex:none;width:26px;height:26px;left:auto;right:auto;bottom:auto;
    background:currentColor;box-shadow:none;border-radius:0;opacity:.92;
    -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;
  }
  .nav-links.mobile-open [data-ic="home"]{--ic:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v10h4.5v-6h4v6h4.5V10'/%3E%3C/svg%3E");}
  .nav-links.mobile-open [data-ic="book"]{--ic:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6.5C10 5 7 4.5 3.5 5v13c3.5-.5 6.5 0 8.5 1.5 2-1.5 5-2 8.5-1.5V5C17 4.5 14 5 12 6.5z'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/svg%3E");}
  .nav-links.mobile-open [data-ic="users"]{--ic:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5.5 20v-1.5A4.5 4.5 0 0 1 10 14h4a4.5 4.5 0 0 1 4.5 4.5V20'/%3E%3Ccircle cx='5' cy='9.5' r='2'/%3E%3Ccircle cx='19' cy='9.5' r='2'/%3E%3C/svg%3E");}
  .nav-links.mobile-open [data-ic="star"]{--ic:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.9L12 17l-5.2 2.7 1-5.9L3.5 9.7l5.9-.8z'/%3E%3C/svg%3E");}
  .nav-links.mobile-open [data-ic="chat"]{--ic:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4.5h14a1.5 1.5 0 0 1 1.5 1.5v9A1.5 1.5 0 0 1 19 16.5h-7L8 20v-3.5H5A1.5 1.5 0 0 1 3.5 15V6A1.5 1.5 0 0 1 5 4.5z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E");}
  .nav-links.mobile-open .nav-submenu{margin-left:34px;}
  .nav-links.mobile-open .nav-submenu a{color:var(--nv-fg2);}
  .nav-links.mobile-open .mobile-nav-footer{margin:8px 4px 0;padding:14px 0 0;border-top:1px solid var(--nv-edge);}
  .nav-links.mobile-open .mobile-nav-footer a{display:flex;width:100%;min-height:50px;margin:0;color:#fff;font-weight:700;}
  .nav-links.mobile-open .mobile-nav-footer a span{opacity:.85;}
  /* ----- Opened phone menu: one light, rounded card that holds the logo, a round close button and the links ----- */
  @media(max-width:1100px){
    .mobile-nav-backdrop{background:rgba(38,26,92,.36);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);}
    body.mobile-nav-active .site-header-wrap > header{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
    body.mobile-nav-active .site-header-wrap > header::before,body.mobile-nav-active .site-header-wrap > header::after{opacity:0!important;}
    body.mobile-nav-active .logo{position:relative;z-index:130;color:#1a1240;}
    body.mobile-nav-active .nav-right{position:relative;z-index:130;}
    body.mobile-nav-active .nav-toggle{translate:-8px 2px;border-radius:50%;background:#fff;border:1px solid #e6e0f7;box-shadow:0 6px 16px rgba(60,40,140,.14);}
    body.mobile-nav-active .nav-toggle span{background:#1a1240;}
    .nav-links.mobile-open{
      top:-1px;left:-1px;right:-1px;gap:4px;padding:86px 18px 118px;border-radius:38px;max-height:calc(100dvh - 24px);
      border:1.5px solid rgba(255,255,255,.95);
      background:radial-gradient(ellipse at 92% 0%,#efe7ff,transparent 52%),linear-gradient(180deg,#ffffff,#f5f0fe 58%,#ebe1fd);
      -webkit-backdrop-filter:none;backdrop-filter:none;
      box-shadow:0 30px 80px rgba(20,10,70,.45),inset 0 1px 0 #fff;
    }
    .nav-links.mobile-open::after{content:"";position:absolute;left:0;right:0;bottom:0;height:104px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 38C70 70 150 96 235 82 300 70 350 40 400 18V100H0Z' fill='%23d9c8fb' fill-opacity='.55'/%3E%3Cpath d='M0 78C90 56 170 70 250 88 310 100 360 84 400 60V100H0Z' fill='%23c7b0f7' fill-opacity='.5'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;pointer-events:none;border-radius:0 0 38px 38px;}
    .nav-links.mobile-open>a,.nav-links.mobile-open .nav-dropdown summary{min-height:60px;padding:14px 18px;gap:22px;border-radius:22px;background:none;border-color:transparent;box-shadow:none;color:#1a1240;font-size:clamp(18px,5vw,21px);font-weight:600;}
    .nav-links.mobile-open [data-ic]::before{width:28px;height:28px;opacity:1;}
    .nav-links.mobile-open>a.active,.nav-links.mobile-open .nav-dropdown.active>summary{background:linear-gradient(90deg,#dccffb,#ece2fe);border-color:transparent;box-shadow:none;}
    .nav-links.mobile-open .nav-submenu{border-left-color:rgba(110,80,220,.28);}
    .nav-links.mobile-open .nav-submenu a{color:#3a2f78;}
    .nav-links.mobile-open .nav-dropdown summary::after{border-color:#1a1240;}
    .nav-links.mobile-open .mobile-nav-footer{margin:14px 8px 0;padding:24px 0 0;border-top:1px solid rgba(110,90,200,.22);}
    .nav-links.mobile-open .mobile-nav-footer .mobile-nav-login{min-height:62px;justify-content:center;gap:14px;border-radius:999px;font-size:clamp(18px,5vw,21px);font-weight:700;}
    .nav-links.mobile-open .mobile-nav-footer .mobile-nav-login::before{content:"";flex:none;width:28px;height:28px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 9.2 12 4l10.5 5.2L12 14.4z' fill='%23000'/%3E%3Cpath d='M6 12.6v4.4c0 1.6 2.7 3 6 3s6-1.4 6-3v-4.4L12 16z' fill='%23000'/%3E%3Cpath d='M22 10v5' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 9.2 12 4l10.5 5.2L12 14.4z' fill='%23000'/%3E%3Cpath d='M6 12.6v4.4c0 1.6 2.7 3 6 3s6-1.4 6-3v-4.4L12 16z' fill='%23000'/%3E%3Cpath d='M22 10v5' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;}
  }

  /* The top announcement bar is hidden for now (markup kept); delete this rule to bring it back. */
  .announcement-bar{display:none !important;}
  /* Sections land flush at the top of the screen. The wave that joins Testimonials and FAQ to the section above is kept,
     but it now sits just above the section's top edge (over the bottom of the previous section), so while the section is
     on screen none of the previous section's colour shows behind the header; the wave only appears while scrolling between them. */
  .tt,.fq{overflow:visible;clip-path:inset(-90px 0 0 0);}
  .tt-wave{position:absolute;left:0;right:0;top:calc(var(--tt-wave) * -1);margin:0;}
  .fq-wave{display:none;}
  .tt-main,.fq-main,.ct-main{padding-top:var(--header-h,76px);}
  /* Keep the strip covered by the next section's wave free of content. */
  .tt{padding-bottom:0;}

  /* ===== ONE SCREEN PER SECTION (everything except the hero) =====
     Each section is exactly one screen tall, starts under the fixed header, and is scaled down by the script if its
     content is taller than that, so the scrolling moves cleanly from one section to the next. */
  /* Wall of Fame: one full screen that starts under the header, like every other section. */
  .wof{min-height:100vh;min-height:100svh;min-height:100lvh;padding:calc(var(--header-h,76px) + 16px) 0 calc(clamp(34px,5vw,70px) + 10px);scroll-margin-top:0;}
  /* Courses starts at the very top of the screen (under the header) so the hero's closing wave never shows above it. */
  .courses{scroll-margin-top:0;padding-top:calc(var(--header-h,76px) + 14px);}
  .tj{
    /* the closing wave (66px) sits just below the fold so the next section never peeks in */
    min-height:calc(100vh + 66px);min-height:calc(100svh + 66px);min-height:calc(100lvh + 66px);display:flex;flex-direction:column;justify-content:center;
    scroll-margin-top:0;
  }
  .tj{padding:calc(var(--header-h,76px) + 14px) 0 94px;}
  /* The journey is one static screen (no scroll-driven pin). When it first comes into view it plays its milestones once on its own. */


  @media(max-width:900px){
    /* About on phones: one screen, starting under the header, with its wave below the fold; the photo shrinks and the credential list (it repeats the photo badges) goes. */
    .educator{--ed-wave-h:clamp(110px,15vw,210px);min-height:calc(100vh + var(--ed-wave-h));min-height:calc(100svh + var(--ed-wave-h));min-height:calc(100lvh + var(--ed-wave-h));display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h,76px) + 8px) 0 calc(var(--ed-wave-h) + 14px);scroll-margin-top:0;}
    .educator .ed-grid{width:100%;}
    .ed-creds{display:none;}
    .ed-stage{max-width:min(78vw,340px);container-type:inline-size;}
    /* Everything on the photo scales with the photo itself, so the badges never swallow the face on narrow screens. */
    .ed-badge{font-size:clamp(8px,3.5cqi,15px);padding:.55em .85em .55em .7em;gap:.5em;border-radius:1.2em;}
    .ed-sign{font-size:clamp(18px,8.4cqi,42px);}
    .ed-pioneer{font-size:clamp(10px,4.3cqi,24px);}
    .ed-body h2{margin:6px 0 8px;font-size:clamp(26px,7.4vw,34px);}
    .ed-intro{font-size:13.5px;line-height:1.5;margin-bottom:14px;}
    .ed-ctas{margin-bottom:14px;}
    .ed-card{display:none;}   /* the quote card is the one extra: dropping it keeps the rest readable on one phone screen */
  }