/* ==========================================================================
   Andontech Consultants Limited - Design system
   Brand (straight off the logo): Blue #223C90 + Red #EE2327 on white.
   Blue carries the design; red is the spice only (CTAs, icons, small hovers).
   ========================================================================== */

/* ----------  Design tokens  ---------- */
:root{
  --primary:#223C90;        /* logo blue */
  --primary-dark:#17265A;   /* deep blue (hover) */
  --primary-light:#4A63B0;  /* lighter blue */
  --accent:#E01F24;         /* logo red - used sparingly (deep enough for white text) */
  --accent-dark:#C4161C;    /* deep red (hover) */
  --accent-light:#FF4B4E;   /* brighter red, for use on dark backgrounds */
  --dark:#16224F;           /* deep navy - dark sections / headings */
  --dark-2:#1E2C5E;
  --dark-3:#28387A;
  --text:#414A5E;
  --muted:#8890A5;
  --heading:#16224F;
  --bg-cream:#F8F8F8;       /* near-white (KAM off-white) */
  --bg-mint:#F3F5FA;        /* very light blue tint */
  --bg-teal-tint:#EAEFF9;
  --white:#ffffff;
  --line:rgba(34,60,144,.12);
  --line-light:rgba(255,255,255,.14);

  --radius:18px;
  --radius-lg:28px;
  --radius-pill:100px;
  --shadow-sm:0 8px 24px rgba(22,34,79,.07);
  --shadow-md:0 20px 50px rgba(22,34,79,.12);
  --shadow-lg:0 30px 70px rgba(22,34,79,.18);

  --ff-body:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-display:"Montserrat","Poppins",system-ui,sans-serif;

  --container:1290px;
  --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----------  Reset  ---------- */
*,*::before,*::after{box-sizing:border-box}
/* NOTE: no overflow-x:hidden on html/body, it silently breaks position:sticky.
   Anything that could bleed sideways is contained at the component level instead. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ff-body);color:var(--text);
  background:var(--white);line-height:1.7;font-size:16px;
  -webkit-font-smoothing:antialiased;width:100%;max-width:100%;
  overflow-x:clip;              /* clip, not hidden: no scroll container, sticky survives */
  overflow-wrap:break-word;     /* long emails/URLs must never widen the page */
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--heading);font-family:var(--ff-display);font-weight:700;line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}

