@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --navy:#0A4D6E;
  --ocean:#0A4D6E;
  --sky:#0A4D6E;
  --warm:#F97074;
  --gold:#F97074;
  --sand:#eef5fa;
  --mist:#eef5fa;
  --foam:#eef5fa;
  --salt:#fafcfe;
  --white:#ffffff;
  --text:#1a1a1a;
  --mid:#5a7a90;
  --muted:#5a7a90;
  --line:#d0e5f0;
  --r:14px;
  --sh:0 2px 20px rgba(26,46,69,.09);
  --sh-lg:0 8px 40px rgba(26,46,69,.16);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans', sans-serif;font-weight:400;color:var(--text);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:'Nunito Sans', sans-serif;line-height:1.15;font-weight:900}
img{display:block;max-width:100%;height:auto}

/* MOBILE-FIRST TYPOGRAPHY */
body{font-size:17px;line-height:1.65}
p{font-size:1rem;line-height:1.7;color:var(--mid)}
@media(max-width:640px){
  body{font-size:17px}
  p{font-size:1.05rem;line-height:1.75}
  h2.sec-t{font-size:2rem !important}
  .step p,.card-body p,.cd-d,.jt-b p,.review p,.feat-list li{font-size:1rem !important;line-height:1.75 !important;color:#1a1a1a !important}
  .step h3,.card-body h3{font-size:1.15rem !important}
  .cd-l,.jt-b h4{font-size:1rem !important;font-weight:600 !important;color:#1a1a1a !important}
  .cd-t{font-size:.82rem !important}
  .card-meta span{font-size:.85rem !important}
  .sec-label{font-size:.78rem !important}
  .trust-inner{flex-direction:column;align-items:flex-start;gap:1rem;padding:0 4vw}
  .ti{font-size:.95rem}
}

#prog{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--sky),var(--gold));z-index:300;width:0;transition:width .1s}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;transition:background .35s,box-shadow .35s}
nav.at-top{background:transparent}
nav.scrolled{background:rgba(255,255,255,.98);box-shadow:0 1px 0 var(--line),0 4px 24px rgba(26,46,69,.08);backdrop-filter:blur(10px)}
nav.scrolled .nl a{color:var(--mid)}
nav.scrolled .nl a:hover{color:var(--navy)}
nav.scrolled .ham span{background:var(--navy)}
.nav-logo{display:flex;align-items:center;text-decoration:none;transition:opacity .3s}
.nav-logo:hover{opacity:.85}
.nav-logo img{height:34px;width:auto;display:block}
.nav-logo .logo-color{display:none}
.nav-logo .logo-white{display:block}
nav.scrolled .nav-logo .logo-white{display:none}
nav.scrolled .nav-logo .logo-color{display:block}
.nl{display:flex;gap:1.8rem;align-items:center;list-style:none}
.nl a{color:rgba(255,255,255,.9);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s}
.nl a:hover{color:white}
.btn-nav{background:var(--sky)!important;color:white!important;padding:9px 20px;border-radius:6px}
.btn-nav:hover{background:#083d58!important}
.ham{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ham span{display:block;width:24px;height:2px;background:white;border-radius:2px;transition:.3s}
@media(max-width:820px){
  .ham{display:flex}
  .nl{display:none;position:absolute;top:68px;left:0;right:0;background:white;flex-direction:column;padding:1.5rem 5vw;gap:1.4rem;box-shadow:0 8px 24px rgba(0,0,0,.1)}
  .nl a{color:var(--mid)!important;font-size:1.05rem!important}
  .nl.open{display:flex}
}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:6px;font-family:'DM Sans', sans-serif;font-size:.95rem;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--warm);color:white;box-shadow:0 4px 18px rgba(249,112,116,.35)}
.btn-primary:hover{background:#e05558}
.btn-ghost{background:rgba(255,255,255,.15);color:white;border:2px solid rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.25)}
.btn-white{background:white;color:var(--navy);font-weight:600}
.btn-white:hover{background:#f0f7ff}
.btn-outline{background:transparent;color:var(--navy);border:2px solid var(--line)}
.btn-outline:hover{border-color:var(--sky);color:var(--sky)}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--navy)}
.hero-vid-wrap{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,#1a2e45 0%,#1e4a70 40%,#1e7aaa 100%)}
.hero-vid-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.5s ease}
.hero-vid-wrap video.active{opacity:1}
.hero-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(26,46,69,.12) 0%,rgba(26,46,69,.04) 45%,rgba(26,46,69,.5) 100%)}
.hero-ov::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(26,46,69,.38) 0%,transparent 65%)}
.hero-content{position:relative;z-index:2;max-width:680px;padding:140px 5vw 130px}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);color:white;padding:7px 18px;border-radius:50px;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.8rem;animation:fadeUp .7s ease both}
h1.h1{font-size:clamp(2.8rem,5.5vw,4.8rem);color:white;line-height:1.07;margin-bottom:1.3rem;animation:fadeUp .7s .1s ease both;text-shadow:0 2px 24px rgba(0,0,0,.3)}
h1.h1 em{color:#F97074;font-style:italic}
.hero-sub{font-size:1.1rem;color:rgba(255,255,255,.88);line-height:1.75;margin-bottom:2.2rem;font-weight:400;max-width:520px;animation:fadeUp .7s .2s ease both}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;animation:fadeUp .7s .3s ease both}
.vid-dots{position:absolute;bottom:105px;left:5vw;z-index:3;display:flex;gap:8px}
.vid-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;padding:0;transition:.3s}
.vid-dot.active{background:white;transform:scale(1.25)}
.vid-ctrl{position:absolute;bottom:105px;right:5vw;z-index:3;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.35);color:white;padding:8px 18px;border-radius:50px;font-size:.78rem;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);transition:.2s;display:flex;align-items:center;gap:7px;font-family:'DM Sans', sans-serif}
.vid-ctrl:hover{background:rgba(255,255,255,.26)}
.hero-stats{position:absolute;bottom:0;left:0;right:0;z-index:2;display:flex;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.hst{flex:1;display:flex;align-items:center;gap:12px;padding:16px 3vw;border-right:1px solid var(--line)}
.hst:last-child{border-right:none}
.hst-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--sand);flex-shrink:0}
.hst-icon svg{display:block;color:var(--navy)}
.hst-num{font-family:'Nunito Sans', sans-serif;font-size:1.5rem;font-weight:700;color:var(--navy);line-height:1}
.hst-lbl{font-size:.73rem;color:var(--muted);margin-top:2px;font-weight:500}
@media(max-width:640px){.hero-stats{display:none}.vid-dots{display:none}.vid-ctrl{display:none}.hero-content{padding:110px 5vw 80px}}

