/* ============================================================================
   Inner page styles — GENERATED, DO NOT EDIT BY HAND.

   Source : assets/css/avanta.css + assets/css/pages.css
   Build  : node build/scope-css.js

   Every selector is scoped to .av-inner so these rules cannot reach the
   site header, the footer or anything else the theme renders. Edit the
   source files and re-run the build; editing this file will be overwritten.
   ========================================================================= */

/* ---------- assets/css/avanta.css ---------- */
/* ============================================================================
   Avanta Global — shared design system
   ----------------------------------------------------------------------------
   EXTRACTED VERBATIM from the approved index.html <style> block. Not rewritten,
   not re-tokenised, not "improved". index.html is the single source of truth for
   colour, type, spacing, buttons, cards, header and footer, so the safest way to
   guarantee the inner pages match it exactly is to serve them the same bytes.

   Inner-page-only components live in pages.css and are built from the variables
   declared here — no new palette, no new type scale.
   ========================================================================= */@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}.av-inner{
  --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)}.av-inner{font-family:'Poppins',sans-serif;background:var(--white);color:var(--text);font-size:15px;line-height:1.6}.av-inner .container{max-width:1180px;margin:0 auto;padding:0 24px}.av-inner .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}.av-inner .btn-primary{background:var(--brand-blue);color:#fff}.av-inner .btn-primary:hover{background:var(--brand-blue2);box-shadow:0 5px 18px rgba(26,62,216,.32);transform:translateY(-1px)}.av-inner .btn-orange{background:var(--brand-orange);color:#fff}.av-inner .btn-orange:hover{background:#C44008;box-shadow:0 5px 18px rgba(232,81,10,.3);transform:translateY(-1px)}.av-inner .btn-outline-white{background:transparent;color:rgba(255,255,255,.88);border:1.5px solid rgba(255,255,255,.3)}.av-inner .btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}.av-inner .btn-outline-blue{background:transparent;color:var(--brand-blue);border:1.5px solid var(--brand-blue)}.av-inner .btn-outline-blue:hover{background:var(--brand-blue);color:#fff}.av-inner .btn-white-solid{background:#fff;color:var(--navy);font-weight:700}.av-inner .btn-white-solid:hover{background:rgba(255,255,255,.92);transform:translateY(-1px)}.av-inner .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}.av-inner .tag-blue{background:var(--blue-light);color:var(--brand-blue)}.av-inner .tag-green{background:var(--green-bg);color:var(--green-dark)}.av-inner .tag-gold{background:var(--gold-bg);color:#8C6000}.av-inner .tag-orange{background:#FEF0E6;color:#B84000}.av-inner .section{padding:76px 0}.av-inner .section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-blue);margin-bottom:10px}.av-inner .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}.av-inner .section-title em{font-style:italic;color:var(--brand-blue)}.av-inner .section-sub{font-size:15px;color:var(--text2);line-height:1.75;margin-top:10px}.av-inner .section-header-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.5rem;gap:1rem}@media(max-width:700px){.av-inner .section-header-row{flex-direction:column;align-items:flex-start;gap:.9rem}.av-inner .section-header-row .btn{width:100%;justify-content:center}}/* TOP BAR */
.av-inner .topbar{background:var(--navy-bg);padding:7px 0}.av-inner .topbar-inner{display:flex;align-items:center;justify-content:space-between;font-size:12px}.av-inner .topbar-left,.av-inner .topbar-right{display:flex;gap:18px;align-items:center}.av-inner .topbar a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .15s}.av-inner .topbar a:hover{color:#fff}.av-inner .topbar span{color:rgba(255,255,255,.5)}.av-inner .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}.av-inner .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}.av-inner .lang-toggle{display:flex;border:1px solid rgba(255,255,255,.15);border-radius:var(--r-pill);overflow:hidden}.av-inner .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)}.av-inner .lang-btn.active{background:var(--brand-blue);color:#fff}.av-inner .lang-btn:hover:not(.active){color:rgba(255,255,255,.8)}/* NAV */
.av-inner nav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;box-shadow:var(--shadow)}.av-inner .nav-inner{height:68px;display:flex;align-items:center;gap:1.5rem}/* Text-based logo — matches course listing/detail pages exactly */
.av-inner .nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;margin-right:auto}.av-inner .brand-logo{height:42px;width:auto;display:block}.av-inner .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}.av-inner .nav-logo-sub{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-top:2px}.av-inner .nav-links{display:flex;gap:2px;list-style:none}.av-inner .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}.av-inner .nav-links a:hover,.av-inner .nav-links a.active{color:var(--brand-blue);background:var(--blue-light)}.av-inner .nav-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}.av-inner .nav-phone{font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;display:flex;align-items:center;gap:5px}.av-inner .nav-phone::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand-green);display:inline-block}.av-inner .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}.av-inner .quick-reg:hover{background:#C44008;transform:translateY(-1px)}/* HERO */
.av-inner .hero{background:var(--navy-bg);position:relative;overflow:hidden;padding:72px 0 64px}.av-inner .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}.av-inner .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}.av-inner .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}.av-inner .hero-grid{display:grid;grid-template-columns:1fr 400px;gap:3rem;align-items:start;position:relative;animation:fadeUp .65s ease both}/* The 400px search card is wider than a phone, so below 900px it stops being
   a column and becomes the row under the headline. Without this the hero is
   746px wide inside a 375px screen, and body{overflow-x:hidden} clips half of
   it rather than letting it scroll — which is what "not responsive" looked
   like on the page. */
@media(max-width:900px){.av-inner .hero-grid{grid-template-columns:1fr;gap:2.25rem}}@media(max-width:900px){.av-inner .hero-grid>*{min-width:0}}@media(max-width:600px){.av-inner .hero{padding:48px 0 44px}.av-inner .hero-card{padding:20px}}.av-inner .hero-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:1.25rem;flex-wrap:wrap}.av-inner .hero-badge{padding:5px 12px;border-radius:var(--r-pill);font-size:11px;font-weight:700;letter-spacing:.05em}.av-inner .hb-tuv{background:rgba(26,62,216,.2);border:1px solid rgba(26,62,216,.35);color:#8AABFF}.av-inner .hb-mom{background:rgba(90,200,0,.12);border:1px solid rgba(90,200,0,.25);color:#8FE040}.av-inner .hb-sfcc{background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.28);color:var(--gold)}.av-inner 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}.av-inner h1.hero-title span{color:var(--gold)}.av-inner h1.hero-title em{font-style:italic;color:rgba(255,255,255,.72)}.av-inner .hero-sub{font-size:15.5px;color:rgba(255,255,255,.78);line-height:1.75;margin-bottom:2rem;max-width:520px}.av-inner .hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:2rem}.av-inner .hero-trust-pills{display:flex;gap:8px;flex-wrap:wrap}.av-inner .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}.av-inner .htp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}.av-inner .hero-card{background:#fff;border-radius:18px;padding:26px;box-shadow:0 24px 60px -12px rgba(0,0,0,.35)}.av-inner .hc-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:7px}.av-inner .hc-title::before{content:'';width:3px;height:16px;background:var(--brand-blue);border-radius:2px;display:block}.av-inner .search-row{display:flex;gap:8px;margin-bottom:14px}@media(max-width:380px){.av-inner .search-row{flex-direction:column}.av-inner .search-btn{width:100%}}.av-inner .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}.av-inner .search-input{min-width:0}.av-inner .search-input:focus{border-color:var(--brand-blue)}.av-inner .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}.av-inner .search-btn:hover{background:var(--brand-blue2)}.av-inner .hc-cats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}.av-inner .hc-cat{padding:9px 11px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:7px;background:#fff}.av-inner .hc-cat:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:var(--blue-light)}.av-inner .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}.av-inner .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}.av-inner .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 */
.av-inner .trust-bar{background:var(--navy2);border-bottom:1px solid rgba(255,255,255,.06);padding:18px 0}.av-inner .trust-inner{display:flex;align-items:center;justify-content:space-between}.av-inner .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}.av-inner .trust-item:first-child{padding-left:0;justify-content:flex-start}.av-inner .trust-item:last-child{border-right:none;padding-right:0;justify-content:flex-end}/* minmax(0,1fr), not 1fr: a grid track's automatic minimum size is its
   content, so an item that will not wrap pushes its track past its share
   of the row and the whole row overflows the screen. min-width:0 on the
   item is the same fix one level down. */
@media(max-width:820px){.av-inner .trust-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}.av-inner .trust-item{padding:0;border-right:none;justify-content:flex-start;min-width:0}.av-inner .trust-item:last-child{justify-content:flex-start}}@media(max-width:360px){.av-inner .trust-inner{grid-template-columns:1fr}}.av-inner .ti-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.av-inner .ti-num{font-family:'DM Sans',sans-serif;font-size:21px;font-weight:700;color:#fff;line-height:1}.av-inner .ti-lbl{font-size:11px;color:rgba(255,255,255,.45);margin-top:1px}/* CLIENT LOGOS */
.av-inner .clients-section{background:#fff;border-bottom:1px solid var(--border);padding:52px 0;overflow:hidden}.av-inner .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}.av-inner .clients-heading b{color:var(--navy);font-weight:700}.av-inner .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)}.av-inner .logo-track{display:flex;align-items:center;gap:66px;width:max-content;animation:logoscroll 46s linear infinite}.av-inner .clients-section:hover .logo-track{animation-play-state:paused}.av-inner .logo-track img{height:56px;width:auto;object-fit:contain;flex-shrink:0;transition:transform .25s}.av-inner .logo-track img:hover{transform:scale(1.08)}@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media(max-width:600px){.av-inner .logo-track img{height:40px}.av-inner .logo-track{gap:46px}}/* COURSES */
.av-inner .courses-section{background:var(--white)}.av-inner .course-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.75rem}.av-inner .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}.av-inner .ctab.active,.av-inner .ctab:hover{background:var(--navy-bg);color:#fff;border-color:var(--navy)}.av-inner .course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:.25rem}.av-inner .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}.av-inner .course-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -22px rgba(26,62,216,.4)}.av-inner .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}.av-inner .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)}.av-inner .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}.av-inner .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)}.av-inner .cc-ribbon.hot{background:linear-gradient(135deg,#ff7a1a,#f4510a)}.av-inner .cc-ribbon.new{background:linear-gradient(135deg,#f5c518,#f0a800);color:#3a2a00}.av-inner .cc-content{padding:22px;display:flex;flex-direction:column;flex:1}.av-inner .cc-desc{font-size:14px;color:var(--text2);line-height:1.62;margin-bottom:20px}.av-inner .cc-sub-label{font-size:13.5px;color:var(--text2);font-weight:500;margin-bottom:13px}.av-inner .cc-subs{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;margin-bottom:22px}.av-inner .cc-sub{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--navy);font-weight:500}.av-inner .cc-sub::before{content:'✓';color:#22a034;font-weight:800;font-size:14px;flex-shrink:0}.av-inner .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}.av-inner .cc-browse:hover{background:#1d0fa8;transform:translateY(-2px)}.av-inner .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}.av-inner .courses-viewall:hover{background:var(--brand-blue);color:#fff}@media(max-width:960px){.av-inner .course-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.av-inner .course-grid{grid-template-columns:1fr}}/* STATS */
.av-inner .stats-section{background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);padding:72px 0;position:relative;overflow:hidden}.av-inner .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}.av-inner .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}/* Four figures across a phone leaves about 80px each, which breaks the
   numbers onto two lines. Two by two keeps each one readable. */
@media(max-width:760px){.av-inner .stats-grid{grid-template-columns:repeat(2,1fr)}}.av-inner .stat-item{text-align:center;padding:2rem 1.5rem;border-right:1px solid rgba(255,255,255,.07)}.av-inner .stat-item:last-child{border-right:none}.av-inner .stat-num{font-family:'DM Sans',sans-serif;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:700;color:#fff;line-height:1}.av-inner .stat-num span{color:var(--gold)}.av-inner .stat-lbl{font-size:12px;color:rgba(255,255,255,.45);margin-top:6px;line-height:1.4}/* SERVICES */
.av-inner .services-section{background:var(--band)}.av-inner .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:2.5rem}.av-inner .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}.av-inner .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}.av-inner .service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(26,62,216,.18)}.av-inner .service-card:hover::after{transform:scaleX(1)}.av-inner .sc-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}.av-inner .sc-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:7px}.av-inner .sc-desc{font-size:13px;color:var(--text2);line-height:1.65}.av-inner .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 */
.av-inner .b2b-section{background:var(--navy-bg);padding:76px 0;position:relative;overflow:hidden}.av-inner .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}.av-inner .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}.av-inner .b2b-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative}@media(max-width:900px){.av-inner .b2b-grid{grid-template-columns:1fr;gap:2.5rem}}.av-inner .b2b-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}.av-inner .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}.av-inner .b2b-title em{font-style:italic;color:rgba(255,255,255,.6)}.av-inner .b2b-sub{font-size:15px;color:rgba(255,255,255,.65);line-height:1.75;margin-bottom:2rem}.av-inner .b2b-features{display:flex;flex-direction:column;gap:14px;margin-bottom:2rem}.av-inner .b2b-feat{display:flex;gap:12px;align-items:flex-start}.av-inner .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}.av-inner .b2b-feat-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px}.av-inner .b2b-feat-desc{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6}.av-inner .b2b-ctas{display:flex;gap:10px;flex-wrap:wrap}.av-inner .corp-test-stack{display:flex;flex-direction:column;gap:14px}.av-inner .corp-test-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:22px}.av-inner .ct-stars{color:var(--gold);font-size:12px;letter-spacing:2px;margin-bottom:10px}.av-inner .ct-text{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.7;font-style:italic;margin-bottom:14px}.av-inner .ct-author{display:flex;align-items:center;gap:10px}.av-inner .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}.av-inner .ct-name{font-size:13px;font-weight:700;color:#fff}.av-inner .ct-role{font-size:11px;color:rgba(255,255,255,.45)}.av-inner .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}.av-inner .b2b-numbers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.av-inner .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}.av-inner .b2b-num-val{font-family:'DM Sans',sans-serif;font-size:1.8rem;font-weight:700;color:var(--gold)}.av-inner .b2b-num-lbl{font-size:11px;color:rgba(255,255,255,.4);margin-top:3px}/* WHY AVANTA */
.av-inner .why-section{background:var(--band)}.av-inner .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}@media(max-width:900px){.av-inner .why-grid{grid-template-columns:1fr;gap:2.5rem}}.av-inner .why-features{display:flex;flex-direction:column;gap:18px;margin-top:2rem}.av-inner .why-feat{display:flex;gap:14px;align-items:flex-start}.av-inner .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}.av-inner .wf-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:3px}.av-inner .wf-desc{font-size:13px;color:var(--text2);line-height:1.65}.av-inner .accred-box{background:var(--navy-bg);border-radius:18px;padding:2.5rem;position:relative;overflow:hidden}.av-inner .accred-box::before{content:'';position:absolute;bottom:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(26,62,216,.2)}.av-inner .ab-title{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:1.25rem}.av-inner .accred-list{display:flex;flex-direction:column;gap:10px;margin-bottom:1.5rem}.av-inner .accred-item{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.75)}.av-inner .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}.av-inner .partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}/* Three pills across a folded column give each about 50px — narrower than the
   words inside them. */
@media(max-width:600px){.av-inner .partner-grid{grid-template-columns:repeat(2,1fr)}}.av-inner .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 */
.av-inner .sfcc-section{background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-blue3) 100%);padding:60px 0}.av-inner .sfcc-inner{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}/* The amounts column is min-width:190px, so on a phone it squeezes the copy
   beside it into a ribbon. Stacked, and left-aligned to match the text. */
@media(max-width:860px){.av-inner .sfcc-inner{grid-template-columns:1fr;gap:1.75rem}}.av-inner .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}.av-inner .sfcc-text p{font-size:15px;color:rgba(255,255,255,.75);max-width:540px;line-height:1.75}.av-inner .sfcc-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.5rem}.av-inner .sfcc-amounts{display:flex;flex-direction:column;gap:10px;align-items:flex-end}.av-inner .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}.av-inner .sfcc-amt-val{font-family:'DM Sans',sans-serif;font-size:2.2rem;font-weight:700;color:var(--gold);line-height:1}.av-inner .sfcc-amt-lbl{font-size:11px;color:rgba(255,255,255,.45);margin-top:4px}/* Stacked under the copy on a phone, the amounts are the whole width of the
   column rather than two different widths pushed to the right edge: the
   figures then sit centred under the text they belong to. These overrides
   come AFTER .sfcc-amounts above, not beside .sfcc-inner — a media query does
   not outrank a later rule of the same specificity. */
