@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Poppins:wght@300;400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand-blue:#1A3ED8;
  --brand-blue2:#1632B0;
  --brand-blue3:#0D2080;
  --brand-green:#5AC800;
  --brand-orange:#E8510A;
  --navy:#0B1527;
  --navy-bg:#00003C;
  --navy2:#111E38;
  --navy3:#1A2F55;
  --blue-light:#EBF0FD;
  --blue-mid:#C8D5FA;
  --green-ui:#0B9E6E;
  --green-bg:#E6F8F3;
  --green-dark:#087A55;
  --gold:#F5A623;
  --gold-bg:#FEF8EC;
  --red:#C62828;--red-bg:#FDECEA;
  --text:#0B1527;--text2:#374766;--text3:#6B7FA0;--text4:#A0AFCA;
  --bg:#F4F7FB;--band:#EEF2F8;--bg2:#EEF2F8;--white:#fff;
  --border:rgba(11,21,39,0.09);--border2:rgba(11,21,39,0.05);
  --r:10px;--r-lg:14px;--r-pill:100px;
  --shadow:0 1px 8px rgba(11,21,39,0.07);
  --shadow-md:0 4px 20px rgba(11,21,39,0.10);
  --shadow-lg:0 8px 40px rgba(11,21,39,0.14);
}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden;font-size:15px;line-height:1.6}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:11px 22px;border-radius:var(--r-pill);font-size:13.5px;font-weight:700;cursor:pointer;border:none;transition:all .2s;font-family:inherit;text-decoration:none;white-space:nowrap;justify-content:center}
.btn-primary{background:var(--brand-blue);color:#fff}
.btn-primary:hover{background:var(--brand-blue2);box-shadow:0 5px 18px rgba(26,62,216,.32);transform:translateY(-1px)}
.btn-orange{background:var(--brand-orange);color:#fff}
.btn-orange:hover{background:#C44008;box-shadow:0 5px 18px rgba(232,81,10,.3);transform:translateY(-1px)}
.btn-outline-white{background:transparent;color:rgba(255,255,255,.88);border:1.5px solid rgba(255,255,255,.3)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn-outline-blue{background:transparent;color:var(--brand-blue);border:1.5px solid var(--brand-blue)}
.btn-outline-blue:hover{background:var(--brand-blue);color:#fff}
.btn-white-solid{background:#fff;color:var(--navy);font-weight:700}
.btn-white-solid:hover{background:rgba(255,255,255,.92);transform:translateY(-1px)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:700;letter-spacing:.04em}
.tag-blue{background:var(--blue-light);color:var(--brand-blue)}
.tag-green{background:var(--green-bg);color:var(--green-dark)}
.tag-gold{background:var(--gold-bg);color:#8C6000}
.tag-orange{background:#FEF0E6;color:#B84000}
.section{padding:76px 0}
/* Set by home.js on the second of two sections that share a background.
   One seam between them instead of two stacked paddings — 76px, the same
   gap the design leaves between any section edge and its content. */
.section.section--seam{padding-top:0}
.section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-blue);margin-bottom:10px}
.section-title{font-family:'DM Sans',sans-serif;font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:700;color:var(--navy);line-height:1.18;letter-spacing:-.3px}
.section-title em{font-style:italic;color:var(--brand-blue)}
.section-sub{font-size:15px;color:var(--text2);line-height:1.75;margin-top:10px}
.section-header-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.5rem;gap:1rem}

/* TOP BAR */
.topbar{background:var(--navy-bg);padding:7px 0}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.topbar-left,.topbar-right{display:flex;gap:18px;align-items:center}
.topbar a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .15s}
.topbar a:hover{color:#fff}
.topbar span{color:rgba(255,255,255,.5)}
.tuv-pill{background:rgba(26,62,216,.25);border:1px solid rgba(26,62,216,.4);color:#8AABFF;padding:3px 10px;border-radius:var(--r-pill);font-size:10px;font-weight:700;letter-spacing:.05em}
.sfcc-pill-top{background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.28);color:var(--gold);padding:3px 10px;border-radius:var(--r-pill);font-size:10px;font-weight:700;letter-spacing:.05em}
.lang-toggle{display:flex;border:1px solid rgba(255,255,255,.15);border-radius:var(--r-pill);overflow:hidden}
.lang-btn{padding:3px 10px;font-size:10px;font-weight:700;letter-spacing:.05em;cursor:pointer;border:none;font-family:inherit;transition:all .15s;background:transparent;color:rgba(255,255,255,.4)}
.lang-btn.active{background:var(--brand-blue);color:#fff}
.lang-btn:hover:not(.active){color:rgba(255,255,255,.8)}

/* NAV */
/*
 * The bare `nav{...}` rule that used to be here has been removed.
 *
 * In index.html, <nav> IS the header bar, so styling the element directly was
 * correct there. In the theme the header bar is .av-header, and the only <nav>
 * on the page is <nav class="av-nav"> INSIDE it, wrapping just the menu links.
 * This rule therefore drew a second bar around those links: white background,
 * 1px bottom border, sticky positioning, and a drop shadow — measured at
 * 1280px as `rgba(11,21,39,.07) 0 1px 8px` sitting inside .av-header's own
 * `rgba(0,0,60,.07) 0 1px 8px`. The same shadow, twice, the inner one boxing
 * the menu.
 *
 * .av-header (theme.css) already supplies the background, border and shadow
 * for the bar, so nothing is lost by dropping this.
 *
 * Do not restore it when re-syncing this file with index.html — it is the one
 * rule from that stylesheet that cannot apply here.
 */
.nav-inner{height:68px;display:flex;align-items:center;gap:1.5rem}
/* Text-based logo - matches course listing/detail pages exactly */
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;margin-right:auto}
.brand-logo{height:42px;width:auto;display:block}
.nav-logo-name{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:700;color:var(--brand-blue);letter-spacing:-.3px;line-height:1}
.nav-logo-sub{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-top:2px}
.nav-links{display:flex;gap:2px;list-style:none}
.nav-links a{font-size:13px;color:var(--text2);text-decoration:none;font-weight:500;padding:6px 10px;border-radius:7px;transition:all .15s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--brand-blue);background:var(--blue-light)}
.nav-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.nav-phone{font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;display:flex;align-items:center;gap:5px}
.nav-phone::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand-green);display:inline-block}
.quick-reg{padding:9px 18px;border-radius:var(--r-pill);background:var(--brand-orange);color:#fff;font-size:13px;font-weight:700;border:none;cursor:pointer;font-family:inherit;transition:all .2s}
.quick-reg:hover{background:#C44008;transform:translateY(-1px)}

/* HERO */
/* Item 6: the first screen should not need scrolling. The hero fills the
   viewport minus the header and centres its contents, with the padding
   clamped so it tightens on short laptops instead of pushing the card down.
   min-height (not height) so it can still grow if the card ever gets taller
   than the screen - clipping the search box would be worse than a scroll. */
/*
 * Hero background.
 *
 * The correction gave two options, one after the other:
 *     background: linear-gradient(45deg, #001FD2, #00003c);
 *     background: radial-gradient(#001FD2, #00003c);
 * Written that way the radial wins, since it comes second - so that is what
 * is live. To use the 45deg linear instead, swap the second line below.
 *
 * background-color and background-image are set as LONGHANDS, deliberately.
 * Written as two `background:` shorthands the second resets background-color
 * to transparent - measured as rgba(0,0,0,0) - so the flat colour meant as a
 * fallback was not there at all. The hero text is white, so a browser that
 * could not paint the gradient would have shown white on white.
 *
 * Contrast measured against the BRIGHTEST point of the ramp (#001FD2), which
 * is the worst case: title 9.87:1, italic 5.58:1, body 6.38:1 - all above the
 * 4.5:1 AA threshold.
 */
.hero{background-color:#00003c;background-image:radial-gradient(#001FD2,#00003c);position:relative;overflow:hidden;padding:clamp(28px,4vh,72px) 0 clamp(24px,4vh,64px);min-height:calc(100svh - var(--av-header-h,86px));display:flex;align-items:center}
.hero-bg-orb1{position:absolute;top:-120px;right:-80px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(26,62,216,.18) 0%,transparent 65%);pointer-events:none}
.hero-bg-orb2{position:absolute;bottom:-80px;left:-60px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(90,200,0,.07) 0%,transparent 65%);pointer-events:none}
.hero-bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1fr 400px;gap:3rem;align-items:center;position:relative;animation:fadeUp .65s ease both;width:100%}
.hero-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:1.25rem;flex-wrap:wrap}
.hero-badge{padding:5px 12px;border-radius:var(--r-pill);font-size:11px;font-weight:700;letter-spacing:.05em}
.hb-tuv{background:rgba(26,62,216,.2);border:1px solid rgba(26,62,216,.35);color:#8AABFF}
.hb-mom{background:rgba(90,200,0,.12);border:1px solid rgba(90,200,0,.25);color:#8FE040}
.hb-sfcc{background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.28);color:var(--gold)}
h1.hero-title{font-family:'DM Sans',sans-serif;font-size:clamp(1.9rem,4vw,3rem);font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.5px;margin-bottom:1.1rem}
h1.hero-title span{color:var(--gold)}
h1.hero-title em{font-style:italic;color:rgba(255,255,255,.72)}
.hero-sub{font-size:15.5px;color:rgba(255,255,255,.78);line-height:1.75;margin-bottom:2rem;max-width:520px}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:2rem}
.hero-trust-pills{display:flex;gap:8px;flex-wrap:wrap}
.htp{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:5px 13px;border-radius:var(--r-pill);font-size:12px;color:rgba(255,255,255,.78);font-weight:500}
.htp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.hero-card{background:#fff;border-radius:18px;padding:26px;box-shadow:0 24px 60px -12px rgba(0,0,0,.35)}
.hc-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.hc-title::before{content:'';width:3px;height:16px;background:var(--brand-blue);border-radius:2px;display:block}
.search-row{display:flex;gap:8px;margin-bottom:14px}
.search-input{flex:1;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;outline:none;color:var(--text);background:var(--bg);transition:border-color .15s}
.search-input:focus{border-color:var(--brand-blue)}
.search-btn{padding:11px 18px;background:var(--brand-blue);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.search-btn:hover{background:var(--brand-blue2)}
/* Type-ahead suggestions under the hero search. The row is the positioning
   context so the panel hangs from the input rather than the card. */
.search-row{position:relative}
.hc-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;box-shadow:0 12px 28px rgba(11,21,39,.14);overflow:hidden;max-height:320px;overflow-y:auto}
.hc-suggest__item{display:flex;flex-direction:column;gap:2px;padding:10px 14px;text-decoration:none;border-bottom:1px solid var(--border)}
.hc-suggest__item:last-child{border-bottom:0}
.hc-suggest__item:hover,.hc-suggest__item:focus{background:var(--bg2,#f5f7fb)}
.hc-suggest__t{font-size:13px;font-weight:700;color:var(--text);line-height:1.35}
.hc-suggest__c{font-size:11px;color:var(--text3,#6b7280)}

/* Item 2: no fixed width. Same behaviour as the "Popular:" row on the Courses
   page - each tile is as wide as its own label and the row wraps when it runs
   out of space. A grid, even with auto-fit, still hands every tile an equal
   column, which is a fixed width by another name. */
.hc-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.hc-cat{flex:0 0 auto;width:auto;max-width:100%;padding:9px 9px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;background:#fff;min-width:0}
.hc-cat:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:var(--blue-light)}
/* Line break after each pair, inserted by home.js. */
.hc-cats__br{flex:0 0 100%;width:100%;height:0;margin:0;padding:0;border:0}
.hc-sfcc{background:var(--gold-bg);border:1px solid rgba(245,166,35,.22);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--navy);display:flex;align-items:center;gap:10px}
.sfcc-icon-box{width:30px;height:30px;background:var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--navy);flex-shrink:0}
.hc-view-all{font-size:12px;color:var(--brand-blue);font-weight:700;text-align:center;margin-top:10px;cursor:pointer;text-decoration:none;display:block}

/* TRUST BAR */
.trust-bar{background:var(--navy2);border-bottom:1px solid rgba(255,255,255,.06);padding:18px 0}
.trust-inner{display:flex;align-items:center;justify-content:space-between}
.trust-item{display:flex;align-items:center;gap:11px;padding:0 24px;border-right:1px solid rgba(255,255,255,.08);flex:1;justify-content:center}
.trust-item:first-child{padding-left:0;justify-content:flex-start}
.trust-item:last-child{border-right:none;padding-right:0;justify-content:flex-end}
.ti-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.ti-num{font-family:'DM Sans',sans-serif;font-size:21px;font-weight:700;color:#fff;line-height:1}
.ti-lbl{font-size:11px;color:rgba(255,255,255,.45);margin-top:1px}

/* CLIENT LOGOS */
.clients-section{background:#fff;border-bottom:1px solid var(--border);padding:52px 0;overflow:hidden}
.clients-heading{text-align:center;font-size:clamp(1.05rem,2vw,1.4rem);font-weight:600;color:var(--text2);max-width:780px;margin:0 auto 36px;line-height:1.55}
.clients-heading b{color:var(--navy);font-weight:700}
.logo-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;align-items:center;gap:66px;width:max-content;animation:logoscroll 46s linear infinite}
.clients-section:hover .logo-track{animation-play-state:paused}
.logo-track img{height:56px;width:auto;object-fit:contain;flex-shrink:0;transition:transform .25s}
.logo-track img:hover{transform:scale(1.08)}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){.logo-track img{height:40px}.logo-track{gap:46px}}

/* COURSES */
.courses-section{background:var(--white)}
.course-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.75rem}
.ctab{padding:8px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--text2);transition:all .15s;font-family:inherit}
.ctab.active,.ctab:hover{background:var(--navy-bg);color:#fff;border-color:var(--navy)}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:.25rem}
.course-card{background:#eef0f7;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px -14px rgba(11,21,39,.22);display:flex;flex-direction:column;transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s}
.course-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -22px rgba(26,62,216,.4)}
.cc-head{position:relative;background:linear-gradient(135deg,#2946e0 0%,#4b34c9 100%);padding:24px 22px;display:flex;align-items:center;gap:15px;min-height:104px}
.cc-badge{width:52px;height:52px;border-radius:50%;background:var(--bg,#dbe3ff);display:grid;place-items:center;font-size:24px;flex-shrink:0;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.cc-code-title{font-family:'DM Sans',sans-serif;font-size:16.5px;font-weight:700;color:#fff;line-height:1.32;letter-spacing:-.2px}
.cc-ribbon{position:absolute;top:14px;right:14px;font-size:10px;font-weight:800;letter-spacing:.04em;color:#fff;padding:5px 11px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.cc-ribbon.hot{background:linear-gradient(135deg,#ff7a1a,#f4510a)}
.cc-ribbon.new{background:linear-gradient(135deg,#f5c518,#f0a800);color:#3a2a00}
.cc-content{padding:22px;display:flex;flex-direction:column;flex:1}
.cc-desc{font-size:14px;color:var(--text2);line-height:1.62;margin-bottom:20px}
.cc-sub-label{font-size:13.5px;color:var(--text2);font-weight:500;margin-bottom:13px}
.cc-subs{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;margin-bottom:22px}
.cc-sub{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--navy);font-weight:500}
.cc-sub::before{content:'✓';color:#22a034;font-weight:800;font-size:14px;flex-shrink:0}
.cc-browse{margin-top:auto;display:block;text-align:center;background:#2a17c9;color:#fff;font-weight:700;font-size:14px;padding:15px;border-radius:12px;text-decoration:none;transition:background .18s,transform .18s}
.cc-browse:hover{background:#1d0fa8;transform:translateY(-2px)}
.courses-viewall{display:inline-block;background:var(--blue-light);color:var(--brand-blue);font-weight:700;font-size:14.5px;padding:15px 40px;border-radius:var(--r-pill);text-decoration:none;transition:all .18s}
.courses-viewall:hover{background:var(--brand-blue);color:#fff}
@media(max-width:960px){.course-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.course-grid{grid-template-columns:1fr}}

/* STATS */
.stats-section{background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);padding:72px 0;position:relative;overflow:hidden}
.stats-section::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:rgba(26,62,216,.12);pointer-events:none}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
/* Item 8: the facts were three numbers on a flat band with hairline dividers -
   accurate but forgettable. Each fact is now a card with its own icon and a
   lift on hover, so the row reads as three achievements rather than a table. */
.stats-grid{gap:16px}
.stat-item{position:relative;text-align:center;padding:26px 20px 24px;border-right:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:16px;backdrop-filter:blur(2px);transition:transform .22s ease,border-color .22s ease,background .22s ease}
.stat-item:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08)}
.stat-ic{width:42px;height:42px;margin:0 auto 12px;border-radius:12px;display:grid;place-items:center;background:rgba(26,62,216,.28);color:#fff;font-size:16px}
.stat-item:last-child{border-right:none}
.stat-num{font-family:'DM Sans',sans-serif;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:700;color:#fff;line-height:1}
.stat-num span{color:var(--gold)}
.stat-lbl{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.72);margin-top:8px;line-height:1.4}

/* SERVICES */
.services-section{background:var(--band)}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:2.5rem}
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 20px;transition:all .22s;cursor:pointer;position:relative;overflow:hidden}
.service-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-blue);transform:scaleX(0);transition:transform .22s;transform-origin:left}
.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(26,62,216,.18)}
.service-card:hover::after{transform:scaleX(1)}
.sc-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.sc-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:7px}
.sc-desc{font-size:13px;color:var(--text2);line-height:1.65}
.sc-link{font-size:12px;font-weight:700;color:var(--brand-blue);margin-top:12px;display:inline-flex;align-items:center;gap:4px}

/* B2B CORPORATE */
.b2b-section{background:var(--navy-bg);padding:76px 0;position:relative;overflow:hidden}
.b2b-section::before{content:'';position:absolute;top:-100px;right:-80px;width:500px;height:500px;border-radius:50%;background:rgba(26,62,216,.15);pointer-events:none}
.b2b-section::after{content:'';position:absolute;bottom:-80px;left:-60px;width:320px;height:320px;border-radius:50%;background:rgba(90,200,0,.05);pointer-events:none}
.b2b-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative}
.b2b-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.b2b-title{font-family:'DM Sans',sans-serif;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.3px;margin-bottom:12px}
.b2b-title em{font-style:italic;color:rgba(255,255,255,.6)}
.b2b-sub{font-size:15px;color:rgba(255,255,255,.65);line-height:1.75;margin-bottom:2rem}
.b2b-features{display:flex;flex-direction:column;gap:14px;margin-bottom:2rem}
.b2b-feat{display:flex;gap:12px;align-items:flex-start}
.b2b-feat-icon{width:36px;height:36px;border-radius:9px;background:rgba(26,62,216,.25);border:1px solid rgba(26,62,216,.35);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;margin-top:1px}
.b2b-feat-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px}
.b2b-feat-desc{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6}
.b2b-ctas{display:flex;gap:10px;flex-wrap:wrap}
.corp-test-stack{display:flex;flex-direction:column;gap:14px}
.corp-test-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:22px}
.ct-stars{color:var(--gold);font-size:12px;letter-spacing:2px;margin-bottom:10px}
.ct-text{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.7;font-style:italic;margin-bottom:14px}
.ct-author{display:flex;align-items:center;gap:10px}
.ct-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.ct-name{font-size:13px;font-weight:700;color:#fff}
.ct-role{font-size:11px;color:rgba(255,255,255,.45)}
.ct-logo{margin-left:auto;font-size:11px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(255,255,255,.12);padding:4px 10px;border-radius:6px;flex-shrink:0}
.b2b-numbers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.b2b-num-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;text-align:center}
.b2b-num-val{font-family:'DM Sans',sans-serif;font-size:1.8rem;font-weight:700;color:var(--gold)}
.b2b-num-lbl{font-size:11px;color:rgba(255,255,255,.4);margin-top:3px}

/* WHY AVANTA */
.why-section{background:var(--band)}
/* Item 11: the recognitions panel and the logo wall sit side by side and are
   aligned to each other, rather than the logos floating against the top of a
   much taller list. */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.why-features{display:flex;flex-direction:column;gap:18px;margin-top:2rem}
.why-feat{display:flex;gap:14px;align-items:flex-start}
.wf-icon{width:42px;height:42px;border-radius:10px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;margin-top:2px}
.wf-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:3px}
.wf-desc{font-size:13px;color:var(--text2);line-height:1.65}
/*
 * The recognition cards use their own colour, not var(--navy).
 *
 * --navy (#0B1527) is shared by 35 rules on this page - the hero, the topbar,
 * the stats and b2b sections, and a dozen headings where it is the TEXT
 * colour. Changing the variable to darken these two cards would have repainted
 * all of them, so the value is set here instead.
 */