/* ----------  Layout helpers  ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,8vw,120px);position:relative}
.section--tight{padding-block:clamp(48px,6vw,88px)}
.bg-cream{background:var(--bg-cream)}
.bg-mint{background:var(--bg-mint)}
.bg-dark{background:var(--dark);color:rgba(255,255,255,.82)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:#fff}
.text-center{text-align:center}
.grid{display:grid;gap:clamp(20px,2.4vw,30px)}
/* grid children default to min-width:auto, which lets wide content blow the track out */
.grid>*,.about__grid>*,.choose__grid>*,.cta__grid>*,.contact__grid>*,.footer__top>*,.stats>*,.process__grid>*{min-width:0}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ----------  Typography scale  ---------- */
.display{font-family:var(--ff-display);font-size:clamp(2.6rem,6vw,5rem);line-height:1.03;letter-spacing:-.02em}
.h1{font-family:var(--ff-display);font-size:clamp(2.2rem,4.4vw,3.5rem)}
.h2{font-family:var(--ff-display);font-size:clamp(1.9rem,3.6vw,2.9rem)}
.h3{font-family:var(--ff-display);font-size:clamp(1.3rem,2vw,1.6rem)}
.lead{font-size:clamp(1.02rem,1.3vw,1.18rem)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);padding:9px 18px;border-radius:var(--radius-pill);
  background:var(--bg-mint);border:1px solid var(--line);
}
.bg-dark .eyebrow{color:#fff;background:rgba(238,35,39,.18);border-color:rgba(238,35,39,.42)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.section-head{max-width:720px;margin:0 auto clamp(40px,5vw,64px)}
.section-head .h2{margin-top:16px}
.section-head p{margin-top:14px}

/* brand highlight: a red underline stripe rather than a highlighter block */
.mark{position:relative;white-space:nowrap;color:var(--primary);
  background:linear-gradient(180deg,transparent 78%,rgba(224,31,36,.9) 78%,rgba(224,31,36,.9) 90%,transparent 90%)}
/* a nowrap phrase can be wider than a small phone, so let it wrap there */
@media (max-width:700px){.mark{white-space:normal}}
.bg-dark .mark{color:#fff;background:linear-gradient(180deg,transparent 78%,rgba(224,31,36,.95) 78%,rgba(224,31,36,.95) 90%,transparent 90%)}

/* ----------  Buttons  ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;font-size:.98rem;padding:15px 30px;border-radius:var(--radius-pill);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.btn i,.btn svg{transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:hover i{transform:translateX(4px)}
/* Primary = the one action colour: logo red on white text. Reads on light and dark. */
.btn--primary{background:var(--accent);color:#fff;font-weight:700;box-shadow:0 12px 26px rgba(238,35,39,.26)}
.btn--primary:hover{background:var(--accent-dark);color:#fff;box-shadow:0 16px 34px rgba(238,35,39,.34)}
/* Accent = solid blue, for secondary actions on light backgrounds */
.btn--accent{background:var(--primary);color:#fff;box-shadow:0 12px 26px rgba(34,60,144,.3)}
.btn--accent:hover{background:var(--primary-dark);color:#fff}
/* blue on blue disappears, so on dark bands the solid action button turns red */
.bg-dark .btn--accent,.cta-band .btn--accent,.hero .btn--accent,.svc-cta .btn--accent,.trust .btn--accent{
  background:var(--accent);color:#fff;box-shadow:0 12px 26px rgba(238,35,39,.28)}
.bg-dark .btn--accent:hover,.cta-band .btn--accent:hover,.hero .btn--accent:hover,.svc-cta .btn--accent:hover,.trust .btn--accent:hover{
  background:var(--accent-dark);color:#fff}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{background:var(--accent);color:#fff}
.btn--ghost{background:transparent;color:var(--primary);border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--primary);background:var(--primary);color:#fff}
.bg-dark .btn--ghost,.hero .btn--ghost,.page-banner .btn--ghost,.cta-band .btn--ghost{color:#fff;border-color:var(--line-light)}
.bg-dark .btn--ghost:hover,.hero .btn--ghost:hover,.page-banner .btn--ghost:hover,.cta-band .btn--ghost:hover{background:#fff;color:var(--primary);border-color:#fff}
.btn--white{background:#fff;color:var(--primary)}
.btn--white:hover{background:var(--accent);color:#fff}

/* ==========================================================================
   HEADER + TOP BAR
   ========================================================================== */
.topbar{background:var(--dark-2);color:rgba(255,255,255,.72);font-size:.86rem;position:relative;z-index:101}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:16px;height:44px}
.topbar a{color:inherit}.topbar a:hover{color:#fff}
.topbar .nita{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#fff}
.topbar .nita b{color:var(--accent-light);font-weight:700}
.topbar__right{display:flex;gap:22px;align-items:center}
.topbar__right .sep{opacity:.35}
.topbar__social{display:flex;gap:12px}
.topbar__social a{opacity:.8}

.header{position:absolute;top:44px;left:0;width:100%;z-index:100;transition:all .35s var(--ease)}
.header.is-stuck{position:fixed;top:0;background:var(--white);box-shadow:0 6px 24px rgba(22,34,79,.10);animation:slideDown .4s var(--ease)}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px}

/* solid, in-flow white header (home page); sticks to the top on scroll */
.header--solid,.header--solid.is-stuck{position:sticky;top:0;background:var(--white);animation:none}
.header--solid{box-shadow:0 1px 0 var(--line)}
.header--solid.is-stuck{box-shadow:0 6px 24px rgba(22,34,79,.10)}
.header--solid .nav>li>a{color:var(--dark)}
.header--solid .nav>li>a:hover{color:var(--primary)}
.header--solid .nav-toggle{color:var(--dark)}
.header--solid .brand--chip,.header--solid.is-stuck .brand--chip{background:transparent;box-shadow:none;padding:0}

/* brand logo (kept in a white chip so the blue logo reads on any background) */
.brand{display:inline-flex;align-items:center}
.brand--chip{background:#fff;padding:9px 16px;border-radius:14px;box-shadow:0 10px 26px rgba(22,34,79,.16);transition:all .3s var(--ease)}
.header.is-stuck .brand--chip{box-shadow:none;padding:6px 6px}
.brand__logo{height:46px;width:auto;display:block}
.footer .brand--chip{box-shadow:none}
.brand--footer{background:transparent;padding:0}
.brand--footer .brand__logo{height:56px}

.nav{display:flex;align-items:center;gap:6px}
.nav>li{position:relative}
.nav>li>a{display:flex;align-items:center;gap:6px;padding:12px 15px;font-weight:500;font-size:.98rem;color:rgba(255,255,255,.92)}
.header.is-stuck .nav>li>a{color:var(--dark)}
.nav>li>a:hover{color:#fff}
.header.is-stuck .nav>li>a:hover{color:var(--primary)}
.nav .has-sub>a::after{content:"\f107";font-family:"Font Awesome 6 Free","FontAwesome";font-weight:900;font-size:.7rem;opacity:.7}
.submenu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:240px;background:#fff;
  border-radius:14px;box-shadow:var(--shadow-md);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all .28s var(--ease);z-index:20;
}
.nav>li:hover>.submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu li a{display:block;padding:10px 14px;border-radius:10px;color:var(--text);font-size:.94rem}
.submenu li a:hover{background:var(--bg-mint);color:var(--primary)}
.header__cta{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav-toggle{display:none;font-size:1.5rem;color:#fff;padding:8px;margin-left:auto}
.header.is-stuck .nav-toggle{color:var(--dark)}

/* mobile drawer */
.mobile-nav{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:#fff;z-index:200;
  transform:translateX(100%);transition:transform .4s var(--ease);padding:26px;overflow-y:auto;box-shadow:var(--shadow-lg)}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.mobile-nav a{color:var(--dark)}
.mobile-nav ul li>a{display:block;padding:12px 8px;border-bottom:1px solid var(--line);font-weight:500}
.mobile-nav .has-sub>a{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mobile-nav .has-sub>a::after{content:"\f107";font-family:"Font Awesome 6 Free","FontAwesome";font-weight:900;font-size:.85rem;opacity:.55;transition:transform .3s var(--ease)}
.mobile-nav .has-sub.open>a{color:var(--primary)}
.mobile-nav .has-sub.open>a::after{transform:rotate(180deg);opacity:1}
.mobile-nav .sub{padding-left:16px;font-size:.92rem}
.mobile-nav .sub a{color:var(--text);border-bottom:1px dashed var(--line)}
.mobile-close{font-size:1.6rem;color:var(--dark)}
.overlay{position:fixed;inset:0;background:rgba(22,34,79,.55);z-index:150;opacity:0;visibility:hidden;transition:.3s}
.overlay.show{opacity:1;visibility:visible}

/* ==========================================================================
   HERO
   ========================================================================== */
/* ---- Full-bleed video hero (KAM-style) ---- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  text-align:center;background:var(--dark);color:#fff;overflow:hidden;padding:150px 0 90px}
/* hero that sits below a solid, in-flow header (no overlap padding needed) */
.hero--offset{min-height:min(76vh,720px);padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,104px)}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:url("../images/seminar-wide.webp") center/cover no-repeat var(--dark)}
/* 16:9 iframe scaled to always cover the hero box.
   The extra scale() over-crops the frame so YouTube's title/branding overlay
   (top of the player) is pushed outside the visible hero area. */
.hero__video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.4);border:0;
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;pointer-events:none}
.hero__overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,24,60,.72) 0%,rgba(16,24,60,.58) 40%,rgba(16,24,60,.82) 100%)}
.hero .container{position:relative;z-index:2}
.hero__content{max-width:940px;margin:0 auto}
.hero__eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  font-family:var(--ff-body);font-weight:600;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;padding:8px 18px;border-radius:var(--radius-pill);
  background:rgba(238,35,39,.18);border:1px solid rgba(238,35,39,.45)}
.hero__title{font-family:var(--ff-display);font-weight:700;font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.06;color:#fff;letter-spacing:-.01em}
.hero__title em{font-style:normal;color:var(--accent-light)}
.hero p{max-width:660px;margin:24px auto 34px;font-size:clamp(1.02rem,1.4vw,1.18rem);color:rgba(255,255,255,.82)}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}
.hero__trust{display:flex;flex-wrap:wrap;gap:16px 30px;margin-top:34px;justify-content:center;color:rgba(255,255,255,.82);font-size:.94rem}
.hero__trust li{display:inline-flex;align-items:center;gap:9px}
.hero__trust i{color:var(--accent-light)}
.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.7);font-size:1.2rem;animation:heroBounce 2s var(--ease) infinite}
@keyframes heroBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}
/* legacy split-hero pieces (unused on home, kept for other pages) */
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,4vw,64px);align-items:center;position:relative;z-index:2}
.hero__call{display:inline-flex;align-items:center;gap:12px;font-weight:600;color:#fff}
.hero__call .ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid var(--line-light);color:var(--accent);font-size:1.1rem}
.hero__call small{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.hero__aside{position:relative}
.hero__img{border-radius:var(--radius-lg);width:100%;aspect-ratio:3/4;object-fit:cover;box-shadow:var(--shadow-lg)}
.hero__card{background:rgba(255,255,255,.05);border:1px solid var(--line-light);border-radius:var(--radius-lg);padding:30px;backdrop-filter:blur(6px)}
.hero__stat{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-light)}
.hero__stat:last-child{border-bottom:0}
.hero__stat b{font-size:2rem;color:var(--accent);font-family:var(--ff-display);line-height:1}
.hero__stat span{font-size:.92rem;color:rgba(255,255,255,.7)}
.hero__mini-imgs{display:flex}
.hero__mini-imgs img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--dark);margin-left:-12px}
.hero__mini-imgs img:first-child{margin-left:0}

/* ==========================================================================
   PAGE BANNER (inner pages) — taller, image-backed
   ========================================================================== */
.page-banner{background:var(--dark);color:#fff;padding-top:clamp(170px,20vh,210px);padding-bottom:clamp(90px,12vh,130px);text-align:center;position:relative;overflow:hidden}
.page-banner::before{content:"";position:absolute;top:-30%;right:5%;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(238,35,39,.14),transparent 62%)}
.page-banner--bg{background-image:linear-gradient(rgba(22,34,79,.86),rgba(20,30,72,.92)),url(../images/train-1.jpg);background-size:cover;background-position:center}
.page-banner h1{font-size:clamp(2.4rem,5vw,3.8rem);color:#fff;position:relative}
.page-banner p{position:relative;color:rgba(255,255,255,.78);max-width:640px;margin:16px auto 0}
.breadcrumb{display:inline-flex;gap:10px;align-items:center;margin-top:18px;color:rgba(255,255,255,.62);font-size:.95rem;position:relative}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{color:var(--accent-light)}

/* ==========================================================================
   FEATURE / APPROACH cards
   ========================================================================== */
.feature-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.feature-card.bg-dark{background:var(--dark)}
.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent}
.feature-card .ic{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;background:var(--bg-mint);margin-bottom:22px;transition:.35s;color:var(--primary)}
.feature-card:hover .ic{background:var(--primary);color:#fff}
.feature-card .ic img{width:38px;height:38px;object-fit:contain}
.feature-card h3{font-size:1.28rem;margin-bottom:10px}
.feature-card p{margin-bottom:18px;font-size:.98rem}
/* image-topped feature card (What We Do) */
.feature-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/11;margin-bottom:22px;position:relative}
.feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.feature-card:hover .feature-media img{transform:scale(1.07)}
.feature-media .badge{position:absolute;top:14px;left:14px;width:52px;height:52px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--primary);font-size:1.3rem;box-shadow:var(--shadow-sm)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--primary)}
.link-arrow:hover{color:var(--accent)}
.link-arrow i{transition:transform .3s var(--ease)}
.link-arrow:hover i{transform:translateX(5px)}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.about__media{position:relative}
.about__media img.main{border-radius:var(--radius-lg);width:100%;object-fit:cover}
.about__media .img2{position:absolute;right:-10px;bottom:-30px;width:52%;border-radius:var(--radius);border:6px solid #fff;box-shadow:var(--shadow-md)}
.about__badge{position:absolute;left:-18px;top:26px;background:var(--primary);color:#fff;border-radius:18px;padding:20px 24px;text-align:center;box-shadow:var(--shadow-md)}
.about__badge b{display:block;font-family:var(--ff-display);font-size:2.1rem;color:#fff;line-height:1}
.about__badge span{font-size:.82rem;color:rgba(255,255,255,.82)}
.ceo{display:flex;align-items:center;gap:16px;margin:26px 0;padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-cream)}
.ceo img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.ceo b{color:var(--primary);display:block}
.ceo span{font-size:.9rem}
.skills{margin-top:26px}
.skill{margin-bottom:16px}
.skill__top{display:flex;justify-content:space-between;font-weight:600;color:var(--primary);font-size:.92rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
.skill__bar{height:8px;border-radius:100px;background:var(--line);overflow:hidden}
.skill__fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--primary-light),var(--primary));width:0;transition:width 1.4s var(--ease)}
.rating-row{display:flex;align-items:center;gap:12px;margin-top:8px;color:var(--primary);font-weight:600}
.stars{color:var(--accent)}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;height:100%;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;position:relative;overflow:hidden}
.svc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--primary),var(--accent));transform:scaleY(0);transform-origin:top;transition:.4s var(--ease)}
.svc-card:hover::before{transform:scaleY(1)}
.svc-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent}
.svc-card .ic{width:66px;height:66px;border-radius:16px;background:var(--bg-mint);display:grid;place-items:center;margin-bottom:20px;color:var(--primary);font-size:1.6rem}
.svc-card .ic img{width:34px;height:34px}
.svc-card h3{font-size:1.2rem;margin-bottom:12px}
.svc-card ul{margin:14px 0 20px}
.svc-card ul li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:.95rem}
.svc-card ul li i{color:var(--accent);margin-top:5px;font-size:.8rem}
.svc-card__num{font-family:var(--ff-display);font-size:.95rem;color:var(--muted);font-weight:600}
.svc-cta{background:var(--dark);color:#fff;border-radius:var(--radius);padding:34px 30px;display:flex;flex-direction:column;justify-content:center;text-align:center;height:100%}
.svc-cta h3{color:#fff;margin-bottom:16px;font-size:1.3rem}

/* ---- Course catalogue list ---- */
.course-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}
.course-item{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.course-item:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow)}
.course-item .num{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--bg-mint,rgba(16,24,60,.06));color:var(--primary);
  font-family:var(--ff-display);font-weight:700;font-size:.95rem}