@media(max-width:860px){.av-inner .sfcc-amounts{align-items:stretch}.av-inner .sfcc-amt{min-width:0;width:100%}}/* UPCOMING */
.av-inner .upcoming-section{background:var(--band)}.av-inner .upcoming-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2rem}.av-inner .uc-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:box-shadow .2s}.av-inner .uc-card:hover{box-shadow:var(--shadow-md)}.av-inner .uc-header{background:var(--navy2);padding:13px 16px;display:flex;align-items:center;justify-content:space-between}.av-inner .uc-date{font-size:12px;font-weight:700;color:rgba(255,255,255,.9)}.av-inner .avail{font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill)}.av-inner .avail-yes{background:rgba(90,200,0,.15);color:var(--brand-green)}.av-inner .avail-few{background:rgba(245,166,35,.15);color:var(--gold)}.av-inner .uc-body{padding:14px 16px}.av-inner .uc-title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;line-height:1.4}.av-inner .uc-meta{font-size:11.5px;color:var(--text3);display:flex;gap:10px}.av-inner .uc-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg);border-top:1px solid var(--border2)}.av-inner .uc-fee{font-size:13px;font-weight:700;color:var(--navy)}.av-inner .uc-fee-sub{font-size:11px;color:var(--green-dark);font-weight:600}.av-inner .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}.av-inner .uc-reg-btn:hover{background:var(--brand-blue2)}/* TESTIMONIALS */
.av-inner .testimonials-section{background:var(--white)}.av-inner .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2.5rem}.av-inner .test-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden}.av-inner .test-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--brand-blue)}.av-inner .tc-stars{color:var(--gold);font-size:13px;margin-bottom:10px;letter-spacing:2px}.av-inner .tc-text{font-size:13px;color:var(--text2);line-height:1.72;font-style:italic;margin-bottom:14px}.av-inner .tc-author{display:flex;align-items:center;gap:9px}.av-inner .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}.av-inner .tc-name{font-size:13px;font-weight:700;color:var(--navy)}.av-inner .tc-role{font-size:11px;color:var(--text3)}/* LOCATIONS */
.av-inner .locations-section{background:var(--band)}.av-inner .locations-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2.5rem}.av-inner .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}.av-inner .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}.av-inner .loc-card:hover{transform:translateY(-6px);box-shadow:0 24px 52px -22px rgba(11,21,39,.4);border-color:transparent}.av-inner .loc-card:hover::before{transform:scaleX(1)}.av-inner .loc-card.is-hq{background:linear-gradient(160deg,var(--navy),var(--navy3));border-color:transparent}.av-inner .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}.av-inner .loc-card.is-hq .loc-icon{background:rgba(255,255,255,.12)}.av-inner .loc-name{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px;letter-spacing:-.2px}.av-inner .loc-card.is-hq .loc-name{color:#fff}.av-inner .loc-addr{font-size:12.5px;color:var(--text3);line-height:1.65;margin-bottom:16px;flex:1}.av-inner .loc-card.is-hq .loc-addr{color:rgba(255,255,255,.7)}.av-inner .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)}.av-inner .loc-card.is-hq .loc-tag{color:#cfd6ff;background:rgba(255,255,255,.12)}.av-inner .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}.av-inner .loc-card.is-hq .loc-link{color:#fff}.av-inner .loc-link:hover{gap:8px}@media(max-width:980px){.av-inner .locations-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.av-inner .locations-grid{grid-template-columns:1fr}}/* FAQ */
.av-inner .faq-section{background:var(--white)}.av-inner .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:2rem}@media(max-width:900px){.av-inner .faq-grid{grid-template-columns:1fr;gap:32px}}.av-inner .faq-list{display:flex;flex-direction:column;gap:8px}.av-inner .faq-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}.av-inner .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}.av-inner .faq-q:hover{background:var(--blue-light)}.av-inner .faq-q.open{color:var(--brand-blue);background:var(--blue-light)}.av-inner .faq-chevron{font-size:11px;color:var(--text3);flex-shrink:0;transition:transform .2s}.av-inner .faq-chevron.open{transform:rotate(180deg);color:var(--brand-blue)}.av-inner .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}.av-inner .faq-a.open{max-height:200px;padding:0 18px 14px}/* NEWS */
.av-inner .news-section{background:var(--white)}.av-inner .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2.25rem}.av-inner .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}.av-inner .post:hover{transform:translateY(-6px);box-shadow:0 26px 56px -24px rgba(11,21,39,.42);border-color:transparent}.av-inner .post-img{height:190px;overflow:hidden}.av-inner .post-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.av-inner .post:hover .post-img img{transform:scale(1.06)}.av-inner .post-body{padding:22px;display:flex;flex-direction:column;flex:1}.av-inner .post-cat{align-self:flex-start;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;margin-bottom:12px}.av-inner .post-cat.c1{background:linear-gradient(135deg,#eef0ff,#e0e3ff);color:#1b18db}.av-inner .post-cat.c2{background:linear-gradient(135deg,#eef8dd,#dff0c2);color:#4e7d12}.av-inner .post-cat.c3{background:linear-gradient(135deg,#ffe9dc,#ffd7c2);color:#d5540f}.av-inner .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}.av-inner .post:hover h4{color:var(--brand-blue)}.av-inner .post p{color:var(--text2);font-size:14px;margin-top:9px;line-height:1.65}.av-inner .post-meta{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:10px;color:var(--text3);font-size:13px;border-top:1px solid var(--border2)}.av-inner .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}.av-inner .post-meta .dot{opacity:.5}@media(max-width:960px){.av-inner .news-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.av-inner .news-grid{grid-template-columns:1fr}}/* FOOTER */
/* FOOTER — matches the other Avanta pages (avfooter) */
.av-inner .avfooter{background:var(--navy-bg);color:#fff;padding:62px 0 46px;position:relative}.av-inner .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))}.av-inner .avf-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr 1.15fr;gap:0}.av-inner .avf-top>div{padding:0 30px}.av-inner .avf-top>div:first-child{padding-left:0}.av-inner .avf-col{border-left:1px solid rgba(255,255,255,.13)}.av-inner .avf-logo{background:#fff;border-radius:12px;padding:11px 15px;display:inline-block;line-height:0}.av-inner .avf-logo img{height:38px;width:auto;display:block}.av-inner .avf-company{margin-top:18px;font-size:14px;font-weight:700;color:#fff}.av-inner .avf-uen{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:4px;line-height:1.5}.av-inner .avf-h{font-size:1.15rem;font-weight:700;color:#fff;margin:0 0 18px;letter-spacing:.2px}.av-inner .avf-links{display:flex;flex-direction:column;gap:14px}.av-inner .avf-links a{font-size:14px;color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s}.av-inner .avf-links a:hover{color:#fff}.av-inner .avf-social{display:flex;flex-wrap:wrap;gap:12px}.av-inner .avf-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .18s,transform .18s}.av-inner .avf-social a:hover{background:var(--brand-blue);transform:translateY(-2px)}.av-inner .avf-social svg{width:19px;height:19px;fill:currentColor}.av-inner .avf-ci{display:flex;align-items:flex-start;gap:13px;margin-bottom:17px;font-size:14px;color:rgba(255,255,255,.82);line-height:1.5}.av-inner .avf-ci .ic{color:#f0b429;flex-shrink:0;margin-top:1px;display:inline-flex}.av-inner .avf-ci .ic svg{width:19px;height:19px;fill:currentColor}.av-inner .avf-ci a{color:rgba(255,255,255,.82);text-decoration:none}.av-inner .avf-ci a:hover{color:#fff}.av-inner .avf-cats{border-top:1px solid rgba(255,255,255,.15);margin-top:48px;padding-top:6px}.av-inner .avf-cat{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.10)}.av-inner .avf-cat:last-child{border-bottom:none}.av-inner .avf-cat-h{font-size:15px;font-weight:700;color:#fff;margin-bottom:16px}.av-inner .avf-cat-links{display:flex;flex-wrap:wrap;align-items:center;row-gap:12px}.av-inner .avf-cat-links a{font-size:13.5px;color:rgba(255,255,255,.75);text-decoration:none;padding:0 18px;position:relative;transition:color .15s;line-height:1.2}.av-inner .avf-cat-links a:first-child{padding-left:0}.av-inner .avf-cat-links a:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:13px;background:rgba(255,255,255,.22)}.av-inner .avf-cat-links a:hover{color:#fff}.av-inner .avf-bottom{background:#eef0f7;border-top:1px solid #dfe3ef}.av-inner .avf-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 0}.av-inner .avf-copy{font-size:13px;color:#5a6072}.av-inner .avf-legal{display:flex;gap:26px}.av-inner .avf-legal a{font-size:13px;color:#5a6072;text-decoration:none}.av-inner .avf-legal a:hover{color:var(--brand-blue)}@media(max-width:900px){.av-inner .avf-top{grid-template-columns:1fr 1fr;gap:30px 0}.av-inner .avf-top>div{padding:0 22px}.av-inner .avf-top>div:nth-child(odd){padding-left:0}.av-inner .avf-col{border-left:none}.av-inner .avf-social{max-width:none}}@media(max-width:560px){.av-inner .avf-top{grid-template-columns:1fr}.av-inner .avf-top>div{padding:0}.av-inner .avf-bottom-inner{flex-direction:column;align-items:flex-start}}@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}/* CONTACT SECTION */
.av-inner .contact-sec{padding:54px 0}.av-inner .contact-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:24px;align-items:start}.av-inner .contact-form-card{background:var(--navy-bg);border-radius:var(--r-lg);padding:30px 30px 32px;color:#fff;position:relative;overflow:hidden}.av-inner .contact-form-card::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:rgba(26,62,216,.28)}.av-inner .cfc-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:18px;position:relative}.av-inner .cfc-title{font-family:'DM Sans',sans-serif;font-size:1.55rem;font-weight:700;color:#fff;letter-spacing:-.3px}.av-inner .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}.av-inner .reply-dot{width:7px;height:7px;border-radius:50%;background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.25)}.av-inner .cfc-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:22px;position:relative}.av-inner .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}.av-inner .cfc-tab.active{color:#fff;border-bottom-color:#fff}.av-inner .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.av-inner .cf-field{margin-bottom:16px;position:relative}.av-inner .cf-label{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.88);margin-bottom:7px}.av-inner .cf-label span{color:#ff9a9a}.av-inner .cf-input,.av-inner .cf-select,.av-inner .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}.av-inner .cf-input:focus,.av-inner .cf-select:focus,.av-inner .cf-textarea:focus{box-shadow:0 0 0 3px rgba(26,62,216,.35)}.av-inner .cf-input::placeholder,.av-inner .cf-textarea::placeholder{color:var(--text3)}.av-inner .cf-textarea{min-height:120px;resize:vertical}.av-inner .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}.av-inner .cf-check input{margin-top:2px;width:17px;height:17px;flex-shrink:0;accent-color:var(--brand-blue);cursor:pointer}.av-inner .cf-check a{color:#9FB0FF;font-weight:600;text-decoration:underline}.av-inner .cf-readmore{display:inline-block;font-size:13px;color:#fff;text-decoration:underline;font-weight:600;margin:2px 0 18px}.av-inner .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}.av-inner .cf-captcha .cbox{width:28px;height:28px;border:2px solid #c1c1c1;border-radius:3px;background:#fff;flex-shrink:0}.av-inner .cf-captcha .clabel{font-size:14px;color:#3c4043}.av-inner .cf-captcha .clogo{margin-left:auto;text-align:center;color:#9aa4b0;line-height:1.1}.av-inner .cf-captcha .clogo b{display:block;font-size:15px;color:#5b6472;font-weight:800;letter-spacing:-.5px}.av-inner .cf-captcha .clogo span{font-size:9px}.av-inner .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}.av-inner .cf-submit:hover{background:#e0921a;box-shadow:0 6px 18px rgba(245,166,35,.35)}/* Talk-to-us card */
.av-inner .talk-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow)}.av-inner .talk-title{font-family:'DM Sans',sans-serif;font-size:1.3rem;font-weight:700;color:var(--navy);margin-bottom:16px}.av-inner .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)}.av-inner .talk-wa:hover{background:#1db955;transform:translateY(-2px);box-shadow:0 9px 24px rgba(37,211,102,.42)}.av-inner .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}.av-inner .talk-wa .wa-ic svg{width:23px;height:23px}.av-inner .talk-wa .wa-txt b{display:block;font-size:15px;font-weight:700;line-height:1.2}.av-inner .talk-wa .wa-txt small{font-size:11.5px;opacity:.9}.av-inner .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}.av-inner .talk-btn:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:var(--blue-light)}.av-inner .talk-list{margin:22px 0 4px;display:flex;flex-direction:column;gap:14px}.av-inner .talk-item{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--text2);line-height:1.5}.av-inner .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}.av-inner .talk-img{width:100%;border-radius:var(--r);overflow:hidden;margin-top:18px;aspect-ratio:16/10}.av-inner .talk-img img{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:900px){.av-inner .contact-grid{grid-template-columns:1fr}.av-inner .cf-row{grid-template-columns:1fr}}/* OUR STORY */
.av-inner .story-section{background:var(--navy-bg);color:#fff;padding:80px 0;position:relative;overflow:hidden}.av-inner .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}.av-inner .story-grid{display:grid;grid-template-columns:.9fr 1.15fr;gap:46px;align-items:center;position:relative;z-index:1}.av-inner .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)}.av-inner .story-eyebrow span{font-size:10px}.av-inner .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}.av-inner .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}.av-inner .story-section p{color:rgba(255,255,255,.82);margin-top:18px;font-size:16px;line-height:1.75;max-width:48ch}.av-inner .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}.av-inner .story-cta:hover{background:var(--brand-blue2);transform:translateY(-2px)}.av-inner .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}.av-inner .story-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}@media(max-width:900px){.av-inner .story-grid{grid-template-columns:1fr;gap:30px}}/* ============ WHAT WE DO — enhanced service cards ============ */
.av-inner .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2.75rem}.av-inner .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}.av-inner .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}.av-inner .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}.av-inner .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}.av-inner .service-card:hover::before{opacity:1}.av-inner .service-card:hover::after{transform:scaleX(1)}.av-inner .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}.av-inner .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}.av-inner .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}.av-inner .sc-desc{font-size:13px;color:var(--text2);line-height:1.68;position:relative;z-index:1;flex:1}.av-inner .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}.av-inner .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}.av-inner .service-card:hover .sc-link i{background:var(--accent);color:#fff;transform:translateX(3px)}@media(max-width:980px){.av-inner .services-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.av-inner .services-grid{grid-template-columns:1fr}}/* ============ LOCATIONS — polished ============ */
.av-inner .loc-icon{background:linear-gradient(150deg,#dbe4ff,var(--blue-light));box-shadow:inset 0 0 0 1px rgba(26,62,216,.12)}.av-inner .loc-tag.reg-west{color:var(--green-dark);background:var(--green-bg)}.av-inner .loc-tag.reg-central{color:var(--brand-orange);background:#FEF0E6}.av-inner .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}.av-inner .loc-card.is-hq .loc-link i{background:rgba(255,255,255,.15)}.av-inner .loc-card:hover .loc-link i{background:var(--brand-blue);color:#fff;transform:translateX(3px)}.av-inner .loc-card.is-hq:hover .loc-link i{background:#fff;color:var(--brand-blue)}/* ============ REVIEWS — auto-scroll marquee ============ */
.av-inner .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)}.av-inner .reviews-track{display:flex;gap:20px;width:max-content;animation:reviewScroll 46s linear infinite}.av-inner .reviews-marquee:hover .reviews-track{animation-play-state:paused}@keyframes reviewScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}.av-inner .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)}.av-inner .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}.av-inner .rev-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.av-inner .rev-stars{color:var(--gold);font-size:14px;letter-spacing:2px}.av-inner .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)}.av-inner .rev-text{font-size:13.5px;color:var(--text2);line-height:1.72;font-style:italic;margin-bottom:18px;position:relative;z-index:1}.av-inner .rev-author{display:flex;align-items:center;gap:11px}.av-inner .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}.av-inner .rev-name{font-size:13.5px;font-weight:700;color:var(--navy)}.av-inner .rev-role{font-size:11.5px;color:var(--text3)}@media(max-width:560px){.av-inner .rev-card{flex-basis:300px;width:300px}}/* ============ FAQ — phone & WhatsApp contact buttons ============ */
.av-inner .faq-contact{margin-top:1.75rem;display:flex;flex-direction:column;gap:12px;max-width:340px}.av-inner .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}.av-inner .contact-btn:hover{transform:translateY(-2px)}.av-inner .cb-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex-shrink:0}.av-inner .cb-txt{display:flex;flex-direction:column;line-height:1.25}.av-inner .cb-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}.av-inner .cb-value{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;color:var(--navy);letter-spacing:-.2px}.av-inner .cb-arrow{margin-left:auto;color:var(--text4);font-size:15px;transition:transform .2s}.av-inner .contact-btn:hover .cb-arrow{transform:translateX(3px)}/* phone variant */
.av-inner .contact-btn.cb-phone .cb-ico{background:var(--blue-light);color:var(--brand-blue)}.av-inner .contact-btn.cb-phone:hover{border-color:var(--brand-blue);box-shadow:0 14px 30px -14px rgba(26,62,216,.45)}.av-inner .contact-btn.cb-phone:hover .cb-arrow{color:var(--brand-blue)}/* whatsapp variant */
.av-inner .contact-btn.cb-wa{background:linear-gradient(135deg,#25D366,#1EBE5A);border-color:transparent;box-shadow:0 12px 26px -12px rgba(37,211,102,.6)}.av-inner .contact-btn.cb-wa:hover{box-shadow:0 18px 36px -14px rgba(37,211,102,.7)}.av-inner .contact-btn.cb-wa .cb-ico{background:rgba(255,255,255,.22);color:#fff}.av-inner .contact-btn.cb-wa .cb-label{color:rgba(255,255,255,.85)}.av-inner .contact-btn.cb-wa .cb-value{color:#fff}.av-inner .contact-btn.cb-wa .cb-arrow{color:rgba(255,255,255,.9)}.av-inner .faq-hours{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);margin-top:2px}.av-inner .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){.av-inner .faq-contact{max-width:100%}}/* ============ IMAGE COURSE CARDS — ported from courses.html (.course), CSS vars resolved ============ */
.av-inner .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)}.av-inner .course:hover{transform:translateY(-4px);box-shadow:0 14px 40px -16px rgba(10,14,39,.20);border-color:#c4c9ff}.av-inner .course-media{height:150px;position:relative;background:linear-gradient(135deg,#1b18db 0%,#403ff0 55%,#6a6ff7 100%);display:grid;place-items:center;color:#fff}.av-inner .course-media.g2{background:linear-gradient(135deg,#6aa315,#7fbf1f)}.av-inner .course-media.g3{background:linear-gradient(135deg,#f26a21,#ff8a4d)}.av-inner .course-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02)}.av-inner .course-media .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,39,.12),rgba(10,14,39,.66))}.av-inner .course-media .badge,.av-inner .course-media .wish,.av-inner .course-media .ctype{z-index:2}.av-inner .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)}.av-inner .course-media .badge.b-hot{background:linear-gradient(135deg,#ff8a4d,#f2401e)}.av-inner .course-media .badge.b-demand{background:linear-gradient(135deg,#5b8cff,#1b3ff5)}.av-inner .course-media .badge.b-new{background:linear-gradient(135deg,#8fd13a,#4e9a12)}.av-inner .course-media .badge.b-pop{background:linear-gradient(135deg,#f472b6,#a21caf)}.av-inner .course-media .badge i{font-size:11px;color:#9bd94b}.av-inner .course-media .wish{display:none}.av-inner .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)}.av-inner .course-media .ctype::before{content:"";width:22px;height:3px;border-radius:2px;background:#7fbf1f}.av-inner .course-body{padding:20px;display:flex;flex-direction:column;flex:1}.av-inner .course-tags{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.av-inner .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}.av-inner .course-tags .tag.green{background:linear-gradient(135deg,#eef8dd,#dff0c2);color:#4e7d12;border-color:#d3e8ad}.av-inner .course-tags .tag.orange{background:linear-gradient(135deg,#ffe9dc,#ffd7c2);color:#d5540f;border-color:#ffccb0}.av-inner .course-tags .tag.teal{background:linear-gradient(135deg,#dbf6fb,#c3eef6);color:#0b7e95;border-color:#b3e6f0}.av-inner .course-tags .tag.violet{background:linear-gradient(135deg,#f0e9ff,#e4d7ff);color:#6d28d9;border-color:#dcc9ff}.av-inner .course:hover .course-tags .tag{transform:translateY(-1px);transition:transform .18s cubic-bezier(.22,.61,.36,1)}.av-inner .course h4{font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:-.2px;color:#0a0e27}.av-inner .course-meta{display:flex;gap:14px;color:#667089;font-size:13px;margin:12px 0}.av-inner .course-meta span{display:inline-flex;align-items:center;gap:6px}.av-inner .course-meta i{font-size:13px}.av-inner .subsidy-check{display:flex;gap:8px 14px;flex-wrap:wrap;margin:12px 0}.av-inner .subsidy-check span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#4b5573}.av-inner .subsidy-check i{color:#6aa315;font-size:12px}.av-inner .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)}.av-inner .course .price b{font-family:"DM Sans";font-size:20px;color:#0a0e27}.av-inner .course .price s{display:none}.av-inner .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}.av-inner .course .btn-primary:hover{transform:translateY(-2px);box-shadow:0 26px 56px -18px rgba(27,24,219,.6)}.av-inner .course .btn i{font-size:.92em}


/* ---------- assets/css/pages.css ---------- */
/* ============================================================================
   Avanta Global — inner page components
   ----------------------------------------------------------------------------
   Everything here is built from the variables declared in avanta.css. No new
   colours, no new font, no new radius scale, no new shadow values. If a value
   is not a var() it is because the same literal already appears in index.html.

   Load order on every page:  avanta.css  →  pages.css
   ========================================================================= *//* ============================================================================
   1. MOBILE NAVIGATION
   ----------------------------------------------------------------------------
   index.html ships no mobile menu: there is not a single .nav rule inside any
   of its media queries, so at 375px the nav's 1,149px of content sits inside a
   327px container and is simply clipped by `overflow-x:hidden` on <body>.
   The links are unreachable on a phone.

   This is the one addition to the header, and it is a gap being filled rather
   than a redesign — desktop rendering is byte-identical to index.html, because
   every rule below is inside a max-width media query. The same markup and the
   same stylesheet go on index.html too, so the header stays identical across
   the whole site as the brief requires.
   ========================================================================= */
/* CTA label swaps on small screens — the bar cannot fit the full wording at
   375px beside the logo and menu button. The CTA is kept, not dropped. */
.av-inner .qr-short{display:none}.av-inner .nav-toggle{
  display:none;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  background:var(--blue-light);border:none;border-radius:var(--r);
  color:var(--brand-blue);cursor:pointer;
  font-size:17px;flex-shrink:0;
}.av-inner .nav-toggle:hover{background:var(--blue-mid)}.av-inner .nav-toggle:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}/* Between the burger breakpoint and full desktop there is a band — tablet
   landscape, 1024 being the common one — where the whole link row still shows
   but the bar can no longer hold it alongside the phone number and the full
   CTA wording: the button ended up 124px past the right edge, clipped by
   body{overflow-x:hidden}. The links are the navigation, so the two pieces of
   furniture give way instead. */
