/* ============================================================
   Aesthetic Institute — main stylesheet
   Brand family: IAHPA / Australian Cosmetic Clinics
   ============================================================ */

:root{
  /* ── Brand palette: teal #2BA89C + warm neutrals + charcoal (white-first) ── */
  --teal:#2BA89C;         /* primary — the logo colour */
  --teal-2:#33B9AC;       /* bright */
  --teal-deep:#1F857B;    /* used sparingly for hover / small-text contrast only */
  --teal-soft:#E7F5F3;    /* soft teal wash */
  --teal-soft-2:#F2FAF9;
  --ink:#1A1C1D;          /* deep charcoal headings/text */
  --ink-2:#33373A;
  --body:#54585C;         /* body copy */
  --muted:#83888D;
  --muted-2:#A7ACB1;
  --line:#ECE8E1;         /* warm hairline */
  --bg:#FFFFFF;           /* white-first */
  --cream:#FFFFFF;        /* section band wash — white, no gray/cream tint */
  --sand:#F4EFE6;         /* warm neutral surface */
  --accent:#DE9678;       /* warm secondary accent — used sparingly */
  --accent-soft:#FBEFE8;
  --amber:#C98A3E;
  --danger:#C0392B;
  --danger-bg:#FDECEA;
  --ok:#2BA89C;
  /* legacy aliases → map old var names to the new palette (keeps every rule on-brand) */
  --brand:var(--teal);
  --brand-2:var(--teal-2);
  --brand-deep:var(--teal-deep);
  --brand-deep-2:var(--teal);
  --brand-soft:var(--teal-soft);
  --brand-soft-2:var(--teal-soft-2);
  --bg-soft:var(--teal-soft);  /* functional UI tracks (progress bar, tab switcher, pills) keep a light teal wash for contrast */
  /* Type: elegant serif display + clean sans UI/body */
  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-serif:'Fraunces',Georgia,serif;
  --f-head:'Fraunces',Georgia,serif;
  --f-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 2px 12px rgba(26,28,29,.05);
  --shadow:0 18px 50px rgba(26,28,29,.09);
  --shadow-teal:0 16px 40px rgba(43,168,156,.22);
  --maxw:1200px;
  --topbar-h:44px;
  --nav-h:78px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-sans);
  color:var(--body);
  background:var(--bg);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-deep);text-decoration:none;transition:color .18s}
