@view-transition { navigation: auto; } @layer site-overrides { .top-contact-line{width:min(var(--max),calc(100% - var(--gutter)*2));margin:0 auto 6px;display:flex;justify-content:flex-end;align-items:center;gap:18px;color:#d2dced;font-size:.68rem;font-weight:650;letter-spacing:.02em} .top-contact-line a{display:inline-flex;align-items:center;gap:6px;opacity:.9;transition:opacity var(--t-fast)}.top-contact-line a:hover{opacity:1;color:#fff}.top-contact-line svg{width:13px;height:13px;color:var(--orange-300)}.top-contact-line .top-rc{color:var(--orange-300);letter-spacing:.08em} .top-social-links{display:flex;align-items:center;gap:8px;margin-left:2px} .top-contact-line .top-social-link{display:grid;place-items:center;width:21px;height:23px;opacity:.88;transition:opacity var(--t-fast),transform var(--t-fast)} .top-contact-line .top-social-link:hover{opacity:1;transform:translateY(-1px)} .top-contact-line .top-social-link svg{width:15px;height:15px;color:currentColor} .top-contact-line .top-social-link--facebook{color:#5b9cff} .top-contact-line .top-social-link--instagram{color:#ff87b7} .top-contact-line .top-social-link--linkedin{color:#70b8ff} .top-contact-line .top-social-link--youtube{color:#ff536b} .top-contact-line .top-social-link--x{color:#f0f4fb} .top-contact-line .top-social-link:focus-visible{outline:2px solid var(--orange-300);outline-offset:3px;border-radius:4px} .nav-links{gap:clamp(8px,1vw,15px)}.nav-group{position:relative;display:flex;align-items:center}.nav-dropdown-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0;border:0;background:transparent;color:#e1e8f2;font-size:.76rem;font-weight:650;white-space:nowrap;cursor:pointer;transition:color var(--t-fast)}.nav-dropdown-toggle:hover,.nav-dropdown-toggle:focus-visible,.nav-group.is-open>.nav-dropdown-toggle{color:#fff}.nav-dropdown-toggle svg{width:12px;height:12px;transition:transform var(--t-ui) var(--ease-out)}.nav-group.is-open>.nav-dropdown-toggle svg{transform:rotate(180deg)} .nav-dropdown{position:absolute;z-index:150;top:calc(100% + 13px);left:-12px;width:270px;max-height:min(72vh,650px);overflow:auto;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(7,16,32,.985);box-shadow:0 22px 50px rgba(0,0,0,.32);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px) scale(.99);transform-origin:top left;transition:opacity .22s,transform .28s var(--ease-out),visibility .22s}.nav-group:hover>.nav-dropdown,.nav-group:focus-within>.nav-dropdown,.nav-group.is-open>.nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)} .nav-dropdown--mega{position:fixed;top:116px;left:50%;width:min(980px,calc(100vw - 48px));padding:22px;transform:translate(-50%,-7px) scale(.99);transform-origin:top center}.nav-group:hover>.nav-dropdown--mega,.nav-group:focus-within>.nav-dropdown--mega,.nav-group.is-open>.nav-dropdown--mega{transform:translate(-50%,0) scale(1)}.nav-dropdown-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.nav-dropdown h3{margin:0 0 9px;color:var(--orange-300);font-size:.75rem;line-height:1.4;letter-spacing:.055em;text-transform:uppercase}.nav-dropdown a{display:block;padding:7px 8px;border-radius:7px;color:#d8e2f1;font-size:.78rem;line-height:1.4;overflow-wrap:anywhere;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}.nav-dropdown a:hover,.nav-dropdown a:focus-visible{color:#fff;background:rgba(255,255,255,.07);transform:translateX(2px)}.nav-dropdown .nav-drop-all{margin-top:12px;padding:10px 12px;color:#fff;background:rgba(37,99,217,.22);font-weight:800}.nav-drop-note{margin:0 0 10px;color:#bbc8db;font-size:.76rem;line-height:1.6} .page-hero{min-height:0;padding:clamp(150px,14vw,190px) 0 65px}.page-hero-inner{position:relative;z-index:1;max-width:var(--max);margin-inline:auto}.page-hero .breadcrumbs{color:#aebdd2}.page-hero h1{max-width:900px;margin:18px 0;font-size:clamp(2.55rem,1.4rem + 3.8vw,4.6rem);line-height:1.02;letter-spacing:-.065em}.page-hero h1 .accent{display:inline;color:var(--orange-300);font-family:var(--font-accent);font-weight:400;font-style:italic}.page-hero .page-hero-copy{max-width:70ch;color:#d0dced;font-size:1rem;line-height:1.8}.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.76rem;line-height:1.5}.breadcrumbs a{color:inherit;opacity:.82;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}.breadcrumbs a:hover{opacity:1}.breadcrumbs .crumb-sep{opacity:.5} .section-light{background:var(--paper)}.section-muted{background:linear-gradient(145deg,#edf1f6,var(--ivory-50) 75%)}.section-dark{color:#fff;background:linear-gradient(120deg,var(--navy-900),var(--navy-700))}.section-dark .section-copy{color:#c4d1e4}.section-dark .eyebrow{color:#d0dbed} .mission-grid,.category-grid,.course-grid,.info-grid,.delivery-grid,.industry-grid,.package-grid,.consultancy-grid,.insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.mission-card,.info-card,.delivery-card,.category-card,.package-card,.consultancy-card,.insight-card{position:relative;min-width:0;padding:26px;border:1px solid rgba(9,23,44,.1);border-radius:18px;background:rgba(255,254,250,.94);box-shadow:inset 0 1px rgba(255,255,255,.9),var(--shadow-1);transition:transform .34s var(--ease-out),box-shadow .34s,border-color .3s}.mission-card:hover,.info-card:hover,.delivery-card:hover,.category-card:hover,.package-card:hover,.consultancy-card:hover,.insight-card:hover{transform:translateY(-3px);border-color:rgba(37,99,217,.22);box-shadow:var(--shadow-2)}.mission-card h3,.info-card h3,.delivery-card h3,.category-card h3,.package-card h3,.consultancy-card h3,.insight-card h3{margin:14px 0 8px;font-size:1.04rem;letter-spacing:-.035em}.mission-card p,.info-card p,.delivery-card p,.category-card p,.package-card p,.consultancy-card p,.insight-card p{margin:0;color:var(--muted);font-size:.87rem;line-height:1.75}.card-kicker{color:var(--blue-700);font-size:.68rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.category-card{display:flex;flex-direction:column;gap:10px}.category-card .category-count{margin-top:auto;color:var(--blue-700);font-size:.75rem;font-weight:800}.category-mark,.info-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:13px;color:var(--blue-700);background:rgba(37,99,217,.08)}.category-mark svg,.info-icon svg{width:22px;height:22px}.inline-arrow{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--blue-700);font-size:.8rem;font-weight:850}.inline-arrow svg{width:16px;height:16px;transition:transform var(--t-fast)}a:hover .inline-arrow svg{transform:translateX(3px)} .course-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.catalogue-course-card{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;border:1px solid rgba(9,23,44,.1);border-radius:18px;background:#fffefa;box-shadow:var(--shadow-1);transition:transform .36s var(--ease-out),box-shadow .36s,border-color .3s}.catalogue-course-card:hover{transform:translateY(-4px);border-color:rgba(37,99,217,.22);box-shadow:var(--shadow-2)}.course-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px 0}.course-number{display:inline-flex;align-items:center;gap:8px;color:var(--blue-700);font-size:.7rem;font-weight:850;letter-spacing:.12em}.course-number::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--orange-500)}.course-category-chip,.duration-chip{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:5px 9px;border:1px solid rgba(37,99,217,.12);border-radius:var(--pill);color:var(--blue-700);background:rgba(37,99,217,.055);font-size:.68rem;font-weight:800;line-height:1.4}.course-card-body{display:flex;flex:1;flex-direction:column;padding:14px 20px 20px}.course-card-symbol{display:grid;place-items:center;width:43px;height:43px;margin:1px 0 14px;border:1px solid rgba(37,99,217,.13);border-radius:13px;color:var(--blue-700);background:linear-gradient(135deg,rgba(37,99,217,.09),rgba(244,119,33,.1))}.course-card-symbol svg{width:23px;height:23px}.course-card-body h3{margin:0 0 9px;font-size:1.03rem;line-height:1.35;letter-spacing:-.035em}.course-card-body p{margin:0;color:var(--muted);font-size:.83rem;line-height:1.72}.course-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:15px}.course-fee{margin-top:13px;color:var(--ink-800);font-size:.84rem;font-weight:850}.fee-note{margin-top:5px;color:var(--muted);font-size:.7rem;line-height:1.5}.course-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto;padding-top:18px}.course-card-actions .btn{min-height:41px;padding-inline:15px;font-size:.75rem}.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--blue-700);font-size:.8rem;font-weight:850}.text-link:hover{text-decoration:underline;text-underline-offset:4px}.course-number-large{font-variant-numeric:tabular-nums;color:var(--orange-300);font-weight:850;letter-spacing:.11em}.course-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--hairline);border-radius:18px;background:var(--hairline)}.course-fact{padding:18px 20px;background:#fffefa}.course-fact span{display:block;color:var(--muted);font-size:.69rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.course-fact strong{display:block;margin-top:5px;color:var(--ink-800);font-size:.95rem;line-height:1.45}.course-detail-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);align-items:start;gap:26px}.course-detail-main,.course-detail-aside{min-width:0}.detail-panel{padding:clamp(24px,4vw,38px);border:1px solid rgba(9,23,44,.1);border-radius:20px;background:#fffefa;box-shadow:var(--shadow-1)}.detail-panel+.detail-panel{margin-top:18px}.detail-panel h2{margin:0 0 16px;font-size:1.35rem;letter-spacing:-.04em}.detail-panel p{color:var(--muted);font-size:.92rem;line-height:1.85}.detail-panel p:last-child{margin-bottom:0}.detail-list{display:grid;gap:10px;padding:0;margin:0;list-style:none}.detail-list li{position:relative;padding-left:24px;color:var(--ink-700);font-size:.88rem;line-height:1.7}.detail-list li::before{content:'';position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--orange-500);box-shadow:0 0 0 4px rgba(244,119,33,.1)}.scope-note{padding:17px 18px;border-left:3px solid var(--orange-500);border-radius:0 12px 12px 0;background:rgba(244,119,33,.07);color:var(--ink-700);font-size:.84rem;line-height:1.75}.course-illustration{display:grid;place-items:center;gap:15px;min-height:180px;margin-bottom:18px;padding:24px;border:1px solid rgba(255,255,255,.11);border-radius:20px;color:#fff;background:radial-gradient(circle at 20% 20%,rgba(244,119,33,.2),transparent 38%),linear-gradient(140deg,var(--navy-800),var(--navy-950));box-shadow:var(--shadow-1);text-align:center}.course-illustration-mark{display:grid;place-items:center;width:92px;height:92px;border:1px solid rgba(255,255,255,.22);border-radius:28px;color:var(--orange-300);background:rgba(255,255,255,.055)}.course-illustration-mark svg{width:58px;height:58px}.course-illustration>span{max-width:30ch;color:#d3dced;font-size:.72rem;font-weight:750;letter-spacing:.08em;line-height:1.5;text-transform:uppercase}.course-side-card{position:sticky;top:104px;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:20px;color:#fff;background:linear-gradient(145deg,var(--navy-800),var(--navy-950));box-shadow:var(--shadow-2)}.course-side-card h2{margin:0 0 10px;font-size:1.2rem}.course-side-card p{color:#cdd8e8;font-size:.85rem;line-height:1.75}.course-side-card .btn{width:100%;margin-top:14px}.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.related-link{padding:18px;border:1px solid var(--hairline);border-radius:13px;background:#fffefa;transition:transform var(--t-fast),border-color var(--t-fast)}.related-link:hover{transform:translateY(-2px);border-color:rgba(37,99,217,.3)}.related-link strong{display:block;font-size:.84rem;line-height:1.5}.related-link span{display:block;margin-top:7px;color:var(--muted);font-size:.72rem} .filter-toolbar{display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(150px,.65fr) minmax(150px,.65fr);gap:12px;align-items:end;padding:18px;border:1px solid var(--hairline);border-radius:18px;background:#fffefa;box-shadow:var(--shadow-1)}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field label,.field-label{color:var(--ink-700);font-size:.74rem;font-weight:800}.field input,.field select,.field textarea{width:100%;min-width:0;min-height:48px;padding:12px 13px;border:1px solid rgba(9,23,44,.16);border-radius:11px;outline:none;color:var(--ink-800);background:#fffefa;font:500 .88rem/1.5 var(--font-body);transition:border-color var(--t-fast),box-shadow var(--t-fast)}.field textarea{min-height:130px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(37,99,217,.1)}.category-filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 23px}.filter-chip{min-height:38px;padding:8px 13px;border:1px solid rgba(9,23,44,.15);border-radius:var(--pill);color:var(--ink-700);background:transparent;font-size:.75rem;font-weight:800;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}.filter-chip[aria-pressed="true"],.filter-chip:hover{border-color:var(--blue-700);color:#fff;background:var(--blue-700)}.result-line{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:19px 0;color:var(--muted);font-size:.82rem}.empty-state{padding:34px;border:1px dashed rgba(9,23,44,.22);border-radius:18px;text-align:center;background:rgba(255,255,255,.55)}.empty-state h3{margin:0 0 8px;font-size:1.1rem}.empty-state p{margin:0 auto 16px;color:var(--muted);font-size:.88rem} .form-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:clamp(25px,5vw,64px)}.form-card{padding:clamp(22px,4vw,36px);border:1px solid var(--hairline);border-radius:20px;background:#fffefa;box-shadow:var(--shadow-2)}.form-card h2{margin:0 0 18px;font-size:1.35rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field-full{grid-column:1/-1}.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}.form-status{display:none;margin-top:16px;padding:14px 16px;border-left:3px solid var(--blue-600);border-radius:0 10px 10px 0;background:rgba(37,99,217,.07);color:var(--ink-700);font-size:.85rem;line-height:1.65}.form-status.is-visible{display:block;animation:fade-in .35s var(--ease-out) both}.form-status a{text-decoration:underline;text-underline-offset:3px}.honeypot-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important} .content-prose{max-width:850px}.content-prose h2{margin-top:36px;font-size:1.35rem}.content-prose h3{margin-top:24px;font-size:1.05rem}.content-prose p,.content-prose li{color:var(--muted);font-size:.93rem;line-height:1.85}.content-prose ul{padding-left:22px}.content-prose a{color:var(--blue-700);text-decoration:underline;text-underline-offset:3px}.tag-row{display:flex;flex-wrap:wrap;gap:8px}.soft-tag{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid var(--hairline);border-radius:var(--pill);color:var(--ink-700);background:rgba(255,255,255,.72);font-size:.74rem;font-weight:750}.pricing-note{margin:18px 0 0;color:var(--muted);font-size:.79rem;line-height:1.7}.pricing-number{display:block;margin-top:13px;color:var(--blue-700);font:800 1.25rem/1.2 var(--font-head);letter-spacing:-.04em}.flag-hidden{display:none!important}.gallery-hidden{display:none!important} .footer-top.catalogue-footer-top{grid-template-columns:minmax(0,1.25fr) minmax(150px,.75fr) minmax(150px,.75fr) minmax(0,1fr);gap:clamp(24px,3vw,44px)}.footer-logo{display:block;width:min(100%,280px);height:auto;max-height:90px;object-fit:contain;object-position:left center}.footer-links a[href]{overflow-wrap:anywhere}.footer-sublist{display:grid;gap:3px}.footer-sublist a{display:block;color:#c0cde0;font-size:.76rem;line-height:1.6;transition:color var(--t-fast),transform var(--t-fast)}.footer-sublist a:hover{color:#fff;transform:translateX(3px)}.social-icon-wrap svg{width:19px;height:19px}.mobile-bottom-bar{display:none}.registration-strip{display:flex;align-items:center;gap:12px;margin-top:18px;padding:16px 18px;border:1px solid rgba(37,99,217,.16);border-radius:14px;background:rgba(37,99,217,.045);color:var(--ink-700);font-size:.85rem;line-height:1.6}.registration-strip svg{width:25px;height:25px;flex:0 0 auto;color:var(--blue-700)}.registration-strip strong{color:var(--ink-800)} @media(min-width:1351px){.nav-dropdown--mega{width:min(1400px,calc(100vw - 48px));max-height:calc(100vh - 140px)}.nav-dropdown-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.nav-dropdown-grid .nav-menu-category h3{font-size:.66rem;letter-spacing:.035em}.nav-dropdown-grid .nav-menu-category>a{font-size:.68rem;padding:6px 5px}} @media(max-width:1350px){.nav-dropdown-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:1150px){.nav-links{gap:8px}.nav-links>a:not(.btn),.nav-dropdown-toggle{font-size:.7rem}.nav-wrap{gap:12px}.brand-text strong{font-size:.9rem}.brand-text>span{font-size:.46rem}.brand-logo{width:34px;height:34px}.footer-top.catalogue-footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-about{grid-column:1/-1}} @media(max-width:820px){.top-contact-line{display:none}.nav-links{gap:3px}.nav-group{display:block;width:100%}.nav-dropdown-toggle{display:flex;width:100%;justify-content:space-between;min-height:48px;padding:11px 13px;border-radius:10px;color:#f3f6fb;font-size:.98rem;line-height:1.35;white-space:normal}.nav-dropdown-toggle:hover,.nav-dropdown-toggle:focus-visible,.nav-group.is-open>.nav-dropdown-toggle{background:rgba(255,255,255,.065)}.nav-dropdown,.nav-dropdown--mega{position:static;display:none;width:100%;max-width:none;max-height:310px;overflow:auto;margin:0;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:11px;box-shadow:none;background:rgba(255,255,255,.035);opacity:1;visibility:visible;pointer-events:auto;transform:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:none}.nav-group.is-open>.nav-dropdown{display:block}.nav-dropdown-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.nav-dropdown h3{font-size:.68rem}.nav-dropdown a{font-size:.77rem}.nav-group:hover>.nav-dropdown,.nav-group:focus-within>.nav-dropdown{transform:none}.page-hero{padding:130px 0 52px}.mission-grid,.category-grid,.course-grid,.info-grid,.delivery-grid,.industry-grid,.package-grid,.consultancy-grid,.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.course-detail-layout{grid-template-columns:minmax(0,1fr)}.course-detail-aside{order:-1}.course-side-card{position:static}.course-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.filter-toolbar .field:first-child{grid-column:1/-1}.form-layout{grid-template-columns:minmax(0,1fr)}.mobile-bottom-bar{position:fixed;z-index:calc(var(--z-float) + 2);left:10px;right:10px;bottom:max(9px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:7px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:rgba(7,16,32,.95);box-shadow:0 10px 34px rgba(3,9,20,.3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:fade-in .45s .2s var(--ease-out) both}.mobile-bottom-bar a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:7px 8px;border-radius:11px;color:#fff;font-size:.73rem;font-weight:850}.mobile-bottom-bar a:nth-child(2){background:#11764c}.mobile-bottom-bar a:nth-child(3){color:#171b23;background:linear-gradient(135deg,var(--orange-400),var(--orange-500))}.mobile-bottom-bar svg{width:17px;height:17px;flex:0 0 auto}.whatsapp-float{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 58px)}body{padding-bottom:65px}} @media(max-width:600px){.page-hero{padding-top:122px;padding-bottom:42px}.page-hero h1{font-size:clamp(2.2rem,8.8vw,3.3rem)}.mission-grid,.category-grid,.course-grid,.info-grid,.delivery-grid,.industry-grid,.package-grid,.consultancy-grid,.insight-grid{grid-template-columns:minmax(0,1fr)}.course-grid .catalogue-course-card{min-height:0}.course-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.course-fact{padding:14px}.course-fact strong{font-size:.84rem}.filter-toolbar{grid-template-columns:minmax(0,1fr)}.filter-toolbar .field:first-child{grid-column:auto}.category-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:7px;margin-inline:-2px}.filter-chip{flex:0 0 auto}.result-line{align-items:flex-start;flex-direction:column;gap:6px}.form-grid{grid-template-columns:minmax(0,1fr)}.footer-top.catalogue-footer-top{grid-template-columns:minmax(0,1fr);gap:26px}.footer-about{grid-column:auto}.related-grid{grid-template-columns:minmax(0,1fr)}.nav-dropdown-grid{grid-template-columns:minmax(0,1fr)}.registration-strip{align-items:flex-start}} @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .site-header{top:10px;transform:translateY(0);transition:transform .34s var(--ease-out),filter var(--t-ui)} .site-header.is-hidden{transform:translateY(calc(-100% - 18px))!important} .header-panel{position:relative;overflow:visible;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(7,16,32,.82);box-shadow:0 12px 34px rgba(3,9,20,.2),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:background var(--t-ui),border-color var(--t-ui),box-shadow var(--t-ui)} .site-header.is-scrolled .header-panel{border-color:rgba(255,255,255,.19);background:rgba(7,16,32,.97);box-shadow:0 14px 38px rgba(3,9,20,.28),inset 0 1px rgba(255,255,255,.055)} .top-contact-line{width:auto;margin:0;padding:8px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px 16px;border-bottom:1px solid rgba(255,255,255,.105);color:#e0e8f5;font-size:.72rem;font-weight:650;letter-spacing:.015em} .top-contact-items{display:flex;align-items:center;flex-wrap:wrap;gap:7px 18px;min-width:0} .top-contact-line a{display:inline-flex;align-items:center;gap:7px;min-height:22px;opacity:.96;color:#e0e8f5;white-space:nowrap} .top-contact-line a:hover{opacity:1;color:#fff} .top-contact-line a span{overflow-wrap:anywhere} .top-contact-line svg{width:14px;height:14px;flex:0 0 auto;color:var(--orange-300)} .top-contact-line .top-rc{display:inline-flex;align-items:center;min-height:23px;padding:3px 9px;border:1px solid rgba(255,148,71,.23);border-radius:var(--pill);color:var(--orange-300);background:rgba(244,119,33,.075);font-size:.64rem;font-weight:850;letter-spacing:.075em;white-space:nowrap} .top-contact-line .top-social-links{gap:7px;margin-left:auto;padding-left:5px} .top-contact-line .top-social-link{width:25px;height:25px;border:1px solid rgba(255,255,255,.085);border-radius:8px;background:rgba(255,255,255,.045)} .top-contact-line .top-social-link svg{width:14px;height:14px} .nav-wrap,.site-header.is-scrolled .nav-wrap{height:72px;padding:0 18px;border:0;border-radius:0 0 19px 19px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} .site-header.is-scrolled .nav-wrap{height:66px} .nav-dropdown--mega{top:132px} .mobile-menu-contact{display:none} @media(max-width:1150px){ .top-contact-line{padding-inline:14px;font-size:.66rem;gap:8px 10px} .top-contact-items{gap:6px 12px} .top-contact-line .top-social-links{gap:4px} .top-contact-line .top-social-link{width:22px;height:23px} .nav-wrap,.site-header.is-scrolled .nav-wrap{padding-inline:12px} } @media(max-width:820px){ .site-header{top:8px} .header-panel{border-radius:16px} .top-contact-line{display:none} .nav-wrap,.site-header.is-scrolled .nav-wrap{height:66px;padding-inline:12px;border:0;border-radius:15px;background:transparent;box-shadow:none} .nav-links{top:calc(100% + 9px);width:min(100%,430px);max-height:min(76svh,650px)} .nav-links.open{padding:12px} .mobile-menu-contact{display:block;margin:0 0 8px;padding:12px 11px 13px;border:1px solid rgba(255,255,255,.105);border-radius:12px;background:linear-gradient(145deg,rgba(37,99,217,.12),rgba(255,255,255,.035));} .mobile-menu-contact-title{margin:0 0 10px;color:var(--orange-300);font-size:.66rem;font-weight:850;letter-spacing:.105em;text-transform:uppercase} .mobile-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px} .mobile-contact-grid>a,.mobile-contact-grid .mobile-rc{display:flex;align-items:flex-start;gap:7px;min-width:0;padding:7px 8px;border-radius:8px;color:#e4ebf6;font-size:.72rem;font-weight:650;line-height:1.42;background:rgba(255,255,255,.045);overflow-wrap:anywhere} .mobile-contact-grid>a:hover,.mobile-contact-grid>a:focus-visible{background:rgba(255,255,255,.09);color:#fff} .mobile-contact-grid svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--orange-300)} .mobile-contact-grid a span,.mobile-contact-grid .mobile-rc span{min-width:0;overflow-wrap:anywhere} .mobile-contact-grid .mobile-rc{color:var(--orange-300);background:rgba(244,119,33,.07)} .mobile-menu-contact .top-social-links{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.09)} .mobile-menu-contact .top-social-link{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.045);opacity:.95} .mobile-menu-contact .top-social-link svg{width:16px;height:16px;color:currentColor} .mobile-menu-contact .top-social-link--facebook{color:#79adff} .mobile-menu-contact .top-social-link--instagram{color:#ff87b7} .mobile-menu-contact .top-social-link--linkedin{color:#70b8ff} .mobile-menu-contact .top-social-link--youtube{color:#ff536b} .mobile-menu-contact .top-social-link--x{color:#f0f4fb} .mobile-menu-contact .top-social-link:focus-visible{outline:2px solid var(--orange-300);outline-offset:2px} .nav-dropdown--mega{top:auto} } @media(max-width:600px){ .header-panel{border-radius:15px} .nav-wrap,.site-header.is-scrolled .nav-wrap{height:62px;padding-inline:9px;border-radius:14px} .nav-links{top:calc(100% + 8px);max-height:min(76svh,620px);padding:9px} .nav-links.open{padding:9px} .mobile-menu-contact{padding:10px 9px 11px} .mobile-contact-grid{gap:6px} .mobile-contact-grid>a,.mobile-contact-grid .mobile-rc{font-size:.69rem;padding:7px 6px} } @media(max-width:370px){ .brand-text strong{font-size:.82rem} .brand-text>span{font-size:.41rem} .mobile-contact-grid{grid-template-columns:minmax(0,1fr)} } .site-header::after{left:max(var(--gutter),calc((100% - var(--max))/2));width:min(var(--max),calc(100% - var(--gutter)*2));bottom:-1px} html{scroll-padding-top:132px} @media(max-width:820px){.site-header::after{left:var(--gutter);width:calc(100% - var(--gutter)*2)}html{scroll-padding-top:90px}} [data-course-card].is-filtered-out { display: none !important; } .site-footer .registration-strip { align-items: flex-start; border-color: rgba(141, 177, 255, .38); background: linear-gradient(135deg, rgba(37, 99, 217, .24), rgba(255, 255, 255, .055)); color: #e8eef8; box-shadow: 0 8px 22px rgba(0, 0, 0, .13), inset 0 1px rgba(255, 255, 255, .08); } .site-footer .registration-strip svg { color: var(--orange-300); } .site-footer .registration-strip strong { display: block; margin-bottom: 8px; color: #fff; font-size: .84rem; line-height: 1.45; } .site-footer .registration-strip .registration-number { display: inline-flex; align-items: center; min-height: 29px; padding: 5px 10px; border: 1px solid rgba(255, 148, 71, .38); border-radius: 8px; color: #ffd3ad; background: rgba(244, 119, 33, .13); font: 850 .78rem/1.25 var(--font-head); letter-spacing: .055em; } :root { --glass-panel: rgba(7, 16, 32, .56); --glass-panel-scrolled: rgba(7, 16, 32, .94); --glass-border: rgba(255, 255, 255, .16); --focus-glow: 0 0 0 4px rgba(52, 120, 246, .14); --shadow-glass: 0 18px 48px rgba(3, 9, 20, .22), inset 0 1px rgba(255, 255, 255, .08); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; animation-timing-function: var(--ease-out); } html { scroll-behavior: smooth; scroll-padding-top: 132px; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { font-size: 16px; line-height: 1.72; background: var(--ivory-50); } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } .site-header { top: 12px; isolation: isolate; transition: transform 340ms var(--ease-out), filter 360ms var(--ease-out); } .header-panel { position: relative; isolation: isolate; overflow: visible; border: 1px solid var(--glass-border); border-radius: 22px; background: var(--glass-panel); box-shadow: var(--shadow-glass); backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); transition: opacity 360ms var(--ease-out), filter 360ms var(--ease-out); } .header-panel::before { content: ''; position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } .header-panel::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: rgba(7, 16, 32, .24); transition: opacity 360ms var(--ease-out); } .site-header.is-scrolled .header-panel::after { opacity: 1; } .site-header.is-scrolled .header-panel { border-color: rgba(255, 255, 255, .2); background: var(--glass-panel); box-shadow: var(--shadow-glass); } .top-contact-line { min-height: 39px; margin: 0; padding: 6px 18px; gap: 10px 16px; border-bottom-color: rgba(255, 255, 255, .12); font-size: .75rem; line-height: 1.45; } .top-contact-items { gap: 6px 17px; } .top-contact-line a { min-height: 26px; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), filter 180ms var(--ease-out); } .top-contact-line a:hover { filter: brightness(1.14); } .top-contact-line .top-rc { min-height: 27px; padding-inline: 10px; color: var(--orange-300); border-color: rgba(255, 148, 71, .35); background: rgba(244, 119, 33, .08); } .top-social-links { gap: 6px; } .top-contact-line .top-social-link { width: 29px; height: 29px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 9px; background: rgba(255, 255, 255, .055); transition: transform 180ms var(--ease-spring), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .top-contact-line .top-social-link:hover { transform: translateY(-2px); filter: brightness(1.12); } .nav-wrap, .site-header.is-scrolled .nav-wrap { height: 72px; gap: 18px; padding: 0 18px; border: 0; border-radius: 0 0 21px 21px; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: transform 360ms var(--ease-out), filter 360ms var(--ease-out); } .site-header.is-scrolled .nav-wrap { height: 60px; } .brand { gap: 11px; flex: 0 0 auto; } .brand-logo { width: 42px; height: 42px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .18)); } .brand-text strong { font-size: 1rem; letter-spacing: -.05em; } .brand-text > span { font-size: .53rem; letter-spacing: .13em; } .nav-links { isolation: isolate; gap: clamp(8px, 1.05vw, 16px); } .nav-links > a:not(.btn), .nav-dropdown-toggle { font-size: .79rem; font-weight: 700; letter-spacing: -.012em; } .nav-links > a:not(.btn) { z-index: 1; min-height: 42px; padding-inline: 3px; transition: color 180ms var(--ease-out), filter 180ms var(--ease-out); } .nav-links > a:not(.btn)::before, .nav-dropdown-toggle::before { content: ''; position: absolute; z-index: -1; inset: 4px -9px; border: 1px solid rgba(141, 177, 255, .16); border-radius: var(--pill); background: rgba(37, 99, 217, .17); opacity: 0; transform: scale(.94); transition: transform 180ms var(--ease-spring), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); pointer-events: none; } .nav-links > a:not(.btn):hover::before, .nav-links > a:not(.btn):focus-visible::before, .nav-links > a:not(.btn).is-active::before, .nav-group:hover > .nav-dropdown-toggle::before, .nav-group:focus-within > .nav-dropdown-toggle::before, .nav-group.is-open > .nav-dropdown-toggle::before { opacity: 1; transform: scale(1); } .nav-indicator { z-index: -1; top: 50%; bottom: auto; height: 34px; margin-top: -17px; border: 1px solid rgba(141, 177, 255, .18); border-radius: var(--pill); background: rgba(37, 99, 217, .18); transition: width 360ms var(--ease-spring), transform 360ms var(--ease-spring), opacity 180ms var(--ease-out); } .nav-group { z-index: 2; } .nav-dropdown-toggle { position: relative; z-index: 1; min-height: 42px; padding-inline: 3px; transition: color 180ms var(--ease-out), filter 180ms var(--ease-out); } .nav-dropdown { top: calc(100% + 12px); padding: 16px; border-color: rgba(255, 255, 255, .15); border-radius: 18px; background: rgba(7, 16, 32, .97); box-shadow: 0 24px 56px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .055); backdrop-filter: blur(20px) saturate(125%); -webkit-backdrop-filter: blur(20px) saturate(125%); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms; } .nav-dropdown--mega { top: 120px; width: min(1240px, calc(100vw - 48px)); max-height: calc(100vh - 142px); padding: 25px; border-radius: 22px; transform: translate(-50%, -8px) scale(.98); } .nav-group:hover > .nav-dropdown--mega, .nav-group:focus-within > .nav-dropdown--mega, .nav-group.is-open > .nav-dropdown--mega { transform: translate(-50%, 0) scale(1); } .nav-dropdown-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; } .nav-menu-category { min-width: 0; padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, .08); } .nav-menu-category h3 { min-height: 2.8em; margin-bottom: 10px; color: var(--orange-300); font-size: .69rem; line-height: 1.45; letter-spacing: .055em; } .nav-dropdown .nav-menu-category > a { padding: 7px 6px; border-radius: 8px; color: #d8e2f1; font-size: .69rem; line-height: 1.45; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .nav-dropdown .nav-menu-category > a:hover, .nav-dropdown .nav-menu-category > a:focus-visible { transform: translateX(3px); filter: brightness(1.13); background: rgba(255, 255, 255, .065); } .nav-dropdown .nav-drop-all { border: 1px solid rgba(141, 177, 255, .19); border-radius: 11px; background: linear-gradient(100deg, rgba(37, 99, 217, .28), rgba(37, 99, 217, .12)); } .btn { min-height: 52px; padding-inline: 23px; border-radius: var(--pill); font-size: .84rem; font-weight: 800; letter-spacing: -.012em; transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } .btn-primary { color: var(--navy-950); background: linear-gradient(115deg, var(--orange-400), var(--orange-500)); box-shadow: 0 10px 30px rgba(244, 119, 33, .22), inset 0 1px rgba(255, 255, 255, .33); } .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .055); box-shadow: inset 0 1px rgba(255, 255, 255, .04); } .btn:focus-visible, .menu-toggle:focus-visible, .nav-dropdown-toggle:focus-visible { outline: 2px solid var(--orange-400); outline-offset: 4px; } .btn:active { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) scale(.98); } @media (hover: hover) and (pointer: fine) { .btn:hover { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) translateY(-2px); filter: brightness(1.04) saturate(1.04); } } .mission-card, .info-card, .delivery-card, .category-card, .package-card, .consultancy-card, .insight-card, .catalogue-course-card, .detail-panel, .related-link, .form-card, .filter-toolbar, .trust-module, .culture-card, .sector-card, .coverage-card, .course-facts, .course-side-card, .registration-strip, .audience-panel, .hsse-panel, .cta-panel { border-radius: 20px; } .mission-card, .info-card, .delivery-card, .category-card, .package-card, .consultancy-card, .insight-card, .catalogue-course-card, .detail-panel, .related-link, .form-card, .filter-toolbar, .trust-module, .culture-card, .sector-card, .coverage-card, .course-fact, .course-side-card { box-shadow: inset 0 1px rgba(255, 255, 255, .82), var(--shadow-1); } .mission-card, .info-card, .delivery-card, .category-card, .package-card, .consultancy-card, .insight-card, .catalogue-course-card, .detail-panel, .related-link, .form-card, .filter-toolbar, .trust-module, .culture-card, .sector-card, .coverage-card { border-color: rgba(9, 23, 44, .11); transition-property: transform, opacity, filter; transition-duration: 360ms; transition-timing-function: var(--ease-out); } @media (hover: hover) and (pointer: fine) { .mission-card:hover, .info-card:hover, .delivery-card:hover, .category-card:hover, .package-card:hover, .consultancy-card:hover, .insight-card:hover, .catalogue-course-card:hover, .related-link:hover, .trust-module:hover, .culture-card:hover, .sector-card:hover { filter: saturate(1.035); } } .service-icon, .culture-icon, .contact-mini-icon, .registration-icon, .trust-icon, .category-mark, .info-icon, .course-card-symbol, .round-icon { border-radius: 14px; transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } .text-link { position: relative; width: fit-content; max-width: 100%; text-decoration: none; } .text-link::after { content: ''; position: absolute; right: 0; bottom: -3px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out); opacity: .7; } .text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(1); opacity: 1; } .form-card { position: relative; isolation: isolate; overflow: hidden; border-color: rgba(9, 23, 44, .12); background: var(--paper); box-shadow: 0 22px 56px rgba(7, 16, 32, .085), inset 0 1px rgba(255, 255, 255, .9); } .form-card::before { content: ''; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--orange-400), var(--blue-500), transparent 92%); } .field { gap: 8px; } .field label, .field-label { color: var(--ink-700); font-size: .78rem; font-weight: 800; letter-spacing: -.006em; } .field input, .field select, .field textarea { min-height: 56px; padding: 14px 15px; border: 1px solid rgba(9, 23, 44, .16); border-radius: 14px; background: var(--paper); color: var(--ink-800); font: 500 1rem/1.5 var(--font-body); transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .field textarea { min-height: 140px; } .field input::placeholder, .field textarea::placeholder { color: #66748a; opacity: 1; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue-600); outline-offset: 1px; border-color: var(--blue-600); box-shadow: var(--focus-glow); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; } .form-status { border: 1px solid rgba(37, 99, 217, .17); border-left: 3px solid var(--blue-600); border-radius: 0 14px 14px 0; background: linear-gradient(120deg, rgba(37, 99, 217, .09), rgba(37, 99, 217, .025)); } .page-hero { position: relative; isolation: isolate; min-height: clamp(340px, 44vh, 520px); padding: clamp(150px, 14vw, 190px) 0 70px; background-image: radial-gradient(ellipse at 82% 18%, rgba(52, 120, 246, .17), transparent 38%), linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px), linear-gradient(118deg, var(--ink-950), var(--navy-900) 54%, var(--navy-800)); background-size: auto, 48px 48px, 48px 48px, auto; } .page-hero h1 { max-width: 900px; margin: 20px 0 22px; font-size: clamp(2.8rem, 1.35rem + 3.6vw, 4.6rem); letter-spacing: -.055em; text-wrap: balance; } .page-hero .page-hero-copy { max-width: 68ch; color: #d5dfed; font-size: 1.0625rem; line-height: 1.78; } .breadcrumbs { gap: 9px; font-size: .78rem; } .breadcrumbs a { text-decoration-thickness: 1px; text-underline-offset: 4px; transition: opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .faq-list details { border-color: rgba(9, 23, 44, .13); transition: opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .faq-list summary { min-height: 72px; display: flex; align-items: center; padding: 21px 48px 21px 0; font-size: 1.125rem; font-weight: 800; line-height: 1.48; letter-spacing: -.025em; } .faq-list summary::after { width: 18px; height: 18px; background-size: 14px 1.5px, 1.5px 14px; transition: transform 360ms var(--ease-spring), opacity 180ms var(--ease-out); } .faq-list details[open] { border-radius: 14px; background: linear-gradient(115deg, rgba(37, 99, 217, .065), rgba(37, 99, 217, .018)); } .site-footer { position: relative; isolation: isolate; padding: clamp(68px, 7vw, 96px) 0 max(24px, env(safe-area-inset-bottom)); background-color: var(--ink-950); background-image: radial-gradient(ellipse at 13% 0, rgba(37, 99, 217, .19), transparent 37%), linear-gradient(135deg, rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(180deg, var(--navy-800), var(--ink-950) 72%); background-size: auto, 46px 46px, 46px 46px, auto; } .site-footer .container { position: relative; z-index: 0; isolation: isolate; } .site-footer .container::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } .footer-title { margin-bottom: 20px; font-size: .73rem; letter-spacing: .17em; } .footer-about p { max-width: 44ch; color: #d0dced; font-size: .92rem; line-height: 1.8; } .footer-social { margin-top: 28px; } .social-links { gap: 9px; } .social-link { min-height: 46px; padding: 7px 14px 7px 8px; border-color: rgba(255, 255, 255, .16); border-radius: var(--pill); background: rgba(255, 255, 255, .055); box-shadow: inset 0 1px rgba(255, 255, 255, .05); transition: transform 180ms var(--ease-spring), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .social-icon-wrap { width: 30px; height: 30px; flex-basis: 30px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 4px 12px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .22); } .footer-links a, .footer-sublist a { min-height: 30px; display: inline-flex; align-items: center; line-height: 1.55; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .footer-contact-card { padding-block: 14px; border-color: rgba(255, 255, 255, .12); } .footer-contact-card strong { font-size: .82rem; line-height: 1.5; } .footer-contact-card a, .footer-contact-card span:not(.contact-mini-icon) { font-size: .84rem; line-height: 1.7; } .footer-bottom { margin-top: 50px; padding-top: 22px; font-size: .75rem; } .whatsapp-float { border-color: rgba(141, 177, 255, .23); color: #fff; background: linear-gradient(135deg, var(--blue-700), var(--navy-800)); box-shadow: 0 12px 32px rgba(3, 9, 20, .27), inset 0 1px rgba(255, 255, 255, .15); transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } .whatsapp-float::before { border-color: rgba(141, 177, 255, .48); animation: none; } @media (hover: hover) and (pointer: fine) { .whatsapp-float:hover { transform: translateY(-3px); filter: brightness(1.08); } .social-link:hover { transform: translateY(-3px); filter: brightness(1.08); } } .mobile-bottom-bar { padding: 8px; border-color: rgba(255, 255, 255, .17); border-radius: 20px; background: rgba(7, 16, 32, .96); box-shadow: 0 16px 42px rgba(3, 9, 20, .34), inset 0 1px rgba(255, 255, 255, .07); animation-duration: 420ms; } .mobile-bottom-bar a { min-height: 44px; border-radius: 13px; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .mobile-bottom-bar a:nth-child(2) { border: 1px solid rgba(141, 177, 255, .2); background: rgba(37, 99, 217, .22); } .mobile-bottom-bar a:nth-child(3) { color: var(--navy-950); } .hero-stamp, .hero::before, .approach-section::before, .cta-panel::before, .hsse-panel::before { animation: none; } @media (hover: hover) and (pointer: fine) { .hero-image-shell img { transition: transform 900ms var(--ease-out), opacity 360ms var(--ease-out), filter 360ms var(--ease-out); } .hero-image-shell:hover img { transform: scale(1.04); } .about-image { transition: opacity 360ms var(--ease-out), filter 360ms var(--ease-out); } .about-visual:hover .about-image { filter: saturate(1.035); } } .menu-toggle { border-radius: 14px; background: rgba(255, 255, 255, .065); transition: transform 180ms var(--ease-spring), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .menu-toggle:hover { transform: translateY(-1px); filter: brightness(1.1); } } @media (min-width: 1351px) { .nav-dropdown--mega { width: min(1400px, calc(100vw - 48px)); max-height: calc(100vh - 142px); } .nav-dropdown-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } } @media (max-width: 1350px) and (min-width: 821px) { .nav-dropdown-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .nav-dropdown--mega { width: min(1080px, calc(100vw - 36px)); top: 118px; } } @media (max-width: 1150px) and (min-width: 821px) { .top-contact-line { padding-inline: 13px; font-size: .69rem; gap: 8px 10px; } .top-contact-items { gap: 6px 10px; } .top-contact-line .top-social-links { gap: 4px; } .top-contact-line .top-social-link { width: 25px; height: 25px; } .nav-wrap, .site-header.is-scrolled .nav-wrap { gap: 9px; padding-inline: 13px; } .brand-text strong { font-size: .85rem; } .brand-text > span { font-size: .43rem; } .nav-links { gap: 7px; } .nav-links > a:not(.btn), .nav-dropdown-toggle { font-size: .69rem; } .nav-proposal { min-height: 44px; padding-inline: 13px; font-size: .71rem; } } @media (max-width: 820px) { html { scroll-padding-top: 92px; } .site-header { top: max(8px, env(safe-area-inset-top)); } .header-panel, .site-header.is-scrolled .header-panel { border-radius: 18px; background: rgba(7, 16, 32, .91); box-shadow: 0 14px 40px rgba(3, 9, 20, .26), inset 0 1px rgba(255, 255, 255, .07); } .top-contact-line { display: none; } .nav-wrap, .site-header.is-scrolled .nav-wrap { height: 66px; padding-inline: 12px; border: 0; border-radius: 16px; } .site-header.is-scrolled .nav-wrap { height: 60px; } .brand-logo { width: 39px; height: 39px; } .brand-text strong { font-size: .93rem; } .brand-text > span { font-size: .46rem; } .menu-toggle { width: 46px; height: 46px; flex-basis: 46px; } .nav-links, .site-header.is-scrolled .nav-links { position: fixed; z-index: var(--z-menu); top: calc(max(8px, env(safe-area-inset-top)) + 76px); right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; width: auto; max-width: none; max-height: none; height: auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 21px; background: rgba(7, 16, 32, .985); box-shadow: 0 24px 66px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .06); backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.99); transform-origin: top center; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms; } .nav-links.open, .site-header.is-scrolled .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .nav-links.open > a { animation: menu-item-in 360ms var(--ease-out) both; } .nav-links > a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 11px 14px; border-radius: 12px; font-size: 1.05rem; line-height: 1.35; white-space: normal; } .nav-links > a:not(.btn)::before, .nav-dropdown-toggle::before { display: none; } .nav-group { display: block; width: 100%; } .nav-dropdown-toggle { display: flex; width: 100%; justify-content: space-between; min-height: 48px; padding: 11px 14px; border-radius: 12px; color: #f3f6fb; font-size: 1.05rem; line-height: 1.35; white-space: normal; } .nav-dropdown, .nav-dropdown--mega { position: static; display: none; width: 100%; max-width: none; max-height: 42vh; overflow: auto; margin: 3px 0 7px; padding: 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 13px; background: rgba(255, 255, 255, .035); box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; } .nav-group.is-open > .nav-dropdown { display: block; } .nav-dropdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .nav-menu-category { padding-left: 8px; } .nav-dropdown .nav-menu-category > a { font-size: .78rem; } .nav-links .btn { align-self: stretch; min-height: 52px; margin-top: 7px; } .mobile-menu-contact { display: block; margin: 0 0 8px; padding: 14px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 15px; background: linear-gradient(145deg, rgba(37, 99, 217, .16), rgba(255, 255, 255, .035)); } .mobile-menu-contact-title { margin-bottom: 11px; color: var(--orange-300); font-size: .7rem; font-weight: 850; letter-spacing: .14em; } .mobile-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mobile-contact-grid > a, .mobile-contact-grid .mobile-rc { min-width: 0; min-height: 42px; padding: 9px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 10px; font-size: .75rem; line-height: 1.42; overflow-wrap: anywhere; } .mobile-contact-grid svg { margin-top: 2px; } .mobile-menu-contact .top-social-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .11); } .mobile-menu-contact .top-social-link { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; background: rgba(255, 255, 255, .055); transition: transform 180ms var(--ease-spring), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .mobile-menu-contact .top-social-link svg { width: 18px; height: 18px; } .nav-dropdown--mega { top: auto; } .mobile-bottom-bar a:nth-child(2) { background: rgba(37, 99, 217, .22); } } @media (max-width: 600px) { .section { padding-block: clamp(72px, 17vw, 88px); } .section-title { font-size: clamp(2.1rem, 8.7vw, 3.1rem); letter-spacing: -.055em; } .btn { min-height: 52px; padding-inline: 18px; } .page-hero { min-height: 0; padding-top: 126px; padding-bottom: 46px; } .page-hero h1 { font-size: clamp(2.35rem, 9vw, 3.35rem); } .page-hero .page-hero-copy { font-size: 1rem; } .nav-links, .site-header.is-scrolled .nav-links { top: calc(max(8px, env(safe-area-inset-top)) + 70px); right: 8px; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); padding: 11px; border-radius: 18px; } .mobile-menu-contact { padding: 11px; } .mobile-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; } .mobile-contact-grid > a, .mobile-contact-grid .mobile-rc { font-size: .78rem; padding: 8px 9px; } .mobile-menu-contact .top-social-link { width: 40px; height: 40px; } .footer-top.catalogue-footer-top { grid-template-columns: minmax(0, 1fr); gap: 30px; } .footer-about p { font-size: .94rem; } .footer-bottom { font-size: .75rem; line-height: 1.65; } .whatsapp-float { right: max(14px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px); min-width: 50px; min-height: 50px; } } @media (max-width: 390px) { .brand-text strong { font-size: .84rem; } .brand-text > span { font-size: .42rem; letter-spacing: .1em; } .nav-wrap, .site-header.is-scrolled .nav-wrap { padding-inline: 9px; } .mobile-contact-grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01ms !important; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .hero-stamp, .hero::before, .approach-section::before, .cta-panel::before, .hsse-panel::before, .whatsapp-float.is-visible:not(.is-obstructed)::before { animation: none !important; } } } @layer site-overrides { #home.hero { background: radial-gradient(ellipse at 74% 26%, rgba(52,120,246,.19), transparent 34%), radial-gradient(ellipse at 8% 95%, rgba(244,119,33,.075), transparent 29%), linear-gradient(118deg, var(--navy-950), var(--navy-900) 54%, var(--navy-800)); } #home .hero-grid { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(42px, 6.4vw, 90px); padding-top: clamp(158px, 14.5vw, 190px); padding-bottom: clamp(110px, 11vw, 148px); } #home .hero-content { max-width: 700px; } #home .hero .eyebrow { color: #d9e3f2; } #home .hero h1 { max-width: 710px; margin-block: 24px 25px; font-size: clamp(3.35rem, 1.8rem + 4.5vw, 5.55rem); letter-spacing: -.072em; text-wrap: balance; } #home .hero h1 .accent { color: var(--orange-300); } #home .hero h1 .accent::after { height: 3px; background: linear-gradient(90deg, var(--orange-500), var(--orange-300)); } #home .hero-lead { max-width: 58ch; color: #d5dfed; font-size: clamp(1.02rem, .94rem + .24vw, 1.17rem); line-height: 1.8; } #home .hero-actions { gap: 13px; margin-top: 31px; } #home .hero-footnote { margin-top: 27px; font-size: .8rem; } #home .hero-visual { isolation: isolate; max-width: 601px; } #home .hero-visual::before { content: ''; position: absolute; z-index: -1; inset: 15px -12px -12px 16px; border: 1px solid rgba(255,148,71,.55); border-radius: 28px; pointer-events: none; opacity: .9; } #home .hero-image-shell { max-width: 601px; padding: 7px; animation-duration: .86s; border-radius: 28px; box-shadow: 0 28px 72px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.2); } #home .hero-image-shell img { border-radius: 21px; } #home .hero-image-shell::after { inset: 7px; border-radius: 21px; background: linear-gradient(180deg, rgba(5,11,21,0), rgba(5,11,21,.18)); } #home .visual-corner { top: 12%; right: -14px; min-width: 165px; padding: 15px 18px; border-color: rgba(255,255,255,.22); border-radius: 14px; background: rgba(7,16,32,.88); animation: card-pop .65s .66s var(--ease-out) both; } #home .visual-bottom { left: -28px; bottom: 7%; max-width: 300px; padding: 15px 17px; border-color: rgba(255,255,255,.2); border-radius: 15px; background: rgba(7,16,32,.9); animation: card-pop .65s .78s var(--ease-out) both; } #home .hero-stamp { animation: none; } .principle-bar { z-index: 6; margin-top: -48px; padding-bottom: 0; } .principle-grid { padding: 12px; border-color: rgba(9,23,44,.11); border-radius: 22px; background: rgba(255,254,250,.97); box-shadow: 0 22px 58px rgba(7,16,32,.12), inset 0 1px #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .principle { gap: 17px; min-height: 94px; padding: 18px 22px; border-radius: 14px; } .principle-num { flex: 0 0 auto; color: var(--orange-text); font: 400 clamp(2rem, 2.7vw, 2.65rem)/.9 var(--font-accent); letter-spacing: -.025em; } .principle strong { font-size: .91rem; letter-spacing: -.025em; } .principle span:last-child { font-size: .76rem; line-height: 1.55; } #about.section { padding-block: clamp(100px, 10.4vw, 148px); } #about .about-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(46px, 7.2vw, 104px); } #about .about-visual { padding: 0 16px 24px 0; } #about .about-visual::before { inset: 22px 0 0 22px; border-color: rgba(244,119,33,.68); border-radius: 28px; transform: translate(9px,9px); } #about .about-image { border: 7px solid var(--ivory-50); border-radius: 28px; box-shadow: 0 18px 42px rgba(7,16,32,.12); } #about .about-image-label { left: auto; right: 0; bottom: 0; max-width: min(78%, 300px); padding: 15px 18px; border-radius: 14px; background: rgba(7,16,32,.94); box-shadow: 0 14px 36px rgba(7,16,32,.22), inset 0 1px rgba(255,255,255,.1); } #about .about-copy .section-title { max-width: 12.5ch; font-size: clamp(2.4rem, 1.55rem + 2.7vw, 3.7rem); } #about .about-copy .section-copy:first-of-type { font-size: 1.07rem; line-height: 1.8; } #about .about-copy .section-copy + .section-copy { margin-top: 15px; font-size: .96rem; line-height: 1.82; } #about .registration-strip { margin-top: 27px; padding: 15px 17px; border-radius: 14px; } #about .about-values { gap: 12px; margin-top: 25px; } #about .value-note { padding: 18px; border-color: rgba(9,23,44,.1); border-radius: 15px; background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(52,120,246,.08), transparent 62%), linear-gradient(145deg, rgba(255,254,250,.92), rgba(255,255,255,.54)); } #about .value-note::before { right: 14px; transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease-out); } #about .value-note.is-visible::before, #about .value-note.reveal.is-visible::before { transform: scaleX(1); } #about .value-note strong { font-size: .9rem; } #about .value-note p { font-size: .8rem; line-height: 1.74; } #about + .section { padding-block: clamp(82px, 9vw, 122px); background: var(--paper); } #about + .section .section-heading-row { margin-bottom: 38px; } #about + .section .mission-grid { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 18px; margin-top: 35px; } #about + .section .mission-card { min-height: 275px; padding: clamp(27px,3.5vw,43px); overflow: hidden; border-color: rgba(9,23,44,.11); border-radius: 22px; background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(52,120,246,.075), transparent 64%), linear-gradient(145deg, #fffefa, #f7f5f0); box-shadow: inset 0 1px #fff, 0 10px 32px rgba(7,16,32,.05); transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } #about + .section .mission-card::before { content: ''; position: absolute; top: 0; left: 0; right: 35%; height: 3px; background: linear-gradient(90deg, var(--orange-500), var(--blue-500)); } #about + .section .mission-card::after { position: absolute; right: 20px; bottom: -42px; color: rgba(23,77,182,.055); font: 400 10rem/.9 var(--font-accent); letter-spacing: -.08em; pointer-events: none; } #about + .section .mission-card:first-child::after { content: '01'; } #about + .section .mission-card:last-child::after { content: '02'; } #about + .section .mission-card > * { position: relative; z-index: 1; } #about + .section .mission-card .card-kicker { color: var(--orange-text); } #about + .section .mission-card h3 { margin: 17px 0 14px; font-size: clamp(1.45rem, 1.2rem + .6vw, 1.9rem); } #about + .section .mission-card p { max-width: 54ch; font-size: .91rem; line-height: 1.8; } #featured-training.section { padding-block: clamp(92px, 10vw, 140px); background: linear-gradient(180deg, var(--ivory-50), #f1f0eb); } #featured-training .section-heading-row { align-items: end; margin-bottom: 44px; } #featured-training .section-heading-row .section-copy { max-width: 47ch; font-size: 1rem; } #featured-training .course-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch; } #featured-training .catalogue-course-card { position: relative; border-color: rgba(9,23,44,.1); border-radius: 20px; background: linear-gradient(155deg, #fffefa, #fff 72%); box-shadow: inset 0 1px #fff, 0 8px 24px rgba(7,16,32,.045); transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } #featured-training .catalogue-course-card::before { content: ''; position: absolute; z-index: 2; top: 0; left: 22px; right: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--orange-500), var(--blue-500)); transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease-out); } #featured-training .course-card-top { align-items: flex-start; padding: 22px 22px 0; } #featured-training .catalogue-course-card { background-image: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(52,120,246,.075), transparent 64%), linear-gradient(155deg, #fffefa, #fff 72%); } #featured-training .course-number { color: var(--navy-900); font: 400 1.35rem/.95 var(--font-accent); letter-spacing: -.025em; white-space: nowrap; } #featured-training .course-number::before { width: 15px; height: 2px; } #featured-training .course-category-chip { max-width: 58%; white-space: normal; text-align: right; } #featured-training .course-card-body { padding: 20px 22px 23px; } #featured-training .course-card-symbol { width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px; } #featured-training .course-card-body h3 { min-height: 2.65em; font-size: 1.08rem; line-height: 1.35; } #featured-training .course-card-body p { font-size: .85rem; line-height: 1.75; } #featured-training .course-card-meta { margin-top: 18px; } #featured-training .course-fee { font-size: .89rem; } #featured-training .course-card-actions { padding-top: 21px; } #featured-training .course-card-actions .btn { min-height: 44px; } #featured-training .pricing-note { margin-top: 24px; } #training-categories.section { padding-block: clamp(88px, 9.5vw, 130px); } #training-categories .section-heading-row { margin-bottom: 42px; } #training-categories .category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } #training-categories .category-card { min-height: 275px; padding: 27px; overflow: hidden; border-color: rgba(9,23,44,.105); border-radius: 20px; background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(52,120,246,.075), transparent 64%), linear-gradient(148deg, rgba(255,254,250,.98), rgba(246,247,249,.94)); box-shadow: inset 0 1px #fff, 0 6px 22px rgba(7,16,32,.035); transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } #training-categories .category-card::before { position: absolute; z-index: 0; top: 4px; right: 18px; color: transparent; font: 400 clamp(4.8rem, 7vw, 7rem)/1 var(--font-accent); letter-spacing: -.08em; -webkit-text-stroke: 1px rgba(23,77,182,.14); pointer-events: none; } #training-categories .category-card:nth-child(1)::before { content: 'A'; } #training-categories .category-card:nth-child(2)::before { content: 'B'; } #training-categories .category-card:nth-child(3)::before { content: 'C'; } #training-categories .category-card:nth-child(4)::before { content: 'D'; } #training-categories .category-card:nth-child(5)::before { content: 'E'; } #training-categories .category-card:nth-child(6)::before { content: 'F'; } #training-categories .category-card > * { position: relative; z-index: 1; } #training-categories .category-card .category-mark { width: 48px; height: 48px; border: 1px solid rgba(37,99,217,.13); border-radius: 14px; background: linear-gradient(145deg, #fff, rgba(37,99,217,.09)); } #training-categories .category-card .card-kicker { margin-top: 6px; } #training-categories .category-card h3 { max-width: 23ch; margin-block: 2px 0; font-size: 1.09rem; line-height: 1.32; } #training-categories .category-card p { max-width: 38ch; font-size: .85rem; line-height: 1.75; } #training-categories .category-count { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 13px; } #services.services-section { isolation: isolate; padding-block: clamp(94px, 10.2vw, 142px); color: #fff; background: radial-gradient(ellipse at 94% 5%, rgba(52,120,246,.17), transparent 31%), linear-gradient(126deg, var(--navy-950), var(--navy-900) 58%, var(--navy-800)); } #services.services-section::before { top: -115px; right: -150px; border-color: rgba(141,177,255,.1); box-shadow: 0 0 0 42px rgba(255,255,255,.016), 0 0 0 84px rgba(255,255,255,.01); } #services .section-heading-row { margin-bottom: 46px; } #services .section-title { color: #fff; } #services .section-copy { color: #c8d5e8; } #services .eyebrow { color: var(--orange-300); } #services .service-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; } #services .service-card, #services .service-card:first-child, #services .service-card:nth-child(6) { display: flex; grid-column: auto; grid-row: auto; grid-template-columns: none; align-items: stretch; justify-content: flex-start; min-height: 265px; padding: clamp(23px,2.5vw,32px); border: 1px solid rgba(255,255,255,.115); border-radius: 20px; color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.073), rgba(255,255,255,.035)); box-shadow: inset 0 1px rgba(255,255,255,.075); transform-style: flat; transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } #services .service-card:first-child { background: linear-gradient(145deg, rgba(37,99,217,.22), rgba(255,255,255,.045)); border-color: rgba(141,177,255,.23); } #services .service-card::before { background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(52,120,246,.2), transparent 62%); opacity: .22; } #services .service-card::after { left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--orange-500), var(--blue-500)); transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease-out); } #services .service-top, #services .service-card:nth-child(6) .service-top { width: 100%; margin-bottom: 30px; } #services .service-icon, #services .service-card:first-child .service-icon { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(141,177,255,.2); border-radius: 14px; color: #bdd0ff; background: linear-gradient(145deg, rgba(37,99,217,.24), rgba(255,255,255,.045)); } #services .service-index { color: var(--orange-300); font-size: .69rem; } #services .service-card h3, #services .service-card:first-child h3, #services .service-card:nth-child(6) h3 { max-width: 26ch; margin: 0 0 11px; font-size: clamp(1.05rem, .95rem + .24vw, 1.25rem); line-height: 1.34; } #services .service-card p, #services .service-card:first-child p, #services .service-card:nth-child(6) p { max-width: 44ch; margin: 0; color: #cbd8e8; font-size: .88rem; line-height: 1.78; } #sectors.sector-section { padding-block: clamp(88px, 9.6vw, 132px); background: var(--paper); } #sectors .section-heading-row { margin-bottom: 35px; } #sectors .sector-grid { display: block; border-top: 1px solid rgba(9,23,44,.13); } #sectors .sector-card { display: grid; grid-template-columns: 78px minmax(220px,.72fr) minmax(0,1.28fr) 26px; align-items: center; gap: 18px; min-height: 0; padding: 25px 6px; overflow: visible; border: 0; border-bottom: 1px solid rgba(9,23,44,.13); border-radius: 0; background: transparent; box-shadow: none; transform: none; transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } #sectors .sector-card::before { content: none; } #sectors .sector-card { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(52,120,246,.065), transparent 65%), transparent; } #sectors .sector-card h3 { transition: transform 360ms var(--ease-out); } #sectors .sector-card::after { content: '↗'; justify-self: end; color: var(--blue-700); font: 400 1.6rem/1 var(--font-accent); opacity: 0; transform: translate(-4px,4px); transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); } #sectors .sector-number { margin: 0; color: var(--orange-text); font: 400 2.15rem/.9 var(--font-accent); letter-spacing: -.02em; } #sectors .sector-card h3 { max-width: none; margin: 0; font-size: clamp(1.02rem, .9rem + .3vw, 1.22rem); line-height: 1.4; } #sectors .sector-card p { color: var(--muted); font-size: .9rem; line-height: 1.72; } #sectors .audience-panel { margin-top: 47px; padding: clamp(28px,4vw,46px); border-radius: 24px; } #sectors .audience-list { gap: 20px 26px; } #sectors .audience-list p { font-size: .86rem; line-height: 1.75; } #sectors .capability-strip { margin-top: 32px; padding-top: 30px; } #sectors .capability-items { gap: 10px; } #sectors .capability-items span { min-height: 38px; padding: 8px 14px; } #delivery-options.section { padding-block: clamp(90px, 9.7vw, 134px); background: linear-gradient(180deg, var(--ivory-50), var(--paper)); } #delivery-options .section-heading-row { margin-bottom: 42px; } #delivery-options .delivery-grid { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 18px; } #delivery-options .delivery-card { grid-column: span 4; min-height: 250px; padding: clamp(23px,2.8vw,34px); border-radius: 20px; background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(52,120,246,.075), transparent 64%), linear-gradient(155deg, #fffefa, #f4f6f9); box-shadow: inset 0 1px #fff, 0 8px 24px rgba(7,16,32,.04); transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } #delivery-options .delivery-card:nth-child(4) { grid-column: span 7; min-height: 220px; } #delivery-options .delivery-card:nth-child(5) { grid-column: span 5; min-height: 220px; } #delivery-options .delivery-card .category-mark { width: 49px; height: 49px; border: 1px solid rgba(37,99,217,.14); border-radius: 14px; } #delivery-options .delivery-card h3 { margin: auto 0 10px; padding-top: 23px; font-size: 1.12rem; } #delivery-options .delivery-card p { font-size: .88rem; line-height: 1.78; } #delivery-options > .container > .pricing-note { max-width: 90ch; margin-top: 27px; padding: 16px 19px; border-left: 2px solid var(--orange-500); background: rgba(255,255,255,.62); } #approach.approach-section { padding-block: clamp(96px, 10vw, 144px); } #approach .approach-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(54px,8vw,116px); } #approach .approach-intro { top: 105px; } #approach .approach-intro .section-title { max-width: 10.5ch; font-size: clamp(2.6rem,1.55rem + 2.8vw,3.85rem); } #approach .steps { padding-left: 5px; } #approach .step { transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } #approach .step { padding: 26px 14px 29px; gap: 20px; border-radius: 14px; } #approach .step-number { width: 39px; height: 39px; font: 400 1.2rem/1 var(--font-accent); color: var(--orange-300); border-color: rgba(255,148,71,.38); } #approach .step h3 { font-size: 1.12rem; } #approach .step p { max-width: 58ch; font-size: .9rem; } #principles.values-section { padding-block: clamp(88px, 9.8vw, 136px); background: linear-gradient(180deg, var(--paper), var(--ivory-50)); } #principles > .container > .section-title { max-width: 12ch; font-size: clamp(2.4rem,1.4rem + 2.8vw,3.7rem); } #principles > .container > .section-copy { max-width: 63ch; font-size: 1rem; } #principles .values-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 43px; counter-reset: home-value; } #principles .culture-card { min-height: 220px; position: relative; padding: 25px; overflow: hidden; border-radius: 19px; background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(52,120,246,.075), transparent 64%), #fffefa; box-shadow: inset 0 1px #fff, 0 8px 24px rgba(7,16,32,.045); counter-increment: home-value; transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } #principles .culture-card::before { left: 25px; right: 25px; transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease-out); } #principles .culture-card.is-visible::before, #principles .culture-card.reveal.is-visible::before { transform: scaleX(1); } #principles .culture-card::after { content: counter(home-value, decimal-leading-zero); position: absolute; z-index: 0; right: 12px; bottom: -18px; color: rgba(23,77,182,.06); font: 400 6.6rem/.9 var(--font-accent); pointer-events: none; } #principles .culture-card > * { position: relative; z-index: 1; } #principles .culture-card .culture-icon { width: 47px; height: 47px; border-radius: 14px; } #principles .culture-card h3 { font-size: 1.05rem; } #principles .culture-card p { font-size: .85rem; line-height: 1.76; } #principles .culture-card:nth-child(3) { color: #fff; border-color: rgba(141,177,255,.2); background: linear-gradient(145deg,var(--navy-900),var(--navy-800)); } #principles .culture-card:nth-child(3) p { color: #d2deee; } #principles .culture-card:nth-child(3) .culture-icon { color: var(--orange-300); border-color: rgba(255,148,71,.2); background: rgba(255,255,255,.07); } #principles .culture-card:nth-child(3)::after { color: rgba(255,255,255,.055); } #principles .hsse-panel { margin-top: 43px; padding: clamp(32px,4.6vw,58px); border-radius: 26px; box-shadow: 0 22px 52px rgba(7,16,32,.12); } #principles .hsse-panel h3 { max-width: 14ch; font-size: clamp(2rem,1.4rem + 2.15vw,3.15rem); line-height: 1.02; } #principles .hsse-panel p { max-width: 62ch; font-size: .95rem; } #credentials.trust-section { padding-block: clamp(88px,9.5vw,132px); background: linear-gradient(145deg,#edf1f6,var(--ivory-50) 78%); } #credentials .section-heading-row { margin-bottom: 36px; } #credentials .section-heading-row .section-copy { max-width: 53ch; font-size: .95rem; } #credentials #trust-modules { gap: 18px; } #credentials .trust-module { padding: 29px; border-radius: 20px; background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(52,120,246,.07), transparent 64%), linear-gradient(145deg,#fffefa,#f9fafc); box-shadow: inset 0 1px #fff, 0 9px 28px rgba(7,16,32,.045); transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 360ms var(--ease-out); } #credentials .trust-module h3 { font-size: 1.05rem; } #credentials .trust-module ul { font-size: .85rem; line-height: 1.8; } #credentials .coverage-card { margin-top: 24px; border-radius: 24px; box-shadow: inset 0 1px rgba(255,255,255,.9), 0 16px 42px rgba(7,16,32,.075); } #credentials .official-logo-plate { border: 1px solid rgba(9,23,44,.08); border-radius: 14px; background: #fffefa; box-shadow: 0 8px 28px rgba(7,16,32,.06); } #credentials .coverage-label { letter-spacing: .16em; } #credentials .coverage-card h3 { font-size: clamp(1.45rem,1.1rem + .75vw,2rem); } #faq.faq-section { padding-block: clamp(84px,9.5vw,130px); background: var(--paper); } #faq .faq-layout { gap: clamp(48px,7.5vw,102px); } #faq .faq-layout > .reveal:first-child { top: 106px; } #faq .faq-layout > .reveal:first-child .section-title { max-width: 11ch; font-size: clamp(2.3rem,1.35rem + 2.6vw,3.55rem); } #faq .faq-list details { padding: 0 4px; border-top-color: rgba(9,23,44,.12); } #faq .faq-list details:last-child { border-bottom-color: rgba(9,23,44,.12); } #faq .faq-list summary { min-height: 70px; padding-block: 22px; font-size: 1.02rem; } #faq .faq-list .faq-answer p { padding-bottom: 22px; font-size: .9rem; line-height: 1.8; } #contact.section { padding-block: clamp(88px,9.5vw,132px); background: linear-gradient(145deg,#eef1f6,var(--ivory-50) 76%); } #contact .form-layout { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: start; gap: clamp(36px,6vw,80px); } #contact .form-layout > .reveal { position: sticky; top: 108px; } #contact .form-layout > .reveal .section-title { max-width: 12ch; font-size: clamp(2.4rem,1.4rem + 2.6vw,3.6rem); } #contact .form-layout > .reveal .section-copy { font-size: .98rem; } #contact .form-card { border-radius: 22px; box-shadow: inset 0 1px #fff, 0 18px 48px rgba(7,16,32,.09); } #contact-cta.cta-section { padding-block: clamp(72px,8.5vw,118px); background: var(--paper); } #contact-cta .cta-panel { min-height: 330px; padding: clamp(36px,6vw,76px); border-radius: 30px; border-color: rgba(255,255,255,.17); background: radial-gradient(ellipse at 90% 8%, rgba(52,120,246,.25), transparent 34%), radial-gradient(ellipse at 4% 100%, rgba(244,119,33,.11), transparent 38%), linear-gradient(124deg,var(--navy-950),var(--navy-900) 58%,var(--navy-700)); box-shadow: 0 26px 66px rgba(7,16,32,.2), inset 0 1px rgba(255,255,255,.1); } #contact-cta .cta-content { max-width: 700px; } #contact-cta .cta-content h2 { max-width: 11ch; font-size: clamp(2.8rem,1.55rem + 3.5vw,4.85rem); } #contact-cta .cta-content p { max-width: 58ch; font-size: 1rem; } @media (max-width: 1100px) { #home .hero-grid { gap: 36px; } #home .visual-corner { right: -7px; } #home .visual-bottom { left: -12px; } #about .about-grid { gap: 42px; } #services .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #sectors .sector-card { grid-template-columns: 58px minmax(190px,.75fr) minmax(0,1.25fr) 20px; gap: 14px; } #principles .culture-grid { gap: 13px; } } @media (max-width: 820px) { #home .hero-grid { grid-template-columns: minmax(0,1fr); gap: 43px; padding-top: 134px; padding-bottom: 85px; } #home .hero-content { max-width: 690px; } #home .hero h1 { font-size: clamp(3.2rem,8.6vw,5rem); } #home .hero-visual { width: min(100%,601px); justify-self: center; } .principle-bar { margin-top: -32px; } .principle-grid { grid-template-columns: minmax(0,1fr); padding: 8px; } .principle { min-height: 78px; padding: 14px 16px; } .principle + .principle { border-top: 1px solid var(--hairline); border-left: 0; } .principle-num { font-size: 2rem; } #about .about-grid { grid-template-columns: minmax(0,1fr); gap: 42px; } #about .about-visual { width: min(100%,650px); margin-inline: auto; } #about .about-copy .section-title { max-width: 15ch; } #about + .section .mission-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #featured-training .course-grid, #training-categories .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #services .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #services .service-card, #services .service-card:first-child, #services .service-card:nth-child(6) { min-height: 245px; } #sectors .sector-card { grid-template-columns: 48px minmax(0,.8fr) minmax(0,1.2fr) 18px; padding-block: 21px; } #sectors .audience-panel { gap: 25px; } #delivery-options .delivery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #delivery-options .delivery-card, #delivery-options .delivery-card:nth-child(4), #delivery-options .delivery-card:nth-child(5) { grid-column: auto; min-height: 220px; } #delivery-options .delivery-card:first-child { grid-column: 1 / -1; min-height: 205px; } #approach .approach-grid { grid-template-columns: minmax(0,1fr); gap: 36px; } #approach .approach-intro { position: static; } #approach .approach-intro .section-title { max-width: 15ch; } #principles .culture-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #principles .culture-card { min-height: 205px; } #credentials .coverage-card { grid-template-columns: 190px minmax(0,1fr); } #faq .faq-layout { grid-template-columns: minmax(0,1fr); gap: 28px; } #faq .faq-layout > .reveal:first-child { position: static; } #faq .faq-layout > .reveal:first-child .section-title { max-width: 16ch; } #contact .form-layout { grid-template-columns: minmax(0,1fr); gap: 30px; } #contact .form-layout > .reveal { position: static; } #contact .form-layout > .reveal .section-title { max-width: 16ch; } } @media (max-width: 600px) { #home .hero-grid { gap: 33px; padding-top: 123px; padding-bottom: 68px; } #home .hero h1 { margin-block: 17px 20px; font-size: clamp(2.8rem,11.3vw,4rem); line-height: 1.02; } #home .hero-lead { font-size: 1rem; line-height: 1.78; } #home .hero-actions { margin-top: 23px; } #home .hero-visual::before { inset: 9px -5px -8px 9px; border-radius: 18px; } #home .hero-image-shell { padding: 5px; border-radius: 20px; } #home .hero-image-shell img { border-radius: 15px; } #home .hero-image-shell::after { inset: 5px; border-radius: 15px; } #home .visual-corner { top: 8%; right: -3px; min-width: 130px; padding: 10px 12px; } #home .visual-bottom { left: 7px; bottom: 7%; max-width: min(82%,290px); padding: 10px 12px; } #home .visual-bottom strong { font-size: .72rem; } #home .visual-bottom span { font-size: .62rem; } #home .hero-stamp { width: 44px; height: 44px; right: 6%; bottom: -15px; } #home .hero-stamp svg { width: 22px; height: 22px; } .principle-bar { margin-top: -18px; } #about.section, #about + .section, #featured-training.section, #training-categories.section, #services.services-section, #sectors.sector-section, #delivery-options.section, #approach.approach-section, #principles.values-section, #credentials.trust-section, #faq.faq-section, #contact.section { padding-block: 76px; } #about .about-visual { padding: 0 8px 20px 0; } #about .about-image { border-width: 5px; border-radius: 20px; } #about .about-visual::before { inset: 14px 0 0 14px; border-radius: 19px; } #about .about-image-label { max-width: min(88%,280px); right: 0; padding: 11px 13px; } #about .about-copy .section-title { max-width: 15ch; } #about .about-copy .section-copy:first-of-type { font-size: 1rem; } #about .about-copy .section-copy + .section-copy { font-size: .91rem; } #about .about-values { grid-template-columns: minmax(0,1fr); } #about + .section .mission-grid { grid-template-columns: minmax(0,1fr); gap: 13px; } #about + .section .mission-card { min-height: 0; padding: 25px; } #featured-training .section-heading-row, #training-categories .section-heading-row, #services .section-heading-row, #sectors .section-heading-row, #delivery-options .section-heading-row { align-items: flex-start; gap: 18px; margin-bottom: 28px; } #featured-training .course-grid, #training-categories .category-grid { grid-template-columns: minmax(0,1fr); gap: 14px; } #featured-training .course-card-body h3 { min-height: 0; } #featured-training .course-card-top { padding-inline: 18px; } #featured-training .course-card-body { padding: 18px 18px 20px; } #training-categories .category-card { min-height: 245px; padding: 24px; } #services .service-grid { grid-template-columns: minmax(0,1fr); gap: 12px; } #services .service-card, #services .service-card:first-child, #services .service-card:nth-child(6) { min-height: 0; padding: 23px; } #services .service-top, #services .service-card:nth-child(6) .service-top { margin-bottom: 21px; } #services .service-card h3, #services .service-card:first-child h3, #services .service-card:nth-child(6) h3 { font-size: 1.08rem; } #sectors .sector-card { grid-template-columns: 42px minmax(0,1fr) 20px; gap: 9px 14px; padding-block: 19px; } #sectors .sector-number { grid-column: 1; grid-row: 1 / span 2; font-size: 1.8rem; } #sectors .sector-card h3 { grid-column: 2; grid-row: 1; } #sectors .sector-card p { grid-column: 2; grid-row: 2; font-size: .85rem; } #sectors .sector-card::after { grid-column: 3; grid-row: 1; } #sectors .audience-panel { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 25px 20px; } #sectors .audience-list { grid-template-columns: minmax(0,1fr); gap: 15px; } #sectors .capability-strip { grid-template-columns: minmax(0,1fr); gap: 20px; } #delivery-options .delivery-grid { grid-template-columns: minmax(0,1fr); gap: 12px; } #delivery-options .delivery-card, #delivery-options .delivery-card:nth-child(4), #delivery-options .delivery-card:nth-child(5), #delivery-options .delivery-card:first-child { grid-column: 1 / -1; min-height: 0; padding: 23px; } #delivery-options .delivery-card h3 { padding-top: 17px; } #approach .approach-grid { gap: 26px; } #approach .approach-intro .section-title { max-width: 13ch; } #approach .step { grid-template-columns: 41px minmax(0,1fr); gap: 12px; padding: 21px 4px; } #principles .culture-grid { grid-template-columns: minmax(0,1fr); gap: 11px; margin-top: 28px; } #principles .culture-card { min-height: 0; padding: 21px; } #principles .hsse-panel { grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 29px; padding: 27px 22px; border-radius: 21px; } #credentials .trust-module { padding: 22px; } #credentials .coverage-card { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 23px; } #credentials .official-logo-plate { width: 100%; max-width: 320px; } #faq .faq-list summary { min-height: 62px; font-size: .96rem; } #contact-cta.cta-section { padding-block: 64px; } #contact-cta .cta-panel { min-height: 0; padding: 29px 23px; border-radius: 23px; } #contact-cta .cta-content h2 { font-size: clamp(2.55rem,10.3vw,3.55rem); } #contact-cta .cta-action { width: 100%; } #contact-cta .cta-action .btn { width: 100%; } } @media (hover: hover) and (pointer: fine) { #featured-training .catalogue-course-card:hover, #training-categories .category-card:hover, #delivery-options .delivery-card:hover, #principles .culture-card:hover { transform: translateY(-6px); filter: saturate(1.025); } #featured-training .catalogue-course-card:hover::before { transform: scaleX(1); } #training-categories .category-card:hover { filter: saturate(1.04); } #sectors .sector-card:hover { transform: none; background: linear-gradient(90deg, rgba(37,99,217,.045), transparent 78%); } #sectors .sector-card:hover h3 { transform: translateX(8px); } #sectors .sector-card:hover::after { opacity: 1; transform: translate(0,0); } #services .service-card:hover { transform: translateY(-5px); filter: brightness(1.045); } #services .service-card:hover::after { transform: scaleX(1); } #principles .culture-card:nth-child(3):hover { filter: brightness(1.08); } } } @layer site-overrides { .page-hero { min-height: clamp(390px, 51vh, 550px); padding: clamp(158px, 15vw, 204px) 0 clamp(66px, 7vw, 92px); overflow: hidden; border-bottom: 1px solid rgba(141, 177, 255, .14); background-image: radial-gradient(ellipse at 78% 15%, rgba(52, 120, 246, .2), transparent 34%), radial-gradient(ellipse at 6% 100%, rgba(244, 119, 33, .07), transparent 34%), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(118deg, var(--ink-950), var(--navy-900) 54%, var(--navy-800)); background-size: auto, auto, 48px 48px, 48px 48px, auto; } .page-hero::before { content: ''; position: absolute; z-index: -1; top: 13%; right: max(-90px, calc((100vw - var(--max)) / 2 - 105px)); width: clamp(300px, 36vw, 510px); aspect-ratio: 1; border: 1px solid rgba(141, 177, 255, .16); border-radius: 50%; opacity: .72; background: repeating-radial-gradient(circle, transparent 0 35px, rgba(141, 177, 255, .075) 36px 37px, transparent 38px 67px); box-shadow: inset 0 0 0 28px rgba(255, 255, 255, .008), inset 0 0 0 84px rgba(255, 255, 255, .008); -webkit-mask-image: radial-gradient(circle, #000 25%, rgba(0, 0, 0, .74) 55%, transparent 75%); mask-image: radial-gradient(circle, #000 25%, rgba(0, 0, 0, .74) 55%, transparent 75%); pointer-events: none; } .page-hero::after { content: ''; position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 119, 33, .56) 24%, rgba(52, 120, 246, .58) 67%, transparent); pointer-events: none; } .page-hero-inner { position: relative; z-index: 1; } .page-hero .breadcrumbs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 9px; max-width: 100%; padding: 9px 13px; border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--pill); color: #d2dced; background: rgba(255, 255, 255, .045); box-shadow: inset 0 1px rgba(255, 255, 255, .045); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .page-hero .breadcrumbs a { color: #eef3fb; } .page-hero .breadcrumbs a:hover { color: var(--orange-300); } .page-hero .eyebrow { margin-top: 28px; color: var(--orange-300); } .page-hero h1 { max-width: 18ch; margin: 17px 0 22px; font-size: clamp(3rem, 1.8rem + 3.75vw, 5rem); line-height: .99; letter-spacing: -.06em; text-shadow: 0 8px 34px rgba(0, 0, 0, .15); } .page-hero .page-hero-copy { max-width: 66ch; color: #d6e0ef; font-size: clamp(1rem, .95rem + .22vw, 1.14rem); line-height: 1.8; } .page-inner main > .section, .page-course-detail main > .section, .page-training main > .section, .page-contact main > .section, .page-enrol main > .section, .page-request-proposal main > .section, .page-consultancy main > .section, .page-corporate-training main > .section, .page-online-training main > .section, .page-about main > .section, .page-about-vision-mission main > .section, .page-about-core-values main > .section, .page-about-management-people main > .section, .page-about-hsse-environmental-responsibility main > .section, .page-about-why-choose-us main > .section, .page-insights main > .section, .page-insight-article main > .section, .page-privacy-policy main > .section, .page-terms main > .section { padding-block: clamp(76px, 8.5vw, 120px); } .page-inner .section-heading-row, .page-training .section-heading-row, .page-consultancy .section-heading-row, .page-corporate-training .section-heading-row, .page-about .section-heading-row, .page-insights .section-heading-row { margin-bottom: clamp(28px, 4vw, 44px); } .page-inner .section-title, .page-training .section-title, .page-consultancy .section-title, .page-corporate-training .section-title, .page-online-training .section-title, .page-about .section-title, .page-about-vision-mission .section-title, .page-about-core-values .section-title, .page-about-management-people .section-title, .page-about-hsse-environmental-responsibility .section-title, .page-about-why-choose-us .section-title, .page-contact .section-title, .page-enrol .section-title, .page-request-proposal .section-title { letter-spacing: -.058em; text-wrap: balance; } .page-training .section-light > .container { position: relative; } .page-training .filter-toolbar { position: sticky; z-index: 35; top: 12px; display: grid; grid-template-columns: minmax(240px, 1.5fr) minmax(150px, .62fr) minmax(160px, .68fr); gap: 14px; align-items: end; padding: 18px; border: 1px solid rgba(141, 177, 255, .3); border-radius: 22px; background: rgba(255, 254, 250, .94); box-shadow: 0 14px 35px rgba(7, 16, 32, .09), inset 0 1px #fff; backdrop-filter: blur(15px) saturate(120%); -webkit-backdrop-filter: blur(15px) saturate(120%); } .page-training .filter-toolbar .field label { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; letter-spacing: .015em; } .page-training .filter-toolbar .field label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--orange-500); } .page-training .filter-toolbar .field input, .page-training .filter-toolbar .field select { border-radius: 12px; background-color: #fffefa; } .page-training .category-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 23px; padding: 0 0 3px; } .page-training .filter-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 14px; border-color: rgba(9, 23, 44, .15); background: rgba(255, 254, 250, .8); box-shadow: inset 0 1px #fff; scroll-snap-align: start; } .page-training .filter-chip::before { content: ''; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--orange-400); opacity: 0; transform: scale(.5); transition: transform var(--t-fast) var(--ease-spring), opacity var(--t-fast); } .page-training .filter-chip[aria-pressed="true"] { border-color: var(--navy-900); color: var(--paper); background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); box-shadow: 0 5px 14px rgba(7, 16, 32, .16), inset 0 1px rgba(255, 255, 255, .09); } .page-training .filter-chip[aria-pressed="true"]::before { opacity: 1; transform: scale(1); } .page-training .result-line { align-items: baseline; gap: 16px 26px; padding: 0 0 18px; margin: 25px 0 24px; border-bottom: 1px solid rgba(9, 23, 44, .12); font-size: .82rem; } .page-training #course-result-count { color: var(--navy-900); font: italic 1.55rem/1 var(--font-accent); letter-spacing: -.02em; } .page-training .course-grid { gap: 20px; align-items: stretch; } .page-training .catalogue-course-card { position: relative; overflow: hidden; min-height: 100%; border: 1px solid rgba(9, 23, 44, .105); border-radius: 22px; background-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(52, 120, 246, .075), transparent 65%), linear-gradient(150deg, var(--paper), #fff 77%); box-shadow: 0 6px 20px rgba(7, 16, 32, .035), inset 0 1px #fff; transition: transform 360ms var(--ease-out), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .page-training .catalogue-course-card::before { content: ''; position: absolute; top: 0; left: 21px; right: 21px; height: 2px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--orange-400), var(--blue-500) 58%, transparent); opacity: .74; transform: scaleX(.42); transform-origin: left; transition: transform 360ms var(--ease-out), opacity 180ms; } .page-training .catalogue-course-card .course-card-top { padding: 23px 22px 0; align-items: flex-start; } .page-training .catalogue-course-card .course-number { font: italic 1.1rem/1 var(--font-accent); letter-spacing: -.01em; color: var(--navy-800); } .page-training .catalogue-course-card .course-number::before { width: 17px; } .page-training .catalogue-course-card .course-category-chip { line-height: 1.4; text-align: right; } .page-training .catalogue-course-card .course-card-body { padding: 20px 22px 23px; } .page-training .catalogue-course-card .course-card-symbol { width: 48px; height: 48px; border-radius: 15px; } .page-training .catalogue-course-card .course-card-body h3 { min-height: 2.65em; margin-bottom: 12px; font-size: 1.08rem; line-height: 1.34; } .page-training .catalogue-course-card .course-card-body p { color: #4e5c70; font-size: 1rem; line-height: 1.7; } .page-training .catalogue-course-card .course-card-meta { margin-top: 18px; } .page-training .catalogue-course-card .course-fee { font-size: .95rem; } .page-training .catalogue-course-card .course-card-actions { gap: 14px; padding-top: 22px; } .page-training .catalogue-course-card .course-card-actions .btn { min-height: 44px; } .page-training .catalogue-course-card.is-filtered-in { animation: catalogue-card-enter 280ms var(--ease-out) backwards; animation-delay: var(--filter-delay, 0ms); } .page-training .empty-state { margin-top: 22px; border-color: rgba(37, 99, 217, .28); border-radius: 22px; background: linear-gradient(135deg, rgba(37, 99, 217, .055), rgba(255, 254, 250, .96)); } @keyframes catalogue-card-enter { from { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .page-course-detail .section-muted { padding-top: clamp(64px, 7vw, 94px); } .page-course-detail .course-facts { position: relative; z-index: 2; margin-top: -42px; overflow: hidden; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid rgba(141, 177, 255, .34); border-radius: 22px; background: linear-gradient(120deg, rgba(37, 99, 217, .22), rgba(9, 23, 44, .16)); box-shadow: 0 18px 44px rgba(7, 16, 32, .12), inset 0 1px #fff; } .page-course-detail .course-fact { min-width: 0; padding: 22px 21px; background: rgba(255, 254, 250, .98); } .page-course-detail .course-fact:nth-child(odd) { background: #fffefa; } .page-course-detail .course-fact span { color: var(--blue-700); font-size: .68rem; letter-spacing: .105em; } .page-course-detail .course-fact strong { overflow-wrap: anywhere; font-size: clamp(.92rem, .86rem + .2vw, 1.04rem); line-height: 1.5; } .page-course-detail .course-detail-layout { gap: clamp(22px, 3vw, 34px); margin-top: 31px !important; } .page-course-detail .course-detail-main { counter-reset: course-panel; } .page-course-detail .course-detail-main > .detail-panel { position: relative; counter-increment: course-panel; padding: clamp(27px, 4vw, 41px); border-radius: 22px; border-color: rgba(9, 23, 44, .1); background: linear-gradient(140deg, #fffefa, #fff 80%); box-shadow: inset 0 1px #fff, 0 10px 30px rgba(7, 16, 32, .045); } .page-course-detail .course-detail-main > .detail-panel h2 { display: flex; align-items: baseline; gap: 13px; font-size: clamp(1.25rem, 1.05rem + .45vw, 1.58rem); line-height: 1.25; } .page-course-detail .course-detail-main > .detail-panel h2::before { content: counter(course-panel, decimal-leading-zero); color: var(--orange-500); font: italic 1.28rem/1 var(--font-accent); letter-spacing: -.02em; } .page-course-detail .detail-panel p { font-size: 1rem; line-height: 1.8; } .page-course-detail .detail-list li { font-size: .98rem; } .page-course-detail .course-illustration { position: relative; overflow: hidden; min-height: 232px; border-radius: 24px; background-image: radial-gradient(circle at 24% 16%, rgba(244, 119, 33, .19), transparent 36%), radial-gradient(circle at 83% 74%, rgba(52, 120, 246, .2), transparent 44%), linear-gradient(145deg, var(--navy-800), var(--navy-950)); box-shadow: 0 18px 42px rgba(7, 16, 32, .12), inset 0 1px rgba(255, 255, 255, .08); } .page-course-detail .course-illustration::before, .page-course-detail .course-illustration::after { content: ''; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(141, 177, 255, .15); border-radius: 50%; pointer-events: none; } .page-course-detail .course-illustration::before { top: -90px; right: -60px; } .page-course-detail .course-illustration::after { bottom: -130px; left: -48px; width: 220px; height: 220px; } .page-course-detail .course-illustration-mark { position: relative; z-index: 1; border-radius: 26px; background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)); } .page-course-detail .course-side-card { top: 108px; border-radius: 24px; padding: clamp(24px, 3vw, 32px); background-image: radial-gradient(circle at 90% 0, rgba(52, 120, 246, .19), transparent 46%), linear-gradient(145deg, var(--navy-800), var(--navy-950)); box-shadow: 0 20px 48px rgba(7, 16, 32, .16), inset 0 1px rgba(255, 255, 255, .08); } .page-course-detail .course-side-card p { font-size: .96rem; line-height: 1.75; } .page-course-detail .course-side-card .btn { justify-content: space-between; min-height: 50px; margin-top: 13px; } .page-course-detail .related-grid { gap: 15px; } .page-course-detail .related-link { display: flex; flex-direction: column; min-height: 126px; justify-content: space-between; padding: 22px; border-radius: 17px; background: linear-gradient(145deg, #fffefa, #fff 82%); } .page-course-detail .related-link strong { font-size: .95rem; line-height: 1.55; } .page-course-detail .related-link span { font-size: .84rem; } .page-consultancy .consultancy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: consultancy-card; } .page-consultancy .consultancy-card { position: relative; display: flex; flex-direction: column; min-height: 350px; padding: clamp(24px, 3vw, 32px); border-radius: 22px; background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(52, 120, 246, .07), transparent 68%), linear-gradient(145deg, #fffefa, #fff 80%); counter-increment: consultancy-card; } .page-consultancy .consultancy-card::before { content: counter(consultancy-card, decimal-leading-zero); position: absolute; top: 20px; right: 24px; color: rgba(18, 48, 91, .13); font: italic 2.3rem/1 var(--font-accent); pointer-events: none; } .page-consultancy .consultancy-card .card-kicker { max-width: calc(100% - 58px); color: var(--blue-700); } .page-consultancy .consultancy-card h2 { margin: 22px 0 12px; font-size: clamp(1.14rem, 1rem + .38vw, 1.42rem); line-height: 1.28; letter-spacing: -.045em; } .page-consultancy .consultancy-card p { font-size: .98rem; line-height: 1.74; } .page-consultancy .consultancy-card .pricing-number { margin-top: auto; padding-top: 22px; font-size: 1.32rem; } .page-consultancy .consultancy-card .fee-note { font-size: .82rem; } .page-consultancy .consultancy-card .inline-arrow { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); } .page-consultancy .pricing-note { max-width: 86ch; margin-top: 27px; padding: 18px 20px; border-left: 2px solid var(--orange-500); border-radius: 0 14px 14px 0; background: rgba(37, 99, 217, .035); font-size: .86rem; } .page-corporate-training .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .page-corporate-training .package-card { display: flex; flex-direction: column; min-height: 290px; padding: clamp(24px, 3vw, 32px); border-radius: 22px; background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(52, 120, 246, .065), transparent 68%), linear-gradient(145deg, #fffefa, #fff 80%); } .page-corporate-training .package-card .card-kicker { display: inline-flex; align-items: center; gap: 8px; } .page-corporate-training .package-card .card-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); } .page-corporate-training .package-card h2 { margin: 22px 0 12px; font-size: clamp(1.15rem, 1.02rem + .35vw, 1.4rem); line-height: 1.3; } .page-corporate-training .package-card p { font-size: 1rem; line-height: 1.72; } .page-corporate-training .package-card .pricing-number { margin-top: auto; padding-top: 24px; font-size: 1.38rem; } .page-corporate-training .package-card .inline-arrow { margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--hairline); } .page-corporate-training .industry-grid { gap: 15px; } .page-corporate-training .industry-grid .sector-card { min-height: 205px; padding: 25px; border-radius: 19px; background: linear-gradient(145deg, #fffefa, #fdfcf8); } .page-corporate-training .industry-grid .sector-number { color: var(--orange-500); font: italic 1.65rem/1 var(--font-accent); } .page-corporate-training .industry-grid .sector-card h3 { margin: 20px 0 10px; font-size: 1.08rem; line-height: 1.38; } .page-corporate-training .industry-grid .sector-card p { font-size: .96rem; } .page-corporate-training .delivery-grid { gap: 14px; } .page-corporate-training .delivery-card { min-height: 195px; padding: 26px; border-radius: 19px; } .page-corporate-training .delivery-card h3 { margin-bottom: 12px; font-size: 1.12rem; } .page-corporate-training .delivery-card p { font-size: .96rem; } .page-contact .form-layout, .page-enrol .form-layout, .page-request-proposal .form-layout { gap: clamp(30px, 5vw, 68px); } .page-contact .form-layout > div:first-child, .page-enrol .form-layout > div:first-child, .page-request-proposal .form-layout > div:first-child { min-width: 0; } .page-contact .form-layout > div:first-child .info-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 7px 15px; padding: 23px; border-radius: 18px; background: linear-gradient(145deg, #fffefa, #fff 78%); } .page-contact .form-layout > div:first-child .info-icon { grid-column: 1; grid-row: 1 / span 3; width: 46px; height: 46px; } .page-contact .form-layout > div:first-child .info-card h2 { grid-column: 2; margin: 2px 0 0; font-size: 1.05rem; line-height: 1.35; } .page-contact .form-layout > div:first-child .info-card p { grid-column: 2; margin: 0; overflow-wrap: anywhere; font-size: .98rem; line-height: 1.65; } .page-contact .form-layout > div:first-child .info-card .inline-arrow { grid-column: 2; margin-top: 4px; } .page-contact .form-layout > div:first-child .registration-strip { margin-top: 16px; padding: 19px 21px; border-radius: 16px; } .page-contact .form-layout > div:first-child .registration-strip strong { color: #fff; font-size: .88rem; } .page-enrol .form-layout > div:first-child > .detail-panel, .page-request-proposal .form-layout > div:first-child > .scope-note { border-radius: 18px; box-shadow: 0 14px 32px rgba(7, 16, 32, .05), inset 0 1px #fff; } .page-enrol .form-layout > div:first-child > .detail-panel { margin-top: 28px !important; padding: 27px; } .page-enrol .form-layout > div:first-child > .detail-panel h2 { font-size: 1.25rem; } .page-enrol .form-layout > div:first-child > .detail-panel .detail-list { gap: 13px; } .page-enrol .form-layout > div:first-child > .detail-panel .detail-list li { font-size: .98rem; } .page-request-proposal .form-layout > div:first-child > .scope-note { margin-top: 26px !important; padding: 22px 23px; font-size: .98rem; } .page-contact .form-card, .page-enrol .form-card, .page-request-proposal .form-card, .page-consultancy .form-card, .page-corporate-training .form-card, .page-online-training .form-card { border-radius: 24px; padding: clamp(24px, 3.3vw, 38px); } .page-contact .form-card h2, .page-enrol .form-card h2, .page-request-proposal .form-card h2, .page-consultancy .form-card h2, .page-corporate-training .form-card h2, .page-online-training .form-card h2 { font-size: clamp(1.4rem, 1.15rem + .5vw, 1.8rem); letter-spacing: -.05em; } .page-contact .form-card .section-copy, .page-enrol .form-card .section-copy, .page-request-proposal .form-card .section-copy, .page-consultancy .form-card .section-copy, .page-corporate-training .form-card .section-copy, .page-online-training .form-card .section-copy { font-size: .98rem; line-height: 1.72; } .page-contact .form-actions, .page-enrol .form-actions, .page-request-proposal .form-actions, .page-consultancy .form-actions, .page-corporate-training .form-actions, .page-online-training .form-actions { align-items: flex-start; } .page-contact .form-actions .pricing-note, .page-enrol .form-actions .pricing-note, .page-request-proposal .form-actions .pricing-note, .page-consultancy .form-actions .pricing-note, .page-corporate-training .form-actions .pricing-note, .page-online-training .form-actions .pricing-note { max-width: 48ch; font-size: .84rem; } .page-about .about-grid { gap: clamp(36px, 6vw, 78px); } .page-about .about-visual { position: relative; isolation: isolate; } .page-about .about-visual::before { border-radius: 22px; border-color: rgba(244, 119, 33, .52); transform: translate(13px, 13px); } .page-about .about-image { border-radius: 22px; } .page-about .about-grid .section-copy { font-size: 1rem; line-height: 1.82; } .page-about .about-grid .section-copy:first-of-type { color: var(--ink-700); font-size: 1.08rem; } .page-about .info-grid { gap: 17px; } .page-about .info-card { min-height: 260px; padding: 27px; border-radius: 20px; } .page-about .info-card h3 { margin-top: 22px; font-size: 1.12rem; } .page-about .info-card p { font-size: .98rem; } .page-about-vision-mission .mission-grid { align-items: stretch; gap: 18px; } .page-about-vision-mission .mission-card { position: relative; isolation: isolate; overflow: hidden; min-height: 340px; padding: clamp(28px, 4vw, 46px); border-radius: 24px; background: linear-gradient(145deg, #fffefa, #fff 78%); } .page-about-vision-mission .mission-card::before { content: '01'; position: absolute; z-index: -1; right: 17px; bottom: -48px; color: rgba(18, 48, 91, .055); font: italic clamp(8rem, 15vw, 13rem)/1 var(--font-accent); pointer-events: none; } .page-about-vision-mission .mission-card:nth-child(2) { color: #f5f7fb; border-color: rgba(141, 177, 255, .23); background-image: radial-gradient(circle at 88% 0, rgba(52, 120, 246, .18), transparent 45%), linear-gradient(145deg, var(--navy-800), var(--navy-950)); box-shadow: 0 18px 42px rgba(7, 16, 32, .12), inset 0 1px rgba(255, 255, 255, .08); } .page-about-vision-mission .mission-card:nth-child(2)::before { content: '02'; color: rgba(141, 177, 255, .08); } .page-about-vision-mission .mission-card .card-kicker { color: var(--orange-400); } .page-about-vision-mission .mission-card h2 { margin: 27px 0 16px; font: italic clamp(1.8rem, 1.4rem + 1.35vw, 2.7rem)/1.08 var(--font-accent); letter-spacing: -.025em; } .page-about-vision-mission .mission-card p { position: relative; max-width: 54ch; font-size: 1rem; line-height: 1.85; } .page-about-vision-mission .mission-card:nth-child(2) p { color: #d4dfef; } .page-about-vision-mission .content-prose { max-width: 790px; margin-inline: auto; padding-top: 8px; } .page-about-core-values .info-grid, .page-about-why-choose-us .info-grid { gap: 16px; } .page-about-core-values .info-card, .page-about-why-choose-us .info-card { position: relative; overflow: hidden; min-height: 238px; padding: 27px; border-radius: 20px; background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(52, 120, 246, .055), transparent 68%), linear-gradient(145deg, #fffefa, #fff 78%); } .page-about-core-values .info-card h2, .page-about-why-choose-us .info-card h2 { margin: 22px 0 11px; font-size: 1.14rem; line-height: 1.34; } .page-about-core-values .info-card p, .page-about-why-choose-us .info-card p { font-size: .98rem; line-height: 1.78; } .page-about-management-people .audience-panel { padding: clamp(27px, 4vw, 45px); border: 1px solid rgba(141, 177, 255, .21); border-radius: 24px; background: radial-gradient(circle at 100% 0, rgba(52, 120, 246, .08), transparent 36%), linear-gradient(135deg, #fffefa, #fff 76%); box-shadow: 0 16px 38px rgba(7, 16, 32, .055), inset 0 1px #fff; } .page-about-management-people .audience-panel .section-copy { font-size: 1rem; } .page-about-management-people .tag-row { gap: 10px; } .page-about-management-people .soft-tag { min-height: 38px; padding: 8px 12px; border-color: rgba(37, 99, 217, .17); background: rgba(37, 99, 217, .045); font-size: .84rem; } .page-about-hsse-environmental-responsibility .content-prose { max-width: 850px; padding: clamp(28px, 4.6vw, 52px); border: 1px solid rgba(9, 23, 44, .1); border-radius: 24px; background: linear-gradient(145deg, #fffefa, #fff 82%); box-shadow: 0 16px 42px rgba(7, 16, 32, .055), inset 0 1px #fff; } .page-about-hsse-environmental-responsibility .content-prose p { font-size: 1rem; } .page-about-hsse-environmental-responsibility .content-prose ul { padding: 0; list-style: none; display: grid; gap: 12px; } .page-about-hsse-environmental-responsibility .content-prose li { position: relative; padding: 13px 15px 13px 39px; border: 1px solid rgba(9, 23, 44, .075); border-radius: 12px; background: rgba(247, 245, 240, .62); font-size: .98rem; } .page-about-hsse-environmental-responsibility .content-prose li::before { content: ''; position: absolute; left: 17px; top: 1.02em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 0 4px rgba(244, 119, 33, .1); } .page-insights .insight-grid { gap: 18px; counter-reset: insight-card; } .page-insights .insight-card { display: flex; flex-direction: column; min-height: 310px; padding: clamp(24px, 3vw, 32px); border-radius: 22px; background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(52, 120, 246, .06), transparent 68%), linear-gradient(145deg, #fffefa, #fff 78%); counter-increment: insight-card; } .page-insights .insight-card .card-kicker { display: inline-flex; align-items: center; gap: 9px; } .page-insights .insight-card .card-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); } .page-insights .insight-card h2, .page-insights .insight-card h3 { margin: 24px 0 13px; font-size: 1.22rem; line-height: 1.3; } .page-insights .insight-card p { font-size: 1rem; line-height: 1.78; } .page-insights .insight-card .inline-arrow { margin-top: auto; padding-top: 20px; } .page-insight-article main > .section.section-light > .container > .content-prose, .page-privacy-policy .content-prose, .page-terms .content-prose { max-width: 840px; padding: clamp(28px, 4.5vw, 52px); border: 1px solid rgba(9, 23, 44, .095); border-radius: 24px; background: linear-gradient(145deg, #fffefa, #fff 82%); box-shadow: 0 16px 42px rgba(7, 16, 32, .055), inset 0 1px #fff; } .page-insight-article .content-prose p:first-of-type { color: var(--ink-700); font-size: 1.12rem; line-height: 1.85; } .page-insight-article .content-prose h2, .page-privacy-policy .content-prose h2, .page-terms .content-prose h2 { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(9, 23, 44, .1); font-size: clamp(1.3rem, 1.1rem + .5vw, 1.65rem); } .page-insight-article .content-prose h2:first-of-type, .page-privacy-policy .content-prose h2:first-of-type, .page-terms .content-prose h2:first-of-type { margin-top: 25px; } .page-insight-article .content-prose p, .page-privacy-policy .content-prose p, .page-terms .content-prose p, .page-privacy-policy .content-prose li, .page-terms .content-prose li { font-size: 1rem; line-height: 1.9; } .page-privacy-policy .content-prose > p:first-child, .page-terms .content-prose > p:first-child { padding: 16px 18px; border-left: 3px solid var(--orange-500); border-radius: 0 12px 12px 0; background: rgba(244, 119, 33, .06); color: var(--ink-700); font-size: .96rem; } .page-terms .content-prose ul { padding-left: 0; list-style: none; } .page-terms .content-prose ul li { position: relative; padding: 9px 0 9px 25px; } .page-terms .content-prose ul li::before { content: ''; position: absolute; left: 1px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-500); } .page-404 .page-hero { min-height: 420px; } .page-404 .page-hero::before { content: '404'; top: 50%; right: max(6%, calc((100vw - var(--max)) / 2)); width: auto; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; color: rgba(141, 177, 255, .085); background: none; box-shadow: none; font: italic clamp(8rem, 18vw, 16rem)/.8 var(--font-accent); transform: translateY(-42%); opacity: 1; -webkit-mask-image: none; mask-image: none; } .page-404 main > .section-light .hero-actions { gap: 13px; } .mobile-bottom-bar a:nth-child(2) { border: 1px solid rgba(141, 177, 255, .2); color: #f5f7fb; background: rgba(37, 99, 217, .22); } @media (hover: hover) and (pointer: fine) { .page-consultancy .consultancy-card:hover, .page-corporate-training .package-card:hover, .page-insights .insight-card:hover, .page-about-core-values .info-card:hover, .page-about-why-choose-us .info-card:hover { transform: translateY(-5px); filter: saturate(1.035); } .page-training .catalogue-course-card:hover::before { transform: scaleX(1); opacity: 1; } } @media (max-width: 1100px) { .page-consultancy .consultancy-grid, .page-corporate-training .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-course-detail .course-fact { padding: 18px 16px; } .page-course-detail .course-fact strong { font-size: .93rem; } } @media (max-width: 820px) { .page-hero { min-height: 0; padding: 132px 0 58px; } .page-hero::before { top: 10%; right: -145px; width: 340px; opacity: .5; } .page-hero .eyebrow { margin-top: 23px; } .page-hero h1 { max-width: 17ch; font-size: clamp(2.7rem, 6.8vw, 4.1rem); } .page-training .filter-toolbar { top: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 15px; } .page-training .filter-toolbar .field:first-child { grid-column: 1 / -1; } .page-training .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } .page-training .catalogue-course-card .course-card-top { padding-inline: 17px; } .page-training .catalogue-course-card .course-card-body { padding: 17px 17px 20px; } .page-training .catalogue-course-card .course-card-body h3 { min-height: 0; } .page-course-detail .course-facts { margin-top: -27px; } .page-course-detail .course-fact { padding: 17px; } .page-course-detail .course-detail-layout { grid-template-columns: minmax(0, 1fr); } .page-course-detail .course-detail-aside { order: -1; } .page-course-detail .course-side-card { position: relative; top: auto; } .page-consultancy .consultancy-grid, .page-corporate-training .package-grid { gap: 14px; } .page-consultancy .consultancy-card { min-height: 320px; } .page-corporate-training .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-corporate-training .delivery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-about-vision-mission .mission-card { min-height: 300px; } .page-about-core-values .info-grid, .page-about-why-choose-us .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-insights .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-contact .form-layout > div:first-child .info-card { padding: 20px; } } @media (max-width: 600px) { .page-hero { padding: 121px 0 42px; } .page-hero .breadcrumbs { gap: 6px; padding: 8px 10px; font-size: .72rem; border-radius: 13px; } .page-hero .eyebrow { margin-top: 20px; font-size: .64rem; letter-spacing: .14em; } .page-hero h1 { margin: 16px 0 17px; font-size: clamp(2.3rem, 10vw, 3.45rem); line-height: 1.02; } .page-hero .page-hero-copy { font-size: 1rem; line-height: 1.72; } .page-hero::before { top: 19%; right: -210px; width: 300px; opacity: .38; } .page-training .filter-toolbar { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 13px; border-radius: 18px; } .page-training .filter-toolbar .field:first-child { grid-column: auto; } .page-training .category-filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(37, 99, 217, .4) transparent; margin-inline: -4px; padding: 1px 4px 10px; } .page-training .filter-chip { flex: 0 0 auto; min-height: 42px; } .page-training .result-line { align-items: flex-start; flex-direction: column; gap: 9px; margin: 21px 0; } .page-training .course-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .page-training .catalogue-course-card .course-card-body h3 { font-size: 1.13rem; } .page-course-detail .course-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -16px; border-radius: 17px; } .page-course-detail .course-fact { padding: 15px 13px; } .page-course-detail .course-fact span { font-size: .62rem; letter-spacing: .07em; } .page-course-detail .course-fact strong { font-size: .9rem; } .page-course-detail .course-detail-layout { gap: 20px; } .page-course-detail .course-detail-main > .detail-panel { padding: 24px 21px; border-radius: 18px; } .page-course-detail .course-detail-main > .detail-panel h2 { align-items: flex-start; gap: 10px; font-size: 1.2rem; } .page-course-detail .course-detail-main > .detail-panel h2::before { font-size: 1.12rem; } .page-course-detail .course-illustration { min-height: 170px; border-radius: 19px; } .page-course-detail .course-side-card { padding: 23px; border-radius: 20px; } .page-course-detail .related-grid { grid-template-columns: minmax(0, 1fr); } .page-consultancy .consultancy-grid, .page-corporate-training .package-grid, .page-corporate-training .industry-grid, .page-corporate-training .delivery-grid, .page-insights .insight-grid { grid-template-columns: minmax(0, 1fr); } .page-consultancy .consultancy-card { min-height: 0; padding: 25px; } .page-consultancy .consultancy-card .pricing-number { padding-top: 19px; } .page-corporate-training .package-card { min-height: 0; padding: 25px; } .page-corporate-training .industry-grid .sector-card { min-height: 0; padding: 23px; } .page-corporate-training .delivery-card { min-height: 0; padding: 23px; } .page-contact .form-layout > div:first-child .info-card { grid-template-columns: 40px minmax(0, 1fr); gap: 7px 12px; padding: 18px; } .page-contact .form-layout > div:first-child .info-icon { width: 40px; height: 40px; } .page-contact .form-layout > div:first-child .info-card h2 { font-size: 1rem; } .page-contact .form-layout > div:first-child .info-card p { font-size: .96rem; } .page-contact .form-card, .page-enrol .form-card, .page-request-proposal .form-card, .page-consultancy .form-card, .page-corporate-training .form-card, .page-online-training .form-card { padding: 23px 18px; border-radius: 20px; } .page-about-vision-mission .mission-grid, .page-about-core-values .info-grid, .page-about-why-choose-us .info-grid { grid-template-columns: minmax(0, 1fr); } .page-about-vision-mission .mission-card { min-height: 0; padding: 28px 24px; border-radius: 20px; } .page-about-vision-mission .mission-card h2 { font-size: 2rem; } .page-about-core-values .info-card, .page-about-why-choose-us .info-card { min-height: 0; padding: 24px; } .page-about-management-people .audience-panel { grid-template-columns: minmax(0, 1fr); gap: 23px; padding: 24px 20px; border-radius: 20px; } .page-about-management-people .soft-tag { max-width: 100%; white-space: normal; } .page-about-hsse-environmental-responsibility .content-prose, .page-insight-article main > .section.section-light > .container > .content-prose, .page-privacy-policy .content-prose, .page-terms .content-prose { padding: 25px 21px; border-radius: 19px; } .page-about-hsse-environmental-responsibility .content-prose li { padding-right: 11px; } .page-insights .insight-card { min-height: 0; padding: 25px; border-radius: 20px; } .page-insights .insight-card h2, .page-insights .insight-card h3 { margin-top: 20px; } .page-404 .page-hero::before { top: 65%; right: 0; font-size: 8rem; opacity: .65; } .page-404 main > .section-light .hero-actions { flex-direction: column; align-items: stretch; } .page-404 main > .section-light .hero-actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .page-training .catalogue-course-card.is-filtered-in { animation: none !important; } } } @layer site-overrides { @keyframes phase4-page-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-3px); } } @keyframes phase4-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes phase4-count-update { from { opacity: .58; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } @keyframes phase4-header-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes phase4-field-error { 0%, 100% { transform: translateX(0); } 32% { transform: translateX(-3px); } 66% { transform: translateX(2px); } } @keyframes phase4-check-draw { from { opacity: 0; transform: rotate(-45deg) scale(.12); } to { opacity: 1; transform: rotate(-45deg) scale(1); } } ::view-transition-old(root) { animation: phase4-page-out 250ms var(--ease-out) both; } ::view-transition-new(root) { animation: phase4-page-in 250ms var(--ease-out) both; } .site-header { animation: phase4-header-enter 540ms var(--ease-out) both; } .page-training .catalogue-course-card.is-filtered-in { animation-duration: 280ms; animation-timing-function: var(--ease-out); animation-delay: var(--filter-delay, 0ms); } .page-training #course-result-count.is-updating { display: inline-block; animation: phase4-count-update 260ms var(--ease-out) both; } .field input.field-invalid, .field select.field-invalid, .field textarea.field-invalid { border-color: var(--orange-500); background: linear-gradient(0deg, rgba(244, 119, 33, .045), rgba(255, 254, 250, 1)); box-shadow: 0 0 0 3px rgba(244, 119, 33, .1); animation: phase4-field-error 260ms var(--ease-out) both; } .form-status.is-error { border-color: rgba(244, 119, 33, .3); border-left-color: var(--orange-500); color: var(--ink-800); background: linear-gradient(120deg, rgba(244, 119, 33, .1), rgba(244, 119, 33, .035)); animation: phase4-count-update 260ms var(--ease-out) both; } .form-status.is-success::before { content: ''; display: inline-block; width: 12px; height: 7px; margin: 0 9px 2px 0; border-left: 2px solid var(--blue-700); border-bottom: 2px solid var(--blue-700); transform: rotate(-45deg) scale(.12); transform-origin: center; animation: phase4-check-draw 280ms var(--ease-out) both; vertical-align: middle; } .steps .step-number { transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); } .steps .step.is-reached .step-number { border-color: rgba(255, 148, 71, .5); color: var(--orange-300); background: rgba(244, 119, 33, .08); } .steps .step.is-current .step-number { border-color: var(--orange-500); color: var(--orange-300); background: rgba(244, 119, 33, .15); box-shadow: 0 0 0 5px rgba(244, 119, 33, .075); transform: scale(1.035); } @media (hover: hover) and (pointer: fine) { .catalogue-course-card:hover, .mission-card:hover, .info-card:hover, .delivery-card:hover, .category-card:hover, .package-card:hover, .consultancy-card:hover, .insight-card:hover, .related-link:hover, .culture-card:hover, #training-categories .category-card:hover, #delivery-options .delivery-card:hover, #principles .culture-card:hover { transform: translateY(-6px); border-color: rgba(37, 99, 217, .26); box-shadow: var(--shadow-2); } .service-card:hover { transform: perspective(1100px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-6px); } .sector-card:hover { transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-6px); } #sectors .sector-card:hover { transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-6px); } } #home .hero-visual { transform: translate3d(0, var(--hero-parallax-y, 0px), 0); } .about-image { transform: translate3d(0, var(--about-parallax-y, 0px), 0); } .visual-corner { animation: card-pop 650ms 700ms var(--ease-out) both; } .visual-bottom { animation: card-pop 650ms 830ms var(--ease-out) both; } .hero-image-shell { animation-duration: 860ms; } @media (hover: hover) and (pointer: fine) { .hero-image-shell img { transition: transform 900ms var(--ease-out), opacity 360ms var(--ease-out), filter 360ms var(--ease-out); } .hero-image-shell:hover img { transform: scale(1.04); } } @media (max-width: 820px) { .nav-links.open > .mobile-menu-contact, .nav-links.open > a, .nav-links.open > .nav-group { animation: menu-item-in 360ms var(--ease-out) both; } .nav-links.open > :nth-child(1) { animation-delay: 0ms; } .nav-links.open > :nth-child(2) { animation-delay: 40ms; } .nav-links.open > :nth-child(3) { animation-delay: 80ms; } .nav-links.open > :nth-child(4) { animation-delay: 120ms; } .nav-links.open > :nth-child(5) { animation-delay: 160ms; } .nav-links.open > :nth-child(6) { animation-delay: 200ms; } .nav-links.open > :nth-child(7) { animation-delay: 240ms; } .nav-links.open > :nth-child(8) { animation-delay: 280ms; } } @media (prefers-reduced-motion: no-preference) { .whatsapp-float.is-visible:not(.is-obstructed):not(.has-pulsed)::before { animation: pulse-ring 780ms 120ms ease-out 3 both; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } .js-ready .reveal, .js-ready .reveal.is-visible, .js-ready .about-visual.reveal, .js-ready .about-visual.reveal.is-visible, .js-ready .steps.reveal, .js-ready .steps.reveal.is-visible, .js-ready .culture-card.reveal, .js-ready .culture-card.reveal.is-visible, .js-ready .hsse-panel.reveal, .js-ready .hsse-panel.reveal.is-visible, .js-ready .cta-panel.reveal, .js-ready .cta-panel.reveal.is-visible { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; } .site-header, .page-training .catalogue-course-card.is-filtered-in, .page-training #course-result-count.is-updating, .field input.field-invalid, .field select.field-invalid, .field textarea.field-invalid, .form-status.is-error, .form-status.is-success::before, .nav-links.open > .mobile-menu-contact, .nav-links.open > .nav-group, .nav-links.open > a, .visual-corner, .visual-bottom, .hero-image-shell { animation: none !important; } #home .hero-visual, .about-image { transform: none !important; } .whatsapp-float.is-visible:not(.is-obstructed)::before { animation: none !important; } } } @media (min-width: 821px) and (hover: hover) and (pointer: fine) { .site-header .nav-group:not(.is-open):hover > .nav-dropdown, .site-header .nav-group:not(.is-open):focus-within > .nav-dropdown { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .site-header .nav-group.is-open > .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; } } @media (max-width: 820px) { .site-header .header-panel, .site-header.is-scrolled .header-panel { background: rgba(7, 16, 32, .78); } .site-header .header-panel::after { background: rgba(7, 16, 32, .24); } .site-header .nav-links, .site-header.is-scrolled .nav-links { min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(141, 177, 255, .55) transparent; } .site-header .nav-links .nav-group > .nav-dropdown, .site-header .nav-links .nav-group > .nav-dropdown--mega { max-height: none !important; height: auto; overflow: visible !important; overscroll-behavior: visible; } .site-header .nav-dropdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .site-header .nav-menu-category { min-width: 0; overflow-wrap: anywhere; } } @media (max-width: 500px) { .site-header .nav-dropdown-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .site-header .nav-dropdown .nav-menu-category h3 { min-height: 0; margin-bottom: 7px; } .site-header .nav-dropdown .nav-menu-category > a { padding-block: 8px; font-size: .82rem; } } .header-panel, .site-header .header-panel { background: rgba(7, 16, 32, .90) !important; backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); } .site-header.is-scrolled .header-panel, .site-header.is-scrolled .header-panel { background: rgba(7, 16, 32, .90) !important; } @media (min-width: 821px) { .site-header .nav-group > .nav-dropdown, .site-header .nav-group > .nav-dropdown--mega { opacity: 0; visibility: hidden; pointer-events: none; } .site-header .nav-group.is-open > .nav-dropdown, .site-header .nav-group.is-open > .nav-dropdown--mega { opacity: 1; visibility: visible; pointer-events: auto; } .site-header .nav-group:not(.is-open):hover > .nav-dropdown, .site-header .nav-group:not(.is-open):focus-within > .nav-dropdown, .site-header .nav-group:not(.is-open):hover > .nav-dropdown--mega, .site-header .nav-group:not(.is-open):focus-within > .nav-dropdown--mega { opacity: 0; visibility: hidden; pointer-events: none; } } @media (max-width: 820px) { .site-header .header-panel, .site-header.is-scrolled .header-panel { background: rgba(7, 16, 32, .90) !important; } .site-header .nav-links, .site-header.is-scrolled .nav-links { max-height: min(78svh, 760px) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(141,177,255,.55) transparent; } .site-header .nav-links .nav-group > .nav-dropdown, .site-header .nav-links .nav-group > .nav-dropdown--mega { position: static !important; display: none; width: 100% !important; max-width: none !important; max-height: none !important; height: auto !important; overflow: visible !important; margin: 5px 0 10px !important; padding: 14px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 13px !important; background: rgba(7,16,32,.58) !important; box-shadow: inset 0 1px rgba(255,255,255,.05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .site-header .nav-links .nav-group.is-open > .nav-dropdown, .site-header .nav-links .nav-group.is-open > .nav-dropdown--mega { display: block !important; } .site-header .nav-dropdown-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } .site-header .nav-dropdown .nav-menu-category { padding: 0 0 10px 10px; border-left: 2px solid rgba(244,119,33,.35); } .site-header .nav-dropdown .nav-menu-category h3 { margin: 0 0 7px !important; font-size: .76rem !important; line-height: 1.45; } .site-header .nav-dropdown .nav-menu-category > a, .site-header .nav-dropdown > a { display: block; padding: 10px 9px !important; font-size: .9rem !important; line-height: 1.45 !important; overflow-wrap: anywhere; } } .site-header .nav-dropdown--mega { width: min(1160px, calc(100vw - 40px)); max-height: min(78vh, 820px); overflow-x: hidden; overflow-y: auto; padding: 22px; border-color: rgba(165, 190, 232, .2); border-radius: 22px; background: rgba(5, 14, 30, .985); box-shadow: 0 30px 80px rgba(0, 0, 0, .42), inset 0 1px rgba(255,255,255,.055); scrollbar-width: thin; scrollbar-color: rgba(141,177,255,.5) transparent; } .site-header .nav-mega-intro { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid rgba(255,255,255,.11); } .site-header .nav-mega-intro-copy { min-width: 0; } .site-header .nav-mega-eyebrow { display: inline-block; margin: 0 0 7px; color: var(--orange-300); font-size: .65rem; font-weight: 900; letter-spacing: .15em; } .site-header .nav-mega-intro h2 { margin: 0 0 5px; color: #f8fbff; font-size: clamp(1.1rem, 1rem + .55vw, 1.45rem); line-height: 1.25; letter-spacing: -.04em; } .site-header .nav-mega-intro p { margin: 0; color: #adbed6; font-size: .82rem; line-height: 1.6; } .site-header .nav-dropdown .nav-drop-all { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 12px 15px; border: 1px solid rgba(255,160,89,.32); border-radius: 12px; color: #fff4e9; background: linear-gradient(110deg, rgba(244,119,33,.2), rgba(37,99,217,.17)); font-size: .78rem; font-weight: 850; line-height: 1.35; white-space: nowrap; } .site-header .nav-dropdown .nav-drop-all svg { flex: 0 0 auto; } .site-header .nav-dropdown .nav-dropdown-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; align-items: start; } .site-header .nav-dropdown .nav-menu-category { min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(185,205,239,.13); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); transition: border-color .2s ease, background .2s ease; } .site-header .nav-dropdown .nav-menu-category:hover, .site-header .nav-dropdown .nav-menu-category.is-expanded { border-color: rgba(244,153,83,.35); background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); } .site-header .nav-menu-category-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 94px; padding: 14px; } .site-header .nav-menu-category-title { display: flex; align-items: flex-start; gap: 11px; min-width: 0; } .site-header .nav-category-code { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(244,153,83,.28); border-radius: 11px; color: var(--orange-300); background: rgba(244,119,33,.1); font-size: .83rem; font-weight: 900; } .site-header .nav-menu-category-title-copy { min-width: 0; } .site-header .nav-dropdown .nav-menu-category h3 { min-height: 0; margin: 0 0 7px; color: #f4f7ff; font-size: .83rem; font-weight: 800; line-height: 1.4; letter-spacing: -.012em; text-transform: none; } .site-header .nav-dropdown .nav-menu-category h3 a { display: inline; padding: 0; color: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; } .site-header .nav-dropdown .nav-menu-category h3 a:hover, .site-header .nav-dropdown .nav-menu-category h3 a:focus-visible { color: #ffc28f; background: none; transform: none; } .site-header .nav-category-meta { display: inline-flex; align-items: center; gap: 6px; color: #9eafc8; font-size: .7rem; font-weight: 650; } .site-header .nav-category-toggle { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #e5edf9; background: rgba(255,255,255,.045); cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; } .site-header .nav-category-toggle:hover, .site-header .nav-category-toggle:focus-visible { border-color: rgba(244,153,83,.55); background: rgba(244,119,33,.11); outline: 2px solid rgba(244,153,83,.2); outline-offset: 2px; } .site-header .nav-category-toggle svg { transition: transform .2s ease; } .site-header .nav-menu-category.is-expanded .nav-category-toggle svg { transform: rotate(180deg); } .site-header .nav-menu-category-courses { padding: 0 12px 12px; border-top: 1px solid rgba(255,255,255,.085); } .site-header .nav-menu-category-courses[hidden] { display: none !important; } .site-header .nav-dropdown .nav-menu-category-courses > a { display: block; padding: 8px 9px; border-radius: 8px; color: #d1dcef; font-size: .76rem; line-height: 1.45; overflow-wrap: anywhere; transition: color .16s ease, background .16s ease, padding-left .16s ease; } .site-header .nav-dropdown .nav-menu-category-courses > a:hover, .site-header .nav-dropdown .nav-menu-category-courses > a:focus-visible { padding-left: 12px; color: #fff; background: rgba(255,255,255,.075); } .site-header .nav-dropdown .nav-menu-category-courses > .nav-category-overview { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 5px; padding: 10px 9px; color: #ffd1ad; font-weight: 800; background: rgba(244,119,33,.085); } .site-header .nav-dropdown .nav-menu-category-courses > .nav-category-overview:hover { background: rgba(244,119,33,.15); } @media (min-width: 821px) and (max-width: 1120px) { .site-header .nav-dropdown--mega { width: min(940px, calc(100vw - 28px)); padding: 17px; } .site-header .nav-dropdown .nav-dropdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-header .nav-menu-category-heading { min-height: 86px; } } @media (max-width: 820px) { .site-header .nav-dropdown--mega { width: 100% !important; max-height: none !important; padding: 13px !important; border-radius: 15px !important; background: rgba(7,16,32,.72) !important; } .site-header .nav-mega-intro { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 13px; padding-bottom: 13px; } .site-header .nav-mega-intro h2 { font-size: 1.12rem; } .site-header .nav-mega-intro p { font-size: .78rem; } .site-header .nav-dropdown .nav-drop-all { width: 100%; justify-content: space-between; white-space: normal; } .site-header .nav-dropdown .nav-dropdown-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 9px !important; } .site-header .nav-menu-category-heading { min-height: 0; padding: 12px; } .site-header .nav-dropdown .nav-menu-category h3 { font-size: .84rem !important; } .site-header .nav-dropdown .nav-menu-category-courses { padding: 0 10px 10px; } .site-header .nav-dropdown .nav-menu-category-courses > a { padding: 10px 9px !important; font-size: .84rem !important; } } @media (max-width: 380px) { .site-header .nav-dropdown--mega { padding: 10px !important; } .site-header .nav-menu-category-heading { gap: 7px; padding: 10px; } .site-header .nav-category-code { flex-basis: 30px; width: 30px; height: 30px; } .site-header .nav-dropdown .nav-menu-category h3 { font-size: .79rem !important; } .site-header .nav-category-toggle { flex-basis: 31px; width: 31px; height: 31px; } } .site-header .nav-category-description { margin: 7px 0 0; color: #afbed4; font-size: .69rem; line-height: 1.5; } @media (max-width: 820px) { .site-header .nav-category-description { font-size: .76rem; line-height: 1.5; } } .site-header .nav-wrap, .site-header.is-scrolled .nav-wrap, .site-header .header-panel, .site-header.is-scrolled .header-panel { background: #071020 !important; background-color: #071020 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .site-header .nav-group { position: relative; } @media (min-width: 821px) and (hover: hover) and (pointer: fine) { .site-header .nav-group::after { content: ""; position: absolute; z-index: 30; top: 100%; left: -8px; right: -8px; height: 22px; background: transparent; pointer-events: none; } .site-header .nav-group.is-open::after { pointer-events: auto; } .site-header .nav-group > .nav-dropdown { transition-delay: 0s; } .site-header .nav-group.is-open > .nav-dropdown { transition-delay: 0s; } } @media (max-width: 820px) { .site-header, .site-header.is-scrolled, .site-header.is-hidden { transform: none !important; filter: none !important; perspective: none !important; transition: top .34s cubic-bezier(.16, 1, .3, 1), filter 360ms cubic-bezier(.16, 1, .3, 1) !important; } .site-header.is-hidden { top: -110px !important; } .site-header .header-panel, .site-header .nav-wrap, .site-header.is-scrolled .header-panel, .site-header.is-scrolled .nav-wrap { transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .site-header .nav-links, .site-header.is-scrolled .nav-links, .site-header .nav-links.open, .site-header.is-scrolled .nav-links.open { position: absolute !important; z-index: 9999 !important; top: calc(100% + 10px) !important; right: 0 !important; bottom: auto !important; left: 0 !important; width: auto !important; height: calc(100vh - max(8px, env(safe-area-inset-top)) - 76px - max(10px, env(safe-area-inset-bottom))) !important; height: calc(100dvh - max(8px, env(safe-area-inset-top)) - 76px - max(10px, env(safe-area-inset-bottom))) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; border-radius: 18px !important; background: #071020 !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px) !important; transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease !important; } .site-header .nav-links.open, .site-header.is-scrolled .nav-links.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } .site-header .nav-links > .mobile-menu-contact { flex: 0 0 auto; } .site-header .nav-links > .nav-group, .site-header .nav-links > a { flex: 0 0 auto; } .site-header .nav-links .nav-group > .nav-dropdown, .site-header .nav-links .nav-group > .nav-dropdown--mega { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } } @media (prefers-reduced-motion: no-preference) { .js-ready .reveal, .js-ready .reveal.is-visible, .js-ready .about-visual.reveal, .js-ready .about-visual.reveal.is-visible, .js-ready .steps.reveal, .js-ready .steps.reveal.is-visible, .js-ready .culture-card.reveal, .js-ready .culture-card.reveal.is-visible, .js-ready .hsse-panel.reveal, .js-ready .hsse-panel.reveal.is-visible, .js-ready .cta-panel.reveal, .js-ready .cta-panel.reveal.is-visible { filter: none !important; } } @media (prefers-reduced-motion: no-preference) { .js-ready .reveal, .js-ready .about-visual.reveal, .js-ready .steps.reveal, .js-ready .culture-card.reveal, .js-ready .hsse-panel.reveal, .js-ready .cta-panel.reveal { opacity: 0; transform: translate3d(0, 8px, 0); filter: none !important; transition: opacity 220ms ease-out, transform 260ms cubic-bezier(.2,.65,.3,1) !important; transition-delay: 0ms !important; will-change: opacity, transform; } .js-ready .reveal.is-visible, .js-ready .about-visual.reveal.is-visible, .js-ready .steps.reveal.is-visible, .js-ready .culture-card.reveal.is-visible, .js-ready .hsse-panel.reveal.is-visible, .js-ready .cta-panel.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; } } @media (prefers-reduced-motion: reduce) { .js-ready .reveal, .js-ready .reveal.is-visible { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } .page-about-management-people .audience-panel { color: var(--ink-800); background: radial-gradient(circle at 100% 0, rgba(52, 120, 246, .07), transparent 36%), linear-gradient(135deg, #f2f6fc, #fffefa 76%); border-color: rgba(9, 23, 44, .12); } .page-about-management-people .audience-panel .eyebrow { color: var(--blue-700); } .page-about-management-people .audience-panel .section-title { color: var(--ink-900); } .page-about-management-people .audience-panel .section-copy { color: #46566c; } .page-about-management-people .audience-panel .soft-tag { color: #17345e; border-color: rgba(37, 99, 217, .2); background: rgba(37, 99, 217, .07); } .site-header .nav-dropdown--mega { width: min(1480px, calc(100vw - 32px)) !important; max-height: min(82vh, 900px) !important; overflow-x: hidden !important; overflow-y: auto !important; padding: clamp(15px, 1.4vw, 24px) !important; background: #071020 !important; border-color: rgba(165, 190, 232, .2) !important; border-radius: 22px !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .44), inset 0 1px rgba(255,255,255,.055) !important; scrollbar-width: thin; scrollbar-color: rgba(141,177,255,.5) transparent; } .site-header .nav-dropdown .nav-dropdown-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px !important; align-items: stretch; } .site-header .nav-dropdown .nav-menu-category { min-width: 0; overflow: hidden; border: 1px solid rgba(185,205,239,.14); border-radius: 15px; background: linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); transition: border-color .18s ease, background .18s ease, transform .18s ease; } .site-header .nav-dropdown .nav-menu-category:hover { border-color: rgba(244,153,83,.34); background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.026)); transform: translateY(-1px); } .site-header .nav-menu-category-heading { display: block; min-height: 0; padding: 14px 14px 12px; } .site-header .nav-menu-category-title { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .site-header .nav-category-icon { display: inline-grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(244,153,83,.26); border-radius: 11px; color: #ffc08e; background: rgba(244,119,33,.1); } .site-header .nav-category-icon svg { width: 19px; height: 19px; } .site-header .nav-menu-category-title-copy { min-width: 0; } .site-header .nav-dropdown .nav-menu-category h3 { margin: 1px 0 7px !important; color: #f4f7ff !important; font-size: .83rem !important; font-weight: 800 !important; line-height: 1.4 !important; letter-spacing: -.012em !important; text-transform: none !important; } .site-header .nav-dropdown .nav-menu-category h3 a { display: inline; padding: 0; color: inherit; font: inherit; line-height: inherit; } .site-header .nav-dropdown .nav-menu-category h3 a:hover, .site-header .nav-dropdown .nav-menu-category h3 a:focus-visible { color: #ffc28f !important; background: transparent !important; transform: none !important; } .site-header .nav-category-meta { display: inline-flex; margin-top: 1px; color: #9eafc8; font-size: .69rem; font-weight: 700; } .site-header .nav-category-description { margin: 7px 0 0; color: #afbed4; font-size: .7rem; line-height: 1.48; } .site-header .nav-menu-category-courses { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 11px; border-top: 1px solid rgba(255,255,255,.09); } .site-header .nav-menu-category-courses[hidden] { display: flex !important; } .site-header .nav-dropdown .nav-menu-category-courses > a { display: block; min-width: 0; padding: 7px 8px !important; border-radius: 8px; color: #d7e2f3 !important; background: transparent; font-size: .72rem !important; font-weight: 550; line-height: 1.4 !important; overflow-wrap: anywhere; text-decoration: none; transition: color .16s ease, background .16s ease, padding-left .16s ease; } .site-header .nav-dropdown .nav-menu-category-courses > a:hover, .site-header .nav-dropdown .nav-menu-category-courses > a:focus-visible { padding-left: 11px !important; color: #fff !important; background: rgba(255,255,255,.075) !important; transform: none !important; } .site-header .nav-dropdown .nav-menu-category-courses > .nav-category-overview { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 5px; padding: 9px 10px !important; border: 1px solid rgba(244,153,83,.18); color: #ffd1ad !important; background: rgba(244,119,33,.09) !important; font-weight: 850 !important; } .site-header .nav-dropdown .nav-menu-category-courses > .nav-category-overview svg { flex: 0 0 auto; width: 13px; height: 13px; } .site-header .nav-dropdown .nav-menu-category-courses > .nav-category-overview:hover, .site-header .nav-dropdown .nav-menu-category-courses > .nav-category-overview:focus-visible { color: #fff !important; border-color: rgba(244,153,83,.42); background: rgba(244,119,33,.17) !important; } @media (min-width: 1250px) { .site-header .nav-dropdown--mega { width: min(1480px, calc(100vw - 28px)) !important; } .site-header .nav-dropdown .nav-dropdown-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px !important; } .site-header .nav-menu-category-heading { padding: 12px 11px 10px; } .site-header .nav-menu-category-title { gap: 8px; } .site-header .nav-category-icon { flex-basis: 30px; width: 30px; height: 30px; border-radius: 9px; } .site-header .nav-category-icon svg { width: 17px; height: 17px; } .site-header .nav-dropdown .nav-menu-category h3 { font-size: .75rem !important; } .site-header .nav-category-description { font-size: .65rem; } .site-header .nav-menu-category-courses { padding: 8px 7px 9px; } .site-header .nav-dropdown .nav-menu-category-courses > a { padding: 6px 6px !important; font-size: .675rem !important; line-height: 1.38 !important; } .site-header .nav-dropdown .nav-menu-category-courses > .nav-category-overview { padding: 8px 7px !important; font-size: .68rem !important; } } @media (min-width: 821px) and (max-width: 1249px) { .site-header .nav-dropdown--mega { width: min(1120px, calc(100vw - 28px)) !important; } .site-header .nav-dropdown .nav-dropdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) and (max-width: 1249px) { .site-header .nav-dropdown .nav-dropdown-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .site-header .nav-dropdown--mega { width: 100% !important; max-height: none !important; padding: 12px !important; } .site-header .nav-dropdown .nav-dropdown-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 11px !important; } .site-header .nav-menu-category-heading { padding: 13px 12px 10px; } .site-header .nav-category-description { font-size: .76rem; } .site-header .nav-menu-category-courses { padding: 9px 9px 10px; } .site-header .nav-dropdown .nav-menu-category-courses > a { padding: 9px !important; font-size: .82rem !important; line-height: 1.45 !important; } .site-header .nav-dropdown .nav-menu-category-courses > .nav-category-overview { padding: 11px 10px !important; } } .page-about-hsse-environmental-responsibility .content-prose a.btn, .page-about-hsse-environmental-responsibility .content-prose a.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; color: var(--navy-950) !important; text-decoration: none !important; text-underline-offset: 0 !important; font-weight: 800; } .page-about-hsse-environmental-responsibility .content-prose a.btn:hover, .page-about-hsse-environmental-responsibility .content-prose a.btn-primary:hover { color: var(--navy-950) !important; text-decoration: none !important; filter: brightness(1.04); } .page-about-hsse-environmental-responsibility .content-prose a.btn:focus-visible { outline: 3px solid rgba(37,99,217,.5); outline-offset: 3px; } .page-training .category-filters .filter-chip:hover, .page-training .category-filters .filter-chip:focus-visible, .page-training .category-filters .filter-chip[aria-pressed="true"]:hover { border-color: var(--navy-900) !important; color: #fff !important; background: linear-gradient(135deg, var(--navy-800), var(--navy-950)) !important; box-shadow: 0 5px 14px rgba(7,16,32,.18), inset 0 1px rgba(255,255,255,.09) !important; } .page-training .category-filters .filter-chip:focus-visible { outline: 3px solid rgba(37,99,217,.32); outline-offset: 3px; } @media (max-width: 820px) { .site-header .nav-group:hover > .nav-dropdown, .site-header .nav-group:focus-within > .nav-dropdown, .site-header .nav-group:hover > .nav-dropdown--mega, .site-header .nav-group:focus-within > .nav-dropdown--mega { display: none; opacity: 0; visibility: hidden; pointer-events: none; } .site-header .nav-group.is-open > .nav-dropdown, .site-header .nav-group.is-open > .nav-dropdown--mega { display: block; opacity: 1; visibility: visible; pointer-events: auto; } .site-header .nav-group > .nav-dropdown, .site-header .nav-group > .nav-dropdown--mega { transform: none !important; } } .whatsapp-float { box-sizing: border-box !important; width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; max-width: 60px !important; max-height: 60px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } .whatsapp-float > svg { display: block; flex: 0 0 28px; width: 28px !important; height: 28px !important; max-width: 28px; max-height: 28px; overflow: visible; transform: none !important; } .whatsapp-float > span { display: none !important; } .whatsapp-float::before { border-radius: 50% !important; inset: -4px !important; } @media (max-width: 820px) { .whatsapp-float { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; max-width: 54px !important; max-height: 54px !important; } .whatsapp-float > svg { flex-basis: 25px; width: 25px !important; height: 25px !important; max-width: 25px; max-height: 25px; } } @media (max-width: 820px) { .site-header .nav-links .nav-group:not(.is-open) > .nav-dropdown, .site-header .nav-links .nav-group:not(.is-open) > .nav-dropdown--mega { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .site-header .nav-links .nav-group.is-open > .nav-dropdown, .site-header .nav-links .nav-group.is-open > .nav-dropdown--mega { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .site-header .nav-links .nav-group:not(.is-open):hover > .nav-dropdown, .site-header .nav-links .nav-group:not(.is-open):focus-within > .nav-dropdown, .site-header .nav-links .nav-group:not(.is-open):hover > .nav-dropdown--mega, .site-header .nav-links .nav-group:not(.is-open):focus-within > .nav-dropdown--mega { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } .footer-phone-options{display:grid;gap:5px;margin:4px 0 10px} .footer-contact-card .footer-phone-options a.footer-phone-option{display:flex;align-items:center;gap:7px;color:#d8e4f5;font-size:.8rem;line-height:1.5;overflow-wrap:anywhere} .footer-contact-card .footer-contact-secondary-title{margin-top:7px;color:#fff} .contact-phone-options{display:grid;gap:5px;margin:4px 0 14px} .info-card p.contact-phone-option{margin:0} .info-card .contact-phone-link{display:inline-flex;align-items:center;gap:8px;color:var(--blue-700);font-weight:750;overflow-wrap:anywhere} .info-card .contact-phone-link svg{width:16px;height:16px;flex:0 0 auto;color:var(--orange-500)} .info-card .contact-secondary-title{margin:12px 0 3px;font-size:.9rem;color:var(--ink-800)} @media(min-width:821px) and (max-width:1150px){.nav-dropdown--mega{top:150px}}