:root{ --white:#FFFFFF; --off:#F4F5F7; --deep:#17275C; /* navy */ --deep2:#111D45; /* darker navy — nav bar, footer */ --brass:#F0A03C; /* orange */ --brass2:#F5B45E; --coral:#F15B5B; /* from the D2B logo */ --ink:#17275C; --grey:#4A5160; --line:rgba(23,39,92,.15); --lineD:rgba(255,255,255,.16); --pink:#FCF4EE; --purple:#4B2E83; --f:"Lato",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; --fc:"Lato",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; --pad:clamp(16px,4vw,60px); } *{box-sizing:border-box} html{scroll-behavior:smooth; /* Reserve the scrollbar track permanently. The preloader toggles overflow:hidden on ; without this, releasing it makes the scrollbar reappear and every centred element shifts sideways by its width. Same applies to the mobile menu and the lightbox. */ scrollbar-gutter:stable} body{margin:0;background:var(--white);color:#3A4152;font-family:var(--f); font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4{margin:0;font-family:var(--fc);font-weight:600;line-height:1.18; letter-spacing:-.005em;color:var(--deep)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--brass);outline-offset:3px} .wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)} /* ---------- section frame (NCC: eyebrow + heading, tight) ---------- */ section{padding:clamp(44px,6vw,76px) 0} .eyebrow{font-family:var(--f);font-size:11px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:24px;height:2px;background:var(--brass);flex:none} .h2{font-size:clamp(24px,2.9vw,38px);font-weight:600;margin:12px 0 0;max-width:22ch} .on-dark{background:var(--deep);color:#EAF0EE} .on-dark .eyebrow{color:rgba(234,240,238,.7)} .on-dark .h2{color:#fff} .on-brass{background:var(--brass);color:#fff} .on-brass .h2,.on-brass h2{color:var(--deep)} .on-brass .eyebrow{color:#fff} .on-brass .eyebrow::before{background:#fff} .on-off{background:var(--off)} .btn{display:inline-block;font-family:var(--f);font-size:12px;font-weight:600; letter-spacing:.13em;text-transform:uppercase;background:var(--brass); color:#fff;padding:13px 24px;transition:background .2s} .btn:hover{background:var(--brass2)} .btn.wht{background:#fff;color:var(--deep)} .btn.wht:hover{background:#f0f0f0} .btn.grn{background:var(--deep);color:#fff} .btn.grn:hover{background:var(--deep2)} /* ---------- utility bar (NCC top strip) ---------- */ .util{background:var(--white);border-bottom:1px solid var(--line)} .util .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px; padding-top:10px;padding-bottom:10px} .brand{display:flex;align-items:center;gap:10px} .brand img{height:clamp(52px,5vw,68px);width:auto;display:block} .flogo{height:56px;width:auto;margin-bottom:4px} .util .info{display:flex;gap:26px} .util .info div{font-size:12px;line-height:1.35} .util .info b{display:block;font-size:10px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--grey)} .util .info a{color:var(--coral);font-weight:600} .util .info a:hover{color:var(--deep)} @media(max-width:860px){.util .info{display:none}} /* ---------- main nav bar (NCC dark strip) ---------- */ .bar{background:var(--deep);position:sticky;top:0;z-index:70} .bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px} .bar ul{list-style:none;display:flex;margin:0;padding:0;flex-wrap:wrap} .bar li{position:relative} .bar li>a{display:block;padding:14px 18px;font-size:12.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:#DCE6E3;transition:background .2s} .bar li>a:hover{background:rgba(255,255,255,.09);color:#fff} .bar li>a .car{font-size:8px;margin-left:5px;opacity:.7} .drop{position:absolute;top:100%;left:0;min-width:212px;background:#fff; border-top:2px solid var(--brass);box-shadow:0 14px 30px rgba(0,0,0,.14); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .2s,transform .2s,visibility .2s;z-index:5} .bar li:hover .drop,.bar li:focus-within .drop{opacity:1;visibility:visible;transform:none} .drop a{display:block;padding:10px 16px;font-size:13px;color:var(--ink); border-bottom:1px solid var(--line)} .drop a:last-child{border-bottom:0} .drop a:hover{background:var(--off);color:var(--deep)} .barCta{background:var(--brass);color:var(--deep);font-size:12.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;padding:14px 22px;flex:none; transition:background .2s} .barCta:hover{background:var(--brass2)} .bar .wrap{padding-right:0} .burger{display:none;background:none;border:0;color:#fff;font-size:22px; padding:12px 4px;cursor:pointer} @media(max-width:1040px){ .barCta{display:none} .bar ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--deep2); flex-direction:column;max-height:70vh;overflow:auto} .bar.open ul{display:flex} .bar li>a{padding:13px var(--pad)} .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none; background:transparent;border-top:0} .drop a{color:#B9CBC6;padding-left:calc(var(--pad) + 16px);border-bottom:0;font-size:12.5px} .drop a:hover{background:transparent} .burger{display:block} } /* ---------- video band (NCC: a band, not a full hero) ---------- */ /* 16:9 to match the source, but never taller than the space left below the header — otherwise the caption and buttons fall below the fold at 100% zoom. When the cap kicks in the video crops at the SIDES, which reads far better than losing the top and bottom of the frame. */ /* height is set directly, NOT via aspect-ratio — combining aspect-ratio with max-height makes the browser shrink the WIDTH to preserve the shape, which leaves a gap at the right. 56.25vw is the 16:9 height for a full-width band. */ .band{position:relative;width:100%; height:min(56.25vw, calc(100svh - 190px)); overflow:hidden;background:var(--deep2)} @media(max-width:900px){ .band{height:min(56.25vw, calc(100svh - 150px))} } @media(max-width:600px){ /* portrait phones: 16:9 is too short to read, give it more room */ .band{height:min(70vh, 62vw + 120px)} } .band video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover; /* fills the band, crops the overflow */ object-position:center center} /* try: center top / center 35% / center bottom */ .band.novid video{display:none} .band .fb{position:absolute;inset:0; background:linear-gradient(140deg,#16463D,#0B231F)} .band .sc{position:absolute;inset:0; background:linear-gradient(to top,rgba(17,29,69,.22),rgba(17,29,69,0) 38%)} .band .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column; justify-content:flex-end;padding-bottom:clamp(20px,3vw,40px)} /* solid navy caption block, as burned into NCC's banner film */ .band .cap{background:var(--deep);align-self:flex-start; padding:clamp(12px,1.6vw,20px) clamp(16px,2.2vw,30px)} /* the box resizes to whichever line is showing, and eases between sizes */ .band .capIn{position:relative; transition:width .85s cubic-bezier(.22,.9,.24,1), height .85s cubic-bezier(.22,.9,.24,1)} .band h1{position:absolute;top:0;left:0; font-family:var(--fc);font-size:clamp(20px,3.4vw,42px); font-weight:700;color:#fff;line-height:1.18;text-transform:uppercase; letter-spacing:.005em;margin:0;white-space:nowrap; opacity:0;transform:translateY(10px); /* leaving: quick fade so the two lines never sit on top of each other */ transition:opacity .28s ease-in,transform .28s ease-in} .band h1.on{opacity:1;transform:none; /* arriving: slow, gentle */ transition:opacity .9s ease-out .1s,transform 1.1s cubic-bezier(.22,.9,.24,1) .1s} .band .bs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} @media(prefers-reduced-motion:reduce){ .band h1,.band .capIn{transition:none} } /* notice strip, like NCC's red BEWARE bar */ /* scrolling updates ticker — pauses on hover */ .notice{display:flex;align-items:stretch;background:var(--deep);color:#fff; margin-top:26px} .notice b{background:var(--brass);color:var(--deep);font-size:12px;font-weight:900; letter-spacing:.1em;text-transform:uppercase;padding:10px 18px; display:flex;align-items:center;flex:none;white-space:nowrap} .ticker{flex:1;overflow:hidden;display:flex;align-items:center;min-width:0} .ticker p{margin:0;white-space:nowrap;padding-left:100%;font-size:13.5px; animation:mq 38s linear infinite} .ticker p a{color:#fff} .ticker p a:hover{color:var(--brass)} .ticker .sep{color:var(--brass);margin:0 16px;font-weight:900} .ticker .dt{color:#A9B6D6} .ticker:hover p,.ticker:focus-within p{animation-play-state:paused} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-100%)}} @media(prefers-reduced-motion:reduce){ .ticker p{animation:none;padding-left:16px;white-space:normal} } /* NCC's light-pink showcase block + purple heading */ .on-pink{background:var(--pink)} .on-pink .h2,.on-pink h2{color:var(--purple)} /* ---------- statement + counters ---------- */ .state{display:grid;gap:20px} @media(min-width:940px){.state{grid-template-columns:1fr 1.35fr;gap:52px;align-items:start}} .state p{margin:0 0 14px;color:var(--grey);max-width:66ch} .stats{display:grid;gap:26px 20px;margin-top:34px; grid-template-columns:repeat(2,1fr)} @media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}} .stat .num{font-family:var(--fc);font-size:clamp(32px,4vw,48px);font-weight:600; color:var(--brass);line-height:1} .stat .num sup{font-size:.44em;color:var(--brass);font-weight:600; vertical-align:super;margin-left:3px} .stat span{display:block;margin-top:4px;font-size:12.5px;color:var(--grey)} /* ---------- expertise: icon card grid on dark ---------- */ .cards{display:grid;gap:14px;margin-top:32px;grid-template-columns:1fr} @media(min-width:660px){.cards{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}} .card{background:rgba(255,255,255,.045);border:1px solid var(--lineD); padding:24px 22px 26px;transition:background .25s,border-color .25s} .card:hover{background:rgba(255,255,255,.085);border-color:rgba(217,154,43,.6)} .card svg{width:34px;height:34px;stroke:var(--brass2);fill:none;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round} .card h4{font-size:17px;color:var(--brass2);margin:16px 0 9px;font-weight:600} .card p{margin:0;font-size:13.5px;color:#C4D3CF;line-height:1.62} /* ---------- projects showcase: labelled image cards ---------- */ .shows{display:grid;gap:14px;margin-top:30px;grid-template-columns:1fr} @media(min-width:640px){.shows{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.shows{grid-template-columns:repeat(3,1fr)}} .show{position:relative;display:block;overflow:hidden} .show .im{position:relative;aspect-ratio:4/3;overflow:hidden; background:linear-gradient(150deg,#DDE2DF,#C4CCC8)} .show .im img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .9s var(--ease)} .show:hover .im img{transform:scale(1.06)} .show:hover .im{transform:scale(1.045)} .show .lb{position:absolute;left:0;right:0;bottom:0;background:rgba(18,58,51,.9); color:#fff;padding:11px 15px;display:flex;justify-content:space-between;gap:10px; align-items:center} .show .lb b{font-size:14px;font-weight:600} .show .lb i{font-style:normal;font-size:11.5px;color:#BDD0CB} /* ---------- presence (brass block) ---------- */ .pres{display:grid;gap:32px;align-items:center} @media(min-width:940px){.pres{grid-template-columns:1fr 1fr;gap:60px}} .pres .big{font-family:var(--fc);font-size:clamp(58px,8vw,110px);font-weight:900; line-height:.95;margin:16px 0 6px;color:var(--deep)} .pres .big sup{color:var(--deep)} .pres p{margin:12px 0 0;max-width:46ch;color:rgba(255,255,255,.94)} .map{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.34)} .mc{background:var(--brass);color:#fff;padding:14px 16px;display:flex; justify-content:space-between;align-items:center;gap:10px} .mc span{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase} .mc b{font-family:var(--fc);font-size:24px;font-weight:700} /* ---------- strength (dark, checkmarks + cards) ---------- */ .str{display:grid;gap:30px;margin-top:8px} @media(min-width:940px){.str{grid-template-columns:.85fr 1.15fr;gap:54px}} .checks{list-style:none;margin:22px 0 0;padding:0} .checks li{display:flex;gap:11px;align-items:flex-start;padding:9px 0; font-size:14.5px;color:#D3E0DC} .checks li::before{content:"✓";color:var(--brass2);font-weight:700;flex:none;line-height:1.5} /* ---------- leadership ---------- */ .lead{display:grid;gap:26px;margin-top:28px}@media(min-width:940px){.lead{grid-template-columns:1.15fr .85fr;gap:46px;align-items:center}} .lead .ph{position:relative;aspect-ratio:16/9;overflow:hidden; border:1px solid var(--line); background:linear-gradient(150deg,#E4E8E5,#CDD4D0)} .lead .ph img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.1s var(--ease)} .lead:hover .ph img{transform:scale(1.04)} .lead p{color:var(--grey);margin:0 0 14px} .lead .checks li{color:var(--ink)} /* ---------- videos ---------- */ .vids{display:grid;gap:16px;margin-top:30px;grid-template-columns:1fr} @media(min-width:700px){.vids{grid-template-columns:repeat(3,1fr)}} .vid .th{position:relative;aspect-ratio:16/9;background:#20302C; display:flex;align-items:center;justify-content:center} .vid .th::after{content:"";width:0;height:0;border-left:17px solid #fff; border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px} .vid span{display:block;margin-top:10px;font-size:13px;color:var(--grey)} /* ---------- contact ---------- */ .ct{display:grid;gap:34px;margin-top:28px} @media(min-width:940px){.ct{grid-template-columns:1.25fr .75fr;gap:50px}} .two{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:600px){.two{grid-template-columns:1fr 1fr}} .fld{margin-bottom:14px} .fld input,.fld select,.fld textarea{width:100%;font-family:var(--f);font-size:14.5px; color:var(--ink);background:var(--off);border:1px solid var(--line); padding:12px 13px;transition:border-color .2s} .fld textarea{min-height:112px;resize:vertical} .fld :focus{outline:0;border-color:var(--deep)} .dl a{display:flex;align-items:center;justify-content:space-between;gap:12px; border:1px solid var(--line);padding:15px 16px;margin-bottom:11px; font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; transition:border-color .2s,background .2s} .dl a:hover{border-color:var(--deep);background:var(--off)} .dl a i{font-style:normal;color:var(--brass);font-size:17px} .tb{border:1px solid var(--line);margin-top:18px} .tb div{padding:14px 16px;border-bottom:1px solid var(--line)} .tb div:last-child{border-bottom:0} .tb b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--grey);margin-bottom:6px} .tb p{margin:0;font-size:14px;color:var(--ink)} /* ---------- footer ---------- */ footer{background:var(--deep2);color:#B9CBC6;padding:38px 0 30px} .fgrid{display:grid;gap:26px} @media(min-width:860px){.fgrid{grid-template-columns:1.4fr 1fr 1fr}} footer h4{color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase; margin-bottom:12px} footer a:hover{color:#fff} footer ul{list-style:none;margin:0;padding:0} footer li{padding:4px 0;font-size:13.5px} .fbot{margin-top:28px;padding-top:18px;border-top:1px solid var(--lineD); display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12px} /* ---------- UAE map ---------- */ .uae{position:relative} .uae svg{width:100%;height:auto;display:block;overflow:visible} .em-shape{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.7);stroke-width:1.3; stroke-linejoin:round;transition:fill .35s ease;cursor:pointer} /* each emirate a slightly different tint, so the borders read at a glance */ .em-g:nth-of-type(2) .em-shape{fill:rgba(255,255,255,.30)} .em-g:nth-of-type(3) .em-shape{fill:rgba(255,255,255,.22)} .em-g:nth-of-type(4) .em-shape{fill:rgba(255,255,255,.34)} .em-g:nth-of-type(5) .em-shape{fill:rgba(255,255,255,.24)} .em-g:nth-of-type(6) .em-shape{fill:rgba(255,255,255,.30)} .em-g:nth-of-type(7) .em-shape{fill:rgba(255,255,255,.20)} .em-g:hover .em-shape,.em-g.act .em-shape{fill:rgba(255,255,255,.58)} /* the outer holds position; this inner one only ever animates, so hovering can never knock a pin out of place */ .pin{cursor:pointer;transition:transform .45s var(--ease)} .em-g:hover .pin,.em-g.act .pin{transform:translateY(-6px) scale(1.08)} .em-lbl{paint-order:stroke;stroke:rgba(23,39,92,.35);stroke-width:3px} .pin-body{fill:var(--deep)} .pin-dot{fill:#fff} .pin-num{fill:#fff;font-family:var(--fc);font-size:13px;font-weight:900; text-anchor:middle;pointer-events:none} .em-lbl{fill:#fff;font-family:var(--fc);font-size:12.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;pointer-events:none} .em-lead{stroke:rgba(255,255,255,.7);stroke-width:1.1} .uae-pop{position:absolute;pointer-events:none;background:var(--deep);color:#fff; padding:12px 16px;min-width:170px;opacity:0;transform:translateY(6px); transition:opacity .3s ease,transform .3s var(--ease);z-index:5} .uae-pop.on{opacity:1;transform:none} .uae-pop b{display:block;font-family:var(--fc);font-size:13px;font-weight:900; letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px} .uae-pop span{font-size:12.5px;color:#BFCCE8;display:block} .uae-pop u{display:block;text-decoration:none;font-family:var(--fc);font-size:26px; font-weight:900;color:var(--brass);line-height:1.1;margin-top:4px} @media(max-width:760px){ .em-lbl{font-size:15px} .uae-pop{display:none} } /* ---------- reveal ---------- */ /* ================= MOTION ================= */ :root{ --ease:cubic-bezier(.22,.9,.24,1) } /* base reveal — the .js-on guard means no-JS or a JS error leaves everything visible instead of blanking the page */ .js-on .rise{opacity:0;transform:translateY(18px); transition:opacity .7s ease,transform .8s var(--ease)} .js-on .rise.in{opacity:1;transform:none} /* heading mask reveal — text rises from behind a clipped edge */ .h2,.band h1{--d:0ms} .mask{display:block;overflow:hidden} .js-on .mask>span{display:block;transform:translateY(105%); transition:transform .95s var(--ease) var(--d)} .mask>span{display:block} .in .mask>span,.mask.in>span{transform:none} /* eyebrow rule draws itself in */ .eyebrow::before{transform:scaleX(0);transform-origin:left center; transition:transform .7s var(--ease) .15s} .in .eyebrow::before,.eyebrow.in::before{transform:scaleX(1)} /* staggered children — set by JS via --i */ .js-on .stag>*{opacity:0;transform:translateY(22px); transition:opacity .65s ease calc(var(--i,0)*90ms), transform .75s var(--ease) calc(var(--i,0)*90ms)} .stag.in>*{opacity:1;transform:none} /* counters: each figure lifts as it starts */ .js-on .stat .num{display:inline-block;transform:translateY(14px);opacity:0; transition:opacity .5s ease calc(var(--i,0)*140ms), transform .7s var(--ease) calc(var(--i,0)*140ms)} .stat.in .num{opacity:1;transform:none} .stat{position:relative;padding-left:0} .stat::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0; background:var(--brass);transition:width .9s var(--ease) calc(var(--i,0)*140ms + .2s)} .stat.in::after{width:38px} /* expertise cards */ .card{position:relative;overflow:hidden} .card::before{content:"";position:absolute;inset:0; background:linear-gradient(140deg,rgba(240,160,60,.16),transparent 58%); opacity:0;transition:opacity .5s ease} .card:hover::before{opacity:1} .card svg{transition:transform .6s var(--ease)} .card:hover svg{transform:translateY(-4px) rotate(-3deg)} /* project cards: image scales, caption bar slides up, thin rule wipes across */ .show .lb{transform:translateY(0);transition:background .4s ease,transform .5s var(--ease)} .show:hover .lb{background:var(--deep2)} .show::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--brass);transform:scaleX(0);transform-origin:left;z-index:3; transition:transform .6s var(--ease)} .show:hover::after{transform:scaleX(1)} .show .lb i{transition:transform .5s var(--ease),color .4s ease} .show:hover .lb i{transform:translateX(4px);color:var(--brass2)} /* presence tiles */ .mc{transition:background .35s ease,padding-left .4s var(--ease)} .mc:hover{background:var(--brass2);padding-left:22px} .mc b{transition:transform .45s var(--ease)} .mc:hover b{transform:scale(1.12)} /* checkmark list ticks in */ .js-on .checks li{opacity:0;transform:translateX(-10px); transition:opacity .5s ease calc(var(--i,0)*110ms), transform .6s var(--ease) calc(var(--i,0)*110ms)} .checks.in li{opacity:1;transform:none} /* buttons */ .btn,.barCta{position:relative;overflow:hidden} .btn::after,.barCta::after{content:"";position:absolute;inset:0; background:rgba(255,255,255,.22);transform:translateX(-101%); transition:transform .55s var(--ease)} .btn:hover::after,.barCta:hover::after{transform:translateX(101%)} .btn:hover,.barCta:hover{transform:translateY(-2px)} .btn,.barCta{transition:background .25s ease,transform .3s var(--ease)} /* nav docking: utility bar folds away, navy bar stays */ .util{transition:max-height .45s var(--ease),opacity .3s ease} .util.hide{max-height:0;opacity:0;overflow:hidden} .bar{transition:box-shadow .35s ease} .bar.docked{box-shadow:0 6px 24px rgba(17,29,69,.22)} .bar li>a{position:relative} .bar li>a::after{content:"";position:absolute;left:18px;right:18px;bottom:8px; height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease)} .bar li>a:hover::after{transform:scaleX(1)} /* form fields */ .fld input,.fld select,.fld textarea{transition:border-color .3s ease,background .3s ease} .fld input:focus,.fld select:focus,.fld textarea:focus{background:#fff} /* download rows */ .dl a i{transition:transform .45s var(--ease)} .dl a:hover i{transform:translateY(3px)} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rise,.stag>*,.stat .num,.checks li{opacity:1;transform:none;transition:none} .mask>span{transform:none;transition:none} .eyebrow::before{transform:scaleX(1);transition:none} .stat::after{width:38px;transition:none} .show:hover .im,.card:hover svg,.btn:hover,.barCta:hover{transform:none} .btn::after,.barCta::after{display:none} } /* ================= CONTACT PAGE ================= */ /* ---- page banner ---- */ .pageband{position:relative;overflow:hidden;color:#fff; background-color:#063881; /* matches the flat blue in the artwork */ background-position:center right; background-size:cover; background-repeat:no-repeat; padding:clamp(54px,7vw,88px) 0 clamp(48px,6vw,76px)} /* darkens the right side just enough that text never fights the cranes */ .pageband::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(6,56,129,.96) 30%,rgba(6,56,129,.55) 62%,rgba(6,56,129,.35))} .pageband .wrap{position:relative;z-index:2} .pageband .eyebrow{color:#fff} .pageband .eyebrow::before{background:var(--brass)} .pageband h1{font-family:var(--fc);font-size:clamp(30px,4.6vw,56px);font-weight:900; color:#fff;margin:14px 0 0;max-width:20ch;line-height:1.08} .pageband p{color:#CBD8F0;max-width:52ch;margin:16px 0 0;font-size:clamp(15px,1.3vw,17px)} @media(max-width:760px){ .pageband{background-position:center right -120px} .pageband::before{background:linear-gradient(90deg,rgba(6,56,129,.95) 55%,rgba(6,56,129,.7))} } /* breadcrumb */ .crumb{display:flex;align-items:center;gap:14px;margin-top:26px; font-size:13px;letter-spacing:.06em} .crumb a{color:#fff;font-weight:700} .crumb a:hover{color:var(--brass)} .crumb .dash{width:34px;height:2px;background:rgba(255,255,255,.5);flex:none} .crumb span:last-child{color:#CBD8F0} /* quick contact cards */ .qgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} @media(min-width:820px){.qgrid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}} .qcard{background:var(--white);padding:26px 24px 30px;display:block; transition:background .3s ease,transform .4s var(--ease)} .qcard:hover{background:var(--off);transform:translateY(-3px)} .qcard .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--grey);margin-bottom:10px} .qcard b{display:block;font-family:var(--fc);font-size:clamp(17px,1.8vw,22px); font-weight:900;color:var(--deep);word-break:break-word} .qcard i{display:block;font-style:normal;font-size:13px;color:var(--grey);margin-top:8px} /* flash messages */ .alert{display:block;padding:16px 20px;margin-bottom:26px;border-left:4px solid} .alert b{display:block;font-family:var(--fc);font-size:15px;font-weight:900;margin-bottom:3px} .alert span{font-size:14px} .alert.ok{background:#EEF6EF;border-color:#2E7D4F;color:#1E5233} .alert.bad{background:#FDEEEE;border-color:#C0392B;color:#8E2A20} /* form labels + required marks */ .fld label{display:block;font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--grey);margin-bottom:8px} .fld label span{color:var(--brass)} .formnote{margin:14px 0 0;font-size:12.5px;color:var(--grey)} .formnote span{color:var(--brass)} /* honeypot — must stay invisible but focusable-off */ .hp{position:absolute!important;left:-9999px!important;width:1px!important; height:1px!important;opacity:0!important;pointer-events:none} /* map */ .gmap{margin-top:26px;border:1px solid var(--line);line-height:0} .gmap iframe{display:block;filter:grayscale(.35) contrast(1.05);transition:filter .5s ease} .gmap:hover iframe{filter:none} /* orange block: the quick-cards need to read on brass */ /* dark-section variant, mirroring the .on-brass block below. index.php's #strength uses .qgrid on a navy background; without this the cards keep their default white fill and punch holes in the section. */ .on-dark .qgrid{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)} .on-dark .qcard{background:var(--deep)} .on-dark .qcard:hover{background:rgba(255,255,255,.05)} .on-dark .qcard .k{color:var(--brass2)} .on-dark .qcard b{color:#fff} .on-dark .qcard i{color:rgba(255,255,255,.82)} .on-brass .qgrid{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.4)} .on-brass .qcard{background:var(--brass)} .on-brass .qcard:hover{background:var(--brass2)} .on-brass .qcard .k{color:rgba(255,255,255,.85)} .on-brass .qcard b{color:#fff} .on-brass .qcard i{color:rgba(255,255,255,.9)} /* centred CTA block */ #cta .eyebrow{display:inline-flex} /* ================= PROJECTS PAGE ================= */ /* category tag on the image */ .show .im .tag{position:absolute;top:0;left:0;z-index:2;background:var(--brass); color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;padding:7px 13px} /* second meta row under the caption bar */ .meta2{display:flex;justify-content:space-between;gap:10px;padding:11px 15px; border:1px solid var(--line);border-top:0;font-size:12px;color:var(--grey); letter-spacing:.04em} .show .lb b{font-size:14.5px} /* On the projects grid the caption bar sits INSIDE .im so it anchors to the image, not the whole card — otherwise it covers the .meta2 location row. Scale only the on hover so the caption text stays crisp. */ #grid .show:hover .im{transform:none} #grid .meta2 span:only-child{margin-right:auto} .empty{display:none;text-align:center;color:var(--grey);padding:50px 0;font-size:15px} /* ---- lightbox ---- */ .lbx{position:fixed;inset:0;z-index:200;background:rgba(10,18,44,.94); display:none;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px)} .lbx.on{display:flex} .lbx-in{display:grid;gap:0;max-width:1120px;width:100%;max-height:88vh; background:var(--white);overflow:auto} @media(min-width:900px){.lbx-in{grid-template-columns:1.5fr 1fr}} .lbx-in img{width:100%;height:100%;max-height:88vh;object-fit:cover;display:block} .lbx-info{padding:clamp(20px,2.4vw,34px)} .lbx-info b{display:block;font-family:var(--fc);font-size:clamp(19px,2.2vw,27px); font-weight:900;color:var(--deep);line-height:1.15} .lbx-info p{margin:14px 0 20px;font-size:14.5px;color:var(--grey);line-height:1.7} .lbx-meta{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} @media(min-width:520px){.lbx-meta{grid-template-columns:1fr 1fr}} .lbx-meta div{background:var(--white);padding:13px 15px} .lbx-meta span{display:block;font-size:10px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--grey);margin-bottom:5px} .lbx-meta i{font-style:normal;font-size:14px;color:var(--deep);font-weight:700} .lbx-x,.lbx-nav{position:absolute;background:rgba(255,255,255,.12);border:0; color:#fff;cursor:pointer;line-height:1;transition:background .25s ease} .lbx-x:hover,.lbx-nav:hover{background:var(--brass)} .lbx-x{top:16px;right:16px;width:44px;height:44px;font-size:28px} .lbx-nav{top:50%;transform:translateY(-50%);width:46px;height:66px;font-size:30px} .lbx-nav.prev{left:10px} .lbx-nav.next{right:10px} @media(max-width:899px){ .lbx-nav{top:auto;bottom:10px;transform:none;height:44px} .lbx-nav.prev{left:10px} .lbx-nav.next{left:64px;right:auto} } /* load more */ .more{margin-top:36px;text-align:center} .more span{display:block;margin-top:14px;font-size:12.5px;color:var(--grey); letter-spacing:.06em} /* ---- category filter tabs ---- */ .tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0} .tab{ font-family:var(--f);font-size:12px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--grey); background:transparent;border:1px solid var(--line);border-radius:0; padding:12px 20px;cursor:pointer;appearance:none;-webkit-appearance:none; position:relative;overflow:hidden; transition:color .28s ease,border-color .28s ease,background .28s ease} .tab::after{content:"";position:absolute;inset:0;background:var(--deep); transform:translateY(101%);transition:transform .38s var(--ease);z-index:-1} .tab:hover{color:var(--deep);border-color:var(--deep)} .tab[aria-selected="true"]{color:#fff;background:var(--deep);border-color:var(--deep)} .tab[aria-selected="true"]::after{transform:none} .tab:focus-visible{outline:2px solid var(--brass);outline-offset:2px} @media(max-width:600px){ .tabs{gap:6px} .tab{padding:10px 14px;font-size:11px;letter-spacing:.08em} } /* home page contact CTA (replaces the duplicate form) */ .ctaband{display:grid;gap:34px} @media(min-width:940px){.ctaband{grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}} .ctabtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .ctaband .tb{background:var(--white)} .ctaband .tb a{color:var(--deep);font-weight:700} .ctaband .tb a:hover{color:var(--brass)} /* ================= PRELOADER ================= */ .pre{position:fixed;inset:0;z-index:9999;background:var(--white); display:flex;align-items:center;justify-content:center; transition:opacity .6s ease,visibility .6s} .pre.done{opacity:0;visibility:hidden} .pre-in{text-align:center;padding:20px} /* the real logo: fades up, breathes gently while loading */ .pre-logo{width:132px;height:auto;margin:0 auto;display:block; opacity:0;transform:translateY(10px) scale(.96); animation:preIn .8s cubic-bezier(.22,.9,.24,1) forwards, preBreathe 2.6s ease-in-out 1s infinite} @keyframes preIn{to{opacity:1;transform:none}} @keyframes preBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} } /* progress line */ .pre-bar{width:150px;height:2px;background:var(--line);margin:26px auto 0; overflow:hidden;opacity:0;animation:preIn .6s ease .45s forwards} .pre-bar i{display:block;height:100%;width:0;background:var(--brass); transition:width .35s ease} @media(prefers-reduced-motion:reduce){ .pre-logo,.pre-bar{animation:none;opacity:1;transform:none} } /* logo watermark over the video band */ .band-logo{position:absolute;top:clamp(16px,2.4vw,32px);right:clamp(16px,3vw,48px); z-index:3;width:clamp(66px,7vw,104px);height:auto; opacity:0;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35)); animation:bandLogoIn .9s cubic-bezier(.22,.9,.24,1) .5s forwards} @keyframes bandLogoIn{to{opacity:.92}} @media(prefers-reduced-motion:reduce){.band-logo{animation:none;opacity:.92}} /* ---- Dubai map (Leaflet) ---- */ .dxb{position:relative} #dxbMap{width:100%;height:clamp(320px,38vw,460px); border:1px solid rgba(255,255,255,.45);background:#EDEDED;z-index:1} .leaflet-container{font-family:var(--f)} /* numbered project markers */ .mk-wrap{background:none;border:0} .mk{display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%; background:var(--deep);color:#fff; font-family:var(--fc);font-size:14px;font-weight:900; border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.3); transition:transform .3s var(--ease)} .mk-wrap:hover .mk{transform:scale(1.15)} .mk-office{background:var(--brass);font-size:11px;color:var(--deep)} /* popup styling to match the site */ .leaflet-popup-content-wrapper{border-radius:0;padding:0; box-shadow:0 8px 26px rgba(23,39,92,.25)} .leaflet-popup-content{margin:0;padding:14px 18px;font-family:var(--f)} .leaflet-popup-content b{display:block;font-family:var(--fc);font-size:14px; font-weight:900;color:var(--deep);letter-spacing:.04em} .leaflet-popup-content span{display:block;margin-top:5px;font-size:13px;color:var(--grey)} .leaflet-popup-content u{display:block;text-decoration:none;margin-top:8px; font-family:var(--fc);font-size:13px;font-weight:900;color:var(--brass); letter-spacing:.06em;text-transform:uppercase} .leaflet-popup-tip{box-shadow:none} .leaflet-control-attribution{font-size:10px} /* ================= PRELOADER ================= */ .pre{position:fixed;inset:0;z-index:9999;background:var(--white); display:flex;align-items:center;justify-content:center; transition:opacity .6s ease,visibility .6s} .pre.done{opacity:0;visibility:hidden} .pre-in{text-align:center;padding:20px} /* the real logo: fades up, breathes gently while loading */ .pre-logo{width:132px;height:auto;margin:0 auto;display:block; opacity:0;transform:translateY(10px) scale(.96); animation:preIn .8s cubic-bezier(.22,.9,.24,1) forwards, preBreathe 2.6s ease-in-out 1s infinite} @keyframes preIn{to{opacity:1;transform:none}} @keyframes preBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} } /* progress line */ .pre-bar{width:150px;height:2px;background:var(--line);margin:26px auto 0; overflow:hidden;opacity:0;animation:preIn .6s ease .45s forwards} .pre-bar i{display:block;height:100%;width:0;background:var(--brass); transition:width .35s ease} @media(prefers-reduced-motion:reduce){ .pre-logo,.pre-bar{animation:none;opacity:1;transform:none} } /* logo watermark over the video band */ .band-logo{position:absolute;top:clamp(16px,2.4vw,32px);right:clamp(16px,3vw,48px); z-index:3;width:clamp(66px,7vw,104px);height:auto; opacity:0;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35)); animation:bandLogoIn .9s cubic-bezier(.22,.9,.24,1) .5s forwards} @keyframes bandLogoIn{to{opacity:.92}} @media(prefers-reduced-motion:reduce){.band-logo{animation:none;opacity:.92}} /* ---- Dubai map ---- */ .dxb{position:relative} .dxb svg{width:100%;height:auto;display:block;overflow:visible} .dxb-g{cursor:pointer} .dxb-g .pin{transition:transform .4s var(--ease)} .dxb-g:hover .pin,.dxb-g.act .pin{transform:translateY(-6px) scale(1.08)} .dxb .pin-body{fill:var(--deep)} .dxb-g.office .pin-body{fill:#0F1F49} .dxb .pin-num{fill:#fff;font-family:var(--fc);font-size:13px;font-weight:900; text-anchor:middle;pointer-events:none} .dxb-lbl{fill:#fff;font-family:var(--fc);font-size:13px;font-weight:900; letter-spacing:.05em;pointer-events:none; paint-order:stroke;stroke:rgba(200,120,20,.5);stroke-width:3px} .dxb-road{fill:rgba(255,255,255,.7);font-family:var(--f);font-size:11px; font-weight:700;letter-spacing:.12em;text-transform:uppercase} .dxb-pop{position:absolute;pointer-events:none;background:var(--deep);color:#fff; padding:12px 16px;min-width:180px;opacity:0;transform:translateY(6px); transition:opacity .28s ease,transform .28s var(--ease);z-index:5} .dxb-pop.on{opacity:1;transform:none} .dxb-pop b{display:block;font-family:var(--fc);font-size:13px;font-weight:900; letter-spacing:.09em;text-transform:uppercase;margin-bottom:5px} .dxb-pop span{font-size:12.5px;color:#BFCCE8;display:block} .dxb-pop u{display:block;text-decoration:none;font-family:var(--fc);font-size:24px; font-weight:900;color:var(--brass);line-height:1.15;margin-top:5px} @media(max-width:760px){ .dxb-pop{display:none} .dxb-lbl{font-size:16px} } /* rotating line under the preloader bar */ .pre-line{position:relative;height:16px;margin-top:14px; opacity:0;animation:preIn .6s ease .6s forwards} .pre-line span{position:absolute;inset:0; font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase; color:var(--grey);white-space:nowrap; opacity:0;transform:translateY(6px); transition:opacity .35s ease,transform .45s var(--ease)} .pre-line span.on{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .pre-line{animation:none;opacity:1} .pre-line span{transition:none} } /* ---------- vision & mission ---------- */ .vm{display:grid;gap:20px;margin-top:22px} @media(min-width:860px){.vm{grid-template-columns:1fr 1fr;gap:24px}} .vmcard{background:var(--white);border:1px solid var(--line); border-top:3px solid var(--brass);padding:clamp(22px,3vw,34px)} .vmk{display:block;font-family:var(--fc);font-size:clamp(22px,2.4vw,30px); font-weight:700;letter-spacing:.01em;line-height:1.18;text-transform:none; color:var(--deep);margin:0 0 10px} .vmstrap{display:block;font-family:var(--fc);font-size:clamp(14px,1.5vw,16px); font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase; color:var(--deep);margin-bottom:12px} .vmcard p{margin:0;color:var(--grey)} /* ---------- team portraits (about.php: #chairman and #leadership) ---------- */ /* Own class rather than .ph, which is already taken by the .lead block above. The photo block is emitted only when the file exists on disk, so none of this applies to a card that has no portrait. */ .tph{border-radius:50%;overflow:hidden;flex:none; background:linear-gradient(150deg,#E4E8E5,#CDD4D0); border:1px solid rgba(255,255,255,.14)} .tph img{width:100%;height:100%;object-fit:cover; object-position:center top;display:block} #leadership .qcard .tph{width:96px;height:96px;margin:0 0 16px} @media(min-width:700px){ #leadership .qcard .tph{width:112px;height:112px} } /* chairman's portrait — larger than the leadership thumbnails, set beside the quote on wide screens and stacked above it on narrow ones */ #chairman .vmcard.chair .chair-ph{width:118px;height:118px;margin:0 0 18px} @media(min-width:820px){ /* two columns, ONE row. The text is wrapped in .chair-body so the photo has a single sibling to sit beside -- an earlier version spanned the photo across 20 implicit rows, which stretched the card to a huge empty box. */ #chairman .vmcard.chair{display:grid;grid-template-columns:150px 1fr; gap:30px;align-items:start} #chairman .vmcard.chair .chair-ph{width:150px;height:150px;margin:0} } /* ---------- about.php grid column counts ---------- .qgrid defaults to repeat(auto-fit,minmax(220px,1fr)), which on a wide viewport yields five columns. That orphans the sixth Strength card onto a row of its own and squeezes the long leadership and resources copy into narrow ribbons. These sections get explicit counts instead. */ @media(min-width:640px){ #strength .qgrid, #leadership .qgrid, #resources .qgrid, #credentials .qgrid{grid-template-columns:repeat(2,1fr)} } @media(min-width:1000px){ /* six cards resolve to a clean 3 x 2 */ #strength .qgrid{grid-template-columns:repeat(3,1fr)} /* four short cards, so four columns still read comfortably */ #credentials .qgrid{grid-template-columns:repeat(4,1fr)} /* leadership bios and resource breakdowns are long-form: two wide columns stay readable where four would give roughly 280px of measure each */ #leadership .qgrid, #resources .qgrid{grid-template-columns:repeat(2,1fr)} } /* the chairman's card runs full width, so cap the measure or the quote sets in very long lines across a 1240px container */ #chairman .vmcard p{max-width:80ch} /* Returning visitor within the same session: the head script has already set .pre-seen, so the preloader never paints at all. display:none rather than opacity so it takes no space and cannot intercept clicks. */ html.pre-seen .pre{display:none} /* Leaflet 1.9 renders a Ukrainian flag SVG inside the attribution control. map.attributionControl.setPrefix('') in footer.php already removes it; this is a backstop in case a future Leaflet version reintroduces it elsewhere. The OpenStreetMap and CARTO credits are a licence condition and must stay. */ .leaflet-attribution-flag{display:none!important}