@media(max-width:1100px){.av-inner .nav-actions .nav-phone{display:none}.av-inner .qr-full{display:none}.av-inner .qr-short{display:inline}
}@media(max-width:980px){.av-inner .nav-toggle{display:inline-flex}/* The link list becomes a stacked panel under the bar. `hidden` is toggled
     by JS, and [hidden] is forced off-display so the flex rule cannot win. */
.av-inner .nav-inner{position:relative;gap:.75rem}.av-inner .nav-links{
    position:absolute;top:100%;left:0;right:0;z-index:60;
    display:flex;flex-direction:column;gap:2px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);
    padding:10px;margin-top:10px;
    max-height:calc(100vh - 140px);overflow-y:auto;
  }.av-inner .nav-links[hidden]{display:none}.av-inner .nav-links a{display:block;padding:12px 14px;font-size:14.5px}/* The phone number is already in the top bar; the CTA stays reachable. */
.av-inner .nav-actions .nav-phone{display:none}
}@media(max-width:600px){.av-inner .nav-inner{height:60px}.av-inner .brand-logo{max-height:30px}.av-inner .nav-actions .quick-reg{padding:9px 13px;font-size:12.5px}.av-inner .qr-full{display:none}.av-inner .qr-short{display:inline}/* The top bar carries six items on one row; let it wrap instead of clipping. */
.av-inner .topbar-inner{flex-wrap:wrap;gap:6px 14px;justify-content:center;text-align:center}.av-inner .topbar-left{flex-wrap:wrap;justify-content:center;gap:6px 12px}/* The right half was still nowrap, so its four links and the language
     toggle were squeezed into 331px: the toggle lost half its width and
     clipped the 中文 label. Wrapping costs a row and keeps every link
     reachable — none of them are repeated in the burger menu. */
.av-inner .topbar-right{flex-wrap:wrap;justify-content:center;gap:6px 12px}.av-inner .lang-toggle{flex-shrink:0}.av-inner .lang-btn{white-space:nowrap}/* Both pills say what the hero says three rows further down — "TÜV NORD
     Business Unit" and "SkillsFuture Credit Eligible" are the first two
     badges under the headline. On a phone that is the same claim twice in one
     screen, and this is the copy with nowhere to go. */
.av-inner .topbar .tuv-pill,.av-inner .topbar .sfcc-pill-top{display:none}
}/* ============================================================================
   2. PAGE HERO + BREADCRUMBS
   Inner-page counterpart to the homepage hero: same navy ground and same
   gradient direction, at a height that suits a content page rather than a
   landing page.
   ========================================================================= */
.av-inner .page-hero{
  background:linear-gradient(135deg,var(--navy-bg) 0%,var(--brand-blue3) 55%,var(--brand-blue2) 100%);
  color:#fff;padding:54px 0 62px;position:relative;overflow:hidden;
}.av-inner .page-hero::after{
  content:"";position:absolute;right:-120px;top:-120px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(90,200,0,.16),transparent 70%);
  pointer-events:none;
}.av-inner .page-hero-inner{position:relative;z-index:2;max-width:820px}.av-inner .page-hero h1{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(28px,4vw,44px);line-height:1.12;
  font-weight:800;letter-spacing:-.02em;margin:14px 0 0;color:#fff;
}.av-inner .page-hero .page-hero-sub{
  margin-top:14px;font-size:15.5px;line-height:1.7;
  color:rgba(255,255,255,.82);max-width:70ch;
}.av-inner .page-hero .btn-primary{background:var(--brand-orange)}.av-inner .page-hero .btn-primary:hover{background:#C44008}.av-inner .page-hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}/* ---- Split banner: headline column + enquiry card ----------------------
   Set `card` on the page in build/banners.js to get it. The band, the navy
   ground and the breadcrumb are unchanged — this only adds a second column,
   so the pages without a card are not affected by any of it. */
.av-inner .page-hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(28px,4vw,56px);align-items:center;
}/* The single-column banner caps its text at 820px. Inside a grid the column
   already has a width, and the cap would leave the card floating away from
   it on a wide screen. */
.av-inner .page-hero--split .page-hero-inner{max-width:none}.av-inner .page-hero--split .page-hero-sub{max-width:58ch}/* ---- Six-item trust bar (Train Your Workforce) -------------------------
   avanta.css sizes .trust-item for the homepage's five. A sixth leaves each
   about 196px, at which "TÜV NORD", "Organisations trained" and "Industry
   experience" all wrap to two lines and the row grows a second storey.

   Scoped to this modifier so the homepage bar, which still has five, is not
   touched. Below the 820px breakpoint avanta.css turns the row into a
   two-column grid and these overrides stop mattering. */
.av-inner .trust-inner--six .trust-item{padding:0 14px;gap:9px}.av-inner .trust-inner--six .ti-icon{width:32px;height:32px;border-radius:8px;font-size:14px}.av-inner .trust-inner--six .ti-num{font-size:18px;white-space:nowrap}.av-inner .trust-inner--six .ti-lbl{font-size:10.5px;white-space:nowrap}/* The nowrap above is for the desktop row, where six items share one line
   and a wrapped label would make the row two different heights. Below 820px
   the row is already a two-column grid with a line each, so nowrap buys
   nothing and costs the only thing that lets a narrow column fit: the
   labels were 183px wide in a 158px column and ran 31px off the side of a
   375px screen. */
@media(max-width:820px){.av-inner .trust-inner--six .ti-num,.av-inner .trust-inner--six .ti-lbl{white-space:normal}.av-inner .trust-inner--six .trust-item{padding:0;min-width:0}
}.av-inner .page-hero-badge{
  display:inline-block;margin:16px 0 0;
  padding:6px 15px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;
}/* h1 carries margin-top:14px for the breadcrumb above it. With a badge in
   between, that gap belongs under the badge instead. */
.av-inner .page-hero-badge + h1{margin-top:18px}.av-inner .page-hero-card{
  background:#fff;border-radius:16px;padding:30px 30px 32px;
  box-shadow:0 26px 60px -20px rgba(0,0,0,.45);
}.av-inner .phc-eyebrow{
  margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-blue);
}.av-inner .phc-title{
  font-family:'DM Sans',sans-serif;
  margin:12px 0 0;font-size:21px;line-height:1.32;
  font-weight:700;letter-spacing:-.01em;color:var(--navy);
}/* The 12px above the title is the gap under the eyebrow. On a card with no
   eyebrow the title is first, and that margin becomes a dent in the card's
   own padding. */
.av-inner .page-hero-card > .phc-title:first-child{margin-top:0}.av-inner .phc-text{margin:14px 0 0;font-size:14.5px;line-height:1.7;color:var(--text2)}.av-inner .phc-cta{margin-top:22px;width:100%;padding:13px 20px;font-size:14px}/* The card is a fixed 340px column, which is wider than a phone. Below the
   tablet break it stops being a column and becomes the row under the CTAs —
   otherwise the grid stays 340px + text inside a 375px screen and the page
   scrolls sideways. */
@media(max-width:980px){.av-inner .page-hero-grid{grid-template-columns:1fr;gap:32px;align-items:start}.av-inner .page-hero-grid>*{min-width:0}.av-inner .page-hero--split .page-hero-sub{max-width:70ch}.av-inner .page-hero-card{max-width:520px}
}@media(max-width:600px){.av-inner .page-hero-card{padding:24px 22px 26px}.av-inner .phc-title{font-size:19px}.av-inner .page-hero-ctas .btn{width:100%}
}/* avanta.css styles the bare <nav> element for the site header — white
   background, sticky, shadow, z-index 200. The breadcrumb is also a <nav>
   (correctly, for screen readers) and was inheriting all of it, painting a
   white bar across the hero. Scope it back inside the hero only. */
.av-inner .page-hero nav{background:none;border:0;box-shadow:none;position:static;z-index:auto}/* ---- Light banner ------------------------------------------------------
   The blue gradient banner reads as a campaign header. On a services page the
   client wants the quieter, document-like opening used across B2B compliance
   sites: white ground, navy type, the breadcrumb and the sentence doing the
   work. Set light:true on the page in build/banners.js to get it.

   Everything is re-stated rather than unset, because the base rules colour
   text for a dark ground and an inherited white-on-white is invisible. */
.av-inner .page-hero--light{
  background:#fff;color:var(--text);
  border-bottom:1px solid var(--border);
  padding:44px 0 46px;
}.av-inner .page-hero--light::after{display:none}/* the green glow needs the dark ground */
.av-inner .page-hero--light h1{color:var(--text)}.av-inner .page-hero--light .page-hero-sub{color:var(--text2)}.av-inner .page-hero--light .crumbs a{color:var(--text3)}.av-inner .page-hero--light .crumbs a:hover{color:var(--brand-blue)}.av-inner .page-hero--light .crumbs li::after{color:var(--text4)}/* The current-page crumb has to be named directly. Colouring the <li> does
   nothing to it: the label is a <span aria-current="page"> inside that <li>,
   and .crumbs [aria-current] sets its colour to #fff for the dark band — a
   colour set on the child always beats one inherited from the parent, however
   specific the parent's selector is. On the white band that left the current
   page invisible: "Home / Company /" with the page's own name rendered white
   on white. Every light or merged band was affected. */
.av-inner .page-hero--light .crumbs li:last-child,.av-inner .page-hero--light .crumbs [aria-current]{color:var(--text);font-weight:600}/* Merged band: breadcrumb only, sitting directly on top of the first section
   rather than above it. No bottom border and no bottom padding, so the two
   read as one white block — the section below supplies its own top padding. */
.av-inner .page-hero--merge{border-bottom:0;padding:26px 0 0}.av-inner .page-hero--merge + section{padding-top:22px}@media (max-width:760px){.av-inner .page-hero--merge{padding-top:18px}}/* Role CTA bar (Outsourcing). Sits under the role groups as a single wide
   card rather than a section of its own, so it reads as the last row of the
   grid rather than a new pitch. */
.av-inner .role-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:18px;padding:22px 26px;
  background:#fff;border:1px solid var(--border);border-radius:14px;
}.av-inner .role-cta__copy{display:flex;flex-direction:column;gap:4px;min-width:0}.av-inner .role-cta__copy b{font-size:15.5px;color:var(--text);font-weight:700}.av-inner .role-cta__copy span{font-size:13.5px;color:var(--text2);line-height:1.6}.av-inner .role-cta .role-cta__btn{
  flex:0 0 auto;background:#fff;border:1.5px solid var(--border);
  color:var(--brand-blue);font-weight:700;border-radius:100px;padding:12px 22px;
}.av-inner .role-cta .role-cta__btn:hover{border-color:var(--brand-blue);background:var(--brand-blue);color:#fff}@media (max-width:620px){.av-inner .role-cta{padding:18px 18px;align-items:stretch}.av-inner .role-cta .role-cta__btn{text-align:center}
}/* Auditing merges the other way round: the band keeps its headline and the
   section below drops its own, so it needs the white ground and the reduced
   top pad without the band changing. */
.av-inner .section--merged{background:#fff;padding-top:34px}.av-inner .page-hero--mergenext{border-bottom:0;padding-bottom:26px}.av-inner .crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;list-style:none;margin:0;padding:0}.av-inner .crumbs a{color:rgba(255,255,255,.72);text-decoration:none}.av-inner .crumbs a:hover{color:#fff;text-decoration:underline}.av-inner .crumbs li::after{content:"/";margin-left:6px;color:rgba(255,255,255,.4)}.av-inner .crumbs li:last-child::after{content:""}.av-inner .crumbs [aria-current]{color:#fff;font-weight:600}/* ============================================================================
   3. GENERIC CONTENT BLOCKS
   ========================================================================= */
.av-inner .lede{font-size:16.5px;line-height:1.75;color:var(--text2);max-width:78ch}.av-inner .prose p{margin-bottom:14px;color:var(--text2);line-height:1.75}.av-inner .prose strong{color:var(--text)}.av-inner .prose ul{margin:0 0 16px 0;padding-left:0;list-style:none}.av-inner .prose li{position:relative;padding-left:24px;margin-bottom:9px;color:var(--text2);line-height:1.65}.av-inner .prose li::before{
  content:"";position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--brand-green);
}.av-inner .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.av-inner .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.av-inner .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.av-inner .info-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}.av-inner .info-card:hover{box-shadow:var(--shadow-md)}.av-inner .info-card h3{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;margin-bottom:8px;line-height:1.35}.av-inner .info-card p{font-size:14px;color:var(--text3);line-height:1.65;margin-bottom:12px}.av-inner .info-card .ic-icon{
  width:44px;height:44px;border-radius:var(--r);
  background:var(--blue-light);color:var(--brand-blue);
  display:grid;place-items:center;font-size:18px;margin-bottom:14px;
}.av-inner .info-card .ic-icon.green{background:var(--green-bg);color:var(--green-ui)}.av-inner .info-card .ic-icon.gold{background:var(--gold-bg);color:var(--gold)}.av-inner .info-card .ic-icon.orange{background:#FEEDE4;color:var(--brand-orange)}.av-inner .info-card .ic-link{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--brand-blue);text-decoration:none}.av-inner .info-card .ic-link:hover{text-decoration:underline}/* Numbered service block — used for the audit categories and service areas. */
.av-inner .num-card{position:relative;padding-left:60px}.av-inner .num-card .nc-num{
  position:absolute;left:26px;top:26px;
  width:34px;height:34px;border-radius:50%;
  background:var(--brand-blue);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:700;
}.av-inner .highlight-box{
  background:var(--blue-light);border:1px solid var(--blue-mid);
  border-radius:var(--r-lg);padding:22px 24px;
}.av-inner .highlight-box.green{background:var(--green-bg);border-color:#BDEBDC}.av-inner .highlight-box.gold{background:var(--gold-bg);border-color:#F6E2BB}.av-inner .highlight-box h3{font-family:'DM Sans',sans-serif;font-size:15.5px;font-weight:700;margin-bottom:8px}.av-inner .highlight-box p{font-size:14px;color:var(--text2);line-height:1.7;margin:0}/* ============================================================================
   4. RESPONSIVE TABLE
   The audit-criteria and ECO-threshold tables carry regulatory detail that
   must not be summarised away, so the table stays a table and scrolls inside
   its own container instead of forcing the page sideways.
   ========================================================================= */
.av-inner .table-wrap{
  overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch;
}.av-inner .av-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}.av-inner .av-table caption{
  caption-side:top;text-align:left;padding:16px 18px 0;
  font-size:13px;color:var(--text3);
}.av-inner .av-table th,.av-inner .av-table td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border2)}.av-inner .av-table thead th{
  background:var(--navy-bg);color:#fff;font-weight:700;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;border-bottom:0;
}.av-inner .av-table tbody tr:last-child td{border-bottom:0}.av-inner .av-table tbody tr:nth-child(even){background:var(--bg)}.av-inner .av-table td strong{color:var(--text)}.av-inner .table-scroll-hint{font-size:12px;color:var(--text3);margin-top:8px}@media(min-width:721px){.av-inner .table-scroll-hint{display:none}}/* ============================================================================
   5. ACCORDION
   <details>/<summary>: keyboard-operable with no JS, and the answer text stays
   in the DOM whether open or shut so it remains indexable.
   ========================================================================= */
.av-inner .acc{display:flex;flex-direction:column;gap:10px}.av-inner .acc-item{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
}.av-inner .acc-item[open]{border-color:var(--blue-mid)}.av-inner .acc-item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:18px 52px 18px 22px;
  font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;color:var(--text);
}.av-inner .acc-item summary::-webkit-details-marker{display:none}.av-inner .acc-item summary::after{
  content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--brand-blue);transition:transform .2s;
}.av-inner .acc-item[open] summary::after{transform:translateY(-50%) rotate(180deg)}.av-inner .acc-item summary:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px}.av-inner .acc-item summary:hover{background:var(--bg)}.av-inner .acc-body{padding:0 22px 22px;border-top:1px solid var(--border2);padding-top:18px}.av-inner .acc-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}/* ============================================================================
   6. ROLE / MANPOWER LISTS  (EHS outsourcing)
   ========================================================================= */
.av-inner .role-group{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}.av-inner .role-group-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}.av-inner .role-group-head h3{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:700;margin:0}.av-inner .role-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;list-style:none;padding:0}.av-inner .role-list li{
  font-size:13px;font-weight:600;color:var(--text2);
  background:var(--bg);border:1px solid var(--border2);
  border-radius:var(--r-pill);padding:7px 13px;
}/* ============================================================================
   7. BLOG / NEWS
   Card markup is deliberately uniform so a WordPress loop can emit it
   unchanged — one <article class="blog-card"> per post, nothing positional.
   ========================================================================= */