/* TRUST */
.trust{background:var(--sand);padding:28px 5vw;border-bottom:1px solid #e8d8c0}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}
.ti{display:flex;align-items:center;gap:7px;font-size:.88rem;color:var(--mid);font-weight:400}
.ti strong{color:var(--navy);font-weight:600}

/* SECTIONS */
section{padding:80px 5vw}
@media(max-width:640px){section{padding:60px 5vw}}
.container{max-width:1160px;margin:0 auto}
.sec-label{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:.9rem}
.sec-label::before{content:'';display:block;width:22px;height:2px;background:var(--gold);border-radius:2px}
h2.sec-t{font-size:clamp(2rem,3.5vw,2.9rem);color:var(--navy);margin-bottom:.85rem}
.sec-sub{font-size:1.05rem;color:var(--muted);line-height:1.75;max-width:560px;font-weight:400}

/* HOW */
.how{background:var(--salt)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;margin-top:3rem}
.step{background:white;border-radius:var(--r);border:1px solid var(--line);padding:1.8rem 1.6rem;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;border-top:3px solid var(--gold)}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.step-n{font-family:'Nunito Sans', sans-serif;font-size:5rem;font-weight:700;color:var(--mist);position:absolute;top:-8px;right:12px;line-height:1;pointer-events:none}
.step-ic{width:44px;height:44px;border-radius:11px;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1rem}
.step h3{font-size:1.1rem;color:var(--navy);margin-bottom:.5rem;font-family:'DM Sans', sans-serif;font-weight:700}
.step p{font-size:.95rem;color:var(--mid);line-height:1.7}

/* COURSE DAY TABS */
.courseday{background:white}
.cd-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem}
.cd-tab{padding:10px 22px;border-radius:50px;border:2px solid var(--line);background:white;color:var(--mid);font-size:.9rem;font-weight:600;cursor:pointer;transition:.2s;font-family:'DM Sans', sans-serif}
.cd-tab.active,.cd-tab:hover{background:var(--navy);border-color:var(--navy);color:white}
.cd-panel{display:none;margin-top:1.8rem}
.cd-panel.active{display:block}
.cd-inner{background:var(--salt);border-radius:var(--r);border:1px solid var(--line);padding:2.2rem;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:680px){.cd-inner{grid-template-columns:1fr;padding:1.4rem}}
.cd-tl{display:flex;flex-direction:column}
.cd-item{display:flex;gap:1.1rem;position:relative;padding-bottom:1.6rem}
.cd-item:last-child{padding-bottom:0}
.cd-item:not(:last-child)::after{content:'';position:absolute;left:14px;top:32px;width:2px;bottom:0;background:var(--line)}
.cd-dot{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--sky);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:white;position:relative;z-index:1;font-weight:700;font-family:'DM Sans', sans-serif}
.cd-t{font-size:.78rem;color:var(--sky);font-weight:700;letter-spacing:.06em;margin-bottom:.15rem}
.cd-l{font-size:.95rem;font-weight:600;color:var(--navy);margin-bottom:.2rem;font-family:'DM Sans', sans-serif}
.cd-d{font-size:.9rem;color:var(--mid);line-height:1.65}
.cd-info h4{font-family:'DM Sans', sans-serif;font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:1rem}
.cd-chips{display:flex;flex-direction:column;gap:.65rem}
.cd-chip{display:flex;align-items:flex-start;gap:10px;background:white;border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem}
.cd-chi{font-size:1.1rem;margin-top:2px}
.cd-cht{font-size:.9rem;color:var(--mid);line-height:1.55}
.cd-cht strong{color:var(--navy);display:block;margin-bottom:2px;font-weight:700}