.accred-box{background:#00003C;border-radius:18px;padding:2.5rem;position:relative;overflow:hidden}
.accred-box::before{content:'';position:absolute;bottom:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(26,62,216,.2)}
.ab-title{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:1.25rem}
.accred-list{display:flex;flex-direction:column;gap:10px;margin-bottom:1.5rem}
.accred-item{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.75)}
.ai-check{width:20px;height:20px;border-radius:50%;background:rgba(90,200,0,.15);border:1px solid rgba(90,200,0,.3);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--brand-green);flex-shrink:0;font-weight:800}
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.partner-pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:8px;text-align:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:.04em}

/* SFCC BANNER */
.sfcc-section{background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-blue3) 100%);padding:60px 0}
.sfcc-inner{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}
.sfcc-text h2{font-family:'DM Sans',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:#fff;margin-bottom:8px}
.sfcc-text p{font-size:15px;color:rgba(255,255,255,.75);max-width:540px;line-height:1.75}
.sfcc-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.5rem}
.sfcc-amounts{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.sfcc-amt{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:16px 24px;text-align:center;min-width:190px}
.sfcc-amt-val{font-family:'DM Sans',sans-serif;font-size:2.2rem;font-weight:700;color:var(--gold);line-height:1}
.sfcc-amt-lbl{font-size:11px;color:rgba(255,255,255,.45);margin-top:4px}

/* UPCOMING */
.upcoming-section{background:var(--band)}
.upcoming-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2rem}
.uc-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:box-shadow .2s}
.uc-card:hover{box-shadow:var(--shadow-md)}
.uc-header{background:var(--navy2);padding:13px 16px;display:flex;align-items:center;justify-content:space-between}
.uc-date{font-size:12px;font-weight:700;color:rgba(255,255,255,.9)}
.avail{font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill)}
.avail-yes{background:rgba(90,200,0,.15);color:var(--brand-green)}
.avail-few{background:rgba(245,166,35,.15);color:var(--gold)}
.uc-body{padding:14px 16px}
.uc-title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;line-height:1.4}
.uc-meta{font-size:11.5px;color:var(--text3);display:flex;gap:10px}
.uc-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg);border-top:1px solid var(--border2)}
.uc-fee{font-size:13px;font-weight:700;color:var(--navy)}
.uc-fee-sub{font-size:11px;color:var(--green-dark);font-weight:600}
.uc-reg-btn{padding:7px 14px;border-radius:var(--r-pill);background:var(--brand-blue);color:#fff;font-size:11px;font-weight:700;border:none;cursor:pointer;font-family:inherit;transition:background .15s}
.uc-reg-btn:hover{background:var(--brand-blue2)}

/* TESTIMONIALS */
.testimonials-section{background:var(--white)}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2.5rem}
.test-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden}
.test-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--brand-blue)}
.tc-stars{color:var(--gold);font-size:13px;margin-bottom:10px;letter-spacing:2px}
.tc-text{font-size:13px;color:var(--text2);line-height:1.72;font-style:italic;margin-bottom:14px}
.tc-author{display:flex;align-items:center;gap:9px}
.tc-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.tc-name{font-size:13px;font-weight:700;color:var(--navy)}
.tc-role{font-size:11px;color:var(--text3)}