.av-inner .blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}.av-inner .blog-pill{
  font-size:13px;font-weight:700;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--border);color:var(--text2);cursor:pointer;
  font-family:inherit;transition:all .15s;
}.av-inner .blog-pill:hover{border-color:var(--blue-mid);color:var(--brand-blue)}.av-inner .blog-pill[aria-pressed="true"]{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}.av-inner .blog-pill:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}.av-inner .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.av-inner .blog-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:all .2s;
}.av-inner .blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.av-inner .blog-card.is-hidden{display:none}.av-inner .blog-media{
  aspect-ratio:16/9;background:linear-gradient(135deg,var(--blue-light),var(--blue-mid));
  display:grid;place-items:center;color:var(--brand-blue);font-size:30px;
}.av-inner .blog-media img{width:100%;height:100%;object-fit:cover}.av-inner .blog-body{padding:20px;display:flex;flex-direction:column;flex:1}.av-inner .blog-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text3);margin-bottom:10px}.av-inner .blog-card h3{font-family:'DM Sans',sans-serif;font-size:17px;line-height:1.35;font-weight:700;margin-bottom:9px}.av-inner .blog-card h3 a{color:inherit;text-decoration:none}.av-inner .blog-card h3 a:hover{color:var(--brand-blue)}.av-inner .blog-card p{font-size:13.5px;color:var(--text3);line-height:1.65;margin-bottom:14px}.av-inner .blog-card .blog-more{margin-top:auto;font-size:13px;font-weight:700;color:var(--brand-blue);text-decoration:none}.av-inner .blog-card .blog-more:hover{text-decoration:underline}.av-inner .blog-featured{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:30px;
}.av-inner .blog-featured .blog-media{aspect-ratio:auto;min-height:280px}.av-inner .blog-featured .blog-body{padding:34px}.av-inner .blog-featured h2{font-family:'DM Sans',sans-serif;font-size:26px;line-height:1.25;margin-bottom:12px}.av-inner .load-more-wrap{display:flex;justify-content:center;margin-top:34px}.av-inner .no-posts{
  display:none;text-align:center;padding:50px 20px;color:var(--text3);
  background:var(--white);border:1px dashed var(--border);border-radius:var(--r-lg);
}.av-inner .no-posts.show{display:block}/* ============================================================================
   8. CONTACT / LOCATIONS / FORMS
   ========================================================================= */
.av-inner .contact-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start}.av-inner .contact-tile{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:flex-start;
}.av-inner .contact-tile .ct-ico{
  width:42px;height:42px;flex-shrink:0;border-radius:var(--r);
  background:var(--blue-light);color:var(--brand-blue);display:grid;place-items:center;font-size:16px;
}.av-inner .contact-tile h3{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;margin-bottom:4px}.av-inner .contact-tile a{color:var(--brand-blue);text-decoration:none;font-weight:600;font-size:14px}.av-inner .contact-tile a:hover{text-decoration:underline}.av-inner .contact-tile p{font-size:13.5px;color:var(--text3);line-height:1.6;margin:0}.av-inner .loc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.av-inner .loc-tile{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;
}.av-inner .loc-tile.is-hq{border-color:var(--blue-mid);background:linear-gradient(180deg,var(--white),var(--blue-light))}.av-inner .loc-tile .lt-tag{
  align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);background:var(--bg);color:var(--text3);margin-bottom:12px;
}.av-inner .loc-tile.is-hq .lt-tag{background:var(--brand-blue);color:#fff}.av-inner .loc-tile h3{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:700;margin-bottom:6px}.av-inner .loc-tile address{font-style:normal;font-size:13.5px;color:var(--text3);line-height:1.65;margin-bottom:14px}.av-inner .loc-tile .lt-link{margin-top:auto;font-size:13px;font-weight:700;color:var(--brand-blue);text-decoration:none}.av-inner .loc-tile .lt-link:hover{text-decoration:underline}.av-inner .map-frame{
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);background:var(--band);min-height:320px;
}.av-inner .map-frame iframe{display:block;width:100%;height:100%;min-height:320px;border:0}.av-inner .form-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--shadow-md);
}.av-inner .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.av-inner .form-field{display:flex;flex-direction:column;gap:6px}.av-inner .form-field.full{grid-column:1/-1}.av-inner .form-field label{font-size:13px;font-weight:700;color:var(--text)}.av-inner .form-field .req{color:var(--brand-orange)}.av-inner .form-field input,.av-inner .form-field select,.av-inner .form-field textarea{
  width:100%;font-family:inherit;font-size:14px;color:var(--text);
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 14px;min-height:46px;transition:border-color .15s,box-shadow .15s;
}.av-inner .form-field textarea{min-height:120px;resize:vertical}.av-inner .form-field input:focus,.av-inner .form-field select:focus,.av-inner .form-field textarea:focus{
  outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(26,62,216,.12);
}.av-inner .form-hint{font-size:12px;color:var(--text3)}.av-inner .captcha-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--bg);border:1px dashed var(--border);border-radius:var(--r);padding:14px 16px;
}.av-inner .captcha-row .cap-q{font-size:14px;font-weight:700;white-space:nowrap}.av-inner .captcha-row input{max-width:110px;min-height:42px}.av-inner .form-note{font-size:12px;color:var(--text3);margin-top:12px;line-height:1.6}/* ============================================================================
   9. CAREERS
   ========================================================================= */
.av-inner .job-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;
}.av-inner .job-card[open]{border-color:var(--blue-mid);box-shadow:var(--shadow-md)}.av-inner .job-head{
  list-style:none;cursor:pointer;position:relative;
  padding:22px 58px 22px 24px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
}.av-inner .job-head::-webkit-details-marker{display:none}.av-inner .job-head::after{
  content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--brand-blue);transition:transform .2s;
}.av-inner .job-card[open] .job-head::after{transform:translateY(-50%) rotate(180deg)}.av-inner .job-head:hover{background:var(--bg)}.av-inner .job-head:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px}.av-inner .job-title{font-family:'DM Sans',sans-serif;font-size:19px;font-weight:700;color:var(--text);flex:1 1 auto;min-width:220px}.av-inner .job-body{padding:0 24px 26px;border-top:1px solid var(--border2);padding-top:20px}.av-inner .job-section{margin-bottom:20px}.av-inner .job-section h4,.av-inner .job-section h3{
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--brand-blue);margin-bottom:10px;
}.av-inner .job-apply{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  background:var(--bg);border-radius:var(--r);padding:16px 18px;margin-top:6px;
}.av-inner .job-apply p{font-size:13px;color:var(--text3);margin:0;flex:1 1 220px;line-height:1.6}/* ============================================================================
   10. CTA BANDS
   ========================================================================= */
.av-inner .cta-band{
  background:linear-gradient(135deg,var(--navy-bg),var(--brand-blue3) 70%);
  border-radius:var(--r-lg);padding:40px;color:#fff;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
}.av-inner .cta-band h2{font-family:'DM Sans',sans-serif;font-size:26px;line-height:1.25;color:#fff;margin-bottom:8px}.av-inner .cta-band p{font-size:14.5px;color:rgba(255,255,255,.8);margin:0;max-width:62ch;line-height:1.7}.av-inner .cta-band-actions{display:flex;gap:10px;flex-wrap:wrap}/* ============================================================================
   11. RESPONSIVE
   Breakpoints match index.html's (980 / 900 / 600 / 560) so the inner pages
   reflow at the same widths as the homepage.
   ========================================================================= */
@media(max-width:980px){.av-inner .grid-4{grid-template-columns:repeat(2,1fr)}.av-inner .loc-grid{grid-template-columns:repeat(2,1fr)}.av-inner .blog-grid{grid-template-columns:repeat(2,1fr)}.av-inner .contact-split{grid-template-columns:1fr}.av-inner .blog-featured{grid-template-columns:1fr}.av-inner .blog-featured .blog-media{min-height:200px}
}@media(max-width:900px){.av-inner .grid-3{grid-template-columns:repeat(2,1fr)}.av-inner .cta-band{grid-template-columns:1fr;padding:32px}
}@media(max-width:600px){.av-inner .page-hero{padding:38px 0 44px}.av-inner .grid-2,.av-inner .grid-3,.av-inner .grid-4,.av-inner .loc-grid,.av-inner .blog-grid,.av-inner .form-grid{grid-template-columns:1fr}.av-inner .info-card,.av-inner .role-group,.av-inner .loc-tile,.av-inner .contact-tile,.av-inner .form-card{padding:20px}.av-inner .num-card{padding-left:20px;padding-top:66px}.av-inner .num-card .nc-num{left:20px;top:20px}.av-inner .blog-featured .blog-body{padding:24px}.av-inner .blog-featured h2{font-size:21px}.av-inner .cta-band{padding:26px}.av-inner .cta-band h2{font-size:21px}.av-inner .cta-band-actions .btn{width:100%}.av-inner .acc-item summary,.av-inner .job-head{padding-left:18px;padding-right:46px;font-size:15px}.av-inner .acc-body,.av-inner .job-body{padding-left:18px;padding-right:18px}.av-inner .job-title{font-size:17px}
}/* ============================================================================
   12. LAYERED SUPPORT BANDS  (Train Your Workforce)
   ----------------------------------------------------------------------------
   Full-bleed colour bands stacked with no gap, so the four steps read as one
   continuous journey rather than four separate cards. Every colour is an
   existing brand variable — the bands simply walk from --brand-blue down to
   --navy-bg, which is the same range the homepage hero and footer already use.

   `.bleed` breaks out of .container with the 50vw margin trick. <body> already
   carries overflow-x:hidden from index.html, so this cannot introduce a
   sideways scrollbar.
   ========================================================================= */
.av-inner .bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}.av-inner .band{color:#fff;padding:56px 0}.av-inner .band-1{background:var(--brand-blue)}.av-inner .band-2{background:var(--brand-blue2)}.av-inner .band-3{background:var(--brand-blue3)}.av-inner .band-4{background:var(--navy-bg)}.av-inner .band-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}.av-inner .band-step{
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}.av-inner .band h3{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(23px,2.4vw,32px);line-height:1.18;letter-spacing:-.02em;
  font-weight:800;color:#fff;margin:10px 0 12px;
}.av-inner .band p{color:rgba(255,255,255,.82);margin:0 0 20px;max-width:56ch;font-size:15px;line-height:1.7}.av-inner .band-meta{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;list-style:none;padding:0;
}.av-inner .band-meta li{
  font-size:12.5px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);padding:7px 13px;
}.av-inner .band-actions{display:flex;gap:10px;flex-wrap:wrap}.av-inner .band .btn-white-solid{background:#fff;color:var(--brand-blue)}.av-inner .band .btn-white-solid:hover{background:var(--blue-light)}/* Photo slot, sized to the reference ratio so a real image drops straight in.
   Labelled rather than filled with stock imagery we do not have. */
.av-inner .band-media{
  aspect-ratio:16/10;border-radius:var(--r-lg);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;text-align:center;padding:20px;
}.av-inner .band-media span{
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6);line-height:1.7;
}.av-inner .band-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}/* Client logo wall — real files from assets/img/clients/. */
.av-inner .logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:30px}.av-inner .logo-cell{
  min-height:104px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);display:grid;place-items:center;padding:14px 18px;
}.av-inner .logo-cell:hover{border-color:var(--blue-mid);box-shadow:var(--shadow)}/* The logo files include generous internal padding, so the cap has to be
   large for the mark to read at a normal size. */
.av-inner .logo-cell img{max-height:64px;max-width:100%;width:auto;object-fit:contain}/* Case-study band metrics. */
.av-inner .case-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.av-inner .case-metric{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);padding:22px;
}.av-inner .case-metric b{display:block;font-family:'DM Sans',sans-serif;font-size:32px;line-height:1;font-weight:800}.av-inner .case-metric span{font-size:13.5px;color:rgba(255,255,255,.78)}@media(max-width:980px){.av-inner .logo-wall{grid-template-columns:repeat(4,1fr)}
}@media(max-width:900px){.av-inner .band-inner{grid-template-columns:1fr;gap:28px}.av-inner .band-media{order:-1}
}@media(max-width:600px){.av-inner .band{padding:42px 0}.av-inner .logo-wall{grid-template-columns:repeat(2,1fr)}.av-inner .case-metrics{grid-template-columns:1fr}.av-inner .band-actions .btn{width:100%}
}/* ============================================================================
   13. ABOUT PAGE SECTIONS
   ----------------------------------------------------------------------------
   Five layouts modelled on the supplied references (upgrad.com/about and
   verticalinstitute.com/about-us). The LAYOUTS are borrowed; every colour,
   font, radius and shadow is an existing Avanta variable.
   ========================================================================= */
/* ---- 13a. Split intro: copy left, image right (ref: upGrad hero) ---- */
.av-inner .about-intro{padding:64px 0 60px}.av-inner .about-intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}.av-inner .about-intro h1{
  font-family:'DM Sans',sans-serif;font-size:clamp(30px,3.8vw,48px);
  line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:14px 0 16px;
}/* The reference colours part of the headline. --brand-blue on white is 8.6:1. */
.av-inner .about-intro h1 em{font-style:normal;color:var(--brand-blue)}.av-inner .about-intro .lede{margin-bottom:26px}.av-inner .about-media{
  border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:11/10;background:var(--band);display:grid;place-items:center;
}.av-inner .about-media img{width:100%;height:100%;object-fit:cover;display:block}.av-inner .about-media span{
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text3);text-align:center;line-height:1.8;padding:20px;
}/* ---- 13b. "What gives us an edge?" — sticky left, stat tiles right ---- */
/* 13b + 13d moved to section 15 (redesigned with motion). */
/* ---- 13e. Company logo wall (ref: Vertical Institute) ---- */
.av-inner .company-wall{text-align:center}.av-inner .cw-cell{
  min-height:100px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);display:grid;place-items:center;padding:14px 18px;
}/* 90px, not 58px. The cell is min-height:100px with 14px of vertical padding,
   so a 90px logo takes the cell to 118px and the row grows with it — which is
   the intended effect, the logos were reading small. The scoped copy in the
   theme (.av-inner .cw-cell img) is generated from this line by
   build/scope-css.js; editing inner.css directly is overwritten by the build. */
.av-inner .cw-cell img{max-height:90px;max-width:100%;width:auto;object-fit:contain}/* ---- Moving logo rows -------------------------------------------------
   Three rows travelling continuously, the middle one against the other two.

   HOW THE LOOP IS SEAMLESS: each track holds its row's logos four times and
   travels -50%, which is two sets, landing on a frame identical to the one
   it started on. Two sets must be at least a screen wide or the seam shows
   as a gap crossing the row; the shortest row is five cells, so two sets is
   ~2060px — clear of a 1440px screen and of the 1180px container.

   Speeds differ per row (46s / 38s / 42s) because identical durations over
   different track widths make the rows look locked together, which reads as
   one moving block rather than three rows. */
.av-inner .cw-marquee{margin-top:32px;display:grid;gap:16px}.av-inner .cw-row{
  overflow:hidden;
  /* Fades the cut edges so cells enter and leave rather than appearing. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}.av-inner .cw-track{
  display:flex;gap:16px;width:max-content;
  animation:cw-scroll linear infinite;
}.av-inner .cw-track--1{animation-duration:46s}.av-inner .cw-track--2{animation-duration:38s;animation-direction:reverse}.av-inner .cw-track--3{animation-duration:42s}/* Stopping the row under the pointer lets someone actually read a logo they
   recognised, which is the only reason to look at this section twice. */
.av-inner .cw-row:hover .cw-track,.av-inner .cw-row:focus-within .cw-track{animation-play-state:paused}/* A flex item of fixed width: the grid cell sized itself from the column,
   and there is no column here. */
.av-inner .cw-marquee .cw-cell{flex:0 0 190px}@keyframes cw-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}@media(max-width:600px){.av-inner .cw-marquee .cw-cell{flex:0 0 150px;min-height:84px;padding:12px 14px}.av-inner .cw-marquee .cw-cell img{max-height:44px}
}/* Stopping the animation on its own would leave four copies of every logo
   sitting in a row. The repeats are hidden and the rows wrap, which is the
   static grid this replaced. */
/* Client logo rows scroll on every device, reduce-motion included (on request). *//* ---- 13f. Full-width CTA panel (ref: Vertical Institute) ---- */
.av-inner .cta-panel{
  background:var(--brand-blue);border-radius:24px;color:#fff;overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:center;
}.av-inner .cta-panel-body{padding:48px}.av-inner .cta-panel h2{
  font-family:'DM Sans',sans-serif;font-size:clamp(25px,2.8vw,40px);
  line-height:1.15;letter-spacing:-.025em;font-weight:800;color:#fff;margin-bottom:14px;
}.av-inner .cta-panel p{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.85);margin-bottom:26px;max-width:54ch}.av-inner .cta-panel-actions{display:flex;gap:12px;flex-wrap:wrap}/* .btn-primary is brand blue, which is invisible on this blue panel. The
   page hero solves the same problem the same way — orange on navy. */
