:root{
  --navy:#0c1b2d;--navy2:#10243a;--navy3:#172f49;--steel:#50728a;--ink:#203348;
  --muted:#697a87;--cream:#f5f6f5;--paper:#fbfcfa;--line:#dbe3e6;--amber:#d58a3c;
  --max:1220px;--head:84px;--font:'Manrope',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:14px;background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}
img{max-width:100%;height:auto;display:block}
::selection{background:#d9a45c;color:#091b2b}
:focus-visible{outline:3px solid #dd9b46;outline-offset:4px}
.shell{width:min(var(--max),calc(100% - 88px));margin-inline:auto}
.section-anchor{scroll-margin-top:var(--head)}
.skip-link{position:fixed;left:14px;top:-100px;padding:12px 18px;color:white;background:var(--navy);z-index:200}
.skip-link:focus{top:10px}
.site-header{height:var(--head);position:sticky;top:0;z-index:100;background:rgba(13,29,47,.86);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);border-bottom:1px solid rgba(235,242,249,.15);transition:background .25s,box-shadow .25s}
.site-header.scrolled{background:rgba(10,25,42,.94);box-shadow:0 10px 36px rgba(4,17,30,.21)}
.header-inner{display:flex;align-items:center;height:100%;gap:20px}
.brand{display:inline-flex;align-items:center;gap:13px;min-width:275px;color:#fff}
.brand-icon,.footer-emblem{display:grid;place-items:center;flex:0 0 auto;overflow:visible;background:transparent;border-radius:0;box-shadow:none}
.brand-icon{width:78px;height:54px}.brand-icon img{width:78px;height:auto;object-fit:contain;display:block}
.brand-words{display:flex;flex-direction:column;gap:4px;line-height:1}
.brand-words strong{font-size:17px;font-weight:800;letter-spacing:.085em;white-space:nowrap}
.brand-words small{font-size:9px;letter-spacing:.18em;color:#b7cad8;font-weight:700;white-space:nowrap}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,30px);margin-left:auto}
.desktop-nav a{position:relative;font-size:12px;font-weight:700;color:#c6d2df;white-space:nowrap;padding:12px 0;transition:color .2s}
.desktop-nav a:hover,.desktop-nav a.active{color:#fff}
.desktop-nav a:after{content:'';position:absolute;left:0;bottom:5px;width:0;height:1px;background:#e0af6d;transition:width .2s}
.desktop-nav a:hover:after,.desktop-nav a.active:after{width:100%}
.header-cta{margin-left:10px;display:flex;align-items:center;gap:18px;border:1px solid rgba(227,237,248,.36);border-radius:9px;padding:13px 19px;color:#fff;font-weight:800;font-size:12px;white-space:nowrap;transition:background .2s,transform .2s}
.header-cta:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}.header-cta span{font-size:17px;color:#e9b46a}
.menu-toggle,.mobile-nav{display:none}
/* HERO */
.hero{background:linear-gradient(135deg,#0b1a2b,#142a42 55%,#0c2035);color:#fff;position:relative;isolation:isolate;min-height:688px;overflow:hidden}
.hero-mesh{position:absolute;inset:0;pointer-events:none;z-index:-2;opacity:.45;background-image:linear-gradient(90deg,rgba(156,193,221,.05) 1px,transparent 1px),linear-gradient(0deg,rgba(156,193,221,.04) 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(120deg,transparent 15%,#000 70%)}
.hero-orb{position:absolute;width:600px;height:600px;right:12%;top:2%;border-radius:50%;background:radial-gradient(circle,rgba(244,149,44,.78) 0%,rgba(205,103,38,.53) 27%,rgba(170,103,49,.26) 49%,transparent 73%);filter:blur(47px);z-index:-1;opacity:.83;pointer-events:none}
.hero-orb-blue{position:absolute;width:570px;height:490px;left:-240px;bottom:-265px;border-radius:50%;background:radial-gradient(circle,rgba(42,111,153,.4),transparent 72%);filter:blur(33px);pointer-events:none;z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:7%;align-items:center;padding-top:54px;padding-bottom:58px;min-height:min(760px,calc(100svh - var(--head)));max-height:none}
.hero-copy{position:relative;z-index:2;padding-top:12px}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;color:#acc9dd;font-weight:800;letter-spacing:.19em;line-height:1.6;text-transform:uppercase}
.eyebrow i{display:block;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(224,155,74,.13);flex-shrink:0}
.eyebrow-line{display:block;width:31px;height:1px;background:#7696a6;opacity:.6}
.eyebrow.dark{color:#426079}
.hero h1{font-size:clamp(46px,5.6vw,76px);letter-spacing:-.064em;line-height:1.13;max-width:730px;font-weight:700;margin:37px 0 24px}
.hero h1 span{color:#d6e4ec}
.hero-intro{font-size:15px;line-height:1.95;max-width:520px;color:#b7c9d7;margin:0 0 32px}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.button{border:1px solid transparent;display:inline-flex;justify-content:center;align-items:center;gap:28px;min-height:50px;padding:13px 22px;font-size:12px;font-weight:800;border-radius:10px;transition:transform .2s,box-shadow .2s,background .2s}
.button:hover{transform:translateY(-2px)}.button span{font-size:17px}
.button-primary{background:#e3ad65;color:#162c40;box-shadow:0 10px 28px rgba(1,4,10,.16)}.button-primary:hover{background:#f1bf7a;box-shadow:0 14px 34px rgba(2,5,10,.2)}
.button-ghost{border-color:rgba(227,236,244,.29);background:rgba(233,246,255,.055);color:#e1ebf5;backdrop-filter:blur(13px)}.button-ghost:hover{background:rgba(233,246,255,.14)}
.hero-bottom{display:flex;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(199,221,234,.19);margin-top:66px;padding-top:21px;color:#aebecb;font-size:10px;letter-spacing:.035em;line-height:1.6}
.hero-bottom b{color:#f2bd75;margin-right:7px;font-size:10px}
.hero-visual{position:relative;align-self:stretch;min-height:510px;max-height:585px;display:flex;align-items:stretch}
.hero-photo-frame{position:absolute;inset:12px 23px 18px 0;border-radius:125px 20px 22px 22px;overflow:hidden;border:1px solid rgba(255,255,255,.31);box-shadow:0 32px 95px rgba(0,0,0,.36)}
.hero-photo-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,21,32,.28),transparent 55%),linear-gradient(0deg,rgba(8,17,30,.65),transparent 48%);pointer-events:none}
.hero-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 52%;filter:saturate(.97) contrast(1.05)}
.hero-glass-card{position:absolute;z-index:3;left:-56px;right:56px;bottom:52px;padding:21px 23px 20px;border-radius:17px;background:rgba(220,235,243,.17);border:1px solid rgba(252,253,255,.42);backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);box-shadow:0 20px 50px rgba(6,12,20,.26);display:flex;flex-direction:column;gap:13px}
.glass-kicker{font-size:9px;font-weight:800;letter-spacing:.19em;color:#e7f1fa}
.glass-kicker .dot{display:inline-block;margin:0 8px 1px;width:4px;height:4px;background:#f4bc72;border-radius:50%}
.hero-glass-card strong{font-size:19px;letter-spacing:-.025em;line-height:1.5;font-weight:700}
.glass-card-foot{font-size:9px;letter-spacing:.065em;color:#e8edf1;font-weight:700}.glass-card-foot span{color:#ecc183;margin-inline:7px}
.hero-frame-index{position:absolute;right:2px;top:55px;writing-mode:vertical-rl;font-size:10px;letter-spacing:.2em;color:rgba(226,234,242,.8)}
.hero-scroll{height:2px;width:100%;position:absolute;bottom:0;left:0;background:linear-gradient(90deg,transparent,#c5d5e5 45%,transparent);opacity:.18}
/* GENERAL SECTIONS */
.section{padding:105px 0 110px}
.section-heading-row{display:flex;justify-content:space-between;align-items:flex-end;gap:55px;margin-bottom:52px}
.section-heading-row h2,.approach-intro h2{font-size:clamp(34px,4.3vw,57px);letter-spacing:-.058em;line-height:1.18;font-weight:700;margin:21px 0 0}
.section-heading-row h2 span{color:#68849c}
.section-intro{margin:0 0 4px;color:#6d7e8b;line-height:2;max-width:372px;font-size:14px}
.section-heading-row.light h2,.approach-intro h2{color:#f4f8fb}.section-heading-row.light h2 span,.approach-intro h2 span{color:#94b1c8}
.section-heading-row.light .section-intro{color:#a8bccc}
.about-section{background:#f8faf9}
.about-bottom{display:grid;grid-template-columns:1.05fr .95fr;gap:9%;align-items:start;border-top:1px solid #dbe4e7;padding-top:38px}
.about-statement p{font-size:20px;line-height:1.8;color:#3e5365;letter-spacing:-.022em;margin:0 0 26px;max-width:600px}
.about-statement strong{color:#102d46}
.text-link{display:inline-flex;align-items:center;gap:22px;color:#244964;font-size:12px;font-weight:800;border-bottom:1px solid #8ea6b5;padding-bottom:10px}.text-link:hover{color:#a26f35}
.text-link span{font-size:17px}
.about-pills{display:grid;gap:10px}
.about-pills>div{padding:18px 19px;border:1px solid #d7e1e7;background:rgba(255,255,255,.73);border-radius:13px;display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:12px}
.about-pills strong{font-size:12px;font-weight:800}.about-pills small{font-size:10px;color:#8894a0}.pill-dot{width:8px;height:8px;border-radius:50%;background:#ddab68;box-shadow:0 0 0 5px rgba(209,151,76,.1)}
/* SERVICES */
.services-section{background:#142a42;position:relative;isolation:isolate;overflow:hidden}
.services-halo{position:absolute;z-index:-1;right:-280px;top:-240px;width:700px;height:700px;background:radial-gradient(circle,rgba(61,113,151,.28),transparent 68%);filter:blur(38px);pointer-events:none}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.service-card{position:relative;min-height:234px;display:flex;flex-direction:column;padding:28px 28px 29px;border-radius:16px;border:1px solid rgba(189,219,237,.2);background:rgba(222,241,255,.065);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:white;transition:background .23s,transform .23s,border .23s}
.service-card:hover{background:rgba(226,240,252,.105);transform:translateY(-3px);border-color:rgba(196,224,244,.32)}
.service-index{color:#d9b37d;font-size:10px;font-weight:800;letter-spacing:.18em;display:block;margin-bottom:auto}
.service-card h3{font-size:18px;letter-spacing:-.037em;line-height:1.35;font-weight:700;margin:37px 0 10px;padding-right:20px}
.service-card p{color:#acbecd;font-size:11px;line-height:1.8;margin:0;padding-right:12px}
.service-mark{position:absolute;right:27px;top:24px;color:#b0c6d8;font-size:18px}
.glass-dark{background:rgba(230,243,250,.075);border:1px solid rgba(201,224,241,.19);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.feature-band{display:grid;grid-template-columns:1.25fr .75fr;overflow:hidden;border-radius:18px;margin-top:28px}
.feature-image{min-height:340px;overflow:hidden}
.feature-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.feature-text{display:flex;flex-direction:column;align-items:start;justify-content:center;padding:43px 41px;color:#f6fafc}
.feature-text h3{font-size:clamp(27px,3vw,37px);letter-spacing:-.05em;line-height:1.25;margin:21px 0 14px}
.feature-text p{color:#abc1d0;font-size:12px;line-height:1.9;margin:0 0 28px}
.light-link{color:#e4eff5;border-color:#698a9c}.light-link:hover{color:#e5ba7c}
/* CLIENTS */
.clients-section{background:#f3f6f6}
.client-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.client-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:189px;padding:16px 15px 17px;position:relative;border:1px solid #d8e1e6;border-radius:14px;transition:border-color .2s,transform .2s,box-shadow .2s;overflow:hidden}
.glass-light{background:rgba(255,255,255,.74);box-shadow:0 3px 14px rgba(30,60,83,.035);backdrop-filter:blur(16px)}
.client-card:hover{transform:translateY(-3px);border-color:#9fb9c8;box-shadow:0 15px 30px rgba(21,57,82,.085)}
.client-logo-wrap{width:100%;height:112px;display:grid;place-items:center;overflow:hidden}
.client-logo-wrap img{width:min(195px,100%);max-height:108px;object-fit:contain;object-position:center}
.client-name{display:block;max-width:100%;font-size:10px;text-align:center;font-weight:750;line-height:1.55;color:#43596a;letter-spacing:.005em}
.client-corner{position:absolute;top:10px;right:14px;font-size:15px;color:#8ba5b4;opacity:.7;transition:opacity .2s}
.client-card:hover .client-corner{opacity:1;color:#b77632}
.clients-footnote{font-size:10px;color:#8293a0;line-height:1.7;margin:22px 0 0}
/* APPROACH */
.approach-section{background:#112339;color:#fff;padding:96px 0;position:relative;overflow:hidden}
.approach-section:before{content:'';position:absolute;right:-100px;bottom:-220px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(196,117,37,.24),transparent 68%);filter:blur(40px);pointer-events:none}
.approach-layout{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:12%}
.approach-intro p{color:#a6bac8;line-height:1.95;max-width:350px;margin:23px 0 0}
.approach-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.approach-card{padding:24px;border-radius:14px;min-height:185px}
.approach-card span{font-size:10px;color:#e0b176;font-weight:800}
.approach-card h3{font-size:15px;font-weight:700;line-height:1.5;margin:28px 0 10px;letter-spacing:-.02em}
.approach-card p{font-size:11px;color:#adc0cf;line-height:1.7;margin:0}
/* GROUP */
.group-section{background:#172f48;color:#f8fbfd;position:relative;isolation:isolate;overflow:hidden}
.group-section:before{content:'';position:absolute;z-index:-1;left:-170px;top:-280px;width:680px;height:680px;filter:blur(60px);background:radial-gradient(circle,rgba(203,133,52,.20),transparent 67%)}
.parent-company{padding:34px 37px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-radius:18px;margin-bottom:14px}
.group-label,.group-small{font-size:9px;color:#e6b681;font-weight:800;letter-spacing:.17em}
.parent-company h3{font-size:24px;margin:19px 0 8px;letter-spacing:-.035em}.parent-company p{font-size:12px;color:#aec1ce;margin:0}
.parent-company>a{font-size:11px;font-weight:800;white-space:nowrap;border-bottom:1px solid rgba(191,216,230,.44);padding-bottom:10px}
.parent-company>a:hover,.group-card:hover .group-link{color:#f0bb79}
.parent-company>a span{font-size:16px;margin-left:18px}
.group-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.group-card{display:flex;flex-direction:column;padding:28px 27px;min-height:206px;border-radius:16px;transition:transform .2s,background .2s}
a.group-card:hover{transform:translateY(-3px);background:rgba(230,243,250,.115)}
.group-card.current{border-color:rgba(234,180,107,.49);background:rgba(232,187,130,.105)}
.group-card h3{font-size:17px;font-weight:700;letter-spacing:-.025em;line-height:1.45;margin:29px 0 27px}
.group-link{margin-top:auto;font-size:11px;color:#aec4d4}.group-link b{font-size:16px;margin-left:7px;font-weight:500}
/* CONTACT */
.contact-section{background:#fafbf9}
.contact-columns{display:grid;grid-template-columns:.85fr 1.15fr;gap:8%;align-items:start}
.contact-details{display:grid;gap:0}
.contact-detail{display:flex;flex-direction:column;align-items:start;gap:11px;padding:24px 0;border-top:1px solid #dce6e9}
.contact-detail:first-child{border-top:1px solid #cbdbe2}
.contact-detail>span{font-size:9px;font-weight:800;letter-spacing:.19em;color:#8293a0}
.contact-detail>a,.contact-detail>strong{font-size:16px;font-weight:750;color:#203b52;line-height:1.7;overflow-wrap:anywhere}
.contact-detail a:hover{color:#a97237}.contact-detail b{font-weight:400;font-size:16px;margin-left:9px}
.contact-note{display:flex;gap:14px;align-items:flex-start;padding:15px 19px;background:#eaf0f1;border-radius:12px;margin-top:17px}
.note-dot{width:8px;height:8px;margin-top:8px;background:#d99a4a;flex:0 0 auto;border-radius:50%}
.contact-note p{font-size:11px;line-height:1.8;color:#617887;margin:0}
.contact-form-card{background:#f1f4f4;border:1px solid #dae3e6;border-radius:18px;padding:29px 31px 34px;box-shadow:0 15px 35px rgba(21,45,64,.05)}
.form-card-header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-bottom:23px;border-bottom:1px solid #d5e0e4;font-size:9px;letter-spacing:.16em;color:#51687a;font-weight:800}
.contact-form-card form{display:grid;gap:17px;margin-top:23px}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form-card label{display:flex;flex-direction:column;gap:9px;font-size:11px;font-weight:800;color:#3d5364}
.contact-form-card label em{font-style:normal;color:#b77834}
.contact-form-card input:not(.hidden-honey),.contact-form-card select,.contact-form-card textarea{display:block;width:100%;border:1px solid #ccd9df;border-radius:9px;background:#fff;color:#223d50;outline:none;min-height:47px;padding:12px 13px;font-size:12px;font-weight:550;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}
.contact-form-card textarea{resize:vertical;min-height:125px;line-height:1.7}
.contact-form-card input::placeholder,.contact-form-card textarea::placeholder{color:#929ea7;font-weight:400}
.contact-form-card input:focus,.contact-form-card select:focus,.contact-form-card textarea:focus{border-color:#648da7;box-shadow:0 0 0 3px rgba(93,144,175,.17)}
.hidden-honey{position:absolute!important;left:-9999px!important;opacity:0!important}
.button-submit{justify-content:space-between;border:0;background:#19354b;color:#fff;width:195px;padding:15px 20px}.button-submit:hover{background:#284c68}
.form-note{font-size:10px;line-height:1.8;color:#7d8e9a;margin:0}.form-note a{text-decoration:underline;text-underline-offset:2px;color:#526b7c}
.map-section{margin-top:74px}
.map-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px}
.map-heading h3{margin:16px 0 0;color:#263f54;font-size:24px;letter-spacing:-.038em}
.map-heading a{display:inline-flex;align-items:center;gap:15px}.map-heading a:hover{color:#a16d31}.map-heading a span{font-size:17px}
.map-frame{width:100%;height:355px;background:#dae3e6;border:1px solid #ccd8de;border-radius:15px;overflow:hidden}
.map-frame iframe{display:block;border:0;width:100%;height:100%}
/* FOOTER */
.site-footer{background:#0d1e31;color:white;padding:42px 0 25px}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:35px}
.footer-brand{display:flex;align-items:center;gap:14px}.footer-emblem{width:88px;height:62px}.footer-emblem img{width:88px;height:auto;display:block}
.footer-brand>span:last-child{display:flex;flex-direction:column;gap:5px}.footer-brand b{font-size:16px;letter-spacing:.08em}.footer-brand small{font-size:9px;color:#b7c9d8;letter-spacing:.14em;font-weight:700}
.footer-top p{font-size:12px;color:#adbdcd;line-height:1.8}.back-to-top{font-size:11px;font-weight:800;color:#e9bd89;border-bottom:1px solid #58788e;padding-bottom:7px}
.footer-bottom{padding-top:21px;border-top:1px solid rgba(214,230,242,.18);display:flex;justify-content:space-between;gap:18px;color:#93aab9;font-size:10px}.footer-bottom a{color:#c2d4e0}.footer-bottom a:hover{color:#e7b87b}
@media(max-width:1100px){.shell{width:min(var(--max),calc(100% - 58px))}.brand{min-width:auto}.brand-words strong{font-size:15px}.brand-words small{font-size:8px}.desktop-nav{gap:16px}.header-cta{padding:12px 14px}.hero-grid{gap:5%}.hero-glass-card{left:-28px}.hero h1{font-size:clamp(42px,5.3vw,70px)}.client-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.client-card{padding:12px;min-height:164px}.client-logo-wrap{height:102px}.contact-columns{gap:5%}}
@media(max-width:880px){:root{--head:74px}.desktop-nav,.header-cta{display:none}.site-header .shell{width:calc(100% - 40px)}.menu-toggle{border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.07);width:45px;height:43px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;margin-left:auto;flex-shrink:0}.menu-toggle span{background:#e8f1f5;width:19px;height:2px;border-radius:9px;transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-nav:not([hidden]){display:grid;position:absolute;top:var(--head);left:0;right:0;background:rgba(14,33,52,.97);backdrop-filter:blur(24px);padding:15px 25px 26px;border-bottom:1px solid rgba(255,255,255,.2);box-shadow:0 22px 30px rgba(5,14,25,.3)}.mobile-nav a{padding:14px 9px;border-bottom:1px solid rgba(255,255,255,.1);color:#d8e4ec;font-weight:700}.mobile-nav a:last-child{border:0}.mobile-nav a.active{color:#f0ba75}.hero-grid{grid-template-columns:1fr .85fr;gap:4%;min-height:660px}.hero-visual{min-height:475px}.hero-glass-card{left:-15px;right:20px;bottom:35px}.hero-bottom{gap:13px;margin-top:42px}.section{padding:85px 0}.section-heading-row{align-items:flex-start;gap:26px}.section-intro{max-width:300px}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-band{grid-template-columns:1.1fr .9fr}.client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.approach-layout{gap:5%}.parent-company{padding:28px}.group-card{padding:22px;min-height:214px}.group-card h3{font-size:15px}.contact-columns{grid-template-columns:1fr 1.1fr;gap:24px}.contact-form-card{padding:22px}.form-pair{grid-template-columns:1fr}}
@media(max-width:660px){:root{--head:68px}.shell{width:calc(100% - 38px)}.brand-icon{width:64px;height:46px}.brand-icon img{width:64px}.brand{gap:9px}.brand-words strong{font-size:13px}.brand-words small{font-size:7px;letter-spacing:.1em}.hero{min-height:auto}.hero-grid{display:flex;flex-direction:column;align-items:stretch;min-height:unset;gap:36px;padding-top:64px;padding-bottom:64px}.hero h1{font-size:clamp(43px,10.2vw,58px);margin:26px 0 19px}.hero-eyebrow{font-size:8px;letter-spacing:.13em}.eyebrow-line{width:12px}.hero-intro{font-size:13px;max-width:530px;line-height:1.85}.hero-actions{gap:10px}.button{font-size:11px;min-height:46px;padding:12px 15px;gap:13px}.hero-bottom{margin-top:32px;padding-top:17px}.hero-visual{height:410px;min-height:410px;max-height:none;width:100%}.hero-photo-frame{inset:0 6px 10px 0;border-radius:88px 18px 20px 20px}.hero-glass-card{left:12px;right:28px;bottom:20px;padding:17px 17px 15px}.hero-glass-card strong{font-size:15px}.glass-card-foot{font-size:8px}.hero-frame-index{top:35px;right:-4px}.hero-orb{width:450px;height:450px;right:-130px;top:370px;filter:blur(39px)}.section{padding:70px 0 74px}.section-heading-row{display:block;margin-bottom:34px}.section-heading-row h2,.approach-intro h2{font-size:clamp(32px,8.2vw,42px)}.section-intro{margin:20px 0 0;max-width:550px;font-size:12px}.about-bottom{grid-template-columns:1fr;gap:30px}.about-statement p{font-size:17px}.about-pills>div{grid-template-columns:15px 1fr}.about-pills small{display:none}.service-grid{grid-template-columns:1fr 1fr;gap:10px}.service-card{min-height:220px;padding:20px 18px}.service-card h3{font-size:16px}.service-card p{font-size:10px}.service-mark{right:18px;top:15px}.feature-band{grid-template-columns:1fr}.feature-image{min-height:220px;height:240px}.feature-text{padding:30px}.client-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.client-card{min-height:168px;padding:13px 10px 15px}.client-name{font-size:9px}.client-logo-wrap img{max-height:95px}.clients-footnote{font-size:9px}.approach-section{padding:75px 0}.approach-layout{grid-template-columns:1fr;gap:32px}.approach-intro p{font-size:12px}.approach-card{min-height:173px;padding:19px}.approach-card h3{margin-top:25px;font-size:13px}.approach-card p{font-size:10px}.parent-company{flex-direction:column;align-items:start;padding:26px}.parent-company h3{font-size:21px}.group-cards{grid-template-columns:1fr}.group-card{min-height:155px;padding:24px}.group-card h3{font-size:17px;margin:20px 0 21px}.contact-columns{grid-template-columns:1fr;gap:30px}.contact-form-card{padding:20px}.form-pair{grid-template-columns:1fr 1fr}.map-section{margin-top:49px}.map-frame{height:300px}.footer-top{flex-wrap:wrap}.footer-top p{width:100%;margin:0}.footer-bottom{flex-direction:column;gap:9px}.footer-brand b{font-size:14px}}
@media(max-width:380px){.brand-words strong{font-size:11px}.brand-words small{font-size:6.5px}.hero h1{font-size:40px}.hero-actions{align-items:stretch}.button{gap:9px}.service-grid{grid-template-columns:1fr}.service-card{min-height:170px}.service-card h3{margin-top:28px}.approach-grid{grid-template-columns:1fr}.approach-card{min-height:138px}.contact-form-card{padding:17px}.form-pair{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Group contact lines reuse the public numbers displayed on Top Star. */
.contact-phones{display:grid;gap:13px}
.contact-phone-entry{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.contact-phone-entry small{font-size:10px;color:#8293a0;font-weight:700}
.contact-phone-entry a{font-size:16px;font-weight:750;color:#203b52;line-height:1.5}
.contact-phone-entry a:hover{color:#a97237}
@media(max-width:380px){.contact-phone-entry a{font-size:14px}}

/* ============================================================
   APEX v5 · Continuous midnight engineering / restrained glass
   Section order: About · Expertise · Our approach · Clients · Group · Contact
   ============================================================ */
:root{--night:#0d2237;--frost-blur:14px}
main{
  background:
    linear-gradient(100deg,rgba(56,91,123,.055),transparent 38%,rgba(35,70,99,.06) 78%,transparent),
    #0d2237;
}
/* Dark sections read as one continuous canvas; lighting fades away at boundaries. */
.hero,.about-section,.services-section,.approach-section,.clients-section,.group-section{
  background:transparent;
  color:#f4f8fc;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.hero > .shell,.about-section > .shell,.services-section > .shell,
.approach-section > .shell,.clients-section > .shell,.group-section > .shell,
.contact-section > .shell{position:relative;z-index:1}
/* The hero maintains the amber and steel contrast without a competing flat panel. */
.hero{background:linear-gradient(125deg,rgba(4,13,25,.40),rgba(18,42,68,.12) 70%,transparent)}
.hero-mesh{opacity:.14;background-size:110px 110px}
.hero-orb{opacity:.68;filter:blur(58px);right:12%;top:0}
.hero-orb-blue{opacity:.6}
.site-header{
  background:rgba(10,27,43,.94);
  backdrop-filter:blur(15px) saturate(120%);
  -webkit-backdrop-filter:blur(15px) saturate(120%);
}
.site-header.scrolled{background:rgba(8,23,39,.94)}
.header-cta{background:rgba(225,240,250,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-glass-card{
  background:rgba(218,236,249,.135);
  backdrop-filter:blur(15px) saturate(112%);
  -webkit-backdrop-filter:blur(15px) saturate(112%);
  border:1px solid rgba(245,250,255,.38);
  box-shadow:0 22px 55px rgba(2,9,18,.30),inset 0 1px rgba(255,255,255,.13);
}
.button-ghost{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* Equal treatment for all non-contact section headings. */
.about-section .section-heading-row h2,.clients-section .section-heading-row h2{color:#f5f9fd}
.about-section .section-heading-row h2 span,.clients-section .section-heading-row h2 span{color:#a9c5d9}
.about-section .section-intro,.clients-section .section-intro{color:#b7c9d8}
.about-section .eyebrow.dark,.clients-section .eyebrow.dark{color:#a8c8de}
.about-section .section-heading-row,.clients-section .section-heading-row{position:relative;z-index:2}
/* Frost panels use consistent colour and only moderate blur. */
.glass-dark,.service-card,.approach-card,.approach-intro,.group-card,.parent-company,
.about-bottom,.about-pills > div,.client-grid{
  backdrop-filter:blur(var(--frost-blur)) saturate(112%);
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(112%);
}
/* Introduction: amber is behind the three small glass shelves, not over the page. */
.about-section::before{
  content:'';position:absolute;pointer-events:none;z-index:0;
  width:min(610px,72vw);height:470px;right:2%;bottom:-55px;
  background:radial-gradient(ellipse at 53% 48%,rgba(224,144,61,.47) 0%,rgba(195,108,41,.26) 36%,rgba(120,68,41,.07) 56%,transparent 75%);
}
.about-bottom{
  position:relative;isolation:isolate;
  padding:32px 32px 33px;
  border:1px solid rgba(211,231,247,.23);
  border-radius:20px;
  background:linear-gradient(125deg,rgba(231,245,253,.112),rgba(218,238,251,.055));
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 20px 55px rgba(5,17,29,.17);
}
.about-statement p{color:#e0eaf2}
.about-statement strong{color:#fff}
.about-statement .text-link{color:#f0c185;border-color:rgba(241,191,123,.60)}
.about-statement .text-link:hover{color:#fff}
.about-pills > div{
  background:linear-gradient(110deg,rgba(243,250,254,.14),rgba(233,244,252,.08));
  border:1px solid rgba(227,242,253,.32);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 24px rgba(5,16,27,.12);
}
.about-pills strong{color:#f5f9fd}.about-pills small{color:#c7d8e5}
/* Expertise: one warm ellipse and one restrained steel-blue secondary highlight. */
.services-section::before{
  content:'';position:absolute;pointer-events:none;z-index:0;
  width:660px;height:590px;right:0;top:200px;
  background:radial-gradient(ellipse at center,rgba(227,146,60,.44),rgba(215,120,48,.20) 45%,transparent 72%);
}
.services-halo{z-index:0;width:520px;height:510px;top:38%;right:auto;left:-210px;filter:none;
  background:radial-gradient(ellipse,rgba(61,135,183,.28),transparent 69%)}
.service-grid{position:relative;z-index:1}
.service-card{
  background:linear-gradient(135deg,rgba(230,245,254,.135),rgba(212,232,246,.07));
  border:1px solid rgba(233,246,255,.30);
  box-shadow:0 16px 32px rgba(4,13,23,.19),inset 0 1px rgba(255,255,255,.12);
}
.service-card:hover{background:rgba(236,246,255,.18);border-color:rgba(243,251,255,.49)}
.service-card p{color:#d1e0eb}
.feature-band{
  border:1px solid rgba(234,245,251,.28);
  box-shadow:0 25px 65px rgba(4,12,22,.23);
  background:rgba(230,244,252,.09);
}
.feature-text{background:rgba(215,234,246,.045)}
/* How We Work: focal amber pool directly under the approach tiles. */
.approach-section{padding:105px 0 110px}
.approach-section::before{
  content:'';position:absolute;pointer-events:none;z-index:0;
  width:710px;height:570px;left:42%;top:2%;
  background:radial-gradient(ellipse at 53% 53%,rgba(237,152,62,.64) 0%,rgba(209,111,39,.30) 38%,rgba(151,84,44,.07) 61%,transparent 78%);
}
.approach-section::after{
  content:'';position:absolute;pointer-events:none;z-index:0;
  width:580px;height:500px;left:-16%;bottom:-22%;
  background:radial-gradient(ellipse,rgba(63,143,195,.31),transparent 70%);
}
.approach-intro{
  border-radius:19px;padding:30px;
  border:1px solid rgba(219,239,251,.23);
  background:linear-gradient(125deg,rgba(224,241,253,.12),rgba(224,241,253,.06));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 15px 40px rgba(3,11,22,.13);
}
.approach-intro p{color:#d4e2ec}
.approach-card{
  position:relative;
  border:1px solid rgba(241,250,255,.33);
  background:linear-gradient(135deg,rgba(243,249,253,.175),rgba(229,242,250,.09));
  box-shadow:0 16px 30px rgba(4,13,24,.21),inset 0 1px rgba(255,255,255,.13);
}
.approach-card p{color:#dce7ef}
/* Clients: dark outer showcase + genuinely ivory tiles for accurate logo colour. */
.clients-section::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  width:580px;height:540px;right:2%;top:6%;
  background:radial-gradient(ellipse,rgba(79,134,172,.24),rgba(46,99,143,.12) 46%,transparent 76%);
}
.client-grid{
  position:relative;z-index:1;gap:14px;
  padding:23px;
  border-radius:21px;
  border:1px solid rgba(210,234,252,.24);
  background:linear-gradient(130deg,rgba(227,243,254,.115),rgba(225,240,250,.05));
  box-shadow:0 25px 65px rgba(4,13,24,.22),inset 0 1px rgba(255,255,255,.12);
}
.client-card,.client-card.glass-light{
  position:relative;
  z-index:1;
  background:#f7f6f2;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid rgba(247,251,253,.8);
  box-shadow:0 6px 18px rgba(2,14,26,.13);
}
.client-card:hover{box-shadow:0 16px 33px rgba(2,14,26,.24);border-color:#f8d6a8}
.client-name{color:#43596a}
.client-logo-wrap{display:flex;align-items:center;justify-content:center;flex-shrink:0;transform:translateY(14px);overflow:visible}
.client-logo-wrap img{
  display:block;width:auto;height:auto;max-width:min(195px,100%);max-height:103px;
  margin:auto;object-fit:contain;object-position:center center;
}
.client-card:has(img[src$="galadari-engineering-works-ltd.webp"]) .client-logo-wrap img{transform:scale(1.22)}
.clients-footnote{color:#a9c2d3}
/* Group: one halo at the parent card; current card is gently outlined amber. */
.group-section::before{
  content:'';position:absolute;pointer-events:none;z-index:0;
  width:690px;height:530px;left:-5%;top:12%;
  background:radial-gradient(ellipse,rgba(224,142,62,.51) 0%,rgba(189,104,38,.21) 43%,transparent 73%);
}
.group-section::after{
  content:'';position:absolute;pointer-events:none;z-index:0;
  width:510px;height:450px;right:-9%;bottom:-12%;
  background:radial-gradient(ellipse,rgba(49,123,171,.22),transparent 72%);
}
.parent-company,.group-card{
  position:relative;
  border:1px solid rgba(231,246,255,.29);
  background:linear-gradient(130deg,rgba(232,244,252,.14),rgba(221,239,251,.07));
  box-shadow:0 17px 38px rgba(4,12,23,.18),inset 0 1px rgba(255,255,255,.12);
}
a.group-card:hover{background:rgba(234,246,255,.19)}
.group-card.current{background:rgba(235,190,122,.125);border-color:rgba(239,182,108,.56)}
.parent-company p,.group-link{color:#d4e4ef}
/* Contact deliberately breaks into a light calm canvas; never cloudy amber stains. */
.contact-section{
  background:linear-gradient(145deg,#eff4f6,#fafbf9 53%,#eff5f7 100%);
  position:relative;isolation:isolate;overflow:hidden;
}
.contact-section::before,.contact-section::after{content:none}
.contact-columns{
  padding:0;border:0;background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
}
.contact-details,.contact-form-card{
  background:rgba(255,255,255,.75);
  border:1px solid #dce6eb;
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  box-shadow:0 18px 42px rgba(24,56,77,.065);
}
.contact-details{padding:0 24px 22px;border-radius:17px}
.contact-detail:first-child{border-top:0}
.contact-note{background:#eaf0f2}
.map-frame{padding:8px;height:371px;background:#f9fbfb;border-color:#d6e3e8;box-shadow:0 18px 40px rgba(18,45,66,.07)}
.map-frame iframe{border-radius:10px}
/* The header 'Enquire' button is the single contact call to action. */
.header-cta.active{background:rgba(218,158,78,.23);border-color:rgba(241,194,127,.75)}
/* Light-travel performance + accessibility fallback */
@media(max-width:880px){.client-grid{padding:17px}.approach-section{padding:82px 0}}
@media(max-width:660px){
  .about-bottom{padding:23px 19px}
  .client-grid{padding:12px;gap:10px}
  .client-logo-wrap{transform:translateY(10px)}
  .client-card:has(img[src$="galadari-engineering-works-ltd.webp"]) .client-logo-wrap img{transform:scale(1.12)}
  .approach-section{padding:74px 0}
  .approach-section::before{left:5%;top:18%;width:105%;height:77%}
  .approach-intro{padding:22px}
  .services-section::before{right:-42%;top:15%;width:130vw;height:70%}
  .contact-details{padding:0 16px 18px}
  .map-frame{height:316px;padding:6px}
}
@media(prefers-reduced-transparency:reduce){
  .service-card,.approach-card,.parent-company,.group-card,.about-bottom,.about-pills>div{background:rgba(26,49,71,.93)}
  .contact-details,.contact-form-card{background:#fff}
}




/* ============================================================
   APEX v8 | near-liquid-glass
   Intent: clean navy engineering, crisp light geometry, optically
   clear surfaces, visible inner edge / lens glints, restrained blur.
   Replaces old v6/v7 stacked haze rules in one maintainable layer.
   ============================================================ */
:root{
  --night:#0a1c30;
  --glass-blur:5px;
  --glass-edge:rgba(241,249,255,.48);
  --glass-blue:rgba(175,217,245,.10);
  --light-amber:#eab573;
}
body{background:#091b2e}
main{
  background:linear-gradient(132deg,#09192b 0%,#102840 40%,#0c2137 76%,#091b2e 100%);
}
/* Clear the old foggy pseudo-light sources; replace with quieter, cleaner geometry. */
.hero,.about-section,.services-section,.approach-section,.clients-section,.group-section{
  background:transparent;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.hero::after,.about-section::after,.services-section::after,.approach-section::after,.clients-section::after,.group-section::after{
  content:none;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-2;
  background:
    radial-gradient(ellipse 510px 360px at 75% 34%,rgba(209,127,53,.23),transparent 75%),
    linear-gradient(118deg,transparent 13%,rgba(41,89,124,.11) 48%,transparent 88%);
}
.site-header{
  background:linear-gradient(115deg,rgba(10,27,44,.84),rgba(17,43,64,.77));
  border-bottom:1px solid rgba(213,236,251,.18);
  backdrop-filter:blur(6px) saturate(130%);
  -webkit-backdrop-filter:blur(6px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 28px rgba(4,16,28,.12);
}
.site-header.scrolled{
  background:rgba(9,25,42,.87);
  backdrop-filter:blur(7px) saturate(133%);
  -webkit-backdrop-filter:blur(7px) saturate(133%);
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 12px 34px rgba(1,8,17,.26);
}
.header-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(116deg,rgba(235,247,255,.18),rgba(129,178,214,.08));
  border:1px solid rgba(229,246,255,.43);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(13,43,65,.32),0 8px 25px rgba(0,7,19,.12);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.header-cta:hover{background:rgba(226,242,251,.23);border-color:rgba(248,254,255,.70)}
/* Signature hero composition: the glass belongs OVER the photography, not as a tall wall beside it. */
.hero{min-height:680px;}
.hero-mesh{opacity:.17;background-size:128px 128px}
.hero-orb{
  right:2%;top:1%;width:620px;height:590px;opacity:.84;filter:blur(32px);z-index:-2;
  background:radial-gradient(circle at 48% 48%,rgba(237,154,75,.50) 0%,rgba(205,124,48,.34) 27%,rgba(180,107,51,.12) 51%,transparent 72%);
}
.hero-orb-blue{
  left:-15%;bottom:-35%;width:570px;height:490px;opacity:.60;filter:blur(46px);z-index:-2;
  background:radial-gradient(circle,rgba(60,125,174,.43),transparent 72%);
}
.hero-orbit-ring{
  position:absolute;right:3.5%;top:10%;width:470px;height:470px;border-radius:50%;
  border:1.5px solid rgba(245,185,108,.46);z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 54%,rgba(238,173,98,.065) 61%,transparent 72%);
  box-shadow:0 0 0 18px rgba(241,172,89,.045),0 0 0 56px rgba(230,159,84,.023),0 0 80px rgba(225,138,66,.11);
}
.hero-orbit-ring::before,.hero-orbit-ring::after{content:'';position:absolute;inset:38px;border:1px solid rgba(241,208,169,.19);border-radius:50%}
.hero-orbit-ring::after{inset:90px;border-color:rgba(242,213,174,.10)}
.hero-glass-slab{
  position:absolute;right:31%;top:11%;width:125px;height:330px;z-index:-1;pointer-events:none;transform:rotate(-14deg);
  border-radius:36px;
  background:linear-gradient(132deg,rgba(239,250,255,.13),rgba(240,250,255,.02) 50%,transparent);
  border:1px solid rgba(232,245,255,.24);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.13),0 20px 54px rgba(0,6,18,.13);
}
.hero-photo-frame{
  position:absolute;inset:15px 16px 22px 0;
  border-radius:94px 23px 24px 24px;
  border:1px solid rgba(247,252,255,.54);
  box-shadow:0 32px 68px rgba(1,7,17,.39),0 0 0 5px rgba(186,213,230,.05);
}
.hero-photo-frame::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 56%,rgba(4,14,29,.39) 100%),
             linear-gradient(100deg,rgba(7,18,31,.17),transparent 42%);
}
.hero-specular{
  position:absolute;top:5px;right:4px;width:185px;height:5px;border-radius:50%;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,223,175,.65),transparent);
  filter:blur(4px);
}
.hero-visual{overflow:visible}
.hero-glass-card,
.hero-glass-card.liquid-pane{
  position:absolute;z-index:5;left:-57px;right:65px;top:auto;bottom:41px;
  min-height:0; width:auto;height:auto;
  padding:21px 24px 20px;border-radius:22px;gap:12px;
  background:linear-gradient(132deg,rgba(239,248,253,.235) 0%,rgba(125,169,200,.135) 45%,rgba(16,42,67,.28) 100%);
  border:1px solid rgba(252,255,255,.63);
  backdrop-filter:blur(6px) saturate(146%) brightness(1.06);
  -webkit-backdrop-filter:blur(6px) saturate(146%) brightness(1.06);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.40),inset -1px -1px 0 rgba(190,219,239,.16),0 20px 48px rgba(1,7,17,.35);
}
.hero-glass-card::before{
  content:'';position:absolute;left:14px;right:14px;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.88) 24%,rgba(255,216,164,.55) 63%,transparent);
  pointer-events:none;box-shadow:0 1px 13px rgba(255,247,232,.40);border-radius:2px;
}
.hero-glass-card::after{
  content:'';position:absolute;pointer-events:none;right:12px;top:14px;width:36%;height:32%;border-radius:30px;
  background:radial-gradient(ellipse at 100% 0%,rgba(255,222,169,.19),transparent 72%);
}
.hero-glass-card strong{font-size:19px;line-height:1.42;text-shadow:0 2px 14px rgba(7,20,34,.30)}
.hero-actions .button-ghost{
  background:linear-gradient(120deg,rgba(232,245,253,.145),rgba(149,188,214,.06));
  border-color:rgba(228,244,255,.47);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
.hero-actions .button-primary{
  background:linear-gradient(130deg,#e9b674,#dba15b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.43),0 10px 26px rgba(5,10,18,.18);
}
/* Deliberate lighting only: lines and shapes, never full dirty amber patches. */
.about-section::before{
  content:'';position:absolute;right:-150px;top:8%;width:460px;height:460px;pointer-events:none;
  border:1px solid rgba(231,179,119,.15);border-radius:50%;
  box-shadow:0 0 0 55px rgba(231,179,119,.024),inset 0 0 80px rgba(228,167,101,.04);
  background:radial-gradient(circle at 50% 50%,rgba(245,179,98,.09),transparent 65%);
}
.services-section::before{
  content:'';position:absolute;right:-110px;top:10%;width:590px;height:590px;pointer-events:none;
  background:radial-gradient(circle at 48% 43%,rgba(222,148,67,.20),rgba(227,142,64,.075) 28%,transparent 64%);
}
.services-halo{left:-200px;right:auto;top:35%;filter:none;background:radial-gradient(circle,rgba(68,127,169,.19),transparent 72%)}
.approach-section::before{
  content:'';position:absolute;left:auto;right:-135px;top:0;width:560px;height:520px;pointer-events:none;
  border-radius:50%;border:1px solid rgba(238,176,107,.15);
  background:radial-gradient(circle at 51% 50%,rgba(233,159,76,.23),rgba(220,144,56,.11) 27%,transparent 69%);
  box-shadow:0 0 0 28px rgba(236,171,92,.025),0 0 0 73px rgba(236,171,92,.018);
}
.approach-section::after{content:none}
.clients-section::before{content:none}
.group-section::before{
  content:'';position:absolute;left:-170px;top:2%;width:550px;height:550px;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(221,150,68,.18),transparent 68%);
}
.group-section::after{content:none}
/* Edge-lit optically clear panes: low blur and clear inner reflection. */
.about-bottom,.about-pills>div,.service-card,.feature-band,.approach-intro,.approach-card,.parent-company,.group-card{
  position:relative;
  backdrop-filter:blur(var(--glass-blur)) saturate(134%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(134%);
  background:linear-gradient(128deg,rgba(220,240,252,.16),rgba(153,201,235,.075) 53%,rgba(100,160,200,.045));
  border:1px solid rgba(224,244,255,.37);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(137,190,223,.08),0 18px 38px rgba(2,10,23,.15);
}
.about-pills>div{background:linear-gradient(125deg,rgba(232,244,251,.185),rgba(177,213,234,.085));border-color:rgba(221,242,255,.33)}
/* Real highlight boundary, without painting fog over text. */
.about-bottom::after,.service-card::after,.approach-card::after,.parent-company::after,.group-card::after{
  content:'';position:absolute;left:15px;right:15px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.59) 33%,rgba(255,218,174,.38) 66%,transparent 100%);
}
.service-card{border-radius:20px;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.service-card:hover,.approach-card:hover,a.group-card:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg,rgba(231,246,255,.24),rgba(139,187,220,.12));
  border-color:rgba(252,255,255,.68);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.32),0 21px 42px rgba(2,10,23,.23);
}
.service-card p,.approach-card p{color:#d5e4ef}
.feature-band{overflow:hidden;border-radius:22px}
.feature-band::before{content:none}
.feature-text{background:linear-gradient(145deg,rgba(160,202,229,.10),rgba(21,49,71,.11))}
.approach-grid{position:relative}
.approach-grid::before{
  content:'';position:absolute;left:7%;right:10%;top:42%;height:96px;border-radius:100%;z-index:0;pointer-events:none;
  background:linear-gradient(95deg,transparent,rgba(246,177,90,.16) 26%,rgba(248,176,95,.27) 52%,rgba(246,177,90,.10) 74%,transparent);
  filter:blur(19px);
}
.approach-grid::after{
  content:'';position:absolute;left:19%;top:-22%;width:370px;height:370px;border-radius:50%;
  pointer-events:none;z-index:0;
  border:1px solid rgba(249,186,109,.44);
  background:radial-gradient(circle at 47% 48%,rgba(247,168,76,.22),rgba(225,148,66,.08) 38%,transparent 69%);
  box-shadow:0 0 0 24px rgba(247,181,97,.03),0 0 60px rgba(232,137,57,.09);
}
.approach-card{z-index:1;border-radius:19px}
.approach-intro{border-radius:21px}
.parent-company,.group-card{border-radius:20px}
.group-card.current{
  background:linear-gradient(130deg,rgba(235,191,131,.20),rgba(226,244,255,.08));
  border-color:rgba(249,196,124,.59);
}
/* One slow client strip, now sitting in a luminous glass tray. Keep light logos accurate. */
.clients-orbit-ring{
  position:absolute;right:8%;top:80px;width:310px;height:310px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(229,187,127,.18);box-shadow:0 0 0 20px rgba(229,187,127,.025);
}
.clients-orbit-ring::before,.clients-orbit-ring::after{content:'';position:absolute;inset:26px;border-radius:50%;border:1px solid rgba(239,210,162,.095)}
.clients-orbit-ring::after{inset:72px;border-color:rgba(252,255,255,.07)}
.clients-stage{
  position:relative;margin-top:24px;padding:20px;border-radius:30px;
  background:linear-gradient(125deg,rgba(230,241,248,.28),rgba(214,233,246,.15) 48%,rgba(225,239,249,.22));
  backdrop-filter:blur(5px) saturate(135%);-webkit-backdrop-filter:blur(5px) saturate(135%);
  border:1px solid rgba(237,247,253,.41);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.37),0 20px 45px rgba(4,12,23,.18);
}
.clients-stage::before{
  content:'';position:absolute;left:18px;right:18px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.61) 30%,rgba(255,223,178,.49) 70%,transparent);
}
.clients-stage::after{content:none}
.client-marquee-shell{
  position:relative;overflow:hidden;max-width:100%;padding:15px;border-radius:23px;
  background:linear-gradient(180deg,rgba(235,242,248,.47),rgba(221,235,244,.32));
  border:1px solid rgba(245,250,255,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36);
}
.client-marquee-shell::before{content:none}
.client-marquee-shell::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(29,56,78,.16),transparent 5%,transparent 95%,rgba(29,56,78,.16));
}
.client-marquee-track{display:flex;align-items:stretch;gap:18px;width:max-content;will-change:transform}
.client-marquee-item{
  position:relative;flex:0 0 268px;min-width:268px;max-width:268px;min-height:200px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  padding:20px 16px 16px;border-radius:19px;
  background:linear-gradient(145deg,#ffffff,#f4f7f9);
  border:1px solid #eef2f5;
  box-shadow:inset 1px 1px 0 #fff,0 8px 20px rgba(11,29,49,.10);
  transition:transform .25s,box-shadow .25s;
}
.client-marquee-item::before{content:'';position:absolute;inset:1px 1px auto;height:28%;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.65),transparent)}
.client-marquee-logo{width:100%;height:112px;display:flex;align-items:center;justify-content:center;padding:4px 8px}
.client-marquee-logo img{display:block;max-width:100%;max-height:99px;object-fit:contain}
.client-marquee-name{font-size:11px;line-height:1.55;color:#253b4e;font-weight:750;margin:11px 0 0}
.client-marquee-item:hover{transform:translateY(-2px);box-shadow:0 11px 22px rgba(10,28,47,.16)}
.marquee-left{animation:marqueeLeft 125s linear infinite}
.client-marquee-shell:hover .client-marquee-track,
.client-marquee-shell:focus-within .client-marquee-track{animation-play-state:paused}
@keyframes marqueeLeft{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
.clients-footnote{color:#b8cede;margin-top:18px;font-size:10px}
/* A calmer pale contact section for readability and form accessibility. */
.contact-section{background:linear-gradient(150deg,#f5f8fa,#edf3f6 52%,#f9fbfb 100%)}
.contact-details,.contact-form-card,.map-frame{
  background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(248,251,252,.87));
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  border:1px solid rgba(206,223,232,.85);
  box-shadow:0 14px 32px rgba(25,52,75,.065),inset 0 1px 0 rgba(255,255,255,.65);
}
.contact-details::before,.contact-form-card::before,.map-frame::before{content:none}
.contact-columns{background:transparent;border:0;padding:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.contact-details{padding:0 24px 22px;border-radius:19px}
.map-frame{padding:8px}
/* Motion stays optional and never displaces reading content. */
@media (prefers-reduced-motion:reduce){
  .marquee-left{animation:none}
  .client-marquee-shell{overflow-x:auto}
  .service-card:hover,.approach-card:hover,a.group-card:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .hero-glass-card,.service-card,.approach-card,.parent-company,.group-card,.about-bottom{background:rgba(20,47,71,.95);backdrop-filter:none;-webkit-backdrop-filter:none}
  .contact-details,.contact-form-card{background:#fff}
}
@media(max-width:1100px){
  .hero-orbit-ring{width:385px;height:385px;right:1%;top:17%}
  .hero-glass-card,.hero-glass-card.liquid-pane{left:-35px;right:35px;bottom:35px}
  .client-marquee-item{flex-basis:240px;min-width:240px;max-width:240px;min-height:186px}
}
@media(max-width:880px){
  .hero-glass-card,.hero-glass-card.liquid-pane{left:-12px;right:21px;bottom:35px}
  .hero-orbit-ring{width:305px;height:305px;right:-12px;top:24%}
  .hero-glass-slab{display:none}
  .clients-stage{padding:16px}
  .client-marquee-item{flex-basis:210px;min-width:210px;max-width:210px;min-height:168px;padding:15px}
  .client-marquee-logo{height:89px}.client-marquee-logo img{max-height:78px}
  .client-marquee-name{font-size:10px}
  .marquee-left{animation-duration:115s}
}
@media(max-width:660px){
  .hero-grid{gap:36px}
  .hero-visual{height:420px;min-height:420px}
  .hero-photo-frame{inset:0 7px 10px 0;border-radius:80px 18px 22px 20px}
  .hero-glass-card,.hero-glass-card.liquid-pane{left:12px;right:20px;bottom:24px;padding:17px 17px 16px;border-radius:18px}
  .hero-glass-card strong{font-size:15px}
  .hero-orbit-ring{width:255px;height:255px;right:-66px;top:auto;bottom:78px}
  .hero-orb{right:-160px;top:32%;width:440px;height:440px}
  .clients-stage{padding:11px;border-radius:24px}
  .client-marquee-shell{padding:10px;border-radius:18px}
  .client-marquee-track{gap:10px}
  .client-marquee-item{flex-basis:184px;min-width:184px;max-width:184px;min-height:166px;padding:12px;border-radius:16px}
  .client-marquee-logo{height:79px;padding:0 5px}.client-marquee-logo img{max-height:69px}
  .client-marquee-name{font-size:10px;margin-top:8px}
  .marquee-left{animation-duration:105s}
  .contact-details{padding:0 16px 18px}
}


/* --------------------------------------------------------------------------
   Apex v9 — Balanced premium motion. Glass remains optically clear and readable.
   -------------------------------------------------------------------------- */
@keyframes apexHeroEnter {
  from { opacity:0; translate:0 20px; }
  to { opacity:1; translate:0 0; }
}
@keyframes apexOrbitTravel {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
@keyframes apexOrbitPulse {
  0%,100% { opacity:.8; scale:1; }
  50% { opacity:1; scale:1.018; }
}
@keyframes apexRibbonMove {
  0%,100% { translate:-16px 0; opacity:.66; }
  50% { translate:20px 0; opacity:1; }
}
@keyframes apexLightDrift {
  0%,100% { translate:-9px -7px; opacity:.68; }
  50% { translate:12px 7px; opacity:.98; }
}
/* Brand signature: circles stay centred, but tiny moving glints indicate motion. */
.hero-orbit-ring{
  animation:apexOrbitPulse 11s ease-in-out infinite;
  will-change:transform,opacity;
}
.orbit-tracer{
  position:absolute;inset:-1px;border-radius:50%;display:block;pointer-events:none;
  animation:apexOrbitTravel 38s linear infinite;
}
.orbit-tracer::after{
  content:'';position:absolute;top:-4px;left:50%;width:9px;height:9px;border-radius:50%;
  background:#f4bb76;
  box-shadow:0 0 15px 4px rgba(241,158,72,.55),0 0 34px 12px rgba(237,141,56,.19);
}
.orbit-tracer-secondary{inset:36px;animation-duration:53s;animation-direction:reverse;opacity:.6}
.orbit-tracer-secondary::after{width:6px;height:6px;top:-3px;background:#c5e8ff;box-shadow:0 0 10px 3px rgba(172,216,248,.46)}
.hero-glass-slab{animation:apexLightDrift 16s ease-in-out infinite}
.approach-grid::before{animation:apexRibbonMove 15s ease-in-out infinite}
/* Entrance animation is opt-in and applies only after JavaScript activates it. */
.motion-ready .hero-copy > .hero-eyebrow,
.motion-ready .hero-copy > h1,
.motion-ready .hero-copy > .hero-intro,
.motion-ready .hero-copy > .hero-actions,
.motion-ready .hero-copy > .hero-bottom,
.motion-ready .hero-photo-frame,
.motion-ready .hero-glass-card{
  animation:apexHeroEnter 760ms cubic-bezier(.18,.75,.28,1) both;
}
.motion-ready .hero-copy > h1{animation-delay:85ms}
.motion-ready .hero-copy > .hero-intro{animation-delay:170ms}
.motion-ready .hero-copy > .hero-actions{animation-delay:245ms}
.motion-ready .hero-copy > .hero-bottom{animation-delay:330ms}
.motion-ready .hero-photo-frame{animation-delay:125ms}
.motion-ready .hero-glass-card{animation-delay:390ms}
/* Use individual translate property, so existing hover transforms continue to work. */
.motion-ready .reveal-on-scroll{
  opacity:0;
  translate:0 22px;
  transition:opacity 680ms ease var(--reveal-delay,0ms),translate 740ms cubic-bezier(.18,.74,.22,1) var(--reveal-delay,0ms);
}
.motion-ready .reveal-on-scroll.is-revealed{opacity:1;translate:0 0}
/* Mouse-driven specular highlight. Tiny and directional; never obscures copy. */
.liquid-interactive{isolation:isolate}
.liquid-pointer-highlight{
  position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(circle 240px at var(--light-x,50%) var(--light-y,30%),rgba(255,244,228,.16),rgba(214,235,252,.07) 33%,transparent 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  transition:opacity 300ms ease;
}
.liquid-interactive.liquid-hovering .liquid-pointer-highlight{opacity:1}
.liquid-interactive:focus-within{border-color:rgba(244,247,255,.64)}
/* Slightly smoother borders and surfaces during deliberate interaction. */
.service-card,.approach-card,.group-card,.parent-company{
  transition:transform 300ms cubic-bezier(.18,.65,.24,1),background 300ms ease,border-color 300ms ease,box-shadow 300ms ease;
}
.service-card:hover,.approach-card:hover,a.group-card:hover{transform:translateY(-3px) scale(1.004)}
.header-cta:after,.desktop-nav a:after{transition-duration:280ms}
.button,.header-cta{transition:transform 250ms ease,background 250ms ease,box-shadow 250ms ease,border-color 250ms ease}
.contact-form-card input:focus,.contact-form-card select:focus,.contact-form-card textarea:focus{transition:border-color 180ms ease,box-shadow 180ms ease,background 180ms ease}
/* Small screens retain the attractive static glass treatment, without cursor work. */
@media(hover:none), (pointer:coarse){
  .liquid-pointer-highlight{display:none}
  .hero-glass-slab{animation:none}
  .hero-orbit-ring{animation-duration:18s}
  .orbit-tracer{animation-duration:65s}
  .approach-grid::before{animation-duration:20s}
}
/* Accessibility, battery life, and motion sensitivity. */
@media(prefers-reduced-motion:reduce){
  .hero-orbit-ring,.orbit-tracer,.hero-glass-slab,.approach-grid::before{animation:none!important}
  .motion-ready .hero-copy>*,.motion-ready .hero-photo-frame,.motion-ready .hero-glass-card{animation:none!important;opacity:1!important;translate:none!important}
  .motion-ready .reveal-on-scroll,.motion-ready .reveal-on-scroll.is-revealed{opacity:1!important;translate:none!important;transition:none!important}
  .liquid-pointer-highlight{display:none!important}
  .service-card:hover,.approach-card:hover,a.group-card:hover{transform:none!important}
}
.tab-hidden .hero-orbit-ring,.tab-hidden .orbit-tracer,.tab-hidden .hero-glass-slab,.tab-hidden .approach-grid::before,.tab-hidden .client-marquee-track{animation-play-state:paused!important}




/* ------------------------------------------------------------------
   Apex v11 — Quiet motion, fully natural scrolling.
   Glass is a visual material, not an animated obstacle.
   ------------------------------------------------------------------ */
/* Stop the ambient orbit spin, floating decorative slab and moving ribbon.
   The amber shapes remain in place as part of the visual identity. */
.hero-orbit-ring,
.orbit-tracer,
.hero-glass-slab,
.approach-grid::before {
  animation:none!important;
}
.hero-orbit-ring{will-change:auto}
/* The hero photo alone gets a tiny, scroll-linked offset. No section or card is
   pinned or moved, and mobile sees the static composition. */
@media (min-width: 961px) and (min-height: 681px) and (prefers-reduced-motion: no-preference) {
  body.subtle-parallax .hero-photo-frame img {
    transform:translate3d(0,var(--photo-shift,0px),0) scale(1.045);
    transform-origin:center;
  }
}
/* Calm first-load entrance: move just 12px, and settle promptly. */
@keyframes apexHeroQuiet {
  from{opacity:0;translate:0 12px}
  to{opacity:1;translate:0 0}
}
.motion-ready .hero-copy > .hero-eyebrow,
.motion-ready .hero-copy > h1,
.motion-ready .hero-copy > .hero-intro,
.motion-ready .hero-copy > .hero-actions,
.motion-ready .hero-copy > .hero-bottom,
.motion-ready .hero-photo-frame,
.motion-ready .hero-glass-card {
  animation-name:apexHeroQuiet;
  animation-duration:520ms;
  animation-timing-function:cubic-bezier(.23,.74,.28,1);
}
.motion-ready .hero-copy > h1{animation-delay:55ms}
.motion-ready .hero-copy > .hero-intro{animation-delay:110ms}
.motion-ready .hero-copy > .hero-actions{animation-delay:160ms}
.motion-ready .hero-copy > .hero-bottom{animation-delay:210ms}
.motion-ready .hero-photo-frame{animation-delay:80ms}
.motion-ready .hero-glass-card{animation-delay:170ms}
/* Scroll-triggered entrance: a single 12px fade and no movement afterwards. */
.motion-ready .reveal-on-scroll{
  opacity:0;
  translate:0 12px;
  transition:opacity 510ms ease var(--reveal-delay,0ms),
             translate 560ms cubic-bezier(.22,.73,.26,1) var(--reveal-delay,0ms);
}
.motion-ready .reveal-on-scroll.is-revealed{opacity:1;translate:0 0}
/* Hover feedback remains understated, without scale or pronounced jumps. */
.service-card:hover,.approach-card:hover,a.group-card:hover{
  transform:translateY(-2px);
}
.liquid-pointer-highlight{
  background:radial-gradient(circle 225px at var(--light-x,50%) var(--light-y,30%),
    rgba(255,244,229,.12),rgba(214,235,252,.04) 33%,transparent 70%);
}
/* All sections return to their natural document height. */
#approach{height:auto;min-height:0;overflow:hidden}
#approach .approach-layout{position:relative;height:auto;min-height:0;top:auto}
@media(prefers-reduced-motion:reduce){
  body.subtle-parallax .hero-photo-frame img{transform:none!important}
  .motion-ready .hero-copy > *,
  .motion-ready .hero-photo-frame,
  .motion-ready .hero-glass-card{animation:none!important;opacity:1!important;translate:none!important}
  .motion-ready .reveal-on-scroll,
  .motion-ready .reveal-on-scroll.is-revealed{opacity:1!important;translate:none!important;transition:none!important}
}


/* ==========================================================================
   Apex v12 — Refined visual rhythm inspired by image-led marine/engineering
   sites. No sticky storytelling or scroll-jacking. Interactive logo carousel.
   ========================================================================== */
/* Single-track client carousel: native scrolling under the hood, JS moves
   scrollLeft rather than animating a non-scrollable transform. */
#clients .clients-controls{
  position:relative;display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin:12px 0 15px;color:#dbe9f4;z-index:4;
}
#clients .clients-controls-caption{font-size:11px;font-weight:700;letter-spacing:.055em;color:#c1d3e2}
#clients .clients-control-actions{display:flex;align-items:center;gap:9px}
#clients .client-control{
  min-width:42px;height:42px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;border-radius:13px;border:1px solid rgba(230,243,252,.36);
  background:linear-gradient(145deg,rgba(234,245,251,.17),rgba(231,244,252,.07));
  color:#eff7fc;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
  font-size:19px;transition:background .24s,transform .24s,border-color .24s;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)
}
#clients .client-control:hover{transform:translateY(-2px);background:rgba(229,244,252,.24);border-color:rgba(255,255,255,.60)}
#clients .client-control:focus-visible{outline:2px solid #f2b976;outline-offset:3px}
#clients .client-pause{font-size:11px;letter-spacing:.025em;font-weight:700;padding:0 14px}
#clients .client-play-symbol{font-size:15px;font-weight:800}
#clients .clients-stage{overflow:hidden}
#clients .client-marquee-shell{
  overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;scroll-behavior:auto;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab
}
#clients .client-marquee-shell::-webkit-scrollbar{display:none}
#clients .client-marquee-shell.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
#clients .client-marquee-shell.is-dragging *{user-select:none;-webkit-user-select:none;pointer-events:none}
#clients .client-marquee-track{animation:none!important;will-change:auto;transform:none!important}
#clients .client-marquee-item{flex-shrink:0;scroll-snap-align:none}
#clients .client-marquee-shell:focus-visible{outline:2px solid #f2b976;outline-offset:3px}
#clients .clients-footnote{max-width:800px}
/* APT-like visual cadence: typography is revealed vertically rather than
   treating every section as an animated slide. */
.editorial-section .section-heading-row{position:relative}
.editorial-section .section-heading-row::after{
  content:'';position:absolute;bottom:-21px;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,rgba(242,174,92,.80),rgba(154,196,223,.28) 62%,transparent);
  transform-origin:left center;transform:scaleX(0);opacity:.4;
  transition:transform .95s cubic-bezier(.19,1,.22,1),opacity .9s ease;
  pointer-events:none
}
.editorial-section .section-heading-row.editorial-in-view::after{transform:scaleX(1);opacity:1}
@media(prefers-reduced-motion:no-preference){
  .motion-ready .editorial-section .section-heading-row h2{
    clip-path:inset(0 0 104% 0);transform:translateY(11px);
    transition:clip-path .85s cubic-bezier(.22,.85,.26,1),transform .85s cubic-bezier(.22,.85,.26,1)
  }
  .motion-ready .editorial-section .section-heading-row.editorial-in-view h2{
    clip-path:inset(0 0 0 0);transform:translateY(0)
  }
  .feature-image.editorial-image{
    clip-path:inset(0 7% 0 0 round 3px);
    transition:clip-path 1100ms cubic-bezier(.19,.94,.27,1)
  }
  .feature-image.editorial-image img{
    transform:scale(1.075);transition:transform 1300ms cubic-bezier(.18,.86,.24,1)
  }
  .feature-image.editorial-image.editorial-in-view{clip-path:inset(0 0 0 0 round 0px)}
  .feature-image.editorial-image.editorial-in-view img{transform:scale(1)}
  /* A gentle editorial entrance for cards; no pinning or large lateral motion. */
  .motion-ready #expertise .service-card.reveal-on-scroll:not(.is-revealed){translate:0 17px}
  .motion-ready #group .group-card.reveal-on-scroll:not(.is-revealed){translate:0 19px}
}
/* Make the hero image and card polished, not over-animated. */
.hero-glass-card{box-shadow:0 20px 48px rgba(4,13,23,.26),inset 0 1px 0 rgba(255,255,255,.40)}
/* Prevent old decorative infinite animations competing with editorial motion. */
.hero-orbit-ring,.orbit-tracer,.hero-glass-slab,.approach-grid::before{
  animation:none!important
}
@media(max-width:660px){
  #clients .clients-controls-caption{font-size:10px;max-width:145px;line-height:1.5}
  #clients .client-control{min-width:36px;height:38px;padding:0 9px;border-radius:10px}
  #clients .client-pause{font-size:10px;padding:0 9px}
  #clients .clients-control-actions{gap:5px}
  .editorial-section .section-heading-row::after{bottom:-15px}
}
@media(prefers-reduced-motion:reduce){
  .editorial-section .section-heading-row::after{transform:none;opacity:1;transition:none}
  .motion-ready .editorial-section .section-heading-row h2{clip-path:none!important;transform:none!important}
  .feature-image.editorial-image{clip-path:none!important;transition:none!important}
  .feature-image.editorial-image img{transform:none!important;transition:none!important}
  #clients .client-control{transition:none}
}


/* --------------------------------------------------------------------------
   Apex v13: cleaner client strip, simpler continuous drag + hover-to-pause.
   No stacked tray borders, no controls, no artificial scroll friction.
   -------------------------------------------------------------------------- */
#clients .clients-controls{display:none!important}
#clients .client-scroll-hint{
  margin:0 0 15px;color:#bbd0de;font-size:11px;letter-spacing:.045em;
  font-weight:650;text-align:right;
}
#clients .client-scroll-hint span{color:#e7af65;padding:0 7px}
/* Remove the overlapping hairlines in the screenshot (heading, tray, shell). */
#clients .section-heading-row::after{content:none!important}
#clients .clients-stage{
  margin-top:0;padding:13px;border:0;border-radius:25px;
  background:linear-gradient(125deg,rgba(218,234,245,.23),rgba(215,234,244,.20));
  box-shadow:0 16px 38px rgba(3,15,29,.13);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
#clients .clients-stage::before,#clients .clients-stage::after{content:none!important}
#clients .client-marquee-shell{
  display:block;position:relative;overflow-x:auto;overflow-y:hidden;
  padding:7px 0;background:transparent;border:0;border-radius:16px;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;scroll-behavior:auto;cursor:grab;
}
#clients .client-marquee-shell::before,#clients .client-marquee-shell::after{content:none!important}
#clients .client-marquee-shell::-webkit-scrollbar{display:none}
#clients .client-marquee-shell.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
#clients .client-marquee-shell.is-dragging *{pointer-events:none;user-select:none;-webkit-user-select:none}
#clients .client-marquee-track{
  display:flex;width:max-content;align-items:stretch;gap:18px;
  animation:none!important;transform:none!important;will-change:auto;
}
#clients .client-marquee-item{
  flex-shrink:0;border:1px solid rgba(243,247,250,.78);
  box-shadow:0 5px 17px rgba(6,25,43,.10);
  transition:transform 380ms cubic-bezier(.2,.72,.22,1),box-shadow 380ms ease;
}
#clients .client-marquee-logo img{
  transition:transform 500ms cubic-bezier(.2,.72,.22,1);
}
@media(hover:hover) and (pointer:fine){
  #clients .client-marquee-item:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(4,22,41,.14)}
  #clients .client-marquee-item:hover img{transform:scale(1.045)}
}
/* A little extra movement: delicate metallic glints on service and group cards
   on hover, while retaining all ordinary page scrolling. */
#expertise .service-card,#group .group-card{overflow:hidden}
#expertise .service-card::before,#group .group-card::before{
  content:'';position:absolute;pointer-events:none;z-index:0;
  top:-100%;left:-55%;width:43%;height:300%;transform:rotate(20deg) translateX(0);
  background:linear-gradient(90deg,transparent,rgba(245,252,255,.10),transparent);
  opacity:0;transition:opacity 400ms ease,transform 760ms cubic-bezier(.23,.65,.27,1);
}
@media(hover:hover) and (pointer:fine){
 #expertise .service-card:hover::before,#group .group-card:hover::before{
   opacity:1;transform:rotate(20deg) translateX(260%);
 }
}
/* Quiet arrival of small expertise labels, independent of scroll-driven pins. */
.motion-ready #expertise .service-card.is-revealed .service-index{
  animation:apexLabelArrive 650ms cubic-bezier(.18,.8,.28,1) both;
}
@keyframes apexLabelArrive{from{opacity:.35;translate:0 5px}to{opacity:1;translate:0 0}}
@media(max-width:660px){
 #clients .clients-stage{padding:9px;border-radius:19px}
 #clients .client-scroll-hint{font-size:10px;text-align:left}
 #clients .client-marquee-track{gap:10px}
}
@media(prefers-reduced-motion:reduce){
 #clients .client-marquee-item,#clients .client-marquee-logo img,
 #expertise .service-card::before,#group .group-card::before{transition:none!important;transform:none!important}
 .motion-ready #expertise .service-card.is-revealed .service-index{animation:none!important}
}


/* ===================================================================
  V14 — Editorial / image-led motion, NOT scroll storytelling.
  No pinning, scroll hijacking, card assembly, or viewport-length staging.
=================================================================== */
html{scroll-snap-type:none!important}
#approach,#approach .approach-layout{position:relative!important;height:auto!important;min-height:0!important;top:auto!important;transform:none!important}
/* No moving cards as you scroll, including vestiges of the v9 stagger. */
.motion-ready #approach .approach-card.reveal-on-scroll,
.motion-ready #expertise .service-card.reveal-on-scroll,
.motion-ready #group .group-card.reveal-on-scroll,
.motion-ready #clients .clients-stage.reveal-on-scroll{
  translate:none!important;transform:none!important;transition-property:opacity,background,border-color,box-shadow!important;
  transition-duration:.55s!important;
}
.motion-ready #approach .approach-card.reveal-on-scroll:not(.is-revealed),
.motion-ready #expertise .service-card.reveal-on-scroll:not(.is-revealed),
.motion-ready #group .group-card.reveal-on-scroll:not(.is-revealed){opacity:.70}
.motion-ready #approach .approach-card.reveal-on-scroll.is-revealed,
.motion-ready #expertise .service-card.reveal-on-scroll.is-revealed,
.motion-ready #group .group-card.reveal-on-scroll.is-revealed{opacity:1}
#approach .approach-card:hover,#expertise .service-card:hover,#group .group-card:hover{transform:none!important}
/* Remove the old v12 long underline across headings and pseudo-shimmer. */
.editorial-section .section-heading-row::after{display:none!important}
#expertise .service-card::before,#group .group-card::before{display:none!important}
.motion-ready #expertise .service-card.is-revealed .service-index{animation:none!important}
/* Media-led reveals: a deliberate mask on the actual photography, not cards. */
@media(prefers-reduced-motion:no-preference){
  [data-image-reveal]{overflow:hidden;isolation:isolate}
  [data-image-reveal]::after{
    content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
    background:linear-gradient(110deg,#0e263b,#1a3850 65%,#203d52);
    transform:translateX(0);transition:transform 1.18s cubic-bezier(.77,0,.18,1);
  }
  [data-image-reveal].editorial-in-view::after{transform:translateX(103%)}
  #expertise .feature-image[data-image-reveal] img{
    transform:scale(1.085);transition:transform 1.65s cubic-bezier(.18,.86,.22,1)
  }
  #expertise .feature-image[data-image-reveal].editorial-in-view img{transform:scale(1)}
  /* Headline reveal: clean masked type, no sections sliding around. */
  .editorial-section .section-heading-row h2{
    clip-path:inset(0 0 100% 0);
    transform:none!important;
    transition:clip-path .94s cubic-bezier(.22,.87,.24,1)!important;
  }
  .editorial-section .section-heading-row.editorial-in-view h2{clip-path:inset(0 0 0 0)}
  .hero-copy h1{animation:apexHeadlineV14 .88s cubic-bezier(.20,.87,.21,1) .09s both!important}
  @keyframes apexHeadlineV14{from{clip-path:inset(0 0 98% 0);opacity:.82;translate:0 0}to{clip-path:inset(0 0 0 0);opacity:1;translate:0 0}}
}
/* Native horizontally scrollable client row */
#clients .client-marquee-shell{
  overflow-x:auto!important;overflow-y:hidden!important;
  touch-action:pan-x pan-y;
  cursor:grab!important;
  scroll-behavior:auto!important;
  user-select:none;-webkit-user-select:none;
}
#clients .client-marquee-shell.is-dragging{cursor:grabbing!important}
#clients .client-marquee-item{flex-shrink:0!important}
#clients .client-marquee-item img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
#clients .client-marquee-track{animation:none!important;transform:none!important}
#clients .client-marquee-item:hover{transform:none!important}
@media(prefers-reduced-motion:reduce){
  [data-image-reveal]::after{content:none!important}
  .editorial-section .section-heading-row h2{clip-path:none!important;transition:none!important}
  .hero-copy h1{animation:none!important}
}


/* ================= Apex v15: cinematic editorial motion ================= */
/* Remove legacy v10 staged scroll, retain native document flow. */
html{scroll-snap-type:none!important}
#approach,#approach .approach-layout{height:auto!important;min-height:0!important;position:relative!important;top:auto!important;transform:none!important}
/* A strong typographic motion ribbon between sections—not a pinned scene. */
.kinetic-band{height:204px;position:relative;overflow:hidden;isolation:isolate;
 background:linear-gradient(110deg,#0b2034 0%,#153551 52%,#10283e 100%);
 border-block:1px solid rgba(208,229,244,.14);display:flex;align-items:center}
.kinetic-band::before{content:'';position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(550px 140px at 50% 48%,rgba(228,150,67,.19),transparent 78%)}
.kinetic-band-glint{position:absolute;width:270px;height:270px;left:28%;top:-30px;border-radius:50%;
 background:radial-gradient(circle,rgba(234,156,72,.33),rgba(234,156,72,.10) 36%,transparent 70%);filter:blur(22px)}
.kinetic-track{white-space:nowrap;width:max-content;position:relative;z-index:1;
 transform:translate3d(calc(var(--kinetic-x,0px) - 130px),0,0);will-change:transform}
.kinetic-track span{display:block;font-size:clamp(64px,8.3vw,132px);line-height:1.1;font-weight:800;
 letter-spacing:-.075em;color:rgba(225,236,247,.055);-webkit-text-stroke:1px rgba(212,228,242,.27)}
.kinetic-track b{font-size:.46em;vertical-align:16%;font-weight:400;color:rgba(237,166,85,.54);
 -webkit-text-stroke:0; padding:0 .18em}
/* Stronger entrance, still without moving or blocking layout. */
@media(prefers-reduced-motion:no-preference){
 .hero-photo-frame{animation:apexV15Photo 1.16s cubic-bezier(.17,.87,.25,1) both!important}
 .hero-photo-frame img{animation:apexV15Zoom 1.55s cubic-bezier(.19,.85,.24,1) both}
 .hero-glass-card{animation:apexV15Glass 1.05s cubic-bezier(.17,.86,.2,1) .30s both!important}
 .hero-copy h1{animation:apexV15Type 1.04s cubic-bezier(.20,.84,.24,1) .10s both!important}
 .hero-copy .hero-intro{animation:apexV15Intro .88s cubic-bezier(.20,.84,.24,1) .38s both!important}
 .hero-actions{animation:apexV15Intro .85s cubic-bezier(.20,.84,.24,1) .51s both!important}
 .hero-orbit-ring{transform:rotate(var(--orbit-angle,0deg));transition:transform .06s linear;will-change:transform}
 @keyframes apexV15Photo{from{clip-path:inset(0 96% 0 0 round 16px);opacity:.9}
                         to{clip-path:inset(0 0 0 0 round 0px);opacity:1}}
 @keyframes apexV15Zoom{from{scale:1.16;filter:saturate(.8)}to{scale:1;filter:saturate(1)}}
 @keyframes apexV15Glass{from{opacity:0;translate:0 56px}to{opacity:1;translate:0 0}}
 @keyframes apexV15Type{from{opacity:0;clip-path:inset(0 0 100% 0);translate:0 24px}
                         to{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}}
 @keyframes apexV15Intro{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
 /* Feature photo enters as a true visual scene, with stronger wipe/zoom. */
 #expertise .feature-image[data-image-reveal]::after{
   background:linear-gradient(100deg,#133149,#22455c 70%,#d59a59);
   transition:transform 1.35s cubic-bezier(.72,0,.18,1)!important}
 #expertise .feature-image[data-image-reveal] img{
   transform:scale(1.19);transition:transform 2s cubic-bezier(.18,.9,.2,1)!important}
 #expertise .feature-image[data-image-reveal].editorial-in-view img{transform:scale(1)}
 .editorial-section .section-heading-row h2{
   transition:clip-path 1.04s cubic-bezier(.18,.88,.22,1)!important}
 /* Fast moving glint only on hover, not repeating continuously. */
 .service-card,.group-card{overflow:hidden}
 .service-card::after,.group-card::after{content:'';position:absolute;left:-60%;top:0;width:32%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(230,248,255,.16),transparent);
  transform:skewX(-20deg) translateX(0);opacity:0;pointer-events:none;z-index:0;
  transition:transform .85s cubic-bezier(.2,.68,.2,1),opacity .25s}
 .service-card:hover::after,.group-card:hover::after{
  opacity:1;transform:skewX(-20deg) translateX(540%)}
 /* Service cards stay physically still; just their amber accent sweeps in. */
 .service-card .service-index{position:relative}
 .service-card .service-index::after{content:'';display:block;width:42px;height:2px;margin-top:13px;
  background:linear-gradient(90deg,#e5a75b,rgba(229,167,91,0));transform:scaleX(0);transform-origin:left;
  transition:transform .82s cubic-bezier(.18,.91,.26,1) var(--reveal-delay,0ms)}
 .service-card.is-revealed .service-index::after{transform:scaleX(1)}
}
/* Approach: progressive illuminated rail, no pinning or card relocation. */
.approach-grid{position:relative}
.approach-beam{position:absolute;left:-16px;top:7%;bottom:7%;width:3px;z-index:1;
 background:rgba(206,221,234,.12);border-radius:4px;pointer-events:none}
.approach-beam span{display:block;position:absolute;top:0;left:0;right:0;height:calc(var(--approach-progress,0) * 100%);
 background:linear-gradient(180deg,#d69853,#f8c687,#7daac6);box-shadow:0 0 17px rgba(242,160,69,.5);
 border-radius:4px;transition:height .08s linear}
/* Restored autoplay with hover pause and native manual scrolling. */
#clients .client-marquee-shell{overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x pan-y;
 scroll-behavior:auto!important;cursor:grab!important;user-select:none;-webkit-user-select:none}
#clients .client-marquee-shell.is-dragging{cursor:grabbing!important}
#clients .client-marquee-track{animation:none!important;transform:none!important}
#clients .client-marquee-item img{-webkit-user-drag:none;user-select:none;pointer-events:none}
#clients .clients-controls{display:none!important}
#clients .client-marquee-shell::before,#clients .client-marquee-shell::after{content:none!important}
/* Never fade back to invisible after scroll. */
@media(max-width:660px){.kinetic-band{height:120px}.kinetic-track span{font-size:62px}
 .approach-beam{left:-8px}}
@media(prefers-reduced-motion:reduce){.kinetic-track{transform:none!important}
 .hero-photo-frame,.hero-photo-frame img,.hero-glass-card,.hero-copy h1,.hero-copy .hero-intro,.hero-actions{
   animation:none!important;clip-path:none!important;opacity:1!important;translate:none!important;scale:1!important}
 .hero-orbit-ring{transform:none!important;transition:none!important}
 #expertise .feature-image[data-image-reveal]::after{content:none!important}
 .approach-beam span{height:100%;transition:none}
 .service-card::after,.group-card::after{content:none!important}
}


/* ===== Apex v16: fully legible, responsive kinetic wordmark ===== */
.kinetic-band{
  min-height:230px!important;height:auto!important;
  padding:48px 30px!important;display:flex!important;
  align-items:center!important;justify-content:center!important;
  border-block:1px solid rgba(213,229,241,.22);
  background:linear-gradient(112deg,#0d2339 0%,#18364e 51%,#0e263d 100%);
}
.kinetic-band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(650px 230px at 50% 50%,rgba(226,153,73,.13),transparent 78%);
}
.kinetic-band-glint{
  position:absolute;left:var(--kinetic-light,50%);top:50%;transform:translate(-50%,-50%);
  width:300px;height:280px;border-radius:50%;opacity:.68;pointer-events:none;
  background:radial-gradient(circle,rgba(237,167,91,.30),rgba(237,167,91,.12) 36%,transparent 74%);
  filter:blur(28px);
}
.kinetic-track{
  width:min(1510px,100%)!important;max-width:100%!important;
  display:flex!important;align-items:center;justify-content:center;
  gap:clamp(12px,1.6vw,28px)!important;white-space:nowrap!important;
  transform:none!important;translate:none!important;
  will-change:auto!important;
}
.kinetic-track .kinetic-word{
  display:block;min-width:0;max-width:max-content;
  font-size:clamp(27px,3.75vw,66px)!important;
  line-height:1.12!important;font-weight:800;
  letter-spacing:-.052em!important;
  color:rgba(220,236,247,.11)!important;
  -webkit-text-stroke:1.45px rgba(228,240,250,.72)!important;
  text-shadow:0 0 21px rgba(193,217,237,.045);
}
.kinetic-track .kinetic-separator{
  flex-shrink:0;font-size:clamp(17px,2vw,33px)!important;line-height:1;
  color:#deaa6e!important;-webkit-text-stroke:0!important;font-weight:400;
  text-shadow:0 0 22px rgba(232,165,88,.36);
}
.kinetic-band-progress{
  position:absolute;height:2px;width:100%;left:0;bottom:0;
  background:linear-gradient(90deg,transparent 0%,rgba(231,172,101,.65) 45%,transparent 100%);
  opacity:.7;transform-origin:left;
  clip-path:inset(0 calc(100% - var(--kinetic-light,50%)) 0 0);
}
@media(max-width:1120px){
 .kinetic-band{min-height:190px!important;padding:42px 20px!important}
 .kinetic-track .kinetic-word{font-size:clamp(24px,3.6vw,45px)!important}
 .kinetic-track{gap:clamp(8px,1.3vw,18px)!important}
}
@media(max-width:720px){
 .kinetic-band{padding:28px 18px!important;min-height:220px!important}
 .kinetic-track{display:flex!important;flex-direction:column;gap:8px!important;white-space:normal!important}
 .kinetic-track .kinetic-word{font-size:clamp(30px,7.3vw,48px)!important;text-align:center;letter-spacing:-.045em!important}
 .kinetic-track .kinetic-separator{display:none!important}
 .kinetic-band-glint{width:220px;height:220px}
}
@media(prefers-reduced-motion:reduce){
 .kinetic-band-glint{left:50%!important}
 .kinetic-band-progress{clip-path:none!important}
}
/* Keep a genuine native horizontal scroller, without competing animations */
#clients #client-carousel{overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:none!important;scroll-behavior:auto!important;overscroll-behavior-x:contain}
#clients #client-carousel-track{animation:none!important;transform:none!important;translate:none!important}
#clients #client-carousel img{pointer-events:none;-webkit-user-drag:none}


/* Apex v17: carousel transform is the only motion driver. */
#clients #client-carousel{
  overflow:hidden!important;overflow-clip-margin:0;
  touch-action:pan-y!important;cursor:grab!important;
  overscroll-behavior-x:contain;
}
#clients #client-carousel.is-dragging{cursor:grabbing!important}
#clients #client-carousel-track{display:flex;width:max-content;animation:none!important;will-change:transform}
#clients #client-carousel .client-marquee-item{flex-shrink:0}
#clients #client-carousel img{pointer-events:none;-webkit-user-drag:none;user-select:none}


/* ===== Apex v19: dark-mode header logo + glossier glass refinements ===== */
/* Apex v20: transparent dark-mode emblem stays unchanged. */
.brand-icon img{
  filter:drop-shadow(0 8px 18px rgba(5,16,28,.22)) drop-shadow(0 0 20px rgba(110,178,232,.12));
}

.kinetic-band{
  background:linear-gradient(112deg,#0d2238 0%,#183753 50%,#102941 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.05);
}
.kinetic-band::before{
  background:
    radial-gradient(720px 250px at 50% 50%, rgba(233,163,88,.22), transparent 70%),
    radial-gradient(380px 220px at var(--kinetic-light,50%) 48%, rgba(244,184,112,.28), transparent 58%),
    radial-gradient(780px 260px at 50% 54%, rgba(132,182,227,.10), transparent 78%) !important;
}
.kinetic-band::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 48%, transparent 100%);
  opacity:.32;
  filter:blur(36px);
}
.kinetic-band-glint{
  width:360px !important;
  height:320px !important;
  opacity:.86 !important;
  background:radial-gradient(circle, rgba(239,171,96,.42), rgba(239,171,96,.16) 38%, transparent 76%) !important;
  filter:blur(34px) !important;
}
.kinetic-track .kinetic-word{
  color:rgba(226,239,248,.15) !important;
  text-shadow:0 0 26px rgba(195,216,234,.065), 0 0 64px rgba(239,171,96,.04);
}
.kinetic-band-progress{
  background:linear-gradient(90deg, transparent 0%, rgba(237,171,100,.86) 44%, rgba(255,223,180,.76) 56%, transparent 100%) !important;
  opacity:.9 !important;
}

@media (max-width: 720px){
  .hero-glass-card,
  .service-card,
  .approach-card,
  .parent-company,
  .group-card,
  .contact-form-card,
  .approach-intro,
  .feature-band,
  .about-pills > div,
  .contact-info-card,
  .map-frame{
    backdrop-filter:blur(14px) saturate(148%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(148%) !important;
  }
  .kinetic-band-glint{width:240px !important;height:220px !important;}
}



/* ===== Apex v20: clear, edge-lit liquid glass =====
   Reduce opaque colour wash, large-area glow overlays, and matte blur.
   Keep geometry, content, motion and carousel unchanged.
   Optical effect is an accessible CSS approximation, not pixel refraction.
*/
:root { --glass-blur:4px; }

/* Neutral, nearly clear panes: reflective rim + subtle tint, not a blue fill. */
.about-bottom,
.about-pills > div,
.service-card,
.feature-band,
.approach-intro,
.approach-card,
.parent-company,
.group-card {
  position:relative;
  background:linear-gradient(132deg,
    rgba(219,243,255,.115) 0%,
    rgba(175,215,241,.065) 36%,
    rgba(54,112,157,.045) 100%) !important;
  border:1px solid rgba(233,247,255,.40) !important;
  backdrop-filter:blur(4px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(4px) saturate(130%) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.31),
    inset -1px -1px 0 rgba(113,166,206,.10),
    0 16px 40px rgba(2,12,26,.14) !important;
}

/* The highlight is a thin edge reflection, not a white fog across a card. */
.about-bottom::before,
.about-pills > div::before,
.service-card::before,
.feature-band::before,
.approach-intro::before,
.approach-card::before,
.parent-company::before,
.group-card::before {
  content:'';
  position:absolute;
  pointer-events:none;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(130deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.035) 18%,
    transparent 40%);
  opacity:1;
}

/* Clean top rim instead of the old big internal amber haze. */
.about-bottom::after,
.about-pills > div::after,
.approach-intro::after,
.approach-card::after,
.parent-company::after,
.feature-band::after {
  content:'';
  position:absolute;
  pointer-events:none;
  top:0;
  left:12px;
  right:12px;
  width:auto;
  height:1px;
  border-radius:0;
  filter:none;
  opacity:.76;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.66) 29%,rgba(188,230,255,.31) 68%,transparent 100%);
}
/* Keep the pre-existing service/group glint-on-hover behaviour from v15. */
@media (prefers-reduced-motion: no-preference) {
  .service-card::after,
  .group-card::after {
    filter:none;
    background:linear-gradient(90deg,transparent,rgba(242,250,255,.14),transparent);
  }
}
.service-card:hover,
.approach-card:hover,
a.group-card:hover {
  background:linear-gradient(135deg,rgba(228,247,255,.165),rgba(108,172,215,.080)) !important;
  border-color:rgba(251,255,255,.63) !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.40),0 22px 44px rgba(2,10,23,.19) !important;
}
.group-card.current {
  background:linear-gradient(130deg,rgba(240,196,131,.125),rgba(186,219,244,.070)) !important;
  border-color:rgba(248,201,143,.52) !important;
}

/* Hero card floats over the actual photograph: brighter rim, low haze. */
.hero-glass-card,
.hero-glass-card.liquid-pane {
  background:linear-gradient(124deg,
    rgba(246,251,255,.245) 0%,
    rgba(199,230,251,.14) 21%,
    rgba(42,75,101,.145) 66%,
    rgba(9,26,43,.20) 100%) !important;
  border:1px solid rgba(250,254,255,.68) !important;
  backdrop-filter:blur(4px) saturate(135%) brightness(1.045) !important;
  -webkit-backdrop-filter:blur(4px) saturate(135%) brightness(1.045) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.48),
    inset -1px -1px 0 rgba(177,216,241,.15),
    0 21px 49px rgba(1,8,21,.28) !important;
}
.hero-glass-card::before {
  content:'';
  position:absolute;
  top:0;
  left:14px;
  right:14px;
  bottom:auto;
  height:2px;
  width:auto;
  pointer-events:none;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.94) 28%,rgba(246,216,181,.56) 64%,transparent);
  box-shadow:0 0 10px rgba(246,250,255,.25);
}
.hero-glass-card::after {
  content:'';
  position:absolute;
  top:8px;
  right:10px;
  bottom:auto;
  left:auto;
  width:42%;
  height:42%;
  border-radius:26px;
  pointer-events:none;
  filter:none;
  opacity:.55;
  background:radial-gradient(ellipse at 100% 0%,rgba(255,230,195,.20),transparent 75%);
}
.hero-glass-card strong { text-shadow:0 2px 13px rgba(5,17,29,.43); }

/* Transparent client tray, while preserving solid white identity cards. */
.clients-stage {
  background:linear-gradient(125deg,rgba(222,240,251,.19),rgba(170,211,242,.075) 55%,rgba(225,241,250,.12)) !important;
  border-color:rgba(238,247,255,.37) !important;
  backdrop-filter:blur(4px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(4px) saturate(125%) !important;
}
.client-marquee-shell {
  background:linear-gradient(135deg,rgba(238,247,253,.25),rgba(202,228,246,.12)) !important;
  border-color:rgba(246,251,255,.42) !important;
  backdrop-filter:blur(3px) !important;
  -webkit-backdrop-filter:blur(3px) !important;
}
/* Keep the known-good v17 transform-driven autoplay and manual drag untouched. */
#clients #client-carousel-track { will-change:transform; }

/* Light contact area stays light and readable rather than dark translucent blue. */
.contact-section .contact-details,
.contact-section .contact-form-card,
.contact-section .map-frame {
  position:relative;
  background:linear-gradient(136deg,rgba(255,255,255,.83),rgba(248,252,255,.72)) !important;
  border:1px solid rgba(209,226,237,.85) !important;
  backdrop-filter:blur(3px) saturate(115%) !important;
  -webkit-backdrop-filter:blur(3px) saturate(115%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 14px 32px rgba(25,52,75,.065) !important;
}
.contact-section .contact-form-card::before,
.contact-section .contact-form-card::after { content:none !important; }

/* Respect transparency preferences by providing readable opaque surfaces. */
@media (prefers-reduced-transparency:reduce) {
  .hero-glass-card,
  .about-bottom,.about-pills > div,.service-card,.feature-band,.approach-intro,
  .approach-card,.parent-company,.group-card {
    background:rgba(17,43,65,.96) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .contact-section .contact-form-card,.contact-section .contact-details,.contact-section .map-frame {
    background:#fff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}


/* Apex v23 — Photo-traced Downtown Dubai outline.
   Proportions, roofline and architectural detail are sourced from the supplied
   reference image, rather than assembled from invented building shapes. */
.dubai-skyline{position:relative;isolation:isolate;min-height:440px;overflow:hidden;
  background:linear-gradient(180deg,#0b2035 0%,#12304a 60%,#0b2239 100%);
  border-block:1px solid rgba(181,218,240,.14);color:#f5faff;}
.dubai-skyline::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 790px 200px at 52% 62%,rgba(205,145,75,.13),transparent 73%),
    radial-gradient(ellipse 500px 220px at 80% 65%,rgba(67,132,173,.16),transparent 76%);}
.dubai-skyline-ambient{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,transparent 99.7%,rgba(181,222,247,.07) 100%);
  background-size:54px 54px;opacity:.34;mask-image:linear-gradient(to bottom,transparent 8%,black 70%);}
.dubai-skyline-copy{position:relative;z-index:3;padding-top:39px;padding-bottom:95px;pointer-events:none;}
.dubai-skyline-eyebrow{display:flex;align-items:center;gap:9px;color:#f4bb76;letter-spacing:.18em;font-size:9px;font-weight:800;}
.dubai-skyline-dot{display:block;width:6px;height:6px;background:#f1b46e;border-radius:50%;box-shadow:0 0 14px rgba(247,178,96,.55)}
.dubai-skyline-copy h2{font-size:clamp(26px,3vw,42px);line-height:1.25;letter-spacing:-.048em;margin:15px 0 12px;font-weight:800;text-shadow:0 2px 12px rgba(4,15,29,.35)}
.dubai-skyline-copy h2 span{color:#afcde0;font-weight:700;}
.dubai-skyline-caption{font-size:9px;color:#b2cbdc;letter-spacing:.15em;font-weight:700;}
.dubai-outline-frame{position:absolute;inset:0;z-index:1;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;}
.dubai-outline-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;
  opacity:1;filter:drop-shadow(0 0 10px rgba(156,205,237,.07));
  clip-path:inset(0 100% 0 0);transition:clip-path 2.5s cubic-bezier(.20,.74,.16,1);}
.dubai-skyline.is-visible .dubai-outline-art{clip-path:inset(0 0 0 0);}
.dubai-outline-light-sweep{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(245,178,98,.075) 48%,transparent 64%);
  transform:translateX(-130%);opacity:0;}
.dubai-skyline.is-visible .dubai-outline-light-sweep{animation:dubaiOutlineSweep 7.8s 2.4s ease-in-out infinite;}
@keyframes dubaiOutlineSweep{0%,25%{transform:translateX(-135%);opacity:0}40%{opacity:.66}62%,100%{transform:translateX(135%);opacity:0}}
.dubai-skyline-baseline{position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(234,170,102,.40),transparent);z-index:3;}
/* Give the copy contrast without covering the city image or crop. */
.dubai-skyline::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,32,53,.86) 0%,rgba(11,32,53,.57) 18%,rgba(11,32,53,.10) 35%,transparent 50%);}
@media(max-width:850px){
  .dubai-skyline{min-height:390px;}
  .dubai-skyline-copy{padding-top:30px;padding-bottom:95px;}
  .dubai-outline-art{object-position:center bottom;}
}
@media(max-width:560px){
  .dubai-skyline{min-height:335px;}
  .dubai-skyline-copy{padding-top:28px;padding-bottom:108px;}
  .dubai-skyline-copy h2{font-size:clamp(24px,6vw,31px);margin:12px 0 10px;}
  .dubai-skyline-copy h2 span{display:block;}
  .dubai-skyline-caption{font-size:8px;}
  .dubai-skyline::after{background:linear-gradient(180deg,rgba(11,32,53,.90) 0%,rgba(11,32,53,.70) 24%,transparent 65%);}
  .kinetic-light-trails{opacity:.48;}
}
@media(prefers-reduced-motion:reduce){
  .dubai-outline-art{clip-path:none!important;transition:none!important;}
  .dubai-outline-light-sweep{animation:none!important;opacity:0!important;}
}
/* Reduce excessive competing glows; the light is drawn as distinct paths. */
.kinetic-band{isolation:isolate;}
.kinetic-light-trails{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.78;}
.kinetic-light-trails .kinetic-beam{stroke-dasharray:20 24;animation:kineticBeamFlow 16s linear infinite;}
.kinetic-light-trails .kinetic-beam-b{stroke-dasharray:6 22;animation-duration:22s;animation-direction:reverse;}
@keyframes kineticBeamFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-440}}
.kinetic-track{z-index:2!important;}
.kinetic-band-glint{z-index:0;}
.kinetic-band-progress{z-index:3;}
.group-card:not(.current) h3{margin-top:4px;}


/* ===== Apex v24: Dubai earth-to-horizon transformation ===== */

.dubai-globe{
  --dubai-progress:0;
  --dubai-flat-opacity:clamp(0, (var(--dubai-progress) - .18) / .58, 1);
  position:relative;isolation:isolate;overflow:hidden;min-height:560px;
  padding:44px 0 0;background:linear-gradient(180deg,#0a2034 0%,#102b44 54%,#0d263d 100%);
  border-block:1px solid rgba(181,218,240,.14);color:#f5faff;
}
.dubai-globe::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 820px 280px at 50% 67%,rgba(226,158,85,.14),transparent 72%),
             radial-gradient(ellipse 540px 240px at 82% 68%,rgba(88,155,208,.10),transparent 80%),
             linear-gradient(90deg,rgba(11,32,53,.86) 0%,rgba(11,32,53,.66) 20%,rgba(11,32,53,.20) 40%,transparent 58%);
}
.dubai-globe-noise{position:absolute;inset:0;pointer-events:none;opacity:.20;
  background-image:linear-gradient(90deg,rgba(167,208,233,.08) 1px,transparent 1px),linear-gradient(0deg,rgba(167,208,233,.06) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(180deg,transparent 0, #000 14%, #000 82%, transparent 100%);
}
.dubai-globe-copy{position:relative;z-index:3;padding-top:8px;padding-bottom:12px;pointer-events:none;}
.dubai-globe-copy h2{font-size:clamp(30px,3vw,48px);line-height:1.18;letter-spacing:-.052em;margin:15px 0 12px;font-weight:800;text-shadow:0 2px 12px rgba(4,15,29,.35)}
.dubai-globe-copy h2 span{color:#afcde0;font-weight:700;}
.dubai-globe-stage{position:relative;z-index:1;height:360px;margin-top:10px;overflow:hidden;}
.dubai-globe-halo{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(1180px,92vw);height:320px;border-radius:50%;
  background:radial-gradient(circle at 50% 43%,rgba(247,188,111,.22),rgba(247,188,111,.08) 28%,rgba(103,164,220,.07) 60%,transparent 76%);
  filter:blur(26px);opacity:calc(.85 - var(--dubai-progress) * .22);}
.dubai-globe-sphere{position:absolute;left:50%;bottom:-215px;transform:translateX(-50%) scale(calc(1 - var(--dubai-progress)*.03));
  width:min(1220px,95vw);aspect-ratio:1/1;border-radius:50%;pointer-events:none;opacity:calc(1 - var(--dubai-progress) * .74);
  box-shadow:0 0 0 1px rgba(182,219,242,.16), inset 0 0 0 1px rgba(255,255,255,.03);
  background:radial-gradient(circle at 50% 31%,rgba(255,214,163,.04),transparent 34%),radial-gradient(circle at 50% 48%,rgba(54,116,170,.08),transparent 68%);
  clip-path:inset(0 0 50% 0);
}
.dubai-globe-rim{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(214,234,248,.28);box-shadow:0 -18px 70px rgba(236,175,98,.10) inset;}
.dubai-globe-lat,.dubai-globe-mer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(191,224,245,.12);border-radius:50%;}
.dubai-globe-lat{width:86%;height:44%;}
.dubai-globe-lat.lat-1{top:36%;width:74%;height:30%;opacity:.62}
.dubai-globe-lat.lat-2{top:50%;width:90%;height:42%;opacity:.55}
.dubai-globe-lat.lat-3{top:63%;width:98%;height:54%;opacity:.42}
.dubai-globe-mer{width:24%;height:86%;}
.dubai-globe-mer.mer-1{left:35%;opacity:.42}
.dubai-globe-mer.mer-2{left:50%;opacity:.55}
.dubai-globe-mer.mer-3{left:65%;opacity:.42}
.dubai-skyline-wrap{position:absolute;left:50%;transform:translateX(-50%);width:min(1260px,95vw);pointer-events:none;}
.dubai-skyline-wrap-curved{bottom:76px;opacity:calc(1 - var(--dubai-flat-opacity));filter:drop-shadow(0 0 20px rgba(162,210,240,.10));}
.dubai-skyline-wrap-flat{bottom:46px;opacity:var(--dubai-flat-opacity);transform:translateX(-50%) translateY(calc((1 - var(--dubai-flat-opacity)) * 22px));}
.dubai-skyline-art{display:block;width:100%;height:auto;}
.dubai-skyline-art-curved{transform:translateY(calc(var(--dubai-progress) * 10px)) scale(calc(1 - var(--dubai-progress) * .012));}
.dubai-skyline-art-flat{filter:drop-shadow(0 0 18px rgba(160,206,236,.12));}
.dubai-globe-ground{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(1280px,96vw);height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(214,231,242,.20) 12%,rgba(240,184,109,.52) 50%,rgba(214,231,242,.18) 88%,transparent 100%);
  opacity:calc(.25 + var(--dubai-flat-opacity) * .85);}
.dubai-globe-sweep{position:absolute;left:-28%;bottom:40px;width:32%;height:210px;pointer-events:none;opacity:.55;
  background:linear-gradient(100deg,transparent 0%,rgba(244,188,114,.20) 48%,transparent 78%);
  filter:blur(28px);animation:dubaiGlobeSweep 9.5s ease-in-out infinite;}
@keyframes dubaiGlobeSweep{0%,14%{transform:translateX(0);opacity:0}25%{opacity:.52}54%{transform:translateX(360%);opacity:.25}100%{transform:translateX(360%);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .dubai-globe-halo{animation:dubaiGlobePulse 8.4s ease-in-out infinite alternate;}
  .dubai-globe-sphere{transition:opacity .32s linear,transform .28s linear;}
  .dubai-skyline-wrap-curved,.dubai-skyline-wrap-flat{transition:opacity .28s linear,transform .28s linear;}
  .dubai-skyline-art-curved,.dubai-skyline-art-flat{transition:transform .28s linear,opacity .28s linear;}
}
@keyframes dubaiGlobePulse{0%{filter:blur(24px);transform:translateX(-50%) scale(.985)}100%{filter:blur(34px);transform:translateX(-50%) scale(1.03)}}
@media(max-width:980px){
  .dubai-globe{min-height:520px;}
  .dubai-globe-stage{height:330px;}
  .dubai-globe-sphere{bottom:-190px;width:min(1080px,108vw);}
}
@media(max-width:660px){
  .dubai-globe{min-height:460px;padding-top:28px;}
  .dubai-globe-copy{padding-top:4px;}
  .dubai-globe-copy h2{font-size:clamp(26px,7.2vw,35px);margin:12px 0 10px;}
  .dubai-globe-copy h2 span{display:block;}
  .dubai-globe-stage{height:250px;margin-top:6px;}
  .dubai-globe-sphere{bottom:-132px;width:122vw;opacity:calc(.92 - var(--dubai-progress) * .76);}
  .dubai-skyline-wrap{width:118vw;}
  .dubai-skyline-wrap-curved{bottom:56px;}
  .dubai-skyline-wrap-flat{bottom:30px;}
  .dubai-globe-ground{bottom:26px;width:118vw;}
  .dubai-globe-halo{height:210px;bottom:12px;}
}
@media(prefers-reduced-motion:reduce){
  .dubai-globe{--dubai-progress:1;--dubai-flat-opacity:1;}
  .dubai-globe-halo,.dubai-globe-sweep{animation:none!important;}
}


/* =====================================================================
   Apex v32 — OPTICALLY CLEAR LIQUID GLASS
   Primary change: remove milky/opaque layers; show light through the pane.
   Reflections are narrow highlights on the material, not a matte overlay.
   ===================================================================== */
:root { --glass-blur:1.1px; }

/* Subtle light paths behind cards make the glass's transparency legible.
   They stay on their own layer, never on top of copy or buttons. */
#expertise .service-grid,
#group .group-cards { position:relative;isolation:isolate; }
#expertise .service-grid::before {
  content:"";position:absolute;inset:-26px -10px -18px;z-index:-1;pointer-events:none;
  background:
    linear-gradient(116deg,transparent 11%,rgba(176,223,250,.00) 24%,rgba(179,222,250,.23) 26.1%,rgba(179,222,250,.07) 27%,transparent 29%),
    linear-gradient(134deg,transparent 59%,rgba(251,201,137,.00) 64%,rgba(251,201,137,.22) 65.3%,rgba(251,201,137,.05) 66%,transparent 69%),
    radial-gradient(ellipse 480px 240px at 79% 47%,rgba(89,180,235,.18),transparent 74%),
    radial-gradient(ellipse 400px 200px at 20% 77%,rgba(233,169,107,.095),transparent 74%);
  opacity:.94;
}
#group .group-cards::before {
  content:"";position:absolute;inset:-15px -12px;z-index:-1;pointer-events:none;
  background:linear-gradient(106deg,transparent 13%,rgba(158,219,250,.18) 20%,rgba(158,219,250,.04) 21%,transparent 26%),
             linear-gradient(153deg,transparent 54%,rgba(245,192,133,.19) 61%,transparent 65%),
             radial-gradient(ellipse at 55% 40%,rgba(80,166,218,.14),transparent 70%);
}

/* Clear, layered material for the dark-section panels. */
.about-bottom,.about-pills>div,
.service-card,.feature-band,
.approach-intro,.approach-card,
.parent-company,.group-card {
  background:
    linear-gradient(127deg,rgba(249,253,255,.19) 0%,rgba(235,248,255,.07) 11%,rgba(179,220,246,.012) 36%,transparent 56%),
    linear-gradient(308deg,rgba(202,235,253,.105) 0%,rgba(221,246,255,.012) 18%,transparent 43%),
    rgba(153,208,241,.028) !important;
  border:1px solid rgba(229,248,255,.63) !important;
  -webkit-backdrop-filter:blur(1.1px) saturate(170%) contrast(108%) brightness(1.055) !important;
  backdrop-filter:blur(1.1px) saturate(170%) contrast(108%) brightness(1.055) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.53),
    inset -1px -1px 0 rgba(183,229,255,.26),
    inset 0 0 0 1px rgba(225,247,255,.035),
    0 16px 38px rgba(3,12,27,.21),0 1px 0 rgba(255,255,255,.09) !important;
}
/* Two distinct reflections: the bright top-left flash and a trailing
   ribbon near the other edge. Keep the centre transparent and readable. */
.about-bottom::before,.about-pills>div::before,
.service-card::before,.feature-band::before,
.approach-intro::before,.approach-card::before,
.parent-company::before,.group-card::before {
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(128deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.045) 9%,transparent 24%),
    linear-gradient(135deg,transparent 7%,rgba(255,255,255,.105) 12%,rgba(255,255,255,.013) 17%,transparent 24%),
    radial-gradient(ellipse 140px 120px at 97% 100%,rgba(160,217,248,.125),transparent 96%);
  opacity:1;
}
.about-bottom::after,.about-pills>div::after,
.approach-intro::after,.approach-card::after,.parent-company::after,
.feature-band::after {
  content:"";position:absolute;z-index:2;pointer-events:none;
  top:0;left:10px;right:10px;width:auto;height:2px;bottom:auto;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.92) 13%,rgba(210,241,255,.33) 43%,rgba(255,225,174,.69) 75%,transparent 100%);
  border-radius:99px;opacity:1;filter:none;
  box-shadow:0 1px 6px rgba(211,239,255,.11);
}
/* Preserve service/group hover glints, but make the active material brighter. */
.service-card::after,.group-card::after {
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(108deg,transparent 17%,rgba(250,254,255,.22) 41%,rgba(255,255,255,.055) 46%,transparent 60%);
  opacity:0;transition:opacity .3s ease;
}
.service-card:hover::after,.group-card:hover::after{opacity:.66;}
.service-card:hover,.approach-card:hover,a.group-card:hover {
  background:
    linear-gradient(124deg,rgba(250,254,255,.24),rgba(216,244,255,.045) 27%,transparent 66%),
    linear-gradient(316deg,rgba(197,233,253,.15),transparent 35%),
    rgba(188,230,255,.048) !important;
  border-color:rgba(255,255,255,.83) !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.68),inset -1px -1px 0 rgba(188,235,255,.35),0 22px 45px rgba(3,12,27,.26) !important;
}
.group-card.current{
  background:
    linear-gradient(137deg,rgba(255,225,182,.14),rgba(239,211,168,.015) 41%,transparent 64%),
    linear-gradient(318deg,rgba(223,244,255,.10),transparent 36%),
    rgba(228,190,125,.027) !important;
  border-color:rgba(248,205,147,.66)!important;
}

/* Glass floating over real photo should SHOW the photo, not fog it out. */
.hero-glass-card,.hero-glass-card.liquid-pane {
  background:
    linear-gradient(133deg,rgba(255,255,255,.22) 0%,rgba(238,250,255,.055) 16%,transparent 41%),
    linear-gradient(321deg,rgba(241,249,255,.145) 0%,rgba(196,225,247,.02) 23%,transparent 42%),
    rgba(10,31,48,.072) !important;
  border:1px solid rgba(251,254,255,.84)!important;
  -webkit-backdrop-filter:blur(1.7px) saturate(175%) contrast(115%) brightness(1.015)!important;
  backdrop-filter:blur(1.7px) saturate(175%) contrast(115%) brightness(1.015)!important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.72),inset -1px -1px 0 rgba(188,231,255,.36),
             0 17px 40px rgba(0,10,25,.32),0 0 23px rgba(181,228,253,.055)!important;
}
.hero-glass-card::before{height:2px;left:10px;right:10px;opacity:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.98) 20%,rgba(255,228,181,.65) 64%,transparent);}
.hero-glass-card::after{top:0;right:0;width:67%;height:100%;opacity:1;filter:none;border-radius:inherit;
 background:linear-gradient(116deg,transparent 28%,rgba(255,255,255,.11) 38%,rgba(255,255,255,.018) 44%,transparent 55%),
            radial-gradient(ellipse at 100% 0%,rgba(255,246,226,.15),transparent 61%);}
.hero-glass-card strong{color:#fff;text-shadow:0 1px 9px rgba(0,10,24,.92),0 2px 2px rgba(0,10,24,.45)!important;}
.hero-glass-card .glass-kicker,.hero-glass-card .glass-card-foot{text-shadow:0 1px 6px rgba(0,10,24,.95);}

/* Glass perimeter for the moving clients; ivory logo cards stay opaque. */
.clients-stage{
  background:linear-gradient(118deg,rgba(246,253,255,.16),rgba(217,242,255,.028) 21%,transparent 54%),
             linear-gradient(317deg,rgba(216,241,255,.12),transparent 35%),
             rgba(168,215,251,.028)!important;
  border-color:rgba(239,252,255,.61)!important;
  -webkit-backdrop-filter:blur(1.3px) saturate(158%)!important;
  backdrop-filter:blur(1.3px) saturate(158%)!important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),inset -1px -1px 0 rgba(195,236,255,.20),0 22px 55px rgba(0,10,21,.22)!important;
}
.client-marquee-shell{
  background:linear-gradient(135deg,rgba(254,255,255,.14),transparent 24%,rgba(215,241,255,.025) 70%,rgba(255,255,255,.11))!important;
  border-color:rgba(241,253,255,.57)!important;
  -webkit-backdrop-filter:blur(1px)!important;
  backdrop-filter:blur(1px)!important;
}

/* Light contact cards: almost-clear glass on the airy section, with contrast
   that doesn't rely on a cloudy opaque-white sheet. */
.contact-section .contact-details,.contact-section .contact-form-card,.contact-section .map-frame{
  background:linear-gradient(129deg,rgba(255,255,255,.75),rgba(255,255,255,.32) 42%,rgba(240,250,255,.27))!important;
  border-color:rgba(255,255,255,.90)!important;
  -webkit-backdrop-filter:blur(2.2px) saturate(125%)!important;
  backdrop-filter:blur(2.2px) saturate(125%)!important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.98),inset -1px -1px 0 rgba(190,221,239,.47),0 20px 40px rgba(20,57,85,.09)!important;
}

/* Point light is directional rather than a broad white fog over copy. */
.liquid-pointer-highlight{
  background:radial-gradient(circle 170px at var(--light-x,50%) var(--light-y,30%),rgba(255,255,255,.23),rgba(193,234,255,.055) 39%,transparent 77%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.19);
}
@media(prefers-reduced-transparency:reduce){
 .hero-glass-card,.hero-glass-card.liquid-pane,.about-bottom,.about-pills>div,.service-card,
 .feature-band,.approach-intro,.approach-card,.parent-company,.group-card{
   background:#14334d!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 }
 .contact-section .contact-details,.contact-section .contact-form-card,.contact-section .map-frame{
  background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 }
}


/* Apex v35: The formerly amber line/marker elements introduced in v33 are
   REMOVED (not recolored). Existing blue-white architectural lines and
   atmospheric highlights are preserved. Pre-v33 amber treatments unchanged. */
/* =====================================================================
  Apex v33 | Cinematic industrial atmosphere (reversible v32 baseline)
  Decoration only: no changes to card surfaces, structure, Dubai motion,
  visual content, client carousel or contact form.
   ===================================================================== */
main {
  background:
    radial-gradient(ellipse 1400px 1050px at 54% 13%,rgba(23,63,101,.35),transparent 74%),
    radial-gradient(ellipse 1120px 1000px at 11% 51%,rgba(33,87,129,.24),transparent 78%),
    radial-gradient(ellipse 1300px 900px at 87% 79%,rgba(21,61,95,.30),transparent 76%),
    linear-gradient(135deg,#081a2c 0%,#112d48 39%,#0b2036 70%,#081a2b 100%);
}
/* Light and linework are UNDER the pane and text, not pasted over them. */
.ambient-field{
  --ambient-lift:0px;
  position:absolute;
  inset:-20px -16px;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:1;
  transform:translate3d(0,var(--ambient-lift),0);
  contain:paint;
}
.ambient-aura,.ambient-caustic,.ambient-linework{position:absolute;display:block;pointer-events:none;}
.ambient-aura{
  inset:-18% -16%;
  opacity:.82;
  background:
    radial-gradient(ellipse 550px 425px at var(--aura-blue-x,25%) var(--aura-blue-y,67%),rgba(31,116,190,.30),rgba(20,84,146,.13) 35%,transparent 73%),
    radial-gradient(ellipse 480px 440px at var(--aura-amber-x,77%) var(--aura-amber-y,36%),rgba(236,158,79,.21),rgba(180,106,60,.075) 42%,transparent 76%);
}
.ambient-caustic{
  inset:-18% -12%;
  background:
    linear-gradient(var(--beam-angle,127deg),transparent 22%,rgba(163,214,244,.015) 28%,rgba(156,217,251,.16) 30.1%,rgba(184,228,250,.038) 31.7%,transparent 38%);
  opacity:.84;
  filter:blur(8px);
}
.ambient-linework{inset:0;width:100%;height:100%;opacity:.72;overflow:visible;}
.ambient-linework .ambient-trace,.ambient-linework .ambient-precision,
.ambient-linework .ambient-outline-node {fill:none;stroke:#a5d2ef;stroke-width:1.5;opacity:.21;stroke-linecap:round;stroke-linejoin:round;}
.ambient-linework .ambient-trace.fine {stroke:#b4dcf3;stroke-width:.8;opacity:.13;}
.ambient-linework .ambient-precision{stroke-dasharray:5 8;stroke-width:1;opacity:.36;}
.ambient-linework .ambient-outline-node{opacity:.33;stroke-width:1.4;}
/* Keep section-specific identities and distinct pools, rather than identical gradients. */
.ambient-field--hero{
 --aura-blue-x:5%;--aura-blue-y:83%;--aura-amber-x:82%;--aura-amber-y:42%;--beam-angle:132deg;
}
.ambient-field--hero .ambient-aura{opacity:.53;}
.ambient-field--hero .ambient-linework{opacity:.36;}
.ambient-field--hero .ambient-caustic{opacity:.34;filter:blur(13px);}
.ambient-field--about{
 --aura-blue-x:12%;--aura-blue-y:77%;--aura-amber-x:84%;--aura-amber-y:60%;--beam-angle:128deg;
}
.ambient-field--about .ambient-caustic{opacity:.55;}
.ambient-field--expertise{
 --aura-blue-x:18%;--aura-blue-y:62%;--aura-amber-x:78%;--aura-amber-y:36%;--beam-angle:122deg;
}
.ambient-field--expertise .ambient-aura{opacity:.98;}
.ambient-field--expertise .ambient-linework{opacity:.85;}
/* Existing v32 light strips still function, but shouldn't overpower backdrop. */
#expertise .service-grid::before {opacity:.64;}
.ambient-field--approach{
 --aura-blue-x:20%;--aura-blue-y:78%;--aura-amber-x:78%;--aura-amber-y:35%;--beam-angle:131deg;
}
.ambient-field--approach .ambient-caustic{opacity:.49;}
.ambient-field--approach .ambient-linework{opacity:.82;}
.ambient-field--clients{
 --aura-blue-x:53%;--aura-blue-y:58%;--aura-amber-x:84%;--aura-amber-y:88%;--beam-angle:115deg;
}
.ambient-field--clients .ambient-aura{opacity:.73;}
.ambient-field--clients .ambient-caustic{opacity:.40;}
.ambient-field--group{
 --aura-blue-x:67%;--aura-blue-y:72%;--aura-amber-x:20%;--aura-amber-y:43%;--beam-angle:135deg;
}
.ambient-field--group .ambient-caustic{opacity:.49;}
.ambient-field--group .ambient-linework{opacity:.9;}
/* Additional very fine glancing highlights at the perimeter of sections. */
.about-section,.services-section,.approach-section,.clients-section,.group-section{
  box-shadow:inset 0 1px 0 rgba(181,215,239,.025);
}
@media(max-width:880px){
  .ambient-field{inset:-12px -15px;}
  .ambient-linework{opacity:.48;}
  .ambient-caustic{opacity:.46;filter:blur(12px);}
  .ambient-field--expertise .ambient-aura{opacity:.83;}
}
@media(max-width:660px){
  .ambient-field{--ambient-lift:0px!important;inset:-15px -25px;}
  .ambient-linework{opacity:.36!important;}
  .ambient-caustic{opacity:.28!important;filter:blur(15px);}
  .ambient-aura{opacity:.62!important;}
  .ambient-field--hero .ambient-aura{opacity:.40!important;}
}
@media(prefers-reduced-motion:reduce){
  .ambient-field{--ambient-lift:0px!important;transform:none!important;}
}
@media(prefers-reduced-transparency:reduce){
 .ambient-caustic{opacity:.28!important;}
 .ambient-aura{opacity:.35!important;}
}


/* ===================================================================
   Apex v60 — continuous dark site atmosphere; native scrolling
   =================================================================== */
/* The base page supplies the navy. Individual showcase panels should not
   draw hard-edged gradients or 1px divider lines across the whole viewport. */
main > .kinetic-band {
  background:transparent !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
/* Atmospheric radial lighting is kept on the pseudo-elements; it fades
   away at the edges instead of introducing another background rectangle. */
main > .kinetic-band::before { pointer-events:none; }
/* Make the hero's dark tint dissolve into the shared site background. */
main > .hero {
  background:linear-gradient(180deg,rgba(4,13,25,.26) 0%,rgba(12,31,49,.11) 61%,transparent 100%) !important;
}


/* Apex v68 header: separate skyline destination outside the company words.
   Canvas always stays below text while the moving skyline crosses behind it. */
.site-header .brand{position:relative;isolation:isolate;gap:12px;flex-shrink:0}
.site-header .brand-icon{position:relative;z-index:3}
.site-header .brand-words{position:relative;z-index:3}
.site-header .brand-icon.header-journey-active > img{opacity:0}
.site-header .brand-icon > img{transition:none}
.site-header .brand .header-journey-canvas{
 position:absolute;inset:0;display:block;width:100%;height:100%;
 pointer-events:none;z-index:2
}
.site-header .header-skyline-slot{flex:0 0 75px;width:75px;height:47px;display:block;pointer-events:none;margin-left:3px}
@media(min-width:881px) and (max-width:1160px){
 .site-header .header-skyline-slot{flex-basis:52px;width:52px}
 .site-header .header-inner{gap:12px}
 .site-header .desktop-nav{gap:clamp(10px,1.5vw,22px)}
 .site-header .brand{gap:9px}
}
@media(max-width:880px){.site-header .header-skyline-slot{flex-basis:74px;width:74px}}
@media(max-width:660px){
 .site-header .brand{gap:9px}
 .site-header .header-skyline-slot{flex-basis:clamp(18px,calc(100vw - 310px),65px);width:clamp(18px,calc(100vw - 310px),65px);margin-left:0}
}
@media(max-width:335px){.site-header .header-skyline-slot{display:none}}


/* v83 — five-image slideshow. The gallery alone changes; the remaining site retains its styling. */
.apex-gallery{padding:74px 0 88px;overflow:hidden;position:relative;color:#f3f8fb;background:transparent}
.apex-gallery-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
.apex-gallery h2{font-size:clamp(23px,2.4vw,35px);font-weight:800;letter-spacing:-.045em;line-height:1.2;margin:0}
.apex-gallery-controls{display:flex;align-items:center;gap:10px}
.apex-gallery-arrow{
 display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(205,226,240,.30);
 border-radius:14px;background:rgba(146,181,205,.10);-webkit-backdrop-filter:blur(14px);
 backdrop-filter:blur(14px);color:#f0f7fa;cursor:pointer;font-size:19px;line-height:1;
 box-shadow:inset 0 1px rgba(255,255,255,.09),0 6px 24px rgba(0,0,0,.10);
 transition:background .22s,border-color .22s,transform .22s
}
.apex-gallery-arrow:hover{background:rgba(170,205,225,.20);border-color:rgba(233,242,247,.57)}
.apex-gallery-arrow:active{transform:scale(.96)}
.apex-gallery-arrow:focus-visible,.apex-gallery-dot:focus-visible,.apex-gallery-viewport:focus-visible{outline:2px solid #e7b77e;outline-offset:3px}
.apex-gallery-viewport{
 position:relative;margin:0 auto;width:min(calc(100% - 40px),1230px);
 height:clamp(300px,39vw,540px);border-radius:20px;isolation:isolate;overflow:hidden;
 border:1px solid rgba(180,209,230,.24);background:#162e42;
 box-shadow:0 20px 55px rgba(2,12,23,.17), inset 0 1px rgba(255,255,255,.08);
 touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none
}
.apex-gallery-track{position:absolute;inset:0}
.apex-gallery-item{
 position:absolute;inset:0;margin:0;overflow:hidden;opacity:0;visibility:hidden;
 transition:opacity .95s ease,visibility 0s linear .95s;
 background:#1b3448
}
.apex-gallery-item.is-active{opacity:1;visibility:visible;z-index:1;transition:opacity .95s ease,visibility 0s}
.apex-gallery-track:not(.is-ready) .apex-gallery-item:first-child{opacity:1;visibility:visible}
.apex-gallery-item img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;filter:saturate(.94) contrast(1.02)}
.apex-gallery-item:first-child img{object-position:50% 43%;filter:none}
.apex-gallery-item:nth-child(4) img{filter:none}
.apex-gallery-viewport::after{
 content:"";position:absolute;z-index:2;inset:auto 0 0;height:29%;
 background:linear-gradient(to top,rgba(8,24,39,.34),transparent);pointer-events:none
}
.apex-gallery-glass{
 position:absolute;z-index:3;left:22px;bottom:22px;display:flex;align-items:center;gap:17px;
 border:1px solid rgba(231,243,249,.29);border-radius:15px;padding:13px 17px;
 background:rgba(21,42,59,.40);-webkit-backdrop-filter:blur(18px) saturate(125%);
 backdrop-filter:blur(18px) saturate(125%);
 box-shadow:inset 0 1px rgba(255,255,255,.12),0 8px 25px rgba(3,16,29,.15)
}
.apex-gallery-count{font-size:13px;letter-spacing:.13em;font-weight:600;color:#cbdae4;white-space:nowrap;font-variant-numeric:tabular-nums}
.apex-gallery-count strong{color:#fff;font-weight:800}
.apex-gallery-pagination{display:flex;align-items:center;gap:7px}
.apex-gallery-dot{
 position:relative;display:block;width:clamp(33px,4.4vw,55px);height:16px;padding:0;
 background:transparent;border:0;cursor:pointer;touch-action:manipulation
}
.apex-gallery-dot::before{content:"";position:absolute;inset:6px 0;border-radius:4px;background:rgba(239,249,255,.30)}
.apex-gallery-progress-fill{
 display:block;position:absolute;left:0;top:6px;width:100%;height:4px;z-index:1;
 border-radius:4px;background:#f0c28e;transform:scaleX(0);transform-origin:left center
}
.apex-gallery-toggle .apex-gallery-icon{display:block;width:17px;height:17px;flex:none}
.apex-gallery-toggle .apex-gallery-icon[hidden]{display:none}
.apex-gallery-toggle[aria-pressed="true"]{border-color:rgba(233,242,247,.6);background:rgba(170,205,225,.17)}
@media(max-width:880px){.apex-gallery{padding:58px 0 68px}.apex-gallery-viewport{height:clamp(300px,50vw,450px)}}
@media(max-width:660px){
 .apex-gallery{padding:49px 0 60px}
 .apex-gallery-header{margin-bottom:15px;gap:10px}
 .apex-gallery h2{font-size:25px}
 .apex-gallery-viewport{width:calc(100% - 30px);height:clamp(240px,72vw,370px);border-radius:14px}
 .apex-gallery-arrow{width:36px;height:36px;border-radius:11px;font-size:17px}
 .apex-gallery-controls{gap:6px}
 .apex-gallery-toggle .apex-gallery-icon{width:15px;height:15px}
 .apex-gallery-glass{left:12px;bottom:12px;gap:11px;padding:11px 13px;border-radius:12px}
 .apex-gallery-count{font-size:11px}
 .apex-gallery-pagination{gap:5px}
 .apex-gallery-dot{width:clamp(24px,8vw,36px)}
}
@media(prefers-reduced-motion:reduce){
 .apex-gallery-item,.apex-gallery-item.is-active{transition:none}
 .apex-gallery-arrow{transition:none}
}