.course-item:hover .num{background:var(--primary);color:#fff}
.course-item h3{font-size:1.04rem;margin:0;line-height:1.35}

/* ==========================================================================
   STATS / COUNTERS
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);text-align:center}
.stats--4{grid-template-columns:repeat(4,1fr)}
/* Counters run on the .h2 type scale (clamp copied from .h2 so they stay in step).
   NOTE: the label rules below must stay `.stat > span` — a plain `.stat span`
   also matches the digits inside <b> and shrinks them to label size. */
.stat b{font-family:var(--ff-display);font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;color:var(--primary);line-height:1;
  letter-spacing:-.03em;display:flex;align-items:baseline;justify-content:center;gap:3px}
.bg-dark .stat b{color:#fff}
.stat .suffix{color:var(--accent);font-size:.62em;line-height:1}
.bg-dark .stat .suffix{color:var(--accent-light)}
.stat > span{display:block;margin-top:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;color:var(--muted)}
.bg-dark .stat > span{color:rgba(255,255,255,.7)}
.stat-features{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:44px}
.stat-features div{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--primary)}
.bg-dark .stat-features div{color:#fff}
.stat-features i{color:var(--accent)}

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.choose__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.choose-items{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.choose-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:.35s}
.choose-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.choose-card .ic{width:56px;height:56px;border-radius:14px;background:var(--bg-mint);display:grid;place-items:center;margin-bottom:16px;color:var(--primary);font-size:1.4rem}
.choose-card:hover .ic{background:var(--primary);color:#fff}
.choose-card h3{font-size:1.12rem;margin-bottom:8px}
.choose-card p{font-size:.92rem;margin:0}
.choose__media{position:relative}
.choose__media img{width:100%;border-radius:var(--radius-lg);object-fit:cover}

/* ==========================================================================
   PROCESS (animated timeline)
   ========================================================================== */
.process{position:relative}
.process__grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,36px)}
.process__line{position:absolute;top:62px;left:16%;right:16%;height:3px;background:var(--line);z-index:0;border-radius:3px;overflow:hidden}
.process__line span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary-light));transition:width 1.8s var(--ease)}
.process__line.in span{width:100%}
.process-step{position:relative;z-index:1;padding:36px 30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.process-step:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent}
.process-step__num{position:absolute;top:24px;right:28px;font-family:var(--ff-display);font-size:1.9rem;font-weight:700;color:var(--bg-teal-tint);transition:color .4s,transform .4s}
.process-step:hover .process-step__num{color:var(--accent)}
.process-step .ic{width:74px;height:74px;border-radius:20px;background:var(--primary);display:grid;place-items:center;margin-bottom:22px;color:#fff;font-size:1.6rem;transition:.5s var(--ease)}
.process-step.in .ic{animation:popIn .6s var(--ease) both}
@keyframes popIn{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.process-step h3{font-size:1.25rem;margin-bottom:14px}
.process-step ul li{display:flex;gap:10px;padding:5px 0;font-size:.95rem}
.process-step ul li i{color:var(--accent);margin-top:6px;font-size:.75rem}
.quote-band{margin-top:56px;text-align:center;max-width:900px;margin-inline:auto}
.quote-band img{width:56px;margin:0 auto 20px;opacity:.9}
.quote-band p{font-family:var(--ff-display);font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--primary);line-height:1.4;font-weight:500}

/* ==========================================================================
   PORTFOLIO / WORK
   ========================================================================== */
.work-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--dark)}
.work-card img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s var(--ease);opacity:.94}
.work-card:hover img{transform:scale(1.06)}
.work-card__body{position:absolute;inset:auto 0 0 0;padding:26px;background:linear-gradient(to top,rgba(22,34,79,.94),transparent);color:#fff;transform:translateY(14px);transition:.4s;opacity:.98}
.work-card:hover .work-card__body{transform:translateY(0)}
.work-card__body small{color:var(--accent-light);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem}
.work-card__body h3{color:#fff;font-size:1.3rem;margin-top:6px}
.work-card__arrow{position:absolute;top:22px;right:22px;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--primary);display:grid;place-items:center;transform:scale(0) rotate(-30deg);transition:.4s}
.work-card:hover .work-card__arrow{transform:scale(1) rotate(0)}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;text-align:center;transition:.35s}
.team-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.team-card__media{position:relative;background:var(--bg-mint);overflow:hidden}
.team-card__media img{width:100%;transition:transform .5s var(--ease)}
.team-card:hover .team-card__media img{transform:scale(1.05)}
.team-social{position:absolute;left:0;right:0;bottom:16px;display:flex;gap:8px;justify-content:center;opacity:0;transform:translateY(14px);transition:.4s}
.team-card:hover .team-social{opacity:1;transform:translateY(0)}
.team-social a{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--primary);box-shadow:var(--shadow-sm)}
.team-social a:hover{background:var(--accent);color:#fff}
.team-card__body{padding:22px}
.team-card__body h3{font-size:1.18rem}
.team-card__body span{color:var(--primary);font-weight:600;font-size:.9rem}

/* ==========================================================================
   BRAND MARQUEE
   ========================================================================== */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:70px;width:max-content;animation:scrollX 28s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee img{height:36px;width:auto;transition:.3s;flex:none}
.marquee img:hover{transform:scale(1.04)}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;height:100%}
.testi-card .stars{color:var(--accent);margin-bottom:16px}
.testi-card p{font-size:1.06rem;color:var(--primary);line-height:1.6}
.testi-card__foot{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.testi-card__foot img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.testi-card__foot b{display:block;color:var(--primary)}
.testi-card__foot span{font-size:.88rem;color:var(--accent)}

/* ==========================================================================
   TRUST / CTA BANDS
   ========================================================================== */
.trust{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--dark) 0%,var(--primary) 100%);color:#fff;border-radius:var(--radius-lg);padding:clamp(46px,7vw,84px);text-align:center}
.trust::after{content:"";position:absolute;top:-40%;right:-6%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(238,35,39,.22),transparent 62%)}
.trust>*{position:relative}
.trust .eyebrow{background:rgba(255,255,255,.14);color:#fff;border-color:transparent}
.trust h2{color:#fff;max-width:900px;margin-inline:auto}
.trust p{color:rgba(255,255,255,.85)}

/* image-backed CTA band (homepage footer CTA) */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(56px,9vw,120px) clamp(24px,5vw,60px);text-align:center;color:#fff;
  background:linear-gradient(120deg,rgba(22,34,79,.94),rgba(34,60,144,.82)),url(../images/tpm-seminar.webp);background-size:cover;background-position:center}
.cta-band .eyebrow{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.cta-band h2{color:#fff;max-width:820px;margin:16px auto 18px;font-size:clamp(2rem,4vw,3.2rem)}
.cta-band p{color:rgba(255,255,255,.86);max-width:600px;margin:0 auto 30px}
.cta-band__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   CTA (split)
   ========================================================================== */
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:center}
.cta__media img{border-radius:var(--radius-lg);width:100%}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:860px;margin-inline:auto}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;background:#fff;overflow:hidden;transition:.3s}
.faq-item.open{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;padding:22px 26px;font-weight:600;font-size:1.08rem;color:var(--primary)}
.faq-q .icon{width:34px;height:34px;flex:none;border-radius:50%;background:var(--bg-mint);display:grid;place-items:center;color:var(--primary);transition:.3s}
.faq-item.open .faq-q .icon{background:var(--accent);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 26px 24px;margin:0;color:var(--text)}

/* ==========================================================================
   BLOG (retained utility)
   ========================================================================== */
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.35s;height:100%;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.post-card__media{overflow:hidden}
.post-card__media img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform .5s var(--ease)}
.post-card:hover .post-card__media img{transform:scale(1.06)}
.post-card__body{padding:26px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;gap:16px;font-size:.85rem;color:var(--muted);margin-bottom:12px}
.post-meta i{color:var(--primary);margin-right:5px}
.post-card__body h3{font-size:1.22rem;line-height:1.3;margin-bottom:14px}
.post-card__body h3 a:hover{color:var(--accent)}
.post-card .link-arrow{margin-top:auto}