/* COURSES */
.courses{background:var(--foam)}
.ch{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.card{background:white;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.card-img-wrap{height:200px;overflow:hidden;position:relative;background:var(--mist)}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card-img-wrap img{transform:scale(1.04)}
.card-badge{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);border:1px solid rgba(26,46,69,.12);color:var(--navy);font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:50px}
.card-body{padding:1.4rem;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:1.1rem;color:var(--navy);margin-bottom:.45rem;font-family:'DM Sans', sans-serif;font-weight:700}
.card-meta{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.card-meta span{font-size:.8rem;color:white;background:var(--ocean);padding:2px 9px;border-radius:50px;font-weight:500}
.card-body p{font-size:.92rem;color:var(--mid);line-height:1.65;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;border-top:1px solid var(--line);background:var(--salt)}
.card-price{font-size:.95rem;font-weight:700;color:var(--navy)}
.card-cta{font-size:.9rem;font-weight:600;color:var(--sky);text-decoration:none;transition:color .2s}
.card-cta:hover{color:var(--ocean)}

/* PHOTO GRID */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.pg-large{grid-column:span 2;grid-row:span 2}
.pg-img{border-radius:var(--r);overflow:hidden;aspect-ratio:1;background:var(--mist)}
.pg-large.pg-img{aspect-ratio:4/3}
.pg-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pg-img:hover img{transform:scale(1.04)}
@media(max-width:640px){.photo-grid{grid-template-columns:1fr 1fr}.pg-large{grid-column:span 2}}

/* DIGI BANNER */
.digi{margin-top:2.5rem;background:var(--navy);border-radius:var(--r);padding:2.5rem;display:flex;align-items:center;gap:3rem;flex-wrap:wrap;position:relative;overflow:hidden;border-left:5px solid var(--gold)}
.digi::before{content:'';position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:rgba(249,112,116,.12)}
.digi-txt{flex:1;min-width:220px;position:relative;z-index:1}
.digi-txt h3{font-size:1.35rem;color:white;margin-bottom:.5rem;font-family:'DM Sans', sans-serif;font-weight:700}
.digi-txt p{font-size:.95rem;color:rgba(255,255,255,.75);line-height:1.7}
.digi-links{display:flex;flex-direction:column;gap:.6rem;position:relative;z-index:1}
.digi-link{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.9);text-decoration:none;padding:10px 16px;border-radius:8px;font-size:.9rem;font-weight:500;transition:background .2s}
.digi-link:hover{background:rgba(255,255,255,.18);color:white}

/* JOURNEY */
.journey{background:var(--salt)}
.jg{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-top:3rem}
@media(max-width:760px){.jg{grid-template-columns:1fr}}
.jt{display:flex;flex-direction:column}
.jt-item{display:flex;gap:1.2rem;position:relative;padding-bottom:1.8rem}
.jt-item:last-child{padding-bottom:0}
.jt-item:not(:last-child)::after{content:'';position:absolute;left:14px;top:34px;width:2px;bottom:0;background:linear-gradient(to bottom,var(--mist),transparent)}
.jt-dot{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--sand);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--navy);position:relative;z-index:1;font-family:'DM Sans', sans-serif}
.jt-b h4{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.25rem;font-family:'DM Sans', sans-serif}
.jt-b p{font-size:.92rem;color:var(--muted);line-height:1.65}
.j-panel{background:var(--navy);border-radius:20px;padding:2.2rem;color:white}
.j-panel h3{font-size:1.25rem;color:#F97074;margin-bottom:1.2rem;font-family:'DM Sans', sans-serif;font-weight:700}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:.85rem}
.feat-list li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:rgba(255,255,255,.85);line-height:1.55}
.feat-list li::before{content:'ok';flex-shrink:0;width:22px;height:22px;background:rgba(249,112,116,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:#F97074;margin-top:1px;font-family:sans-serif;font-weight:700}
.site-pills{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1)}
.sp{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:9px 12px;text-decoration:none;color:rgba(255,255,255,.75);font-size:.85rem;transition:background .2s;display:flex;align-items:center;gap:6px;font-weight:500}
.sp:hover{background:rgba(255,255,255,.16);color:white}

/* REVIEWS */
.reviews{background:white}
.rg{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem;margin-top:3rem}
.review{background:var(--sand);border:1px solid #e8d8c0;border-radius:var(--r);padding:1.8rem}
.stars{color:var(--gold);font-size:1rem;letter-spacing:2px;margin-bottom:.9rem}
.review p{font-size:.95rem;color:var(--mid);line-height:1.75;font-style:italic;margin-bottom:1.1rem}
.reviewer{display:flex;align-items:center;gap:10px}
.rev-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--ocean));display:flex;align-items:center;justify-content:center;color:white;font-size:.85rem;font-weight:700}
.rev-nm{font-size:.9rem;font-weight:700;color:var(--navy)}
.rev-mt{font-size:.8rem;color:var(--muted)}