.av-inner .cta-panel .btn-primary{background:var(--brand-orange);color:#fff}.av-inner .cta-panel .btn-primary:hover{background:#C44008}.av-inner .cta-panel-media{align-self:stretch;min-height:300px;background:var(--brand-blue2);display:grid;place-items:center}/* ---- Quote form in the CTA panel --------------------------------------
   Replaces the image slot on the Auditing page. The panel is a dark blue
   ground, so every field is re-coloured: a default white input on it reads as
   a hole punched in the panel. */
.av-inner .cta-panel-form{
  align-self:stretch;background:var(--brand-blue2);
  padding:48px 44px;display:flex;flex-direction:column;justify-content:center;
}.av-inner .cta-panel-form-hint{
  font-size:15px;line-height:1.7;color:rgba(255,255,255,.78);margin:0;max-width:34ch;
}.av-inner .quote-form{display:grid;gap:14px}.av-inner .quote-row{display:grid;gap:14px}@media (min-width:560px){.av-inner .quote-row{grid-template-columns:1fr 1fr}}.av-inner .quote-form label{display:grid;gap:6px}.av-inner .quote-form label > span{
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}.av-inner .quote-form input,.av-inner .quote-form select,.av-inner .quote-form textarea{
  width:100%;font:inherit;font-size:14.5px;
  padding:11px 13px;border-radius:var(--r);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}.av-inner .quote-form textarea{resize:vertical;min-height:84px}/* .45 measured 3.19:1 on the panel blue. .58 clears 4.5:1, so the hint is
   readable rather than a suggestion of text. */
.av-inner .quote-form ::placeholder{color:rgba(255,255,255,.58)}/* A select drops its options on the page background, not the panel, so they
   need a light ground of their own or they are white on white. */
.av-inner .quote-form select option{background:var(--white);color:var(--text)}.av-inner .quote-form input:focus,.av-inner .quote-form select:focus,.av-inner .quote-form textarea:focus{
  outline:2px solid var(--brand-green);outline-offset:1px;
  background:rgba(255,255,255,.14);
}.av-inner .quote-submit{justify-self:start;margin-top:4px}.av-inner .quote-note{font-size:12.5px;color:rgba(255,255,255,.6);margin:0}/* ---- Light variant of the same form (Outsourcing manpower panel) ------
   The Auditing form sits ON the blue and is tinted for it. This one takes
   the right-hand half as a white ground instead, so every colour the dark
   rules set has to be restated — inherited white-on-white is invisible
   rather than merely wrong. The panel's own border-radius and overflow
   round the two right corners, so no radius is set here. */
/* An inset card rather than a white half-panel: on a white page a white
   right-hand half made the panel look like it stopped at the middle, losing
   its own rounded corners. The wrapper's padding is the blue gutter that
   frames the card. */
.av-inner .cta-panel-form--light{background:transparent;padding:28px 28px 28px 0}.av-inner .quote-form--light{
  background:var(--white);border-radius:18px;padding:32px 30px;
  align-content:start;gap:12px;
}.av-inner .qf-title{
  font-family:'DM Sans',sans-serif;
  margin:0;font-size:24px;line-height:1.2;font-weight:800;
  letter-spacing:-.02em;color:var(--navy);
}/* Scoped to the form, not written as a bare .qf-sub: this is a <p> inside
   .cta-panel, and that rule paints panel paragraphs white with a 26px bottom
   margin. On the white card that is invisible text above a blank gap. */
.av-inner .quote-form--light .qf-sub{
  margin:0 0 4px;font-size:14px;line-height:1.6;color:var(--text2);max-width:none;
}/* Sentence case rather than the uppercase micro-label used on the dark
   form: on a white card these read as the field's name, not as a caption. */
.av-inner .quote-form--light label > span{
  font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--navy);
}.av-inner .quote-form--light input,.av-inner .quote-form--light select,.av-inner .quote-form--light textarea{
  background:var(--white);border:1px solid rgba(11,21,39,.18);
  color:var(--text);
}.av-inner .quote-form--light ::placeholder{color:var(--text3)}.av-inner .quote-form--light input:focus,.av-inner .quote-form--light select:focus,.av-inner .quote-form--light textarea:focus{
  outline:2px solid var(--brand-blue);outline-offset:1px;
  background:var(--white);border-color:var(--brand-blue);
}/* The Auditing card carries paired fields and a reply note. .quote-row goes
   two-up above 560px of VIEWPORT, but the card is ~420px wide whatever the
   viewport does, so on a desktop that split name and company into 170px
   boxes. One field per row here. */
.av-inner .quote-form--light .quote-row{grid-template-columns:1fr}/* Another panel-white inheritance: .quote-note is tinted for the dark form. */
.av-inner .quote-form--light .quote-note{color:var(--text3);text-align:center}/* Full width, unlike the dark form's start-aligned button: it is the only
   action on this card and the mock shows it spanning. */
.av-inner .qf-submit{width:100%;margin-top:6px;padding:14px 20px;font-size:14.5px}/* The chevron turns when the panel is open, the only cue that the button is a
   toggle and not a link. */
.av-inner [data-quote-toggle] i{transition:transform .25s ease;margin-left:8px}.av-inner [data-quote-toggle][aria-expanded="true"] i{transform:rotate(180deg)}.av-inner .cta-panel-media img{width:100%;height:100%;object-fit:cover}.av-inner .cta-panel-media span{
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6);text-align:center;line-height:1.8;padding:20px;
}@media(max-width:980px){.av-inner .edge-tiles{grid-template-columns:repeat(2,1fr)}
}@media(max-width:900px){.av-inner .about-intro-grid,.av-inner .edge-grid,.av-inner .cta-panel{grid-template-columns:1fr;gap:32px}.av-inner .edge-aside{position:static}.av-inner .drives-grid{grid-template-columns:1fr}.av-inner .about-media{order:-1}.av-inner .cta-panel-media{min-height:200px;order:-1}.av-inner .cta-panel-body{padding:32px}

}@media(max-width:600px){.av-inner .about-intro{padding:40px 0 38px}.av-inner .edge-tiles{grid-template-columns:1fr;gap:22px}.av-inner .cta-panel{border-radius:var(--r-lg)}.av-inner .cta-panel-body{padding:26px}.av-inner .cta-panel-actions .btn{width:100%}
}/* ============================================================================
   14. SERVICE AREA CARDS  (About — "Our service areas")
   ----------------------------------------------------------------------------
   Replaces .num-card, which positioned its number badge absolutely at
   left:26px with a 34px width — landing its right edge on exactly the 60px
   text inset, so the number and the heading touched with no gap at all.

   The rebuild fixes that and adds the hierarchy the section was missing: an
   icon carries the meaning, an oversized ghost numeral carries the sequence,
   and the accent rail ties the card to the .drive-card language used higher up
   the same page. Colours are the four existing accents, one per service.
   ========================================================================= */
.av-inner .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}.av-inner .svc-card{
  --svc:var(--brand-blue);
  --svc-ink:var(--brand-blue);   /* 7.71:1 on white */
  --svc-wash:var(--blue-light);
  position:relative;
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:30px 30px 26px;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}.av-inner .svc-card:nth-child(2){--svc:var(--green-ui);--svc-ink:var(--green-dark);--svc-wash:var(--green-bg)}/* 5.35:1 */
.av-inner .svc-card:nth-child(3){--svc:var(--gold);--svc-ink:#8A6100;--svc-wash:var(--gold-bg)}/* 5.54:1 */
.av-inner .svc-card:nth-child(4){--svc:var(--brand-orange);--svc-ink:#B33E06;--svc-wash:#FEEDE4}/* 5.82:1 */
/* Accent rail, and a wash that only appears on hover so the resting grid stays
   calm — four permanently tinted cards would fight one another. */
.av-inner .svc-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--svc);
}.av-inner .svc-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,var(--svc-wash),transparent 58%);
  transition:opacity .25s ease;
}.av-inner .svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--svc)}.av-inner .svc-card:hover::after{opacity:.6}.av-inner .svc-card > *{position:relative;z-index:1}.av-inner .svc-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}.av-inner .svc-ico{
  width:52px;height:52px;flex-shrink:0;
  border-radius:14px;display:grid;place-items:center;
  background:var(--svc-wash);color:var(--svc);font-size:21px;
}/* The numeral reads as sequence, not as data — so it sits behind the content
   as a watermark rather than competing with the heading, which is what the
   old blue badge did. */
.av-inner .svc-num{
  margin-left:auto;
  font-family:'DM Sans',sans-serif;font-size:44px;font-weight:800;
  line-height:1;letter-spacing:-.04em;color:var(--svc);opacity:.16;
}.av-inner .svc-card h3{
  font-family:'DM Sans',sans-serif;font-size:19px;font-weight:700;
  line-height:1.3;margin-bottom:10px;color:var(--text);
}.av-inner .svc-card p{font-size:14.5px;line-height:1.7;color:var(--text2);margin-bottom:18px}.av-inner .svc-link{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--svc-ink);text-decoration:none;
  padding-top:14px;border-top:1px solid var(--border2);width:100%;
}.av-inner .svc-link i{transition:transform .2s ease}.av-inner .svc-card:hover .svc-link i{transform:translateX(4px)}.av-inner .svc-link:focus-visible{outline:2px solid var(--svc-ink);outline-offset:3px;border-radius:4px}@media(max-width:900px){.av-inner .svc-grid{grid-template-columns:1fr}
}@media(max-width:600px){.av-inner .svc-card{padding:24px 22px 22px}.av-inner .svc-ico{width:46px;height:46px;font-size:19px}.av-inner .svc-num{font-size:36px}.av-inner .svc-card h3{font-size:17.5px}
}/* ============================================================================
   15. MOTION + REDESIGNED ABOUT SECTIONS
   ----------------------------------------------------------------------------
   Everything here starts VISIBLE and is only hidden once JS confirms it can
   animate (html.js-reveal). With JS off, or with prefers-reduced-motion set,
   the page renders fully — no content is ever trapped at opacity:0 waiting on
   an observer that may not fire.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){.av-inner.js-reveal [data-reveal]{
    opacity:0;transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--d,0ms)}.av-inner.js-reveal [data-reveal].is-in{opacity:1;transform:none}
}/* ---- 15a. "What gives us an edge?" ----
   Was six bare numbers on hairline rails, floating beside a short column with
   a lot of dead space under it. Now each figure is a card with an icon, and
   the left column carries a supporting panel so the two halves balance. */
.av-inner .edge-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:52px;align-items:start}.av-inner .edge-aside{position:sticky;top:96px}.av-inner .edge-aside h2{
  font-family:'DM Sans',sans-serif;font-size:clamp(26px,2.8vw,38px);
  line-height:1.15;letter-spacing:-.025em;font-weight:800;margin:10px 0 16px;
}.av-inner .edge-aside h2 em{font-style:normal;color:var(--brand-blue)}/* Fills the space the old layout left empty under the button. */
.av-inner .edge-note{
  margin-top:26px;padding:18px 20px;border-radius:var(--r-lg);
  background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow);
  display:flex;gap:13px;align-items:flex-start;
}.av-inner .edge-note i{color:var(--brand-blue);font-size:16px;margin-top:2px;flex-shrink:0}.av-inner .edge-note p{margin:0;font-size:13.5px;line-height:1.65;color:var(--text2)}.av-inner .edge-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.av-inner .edge-tile{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}.av-inner .edge-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--blue-mid)}.av-inner .edge-tile i{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--blue-light);color:var(--brand-blue);font-size:15px;margin-bottom:14px;
}.av-inner .edge-tile b{
  display:block;font-family:'DM Sans',sans-serif;
  font-size:clamp(26px,2.6vw,34px);line-height:1;font-weight:800;
  color:var(--brand-blue);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}.av-inner .edge-tile span{display:block;margin-top:8px;font-size:13px;color:var(--text2);font-weight:600;line-height:1.45}/* ---- 20. MILESTONES — horizontal year rail + card row ------------------
   Ref: sunway.com.my/milestones. Replaces the vertical alternating
   .timeline, whose rules are gone with it.

   The rail is a row of tabs over a full-width hairline, the active one
   underlined in the brand blue (the reference uses its own red; blue is what
   this site uses for an active state everywhere else). The cards scroll
   horizontally beneath, three at a time, with snap points so a card never
   comes to rest half out of view. */
/* A genuine visually-hidden helper. The class was referenced on this site
   with no rule behind it, which shows the text rather than hiding it. */
.av-inner .cs-sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}.av-inner .ms-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}.av-inner .ms-head .section-sub{margin-bottom:0}.av-inner .ms-jump{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text3);
}.av-inner .ms-jump i{font-size:15px}.av-inner .ms-jump select{
  font:inherit;font-size:14.5px;font-weight:600;color:var(--text);
  border:0;background:none;padding:2px 4px;cursor:pointer;min-width:150px;
}.av-inner .ms-jump select:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}.av-inner .milestones{margin-top:34px}/* ---- Year rail ---- */
.av-inner .ms-rail{
  display:flex;gap:clamp(18px,4vw,64px);align-items:stretch;
  border-bottom:1px solid var(--border);
  /* Narrow screens scroll the rail rather than cramming the labels. */
  overflow-x:auto;scrollbar-width:none;
}.av-inner .ms-rail::-webkit-scrollbar{display:none}.av-inner .ms-tab{
  font-family:'DM Sans',sans-serif;font-size:17px;font-weight:700;
  color:var(--text4);background:none;border:0;cursor:pointer;
  padding:0 2px 14px;white-space:nowrap;position:relative;
  transition:color .2s ease;
}.av-inner .ms-tab:hover{color:var(--text2)}/* The underline sits ON the rail's hairline rather than above it. */
.av-inner .ms-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--brand-blue);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}.av-inner .ms-tab.is-active{color:var(--navy)}.av-inner .ms-tab.is-active::after{transform:scaleX(1)}.av-inner .ms-tab:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px}/* Undated milestones: the tab carries the name, coloured as provisional in
   the same amber the old timeline used for "Year to confirm". */
.av-inner .ms-tab.is-todo{color:#8A6100}.av-inner .ms-tab.is-todo.is-active{color:#6B4B00}.av-inner .ms-tab.is-todo.is-active::after{background:var(--gold)}/* ---- Card row ---- */
.av-inner .ms-viewport{position:relative;margin-top:30px}.av-inner .ms-track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;
}.av-inner .ms-track::-webkit-scrollbar{display:none}.av-inner .ms-card{
  flex:0 0 calc((100% - 48px) / 3);scroll-snap-align:start;min-width:0;
  /* The reference greys every card but the one the rail points at. */
  opacity:.45;transition:opacity .3s ease;
}.av-inner .ms-card.is-active,.av-inner .ms-card:hover{opacity:1}.av-inner .ms-shot{
  aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:var(--band);border:1px solid var(--border);
  display:grid;place-items:center;text-align:center;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text4);line-height:1.8;padding:16px;
}.av-inner .ms-year{
  margin:16px 0 0;font-size:13px;font-weight:700;
  letter-spacing:.06em;color:var(--text3);
}.av-inner .ms-card h3{
  font-family:'DM Sans',sans-serif;
  margin:6px 0 0;font-size:18px;line-height:1.3;font-weight:700;color:var(--navy);
}.av-inner .ms-card ul{margin:12px 0 0;padding-left:18px}.av-inner .ms-card li{font-size:13.5px;line-height:1.6;color:var(--text2);margin-bottom:6px}.av-inner .ms-card.is-todo .ms-year{color:#8A6100}/* ---- Arrows ---- */
.av-inner .ms-arrow{
  /* Centred on the IMAGE, not on the row: the cards carry text under the
     image, so centring on the row would drop the arrows onto the copy. The
     image is 16:9 of the card, and the card is a third of the container, so
     its centre is about 9.4%% of the container width. A percentage in top
     resolves against HEIGHT, which is why this is a vw clamp and not a calc
     off the card width. */
  position:absolute;top:clamp(78px,8.8vw,106px);transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:15px;z-index:3;
  background:var(--white);color:var(--navy);box-shadow:var(--shadow-md);
  transition:background .2s ease,color .2s ease,opacity .2s ease;
}.av-inner .ms-arrow--prev{left:-14px}.av-inner .ms-arrow--next{right:-14px;background:var(--brand-blue);color:#fff}.av-inner .ms-arrow:hover{background:var(--brand-blue);color:#fff}.av-inner .ms-arrow:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px}/* Disabled rather than hidden, so the row does not shift as you page. */
.av-inner .ms-arrow[disabled]{opacity:.3;cursor:default;background:var(--white);color:var(--text3)}@media(max-width:980px){.av-inner .ms-card{flex:0 0 calc((100% - 24px) / 2)}.av-inner .ms-arrow{top:clamp(100px,13vw,130px)}
}@media(max-width:700px){.av-inner .ms-card{flex:0 0 100%;opacity:1}.av-inner .ms-arrow{top:clamp(90px,27vw,160px)}.av-inner .ms-arrow--prev{left:-6px}.av-inner .ms-arrow--next{right:-6px}.av-inner .ms-head{align-items:flex-start}
}@media(max-width:980px){.av-inner .edge-tiles{grid-template-columns:repeat(2,1fr)}
}@media(max-width:900px){.av-inner .edge-grid{grid-template-columns:1fr;gap:30px}.av-inner .edge-aside{position:static}

}@media(max-width:600px){.av-inner .edge-tiles{grid-template-columns:1fr}
}/* ============================================================================
   16. "What drives us?" — vision / mission / values
   ----------------------------------------------------------------------------
   Restored: these rules sat between the old 13b and 13e blocks and were
   removed with them when those two sections were replaced.
   ========================================================================= */
.av-inner .drives-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}.av-inner .drive-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:30px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}.av-inner .drive-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand-blue);
}.av-inner .drive-card:nth-child(2)::before{background:var(--brand-green)}.av-inner .drive-card:nth-child(3)::before{background:var(--brand-orange)}.av-inner .drive-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-mid)}.av-inner .drive-card .dc-ico{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  font-size:20px;margin-bottom:18px;background:var(--blue-light);color:var(--brand-blue);
}.av-inner .drive-card:nth-child(2) .dc-ico{background:var(--green-bg);color:var(--green-dark)}.av-inner .drive-card:nth-child(3) .dc-ico{background:#FEEDE4;color:var(--brand-orange)}.av-inner .drive-card h3{font-family:'DM Sans',sans-serif;font-size:19px;font-weight:700;margin-bottom:10px}.av-inner .drive-card p{font-size:14.5px;color:var(--text2);line-height:1.7;margin:0}@media(max-width:900px){.av-inner .drives-grid{grid-template-columns:1fr}}@media(max-width:600px){.av-inner .drive-card{padding:24px 22px}}/* ============================================================================
   17. CAREERS  (layout ref: verticalinstitute.com/careers)
   ----------------------------------------------------------------------------
   Reference anatomy reproduced: split hero, a culture block, a stats strip, an
   "Open Positions" list of wide rows (title + summary left, employment type
   and arrow right), and a speculative-application CTA.

   The reference's rows link away to a detail page. Avanta's roles carry
   regulatory and qualification detail that must stay on the page, so each row
   is a <summary> and the full description opens beneath it — same row design,
   nothing lost.
   ========================================================================= */
/* ---- 17a. Split hero ---- */
.av-inner .car-hero{padding:60px 0 56px}.av-inner .car-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}.av-inner .car-hero h1{
  font-family:'DM Sans',sans-serif;font-size:clamp(30px,3.8vw,48px);
  line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:14px 0 16px;
}.av-inner .car-hero h1 em{font-style:normal;color:var(--brand-blue)}.av-inner .car-eo{
  margin-top:22px;padding:16px 18px;border-radius:var(--r);
  background:var(--blue-light);border:1px solid var(--blue-mid);
  font-size:13.5px;line-height:1.65;color:var(--text2);
}/* ---- 17b. Culture block ---- */
.av-inner .car-culture{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}.av-inner .car-points{display:grid;gap:14px;margin-top:22px}.av-inner .car-point{display:flex;gap:14px;align-items:flex-start}.av-inner .car-point i{
  width:40px;height:40px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  background:var(--green-bg);color:var(--green-dark);font-size:15px;
}.av-inner .car-point h3{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;margin-bottom:4px}.av-inner .car-point p{font-size:14px;color:var(--text2);line-height:1.6;margin:0}/* ---- 17c. Stats strip ---- */
.av-inner .car-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}.av-inner .car-stat{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:26px 22px;box-shadow:var(--shadow);text-align:center;
}.av-inner .car-stat b{
  display:block;font-family:'DM Sans',sans-serif;font-size:clamp(26px,2.6vw,34px);
  line-height:1;font-weight:800;color:var(--brand-blue);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}.av-inner .car-stat span{display:block;margin-top:9px;font-size:13px;color:var(--text2);line-height:1.5}/* ---- 17d. Open positions ---- */