/* LOCATIONS */
.locations-section{background:var(--band)}
.locations-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2.5rem}
.loc-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px 22px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s,border-color .24s}
.loc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-green));transform:scaleX(0);transform-origin:left;transition:transform .28s}
.loc-card:hover{transform:translateY(-6px);box-shadow:0 24px 52px -22px rgba(11,21,39,.4);border-color:transparent}
.loc-card:hover::before{transform:scaleX(1)}
.loc-card.is-hq{background:linear-gradient(160deg,var(--navy),var(--navy3));border-color:transparent}
.loc-icon{width:46px;height:46px;border-radius:12px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
.loc-card.is-hq .loc-icon{background:rgba(255,255,255,.12)}
.loc-name{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px;letter-spacing:-.2px}
.loc-card.is-hq .loc-name{color:#fff}
.loc-addr{font-size:12.5px;color:var(--text3);line-height:1.65;margin-bottom:16px;flex:1}
.loc-card.is-hq .loc-addr{color:rgba(255,255,255,.7)}
.loc-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--brand-blue);background:var(--blue-light);padding:5px 11px;border-radius:var(--r-pill)}
.loc-card.is-hq .loc-tag{color:#cfd6ff;background:rgba(255,255,255,.12)}
.loc-link{margin-top:14px;font-size:12px;font-weight:700;color:var(--brand-blue);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.loc-card.is-hq .loc-link{color:#fff}
.loc-link:hover{gap:8px}
@media(max-width:980px){.locations-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.locations-grid{grid-template-columns:1fr}}

/* FAQ */
.faq-section{background:var(--white)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:2rem}
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.faq-q{padding:14px 18px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background .15s;background:none;border:none;width:100%;text-align:left;font-family:inherit}
.faq-q:hover{background:var(--blue-light)}
.faq-q.open{color:var(--brand-blue);background:var(--blue-light)}
.faq-chevron{font-size:11px;color:var(--text3);flex-shrink:0;transition:transform .2s}
.faq-chevron.open{transform:rotate(180deg);color:var(--brand-blue)}
.faq-a{padding:0 18px;font-size:13px;color:var(--text2);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s}
.faq-a.open{max-height:200px;padding:0 18px 14px}

/* NEWS */
.news-section{background:var(--white)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2.25rem}
.post{background:#fff;border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;cursor:pointer;transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s,border-color .26s;text-decoration:none}
.post:hover{transform:translateY(-6px);box-shadow:0 26px 56px -24px rgba(11,21,39,.42);border-color:transparent}
.post-img{height:190px;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.post:hover .post-img img{transform:scale(1.06)}
.post-body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-cat{align-self:flex-start;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.post-cat.c1{background:linear-gradient(135deg,#eef0ff,#e0e3ff);color:#1b18db}
.post-cat.c2{background:linear-gradient(135deg,#eef8dd,#dff0c2);color:#4e7d12}
.post-cat.c3{background:linear-gradient(135deg,#ffe9dc,#ffd7c2);color:#d5540f}
.post h4{font-family:'DM Sans',sans-serif;font-size:18px;line-height:1.32;color:var(--navy);font-weight:700;letter-spacing:-.2px;transition:color .18s}
.post:hover h4{color:var(--brand-blue)}
.post p{color:var(--text2);font-size:14px;margin-top:9px;line-height:1.65}
/* The meta row is now the date on the left and "Read More" on the right; the
   author chip it used to lead with has been removed from the template. */
.post-meta{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text3);font-size:13px;border-top:1px solid var(--border2)}
.post-meta .ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue3));color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:0 0 auto}
.post-meta .dot{opacity:.5}
.post-date{white-space:nowrap}
/* Reads as the card's call to action. It is a span - see the note in
   template-parts/home/news.php - so it carries no link styling of its own and
   inherits the card's hover. */
.post-more{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:700;color:var(--brand-blue);transition:gap .18s ease}
.post-more i{font-size:12px}
.post:hover .post-more{gap:10px}
@media(max-width:960px){.news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.news-grid{grid-template-columns:1fr}}

/* FOOTER */
/* FOOTER - matches the other Avanta pages (avfooter) */
.avfooter{background:var(--navy-bg);color:#fff;padding:62px 0 46px;position:relative}
.avfooter::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-blue),#5468ff 50%,var(--brand-blue))}


































@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* CONTACT SECTION */
.contact-sec{padding:54px 0}
.contact-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:24px;align-items:start}
.contact-form-card{background:var(--navy-bg);border-radius:var(--r-lg);padding:30px 30px 32px;color:#fff;position:relative;overflow:hidden}
.contact-form-card::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:rgba(26,62,216,.28)}
.cfc-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:18px;position:relative}
.cfc-title{font-family:'DM Sans',sans-serif;font-size:1.55rem;font-weight:700;color:#fff;letter-spacing:-.3px}
.reply-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(11,158,110,.16);border:1px solid rgba(11,158,110,.4);color:#4ECDA4;padding:6px 14px;border-radius:var(--r-pill);font-size:12px;font-weight:600}
.reply-dot{width:7px;height:7px;border-radius:50%;background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.25)}
.cfc-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:22px;position:relative}
.cfc-tab{flex:1;padding:12px;text-align:center;font-size:14px;font-weight:600;color:rgba(255,255,255,.6);cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit;transition:all .15s;margin-bottom:-1px}
.cfc-tab.active{color:#fff;border-bottom-color:#fff}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-field{margin-bottom:16px;position:relative}
.cf-label{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.88);margin-bottom:7px}
.cf-label span{color:#ff9a9a}
.cf-input,.cf-select,.cf-textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid transparent;font-family:inherit;font-size:14px;color:var(--text);background:#fff;outline:none;transition:box-shadow .15s}
.cf-input:focus,.cf-select:focus,.cf-textarea:focus{box-shadow:0 0 0 3px rgba(26,62,216,.35)}
.cf-input::placeholder,.cf-textarea::placeholder{color:var(--text3)}
.cf-textarea{min-height:120px;resize:vertical}
.cf-check{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:rgba(255,255,255,.78);margin-bottom:12px;line-height:1.65}
.cf-check input{margin-top:2px;width:17px;height:17px;flex-shrink:0;accent-color:var(--brand-blue);cursor:pointer}
.cf-check a{color:#9FB0FF;font-weight:600;text-decoration:underline}
.cf-readmore{display:inline-block;font-size:13px;color:#fff;text-decoration:underline;font-weight:600;margin:2px 0 18px}
.cf-captcha{background:#f9f9f9;border:1px solid #d3d3d3;border-radius:4px;padding:12px 14px;display:flex;align-items:center;gap:12px;width:302px;max-width:100%;margin-bottom:20px}
.cf-captcha .cbox{width:28px;height:28px;border:2px solid #c1c1c1;border-radius:3px;background:#fff;flex-shrink:0}
.cf-captcha .clabel{font-size:14px;color:#3c4043}
.cf-captcha .clogo{margin-left:auto;text-align:center;color:#9aa4b0;line-height:1.1}
.cf-captcha .clogo b{display:block;font-size:15px;color:#5b6472;font-weight:800;letter-spacing:-.5px}
.cf-captcha .clogo span{font-size:9px}
.cf-submit{width:100%;padding:15px;border-radius:8px;background:var(--gold);color:#3a2a00;border:none;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .18s;position:relative}
.cf-submit:hover{background:#e0921a;box-shadow:0 6px 18px rgba(245,166,35,.35)}
/* Talk-to-us card */
.talk-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow)}
.talk-title{font-family:'DM Sans',sans-serif;font-size:1.3rem;font-weight:700;color:var(--navy);margin-bottom:16px}
.talk-wa{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border-radius:12px;background:#25D366;color:#fff;text-decoration:none;transition:all .18s;box-shadow:0 5px 16px rgba(37,211,102,.32)}
.talk-wa:hover{background:#1db955;transform:translateY(-2px);box-shadow:0 9px 24px rgba(37,211,102,.42)}
.talk-wa .wa-ic{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;flex-shrink:0}
.talk-wa .wa-ic svg{width:23px;height:23px}
.talk-wa .wa-txt b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.talk-wa .wa-txt small{font-size:11.5px;opacity:.9}
.talk-btn{width:100%;padding:12px;border-radius:11px;background:#fff;color:var(--navy);border:1.5px solid var(--border);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:inherit;margin-top:10px;text-decoration:none;transition:all .15s}
.talk-btn:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:var(--blue-light)}
.talk-list{margin:22px 0 4px;display:flex;flex-direction:column;gap:14px}
.talk-item{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--text2);line-height:1.5}
.talk-check{width:20px;height:20px;border-radius:50%;background:var(--blue-light);color:var(--brand-blue);display:grid;place-items:center;font-size:10px;font-weight:900;flex-shrink:0;margin-top:1px}
.talk-img{width:100%;border-radius:var(--r);overflow:hidden;margin-top:18px;aspect-ratio:16/10}
.talk-img img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}.cf-row{grid-template-columns:1fr}}
/* OUR STORY */
.story-section{background:var(--navy-bg);color:#fff;padding:80px 0;position:relative;overflow:hidden}
.story-section::before{content:'';position:absolute;top:-120px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(26,62,216,.16),transparent 65%);pointer-events:none}
.story-grid{display:grid;grid-template-columns:.9fr 1.15fr;gap:46px;align-items:center;position:relative;z-index:1}
.story-eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#cfd6ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:6px 14px;border-radius:var(--r-pill)}
.story-eyebrow span{font-size:10px}
.story-h2{font-family:'DM Sans',sans-serif;font-size:clamp(38px,6vw,66px);font-weight:700;color:#fff;line-height:1.05;letter-spacing:-.5px;margin-top:16px}
.story-line{width:64px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--brand-green),var(--gold),var(--brand-orange));margin:20px 0 4px}
.story-section p{color:rgba(255,255,255,.82);margin-top:18px;font-size:16px;line-height:1.75;max-width:48ch}
.story-cta{display:inline-flex;align-items:center;gap:9px;margin-top:26px;background:var(--brand-blue);color:#fff;font-weight:700;font-size:14px;padding:14px 26px;border-radius:12px;text-decoration:none;box-shadow:0 10px 26px -8px rgba(26,62,216,.6);transition:background .18s,transform .18s}
.story-cta:hover{background:var(--brand-blue2);transform:translateY(-2px)}
.story-video{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(0,0,0,.6);aspect-ratio:16/9;background:#000}
.story-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:900px){.story-grid{grid-template-columns:1fr;gap:30px}}

/* ============ WHAT WE DO - enhanced service cards ============ */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2.75rem}
.service-card{--accent:var(--brand-blue);--accent-bg:var(--blue-light);background:#fff;border:1px solid var(--border);border-radius:20px;padding:26px 22px 22px;transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s,border-color .24s;cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column}
.service-card::before{content:'';position:absolute;inset:0 0 auto 0;height:100%;background:radial-gradient(120% 80% at 50% -20%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%);opacity:0;transition:opacity .24s;pointer-events:none}
.service-card::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);transform:scaleX(0);transition:transform .26s;transform-origin:left}
.service-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px -26px color-mix(in srgb,var(--accent) 55%,rgba(11,21,39,.5));border-color:transparent}
.service-card:hover::before{opacity:1}
.service-card:hover::after{transform:scaleX(1)}
.sc-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 18%,#fff),var(--accent-bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent);position:relative;z-index:1}
.sc-num{position:absolute;top:22px;right:22px;font-family:'DM Sans',sans-serif;font-size:34px;font-weight:800;line-height:1;color:color-mix(in srgb,var(--accent) 14%,transparent);z-index:1}
.sc-title{font-family:'DM Sans',sans-serif;font-size:16.5px;font-weight:700;color:var(--navy);margin-bottom:9px;letter-spacing:-.2px;position:relative;z-index:1}
.sc-desc{font-size:13px;color:var(--text2);line-height:1.68;position:relative;z-index:1;flex:1}
.sc-link{font-size:12.5px;font-weight:700;color:var(--accent);margin-top:18px;display:inline-flex;align-items:center;gap:8px;position:relative;z-index:1}
.sc-link i{width:24px;height:24px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:grid;place-items:center;font-style:normal;font-size:12px;transition:transform .2s,background .2s,color .2s}
.service-card:hover .sc-link i{background:var(--accent);color:#fff;transform:translateX(3px)}
@media(max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr}}

/* ============ LOCATIONS - polished ============ */
.loc-icon{background:linear-gradient(150deg,#dbe4ff,var(--blue-light));box-shadow:inset 0 0 0 1px rgba(26,62,216,.12)}
.loc-tag.reg-west{color:var(--green-dark);background:var(--green-bg)}
.loc-tag.reg-central{color:var(--brand-orange);background:#FEF0E6}
.loc-link i{width:24px;height:24px;border-radius:50%;background:var(--blue-light);display:grid;place-items:center;font-style:normal;font-size:12px;transition:transform .2s,background .2s,color .2s}
.loc-card.is-hq .loc-link i{background:rgba(255,255,255,.15)}
.loc-card:hover .loc-link i{background:var(--brand-blue);color:#fff;transform:translateX(3px)}
.loc-card.is-hq:hover .loc-link i{background:#fff;color:var(--brand-blue)}

/* ============ REVIEWS - auto-scroll marquee ============ */
.reviews-marquee{margin-top:2.75rem;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reviews-track{display:flex;gap:20px;width:max-content;animation:reviewScroll 46s linear infinite}
.reviews-marquee:hover .reviews-track{animation-play-state:paused}
@keyframes reviewScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rev-card{flex:0 0 380px;width:380px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:26px 24px;position:relative;overflow:hidden;box-shadow:0 2px 14px rgba(11,21,39,.05)}
.rev-card::before{content:'\201C';position:absolute;top:6px;right:20px;font-family:Georgia,serif;font-size:96px;line-height:1;color:color-mix(in srgb,var(--brand-blue) 9%,transparent);pointer-events:none}
.rev-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rev-stars{color:var(--gold);font-size:14px;letter-spacing:2px}
.rev-badge{font-size:10.5px;font-weight:700;color:var(--brand-green);background:var(--green-bg);padding:3px 10px;border-radius:var(--r-pill)}
.rev-text{font-size:13.5px;color:var(--text2);line-height:1.72;font-style:italic;margin-bottom:18px;position:relative;z-index:1}
.rev-author{display:flex;align-items:center;gap:11px}
.rev-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.rev-name{font-size:13.5px;font-weight:700;color:var(--navy)}
.rev-role{font-size:11.5px;color:var(--text3)}
@media(max-width:560px){.rev-card{flex-basis:300px;width:300px}}

/* ============ FAQ - phone & WhatsApp contact buttons ============ */
.faq-contact{margin-top:1.75rem;display:flex;flex-direction:column;gap:12px;max-width:340px}
.contact-btn{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;text-decoration:none;border:1px solid var(--border);background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.contact-btn:hover{transform:translateY(-2px)}
.cb-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.cb-txt{display:flex;flex-direction:column;line-height:1.25}
.cb-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}
.cb-value{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;color:var(--navy);letter-spacing:-.2px}
.cb-arrow{margin-left:auto;color:var(--text4);font-size:15px;transition:transform .2s}
.contact-btn:hover .cb-arrow{transform:translateX(3px)}
/* phone variant */
.contact-btn.cb-phone .cb-ico{background:var(--blue-light);color:var(--brand-blue)}
.contact-btn.cb-phone:hover{border-color:var(--brand-blue);box-shadow:0 14px 30px -14px rgba(26,62,216,.45)}
.contact-btn.cb-phone:hover .cb-arrow{color:var(--brand-blue)}
/* whatsapp variant */
.contact-btn.cb-wa{background:linear-gradient(135deg,#25D366,#1EBE5A);border-color:transparent;box-shadow:0 12px 26px -12px rgba(37,211,102,.6)}
.contact-btn.cb-wa:hover{box-shadow:0 18px 36px -14px rgba(37,211,102,.7)}
.contact-btn.cb-wa .cb-ico{background:rgba(255,255,255,.22);color:#fff}
.contact-btn.cb-wa .cb-label{color:rgba(255,255,255,.85)}
.contact-btn.cb-wa .cb-value{color:#fff}
.contact-btn.cb-wa .cb-arrow{color:rgba(255,255,255,.9)}
.faq-hours{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);margin-top:2px}
.faq-hours .dot-live{width:8px;height:8px;border-radius:50%;background:var(--brand-green);box-shadow:0 0 0 3px rgba(90,200,0,.2)}
@media(max-width:900px){.faq-contact{max-width:100%}}

/* ============ IMAGE COURSE CARDS - ported from courses.html (.course), CSS vars resolved ============ */
.course{background:#fff;border:1px solid #e4e7f2;border-radius:14px;overflow:hidden;transition:.3s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(10,14,39,.06)}
.course:hover{transform:translateY(-4px);box-shadow:0 14px 40px -16px rgba(10,14,39,.20);border-color:#c4c9ff}
.course-media{height:150px;position:relative;background:linear-gradient(135deg,#1b18db 0%,#403ff0 55%,#6a6ff7 100%);display:grid;place-items:center;color:#fff}
.course-media.g2{background:linear-gradient(135deg,#6aa315,#7fbf1f)}
.course-media.g3{background:linear-gradient(135deg,#f26a21,#ff8a4d)}
.course-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02)}
.course-media .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,39,.12),rgba(10,14,39,.66))}
.course-media .badge,.course-media .wish,.course-media .ctype{z-index:2}
.course-media .badge{position:absolute;top:14px;left:14px;color:#fff;font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px;display:inline-flex;gap:6px;align-items:center;letter-spacing:.02em;box-shadow:0 8px 20px -8px rgba(10,14,39,.45)}
.course-media .badge.b-hot{background:linear-gradient(135deg,#ff8a4d,#f2401e)}
.course-media .badge.b-demand{background:linear-gradient(135deg,#5b8cff,#1b3ff5)}
.course-media .badge.b-new{background:linear-gradient(135deg,#8fd13a,#4e9a12)}
.course-media .badge.b-pop{background:linear-gradient(135deg,#f472b6,#a21caf)}
.course-media .badge i{font-size:11px;color:#9bd94b}
.course-media .wish{display:none}
.course-media .ctype{position:absolute;left:16px;bottom:12px;font-family:"DM Sans";font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;opacity:1;display:inline-flex;align-items:center;gap:9px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.course-media .ctype::before{content:"";width:22px;height:3px;border-radius:2px;background:#7fbf1f}
.course-body{padding:20px;display:flex;flex-direction:column;flex:1}
.course-tags{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.course-tags .tag{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:8px;background:linear-gradient(135deg,#eef0ff,#e0e3ff);color:#1b18db;border:1px solid #d7dcff;letter-spacing:normal;text-transform:none}
.course-tags .tag.green{background:linear-gradient(135deg,#eef8dd,#dff0c2);color:#4e7d12;border-color:#d3e8ad}
.course-tags .tag-accr{background:#eef1f6;color:#5a6478;border-color:#e2e7f0}
a.ctab{text-decoration:none}
.course-tags .tag.orange{background:linear-gradient(135deg,#ffe9dc,#ffd7c2);color:#d5540f;border-color:#ffccb0}
.course-tags .tag.teal{background:linear-gradient(135deg,#dbf6fb,#c3eef6);color:#0b7e95;border-color:#b3e6f0}
.course-tags .tag.violet{background:linear-gradient(135deg,#f0e9ff,#e4d7ff);color:#6d28d9;border-color:#dcc9ff}
.course:hover .course-tags .tag{transform:translateY(-1px);transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.course h4{font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:-.2px;color:#0a0e27}
.course-meta{display:flex;gap:14px;color:#667089;font-size:13px;margin:12px 0}
.course-meta span{display:inline-flex;align-items:center;gap:6px}
.course-meta i{font-size:13px}
.subsidy-check{display:flex;gap:8px 14px;flex-wrap:wrap;margin:12px 0}
.subsidy-check span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#4b5573}
.subsidy-check i{color:#6aa315;font-size:12px}
.course-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid rgba(20,26,58,.09)}
.course .price b{font-family:"DM Sans";font-size:20px;color:#0a0e27}
.course .price s{display:none}
.course .btn-primary{background:linear-gradient(135deg,#403ff0,#1b18db 60%,#1712b8);color:#fff;box-shadow:0 20px 50px -18px rgba(27,24,219,.45);border-radius:10px}
.course .btn-primary:hover{transform:translateY(-2px);box-shadow:0 26px 56px -18px rgba(27,24,219,.6)}
.course .btn i{font-size:.92em}

/* ==========================================================================
   Featured Courses card - matched to the "Related courses" card
   (.rel-card, avanta-course-manager/assets/css/course-detail.css).

   The home card carried the same content in a looser frame: 20px padding, a
   16.5px title, 13px meta and a full-size button, so a card ran roughly 45px
   taller than the identical course shown on a course page. Every value below
   is the one .rel-card already uses, so the two now read as one design.

   The media strip is the deliberate exception. .rel-card uses aspect-ratio
   16/10, which at this column width computes to ~230px - taller than the
   150px here, and it would have made the card grow rather than shrink. The
   fixed height stays.
   ========================================================================== */
.course-body{padding:16px 16px 18px}
.course-tags{gap:6px;margin-bottom:8px}
.course-tags .tag{font-size:10px;padding:3px 9px;border-radius:100px;letter-spacing:.04em}
.course-tags .tag-accr{text-transform:uppercase;letter-spacing:.03em}
.course h4{font-size:14.5px;line-height:1.4}
.course-meta{flex-wrap:wrap;gap:6px 14px;font-size:11.5px;margin:10px 0 0}
.course-meta i{font-size:11px}
/* Next run: same blue emphasis the archive and the related strip give it. */
.course-next{color:var(--brand-blue);font-weight:600}
.subsidy-check{gap:6px 14px;margin:10px 0 0}
.subsidy-check span{font-size:11.5px}
.subsidy-check i{font-size:11px}
.course-foot{align-items:flex-end;gap:10px;padding-top:14px;margin-top:auto}
/* The price block stacks its label, figure and footnote - inline, "Nett fee
   from $117.00* After Funding" wrapped mid-phrase and read as one sentence. */
.course .price{display:flex;flex-direction:column;gap:1px;line-height:1.2}
.course .price b{font-size:20px}
.course .price-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#8a92a8}
.course .price-star{color:#6aa315}
.course .price-gst{font-size:11px;font-weight:600;color:#8a92a8}
.course .price-after{font-size:12px;color:#8a92a8}
/* The struck full fee is shown again: it is what makes the funded price mean
   something, and both other cards show it. */
.course .price-after s{display:inline;color:#aab1c2;margin-right:4px}
.course .btn-primary{padding:9px 16px;font-size:12px;flex-shrink:0}

/* ============================================================
   Theme / WPBakery integration - let the Home sections span
   full width even when placed inside a page or builder row.
   (index.html was standalone; these neutralise the wrappers.)
   ============================================================ */
.av-page__body{max-width:none;width:100%;padding:0;margin:0}
.avanta-home{width:100%}
.avanta-home > .wpb-content-wrapper,.avanta-home .vc_row,.avanta-home .wpb_column,
.avanta-home .vc_column-inner,.avanta-home .wpb_wrapper{margin:0;padding:0;width:100%;max-width:none}
/* V2: global contact "Talk to us" - 4 matching buttons in the WhatsApp shape,
   on-theme colours (WhatsApp green / Call blue / Email gold / Visit navy). */
.talk-wa + .talk-wa{margin-top:10px}
.talk-wa .wa-ic i{font-size:18px;line-height:1}
.talk-wa.tw-call{background:var(--brand-blue);box-shadow:0 5px 16px rgba(26,62,216,.28)}
.talk-wa.tw-call:hover{background:#1533b8;box-shadow:0 9px 24px rgba(26,62,216,.40)}
.talk-wa.tw-email{background:var(--gold);box-shadow:0 5px 16px rgba(245,166,35,.30)}
.talk-wa.tw-email:hover{background:#e6971a;box-shadow:0 9px 24px rgba(245,166,35,.42)}
.talk-wa.tw-visit{background:var(--navy-bg);box-shadow:0 5px 16px rgba(11,21,39,.28)}
.talk-wa.tw-visit:hover{background:#000029;box-shadow:0 9px 24px rgba(11,21,39,.40)}
.talk-wa.tw-visit .wa-txt small,.talk-wa.tw-call .wa-txt small,.talk-wa.tw-email .wa-txt small{opacity:.92}
.talk-card .talk-list{margin-top:14px}

/* V4: compact "Trusted by" logo strip (label left + single scrolling row, original-colour logos) */
.clients-section.clients-strip{padding:18px 0}
.clients-strip__row{display:flex;align-items:center;gap:30px}
.clients-strip__label{flex:none;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7B84AA;white-space:nowrap}
.clients-strip .logo-marquee{flex:1;min-width:0}
.clients-strip .logo-track{gap:46px}
.clients-strip .logo-track img{height:34px;filter:none}
@media(max-width:600px){.clients-strip__row{gap:16px}.clients-strip .logo-track img{height:26px}}

/* ============================ Home redesign (design doc) ============================ */
/* Hero heading accent word in brand orange (matches the reference) */
h1.hero-title span{color:var(--brand-orange)}

/* Accent phrase: upright and warm, so it reads as emphasis rather than as a
   quotation. `.accent` is the markup we ship; `em` is kept as an alias only
   because any heading saved before this change still carries <em>, and without
   it those pages fall back to the italic grey rule above. Drop the `em`
   selector once every saved heading uses <span class="accent">.
   Solid gold is the fallback; the gradient applies only where
   background-clip:text is supported. */
h1.hero-title .accent,
h1.hero-title em{font-style:normal;color:var(--gold)}
@supports((background-clip:text) or (-webkit-background-clip:text)){
  h1.hero-title .accent,
  h1.hero-title em{
    background:linear-gradient(100deg,#FFD37A 0%,var(--gold) 45%,#FF8A3D 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}

/* Finder: heading icon replaces the accent bar */
.hc-title::before{display:none}
.hc-title i{color:var(--brand-blue)}
/* Finder category tiles with professional icons */
.hc-cat{justify-content:flex-start;text-decoration:none}
.hc-cat-ic{width:16px;text-align:center;color:var(--brand-blue);flex-shrink:0}
/* Finder funding options */
/* Item 3: one funding statement in a highlighted band. Three unlabelled pills
   said less than a single sentence naming the schemes and the course count. */
.hc-funding{display:flex;align-items:center;gap:11px;margin:4px 0 12px;padding:11px 13px;background:#fff8e8;border:1px solid #f0dcae;border-radius:10px}
.hc-funding__ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:#f5a524;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;letter-spacing:.02em}
.hc-funding__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.hc-funding__title{font-size:12.5px;font-weight:800;color:var(--text)}
.hc-funding__text{font-size:11.5px;color:var(--text2);line-height:1.45}
.hc-fund{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--green-dark);background:var(--green-bg);border:1px solid rgba(11,158,110,.18);border-radius:var(--r-pill);padding:6px 11px}
.hc-fund i{font-size:11px}

/* What We Do — icon in card accent colour */
.sc-icon i{color:var(--accent)}
.section-sub-center{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}

/* Stats — 3-up layout */
.stats-grid-3{grid-template-columns:repeat(3,1fr)}

/* Train Your Workforce — feature icons on the dark panel */
.b2b-feat-icon i{color:#9db4ff}

/* Why Avanta — two recognition panels above a full-width logo row.
   The lists were stacked in one panel with the logos crammed into the other
   half; side by side they carry equal weight and the logos get the whole
   width underneath. */
.why-grid{display:block}
.why-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.why-cols > .accred-box{height:100%}
.why-grid .accred-logos{margin-top:28px}
/* The second list has its own panel now, so the old spacer would only push
   its heading away from the top of that panel. */
.ab-title-2{margin-top:0}
.accred-box .accred-list:last-child{margin-bottom:0}
@media(max-width:900px){.why-cols{grid-template-columns:1fr;gap:18px}}
/* Item 11: logos on one row. Six across a 3-column grid wrapped to two rows
   and left a ragged block; auto-fit keeps them in a single line and only wraps
   when there is genuinely no width left. */
.accred-logos{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch}
/* flex:1 1 0 with min-width:0 is what keeps them on ONE line: each logo takes
   an equal share and shrinks rather than wrapping to a second row. */
.accred-logos > *{flex:1 1 0;min-width:0}
.accred-logo{padding:12px 6px;min-height:70px;font-size:12px}
.accred-logo img{max-width:100%;height:auto}
.accred-logo{display:flex;align-items:center;justify-content:center;text-align:center;min-height:78px;padding:14px 10px;background:#fff;border:1px solid var(--border);border-radius:14px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;color:var(--navy);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.accred-logo:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* Training centres — pin icons */
.loc-icon i{color:var(--brand-blue)}
.loc-card.is-hq .loc-icon i{color:#fff}

/* Item 6 applies to desktop only: on a phone the hero card is taller than the
   screen, and forcing a viewport height there would crop the search box. */
@media(max-width:900px){.hero{min-height:0;display:block}}

@media(max-width:900px){
  .stats-grid-3{grid-template-columns:1fr}
  .stat-item{padding:22px 18px}
  /* Below 900px the row would be unreadable; wrap to three per line. */
  .accred-logos{flex-wrap:wrap}
  .accred-logos > *{flex:0 0 calc((100% - 20px)/3)}
}
@media(max-width:560px){
  .accred-logos > *{flex-basis:calc((100% - 10px)/2)}
}

/* Accreditation logos: uploaded images (editable repeater) */
.accred-logo-img{padding:16px}
.accred-logo-img img{max-width:100%;max-height:48px;width:auto;height:auto;object-fit:contain;display:block}

/* ==========================================================================
   Item 7: home logo band in the v2 style - heading, then the scrolling logos.
   ======================================================================== */
.clients-full{padding:56px 0 44px;background:#fff}
.clients-full__inner{display:block}
.clients-full__title{max-width:900px;margin:0 auto 30px;text-align:center;font-family:'DM Sans',sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,30px);line-height:1.3;color:var(--navy)}
.clients-full .logo-marquee{width:100%}
.clients-full .logo-track img{height:52px}
@media(max-width:600px){.clients-full{padding:38px 0 30px}.clients-full .logo-track img{height:38px}}

/* ==========================================================================
   Item 9: three cards visible, the rest reachable by scrolling sideways.
   The class is added by JavaScript, so without it the plain grid remains
   rather than a rail nobody can move.
   ======================================================================== */
/* The bar under the cards was the only way to move the row before the arrows
   existed. Now it is just a grey rule across the section, so it is hidden -
   the row still scrolls by arrow, wheel, swipe and keyboard. */
.course-grid--rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}
.course-grid--rail > .course{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start;min-width:0}
.course-grid--rail > .course[hidden]{display:none}
.course-grid--rail::-webkit-scrollbar{display:none}
.ctab{cursor:pointer;font-family:inherit}
.courses-section.is-empty .course-grid--rail{display:none}
/* Hidden until a filter matches nothing. Before this the section simply
   went blank, which read as a broken filter rather than an empty one. */
.course-grid__empty{display:none;margin:28px 0 0;color:var(--text2,#3D4767);font-size:15px}
.courses-section.is-empty .course-grid__empty{display:block}

/* Rail arrows. They sit just outside the cards so nothing is covered, and are
   removed from the flow entirely when the row fits, rather than sitting there
   greyed out on a section with only three courses. */
.course-rail{position:relative}
.course-rail__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;
  box-shadow:0 6px 18px rgba(11,21,39,.14);transition:background .15s,color .15s,opacity .15s}
.course-rail__btn:hover:not(:disabled){background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.course-rail__btn:disabled{opacity:.35;cursor:default}
.course-rail__btn--prev{left:-22px}
.course-rail__btn--next{right:-22px}
@media(max-width:1240px){.course-rail__btn--prev{left:-6px}.course-rail__btn--next{right:-6px}}
.courses-section.is-empty .course-rail__btn{display:none}

@media(max-width:960px){.course-grid--rail > .course{flex-basis:calc((100% - 20px) / 2)}}
@media(max-width:600px){
  .course-grid--rail > .course{flex-basis:86%}
  /* Touch scrolling is its own affordance on a phone. */
  .course-rail__btn{display:none}
}

/* Dialog (.av-modal) styles live in theme.css, which loads on every page. */

/* Correction 3: footer course columns - 4 / 2 / 1. */

/* Footer: defined once in theme.css, which loads on every page including
   this one. Do not re-add .avf-* rules here - a second copy is how the home
   page ended up with a different footer from the rest of the site. */

/* ==========================================================================
   Mobile / tablet: the fixed-width and two-up layouts above.

   Kept together at the end of the file on purpose. Several of the rules these
   override are themselves declared late (.why-grid at ~757, .sfcc-amounts at
   ~317), and a media query does NOT outrank a plain rule of equal specificity
   that comes after it - putting each breakpoint beside its base rule looks
   tidier and silently does nothing. Everything below is max-width only, so
   the desktop layout is untouched.
   ======================================================================== */

@media(max-width:900px){
  /* The hero was 1fr + a hard 400px card, so below ~760px the text column was
     squeezed to nothing and the card still ran past the screen edge. */
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero-grid > *{min-width:0}          /* grid items default to min-width:auto */
  .hero-card{max-width:520px;width:100%;padding:22px}
  .search-input{min-width:0}

  .b2b-grid{grid-template-columns:1fr;gap:2.25rem}
  .faq-grid{grid-template-columns:1fr;gap:28px}
}

@media(max-width:860px){
  .sfcc-inner{grid-template-columns:1fr;gap:1.75rem}
  /* The amount cards were right-aligned at a fixed 190px; full width reads
     better once they are under the text rather than beside it. */
  .sfcc-amounts{align-items:stretch}
  .sfcc-amt{min-width:0;width:100%}
}

@media(max-width:820px){
  /* Four facts in one flex row become two rows of two. The dividers belong to
     a single line, so they go. */
  .trust-inner{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
  .trust-inner .trust-item{padding:0;border-right:0;justify-content:flex-start}
}

@media(max-width:760px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
  /* Title and the "view all" link stop sharing a line. */
  .section-header-row{flex-direction:column;align-items:flex-start;gap:.75rem}
}

@media(max-width:600px){
  .partner-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
  .b2b-numbers{grid-template-columns:1fr}
}

@media(max-width:380px){
  /* On the narrowest phones the input and its button no longer fit side by
     side without the input collapsing to a few characters. */
  .search-row{flex-direction:column}
  .search-input,.search-btn{width:100%}
}

@media(max-width:360px){
  .trust-inner{grid-template-columns:1fr}
}