/* CTA */
.cta{background:linear-gradient(135deg,var(--navy) 0%,#1e4a70 100%);text-align:center;padding:100px 5vw;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(249,112,116,.08);top:-200px;right:-100px}
.cta-in{position:relative;z-index:1}
.cta h2{font-size:clamp(2.2rem,4vw,3.4rem);color:white;margin-bottom:.9rem}
.cta p{color:rgba(255,255,255,.75);font-size:1.05rem;margin-bottom:2.2rem;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.7}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* FOOTER */
footer{background:#111e2d;color:rgba(255,255,255,.9);padding:64px 5vw 32px}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:3rem;margin-bottom:3rem}
@media(max-width:860px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fg{grid-template-columns:1fr}}
.fb p{font-size:.88rem;line-height:1.7;max-width:250px;color:rgba(255,255,255,.85)}
.fc h4{color:white;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem;font-weight:700}
.fc ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.fc ul a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.9rem;transition:color .2s}
.fc ul a:hover{color:white}
.fco p{font-size:.9rem;display:flex;align-items:center;gap:7px;margin-bottom:.5rem}
.fco a{color:rgba(255,255,255,.85);text-decoration:none}
.fco a:hover{color:white}
.soc-row{display:flex;gap:.65rem;margin-top:1.2rem}
.soc{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;text-decoration:none;color:rgba(255,255,255,.6);font-size:.85rem;transition:.2s;font-weight:600}
.soc:hover{background:var(--sky);color:white;border-color:var(--sky)}
.fbtm{border-top:1px solid rgba(255,255,255,.08);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;font-size:.82rem}
.fbtm a{color:rgba(255,255,255,.7);text-decoration:none;margin-left:1.2rem}
.fbtm a:hover{color:rgba(255,255,255,.75)}

/* MOBILE STICKY */
.sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:white;border-top:2px solid var(--line);padding:12px 5vw;gap:10px;box-shadow:0 -4px 20px rgba(26,46,69,.12)}
@media(max-width:640px){.sticky{display:flex}}
.sticky .btn{flex:1;justify-content:center;font-size:.95rem;padding:13px 16px}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.rev{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}.rev.pre{opacity:0;transform:translateY(24px)}

.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ============================
   V5 ADDITIONS
   ============================ */

/* SQUARE BUTTONS (override rounded) */
.btn-sq { border-radius: 6px !important; }
.btn-nav { border-radius: 6px !important; }

/* COURSE CAROUSEL */
.course-carousel-wrap {
  position: relative;
  overflow: hidden;
  padding-bottom: 60px;
}
.course-carousel {
  display: flex;
  gap: 24px;
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.ccard {
  flex: 0 0 calc(33.333% - 16px);
  min-width: 0;
  background: white;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh);
  transition: box-shadow .2s, transform .2s;
}
.ccard:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.ccard-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mist);
  flex-shrink: 0;
}
.ccard-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.ccard:hover .ccard-img img { transform: scale(1.04); }
.ccard-badge {
  position: absolute; top:12px; right:12px;
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(26,46,69,.12);
  color: var(--navy);
  font-size: .75rem; font-weight: 700;
  padding: 4px 12px; border-radius: 4px;
}
.ccard-badge-grek { background: var(--gold); color: white; border-color: var(--gold); }
.ccard-body { padding: 1.4rem 1.4rem .8rem; flex: 1; display: flex; flex-direction: column; }
.ccard-body h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; font-family: 'DM Sans', sans-serif; line-height: 1.25; }
.ccard-meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ccard-tag { font-size: .8rem; color: var(--muted); font-weight: 500; }
.ccard-tag::after { content: '·'; margin-left: .4rem; color: var(--line); }
.ccard-tag:last-child::after { display: none; }
.ccard-body p { font-size: .92rem; color: var(--mid); line-height: 1.65; flex: 1; }
.ccard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--line);
  background: var(--salt);
  gap: .8rem;
  flex-wrap: nowrap;
}
.ccard-price { font-size: 1rem; font-weight: 700; color: var(--navy); display: block; }
.klarna-tiny { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.btn-boka {
  font-size: .9rem;
  padding: 9px 16px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 6px !important;
}

/* Tablet: 2 kort synliga */
@media(max-width:1023px) {
  .ccard { flex: 0 0 calc(50% - 12px); }
}

/* Mobil: native scroll-snap, 1+ kort synligt */
@media(max-width:639px) {
  .course-carousel-wrap {
    margin: 0 -5vw;
    padding: 0 5vw 50px;
  }
  .course-carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    transform: none !important;
    transition: none;
    padding-right: 5vw;
  }
  .course-carousel::-webkit-scrollbar { display: none; }
  .ccard {
    flex: 0 0 82vw;
    scroll-snap-align: start;
  }
  .ccard-foot {
    flex-wrap: nowrap;
    align-items: center;
  }
  .btn-boka {
    font-size: .9rem;
    padding: 9px 14px;
    border-radius: 6px !important;
    flex-shrink: 0;
    width: auto;
  }
  .carousel-btn { display: none; }
}