.av-inner .job-list{display:flex;flex-direction:column;gap:12px;margin-top:30px}.av-inner .job-row{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}.av-inner .job-row[open]{border-color:var(--brand-blue);box-shadow:var(--shadow-md)}.av-inner .job-row:hover{border-color:var(--blue-mid)}.av-inner .job-row > summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  padding:24px 32px;
}.av-inner .job-row > summary::-webkit-details-marker{display:none}.av-inner .job-row > summary:hover{background:var(--bg)}.av-inner .job-row > summary:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px}.av-inner .job-row h3{
  font-family:'DM Sans',sans-serif;font-size:19px;font-weight:700;
  margin:0 0 6px;line-height:1.3;color:var(--text);
}.av-inner .job-row .jr-desc{
  font-size:14px;color:var(--text3);line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}.av-inner .jr-meta{display:flex;align-items:center;gap:16px;white-space:nowrap}.av-inner .jr-type{font-size:13px;font-weight:700;color:var(--text2)}.av-inner .jr-arrow{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--blue-light);color:var(--brand-blue);
  display:grid;place-items:center;font-size:13px;
  transition:transform .25s ease,background .2s ease;
}.av-inner .job-row[open] .jr-arrow{transform:rotate(90deg);background:var(--brand-blue);color:#fff}.av-inner .jr-body{padding:4px 32px 28px;border-top:1px solid var(--border2);margin-top:-4px;padding-top:22px}/* ---- 17e. Speculative application CTA ---- */
.av-inner .car-cta{
  background:var(--navy-bg);border-radius:24px;color:#fff;overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
}.av-inner .car-cta-body{padding:48px}.av-inner .car-cta .section-eyebrow{background:rgba(255,255,255,.12);color:#fff}.av-inner .car-cta h2{
  font-family:'DM Sans',sans-serif;font-size:clamp(25px,2.8vw,38px);
  line-height:1.15;letter-spacing:-.025em;font-weight:800;color:#fff;margin:12px 0 14px;
}.av-inner .car-cta p{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.85);margin-bottom:26px;max-width:54ch}.av-inner .car-cta .btn-primary{background:var(--brand-orange)}.av-inner .car-cta .btn-primary:hover{background:#C44008}.av-inner .car-cta-media{align-self:stretch;min-height:300px;background:var(--brand-blue3);display:grid;place-items:center}.av-inner .car-cta-media span{
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6);text-align:center;line-height:1.8;padding:20px;
}@media(max-width:980px){.av-inner .car-stats{grid-template-columns:repeat(2,1fr)}
}@media(max-width:900px){.av-inner .car-hero-grid,.av-inner .car-culture,.av-inner .car-cta{grid-template-columns:1fr;gap:32px}.av-inner .car-hero .about-media,.av-inner .car-cta-media{order:-1}.av-inner .car-cta-media{min-height:200px}.av-inner .car-cta-body{padding:32px}
}@media(max-width:600px){.av-inner .car-hero{padding:38px 0 36px}.av-inner .car-stats{grid-template-columns:1fr}.av-inner .job-row > summary{grid-template-columns:1fr;gap:14px;padding:20px 20px}.av-inner .jr-meta{justify-content:space-between}.av-inner .jr-body{padding-left:20px;padding-right:20px}.av-inner .car-cta{border-radius:var(--r-lg)}.av-inner .car-cta-body{padding:26px}.av-inner .car-cta .btn{width:100%}
}/* ============================================================================
   18. CONTACT — "book a call" split layout
       (ref: verticalinstitute.com/contact-us)
   ----------------------------------------------------------------------------
   Form left with an Individual / Corporate segmented toggle above it; support
   column right carrying the team row, a short checklist of what a call covers,
   and the direct contact routes as full-width outlined buttons.

   Avanta's form keeps every field the live site has (Name, Mobile, Email,
   Purpose, Service Type, Message, spam check) — the reference has fewer, and
   the brief is explicit that none may be dropped to simplify the layout.
   ========================================================================= */
/* ---- Get In Touch -------------------------------------------------------
   Replaces the two-column form-plus-sidebar the competitor pages both use.
   Removed with it: .bookcall-grid, the .seg segmented toggle, .callside,
   .team-row, .call-list, .callside-div and .reach — every one of them part
   of that pattern.

   The arrangement here is the inverse: channels across the top as three
   equal tiles, form centred beneath. Someone who wants to phone does not
   read past a form to find the number, and someone filling the form is not
   reading a pitch beside it. */
.av-inner .bookcall{padding:52px 0 64px}.av-inner .gt-head{max-width:66ch}/* The three channels now sit in the left column beside the form, not in a
   row above it, so they stack. The three-across rule they had is gone with
   the row - it would have squeezed three cards into a 300px column. */
.av-inner .gt-channels{
  display:flex;flex-direction:column;gap:12px;
}.av-inner .gt-aside .gt-ch{padding:16px 16px 18px}.av-inner .gt-aside .gt-ch-ico{width:36px;height:36px;font-size:15px;margin-bottom:10px}.av-inner .gt-aside .gt-ch-note{font-size:12px}/* The office block used to follow a list; it now follows the channels. */
.av-inner .gt-aside .gt-aside__office{margin-top:18px}.av-inner .gt-ch{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:22px 24px;text-decoration:none;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}.av-inner .gt-ch:hover{border-color:var(--brand-blue);transform:translateY(-2px);box-shadow:var(--shadow)}.av-inner .gt-ch:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}.av-inner .gt-ch-ico{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-light);color:var(--brand-blue);font-size:17px;margin-bottom:12px;
}.av-inner .gt-ch-label{
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);
}.av-inner .gt-ch-value{
  font-family:'DM Sans',sans-serif;
  font-size:17px;font-weight:700;color:var(--navy);line-height:1.3;
  /* The addresses are long and must not force the tile wider than its
     column, which would break the three-up row. */
  overflow-wrap:anywhere;
}.av-inner .gt-ch-note{margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--text3)}/* WhatsApp keeps its own colour — it is a different service, not a styling
   flourish, and the green is how people recognise it. */
.av-inner .gt-ch--wa .gt-ch-ico{background:var(--green-bg);color:var(--green-dark)}.av-inner .gt-ch--wa:hover{border-color:var(--green-ui,#8ED9C0)}/* ---- Locations, V2 cards ------------------------------------------------
   Four equal cards, the head office inverted so it reads first. Left-aligned
   inside a centred section: an address is a block of text, not a caption. */
.av-inner .loc-cards{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  margin-top:34px;text-align:left;
}.av-inner .lc{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 20px;
}.av-inner .lc-ico{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--brand-blue-light,#E9ECFF);color:var(--brand-blue);font-size:16px;
}.av-inner .lc-title{
  margin:2px 0 0;font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.35;
  font-weight:700;color:var(--text);
}.av-inner .lc-addr{margin:0;font-style:normal;font-size:12.5px;line-height:1.7;color:var(--text3)}.av-inner .lc-chip{
  display:inline-block;padding:5px 12px;border-radius:100px;
  background:var(--green-bg,#E6F8F3);color:var(--green-dark,#087A55);
  font-size:11.5px;font-weight:700;
}.av-inner .lc-link{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;
  color:var(--brand-blue);font-size:13px;font-weight:700;text-decoration:none;
}.av-inner .lc-arrow{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--brand-blue-light,#E9ECFF);font-size:10px;
}.av-inner .lc-link:hover .lc-arrow{background:var(--brand-blue);color:#fff}/* The head office, inverted. */
.av-inner .lc--hq{background:var(--navy-bg,#0A1024);border-color:transparent}.av-inner .lc--hq .lc-ico{background:rgba(255,255,255,.12);color:#fff}.av-inner .lc--hq .lc-title{color:#fff}.av-inner .lc--hq .lc-addr{color:rgba(255,255,255,.66)}.av-inner .lc--hq .lc-link{color:#fff}.av-inner .lc--hq .lc-arrow{background:rgba(255,255,255,.16);color:#fff}.av-inner .lc--hq .lc-link:hover .lc-arrow{background:#fff;color:var(--navy-bg,#0A1024)}.av-inner .lc-chip--hq{background:rgba(255,255,255,.12);color:#fff}.av-inner .lc-chip--hq i{font-size:9px;margin-right:2px}@media (max-width:1040px){.av-inner .loc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:620px){.av-inner .loc-cards{grid-template-columns:1fr}}/* The enquiry form used to be an 860px card centred in a 1200px container,
   with dead space down both sides. It is now the right-hand column of a
   two-column block that uses the full width; the left column carries the
   details someone reaches for while filling it in. */
.av-inner .gt-formwrap{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:26px;align-items:start;margin-top:30px;
}.av-inner .gt-aside{
  position:sticky;top:96px;
  background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:22px 20px;
}.av-inner .gt-aside__title{
  margin:0 0 14px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;color:var(--text);
}.av-inner .gt-aside__list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:14px}.av-inner .gt-aside__list li{display:flex;flex-direction:column;gap:3px}.av-inner .gt-aside__list b{font-size:13px;color:var(--text);font-weight:700;line-height:1.4}.av-inner .gt-aside__list span{font-size:12.5px;color:var(--text2);line-height:1.6}.av-inner .gt-aside__list a{color:var(--brand-blue);font-weight:600}.av-inner .gt-aside__office{padding-top:16px;border-top:1px solid var(--border)}.av-inner .gt-aside__label{
  display:block;margin-bottom:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text3);
}.av-inner .gt-aside__office address{font-style:normal;font-size:12.5px;line-height:1.65;color:var(--text2)}.av-inner .gt-aside__map{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--brand-blue)}.av-inner .gt-form{max-width:none;margin:0}@media (max-width:900px){.av-inner .gt-formwrap{grid-template-columns:1fr}/* Sticky is meaningless once it is stacked above the form. */
.av-inner .gt-aside{position:static}
}.av-inner .gt-form-title{
  font-family:'DM Sans',sans-serif;
  margin:0;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--navy);
}.av-inner .gt-form-sub{margin:6px 0 22px;font-size:13px;color:var(--text3)}.av-inner .bookcall .form-field input,.av-inner .bookcall .form-field select,.av-inner .bookcall .form-field textarea{min-height:48px}.av-inner .bookcall .form-field textarea{min-height:150px}.av-inner .bookcall .form-grid{gap:14px}.av-inner .bookcall .btn-block{
  width:100%;margin-top:18px;padding:14px 20px;font-size:14.5px;
}/* .gt-channels was a three-column grid and needed collapsing here. It is a
   flex column now, so there is nothing left to collapse - the rule was
   setting grid-template-columns on an element that is no longer a grid. */
@media(max-width:600px){.av-inner .bookcall{padding:34px 0 44px}.av-inner .gt-ch{padding:18px 18px}
}/* ============================================================================
   19. LOCATION PHOTO CARDS  (matches avanta.com.sg/contact-us)
   ----------------------------------------------------------------------------
   The live site shows each centre as a building photo with a dark overlay,
   a circular pin badge, the place name in spaced caps, the centre type as the
   heading, a short rule, then the address — all centred in white.

   Overlay note: the photos are light, so the type needs a scrim to stay
   legible. A gradient (darker at the foot, where the address sits) holds
   contrast without flattening the building out of the picture.
   ========================================================================= */
.av-inner .locphoto-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px;
}/* Four across a 1180px container is ~269px a card, against ~365px when it
   was three. The pin, headline and side padding come down to match — at the
   old sizes the addresses ran to five lines and the pin ate a third of the
   card. */
.av-inner .locphoto{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:318px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:30px 18px;color:#fff;isolation:isolate;
  box-shadow:var(--shadow-md);
  transition:transform .3s ease,box-shadow .3s ease;
}.av-inner .locphoto:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.av-inner .locphoto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .5s ease;
}.av-inner .locphoto:hover img{transform:scale(1.05)}.av-inner .locphoto::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,21,39,.42) 0%,rgba(11,21,39,.60) 45%,rgba(11,21,39,.80) 100%);
}.av-inner .locphoto .lp-pin{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);
  font-size:20px;margin-bottom:14px;backdrop-filter:blur(2px);
}.av-inner .locphoto .lp-place{
  font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.9);margin-bottom:6px;
}.av-inner .locphoto h3{
  font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;
  line-height:1.3;color:#fff;margin:0;
}.av-inner .locphoto .lp-rule{width:40px;height:2px;background:rgba(255,255,255,.55);margin:14px 0}.av-inner .locphoto address{
  font-style:normal;font-size:13px;line-height:1.6;
  color:rgba(255,255,255,.92);max-width:26ch;margin:0;
}.av-inner .locphoto .lp-link{
  margin-top:16px;font-size:13px;font-weight:700;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;
}.av-inner .locphoto .lp-link:hover{border-color:#fff}.av-inner .locphoto .lp-link:focus-visible{outline:2px solid #fff;outline-offset:3px}@media(max-width:1080px){.av-inner .locphoto-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}@media(max-width:600px){.av-inner .locphoto-grid{grid-template-columns:1fr;gap:16px}.av-inner .locphoto{min-height:290px;padding:28px 20px}
}/* ============================================================================
   20. AUDITING PAGE
   ----------------------------------------------------------------------------
   The visual language here is deliberately about CREDENTIALS rather than
   marketing: who authorises the audit, which standard it is measured against,
   and which industry it applies to. Those three facts are what a compliance
   buyer is actually scanning for, so they are what the components surface.
   ========================================================================= */
/* ---- 20a. Accrediting-authority strip ----
   The three bodies named on the page, each with what it authorises. Sits
   directly under the intro so the credential is established before the
   services are described. */
.av-inner .cred-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}.av-inner .cred{
  position:relative;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px 24px 22px;box-shadow:var(--shadow);
  overflow:hidden;
}/* Corner notch — a seal/stamp cue, not a generic card corner. */
.av-inner .cred::before{
  content:"";position:absolute;top:0;right:0;width:54px;height:54px;
  background:linear-gradient(225deg,var(--blue-light) 0 50%,transparent 50%);
}.av-inner .cred-body{display:flex;gap:14px;align-items:flex-start;position:relative}.av-inner .cred-ico{
  width:46px;height:46px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-blue);color:#fff;font-size:18px;
}.av-inner .cred:nth-child(2) .cred-ico{background:var(--green-ui)}.av-inner .cred:nth-child(3) .cred-ico{background:var(--navy2)}.av-inner .cred h3{font-family:'DM Sans',sans-serif;font-size:15.5px;font-weight:700;margin:0 0 5px;line-height:1.35}.av-inner .cred p{font-size:13px;color:var(--text3);line-height:1.6;margin:0}.av-inner .cred-tag{
  display:inline-block;margin-top:12px;font-size:11px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-blue);background:var(--blue-light);
  border-radius:var(--r-pill);padding:5px 11px;
}.av-inner .cred:nth-child(2) .cred-tag{color:var(--green-dark);background:var(--green-bg)}.av-inner .cred:nth-child(3) .cred-tag{color:var(--text2);background:var(--band)}/* ---- 20b. Audit route cards ----
   Replaces .num-card, whose absolutely-positioned badge sat flush against the
   heading with no gap. The numeral moves to a top rule where it cannot
   collide with anything. */
.av-inner .route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}.av-inner .route{
  --rt:var(--brand-blue);
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:0 26px 26px;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}.av-inner .route:nth-child(2){--rt:var(--green-ui)}.av-inner .route:nth-child(3){--rt:var(--navy2)}.av-inner .route::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--rt)}.av-inner .route:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--rt)}.av-inner .route-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 0 18px;margin-bottom:16px;border-bottom:1px solid var(--border2);
}.av-inner .route-no{
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rt);
}.av-inner .route-ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-light);color:var(--brand-blue);font-size:18px;
}.av-inner .route:nth-child(2) .route-ico{background:var(--green-bg);color:var(--green-dark)}.av-inner .route:nth-child(3) .route-ico{background:var(--band);color:var(--navy2)}.av-inner .route h3{font-family:'DM Sans',sans-serif;font-size:19px;font-weight:700;line-height:1.3;margin:0 0 10px}.av-inner .route p{font-size:14px;color:var(--text2);line-height:1.65;margin:0 0 16px}.av-inner .route-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}.av-inner .route-chips span{
  font-size:11.5px;font-weight:700;color:var(--text2);
  background:var(--bg);border:1px solid var(--border2);
  border-radius:var(--r-pill);padding:5px 10px;
}.av-inner .route-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--brand-blue);text-decoration:none;
  padding-top:14px;border-top:1px solid var(--border2);
}.av-inner .route:nth-child(3) .route-link{color:var(--navy2)}.av-inner .route:nth-child(2) .route-link{color:var(--green-dark)}.av-inner .route-link i{transition:transform .2s ease}.av-inner .route:hover .route-link i{transform:translateX(4px)}/* ---- 20c. Industry scope grid ----
   The nine sectors were a comma list inside a paragraph. As a grid they can
   be scanned for the reader's own industry, which is the actual question. */
.av-inner .scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.av-inner .scope{
  display:flex;align-items:center;gap:12px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;font-size:13.5px;font-weight:600;color:var(--text2);
  transition:border-color .2s ease,transform .2s ease;
}.av-inner .scope:hover{border-color:var(--blue-mid);transform:translateX(3px)}.av-inner .scope i{color:var(--brand-blue);font-size:14px;width:18px;text-align:center;flex-shrink:0}/* ---- 20d. Standards matrix ----
   The criteria table, upgraded rather than replaced: this is regulatory
   content and a table is the correct structure for it. Sticky header so the
   column meaning survives a long scroll, and the criterion shown as a code
   badge so it can be spotted without reading the sentence. */
.av-inner .matrix thead th{position:sticky;top:0;z-index:2}.av-inner .matrix tbody tr{transition:background .15s ease}.av-inner .matrix tbody tr:hover{background:var(--blue-light)}.av-inner .matrix td,.av-inner .matrix th{vertical-align:top}.av-inner .std{
  display:inline-block;font-family:ui-monospace,Consolas,monospace;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--brand-blue);background:var(--blue-light);
  border:1px solid var(--blue-mid);border-radius:6px;padding:4px 9px;margin-bottom:6px;
}.av-inner .matrix .ind{display:block;font-size:13px;color:var(--text2);line-height:1.6}/* ---- 20e. Audit family accordion ---- */
.av-inner .fam summary{display:flex;align-items:center;gap:14px}.av-inner .fam-ico{
  width:38px;height:38px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;
  background:var(--blue-light);color:var(--brand-blue);font-size:14px;
}/* Empty means "no label", not an empty chip: the text is editable content and
   a blank ACF field must not leave a stray pill behind. */