a:hover{color:var(--teal)}
/* Elegant serif display for the big headlines … */
h1,h2{font-family:var(--f-display);color:var(--ink);font-weight:500;line-height:1.08;letter-spacing:-.015em;margin:0 0 .4em;font-optical-sizing:auto}
/* … clean sans for sub-heads / card titles / UI */
h3,h4{font-family:var(--f-sans);color:var(--ink);font-weight:600;line-height:1.25;letter-spacing:-.01em;margin:0 0 .5em}
.section-title{font-family:var(--f-sans);font-weight:800}
/* Consistent "small title" language for sub-headings inside tab panels, forms and cards (no class change to markup needed). */
.subhead{font-family:var(--f-sans);font-weight:800;color:var(--ink);letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0;padding:0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;background:#fff;padding:8px 14px;border-radius:8px;z-index:9999}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--maxw);width:calc(100% - 48px);margin-inline:auto}
.section{padding:88px 0}
.section-sm{padding:60px 0}
.bg-soft{background:var(--bg-soft)}
.bg-teal{background:var(--brand-soft)}
.text-center{text-align:center}
.eyebrow{display:inline-block;font-family:var(--f-sans);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.section-title{font-size:clamp(1.6rem,2.7vw,2.15rem);margin-bottom:14px}
.section-title .hl{color:var(--brand)}
.section-lead{max-width:640px;margin:0 auto 8px;color:var(--muted);font-size:1.02rem}
.title-underline{width:64px;height:4px;border-radius:4px;background:var(--brand);margin:16px auto 0}
.title-underline.left{margin-left:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-sans);font-weight:700;font-size:.95rem;padding:14px 30px;border-radius:100px;border:1.6px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,color .18s;line-height:1;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-teal)}
.btn-primary:hover{background:var(--brand-deep-2);color:#fff}
.btn-outline{background:transparent;color:var(--brand-deep);border-color:var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-deep)}
.btn-lg{padding:17px 38px;font-size:1.02rem}
.btn-block{display:flex;width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- Topbar ---------- */
.topbar{background:var(--ink);color:#cbd5e1;font-size:.82rem}
.topbar-inner{max-width:1320px;width:calc(100% - 40px);margin-inline:auto;min-height:var(--topbar-h);display:flex;align-items:center;gap:18px}
.topbar-cta{color:#fff;font-weight:600}
.topbar-contact{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
.topbar-contact a{color:#cbd5e1;display:inline-flex;align-items:center;gap:6px}
.topbar-contact a:hover{color:#fff}
.tb-ico{width:13px;height:13px;flex:none;color:var(--brand-2)}
.topbar-social{display:flex;gap:8px;padding-left:12px;border-left:1px solid rgba(255,255,255,.12)}
.topbar-social a{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.08);color:#cbd5e1;font-size:.72rem;font-weight:700}
.topbar-social a:hover{background:var(--brand);color:#fff}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:600;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(26,28,29,.07)}
.nav-inner{max-width:1320px;width:calc(100% - 40px);margin-inline:auto;min-height:var(--nav-h);display:flex;align-items:center;gap:22px}
.nav-logo img{height:46px;width:auto}
.nav-menu{margin-left:auto}
.nav-menu>ul{display:flex;align-items:center;gap:6px;list-style:none}
.nav-menu>ul>li>a{display:inline-flex;align-items:center;gap:5px;padding:10px 14px;font-weight:600;font-size:.94rem;color:var(--ink);border-radius:10px}
.nav-menu>ul>li>a:hover{color:var(--brand);background:var(--brand-soft-2)}
.nav-menu .caret{font-size:.7rem;color:var(--muted)}
.has-sub{position:relative}
.has-sub .sub{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:20}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.has-sub .sub a{display:block;padding:10px 14px;border-radius:9px;font-weight:600;font-size:.92rem;color:var(--ink)}
.has-sub .sub a:hover{background:var(--brand-soft-2);color:var(--brand-deep)}
.nav-account{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line);color:var(--ink)}
.nav-account:hover{border-color:var(--brand);color:var(--brand)}
.nav-cta-mobile{display:none}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;align-items:center;justify-content:center;margin-left:auto}
.nav-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative;padding:120px 0 96px;text-align:center;color:#fff;overflow:hidden;background:linear-gradient(120deg,#2BA89C,#2BA89C)}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(1000px 400px at 80% -10%,rgba(43,168,156,.45),transparent);opacity:.8}
.page-hero>*{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.5vw,3.1rem)}
.page-hero .crumbs{display:inline-flex;gap:10px;align-items:center;color:rgba(255,255,255,.85);font-size:.9rem;font-weight:600;margin-top:6px}
.page-hero .crumbs a{color:rgba(255,255,255,.85)}
.page-hero .crumbs a:hover{color:#fff}
.page-hero .crumbs span{opacity:.6}

/* ---------- Footer ---------- */
.site-footer{background:#EEF3F3;color:var(--muted);border-top:1px solid var(--line);padding-top:66px}
.footer-inner{max-width:var(--maxw);width:calc(100% - 48px);margin-inline:auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px}
.footer-brand img{height:52px;width:auto;margin-bottom:16px}
.footer-brand p{font-size:.9rem;line-height:1.7}
.footer-address{font-size:.86rem;line-height:1.9;margin-top:14px}
.footer-address strong{color:var(--ink)}
.footer-col h4{font-family:var(--f-serif);color:var(--ink);font-size:1.2rem;margin-bottom:18px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:10px}
.footer-col ul a{color:var(--muted);font-size:.92rem;font-weight:500}
.footer-col ul a:hover{color:var(--brand)}
.footer-col>p{font-size:.9rem}
.footer-subscribe{display:flex;background:#fff;border:1px solid var(--line);border-radius:100px;padding:5px;margin:14px 0}
.footer-subscribe input{flex:1;border:0;background:transparent;padding:10px 16px;font-family:inherit;font-size:.9rem;outline:none}
.footer-subscribe button{border:0;background:var(--brand);color:#fff;font-weight:700;padding:11px 20px;border-radius:100px;cursor:pointer;font-family:inherit;font-size:.88rem}
.footer-subscribe button:hover{background:var(--brand-deep-2)}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--brand-deep);font-weight:700;font-size:.82rem}
.footer-social a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.footer-bottom{margin-top:0;border-top:1px solid var(--line);padding:22px 0;text-align:center}
.footer-bottom p{margin:0;font-size:.86rem}
.footer-bottom a{color:var(--brand-deep);font-weight:600}

/* Promoted out of the cramped footer-brand corner into its own clearly
   visible band — full-colour logos in real cards instead of dimmed,
   grayscale-filtered thumbnails squeezed next to a tiny label. */
.footer-collab-band{max-width:var(--maxw);width:calc(100% - 48px);margin:48px auto 0;padding-top:36px;border-top:1px solid var(--line);text-align:center}
.fcb-label{display:block;font-family:var(--f-sans);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px}
.fcb-logos{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.fcb-logo-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 30px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(26,28,29,.05);transition:border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.fcb-logo-card:hover{border-color:rgba(43,168,156,.35);box-shadow:0 12px 26px -12px rgba(43,168,156,.32);transform:translateY(-2px)}
.fcb-logo-card img{height:34px;width:auto;max-width:150px;object-fit:contain}
@media(max-width:560px){
  .footer-collab-band{margin-top:36px;padding-top:28px}
  .fcb-logo-card{padding:14px 22px}
  .fcb-logo-card img{height:28px}
}

/* ---------- WhatsApp float ---------- */
.whatsapp-float{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.45);z-index:700}
.whatsapp-float:hover{color:#fff;transform:scale(1.06)}

/* ---------- Generic cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* icon chip */
.icon-chip{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-deep);margin-bottom:18px}
.icon-chip svg{width:28px;height:28px}

/* ---------- Image placeholder (real photos added later) ---------- */
.ai-ph{position:relative;width:100%;border-radius:16px;overflow:hidden;display:grid;place-items:center;color:rgba(255,255,255,.7)}
.ai-ph svg{width:48px;height:48px;opacity:.7}
.ai-ph span{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:.76rem;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.85);padding:0 12px}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Feature list (checkmarks) ---------- */
.check-list{list-style:none}
.check-list li{position:relative;padding-left:30px;margin-bottom:12px;font-size:.96rem}
.check-list li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--brand-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E5D58' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center}

/* ---------- Accordion (FAQ) ---------- */
.accordion{display:flex;flex-direction:column;gap:14px}
.acc-item{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:border-color .3s ease,box-shadow .3s ease}
.acc-item:hover{border-color:rgba(43,168,156,.3)}
.acc-item.open{border-color:rgba(43,168,156,.4);box-shadow:0 14px 32px -18px rgba(43,168,156,.28)}
.acc-head{width:100%;text-align:left;background:transparent;border:0;padding:20px 24px;font-family:var(--f-sans);font-weight:700;font-size:1rem;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.acc-item.open .acc-head{color:var(--teal-deep)}
.acc-head .acc-ico{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--teal-soft);color:var(--teal-deep);display:grid;place-items:center;font-size:1.2rem;font-weight:600;line-height:1;transition:background .3s ease,color .3s ease,transform .3s ease}
.acc-item.open .acc-head .acc-ico{background:var(--teal);color:#fff;transform:rotate(135deg)}
/* A generous static cap (never a measured value) so the open state never depends on
   JS scrollHeight timing — which used to go stale against late web-font swaps and
   clip the first-open item — and never relies on a CSS-grid 0-track/overflow edge
   case that could let a sliver of closed content paint through on a cold load. */
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.acc-item.open .acc-body{max-height:1000px}
.acc-body-inner{padding:0 24px 22px;color:var(--muted);font-size:.95rem;line-height:1.65}
.acc-body-inner a{font-weight:700}
.acc-group-label{display:block;font-family:var(--f-sans);font-weight:800;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-deep);margin:14px 0 -2px;padding-left:2px}
.acc-group-label:first-child{margin-top:0}

/* ---------- Forms ---------- */
.form-field{margin-bottom:18px}
.form-field label{display:block;font-weight:600;font-size:.9rem;color:var(--ink);margin-bottom:7px}
.form-field label .req{color:var(--danger)}
.form-control{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.form-control:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(43,168,156,.15)}
textarea.form-control{min-height:130px;resize:vertical}
select.form-control{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  color:var(--ink);padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2383888D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
select.form-control::-ms-expand{display:none}
.form-note{font-size:.85rem;color:var(--muted)}
.form-msg{margin-top:14px;padding:13px 16px;border-radius:12px;font-weight:600;font-size:.9rem;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:var(--brand-soft);color:var(--brand-deep)}
.form-msg.err{background:var(--danger-bg);color:var(--danger)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Badges / pills ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:100px;background:var(--brand-soft);color:var(--brand-deep);font-weight:700;font-size:.78rem;border:1px solid rgba(43,168,156,.25)}
.pill-amber{background:#FEF3E2;color:var(--amber);border-color:rgba(217,119,6,.25)}

/* ============================================================
   Page-specific styles are appended below via @import-free
   single-file build. Sections are grouped by page.
   ============================================================ */

/* ---------- HOME: hero ---------- */
.home-hero{position:relative;padding:90px 0 100px;background:linear-gradient(135deg,#2BA89C 0%,#2BA89C 55%,#33B9AC 100%);color:#fff;overflow:hidden}
.home-hero::before{content:"";position:absolute;top:-120px;right:-80px;width:520px;height:520px;background:radial-gradient(circle,rgba(90,214,204,.35),transparent 65%)}
.home-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;max-width:var(--maxw);width:calc(100% - 48px);margin-inline:auto}
.home-hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.08}
.home-hero h1 .hl{color:#7EE8DD}
.home-hero p.lead{color:rgba(255,255,255,.9);font-size:1.1rem;max-width:520px;margin:18px 0 30px}
.home-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.home-hero .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
.home-hero .btn-ghost:hover{background:#fff;color:var(--brand-deep)}
.hero-stats{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap}
.hero-stat b{display:block;font-family:var(--f-serif);font-size:1.9rem;color:#7EE8DD;line-height:1}
.hero-stat span{font-size:.82rem;color:rgba(255,255,255,.8)}
.hero-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);padding:10px;backdrop-filter:blur(4px)}
.hero-card img{border-radius:16px;width:100%;object-fit:cover;aspect-ratio:4/3.4}
.hero-card-tag{display:flex;align-items:center;gap:10px;padding:14px 16px;color:#fff}
.hero-card-tag b{font-family:var(--f-serif);font-size:1.15rem}

/* ---------- HOME: trust band (IAHPA + ACC) ---------- */
.trust{background:var(--brand-soft-2)}
.trust-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
.trust-copy .eyebrow{color:var(--brand)}
.trust-copy h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.trust-logos{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.trust-logo-card{background:linear-gradient(160deg,#fff,var(--bg-soft));border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 26px 26px;text-align:center;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:180px}
.trust-logo-card .tlc-logo{height:56px;width:100%;display:flex;align-items:center;justify-content:center}
.trust-logo-card img{height:100%;width:auto;max-width:100%;object-fit:contain}
.trust-logo-card span{position:relative}
.trust-logo-card span{font-size:.8rem;color:var(--muted);font-weight:600}

/* ---------- HOME: course highlight ---------- */
.course-highlight{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow)}
.course-highlight-img{border-radius:18px;overflow:hidden;position:relative}
.course-highlight-img img{width:100%;height:100%;object-fit:cover;min-height:320px}
.course-highlight-body{padding:22px 30px 22px 6px}
.course-price-row{display:flex;align-items:baseline;gap:10px;margin:6px 0 18px}
.course-price-row .amt{font-family:var(--f-serif);font-size:2.1rem;color:var(--brand-deep)}
.course-price-row .tax{font-size:.85rem;color:var(--muted)}
.course-meta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px}
.course-meta .pill{background:var(--bg-soft);color:var(--body);border-color:var(--line)}

/* ---------- HOME: learn grid ---------- */
.learn-card{text-align:center;padding:30px 22px}
.learn-card .icon-chip{margin-inline:auto}

/* ---------- Why choose cards ---------- */
.why-card{padding:32px 26px}
.why-card .icon-chip{background:var(--brand-soft)}
.why-card h3{font-size:1.28rem;margin-bottom:8px}
.why-card p{color:var(--muted);font-size:.94rem;margin:0}

/* ---------- Who we are / split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split-imgs img{border-radius:14px;width:100%;object-fit:cover;aspect-ratio:1}
.vm-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px}
.vm-item .icon-chip{width:48px;height:48px;border-radius:12px;margin-bottom:12px}
.vm-item h4{font-size:1.15rem;margin-bottom:6px}
.vm-item p{font-size:.9rem;color:var(--muted);margin:0}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--brand-deep),var(--brand-deep-2));color:#fff;text-align:center;border-radius:var(--radius-lg);padding:58px 30px}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.cta-band p{color:rgba(255,255,255,.9);max-width:560px;margin:0 auto 26px}
.cta-band .btn-primary{background:#fff;color:var(--brand-deep)}
.cta-band .btn-primary:hover{background:var(--ink);color:#fff}

/* ---------- COURSE page ---------- */
.course-content-band{position:relative;background:var(--cream);overflow:hidden}
.course-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:start}
.course-layout>*{min-width:0}
.course-tabs{display:inline-flex;gap:4px;background:var(--teal-soft);border-radius:100px;padding:6px;margin-bottom:32px}
.course-tab{padding:12px 24px;font-weight:700;color:var(--teal-deep);border:0;background:transparent;border-radius:100px;cursor:pointer;font-family:inherit;font-size:.94rem;transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.course-tab.active{background:#fff;color:var(--ink);box-shadow:0 8px 20px -10px rgba(15,23,41,.3)}
.course-panel{display:none}
.course-panel.active{display:block}
/* Sticky applies to the WHOLE sidebar stack (buy card + collab logos) as one
   unit — sticking only the buy card while collab-mini stayed in normal flow
   let the two visually collide mid-scroll (the stuck card rendering on top
   of collab-mini scrolling up underneath it). */
.course-aside-sticky{position:sticky;top:100px}
.course-buy-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.course-buy-card>img{width:100%;aspect-ratio:16/10;object-fit:cover}
.course-buy-body{padding:26px}
.course-buy-body h3{font-size:1.25rem;margin-bottom:16px}
.buy-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.buy-row:last-of-type{border-bottom:0}
.buy-row .k{display:flex;align-items:center;gap:9px;color:var(--muted)}
.buy-row .k svg{width:18px;height:18px;color:var(--brand)}
.buy-row .v{font-weight:700;color:var(--ink)}
.buy-row .v .amt{color:var(--brand-deep);font-family:var(--f-serif);font-size:1.3rem}
.buy-row .v .tax{font-size:.72rem;color:var(--muted);font-weight:500}
.course-collab-mini{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;text-align:center}
.course-collab-mini .ccm-label{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin-bottom:16px}
.course-collab-mini .ccm-logos{display:flex;align-items:center;justify-content:center;gap:24px}
.course-collab-mini .ccm-logos img{height:32px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s ease,opacity .3s ease}
.course-collab-mini .ccm-logos img:hover{filter:grayscale(0);opacity:1}
.treatments-covered{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px}
.treatments-covered .card{transition:border-color .3s ease,box-shadow .3s ease}
.treatments-covered .card:hover{border-color:rgba(43,168,156,.35);box-shadow:0 14px 32px -18px rgba(43,168,156,.28)}
.treatments-covered .card .tc-mini-ic{width:38px;height:38px;border-radius:10px;background:var(--teal-soft);color:var(--teal-deep);display:grid;place-items:center;margin-bottom:14px}

.buy-quickfacts{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.bqf-item{display:flex;align-items:center;gap:9px;padding:13px 16px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.bqf-item:nth-child(-n+2){border-top:0}
.bqf-item:nth-child(odd){border-left:0}
.bqf-item .bqf-ic{width:26px;height:26px;border-radius:8px;background:var(--teal-soft);color:var(--teal-deep);display:grid;place-items:center;flex-shrink:0}
.bqf-item .bqf-ic svg{width:15px;height:15px}
.bqf-item span:last-child{font-family:var(--f-sans);font-weight:700;font-size:.78rem;color:var(--ink);line-height:1.25}

.wce-slider{margin-top:18px}
.wce-viewport{overflow:hidden;padding:8px 0 2px;min-width:0}
.wce-track{display:flex;gap:16px;transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform}
.wce-card{flex:0 0 auto;width:250px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 20px 22px;box-shadow:var(--shadow-sm);opacity:.4;transform:scale(.92);transition:opacity .45s ease,transform .45s ease,border-color .45s ease,box-shadow .45s ease;cursor:pointer}
.wce-card.active{opacity:1;transform:scale(1);border-color:rgba(43,168,156,.35);box-shadow:0 14px 34px rgba(26,28,29,.12)}
.wce-top{display:flex;align-items:center;gap:10px}
.wce-card .why4-num{width:36px;height:36px;font-size:.85rem}
.wce-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-deep);background:var(--teal-soft);border-radius:100px;padding:4px 10px}
.wce-card h4{font-family:var(--f-sans);font-weight:800;color:var(--ink);font-size:1rem;margin:14px 0 8px;line-height:1.3}
.wce-card p{font-size:.84rem;line-height:1.55;color:var(--muted);margin:0}
.wce-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.wce-arr{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--teal-deep);display:grid;place-items:center;cursor:pointer;transition:all .2s ease;flex-shrink:0;padding:0}
.wce-arr:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.wce-arr svg{width:13px;height:13px}
.wce-dots{display:flex;gap:6px;align-items:center}
.wce-dot{width:6px;height:6px;border-radius:50%;background:rgba(43,168,156,.25);transition:all .25s ease;cursor:pointer;display:inline-block}
.wce-dot.active{width:20px;border-radius:3px;background:var(--teal)}
.wce-more{margin-top:14px;font-size:.85rem}
.wce-more a{color:var(--teal-deep);font-weight:700}
@media(max-width:640px){.wce-card{width:220px}}

.cd-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin-top:22px}
.cd-body{padding:26px 28px 28px}
.cd-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}

.buy-trust{display:flex;align-items:flex-start;gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted);line-height:1.5}
.buy-trust svg{width:18px;height:18px;flex-shrink:0;color:var(--teal);margin-top:1px}

/* ---------- Education (anti-wrinkle / dermal filler) ---------- */
.edu-intro{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.edu-block{margin-bottom:20px}
.edu-tag{display:inline-block;background:var(--brand);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:8px;margin-bottom:14px}
.edu-day{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:40px}
.edu-day.flip .edu-day-img{order:2}
.edu-daycard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.edu-daycard .pill{margin-bottom:14px}
.brand-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.brand-tags span{background:var(--brand-soft);color:var(--brand-deep);font-weight:600;font-size:.82rem;padding:6px 12px;border-radius:8px}
.note-box{background:#FFFBF2;border-left:3px solid var(--amber);border-radius:8px;padding:12px 16px;font-size:.84rem;color:#8a6d3b;margin-top:12px}

/* ---------- Team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px;text-align:center;box-shadow:var(--shadow-sm)}
.team-avatar{width:110px;height:110px;border-radius:50%;margin:0 auto 16px;background:linear-gradient(135deg,var(--brand-soft),#DDECEA);display:grid;place-items:center;color:var(--brand-deep);border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.team-avatar svg{width:46px;height:46px;opacity:.5}
.team-card h4{font-size:1.15rem;margin-bottom:4px}
.team-role{display:inline-block;background:var(--brand-soft);color:var(--brand-deep);font-size:.76rem;font-weight:700;padding:5px 12px;border-radius:100px;margin-bottom:12px}
.team-card p{font-size:.86rem;color:var(--muted);margin:0}

/* ---------- Contact ---------- */
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
.contact-info-item{display:flex;gap:16px;margin-bottom:24px}
.contact-info-item .icon-chip{width:46px;height:46px;border-radius:12px;margin:0;flex-shrink:0}
.contact-info-item h4{font-size:1.05rem;margin-bottom:2px}
.contact-info-item p{margin:0;color:var(--muted);font-size:.94rem}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow)}
.map-embed{width:100%;height:420px;border:0;display:block}

/* ---------- Legal ---------- */
.legal-layout{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start}
.legal-nav{position:sticky;top:100px;list-style:none;border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff}
.legal-nav a{display:block;padding:11px 14px;border-radius:9px;font-weight:600;font-size:.9rem;color:var(--ink)}
.legal-nav a:hover{background:var(--brand-soft-2);color:var(--brand-deep)}
.legal-content h2{font-size:1.6rem;margin-top:38px;padding-top:14px}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-size:1.15rem;margin-top:22px}
.legal-content p,.legal-content li{color:var(--body);font-size:.96rem}
.legal-content ul{padding-left:20px;margin-bottom:16px}
.legal-content li{margin-bottom:8px}

/* ---------- Login ---------- */
.auth-wrap{min-height:70vh;display:grid;place-items:center;padding:70px 0;background:var(--bg-soft)}
.auth-card{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:40px}
.auth-card h1{font-size:1.7rem;text-align:center;margin-bottom:6px}
.auth-card .sub{text-align:center;color:var(--muted);font-size:.92rem;margin-bottom:26px}
.auth-tabs{display:flex;background:var(--bg-soft);border-radius:100px;padding:5px;margin-bottom:26px}
.auth-tab{flex:1;padding:11px;border:0;background:transparent;border-radius:100px;font-family:inherit;font-weight:700;font-size:.92rem;color:var(--muted);cursor:pointer}
.auth-tab.active{background:#fff;color:var(--brand-deep);box-shadow:var(--shadow-sm)}
.auth-form{display:none}
.auth-form.active{display:block}

/* ---------- Dashboard ---------- */
.dash-hero{background:linear-gradient(120deg,#2BA89C,#2BA89C);color:#fff;padding:44px 0}
.dash-hero-inner{max-width:var(--maxw);width:calc(100% - 48px);margin-inline:auto;display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap}
.dash-hero h1{color:#fff;margin:0;font-size:1.9rem}
.dash-hero p{margin:4px 0 0;color:rgba(255,255,255,.85)}
.dash-logout{color:#fff;border:1.5px solid rgba(255,255,255,.5);padding:10px 20px;border-radius:100px;font-weight:700;font-size:.88rem;flex-shrink:0}
.dash-logout:hover{background:#fff;color:var(--brand-deep)}
.dash-hero-progress{margin-top:18px;max-width:360px}
.dash-hero-progress .bar-track{height:8px;border-radius:100px;background:rgba(255,255,255,.28);overflow:hidden}
.dash-hero-progress .bar-fill{display:block;height:100%;background:#fff;border-radius:100px;transition:width .4s}
.dash-hero-progress .bar-label{font-size:.78rem;color:rgba(255,255,255,.9);margin-top:7px;font-weight:600}

/* ---------- Dashboard app shell: left tab rail + right content ---------- */
.dash-app{display:grid;grid-template-columns:230px 1fr;gap:26px;align-items:start}
.dash-nav{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px;box-shadow:var(--shadow-sm);position:sticky;top:100px}
.dash-nav-tab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 16px;border-radius:12px;font-weight:700;font-size:.92rem;color:var(--body)}
.dash-nav-tab .dnt-ic{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;color:var(--muted)}
.dash-nav-tab .dnt-ic svg{width:20px;height:20px}
.dash-nav-tab .dnt-badge{margin-left:auto;font-size:.72rem;font-weight:800;color:var(--muted);background:var(--bg-soft);padding:2px 8px;border-radius:100px}
.dash-nav-tab.active{background:var(--brand-soft);color:var(--brand-deep);box-shadow:none}
.dash-nav-tab.active .dnt-ic{color:var(--brand-deep)}
.dash-nav-tab.active .dnt-badge{background:#fff;color:var(--brand-deep)}
.dash-nav-tab:hover:not(.active){background:var(--bg-soft)}

.dash-content .course-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
.dash-tab-head{margin-bottom:20px}
.dash-tab-head h2{font-size:1.2rem;margin:0 0 6px}
.dash-tab-head p{color:var(--muted);margin:0}

.dash-enrolled-card{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.dash-enrolled-card h2{font-size:1.25rem;margin:8px 0 6px}
.dash-enrolled-card p{color:var(--muted);margin:0;max-width:460px}

.dash-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dash-cta-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--bg-soft);border-radius:14px;padding:18px 20px;flex-wrap:wrap}
.dash-cta-banner b{display:block;font-size:.96rem;color:var(--ink)}
.dash-cta-banner p{margin:3px 0 0;color:var(--muted);font-size:.84rem}

.dm-list{display:flex;flex-direction:column;gap:12px}
.dm-row{display:flex;align-items:center;gap:18px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);transition:border-color .2s,box-shadow .2s}
.dm-row:hover{border-color:var(--brand-soft);box-shadow:var(--shadow-sm)}
.dm-row.complete{background:#fff}
.dm-num{width:38px;height:38px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:grid;place-items:center;font-weight:800;flex-shrink:0}
.dm-row.complete .dm-num{background:var(--brand);color:#fff}
.dm-info{flex:1;min-width:0}
.dm-info b{display:block;color:var(--ink);font-size:1rem;margin-bottom:6px}
.dm-tag{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);font-weight:600;white-space:nowrap}
.dm-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted-2);flex-shrink:0}
.dm-tag.done{color:var(--brand-deep)}
.dm-tag.done::before{background:var(--brand)}
.dm-tag.progress{color:var(--amber)}
.dm-tag.progress::before{background:var(--amber)}
.dm-tag.locked{opacity:.65}
.dm-action{flex-shrink:0}

.status-tag{font-size:.74rem;font-weight:800;padding:5px 12px;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
.status-tag.notstarted{background:#F1F5F9;color:var(--muted)}
.status-tag.progress{background:#FEF3E2;color:var(--amber)}
.status-tag.done{background:var(--brand-soft);color:var(--brand-deep)}

/* ---------- Course viewer ---------- */
.viewer-wrap{max-width:1000px;width:calc(100% - 48px);margin:40px auto}
.viewer-frame{width:100%;height:78vh;border:1px solid var(--line);border-radius:14px;background:#fff}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}

/* Module/assessment switcher — shared by the course viewer and the quiz page */
.viewer-modules{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.vm-chip{display:flex;align-items:center;gap:9px;padding:9px 16px 9px 9px;border:1.5px solid var(--line);border-radius:100px;
  background:#fff;font-size:.84rem;font-weight:700;color:var(--ink);transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.vm-chip:hover{border-color:rgba(43,168,156,.4)}
.vm-chip.active{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 6px 16px -8px rgba(43,168,156,.35)}
.vm-num{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:grid;place-items:center;
  font-size:.76rem;font-weight:800;flex-shrink:0}
.vm-chip.active .vm-num{background:var(--brand);color:#fff}
.vm-chip.done .vm-num{background:var(--brand);color:#fff}
.vm-chip.locked{opacity:.55}
.vm-chip.locked .vm-num{background:#F1F5F9;color:var(--muted)}
.vm-title{max-width:180px;line-height:1.25}
@media(max-width:640px){
  .viewer-modules{gap:8px}
  .vm-title{max-width:120px;font-size:.8rem}
}

/* ---------- Quiz ---------- */
.quiz-wrap{max-width:780px;width:calc(100% - 48px);margin:44px auto}
.quiz-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:36px}
.quiz-progress{height:8px;background:var(--bg-soft);border-radius:100px;overflow:hidden;margin-bottom:24px}
.quiz-progress span{display:block;height:100%;background:var(--brand);width:0;transition:width .3s}
.quiz-q h3{font-size:1.3rem;margin-bottom:20px}
.quiz-opts{display:flex;flex-direction:column;gap:12px}
.quiz-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;font-weight:600;color:var(--ink);transition:.15s}
.quiz-opt:hover{border-color:var(--brand);background:var(--brand-soft-2)}
.quiz-opt.selected{border-color:var(--brand);background:var(--brand-soft)}
.quiz-opt input{accent-color:var(--brand);width:18px;height:18px}
.quiz-nav{display:flex;justify-content:space-between;margin-top:28px;gap:14px}
.quiz-result{text-align:center;padding:20px 0}
.quiz-result .score-ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;font-family:var(--f-serif);font-size:2.4rem}
.quiz-result.pass .score-ring{background:conic-gradient(var(--brand) var(--pct),var(--bg-soft) 0);color:var(--brand-deep)}
.quiz-result.fail .score-ring{background:conic-gradient(var(--amber) var(--pct),var(--bg-soft) 0);color:var(--amber)}
.quiz-result .score-ring i{width:118px;height:118px;background:#fff;border-radius:50%;display:grid;place-items:center;font-style:normal}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1024px){
  .footer-inner{grid-template-columns:1fr 1fr}
  .home-hero-inner,.trust-inner,.course-highlight,.split,.edu-intro,.edu-day,.contact-layout,.course-layout,.legal-layout{grid-template-columns:1fr}
  .course-buy-card{position:static;max-width:460px}
  .legal-nav{position:static}
  .team-grid,.grid-4{grid-template-columns:repeat(2,1fr)}
  .edu-day.flip .edu-day-img{order:0}
  .dash-app{grid-template-columns:1fr}
  .dash-nav{position:static;flex-direction:row;overflow-x:auto;gap:6px}
  .dash-nav-tab{width:auto;white-space:nowrap;padding:11px 16px}
}
@media(max-width:640px){
  .dm-row{flex-wrap:wrap}
  .dm-action{width:100%}
  .dm-action .btn{width:100%;text-align:center}
  .dash-cta-row{grid-template-columns:1fr}
  .dash-enrolled-card .btn{width:100%;text-align:center;justify-content:center}
}
@media(max-width:860px){
  .topbar{display:none}
  .nav-toggle{display:flex}
  .nav-menu{position:fixed;inset:var(--nav-h) 0 auto 0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:14px 20px 24px;margin:0;max-height:calc(100vh - var(--nav-h));overflow:auto;transform:translateY(-12px);opacity:0;visibility:hidden;transition:.22s}
  .nav-menu.open{transform:none;opacity:1;visibility:visible}
  .nav-menu>ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav-menu>ul>li>a{padding:14px}
  .has-sub .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--brand-soft);border-radius:0;margin-left:14px;padding:0}
  .nav-account{display:none}
  .nav-cta-mobile{display:block;margin-top:14px}
  .grid-3,.grid-2,.treatments-covered,.trust-logos,.vm-row,.split-imgs{grid-template-columns:1fr}
  .section{padding:60px 0}
}
@media(max-width:560px){
  .team-grid,.grid-4{grid-template-columns:1fr}
  .container{width:calc(100% - 32px)}
  .btn{padding:13px 24px}
  .quiz-card,.auth-card,.contact-card{padding:24px}
}

/* ============================================================
   REFINED FINISHES v2 — real photography, motifs, editorial detail
   ============================================================ */
.deco-dots{position:absolute;width:180px;height:180px;background-image:radial-gradient(var(--brand) 2px,transparent 2px);background-size:16px 16px;opacity:.18;z-index:0;pointer-events:none}
.deco-ring{position:absolute;width:230px;height:230px;border-radius:50%;border:2px dashed rgba(43,168,156,.35);opacity:.5;z-index:0;pointer-events:none}
.deco-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;pointer-events:none}

.framed{position:relative;display:block;z-index:1}
.framed>img,.framed .ai-ph{position:relative;z-index:2;border-radius:var(--radius-lg);width:100%;object-fit:cover;box-shadow:var(--shadow);display:block}
.framed::before{content:"";position:absolute;z-index:1;inset:18px -18px -18px 18px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--brand),var(--brand-deep));opacity:.16}
.framed.tr::before{inset:-18px 18px 18px -18px}
.framed.dots::after{content:"";position:absolute;z-index:0;width:120px;height:120px;right:-30px;top:-30px;background-image:radial-gradient(var(--brand) 2px,transparent 2px);background-size:15px 15px;opacity:.4}

/* About Us — 4-photo arch collage. Two columns staggered like a brick course;
   the top-right and bottom-left tiles get an oversized border-radius on one
   end, which the browser clamps into a true semicircular arch — an echo of
   the dotted-arc curve in the logo, not a generic corner-rounding trick. */
.about-collage{position:relative;display:flex;gap:20px;z-index:1;padding:10px 0 46px 34px}
.about-collage::before{content:"";position:absolute;z-index:0;width:130px;height:130px;left:0;bottom:14px;background-image:radial-gradient(var(--brand) 2px,transparent 2px);background-size:16px 16px;opacity:.35}
.ac-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;flex:1;min-width:0}
.ac-col-shift{margin-top:52px}
.ac-tile{overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/3.6}
.ac-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ac-plain{border-radius:0}
.ac-arch-top{border-radius:999px 999px var(--radius-lg) var(--radius-lg)}
.ac-arch-bottom{border-radius:var(--radius-lg) var(--radius-lg) 999px 999px}
.about-collage .why4-badge{position:absolute;left:-6px;bottom:0;z-index:2}
@media(max-width:640px){
  .about-collage{padding-left:14px;padding-bottom:56px}
  .ac-col-shift{margin-top:32px}
  .about-collage .why4-badge{left:2px}
}

.float-badge{position:absolute;z-index:5;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;border:1px solid var(--line)}
.float-badge .fb-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-deep);flex-shrink:0}
.float-badge b{display:block;font-family:var(--f-serif);font-size:1.15rem;color:var(--ink);line-height:1}
.float-badge span{font-size:.78rem;color:var(--muted)}

.eyebrow{display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);border-radius:2px}
.text-center .eyebrow::before{display:none}
.grad{background:linear-gradient(100deg,var(--brand),var(--brand-deep-2));-webkit-background-clip:text;background-clip:text;color:transparent}

.btn{position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand-deep-2))}
.btn-primary:hover{background:linear-gradient(120deg,var(--brand-deep-2),var(--brand-deep))}

.home-hero{padding:80px 0 130px;background:radial-gradient(1200px 600px at 78% -10%,#33B9AC 0%,transparent 55%),linear-gradient(135deg,#2BA89C 0%,#2BA89C 60%,#2BA89C 100%)}
.home-hero::before{display:none}
.home-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:var(--bg);border-radius:50% 50% 0 0/100% 100% 0 0;z-index:1}
.home-hero-inner{position:relative;z-index:2;display:block}
.hero-collage{position:relative;min-height:440px}
.hero-collage .shot-a{position:relative;z-index:2;width:82%;margin-left:auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35);aspect-ratio:4/3.2}
.hero-collage .shot-a img{width:100%;height:100%;object-fit:cover}
.hero-collage .shot-b{position:absolute;z-index:3;left:0;bottom:-26px;width:46%;border-radius:18px;overflow:hidden;border:5px solid #fff;box-shadow:0 20px 44px rgba(0,0,0,.3);aspect-ratio:3/3.4}
.hero-collage .shot-b img{width:100%;height:100%;object-fit:cover}
.hero-collage .deco-dots{top:-24px;right:-10px;opacity:.5;background-image:radial-gradient(#7EE8DD 2px,transparent 2px)}
.hero-collage .float-badge{right:-10px;top:34%}
.hero-stat b{color:#7EE8DD}

.stats-band{background:var(--brand-deep);color:#fff;border-radius:var(--radius-lg);padding:34px 20px;display:grid;grid-template-columns:repeat(4,1fr);position:relative;overflow:hidden}
.stats-band .deco-dots{right:20px;bottom:-40px;opacity:.14;background-image:radial-gradient(#fff 2px,transparent 2px)}
.stats-band .st{text-align:center;padding:6px 18px;position:relative;z-index:2}
.stats-band .st+.st{border-left:1px solid rgba(255,255,255,.16)}
.stats-band .st b{display:block;font-family:var(--f-serif);font-size:2.3rem;color:#7EE8DD;line-height:1}
.stats-band .st span{font-size:.86rem;color:rgba(255,255,255,.82)}

.why-card{position:relative;overflow:hidden;padding-top:30px}
/* Soft 3D watermark number, sitting neatly in the top-right of the card. */
.why-card::before{content:attr(data-n);position:absolute;top:16px;right:20px;z-index:0;
  font-family:var(--f-head);font-weight:800;font-size:4.6rem;line-height:1;letter-spacing:-.04em;
  color:#EAF6F3;
  text-shadow:1px 1px 0 #dcefeb,2px 2px 0 #cfe9e4,3px 5px 9px rgba(14,93,88,.10);
  pointer-events:none}
.why-card>*{position:relative;z-index:1}
.icon-chip{transition:background .25s,color .25s,transform .25s}

.split-imgs{position:relative;gap:16px}
.split-imgs img{box-shadow:var(--shadow-sm)}
.split-imgs img:nth-child(1){margin-top:26px}
.split-imgs img:nth-child(4){margin-top:-26px}
.split-imgs .deco-dots{right:-24px;bottom:-24px;z-index:-1}

.trust{position:relative;overflow:hidden}
.trust .deco-ring{right:-90px;top:-70px}
.trust-logo-card{transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.trust-logo-card::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--brand),var(--brand-deep))}
.trust-logo-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.course-highlight{position:relative}
.course-highlight-img{position:relative}
.course-highlight-img .float-badge{left:-16px;bottom:22px}
.course-price-row .amt{background:linear-gradient(100deg,var(--brand),var(--brand-deep-2));-webkit-background-clip:text;background-clip:text;color:transparent}

.learn-card{transition:transform .25s,box-shadow .25s;border-top:3px solid transparent}
.learn-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-top-color:var(--brand)}

.home-hero .hero-stats{border-top:1px solid rgba(255,255,255,.15);padding-top:24px}

.page-hero{position:relative;overflow:hidden;background:radial-gradient(900px 380px at 82% -20%,#33B9AC,transparent 60%),linear-gradient(120deg,#2BA89C,#2BA89C)}
.page-hero::after{background:radial-gradient(700px 260px at 15% 120%,rgba(90,214,204,.25),transparent)}
.page-hero .deco-dots{left:6%;bottom:-30px;opacity:.16;background-image:radial-gradient(#fff 2px,transparent 2px)}

.team-avatar{overflow:hidden}
.team-avatar img{width:100%;height:100%;object-fit:cover}
.team-card{transition:transform .25s,box-shadow .25s}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.quote-band{position:relative;background:var(--brand-soft-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;overflow:hidden}
.quote-band .qmark{font-family:var(--f-serif);font-size:5rem;color:var(--brand);line-height:.6;opacity:.35}
.quote-band p{font-family:var(--f-serif);font-size:1.5rem;color:var(--ink);margin:0;line-height:1.35}
.quote-band .qby{font-family:var(--f-sans);font-size:.9rem;color:var(--muted);margin-top:10px;font-weight:600}

@media(max-width:1024px){
  .stats-band{grid-template-columns:1fr 1fr;gap:22px 0}
  .stats-band .st:nth-child(3){border-left:0}
  .home-hero-grid{grid-template-columns:1fr!important;gap:10px!important}
  .hero-collage{min-height:0;margin-top:20px}
  .hero-collage .shot-a{width:100%}
  .quote-band{grid-template-columns:1fr;padding:32px}
}
@media(max-width:860px){
  .stats-band{grid-template-columns:1fr}
  .stats-band .st+.st{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:18px;margin-top:12px}
  .hero-collage .shot-b{position:static;width:60%;margin:16px auto 0}
  .hero-collage .float-badge{position:static;display:inline-flex;margin-top:16px}
  .split-imgs img:nth-child(1),.split-imgs img:nth-child(4){margin-top:0}
}

/* ============================================================
   HERO v3 + light page heroes — modern SaaS look
   ============================================================ */
.hero3{position:relative;overflow:hidden;background:linear-gradient(180deg,#F4FAF9 0%,#FBFDFD 70%);padding:60px 0 92px;border-bottom:1px solid var(--line)}
.hero3::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(20,120,110,.10) 1.1px,transparent 1.1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(1100px 620px at 50% -5%,#000,transparent 72%);mask-image:radial-gradient(1100px 620px at 50% -5%,#000,transparent 72%);opacity:.8}
.hero3 .blob{position:absolute;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none}
.hero3 .blob-1{width:540px;height:540px;background:radial-gradient(circle,rgba(126,232,221,.55),transparent 66%);top:-190px;right:-130px}
.hero3 .blob-2{width:460px;height:460px;background:radial-gradient(circle,rgba(43,168,156,.20),transparent 66%);bottom:-210px;left:-160px}
.hero3-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero3 h1{font-family:var(--f-head);font-weight:800;font-size:clamp(2rem,3.8vw,3rem);line-height:1.06;letter-spacing:-.035em;color:var(--ink);margin:18px 0 0}
.hero3 h1 .hl{position:relative;color:var(--brand-deep);z-index:0}
.hero3 h1 .hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.08em;height:.30em;background:linear-gradient(90deg,rgba(43,168,156,.30),rgba(126,232,221,.45));z-index:-1;border-radius:4px}
.hero3-sub{font-size:1.1rem;color:var(--muted);max-width:490px;margin:22px 0 28px;line-height:1.65}
.badge3{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 15px 7px 11px;font-weight:600;font-size:.82rem;color:var(--ink);box-shadow:var(--shadow-sm)}
.badge3 .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(43,168,156,.18)}
.hero3-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero3-trust{display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.hero3-trust .lbl{font-size:.72rem;color:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.hero3-trust img{height:34px;width:auto;opacity:.85}

/* bento cluster — balanced 2x2, equal square tiles */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bento>*{border-radius:20px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:1/0.96}
.bento img{width:100%;height:100%;object-fit:cover;display:block}
.b-hero .chip{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);color:var(--brand-deep);font-size:.72rem;font-weight:700;padding:6px 12px;border-radius:100px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.b-hero .chip svg{width:13px;height:13px}
.b-stat{background:linear-gradient(150deg,var(--brand-deep),var(--brand-deep-2));color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:flex-end}
.b-stat .ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;margin-bottom:auto}
.b-stat .ic svg{width:22px;height:22px}
.b-stat b{font-family:var(--f-head);font-weight:800;font-size:2.1rem;line-height:1;color:#fff;letter-spacing:-.03em}
.b-stat span{font-size:.85rem;color:rgba(255,255,255,.85);margin-top:6px}
.b-price{background:#fff;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;justify-content:flex-end}
.b-price .ic{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand-deep);display:grid;place-items:center;margin-bottom:auto}
.b-price .ic svg{width:22px;height:22px}
.b-price .k{font-size:.7rem;color:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.b-price b{font-family:var(--f-head);font-weight:800;font-size:1.9rem;color:var(--brand-deep);letter-spacing:-.03em;margin-top:2px;line-height:1}
.b-price span{font-size:.78rem;color:var(--muted);margin-top:4px}

/* ghost button on light hero */
.hero3 .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.hero3 .btn-ghost:hover{border-color:var(--brand);color:var(--brand-deep)}

/* 4-image staggered hero grid (clean, no cards) */
.hero3-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.hero3-grid .col{display:flex;flex-direction:column;gap:16px}
.hero3-grid .col:last-child{margin-top:36px}
.hero3-grid img{position:relative;z-index:2;width:100%;border-radius:18px;object-fit:cover;aspect-ratio:1/1.12;box-shadow:var(--shadow)}
.hero3-grid .deco-dots{top:-24px;left:-24px;width:120px;height:120px;opacity:.5;z-index:0}
@media(max-width:1024px){ .hero3-grid{max-width:520px;margin-inline:auto} }
@media(max-width:400px){ .hero3-grid .col:last-child{margin-top:0} }

@media(max-width:1024px){
  .hero3-inner{grid-template-columns:1fr;gap:38px}
  .bento{min-height:0}
  .hero3-left{text-align:center}
  .hero3-cta,.hero3-trust{justify-content:center}
  .hero3-sub{margin-inline:auto}
}
@media(max-width:520px){
  .bento>*{aspect-ratio:1/0.8}
}

/* ---- Lighter, modern inner-page hero (overrides the dark v2 band) ---- */
.page-hero{background:linear-gradient(180deg,#F4FAF9,#FBFDFD);color:var(--ink);padding:74px 0 60px;border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(20,120,110,.09) 1.1px,transparent 1.1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(900px 400px at 50% -10%,#000,transparent 72%);mask-image:radial-gradient(900px 400px at 50% -10%,#000,transparent 72%)}
.page-hero::after{background:radial-gradient(560px 240px at 82% -30%,rgba(126,232,221,.35),transparent)}
.page-hero>*{position:relative;z-index:2}
.page-hero h1{color:var(--ink)}
.page-hero .crumbs{color:var(--muted)}
.page-hero .crumbs a{color:var(--brand-deep)}
.page-hero .crumbs span{opacity:.5}
.page-hero .deco-dots{display:none}

/* ============================================================
   PREMIUM EDITORIAL v4 — homepage revamp (teal #2BA89C + warm neutrals)
   ============================================================ */
.wrap{max-width:var(--maxw);width:calc(100% - 48px);margin-inline:auto}
.wrap-wide{max-width:1320px;width:calc(100% - 48px);margin-inline:auto}
.serif{font-family:var(--f-display)}
.eyebrow4{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-sans);font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep)}
.eyebrow4::before{content:"";width:22px;height:1.5px;background:var(--teal)}
.eyebrow4.center{justify-content:center}
.kicker{text-align:center;max-width:680px;margin:0 auto 46px}
.kicker h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin:14px 0 12px;color:var(--ink);font-weight:500}
.kicker p{color:var(--muted);font-size:1.05rem;margin:0}
.hl{color:var(--teal);font-style:italic}

.btn{border-radius:100px;font-weight:600;letter-spacing:-.01em}
.btn-primary{background:var(--teal);box-shadow:0 10px 26px rgba(43,168,156,.28)}
.btn-primary:hover{background:var(--teal-deep)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;color:#fff}

/* ---------- HERO v4 (premium editorial) ---------- */
.hero4{position:relative;background:linear-gradient(180deg,var(--cream),#fff 78%);padding:58px 0 0;overflow:hidden;text-align:center}
.hero4 .aura{position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:900px;height:520px;background:radial-gradient(closest-side,rgba(43,168,156,.16),transparent);z-index:0;pointer-events:none}
.hero4-inner{position:relative;z-index:2;max-width:900px;margin-inline:auto}
.hero4 h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:20px 0 0}
.hero4 h1 em{font-style:italic;color:var(--teal)}
.hero4 .sub{font-size:1.14rem;color:var(--ink-2);max-width:620px;margin:22px auto 30px;line-height:1.6}
.hero4-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero4-trust{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-size:.86rem;font-weight:500}
.hero4-trust span{display:inline-flex;align-items:center;gap:8px}
.hero4-trust svg{width:16px;height:16px;color:var(--teal)}
.hero4-media{position:relative;z-index:2;margin-top:54px;border-radius:26px 26px 0 0;overflow:hidden;box-shadow:0 -10px 60px rgba(26,28,29,.10)}
.hero4-media img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.hero4-media .cap{position:absolute;left:22px;bottom:22px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:100px;padding:9px 16px;font-size:.8rem;font-weight:600;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.hero4-media .cap b{color:var(--teal-deep)}

/* ---------- Collaboration band — hero-vibe eyebrow/title + branded, clickable logo cards,
   set inside a soft-gradient "module" (same visual language as the Why Choose Us band) ---------- */
.collab{background:#fff}
.collab-band{position:relative;isolation:isolate;
  background:linear-gradient(155deg,#FFFFFF 0%,#F6FBFA 55%,#EFF8F7 100%);
  border:1px solid rgba(43,168,156,.14);border-radius:26px;
  padding:clamp(40px,5vw,64px) clamp(24px,5vw,56px);
  box-shadow:0 24px 60px -24px rgba(43,168,156,.28),0 4px 16px rgba(26,28,29,.05)}
.cb-bg{position:absolute;inset:0;z-index:0;border-radius:26px;overflow:hidden;pointer-events:none}
.cb-bg .cb-glow{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(43,168,156,.20),transparent 72%)}
.cb-bg .cb-glow-a{width:300px;height:300px;top:-130px;left:-90px}
.cb-bg .cb-glow-b{width:340px;height:340px;bottom:-170px;right:-80px}
.cb-bg .dotgrid{opacity:.5;-webkit-mask-image:radial-gradient(650px 480px at 85% 25%,#000,transparent 70%);
  mask-image:radial-gradient(650px 480px at 85% 25%,#000,transparent 70%)}
.collab-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}

.collab-title{font-family:var(--f-sans);font-weight:800;font-size:clamp(1.7rem,2.7vw,2.35rem);
  line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:16px 0 14px}
.collab-title .l1,.collab-title .l2{display:block}
.collab-title .l2{color:var(--teal)}
/* Cursive flourish (matches the hero's script accent) on the closing word(s) of a title. */
.collab-title .script-wrap{display:inline-block;position:relative;
  font-family:'Kaushan Script',cursive;font-weight:400;letter-spacing:0;
  font-size:1.15em;line-height:1.5}
.collab-title .script-wrap .swash{position:absolute;left:2%;bottom:-2px;width:96%;height:9px;color:var(--teal);opacity:.85;pointer-events:none}
.collab-title .script-wrap .swash svg{width:100%;height:100%;display:block}
.cta-band .collab-title,.finalcta .collab-title{color:#fff;margin-top:8px}
.cta-band .collab-title .l2,.cta-band .collab-title .script-wrap{color:#fff}
.finalcta .collab-title .l2,.finalcta .collab-title .script-wrap{color:var(--teal-2)}
.cta-band .eyebrow-dg{color:#fff}
.cta-band .eyebrow-dg .dg{opacity:.9}
.finalcta .eyebrow-dg{color:var(--teal-2)}

.collab-logos{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.collab-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:34px 26px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  min-height:212px;justify-content:center;text-decoration:none;box-shadow:0 4px 20px rgba(26,28,29,.05);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.collab-card:hover,.collab-card:focus-visible{border-color:rgba(43,168,156,.4);
  box-shadow:0 22px 46px -16px rgba(43,168,156,.30);transform:translateY(-4px)}
.collab-card .cc-logo{width:100%;height:60px;display:grid;place-items:center}
.collab-card .cc-logo img{max-height:56px;max-width:150px;width:auto;object-fit:contain}
.collab-card .cc-name{font-size:.8rem;color:var(--muted);font-weight:500;line-height:1.5}
.collab-card .cc-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-sans);
  font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);
  opacity:.6;margin-top:2px;transition:opacity .3s ease}
.collab-card .cc-link svg{width:12px;height:12px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.collab-card:hover .cc-link,.collab-card:focus-visible .cc-link{opacity:1}
.collab-card:hover .cc-link svg,.collab-card:focus-visible .cc-link svg{transform:translate(2px,-2px)}
.compliance-note{font-size:.82rem;color:var(--muted-2);margin-top:18px;font-style:italic}

/* ---------- Standards list — minimal, no icons: teal rule + serif heading ---------- */
.collab-standards{position:relative;z-index:2;margin-top:44px;padding-top:38px;
  border-top:1px solid rgba(43,168,156,.16);
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px 40px}
.cs-item{position:relative;padding-left:20px}
.cs-item::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;
  background:linear-gradient(var(--teal),rgba(43,168,156,.3))}
.cs-item h4{font-family:var(--f-sans);font-weight:700;font-size:1.02rem;color:var(--ink);
  letter-spacing:0;margin:0 0 8px}
.cs-item p{font-size:.85rem;color:var(--muted);line-height:1.6;margin:0}

@media(max-width:1080px){
  .collab-standards{grid-template-columns:1fr 1fr;row-gap:28px}
}
@media(max-width:560px){
  .collab-standards{grid-template-columns:1fr;row-gap:24px}
}

/* ---------- Refined teal icon chip (why-choose) ---------- */
.chip-teal{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-deep);margin-bottom:18px;box-shadow:inset 0 0 0 1px rgba(43,168,156,.12)}
.chip-teal svg{width:26px;height:26px}
/* ---- 6 compact cards on the left, image + custom decorative elements on the right ---- */
.why4-layout{display:grid;grid-template-columns:1.05fr 1.1fr;gap:72px;align-items:center}
.why4-media{position:relative}
.why4-media::before{content:"";position:absolute;inset:18px 18px -18px -18px;border-radius:24px;
  background:linear-gradient(145deg,var(--teal),var(--teal-deep));opacity:.14;z-index:0}
.why4-img{position:relative;z-index:1;width:100%;aspect-ratio:4/3.7;object-fit:cover;
  border-radius:24px;display:block;box-shadow:var(--shadow)}
.why4-badge{position:absolute;left:28px;bottom:-26px;z-index:2;display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:16px;padding:14px 18px;
  box-shadow:0 14px 34px rgba(26,28,29,.14);max-width:calc(100% - 56px)}
.why4-badge .wb-ic{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--teal-soft);color:var(--teal-deep)}
.why4-badge .wb-ic svg{width:19px;height:19px}
.why4-badge b{display:block;font-family:var(--f-sans);font-weight:700;font-size:.86rem;color:var(--ink);line-height:1.3}
.why4-badge span{display:block;font-size:.72rem;color:var(--muted);margin-top:2px;line-height:1.3}

.why4-content .kicker-left{text-align:left;max-width:none;margin:0 0 30px}
.why4-content .kicker-left p{color:var(--muted);font-size:1.02rem;margin:0}

.why4-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.why4-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;
  display:flex;align-items:flex-start;gap:14px;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease}
.why4-card:hover{border-color:rgba(43,168,156,.35);box-shadow:0 14px 32px -16px rgba(43,168,156,.28)}
.why4-num{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--teal-soft);color:var(--teal-deep);font-family:var(--f-serif);font-weight:700;
  font-size:.92rem;letter-spacing:0;transition:background .3s ease,color .3s ease}
.why4-card:hover .why4-num{background:var(--teal);color:#fff}
.why4-card h3{font-size:1.02rem;font-weight:700;color:var(--ink);margin:0 0 6px}
.why4-card p{color:var(--muted);font-size:.85rem;margin:0;line-height:1.55}

@media(max-width:960px){
  .why4-layout{grid-template-columns:1fr;gap:36px}
  .why4-media{max-width:420px;margin:0 auto}
}
@media(max-width:560px){
  .why4-grid{grid-template-columns:1fr}
}

/* ---------- The Course — single-product showcase card (not a generic content split) ---------- */
.course-showcase{background:#fff}
.course-card{position:relative;display:grid;grid-template-columns:.88fr 1.12fr;
  background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;
  box-shadow:0 34px 76px -30px rgba(26,28,29,.24),0 6px 22px rgba(26,28,29,.06)}
.cc-media{position:relative;min-height:100%}
.cc-media img{width:100%;height:100%;min-height:460px;object-fit:cover;display:block}
.cc-ribbon{position:absolute;top:22px;left:22px;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  color:var(--teal-deep);font-family:var(--f-sans);font-weight:700;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;padding:9px 16px;border-radius:100px;box-shadow:0 8px 20px rgba(26,28,29,.14)}
.cc-body{padding:clamp(32px,4vw,56px)}
.cc-body>p{color:var(--muted);font-size:1.02rem;margin:14px 0 24px}

.cc-price-panel{display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;margin-top:26px;
  background:linear-gradient(155deg,#F3FAF9,#EAF7F5);border:1px solid rgba(43,168,156,.16);
  border-radius:18px;overflow:hidden}
.cc-spec-item{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:22px 10px;border-right:1px solid rgba(43,168,156,.18)}
.cc-spec-item svg{width:22px;height:22px;color:var(--teal-deep)}
.cc-spec-item span{font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-2);line-height:1.35}
.cc-price{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 20px;text-align:center}
.cc-price .amt{display:block;font-family:var(--f-sans);font-weight:800;font-size:1.5rem;
  letter-spacing:-.02em;color:var(--ink);line-height:1;white-space:nowrap}
.cc-price .tax{display:block;font-size:.72rem;color:var(--teal-deep);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;margin-top:6px;white-space:nowrap}

@media(max-width:640px){
  .cc-price-panel{grid-template-columns:1fr 1fr}
  .cc-spec-item:nth-child(2){border-right:0}
  .cc-spec-item{border-bottom:1px solid rgba(43,168,156,.18)}
  .cc-price{grid-column:1/-1;border-right:0;flex-direction:row;gap:10px;padding:18px 20px}
  .cc-price .tax{margin-top:0}
}

.cc-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

@media(max-width:900px){
  .course-card{grid-template-columns:1fr;border-radius:24px}
  .cc-media img{min-height:260px}
}

/* ---------- Treatments covered (single-course clarity: both real destinations) ---------- */
.treat-wrap{scroll-margin-top:100px;margin-top:76px}
.treat-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.treat-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:24px;
  overflow:hidden;text-decoration:none;box-shadow:0 4px 20px rgba(26,28,29,.05);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.treat-card:hover{border-color:rgba(43,168,156,.35);box-shadow:0 24px 52px -20px rgba(43,168,156,.32);transform:translateY(-4px)}
.tc-media{position:relative;aspect-ratio:4/5;overflow:hidden}
.tc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.treat-card:hover .tc-media img{transform:scale(1.06)}
.tc-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,23,25,0) 40%,rgba(11,15,16,.82) 100%)}
.tc-eyebrow{position:absolute;left:20px;top:20px;z-index:2;background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.32);color:#fff;
  font-family:var(--f-sans);font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 14px;border-radius:100px}
.tc-media-title{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff;
  font-family:var(--f-sans);font-weight:800;font-size:1.32rem;letter-spacing:-.01em;margin:0;line-height:1.2}
.tc-body{padding:20px 24px 26px}
.tc-body p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0 0 16px}
.tc-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-sans);font-weight:700;
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-deep)}
.tc-link svg{width:15px;height:15px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.treat-card:hover .tc-link svg{transform:translateX(4px)}

@media(max-width:640px){
  .treat-grid{grid-template-columns:1fr}
}

/* ---------- Gallery (editorial masonry) — dense flow + taller rows so wide
   group/landscape photos get a wide cell instead of an over-cropped square ---------- */
.gallery4{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;grid-auto-flow:dense;gap:14px}
.gallery4 img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
.gallery4 .g-tall{grid-row:span 2}
.gallery4 .g-wide{grid-column:span 2}

/* ---------- Eligibility snapshot ---------- */
.elig{background:var(--cream)}
.elig-note{margin-top:36px;display:flex;align-items:flex-start;gap:14px;
  background:linear-gradient(155deg,#FFFFFF 0%,#F6FBFA 55%,#EFF8F7 100%);
  border:1px solid rgba(43,168,156,.16);border-radius:16px;
  padding:18px 22px;font-size:.86rem;color:var(--ink-2);
  box-shadow:0 14px 34px -22px rgba(43,168,156,.3)}
.elig-note-ic{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--teal-deep);
  display:grid;place-items:center;box-shadow:0 2px 10px rgba(26,28,29,.08)}
.elig-note-ic svg{width:17px;height:17px}
.elig-note p{margin:0;line-height:1.6}

/* ---------- Tightened vertical rhythm for the last homepage sections (curriculum / careers / faq) ---------- */
.section-band{padding:64px 0}
@media(max-width:640px){.section-band{padding:48px 0}}

/* ---------- Soft bordered panel that houses a grid/list (curriculum / careers / faq) ---------- */
.card-panel{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(155deg,#FFFFFF 0%,#F6FBFA 55%,#EFF8F7 100%);
  border:1px solid rgba(43,168,156,.16);border-radius:28px;
  padding:clamp(24px,3.6vw,40px);
  box-shadow:0 24px 60px -32px rgba(43,168,156,.3),0 4px 16px rgba(26,28,29,.04)}
.card-panel::before{content:"";position:absolute;top:-120px;right:-100px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(43,168,156,.14),transparent 72%);pointer-events:none;z-index:0}
.card-panel>*{position:relative;z-index:1}
.card-panel .accordion{gap:0}
.card-panel .acc-item{background:transparent;border:0;border-radius:0;box-shadow:none;border-bottom:1px solid rgba(43,168,156,.16)}
.card-panel .acc-item:last-child{border-bottom:0}
.card-panel .acc-item.open{box-shadow:none}
@media(max-width:640px){.card-panel{border-radius:22px}}

/* ---- Profession picker: 3D coverflow card carousel + detail panel (Overview / Ideal For / Skills / Career / FAQs) ---- */
.wcj-rail-wrap{position:relative;max-width:1100px;margin:0 auto 8px}
.wcj-hint{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f-sans);font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--teal-deep);background:var(--teal-soft);border:1px solid rgba(43,168,156,.24);border-radius:100px;padding:8px 16px 8px 18px;pointer-events:none;position:relative;left:50%;transform:translateX(-50%);margin:0 auto 16px;width:fit-content}
.wcj-hint svg{width:16px;height:18px;flex-shrink:0;animation:wcjHintBob 1.7s ease-in-out infinite}
@keyframes wcjHintBob{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}

.wcj-stage{position:relative;height:500px;perspective:1200px;perspective-origin:50% 45%;overflow:visible}
.wcj-center-glow{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:300px;height:72px;background:radial-gradient(ellipse at center bottom,rgba(43,168,156,.38) 0%,transparent 68%);pointer-events:none;z-index:0;filter:blur(14px);border-radius:50%}

@keyframes profShineSwipe{0%{transform:translateX(-180%) skewX(-10deg)}100%{transform:translateX(300%) skewX(-10deg)}}
@keyframes profCenterGlow{0%{box-shadow:0 4px 20px rgba(26,28,29,.08)}45%{box-shadow:0 0 0 1.5px var(--teal),0 32px 80px rgba(43,168,156,.45),0 0 50px rgba(43,168,156,.2)}100%{box-shadow:0 0 0 1.5px var(--teal),0 24px 64px rgba(43,168,156,.3),0 8px 24px rgba(43,168,156,.15)}}
.pcard.ctr-in{animation:profCenterGlow .65s cubic-bezier(.16,1,.3,1) forwards}
.pcard.ctr-in::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);animation:profShineSwipe .55s cubic-bezier(.4,0,.2,1) .05s both;pointer-events:none;z-index:15;border-radius:22px}

.pcard{position:absolute;width:250px;left:calc(50% - 125px);top:0;border-radius:22px;background:#fff;border:1.5px solid var(--line);box-shadow:0 4px 20px rgba(26,28,29,.08);cursor:pointer;overflow:hidden;transform-origin:center center;will-change:transform,opacity;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s ease,box-shadow .5s ease,border-color .4s ease}
.pcard.active{border-color:var(--teal);box-shadow:0 0 0 1.5px var(--teal),0 24px 64px rgba(43,168,156,.3),0 8px 24px rgba(43,168,156,.15)}
.pcard.active::after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.22) 0%,transparent 55%);pointer-events:none;border-radius:21px;z-index:9}
.pcard:not(.active):hover{box-shadow:0 14px 44px rgba(26,28,29,.14),0 2px 8px rgba(26,28,29,.06);border-color:rgba(43,168,156,.35)}
/* Wash out only the outermost (end) slides on each side, never the center one */
.pcard-washed::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.55);z-index:8;pointer-events:none}
.pcard-img{height:245px;overflow:hidden;background:var(--teal-soft)}
.pcard-img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s ease;display:block}
.pcard:hover .pcard-img img{transform:scale(1.04)}
.pcard-ic-wrap{display:flex;justify-content:center;margin-top:-22px;position:relative;z-index:2}
.pcard-ic{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#3BC2B7 0%,#0E6A62 100%);border:3px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px rgba(18,125,115,.35);transition:transform .25s ease,box-shadow .25s ease}
.pcard.active .pcard-ic{background:linear-gradient(135deg,#4FD4C8 0%,#127D73 100%);box-shadow:0 8px 22px rgba(18,125,115,.45)}
.pcard:hover .pcard-ic{transform:scale(1.06)}
.pcard-ic svg{width:22px;height:22px}
.pcard-body{padding:10px 16px 18px;text-align:center}
.pcard-title{font-family:var(--f-sans);font-size:.95rem;font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:7px}
.pcard-sub{font-size:.775rem;line-height:1.55;color:var(--muted);margin-bottom:12px}
.pcard-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:all .2s ease;padding:0}
.pcard.active .pcard-btn{background:var(--teal);border-color:var(--teal);color:#fff}
.pcard-btn svg{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.pcard.active .pcard-btn svg{transform:rotate(90deg)}

.wcj-arrows{display:flex;justify-content:center;align-items:center;gap:12px;padding-top:20px;padding-bottom:6px}
.wcj-arr{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(43,168,156,.3);background:#fff;color:var(--teal-deep);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 8px rgba(26,28,29,.06);padding:0}
.wcj-arr:hover{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 4px 16px rgba(43,168,156,.25)}
.wcj-dots{display:flex;gap:6px;align-items:center;min-height:6px}
.wcj-dot{width:6px;height:6px;border-radius:50%;background:rgba(43,168,156,.25);cursor:pointer;transition:all .25s ease;display:inline-block}
.wcj-dot.active{width:22px;border-radius:3px;background:var(--teal)}

.wcj-stem{display:flex;justify-content:center;padding:8px 0 0;pointer-events:none}
.wcj-stem-line{width:2px;height:36px;background:linear-gradient(to bottom,rgba(43,168,156,.4) 0%,#127D73 100%);opacity:.9;border-radius:2px;transition:opacity .3s ease}
@keyframes stemPulse{0%{opacity:.9}50%{opacity:.35}100%{opacity:.9}}
.wcj-stem-line.pulse{animation:stemPulse .38s cubic-bezier(.16,1,.3,1) both}

@media(max-width:640px){
  .wcj-stage{height:430px}
  .pcard{width:190px;left:calc(50% - 95px)}
  .pcard-img{height:185px}
  .wcj-hint{display:none}
}

.prof-panels{margin-top:8px;transition:opacity .14s ease}
.prof-panels.pdp-switching{opacity:.15}
.prof-panel{display:none;position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(155deg,#FFFFFF 0%,#F6FBFA 55%,#EFF8F7 100%);
  border:1px solid rgba(43,168,156,.16);border-radius:24px;
  padding:clamp(20px,3.2vw,32px);box-shadow:0 20px 50px -30px rgba(26,28,29,.18)}
.prof-panel.active{display:block}
.prof-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(43,168,156,.16)}
.prof-head h3{font-family:var(--f-sans);font-weight:800;font-size:1.3rem;color:var(--ink);margin:0}

.prof-change-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:7px 14px 7px 7px;border-radius:100px;background:var(--teal-soft);
  border:1px solid rgba(43,168,156,.3);color:var(--teal-deep);
  font-family:var(--f-sans);font-size:.72rem;font-weight:700;letter-spacing:.01em;
  cursor:pointer;transition:background .2s ease,transform .2s ease;white-space:nowrap}
.prof-change-btn:hover{background:rgba(43,168,156,.24);transform:translateY(-1px)}
.prof-change-btn .pcb-ic{width:20px;height:20px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(26,28,29,.12)}
.prof-change-btn svg{width:10px;height:10px}

.pb-label{display:inline-block;font-family:var(--f-sans);font-weight:700;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:8px}

.prof-top{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:20px}
.prof-top p{color:var(--body);font-size:.9rem;line-height:1.6;margin:0}

.prof-cols{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:22px;
  padding-top:18px;border-top:1px solid rgba(43,168,156,.16)}
.prof-cols .check-list{margin-top:2px}
.prof-cols .check-list li{font-size:.88rem}

.prof-faqs{position:relative;z-index:1;margin-top:20px;padding-top:16px;border-top:1px solid rgba(43,168,156,.16)}
.mini-qa{margin-top:10px}
.mini-qa b{display:block;font-size:.9rem;color:var(--ink);font-weight:700;margin-bottom:3px}
.mini-qa p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.55}

@media(max-width:760px){
  .prof-top,.prof-cols{grid-template-columns:1fr;gap:16px}
  .prof-head{gap:10px}
}

/* ---------- Curriculum highlights — 4-step card row (was a lopsided left-only vertical timeline) ---------- */
.curr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.curr-step{background:#fff;border:1px solid rgba(43,168,156,.12);border-radius:18px;padding:24px 20px;
  box-shadow:0 12px 30px -22px rgba(26,28,29,.18);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.curr-step:hover{border-color:rgba(43,168,156,.4);box-shadow:0 18px 40px -18px rgba(43,168,156,.32);transform:translateY(-4px)}
.curr-step .cs-top{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.curr-step .why4-num{border-radius:50%;background:var(--teal);color:#fff}
.curr-step h4{font-size:1.02rem;font-weight:700;margin:0 0 8px;color:var(--ink)}
.curr-step p{font-size:.87rem;color:var(--muted);line-height:1.6;margin:0}

@media(max-width:900px){.curr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.curr-grid{grid-template-columns:1fr}}

/* ---------- Career cards ---------- */
.career-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.career-card{background:#fff;border:1px solid rgba(43,168,156,.12);border-radius:16px;padding:24px 22px;
  box-shadow:0 12px 30px -22px rgba(26,28,29,.18);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.career-card:hover{border-color:rgba(43,168,156,.4);box-shadow:0 18px 40px -18px rgba(43,168,156,.32);transform:translateY(-4px)}
.career-card .cc-ic{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff;display:grid;place-items:center;margin-bottom:16px;box-shadow:0 6px 16px -6px rgba(43,168,156,.55);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.career-card:hover .cc-ic{transform:scale(1.08) rotate(-4deg)}
.career-card h3{font-family:var(--f-sans);font-size:1.02rem;font-weight:700;margin-bottom:8px;color:var(--ink)}
.career-card p{color:var(--muted);font-size:.94rem;line-height:1.6;margin:0}
.career-note{text-align:center;color:var(--muted-2);font-size:.86rem;font-style:italic;margin-top:24px;max-width:640px;margin-left:auto;margin-right:auto}

/* ---------- Testimonials ---------- */
.testi{background:#fff}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testi-card{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:30px}
.testi-card .stars{color:var(--teal);letter-spacing:2px;margin-bottom:12px;font-size:.9rem}
.testi-card p{font-family:var(--f-display);font-size:1.08rem;color:var(--ink);line-height:1.5;font-style:italic;margin:0 0 18px}
.testi-who{display:flex;align-items:center;gap:12px}
.testi-who .av{width:44px;height:44px;border-radius:50%;background:var(--teal-soft);color:var(--teal-deep);display:grid;place-items:center;font-weight:700}
.testi-who b{display:block;font-family:var(--f-sans);font-size:.92rem;color:var(--ink)}
.testi-who span{font-size:.8rem;color:var(--muted)}

/* ---------- Final CTA (premium) ---------- */
.finalcta{background:var(--ink);color:#fff;border-radius:28px;padding:66px 40px;text-align:center;position:relative;overflow:hidden}
.finalcta .aura{position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(closest-side,rgba(43,168,156,.35),transparent);z-index:0}
.finalcta>*{position:relative;z-index:2}
.finalcta h2{color:#fff;font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:12px}
.finalcta p{color:rgba(255,255,255,.72);max-width:560px;margin:0 auto 26px}
.finalcta .btn-primary{background:var(--teal)}
.finalcta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.finalcta .btn-ghost:hover{background:#fff;color:var(--ink)}

@media(max-width:960px){
  .collab-inner,.feat-inner{grid-template-columns:1fr;gap:36px}
  .why4-grid,.career-grid,.testi-grid{grid-template-columns:1fr 1fr}
  .gallery4{grid-template-columns:repeat(2,1fr)}
  .hero4-media img{aspect-ratio:16/10}
}
@media(max-width:640px){
  .why4-grid,.career-grid,.testi-grid,.collab-logos{grid-template-columns:1fr}
  .finalcta{padding:48px 24px;border-radius:20px}
  .hero4-trust{gap:14px}
}

/* ============================================================
   DESIGN LAYER v5 — richer, more designed (motifs, depth, hero)
   ============================================================ */

/* ---- Decorative primitives ---- */
.arc-deco{position:absolute;z-index:0;pointer-events:none;opacity:.7}
.aura-soft{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(70px)}
.dotgrid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(43,168,156,.14) 1.2px,transparent 1.2px);background-size:26px 26px}
.dotgrid.fade-top{-webkit-mask-image:radial-gradient(1200px 640px at 50% 0,#000,transparent 72%);mask-image:radial-gradient(1200px 640px at 50% 0,#000,transparent 72%)}

/* ---- Section header (decorated) ---- */
.sec-head{text-align:center;max-width:700px;margin:0 auto 48px;position:relative}
.sec-head .eyebrow4{margin-bottom:14px}
.sec-head h2{font-size:clamp(1.9rem,3.8vw,3rem);margin:0 0 12px;color:var(--ink);font-weight:500;line-height:1.06}
.sec-head p{color:var(--muted);font-size:1.05rem;margin:0}
.sec-head .idx{display:block;font-family:var(--f-display);font-style:italic;font-size:1.05rem;color:var(--teal);margin-bottom:2px;opacity:.9}

/* ---- HERO v5 ---- */
.hero5{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream) 0%,#fff 72%);padding:54px 0 0;text-align:center}
.hero5 .aura-a{width:820px;height:520px;top:-240px;left:50%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(43,168,156,.20),transparent);opacity:.9}
.hero5 .aura-b{width:420px;height:420px;bottom:120px;left:-160px;background:radial-gradient(closest-side,rgba(222,150,120,.16),transparent)}
.hero5 .arc-l{left:-64px;top:150px;width:230px;transform:rotate(180deg)}
.hero5 .arc-r{right:-70px;top:90px;width:250px}
.hero5-inner{position:relative;z-index:3;max-width:940px;margin-inline:auto}
.hero5-badge{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 8px 7px 16px;box-shadow:var(--shadow-sm);font-size:.82rem;font-weight:600;color:var(--ink-2)}
.hero5-badge .stars{color:var(--teal);letter-spacing:1px}
.hero5-badge .divide{width:1px;height:16px;background:var(--line)}
.hero5-badge .mini-logos{display:flex;align-items:center;gap:8px;background:var(--teal-soft);border-radius:100px;padding:5px 12px}
.hero5-badge .mini-logos img{height:16px;width:auto;opacity:.85}
.hero5 h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2.7rem,6vw,5rem);line-height:1;letter-spacing:-.02em;color:var(--ink);margin:22px 0 0}
.hero5 h1 em{font-style:italic;color:var(--teal)}
.hero5 .sub{font-size:1.16rem;color:var(--ink-2);max-width:640px;margin:24px auto 30px;line-height:1.6}
.hero5-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero5-cta .btn-primary{box-shadow:0 14px 34px rgba(43,168,156,.34)}
.hero5-avatars{display:inline-flex;align-items:center;gap:12px;margin-top:30px;color:var(--muted);font-size:.86rem;font-weight:500}
.hero5-avatars .stack{display:flex}
.hero5-avatars .stack span{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-10px;background:var(--teal-soft);display:grid;place-items:center;color:var(--teal-deep);font-weight:700;font-size:.72rem}
.hero5-avatars .stack span:first-child{margin-left:0}

.hero5-media{position:relative;z-index:2;margin-top:52px;border-radius:30px 30px 0 0;overflow:hidden;box-shadow:0 -6px 70px rgba(26,28,29,.13)}
.hero5-media img{width:100%;aspect-ratio:21/8.4;object-fit:cover;display:block}
.hero5-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(26,28,29,.28))}
.float-cred{position:absolute;z-index:3;top:24px;right:24px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:11px;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.float-cred .ic{width:38px;height:38px;border-radius:11px;background:var(--teal);color:#fff;display:grid;place-items:center}
.float-cred b{display:block;font-family:var(--f-sans);font-size:.9rem;color:var(--ink);font-weight:700}
.float-cred span{font-size:.74rem;color:var(--muted)}
.float-stat{position:absolute;z-index:3;left:24px;bottom:24px;display:flex;gap:10px}
.float-stat .chip{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:100px;padding:9px 15px;font-size:.8rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.float-stat .chip b{color:var(--teal-deep)}

/* ---- Marquee strip ---- */
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:16px 0;position:relative}
.marquee-track{display:flex;gap:44px;width:max-content;animation:mq 26s linear infinite;white-space:nowrap}
.marquee-track span{display:inline-flex;align-items:center;gap:44px;font-family:var(--f-display);font-style:italic;font-size:1.15rem;color:rgba(255,255,255,.9)}
.marquee-track span::after{content:"✦";color:var(--teal-2);font-style:normal;font-size:.8rem}
@keyframes mq{to{transform:translateX(-50%)}}

.why4-card:hover .chip-teal{background:linear-gradient(145deg,var(--teal),var(--teal-deep));color:#fff}

/* ---- Featured media: frame + arc ---- */
.feat-media{position:relative}
.feat-media .price-tab{box-shadow:0 14px 34px rgba(0,0,0,.16)}

/* ---- Gallery hover ---- */
.gallery4 figure{position:relative;margin:0;overflow:hidden;border-radius:16px}
.gallery4 figure img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gallery4 figure:hover img{transform:scale(1.06)}
.gallery4 figcaption{position:absolute;left:14px;bottom:12px;color:#fff;font-size:.8rem;font-weight:600;z-index:2;opacity:0;transform:translateY(6px);transition:.3s;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.gallery4 figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));opacity:0;transition:.3s}
.gallery4 figure:hover figcaption,.gallery4 figure:hover::after{opacity:1}
.gallery4 figure.g-tall{grid-row:span 2}
.gallery4 figure.g-wide{grid-column:span 2}

/* ---- Final CTA arc ---- */
.finalcta .arc-deco{opacity:.5}
.finalcta .arc-tr{right:-40px;top:-40px;width:200px}
.finalcta .arc-bl{left:-40px;bottom:-40px;width:200px;transform:rotate(180deg)}

@media(max-width:960px){
  .hero5 .arc-l,.hero5 .arc-r{display:none}
  .hero5-media img{aspect-ratio:16/10}
}
@media(max-width:640px){
  .float-cred,.float-stat{display:none}
  .hero5-badge{flex-wrap:wrap;justify-content:center}
}

/* ============================================================
   HERO v6 — diagonal split + premium slider (right)
   ============================================================ */
.hero6{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream) 0%,#fff 80%);min-height:640px;display:flex;align-items:center}
.hero6 .dotgrid{-webkit-mask-image:radial-gradient(700px 500px at 10% 20%,#000,transparent 70%);mask-image:radial-gradient(700px 500px at 10% 20%,#000,transparent 70%);opacity:.7}
.hero6 .aura-soft{width:520px;height:520px;top:-160px;left:-140px;background:radial-gradient(closest-side,rgba(43,168,156,.18),transparent)}
.hero6 .arc-deco{left:-56px;bottom:-30px;width:200px;transform:rotate(90deg);opacity:.6}
.hero6-inner{position:relative;z-index:3;width:calc(100% - 48px);max-width:var(--maxw);margin-inline:auto}
.hero6-left{width:53%;padding:76px 0}
.hero6-left h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:20px 0 0}
.hero6-left h1 em{font-style:italic;color:var(--teal)}
.hero6-left .sub{font-size:1.1rem;color:var(--ink-2);max-width:500px;margin:22px 0 30px;line-height:1.6}

/* right diagonal slider panel */
.hero6-right{position:absolute;top:0;right:0;bottom:0;width:56%;z-index:1}
.hero6-right::before{content:"";position:absolute;inset:0;z-index:0;
  clip-path:polygon(calc(24% - 7px) 0, -7px 100%, 100% 100%, 100% 0);
  background:linear-gradient(160deg,var(--teal),var(--teal-deep))}
.hero6-slider{position:absolute;inset:0;z-index:1;overflow:hidden;
  clip-path:polygon(24% 0, 0 100%, 100% 100%, 100% 0)}
.hslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;will-change:opacity,transform}
.hslide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(26,28,29,.42))}
.hslide.active{opacity:1;animation:kenburns 7.5s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.16)}}
.hslide-cap{position:absolute;left:46%;bottom:70px;z-index:3;color:#fff;font-family:var(--f-display);font-style:italic;font-size:1.25rem;text-shadow:0 2px 12px rgba(0,0,0,.4);opacity:0;transform:translateY(12px);transition:opacity .6s .3s,transform .6s .3s}
.hslide.active .hslide-cap{opacity:1;transform:none}

/* slider controls */
.hero6-dots{position:absolute;right:34px;bottom:34px;z-index:5;display:flex;gap:9px}
.hdot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:.25s}
.hdot.active{background:#fff;width:26px;border-radius:100px}
.hero6-arrows{position:absolute;right:34px;top:38px;z-index:5;display:flex;gap:8px}
.hero6-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#fff;cursor:pointer;font-size:1.2rem;line-height:1;display:grid;place-items:center;transition:.2s}
.hero6-arrow:hover{background:#fff;color:var(--ink);border-color:#fff}

@media(max-width:900px){
  .hero6{display:block;min-height:0}
  .hero6-inner{width:100%;max-width:none;margin:0}
  .hero6-left{width:auto;padding:54px 24px 34px;text-align:center;max-width:640px;margin-inline:auto}
  .hero6-left .sub{margin-inline:auto}
  .hero6-left .hero5-cta,.hero6-left .hero5-avatars{justify-content:center}
  .hero6-right{position:relative;width:100%;height:360px}
  .hero6-right::before{display:none}
  .hero6-slider{clip-path:none}
  .hslide-cap{left:24px;bottom:52px}
  .hero6 .arc-deco{display:none}
}

/* ============================================================
   HERO v7 — reference-matched diagonal panel + slider controls
   (rounded-corner diagonal, right-centred arrows, numeric counter,
    no entrance animation, no caption text)
   ============================================================ */
.hero-clip-def{position:absolute;width:0;height:0;overflow:hidden}

.hero6{min-height:700px}
.hero6-left{width:50%}
.hero6-right{width:56%}
.hero6-right::before{display:none}          /* no teal edge line */

/* diagonal shape w/ rounded corners (SVG clipPath, responsive) */
.hero6-slider{clip-path:url(#heroDiag);overflow:hidden}

/* slides: instant swap — no fade, no Ken Burns */
.hslide{opacity:0;transition:none;animation:none!important;transform:none!important}
.hslide.active{opacity:1;animation:none!important}
.hslide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 58%,rgba(18,22,22,.34))}
.hslide-cap{display:none!important}

/* arrows — circular, vertically centred on the right */
.hero6-nav{position:absolute;right:62px;top:50%;transform:translateY(-50%);z-index:6;display:flex;gap:14px}
.h6-arrow{width:56px;height:56px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.5);background:rgba(22,28,28,.26);backdrop-filter:blur(7px);
  color:#fff;transition:background .2s,color .2s,border-color .2s,transform .2s;padding:0}
.h6-arrow:hover{background:#fff;color:var(--ink);border-color:#fff;transform:scale(1.05)}
.h6-arrow svg{width:19px;height:19px}

/* numeric counter — bottom right */
.hero6-count{position:absolute;right:62px;bottom:54px;z-index:6;display:flex;align-items:center;gap:16px;
  color:#fff;font-family:var(--f-sans);font-weight:600;font-size:1.02rem;letter-spacing:.03em;
  text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero6-count .bar{width:104px;height:2px;background:rgba(255,255,255,.38);position:relative}
.hero6-count .bar i{position:absolute;left:0;top:0;height:100%;background:#fff;width:20%;transition:width .35s ease}
.hero6-count .total{opacity:.7}

/* old dot nav no longer used */
.hero6-dots,.hero6-arrows{display:none!important}

@media(max-width:900px){
  .hero6{min-height:0}
  .hero6-slider{clip-path:none}
  .hero6-nav{right:20px}
  .h6-arrow{width:46px;height:46px}
  .hero6-count{right:20px;bottom:22px;font-size:.92rem}
  .hero6-count .bar{width:64px}
}

/* ---- Hero slider: smooth premium crossfade (no zoom / no entrance FX) ---- */
.hslide{transition:opacity .9s cubic-bezier(.4,0,.2,1)}

/* ============================================================
   HERO v8 — reference title/content, edge accent line, premium buttons
   ============================================================ */

/* ---- Eyebrow with dot-grid mark ---- */
.eyebrow-dg{display:inline-flex;align-items:center;gap:13px;font-family:var(--f-sans);
  font-weight:700;font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow-dg .dg{width:28px;height:28px;flex-shrink:0;
  background-image:radial-gradient(var(--teal) 1.7px,transparent 1.8px);background-size:9px 9px;opacity:.8}

/* ---- Hero headline: bold sans + script accent line (smaller overall) ---- */
.hero6-left h1{font-family:var(--f-sans);font-weight:800;
  font-size:clamp(1.85rem,3.2vw,2.85rem);line-height:1.14;letter-spacing:-.03em;
  color:var(--ink);margin:20px 0 0}
.hero6-left h1 .l1,.hero6-left h1 .l2{display:block}
.hero6-left h1 .l2{color:var(--teal)}
.hero6-left h1 .script{display:block;position:relative;width:fit-content;
  font-family:'Kaushan Script',cursive;font-weight:400;letter-spacing:0;
  font-size:clamp(1.6rem,2.7vw,2.35rem);line-height:1.5;color:var(--ink);margin-top:6px}
.hero6-left h1 .script .swash{position:absolute;left:2px;bottom:2px;width:100%;height:12px;color:var(--teal);opacity:.9}
.hero6-left h1 .script .swash svg{width:100%;height:100%;display:block}

/* ---- Lead paragraph with rule ---- */
.hero-lead{position:relative;padding-left:20px;margin:28px 0 32px;max-width:480px;
  color:var(--body);font-size:1rem;line-height:1.75}
.hero-lead::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:2px;
  background:linear-gradient(var(--teal),rgba(43,168,156,.12))}
.hero-lead b{color:var(--teal);font-weight:700}

/* ---- Diagonal edge accent line (brand colour w/ bright segment) ---- */
.hero6-edge{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero6-edge svg{width:100%;height:100%;display:block;overflow:visible}

/* ---- Premium buttons: light sweep on hover, no bounce ---- */
.btn{position:relative;overflow:hidden;isolation:isolate;
  transition:background .32s ease,color .32s ease,box-shadow .32s ease,border-color .32s ease}
.btn:hover{transform:none}
.btn::after{content:"";position:absolute;top:-12%;left:-70%;width:46%;height:124%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none}
.btn:hover::after{opacity:1;animation:btnShine .9s cubic-bezier(.35,0,.2,1)}
@keyframes btnShine{from{left:-70%}to{left:132%}}
.btn-ghost::after,.btn-outline::after{background:linear-gradient(100deg,transparent,rgba(43,168,156,.24),transparent)}
.btn-primary{box-shadow:0 8px 22px rgba(43,168,156,.26)}
.btn-primary:hover{background:var(--teal-deep);box-shadow:0 14px 32px rgba(43,168,156,.38)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep);box-shadow:0 10px 24px rgba(26,28,29,.08)}
.h6-arrow:hover{transform:none}

@media(max-width:900px){
  .hero-lead{margin-inline:auto;text-align:left}
  .hero6-left h1 .script{margin-inline:auto}
}

/* ============================================================
   HERO v9 — fixed-width frame, contained image card,
   accent line OUTSIDE the image, redesigned buttons
   ============================================================ */
.hero6{position:relative;overflow:hidden;padding:30px 0 46px;min-height:0;display:block;
  background:linear-gradient(180deg,var(--cream) 0%,#fff 82%)}
.hero6 .dotgrid{-webkit-mask-image:radial-gradient(620px 460px at 12% 26%,#000,transparent 70%);
  mask-image:radial-gradient(620px 460px at 12% 26%,#000,transparent 70%);opacity:.6}
.hero6 .aura-soft{width:460px;height:460px;top:-120px;left:-180px}
.hero6 .arc-deco{left:-70px;bottom:-10px;width:180px;opacity:.5}

/* the fixed-width frame that holds both columns */
.hero6-frame{position:relative;max-width:1300px;width:calc(100% - 48px);margin-inline:auto;
  min-height:600px;display:flex;align-items:center}

/* left column — pulled to the frame's left edge, kept clear of the image */
.hero6-inner{position:static;width:auto;max-width:none;margin:0}
.hero6-left{position:relative;z-index:3;width:47%;padding:56px 0}

/* right image card — contained inside the frame, rounded on the right */
.hero6-right{position:absolute;top:0;bottom:0;right:0;width:55%;z-index:1}
.hero6-slider{clip-path:url(#heroDiag);border-radius:0}

/* the brand accent line sits OUTSIDE (to the left of) the image edge */
.hero6-edge{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}
.hero6-edge svg{width:100%;height:100%;display:block;overflow:visible}

/* ---------- Redesigned buttons: pill + circular arrow badge ---------- */
.btn2{display:inline-flex;align-items:center;gap:14px;position:relative;overflow:hidden;isolation:isolate;
  padding:7px 8px 7px 26px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;
  font-family:var(--f-sans);font-weight:600;font-size:.95rem;letter-spacing:-.005em;line-height:1;
  text-decoration:none;transition:background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}
.btn2:hover{transform:none}
.btn2 .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  transition:background .3s ease,color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.btn2 .ic svg{width:16px;height:16px}
.btn2:hover .ic{transform:translateX(3px)}
/* light sweep */
.btn2::after{content:"";position:absolute;top:-14%;left:-70%;width:44%;height:128%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none}
.btn2:hover::after{opacity:1;animation:btnShine .9s cubic-bezier(.35,0,.2,1)}

.btn2-primary{background:var(--teal);color:#fff;box-shadow:0 10px 26px rgba(43,168,156,.28)}
.btn2-primary .ic{background:rgba(255,255,255,.22);color:#fff}
.btn2-primary:hover{background:var(--teal-deep);box-shadow:0 16px 34px rgba(43,168,156,.36)}
.btn2-primary:hover .ic{background:#fff;color:var(--teal-deep)}

.btn2-ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:0 4px 16px rgba(26,28,29,.05)}
.btn2-ghost .ic{background:var(--teal-soft);color:var(--teal-deep)}
.btn2-ghost::after{background:linear-gradient(100deg,transparent,rgba(43,168,156,.2),transparent)}
.btn2-ghost:hover{border-color:var(--teal);color:var(--teal-deep);box-shadow:0 10px 26px rgba(26,28,29,.08)}
.btn2-ghost:hover .ic{background:var(--teal);color:#fff}

.hero5-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}

@media(max-width:1024px){
  .hero6-left{width:52%}
  .hero6-right{width:52%}
}
@media(max-width:900px){
  .hero6{padding:0 0 34px}
  .hero6-frame{display:block;min-height:0;width:100%;max-width:none}
  .hero6-left{width:auto;padding:48px 24px 30px;text-align:center;max-width:640px;margin-inline:auto}
  .hero6-left .hero-lead{margin-inline:auto}
  .hero6-left .hero5-cta{justify-content:center}
  .hero6-right{position:relative;width:calc(100% - 32px);margin:0 auto;height:340px;border-radius:20px;overflow:hidden}
  .hero6-slider{clip-path:none}
  .hero6-edge{display:none}
}

/* ---- Mobile overflow fix: footer grid must collapse & not be forced wide ---- */
.footer-inner>*{min-width:0}
.footer-subscribe{flex-wrap:wrap}
.footer-subscribe input{min-width:0;flex:1 1 120px}
@media(max-width:640px){
  .footer-inner{grid-template-columns:1fr;gap:32px}
}

/* ============================================================
   HERO v10 — fixed image panel, fixed line gap, left-aligned CTAs,
   squared premium buttons, panel raised
   ============================================================ */

/* raise the whole hero/image up under the nav */
.hero6{padding:0 0 26px}
.hero6-frame{min-height:596px}

/* left column: pulled left, never collides with the diagonal */
.hero6-left{width:44%;padding:44px 0}
/* the CTA row was inheriting justify-content:center from the old hero — reset it */
.hero5-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start;margin-top:6px}

/* right image panel: FIXED width + fixed vertical position */
.hero6-right{position:absolute;top:0;bottom:0;right:0;width:min(715px,56%);z-index:1}

/* accent line: identical diagonal, offset a FIXED 26px to the left of the image */
.hero6-edge{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible;
  transform:translateX(-26px)}

/* ---------- Buttons v3: squared, architectural, premium ---------- */
.btn3{display:inline-flex;align-items:center;gap:11px;position:relative;overflow:hidden;isolation:isolate;
  padding:17px 28px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  font-family:var(--f-sans);font-weight:600;font-size:.95rem;letter-spacing:.005em;line-height:1;
  transition:background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}
.btn3:hover{transform:none}
.btn3 svg{width:17px;height:17px;flex-shrink:0;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.btn3:hover svg{transform:translateX(5px)}
.btn3::after{content:"";position:absolute;top:-16%;left:-70%;width:42%;height:132%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.48),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none}
.btn3:hover::after{opacity:1;animation:btnShine .9s cubic-bezier(.35,0,.2,1)}

.btn3-primary{background:var(--teal);color:#fff;box-shadow:0 10px 24px rgba(43,168,156,.26)}
.btn3-primary:hover{background:var(--teal-deep);box-shadow:0 16px 32px rgba(43,168,156,.34)}
.btn3-ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:0 3px 14px rgba(26,28,29,.05)}
.btn3-ghost::after{background:linear-gradient(100deg,transparent,rgba(43,168,156,.2),transparent)}
.btn3-ghost:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-soft);box-shadow:0 10px 24px rgba(26,28,29,.07)}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .hero6-left{width:46%}
  .hero6-right{width:54%}
}
@media(max-width:1024px){
  .hero6-frame{min-height:540px}
  .hero6-left{width:48%}
  .hero6-right{width:52%}
  .hero6-edge{transform:translateX(-18px)}
}
@media(max-width:900px){
  .hero6{padding:0 0 34px}
  .hero6-frame{display:block;min-height:0;width:100%;max-width:none}
  .hero6-left{width:auto;padding:42px 22px 28px;text-align:center;max-width:640px;margin-inline:auto}
  .hero6-left .hero-lead{margin-inline:auto}
  .hero6-left .hero5-cta{justify-content:center}
  .hero6-right{position:relative;width:calc(100% - 32px);margin:0 auto;height:330px;border-radius:18px;overflow:hidden}
  .hero6-slider{clip-path:none}
  .hero6-edge{display:none}
}
@media(max-width:560px){
  .hero6-left{padding:34px 20px 24px}
  .hero6-left .hero5-cta{flex-direction:column;align-items:stretch;gap:12px}
  .btn3{justify-content:center;width:100%}
  .hero6-right{height:280px}
  .hero6-count{right:16px;bottom:16px}
  .hero6-nav{right:16px}
}

/* ============================================================
   HERO v11 — slider arrows at top of image, Watch-Video button + modal
   ============================================================ */
.hero6-nav{top:26px;right:26px;transform:none}

/* Watch Video button (play badge on the left) */
.btn3-video{gap:12px}
.btn3-video .play{width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;flex-shrink:0;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s}
.btn3-video .play svg{width:11px;height:11px;margin-left:2px}
.btn3-video:hover .play{transform:scale(1.1);background:var(--teal-deep)}
.btn3-video:hover .play svg{transform:none}

/* Video lightbox */
.vmodal{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px}
.vmodal[hidden]{display:none}
.vmodal-back{position:absolute;inset:0;background:rgba(18,22,22,.74);backdrop-filter:blur(6px)}
.vmodal-box{position:relative;z-index:2;width:min(960px,100%)}
.vmodal-inner{position:relative;aspect-ratio:16/9;background:#0d1110;border-radius:16px;overflow:hidden;
  display:grid;place-items:center;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vmodal-inner iframe,.vmodal-inner video{width:100%;height:100%;border:0;display:block}
.vmodal-ph{color:rgba(255,255,255,.72);text-align:center;padding:34px;font-size:.95rem;line-height:1.6}
.vmodal-ph .ic{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;margin:0 auto 14px}
.vmodal-close{position:absolute;top:-48px;right:0;z-index:3;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  font-size:1.3rem;line-height:1;display:grid;place-items:center;transition:.2s}
.vmodal-close:hover{background:#fff;color:var(--ink)}
@media(max-width:560px){
  .hero6-nav{top:14px;right:14px}
  .vmodal-close{top:auto;bottom:-48px}
}

/* ============================================================
   HERO v12 — wider image panel + LiquidMetal-style buttons
   (CSS recreation of the shader button, in brand teal)
   ============================================================ */

/* wider image, narrower text column */
.hero6-left{width:40%}
.hero6-right{width:min(790px,60%)}

/* ---------- LiquidMetal button ----------
   Outer ring = animated metallic teal gradient (the shader's role),
   inner body = solid pill, icon sits in a circular chip on the left. */
.lmbtn{display:inline-block;position:relative;padding:0;border:0;background:transparent;cursor:pointer;
  border-radius:999px;text-decoration:none;line-height:1;
  transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.lmbtn:active{transform:scale(.98)}
.lmbtn:disabled{opacity:.5;cursor:not-allowed}

.lmbtn-ring{position:relative;display:block;border-radius:999px;padding:3px;overflow:hidden;
  box-shadow:0 18px 40px -14px rgba(26,28,29,.38);
  background:linear-gradient(115deg,#DFF7F2 0%,#7FE3D6 18%,#2BA89C 38%,#166F66 52%,#8FF3E6 68%,#2BA89C 84%,#1F857B 100%);
  background-size:300% 300%;
  animation:lmflow 7s ease-in-out infinite}
@keyframes lmflow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@media(prefers-reduced-motion:reduce){.lmbtn-ring{animation:none}}

.lmbtn-inner{position:relative;z-index:2;display:flex;align-items:center;gap:11px;border-radius:999px;
  padding:4px 22px 4px 4px;transition:background .25s ease}
.lmbtn-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.08);transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.lmbtn-ic svg{width:14px;height:14px}
.lmbtn-txt{font-family:var(--f-sans);font-weight:600;font-size:.92rem;letter-spacing:-.01em;white-space:nowrap}

/* primary — dark body, teal chip (Explore Course) */
.lmbtn-dark .lmbtn-inner{background:var(--ink)}
.lmbtn-dark .lmbtn-txt{color:#fff}
.lmbtn-dark .lmbtn-ic{background:var(--teal);color:#fff}
.lmbtn-dark:hover .lmbtn-inner{background:#0d0f10}
.lmbtn-dark:hover .lmbtn-ic{transform:translateX(2px)}

/* secondary — light body, teal play chip (Watch Video) */
.lmbtn-light .lmbtn-inner{background:#fff}
.lmbtn-light .lmbtn-txt{color:var(--ink)}
.lmbtn-light .lmbtn-ic{background:var(--teal-soft);color:var(--teal-deep)}
.lmbtn-light:hover .lmbtn-inner{background:#FAFDFC}
.lmbtn-light:hover .lmbtn-ic{background:var(--teal);color:#fff;transform:scale(1.08)}
.lmbtn-light .lmbtn-ic svg{margin-left:1px}

@media(max-width:1180px){
  .hero6-left{width:43%}
  .hero6-right{width:57%}
}
@media(max-width:1024px){
  .hero6-left{width:46%}
  .hero6-right{width:54%}
}
@media(max-width:900px){
  .hero6-left{width:auto}
  .hero6-right{width:calc(100% - 32px)}
}
@media(max-width:560px){
  .hero6-left .hero5-cta{flex-direction:column;align-items:stretch}
  .lmbtn{width:100%}
  .lmbtn-inner{justify-content:center;padding:4px 20px 4px 4px}
}

/* ============================================================
   HERO v13 — true full-bleed right image up to a max canvas width
   (~1920px, i.e. virtually every 13"-24" screen at its typical CSS
   pixel width). Below the cap the image sits flush with the real
   browser edge as requested; above it the whole hero centers
   instead of stretching further on 27"+/ultra-wide/4K displays.
   Also: subtle outline framing the image card (reference match)
   and the icon+label feature row below the CTA buttons.
   ============================================================ */
.hero6-frame{width:100%;max-width:1600px}
.hero6-left{padding-left:clamp(24px,5vw,96px)}
@media(min-width:1181px){
  .hero6-right{width:clamp(660px,56vw,1020px)}
}

/* subtle light outline tracing the full image-card edge */
.hero6-border{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}

/* icon + two-line label row, below the CTA buttons —
   fixed 2x2 grid (2 items per row) instead of loose flex-wrap,
   so the row count never shifts with label length */
.hero-feats{display:inline-grid;grid-template-columns:repeat(2,minmax(164px,1fr));
  column-gap:36px;row-gap:22px;margin-top:34px}
.hero-feat{display:flex;align-items:center;gap:14px}
.hero-feat .hf-ic{width:54px;height:54px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  color:var(--teal-deep);background:linear-gradient(150deg,#ffffff,#EAF7F5);
  box-shadow:0 8px 18px rgba(43,168,156,.20),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -2px 4px rgba(43,168,156,.09)}
.hero-feat .hf-ic svg{width:26px;height:26px}
.hero-feat .hf-txt{font-family:var(--f-sans);font-weight:700;font-size:.72rem;letter-spacing:.05em;
  line-height:1.4;text-transform:uppercase;color:var(--ink-2)}

@media(max-width:900px){
  .hero-feats{justify-content:center}
}
@media(max-width:480px){
  .hero-feats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:16px}
  .hero-feat{gap:10px}
  .hero-feat .hf-ic{width:46px;height:46px}
  .hero-feat .hf-ic svg{width:22px;height:22px}
}

/* ============================================================
   HERO v16 — clean border traced directly on the image (no offset,
   no duplicate shape) + dark 4-column feature band underneath.
   ============================================================ */
.hero6-outline{
  position:absolute;inset:0;z-index:2;overflow:visible;pointer-events:none;
  width:100%;height:100%; /* SVG replaced-element sizing otherwise defaults
    to a square instead of filling the actual rectangular box */
}
@media(max-width:900px){
  .hero6-outline{display:none}
}

/* No negative overlap with the hero — the band sits in normal, guaranteed-
   clear space below it. This is what makes the floating badge reliable:
   it only ever straddles the BAND's own edge, never anything above it. */
.feat-wrap{position:relative;z-index:3;width:calc(100% - 48px);max-width:1600px;margin:22px auto 0}
.feat-band{
  position:relative;isolation:isolate; /* NOTE: no overflow:hidden here — that
    was the actual bug. The badge is a child of .feat-band and needs to
    overflow ABOVE it (that's the whole point of the 50/50 straddle); an
    overflow:hidden on the same element that hosts it will silently clip
    away everything the badge draws outside the box, no matter how much
    clear space exists above. The decorative background below is clipped
    by its OWN wrapper (.fb-bg) instead, so it still respects the rounded
    corners without touching the badge. */
  background:linear-gradient(155deg,#FFFFFF 0%,#F6FBFA 55%,#EFF8F7 100%);
  border:1px solid rgba(43,168,156,.14);
  border-radius:26px;padding:44px 12px 32px;color:var(--ink);
  display:grid;grid-template-columns:repeat(4,1fr);
  box-shadow:0 24px 60px -24px rgba(43,168,156,.28),0 4px 16px rgba(26,28,29,.05);
}
/* wrapper that clips ONLY the decorative background to the rounded shape */
.fb-bg{position:absolute;inset:0;z-index:0;border-radius:26px;overflow:hidden;pointer-events:none}
/* two soft blurred glows, tucked into opposite corners for quiet depth */
.fb-bg .fb-glow{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(43,168,156,.20),transparent 72%)}
.fb-bg .fb-glow-a{width:280px;height:280px;top:-120px;left:-70px}
.fb-bg .fb-glow-b{width:320px;height:320px;bottom:-160px;right:-60px}
/* one clean wave, traced with a crisp accent line along its crest */
.fb-bg .fb-wave{position:absolute;left:0;right:0;bottom:-2px;height:38%;width:100%}

/* floating "Why Choose Us" badge — fixed height so the straddle is always
   exactly 50/50 regardless of font-loading/rendering differences */
.feat-badge{
  position:absolute;top:0;left:50%;z-index:6;
  transform:translate(-50%,-20px); /* half of the badge's own ~40px height */
  height:40px;box-sizing:border-box;
  display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid rgba(43,168,156,.22);border-radius:100px;padding:0 22px;
  font-family:var(--f-sans);font-weight:700;font-size:.76rem;letter-spacing:.09em;
  line-height:1;color:var(--teal-deep);text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 26px rgba(26,28,29,.10);
}
.feat-badge svg{width:15px;height:15px;color:var(--teal);flex-shrink:0}

.fb-item{position:relative;z-index:2;display:flex;gap:16px;align-items:flex-start;padding:0 24px}
.fb-item+.fb-item{border-left:1px solid rgba(43,168,156,.18)}
.fb-ic{width:58px;height:58px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  color:var(--teal-deep);background:linear-gradient(150deg,#ffffff,#EAF7F5);
  box-shadow:0 10px 22px rgba(43,168,156,.18),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -3px 6px rgba(43,168,156,.10)}
.fb-ic svg{width:24px;height:24px}
.fb-ic img{width:40px;height:40px;object-fit:contain;display:block}
.feat-band h4{color:var(--ink);font-family:var(--f-sans);font-weight:700;font-size:.82rem;
  letter-spacing:.03em;text-transform:uppercase;margin:2px 0 6px}
.feat-band p{color:var(--muted);font-size:.85rem;line-height:1.55;margin:0}

@media(max-width:860px){
  .feat-band{grid-template-columns:1fr 1fr;gap:30px 0;border-radius:20px;padding-top:50px}
  .fb-item:nth-child(3){border-left:0}
}
@media(max-width:560px){
  .feat-band{grid-template-columns:1fr;padding:44px 22px 28px}
  .fb-item{border-left:0!important;padding:0}
  .fb-item+.fb-item{border-left:0;border-top:1px solid rgba(43,168,156,.18);padding-top:22px;margin-top:22px}
  .feat-badge{padding:0 16px;font-size:.68rem}
}

/* ============================================================
   Checkout — split layout (page-checkout.php): LEFT = the WooCommerce
   classic form (returning-customer login, billing details, payment),
   RIGHT = a sticky course summary + pricing + trust card. Re-skins the
   classic checkout shortcode with this theme's own tokens instead of
   WooCommerce's default markup.
   ============================================================ */
.checkout-shell{padding:36px 0 90px;background:var(--cream)}
.checkout-grid{display:grid;grid-template-columns:1.3fr .92fr;gap:32px;align-items:start}
.checkout-main{min-width:0}
.checkout-side{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:16px}
@media(max-width:980px){
  .checkout-grid{grid-template-columns:1fr}
  .checkout-side{position:static;order:-1}
}

.checkout-head{margin-bottom:22px}
.checkout-head .pill{margin-bottom:12px}
.checkout-head h1{font-family:var(--f-serif);font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink);margin:0 0 6px}
.checkout-head p{color:var(--muted);margin:0}

/* ── Notices ── */
.woocommerce-error,.woocommerce-message,.woocommerce-info{font-family:var(--f-sans);font-size:.88rem;font-weight:600;
  border-radius:14px;padding:14px 18px 14px 44px;margin:0 0 20px;list-style:none;border:1px solid transparent;position:relative}
.woocommerce-error{background:var(--danger-bg);color:var(--danger);border-color:rgba(192,57,43,.22)}
.woocommerce-message,.woocommerce-info{background:var(--teal-soft);color:var(--teal-deep);border-color:rgba(43,168,156,.3)}
.woocommerce-error a,.woocommerce-message a{color:inherit;text-decoration:underline}
.woocommerce-error::before,.woocommerce-message::before,.woocommerce-info::before{content:"";position:absolute;left:16px;top:16px;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.6}

/* ── Panels: returning-customer login / coupon / billing / additional fields ── */
.checkout-main .woocommerce-form-login,
.checkout-main .checkout_coupon,
.checkout-main .woocommerce-billing-fields,
.checkout-main .woocommerce-additional-fields{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 24px 26px;
  box-shadow:0 10px 28px -22px rgba(26,28,29,.22);margin-bottom:18px}
.checkout-main .woocommerce-billing-fields h3,.checkout-main .woocommerce-additional-fields h3{
  font-family:var(--f-sans);font-size:1.02rem;font-weight:800;color:var(--ink);margin:0 0 16px}
.checkout-main .woocommerce-form-login-toggle .woocommerce-info,
.checkout-main .woocommerce-form-coupon-toggle .woocommerce-info{background:#fff;border:1px dashed var(--line);color:var(--muted)}
.checkout-main .woocommerce-form-login-toggle .woocommerce-info::before,
.checkout-main .woocommerce-form-coupon-toggle .woocommerce-info::before{background:var(--teal)}
.checkout-main .woocommerce-form-login-toggle .woocommerce-info a,
.checkout-main .woocommerce-form-coupon-toggle .woocommerce-info a{color:var(--teal-deep);font-weight:700}
.checkout-main .woocommerce-form-login .form-row,.checkout-main .checkout_coupon .form-row{margin:0}
.checkout-main .woocommerce-form-login{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.checkout-main .woocommerce-form-login .form-row{flex:1;min-width:180px}
.checkout-main .woocommerce-form-login .woocommerce-form-login__rememberme{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:7px;flex-basis:100%}
.checkout-main .woocommerce-form-login .lost_password{flex-basis:100%;font-size:.8rem;margin:0}
.checkout-main .checkout_coupon{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.checkout-main .checkout_coupon .form-row{flex:1;min-width:180px}

/* ── Form fields ── */
.checkout-main #customer_details .col2-set{display:flex;flex-direction:column;gap:18px;float:none;width:auto}
.checkout-main #customer_details .col2-set .col-1,.checkout-main #customer_details .col2-set .col-2{float:none;width:100%;margin:0;padding:0}
.checkout-main .woocommerce-billing-fields__field-wrapper,
.checkout-main .woocommerce-additional-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checkout-main .form-row{display:flex;flex-direction:column;gap:6px;margin:0;float:none!important;width:100%!important}
.checkout-main .form-row.form-row-wide,.checkout-main .form-row.notes,
.checkout-main .form-row.address-field:not(.form-row-first):not(.form-row-last){grid-column:1/-1}
.checkout-main .form-row label{width:auto;float:none;font-family:var(--f-sans);font-size:.74rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2)}
.checkout-main .form-row label .required{color:var(--teal-deep);text-decoration:none}
.checkout-main .form-row .input-text,.checkout-main .form-row select,.checkout-main .form-row textarea,
.checkout-main .select2-selection{font-family:var(--f-sans)!important;font-size:.92rem!important;color:var(--ink)!important;
  background:#fff!important;border:1.5px solid var(--line)!important;border-radius:12px!important;
  padding:12px 14px!important;min-height:46px;outline:none;transition:border-color .18s,box-shadow .18s;width:100%}
.checkout-main .form-row .input-text:focus,.checkout-main .form-row select:focus,.checkout-main .form-row textarea:focus{
  border-color:var(--teal)!important;box-shadow:0 0 0 4px rgba(43,168,156,.14)}
.checkout-main .select2-container--default .select2-selection--single{height:46px!important;display:flex;align-items:center}
.checkout-main .form-row textarea{min-height:90px;resize:vertical}
.checkout-main .form-row.woocommerce-invalid .input-text,.checkout-main .form-row.woocommerce-invalid select{
  border-color:var(--danger)!important;box-shadow:0 0 0 4px rgba(192,57,43,.1)}
.checkout-main .form-row.woocommerce-validated .input-text{border-color:rgba(43,168,156,.6)!important}

/* ── Order review (payment box only — the price table lives in the side card) ── */
.checkout-main #order_review_heading,
.checkout-main table.woocommerce-checkout-review-order-table{display:none}
.checkout-main #order_review{background:transparent;border:0;box-shadow:none;padding:0;margin-top:6px}
.checkout-main #payment{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 24px 26px;
  box-shadow:0 10px 28px -22px rgba(26,28,29,.22)}
.checkout-pay-h{font-family:var(--f-sans);font-size:1.02rem;font-weight:800;color:var(--ink);margin-bottom:4px}
ul.wc_payment_methods{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.wc_payment_methods li.wc_payment_method{border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .18s,background .18s}
ul.wc_payment_methods li.wc_payment_method.active{border-color:var(--teal);background:var(--teal-soft)}
ul.wc_payment_methods label{font-size:.88rem;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:9px}
ul.wc_payment_methods input.input-radio{accent-color:var(--teal);width:16px;height:16px}
.payment_box{font-size:.82rem;color:var(--muted);padding:12px 2px 2px;line-height:1.6}
.payment_box img{display:inline-block;height:20px;vertical-align:middle;margin-left:6px}

.woocommerce-terms-and-conditions-wrapper{font-size:.8rem;color:var(--muted);margin:16px 0 0;line-height:1.6}
.woocommerce-terms-and-conditions-wrapper a{color:var(--teal-deep);font-weight:700}
.woocommerce-terms-and-conditions-wrapper .required{color:var(--teal-deep)}

.form-row.place-order{margin-top:18px}
#place_order,button.checkout{width:100%;justify-content:center;display:flex;align-items:center;gap:9px;
  padding:16px 28px!important;border-radius:100px!important;
  background:linear-gradient(120deg,var(--brand),var(--brand-deep-2))!important;color:#fff!important;
  font-family:var(--f-sans)!important;font-size:.96rem!important;font-weight:700!important;border:0!important;
  cursor:pointer;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s;box-shadow:var(--shadow-teal)}
#place_order:hover{transform:translateY(-2px)}
.checkout-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:.76rem;
  color:var(--muted);text-align:center}
.checkout-trust svg{width:14px;height:14px;color:var(--teal-deep);flex-shrink:0}

/* ── Side card stack ── */
.checkout-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 22px 24px;
  box-shadow:0 10px 28px -22px rgba(26,28,29,.22)}
.checkout-prod{background:var(--ink);color:#fff;border:0;position:relative;overflow:hidden}
.checkout-prod .aura{position:absolute;bottom:-160px;right:-100px;width:360px;height:360px;
  background:radial-gradient(closest-side,rgba(43,168,156,.35),transparent);z-index:0}
.checkout-prod>*{position:relative;z-index:1}
.checkout-prod .kick{font-family:var(--f-sans);font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:10px}
.checkout-prod h3{font-family:var(--f-serif);font-weight:600;font-size:1.35rem;line-height:1.25;color:#fff;margin:0 0 14px}
.checkout-slot{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.checkout-slot-row{display:flex;align-items:center;gap:9px;font-size:.82rem;color:rgba(255,255,255,.82);font-weight:600}
.checkout-slot-row svg{width:14px;height:14px;color:var(--teal-2);flex-shrink:0}
.checkout-inc{display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.checkout-inc div{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;color:rgba(255,255,255,.85);line-height:1.5}
.checkout-inc svg{width:15px;height:15px;color:var(--teal-2);flex-shrink:0;margin-top:2px}

.checkout-price-h{font-family:var(--f-sans);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.checkout-price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.86rem;color:var(--ink);padding:8px 0;border-bottom:1px solid var(--line)}
.checkout-price-row span:last-child{font-weight:700}
.checkout-price-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px;margin-top:4px}
.checkout-price-total .lbl{font-size:1rem;font-weight:800;color:var(--ink)}
.checkout-price-total .val{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;color:var(--teal-deep)}
.checkout-price-total .val small{display:block;text-align:right;font-size:.66rem;font-weight:600;color:var(--muted)}

.checkout-secure{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.checkout-secure div{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;color:var(--muted)}
.checkout-secure svg{width:14px;height:14px;color:var(--teal-deep);flex-shrink:0}

.checkout-note{font-size:.84rem;color:var(--ink-2);line-height:1.6;display:flex;gap:9px;align-items:flex-start}
.checkout-note svg{width:17px;height:17px;color:var(--amber);flex-shrink:0;margin-top:2px}
@media(max-width:640px){
  .checkout-shell{padding:24px 0 60px}
  .checkout-main .woocommerce-billing-fields__field-wrapper,
  .checkout-main .woocommerce-additional-fields__field-wrapper{grid-template-columns:1fr}
}