/* Carousel nav buttons */
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-60%);
  background: white; border: 1px solid var(--line);
  width: 42px; height: 42px; border-radius: 6px;
  font-size: 1.1rem; cursor: pointer; z-index: 10;
  box-shadow: var(--sh); transition: .2s; display: flex; align-items: center; justify-content: center;
  color: var(--navy);
}
.carousel-btn:hover { background: var(--sky); color: white; border-color: var(--sky); }
.carousel-prev { left: -16px; }
.carousel-next { right: -16px; }
@media(max-width:640px) {
  .carousel-prev { left: 0; }
  .carousel-next { right: 0; }
}
.carousel-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.car-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none;
  background: var(--line); cursor: pointer; padding: 0; transition: .25s;
}
.car-dot.active { background: var(--sky); transform: scale(1.3); }

/* KLARNA INFO BANNER */
.klarna-info {
  display: flex; align-items: center; gap: 1rem;
  background: #fafafa; border: 1px solid var(--line);
  border-radius: 8px; padding: 1rem 1.4rem;
  margin-top: 2rem;
}
.klarna-icon { font-size: 1.6rem; flex-shrink: 0; }
.klarna-info strong { display: block; color: var(--navy); font-size: .95rem; margin-bottom: 2px; }
.klarna-info span { font-size: .88rem; color: var(--muted); }