.av-inner .fam-count:empty{display:none}.av-inner .fam-count{
  margin-left:auto;margin-right:8px;font-size:12px;font-weight:700;
  color:var(--text3);background:var(--bg);border:1px solid var(--border2);
  border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap;
}@media(max-width:980px){.av-inner .cred-strip{grid-template-columns:1fr}.av-inner .route-grid{grid-template-columns:1fr}.av-inner .scope-grid{grid-template-columns:repeat(2,1fr)}
}@media(max-width:600px){.av-inner .scope-grid{grid-template-columns:1fr}.av-inner .route{padding:0 20px 22px}.av-inner .cred{padding:20px}.av-inner .fam-count{display:none}
}/* ============================================================================
   21. EHS OUTSOURCING
   ----------------------------------------------------------------------------
   Two problems this page had:

   1. Sixty roles sat as flat chips inside nine boxes of wildly uneven height.
      Nobody reads sixty chips — they arrive looking for one role. It is now a
      filterable directory with a search box, which is what a list that long
      actually needs.
   2. The regulatory thresholds are the decision content on this page — "do I
      have to appoint one?" — and they were buried in plain accordion rows.
      They are now requirement cards with the trigger condition called out.
   ========================================================================= */
/* ---- 21a. Role groups ----
   Five cells in the arrangement the client drew: cell 1 runs the full height
   of the left column, 2 and 3 sit across the top of the other two, 4 and 5
   across the bottom.

   It is drawn as a table — shared hairlines, no gaps, one outer border — so
   the cells read as divisions of one list rather than five separate cards.
   Borders are declared per cell rather than with an nth-child rule because a
   spanning cell makes the edge cells non-obvious: cell 1 has no bottom edge
   of its own, and cells 3 and 5 are the right-hand column.

   Each cell shows at most five roles, so the rows stay close in height. An
   earlier version listed every role, which put 25 titles beside 4 and left
   most of cell 4 empty. */
.av-inner .role-bento{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:28px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
}.av-inner .rb{padding:26px 26px 28px;display:flex;flex-direction:column}.av-inner .rb--1{grid-column:1;grid-row:1/span 2;border-right:1px solid var(--border)}.av-inner .rb--2{grid-column:2;grid-row:1;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.av-inner .rb--3{grid-column:3;grid-row:1;border-bottom:1px solid var(--border)}.av-inner .rb--4{grid-column:2;grid-row:2;border-right:1px solid var(--border)}.av-inner .rb--5{grid-column:3;grid-row:2}.av-inner .rb-num{
  margin:0 0 12px;width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--blue-light);color:var(--brand-blue);
  font-size:13px;font-weight:800;
}.av-inner .rb-title{
  font-family:'DM Sans',sans-serif;
  margin:0;font-size:17px;line-height:1.3;font-weight:700;color:var(--navy);
}.av-inner .rb-title span{font-weight:600;color:var(--text3)}.av-inner .rb-count{margin:6px 0 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}/* The roles are tags rather than list rows: a wrapping cloud inside each
   cell. Still a <ul>, so it is still a list to a screen reader — only the
   presentation changed. */
.av-inner .rb-list{
  list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}/* Pill-shaped while a tag is one line; a tag carrying an authority is two
   lines, so those get the softer corner instead of a stadium shape around a
   block of text. */
.av-inner .rb-list li{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 14px;border-radius:16px;
  font-size:13px;font-weight:600;line-height:1.35;
}/* The registering authority rides inside its tag rather than on a line of
   its own, and takes its colour from the tag so the five palettes hold.
   nowrap because "MOM / REGISTERED" split across two lines reads as two
   separate things. */
.av-inner .rb-auth{
  font-size:10px;font-weight:800;letter-spacing:.06em;white-space:nowrap;
  text-transform:uppercase;color:currentColor;opacity:.62;
}/* One tint per group, the same five the section has always used. Tinting by
   cell rather than by role keeps a wrapped cloud readable — you can see
   where one group's tags end and the next begins. */
.av-inner .rb--1 .rb-list li,.av-inner .rb--1 .rb-num{background:var(--blue-light);color:var(--brand-blue)}.av-inner .rb--2 .rb-list li,.av-inner .rb--2 .rb-num{background:var(--green-bg);  color:var(--green-dark)}.av-inner .rb--3 .rb-list li,.av-inner .rb--3 .rb-num{background:#FEEDE4;          color:var(--brand-orange)}.av-inner .rb--4 .rb-list li,.av-inner .rb--4 .rb-num{background:var(--gold-bg);   color:#8A6100}.av-inner .rb--5 .rb-list li,.av-inner .rb--5 .rb-num{background:var(--band);      color:var(--navy2)}/* Only the groups holding more than five roles carry this, so a cell without
   it is showing everything it has rather than hiding something silently.

   margin-top:auto pushes it to the foot of its cell. Cell 1 spans both rows
   but shows five roles like everyone else, so it has height left over; the
   line sitting on the bottom edge makes that gap look deliberate instead of
   like a list that ran out. */
.av-inner .rb-more{
  margin:auto 0 0;padding-top:16px;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;color:var(--text3);
}/* Three cells across a tablet leaves each about 300px wide, too narrow for
   role titles of this length. The table becomes a stack, keeping the
   numbered order. Each rule re-states the cell it overrides rather than
   reaching for !important. */
@media(max-width:980px){.av-inner .role-bento{grid-template-columns:1fr}.av-inner .rb--1,.av-inner .rb--2,.av-inner .rb--3,.av-inner .rb--4,.av-inner .rb--5{
    grid-column:1;grid-row:auto;
    border-right:0;border-bottom:1px solid var(--border);
  }.av-inner .rb--5{border-bottom:0}
}@media(max-width:600px){.av-inner .rb{padding:22px 20px 24px}
}/* ---- 21b. Requirement cards ----
   The trigger is what decides whether the reader must act, so it gets the
   emphasis rather than sitting inside a paragraph. */
.av-inner .req-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;
}.av-inner .req-card[open]{border-color:var(--brand-blue);box-shadow:var(--shadow-md)}.av-inner .req-card > summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:15px;padding:20px 56px 20px 22px;
}.av-inner .req-card > summary::-webkit-details-marker{display:none}.av-inner .req-card > summary:hover{background:var(--bg)}.av-inner .req-card > summary:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px}.av-inner .req-card > summary::after{
  content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--brand-blue);transition:transform .2s;
}.av-inner .req-card[open] > summary::after{transform:translateY(-50%) rotate(180deg)}.av-inner .req-auth{
  width:42px;height:42px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  background:var(--blue-light);color:var(--brand-blue);font-size:16px;
}.av-inner .req-title{margin:0;font-family:'DM Sans',sans-serif;font-size:17px;font-weight:700;color:var(--text);line-height:1.3}.av-inner .req-by{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-top:3px}.av-inner .req-body{padding:0 22px 24px;border-top:1px solid var(--border2);padding-top:20px}/* The way out of the accordion, for a reader whose situation is not one of
   the five listed. Sits under the list, left-aligned with it. */
.av-inner .req-help{margin:22px 0 0}.av-inner .trigger{
  background:var(--gold-bg);border:1px solid #F6E2BB;border-left:4px solid var(--gold);
  border-radius:var(--r);padding:16px 18px;margin-bottom:16px;
}.av-inner .trigger h4{
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#8A6100;margin-bottom:9px;
}.av-inner .trigger p{font-size:14px;color:var(--text2);line-height:1.65;margin:0 0 8px}.av-inner .trigger p:last-child{margin-bottom:0}.av-inner .trigger ul{list-style:none;margin:0;padding:0}.av-inner .trigger li{position:relative;padding-left:22px;font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:7px}.av-inner .trigger li:last-child{margin-bottom:0}.av-inner .trigger li::before{
  content:"\f0da";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:0;top:0;color:var(--gold);font-size:12px;
}/* ---- 21c. Equipment rental ---- */
.av-inner .kit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}.av-inner .kit{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--shadow);
}.av-inner .kit-ico{
  width:50px;height:50px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;
  background:var(--green-bg);color:var(--green-dark);font-size:19px;
}.av-inner .kit:nth-child(2) .kit-ico{background:var(--blue-light);color:var(--brand-blue)}.av-inner .kit h3{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:700;margin-bottom:7px}.av-inner .kit p{font-size:14px;color:var(--text2);line-height:1.65;margin:0}@media(max-width:768px){.av-inner .kit-grid{grid-template-columns:1fr}
}@media(max-width:600px){.av-inner .req-card > summary{padding:17px 48px 17px 18px;gap:12px}.av-inner .req-body{padding-left:18px;padding-right:18px}.av-inner .kit{padding:20px}
}/* ============================================================================
   22. PINNED STEP STACK  (Train Your Workforce — "How we support")
   ----------------------------------------------------------------------------
   The section pins to the viewport while the page scrolls through it: the
   background holds, the step advances one per scroll, and each title stacks
   under the previous one so the reader can see where they are in the sequence.

   Built as a tall wrapper containing a sticky stage, so the browser drives the
   pinning natively — no scroll hijacking, no preventDefault. The wheel keeps
   working normally; only the CONTENT swaps as progress passes each threshold.
   That matters: hijacked scrolling breaks keyboard paging, trackpad momentum
   and find-in-page.

   Falls back to plain stacked bands when JS is off, when the viewport is short
   or narrow, or when prefers-reduced-motion is set — a pinned section on a
   phone is a trap, not an effect.
   ========================================================================= */
.av-inner .pin-wrap{position:relative}.av-inner .pin-stage{
  position:sticky;top:0;
  min-height:100vh;display:flex;align-items:center;
  overflow:hidden;color:#fff;
  background:var(--brand-blue);
  transition:background .7s cubic-bezier(.22,.61,.36,1);
}/* One colour per step, walking the same brand range as the static bands. */
.av-inner .pin-stage[data-step="0"]{background:var(--brand-blue)}.av-inner .pin-stage[data-step="1"]{background:var(--brand-blue2)}.av-inner .pin-stage[data-step="2"]{background:var(--brand-blue3)}.av-inner .pin-stage[data-step="3"]{background:var(--navy-bg)}/* Panel first, rail second: the content leads and the step list sits to its
   right. The rail is `auto` so it takes only the width its titles need and
   the panel gets the rest. */
.av-inner .pin-inner{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;width:100%}/* ---- Accumulating title rail (built by JS; pinned mode only) ---- */
.av-inner .pin-steps{display:flex;flex-direction:column;max-width:290px}.av-inner .pin-steps:empty{display:none}.av-inner .pin-step{
  display:grid;grid-template-rows:0fr;margin-bottom:0;opacity:0;
  transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1),
             opacity .55s cubic-bezier(.22,.61,.36,1),
             margin-bottom .55s cubic-bezier(.22,.61,.36,1);
}.av-inner .pin-step-in{overflow:hidden;min-height:0;padding-left:16px;border-left:2px solid rgba(255,255,255,.25)}.av-inner .pin-step.is-seen{grid-template-rows:1fr;opacity:.5;margin-bottom:14px}.av-inner .pin-step.is-active{opacity:1}.av-inner .pin-step.is-active .pin-step-in{border-left-color:#fff}.av-inner .pin-step .s-no{
  display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:3px;
}.av-inner .pin-step .s-title{
  font-family:'DM Sans',sans-serif;font-size:15.5px;font-weight:700;
  line-height:1.3;color:#fff;
}/* ---- Step panels ---- */
.av-inner .pin-panels{position:relative}.av-inner .pin-panel{
  display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center;
  opacity:0;transform:translateY(14px);pointer-events:none;
  position:absolute;inset:0;
  transition:opacity .5s ease,transform .5s ease;
}.av-inner .pin-panel.is-active{opacity:1;transform:none;pointer-events:auto;position:relative;inset:auto}.av-inner .pin-step-no{
  display:block;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:10px;
}.av-inner .pin-panel-title{
  font-family:'DM Sans',sans-serif;font-weight:800;letter-spacing:-.02em;
  line-height:1.15;color:#fff;margin:0 0 14px;font-size:clamp(24px,3vw,38px);
}.av-inner .pin-panel p{color:rgba(255,255,255,.85);font-size:15px;line-height:1.7;margin:0 0 18px;max-width:52ch}.av-inner .pin-panel .band-meta{margin-bottom:20px}.av-inner .pin-panel .btn-white-solid{background:#fff;color:var(--brand-blue)}.av-inner .pin-panel .btn-white-solid:hover{background:var(--blue-light)}.av-inner .pin-shot{
  aspect-ratio:16/10;border-radius:var(--r-lg);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;text-align:center;padding:20px;
}.av-inner .pin-shot span{
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62);line-height:1.8;
}.av-inner .pin-shot img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}/* ---- Progress rail ---- */
.av-inner .pin-rail{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(255,255,255,.18);
}.av-inner .pin-rail span{
  display:block;height:100%;width:var(--p,0%);
  background:#fff;transition:width .25s linear;
}/* ============================================================================
   Fallback: no JS, reduced motion, short viewport, or narrow screen.
   The wrapper collapses and every panel stacks in reading order, each with
   its own heading, copy and image. The JS-built rail is simply never created.
   ========================================================================= */
.av-inner .pin-wrap:not(.is-pinned) .pin-stage{position:static;min-height:0;padding:56px 0}.av-inner .pin-wrap:not(.is-pinned){height:auto !important}.av-inner .pin-wrap:not(.is-pinned) .pin-inner{grid-template-columns:1fr}.av-inner .pin-wrap:not(.is-pinned) .pin-panels{display:flex;flex-direction:column;gap:52px}.av-inner .pin-wrap:not(.is-pinned) .pin-panel{
  opacity:1;transform:none;position:relative;inset:auto;pointer-events:auto;
}.av-inner .pin-wrap:not(.is-pinned) .pin-rail{display:none}@media(max-width:900px),(max-height:640px){.av-inner .pin-wrap{height:auto !important}.av-inner .pin-stage{position:static;min-height:0;padding:48px 0}.av-inner .pin-inner{grid-template-columns:1fr;gap:0}.av-inner .pin-steps{display:none}.av-inner .pin-panels{display:flex;flex-direction:column;gap:44px}.av-inner .pin-panel{
    grid-template-columns:1fr;gap:22px;
    opacity:1;transform:none;position:relative;inset:auto;pointer-events:auto;
  }.av-inner .pin-panel .pin-shot{order:-1}.av-inner .pin-rail{display:none}
}@media (prefers-reduced-motion: reduce){.av-inner .pin-wrap{height:auto !important}.av-inner .pin-stage{position:static;min-height:0;transition:none;padding:48px 0}.av-inner .pin-steps{display:none}.av-inner .pin-panels{display:flex;flex-direction:column;gap:44px}.av-inner .pin-panel{opacity:1;transform:none;position:relative;inset:auto;transition:none}.av-inner .pin-rail{display:none}
}/* ============================================================================
   23. FLUENT FORMS PLACEHOLDER
   Restored — these rules were removed with an earlier block rewrite, which
   left the shortcode rendering as unstyled text.
   ========================================================================= */
.av-inner .shortcode{
  border:1px dashed #BFC7E8;border-radius:var(--r-lg);background:var(--white);
  padding:54px 28px;min-height:300px;display:grid;place-content:center;
  text-align:center;color:var(--text3);font-size:14px;line-height:1.7;
  box-shadow:var(--shadow);
}.av-inner .shortcode code{
  display:inline-block;margin-top:10px;
  font:800 15px/1 ui-monospace,Consolas,monospace;color:var(--brand-blue);
  background:var(--blue-light);border:1px solid var(--blue-mid);
  border-radius:8px;padding:10px 14px;
}/* The three contact tiles sat in the narrower column of .contact-split, so a
   3-across grid squeezed "+65 6295 2112" onto three lines. They stack. */
.av-inner .reach-stack{display:grid;gap:12px;margin-top:22px}.av-inner .reach-stack .contact-tile{padding:16px 18px}.av-inner .reach-stack .contact-tile p{margin:0}/* ============================================================================
   24. NEWS & PROMOTIONS
   ----------------------------------------------------------------------------
   These entries are not really articles — they are course lists, funding
   schemes, promotions and training services. Two consequences for the design:

   1. There are no photographs and no publish dates on the live site, so a
      conventional blog card would show two empty slots on every row. Instead
      each card carries a DESIGNED COVER: the category's colour, a large
      watermark glyph and the category word. Twelve identical pale tiles
      become four visually distinct families.
   2. A "type" line says what the reader will actually get — a list, a scheme,
      a promotion — which a category tag alone does not.
   ========================================================================= */
/* Category palette. Driven off data-category so a WordPress term slug alone
   colours the card — no per-post classes to maintain. */
.av-inner .blog-card,.av-inner .blog-featured{--c:var(--brand-blue);--c-wash:var(--blue-light);--c-ink:var(--brand-blue)}.av-inner [data-category="funding"]{--c:var(--green-dark);--c-wash:var(--green-bg);--c-ink:var(--green-dark)}.av-inner [data-category="promotion"]{--c:var(--brand-orange);--c-wash:#FEEDE4;--c-ink:#B33E06}.av-inner [data-category="training"]{--c:var(--navy2);--c-wash:var(--band);--c-ink:var(--navy2)}/* ---- Designed cover ---- */
.av-inner .post-cover{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--c-wash);display:grid;place-items:center;
}.av-inner .post-cover img{width:100%;height:100%;object-fit:cover}/* Oversized glyph, cropped by the tile — reads as artwork rather than a lost
   icon floating in an empty box. */
.av-inner .post-cover .pc-glyph{
  position:absolute;right:-14px;bottom:-26px;
  font-size:120px;line-height:1;color:var(--c);opacity:.14;pointer-events:none;
}.av-inner .post-cover .pc-mark{
  position:relative;z-index:1;
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--c);color:#fff;font-size:21px;box-shadow:var(--shadow);
}.av-inner .post-cover .pc-cat{
  position:absolute;left:16px;top:14px;z-index:1;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-ink);
}.av-inner .blog-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.av-inner .blog-card:hover{border-color:var(--c)}.av-inner .blog-card .blog-more{color:var(--c-ink)}/* What the reader actually gets. */
.av-inner .post-type{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-ink);margin-bottom:9px;
}.av-inner .post-type i{font-size:12px}/* ---- Featured ---- */
.av-inner .blog-featured .post-cover{aspect-ratio:auto;min-height:300px}.av-inner .blog-featured .post-cover .pc-glyph{font-size:210px;right:-24px;bottom:-46px}.av-inner .blog-featured .post-cover .pc-mark{width:66px;height:66px;font-size:27px;border-radius:18px}.av-inner .blog-featured .blog-body{padding:38px}/* ---- Filter pills with live counts ---- */
.av-inner .blog-pill .bp-n{
  display:inline-block;margin-left:7px;font-size:11px;font-weight:800;
  opacity:.65;font-variant-numeric:tabular-nums;
}@media(max-width:600px){.av-inner .post-cover .pc-glyph{font-size:96px}.av-inner .blog-featured .post-cover{min-height:190px}.av-inner .blog-featured .post-cover .pc-glyph{font-size:140px}.av-inner .blog-featured .blog-body{padding:24px}
}/* Open positions count, beside the section title.
   A pill rather than "(4)" in the heading text: the number is a fact about
   the list below, not part of the heading, and a screen reader should not
   read the heading as if the figure were its last word. Hidden entirely when
   there is nothing open — a "0" pill beside "Open Positions" is a worse way
   of saying it than the empty-state sentence already does. */
