/* =========================================================
   Premier Lingua Academy — Theme CSS v1.0.0
   Palette: Navy #0A1B3D, Gold #B8862D, Burgundy #7A1F2B
   Type: Fraunces (display) + Work Sans (body)
   ========================================================= */

:root{
  --navy:        #0A1B3D;
  --navy-2:      #132A5A;
  --gold:        #B8862D;
  --gold-deep:   #8F6520;
  --gold-soft:   #FDF6E7;
  --burgundy:    #7A1F2B;
  --burgundy-soft: #F9ECEE;
  --paper:       #FBF9F5;
  --paper-2:     #F2EFE9;
  --ink:         #1B1B18;
  --ink-soft:    #5A5A55;
  --french:      #2C5697;
  --french-soft: #E7ECF5;
  --german:      #A13E2E;
  --german-soft: #F4E6E1;
  --teal:        #1E6B62;
  --teal-soft:   #E2EFEC;
  --line:        rgba(10,27,61,.12);
  --radius:      18px;
  --radius-sm:   10px;
  --shadow:      0 16px 40px rgba(10,27,61,.10);
}

/* ... paste ALL the CSS from <style> tags in your HTML file here ... */

 
    /* =========================================================
      Premier Lingua Academy — v3 (Logo Palette)
      Palette: Navy #0A1B3D, Gold #B8862D, Burgundy #7A1F2B
      Type: Fraunces (display) + Work Sans (body)
      ========================================================= */

    

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }

    body{
      font-family:"Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
      color:var(--ink);
      background:var(--paper);
      line-height:1.6;
    }

    h1,h2,h3,h4,.display-serif{
      font-family:"Fraunces", Georgia, serif;
      font-weight:600;
      color:var(--navy);
      letter-spacing:-0.01em;
    }
    h1{ font-weight:560; }

    a{ color:var(--navy); text-decoration:none; }
    a:hover{ color:var(--gold-deep); }

    .text-teal{ color:var(--teal); }
    .text-gold{ color:var(--gold-deep); }
    .bg-navy{ background:var(--navy); }
    .bg-paper-2{ background:var(--paper-2); }

    /* ---------- Buttons ---------- */
    .btn{ border-radius:50px; font-weight:600; padding:.72rem 1.7rem; }
    .btn-gold{ background:var(--gold); border:1px solid var(--gold); color:white; }
    .btn-gold:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }
    .btn-outline-cream{ border:1px solid rgba(247,245,238,.55); color:var(--paper); }
    .btn-outline-cream:hover{ background:rgba(247,245,238,.12); color:#fff; border-color:#fff; }
    .btn-outline-navy{ border:1px solid var(--navy); color:var(--navy); }
    .btn-outline-navy:hover{ background:var(--navy); color:#fff; }
    .btn-whatsapp{ background:#22885a; border-color:#22885a; color:#fff; border-radius:50px; }
    .btn-whatsapp:hover{ background:#1c7049; border-color:#1c7049; color:#fff; }
    .btn-sm-pill{ border-radius:50px; padding:.4rem 1.1rem; font-size:.85rem; font-weight:600; }

    /* ---------- Navbar ---------- */
    .pla-nav{ background:#fff; padding:.9rem 0; border-bottom:1px solid var(--line); }
    .pla-nav .navbar-brand{
      font-family:"Fraunces", serif; font-weight:600; font-size:1.28rem; color:var(--navy);
      display:flex; align-items:center; gap:.5rem;
    }
    .pla-nav .nav-link{ color:var(--ink); font-weight:500; font-size:.95rem; padding:.5rem .85rem !important; }
    .pla-nav .nav-link.active, .pla-nav .nav-link:hover{ color:var(--gold-deep); }
    .pla-nav .nav-cta{ display:flex; align-items:center; gap:.6rem; }
    .pla-nav .btn-loginlink{ font-weight:600; font-size:.9rem; color:var(--navy); }

    /* =========================================================
       HERO — Primmer-inspired
       ========================================================= */
    .pla-hero{
      background:
        radial-gradient(circle at 82% 12%, rgba(184,134,45,.12), transparent 42%),
        radial-gradient(circle at 8% 88%, rgba(10,27,61,.08), transparent 40%),
        var(--paper);
      padding:2.25rem 0 0;
      position:relative;
      overflow:hidden;
    }
    .pla-hero::after{
      content:"";
      position:absolute; top:0; right:0; width:260px; height:260px;
      background-image:radial-gradient(rgba(10,27,61,.12) 1.5px, transparent 1.5px);
      background-size:16px 16px;
      -webkit-mask-image:radial-gradient(circle at top right, #000, transparent 72%);
              mask-image:radial-gradient(circle at top right, #000, transparent 72%);
      z-index:0; pointer-events:none;
    }
    .pla-hero .container{ position:relative; z-index:1; }

    /* — enrollment ticker — */
    .enrol-ticker{
      display:inline-flex; align-items:center; gap:.6rem;
      background:#fff; border:1px solid var(--line); border-radius:50px;
      padding:.42rem 1rem .42rem .42rem; box-shadow:0 6px 18px rgba(10,27,61,.06);
      font-size:.82rem; color:var(--ink-soft); margin-bottom:1.5rem;
    }
    .enrol-ticker .dot{
      width:8px; height:8px; border-radius:50%; background:#2f9e64; flex:0 0 auto;
      box-shadow:0 0 0 0 rgba(47,158,100,.55); animation:pulse 2s infinite;
    }
    @keyframes pulse{
      0%{ box-shadow:0 0 0 0 rgba(47,158,100,.5); }
      70%{ box-shadow:0 0 0 9px rgba(47,158,100,0); }
      100%{ box-shadow:0 0 0 0 rgba(47,158,100,0); }
    }
    .enrol-ticker strong{ color:var(--navy); font-weight:600; }
    .enrol-ticker .sep{ color:var(--line); }
    .enrol-ticker .ago{ color:var(--ink-soft); opacity:.75; font-size:.78rem; }

    /* — established badge — */
    .established-badge{
      display:inline-flex; align-items:center; gap:.5rem;
      background:var(--gold-soft); color:var(--gold-deep);
      border-radius:50px; padding:.38rem 1rem;
      font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
      margin-bottom:1.1rem;
    }
    .established-badge::before{
      content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-deep);
    }

    /* — headline block — */
    .pla-hero h1{
      font-size:clamp(2.35rem, 5.1vw, 4rem);
      line-height:1.06;
      font-weight:560;
      margin-bottom:1.1rem;
    }
    .pla-hero h1 .grad{
      background:linear-gradient(100deg, var(--gold-deep), var(--gold) 55%, #E0BC74);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      font-style:italic; font-weight:600;
    }
    .pla-hero .hero-sub{
      font-size:1.08rem; color:var(--ink-soft); max-width:38rem; margin-bottom:1.6rem;
    }

    /* — inline language chips row — */
    .lang-inline{
      display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
      margin-bottom:1.9rem;
    }
    .lang-inline .label{
      font-size:.82rem; font-weight:700; color:var(--navy);
      letter-spacing:.04em; text-transform:uppercase; margin-right:.35rem;
    }
    .lang-chip{
      display:inline-flex; align-items:center; gap:.35rem;
      background:#fff; border:1px solid var(--line); border-radius:50px;
      padding:.32rem .8rem; font-size:.85rem; font-weight:500; color:var(--ink);
      transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .lang-chip:hover{ transform:translateY(-2px); border-color:var(--gold); box-shadow:0 6px 14px rgba(10,27,61,.07); }
    .lang-chip .flag{ font-size:1rem; line-height:1; }
    .lang-chip.fr{ background:var(--french-soft); border-color:rgba(44,86,151,.18); color:var(--french); }
    .lang-chip.de{ background:var(--german-soft); border-color:rgba(161,62,46,.18); color:var(--german); }

    /* — CTA row — */
    .hero-cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-bottom:.9rem; }
    .hero-microtrust{
      display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem;
      font-size:.82rem; color:var(--ink-soft);
    }
    .hero-microtrust span{ display:inline-flex; align-items:center; gap:.4rem; }
    .hero-microtrust i{ color:var(--gold-deep); font-style:normal; }

    /* — hero visual card — */
    .hero-visual{ position:relative; }
    .hero-visual .frame{
      border-radius:26px; overflow:hidden; box-shadow:var(--shadow);
      border:8px solid #fff; background:#fff;
      transform:rotate(1.1deg);
      transition:transform .35s ease;
    }
    .hero-visual .frame:hover{ transform:rotate(0deg); }
    .hero-visual .frame img{
      width:100%; height:100%; object-fit:cover; display:block;
      min-height:360px; max-height:470px;
    }
    .hero-float-card{
      position:absolute; left:-1rem; bottom:1.5rem;
      background:#fff; border-radius:var(--radius-sm);
      padding:.85rem 1.05rem; box-shadow:var(--shadow);
      display:flex; align-items:center; gap:.65rem; z-index:3;
    }
    .hero-float-card .icon{
      width:38px; height:38px; border-radius:10px; flex:0 0 auto;
      background:var(--gold-soft); color:var(--gold-deep);
      display:flex; align-items:center; justify-content:center; font-size:1.05rem;
    }
    .hero-float-card .txt{ line-height:1.25; }
    .hero-float-card .txt b{ display:block; font-size:.86rem; color:var(--navy); }
    .hero-float-card .txt small{ font-size:.74rem; color:var(--ink-soft); }

    /* — hero stat strip (full-bleed bottom of hero) — */
    .hero-stats{
      margin-top:3rem;
      background:var(--navy);
      border-radius:var(--radius) var(--radius) 0 0;
      padding:1.6rem 1.25rem;
    }
    .hero-stat{ text-align:center; padding:.35rem .5rem; }
    .hero-stat .num{
      font-family:"Fraunces", serif; font-weight:700;
      font-size:clamp(1.5rem, 2.6vw, 2.15rem); color:#fff; line-height:1.1;
    }
    .hero-stat .num em{ color:var(--gold); font-style:normal; }
    .hero-stat .lbl{
      font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
      color:rgba(247,245,238,.66); font-weight:600;
    }
    .hero-stat + .hero-stat{ border-left:1px solid rgba(247,245,238,.14); }

    /* ---------- Sections ---------- */
    section{ padding:4.5rem 0; }
    .eyebrow{ font-weight:600; color:var(--gold-deep); font-size:.85rem; }

    /* ---------- Icon feature strip ---------- */
    .feature-icon-row .feature-item{ text-align:center; padding:0 .5rem; }
    .feature-icon{
      width:64px; height:64px; border-radius:50%;
      background:var(--gold-soft); color:var(--gold-deep);
      display:flex; align-items:center; justify-content:center;
      font-size:1.6rem; margin:0 auto 1rem;
    }
    .feature-item h3{ font-size:1.05rem; }

    /* ---------- Package/level cards ---------- */
    .pkg-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; }
    .pkg-tab{
      border:1px solid var(--line); background:#fff; color:var(--ink);
      border-radius:50px; padding:.5rem 1.2rem; font-weight:600; font-size:.9rem; cursor:pointer;
    }
    .pkg-tab.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

    .level-card{
      background:#fff; border:1px solid var(--line); border-radius:var(--radius);
      padding:1.6rem 1.5rem; height:100%;
      transition:transform .15s ease, box-shadow .15s ease;
    }
    .level-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
    .level-card .level-tag{ font-family:"Fraunces", serif; font-size:1.7rem; font-weight:600; color:var(--navy); }
    .level-card .price{ font-size:1.4rem; font-weight:700; color:var(--navy); }
    .lang-flag-chip{
      display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .7rem;
      border-radius:20px; font-size:.78rem; font-weight:600; margin-bottom:.6rem;
    }
    .lang-flag-chip.fr{ background:var(--french-soft); color:var(--french); }
    .lang-flag-chip.de{ background:var(--german-soft); color:var(--german); }

    /* ---------- CTA strip ---------- */
    .cta-strip{
      background:var(--navy); color:#fff; border-radius:var(--radius);
      padding:3rem 2.5rem; position:relative; overflow:hidden;
    }
 
    .cta-strip h2{ color:#fff; }

    /* ---------- Split image+text ---------- */
    .split-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
    .split-photo img{ width:100%; height:100%; object-fit:cover; display:block; min-height:320px; }

    /* ---------- Testimonial cards ---------- */
    .testimonial-card{
      background:#fff; border:1px solid var(--line); border-radius:var(--radius);
      padding:1.9rem; height:100%;
    }
    .testimonial-card .quote-mark{ font-family:"Fraunces",serif; font-size:2.6rem; color:var(--gold); line-height:.5; }
    .testimonial-avatar{
      width:42px; height:42px; border-radius:50%; background:var(--french-soft); color:var(--french);
      display:flex; align-items:center; justify-content:center; font-weight:700; font-family:"Fraunces",serif;
    }

    /* ---------- Trust strip ---------- */
    .trust-strip{
      background:var(--paper-2); border-radius:var(--radius); padding:2rem;
    }
    .trust-item{ text-align:center; }
    .trust-item .num{ font-family:"Fraunces", serif; font-weight:700; font-size:1.9rem; color:var(--navy); }
    .trust-item .lbl{ font-size:.85rem; color:var(--ink-soft); }

    /* ---------- Opportunity cards ---------- */
    .opportunity-card{ background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); height:100%; }
    .opportunity-card .flag-band{ height:6px; }
    .flag-band.canada{ background:linear-gradient(90deg,#d80621 0 20%, #fff 20% 80%, #d80621 80%); }
    .flag-band.germany{ background:linear-gradient(90deg,#000 0 33%, #DD0000 33% 66%, #FFCC00 66%); }
    .flag-band.france{ background:linear-gradient(90deg,#2C5697 0 33%, #fff 33% 66%, #A13E2E 66%); }

    /* ---------- Steps ---------- */
    .step-num{ font-family:"Fraunces", serif; font-size:2.1rem; color:var(--gold); font-weight:600; line-height:1; }

    /* ---------- Resource cards ---------- */
    .resource-card{
      background:#fff; border:1px solid var(--line); border-radius:var(--radius);
      padding:1.5rem; height:100%; display:flex; flex-direction:column; overflow:hidden;
    }
    .resource-card .resource-thumb{ margin:-1.5rem -1.5rem 1rem; height:150px; overflow:hidden; }
    .resource-card .resource-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .resource-card .tag{ font-size:.75rem; font-weight:700; color:var(--teal); }

    /* ---------- Closing CTA band ---------- */
    .cta-band{ 
       background:var(--navy); color:#fff; border-radius:var(--radius);
     
    
    }
    .cta-band h2{ color:var(--navy); }

    /* ---------- Footer ---------- */
    footer.pla-footer{ background:var(--navy); color:rgba(247,245,238,.7); padding:3.5rem 0 1.5rem; }
    footer.pla-footer h6{ color:#fff; font-weight:600; margin-bottom:1rem; }
    footer.pla-footer a{ color:rgba(247,245,238,.68); }
    footer.pla-footer a:hover{ color:var(--gold); }
    footer.pla-footer hr{ border-color:rgba(247,245,238,.15); margin:2rem 0 1.25rem; }

    /* ---------- WhatsApp float ---------- */
    .whatsapp-float{
      position:fixed; right:22px; bottom:22px; z-index:1040; width:58px; height:58px; border-radius:50%;
      background:#22885a; color:#fff; display:flex; align-items:center; justify-content:center;
      box-shadow:0 8px 22px rgba(0,0,0,.25); font-size:1.6rem;
    }
    .whatsapp-float:hover{ color:#fff; background:#1c7049; }

    /* ---------- Responsive ---------- */
    @media (max-width: 991.98px){
      .hero-visual{ margin-top:2.5rem; }
      .hero-float-card{ left:0; }
    }
    @media (max-width: 767.98px){
      .pla-hero{ padding-top:1.6rem; }
      .pla-hero h1{ font-size:clamp(2rem, 8vw, 2.6rem); }
      section{ padding:3.2rem 0; }
      .hero-visual .frame{ transform:none; }
      .hero-stat + .hero-stat{ border-left:0; }
      .hero-stats{ padding:1.25rem .5rem; }
      .hero-stat{ padding:.5rem 0; }
    }

 

  /* ---------- Section shell ---------- */
  .why-learn-section{
    background:var(--paper);
    padding:5rem 0;
    position:relative;
  }

  /* ---------- Left: Copy ---------- */
  .why-copy-wrap{
    max-width:520px;
  }

  .why-title{
    font-family:"Fraunces", Georgia, serif;
    font-weight:700;
    font-size:clamp(2.2rem, 4vw, 3.2rem);
    line-height:1.08;
    color:var(--navy);
    letter-spacing:-0.02em;
    margin-bottom:1.2rem;
  }
  .brand-highlight{
    color:var(--burgundy);  /* burgundy from the logo accent */
  }

  .why-lead{
    font-family:"Work Sans", sans-serif;
    font-size:1.08rem;
    line-height:1.65;
    color:var(--ink-soft);
    margin-bottom:2.5rem;
  }

  /* ---------- Feature list ---------- */
  .why-feature-list{
    display:flex;
    flex-direction:column;
    gap:1.4rem;
  }

  .why-feature-item{
    display:flex;
    align-items:flex-start;
    gap:1.1rem;
  }

  .why-feature-icon{
    flex:0 0 auto;
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
  }
  .why-feature-icon svg{
    width:24px;
    height:24px;
  }

  /* Icon colour variants — using logo palette */
  .icon-purple{ background:linear-gradient(135deg, var(--navy-2), var(--navy)); }
  .icon-orange{ background:linear-gradient(135deg, var(--gold), var(--gold-deep)); }
  .icon-blue  { background:linear-gradient(135deg, var(--french), #1D4ED8); }
  .icon-teal  { background:linear-gradient(135deg, var(--teal), #0F766E); }

  .why-feature-body{ flex:1; }

  .why-feature-title{
    font-family:"Work Sans", sans-serif;
    font-weight:700;
    font-size:1.08rem;
    color:var(--navy);
    margin:0 0 .3rem;
    line-height:1.3;
  }

  .why-feature-desc{
    font-size:.98rem;
    color:var(--ink-soft);
    line-height:1.55;
    margin:0;
  }

  /* ---------- Right: Visual collage ---------- */
  .why-visual-wrap{
    position:relative;
    min-height:580px;
    padding-left:2rem;
  }

  .why-img{
    position:absolute;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 14px 34px rgba(10,27,61,.14);
    border:5px solid #fff;
  }
  .why-img img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }

  /* Top image — widest, sits top-right */
  .why-img-top{
    top:0;
    right:0;
    width:78%;
    height:220px;
  }

  /* Middle image — sits left, below top */
  .why-img-middle{
    top:240px;
    left:0;
    width:68%;
    height:230px;
    z-index:2;
  }

  /* Bottom image — sits right, below middle */
  .why-img-bottom{
    top:400px;
    right:0;
    width:60%;
    height:190px;
    z-index:3;
  }

  /* ---------- Floating enrollment notification ---------- */
  .enrol-notification{
    position:absolute;
    top:255px;
    left:-1rem;
    z-index:10;
    background:#fff;
    border-radius:14px;
    padding:.85rem 1.1rem .85rem .85rem;
    box-shadow:0 16px 40px rgba(10,27,61,.18);
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    max-width:290px;
    animation:floatY 4s ease-in-out infinite;
  }
  .enrol-check{
    flex:0 0 auto;
    width:34px; height:34px;
    border-radius:50%;
    background:#DCFCE7;
    color:#16A34A;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .enrol-check svg{ width:16px; height:16px; }

  .enrol-text{
    font-size:.82rem;
    line-height:1.4;
    color:var(--ink);
    margin:0 0 .2rem;
  }
  .enrol-text strong{ color:var(--navy); font-weight:700; }
  .enrol-course{ color:var(--burgundy); font-weight:700; } /* burgundy accent */

  .enrol-time{
    font-size:.72rem;
    color:#9CA3AF;
    margin:0;
  }

  /* ---------- Floating Certified Institute badge ---------- */
  .certified-badge{
    position:absolute;
    bottom:1rem;
    left:3rem;
    z-index:12;
    background:#fff;
    border-radius:14px;
    padding:.95rem 1.35rem;
    box-shadow:0 16px 40px rgba(10,27,61,.18);
    display:flex;
    align-items:center;
    gap:.85rem;
    animation:floatY 5s ease-in-out infinite;
    animation-delay:.5s;
  }
  .certified-check{
    flex:0 0 auto;
    width:38px; height:38px;
    border-radius:50%;
    background:#DCFCE7;
    color:#16A34A;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .certified-check svg{ width:18px; height:18px; }

  .certified-title{
    font-family:"Work Sans", sans-serif;
    font-weight:700;
    font-size:.95rem;
    color:var(--navy);
    margin:0;
    line-height:1.3;
  }
  .certified-sub{
    font-size:.82rem;
    color:var(--ink-soft);
    margin:0;
    line-height:1.3;
  }

  /* ---------- Gentle float animation ---------- */
  @keyframes floatY{
    0%, 100% { transform:translateY(0); }
    50%      { transform:translateY(-8px); }
  }

  /* ---------- Responsive ---------- */
  @media (max-width:991.98px){
    .why-learn-section{ padding:3.5rem 0; }
    .why-copy-wrap{ max-width:100%; }
    .why-visual-wrap{
      min-height:520px;
      padding-left:0;
      margin-top:2rem;
    }
    .why-img-top{ width:80%; height:200px; }
    .why-img-middle{ width:70%; height:210px; top:220px; }
    .why-img-bottom{ width:62%; height:170px; top:360px; }
    .enrol-notification{ top:235px; left:0; max-width:260px; }
    .certified-badge{ bottom:.5rem; left:1rem; }
  }

  @media (max-width:575.98px){
    .why-title{ font-size:2rem; }
    .why-lead{ font-size:1rem; }
    .why-feature-icon{ width:44px; height:44px; border-radius:12px; }
    .why-feature-icon svg{ width:20px; height:20px; }
    .why-feature-title{ font-size:1rem; }
    .why-feature-desc{ font-size:.9rem; }

    .why-visual-wrap{ min-height:420px; }
    .why-img-top{ width:88%; height:160px; }
    .why-img-middle{ width:78%; height:170px; top:175px; }
    .why-img-bottom{ width:70%; height:140px; top:290px; }
    .enrol-notification{ top:190px; left:0; max-width:230px; padding:.7rem .9rem; }
    .enrol-text{ font-size:.75rem; }
    .certified-badge{ bottom:.25rem; left:.5rem; padding:.75rem 1rem; }
    .certified-title{ font-size:.85rem; }
    .certified-sub{ font-size:.75rem; }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .enrol-notification,
    .certified-badge{
      animation:none;
    }
  }



 

  /* ---------- Section shell ---------- */
  .feature-strip-red {
    background:var(--burgundy);              /* burgundy from logo */
    padding: 2.6rem 0;
    color: #fff;
  }

  /* ---------- Row alignment ---------- */
  .feature-strip-row{
    align-items:center;
  }

  /* ---------- Each item ---------- */
  .feature-strip-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:.5rem 1rem;
    height:100%;
  }

  /* ---------- Icon ---------- */
  .feature-strip-icon{
    flex:0 0 auto;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
  }
  .feature-strip-icon svg{
    width:100%;
    height:100%;
    display:block;
  }

  /* ---------- Text ---------- */
  .feature-strip-text{
    font-family:"Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:700;
    font-size:1.02rem;
    line-height:1.3;
    letter-spacing:.005em;
    color:#fff;
    text-align:left;
  }

  /* ---------- Divider lines between items on desktop ---------- */
  @media (min-width:992px){
    .feature-strip-row > [class*="col-"] + [class*="col-"] .feature-strip-item{
      border-left:1px solid rgba(255,255,255,.22);
    }
  }

  /* ---------- Responsive ---------- */
  @media (max-width:991.98px){
    .feature-strip-red{ padding:2rem 0; }
    .feature-strip-item{
      justify-content:flex-start;
      padding:.85rem .5rem;
    }
    .feature-strip-icon{ width:42px; height:42px; }
    .feature-strip-text{ font-size:.95rem; }
  }

  @media (max-width:575.98px){
    .feature-strip-red{ padding:1.6rem 0; }
    .feature-strip-item{
      gap:.7rem;
      padding:.7rem .25rem;
    }
    .feature-strip-icon{ width:34px; height:34px; }
    .feature-strip-text{ font-size:.85rem; }
  }



 

  /* ---------- Section shell ---------- */
  .pkg-showcase{
    background:var(--paper);
    padding:4.5rem 0;
  }

  /* ---------- Heading + underline ---------- */
  .pkg-title{
    font-family:"Fraunces", Georgia, serif;
    font-weight:700;
    font-size:clamp(1.9rem, 3.4vw, 2.6rem);
    color:var(--navy);
    letter-spacing:-0.015em;
    position:relative;
    display:inline-block;
    padding-bottom:.55rem;
  }
  .title-underline{
    display:block;
    width:78px;
    height:5px;
    border-radius:6px;
    background:linear-gradient(90deg, var(--gold), #E0BC74);
    margin-top:.15rem;
  }

  /* ---------- Filter dropdown (right) ---------- */
  .pkg-filter-wrap{ position:relative; }
  .pkg-filter-btn{
    display:inline-flex; align-items:center; gap:.25rem;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:.55rem 1.1rem; font-weight:600; font-size:.9rem; color:var(--navy);
    box-shadow:0 4px 14px rgba(10,27,61,.05);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .pkg-filter-btn:hover{ border-color:var(--gold); box-shadow:0 6px 18px rgba(10,27,61,.08); }
  .pkg-filter-btn i{ font-size:.75rem; color:var(--ink-soft); transition:transform .2s ease; }
  .pkg-filter-wrap.open .pkg-filter-btn i{ transform:rotate(180deg); }

  .pkg-filter-menu{
    position:absolute; right:0; top:calc(100% + .4rem);
    min-width:160px; margin:0; padding:.4rem;
    list-style:none;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
    box-shadow:var(--shadow);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:30;
  }
  .pkg-filter-wrap.open .pkg-filter-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  .pkg-filter-menu a{
    display:block; padding:.5rem .8rem; border-radius:8px;
    font-size:.88rem; font-weight:500; color:var(--ink);
  }
  .pkg-filter-menu a:hover{ background:var(--gold-soft); color:var(--gold-deep); }
  .pkg-filter-menu a.active{ background:var(--navy); color:#fff; }

  /* ---------- Card ---------- */
  .pkg-card{
    background:transparent;
    height:100%;
    display:flex;
    flex-direction:column;
  }

  /* Image */
  .pkg-card-media{
    display:block;
    border-radius:14px;
    overflow:hidden;
    background:var(--paper-2);
    aspect-ratio:16 / 10;
  }
  .pkg-card-media img{
    width:100%; height:100%;
    object-fit:cover; display:block;
    transition:transform .45s ease;
  }
  .pkg-card:hover .pkg-card-media img{ transform:scale(1.05); }

  /* Body */
  .pkg-card-body{
    padding:1.05rem 0 0;
    display:flex;
    flex-direction:column;
    gap:.35rem;
  }

  /* Level badge */
  .pkg-level-badge{
    align-self:flex-start;
    font-size:.78rem;
    font-weight:600;
    padding:.24rem .7rem;
    border-radius:6px;
    line-height:1.3;
  }
  .level-beginner{
    background:#EAECFB;
    color:#4A56C4;
  }
  .level-intermediate{
    background:#E3F3E9;
    color:#2F7D4E;
  }

  /* Title */
  .pkg-card-title{
    font-family:"Work Sans", sans-serif;
    font-weight:700;
    font-size:1.05rem;
    line-height:1.3;
    color:var(--navy);
    margin:.15rem 0 0;
  }
  .pkg-card-title a{ color:inherit; }
  .pkg-card-title a:hover{ color:var(--gold-deep); }

  /* Tutor */
  .pkg-card-tutor{
    font-size:.92rem;
    color:var(--burgundy);      /* burgundy from logo */
    font-weight:500;
    margin:0;
  }

  /* Price */
  .pkg-card-price{
    font-family:"Fraunces", serif;
    font-weight:700;
    font-size:1.22rem;
    color:var(--navy);
    margin:.35rem 0 0;
    letter-spacing:-0.01em;
  }

  /* ---------- Responsive ---------- */
  @media (max-width:767.98px){
    .pkg-showcase{ padding:3.2rem 0; }
    .pkg-card-media{ aspect-ratio:16 / 11; }
    .pkg-filter-wrap{ align-self:flex-start; }
  }


 
  /* ---------- Section shell ---------- */
  .proof-success{
    background:var(--paper);
    padding:5rem 0;
    overflow:hidden;
  }

  /* ---------- Left copy column ---------- */
  .proof-success-copy{
    padding:1rem 3.5rem 1rem 4.5rem;
  }
  .proof-copy-inner{ max-width:420px; }

  .proof-title{
    font-family:"Fraunces", Georgia, serif;
    font-weight:700;
    font-size:clamp(2.2rem, 4vw, 3.2rem);
    line-height:1.05;
    color:var(--navy);
    letter-spacing:-0.02em;
  }
  .title-underline{
    display:block;
    width:78px;
    height:5px;
    border-radius:6px;
    background:linear-gradient(90deg, var(--gold), #E0BC74);
    margin:.9rem 0 1.6rem;
  }

  .proof-lead{
    font-family:"Work Sans", sans-serif;
    font-size:1.05rem;
    line-height:1.65;
    color:var(--ink-soft);
    margin-bottom:2rem;
  }

  /* "View All" button — big soft grey block from the reference */
  .btn-proof-viewall{
    display:inline-block;
    background:#E9E8E3;
    color:var(--navy);
    font-family:"Work Sans", sans-serif;
    font-weight:600;
    font-size:1.05rem;
    padding:1.1rem 2.6rem;
    border-radius:14px;
    border:none;
    transition:background .18s ease, transform .18s ease;
  }
  .btn-proof-viewall:hover{
    background:var(--gold);
    color:var(--navy);
    transform:translateY(-2px);
  }

  /* ---------- Right gallery column ---------- */
  .proof-success-gallery{
    position:relative;
    padding:1rem 0;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }

  .proof-gallery-track{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    width:max-content;
  }

  /* Each row is a marquee band */
  .proof-gallery-row{
    display:flex;
    gap:1.25rem;
    will-change:transform;
  }

  /* Row 1 drifts left */
  .proof-gallery-row.row-top{
    animation:proofScrollLeft 55s linear infinite;
  }
  /* Row 2 drifts right */
  .proof-gallery-row.row-bottom{
    animation:proofScrollRight 60s linear infinite;
  }
  .proof-gallery-track:hover .proof-gallery-row{
    animation-play-state:paused;
  }

  @keyframes proofScrollLeft{
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
  }
  @keyframes proofScrollRight{
    0%   { transform:translateX(-50%); }
    100% { transform:translateX(0); }
  }

  /* ---------- Individual phone screenshot ---------- */
  .proof-shot{
    flex:0 0 auto;
    width:190px;
    aspect-ratio:9 / 17;          /* phone-like proportions */
    margin:0;
    border-radius:16px;
    overflow:hidden;
    background:#0E1420;            /* dark chat backdrop */
    box-shadow:0 10px 26px rgba(10,27,61,.14);
    border:1px solid rgba(10,27,61,.10);
  }
  .proof-shot img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }

  /* ---------- Responsive ---------- */
  @media (max-width:1199.98px){
    .proof-success-copy{ padding:1rem 2.5rem 1rem 3rem; }
    .proof-shot{ width:165px; }
  }
  @media (max-width:991.98px){
    .proof-success{ padding:3.5rem 0; }
    .proof-success-copy{ padding:1rem 2rem 2.5rem; }
    .proof-copy-inner{ max-width:100%; }
    .proof-success-gallery{
      -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
              mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }
    .proof-shot{ width:155px; }
  }
  @media (max-width:575.98px){
    .proof-shot{ width:135px; border-radius:12px; }
    .proof-gallery-row{ gap:.9rem; }
    .proof-gallery-track{ gap:.9rem; }
  }

  /* Respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce){
    .proof-gallery-row.row-top,
    .proof-gallery-row.row-bottom{
      animation:none;
    }
  }


 

  /* ---------- Scroll reveal base ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-left {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
  }
  .reveal-right {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
  }
  .reveal-scale {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
  }

  /* Stagger delays */
  .reveal-d1 { transition-delay: 0.08s; }
  .reveal-d2 { transition-delay: 0.16s; }
  .reveal-d3 { transition-delay: 0.24s; }
  .reveal-d4 { transition-delay: 0.32s; }
  .reveal-d5 { transition-delay: 0.40s; }
  .reveal-d6 { transition-delay: 0.48s; }

  /* ---------- Enhanced card hover ---------- */
  .pkg-card,
  .opportunity-card,
  .resource-card,
  .level-card,
  .testimonial-card {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pkg-card:hover {
    transform: translateY(-6px);
  }
  .opportunity-card:hover,
  .resource-card:hover,
  .level-card:hover,
  .testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(10, 27, 61, 0.12);
  }

  /* ---------- Feature strip item hover ---------- */
  .feature-strip-item {
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .feature-strip-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
  }

  /* ---------- Why feature item hover ---------- */
  .why-feature-item {
    transition: transform 0.25s ease;
  }
  .why-feature-item:hover {
    transform: translateX(6px);
  }

  /* ---------- Step card hover ---------- */
  .step-num {
    transition: transform 0.25s ease, color 0.25s ease;
  }
  .step-num:hover {
    transform: scale(1.15);
    color: var(--gold-deep);
  }

  /* ---------- Gradient text shimmer on hero ---------- */
  .pla-hero h1 .grad {
    background-size: 200% auto;
    animation: shimmer 4s linear infinite;
  }
  @keyframes shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
  }

  /* ---------- Floating hero visual gentle bob ---------- */
  .hero-visual .frame {
    animation: heroBob 6s ease-in-out infinite;
  }
  @keyframes heroBob {
    0%, 100% { transform: rotate(1.1deg) translateY(0); }
    50%      { transform: rotate(0.8deg) translateY(-8px); }
  }
  .hero-visual .frame:hover {
    animation: none;
    transform: rotate(0deg) translateY(0);
  }

  /* ---------- Hero float card gentle pulse ---------- */
  .hero-float-card {
    animation: floatY 4.5s ease-in-out infinite;
    animation-delay: 1s;
  }

  /* ---------- WhatsApp button pulse ring ---------- */
  .whatsapp-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(34, 136, 90, 0.45);
    animation: waPulse 2.2s ease-out infinite;
    pointer-events: none;
  }
  @keyframes waPulse {
    0%   { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  /* ---------- Established badge subtle shine ---------- */
  .established-badge {
    position: relative;
    overflow: hidden;
  }
  .established-badge::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg);
    animation: badgeShine 4s ease-in-out infinite;
  }
  @keyframes badgeShine {
    0%, 80%, 100% { left: -80%; }
    40%           { left: 120%; }
  }

  /* ---------- Language chip bounce on hover ---------- */
  .lang-chip:hover {
    animation: chipBounce 0.4s ease;
  }
  @keyframes chipBounce {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-6px) scale(1.05); }
    100% { transform: translateY(-2px) scale(1); }
  }

  /* ---------- Section headings underline grow on scroll ---------- */
  .title-underline {
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .title-underline.is-visible {
    transform: scaleX(1);
  }

  /* ---------- Opportunity flag bands animated ---------- */
  .flag-band {
    background-size: 200% 100% !important;
    animation: flagShift 6s linear infinite;
  }
  @keyframes flagShift {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
  }

  /* ---------- Reduced motion override ---------- */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .hero-visual .frame,
    .hero-float-card,
    .established-badge::after,
    .whatsapp-float::after,
    .flag-band,
    .pla-hero h1 .grad {
      animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .title-underline {
      transform: scaleX(1) !important;
    }
  }



/* =========================================================
   CONTACT PAGE
   ========================================================= */

/* ---------- Hero ---------- */
.contact-hero{
  background:
    radial-gradient(circle at 82% 12%, rgba(184,134,45,.12), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(10,27,61,.08), transparent 40%),
    var(--paper);
  padding:3.5rem 0 4rem;
  position:relative;
  overflow:hidden;
}
.contact-hero::after{
  content:"";
  position:absolute; top:0; right:0; width:260px; height:260px;
  background-image:radial-gradient(rgba(10,27,61,.12) 1.5px, transparent 1.5px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(circle at top right, #000, transparent 72%);
          mask-image:radial-gradient(circle at top right, #000, transparent 72%);
  pointer-events:none;
}
.contact-hero h1{
  font-size:clamp(2.1rem, 4.6vw, 3.4rem);
  line-height:1.08;
  font-weight:560;
  margin-bottom:1.1rem;
}
.contact-hero h1 .grad{
  background:linear-gradient(100deg, var(--gold-deep), var(--gold) 55%, #E0BC74);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic; font-weight:600;
}
.contact-hero .hero-sub{ font-size:1.05rem; color:var(--ink-soft); max-width:38rem; }

/* ---------- Info cards grid ---------- */
.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
}
.contact-info-card{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:1.15rem 1.1rem;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-info-card:not(.static):hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(10,27,61,.10);
  border-color:var(--gold);
}
.contact-info-card.static{ cursor:default; }

.cic-icon{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.cic-icon svg{ width:22px; height:22px; }
.cic-icon.whatsapp{ background:linear-gradient(135deg, #22885a, #1c7049); }
.cic-icon.email   { background:linear-gradient(135deg, var(--gold), var(--gold-deep)); }
.cic-icon.clock   { background:linear-gradient(135deg, var(--navy-2), var(--navy)); }
.cic-icon.location{ background:linear-gradient(135deg, var(--burgundy), #5c1520); }

.cic-body{ display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.cic-label{
  font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.15rem;
}
.cic-value{
  font-weight:600; color:var(--navy); font-size:.95rem;
  word-break:break-word;
}
.cic-hint{ font-size:.76rem; color:var(--ink-soft); margin-top:.15rem; }

@media (max-width:480px){
  .contact-info-grid{ grid-template-columns:1fr; }
}

/* ---------- Form section ---------- */
.contact-form-section{ padding:5rem 0; }

.contact-form-wrap{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.5rem 2.25rem;
  box-shadow:0 12px 34px rgba(10,27,61,.06);
}
@media (max-width:575.98px){
  .contact-form-wrap{ padding:1.75rem 1.25rem; }
}

.pla-contact-form .form-label{
  font-weight:600; color:var(--navy);
  font-size:.9rem; margin-bottom:.35rem;
}
.pla-contact-form .form-label .req{ color:var(--burgundy); }

.pla-contact-form .form-control,
.pla-contact-form .form-select{
  border:1px solid var(--line);
  border-radius:10px;
  padding:.72rem .9rem;
  font-size:.95rem;
  background:#fff;
  color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.pla-contact-form .form-control:focus,
.pla-contact-form .form-select:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,134,45,.15);
  outline:none;
}
.pla-contact-form textarea.form-control{ resize:vertical; min-height:130px; }
.pla-contact-form .form-control::placeholder{ color:#9CA3AF; }

.form-note{
  font-size:.82rem;
  color:var(--ink-soft);
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.form-note svg{ color:var(--teal); }

/* ---------- Alerts ---------- */
.pla-alert{
  border-radius:10px;
  padding:.9rem 1.1rem;
  font-size:.94rem;
  font-weight:500;
  margin-bottom:1.5rem;
  border:1px solid transparent;
}
.pla-alert-success{
  background:#E7F6EE;
  border-color:#B8E1C6;
  color:#1E6B3E;
}
.pla-alert-error{
  background:var(--burgundy-soft);
  border-color:#EBC7CC;
  color:var(--burgundy);
}

/* ---------- Sidebar ---------- */
.contact-sidebar{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  position:sticky;
  top:90px;
}
.sidebar-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:1.5rem 1.4rem;
}
.sidebar-card h3{
  font-family:"Fraunces", serif;
  font-weight:600;
  font-size:1.15rem;
  color:var(--navy);
  margin-bottom:.65rem;
}
.sidebar-card p{
  font-size:.9rem;
  color:var(--ink-soft);
  margin-bottom:1rem;
  line-height:1.55;
}

.sidebar-whatsapp{
  background:linear-gradient(150deg, #1E6B5A, #134a3e);
  border-color:transparent;
  color:#fff;
}
.sidebar-whatsapp h3{ color:#fff; }
.sidebar-whatsapp p{ color:rgba(255,255,255,.82); }
.sidebar-whatsapp .btn-whatsapp{
  background:#fff; color:#1E6B5A; border-color:#fff;
}
.sidebar-whatsapp .btn-whatsapp:hover{
  background:var(--gold-soft); color:#1E6B5A; border-color:var(--gold-soft);
}

/* mini-faq */
.mini-faq details{
  border-top:1px solid var(--line);
  padding:.75rem 0;
}
.mini-faq details:first-child{ border-top:0; padding-top:0; }
.mini-faq details:last-child{ padding-bottom:0; }
.mini-faq summary{
  cursor:pointer;
  font-weight:600;
  font-size:.9rem;
  color:var(--navy);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
}
.mini-faq summary::-webkit-details-marker{ display:none; }
.mini-faq summary::after{
  content:"+";
  font-size:1.1rem;
  font-weight:700;
  color:var(--gold-deep);
  transition:transform .2s ease;
  line-height:1;
}
.mini-faq details[open] summary::after{ content:"–"; }
.mini-faq details p{
  font-size:.85rem;
  color:var(--ink-soft);
  margin:.55rem 0 0;
  line-height:1.55;
}

/* sidebar-cta */
.sidebar-cta{
  background:var(--gold-soft);
  border-color:rgba(184,134,45,.25);
}
.sidebar-cta-eyebrow{
  display:inline-block;
  font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.45rem;
}

/* ---------- Location section ---------- */
.location-detail-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:1.75rem;
}
.location-detail{
  display:flex;
  gap:1rem;
  margin-bottom:1.25rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--line);
}
.location-detail:last-child{ border-bottom:0; padding-bottom:0; }
.ld-icon{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:10px;
  background:var(--gold-soft);
  color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center;
}
.ld-icon svg{ width:18px; height:18px; }
.ld-label{
  display:block;
  font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:.2rem;
}
.ld-value{
  margin:0;
  font-weight:500;
  color:var(--navy);
  font-size:.95rem;
  line-height:1.5;
}
.ld-value a{ color:var(--navy); border-bottom:1px solid rgba(10,27,61,.2); }
.ld-value a:hover{ color:var(--gold-deep); border-color:var(--gold-deep); }

.map-embed{
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid var(--line);
  min-height:420px;
  background:var(--paper-2);
}
.map-embed iframe{ display:block; min-height:420px; }

@media (max-width:991.98px){
  .contact-sidebar{ position:static; }
  .map-embed, .map-embed iframe{ min-height:340px; }
}


/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* ---------- Hero ---------- */
.about-hero{
  background:
    radial-gradient(circle at 82% 12%, rgba(184,134,45,.14), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(122,31,43,.14), transparent 45%),
    var(--navy);
  color:var(--paper);
  padding:5.5rem 0 5rem;
  position:relative;
  overflow:hidden;
}
.about-hero::after{
  content:"";
  position:absolute; top:0; right:0; width:280px; height:280px;
  background-image:radial-gradient(rgba(199,154,68,.22) 1.5px, transparent 1.5px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(circle at top right, #000, transparent 72%);
          mask-image:radial-gradient(circle at top right, #000, transparent 72%);
  pointer-events:none;
}
.about-hero .container{ position:relative; z-index:1; }
.about-hero .eyebrow{
  color:var(--gold);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  font-size:.82rem;
}
.about-hero h1{
  color:#fff;
  font-size:clamp(2rem, 4.2vw, 3rem);
  line-height:1.14;
  font-weight:560;
  margin:0 auto;
  max-width:820px;
}

/* ---------- Story / Intro ---------- */
.about-intro{
  padding:5rem 0 4rem;
}
.about-intro p{
  font-size:1.06rem;
  line-height:1.75;
  color:var(--ink);
  margin-bottom:1.15rem;
}
.about-intro p strong{
  color:var(--navy);
  font-weight:600;
}
.about-intro .container-narrow{ max-width:740px; }

.about-divider{
  border:0;
  border-top:1px solid var(--line);
  margin:3rem 0;
  opacity:.6;
}

.about-subhead{
  margin-bottom:1.25rem;
}

/* ---------- Goals list ---------- */
.about-goals-list{
  list-style:none;
  padding:0;
  margin:1.25rem 0 1.5rem;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.75rem 1.5rem;
}
.about-goals-list li{
  position:relative;
  padding-left:1.75rem;
  font-size:1rem;
  color:var(--ink);
  line-height:1.5;
}
.about-goals-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.35rem;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--gold-soft);
  border:1px solid rgba(184,134,45,.35);
}
.about-goals-list li::after{
  content:"";
  position:absolute;
  left:6px;
  top:.65rem;
  width:8px;
  height:5px;
  border-left:2px solid var(--gold-deep);
  border-bottom:2px solid var(--gold-deep);
  transform:rotate(-45deg);
}
@media (max-width:575.98px){
  .about-goals-list{ grid-template-columns:1fr; }
}

/* ---------- Vision & Mission ---------- */
.about-vm-section{
  padding:4.5rem 0;
}
.about-vm-card{
  position:relative;
  padding:2.25rem 1.9rem 1.9rem;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.about-vm-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(10,27,61,.10);
}
.about-vm-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--gold), #E0BC74);
}
.about-vm-icon{
  position:absolute;
  top:1.4rem;
  right:1.4rem;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--gold-soft);
  color:var(--gold-deep);
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-vm-icon svg{ width:22px; height:22px; }
.about-vm-card .eyebrow{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
}
.about-vm-text{
  font-size:1rem;
  line-height:1.7;
  color:var(--ink);
  padding-right:2.5rem;
}

/* ---------- Why Us ---------- */
.about-why-section{
  padding:5rem 0 5.5rem;
}
.about-why-section .h3{
  margin-bottom:1.5rem;
}
.about-why-text p{
  font-size:1.06rem;
  line-height:1.75;
  color:var(--ink);
  margin-bottom:1.1rem;
}
.about-tagline{
  color:var(--navy);
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  font-size:1.25rem !important;
  letter-spacing:-0.01em;
  margin-top:2rem !important;
  position:relative;
  display:inline-block;
  padding:0 1.5rem;
}
.about-tagline::before,
.about-tagline::after{
  content:"";
  position:absolute;
  top:50%;
  width:24px;
  height:1px;
  background:var(--gold);
}
.about-tagline::before{ left:0; }
.about-tagline::after{ right:0; }
.about-tagline strong{
  color:var(--navy);
  font-weight:600;
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .about-hero{ padding:4.5rem 0 4rem; }
  .about-intro{ padding:4rem 0 3rem; }
  .about-vm-section{ padding:3.5rem 0; }
  .about-why-section{ padding:4rem 0 4.5rem; }
}
@media (max-width:575.98px){
  .about-hero{ padding:3.5rem 0 3rem; }
  .about-hero h1{ font-size:1.85rem; }
  .about-intro p,
  .about-why-text p{ font-size:1rem; }
  .about-vm-card{ padding:1.75rem 1.4rem 1.4rem; }
  .about-vm-icon{ top:1.1rem; right:1.1rem; width:38px; height:38px; border-radius:10px; }
  .about-vm-icon svg{ width:18px; height:18px; }
  .about-vm-text{ padding-right:0; }
  .about-tagline{ padding:0 1rem; font-size:1.1rem !important; }
  .about-tagline::before,
  .about-tagline::after{ width:14px; }
}




/* =========================================================
   PORTAL — AUTH (logged-out screen)
   ========================================================= */
.portal-auth{
  min-height:calc(100vh - 80px);
  padding:4rem 0 5rem;
  background:
    radial-gradient(circle at 82% 12%, rgba(184,134,45,.10), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(10,27,61,.06), transparent 40%),
    var(--paper);
}
.portal-auth-inner{
  display:grid;
  grid-template-columns:1fr 460px;
  gap:4rem;
  align-items:center;
  max-width:1080px;
  margin:0 auto;
}
@media (max-width:991.98px){
  .portal-auth-inner{ grid-template-columns:1fr; gap:2.5rem; }
}

.portal-auth-branding h1{
  font-family:"Fraunces", serif;
  font-weight:560;
  font-size:clamp(2rem, 4vw, 2.8rem);
  line-height:1.1;
  margin:1rem 0 1.2rem;
  color:var(--navy);
}
.portal-auth-branding h1 .grad{
  background:linear-gradient(100deg, var(--gold-deep), var(--gold) 55%, #E0BC74);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic; font-weight:600;
}
.portal-auth-branding p{
  font-size:1.02rem;
  color:var(--ink-soft);
  max-width:440px;
  margin-bottom:2rem;
}

.portal-auth-perks{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:1rem;
}
.portal-auth-perks li{
  display:flex; gap:.75rem; align-items:flex-start;
  font-size:.95rem; color:var(--ink);
}
.perk-icon{
  flex:0 0 auto;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--teal-soft);
  color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:700;
  margin-top:2px;
}

.portal-auth-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:2.25rem 2rem;
  box-shadow:0 20px 50px rgba(10,27,61,.08);
}
.portal-auth-head{ margin-bottom:1.75rem; }
.portal-auth-head h2{
  font-family:"Fraunces", serif;
  font-weight:600;
  font-size:1.5rem;
  margin:0 0 .35rem;
  color:var(--navy);
}
.portal-auth-head p{ font-size:.92rem; color:var(--ink-soft); margin:0; }

.portal-auth-card .form-label{
  font-weight:600; color:var(--navy);
  font-size:.88rem;
}
.portal-auth-card .form-control{
  padding:.75rem 1rem;
  border-radius:10px;
  border:1px solid var(--line);
  font-size:.95rem;
}
.portal-auth-card .form-control:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,134,45,.14);
  outline:none;
}
.portal-auth-card .btn{ margin-top:.25rem; }

.portal-auth-switch{
  margin:1.25rem 0 0;
  text-align:center;
  font-size:.88rem;
}
.portal-auth-switch a{ font-weight:600; color:var(--navy); }
.portal-auth-switch a:hover{ color:var(--gold-deep); }

.portal-auth-divider{
  position:relative;
  text-align:center;
  margin:1.75rem 0 1.25rem;
}
.portal-auth-divider::before{
  content:""; position:absolute;
  top:50%; left:0; right:0; height:1px; background:var(--line);
}
.portal-auth-divider span{
  position:relative;
  background:#fff; padding:0 1rem;
  font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.portal-auth-register{
  font-size:.88rem; color:var(--ink-soft);
  text-align:center; margin:0;
  line-height:1.6;
}
.portal-auth-register a{ font-weight:600; }

.portal-notice{
  padding:.85rem 1.1rem;
  border-radius:10px;
  font-size:.9rem;
  margin-bottom:1.25rem;
  border:1px solid transparent;
}
.portal-notice-success{ background:var(--teal-soft); color:var(--teal); border-color:rgba(30,107,98,.25); }
.portal-notice-error{ background:var(--burgundy-soft); color:var(--burgundy); border-color:rgba(122,31,43,.22); }

/* =========================================================
   PORTAL — DASHBOARD (logged-in)
   ========================================================= */
.portal-dash{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:2rem;
  max-width:1320px;
  margin:0 auto;
  padding:2rem 1.5rem 4rem;
  background:var(--paper);
  min-height:calc(100vh - 80px);
  align-items:start;
}
@media (max-width:991.98px){
  .portal-dash{ grid-template-columns:1fr; padding:1.5rem 1rem 3rem; }
}

/* ---------- Sidebar ---------- */
.portal-side-inner{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.5rem 1.25rem;
  position:sticky;
  top:90px;
}
@media (max-width:991.98px){
  .portal-side-inner{ position:static; }
}

.portal-user{
  display:flex;
  gap:.85rem;
  align-items:center;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--line);
  margin-bottom:1.25rem;
}
.portal-user-avatar{
  flex:0 0 auto;
  width:48px; height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces", serif;
  font-weight:700;
  font-size:1.3rem;
}
.portal-user-info{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.portal-user-hello{ font-size:.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.portal-user-name{ font-weight:700; color:var(--navy); font-size:1rem; line-height:1.2; }
.portal-user-email{ font-size:.75rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.portal-nav{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.portal-nav a{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.7rem .9rem;
  border-radius:10px;
  color:var(--ink);
  font-size:.9rem;
  font-weight:500;
  transition:background .15s ease, color .15s ease;
  position:relative;
}
.portal-nav a svg{ color:var(--ink-soft); flex:0 0 auto; transition:color .15s ease; }
.portal-nav a:hover{ background:var(--gold-soft); color:var(--gold-deep); }
.portal-nav a:hover svg{ color:var(--gold-deep); }
.portal-nav a.active{
  background:var(--navy);
  color:#fff;
}
.portal-nav a.active svg{ color:var(--gold); }

.portal-nav-badge{
  margin-left:auto;
  min-width:20px;
  height:20px;
  padding:0 6px;
  background:var(--burgundy);
  color:#fff;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.portal-nav-badge-ok{ background:var(--teal); }

.portal-nav-logout{
  margin-top:.75rem;
  padding-top:.9rem !important;
  border-top:1px solid var(--line);
  border-radius:0 !important;
}
.portal-nav-logout:hover{ background:var(--burgundy-soft) !important; color:var(--burgundy) !important; }
.portal-nav-logout:hover svg{ color:var(--burgundy) !important; }

/* ---------- Main content ---------- */
.portal-main{ min-width:0; }

.portal-header{
  margin-bottom:2rem;
}
.portal-header-eyebrow{
  font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 .5rem;
}
.portal-header h1{
  font-family:"Fraunces", serif;
  font-weight:560;
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  color:var(--navy);
  margin:0 0 .35rem;
  line-height:1.2;
}
.portal-header-sub{
  font-size:.95rem;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- Stats ---------- */
.portal-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1rem;
  margin-bottom:2.5rem;
}
@media (max-width:900px){ .portal-stats{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .portal-stats{ grid-template-columns:1fr; } }

.portal-stat{
  display:flex;
  gap:.9rem;
  align-items:center;
  padding:1.15rem 1.25rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.portal-stat:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(10,27,61,.06); }

.portal-stat-icon{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.portal-stat-icon-gold{ background:linear-gradient(135deg, var(--gold), var(--gold-deep)); }
.portal-stat-icon-teal{ background:linear-gradient(135deg, var(--teal), #15574f); }
.portal-stat-icon-burgundy{ background:linear-gradient(135deg, var(--burgundy), #5c1520); }
.portal-stat-icon-navy{ background:linear-gradient(135deg, var(--navy-2), var(--navy)); }

.portal-stat-value{
  display:block;
  font-family:"Fraunces", serif;
  font-weight:700;
  font-size:1.5rem;
  color:var(--navy);
  line-height:1.05;
}
.portal-stat-label{
  display:block;
  font-size:.78rem;
  color:var(--ink-soft);
  margin-top:.15rem;
}

/* ---------- Empty state ---------- */
.portal-empty{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:3.5rem 2rem;
  text-align:center;
}
.portal-empty-icon{
  width:72px; height:72px;
  margin:0 auto 1.25rem;
  border-radius:50%;
  background:var(--gold-soft);
  color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center;
}
.portal-empty h2{
  font-family:"Fraunces", serif;
  font-weight:600;
  font-size:1.45rem;
  margin:0 0 .5rem;
  color:var(--navy);
}
.portal-empty p{
  font-size:.95rem;
  color:var(--ink-soft);
  max-width:440px;
  margin:0 auto 1.5rem;
}
.portal-empty-hint{
  font-size:.88rem !important;
  background:var(--gold-soft);
  border-radius:10px;
  padding:.75rem 1rem;
  color:var(--gold-deep) !important;
  display:inline-block;
  max-width:none !important;
  margin-bottom:1.25rem !important;
}

/* ---------- Section ---------- */
.portal-section{ margin-bottom:2rem; }
.portal-section-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:1rem;
}
.portal-section-head h2{
  font-family:"Fraunces", serif;
  font-weight:600;
  font-size:1.25rem;
  margin:0;
  color:var(--navy);
}
.portal-section-head a{
  font-size:.88rem;
  font-weight:600;
  color:var(--gold-deep);
}

/* ---------- Order cards ---------- */
.portal-orders{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.portal-order{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.5rem 1.6rem;
  transition:box-shadow .2s ease;
}
.portal-order:hover{ box-shadow:0 12px 30px rgba(10,27,61,.06); }

.portal-order-head{
  display:flex;
  align-items:center;
  gap:1rem;
  padding-bottom:1rem;
  border-bottom:1px dashed var(--line);
  margin-bottom:1rem;
  flex-wrap:wrap;
}
.portal-order-ref{ display:flex; flex-direction:column; }
.portal-order-ref-label{
  font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.portal-order-ref-value{
  font-family:"Fraunces", serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--navy);
  line-height:1.2;
}
.portal-order-date{
  font-size:.82rem;
  color:var(--ink-soft);
  margin-left:auto;
  margin-right:.5rem;
}

.portal-status{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .8rem;
  border-radius:20px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.portal-status-pending{ background:#FEF7E6; color:#8F6520; }
.portal-status-approved{ background:var(--teal-soft); color:var(--teal); }
.portal-status-rejected{ background:var(--burgundy-soft); color:var(--burgundy); }

.portal-order-desc{
  font-size:.88rem;
  color:var(--ink-soft);
  padding:.75rem 1rem;
  background:var(--paper);
  border-radius:10px;
  margin-bottom:1.15rem;
  border-left:3px solid var(--gold);
}
.portal-order-approved .portal-order-desc{ border-left-color:var(--teal); background:var(--teal-soft); color:var(--teal); }
.portal-order-rejected .portal-order-desc{ border-left-color:var(--burgundy); background:var(--burgundy-soft); color:var(--burgundy); }

.portal-order-items{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.portal-order-item{
  display:grid;
  grid-template-columns:52px 1fr auto auto;
  gap:.85rem;
  align-items:center;
  padding:.6rem 0;
}
.portal-order-item + .portal-order-item{ border-top:1px dashed var(--line); }
@media (max-width:600px){
  .portal-order-item{
    grid-template-columns:44px 1fr auto;
    grid-template-areas:
      "thumb info price"
      "thumb info btn";
    row-gap:.25rem;
  }
  .portal-order-item-thumb{ grid-area:thumb; width:44px !important; height:44px !important; }
  .portal-order-item-info{ grid-area:info; }
  .portal-order-item-price{ grid-area:price; }
  .portal-order-item-btn{ grid-area:btn; justify-self:start; }
}

.portal-order-item-thumb{
  width:52px; height:52px;
  border-radius:10px;
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line);
}
.portal-order-item-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.portal-order-item-info{ min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.portal-order-item-title{
  font-weight:600;
  color:var(--navy);
  font-size:.95rem;
  line-height:1.3;
}
.portal-order-item-level{
  font-size:.75rem;
  color:var(--ink-soft);
}

.portal-order-item-price{
  font-family:"Fraunces", serif;
  font-weight:600;
  color:var(--navy);
  font-size:.95rem;
  white-space:nowrap;
}

.portal-order-item-btn{
  font-size:.82rem;
  font-weight:600;
  color:var(--teal);
  padding:.35rem .75rem;
  border:1px solid rgba(30,107,98,.25);
  border-radius:50px;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.portal-order-item-btn:hover{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}

.portal-order-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding-top:1rem;
  margin-top:1rem;
  border-top:1px dashed var(--line);
  flex-wrap:wrap;
}
.portal-order-total{
  font-size:.9rem;
  color:var(--ink-soft);
}
.portal-order-total strong{
  font-family:"Fraunces", serif;
  font-size:1.1rem;
  color:var(--navy);
  margin-left:.35rem;
}
.portal-order-foot-note{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.8rem;
  color:var(--ink-soft);
}
.portal-order-foot-note svg{ color:var(--gold-deep); }

/* ---------- Courses grid ---------- */
.portal-courses-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
}
@media (max-width:991.98px){ .portal-courses-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:575.98px){ .portal-courses-grid{ grid-template-columns:1fr; } }

.portal-course-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
}
.portal-course-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(10,27,61,.08); }

.portal-course-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--paper-2);
}
.portal-course-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.portal-course-badge{
  position:absolute;
  top:.85rem;
  right:.85rem;
  background:var(--teal);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  padding:.3rem .75rem;
  border-radius:20px;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}
.portal-course-badge::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:#fff;
}

.portal-course-body{
  padding:1.15rem 1.15rem 1.25rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.portal-course-title{
  font-family:"Work Sans", sans-serif;
  font-weight:700;
  font-size:1.02rem;
  line-height:1.35;
  color:var(--navy);
  margin:.5rem 0 .55rem;
}
.portal-course-meta{
  font-size:.8rem;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0 0 .85rem;
}
.portal-course-meta strong{ color:var(--navy); }

/* ---------- Forms ---------- */
.portal-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:2rem;
  max-width:640px;
}
@media (max-width:575.98px){ .portal-form{ padding:1.5rem 1.25rem; } }

.portal-form-row{ margin-bottom:1.25rem; }
.portal-form-row:last-of-type{ margin-bottom:0; }
.portal-form-row .form-label{
  font-weight:600;
  color:var(--navy);
  font-size:.88rem;
  margin-bottom:.4rem;
}
.portal-form-row .form-control{
  padding:.75rem 1rem;
  border-radius:10px;
  border:1px solid var(--line);
  font-size:.95rem;
}
.portal-form-row .form-control:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,134,45,.14);
  outline:none;
}
.portal-form-row .form-control:disabled{
  background:var(--paper);
  color:var(--ink-soft);
  cursor:not-allowed;
}
.portal-form-hint{
  font-size:.78rem;
  color:var(--ink-soft);
  margin:.4rem 0 0;
}

.portal-form-actions{
  padding-top:1.5rem;
  margin-top:1.5rem;
  border-top:1px solid var(--line);
}