/* GREKLAND SPECIAL */
.grek-special {
  margin-top: 2.5rem;
  background: var(--navy);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
}
.grek-special-img { overflow: hidden; }
.grek-special-img img { width:100%; height:100%; object-fit:cover; }
.grek-special-txt {
  padding: 3rem 2.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.grek-special-txt h2 { color: white; font-size: clamp(1.6rem, 2.5vw, 2.4rem); margin-bottom: .9rem; }
.grek-special-txt p { color: rgba(255,255,255,.8); font-size: .98rem; line-height: 1.7; margin-bottom: 1rem; }
.grek-list { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.grek-list li { color: rgba(255,255,255,.9); font-size: .95rem; }
@media(max-width:760px) {
  .grek-special { grid-template-columns: 1fr; }
  .grek-special-img { height: 220px; }
  .grek-special-txt { padding: 2rem 1.5rem; }
}

/* VI GUIDAR DIG – guide steps */
.guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 1.2rem;
  margin: 2.5rem 0;
}
.gs-item {
  display: flex; gap: 1rem; align-items: flex-start;
  background: white; border-radius: 10px;
  border: 1px solid var(--line); padding: 1.4rem 1.2rem;
}
.gs-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.gs-body h4 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .3rem; font-family: 'DM Sans', sans-serif; }
.gs-body p { font-size: .92rem; color: var(--mid); line-height: 1.65; }

/* ALLT SOM INGÅR – vit text på blå */
.ingaar-panel {
  background: var(--navy);
  border-radius: 12px;
  padding: 2rem 2.2rem;
  color: white;
  margin-top: .5rem;
}
.ingaar-panel h3 {
  color: #F97074;
  font-size: 1.2rem; font-weight: 700; margin-bottom: 1.2rem;
  font-family: 'DM Sans', sans-serif;
}
.ingaar-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: .7rem 2rem;
}
.ingaar-list li {
  font-size: .95rem;
  color: rgba(255,255,255,.9);
  display: flex; align-items: center; gap: .6rem;
  line-height: 1.5;
}
.ingaar-list li::before {
  content: '?'; flex-shrink: 0;
  width: 20px; height: 20px;
  background: rgba(249,112,116,.3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .65rem; color: #F97074; font-weight: 700;
}
@media(max-width:640px) {
  .ingaar-list { grid-template-columns: 1fr; }
  .ingaar-panel { padding: 1.5rem 1.2rem; }
  .grek-special-txt { padding: 1.5rem 1.2rem; }
  .guide-steps { grid-template-columns: 1fr; }
}

/* SUBPAGE PAGE HEADER – fix logo overlap + add image */
.ph {
  padding: 100px 5vw 50px;
  background: linear-gradient(135deg, var(--navy) 0%, #1e4a70 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.ph-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .25;
}
.ph-ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(26,46,69,.85) 0%, rgba(26,46,69,.4) 100%); }
.ph-in { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; }
.ph .breadcrumb { font-size: .8rem; color: rgba(255,255,255,.6); margin-bottom: .8rem; }
.ph .breadcrumb a { color: rgba(255,255,255,.6); text-decoration: none; }
.ph h1 { color: white; font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: .7rem; }
.ph .lead { color: rgba(255,255,255,.82); font-size: 1.05rem; line-height: 1.7; max-width: 600px; }