.av-inner .jr-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:28px;padding:0 10px;margin-left:12px;
  border-radius:999px;
  background:var(--blue-light);color:var(--brand-blue);
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:0;line-height:1;vertical-align:0.18em;
}/* A filter option that would return nothing with the other filters applied.
   Shown and disabled rather than hidden: the category still exists, and a
   greyed "0" explains itself where a vanished row looks like a fault. */
.av-inner .cs-opt.is-empty{opacity:.45;cursor:not-allowed}.av-inner .cs-opt.is-empty input{cursor:not-allowed}/* The empty state's own way out, so the fix is one click from the problem. */
.av-inner .no-results .btn{margin-top:18px}/* ============================================================================
   About · Our Ecosystem
   ----------------------------------------------------------------------------
   Three pillar cards, each topped by its own colour. The colour bar is a
   ::before rather than a border-top so the card's rounded corners stay
   rounded — a 4px border-top squares them off at the join.
   ========================================================================= */
.av-inner .eco-head{max-width:780px;margin:0 auto 32px;text-align:center}.av-inner .eco-head .section-sub{margin-top:12px}/* The middle clause carries the orange. Not <em>, which the design system
   already styles as italic blue — this is a colour change, not emphasis. */
.av-inner .eco-ttl-blue{color:var(--brand-blue)}.av-inner .eco-ttl-orange{color:var(--brand-orange)}.av-inner .eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}.av-inner .eco-card{
  position:relative;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);padding:28px 24px 12px;box-shadow:var(--shadow);
  overflow:hidden;transition:box-shadow .2s ease,transform .2s ease
}.av-inner .eco-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.av-inner .eco-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}.av-inner .eco-card--people::before{background:var(--brand-blue)}.av-inner .eco-card--orgs::before{background:var(--brand-orange)}.av-inner .eco-card--systems::before{background:var(--brand-green)}.av-inner .eco-num{display:block;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--text4);margin-bottom:10px}.av-inner .eco-card h3{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:10px}.av-inner .eco-card>p{font-size:14px;color:var(--text3);line-height:1.7;margin-bottom:16px}.av-inner .eco-list{list-style:none;margin:0;padding:0}.av-inner .eco-list li{font-size:13.5px;font-weight:700;color:var(--navy);padding:13px 2px;border-top:1px solid var(--border)}@media(max-width:980px){.av-inner .eco-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.av-inner .eco-grid{grid-template-columns:1fr}.av-inner .eco-head{text-align:left}}/* =========================================================================
   FACTS BAR — brand palette (Train Your Workforce)
   The bar sat on the old slate --navy2 (#111E38) from the original
   component, which clashed with the indigo page hero above it, and its
   emoji icons each brought their own colours (and rendered as an empty
   box where no colour-emoji font is installed). It is now a white
   figures card that overlaps the bottom of the hero — the same white card
   language as the hero's side card — with Font Awesome icons on soft
   brand-blue tiles, navy figures and grey labels.
   ========================================================================= */
.av-inner .trust-bar{background:transparent;border-bottom:0;padding:0;position:relative;z-index:2;margin-top:-34px}.av-inner .trust-bar .trust-inner{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 44px -20px rgba(0,0,60,.35),0 2px 8px rgba(11,21,39,.06);padding:20px 28px}.av-inner .trust-bar .trust-item{border-right-color:var(--border)}.av-inner .trust-bar .ti-icon,.av-inner .trust-inner--six .ti-icon{background:rgba(26,62,216,.08);color:var(--brand-blue);width:40px;height:40px;border-radius:11px;font-size:16px}.av-inner .trust-bar .ti-num{color:var(--navy)}.av-inner .trust-bar .ti-lbl{color:var(--text3);font-weight:500}.av-inner .trust-inner--six .ti-num{font-size:19px}.av-inner .trust-inner--six .ti-lbl{font-size:11.5px;margin-top:3px}/* The TÜV NORD tile is a credential, not a figure — brand orange marks it apart. */
.av-inner .trust-bar .trust-item:first-child .ti-icon{background:rgba(232,81,10,.09);color:var(--brand-orange)}@media(max-width:820px){.av-inner .trust-bar{margin-top:-24px}.av-inner .trust-bar .trust-inner{padding:18px 18px;border-radius:14px}.av-inner .trust-inner--six .ti-icon{width:36px;height:36px;font-size:15px}
}/* =========================================================================
   REQUEST A PROPOSAL — form card (Train Your Workforce)
   A title and description over the form, inside the site's standard
   .form-card. The placeholder (.shortcode) only shows when no form
   shortcode is set; inside the card it drops its own frame.
   ========================================================================= */
.av-inner .proposal-form{align-self:start}.av-inner .proposal-form .pf-title{font-family:'DM Sans',sans-serif;font-size:22px;font-weight:700;color:var(--navy);line-height:1.3;margin:0 0 6px}.av-inner .proposal-form .pf-sub{font-size:14.5px;color:var(--text3);line-height:1.65;margin:0 0 20px}.av-inner .proposal-form .shortcode{min-height:220px;padding:36px 20px;box-shadow:none}@media(max-width:640px){.av-inner .proposal-form .pf-title{font-size:20px}}/* =========================================================================
   BLOG — listing additions and the article page (WordPress)
   The listing reuses the approved .blog-card / .blog-featured / .post-cover
   components above; these rules only add what real posts need (a date line,
   a photo cover, archive pagination) and the article layout, which uses the
   same family colours as the cards.
   ========================================================================= */
/* "news" family: posts whose category is none of the four designed ones. */
.av-inner [data-category="news"]{--c:var(--brand-blue);--c-wash:var(--blue-light);--c-ink:var(--brand-blue)}.av-inner .post-cover-link{display:block;text-decoration:none}.av-inner .blog-card .post-cover img,.av-inner .blog-featured .post-cover img{position:absolute;inset:0;transition:transform .4s ease}.av-inner .blog-card:hover .post-cover img,.av-inner .blog-featured:hover .post-cover img{transform:scale(1.04)}.av-inner .post-cover .pc-cat--on-image{background:rgba(255,255,255,.94);color:var(--c-ink);padding:5px 10px;border-radius:var(--r-pill);box-shadow:var(--shadow)}.av-inner .blog-featured h2 a{color:inherit;text-decoration:none}.av-inner .blog-featured h2 a:hover{color:var(--brand-blue)}.av-inner .blog-date{display:flex;align-items:center;gap:6px;font-size:12.5px !important;color:var(--text4) !important;margin:-2px 0 10px !important}.av-inner .blog-count{font-size:14px;font-weight:600;color:var(--text3);margin:0 0 18px}.av-inner .blog-back{margin:34px 0 0;text-align:center}.av-inner .blog-back .btn{gap:8px}/* Archive pagination (the_posts_pagination) */
.av-inner .blog-pagination{margin-top:34px}.av-inner .blog-pagination .nav-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.av-inner .blog-pagination .page-numbers{
  min-width:42px;height:42px;padding:0 12px;border-radius:12px;display:inline-grid;place-items:center;
  background:var(--white);border:1px solid var(--border);color:var(--navy);font-weight:700;font-size:14px;text-decoration:none
}.av-inner .blog-pagination .page-numbers:hover{border-color:var(--brand-blue);color:var(--brand-blue)}.av-inner .blog-pagination .page-numbers.current{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}.av-inner .blog-pagination .page-numbers.dots{border:0;background:none}/* ---- Article: banner ---- */
.av-inner .art-hero h1{max-width:900px;font-size:clamp(28px,3.6vw,44px)}.av-inner .art-cat{
  display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none
}.av-inner .art-cat:hover{background:rgba(255,255,255,.2);color:#fff}.av-inner .art-meta{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;color:rgba(255,255,255,.78);font-size:14px}.av-inner .art-meta li{display:inline-flex;align-items:center;gap:8px}.av-inner .art-meta i{opacity:.8}/* ---- Article: layout ---- */
.av-inner .art-section{padding-top:clamp(32px,4vw,52px)}.av-inner .art-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}.av-inner .art{min-width:0}.av-inner .art-media{margin:0 0 30px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--bg2)}.av-inner .art-media img{width:100%;height:auto;display:block}.av-inner .art-media figcaption{padding:10px 16px;font-size:13px;color:var(--text3);background:var(--white)}/* ---- Article: typography ---- */
.av-inner .art-body{font-size:16.5px;line-height:1.85;color:var(--text2)}.av-inner .art-body > *:first-child{margin-top:0}.av-inner .art-body p{margin:0 0 1.25em}.av-inner .art-body h2,.av-inner .art-body h3,.av-inner .art-body h4{font-family:'DM Sans',sans-serif;color:var(--navy);line-height:1.3;margin:1.8em 0 .6em}.av-inner .art-body h2{font-size:clamp(22px,2.4vw,28px)}.av-inner .art-body h3{font-size:21px}.av-inner .art-body h4{font-size:18px}.av-inner .art-body a{color:var(--brand-blue);text-decoration:underline;text-underline-offset:3px}.av-inner .art-body a:hover{color:var(--brand-blue2)}.av-inner .art-body strong{color:var(--navy)}.av-inner .art-body ul,.av-inner .art-body ol{margin:0 0 1.4em;padding-left:1.4em}.av-inner .art-body li{margin-bottom:.5em}.av-inner .art-body ul li::marker{color:var(--brand-blue)}.av-inner .art-body blockquote{
  margin:1.8em 0;padding:20px 24px;border-left:4px solid var(--brand-blue);background:var(--blue-light);
  border-radius:0 var(--r-lg) var(--r-lg) 0;font-size:18px;color:var(--navy);font-weight:500
}.av-inner .art-body blockquote p:last-child{margin:0}.av-inner .art-body img{max-width:100%;height:auto;border-radius:12px}.av-inner .art-body figure{margin:1.8em 0}.av-inner .art-body figcaption{font-size:13px;color:var(--text3);margin-top:8px;text-align:center}.av-inner .art-body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}.av-inner .art-body th,.av-inner .art-body td{border:1px solid var(--border);padding:10px 14px;text-align:left}.av-inner .art-body th{background:var(--bg);color:var(--navy)}.av-inner .art-body hr{border:0;border-top:1px solid var(--border);margin:2em 0}.av-inner .art-body .alignleft{float:left;margin:.4em 1.4em 1em 0}.av-inner .art-body .alignright{float:right;margin:.4em 0 1em 1.4em}.av-inner .art-body .aligncenter{margin-left:auto;margin-right:auto}.av-inner .art-pages{margin:1.5em 0;font-weight:700}/* ---- Article: tags, share, prev/next ---- */
.av-inner .art-foot{margin-top:36px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between}.av-inner .art-foot__lbl{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-right:6px}.av-inner .art-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.av-inner .art-tags a{font-size:13px;font-weight:600;color:var(--brand-blue);background:var(--blue-light);border:1px solid var(--blue-mid);border-radius:var(--r-pill);padding:5px 12px;text-decoration:none}.av-inner .art-tags a:hover{background:var(--brand-blue);color:#fff}.av-inner .art-share{display:flex;align-items:center;gap:8px}.av-inner .art-share a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--border);color:var(--navy);background:var(--white);text-decoration:none;transition:all .18s ease
}.av-inner .art-share a:hover{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;transform:translateY(-2px)}.av-inner .art-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}.av-inner .art-nav__item{
  display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--white);text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease
}.av-inner .art-nav__item:hover{border-color:var(--brand-blue);box-shadow:var(--shadow)}.av-inner .art-nav__item--next{text-align:right}.av-inner .art-nav__dir{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-blue)}.av-inner .art-nav__title{font-family:'DM Sans',sans-serif;font-weight:700;font-size:15.5px;color:var(--navy);line-height:1.4}.av-inner .art-comments{margin-top:40px}/* ---- Article: sidebar ---- */
.av-inner .art-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:20px}.av-inner .art-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}.av-inner .art-card__title{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin:0 0 14px}.av-inner .art-cats{list-style:none;margin:0;padding:0}.av-inner .art-cats a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;margin:0 -10px;border-radius:10px;color:var(--text2);font-size:14px;text-decoration:none}.av-inner .art-cats a:hover,.av-inner .art-cats a[aria-current]{background:var(--blue-light);color:var(--brand-blue)}.av-inner .art-cats b{font-size:11.5px;font-weight:800;color:var(--text3);background:var(--bg);border-radius:var(--r-pill);padding:2px 9px}.av-inner .art-recent{list-style:none;margin:0;padding:0}.av-inner .art-recent li + li{border-top:1px solid var(--border)}.av-inner .art-recent a{display:flex;flex-direction:column;gap:4px;padding:12px 0;text-decoration:none}.av-inner .art-recent__title{font-size:14px;font-weight:600;color:var(--navy);line-height:1.45}.av-inner .art-recent a:hover .art-recent__title{color:var(--brand-blue)}.av-inner .art-recent__date{font-size:12px;color:var(--text4)}.av-inner .art-cta{background:linear-gradient(135deg,var(--navy-bg) 0%,var(--brand-blue3) 60%,var(--brand-blue2) 100%);border:0;color:#fff}.av-inner .art-cta .art-card__title{color:#fff;font-size:18px}.av-inner .art-cta p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.78);margin:0 0 16px}.av-inner .art-cta .btn{width:100%;justify-content:center}.av-inner .art-cta__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.14);margin-bottom:14px;font-size:18px}.av-inner .art-cta__link{display:block;text-align:center;margin-top:12px;font-size:13.5px;font-weight:700;color:#fff;text-decoration:none;opacity:.85}.av-inner .art-cta__link:hover{opacity:1;text-decoration:underline}.av-inner .art-related{background:var(--bg);padding-top:clamp(40px,5vw,64px)}@media(max-width:1024px){.av-inner .art-layout{grid-template-columns:1fr;gap:36px}.av-inner .art-side{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.av-inner .art-side .art-cta{grid-column:1/-1}
}@media(max-width:640px){.av-inner .art-side{grid-template-columns:1fr}.av-inner .art-body{font-size:16px}.av-inner .art-nav{grid-template-columns:1fr}.av-inner .art-nav__item--next{text-align:left}.av-inner .art-foot{flex-direction:column;align-items:flex-start}.av-inner .art-meta{gap:6px 16px;font-size:13px}
}


/* Stacked CTA panel (tablet / phone): the enquiry form sits UNDER the copy, so
   it needs the same side padding as .cta-panel-body above it. The desktop
   rule (28px 28px 28px 0) has no left padding - right for the side-by-side
   layout, but stacked it pushed the heading, text and fields against the left
   edge of the blue panel while leaving 28px on the right. */
@media(max-width:900px){.av-inner .cta-panel-form--light{padding:0 32px 32px}}
@media(max-width:600px){.av-inner .cta-panel-form--light{padding:0 26px 26px}}

/* In-page anchor targets (e.g. the QEHS Outsourcing enquiry form): land below the sticky
   header instead of underneath it. */
.av-inner [data-anchor-focus]{scroll-margin-top:110px}

/* ---- Enquiry form as a white card (Auditing, QEHS Outsourcing) -----------
   The form used to sit straight on the same blue as the copy beside it, so
   the panel read as one undivided block and the form did not stand out. It
   now sits on a white card inset in the blue panel: navy heading, light
   fields, and the site's orange pill button. About Us keeps the old look
   (no --card class there). */
.av-inner .cta-panel-form--light.cta-panel-form--card{
  background:#fff;border-radius:18px;margin:28px 28px 28px 0;padding:32px 32px 28px;
  box-shadow:0 30px 60px -30px rgba(0,0,40,.65),0 0 0 1px rgba(255,255,255,.35);
  justify-content:flex-start;color:var(--text,#0B1527)
}
.av-inner .cta-panel-form--card .qf-head{margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--border,rgba(11,21,39,.09))}
.av-inner .cta-panel-form--light.cta-panel-form--card .qf-head .qf-title{color:var(--navy,#0B1527)}
.av-inner .cta-panel-form--card .qf-head .qf-sub{color:var(--text2,#374766)}
/* Fluent Forms fields on the card */
.av-inner .cta-panel-form--card .ff-el-group{margin-bottom:14px}
.av-inner .cta-panel-form--card .ff-el-form-control{
  background:#F4F7FB;border:1px solid #DCE3EF;border-radius:10px;min-height:46px;
  font-size:14px;color:var(--text,#0B1527);box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s
}
.av-inner .cta-panel-form--card textarea.ff-el-form-control{min-height:104px}
.av-inner .cta-panel-form--card .ff-el-form-control:focus{
  background:#fff;border-color:var(--brand-blue,#1A3ED8);box-shadow:0 0 0 3px rgba(26,62,216,.15);outline:none
}
.av-inner .cta-panel-form--card .ff-el-form-control::placeholder{color:#7A88A6}
.av-inner .cta-panel-form--card .ff-el-input--label label{color:var(--navy,#0B1527);font-weight:600;font-size:13px}
.av-inner .cta-panel-form--card .ff_submit_btn_wrapper,.av-inner .cta-panel-form--card .ff-btn-wrapper{margin-top:6px}
.av-inner .cta-panel-form--card .ff-btn-submit{
  background:var(--brand-orange,#E8510A)!important;border:0!important;color:#fff!important;border-radius:100px!important;
  padding:13px 30px!important;font-weight:700;font-size:15px;box-shadow:0 10px 22px -12px rgba(232,81,10,.75);transition:background .15s,transform .15s
}
.av-inner .cta-panel-form--card .ff-btn-submit:hover{background:#C44008!important;transform:translateY(-1px)}
.av-inner .cta-panel-form--card .ff-el-is-error .ff-el-form-control{border-color:#C62828}
.av-inner .cta-panel-form--card .ff-message-success{border-radius:10px}
@media(max-width:900px){.av-inner .cta-panel-form--light.cta-panel-form--card{margin:0 32px 32px;padding:26px 24px 22px}}
@media(max-width:600px){.av-inner .cta-panel-form--light.cta-panel-form--card{margin:0 16px 18px;padding:22px 18px 18px;border-radius:14px}}
/* Logo wall with too few logos to scroll without repeats (1.11.51): a still,
   centred grid - no animation, no copies. */
.av-inner .cw-marquee--static .cw-row{-webkit-mask-image:none;mask-image:none}
.av-inner .cw-marquee--static .cw-track{width:auto;flex-wrap:wrap;justify-content:center;animation:none}