/* ==========================================================================
   NEWSLETTER (retained utility)
   ========================================================================== */
.newsletter{background:var(--dark);border-radius:var(--radius-lg);padding:clamp(40px,6vw,64px);text-align:center;color:#fff;position:relative;overflow:hidden}
.newsletter h2{color:#fff;position:relative}
.newsletter form{display:flex;gap:12px;max-width:520px;margin:26px auto 0;position:relative;flex-wrap:wrap}
.newsletter input{flex:1;min-width:220px;padding:16px 22px;border-radius:var(--radius-pill);border:1px solid var(--line-light);background:rgba(255,255,255,.06);color:#fff;font-size:1rem}
.newsletter input::placeholder{color:rgba(255,255,255,.5)}

/* ==========================================================================
   PRICING (retained utility)
   ========================================================================== */
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px 32px;height:100%;transition:.35s;position:relative}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.price-card.featured{background:var(--dark);color:rgba(255,255,255,.8);border-color:transparent}
.price-card.featured h3,.price-card.featured .price{color:#fff}
.price-badge{position:absolute;top:22px;right:26px;background:var(--accent);color:#fff;font-weight:600;font-size:.78rem;padding:6px 14px;border-radius:100px}
.price-card h3{font-size:1.3rem;margin-bottom:6px}
.price{font-family:var(--ff-display);font-size:3rem;color:var(--primary);line-height:1;margin:18px 0}
.price small{font-size:1rem;color:var(--muted);font-family:var(--ff-body)}
.price-card ul{margin:24px 0 30px}
.price-card ul li{display:flex;gap:10px;padding:8px 0;font-size:.96rem;border-bottom:1px solid var(--line)}
.price-card.featured ul li{border-color:var(--line-light)}
.price-card ul li i{color:var(--accent)}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery-item{border-radius:var(--radius);overflow:hidden;position:relative}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item::after{content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.6rem;background:rgba(22,34,79,.5);opacity:0;transition:.35s}
.gallery-item:hover::after{opacity:1}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,56px)}
.contact-info li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-info .ic{width:54px;height:54px;flex:none;border-radius:14px;background:var(--bg-mint);display:grid;place-items:center;color:var(--primary);font-size:1.2rem}
.contact-info li>div{min-width:0}
.contact-info a{overflow-wrap:anywhere}
.contact-info b{display:block;color:var(--primary)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-weight:600;color:var(--primary);font-size:.9rem}
.field input,.field textarea,.field select{padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg-cream);font-family:inherit;font-size:.98rem;color:var(--dark);transition:.25s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);background:#fff;outline:none}
.field textarea{min-height:150px;resize:vertical}
.form-note{margin-top:16px;font-size:.9rem}
.form-note.ok{color:var(--primary);font-weight:600}
.map-embed{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.map-embed iframe{display:block;width:100%;height:420px;border:0;filter:grayscale(.15)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--dark);color:rgba(255,255,255,.66);padding-top:clamp(64px,8vw,110px);position:relative;overflow:hidden;background-image:url(../images/footer_bg.avif);background-size:cover;background-position:center}
.footer::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,34,79,.95),rgba(20,30,72,.97))}
.footer>*{position:relative}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,48px);padding-bottom:56px;border-bottom:1px solid var(--line-light)}
.footer h4{color:#fff;font-size:1.1rem;margin-bottom:20px}
.footer ul li{margin-bottom:12px}
.footer ul li a{transition:.25s}
.footer ul li a:hover{color:#fff;padding-left:5px}
.footer-social{display:flex;gap:10px;margin-top:20px}
.footer-social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.3s}
.footer-social a:hover{background:var(--accent);color:#fff}
.footer-contact li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.footer-contact i{color:var(--accent-light);margin-top:5px}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 0;font-size:.9rem}
.footer__bottom a:hover{color:#fff}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.to-top{position:fixed;right:24px;bottom:24px;width:50px;height:50px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:1.1rem;z-index:90;opacity:0;visibility:hidden;transform:translateY(20px);transition:.35s var(--ease);box-shadow:var(--shadow-md)}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--accent);color:#fff;transform:translateY(-4px)}

/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */
[data-anim]{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-anim="up"]{transform:translateY(46px)}
[data-anim="left"]{transform:translateX(-46px)}
[data-anim="right"]{transform:translateX(46px)}
/* sideways reveals push content 46px past the viewport edge until they play.
   That only clears once the viewport exceeds the 1290px container plus 2x46,
   so below 1400px the reveal runs vertically instead. */
@media (max-width:1400px){
  [data-anim="left"],[data-anim="right"]{transform:translateY(40px)}
}
[data-anim="zoom"]{transform:scale(.9)}
[data-anim].in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.12s}
[data-delay="2"]{transition-delay:.24s}
[data-delay="3"]{transition-delay:.36s}
[data-delay="4"]{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;transition:none}
  .marquee__track,.process-step.in .ic{animation:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   MEDIA PLACEHOLDERS (fallback for any not-yet-supplied media)
   ========================================================================== */
.media-ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:repeating-linear-gradient(135deg,var(--bg-mint),var(--bg-mint) 14px,var(--bg-teal-tint) 14px,var(--bg-teal-tint) 28px);
  border:1.5px dashed rgba(34,60,144,.24);border-radius:var(--radius-lg);color:var(--primary);
  text-align:center;padding:24px;min-height:180px;overflow:hidden;width:100%}
.media-ph i{font-size:1.9rem;opacity:.55}
.media-ph span{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.media-ph small{font-size:.7rem;color:var(--muted);letter-spacing:.04em}
.media-ph--sq{aspect-ratio:1/1;min-height:0}
.media-ph--wide{aspect-ratio:16/10;min-height:0}
.media-ph--portrait{aspect-ratio:3/4;min-height:0}
.media-ph--circle{border-radius:50%;aspect-ratio:1/1;min-height:0}
.media-ph--dark{background:rgba(255,255,255,.04);border-color:var(--line-light);color:#fff}
.media-ph--dark small{color:rgba(255,255,255,.5)}

/* ==========================================================================
   PHOTO BAND (home "a look at the work itself")
   ========================================================================== */
.photo-band{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.photo-band__item{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--dark);
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.photo-band__item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease)}
.photo-band__item figcaption{position:absolute;inset:auto 0 0 0;padding:26px 16px 12px;color:#fff;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  background:linear-gradient(to top,rgba(22,34,79,.92),transparent);
  opacity:0;transform:translateY(8px);transition:.35s var(--ease)}
.photo-band__item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.photo-band__item:hover img{transform:scale(1.06)}
.photo-band__item:hover figcaption{opacity:1;transform:translateY(0)}
/* touch devices never hover, so keep the captions visible there */
@media (hover:none){.photo-band__item figcaption{opacity:1;transform:none}}

/* client logo wall (real marks on white cards) */
.logo-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.logo-chip{flex:0 1 200px;display:flex;align-items:center;justify-content:center;height:100px;padding:18px 26px;border:1px solid var(--line);
  border-radius:14px;background:#fff;transition:.3s var(--ease)}
/* client marks stay in full colour, no hover needed to see them */
.logo-chip img{max-height:100%;max-width:100%;width:auto;object-fit:contain;transition:transform .3s var(--ease)}
.logo-chip:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.logo-chip:hover img{transform:scale(1.04)}

/* offices */
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.office-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.office-card .flag{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--primary);margin-bottom:12px}
.office-card .flag span{width:34px;height:34px;border-radius:9px;background:var(--bg-mint);display:grid;place-items:center;color:var(--primary)}
.office-card p{margin:0;font-size:.95rem}
.bg-dark .office-card{background:rgba(255,255,255,.04);border-color:var(--line-light)}
.bg-dark .office-card .flag{color:#fff}

/* NITA badge */
.nita-badge{display:inline-flex;align-items:center;gap:12px;background:rgba(34,60,144,.08);border:1px solid rgba(34,60,144,.18);
  border-radius:14px;padding:14px 18px;color:var(--dark)}
.nita-badge .ic{width:44px;height:44px;border-radius:10px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:1.2rem;flex:none}
.nita-badge b{display:block;color:var(--primary);font-size:.8rem;letter-spacing:.04em}
.nita-badge span{font-size:.82rem;color:var(--text)}
.bg-dark .nita-badge,.footer .nita-badge{background:rgba(255,255,255,.06);border-color:var(--line-light)}
.bg-dark .nita-badge b,.footer .nita-badge b{color:#fff}
.bg-dark .nita-badge span,.footer .nita-badge span{color:rgba(255,255,255,.7)}

/* value tags */
.tag-list{display:flex;flex-wrap:wrap;gap:12px}
.tag{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:100px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:.92rem;color:var(--primary);transition:.3s}
.tag i{color:var(--accent)}
.tag:hover{border-color:var(--primary);background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.tag:hover i{color:#fff}

/* mobile sticky call / whatsapp */
.mobile-cta{position:fixed;left:14px;right:14px;bottom:14px;z-index:95;display:none;gap:10px}
.mobile-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:100px;font-weight:700;font-size:.95rem;box-shadow:var(--shadow-lg)}
.mobile-cta .call{background:var(--primary);color:#fff}
.mobile-cta .wa{background:#25D366;color:#fff}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .hero__grid{grid-template-columns:1fr}
  .hero__aside{max-width:460px}
  .footer__top{grid-template-columns:1fr 1fr}
  .process__line{display:none}
}
@media (max-width:920px){
  .nav,.header__cta .btn{display:none}
  .nav-toggle{display:block}
  .topbar{display:none}
  .header{top:0}
  .about__grid,.choose__grid,.cta__grid,.contact__grid{grid-template-columns:1fr}
  .g-3,.process__grid,.stats,.stats--4,.gallery-grid,.offices{grid-template-columns:1fr 1fr}
  .photo-band{grid-template-columns:repeat(3,1fr)}
  .post-row{grid-template-columns:1fr}
  .about__media{max-width:520px;margin-inline:auto}
  .mobile-cta{display:flex}
  .to-top{bottom:82px}
}
@media (max-width:640px){
  .g-2,.g-3,.g-4,.choose-items,.process__grid,.gallery-grid,.form-grid,.offices{grid-template-columns:1fr}
  .stats,.stats--4{grid-template-columns:repeat(2,1fr);gap:34px 16px}
  .stat > span{font-size:.72rem;letter-spacing:.05em;margin-top:10px;line-height:1.35}
  .photo-band{grid-template-columns:repeat(2,1fr)}
  .photo-band__item figcaption{font-size:.72rem;padding:20px 10px 9px}
  /* client logos: two per row on phones */
  .logo-wall{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .logo-chip{flex:1 1 auto;height:84px;padding:14px 16px}
  .section{padding-block:64px}
  .hero{padding-top:120px}
  .hero--offset{padding-top:clamp(40px,9vw,56px)}
  .footer__top{grid-template-columns:1fr;gap:34px}
  .footer__bottom{flex-direction:column;text-align:center}
  .cta-band__actions .btn,.hero__actions .btn{width:100%}
}
@media (max-width:400px){
  /* long button labels are wider than a 320px screen once nowrap kicks in */
  .btn{padding:14px 20px;font-size:.92rem;white-space:normal;text-align:center;max-width:100%}
}

/* ==========================================================================
   EVENT BAND (featured upcoming course on the home page)
   ========================================================================== */
.event{position:relative;overflow:hidden;scroll-margin-top:110px}
.event::after{content:"";position:absolute;top:-32%;right:-8%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,31,36,.22),transparent 62%);pointer-events:none}
.event>*{position:relative;z-index:1}
.event__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4vw,64px);align-items:center}
.event__grid>*{min-width:0}
.event__flag{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;padding:8px 18px;
  border-radius:var(--radius-pill);background:var(--accent);color:#fff;
  font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.event h2{margin-bottom:14px}
.event__intro>p{color:rgba(255,255,255,.8)}
.event__meta{display:grid;gap:14px;margin:26px 0 30px}
.event__meta li{display:flex;gap:14px;align-items:flex-start}
.event__meta .ic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid var(--line-light);color:var(--accent-light)}
.event__meta div{min-width:0;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.72)}
.event__meta b{display:block;color:#fff;font-size:.92rem}
.event__actions{display:flex;flex-wrap:wrap;gap:14px}
.event__contact{margin:18px 0 0;font-size:.88rem;color:rgba(255,255,255,.62)}
.event__contact a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.event__contact a:hover{color:var(--accent-light)}

.event__tiers{display:grid;gap:14px}
.belt{display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:var(--radius);
  background:rgba(255,255,255,.06);border:1px solid var(--line-light);
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.belt:hover{transform:translateX(4px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.belt__swatch{width:8px;flex:none;align-self:stretch;border-radius:100px}
.belt--yellow .belt__swatch{background:#F5C518}
.belt--green .belt__swatch{background:#2FA84F}
.belt--black .belt__swatch{background:#0B0F1F;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.belt__body{flex:1;min-width:0}
.belt__body h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;color:#fff;font-size:1.16rem}
.belt__body h3 small{font-family:var(--ff-body);font-weight:600;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.62);background:rgba(255,255,255,.08);padding:3px 10px;border-radius:100px}
.belt__body p{margin:6px 0 8px;font-size:.9rem;color:rgba(255,255,255,.7)}
.belt__when{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:#fff}
.belt__when i{color:var(--accent-light);font-size:.82rem}
.belt__price{flex:none;text-align:right}
.belt__price b{display:block;font-family:var(--ff-display);font-size:1.3rem;color:#fff;line-height:1.15}
.belt__price span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.event__partner{margin:8px 0 0;font-size:.84rem;line-height:1.6;color:rgba(255,255,255,.6)}
.event__partner b{color:#fff}

@media (max-width:920px){
  .event__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .belt{flex-wrap:wrap;gap:12px 14px;padding:18px}
  .belt__swatch{order:-1;width:100%;height:6px;align-self:auto}
  .belt__price{width:100%;display:flex;align-items:baseline;gap:8px;text-align:left;
    padding-top:12px;border-top:1px solid var(--line-light)}
  .event__actions .btn{width:100%}
}

/* ==========================================================================
   FLOATING WHATSAPP + CONTACT AFFORDANCES
   ========================================================================== */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:96;
  display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 17px;
  border-radius:var(--radius-pill);background:#25D366;color:#fff;font-weight:700;font-size:.95rem;
  box-shadow:0 14px 30px rgba(37,211,102,.38);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wa-float i{font-size:1.75rem;line-height:1}
.wa-float span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .35s var(--ease),opacity .3s var(--ease)}
.wa-float:hover,.wa-float:focus-visible{color:#fff;transform:translateY(-3px);box-shadow:0 18px 38px rgba(37,211,102,.5)}
.wa-float:hover span,.wa-float:focus-visible span{max-width:150px;opacity:1}
/* stack above the WhatsApp button rather than on top of it */
.to-top{bottom:96px}

/* form status + spam honeypot */
.form-hint{margin:14px 0 0;font-size:.88rem;color:var(--muted)}
.form-hint a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form-note.err{color:var(--accent);font-weight:600}
.form-note.err a{text-decoration:underline;text-underline-offset:3px}
.enquiry-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

@media (max-width:920px){
  /* sticky bar keeps the call action; WhatsApp is the floating button */
  .mobile-cta a{flex:1}
  .wa-float{right:14px;bottom:78px;height:54px;padding:0 15px}
  .wa-float i{font-size:1.6rem}
  .to-top{bottom:144px;width:44px;height:44px;font-size:1rem}
}
@media (hover:none){
  /* no hover on touch, so keep the button a clean circle */
  .wa-float{padding:0;width:54px;justify-content:center}
  .wa-float span{display:none}
}