/* SUBPAGE WRAP */
.wrap { max-width: 1160px; margin: 0 auto; padding: 50px 5vw 80px; }
.two-col { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start; }
@media(max-width:860px) { .two-col { grid-template-columns: 1fr; } .sb { display: none; } }
.section { margin-bottom: 3rem; }
.section .sec-label { display: inline-flex; align-items: center; gap: 8px; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sky); margin-bottom:.7rem; }
.section .sec-label::before { content:''; display:block; width:22px; height:2px; background:var(--gold); border-radius:2px; }
.t { font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--navy); margin-bottom: .85rem; }
.section p { font-size: .98rem; line-height: 1.75; color: var(--mid); margin-bottom: 1rem; }
.chk { list-style: none; display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.4rem; }
.chk li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--mid); line-height: 1.55; }
.chk li::before { content:''; flex-shrink:0; width:20px; height:20px; background:var(--sand); border-radius:50%; display:inline-block; margin-top:2px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%230A4D6E' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:10px 8px; background-repeat:no-repeat; background-position:center; }
.hl { background: var(--sand); border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; padding: .85rem 1rem; margin-bottom: 1rem; }
.hl p { margin-bottom: 0; font-size: .92rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; margin-top: 1rem; }
.cards .card { border-radius: 8px; padding: 1.2rem; }
.cards .card h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; font-family: 'DM Sans', sans-serif; }
.cards .card p { font-size: .88rem; color: var(--mid); line-height: 1.6; }
.itbl { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .92rem; }
.itbl td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); color: var(--mid); }
.itbl td:first-child { font-weight: 600; color: var(--navy); width: 40%; }
.btn-p { background: var(--sky); color: white; padding: 12px 26px; border-radius: 6px; text-decoration: none; display: inline-flex; font-weight: 600; font-size: .95rem; transition: background .2s; }
.btn-p:hover { background: #083d58; }
.btn-g { background: #F97074; color: var(--navy); padding: 10px 22px; border-radius: 6px; text-decoration: none; display: inline-flex; font-weight: 700; font-size: .9rem; }
.btn-sm { padding: 9px 18px; font-size: .88rem; }
.mt2 { margin-top: 1.2rem; }
/* sidebar */
.sb { display: flex; flex-direction: column; gap: 1.2rem; }
.sb-cta { background: var(--navy); color: white; border-radius: 10px; padding: 1.4rem; }
.sb-cta h4 { color: #F97074; font-size: 1rem; font-weight: 700; margin-bottom: .4rem; font-family: 'DM Sans', sans-serif; }
.sb-cta p { font-size: .88rem; color: rgba(255,255,255,.75); margin-bottom: .8rem; }
.sb-box { background: var(--salt); border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; }
.sb-box h4 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .7rem; }
.sb-box ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.sb-box ul a { font-size: .9rem; color: var(--sky); text-decoration: none; }
.sb-box ul a:hover { color: var(--navy); }
.sb-box p { font-size: .9rem; margin-bottom: .3rem; }
.sb-box p a { color: var(--sky); text-decoration: none; }
/* soc-r in subpages */
.soc-r { display: flex; gap: .65rem; margin-top: 1.2rem; }


/* ============================
   V5.1 FIXES
   ============================ */

/* 1. TRULY SQUARE BUTTONS – override everything */
.btn,
.btn-primary,
.btn-ghost,
.btn-white,
.btn-outline,
.btn-nav,
.btn-sq,
.btn-p,
.btn-g,
.card-cta,
.btn-boka,
.sticky .btn {
  border-radius: 6px !important;
}
/* Keep pill shape only for hero-tag and vid-ctrl – those are tags/controls */
.hero-tag { border-radius: 50px !important; }
.vid-ctrl { border-radius: 50px !important; }

/* Mobile carousel handled in main carousel block */

/* Card image sizing handled in main carousel block */

/* 4. MOBILE TYPOGRAPHY – bolder, more readable */
@media(max-width:640px) {
  body { font-weight: 400; }
  p, .section p, .ccard-body p, .gs-body p, .review p {
    font-weight: 400;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #2c3e50 !important;
  }
  h2.sec-t { font-size: 2rem !important; font-weight: 700 !important; }
  .ccard-body h3 { font-size: 1.3rem !important; }
  .gs-body h4 { font-size: 1.05rem !important; font-weight: 700 !important; }
  .ingaar-list li { font-size: 1rem !important; }
  .sec-sub { font-size: 1rem !important; }
  /* Slightly heavier base text */
  .mid, var(--mid) { color: #2c3e50; }
}

/* 5. REPLACE EMOJIS in guide steps and grek-list with CSS markers */
/* Guide steps icons – replace emoji with numbered circles */
.gs-icon {
  font-size: 0; /* hide emoji text */
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--sand);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
/* Number each step using counter */
.guide-steps { counter-reset: step-counter; }
.gs-item { counter-increment: step-counter; }
.gs-icon::before {
  content: counter(step-counter);
  font-size: .95rem; font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
}

/* Grek-list: replace emoji checkmarks with CSS */
.grek-list li {
  font-size: .95rem;
  color: rgba(255,255,255,.9);
  display: flex; align-items: flex-start; gap: .7rem;
  padding-left: 0;
}
.grek-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(240,192,96,.25);
  border: 2px solid #F97074;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23F97074' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px 8px;
  background-repeat: no-repeat;
  background-position: center;
}
/* Remove the raw emoji text from grek-list – handled in HTML or via empty span */

/* Klarna icon – remove emoji, use text logo style */
.klarna-icon {
  font-size: 0;
  width: 36px; height: 36px; flex-shrink: 0;
  background: #FFB3C7;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.klarna-icon::before {
  content: 'K';
  font-size: 1.1rem; font-weight: 700; color: #17120E;
  font-family: 'DM Sans', sans-serif;
}
.klarna-tiny { font-size: .73rem; color: var(--muted); margin-top: 2px; }

/* Ingaar-list checkmark – use CSS instead of emoji */
.ingaar-list li::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23F97074' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px 8px;
  background-repeat: no-repeat;
  background-position: center;
}

/* 6. SUBPAGES – more padding left/right */
.wrap { padding: 50px 6vw 80px; max-width: 1200px; }
.ph { padding: 110px 6vw 55px; }
.ph-in { padding: 0; }
@media(max-width:640px) {
  .wrap { padding: 40px 5vw 60px; }
  .ph { padding: 100px 5vw 40px; }
  .two-col { gap: 2rem; }
  .section { margin-bottom: 2.2rem; }
}

/* 7. STICKY z-index above everything */
.sticky { z-index: 9999 !important; }


/* ============================
   V5.2 – SAFARI & MOBILE MARGIN FIXES
   ============================ */

/* Subpage wrap – guaranteed side margins on all browsers */
.wrap {
  padding-left: max(20px, 5vw);
  padding-right: max(20px, 5vw);
}
.ph {
  padding-left: max(20px, 5vw);
  padding-right: max(20px, 5vw);
}
@media(max-width:640px) {
  .wrap {
    padding: 36px max(16px, 5vw) 80px;
  }
  .ph {
    padding-top: 100px;
    padding-bottom: 36px;
  }
  /* Two-col stacks on mobile */
  .two-col {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  /* Section spacing tighter on mobile */
  .section { margin-bottom: 2rem; }
}

/* Safari aspect-ratio fallback for course card images */
@supports not (aspect-ratio: 1) {
  .ccard-img {
    height: 0;
    padding-bottom: 100%;
  }
  .ccard-img img {
    position: absolute;
    inset: 0;
    height: 100%;
  }
}

/* Cache bust – update href="style.css?v=3" in HTML files */

/* Lägg till för att göra text vit oavsett important */
.ph p, .ph .lead {
  color: rgba(255,255,255,.85) !important;
}

/* -- Vita/ljusa texter på mörka bakgrunder – samlad override -- */
.hero-sub,
.hero-content p {
  color: rgba(255,255,255,.88) !important;
}
.grek-special-txt p,
.grek-special-txt .lead {
  color: rgba(255,255,255,.8) !important;
}
.digi-txt p {
  color: rgba(255,255,255,.75) !important;
}
.cta p,
.cta-in p {
  color: rgba(255,255,255,.75) !important;
}
.ingaar-panel p,
.ingaar-list li {
  color: rgba(255,255,255,.88) !important;
}
footer p,
.fb p {
  color: rgba(255,255,255,.65) !important;
}
/* -- Mobil: säkerställ vita texter på mörka sektioner -- */
@media(max-width:640px) {
  .hero-sub,
  .hero-content p {
    color: rgba(255,255,255,.88) !important;
  }
  .grek-special-txt p,
  .grek-special-txt .lead {
    color: rgba(255,255,255,.8) !important;
  }
  .digi-txt p {
    color: rgba(255,255,255,.75) !important;
  }
  .cta p,
  .cta-in p {
    color: rgba(255,255,255,.75) !important;
  }
  .ingaar-panel p,
  .ingaar-list li {
    color: rgba(255,255,255,.88) !important;
  }
  footer p,
  .fb p {
    color: rgba(255,255,255,.65) !important;
  }
}