/* Generated by scripts/build_css_bundle.py. Do not edit directly. */ /* source: style.css */ :root{--primary:#0758d8;--secondary:#042a5f;--accent:#00a6df;--dark:#061a34;--text:#092044;--muted:#66758c;--line:#dce5f2;--soft:#f4f8fd;--white:#fff;--shadow:0 16px 40px rgba(6,27,54,.10);--radius:18px;--max:1180px;--font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--site-header-height,74px) + 16px)}*{box-sizing:border-box}body{margin:0;font-family:var(--font);color:var(--text);background:#fff;line-height:1.55}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}.section{padding:76px 0}.section-sm{padding:46px 0}.eyebrow{color:var(--primary);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}h1,h2,h3,h4{margin:0 0 16px;line-height:1.08;letter-spacing:-.035em}h1{font-size:clamp(42px,5vw,74px)}h2{font-size:clamp(30px,3vw,48px)}h3{font-size:24px}p{margin:0 0 18px}.text-muted{color:var(--muted)}.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(220,229,242,.75)}.navbar{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}.logo{display:flex;align-items:center;gap:12px;min-width:210px}.logo-mark{width:54px;height:54px;border-radius:50%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.15) 0 6px,transparent 6px 12px),linear-gradient(135deg,#00aeef,#0637b7 65%,#4227d8);border:3px solid rgba(0,166,223,.18);box-shadow:inset 0 0 0 4px rgba(255,255,255,.7)}.logo strong{display:block;font-size:31px;line-height:.9;letter-spacing:.13em;color:var(--secondary)}.logo span span{display:block;font-size:11px;font-weight:700;color:var(--secondary)}.nav-links{display:flex;align-items:center;gap:26px;font-weight:750;font-size:14px}.nav-links a{position:relative;padding:31px 0;color:#071f42}.nav-links a.active::after,.nav-links a:hover::after{content:"";position:absolute;bottom:19px;left:0;right:0;height:3px;background:var(--primary);border-radius:99px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 25px;border-radius:7px;border:1px solid transparent;font-weight:850;cursor:pointer;transition:.2s ease}.btn-primary{color:white;background:linear-gradient(135deg,var(--primary),#00389d);box-shadow:0 10px 18px rgba(7,88,216,.25)}.btn-outline{border-color:rgba(7,88,216,.45);color:var(--primary);background:rgba(255,255,255,.88)}.btn-light{background:white;color:var(--primary)}.mobile-toggle{display:none;font-size:28px;background:transparent;border:0;color:var(--secondary)}.hero{min-height:520px;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.9) 42%,rgba(255,255,255,.18) 62%),linear-gradient(135deg,#d9e8f7,#9ab7d7)}.hero.dark{min-height:360px;background:linear-gradient(90deg,rgba(4,18,37,.92),rgba(4,18,37,.72) 43%,rgba(4,18,37,.30)),linear-gradient(135deg,#0a2750,#1d70c7);color:white}.hero-content{max-width:650px;padding:80px 0 120px}.hero p{font-size:18px;max-width:640px}.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}.info-strip{width:min(var(--max),calc(100% - 48px));margin:-58px auto 0;position:relative;z-index:2;background:linear-gradient(135deg,#062452,#074cb9);color:white;border-radius:12px;padding:22px 30px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--shadow)}.info-item{display:flex;align-items:center;gap:16px;border-right:1px solid rgba(255,255,255,.33);padding-inline:12px}.info-item:last-child{border-right:0}.info-icon,.icon-round{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:rgba(3,105,255,.75);display:grid;place-items:center;color:white;font-size:22px;font-weight:900}.info-item small{display:block;color:#d9e8ff;font-weight:700}.info-item strong{display:block;font-size:19px;line-height:1.2}.grid{display:grid;gap:22px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-5{grid-template-columns:repeat(5,1fr)}.grid-6{grid-template-columns:repeat(6,1fr)}.card{background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px rgba(6,27,54,.06);padding:26px}.icon-card{text-align:center;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center}.icon{font-size:42px;color:var(--primary);line-height:1;margin-bottom:16px}.project-card{padding:0;overflow:hidden}.project-thumb{height:160px;background:linear-gradient(135deg,#0b54cc,#a8c9e9)}.project-body{padding:20px}.logo-tile{border:1px solid var(--line);border-radius:10px;min-height:90px;display:grid;place-items:center;background:white;font-size:24px;font-weight:800;color:#4b5563;text-align:center}.cert{min-height:100px;display:grid;place-items:center;text-align:center;font-weight:900;font-size:24px}.blue{color:var(--primary)}.green{color:#16a34a}.red{color:#dc2626}.cta{position:relative;overflow:hidden;background:linear-gradient(135deg,#073b95,#0058d8);color:white;padding:58px 0}.cta .container{display:flex;justify-content:space-between;align-items:center;gap:30px}.footer{background:linear-gradient(135deg,#041225,#061c39);color:white;padding:72px 0 24px}.footer-grid{display:grid;grid-template-columns:1.25fr 1fr .8fr .9fr 1fr;gap:44px}.footer h4{color:white;font-size:14px;letter-spacing:.05em;text-transform:uppercase}.footer p,.footer li{color:#c6d5e9;font-size:14px}.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.social{display:flex;gap:10px;margin-top:22px}.social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:white}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:56px;padding-top:24px;display:flex;justify-content:space-between;color:#c6d5e9;font-size:13px}.map-dots{min-height:150px;background:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 2px);background-size:12px 12px;mask-image:radial-gradient(ellipse at center,#000 50%,transparent 72%)}.split{display:grid;grid-template-columns:.9fr 1.5fr;gap:32px;align-items:center}.placeholder-img{min-height:250px;border-radius:12px;background:linear-gradient(135deg,#d9e8f7,#9abde0)}.tabs{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0}.tab{border:1px solid var(--line);padding:16px 24px;border-radius:8px;background:white;font-weight:800;color:var(--text)}.tab.active{background:var(--primary);color:white}.table-card{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:800px}th,td{padding:18px 20px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}.badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#e8f0ff;color:var(--primary)}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:15px 16px;font:inherit;color:var(--text)}textarea{min-height:150px}.messages{margin-bottom:24px}.message{padding:14px 18px;border-radius:8px;background:#e9f8ee;color:#12803b;margin-bottom:8px}.admin-layout{display:grid;grid-template-columns:255px 1fr;min-height:100vh;background:#f7f9fc}.sidebar{background:linear-gradient(180deg,#061a34,#041225);color:white;padding:26px 18px}.side-nav{display:grid;gap:8px}.side-nav a{padding:14px 16px;border-radius:9px;color:#dceaff;font-weight:800}.side-nav a.active,.side-nav a:hover{background:var(--primary);color:white}.admin-main{padding:26px 34px 60px}.admin-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}@media(max-width:980px){.container{width:min(100% - 30px,var(--max))}.nav-links,.site-header .btn{display:none}.mobile-toggle{display:block}.info-strip,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6,.split,.footer-grid,.admin-layout{grid-template-columns:1fr}.info-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding:12px 0}.footer-bottom,.cta .container{flex-direction:column;display:flex;align-items:flex-start}} .dynamic-section img { max-height: 420px; object-fit: cover; width: 100%; } .logo-tile img { max-height: 58px; width: auto; margin-inline: auto; } .project-thumb { object-fit: cover; } .rich-text, .dynamic-section { font-size: 16px; } .service-meta { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 18px; } details.card summary::-webkit-details-marker { display:none; } details.card[open] { border-color: var(--primary); } .project-body .service-meta { margin: 0 0 12px; } .project-card p:last-child { margin-bottom: 0; } .hero .breadcrumb { color: rgba(255,255,255,.78); font-weight: 700; margin-bottom: 16px; } .badge.red { background:#ffecec; color:#c82020; } .cert .btn { font-size: 13px; min-height: 34px; padding: 0 14px; } .table-card .btn { margin: 2px; } @media(max-width: 760px) { .card[style*="grid-template-columns:240px"] { display:block !important; } } .sidebar { overflow-y: auto; max-height: 100vh; } .admin-main .card strong { color: var(--primary); } .page-width-narrow { max-width: 860px; } .page-width-wide { max-width: 1320px; } .breadcrumb { font-size: 13px; font-weight: 700; margin-bottom: 18px; color: rgba(255,255,255,.78); } .form-error, .errorlist { color: #dc2626; font-size: 13px; margin: 6px 0 0; padding-left: 18px; } @media(max-width: 980px) { .admin-top { flex-direction: column; align-items: flex-start; gap: 14px; } .admin-main { padding: 20px; } .sidebar { position: relative; height: auto; max-height: none; } } .language-links { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; } .language-links a { min-height: 34px; padding: 7px 10px; border-radius: 6px; font-size: 13px; font-weight: 900; color: var(--text); } .language-links a.active, .language-links a:hover { background: var(--primary); color: #fff; } html[dir="rtl"] .navbar { flex-direction: row-reverse; } html[dir="rtl"] .nav-links { flex-direction: row-reverse; } html[dir="rtl"] .hero-content { text-align: right; } html[dir="rtl"] .hero-actions { justify-content: flex-start; } /* Upgrade 15 multilingual UI polish */ .language-links { white-space: nowrap; } .language-links a { text-decoration: none; } html[lang="zh-hans"] .hero h1 { line-height: 1.16; } html[lang="ar"] .hero h1 { line-height: 1.22; } input::placeholder, textarea::placeholder { opacity: .75; } select { cursor: pointer; } .form-control { width: 100%; } @media(max-width: 720px) { .language-links a { padding: 7px 8px; font-size: 12px; } .hero h1 { font-size: clamp(36px, 10vw, 64px); } } /* Upgrade 25 — Final SESCCO homepage hero direction */ .hero-home { min-height: 705px; position: relative; overflow: hidden; display: flex; align-items: stretch; background: linear-gradient(90deg, #ffffff 0%, #ffffff 42%, #dcebf8 42%, #b7cde4 100%); } .hero-home::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 20%, rgba(255,255,255,.34), transparent 22%), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 44%, rgba(255,255,255,0) 70%); pointer-events: none; z-index: 1; } .hero-visual-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero-visual-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 58.5%; background-size: cover; background-repeat: no-repeat; background-position: center right; filter: saturate(.98) contrast(.98) brightness(1.03); } .hero-visual-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.94) 10%, rgba(225,238,250,.76) 24%, rgba(210,228,245,.54) 42%, rgba(186,209,231,.34) 64%, rgba(169,196,222,.24) 100%), linear-gradient(180deg, rgba(245,250,255,.26), rgba(245,250,255,.05)); } .hero-visual-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 74% 54%, rgba(7,32,70,.12), transparent 32%), linear-gradient(90deg, rgba(219,233,248,.20), rgba(126,161,196,.22)); mix-blend-mode: normal; } .hero-inner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; min-height: 705px; position: relative; z-index: 2; } .hero-home .hero-content { max-width: 700px; padding: 96px 0 138px; position: relative; z-index: 3; } .hero-kicker { display: inline-flex; margin-bottom: 18px; font-size: 13px; font-weight: 950; line-height: 1; color: var(--primary); text-transform: uppercase; letter-spacing: .14em; } .hero-home h1 { font-size: clamp(54px, 5.4vw, 94px); letter-spacing: -.056em; line-height: .975; max-width: 730px; margin-bottom: 24px; } .hero-home p { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.72; color: #183154; max-width: 660px; } .hero-side-panel { min-height: 100%; align-self: stretch; position: relative; } .hero-side-grid { position: absolute; inset: 0 -80px 0 -30px; background-image: linear-gradient(rgba(255,255,255,.20) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.20) 1px, transparent 1px); background-size: 28px 28px; opacity: .48; mask-image: linear-gradient(90deg, transparent, #000 22%, #000 84%, transparent); } .hero-side-glow { position: absolute; right: 2%; bottom: 12%; width: 42%; aspect-ratio: 1; border-radius: 999px; background: rgba(0, 174, 239, .16); filter: blur(36px); } @media (max-width: 1180px) { .hero-inner { grid-template-columns: 1fr .84fr; gap: 24px; } .hero-visual-photo { width: 55%; } } @media (max-width: 980px) { .hero-home { min-height: auto; background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #dcebf8 58%, #b7cde4 100%); } .hero-visual-photo { position: relative; width: min(100% - 28px, 920px); height: clamp(250px, 52vw, 380px); margin: 28px auto 0; border-radius: 26px; overflow: hidden; background-position: center center; box-shadow: 0 18px 54px rgba(6, 27, 54, .10); } .hero-visual-photo::before { background: linear-gradient(180deg, rgba(232,243,252,.52), rgba(212,229,245,.32)), linear-gradient(90deg, rgba(255,255,255,.48), rgba(255,255,255,.08)); } .hero-visual-photo::after { background: linear-gradient(90deg, rgba(7,32,70,.08), rgba(7,32,70,.12)); } .hero-inner { grid-template-columns: 1fr; min-height: auto; padding-top: 12px; padding-bottom: 48px; } .hero-home .hero-content { padding: 22px 0 6px; } .hero-side-panel { display: none; } } @media (max-width: 640px) { .hero-home h1 { font-size: clamp(40px, 14vw, 58px); } .hero-home p { font-size: 16px; } .hero-actions .btn { width: 100%; } } /* Upgrade 26 — Arabic typography safety for the hero */ html[lang="ar"] .hero-home h1 { font-size: clamp(46px, 4.75vw, 78px); } html[lang="ar"] .hero-home p { font-size: clamp(17px, 1.25vw, 20px); } @media (max-width: 640px) { html[lang="ar"] .hero-home h1 { font-size: clamp(38px, 12.5vw, 54px); } } /* Upgrade 27 — Sitewide SESCCO logo integration */ .site-logo { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; min-width: 210px; } .site-logo img { display: block; width: clamp(176px, 15vw, 252px); height: auto; max-height: 62px; object-fit: contain; } .navbar .site-logo, .header .site-logo { margin-right: clamp(18px, 3vw, 48px); } html[dir="rtl"] .navbar .site-logo, html[dir="rtl"] .header .site-logo { margin-right: 0; margin-left: clamp(18px, 3vw, 48px); } .footer .site-logo img, .site-footer .site-logo img { width: 210px; max-height: 70px; } @media (max-width: 980px) { .site-logo { min-width: 164px; } .site-logo img { width: 170px; max-height: 54px; } } @media (max-width: 640px) { .site-logo img { width: 148px; } } /* Upgrade 27 — Final homepage hero visibility polish */ .hero-visual-photo { filter: saturate(1.02) contrast(1.00) brightness(1.02); } .hero-visual-photo::before { background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.90) 10%, rgba(225,238,250,.68) 24%, rgba(210,228,245,.44) 42%, rgba(186,209,231,.25) 64%, rgba(169,196,222,.16) 100%), linear-gradient(180deg, rgba(245,250,255,.20), rgba(245,250,255,.02)); } .hero-visual-photo::after { background: radial-gradient(circle at 74% 54%, rgba(7,32,70,.10), transparent 32%), linear-gradient(90deg, rgba(219,233,248,.12), rgba(126,161,196,.16)); } html[dir="rtl"] .hero-visual-photo::before { background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.90) 10%, rgba(225,238,250,.68) 24%, rgba(210,228,245,.44) 42%, rgba(186,209,231,.25) 64%, rgba(169,196,222,.16) 100%), linear-gradient(180deg, rgba(245,250,255,.20), rgba(245,250,255,.02)); } /* Upgrade 28 — Production logo consistency */ .site-logo { display: inline-flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; text-decoration: none; min-width: clamp(210px, 18vw, 310px); overflow: visible; } .site-logo img { display: block; width: clamp(205px, 17vw, 292px); height: auto; max-height: 74px; object-fit: contain; object-position: left center; } html[dir="rtl"] .site-logo img { object-position: right center; } .navbar .site-logo, .header .site-logo, .site-header .site-logo { margin-right: clamp(22px, 3.2vw, 54px); } html[dir="rtl"] .navbar .site-logo, html[dir="rtl"] .header .site-logo, html[dir="rtl"] .site-header .site-logo { margin-right: 0; margin-left: clamp(22px, 3.2vw, 54px); } .footer .site-logo img, .site-footer .site-logo img { width: 235px; max-height: 82px; } @media (max-width: 1180px) { .site-logo { min-width: 185px; } .site-logo img { width: 188px; max-height: 62px; } } @media (max-width: 760px) { .site-logo { min-width: 154px; } .site-logo img { width: 158px; max-height: 54px; } } /* Upgrade 28 — Production home highlight polish */ .highlight-card .icon, .feature-card .icon, .service-card .icon { color: var(--primary); } .highlights-grid .card h3, .feature-grid .card h3 { letter-spacing: -.025em; } .highlights-grid .card p, .feature-grid .card p { color: #334765; } /* Upgrade 30 — full SESCCO logo lockup */ .site-logo-lockup { display: inline-flex; align-items: center; gap: 12px; min-width: 245px; flex: 0 0 auto; text-decoration: none; color: var(--dark); overflow: visible; } .site-logo-lockup .site-logo-mark { width: 58px; height: 58px; flex: 0 0 58px; display: inline-grid; place-items: center; } .site-logo-lockup .site-logo-mark img { width: 58px; height: 58px; object-fit: contain; display: block; } .site-logo-lockup .site-logo-text { display: grid; gap: 2px; line-height: 1; } .site-logo-lockup .site-logo-text strong { font-size: 32px; line-height: .86; letter-spacing: .28em; color: #082452; font-weight: 900; } .site-logo-lockup .site-logo-text small { font-size: 12px; line-height: 1.15; color: #082452; font-weight: 850; letter-spacing: -.02em; } .navbar .site-logo-lockup, .header .site-logo-lockup, .site-header .site-logo-lockup { margin-right: clamp(26px, 3.4vw, 58px); } html[dir="rtl"] .navbar .site-logo-lockup, html[dir="rtl"] .header .site-logo-lockup, html[dir="rtl"] .site-header .site-logo-lockup { margin-right: 0; margin-left: clamp(26px, 3.4vw, 58px); } html[dir="rtl"] .site-logo-lockup { direction: ltr; } .footer .site-logo-lockup, .site-footer .site-logo-lockup { min-width: 260px; } @media (max-width: 1180px) { .site-logo-lockup { min-width: 205px; gap: 10px; } .site-logo-lockup .site-logo-mark, .site-logo-lockup .site-logo-mark img { width: 50px; height: 50px; flex-basis: 50px; } .site-logo-lockup .site-logo-text strong { font-size: 27px; } .site-logo-lockup .site-logo-text small { font-size: 10.5px; } } @media (max-width: 760px) { .site-logo-lockup { min-width: 152px; gap: 8px; } .site-logo-lockup .site-logo-mark, .site-logo-lockup .site-logo-mark img { width: 42px; height: 42px; flex-basis: 42px; } .site-logo-lockup .site-logo-text strong { font-size: 20px; letter-spacing: .20em; } .site-logo-lockup .site-logo-text small { font-size: 8px; } } /* Career module — replaces the old public downloads page in the main navigation */ .career-page .hero { min-height: 560px; } .career-hero, .career-detail-hero, .career-form-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 75% 32%, rgba(0,166,223,.22), transparent 30%), linear-gradient(135deg, #041225 0%, #06224a 46%, #0758d8 100%); } .career-hero::after, .career-detail-hero::after, .career-form-hero::after { content: ""; position: absolute; inset: auto -80px -160px auto; width: 520px; height: 520px; border-radius: 999px; background: rgba(255,255,255,.08); pointer-events: none; } .career-hero-content, .career-detail-hero .hero-content, .career-form-hero .hero-content { position: relative; z-index: 2; max-width: 820px; } .btn-outline.light { color: #fff; border-color: rgba(255,255,255,.44); background: rgba(255,255,255,.08); } .btn-outline.light:hover { background: #fff; color: var(--primary); } .career-section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 26px; } .career-section-head p { max-width: 820px; } .career-count-card { min-width: 158px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #fff, #f4f8fd); box-shadow: 0 16px 34px rgba(6,27,54,.07); text-align: center; } .career-count-card strong { display: block; font-size: 42px; line-height: 1; color: var(--primary); } .career-count-card span { display: block; margin-top: 6px; font-weight: 900; color: var(--muted); } .career-filter { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(170px, .8fr) minmax(160px, .75fr) minmax(150px, .65fr) auto; gap: 12px; align-items: center; padding: 14px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 14px 30px rgba(6,27,54,.05); } .career-filter input, .career-filter select { min-height: 52px; border-radius: 12px; background: #f8fbff; } .career-filter .btn { min-height: 52px; } .career-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .career-list-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } .career-job-card { display: flex; flex-direction: column; gap: 16px; min-height: 100%; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98)); box-shadow: 0 14px 34px rgba(6,27,54,.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .career-job-card:hover { transform: translateY(-3px); border-color: rgba(7,88,216,.24); box-shadow: 0 20px 44px rgba(6,27,54,.10); } .career-job-card.featured { border-color: rgba(7,88,216,.34); background: radial-gradient(circle at 100% 0%, rgba(7,88,216,.09), transparent 34%), linear-gradient(180deg, #fff, #f8fbff); } .career-job-top, .career-card-footer { display: flex; justify-content: space-between; gap: 14px; align-items: center; } .career-job-card h3 { margin: 0; font-size: 24px; line-height: 1.18; } .career-job-card h3 a { color: var(--text); } .career-job-card p { margin: 0; color: var(--muted); line-height: 1.72; } .career-pill { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: #eaf7ff; color: #006ca8; font-size: 12px; font-weight: 900; } .career-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; } .career-meta-grid span { min-height: 42px; display: flex; align-items: center; padding: 10px 12px; border-radius: 12px; background: #f3f7fc; color: #263b59; font-size: 13px; font-weight: 800; } .career-deadline { color: var(--muted); font-size: 13px; font-weight: 800; } .career-empty { grid-column: 1 / -1; text-align: center; } .career-process-wrap { background: linear-gradient(180deg, #f7fbff, #fff); } .career-process { display: grid; grid-template-columns: .85fr 1.4fr; gap: 34px; align-items: start; } .career-process-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .career-step { min-height: 170px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(6,27,54,.05); } .career-step b { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; } .career-step strong, .career-step span { display: block; } .career-step strong { margin-bottom: 8px; font-size: 18px; color: var(--text); } .career-step span { color: var(--muted); line-height: 1.6; } .career-cta-card, .career-apply-strip { display: flex; justify-content: space-between; align-items: center; gap: 26px; padding: 32px; border-radius: 22px; background: radial-gradient(circle at 82% 20%, rgba(0,166,223,.20), transparent 26%), linear-gradient(135deg, #061a34, #0758d8); color: #fff; overflow: hidden; } .career-cta-card h2, .career-cta-card p, .career-apply-strip h2, .career-apply-strip p, .career-apply-strip .eyebrow { color: #fff; } .career-cta-card p { margin-bottom: 0; max-width: 720px; color: #dceaff; } .job-detail-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; } .job-summary-card { position: sticky; top: 100px; } .job-summary-card h3 { margin-top: 0; } .job-summary-card dl { display: grid; gap: 0; margin: 0 0 24px; } .job-summary-card dt, .job-summary-card dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); } .job-summary-card dt { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; } .job-summary-card dd { font-weight: 900; color: var(--text); } .btn.full { width: 100%; } .job-detail-content { display: grid; gap: 22px; } .job-content-block h2 { margin-top: 0; } .career-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .career-check-list li { position: relative; padding-left: 34px; line-height: 1.65; color: #243b5a; } .career-check-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e8f0ff; color: var(--primary); font-size: 12px; font-weight: 900; } .career-check-list.muted li::before { background: #edf8f2; color: #12803b; } .application-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 28px; align-items: start; } .application-help { position: sticky; top: 100px; } .compact-list { gap: 10px; } .career-application-form { padding: 30px; } .form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .form-field { display: grid; gap: 8px; margin-bottom: 18px; } .form-field label, .upload-box strong { font-size: 13px; font-weight: 900; color: var(--text); } .form-field .errorlist, .upload-box .errorlist, .consent-row + .errorlist { color: #dc2626; margin: 0; padding-left: 18px; font-size: 13px; } .career-upload-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 18px; } .upload-box { display: grid; gap: 10px; padding: 16px; border: 1px dashed rgba(7,88,216,.35); border-radius: 16px; background: #f8fbff; } .upload-box span { color: var(--muted); font-size: 12px; font-weight: 700; } .upload-box input[type="file"] { padding: 11px; background: #fff; } .consent-row { display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 14px; background: #f3f7fc; font-weight: 800; line-height: 1.5; } .consent-row input { width: auto; margin-top: 4px; } .form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; } .career-success-section { min-height: 70vh; display: grid; align-items: center; background: linear-gradient(180deg, #f7fbff, #fff); } .career-success-card { text-align: center; padding: 52px 40px; } .success-icon { width: 78px; height: 78px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 999px; background: var(--primary); color: #fff; font-size: 42px; font-weight: 900; } .hero-actions.centered { justify-content: center; } html[dir="rtl"] .career-check-list li { padding-left: 0; padding-right: 34px; } html[dir="rtl"] .career-check-list li::before { left: auto; right: 0; } html[dir="rtl"] .job-summary-card dt, html[dir="rtl"] .job-summary-card dd, html[dir="rtl"] .career-filter input, html[dir="rtl"] .career-filter select, html[dir="rtl"] .career-page textarea, html[dir="rtl"] .career-page input { text-align: right; } @media (max-width: 1180px) { .career-list-grid, .career-list-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .career-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .career-filter .btn { grid-column: 1 / -1; } } @media (max-width: 900px) { .career-section-head, .career-process, .job-detail-layout, .application-layout, .career-cta-card, .career-apply-strip { grid-template-columns: 1fr; display: grid; } .job-summary-card, .application-help { position: static; } .career-upload-grid, .form-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .career-page .hero { min-height: 470px; } .career-filter, .career-list-grid, .career-list-grid.compact, .career-process-steps { grid-template-columns: 1fr; } .career-job-card, .career-application-form, .career-success-card { padding: 22px; } .career-meta-grid, .career-card-footer, .career-job-top, .form-actions { grid-template-columns: 1fr; display: grid; justify-items: stretch; } .career-card-footer .btn, .form-actions .btn, .form-actions button { width: 100%; } } /* Career Upgrade 1 — CMS foundation sections */ .career-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 760px; margin-top: 34px; } .career-hero-stat { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.10); backdrop-filter: blur(10px); color: #fff; } .career-hero-stat span { font-size: 18px; } .career-hero-stat strong { font-size: 30px; line-height: 1; } .career-hero-stat small { color: #dceaff; font-weight: 800; } .compact-head { max-width: 880px; } .career-benefits-wrap { background: #fff; } .career-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .career-benefit-card { min-height: 220px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(7,88,216,.08), transparent 32%), linear-gradient(180deg, #fff, #f8fbff); box-shadow: 0 14px 34px rgba(6,27,54,.055); } .career-benefit-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 14px; background: #e8f0ff; color: var(--primary); font-weight: 900; } .career-benefit-card h3 { margin: 0 0 10px; font-size: 21px; } .career-benefit-card p { margin: 0; color: var(--muted); line-height: 1.7; } .career-cta-email, .success-job-line { display: inline-flex; margin-top: 14px; font-weight: 900; } .career-cta-email { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; } .application-help p { color: var(--muted); line-height: 1.7; } .application-help .eyebrow { margin-bottom: 10px; } @media (max-width: 1180px) { .career-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .career-hero-stats, .career-benefit-grid { grid-template-columns: 1fr; } .career-hero-stat, .career-benefit-card { padding: 20px; } } /* Career Upgrade 2: job posting CMS polish */ .career-pill.soft { background: #f2f6fb; color: #24425f; } .career-job-code { display: inline-flex; width: fit-content; padding: 6px 10px; border-radius: 10px; background: #eef5ff; color: #0758d8; font-size: 12px; font-weight: 900; letter-spacing: .02em; } .career-detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; } .career-detail-tags span { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); color: #e8f3ff; font-size: 13px; font-weight: 900; } .job-rich-text { color: #243b5a; line-height: 1.8; } .job-rich-text p:first-child { margin-top: 0; } .job-rich-text p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .career-detail-tags { gap: 8px; } .career-detail-tags span, .career-job-code { font-size: 11px; } } /* Career Upgrade 3 — public career pages UI polish */ .career-list-page { background: linear-gradient(180deg, #fff 0%, #f7fbff 36%, #fff 100%); } .career-page .hero { min-height: 520px; } .career-hero-grid, .career-detail-hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(340px, .72fr); gap: clamp(28px, 5vw, 76px); align-items: center; min-height: 520px; position: relative; z-index: 2; } .career-hero-copy, .career-detail-copy, .career-form-copy { padding: 86px 0 104px; } .career-hero-eyebrow { color: #bcd8ff; } .career-hero h1, .career-detail-hero h1, .career-form-hero h1 { max-width: 860px; letter-spacing: -.062em; } .career-hero p, .career-detail-hero p, .career-form-hero p { color: #e7f0ff; line-height: 1.72; } .career-hero-panel, .career-detail-quick-card { position: relative; z-index: 2; padding: 26px; border: 1px solid rgba(255,255,255,.18); border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); box-shadow: 0 34px 80px rgba(0,0,0,.22); backdrop-filter: blur(18px); color: #fff; } .career-panel-top { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.16); } .career-panel-top span, .career-panel-top small, .career-detail-quick-card span, .career-detail-quick-card dt { color: #cfe0f8; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; } .career-panel-top strong { grid-row: span 2; font-size: clamp(54px, 5vw, 78px); line-height: .86; letter-spacing: -.08em; } .career-hero-panel .career-hero-stats { grid-template-columns: 1fr; gap: 10px; margin-top: 0; max-width: none; } .career-hero-panel .career-hero-stat { grid-template-columns: auto 1fr; align-items: center; padding: 13px 14px; border-radius: 16px; } .career-hero-panel .career-hero-stat span { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.12); } .career-hero-panel .career-hero-stat strong { font-size: 22px; } .career-panel-flow { display: grid; gap: 10px; margin-top: 18px; } .career-panel-flow div, .application-progress div, .success-next-steps div { display: flex; align-items: center; gap: 12px; } .career-panel-flow b, .application-progress b, .success-next-steps b { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 999px; background: #fff; color: var(--primary); font-size: 12px; font-weight: 950; } .career-panel-flow span { font-weight: 900; color: #edf5ff; } .career-section-head.compact-head { margin-bottom: 22px; } .career-department-rail { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 18px; margin: -6px 0 8px; scrollbar-width: thin; } .career-chip { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #223b5c; font-size: 13px; font-weight: 900; white-space: nowrap; } .career-chip.active, .career-chip:hover { border-color: rgba(7,88,216,.28); background: #eaf2ff; color: var(--primary); } .career-filter { position: relative; grid-template-columns: minmax(260px, 1.35fr) minmax(170px,.72fr) minmax(155px,.64fr) minmax(150px,.58fr) auto; padding: 12px; border-radius: 20px; box-shadow: 0 20px 50px rgba(6,27,54,.08); } .career-search-field { position: relative; } .career-search-field span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); z-index: 1; color: var(--primary); font-size: 22px; line-height: 1; font-weight: 900; } .career-search-field input { padding-left: 44px; } .career-filter input, .career-filter select { border-color: #e5edf7; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .career-filter input:focus, .career-filter select:focus, .career-page textarea:focus, .career-page input:focus { outline: 3px solid rgba(7,88,216,.12); border-color: rgba(7,88,216,.42); } .career-results-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 0 0 18px; color: var(--muted); font-weight: 800; } .career-results-bar strong { color: var(--primary); } .career-results-bar a { color: var(--primary); font-weight: 950; } .career-job-card { position: relative; border-radius: 22px; padding: 24px; background: #fff; box-shadow: 0 14px 40px rgba(6,27,54,.065); } .career-job-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: .0; transition: opacity .18s ease; } .career-job-card:hover::before, .career-job-card.featured::before { opacity: 1; } .career-card-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .career-job-card h3 { font-size: clamp(21px, 2vw, 27px); letter-spacing: -.04em; } .career-job-card h3 a:hover { color: var(--primary); } .career-job-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .career-meta-grid span b { font-weight: 900; margin-right: 6px; } .career-card-footer { align-items: end; padding-top: 16px; border-top: 1px solid #edf2f8; } .career-card-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .career-card-actions .btn { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 13px; } .career-empty { padding: 54px 30px; border-radius: 24px; } .career-empty-icon { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 999px; background: #eaf2ff; color: var(--primary); font-size: 36px; font-weight: 900; } .career-benefits-wrap, .career-process-wrap, .career-related-jobs { position: relative; } .career-benefit-card, .career-step, .job-content-block, .job-summary-card, .application-help, .career-application-form, .career-success-card { border-radius: 22px; } .career-benefit-card:hover, .career-step:hover { border-color: rgba(7,88,216,.22); box-shadow: 0 20px 46px rgba(6,27,54,.08); } .career-detail-quick-card dl { display: grid; gap: 12px; margin: 20px 0 0; } .career-detail-quick-card div { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.10); } .career-detail-quick-card dt, .career-detail-quick-card dd { margin: 0; } .career-detail-quick-card dd { margin-top: 5px; color: #fff; font-weight: 950; } .job-summary-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; } .job-summary-head small { color: var(--primary); font-weight: 950; } .job-section-nav { position: sticky; top: 92px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 16px 34px rgba(6,27,54,.06); backdrop-filter: blur(12px); } .job-section-nav a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; background: #f3f7fc; color: #25445f; font-size: 12px; font-weight: 950; } .job-section-nav a:hover { background: #eaf2ff; color: var(--primary); } .job-content-block { scroll-margin-top: 160px; } .job-content-block .eyebrow { display: inline-flex; margin-bottom: 12px; } .job-content-block h2 { font-size: clamp(26px, 2.4vw, 38px); } .career-apply-strip .btn-light, .career-cta-card .btn-light { white-space: nowrap; } .application-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; } .application-progress div { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(6,27,54,.05); font-weight: 950; } .application-progress b { background: #eaf2ff; } .application-job-mini { display: grid; gap: 5px; padding: 16px; margin: 18px 0; border-radius: 18px; background: linear-gradient(180deg, #f8fbff, #eef5ff); border: 1px solid #dfebfa; } .application-job-mini strong { font-size: 18px; line-height: 1.25; } .application-job-mini span, .application-job-mini small { color: var(--muted); font-weight: 850; } .career-form-section-title { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; } .career-form-section-title span { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 14px; background: var(--primary); color: #fff; font-weight: 950; } .career-form-section-title h2 { margin: 0 0 6px; font-size: clamp(24px, 2.4vw, 34px); } .career-form-section-title p { margin: 0; color: var(--muted); } .upload-title { margin-top: 24px; } .upload-box.required { border-style: solid; background: linear-gradient(180deg, #fff, #f4f8ff); } .success-next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0; text-align: left; } .success-next-steps div { align-items: flex-start; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #f8fbff; } .success-next-steps b { background: #eaf2ff; } .success-next-steps strong { color: var(--text); } .success-next-steps span { color: var(--muted); line-height: 1.55; } html[dir="rtl"] .career-search-field span { left: auto; right: 15px; } html[dir="rtl"] .career-search-field input { padding-left: 16px; padding-right: 44px; } html[dir="rtl"] .career-meta-grid span b { margin-right: 0; margin-left: 6px; } html[dir="rtl"] .career-results-bar, html[dir="rtl"] .success-next-steps { text-align: right; } html[dir="rtl"] .career-job-card::before { left: 24px; right: 24px; } @media (max-width: 1180px) { .career-hero-grid, .career-detail-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); } .career-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .career-search-field { grid-column: 1 / -1; } } @media (max-width: 900px) { .career-hero-grid, .career-detail-hero-grid { grid-template-columns: 1fr; gap: 0; padding-block: 46px; } .career-hero-copy, .career-detail-copy, .career-form-copy { padding: 36px 0 24px; } .career-hero-panel, .career-detail-quick-card { margin-bottom: 24px; } .job-section-nav { position: static; } .application-progress { grid-template-columns: 1fr; } .career-cta-card .btn, .career-apply-strip .btn { width: 100%; } } @media (max-width: 720px) { .career-page .hero { min-height: auto; } .career-hero h1, .career-detail-hero h1, .career-form-hero h1 { font-size: clamp(38px, 11vw, 58px); } .career-section-head { gap: 18px; } .career-count-card { width: 100%; } .career-filter { grid-template-columns: 1fr; padding: 10px; } .career-results-bar, .career-card-footer, .career-card-actions, .job-summary-head { align-items: stretch; display: grid; grid-template-columns: 1fr; } .career-card-actions { justify-content: stretch; } .career-card-actions .btn { width: 100%; } .career-meta-grid { grid-template-columns: 1fr; } .career-detail-tags span { width: fit-content; } .career-hero-panel, .career-detail-quick-card, .career-cta-card, .career-apply-strip { border-radius: 22px; padding: 22px; } .success-next-steps { grid-template-columns: 1fr; } } /* Shared nav polish used by the career public pages */ @media(max-width:980px){ .nav-links.mobile-open{ display:flex; position:absolute; top:82px; left:0; right:0; z-index:41; flex-direction:column; align-items:stretch; gap:0; padding:14px 24px 20px; background:#fff; box-shadow:0 24px 54px rgba(6,27,54,.16); border-bottom:1px solid var(--line); } .nav-links.mobile-open a{ padding:14px 0; border-bottom:1px solid #edf2f8; } .nav-links.mobile-open a::after{ bottom:8px; } body.nav-open{ overflow:hidden; } } /* Career Upgrade 4 — Applicant system and document upload support */ .application-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); } .profile-title, .submit-title { margin-top: 24px; } .application-form-alert { display: grid; gap: 6px; padding: 14px 16px; margin-bottom: 22px; border-radius: 16px; border: 1px solid #fecaca; background: #fff7f7; color: #991b1b; line-height: 1.55; } .application-form-alert strong { font-weight: 950; } .application-form-alert ul, .duplicate-alert ul { margin: 0; padding-left: 18px; } .documents-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .application-privacy-note { display: grid; gap: 6px; margin-top: 18px; padding: 15px; border-radius: 16px; background: #f8fbff; border: 1px solid #dfebfa; } .application-privacy-note strong { color: var(--text); font-size: 13px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; } .application-privacy-note span { color: var(--muted); line-height: 1.65; } .application-reference-card { display: grid; gap: 7px; max-width: 460px; margin: 24px auto 4px; padding: 20px; border-radius: 20px; background: linear-gradient(180deg, #f8fbff, #edf5ff); border: 1px solid #dce9fb; } .application-reference-card span, .application-reference-card small { color: var(--muted); font-weight: 850; } .application-reference-card strong { color: var(--primary); font-size: clamp(24px, 4vw, 38px); letter-spacing: -.035em; } .career-form-control[type="file"] { min-height: auto; } html[dir="rtl"] .application-form-alert ul, html[dir="rtl"] .duplicate-alert ul { padding-left: 0; padding-right: 18px; } @media (max-width: 1180px) { .application-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .application-progress, .documents-v2 { grid-template-columns: 1fr; } } /* Career admin application dashboard */ .career-admin-shell{background:#f5f8fc}.career-admin-main{padding-bottom:80px}.career-admin-topbar{gap:24px;align-items:flex-start}.career-admin-topbar h2{margin:4px 0 8px}.career-admin-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.career-admin-messages{margin-bottom:18px}.career-admin-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.career-admin-kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 12px 24px rgba(6,27,54,.05)}.career-admin-kpi span{display:block;color:var(--muted);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em}.career-admin-kpi strong{display:block;font-size:34px;letter-spacing:-.05em;margin:4px 0;color:var(--secondary)}.career-admin-kpi small{color:var(--muted);font-weight:650}.career-admin-status-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}.career-status-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:6px;box-shadow:0 10px 22px rgba(6,27,54,.05)}.career-status-card span{font-size:13px;font-weight:850;color:#52637a}.career-status-card strong{font-size:26px;color:#071f42}.career-admin-panel,.career-admin-applications-card,.career-admin-sidebar-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 30px rgba(6,27,54,.06);padding:22px}.career-admin-filter{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:16px;align-items:end}.career-admin-field{display:grid;gap:8px}.career-admin-field label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:900;color:#52637a}.career-admin-field-wide{grid-column:span 2}.career-admin-control{min-height:44px;padding:11px 13px;border-radius:11px;background:#fff}.career-admin-filter-actions{display:flex;gap:10px;align-items:center}.career-admin-grid-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;margin-top:20px;align-items:start}.career-admin-bulkbar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}.career-admin-bulkbar span{display:block}.career-admin-bulk-actions{display:flex;gap:10px;align-items:center}.career-application-group{border:1px solid #e4ebf5;border-radius:16px;overflow:hidden;margin-bottom:18px;background:#fff}.career-application-group-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;background:linear-gradient(135deg,#f8fbff,#edf5ff);border-bottom:1px solid var(--line)}.career-application-group-head h3{margin:8px 0 8px;font-size:22px}.career-application-table-wrap{overflow:auto}.career-application-table{min-width:1120px}.career-application-table th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#52637a;background:#fbfdff}.career-application-table td{vertical-align:top}.career-application-table td strong{display:block;color:#071f42}.career-application-table td small{display:block;color:var(--muted);margin-top:4px}.career-status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;background:#f1f5f9;color:#334155}.career-status-new,.career-status-card.career-status-new{background:#e8f0ff;color:#0758d8}.career-status-reviewed,.career-status-card.career-status-reviewed{background:#eef6ff;color:#0f5f99}.career-status-shortlisted,.career-status-card.career-status-shortlisted{background:#edf8f2;color:#12803b}.career-status-interview_invited,.career-status-card.career-status-interview_invited{background:#fff7ed;color:#b45309}.career-status-rejected,.career-status-card.career-status-rejected{background:#fef2f2;color:#b91c1c}.career-status-hired,.career-status-card.career-status-hired{background:#ecfdf5;color:#047857}.career-doc-buttons{display:flex;gap:6px;flex-wrap:wrap}.career-doc-buttons a{display:inline-flex;min-height:28px;padding:4px 9px;align-items:center;border-radius:999px;background:#edf5ff;color:var(--primary);font-size:12px;font-weight:900}.career-mini-btn{min-height:34px;padding:0 12px;border-radius:999px}.career-admin-empty{text-align:center;padding:60px 20px}.career-admin-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}.career-job-summary-list{display:grid;gap:10px}.career-job-summary-list a{display:block;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fbfdff}.career-job-summary-list strong,.career-job-summary-list span{display:block}.career-job-summary-list span{color:var(--muted);font-size:13px;margin-top:5px}.career-back-link{display:inline-flex;margin-bottom:8px;font-weight:850;color:var(--primary)}.career-review-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}.career-review-main{display:grid;gap:18px}.career-review-sidebar{position:sticky;top:100px;display:grid;gap:18px}.career-review-hero-card{background:linear-gradient(135deg,#062452,#0758d8);border-radius:22px;color:#fff;padding:26px;display:grid;gap:22px;box-shadow:0 18px 40px rgba(7,88,216,.18)}.career-review-hero-card .text-muted{color:#dceaff}.career-review-hero-card .career-status{background:rgba(255,255,255,.16);color:#fff}.career-review-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.career-review-meta-grid span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px}.career-review-meta-grid b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#dceaff;margin-bottom:4px}.career-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.career-info-grid div{border:1px solid var(--line);background:#fbfdff;border-radius:13px;padding:14px}.career-info-grid span{display:block;color:var(--muted);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}.career-info-grid strong{display:block;color:#071f42}.career-profile-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.career-document-review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.career-document-review-card{border:1px solid var(--line);background:#fbfdff;border-radius:14px;padding:16px;display:grid;gap:5px}.career-document-review-card span{font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:900;color:var(--primary)}.career-document-review-card small{color:var(--muted)}.career-review-form{display:grid;gap:14px}.career-review-form h4{margin:8px 0 0}.career-review-hint{font-size:13px}.career-form-errors{background:#fff1f2;color:#b91c1c;border:1px solid #fecdd3;border-radius:12px;padding:12px;font-size:13px}.career-timeline-card ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}.career-timeline-card li{display:grid;gap:3px;border-left:3px solid var(--primary);padding-left:12px}.career-timeline-card b{color:#071f42}.career-timeline-card span{color:var(--muted);font-size:13px}@media(max-width:1180px){.career-admin-kpis,.career-admin-status-grid{grid-template-columns:repeat(2,1fr)}.career-admin-filter{grid-template-columns:repeat(2,1fr)}.career-admin-grid-main,.career-review-layout{grid-template-columns:1fr}.career-review-sidebar{position:static}}@media(max-width:700px){.career-admin-main{padding:22px 16px 60px}.career-admin-topbar,.career-admin-bulkbar,.career-application-group-head{display:grid}.career-admin-kpis,.career-admin-status-grid,.career-admin-filter,.career-info-grid,.career-document-review-grid,.career-review-meta-grid{grid-template-columns:1fr}.career-admin-field-wide{grid-column:auto}.career-admin-bulk-actions,.career-admin-actions,.career-admin-filter-actions{display:grid;grid-template-columns:1fr}.career-admin-actions .btn,.career-admin-bulk-actions .btn,.career-admin-filter-actions .btn{width:100%}} /* Careers Upgrade 6: interview invitation and email history polish */ .career-panel-headline{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.career-panel-headline h3{margin:0 0 6px}.career-email-log-list{display:grid;gap:12px}.career-email-log-card{display:grid;gap:8px;border:1px solid #dbe8f7;background:#f8fbff;border-radius:14px;padding:16px}.career-email-log-card div{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.career-email-log-card strong{color:#071f42}.career-email-log-card span,.career-email-log-card small{color:var(--muted);font-size:13px}.career-email-log-card p{margin:0;color:#17243a;font-weight:800}.career-email-failed{border-color:#fecdd3;background:#fff7f8}.career-error-text{color:#b91c1c!important;font-weight:800}.career-invite-panel{border-color:#cfe2ff;box-shadow:0 18px 38px rgba(7,88,216,.10)}.career-invite-panel h3{color:#0758d8}.career-danger-panel{border-color:#fee2e2;background:#fffafa}.career-danger-panel summary{cursor:pointer;font-weight:900;color:#b91c1c;font-size:18px;margin-bottom:14px}.career-danger-panel form{display:grid;gap:14px;margin-top:14px}.career-admin-field textarea.career-admin-control{min-height:130px;resize:vertical}.career-admin-field input[type="datetime-local"].career-admin-control{font-weight:800}.career-review-sidebar .btn{justify-content:center}.career-review-hint{border-radius:12px;background:#f8fbff;border:1px solid #e2eaf6;padding:10px;margin:0;color:#52637a}.career-review-form small.text-muted{line-height:1.5}.badge{display:inline-flex;align-items:center;min-height:28px;border-radius:999px;background:#eef6ff;color:#0758d8;padding:4px 10px;font-size:12px;font-weight:900}.message.error{background:#fff1f2;color:#b91c1c;border-color:#fecdd3}.message.success{background:#ecfdf5;color:#047857;border-color:#bbf7d0}.message.warning{background:#fffbeb;color:#b45309;border-color:#fde68a}@media(max-width:700px){.career-email-log-card div,.career-panel-headline{display:grid}.career-admin-field textarea.career-admin-control{min-height:180px}} /* Career Upgrade 13 — dashboard one-click invite button */ .career-admin-actions .career-inline-action{margin:0}.career-admin-actions .career-inline-action button{white-space:nowrap}.career-inline-action button[disabled],.career-one-click-panel button[disabled]{cursor:not-allowed;opacity:.58}.career-one-click-panel{border-color:#bfdbfe!important;background:linear-gradient(180deg,#fff,#f8fbff)!important}.career-one-click-panel h3{color:#0758d8}@media(max-width:760px){.career-admin-actions .career-inline-action,.career-admin-actions .career-inline-action button{width:100%}} /* Upgrade 26: W3Schools-style responsive certificate image grid + full-view modal */ .certificate-gallery-section{padding:66px 0 84px;background:linear-gradient(180deg,#fff 0%,#f7fbff 100%);overflow:hidden}.certificate-gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:30px}.certificate-gallery-head h2{max-width:800px;margin-bottom:0}.certificate-gallery-head p{max-width:440px;margin:0;color:#52657f;font-size:15px;line-height:1.7}.certificate-photo-grid{column-count:4;column-gap:14px}.certificate-photo-item{display:inline-block;position:relative;width:100%;margin:0 0 14px;padding:0;border:0;border-radius:0;background:#eaf3ff;overflow:hidden;break-inside:avoid;page-break-inside:avoid;cursor:zoom-in;text-align:inherit;box-shadow:none;vertical-align:top;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}.certificate-photo-item:hover,.certificate-photo-item:focus-visible{transform:translateY(-2px);box-shadow:0 18px 44px rgba(6,27,54,.18);outline:none}.certificate-photo-item img{display:block;width:100%;height:auto;vertical-align:middle;transition:transform .28s ease,filter .28s ease}.certificate-photo-item:hover img,.certificate-photo-item:focus-visible img{transform:scale(1.018);filter:saturate(1.05) contrast(1.02)}.certificate-photo-overlay{position:absolute;inset:auto 0 0 0;display:grid;gap:6px;padding:42px 16px 15px;color:#fff;background:linear-gradient(180deg,rgba(3,18,39,0) 0%,rgba(3,18,39,.72) 44%,rgba(3,18,39,.94) 100%);opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}.certificate-photo-item:hover .certificate-photo-overlay,.certificate-photo-item:focus-visible .certificate-photo-overlay{opacity:1;transform:translateY(0)}.certificate-photo-title{font-size:15px;font-weight:900;line-height:1.24;letter-spacing:-.01em}.certificate-photo-desc{font-size:12px;line-height:1.45;color:#d8e8ff}.certificate-photo-action{justify-self:start;margin-top:3px;display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border-radius:999px;background:#fff;color:#0758d8;font-size:11px;font-weight:900}.certificate-photo-placeholder{min-height:230px;padding:22px;border:1px solid #d9e6f7;border-radius:16px;display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,#f5f9ff,#e9f2ff);color:#092044;cursor:default}.certificate-placeholder-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,#0758d8,#00a6df);color:#fff;font-size:30px;font-weight:900;box-shadow:0 16px 32px rgba(7,88,216,.2)}.certificate-photo-placeholder strong{font-size:16px;line-height:1.35}.certificate-photo-placeholder small{color:#52657f;line-height:1.5}.certificate-empty-state{padding:22px;border:1px dashed #b9d1f3;border-radius:16px;background:#f8fbff;color:#52657f}.certificate-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:28px;background:rgba(2,11,24,.78);backdrop-filter:blur(16px)}.certificate-modal.is-open{display:flex}.certificate-modal-backdrop{position:absolute;inset:0;border:0;background:transparent;cursor:zoom-out}.certificate-modal-panel{position:relative;z-index:1;width:min(1220px,100%);max-height:min(90vh,900px);display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:0;background:#071a36;border:1px solid rgba(255,255,255,.14);border-radius:24px;box-shadow:0 34px 90px rgba(0,0,0,.46);overflow:hidden;animation:certificateModalIn .22s ease both}.certificate-modal-image-wrap{min-height:520px;max-height:90vh;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(7,88,216,.18),transparent 36%),#041225;overflow:auto}.certificate-modal-image{display:block;width:auto;height:auto;max-width:100%;max-height:86vh;object-fit:contain}.certificate-modal-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:34px;background:linear-gradient(180deg,#0a2d69,#061a34);color:#fff}.certificate-modal-info .eyebrow{color:#a7c9ff}.certificate-modal-info h3{font-size:clamp(23px,2.1vw,32px);line-height:1.14;margin:10px 0 12px;color:#fff}.certificate-modal-info p{color:#d8e7ff;font-size:15px;line-height:1.72}.certificate-modal-meta{font-weight:850;color:#fff!important;margin-bottom:18px!important}.certificate-modal-download{margin-top:12px}.certificate-modal-download[hidden]{display:none!important}.certificate-modal-close{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(4,18,37,.78);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s ease}.certificate-modal-close:hover{background:#fff;color:#061a34}.certificate-modal-open{overflow:hidden}@keyframes certificateModalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:1100px){.certificate-photo-grid{column-count:3}.certificate-modal-panel{grid-template-columns:1fr 330px}.certificate-modal-image-wrap{min-height:440px}}@media(max-width:800px){.certificate-gallery-head{display:block}.certificate-gallery-head p{margin-top:12px}.certificate-photo-grid{column-count:2}.certificate-modal{padding:16px;align-items:flex-start;overflow:auto}.certificate-modal-panel{grid-template-columns:1fr;max-height:none}.certificate-modal-image-wrap{min-height:280px;max-height:none}.certificate-modal-image{max-height:68vh}.certificate-modal-info{padding:24px}.certificate-modal-close{top:10px;right:10px}}@media(max-width:600px){.certificate-gallery-section{padding:46px 0 60px}.certificate-photo-grid{column-count:1}.certificate-photo-item{margin-bottom:12px}.certificate-photo-overlay{opacity:1;transform:none;padding:54px 14px 14px}.certificate-gallery-head h2{font-size:clamp(28px,8vw,38px)}.certificate-modal{padding:10px}.certificate-modal-panel{border-radius:20px}.certificate-modal-info h3{font-size:24px}.certificate-modal-info p{font-size:14px}.certificate-modal-download{width:100%}}html[dir="rtl"] .certificate-gallery-head{text-align:right}html[dir="rtl"] .certificate-photo-overlay{text-align:right}html[dir="rtl"] .certificate-photo-action{justify-self:end}html[dir="rtl"] .certificate-modal-info{text-align:right;align-items:flex-start}html[dir="rtl"] .certificate-modal-close{right:auto;left:14px} /* Upgrade 27: custom Trust & Compliance framework section */ .trust-framework-section{position:relative;padding:72px 0 82px;background:radial-gradient(circle at 18% 18%,rgba(7,88,216,.075),transparent 26%),linear-gradient(180deg,#fff 0%,#f8fbff 100%);overflow:hidden}.trust-framework-section::before{content:"";position:absolute;inset:36px auto auto -120px;width:360px;height:360px;border-radius:50%;background:linear-gradient(135deg,rgba(0,166,223,.14),rgba(7,88,216,.04));pointer-events:none}.trust-framework-section::after{content:"";position:absolute;right:-220px;bottom:-260px;width:520px;height:520px;border-radius:50%;background:linear-gradient(135deg,rgba(7,88,216,.10),rgba(0,166,223,.04));pointer-events:none}.trust-framework-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.55fr);gap:30px;align-items:start}.trust-framework-shell.is-single{grid-template-columns:1fr;max-width:980px}.trust-framework-credentials,.trust-framework-standards{position:relative;border:1px solid rgba(188,211,247,.88);background:rgba(255,255,255,.78);backdrop-filter:blur(12px);box-shadow:0 22px 56px rgba(6,27,54,.07);border-radius:30px}.trust-framework-credentials{padding:30px;overflow:hidden}.trust-framework-credentials::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:.95}.trust-framework-copy h2{font-size:clamp(28px,2.7vw,42px);line-height:1.08;max-width:420px;margin:12px 0 12px;color:#071f42}.trust-framework-copy p{max-width:390px;color:#52657f;font-size:15px;line-height:1.75;margin-bottom:24px}.trust-accreditation-stack{display:grid;gap:12px}.trust-accreditation-item{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr);gap:15px;align-items:center;padding:14px;border:1px solid rgba(191,211,244,.82);border-radius:22px;background:linear-gradient(180deg,#fff,#f7fbff);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.trust-accreditation-item:hover{transform:translateY(-2px);border-color:rgba(7,88,216,.34);box-shadow:0 16px 34px rgba(7,88,216,.10)}.trust-accreditation-media{width:70px;height:62px;border-radius:18px;display:grid;place-items:center;background:#fff;border:1px solid rgba(190,211,244,.88);box-shadow:inset 0 0 0 6px rgba(244,248,255,.8);overflow:hidden;color:var(--primary);font-weight:900;font-size:15px;letter-spacing:.04em}.trust-accreditation-media img{max-width:52px;max-height:42px;object-fit:contain}.trust-accreditation-body strong{display:block;font-size:16px;line-height:1.28;color:#102b52;letter-spacing:-.015em}.trust-accreditation-body p{margin:5px 0 0;color:#60718a;font-size:13px;line-height:1.55}.trust-framework-standards{padding:34px;overflow:hidden}.trust-framework-standards::before{content:"";position:absolute;right:-90px;top:-120px;width:270px;height:270px;border-radius:62px;background:linear-gradient(135deg,rgba(7,88,216,.16),rgba(0,166,223,.08));transform:rotate(28deg)}.trust-framework-heading{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:24px;align-items:end;margin-bottom:24px}.trust-framework-heading h2{font-size:clamp(32px,3.4vw,56px);line-height:1.03;margin:10px 0 0;color:#071f42;max-width:760px}.trust-framework-heading p{margin:0;color:#52657f;font-size:15px;line-height:1.72}.trust-standard-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.trust-standard-card{position:relative;min-height:238px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(193,214,244,.86);border-radius:24px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.trust-standard-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--primary),var(--accent));opacity:.9}.trust-standard-card::after{content:"";position:absolute;right:-42px;bottom:-42px;width:108px;height:108px;border-radius:50%;background:rgba(7,88,216,.06)}.trust-standard-card:hover{transform:translateY(-3px);border-color:rgba(7,88,216,.34);box-shadow:0 20px 45px rgba(6,27,54,.10)}.trust-standard-mark{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#eef6ff,#fff);border:1px solid rgba(187,210,244,.9);box-shadow:0 12px 24px rgba(7,88,216,.08);color:var(--primary);font-size:24px;font-weight:900}.trust-standard-mark span{line-height:1;display:block}.trust-standard-body{position:relative;z-index:1;margin-top:24px}.trust-standard-body h3{font-size:clamp(20px,1.8vw,26px);line-height:1.12;letter-spacing:-.035em;margin-bottom:12px;color:#071f42}.trust-standard-body p{font-size:14px;line-height:1.7;color:#40546f;margin:0}.trust-framework-empty{padding:18px;border:1px dashed rgba(7,88,216,.32);border-radius:18px;background:rgba(255,255,255,.7);color:#52657f}@media(max-width:1120px){.trust-framework-shell{grid-template-columns:1fr}.trust-framework-heading{grid-template-columns:1fr}.trust-framework-heading p{max-width:720px}.trust-standard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:820px){.trust-framework-section{padding:52px 0 62px}.trust-framework-credentials,.trust-framework-standards{border-radius:24px}.trust-framework-credentials,.trust-framework-standards{padding:24px}.trust-standard-grid{grid-template-columns:1fr 1fr}.trust-standard-card{min-height:210px}.trust-framework-copy h2,.trust-framework-heading h2{font-size:clamp(28px,8vw,38px)}}@media(max-width:580px){.trust-framework-shell{gap:18px}.trust-framework-credentials,.trust-framework-standards{padding:20px;border-radius:20px}.trust-accreditation-item{grid-template-columns:58px minmax(0,1fr);gap:12px;border-radius:18px}.trust-accreditation-media{width:58px;height:54px;border-radius:16px}.trust-accreditation-media img{max-width:44px;max-height:34px}.trust-standard-grid{grid-template-columns:1fr}.trust-standard-card{min-height:auto;padding:20px}.trust-standard-body{margin-top:18px}.trust-standard-body h3{font-size:22px}.trust-standard-body p{font-size:13.5px}.trust-framework-copy p,.trust-framework-heading p{font-size:14px}}html[dir="rtl"] .trust-framework-section{text-align:right}html[dir="rtl"] .trust-standard-card::before{left:auto;right:0}html[dir="rtl"] .trust-framework-standards::before{right:auto;left:-90px}html[dir="rtl"] .trust-standard-card::after{right:auto;left:-42px}html[dir="rtl"] .trust-framework-copy h2,html[dir="rtl"] .trust-framework-heading h2{letter-spacing:0;line-height:1.24}html[dir="rtl"] .trust-standard-body h3{letter-spacing:0;line-height:1.35}html[dir="rtl"] .trust-framework-copy p,html[dir="rtl"] .trust-framework-heading p,html[dir="rtl"] .trust-standard-body p{line-height:1.9} /* Upgrade 29: custom compliance assurance and document center sections */ .operational-assurance-section{position:relative;padding:62px 0;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);overflow:hidden}.operational-assurance-section::before{content:"";position:absolute;right:-150px;top:60px;width:340px;height:340px;border-radius:50%;background:linear-gradient(135deg,rgba(0,166,223,.09),rgba(7,88,216,.04));pointer-events:none}.operational-assurance-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(260px,.78fr) minmax(0,1.45fr);gap:28px;align-items:stretch}.operational-assurance-intro{position:relative;padding:30px;border-radius:28px;color:#fff;background:radial-gradient(circle at 100% 0,rgba(0,166,223,.25),transparent 36%),linear-gradient(135deg,#061a34,#073b95);box-shadow:0 22px 52px rgba(6,27,54,.12);overflow:hidden}.operational-assurance-intro::after{content:"";position:absolute;right:-64px;bottom:-72px;width:190px;height:190px;border:1px solid rgba(255,255,255,.14);border-radius:54px;transform:rotate(26deg)}.operational-assurance-intro .eyebrow{color:#bcd8ff}.operational-assurance-intro h2{font-size:clamp(26px,2.4vw,40px);line-height:1.08;margin:12px 0 14px;color:#fff}.operational-assurance-intro p{max-width:430px;color:#d6e6ff;font-size:15px;line-height:1.75;margin:0}.operational-assurance-list{display:grid;gap:14px}.operational-assurance-item{position:relative;display:grid;grid-template-columns:68px 58px minmax(0,1fr);gap:16px;align-items:center;padding:18px 20px;border:1px solid rgba(191,211,244,.82);border-radius:24px;background:rgba(255,255,255,.86);box-shadow:0 14px 36px rgba(6,27,54,.055);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.operational-assurance-item:hover{transform:translateY(-2px);border-color:rgba(7,88,216,.36);box-shadow:0 20px 44px rgba(6,27,54,.09)}.operational-assurance-index{font-weight:900;font-size:32px;letter-spacing:-.06em;color:rgba(7,88,216,.18);line-height:1}.operational-assurance-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:var(--primary);font-size:23px;font-weight:900;background:linear-gradient(135deg,#eef6ff,#fff);border:1px solid rgba(190,211,244,.9)}.operational-assurance-copy h3{font-size:21px;line-height:1.15;margin:0 0 7px;color:#071f42;letter-spacing:-.025em}.operational-assurance-copy p{font-size:14px;line-height:1.68;color:#4f627c;margin:0;max-width:58ch}.trust-documents-section{position:relative;padding:72px 0 86px;background:#fff}.trust-documents-shell{position:relative;border:1px solid rgba(190,211,244,.88);border-radius:30px;background:linear-gradient(180deg,#fff 0%,#f9fcff 100%);box-shadow:0 22px 56px rgba(6,27,54,.07);padding:30px;overflow:hidden}.trust-documents-shell::before{content:"";position:absolute;right:-90px;top:-110px;width:260px;height:260px;border-radius:62px;background:linear-gradient(135deg,rgba(7,88,216,.12),rgba(0,166,223,.06));transform:rotate(30deg);pointer-events:none}.trust-documents-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,420px);gap:24px;align-items:end;margin-bottom:24px}.trust-documents-head h2{font-size:clamp(30px,3.1vw,52px);line-height:1.04;margin:10px 0 0;color:#071f42;max-width:760px}.trust-documents-head p{font-size:15px;line-height:1.75;color:#52657f;margin:0}.trust-document-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.trust-document-card{position:relative;display:flex;flex-direction:column;min-height:270px;border:1px solid rgba(192,213,244,.9);border-radius:24px;background:#fff;padding:20px;overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.trust-document-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:.85}.trust-document-card:hover{transform:translateY(-3px);border-color:rgba(7,88,216,.34);box-shadow:0 20px 45px rgba(6,27,54,.09)}.trust-document-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.trust-document-type,.trust-document-category{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.trust-document-type{background:#eaf3ff;color:var(--primary)}.trust-document-category{background:#f3f6fb;color:#52657f}.trust-document-main{display:grid;grid-template-columns:64px minmax(0,1fr);gap:15px;align-items:start}.trust-document-thumb{width:64px;height:76px;border-radius:18px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#eef6ff,#fff);border:1px solid rgba(190,211,244,.9);box-shadow:inset 0 0 0 6px rgba(244,248,255,.82);color:var(--primary);font-size:13px;font-weight:900;letter-spacing:.05em}.trust-document-thumb img{width:100%;height:100%;object-fit:cover}.trust-document-copy h3{font-size:21px;line-height:1.12;margin:0 0 10px;color:#071f42;letter-spacing:-.03em}.trust-document-copy p{font-size:14px;line-height:1.65;color:#4f627c;margin:0}.trust-document-meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px}.trust-document-meta span{display:inline-flex;border:1px solid rgba(190,211,244,.84);border-radius:999px;padding:5px 9px;color:#52657f;font-size:12px;font-weight:750;background:#fbfdff}.trust-document-actions{margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.trust-document-actions .btn{min-height:42px;padding:0 16px;border-radius:12px;font-size:13px}.trust-document-note{display:inline-flex;align-items:center;min-height:42px;border-radius:12px;padding:0 13px;background:#fff7ed;color:#9a3412;font-size:12.5px;font-weight:800}.trust-document-card.is-request::before{background:linear-gradient(90deg,#64748b,#0ea5e9)}.trust-document-card.is-request .trust-document-type{background:#f1f5f9;color:#334155}@media(max-width:1120px){.operational-assurance-shell{grid-template-columns:1fr}.trust-document-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trust-documents-head{grid-template-columns:1fr}.trust-documents-head p{max-width:720px}}@media(max-width:760px){.operational-assurance-section,.trust-documents-section{padding:48px 0 58px}.operational-assurance-intro,.trust-documents-shell{border-radius:22px;padding:22px}.operational-assurance-item{grid-template-columns:48px 48px minmax(0,1fr);gap:12px;padding:16px;border-radius:20px}.operational-assurance-index{font-size:24px}.operational-assurance-icon{width:48px;height:48px;border-radius:15px;font-size:20px}.operational-assurance-copy h3{font-size:19px}.trust-document-grid{grid-template-columns:1fr}.trust-document-card{min-height:auto;border-radius:20px;padding:18px}.trust-document-main{grid-template-columns:56px minmax(0,1fr)}.trust-document-thumb{width:56px;height:66px;border-radius:16px}.trust-document-copy h3{font-size:19px}.trust-documents-head h2,.operational-assurance-intro h2{font-size:clamp(26px,8vw,36px)}}@media(max-width:480px){.operational-assurance-item{grid-template-columns:1fr}.operational-assurance-index{font-size:18px}.operational-assurance-list{gap:12px}.trust-document-main{grid-template-columns:1fr}.trust-document-thumb{width:62px;height:70px}.trust-document-actions .btn,.trust-document-note{width:100%;justify-content:center;text-align:center}}html[dir="rtl"] .operational-assurance-section,html[dir="rtl"] .trust-documents-section{text-align:right}html[dir="rtl"] .operational-assurance-section::before{right:auto;left:-150px}html[dir="rtl"] .operational-assurance-intro::after{right:auto;left:-64px}html[dir="rtl"] .trust-documents-shell::before{right:auto;left:-90px}html[dir="rtl"] .operational-assurance-copy h3,html[dir="rtl"] .trust-document-copy h3,html[dir="rtl"] .trust-documents-head h2,html[dir="rtl"] .operational-assurance-intro h2{letter-spacing:0;line-height:1.35}html[dir="rtl"] .operational-assurance-copy p,html[dir="rtl"] .trust-document-copy p,html[dir="rtl"] .trust-documents-head p,html[dir="rtl"] .operational-assurance-intro p{line-height:1.9} /* Upgrade 30 — Hero background thumbnail previews */ .hero-shell.has-hero-thumb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 44px; align-items: center; width: 100%; } .hero-shell.has-hero-thumb .hero-content { max-width: 760px; padding-bottom: 112px; } .hero-thumbnail-card { justify-self: end; width: 100%; max-width: 320px; position: relative; } .hero-thumbnail-frame { position: relative; padding: 12px; border-radius: 28px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 22px 50px rgba(4,18,37,.22); backdrop-filter: blur(10px); } .hero-thumbnail-frame.light { background: rgba(255,255,255,.68); border-color: rgba(255,255,255,.92); box-shadow: 0 22px 44px rgba(6,27,54,.12); } .hero-thumbnail-frame::after { content: ""; position: absolute; inset: auto 16px -12px 16px; height: 24px; background: radial-gradient(circle, rgba(6,27,54,.28), transparent 72%); filter: blur(10px); z-index: -1; } .hero-thumbnail-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; border: 1px solid rgba(255,255,255,.24); } .hero-thumbnail-frame.light img { border-color: rgba(7,88,216,.12); } .career-hero-thumb { margin-bottom: 18px; padding: 10px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); } .career-hero-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; } html[dir="rtl"] .hero-shell.has-hero-thumb { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); } html[dir="rtl"] .hero-shell.has-hero-thumb .hero-content { order: 2; } html[dir="rtl"] .hero-shell.has-hero-thumb .hero-thumbnail-card { order: 1; justify-self: start; } @media (max-width: 1100px) { .hero-shell.has-hero-thumb { grid-template-columns: minmax(0, 1fr) 260px; gap: 26px; } .hero-thumbnail-card { max-width: 260px; } } @media (max-width: 860px) { .hero-shell.has-hero-thumb { grid-template-columns: 1fr; align-items: flex-start; } .hero-shell.has-hero-thumb .hero-content { padding-bottom: 32px; max-width: 100%; } .hero-thumbnail-card, html[dir="rtl"] .hero-shell.has-hero-thumb .hero-thumbnail-card { justify-self: stretch; max-width: 100%; margin: 0 0 44px; } .hero-thumbnail-frame img { aspect-ratio: 16 / 10; } } /* Upgrade 31 — Page hero background only refinement */ .hero:not(.hero-home) { background-position: center center; background-repeat: no-repeat; } .hero:not(.hero-home) .hero-content { position: relative; z-index: 1; } .hero:not(.hero-home)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 82% 24%, rgba(255,255,255,.16), transparent 18%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); } .hero.dark::after { background: radial-gradient(circle at 82% 24%, rgba(255,255,255,.08), transparent 18%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); } /* Upgrade 32 — Home clients and certifications preview */ .home-proof-section { position: relative; overflow: hidden; background: radial-gradient(circle at 8% 20%, rgba(7,88,216,.07), transparent 28%), linear-gradient(180deg, #fff 0%, #f7fbff 100%); } .home-proof-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 28px; align-items: end; margin-bottom: 26px; } .home-proof-head h2 { max-width: 850px; margin-bottom: 0; } .home-proof-head p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin: 0; } .home-proof-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 22px; align-items: stretch; } .home-proof-panel { position: relative; background: rgba(255,255,255,.88); border: 1px solid rgba(190,211,247,.86); border-radius: 28px; padding: 26px; box-shadow: 0 18px 45px rgba(6,27,54,.06); overflow: hidden; } .home-proof-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); } .home-proof-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; } .home-proof-panel-head h3 { font-size: clamp(1.35rem, 2vw, 1.9rem); letter-spacing: -.03em; margin: 8px 0 0; max-width: 440px; } .home-proof-link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 42px; padding: 0 16px; border-radius: 999px; color: var(--primary); background: #f2f7ff; border: 1px solid #cfe0fb; font-size: .9rem; font-weight: 850; transition: .2s ease; } .home-proof-link:hover { color: #fff; background: var(--primary); border-color: var(--primary); transform: translateY(-1px); } .home-client-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .home-client-card { min-height: 82px; display: grid; place-items: center; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid #dbe7fb; color: #243955; text-align: center; font-weight: 850; box-shadow: 0 10px 24px rgba(6,27,54,.04); } .home-client-card img { max-height: 44px; width: auto; object-fit: contain; } .home-cert-list { display: grid; gap: 12px; } .home-cert-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 96px; padding: 12px; border-radius: 20px; background: #fff; border: 1px solid #dbe7fb; box-shadow: 0 10px 24px rgba(6,27,54,.04); transition: .2s ease; } .home-cert-card:hover { border-color: rgba(7,88,216,.45); transform: translateY(-2px); box-shadow: 0 18px 32px rgba(6,27,54,.08); } .home-cert-thumb { width: 76px; height: 76px; border-radius: 16px; background: linear-gradient(135deg, #edf5ff, #ffffff); border: 1px solid #cfe0fb; overflow: hidden; display: grid; place-items: center; color: var(--primary); font-size: 1.6rem; font-weight: 900; } .home-cert-thumb img { width: 100%; height: 100%; object-fit: cover; } .home-cert-card strong { display: block; color: var(--secondary); font-size: 1.02rem; line-height: 1.25; letter-spacing: -.02em; } .home-cert-card small, .home-cert-card em { display: block; margin-top: 4px; color: var(--muted); font-size: .88rem; line-height: 1.35; font-style: normal; } .home-proof-empty { margin: 0; color: var(--muted); } html[dir="rtl"] .home-proof-head, html[dir="rtl"] .home-proof-layout, html[dir="rtl"] .home-cert-card { direction: rtl; } html[dir="rtl"] .home-proof-panel-head { flex-direction: row-reverse; } @media (max-width: 1100px) { .home-proof-layout, .home-proof-head { grid-template-columns: 1fr; } } @media (max-width: 760px) { .home-proof-panel { padding: 22px; border-radius: 24px; } .home-proof-panel-head { flex-direction: column; } html[dir="rtl"] .home-proof-panel-head { flex-direction: column; } .home-proof-link { width: 100%; justify-content: center; } .home-client-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .home-client-list { grid-template-columns: 1fr; } .home-cert-card { grid-template-columns: 64px minmax(0, 1fr); } .home-cert-thumb { width: 64px; height: 64px; } } /* Upgrade 33 — Home proof preview uses certificate gallery grid */ .home-proof-gallery-section { background: radial-gradient(circle at 8% 16%, rgba(7,88,216,.065), transparent 28%), radial-gradient(circle at 92% 86%, rgba(0,166,223,.08), transparent 30%), linear-gradient(180deg, #fff 0%, #f7fbff 100%); } .home-proof-gallery-head { margin-bottom: 24px; } .home-client-preview-strip, .home-certificate-gallery { position: relative; padding: 26px; border: 1px solid rgba(190,211,247,.86); border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: 0 18px 45px rgba(6,27,54,.055); overflow: hidden; } .home-client-preview-strip::before, .home-certificate-gallery::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); } .home-client-preview-strip { margin-bottom: 22px; } .home-proof-panel-head.compact, .home-certificate-gallery-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 20px; } .home-proof-panel-head.compact h3, .home-certificate-gallery-head h3 { font-size: clamp(1.35rem, 2vw, 2rem); margin: 8px 0 0; max-width: 620px; } .home-client-logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .home-client-logo-tile { min-height: 78px; display: grid; place-items: center; padding: 13px; border-radius: 18px; background: #fff; border: 1px solid #dbe7fb; color: #243955; text-align: center; font-weight: 850; box-shadow: 0 10px 24px rgba(6,27,54,.035); transition: .2s ease; } .home-client-logo-tile:hover { transform: translateY(-2px); border-color: rgba(7,88,216,.42); box-shadow: 0 16px 32px rgba(6,27,54,.07); } .home-client-logo-tile img { max-height: 44px; width: auto; object-fit: contain; } .home-certificate-gallery .certificate-photo-grid { column-count: 4; column-gap: 14px; } .home-certificate-gallery .certificate-photo-item { border-radius: 0; } .home-certificate-gallery .certificate-empty-state, .home-certificate-gallery .home-proof-empty { margin: 0; } html[dir="rtl"] .home-proof-gallery-head, html[dir="rtl"] .home-proof-panel-head.compact, html[dir="rtl"] .home-certificate-gallery-head { direction: rtl; text-align: right; } @media (max-width: 1180px) { .home-client-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-certificate-gallery .certificate-photo-grid { column-count: 3; } } @media (max-width: 800px) { .home-proof-panel-head.compact, .home-certificate-gallery-head, .home-proof-gallery-head { display: block; } .home-proof-link { margin-top: 14px; } .home-client-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-certificate-gallery .certificate-photo-grid { column-count: 2; } } @media (max-width: 600px) { .home-client-preview-strip, .home-certificate-gallery { padding: 20px; border-radius: 22px; } .home-client-logo-grid { grid-template-columns: 1fr; } .home-certificate-gallery .certificate-photo-grid { column-count: 1; } .home-proof-link { width: 100%; justify-content: center; } } /* Upgrade 34 — exact home trusted clients + certificates preview redesign */ .home-proof-redesign-section { background: radial-gradient(circle at 0% 15%, rgba(7,88,216,.06), transparent 22%), radial-gradient(circle at 100% 100%, rgba(0,166,223,.08), transparent 24%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); } .home-proof-redesign-head { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr); gap: 32px; align-items: start; margin-bottom: 24px; } .home-proof-redesign-head h2 { margin: 8px 0 0; max-width: 780px; font-size: clamp(2.2rem, 4vw, 4.3rem); line-height: .96; letter-spacing: -.04em; } .home-proof-redesign-head p { margin: 20px 0 0; max-width: 470px; color: #5f7190; font-size: 1.09rem; line-height: 1.7; } .home-proof-redesign-panel { position: relative; margin-top: 22px; padding: 24px; border-radius: 30px; border: 1px solid rgba(187, 211, 244, .88); background: rgba(255, 255, 255, .92); box-shadow: 0 20px 50px rgba(6, 27, 54, .06); overflow: hidden; } .home-proof-redesign-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); } .home-proof-redesign-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; } .home-proof-redesign-panel-head h3 { margin: 8px 0 0; font-size: clamp(1.5rem, 2.2vw, 2.55rem); line-height: 1.02; letter-spacing: -.03em; } .home-proof-redesign-client-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .home-proof-redesign-client-card { min-height: 168px; padding: 18px 14px 16px; border-radius: 22px; border: 1px solid #d7e5fb; background: #fff; box-shadow: 0 12px 28px rgba(6, 27, 54, .035); text-decoration: none; color: var(--dark); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; text-align: center; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .home-proof-redesign-client-card:hover { transform: translateY(-3px); border-color: rgba(7, 88, 216, .44); box-shadow: 0 18px 36px rgba(6, 27, 54, .08); } .home-proof-redesign-client-logo { width: 100%; max-width: 154px; height: 72px; display: grid; place-items: center; } .home-proof-redesign-client-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .home-proof-redesign-client-fallback { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, rgba(7,88,216,.12), rgba(0,166,223,.08)); color: var(--primary); font-size: 1.25rem; font-weight: 900; text-transform: uppercase; } .home-proof-redesign-client-card strong { display: block; font-size: 1rem; line-height: 1.25; letter-spacing: -.01em; } .home-proof-redesign-certificate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .home-proof-redesign-certificate-card { padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; } .home-proof-redesign-certificate-frame { display: block; aspect-ratio: 0.82; width: 100%; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #d8e6fb; box-shadow: 0 14px 34px rgba(6, 27, 54, .05); } .home-proof-redesign-certificate-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; } .home-proof-redesign-certificate-card:hover .home-proof-redesign-certificate-frame img, .home-proof-redesign-certificate-card:focus-visible .home-proof-redesign-certificate-frame img { transform: scale(1.02); } .home-proof-redesign-certificate-card:focus-visible { outline: 2px solid rgba(7,88,216,.35); outline-offset: 5px; border-radius: 22px; } .home-proof-redesign-certificate-placeholder { width: 100%; height: 100%; display: grid; place-items: center; padding: 18px; color: var(--dark); font-weight: 800; text-align: center; background: linear-gradient(135deg, #f6f9ff, #edf4ff); } .home-proof-redesign-certificate-copy { display: block; padding: 12px 4px 2px; } .home-proof-redesign-certificate-copy strong { display: block; font-size: 1.03rem; line-height: 1.2; color: var(--dark); } .home-proof-redesign-certificate-copy small { display: block; margin-top: 6px; color: #617494; font-size: .93rem; line-height: 1.45; } html[dir="rtl"] .home-proof-redesign-head, html[dir="rtl"] .home-proof-redesign-panel-head, html[dir="rtl"] .home-proof-redesign-certificate-card { direction: rtl; text-align: right; } html[dir="rtl"] .home-proof-redesign-client-card { text-align: center; } @media (max-width: 1180px) { .home-proof-redesign-head { grid-template-columns: 1fr; } .home-proof-redesign-head p { margin-top: 0; max-width: 760px; } .home-proof-redesign-client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-proof-redesign-certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .home-proof-redesign-panel { padding: 20px; border-radius: 24px; } .home-proof-redesign-panel-head { flex-direction: column; align-items: stretch; } .home-proof-redesign-client-grid, .home-proof-redesign-certificate-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .home-proof-redesign-head h2 { font-size: clamp(2rem, 10vw, 3rem); } .home-proof-redesign-client-grid, .home-proof-redesign-certificate-grid { grid-template-columns: 1fr; } .home-proof-redesign-client-card { min-height: 144px; } .home-proof-link { width: 100%; justify-content: center; } } /* Upgrade 35 — tighten home proof preview to match approved design */ .home-proof-redesign-section { position: relative; overflow: hidden; } .home-proof-redesign-section::before, .home-proof-redesign-section::after { content: ""; position: absolute; pointer-events: none; opacity: .55; } .home-proof-redesign-section::before { left: -24px; top: 38px; width: 128px; height: 186px; background-image: radial-gradient(rgba(7,88,216,.18) 1.2px, transparent 1.2px); background-size: 10px 10px; } .home-proof-redesign-section::after { right: -30px; bottom: 38px; width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(circle, rgba(7,88,216,.08) 0%, rgba(7,88,216,0) 72%); } .home-proof-redesign-head { margin-bottom: 26px; } .home-proof-redesign-head h2 { max-width: 720px; font-size: clamp(2.35rem, 4.2vw, 4.25rem); line-height: .96; } .home-proof-redesign-head p { margin-top: 16px; max-width: 430px; color: #637695; } .home-proof-redesign-panel { margin-top: 22px; padding: 18px 18px 22px; border-radius: 28px; border: 1px solid #d9e6fb; box-shadow: 0 20px 50px rgba(6, 27, 54, .05); background: rgba(255,255,255,.95); } .home-proof-redesign-panel::before { height: 3px; border-radius: 999px; } .home-proof-redesign-panel-head { gap: 18px; margin-bottom: 18px; } .home-proof-redesign-panel-head h3 { margin-top: 8px; font-size: clamp(1.45rem, 2.2vw, 2.25rem); } .home-proof-redesign-panel-subtitle { margin: 8px 0 0; color: #6a7d9a; font-size: .98rem; line-height: 1.55; } .home-proof-redesign-client-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .home-proof-redesign-client-card { min-height: 154px; padding: 18px 14px; border-radius: 20px; border: 1px solid #dce7fa; box-shadow: none; gap: 12px; } .home-proof-redesign-client-card:hover { box-shadow: 0 14px 30px rgba(6, 27, 54, .07); } .home-proof-redesign-client-logo { width: 100%; max-width: 150px; height: 68px; } .home-proof-redesign-client-logo img { width: 100%; height: 100%; object-fit: contain; } .home-proof-redesign-client-fallback { width: 56px; height: 56px; border-radius: 16px; font-size: 1.15rem; } .home-proof-redesign-client-card strong { font-size: .98rem; line-height: 1.2; } .home-proof-redesign-client-card small { display: none; } .home-proof-redesign-certificate-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .home-proof-redesign-certificate-card { display: flex; flex-direction: column; text-align: left; height: 100%; } .home-proof-redesign-certificate-frame { aspect-ratio: 1 / 1; min-height: 220px; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid #dce7fa; box-shadow: 0 10px 24px rgba(6, 27, 54, .05); display: flex; align-items: center; justify-content: center; overflow: hidden; } .home-proof-redesign-certificate-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center center; background: #fff; } .home-proof-redesign-certificate-copy { padding: 10px 2px 0; } .home-proof-redesign-certificate-copy strong { font-size: 1rem; line-height: 1.25; } .home-proof-redesign-certificate-copy small { display: block; margin-top: 4px; font-size: .9rem; color: #6780a4; line-height: 1.4; } html[dir="rtl"] .home-proof-redesign-head, html[dir="rtl"] .home-proof-redesign-panel-head, html[dir="rtl"] .home-proof-redesign-certificate-card { direction: rtl; text-align: right; } html[dir="rtl"] .home-proof-redesign-client-card { text-align: center; } @media (max-width: 1180px) { .home-proof-redesign-head { grid-template-columns: 1fr; } .home-proof-redesign-head p { max-width: 760px; margin-top: 0; } .home-proof-redesign-client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-proof-redesign-certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .home-proof-redesign-panel { padding: 18px; border-radius: 22px; } .home-proof-redesign-panel-head { flex-direction: column; align-items: stretch; } .home-proof-redesign-client-grid, .home-proof-redesign-certificate-grid { grid-template-columns: 1fr 1fr; } .home-proof-redesign-client-card { min-height: 142px; } .home-proof-redesign-certificate-frame { min-height: 180px; } } @media (max-width: 560px) { .home-proof-redesign-head h2 { font-size: clamp(2rem, 10vw, 3rem); } .home-proof-redesign-client-grid, .home-proof-redesign-certificate-grid { grid-template-columns: 1fr; } .home-proof-link { width: 100%; justify-content: center; } } /* Upgrade 38 — Clients page logo cards match home preview */ .trust-logo-section { background: #fff; } .trust-logo-tabs { margin: 30px 0 26px; } .trust-logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 24px; } .trust-logo-card { min-height: 172px; padding: 22px 18px 20px; border: 1px solid #dce7fa; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(6,27,54,.035); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .trust-logo-card:hover { transform: translateY(-3px); border-color: rgba(7,88,216,.42); box-shadow: 0 18px 38px rgba(6,27,54,.075); } .trust-logo-media { width: 100%; max-width: 160px; height: 74px; display: grid; place-items: center; } .trust-logo-media img { width: 100%; height: 100%; object-fit: contain; object-position: center center; } .trust-logo-fallback { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, rgba(7,88,216,.12), rgba(0,166,223,.08)); color: var(--primary); font-size: 1.18rem; font-weight: 900; text-transform: uppercase; } .trust-logo-card h3 { margin: 0; color: var(--dark); font-size: 1.08rem; line-height: 1.22; letter-spacing: -.02em; } .trust-logo-card p { margin: -4px 0 0; color: #6b7e9f; font-size: .86rem; line-height: 1.35; } .trust-partner-grid .trust-logo-card { min-height: 150px; } html[dir="rtl"] .trust-logo-card { text-align: center; } @media (max-width: 1100px) { .trust-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .trust-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .trust-logo-card { min-height: 150px; padding: 18px 14px; } .trust-logo-media { height: 62px; } } @media (max-width: 520px) { .trust-logo-grid { grid-template-columns: 1fr; } } /* Upgrade 39 — client logo spacing + certificate preview fit refinement */ .trust-logo-card { gap: 20px; min-height: 176px; padding: 24px 18px 22px; } .trust-logo-media { height: 76px; margin-bottom: 2px; } .trust-logo-card h3 { margin: 0; font-size: 1.05rem; } .trust-logo-card p { display: none; } .trust-partner-grid .trust-logo-card { min-height: 154px; } .home-proof-redesign-client-card { gap: 18px; } .home-proof-redesign-client-logo { height: 74px; margin-bottom: 2px; } .home-proof-redesign-client-card strong { margin-top: 0; } .home-proof-redesign-certificate-grid { gap: 18px; } .home-proof-redesign-certificate-frame { aspect-ratio: 4 / 3; min-height: 0; height: clamp(168px, 13vw, 214px); padding: 8px; align-items: center; justify-content: center; } .home-proof-redesign-certificate-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center center; } .home-proof-redesign-certificate-copy { padding-top: 12px; } .home-proof-redesign-certificates .home-proof-redesign-panel-head { margin-bottom: 14px; } @media (max-width: 1180px) { .home-proof-redesign-certificate-frame { height: clamp(170px, 24vw, 240px); } } @media (max-width: 760px) { .trust-logo-card { gap: 17px; min-height: 158px; } .trust-logo-media { height: 66px; } .home-proof-redesign-client-card { gap: 15px; } .home-proof-redesign-certificate-frame { height: 190px; } } @media (max-width: 560px) { .home-proof-redesign-certificate-frame { height: 220px; } } /* Upgrade 40 — certificate preview frames for mixed image ratios */ .home-proof-redesign-certificate-frame { position: relative; isolation: isolate; overflow: hidden; background-color: #f7fbff; background-image: var(--certificate-preview-image); background-size: cover; background-position: center center; background-repeat: no-repeat; } .home-proof-redesign-certificate-frame::before { content: ""; position: absolute; inset: -16px; z-index: 0; background-image: var(--certificate-preview-image); background-size: cover; background-position: center center; background-repeat: no-repeat; filter: blur(18px) saturate(.92) brightness(1.08); transform: scale(1.08); opacity: .32; } .home-proof-redesign-certificate-frame::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.48)); } .home-proof-redesign-certificate-frame img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; border-radius: 12px; background: rgba(255,255,255,.82); box-shadow: 0 8px 22px rgba(6, 27, 54, .08); } .home-proof-redesign-certificate-placeholder { position: relative; z-index: 1; } /* The full certificates page keeps natural masonry images; only its modal uses contain for full review. */ .certificate-modal-image { object-fit: contain; } /* Upgrade 46 — About page MVV polish, centered layout, and no leadership message */ .about-mvv-section { position: relative; background: radial-gradient(circle at 8% 10%, rgba(7,88,216,.055), transparent 22%), radial-gradient(circle at 92% 74%, rgba(0,166,223,.055), transparent 24%), #fff; padding-top: clamp(68px, 7vw, 104px); padding-bottom: clamp(74px, 7vw, 112px); } .section-heading-center { text-align: center; max-width: 840px; margin-inline: auto; } .about-mvv-heading h2 { max-width: 760px; margin: 10px auto 14px; color: var(--dark); letter-spacing: -.045em; } .about-mvv-heading p { max-width: 680px; margin: 0 auto; color: #627491; font-size: 1.05rem; line-height: 1.75; } .about-mvv-primary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 940px; margin: 36px auto 0; } .about-mvv-primary-card { position: relative; min-height: 260px; padding: 42px 44px 38px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #d9e6fb; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.98)); box-shadow: 0 22px 52px rgba(6,27,54,.055); overflow: hidden; } .about-mvv-primary-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: .75; } .about-mvv-icon, .about-value-icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 20px; color: var(--primary); font-weight: 900; font-size: 31px; line-height: 1; background: linear-gradient(135deg, #f8fbff, #edf5ff); border: 1px solid #c8dcfb; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(7,88,216,.075); } .about-mvv-primary-card h3 { font-size: clamp(1.55rem, 2vw, 2.05rem); margin-bottom: 14px; color: var(--dark); } .about-mvv-copy, .about-mvv-copy p { color: #263d61; font-size: 1.05rem; line-height: 1.7; max-width: 420px; margin-inline: auto; } .about-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 940px; margin: 26px auto 0; } .about-value-card { min-height: 230px; padding: 32px 30px 30px; border: 1px solid #d9e6fb; border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 18px 42px rgba(6,27,54,.045); text-align: left; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .about-value-card:hover { transform: translateY(-4px); border-color: rgba(7,88,216,.34); box-shadow: 0 24px 54px rgba(6,27,54,.075); } .about-value-icon { width: 48px; height: 48px; border-radius: 16px; margin-bottom: 24px; font-size: 25px; } .about-value-card h3 { font-size: clamp(1.35rem, 1.7vw, 1.65rem); margin-bottom: 12px; letter-spacing: -.035em; } .about-value-card p { color: #253b5f; font-size: 1rem; line-height: 1.65; margin: 0; } html[dir="rtl"] .about-value-card { text-align: right; } @media (max-width: 980px) { .about-mvv-primary-grid, .about-values-grid { grid-template-columns: 1fr; max-width: 680px; } .about-mvv-primary-card, .about-value-card { min-height: auto; } } @media (max-width: 560px) { .about-mvv-section { padding-top: 58px; padding-bottom: 70px; } .about-mvv-primary-card, .about-value-card { padding: 28px 22px; border-radius: 20px; } } /* Upgrade 47 — Restore simple MVV card style, centered and scalable */ .about-mvv-simple-section { background: radial-gradient(circle at 8% 12%, rgba(7,88,216,.035), transparent 26%), radial-gradient(circle at 94% 96%, rgba(0,166,223,.035), transparent 24%), #fff; } .about-mvv-simple-head { max-width: 1100px; margin: 0 auto 24px; text-align: left; } .about-mvv-centered-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; max-width: 1120px; margin: 0 auto; } .about-values-centered-grid { margin-top: 24px; } .about-mvv-simple-card { flex: 0 1 340px; min-height: 230px; padding: 34px 30px 32px; text-align: center; border: 1px solid #d9e6fb; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 16px 40px rgba(6,27,54,.035); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .about-mvv-simple-card:hover { transform: translateY(-3px); border-color: rgba(7,88,216,.34); box-shadow: 0 22px 50px rgba(6,27,54,.065); } .about-mvv-simple-icon { width: 54px; height: 54px; margin: 0 auto 22px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #f8fbff, #edf5ff); border: 1px solid #c8dcfb; color: var(--primary); font-size: 28px; font-weight: 900; line-height: 1; } .about-mvv-simple-card h3 { margin: 0 0 14px; color: var(--dark); font-size: clamp(1.35rem, 1.8vw, 1.75rem); line-height: 1.08; letter-spacing: -.035em; } .about-mvv-simple-card p, .about-mvv-simple-copy, .about-mvv-simple-copy p { margin: 0 auto; max-width: 280px; color: #20375b; font-size: 1rem; line-height: 1.62; } html[dir="rtl"] .about-mvv-simple-head { text-align: right; } html[dir="rtl"] .about-mvv-simple-card { text-align: center; } @media (max-width: 860px) { .about-mvv-simple-head { text-align: center; } html[dir="rtl"] .about-mvv-simple-head { text-align: center; } .about-mvv-simple-card { flex-basis: min(100%, 420px); } } @media (max-width: 520px) { .about-mvv-simple-card { flex-basis: 100%; min-height: auto; padding: 28px 22px; } } /* Upgrade 48 — Project detail slideshow gallery */ .project-gallery-card { width: 100%; border: 1px solid #d7e5fb; border-radius: 24px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 18px 45px rgba(6, 27, 54, .06); padding: 18px; } .project-gallery-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; } .project-gallery-heading h3 { margin: 6px 0 0; font-size: 1.28rem; line-height: 1.15; letter-spacing: -.025em; } .project-gallery-count { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border: 1px solid #d6e6fb; border-radius: 999px; color: #0758d8; background: #fff; font-size: .82rem; font-weight: 900; } .project-slideshow { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid #cfe0f8; background: #eaf3ff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); } .project-slides { position: relative; aspect-ratio: 4 / 3; min-height: 260px; } .project-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity .28s ease, transform .28s ease, visibility .28s ease; background: linear-gradient(135deg, #eaf3ff, #d9ebff); } .project-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); z-index: 1; } .project-slide img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .project-slide-placeholder { display: grid; place-items: center; padding: 20px; } .project-slide-placeholder .placeholder-img { width: 100%; height: 100%; min-height: 220px; border-radius: 16px; } .project-slide-control { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(6, 27, 54, .62); color: #fff; display: grid; place-items: center; font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 12px 30px rgba(6, 27, 54, .18); transition: transform .2s ease, background .2s ease; } .project-slide-control:hover, .project-slide-control:focus-visible { background: #0758d8; transform: translateY(-50%) scale(1.06); outline: none; } .project-slide-control.prev { left: 12px; } .project-slide-control.next { right: 12px; } .project-gallery-caption { display: grid; gap: 3px; margin-top: 12px; padding: 14px 16px; border: 1px solid #dbe8fb; border-radius: 16px; background: #fff; } .project-gallery-caption strong { color: var(--dark); font-size: 1rem; line-height: 1.25; } .project-gallery-caption span { color: #617494; font-size: .9rem; line-height: 1.45; } .project-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .project-gallery-thumb { width: 58px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 12px; background: #eaf3ff; overflow: hidden; cursor: pointer; opacity: .72; transition: opacity .2s ease, border-color .2s ease, transform .2s ease; } .project-gallery-thumb img, .project-gallery-thumb span { width: 100%; height: 100%; display: block; object-fit: cover; } .project-gallery-thumb span { background: linear-gradient(135deg,#eaf3ff,#cfe4ff); } .project-gallery-thumb.is-active, .project-gallery-thumb:hover, .project-gallery-thumb:focus-visible { opacity: 1; border-color: #0758d8; transform: translateY(-1px); outline: none; } @media (max-width: 1000px) { .project-slides { min-height: 320px; } } @media (max-width: 680px) { .project-gallery-card { padding: 14px; border-radius: 20px; } .project-gallery-heading { display: block; } .project-gallery-count { margin-top: 10px; } .project-slides { aspect-ratio: 1 / .78; min-height: 230px; } .project-slide-control { width: 38px; height: 38px; font-size: 26px; } .project-gallery-thumb { width: 52px; height: 40px; } } html[dir="rtl"] .project-gallery-heading, html[dir="rtl"] .project-gallery-caption { text-align: right; } html[dir="rtl"] .project-slide-control.prev { left: auto; right: 12px; } html[dir="rtl"] .project-slide-control.next { right: auto; left: 12px; } /* Upgrade 49 — minimal project detail page with large responsive slideshow */ .project-detail-page { background: radial-gradient(circle at 0 24%, rgba(7, 88, 216, .045), transparent 24%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); } .project-detail-hero { position: relative; isolation: isolate; min-height: 300px; padding: 42px 0 42px; color: #fff; background: linear-gradient(90deg, rgba(4, 18, 37, .96), rgba(4, 41, 94, .86) 52%, rgba(7, 88, 216, .70)), var(--project-hero-bg, linear-gradient(135deg, #061b36, #0758d8)); background-size: cover; background-position: center; overflow: hidden; } .project-detail-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,18,37,.92), rgba(4,18,37,.72) 40%, rgba(4,18,37,.18)), var(--project-hero-bg, none); background-size: cover; background-position: center; opacity: .86; } .project-detail-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px; opacity: .26; } .project-detail-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 22px; color: rgba(255,255,255,.78); font-size: .92rem; } .project-detail-breadcrumb a { color: rgba(255,255,255,.92); text-decoration: none; } .project-detail-breadcrumb a:hover { color: #fff; text-decoration: underline; } .project-detail-hero-copy { max-width: 760px; } .project-detail-hero-copy h1 { margin: 0; max-width: 820px; color: #fff; font-size: clamp(2.25rem, 4vw, 4.4rem); line-height: .98; letter-spacing: -.045em; } .project-detail-hero-copy p { margin: 18px 0 0; max-width: 680px; color: rgba(255,255,255,.88); font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.65; } .project-detail-meta { display: flex; flex-wrap: wrap; gap: 0; margin-top: 26px; color: #fff; font-weight: 800; } .project-detail-meta span { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; min-height: 28px; border-inline-end: 1px solid rgba(255,255,255,.28); } .project-detail-meta span:first-child { padding-inline-start: 0; } .project-detail-meta span:last-child { border-inline-end: 0; } .project-detail-meta i { font-style: normal; opacity: .9; color: #d9ebff; } .project-gallery-showcase-section { position: relative; z-index: 2; padding: 0 0 18px; margin-top: -34px; } .project-gallery-showcase { width: 100%; padding: 0; border: 0; border-radius: 18px; background: transparent; box-shadow: 0 24px 60px rgba(6, 27, 54, .14); } .project-gallery-showcase .project-slideshow { border-radius: 18px; border: 1px solid rgba(207, 224, 248, .9); background: #eaf3ff; overflow: hidden; } .project-gallery-showcase .project-slides { aspect-ratio: 21 / 7.2; min-height: 380px; } .project-gallery-showcase .project-slide img { width: 100%; height: 100%; object-fit: cover; } .project-gallery-showcase .project-slide::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(180deg, transparent 0%, rgba(4, 18, 37, .74) 100%); z-index: 2; pointer-events: none; } .project-gallery-showcase .project-gallery-count { position: absolute; z-index: 6; top: 18px; left: 18px; border: 0; color: #fff; background: rgba(4, 18, 37, .58); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(6, 27, 54, .14); } .project-gallery-showcase .project-slide-control { width: 54px; height: 54px; border: 0; background: rgba(255,255,255,.94); color: #0758d8; font-size: 38px; } .project-gallery-showcase .project-slide-control.prev { left: 26px; } .project-gallery-showcase .project-slide-control.next { right: 26px; } .project-gallery-showcase .project-slide-control:hover, .project-gallery-showcase .project-slide-control:focus-visible { color: #fff; background: #0758d8; } .project-gallery-showcase .project-gallery-caption { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: block; margin: 0; padding: 28px 34px 24px; border: 0; border-radius: 0; background: linear-gradient(180deg, transparent, rgba(4, 18, 37, .78)); color: #fff; } .project-gallery-showcase .project-gallery-caption strong { display: block; color: #fff; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.2; } .project-gallery-showcase .project-gallery-caption span { display: block; margin-top: 4px; color: rgba(255,255,255,.84); font-size: .96rem; } .project-gallery-showcase .project-gallery-thumbs { position: absolute; z-index: 7; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 10px; margin: 0; } .project-gallery-showcase .project-gallery-thumb { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(255,255,255,.88); background: rgba(255,255,255,.88); opacity: 1; box-shadow: 0 6px 18px rgba(6, 27, 54, .16); } .project-gallery-showcase .project-gallery-thumb img, .project-gallery-showcase .project-gallery-thumb span { display: none; } .project-gallery-showcase .project-gallery-thumb.is-active, .project-gallery-showcase .project-gallery-thumb:hover, .project-gallery-showcase .project-gallery-thumb:focus-visible { width: 14px; height: 14px; border-color: #fff; background: #0758d8; transform: translateY(-1px); } .project-detail-content-section { padding-top: 28px; } .project-detail-main-grid { display: grid; grid-template-columns: 1.2fr 1.05fr 1fr; gap: 22px; align-items: stretch; } .project-detail-info-card { padding: 28px; border: 1px solid #dfe9f8; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 18px 42px rgba(6, 27, 54, .045); } .project-detail-card-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .project-detail-card-icon, .project-quality-icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #0758d8; background: #eaf3ff; border: 1px solid #cfe0f8; font-size: 1.25rem; font-weight: 900; } .project-detail-card-head .eyebrow { display: block; } .project-detail-card-head h2, .project-deliverables-head h2 { margin: 6px 0 0; color: var(--dark); font-size: clamp(1.2rem, 1.5vw, 1.55rem); line-height: 1.15; letter-spacing: -.025em; } .project-detail-rich-text { color: #071c3a; line-height: 1.72; } .project-detail-rich-text p:first-child { margin-top: 0; } .project-detail-rich-text p:last-child { margin-bottom: 0; } .project-detail-service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .project-facts-table { margin: 0; } .project-facts-table div { display: grid; grid-template-columns: minmax(95px, .7fr) minmax(0, 1fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid #e4edf9; } .project-facts-table div:last-child { border-bottom: 0; } .project-facts-table dt { color: #071c3a; font-weight: 900; } .project-facts-table dd { margin: 0; color: #203b62; } .project-status-pill { color: #0b9d50 !important; font-weight: 900; } .project-scope-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .project-scope-list li { position: relative; padding-inline-start: 24px; color: #071c3a; line-height: 1.45; } .project-scope-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; color: #0758d8; font-weight: 900; } .project-deliverables-strip, .project-quality-strip { margin-top: 22px; border: 1px solid #dfe9f8; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 18px 42px rgba(6, 27, 54, .04); } .project-deliverables-strip { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; padding: 22px 24px; } .project-deliverables-head { display: flex; align-items: flex-start; gap: 14px; } .project-deliverables-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; } .project-deliverable-item { min-height: 82px; display: grid; align-content: center; gap: 3px; padding: 0 18px; border-inline-start: 1px solid #dfe9f8; } .project-deliverable-item span { color: #0758d8; font-weight: 900; font-size: 1.18rem; } .project-deliverable-item strong { color: var(--dark); font-size: .95rem; line-height: 1.3; } .project-deliverable-item small { color: #637695; line-height: 1.35; } .project-quality-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,248,255,.94)); } .project-quality-strip > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; row-gap: 3px; padding: 24px 28px; border-inline-start: 1px solid #dfe9f8; } .project-quality-strip > div:first-child { border-inline-start: 0; } .project-quality-icon { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; } .project-quality-strip strong { align-self: end; color: var(--dark); font-size: 1rem; } .project-quality-strip small { color: #637695; line-height: 1.4; } html[dir="rtl"] .project-detail-breadcrumb, html[dir="rtl"] .project-detail-card-head, html[dir="rtl"] .project-deliverables-head { direction: rtl; } html[dir="rtl"] .project-gallery-showcase .project-gallery-count { left: auto; right: 18px; } @media (max-width: 1180px) { .project-gallery-showcase .project-slides { aspect-ratio: 16 / 7.5; min-height: 340px; } .project-detail-main-grid { grid-template-columns: 1fr 1fr; } .project-scope-card { grid-column: 1 / -1; } .project-deliverables-strip { grid-template-columns: 1fr; } .project-deliverables-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } .project-quality-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-quality-strip > div:nth-child(3) { border-inline-start: 0; border-top: 1px solid #dfe9f8; } .project-quality-strip > div:nth-child(4) { border-top: 1px solid #dfe9f8; } } @media (max-width: 760px) { .project-detail-hero { min-height: auto; padding: 34px 0 58px; } .project-detail-meta span { width: 100%; padding: 8px 0; border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,.18); } .project-gallery-showcase-section { margin-top: -26px; } .project-gallery-showcase .project-slides { aspect-ratio: 1.25 / 1; min-height: 260px; } .project-gallery-showcase .project-gallery-caption { padding: 22px 18px 20px; } .project-gallery-showcase .project-gallery-caption span { display: none; } .project-gallery-showcase .project-slide-control { width: 42px; height: 42px; font-size: 30px; } .project-gallery-showcase .project-slide-control.prev { left: 12px; } .project-gallery-showcase .project-slide-control.next { right: 12px; } .project-detail-main-grid, .project-deliverables-items, .project-quality-strip { grid-template-columns: 1fr; } .project-detail-info-card, .project-deliverables-strip { padding: 22px; } .project-facts-table div { grid-template-columns: 1fr; gap: 4px; } .project-deliverable-item, .project-quality-strip > div, .project-quality-strip > div:nth-child(3), .project-quality-strip > div:nth-child(4) { border-inline-start: 0; border-top: 1px solid #dfe9f8; padding: 18px 0; } .project-deliverable-item:first-child, .project-quality-strip > div:first-child { border-top: 0; } .project-quality-strip { padding: 0 22px; } .project-quality-strip > div { grid-template-columns: 50px minmax(0, 1fr); } } /* Upgrade 50 — project gallery safe distance and gallery-only slideshow */ .project-gallery-showcase-section { margin-top: 0; padding: 42px 0 34px; } .project-detail-hero { padding-bottom: 48px; } .project-gallery-showcase { box-shadow: 0 20px 54px rgba(6, 27, 54, .10); } .project-gallery-showcase .project-slides { aspect-ratio: 21 / 7.6; } .project-detail-content-section { padding-top: 24px; } @media (max-width: 760px) { .project-gallery-showcase-section { margin-top: 0; padding: 28px 0 26px; } .project-detail-hero { padding-bottom: 38px; } } /* Upgrade 51 — restructured project overview with stakeholder logos */ .project-overview-section { padding-top: 34px; } .project-overview-intro { max-width: 850px; margin-bottom: 30px; } .project-overview-intro .eyebrow { position: relative; display: inline-block; padding-bottom: 12px; margin-bottom: 14px; } .project-overview-intro .eyebrow::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 52px; height: 3px; border-radius: 999px; background: #0758d8; } .project-overview-intro h2 { margin: 0; max-width: 780px; color: var(--dark); font-size: clamp(2rem, 4vw, 3.75rem); line-height: 1.02; letter-spacing: -.045em; } .project-overview-intro p { max-width: 690px; margin: 16px 0 0; color: #556a89; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.75; } .project-overview-layout { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.35fr); gap: 28px; align-items: stretch; } .project-overview-card { position: relative; overflow: hidden; border: 1px solid #dce9fb; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(6,27,54,.055); } .project-description-panel { display: flex; flex-direction: column; min-height: 435px; padding: clamp(26px, 3vw, 34px); isolation: isolate; } .project-description-panel.has-frosted-visual::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--project-description-bg); background-size: cover; background-position: center; opacity: .62; transform: scale(1.06); filter: blur(1.8px) saturate(.9) contrast(.96); } .project-description-panel.has-frosted-visual::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.58) 44%, rgba(255,255,255,.70) 100%), radial-gradient(circle at top left, rgba(255,255,255,.42), transparent 42%), radial-gradient(circle at bottom right, rgba(7,88,216,.12), transparent 38%); backdrop-filter: blur(7px) saturate(1.08); -webkit-backdrop-filter: blur(7px) saturate(1.08); } .project-glance-panel { padding: clamp(26px, 3vw, 38px); } .project-overview-card-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; margin-bottom: 28px; } .project-overview-icon { flex: 0 0 auto; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: #0758d8; background: linear-gradient(180deg, #edf6ff, #e8f2ff); border: 1px solid #cfe0f8; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); font-size: 1.5rem; font-weight: 900; } .project-overview-card-head h3 { margin: 0; color: var(--dark); font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.12; letter-spacing: -.03em; } .project-overview-card-head span:not(.project-overview-icon) { display: block; width: 50px; height: 3px; margin-top: 12px; border-radius: 999px; background: #0758d8; } .project-overview-description { position: relative; z-index: 2; max-width: 100%; color: #203b62; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.82; } .project-overview-description p:last-child { margin-bottom: 0; } .project-overview-blueprint { position: absolute; inset-inline: clamp(18px, 3vw, 34px); bottom: 10px; height: 190px; color: #0b72e7; opacity: .15; pointer-events: none; z-index: 0; } .project-overview-blueprint svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .project-stakeholder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 28px; } .project-stakeholder-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: center; min-height: 116px; padding: 22px; border: 1px solid #cfe0f8; border-radius: 18px; background: linear-gradient(135deg, rgba(239,247,255,.96), rgba(255,255,255,.96)); } .project-stakeholder-card.contractor-card { border-color: #ccebd9; background: linear-gradient(135deg, rgba(240,253,246,.96), rgba(255,255,255,.96)); } .project-stakeholder-logo { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid rgba(207,224,248,.95); box-shadow: 0 14px 34px rgba(6,27,54,.08); overflow: hidden; } .project-stakeholder-logo img { width: 78%; height: 78%; object-fit: contain; } .project-stakeholder-logo span { color: #0758d8; font-size: 2rem; font-weight: 900; } .contractor-card .project-stakeholder-logo span { color: #0ba259; } .project-stakeholder-card small { display: block; margin-bottom: 6px; color: #0758d8; font-size: .78rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; } .contractor-card small { color: #0ba259; } .project-stakeholder-card strong { display: block; color: var(--dark); font-size: clamp(1.05rem, 1.55vw, 1.45rem); line-height: 1.16; letter-spacing: -.02em; } .project-glance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid #dce9fb; } .project-glance-grid div { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 22px 20px; border-bottom: 1px solid #dce9fb; border-inline-end: 1px solid #dce9fb; } .project-glance-grid div:nth-child(3n), .project-glance-grid div:last-child { border-inline-end: 0; } .project-glance-icon { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #0758d8; background: #eef6ff; border: 1px solid #d6e7fb; font-size: 1.25rem; font-weight: 900; } .project-glance-icon.status { color: #0ba259; background: #effbf4; border-color: #ccebd9; } .project-glance-grid dt { color: #637695; font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .project-glance-grid dd { margin: 0; color: #071c3a; font-weight: 800; line-height: 1.3; } .project-glance-grid .project-status-pill { color: #0ba259 !important; } html[dir="rtl"] .project-overview-card-head, html[dir="rtl"] .project-stakeholder-card, html[dir="rtl"] .project-glance-grid div { direction: rtl; } @media (max-width: 1180px) { .project-overview-layout { grid-template-columns: 1fr; } .project-description-panel { min-height: 320px; } } @media (max-width: 860px) { .project-stakeholder-grid, .project-glance-grid { grid-template-columns: 1fr; } .project-glance-grid div, .project-glance-grid div:nth-child(3n) { border-inline-end: 0; } .project-overview-intro h2 { font-size: clamp(1.8rem, 10vw, 2.65rem); } } @media (max-width: 720px) { .project-description-panel { min-height: 360px; } .project-description-panel.has-frosted-visual::before { background-position: center; opacity: .56; } } @media (max-width: 560px) { .project-overview-section { padding-top: 18px; } .project-description-panel, .project-glance-panel { padding: 22px; border-radius: 18px; } .project-description-panel { min-height: 320px; } .project-overview-card-head { gap: 14px; } .project-overview-icon { width: 52px; height: 52px; border-radius: 15px; } .project-stakeholder-card { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; min-height: auto; padding: 16px; } .project-stakeholder-logo { width: 58px; height: 58px; } .project-glance-grid div { padding: 18px 0; } } /* Upgrade 59 — modern services list page */ .services-modern-page { background: radial-gradient(circle at 0 18%, rgba(7, 88, 216, .045), transparent 30%), radial-gradient(circle at 100% 24%, rgba(7, 88, 216, .035), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); } .services-modern-hero { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 74px) 0 clamp(28px, 4vw, 46px); text-align: center; border-bottom: 1px solid #e6eefb; background: radial-gradient(circle at top left, rgba(7, 88, 216, .06), transparent 34%), radial-gradient(circle at bottom right, rgba(0, 166, 223, .045), transparent 34%), #fff; } .services-modern-hero::before, .services-modern-hero::after { content: ""; position: absolute; width: 520px; height: 160px; opacity: .22; background: repeating-radial-gradient(ellipse at center, rgba(7, 88, 216, .32) 0 1px, transparent 1px 10px); pointer-events: none; } .services-modern-hero::before { left: -180px; top: 0; transform: rotate(-8deg); } .services-modern-hero::after { right: -170px; bottom: 8px; transform: rotate(10deg); } .services-modern-hero .container { position: relative; z-index: 1; } .services-modern-hero .eyebrow { color: #0758d8; } .services-modern-hero h1 { margin: 10px auto 12px; max-width: 780px; color: var(--dark); font-size: clamp(2.35rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -.045em; } .services-modern-hero p { max-width: 700px; margin: 0 auto; color: #566b8d; font-size: clamp(1rem, 1.25vw, 1.16rem); line-height: 1.7; } .services-modern-section { padding-top: 28px; } .services-filter-bar { display: grid; grid-template-columns: minmax(260px, 1.6fr) minmax(210px, .75fr) minmax(190px, .65fr) minmax(160px, .45fr); gap: 20px; align-items: stretch; margin-bottom: 30px; padding: 18px; border: 1px solid #dce9fb; border-radius: 18px; background: rgba(255, 255, 255, .86); box-shadow: 0 18px 54px rgba(6, 27, 54, .055); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .services-search-field, .services-select-field { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; min-height: 58px; border: 1px solid #dce9fb; border-radius: 14px; background: #fff; overflow: hidden; } .services-filter-icon { display: grid; place-items: center; height: 100%; color: #0758d8; background: #f1f7ff; font-size: 1.25rem; font-weight: 900; } .services-search-field input, .services-select-field select { width: 100%; height: 100%; min-height: 58px; border: 0; outline: 0; padding: 0 18px; color: #071c3a; background: transparent; font: inherit; font-weight: 800; } .services-search-field input { font-weight: 500; } .services-search-field input::placeholder { color: #8897ad; } .services-select-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #071c3a 50%), linear-gradient(135deg, #071c3a 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-inline-end: 42px; cursor: pointer; } .services-search-btn { width: 100%; min-height: 58px; justify-content: center; border-radius: 12px; box-shadow: 0 12px 30px rgba(7, 88, 216, .18); } .services-modern-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .service-modern-card { position: relative; display: flex; min-height: 440px; flex-direction: column; overflow: hidden; border: 1px solid #dce9fb; border-radius: 18px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 18px 44px rgba(6, 27, 54, .055); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .service-modern-card:hover, .service-modern-card:focus-visible { transform: translateY(-5px); border-color: #b9d2f4; box-shadow: 0 24px 70px rgba(6, 27, 54, .12); } .service-card-thumb { position: relative; height: 170px; overflow: hidden; background: linear-gradient(135deg, rgba(7, 88, 216, .12), rgba(255, 255, 255, .58)), #eaf3ff; } .service-card-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.58) 100%); } .service-card-thumb img, .service-card-thumb-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; } .service-modern-card:hover .service-card-thumb img, .service-modern-card:focus-visible .service-card-thumb img { transform: scale(1.04); } .service-card-thumb-placeholder { background: linear-gradient(135deg, rgba(7, 88, 216, .10), rgba(0, 166, 223, .08)), repeating-linear-gradient(90deg, rgba(7,88,216,.10) 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, rgba(7,88,216,.08) 0 1px, transparent 1px 38px), #f3f8ff; } .service-card-icon { position: absolute; top: 142px; inset-inline-start: 24px; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #d7e6fb; border-radius: 16px; color: #0758d8; background: rgba(255,255,255,.92); box-shadow: 0 16px 40px rgba(6, 27, 54, .10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 1.55rem; font-weight: 900; } .service-card-body { display: flex; flex: 1; flex-direction: column; padding: 50px 28px 28px; } .service-card-body h3 { margin: 0 0 14px; color: var(--dark); font-size: clamp(1.25rem, 1.65vw, 1.68rem); line-height: 1.12; letter-spacing: -.03em; } .service-card-badge { align-self: flex-start; margin-bottom: 14px; color: #0758d8; background: #e9f3ff; } .service-card-body p { margin: 0; color: #203b62; line-height: 1.58; font-size: 1rem; } .service-card-arrow { margin-top: auto; padding-top: 24px; color: #0758d8; font-size: 1.45rem; font-weight: 900; line-height: 1; } .services-empty-state { grid-column: 1 / -1; padding: 48px; border: 1px solid #dce9fb; border-radius: 18px; background: #fff; text-align: center; } html[dir="rtl"] .services-select-field select { background-position: 22px 50%, 16px 50%; padding-inline-end: 18px; padding-inline-start: 42px; } html[dir="rtl"] .service-card-icon { inset-inline-start: auto; inset-inline-end: 24px; } @media (max-width: 1200px) { .services-filter-bar { grid-template-columns: 1fr 1fr; } .services-modern-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .services-modern-hero { padding-top: 38px; } .services-filter-bar { grid-template-columns: 1fr; gap: 14px; padding: 14px; } .services-modern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-modern-card { min-height: 405px; } } @media (max-width: 560px) { .services-modern-hero { text-align: start; } .services-modern-hero h1, .services-modern-hero p { margin-inline: 0; } .services-search-field, .services-select-field { grid-template-columns: 52px minmax(0, 1fr); min-height: 54px; } .services-search-field input, .services-select-field select, .services-search-btn { min-height: 54px; } .services-modern-grid { grid-template-columns: 1fr; } .service-card-thumb { height: 185px; } .service-card-icon { top: 152px; } } /* Upgrade 60 — services hero image parallax */ .services-modern-hero.has-parallax-hero { min-height: clamp(340px, 42vw, 520px); display: flex; align-items: center; color: #fff; border-bottom: 0; background: linear-gradient(90deg, rgba(4, 18, 37, .90) 0%, rgba(4, 18, 37, .70) 44%, rgba(4, 18, 37, .36) 100%), var(--services-hero-bg); background-size: cover; background-position: center; background-attachment: fixed; } .services-modern-hero.has-parallax-hero::before, .services-modern-hero.has-parallax-hero::after { opacity: .16; background: radial-gradient(circle at center, rgba(255,255,255,.42) 0 1px, transparent 1px 9px); } .services-modern-hero.has-parallax-hero .eyebrow { color: #bcd8ff; } .services-modern-hero.has-parallax-hero h1, .services-modern-hero.has-parallax-hero p { color: #fff; text-shadow: 0 14px 36px rgba(0,0,0,.28); } .service-detail-hero.has-parallax-hero { background: linear-gradient(90deg, rgba(4, 18, 37, .94) 0%, rgba(4, 18, 37, .76) 44%, rgba(4, 18, 37, .34) 100%), var(--service-hero-bg); background-size: cover; background-position: center; background-attachment: fixed; } .service-detail-hero.has-parallax-hero .hero-content { position: relative; z-index: 2; } @media (max-width: 980px), (prefers-reduced-motion: reduce) { .services-modern-hero.has-parallax-hero, .service-detail-hero.has-parallax-hero { background-attachment: scroll; } } @media (max-width: 560px) { .services-modern-hero.has-parallax-hero { min-height: 360px; text-align: start; background-position: center; } .service-detail-hero.has-parallax-hero { background-position: center; } } /* Upgrade 61 — realtime services filtering and 3-card desktop grid */ .services-modern-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .services-results-summary { min-height: 20px; margin: -10px 0 18px; color: #637695; font-size: .92rem; font-weight: 800; } .service-modern-card[hidden], .services-live-empty[hidden] { display: none !important; } .services-live-empty { grid-column: 1 / -1; } @media (max-width: 1200px) { .services-modern-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px) { .services-modern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .services-modern-grid { grid-template-columns: 1fr; } .services-results-summary { margin-top: -6px; } } /* CMS page-section priority ordering */ .cms-section-sort { display: flex; flex-direction: column; } .cms-section-sort > [data-page-section] { order: var(--section-order, 100); } /* Admin-only frontend consistency helper for enabled-but-empty CMS sections */ .cms-admin-empty-section { width: 100%; border-style: dashed; background: rgba(255, 255, 255, .82); } .cms-admin-empty-section strong { display: block; color: var(--dark); margin-bottom: 8px; } .cms-admin-empty-section p { margin: 0; color: var(--muted); } .card[style*="color:white"] .cms-admin-empty-section, [style*="color:white"] .cms-admin-empty-section { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); } .card[style*="color:white"] .cms-admin-empty-section strong, [style*="color:white"] .cms-admin-empty-section strong, .card[style*="color:white"] .cms-admin-empty-section p, [style*="color:white"] .cms-admin-empty-section p { color: #fff; } /* Upgrade 80: Contact page — minimal structured responsive layout with admin-editable Google map */ .contact-page-v2 { background: radial-gradient(circle at 8% 18%, rgba(7, 88, 216, .055), transparent 34%), radial-gradient(circle at 95% 42%, rgba(0, 166, 223, .055), transparent 30%), #fff; } .contact-hero { min-height: 430px; display: flex; align-items: center; position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 40%, rgba(226,240,255,.55) 100%), linear-gradient(135deg, #f7fbff, #dceeff); border-bottom: 1px solid rgba(204, 221, 241, .8); } .contact-hero.has-contact-hero-image { background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 39%, rgba(255,255,255,.66) 60%, rgba(6, 26, 52, .18) 100%), var(--contact-hero-bg); background-size: cover; background-position: center; background-attachment: fixed; } .contact-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.9)); pointer-events: none; } .contact-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: clamp(26px, 5vw, 70px); padding: clamp(58px, 8vw, 105px) 0; } .contact-hero-copy { max-width: 720px; } .contact-hero-copy h1 { max-width: 760px; font-size: clamp(42px, 5.6vw, 78px); } .contact-hero-copy p { max-width: 650px; font-size: clamp(17px, 1.5vw, 21px); color: #395372; } .contact-hero-panel { border: 1px solid rgba(7, 88, 216, .22); border-radius: 22px; padding: 28px; background: rgba(255,255,255,.82); box-shadow: 0 18px 50px rgba(6, 27, 54, .09); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .contact-hero-panel span, .contact-map-side-card .eyebrow, .contact-section-head .eyebrow, .contact-form-head .eyebrow { display: inline-block; } .contact-hero-panel strong { display: block; font-size: 28px; line-height: 1.05; margin: 10px 0 14px; letter-spacing: -.04em; } .contact-hero-panel p { color: #526784; margin: 0; } .contact-intro-form-section { padding-top: clamp(48px, 7vw, 86px); } .contact-intro-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr); gap: 28px; align-items: start; } .contact-intro-card, .contact-form-card, .contact-map-side-card, .contact-office-card, .contact-method-card, .contact-hours-card, .contact-faq-card { border: 1px solid #dbe8f7; background: rgba(255,255,255,.94); box-shadow: 0 16px 44px rgba(6,27,54,.055); } .contact-intro-card, .contact-form-card { border-radius: 24px; padding: clamp(26px, 4vw, 42px); } .contact-intro-card { min-height: 100%; background: radial-gradient(circle at 100% 0%, rgba(7,88,216,.09), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,251,255,.92)); } .contact-intro-card h2, .contact-form-card h2, .contact-map-head h2, .contact-section-head h2, .contact-hours-card h2 { margin-bottom: 14px; } .contact-intro-card p, .contact-form-head p, .contact-map-head p { color: #5f7190; } .contact-mini-methods { display: grid; gap: 14px; margin-top: 30px; } .contact-mini-method, .contact-method-card { display: flex; align-items: center; gap: 15px; border-radius: 18px; padding: 17px 18px; color: inherit; } .contact-mini-method { border: 1px solid #dbe8f7; background: #fff; } .contact-mini-method span, .contact-method-icon, .contact-office-pin { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 16px; display: grid; place-items: center; background: #ebf5ff; color: var(--primary); font-size: 20px; font-weight: 900; } .contact-mini-method strong, .contact-method-card strong { display: block; line-height: 1.1; } .contact-mini-method small, .contact-method-card small, .contact-office-card small { display: block; color: #657691; margin-top: 5px; overflow-wrap: anywhere; } .contact-form-card { background: #fff; } .contact-form-head { margin-bottom: 22px; } .contact-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .contact-form-fields .full { grid-column: 1 / -1; } .contact-form-fields label, .contact-form-card label { display: block; font-weight: 800; color: #0a2346; margin-bottom: 7px; } .contact-form-card input, .contact-form-card select, .contact-form-card textarea { border-radius: 14px; background: #fbfdff; border-color: #d7e4f5; } .contact-form-card textarea { min-height: 160px; } .contact-consent { display: flex !important; align-items: center; gap: 11px; margin: 18px 0; font-weight: 700 !important; color: #304762; } .contact-consent input { width: auto; flex: 0 0 auto; } .contact-submit-btn { width: 100%; } .contact-section-head, .contact-map-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; } .contact-section-head > *:first-child, .contact-map-head > *:first-child { max-width: 720px; } .contact-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .contact-method-card { min-height: 112px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .contact-method-card:hover { transform: translateY(-3px); border-color: rgba(7,88,216,.38); box-shadow: 0 20px 52px rgba(6,27,54,.09); } .contact-map-section { padding-top: clamp(48px, 7vw, 86px); padding-bottom: clamp(52px, 8vw, 96px); background: linear-gradient(180deg, rgba(246,251,255,.35), rgba(235,246,255,.74)); border-block: 1px solid rgba(210,226,245,.7); } .contact-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 345px; gap: 20px; align-items: stretch; } .contact-map-frame { min-height: clamp(430px, 54vw, 620px); border: 1px solid #cfe0f4; border-radius: 28px; overflow: hidden; background: #e8f3ff; box-shadow: 0 24px 70px rgba(6,27,54,.10); } .contact-map-frame iframe { width: 100%; height: 100%; min-height: clamp(430px, 54vw, 620px); display: block; border: 0; } .contact-map-placeholder { height: 100%; min-height: clamp(430px, 54vw, 620px); display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; color: #43607f; padding: 28px; } .contact-map-placeholder span { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 24px; background: white; color: var(--primary); font-size: 34px; } .contact-map-side-card { border-radius: 28px; padding: 30px; align-self: stretch; } .contact-map-side-card h3 { margin-top: 12px; } .contact-map-side-card p { color: #526784; overflow-wrap: anywhere; } .contact-map-side-card .btn { width: 100%; margin-top: 8px; } .contact-office-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .contact-office-card { position: relative; border-radius: 22px; padding: 28px 28px 28px 96px; } .contact-office-pin { position: absolute; left: 28px; top: 28px; } .contact-office-card p { color: #556b87; } .contact-hours-card { border-radius: 24px; padding: 30px; display: grid; grid-template-columns: 330px 1fr; gap: 24px; align-items: start; } .contact-hours-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .contact-hours-list p { margin: 0; padding: 16px 18px; border-radius: 16px; background: #f5faff; border: 1px solid #dce9f8; } .contact-hours-list strong, .contact-hours-list span { display: block; } .contact-hours-list span { color: #5a6f8d; margin-top: 3px; } .contact-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .contact-faq-card { border-radius: 20px; padding: 22px 24px; } .contact-faq-card summary { cursor: pointer; font-weight: 900; color: #071f42; } .contact-faq-card div { margin-top: 14px; color: #566b87; } @media (max-width: 1100px) { .contact-hero.has-contact-hero-image { background-attachment: scroll; } .contact-hero-inner, .contact-intro-grid, .contact-map-layout, .contact-hours-card { grid-template-columns: 1fr; } .contact-hero-panel { max-width: 520px; } } @media (max-width: 820px) { .contact-hero-inner { padding: 52px 0; } .contact-hero-panel { padding: 22px; } .contact-section-head, .contact-map-head { display: grid; align-items: start; } .contact-method-grid, .contact-office-grid, .contact-hours-list, .contact-faq-grid, .contact-form-fields { grid-template-columns: 1fr; } .contact-office-card { padding-left: 82px; } .contact-map-frame, .contact-map-frame iframe, .contact-map-placeholder { min-height: 360px; } } @media (max-width: 520px) { .contact-intro-card, .contact-form-card, .contact-map-side-card, .contact-hours-card { border-radius: 20px; padding: 22px; } .contact-map-frame { border-radius: 20px; } .contact-office-card { padding: 24px; } .contact-office-pin { position: static; margin-bottom: 14px; } } @media (prefers-reduced-motion: reduce) { .contact-hero.has-contact-hero-image { background-attachment: scroll; } } /* Upgrade 81: Contact page cleanup — remove duplicate contact blocks and strengthen hero parallax */ .contact-hero.contact-hero-parallax { min-height: clamp(470px, 54vw, 620px); background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; } .contact-hero.contact-hero-parallax::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 22% 28%, rgba(255,255,255,.42), transparent 30%), linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.91) 40%, rgba(255,255,255,.58) 62%, rgba(6,26,52,.22) 100%); pointer-events: none; } .contact-hero.contact-hero-parallax .contact-hero-inner { z-index: 2; } .contact-intake-card { overflow: hidden; } .contact-intake-card::after { content: ""; position: absolute; right: -72px; bottom: -72px; width: 210px; height: 210px; border-radius: 999px; border: 42px solid rgba(7,88,216,.06); pointer-events: none; } .contact-intake-list { position: relative; z-index: 1; display: grid; gap: 14px; margin-top: 30px; } .contact-intake-list article { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; padding: 18px; border: 1px solid #dce9f8; border-radius: 18px; background: rgba(255,255,255,.84); box-shadow: 0 10px 30px rgba(6,27,54,.04); } .contact-intake-list article > span { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: #ebf5ff; color: var(--primary); font-weight: 900; letter-spacing: -.04em; } .contact-intake-list strong, .contact-map-actions-note strong { display: block; color: #071f42; line-height: 1.15; } .contact-intake-list small, .contact-map-actions-note small { display: block; margin-top: 5px; color: #657691; line-height: 1.55; } .contact-map-section { margin-top: clamp(8px, 2vw, 22px); } .contact-map-side-card { display: flex; flex-direction: column; } .contact-map-actions-note { margin: 18px 0; padding: 18px; border-radius: 18px; background: #f5faff; border: 1px solid #dce9f8; } .contact-map-side-card .btn { margin-top: auto; } .contact-methods-section { padding-top: clamp(34px, 5vw, 64px); } .contact-offices-section { padding-top: clamp(28px, 4vw, 54px); } @media (min-width: 1101px) { .contact-hero.contact-hero-parallax { background-position: center calc(50% - 24px); } } @media (max-width: 1100px) { .contact-hero.contact-hero-parallax { background-attachment: scroll; } } @media (max-width: 520px) { .contact-intake-list article { grid-template-columns: 1fr; } } /* Upgrade 82: Contact page minimal cleanup, no public fallback sections, compact parallax hero */ html, body, .contact-page-v2 { max-width: 100%; overflow-x: hidden; } .contact-page-v2 { background: #fff; } .contact-hero { min-height: clamp(340px, 40vw, 470px); background: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 48%, rgba(232,244,255,.72) 100%), linear-gradient(135deg, #fbfdff, #e8f4ff); } .contact-hero.has-contact-hero-image, .contact-hero.contact-hero-parallax { min-height: clamp(340px, 40vw, 470px); background-image: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 43%, rgba(255,255,255,.70) 66%, rgba(4,18,37,.24) 100%), var(--contact-hero-bg); background-size: cover; background-position: center center; background-attachment: fixed; } .contact-hero.contact-hero-parallax::before { background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.72) 65%, rgba(3,20,42,.16)); } .contact-hero::after { height: 56px; } .contact-hero-inner { display: block; padding: clamp(54px, 7vw, 88px) 0; } .contact-hero-copy { max-width: 820px; } .contact-hero-copy h1 { max-width: 760px; font-size: clamp(42px, 5vw, 68px); line-height: .98; } .contact-hero-copy p { max-width: 640px; font-size: clamp(16px, 1.35vw, 19px); } .contact-hero-panel { display: none; } .contact-intro-form-section { padding-top: clamp(38px, 5vw, 64px); } .contact-intro-grid { grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr); gap: clamp(18px, 3vw, 28px); } .contact-intro-card, .contact-form-card { border-radius: 22px; padding: clamp(24px, 3vw, 34px); } .contact-intro-card { min-height: auto; background: linear-gradient(180deg, #fff, #f8fbff); } .contact-intake-card::after, .contact-intake-list { display: none; } .contact-form-card textarea { min-height: 135px; } .contact-map-section { padding-top: clamp(42px, 6vw, 72px); padding-bottom: clamp(42px, 6vw, 76px); } .contact-map-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); } .contact-map-frame, .contact-map-frame iframe, .contact-map-placeholder { min-height: clamp(360px, 43vw, 500px); } .contact-map-side-card { padding: 26px; } .contact-section-head, .contact-map-head { margin-bottom: 20px; } .contact-method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact-method-card { min-height: 94px; } .contact-hours-card { grid-template-columns: minmax(230px, 300px) 1fr; } @media (max-width: 1100px) { .contact-hero.has-contact-hero-image, .contact-hero.contact-hero-parallax { background-attachment: scroll; } .contact-intro-grid, .contact-map-layout, .contact-hours-card { grid-template-columns: 1fr; } } @media (max-width: 820px) { .contact-hero, .contact-hero.has-contact-hero-image, .contact-hero.contact-hero-parallax { min-height: auto; } .contact-hero-inner { padding: 44px 0; } .contact-method-grid, .contact-hours-list, .contact-faq-grid, .contact-form-fields { grid-template-columns: 1fr; } } /* Upgrade 83: Contact form side panel — no duplicate contact/hour sections */ .contact-page-v2 .contact-intro-form-section { padding-top: clamp(34px, 4vw, 56px); padding-bottom: clamp(38px, 5vw, 66px); } .contact-page-v2 .contact-intro-grid { grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr); align-items: stretch; gap: clamp(20px, 3vw, 34px); } .contact-page-v2 .contact-side-panel { position: relative; display: flex; flex-direction: column; gap: 20px; min-height: 100%; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(7, 88, 216, .08), transparent 38%), linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); box-shadow: 0 22px 70px rgba(6, 27, 54, .06); } .contact-page-v2 .contact-side-panel::after { content: ""; position: absolute; right: -94px; bottom: -94px; width: 230px; height: 230px; border-radius: 999px; border: 42px solid rgba(7, 88, 216, .055); pointer-events: none; } .contact-page-v2 .contact-side-panel > * { position: relative; z-index: 1; } .contact-page-v2 .contact-side-panel h2 { max-width: 430px; margin: 0; font-size: clamp(32px, 3vw, 52px); line-height: .98; letter-spacing: -.06em; } .contact-page-v2 .contact-side-copy { max-width: 470px; margin: -4px 0 4px; color: #526784; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; } .contact-side-group { display: grid; gap: 12px; padding-top: 2px; } .contact-side-label { display: block; color: var(--primary); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .contact-side-list { display: grid; gap: 10px; } .contact-side-item, .contact-side-hour { min-width: 0; display: grid; grid-template-columns: 44px 1fr; gap: 13px; align-items: center; margin: 0; padding: 13px 14px; border: 1px solid #dce9f8; border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 12px 30px rgba(6,27,54,.035); } .contact-side-item:hover { border-color: rgba(7,88,216,.36); transform: translateY(-1px); } .contact-side-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: #ebf5ff; color: var(--primary); font-weight: 900; } .contact-side-item b, .contact-side-hour b { display: block; color: #071f42; font-weight: 900; line-height: 1.15; } .contact-side-item small, .contact-side-hour small { display: block; margin-top: 4px; color: #607693; line-height: 1.35; overflow-wrap: anywhere; } .contact-side-hour { grid-template-columns: 1fr; padding: 13px 16px; } .contact-side-list.compact { gap: 8px; } .contact-page-v2 .contact-form-card { box-shadow: 0 22px 70px rgba(6, 27, 54, .055); } .contact-page-v2 .contact-form-head p { max-width: 620px; } .contact-page-v2 .contact-map-section { margin-top: 0; } @media (max-width: 1100px) { .contact-page-v2 .contact-intro-grid { grid-template-columns: 1fr; } .contact-page-v2 .contact-side-panel h2, .contact-page-v2 .contact-side-copy { max-width: 760px; } } @media (max-width: 720px) { .contact-side-item { grid-template-columns: 40px 1fr; } .contact-side-icon { width: 40px; height: 40px; } .contact-page-v2 .contact-side-panel h2 { font-size: clamp(30px, 10vw, 42px); } } /* Upgrade 84: footer mini Google map */ .footer-mini-map{ position:relative; display:block; width:100%; min-height:142px; margin:14px 0 18px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); box-shadow:0 18px 38px rgba(0,0,0,.18); } .footer-mini-map iframe{ width:100%; height:142px; display:block; border:0; filter:saturate(.88) contrast(.98) brightness(.9); } .footer-mini-map::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(4,18,37,.05),rgba(4,18,37,.18)); } .footer-map-overlay{ position:absolute; left:12px; bottom:12px; z-index:1; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; background:rgba(4,18,37,.84); color:#fff; font-size:12px; font-weight:850; border:1px solid rgba(255,255,255,.16); } .footer-mini-map:hover .footer-map-overlay{background:rgba(7,88,216,.95)} @media(max-width:980px){.footer-mini-map{max-width:360px}.footer-mini-map iframe{height:150px}} /* Upgrade 85: project list realtime search and UX polish */ .project-filter-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 22px; } .project-filter-tab { min-height: 52px; padding: 0 24px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--text); font: inherit; font-weight: 850; cursor: pointer; transition: .18s ease; } .project-filter-tab:hover, .project-filter-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 12px 24px rgba(7,88,216,.18); } .project-live-filter { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(170px, .7fr) minmax(150px, .6fr) minmax(170px, .7fr) auto; gap: 14px; align-items: stretch; margin: 0 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 14px 34px rgba(6,27,54,.06); } .project-search-field, .project-select-field { display: flex; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; } .project-field-icon { width: 54px; align-self: stretch; display: grid; place-items: center; color: var(--primary); background: #eef6ff; font-weight: 900; flex: 0 0 54px; } .project-live-filter input, .project-live-filter select { border: 0; border-radius: 0; min-height: 54px; box-shadow: none; background: transparent; font-weight: 750; } .project-live-filter input::placeholder { color: #94a3b8; font-weight: 650; } .project-clear-filter { min-height: 56px; white-space: nowrap; padding-inline: 22px; } .project-filter-feedback { min-height: 24px; margin: 0 0 18px; color: var(--muted); font-size: 14px; font-weight: 700; } .project-results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .project-result-card, .project-featured-card { transition: opacity .16s ease, transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .project-result-card.is-hidden, .project-featured-card.is-hidden { display: none !important; } .project-result-card:hover { transform: translateY(-3px); border-color: rgba(7,88,216,.35); box-shadow: 0 18px 44px rgba(6,27,54,.10); } .project-featured-card { margin-bottom: 28px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center; } .project-empty-state { margin-top: 18px; padding: 30px; border: 1px dashed rgba(7,88,216,.38); border-radius: 14px; background: linear-gradient(135deg,#f8fbff,#fff); color: var(--muted); } .project-empty-state strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 20px; } .project-empty-state p { margin: 0; } @media (max-width: 1100px) { .project-live-filter { grid-template-columns: 1fr 1fr; } .project-search-field { grid-column: 1 / -1; } .project-clear-filter { grid-column: 1 / -1; width: 100%; } .project-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-featured-card { grid-template-columns: 1fr; } } @media (max-width: 680px) { .project-filter-tabs { display: grid; grid-template-columns: 1fr; } .project-filter-tab { width: 100%; } .project-live-filter { grid-template-columns: 1fr; padding: 12px; } .project-search-field { grid-column: auto; } .project-results-grid { grid-template-columns: 1fr; } } /* Upgrade 86: footer social and professional developer credit */ .footer-social-block{ margin-top:24px; } .footer-social-block h4{ margin-bottom:12px; } .footer-social-links{ margin-top:0; } .footer-social-links a{ border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.09); transition:transform .18s ease, background .18s ease, border-color .18s ease; } .footer-social-links a:hover{ transform:translateY(-2px); background:rgba(7,88,216,.9); border-color:rgba(255,255,255,.28); } .footer-bottom-links{ display:inline-flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; text-align:right; } .footer-dev-credit{ display:inline-flex; align-items:center; gap:6px; color:#b7c8df; } .footer-dev-credit::before{ content:""; width:1px; height:14px; background:rgba(255,255,255,.22); margin-right:2px; } .footer-dev-credit a{ color:#fff; font-weight:900; letter-spacing:.03em; border-bottom:1px solid rgba(255,255,255,.35); } .footer-dev-credit a:hover{ color:#7dd3fc; border-bottom-color:#7dd3fc; } @media(max-width:980px){ .footer-bottom-links{ justify-content:flex-start; text-align:left; } .footer-dev-credit::before{ display:none; } } /* Upgrade 87: hide the public top navigation while scrolling down and reveal it on upward scroll. */ .site-header{ transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease; will-change: transform; } .site-header.nav-hidden{ transform: translateY(-105%); } .site-header.nav-scrolled{ box-shadow: 0 14px 34px rgba(6, 27, 54, .08); background: rgba(255,255,255,.97); } body.nav-open .site-header, .site-header:focus-within{ transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .site-header{transition:none;} } /* Upgrade 89: fixed scroll-aware navigation and safer home hero scope */ :root{ --site-header-height: 82px; } html{ scroll-padding-top: calc(var(--site-header-height, 82px) + 18px); } body{ padding-top: var(--site-header-height, 82px); overflow-x: hidden; } .site-header{ position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; transform: translate3d(0,0,0); transition: transform .26s ease, box-shadow .26s ease, background-color .26s ease; } .site-header.nav-hidden{ transform: translate3d(0,-110%,0); } .site-header.nav-scrolled{ background: rgba(255,255,255,.98); box-shadow: 0 14px 34px rgba(6, 27, 54, .10); } body.nav-open .site-header, .site-header:focus-within, .site-header.nav-force-visible{ transform: translate3d(0,0,0); } .hero-home{ min-height: min(680px, calc(100svh - var(--site-header-height, 82px))); align-items: center; } .hero-inner{ min-height: min(680px, calc(100svh - var(--site-header-height, 82px))); align-items: center; } .hero-home .hero-content{ max-width: 620px; padding: clamp(48px, 7vh, 72px) 0 clamp(92px, 13vh, 116px); } .hero-home h1{ font-size: clamp(44px, 4.55vw, 76px); line-height: 1.01; max-width: 640px; margin-bottom: 22px; } .hero-home p{ font-size: clamp(16px, 1.12vw, 19px); line-height: 1.68; max-width: 600px; } .hero-actions{ margin-top: clamp(22px, 3.2vh, 30px); } .info-strip{ z-index: 5; } @media (max-width: 1180px){ .hero-home h1{ font-size: clamp(42px, 5.3vw, 68px); } .hero-home .hero-content{ max-width: 580px; } } @media (max-width: 980px){ :root{ --site-header-height: 74px; } .site-header{ transform: translate3d(0,0,0) !important; } .hero-home, .hero-inner{ min-height: auto; } .hero-home .hero-content{ padding: 34px 0 12px; } .hero-home h1{ font-size: clamp(38px, 9vw, 58px); max-width: 100%; } .hero-home p{ max-width: 100%; } } @media (max-width: 640px){ :root{ --site-header-height: 68px; } body{ padding-top: var(--site-header-height, 68px); } .hero-home h1{ font-size: clamp(34px, 11vw, 48px); } } @media (prefers-reduced-motion: reduce){ .site-header{ transition: none; } } /* Upgrade 90: mobile foundation pass — header, hero, grids, cards, forms */ @media (max-width: 980px){ :root{ --site-header-height: 72px; } html{ scroll-padding-top: calc(var(--site-header-height, 72px) + 14px); } body{ padding-top: var(--site-header-height, 72px); overflow-x:hidden; } .container{ width:min(100% - 28px, var(--max)); } .section{ padding:48px 0; } .section-sm{ padding:34px 0; } .site-header{ transform:translate3d(0,0,0)!important; } .navbar{ height:var(--site-header-height,72px); display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; } .navbar .site-logo-lockup, .site-header .site-logo-lockup, html[dir="rtl"] .navbar .site-logo-lockup, html[dir="rtl"] .site-header .site-logo-lockup{ min-width:0; margin:0; } .site-logo-lockup .site-logo-mark, .site-logo-lockup .site-logo-mark img{ width:44px; height:44px; flex-basis:44px; } .site-logo-lockup .site-logo-text strong{ font-size:22px; letter-spacing:.19em; } .site-logo-lockup .site-logo-text small{ font-size:8.5px; line-height:1.08; } .site-header > .container > .btn-primary{ display:none; } .mobile-toggle{ display:inline-grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--secondary); font-size:24px; line-height:1; } .language-links{ gap:3px; padding:3px; border-radius:10px; max-width:100%; } .language-links a{ min-height:34px; padding:7px 8px; font-size:12px; border-radius:8px; } .nav-links.mobile-open{ position:fixed; inset:var(--site-header-height,72px) 0 auto 0; max-height:calc(100svh - var(--site-header-height,72px)); overflow:auto; display:flex; flex-direction:column; gap:0; padding:12px 18px 18px; background:rgba(255,255,255,.98); backdrop-filter:blur(18px); box-shadow:0 22px 44px rgba(6,27,54,.16); border-bottom:1px solid var(--line); z-index:1001; } .nav-links.mobile-open a{ min-height:50px; display:flex; align-items:center; justify-content:space-between; padding:14px 4px; border-bottom:1px solid #edf2f8; font-size:16px; } .nav-links.mobile-open a.active{ color:var(--primary); } .nav-links.mobile-open a::after{ display:none!important; } body.nav-open{ overflow:hidden; touch-action:none; } .hero, .hero.dark, .career-page .hero, .career-hero, .career-detail-hero, .career-form-hero{ min-height:auto; background-attachment:scroll!important; } .hero-content, .career-hero-content, .career-detail-hero .hero-content, .career-form-hero .hero-content{ max-width:100%; padding:44px 0 54px; } .hero h1, .hero-home h1, .career-hero h1, .career-detail-hero h1, .career-form-hero h1{ font-size:clamp(34px, 8.6vw, 54px); line-height:1.06; letter-spacing:-.045em; overflow-wrap:anywhere; } .hero p, .hero-home p, .career-hero p, .career-detail-hero p, .career-form-hero p{ font-size:16px; line-height:1.62; max-width:100%; } .hero-actions{ gap:12px; margin-top:22px; } .hero-actions .btn{ flex:1 1 220px; min-height:50px; } .info-strip{ width:min(100% - 28px, var(--max)); margin:-34px auto 0; padding:16px; border-radius:16px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; } .info-item{ border-right:0; border-bottom:1px solid rgba(255,255,255,.16); padding:14px 10px; } .info-item:nth-last-child(-n+2){ border-bottom:0; } .grid-2,.grid-3,.grid-4,.grid-5,.grid-6, .footer-grid, .split, .project-featured-card, .contact-form-shell, .contact-form-grid, .career-hero-grid, .career-detail-hero-grid{ grid-template-columns:1fr!important; } .card{ padding:22px; border-radius:16px; } .tabs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .tab{ text-align:center; padding:13px 14px; } input,select,textarea,.btn{ font-size:16px; } input,select,textarea{ min-height:50px; } textarea{ min-height:140px; } table{ min-width:680px; } .footer{ padding:48px 0 22px; } .footer-bottom{ gap:12px; } } @media (max-width: 640px){ :root{ --site-header-height:66px; } .container{ width:min(100% - 22px, var(--max)); } .section{ padding:38px 0; } .section-sm{ padding:28px 0; } .navbar{ gap:6px; } .site-logo-lockup{ gap:6px; } .site-logo-lockup .site-logo-mark, .site-logo-lockup .site-logo-mark img{ width:38px; height:38px; flex-basis:38px; } .site-logo-lockup .site-logo-text strong{ font-size:18px; letter-spacing:.16em; } .site-logo-lockup .site-logo-text small{ font-size:7.2px; } .language-links a{ min-height:30px; padding:6px 6px; font-size:11px; } .mobile-toggle{ width:40px; height:40px; font-size:22px; border-radius:10px; } .hero-content, .hero-home .hero-content, .career-hero-content, .career-detail-hero .hero-content, .career-form-hero .hero-content{ padding:34px 0 42px; } .hero h1, .hero-home h1, .career-hero h1, .career-detail-hero h1, .career-form-hero h1{ font-size:clamp(30px, 10.4vw, 42px); line-height:1.08; } .hero-actions{ display:grid; grid-template-columns:1fr; } .hero-actions .btn{ width:100%; } .info-strip{ width:min(100% - 22px, var(--max)); grid-template-columns:1fr; margin:-22px auto 0; } .info-item:nth-last-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.16); } .info-item:last-child{ border-bottom:0; } .tabs{ grid-template-columns:1fr; } .project-live-filter, .service-filter-bar, .services-filter-bar, .career-filter-bar{ grid-template-columns:1fr!important; gap:10px; } .project-search-field, .service-search-field{ grid-column:auto!important; } .project-results-grid, .services-grid, .career-list-grid{ grid-template-columns:1fr!important; } .card{ padding:20px; } h2{ font-size:clamp(28px, 9vw, 38px); } h3{ font-size:22px; } .footer-bottom, .footer-bottom-links{ display:grid; justify-content:start; text-align:left; } } @media (max-width: 390px){ .site-logo-lockup .site-logo-text small{ display:none; } .site-logo-lockup .site-logo-text strong{ font-size:17px; } .language-links a{ padding-inline:5px; } } /* Upgrade 91: mobile hero and content-scope refinement */ @media (max-width: 980px){ .hero-home, .hero, .hero.dark, .services-modern-hero, .service-detail-hero, .project-detail-hero, .contact-hero, .career-hero, .career-detail-hero, .career-form-hero{ min-height:auto!important; isolation:isolate; } .hero-home{ padding:0; display:block; background:#fff; } .hero-home .hero-inner{ min-height:auto; display:block; padding:34px 0 72px; } .hero-home .hero-content{ width:min(100%, 640px); padding:0; max-width:640px; } .hero-home .hero-kicker, .hero .eyebrow, .services-modern-kicker, .project-detail-breadcrumb, .contact-hero-kicker{ font-size:11px!important; letter-spacing:.13em; line-height:1.4; margin-bottom:12px; } .hero-home h1, .hero h1, .services-modern-hero h1, .project-detail-hero h1, .contact-hero h1, .career-hero h1, .career-detail-hero h1, .career-form-hero h1{ max-width:11.5ch; font-size:clamp(32px, 8vw, 56px)!important; line-height:1.06!important; letter-spacing:-.055em; text-wrap:balance; overflow-wrap:normal; word-break:normal; } .hero-home p, .hero p, .services-modern-hero p, .project-detail-hero p, .contact-hero p, .career-hero p, .career-detail-hero p, .career-form-hero p{ width:min(100%, 620px); font-size:16px!important; line-height:1.62!important; margin-bottom:0; } .hero-visual-layer, .hero-side-panel{ inset:auto 0 0 auto; width:64%; height:100%; min-height:360px; opacity:.78; pointer-events:none; } .hero-visual-layer::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 26%,rgba(255,255,255,.70) 55%,rgba(255,255,255,.20) 100%); } .hero-visual-photo{ object-position:center right!important; filter:saturate(.98) contrast(.98); } .hero-actions{ margin-top:22px!important; display:flex; flex-wrap:wrap; } .hero-actions .btn{ min-height:50px; padding-inline:20px; } .services-modern-hero, .contact-hero, .project-detail-hero, .service-detail-hero{ padding:46px 0!important; } .services-modern-hero-inner, .contact-hero-inner, .project-detail-hero-inner{ grid-template-columns:1fr!important; gap:22px!important; align-items:start!important; } .project-detail-hero-copy, .contact-hero-copy, .services-modern-hero-copy{ max-width:100%!important; } .project-detail-meta, .project-detail-hero-meta, .contact-hero-card, .services-modern-hero-card, .career-hero-panel{ width:100%; max-width:100%; margin-inline:0; } .project-detail-meta, .project-detail-hero-meta{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px!important; } .project-detail-meta > *, .project-detail-hero-meta > *{ min-width:0; } .section-head, .section-header, .section-heading, .clients-proof-head, .contact-section-head{ gap:12px!important; } .section-head h2, .section-header h2, .section-heading h2, .clients-proof-head h2, .contact-section-head h2{ text-wrap:balance; } } @media (max-width: 760px){ .site-header .container, .site-header > .container, .navbar{ width:min(100% - 18px, var(--max)); } .hero-home .hero-inner{ padding:28px 0 58px; } .hero-home h1, .hero h1, .services-modern-hero h1, .project-detail-hero h1, .contact-hero h1, .career-hero h1, .career-detail-hero h1, .career-form-hero h1{ max-width:12.5ch; font-size:clamp(30px, 10.2vw, 44px)!important; } .hero-visual-layer{ width:100%; opacity:.42; } .hero-visual-layer::after{ background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 34%,rgba(255,255,255,.86) 68%,rgba(255,255,255,.62) 100%); } .hero-actions{ display:grid!important; grid-template-columns:1fr; width:100%; } .hero-actions .btn{ width:100%; } .info-strip{ border-radius:18px; margin-top:-28px!important; } .project-detail-meta, .project-detail-hero-meta{ grid-template-columns:1fr!important; } .project-gallery-shell, .project-gallery-stage, .project-gallery-slide, .certificate-frame, .client-card, .service-modern-card, .project-card, .career-card, .contact-card{ border-radius:16px!important; } } @media (max-width: 520px){ .container{ width:min(100% - 18px, var(--max)); } .section{ padding:34px 0!important; } .section-sm{ padding:24px 0!important; } .site-logo-lockup .site-logo-mark, .site-logo-lockup .site-logo-mark img{ width:36px!important; height:36px!important; flex-basis:36px!important; } .site-logo-lockup .site-logo-text strong{ font-size:16px!important; letter-spacing:.14em!important; } .hero-home h1, .hero h1, .services-modern-hero h1, .project-detail-hero h1, .contact-hero h1, .career-hero h1, .career-detail-hero h1, .career-form-hero h1{ max-width:100%; font-size:clamp(29px, 11vw, 38px)!important; letter-spacing:-.045em; } .hero-home p, .hero p, .services-modern-hero p, .project-detail-hero p, .contact-hero p, .career-hero p, .career-detail-hero p, .career-form-hero p{ font-size:15.5px!important; } .hero-home .hero-inner{ padding:24px 0 48px; } .nav-links.mobile-open{ padding:10px 14px 16px!important; } .nav-links.mobile-open a{ min-height:48px!important; } .language-links{ max-width:112px; overflow:hidden; } .language-links a:not(.active){ min-width:30px; } .card, .contact-card, .service-modern-card, .project-overview-card, .project-glance-card, .career-card{ padding:18px!important; } } @media (max-width: 360px){ .language-links{ display:none; } .hero-home h1, .hero h1, .services-modern-hero h1, .project-detail-hero h1, .contact-hero h1{ font-size:30px!important; } } /* Upgrade 92: mobile cards, grids and touch layout polish */ @media (max-width: 1180px){ .home-highlights-grid, .services-modern-grid, .project-results-grid, .trust-logo-grid, .partner-grid, .home-proof-redesign-client-grid, .home-proof-redesign-certificate-grid, .about-strengths-grid, .trust-standard-grid{ gap:18px!important; } .services-modern-grid, .project-results-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .home-highlights-grid, .trust-logo-grid, .partner-grid, .home-proof-redesign-client-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } } @media (max-width: 980px){ .grid.grid-3, .grid.grid-4, .grid.grid-5, .grid.grid-6{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .grid.grid-2, .split, .project-overview-layout, .project-detail-overview-grid, .service-detail-grid, .contact-form-grid, .contact-form-layout, .career-layout, .career-detail-grid, .certificate-modal-panel{ grid-template-columns:1fr!important; } .about-mvv-centered-grid, .about-values-centered-grid, .about-strengths-grid, .trust-standard-grid, .project-glance-grid, .project-stakeholder-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .project-overview-card, .project-glance-panel, .project-description-panel, .service-modern-card, .project-card, .career-card, .trust-logo-card, .home-highlight-card, .home-proof-redesign-panel, .home-proof-redesign-client-card, .home-proof-redesign-certificate-card, .about-mvv-simple-card, .about-value-simple-card, .trust-standard-card, .contact-card{ min-width:0!important; } .project-card, .service-modern-card, .career-card, .trust-logo-card, .home-highlight-card, .home-proof-redesign-client-card, .about-mvv-simple-card, .about-value-simple-card, .trust-standard-card{ height:auto!important; } .project-card h3, .service-modern-card h3, .career-card h3, .home-highlight-card h3, .about-mvv-simple-card h3, .about-value-simple-card h3, .trust-standard-card h3{ font-size:clamp(20px,3.2vw,28px)!important; line-height:1.12!important; overflow-wrap:anywhere; } .project-thumb, .service-card-media, .service-modern-card-media, .home-proof-redesign-certificate-frame, .certificate-frame{ aspect-ratio:16/10; height:auto!important; } .project-thumb img, .service-card-media img, .service-modern-card-media img, .home-proof-redesign-certificate-frame img, .certificate-frame img{ width:100%; height:100%; object-fit:cover; } .tabs, .service-tabs, .project-tabs, .client-tabs{ flex-wrap:nowrap!important; overflow-x:auto!important; overflow-y:hidden!important; gap:10px!important; padding-bottom:8px; margin-inline:-15px!important; padding-inline:15px!important; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .tabs::-webkit-scrollbar, .service-tabs::-webkit-scrollbar, .project-tabs::-webkit-scrollbar, .client-tabs::-webkit-scrollbar{display:none;} .tab, .service-tabs a, .project-tabs a, .client-tabs a{ flex:0 0 auto!important; white-space:nowrap!important; scroll-snap-align:start; min-height:46px; display:inline-flex; align-items:center; } .filter-row, .project-filter-row, .services-filter-row, .services-search-panel, .project-search-panel{ grid-template-columns:1fr!important; gap:12px!important; } } @media (max-width: 760px){ .grid.grid-2, .grid.grid-3, .grid.grid-4, .grid.grid-5, .grid.grid-6, .services-modern-grid, .project-results-grid, .about-mvv-centered-grid, .about-values-centered-grid, .about-strengths-grid, .trust-standard-grid, .project-glance-grid, .project-stakeholder-grid, .home-proof-redesign-certificate-grid{ grid-template-columns:1fr!important; } .home-highlights-grid, .trust-logo-grid, .partner-grid, .home-proof-redesign-client-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .section-head, .section-header, .section-heading, .certificate-gallery-head, .home-proof-redesign-head, .clients-proof-head, .contact-section-head{ display:block!important; text-align:left!important; } html[dir="rtl"] .section-head, html[dir="rtl"] .section-header, html[dir="rtl"] .section-heading, html[dir="rtl"] .certificate-gallery-head, html[dir="rtl"] .home-proof-redesign-head, html[dir="rtl"] .clients-proof-head, html[dir="rtl"] .contact-section-head{ text-align:right!important; } .section-head p, .section-header p, .section-heading p, .certificate-gallery-head p, .home-proof-redesign-head p, .clients-proof-head p, .contact-section-head p{ margin-top:10px!important; max-width:100%!important; } .home-proof-link, .section-head .btn, .section-header .btn, .section-heading .btn{ margin-top:16px; } .card, .project-overview-card, .project-glance-card, .project-stakeholder-card, .service-modern-card, .project-card, .career-card, .contact-card, .home-proof-redesign-panel, .trust-framework-credentials, .trust-framework-standards{ border-radius:18px!important; box-shadow:0 10px 26px rgba(6,27,54,.06)!important; } .project-glance-grid div, .project-glance-grid div:nth-child(3n), .project-glance-grid div:last-child{ border-right:0!important; border-left:0!important; border-bottom:1px solid rgba(205,220,241,.72)!important; padding:16px 0!important; } .project-glance-grid div:last-child{border-bottom:0!important;} .project-stakeholder-card{ display:flex!important; align-items:center!important; gap:14px!important; } .certificate-photo-grid{ column-count:1!important; } .certificate-photo-item, .certificate-photo-item img{ border-radius:16px!important; } } @media (max-width: 520px){ .home-highlights-grid, .trust-logo-grid, .partner-grid, .home-proof-redesign-client-grid{ grid-template-columns:1fr!important; } .project-card, .service-modern-card, .career-card, .home-highlight-card, .trust-logo-card, .partner-card, .home-proof-redesign-client-card, .about-mvv-simple-card, .about-value-simple-card, .trust-standard-card{ text-align:left!important; } html[dir="rtl"] .project-card, html[dir="rtl"] .service-modern-card, html[dir="rtl"] .career-card, html[dir="rtl"] .home-highlight-card, html[dir="rtl"] .trust-logo-card, html[dir="rtl"] .partner-card, html[dir="rtl"] .home-proof-redesign-client-card, html[dir="rtl"] .about-mvv-simple-card, html[dir="rtl"] .about-value-simple-card, html[dir="rtl"] .trust-standard-card{ text-align:right!important; } .service-modern-card, .project-card, .career-card{ overflow:hidden!important; } .project-body, .service-modern-card-body, .career-card-body{ padding:18px!important; } .project-card .btn, .service-modern-card .btn, .career-card .btn, .cta .btn, .project-documents-cta .btn{ width:100%; } .trust-logo-card, .home-proof-redesign-client-card{ min-height:auto!important; padding:18px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:14px!important; } .trust-logo-card h3, .home-proof-redesign-client-card strong{ margin:0!important; text-align:inherit!important; } .trust-logo-media, .trust-logo-card .trust-logo-media, .home-proof-redesign-client-logo{ width:58px!important; height:58px!important; flex:0 0 58px!important; } .about-mvv-simple-card, .about-value-simple-card, .icon-card{ align-items:flex-start!important; text-align:left!important; min-height:auto!important; } html[dir="rtl"] .about-mvv-simple-card, html[dir="rtl"] .about-value-simple-card, html[dir="rtl"] .icon-card{ align-items:flex-end!important; text-align:right!important; } .tabs, .service-tabs, .project-tabs, .client-tabs{ margin-inline:-9px!important; padding-inline:9px!important; } .tab, .service-tabs a, .project-tabs a, .client-tabs a{ padding:12px 16px!important; font-size:14px!important; } } /* Upgrade 93 — mobile forms, filters, and touch controls polish */ @media (max-width: 900px) { input, select, textarea, button { font-size: 16px; } input, select, textarea { min-height: 50px; border-radius: 12px; } textarea { min-height: 132px; resize: vertical; } label { max-width: 100%; } .services-filter-bar, .project-live-filter, .career-filter { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; padding: 14px !important; border-radius: 18px !important; background: rgba(255, 255, 255, .96) !important; border: 1px solid rgba(211, 224, 244, .9) !important; box-shadow: 0 14px 34px rgba(6, 27, 54, .07) !important; } .services-search-field, .services-select-field, .project-search-field, .project-select-field, .career-search-field { width: 100% !important; min-width: 0 !important; } .services-search-field input, .services-select-field select, .project-search-field input, .project-select-field select, .career-search-field input, .career-filter select { width: 100% !important; min-height: 52px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-inline-start: 46px !important; padding-inline-end: 38px !important; border-radius: 14px !important; background-color: #fff !important; } html[dir="rtl"] .services-search-field input, html[dir="rtl"] .services-select-field select, html[dir="rtl"] .project-search-field input, html[dir="rtl"] .project-select-field select, html[dir="rtl"] .career-search-field input, html[dir="rtl"] .career-filter select { padding-inline-start: 38px !important; padding-inline-end: 46px !important; } .services-filter-icon, .project-field-icon, .career-search-field span { inset-inline-start: 16px !important; pointer-events: none; } html[dir="rtl"] .services-filter-icon, html[dir="rtl"] .project-field-icon, html[dir="rtl"] .career-search-field span { inset-inline-start: auto !important; inset-inline-end: 16px !important; } .services-search-btn, .project-clear-filter, .career-filter .btn, .career-filter button { width: 100% !important; min-height: 52px !important; border-radius: 14px !important; } .services-results-summary, .project-filter-feedback, .career-results-bar { display: block !important; width: 100% !important; margin-top: 12px !important; padding: 10px 12px !important; border-radius: 12px !important; background: #f6f9fe !important; color: #51657f !important; font-size: 14px !important; } .project-filter-tabs, .career-department-rail { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 10px !important; margin-inline: -15px !important; padding: 2px 15px 10px !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .project-filter-tabs::-webkit-scrollbar, .career-department-rail::-webkit-scrollbar { display: none; } .project-filter-tab, .career-chip { flex: 0 0 auto !important; min-height: 44px !important; white-space: nowrap !important; scroll-snap-align: start; } .contact-intro-form-grid, .contact-form-shell, .contact-form-layout, .contact-form-wrap, .application-layout, .form-grid-2, .career-upload-grid, .contact-form-fields { grid-template-columns: 1fr !important; } .contact-form-card, .contact-side-panel, .application-help, .career-application-form { border-radius: 20px !important; padding: 20px !important; } .contact-form-head h2, .career-form-section-title h2 { font-size: clamp(1.45rem, 7vw, 2rem) !important; line-height: 1.12 !important; } .contact-form-fields label, .form-field label { display: block !important; margin-bottom: 8px !important; font-size: 14px !important; line-height: 1.25 !important; } .contact-consent, .consent-row { align-items: flex-start !important; gap: 10px !important; padding: 14px !important; border-radius: 14px !important; background: #f7faff !important; } .contact-consent input, .consent-row input { width: 20px !important; height: 20px !important; min-height: 20px !important; flex: 0 0 20px !important; margin-top: 2px !important; } .contact-submit-btn, .form-actions .btn, .form-actions button, .career-application-form button[type="submit"] { width: 100% !important; min-height: 54px !important; border-radius: 14px !important; } .form-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } .upload-box { min-height: 118px !important; padding: 18px !important; border-radius: 18px !important; } .upload-box input[type="file"] { width: 100% !important; max-width: 100% !important; font-size: 14px !important; } .upload-box.is-file-selected { border-color: rgba(7, 88, 216, .48) !important; background: #f4f8ff !important; } } @media (max-width: 520px) { .services-filter-bar, .project-live-filter, .career-filter, .contact-form-card, .contact-side-panel, .application-help, .career-application-form { margin-inline: -2px !important; } .contact-form-card, .contact-side-panel, .application-help, .career-application-form { padding: 18px !important; } .contact-form-fields, .form-grid-2 { gap: 14px !important; } input, select, textarea { padding-inline: 14px !important; } .services-search-field input, .services-select-field select, .project-search-field input, .project-select-field select, .career-search-field input, .career-filter select { padding-inline-start: 44px !important; } html[dir="rtl"] .services-search-field input, html[dir="rtl"] .services-select-field select, html[dir="rtl"] .project-search-field input, html[dir="rtl"] .project-select-field select, html[dir="rtl"] .career-search-field input, html[dir="rtl"] .career-filter select { padding-inline-start: 14px !important; padding-inline-end: 44px !important; } } /* Upgrade 94: final mobile QA and overflow cleanup */ html, body { max-width: 100%; overflow-x: clip; } img, video, svg, canvas, iframe { max-width: 100%; } iframe { border: 0; } .site-main, .page-shell, .section, .container, .w-container, .site-footer, .hero-section, .page-hero, .home-hero { min-width: 0; } .table-wrap, .rich-table, .project-detail-rich-text table, .service-detail-rich-text table, .generic-page-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .project-detail-rich-text, .service-detail-rich-text, .generic-page-content, .card, .project-card, .service-card, .career-card, .contact-form-card, .contact-side-panel, .footer-col, .footer-brand, .footer-connect, .footer-developer-credit, .hero-content, .hero-copy { overflow-wrap: anywhere; word-break: normal; } @media (max-width: 980px) { .site-main { padding-top: var(--site-header-height, 76px) !important; } .site-header { position: fixed !important; inset-inline: 0 !important; top: 0 !important; width: 100% !important; z-index: 1200 !important; } .hero-section, .page-hero, .home-hero, .services-hero, .project-hero, .contact-hero, .career-hero { min-height: auto !important; padding-block: clamp(46px, 12vw, 76px) !important; background-attachment: scroll !important; overflow: hidden !important; } .home-hero .hero-content, .page-hero .hero-content, .hero-content, .hero-copy { width: 100% !important; max-width: 100% !important; } .section, .page-section, .content-section, .home-section, .about-section, .services-section, .projects-section, .clients-section, .contact-section, .career-section { padding-block: clamp(34px, 9vw, 58px) !important; } .section-header, .section-heading, .page-section-head { margin-bottom: clamp(20px, 6vw, 32px) !important; } .section-header h2, .section-heading h2, .page-section-head h2 { font-size: clamp(1.55rem, 7vw, 2.25rem) !important; line-height: 1.12 !important; } .footer-grid, .footer-bottom, .footer-meta-row { grid-template-columns: 1fr !important; text-align: start !important; gap: 24px !important; } .footer-social-list, .footer-links, .footer-contact-list { align-items: stretch !important; } .footer-mini-map { min-height: 150px !important; border-radius: 16px !important; } .footer-developer-credit { justify-content: flex-start !important; width: 100% !important; } } @media (max-width: 640px) { body { font-size: 15px; } .container, .w-container, .page-container, .section-inner, .hero-inner, .footer-inner { width: min(100% - 28px, 100%) !important; padding-inline: 0 !important; margin-inline: auto !important; } .site-header .container, .site-header .w-container, .header-inner, .nav-inner { width: 100% !important; padding-inline: 14px !important; } .hero-section, .page-hero, .home-hero, .services-hero, .project-hero, .contact-hero, .career-hero { padding-block: 40px !important; } .hero-eyebrow, .page-eyebrow, .section-eyebrow { font-size: 11px !important; letter-spacing: .12em !important; } h1, .hero-title, .page-title, .home-hero h1, .page-hero h1 { font-size: clamp(2rem, 10vw, 2.75rem) !important; line-height: 1.04 !important; max-width: 100% !important; } .hero-subtitle, .page-subtitle, .hero-lead, .lead { font-size: 1rem !important; line-height: 1.62 !important; max-width: 100% !important; } .btn, .button, .primary-btn, .secondary-btn, .cta-btn, button[type="submit"] { width: 100%; min-height: 48px; justify-content: center; text-align: center; } .btn-row, .hero-actions, .cta-actions, .card-actions, .filter-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; } .project-card, .service-card, .career-card, .client-card, .certificate-card, .contact-card, .trust-card, .stat-card, .mission-card, .vision-card, .value-card { border-radius: 18px !important; } .project-card img, .service-card img, .certificate-card img, .client-card img { max-height: none !important; } .google-map-frame, .contact-map-frame, .map-frame, .footer-mini-map iframe { min-height: 260px !important; } .footer-mini-map iframe { min-height: 150px !important; } } @media (max-width: 390px) { .container, .w-container, .page-container, .section-inner, .hero-inner, .footer-inner { width: min(100% - 22px, 100%) !important; } h1, .hero-title, .page-title, .home-hero h1, .page-hero h1 { font-size: clamp(1.78rem, 11vw, 2.25rem) !important; } .section, .page-section, .content-section, .home-section, .about-section, .services-section, .projects-section, .clients-section, .contact-section, .career-section { padding-block: 30px !important; } } /* Upgrade 95: final mobile visual polish and real-device refinements */ @media (max-width: 980px) { :root { --mobile-section-gap: clamp(28px, 7vw, 48px); --mobile-card-radius: 18px; } html { scroll-padding-top: calc(var(--site-header-height, 76px) + 12px); } body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .site-main > *:first-child, main > *:first-child { margin-top: 0 !important; } .navbar { min-height: var(--site-header-height, 74px); } .logo { min-width: 0 !important; max-width: min(58vw, 250px) !important; } .logo strong { font-size: clamp(20px, 6vw, 28px) !important; letter-spacing: .08em !important; } .logo span span { font-size: 9.5px !important; line-height: 1.15 !important; } .logo-mark { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; } .mobile-toggle { width: 44px !important; height: 44px !important; display: inline-grid !important; place-items: center !important; border-radius: 14px !important; background: rgba(7, 88, 216, .08) !important; border: 1px solid rgba(7, 88, 216, .14) !important; font-size: 23px !important; line-height: 1 !important; } .nav-links.is-open, .nav-links.mobile-open, body.mobile-nav-open .nav-links { position: fixed !important; top: calc(var(--site-header-height, 76px) + 8px) !important; left: 14px !important; right: 14px !important; z-index: 1190 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 4px !important; padding: 14px !important; max-height: calc(100svh - var(--site-header-height, 76px) - 22px) !important; overflow-y: auto !important; border-radius: 22px !important; background: rgba(255,255,255,.98) !important; border: 1px solid rgba(220,229,242,.95) !important; box-shadow: 0 26px 70px rgba(6,27,54,.20) !important; backdrop-filter: blur(18px) !important; } .nav-links.is-open a, .nav-links.mobile-open a, body.mobile-nav-open .nav-links a { min-height: 46px !important; display: flex !important; align-items: center !important; padding: 11px 12px !important; border-radius: 13px !important; color: var(--text) !important; } .nav-links.is-open a.active, .nav-links.is-open a:hover, .nav-links.mobile-open a.active, .nav-links.mobile-open a:hover, body.mobile-nav-open .nav-links a.active, body.mobile-nav-open .nav-links a:hover { background: rgba(7,88,216,.08) !important; color: var(--primary) !important; } .hero, .hero-home, .hero.dark, .page-hero, .service-hero, .project-hero, .contact-hero, .career-hero { min-height: auto !important; isolation: isolate !important; } .hero::before, .hero-home::before, .page-hero::before, .service-hero::before, .project-hero::before, .contact-hero::before, .career-hero::before { pointer-events: none !important; } .hero-content, .hero-copy, .hero .container, .page-hero .container { min-width: 0 !important; } .hero-content > *:last-child, .hero-copy > *:last-child, .section-header > *:last-child, .section-heading > *:last-child, .card > *:last-child { margin-bottom: 0 !important; } .hero-actions .btn + .btn, .cta-actions .btn + .btn, .card-actions .btn + .btn { margin-inline-start: 0 !important; } .info-strip, .trust-strip, .home-trust-strip { width: min(100% - 28px, var(--max)) !important; margin-inline: auto !important; border-radius: 18px !important; } .grid, .cards-grid, .service-grid, .project-grid, .career-grid, .certificate-grid, .client-grid, .partner-grid, .office-grid, .contact-grid { gap: 16px !important; } .card, .service-card, .project-card, .career-card, .certificate-card, .client-card, .contact-card, .trust-card, .office-card, .faq-card { border-radius: var(--mobile-card-radius) !important; box-shadow: 0 10px 30px rgba(6,27,54,.07) !important; } .project-thumb, .service-thumb, .card-image, .certificate-image, .client-logo-wrap { overflow: hidden !important; } .project-thumb img, .service-thumb img, .card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .tabs, .category-tabs, .filter-tabs, .project-category-tabs, .service-category-tabs { scrollbar-width: none !important; -ms-overflow-style: none !important; padding-bottom: 2px !important; } .tabs::-webkit-scrollbar, .category-tabs::-webkit-scrollbar, .filter-tabs::-webkit-scrollbar, .project-category-tabs::-webkit-scrollbar, .service-category-tabs::-webkit-scrollbar { display: none !important; } .tab, .category-tab, .filter-tab { min-height: 42px !important; white-space: nowrap !important; } .rich-text, .dynamic-section, .project-detail-rich-text, .service-detail-rich-text, .generic-page-content { font-size: 15.5px !important; line-height: 1.75 !important; } .rich-text ul, .rich-text ol, .dynamic-section ul, .dynamic-section ol { padding-inline-start: 1.25rem !important; } .table-card, .responsive-table, .table-wrap { border-radius: 16px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } table { font-size: 13px !important; } th, td { padding: 13px 14px !important; } .footer { padding-top: 46px !important; } .footer-grid { gap: 26px !important; } .footer h4 { margin-bottom: 12px !important; } .footer-bottom { gap: 10px !important; margin-top: 34px !important; } } @media (max-width: 640px) { .site-main { padding-top: calc(var(--site-header-height, 72px) + env(safe-area-inset-top, 0px)) !important; } .site-header { padding-top: env(safe-area-inset-top, 0px) !important; } .navbar { gap: 10px !important; height: auto !important; min-height: 68px !important; } .language-links { transform: scale(.94) !important; transform-origin: center !important; } .hero, .hero-home, .page-hero, .service-hero, .project-hero, .contact-hero, .career-hero { padding-block: clamp(34px, 10vw, 50px) !important; } .hero-content, .hero-copy { padding-block: 0 !important; } .eyebrow, .hero-eyebrow, .page-eyebrow, .section-eyebrow { margin-bottom: 10px !important; } h1, .hero-title, .page-title, .home-hero h1, .page-hero h1 { letter-spacing: -.045em !important; text-wrap: balance; } h2, .section-header h2, .section-heading h2 { text-wrap: balance; } p, .lead, .hero-subtitle, .page-subtitle { text-wrap: pretty; } .section, .page-section, .content-section, .home-section, .about-section, .services-section, .projects-section, .clients-section, .contact-section, .career-section { padding-block: var(--mobile-section-gap) !important; } .card, .project-body, .service-body, .career-card, .contact-form-card, .contact-side-panel { padding: 18px !important; } .project-card .project-body, .service-card .service-body { padding: 17px !important; } input, select, textarea { border-radius: 12px !important; } .btn, .button, .primary-btn, .secondary-btn, .cta-btn, button[type="submit"] { border-radius: 12px !important; } .footer .logo { max-width: 100% !important; } .footer .social, .footer-social-list { flex-wrap: wrap !important; } } @media (max-width: 430px) { .container, .w-container, .page-container, .section-inner, .hero-inner, .footer-inner { width: min(100% - 24px, 100%) !important; } .site-header .container, .site-header .w-container, .header-inner, .nav-inner, .navbar { padding-inline: 12px !important; } .logo-mark { width: 40px !important; height: 40px !important; flex-basis: 40px !important; } .logo strong { font-size: clamp(18px, 5.8vw, 23px) !important; } .language-links a { min-height: 32px !important; padding-inline: 7px !important; } .mobile-toggle { width: 40px !important; height: 40px !important; } h1, .hero-title, .page-title, .home-hero h1, .page-hero h1 { font-size: clamp(1.72rem, 10.5vw, 2.35rem) !important; line-height: 1.07 !important; } .hero-subtitle, .page-subtitle, .hero-lead, .lead { font-size: .96rem !important; } .info-item, .trust-strip-item, .stat-card { align-items: flex-start !important; } .footer-mini-map, .footer-mini-map iframe { min-height: 138px !important; height: 138px !important; } } @media (max-width: 360px) { .language-links { display: none !important; } .logo span span { display: none !important; } .hero-actions, .cta-actions, .btn-row { gap: 8px !important; } .card, .project-body, .service-body, .career-card, .contact-form-card, .contact-side-panel { padding: 16px !important; } } /* Upgrade 98 — Exact integrated SESCCO trust sphere from supplied sphere code */ .hero-side-panel { isolation: isolate; overflow: visible; } .hero-trust-sphere-exact { position: absolute; top: 50%; right: clamp(20px, 4.8vw, 92px); width: clamp(340px, 35vw, 560px); aspect-ratio: 1; transform: translateY(-50%); z-index: 4; pointer-events: auto; perspective: 1500px; } .hero-trust-sphere-exact .hero-trust-sphere-ambient { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle at 46% 42%, rgba(255,255,255,.62), rgba(232,244,255,.40) 34%, rgba(7,94,216,.10) 62%, transparent 76%), radial-gradient(circle at 55% 62%, rgba(7,94,216,.18), transparent 58%); filter: blur(2px); box-shadow: 0 34px 86px rgba(7, 32, 70, .16); opacity: .82; pointer-events: none; } .hero-trust-sphere-exact .hero-trust-sphere-ambient::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(7, 94, 216, .12); background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.34), transparent 42%), linear-gradient(145deg, rgba(255,255,255,.16), rgba(7,94,216,.075)); box-shadow: inset 0 0 42px rgba(255,255,255,.34), inset 0 -26px 54px rgba(7,94,216,.08); } .home-sphere-wrap { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; transform-style: preserve-3d; z-index: 3; cursor: grab; } .home-sphere-wrap:active { cursor: grabbing; } .home-sphere { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; will-change: transform; } .home-sphere-card { --card-w: clamp(76px, 6.2vw, 106px); --card-h: clamp(104px, 8.4vw, 144px); width: var(--card-w); height: var(--card-h); position: absolute; left: 50%; top: 50%; margin-left: calc(var(--card-w) / -2); margin-top: calc(var(--card-h) / -2); border-radius: 19px; transform-style: preserve-3d; overflow: hidden; background: #ffffff; border: 1px solid rgba(255,255,255,.86); box-shadow: 0 24px 54px rgba(5,26,64,.24), inset 0 1px 0 rgba(255,255,255,.86); backface-visibility: visible; -webkit-backface-visibility: visible; user-select: none; cursor: pointer; transition: box-shadow .28s ease, border-color .28s ease, filter .22s ease; will-change: transform, filter; opacity: 1 !important; } .home-sphere-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(3,18,44,.24)); z-index: 2; pointer-events: none; } .home-sphere-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1 !important; filter: saturate(1.13) contrast(1.05); } .home-sphere-card .card-label { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; color: #fff; display: grid; gap: 3px; text-shadow: 0 4px 18px rgba(0,0,0,.34); } .home-sphere-card .card-label strong { font-size: clamp(11px, .85vw, 14px); line-height: 1.05; font-weight: 1000; } .home-sphere-card .card-label small { font-size: clamp(8px, .66vw, 10.5px); line-height: 1.12; opacity: .9; font-weight: 850; } .home-sphere-card.is-data { background: #ffffff; } .home-sphere-card.is-data::before { background: radial-gradient(circle at 20% 16%, rgba(17,129,255,.15), transparent 34%), linear-gradient(180deg, rgba(255,255,255,0), rgba(7,94,216,.10)); } .home-sphere-card .data-card-content { position: relative; z-index: 4; height: 100%; display: grid; place-items: center; padding: 14px; text-align: center; color: #061b3f; } .home-sphere-card .data-card-content .big { font-size: clamp(23px, 2vw, 34px); font-weight: 1000; line-height: .95; color: var(--primary); } .home-sphere-card .data-card-content .label { margin-top: 8px; font-size: clamp(10px, .8vw, 13px); line-height: 1.12; font-weight: 1000; } .home-sphere-card .data-card-content .sub { margin-top: 5px; font-size: clamp(8px, .65vw, 11px); line-height: 1.18; color: #536783; font-weight: 800; } .home-sphere-card.is-active { opacity: 1 !important; filter: saturate(1.14) contrast(1.04) brightness(1.02) !important; border-color: rgba(7,94,216,.54); box-shadow: 0 32px 76px rgba(5,26,64,.30), 0 0 0 2px rgba(7,94,216,.16); } .home-sphere-wrap.is-hovered .home-sphere-card { box-shadow: 0 30px 72px rgba(5,26,64,.26); } html[dir="rtl"] .hero-trust-sphere-exact { right: auto; left: clamp(20px, 4.8vw, 92px); } @media (max-width: 1320px) { .hero-trust-sphere-exact { width: clamp(300px, 33vw, 440px); right: clamp(0px, 2.4vw, 36px); } html[dir="rtl"] .hero-trust-sphere-exact { right: auto; left: clamp(0px, 2.4vw, 36px); } } @media (max-width: 1180px) { .hero-trust-sphere-exact { width: clamp(260px, 31vw, 360px); right: -4px; } html[dir="rtl"] .hero-trust-sphere-exact { right: auto; left: -4px; } .home-sphere-card .card-label small, .home-sphere-card .data-card-content .sub { display: none; } } @media (max-width: 980px) { .hero-trust-sphere-exact { display: none; } } /* Upgrade 99 — Premium visual polish for integrated hero sphere Visual-only layer: keeps existing markup, JS hooks, and responsive behavior. */ .hero-trust-sphere-exact { width: clamp(390px, 39vw, 640px); right: clamp(8px, 5.5vw, 112px); transform: translateY(-50%) translateX(-2%); perspective: 1750px; filter: drop-shadow(0 34px 70px rgba(7, 32, 70, .13)); } .hero-trust-sphere-exact .hero-trust-sphere-ambient { inset: 7%; opacity: .95; background: radial-gradient(circle at 43% 33%, rgba(255,255,255,.86), rgba(238,248,255,.62) 24%, rgba(203,228,252,.30) 47%, rgba(7,94,216,.08) 66%, transparent 77%), radial-gradient(circle at 54% 58%, rgba(7,94,216,.18), transparent 58%), linear-gradient(135deg, rgba(255,255,255,.18), rgba(7,94,216,.05)); filter: blur(1.5px); box-shadow: 0 42px 96px rgba(7, 32, 70, .14), inset 0 0 74px rgba(255,255,255,.46); } .hero-trust-sphere-exact .hero-trust-sphere-ambient::before { inset: 4%; border-color: rgba(7, 94, 216, .10); background: radial-gradient(circle at 40% 28%, rgba(255,255,255,.46), transparent 42%), radial-gradient(circle at 68% 70%, rgba(7,94,216,.10), transparent 48%), linear-gradient(145deg, rgba(255,255,255,.20), rgba(7,94,216,.065)); box-shadow: inset 0 0 54px rgba(255,255,255,.48), inset 0 -34px 72px rgba(7,94,216,.08); } .hero-trust-sphere-exact .hero-trust-sphere-ambient::after { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: linear-gradient(rgba(7,94,216,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(7,94,216,.055) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(circle, #000 0 54%, transparent 72%); opacity: .45; transform: rotate(-8deg); } .home-sphere-wrap { transform: translateZ(0); } .home-sphere-card { --card-w: clamp(82px, 6.7vw, 118px); --card-h: clamp(114px, 9.1vw, 160px); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,1), rgba(246,250,255,.98)); border: 1px solid rgba(255,255,255,.96); box-shadow: 0 22px 50px rgba(5,26,64,.20), 0 3px 10px rgba(7,94,216,.07), inset 0 1px 0 rgba(255,255,255,1); } .home-sphere-card::before { background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 42%, rgba(3,18,44,.22) 100%); } .home-sphere-card::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: 3; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,0) 34%), radial-gradient(circle at 28% 12%, rgba(255,255,255,.48), transparent 28%); opacity: .58; mix-blend-mode: screen; } .home-sphere-card img { filter: saturate(1.10) contrast(1.02) brightness(1.02); } .home-sphere-card .card-label { left: 13px; right: 13px; bottom: 13px; z-index: 4; } .home-sphere-card .card-label strong { font-size: clamp(11px, .82vw, 13.5px); letter-spacing: -.02em; } .home-sphere-card .card-label small { font-size: clamp(8px, .58vw, 10px); } .home-sphere-card.is-data { background: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,250,255,.98)); box-shadow: 0 22px 50px rgba(5,26,64,.19), 0 4px 12px rgba(7,94,216,.08), inset 0 1px 0 rgba(255,255,255,1); } .home-sphere-card.is-data::before { background: radial-gradient(circle at 18% 14%, rgba(7,94,216,.14), transparent 34%), radial-gradient(circle at 80% 84%, rgba(7,94,216,.08), transparent 40%), linear-gradient(180deg, rgba(255,255,255,0), rgba(7,94,216,.075)); } .home-sphere-card .data-card-content { padding: 14px 12px; z-index: 4; } .home-sphere-card .data-card-content .big { font-size: clamp(25px, 2.15vw, 38px); color: #075ed8; letter-spacing: -.06em; } .home-sphere-card .data-card-content .label { margin-top: 9px; color: #061b3f; font-size: clamp(10px, .76vw, 13px); letter-spacing: -.015em; } .home-sphere-card .data-card-content .sub { color: #5b6d89; font-size: clamp(8px, .57vw, 10.5px); } .home-sphere-card.is-active { border-color: rgba(255,255,255,.98); box-shadow: 0 36px 88px rgba(5,26,64,.30), 0 8px 20px rgba(7,94,216,.14), 0 0 0 2px rgba(7,94,216,.14), inset 0 1px 0 rgba(255,255,255,1); transform-style: preserve-3d; } html[dir="rtl"] .hero-trust-sphere-exact { right: auto; left: clamp(8px, 5.5vw, 112px); transform: translateY(-50%) translateX(2%); } @media (max-width: 1320px) { .hero-trust-sphere-exact { width: clamp(330px, 36vw, 500px); right: clamp(-8px, 2vw, 30px); transform: translateY(-50%); } html[dir="rtl"] .hero-trust-sphere-exact { right: auto; left: clamp(-8px, 2vw, 30px); transform: translateY(-50%); } } @media (max-width: 1180px) { .hero-trust-sphere-exact { width: clamp(280px, 32vw, 390px); right: -8px; } html[dir="rtl"] .hero-trust-sphere-exact { right: auto; left: -8px; } .home-sphere-card { --card-w: clamp(68px, 5.7vw, 88px); --card-h: clamp(94px, 7.7vw, 120px); border-radius: 16px; } } @media (max-width: 980px) { .hero-trust-sphere-exact { display: none; } } /* Upgrade 111 — home trusted clients marquee redesign */ .home-proof-redesign-clients { padding-bottom: 20px; } .home-proof-redesign-client-marquee { position: relative; overflow: hidden; margin-top: 4px; mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .home-proof-redesign-client-marquee::before, .home-proof-redesign-client-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 72px; z-index: 2; pointer-events: none; } .home-proof-redesign-client-marquee::before { left: 0; background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); } .home-proof-redesign-client-marquee::after { right: 0; background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)); } .home-proof-redesign-client-track { --client-gap: 14px; display: flex; align-items: stretch; gap: var(--client-gap); width: max-content; animation: homeProofClientMarquee 34s linear infinite; will-change: transform; } .home-proof-redesign-client-marquee:hover .home-proof-redesign-client-track, .home-proof-redesign-client-marquee:focus-within .home-proof-redesign-client-track { animation-play-state: paused; } .home-proof-redesign-client-track-group { display: flex; align-items: stretch; gap: var(--client-gap); flex-shrink: 0; } .home-proof-redesign-client-card { position: relative; flex: 0 0 210px; min-height: 146px; padding: 18px 18px 16px; border-radius: 24px; border: 1px solid rgba(198, 217, 246, .92); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 10px 24px rgba(6, 27, 54, .04); overflow: hidden; } .home-proof-redesign-client-card::before { content: ""; position: absolute; inset: auto 18px 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(7,88,216,.9), rgba(0,166,223,.68)); transform: scaleX(.28); transform-origin: left center; transition: transform .22s ease; } .home-proof-redesign-client-card:hover::before, .home-proof-redesign-client-card:focus-visible::before { transform: scaleX(1); } .home-proof-redesign-client-logo { width: 100%; max-width: 152px; height: 64px; } .home-proof-redesign-client-logo img { filter: saturate(.98) contrast(1.02); } .home-proof-redesign-client-card strong { font-size: 1rem; line-height: 1.25; max-width: 170px; } @keyframes homeProofClientMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } } html[dir="rtl"] .home-proof-redesign-client-track { animation-name: homeProofClientMarqueeRtl; } @keyframes homeProofClientMarqueeRtl { from { transform: translateX(calc(-50% - 7px)); } to { transform: translateX(0); } } @media (max-width: 1180px) { .home-proof-redesign-client-card { flex-basis: 196px; } } @media (max-width: 760px) { .home-proof-redesign-client-marquee { mask-image: none; -webkit-mask-image: none; } .home-proof-redesign-client-marquee::before, .home-proof-redesign-client-marquee::after { display: none; } .home-proof-redesign-client-track { --client-gap: 12px; animation-duration: 28s; } .home-proof-redesign-client-card { flex-basis: 180px; min-height: 134px; padding: 16px 16px 14px; border-radius: 20px; } .home-proof-redesign-client-logo { max-width: 132px; height: 58px; } } @media (prefers-reduced-motion: reduce) { .home-proof-redesign-client-track { animation: none; } } /* Upgrade 112 — breathable proof section + minimal certificate cards */ .home-proof-redesign-section { padding-top: clamp(72px, 8vw, 112px); padding-bottom: clamp(76px, 8vw, 118px); } .home-proof-redesign-head { gap: clamp(34px, 6vw, 86px); margin-bottom: clamp(32px, 4vw, 48px); } .home-proof-redesign-head h2 { max-width: 760px; } .home-proof-redesign-head p { padding-top: 10px; max-width: 520px; } .home-proof-redesign-panel { margin-top: 0; padding: clamp(24px, 2.5vw, 34px); border-radius: 32px; } .home-proof-redesign-panel + .home-proof-redesign-panel { margin-top: clamp(30px, 4vw, 46px); } .home-proof-redesign-panel-head { margin-bottom: clamp(24px, 3vw, 34px); } .home-proof-redesign-panel-subtitle { max-width: 620px; } .home-proof-redesign-clients { padding-bottom: clamp(28px, 3vw, 38px); } .home-proof-redesign-client-marquee { padding: 4px 0 8px; } .home-proof-redesign-client-track { --client-gap: 18px; animation-duration: 40s; } .home-proof-redesign-client-card { flex-basis: 190px; min-height: 128px; padding: 16px 18px 15px; border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 12px 30px rgba(6, 27, 54, .035); } .home-proof-redesign-client-logo { max-width: 138px; height: 54px; } .home-proof-redesign-client-card strong { max-width: 150px; font-size: .92rem; color: #0b2448; } .home-proof-redesign-certificates { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,252,255,.96)); } .home-proof-redesign-certificate-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 24px); } .home-proof-redesign-certificate-card { position: relative; height: 100%; padding: 12px; border: 1px solid rgba(208, 224, 247, .95); border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 12px 30px rgba(6,27,54,.045); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .home-proof-redesign-certificate-card:hover, .home-proof-redesign-certificate-card:focus-visible { transform: translateY(-3px); border-color: rgba(7,88,216,.32); box-shadow: 0 20px 44px rgba(6,27,54,.08); } .home-proof-redesign-certificate-card:focus-visible { outline: 3px solid rgba(7,88,216,.18); outline-offset: 4px; } .home-proof-redesign-certificate-frame { aspect-ratio: 1.32 / 1; min-height: 0; padding: 14px; border-radius: 18px; border: 1px solid rgba(218, 230, 247, .9); background: linear-gradient(180deg, rgba(248,251,255,.9), rgba(255,255,255,1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.95); } .home-proof-redesign-certificate-frame img { border-radius: 12px; object-fit: contain; background: transparent; } .home-proof-redesign-certificate-placeholder { min-height: 100%; border-radius: 12px; } .home-proof-redesign-certificate-copy { min-height: 72px; padding: 14px 4px 4px; } .home-proof-redesign-certificate-copy strong { font-size: .98rem; line-height: 1.25; letter-spacing: -.01em; } .home-proof-redesign-certificate-copy small { margin-top: 6px; color: #6c7f9d; font-size: .86rem; } @media (max-width: 1180px) { .home-proof-redesign-client-card { flex-basis: 184px; } .home-proof-redesign-certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .home-proof-redesign-section { padding-top: 58px; padding-bottom: 64px; } .home-proof-redesign-panel { padding: 20px; border-radius: 26px; } .home-proof-redesign-panel-head { gap: 16px; margin-bottom: 22px; } .home-proof-redesign-client-track { --client-gap: 14px; } .home-proof-redesign-client-card { flex-basis: 168px; min-height: 118px; } .home-proof-redesign-certificate-grid { grid-template-columns: 1fr; } .home-proof-redesign-certificate-card { padding: 10px; border-radius: 22px; } .home-proof-redesign-certificate-copy { min-height: auto; } } /* Upgrade 113 — certificate modal fullscreen/mobile polish */ body.certificate-modal-open .site-header { display: none !important; } body.certificate-modal-open { overflow: hidden !important; } .certificate-modal { z-index: 99999 !important; inset: 0 !important; padding: clamp(14px, 2.2vw, 28px) !important; align-items: center !important; justify-content: center !important; background: radial-gradient(circle at 18% 12%, rgba(7,88,216,.18), transparent 30%), radial-gradient(circle at 82% 90%, rgba(0,166,223,.12), transparent 26%), rgba(2, 11, 24, .88) !important; backdrop-filter: blur(18px) saturate(1.05) !important; -webkit-backdrop-filter: blur(18px) saturate(1.05) !important; } .certificate-modal-panel { width: min(1180px, 100%) !important; max-height: min(88svh, 860px) !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important; border-radius: 28px !important; background: #061a34 !important; box-shadow: 0 38px 110px rgba(0,0,0,.52) !important; } .certificate-modal-image-wrap { min-height: min(72svh, 660px) !important; max-height: min(88svh, 860px) !important; padding: clamp(14px, 2vw, 26px) !important; background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,0)), #031124 !important; } .certificate-modal-image { max-width: 100% !important; max-height: min(80svh, 780px) !important; border-radius: 12px; box-shadow: 0 18px 45px rgba(0,0,0,.26); } .certificate-modal-info { justify-content: center !important; padding: clamp(24px, 3vw, 38px) !important; background: linear-gradient(180deg, rgba(10,45,105,.98), rgba(6,26,52,1)) !important; } .certificate-modal-close { top: 16px !important; right: 16px !important; z-index: 5 !important; width: 46px !important; height: 46px !important; background: rgba(3, 17, 36, .82) !important; box-shadow: 0 12px 28px rgba(0,0,0,.22); } @media (max-width: 900px) { .certificate-modal { padding: 0 !important; align-items: stretch !important; overflow: hidden !important; } .certificate-modal-panel { width: 100% !important; height: 100svh !important; max-height: none !important; display: flex !important; flex-direction: column !important; border-radius: 0 !important; border: 0 !important; overflow: auto !important; } .certificate-modal-image-wrap { flex: 1 0 auto !important; min-height: 56svh !important; max-height: none !important; padding: 58px 14px 16px !important; overflow: visible !important; } .certificate-modal-image { width: auto !important; max-width: 100% !important; max-height: 62svh !important; object-fit: contain !important; } .certificate-modal-info { flex: 0 0 auto !important; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important; } .certificate-modal-info h3 { font-size: clamp(24px, 7vw, 34px) !important; } .certificate-modal-info p { font-size: 14px !important; line-height: 1.65 !important; } .certificate-modal-close { position: fixed !important; top: calc(12px + env(safe-area-inset-top, 0px)) !important; right: 12px !important; width: 44px !important; height: 44px !important; } } @media (max-width: 520px) { .certificate-modal-image-wrap { min-height: 50svh !important; padding-inline: 10px !important; } .certificate-modal-image { max-height: 56svh !important; border-radius: 10px; } .certificate-modal-info { padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px)) !important; } .certificate-modal-download { width: 100% !important; } } html[dir="rtl"] .certificate-modal-close { right: auto !important; left: 16px !important; } @media (max-width: 900px) { html[dir="rtl"] .certificate-modal-close { right: auto !important; left: 12px !important; } } /* Upgrade 115 — normalize seeded client logo display */ .home-proof-redesign-client-card, .trust-logo-card { justify-content: center; } .home-proof-redesign-client-logo, .trust-logo-media { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; overflow: visible !important; } .home-proof-redesign-client-logo { max-width: 156px !important; height: 62px !important; } .trust-logo-media { max-width: 188px !important; height: 86px !important; margin-inline: auto !important; } .home-proof-redesign-client-logo img, .trust-logo-media img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center center !important; display: block !important; filter: none !important; } .home-proof-redesign-client-card strong { min-height: 2.35em; display: flex; align-items: center; justify-content: center; } .trust-logo-card { min-height: 184px; gap: 18px; } .trust-logo-card h3 { min-height: 2.45em; display: flex; align-items: center; justify-content: center; max-width: 240px; } @media (max-width: 760px) { .home-proof-redesign-client-logo { max-width: 138px !important; height: 56px !important; } .trust-logo-media { max-width: 168px !important; height: 76px !important; } .trust-logo-card { min-height: 166px; } } /* Upgrade 116 — calmer natural client logo scale */ .home-proof-redesign-client-card { flex-basis: 190px !important; min-height: 132px !important; padding: 16px 16px 14px !important; gap: 10px !important; } .home-proof-redesign-client-logo { width: 132px !important; max-width: 132px !important; height: 50px !important; max-height: 50px !important; margin-inline: auto !important; } .home-proof-redesign-client-logo img { width: auto !important; height: auto !important; max-width: 132px !important; max-height: 50px !important; object-fit: contain !important; } .home-proof-redesign-client-card strong { min-height: 2.3em !important; max-width: 150px !important; font-size: .92rem !important; line-height: 1.18 !important; } .trust-logo-card { min-height: 168px !important; padding: 24px 20px !important; gap: 16px !important; } .trust-logo-media { width: 170px !important; max-width: 170px !important; height: 58px !important; max-height: 58px !important; margin-inline: auto !important; } .trust-logo-media img { width: auto !important; height: auto !important; max-width: 170px !important; max-height: 58px !important; object-fit: contain !important; } .trust-logo-card h3 { min-height: 2.35em !important; max-width: 260px !important; margin-inline: auto !important; font-size: 1rem !important; line-height: 1.25 !important; } @media (max-width: 760px) { .home-proof-redesign-client-card { flex-basis: 164px !important; min-height: 122px !important; } .home-proof-redesign-client-logo { width: 116px !important; max-width: 116px !important; height: 44px !important; max-height: 44px !important; } .home-proof-redesign-client-logo img { max-width: 116px !important; max-height: 44px !important; } .trust-logo-card { min-height: 150px !important; } .trust-logo-media { width: 145px !important; max-width: 145px !important; height: 50px !important; max-height: 50px !important; } .trust-logo-media img { max-width: 145px !important; max-height: 50px !important; } } /* Upgrade 117 — simplified home trusted clients + certificates showcase */ .home-proof-redesign-section { position: relative; overflow: hidden; } .home-proof-simple-block { margin-top: 28px; padding: clamp(30px, 3.6vw, 42px); border: 1px solid #dbe7fa; border-radius: 30px; background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,252,255,.98) 100%); box-shadow: 0 18px 44px rgba(6, 27, 54, .045); } .home-proof-simple-intro { max-width: 760px; margin: 0 auto 26px; text-align: center; } .home-proof-simple-intro h3 { margin: 12px 0 12px; font-size: clamp(2rem, 3vw, 3.15rem); line-height: 1.04; letter-spacing: -.04em; color: var(--dark); } .home-proof-simple-intro p { max-width: 860px; margin: 0 auto; color: #637695; font-size: 1.03rem; line-height: 1.75; } .home-proof-simple-logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .home-proof-simple-logo-card { min-height: 264px; padding: 24px 18px 22px; border-radius: 22px; border: 1px solid #dde8fb; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; color: var(--dark); text-decoration: none; box-shadow: 0 8px 20px rgba(6, 27, 54, .03); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .home-proof-simple-logo-card:hover { transform: translateY(-4px); border-color: rgba(7,88,216,.32); box-shadow: 0 18px 34px rgba(6, 27, 54, .07); } .home-proof-simple-logo-media { width: 100%; height: 92px; display: grid; place-items: center; } .home-proof-simple-logo-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center center; } .home-proof-simple-logo-fallback { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg, rgba(7,88,216,.12), rgba(0,166,223,.08)); color: var(--primary); font-size: 1.2rem; font-weight: 900; text-transform: uppercase; } .home-proof-simple-logo-card strong { display: block; font-size: 1rem; line-height: 1.28; letter-spacing: -.02em; } .home-proof-simple-logo-card small { display: block; margin-top: -6px; color: #6780a4; font-size: .92rem; line-height: 1.45; } .home-proof-simple-certificate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .home-proof-simple-certificate-card { padding: 0; border: 0; border-radius: 22px; background: transparent; text-align: left; cursor: pointer; display: flex; flex-direction: column; height: 100%; } .home-proof-simple-certificate-media { position: relative; isolation: isolate; width: 100%; height: clamp(220px, 18vw, 288px); padding: 14px; display: flex; align-items: center; justify-content: center; border-radius: 22px; overflow: hidden; border: 1px solid #dde8fb; background: #fff; box-shadow: 0 10px 24px rgba(6, 27, 54, .04); } .home-proof-simple-certificate-media::before { content: ""; position: absolute; inset: -10px; background-image: var(--certificate-preview-image); background-size: cover; background-position: center center; background-repeat: no-repeat; filter: blur(18px) saturate(.9); opacity: .16; transform: scale(1.03); } .home-proof-simple-certificate-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.92)); } .home-proof-simple-certificate-media img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center center; border-radius: 14px; box-shadow: 0 8px 18px rgba(6, 27, 54, .06); background: #fff; } .home-proof-simple-certificate-placeholder { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; padding: 22px; color: var(--dark); text-align: center; font-weight: 800; background: linear-gradient(135deg, #f7fbff, #edf4ff); border-radius: 14px; } .home-proof-simple-certificate-copy { display: block; padding: 14px 4px 0; } .home-proof-simple-certificate-copy strong { display: block; color: var(--dark); font-size: 1.04rem; line-height: 1.28; letter-spacing: -.02em; } .home-proof-simple-certificate-copy small { display: block; margin-top: 6px; color: #6780a4; font-size: .92rem; line-height: 1.45; } .home-proof-simple-certificate-card:hover .home-proof-simple-certificate-media, .home-proof-simple-certificate-card:focus-visible .home-proof-simple-certificate-media { border-color: rgba(7,88,216,.32); box-shadow: 0 18px 34px rgba(6, 27, 54, .08); } .home-proof-simple-certificate-card:focus-visible { outline: 2px solid rgba(7,88,216,.28); outline-offset: 6px; } html[dir="rtl"] .home-proof-simple-logo-card, html[dir="rtl"] .home-proof-simple-certificate-card, html[dir="rtl"] .home-proof-simple-intro { text-align: center; } html[dir="rtl"] .home-proof-simple-certificate-copy { text-align: right; } @media (max-width: 1280px) { .home-proof-simple-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-proof-simple-certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .home-proof-simple-block { padding: 24px 18px; border-radius: 24px; } .home-proof-simple-intro { margin-bottom: 20px; } .home-proof-simple-intro h3 { font-size: clamp(1.7rem, 8vw, 2.4rem); } .home-proof-simple-intro p { font-size: .98rem; } .home-proof-simple-logo-grid, .home-proof-simple-certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .home-proof-simple-logo-card { min-height: 218px; padding: 20px 14px 18px; } .home-proof-simple-logo-media { height: 78px; } .home-proof-simple-certificate-media { height: 220px; padding: 12px; } } @media (max-width: 560px) { .home-proof-simple-logo-grid, .home-proof-simple-certificate-grid { grid-template-columns: 1fr; } .home-proof-simple-logo-card { min-height: 196px; } .home-proof-simple-certificate-media { height: 230px; } } /* Upgrade 118 — single-line lively client logo slideshow */ .home-proof-simple-clients { padding-inline: clamp(24px, 4vw, 52px); padding-block: clamp(34px, 4vw, 54px); } .home-proof-simple-clients .home-proof-simple-intro { max-width: 900px; margin-bottom: 30px; } .home-proof-simple-clients .home-proof-simple-intro h3 { max-width: 880px; margin-inline: auto; font-size: clamp(2.2rem, 4vw, 4.25rem); line-height: .98; } .home-proof-simple-clients .home-proof-simple-intro p { max-width: 980px; font-size: 1.05rem; } .home-proof-simple-logo-slider { position: relative; overflow: hidden; margin-top: 34px; padding: 6px 0 14px; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .home-proof-simple-logo-slider::before, .home-proof-simple-logo-slider::after { content: ""; position: absolute; top: 0; bottom: 0; width: 78px; pointer-events: none; z-index: 3; } .home-proof-simple-logo-slider::before { left: 0; background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,0)); } .home-proof-simple-logo-slider::after { right: 0; background: linear-gradient(270deg, rgba(255,255,255,.98), rgba(255,255,255,0)); } .home-proof-simple-logo-track { --client-slide-gap: 18px; display: flex; align-items: stretch; width: max-content; gap: var(--client-slide-gap); animation: homeClientSingleLineSlide 52s linear infinite; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .home-proof-simple-logo-track-group { display: flex; align-items: stretch; flex-shrink: 0; gap: var(--client-slide-gap); } .home-proof-simple-logo-grid { display: none; } .home-proof-simple-logo-card { flex: 0 0 226px; min-height: 246px; padding: 26px 20px 24px; border-radius: 24px; background: radial-gradient(circle at 50% 18%, rgba(7,88,216,.035), transparent 46%), #fff; border: 1px solid #dce8fb; box-shadow: 0 8px 20px rgba(6,27,54,.028); transform: translateZ(0); pointer-events: none; user-select: none; } .home-proof-simple-logo-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 22px 42px rgba(6,27,54,.085); } .home-proof-simple-logo-card:nth-child(2n) { transform: translateY(8px); } .home-proof-simple-logo-card:nth-child(2n):hover { transform: translateY(2px) scale(1.015); } .home-proof-simple-logo-card:nth-child(3n) .home-proof-simple-logo-media img { animation-delay: -1.5s; } .home-proof-simple-logo-media { height: 92px; margin-bottom: 6px; } .home-proof-simple-logo-media img { max-width: 158px; max-height: 78px; width: auto; height: auto; object-fit: contain; object-position: center center; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .home-proof-simple-logo-card strong { max-width: 172px; margin-inline: auto; font-size: 1rem; } .home-proof-simple-logo-card small { max-width: 172px; margin-inline: auto; color: #6b7e9f; } @keyframes homeClientSingleLineSlide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 9px), 0, 0); } } @keyframes homeClientSingleLineSlideRtl { from { transform: translate3d(calc(-50% - 9px), 0, 0); } to { transform: translate3d(0, 0, 0); } } html[dir="rtl"] .home-proof-simple-logo-track { animation-name: homeClientSingleLineSlideRtl; } html[dir="rtl"] .home-proof-simple-logo-slider::before { background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,0)); } html[dir="rtl"] .home-proof-simple-logo-slider::after { background: linear-gradient(270deg, rgba(255,255,255,.98), rgba(255,255,255,0)); } @media (max-width: 1180px) { .home-proof-simple-logo-card { flex-basis: 204px; min-height: 226px; } .home-proof-simple-logo-media { height: 82px; } .home-proof-simple-logo-media img { max-width: 142px; max-height: 70px; } } @media (max-width: 760px) { .home-proof-simple-logo-slider { margin-top: 24px; mask-image: none; -webkit-mask-image: none; } .home-proof-simple-logo-slider::before, .home-proof-simple-logo-slider::after { display: none; } .home-proof-simple-logo-track { --client-slide-gap: 14px; animation-duration: 34s; } .home-proof-simple-logo-card { flex-basis: 178px; min-height: 204px; padding: 20px 16px 18px; border-radius: 20px; } .home-proof-simple-logo-card:nth-child(2n) { transform: none; } .home-proof-simple-logo-card:nth-child(2n):hover { transform: translateY(-4px) scale(1.01); } .home-proof-simple-logo-media { height: 72px; } .home-proof-simple-logo-media img { max-width: 126px; max-height: 62px; } } @media (prefers-reduced-motion: reduce) { .home-proof-simple-logo-track, .home-proof-simple-logo-media img { animation: none; } } /* Upgrade 119 — clean home proof heading and client slide copy */ .home-proof-redesign-section { padding-top: clamp(44px, 5vw, 72px); } .home-proof-redesign-section > .container > .home-proof-redesign-head { display: none !important; } .home-proof-simple-clients { margin-top: 0; } .home-proof-simple-logo-card { min-height: 218px; justify-content: center; } .home-proof-simple-logo-card small { display: none !important; } .home-proof-simple-logo-media { margin-bottom: 12px; } @media (max-width: 760px) { .home-proof-redesign-section { padding-top: 34px; } .home-proof-simple-logo-card { min-height: 198px; } } /* Upgrade 120 — minimal professional section headings for services and projects */ .home-featured-section { position: relative; } .home-featured-services { padding-top: clamp(54px, 6vw, 82px); } .home-featured-projects { padding-top: clamp(60px, 6vw, 88px); } .home-section-heading { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; max-width: 980px; } .home-section-heading::before { content: ""; position: absolute; left: 0; top: -16px; width: 46px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: .9; } .home-section-heading .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; letter-spacing: .14em; } .home-section-heading h2 { max-width: 850px; margin: 0; color: var(--dark); font-size: clamp(2rem, 3.3vw, 3.35rem); line-height: 1.02; letter-spacing: -.045em; } .home-section-heading p { max-width: 680px; margin: 12px 0 0; color: #647693; font-size: 1.02rem; line-height: 1.7; } .home-section-heading-link { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #cfe0fb; background: rgba(255,255,255,.82); color: var(--primary); font-size: .95rem; font-weight: 900; box-shadow: 0 10px 24px rgba(6, 27, 54, .04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .home-section-heading-link:hover { transform: translateY(-2px); border-color: rgba(7,88,216,.38); box-shadow: 0 16px 30px rgba(6, 27, 54, .075); } .home-section-heading-link span { font-size: 1.1rem; line-height: 1; } .home-featured-services .grid, .home-featured-projects .grid { margin-top: 8px; } html[dir="rtl"] .home-section-heading { direction: rtl; text-align: right; } html[dir="rtl"] .home-section-heading::before { left: auto; right: 0; } @media (max-width: 980px) { .home-section-heading { display: block; max-width: 760px; } .home-section-heading-link { margin-top: 18px; } } @media (max-width: 680px) { .home-featured-services, .home-featured-projects { padding-top: 52px; } .home-section-heading { margin-bottom: 20px; } .home-section-heading h2 { font-size: clamp(1.75rem, 8vw, 2.55rem); } .home-section-heading p { font-size: .96rem; line-height: 1.65; } .home-section-heading-link { width: 100%; } } /* Upgrade 121 — move home projects action below project cards */ .home-section-heading-projects { align-items: flex-start; } .home-projects-bottom-action { display: flex; justify-content: flex-end; margin-top: 24px; padding-right: 8px; } .home-projects-bottom-action .home-section-heading-link { min-width: 176px; background: #fff; } @media (max-width: 980px) { .home-projects-bottom-action { justify-content: flex-start; padding-right: 0; } } @media (max-width: 680px) { .home-projects-bottom-action { margin-top: 18px; } .home-projects-bottom-action .home-section-heading-link { width: 100%; } } /* Upgrade 122 — global production readability and CTA contrast hardening */ .card, .table-card, details.card, .contact-intro-card, .contact-form-card, .contact-map-side-card, .contact-office-card, .contact-method-card, .contact-hours-card, .contact-faq-card, .service-modern-card, .project-card, .project-detail-info-card, .project-overview-card, .project-stakeholder-card, .about-value-card, .about-mvv-simple-card, .career-job-card, .career-count-card, .trust-logo-card, .home-proof-redesign-client-card, .home-proof-redesign-certificate-card { color: var(--text, #092044); } .card h1, .card h2, .card h3, .card h4, details.card summary, .table-card h1, .table-card h2, .table-card h3, .service-modern-card h3, .project-card h3, .project-detail-info-card h2, .project-overview-card h3, .project-stakeholder-card strong, .contact-form-card h2, .contact-intro-card h2, .contact-map-side-card h2, .contact-office-card h3, .contact-method-card h3, .contact-hours-card h3, .contact-faq-card h3 { color: #061a34; } .card p, .card li, .card div, details.card div, .table-card td, .service-modern-card p, .project-card p, .project-detail-info-card p, .project-overview-card p, .contact-form-card p, .contact-intro-card p, .contact-map-side-card p, .contact-office-card p, .contact-method-card p, .contact-hours-card p, .contact-faq-card p { color: #40566f; } .cta-card-contrast, .card.cta-card-contrast { position: relative; overflow: hidden; background: linear-gradient(135deg, #05224f 0%, #074cb9 58%, #0758d8 100%) !important; color: #fff !important; border-color: rgba(255,255,255,.18) !important; box-shadow: 0 22px 55px rgba(4, 34, 79, .24); } .cta-card-contrast::before { content: ""; position: absolute; inset: -40% auto auto 55%; width: 360px; height: 360px; border-radius: 999px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%); pointer-events: none; } .cta-card-contrast > * { position: relative; z-index: 1; } .cta-card-contrast h1, .cta-card-contrast h2, .cta-card-contrast h3, .cta-card-contrast h4, .cta-card-contrast strong, .cta-card-contrast .eyebrow { color: #fff !important; text-shadow: 0 1px 0 rgba(0,0,0,.12); } .cta-card-contrast p, .cta-card-contrast li, .cta-card-contrast div:not(.btn) { color: rgba(255,255,255,.90) !important; } .cta-card-contrast .btn-light { color: #0758d8 !important; background: #fff !important; border-color: rgba(255,255,255,.8) !important; } .hero.dark .btn-outline, .cta .btn-outline, .cta-card-contrast .btn-outline { color: #0758d8; background: #fff; border-color: rgba(255,255,255,.8); } .admin-empty-section, .admin-empty-card { color: #092044; } @media (max-width: 760px) { .card, .cta-card-contrast { border-radius: 18px; } .cta-card-contrast h3 { line-height: 1.18; } } /* Upgrade 125 — production document center and brochure polish */ .document-featured-card{margin-bottom:28px;display:grid;grid-template-columns:240px 1fr auto;gap:30px;align-items:center} .document-request-card{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:24px} .cms-page-downloads .table-card td:first-child{font-weight:800;color:#071f42;min-width:240px} .cms-page-downloads .table-card td:last-child{white-space:nowrap} .cms-page-downloads .table-card .btn{margin:3px} .cms-page-downloads .tabs .tab{display:inline-flex;align-items:center;gap:8px} .service-brochure-note{color:var(--muted);font-size:14px} @media(max-width:980px){ .document-featured-card{grid-template-columns:1fr;gap:18px} .document-featured-card .grid{display:flex;flex-wrap:wrap} .document-request-card{display:grid;grid-template-columns:1fr} .cms-page-downloads form.grid-4{grid-template-columns:1fr} .cms-page-downloads .table-card{border-radius:14px} } /* Upgrade 126: production accessibility + SEO support */ .skip-link { position: fixed; inset-inline-start: 16px; top: 12px; z-index: 10000; transform: translateY(-140%); padding: 10px 14px; border-radius: 999px; background: var(--dark); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 14px 30px rgba(6, 26, 52, .24); transition: transform .18s ease; } .skip-link:focus { transform: translateY(0); } :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 78%, white); outline-offset: 3px; } #main-content:focus { outline: none; } .nav-links a[aria-current="page"] { color: var(--primary); font-weight: 800; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Upgrade 128 production media resilience */ img[loading="lazy"] { content-visibility: auto; } .is-fallback-image, .project-thumb-fallback, .service-card-thumb-placeholder { background: linear-gradient(135deg, rgba(7,88,216,.08), rgba(0,166,223,.14)); } .service-card-thumb img, .project-thumb, .placeholder-img { max-width: 100%; height: auto; } .project-thumb, .service-card-thumb img, .service-card-thumb-placeholder { min-height: 180px; object-fit: cover; } .card img, .service-modern-card img, .project-card img { -webkit-user-drag: none; } @media (max-width: 640px) { .project-thumb, .service-card-thumb img, .service-card-thumb-placeholder { min-height: 150px; } } /* Upgrade 136 — Arabic/RTL home proof slider visibility and localized heading polish */ .home-proof-simple-logo-slider { min-height: 280px; display: block; } .home-proof-simple-logo-track, .home-proof-simple-logo-track-group { min-height: 252px; } .home-proof-simple-logo-card { display: flex !important; opacity: 1 !important; visibility: visible !important; } html[dir="rtl"] .home-proof-simple-logo-slider { direction: ltr; } html[dir="rtl"] .home-proof-simple-logo-track { animation-name: homeClientSingleLineSlide !important; transform: translateX(0); } html[dir="rtl"] .home-proof-simple-logo-card { direction: rtl; } html[dir="rtl"] .home-proof-simple-intro h3, html[dir="rtl"] .home-proof-simple-intro p { text-align: center; } @media (max-width: 760px) { .home-proof-simple-logo-slider { min-height: 230px; } .home-proof-simple-logo-track, .home-proof-simple-logo-track-group { min-height: 210px; } } /* Upgrade 148 — services list minimal redesign + seeded page hero backgrounds */ .services-featured-panel{ background:linear-gradient(135deg,#063278 0%, #0758d8 62%, #0a68f0 100%); color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:24px; box-shadow:0 18px 42px rgba(6,39,98,.20); padding:32px 32px 34px; } .services-featured-panel .eyebrow{ color:#d7e7ff; margin-bottom:10px; } .services-featured-panel h2, .services-featured-panel p{ color:#fff; } .services-featured-panel h2{ max-width:12ch; margin-bottom:12px; } .services-featured-panel p{ max-width:760px; color:rgba(255,255,255,.88); margin-bottom:22px; } .services-featured-panel .btn-light{ box-shadow:none; } .services-process-section h2, .services-faq-section h2{ max-width:16ch; } .services-process-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:24px; } .services-process-card{ text-align:center; align-items:center; justify-content:flex-start; min-height:260px; padding:28px 22px; border-radius:22px; box-shadow:0 12px 26px rgba(6,27,54,.05); } .services-process-icon{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; margin:0 auto 18px; color:var(--primary); background:linear-gradient(180deg,#eef5ff 0%, #f8fbff 100%); border:1px solid rgba(7,88,216,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); } .services-process-icon svg{ width:28px; height:28px; } .services-process-card h3{ margin:0 0 10px; font-size:clamp(22px,2vw,30px); color:var(--secondary); } .services-process-card p{ margin:0; color:#5d6f89; max-width:26ch; } html[dir="rtl"] .services-process-card, html[lang="ar"] .services-process-card, html[lang="zh"] .services-process-card{ text-align:center; } .services-faq-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:20px; } .services-faq-item{ padding:0; overflow:hidden; border-radius:20px; } .services-faq-item summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; font-weight:800; cursor:pointer; color:var(--secondary); } .services-faq-item summary::-webkit-details-marker{display:none;} .services-faq-item[open] summary{ border-bottom:1px solid var(--line); } .services-faq-chevron{ width:34px; height:34px; flex:0 0 34px; border-radius:999px; display:grid; place-items:center; color:var(--primary); background:#eef5ff; transition:transform .2s ease, background .2s ease; } .services-faq-item[open] .services-faq-chevron{ transform:rotate(180deg); background:#dfeeff; } .services-faq-chevron svg{ width:18px; height:18px; } .services-faq-answer{ padding:18px 24px 22px; color:#5d6f89; } .services-faq-answer p:last-child{margin-bottom:0;} @media (max-width: 1100px){ .services-process-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 900px){ .services-faq-grid{ grid-template-columns:1fr; } } @media (max-width: 640px){ .services-featured-panel{ padding:24px 22px 26px; border-radius:20px; } .services-process-grid{ grid-template-columns:1fr; } .services-process-card{ min-height:auto; padding:24px 20px; } .services-faq-item summary, .services-faq-answer{ padding-inline:18px; } } /* Upgrade 149 — centered photo hero visibility system */ .page-photo-hero, .service-detail-hero.has-parallax-hero, .services-modern-hero.has-parallax-hero, .contact-hero.has-contact-hero-image, .contact-hero.contact-hero-parallax { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(420px, 45vw, 620px); color: #fff; border-bottom: 1px solid rgba(7, 88, 216, .16); } .page-photo-hero[style], .page-photo-hero { background-image: radial-gradient(circle at 50% 42%, rgba(7, 88, 216, .10), transparent 34%), linear-gradient(90deg, rgba(3, 13, 29, .84) 0%, rgba(4, 26, 61, .70) 42%, rgba(4, 26, 61, .46) 66%, rgba(3, 13, 29, .72) 100%), var(--page-hero-bg) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } .page-photo-hero::before, .service-detail-hero.has-parallax-hero::before, .services-modern-hero.has-parallax-hero::before, .contact-hero.has-contact-hero-image::before, .contact-hero.contact-hero-parallax::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(1, 9, 21, .22), rgba(1, 9, 21, .06) 38%, rgba(1, 9, 21, .28)), radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 42%); } .page-photo-hero::after, .service-detail-hero.has-parallax-hero::after, .services-modern-hero.has-parallax-hero::after, .contact-hero.has-contact-hero-image::after, .contact-hero.contact-hero-parallax::after { content: ""; position: absolute; inset: auto 0 0; height: 118px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255,255,255,.96)); } .page-photo-hero > .container, .page-photo-hero .hero-content, .service-detail-hero.has-parallax-hero .hero-content, .services-modern-hero.has-parallax-hero .container, .contact-hero.has-contact-hero-image .contact-hero-inner, .contact-hero.contact-hero-parallax .contact-hero-inner { position: relative; z-index: 2; } .page-photo-hero .hero-content, .service-detail-hero.has-parallax-hero .hero-content { width: min(980px, 100%); max-width: 980px; margin-inline: auto; padding: clamp(88px, 9vw, 132px) 0 clamp(112px, 10vw, 154px); text-align: center; } .page-photo-hero h1, .service-detail-hero.has-parallax-hero h1, .services-modern-hero.has-parallax-hero h1, .contact-hero.has-contact-hero-image h1, .contact-hero.contact-hero-parallax h1 { color: #fff !important; text-shadow: 0 18px 52px rgba(0,0,0,.36); letter-spacing: -.055em; } .page-photo-hero p, .service-detail-hero.has-parallax-hero p, .services-modern-hero.has-parallax-hero p, .contact-hero.has-contact-hero-image p, .contact-hero.contact-hero-parallax p { color: rgba(255,255,255,.88) !important; text-shadow: 0 10px 30px rgba(0,0,0,.30); margin-inline: auto; } .page-photo-hero .eyebrow, .service-detail-hero.has-parallax-hero .eyebrow, .services-modern-hero.has-parallax-hero .eyebrow, .contact-hero.has-contact-hero-image .eyebrow, .contact-hero.contact-hero-parallax .eyebrow { color: #62b4ff !important; text-shadow: 0 10px 26px rgba(0,0,0,.32); } .page-photo-hero .hero-actions, .service-detail-hero.has-parallax-hero .hero-actions { justify-content: center; } /* Services page hero uses a custom CSS variable, so give it the same stronger photo treatment. */ .services-modern-hero.has-parallax-hero { background-image: radial-gradient(circle at 50% 48%, rgba(7, 88, 216, .10), transparent 34%), linear-gradient(90deg, rgba(3, 13, 29, .86) 0%, rgba(4, 26, 61, .68) 42%, rgba(4, 26, 61, .46) 66%, rgba(3, 13, 29, .74) 100%), var(--services-hero-bg) !important; background-size: cover !important; background-position: center center !important; } .services-modern-hero.has-parallax-hero .container { min-height: inherit; display: grid; place-items: center; text-align: center; padding-block: clamp(88px, 9vw, 132px) clamp(112px, 10vw, 154px); } .services-modern-hero.has-parallax-hero h1, .services-modern-hero.has-parallax-hero p { margin-inline: auto; } /* Contact hero: centered premium photo hero instead of the washed-out light overlay. */ .contact-hero.has-contact-hero-image, .contact-hero.contact-hero-parallax { min-height: clamp(480px, 50vw, 660px); display: grid; align-items: center; background-image: radial-gradient(circle at 50% 52%, rgba(7, 88, 216, .10), transparent 34%), linear-gradient(90deg, rgba(2, 11, 27, .88) 0%, rgba(3, 20, 48, .74) 42%, rgba(5, 35, 78, .52) 68%, rgba(2, 11, 27, .76) 100%), var(--contact-hero-bg) !important; background-size: cover !important; background-position: center center !important; background-attachment: scroll !important; } .contact-hero.has-contact-hero-image .contact-hero-inner, .contact-hero.contact-hero-parallax .contact-hero-inner { display: grid !important; grid-template-columns: 1fr !important; place-items: center; padding: clamp(92px, 10vw, 142px) 0 clamp(116px, 10vw, 166px) !important; } .contact-hero.has-contact-hero-image .contact-hero-copy, .contact-hero.contact-hero-parallax .contact-hero-copy { max-width: 930px !important; margin-inline: auto; text-align: center; } .contact-hero.has-contact-hero-image .contact-hero-copy h1, .contact-hero.contact-hero-parallax .contact-hero-copy h1 { max-width: 930px !important; margin-inline: auto; font-size: clamp(48px, 6vw, 92px) !important; line-height: .96 !important; } .contact-hero.has-contact-hero-image .contact-hero-copy p, .contact-hero.contact-hero-parallax .contact-hero-copy p { max-width: 740px !important; font-size: clamp(17px, 1.45vw, 22px) !important; } /* Service detail hero photo treatment. */ .service-detail-hero.has-parallax-hero { background-image: radial-gradient(circle at 50% 50%, rgba(7, 88, 216, .12), transparent 34%), linear-gradient(90deg, rgba(2, 11, 27, .88) 0%, rgba(3, 20, 48, .72) 42%, rgba(5, 35, 78, .52) 68%, rgba(2, 11, 27, .76) 100%), var(--service-hero-bg) !important; background-size: cover !important; background-position: center center !important; } /* Career hero has a side panel; keep the hero readable while letting the image show. */ .career-hero.page-photo-hero .career-hero-grid { position: relative; z-index: 2; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(28px, 5vw, 70px); padding-block: clamp(88px, 9vw, 132px) clamp(112px, 10vw, 154px); } .career-hero.page-photo-hero .career-hero-copy { padding: 0; text-align: center; margin-inline: auto; } .career-hero.page-photo-hero .career-hero-copy .hero-actions { justify-content: center; } .career-hero.page-photo-hero .career-hero-panel { background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } @media (max-width: 980px) { .page-photo-hero, .service-detail-hero.has-parallax-hero, .services-modern-hero.has-parallax-hero, .contact-hero.has-contact-hero-image, .contact-hero.contact-hero-parallax { min-height: clamp(390px, 68vw, 560px); } .page-photo-hero .hero-content, .service-detail-hero.has-parallax-hero .hero-content, .services-modern-hero.has-parallax-hero .container, .contact-hero.has-contact-hero-image .contact-hero-inner, .contact-hero.contact-hero-parallax .contact-hero-inner { padding-block: 82px 118px !important; } .career-hero.page-photo-hero .career-hero-grid { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 640px) { .page-photo-hero .hero-content, .service-detail-hero.has-parallax-hero .hero-content, .services-modern-hero.has-parallax-hero .container, .contact-hero.has-contact-hero-image .contact-hero-inner, .contact-hero.contact-hero-parallax .contact-hero-inner { padding-block: 68px 98px !important; } .contact-hero.has-contact-hero-image .contact-hero-copy h1, .contact-hero.contact-hero-parallax .contact-hero-copy h1 { font-size: clamp(38px, 11vw, 58px) !important; } } /* Upgrade 150 — small hero/page-load polish */ .career-hero.page-photo-hero .career-hero-panel, .career-hero.page-photo-hero .career-hero-panel * { text-shadow: none !important; } .career-hero.page-photo-hero .career-hero-panel { color: var(--secondary) !important; background: rgba(255,255,255,.96) !important; border: 1px solid rgba(210,226,247,.88) !important; } .career-hero.page-photo-hero .career-hero-panel h1, .career-hero.page-photo-hero .career-hero-panel h2, .career-hero.page-photo-hero .career-hero-panel h3, .career-hero.page-photo-hero .career-hero-panel strong, .career-hero.page-photo-hero .career-hero-panel .career-hero-stat-value { color: var(--secondary) !important; } .career-hero.page-photo-hero .career-hero-panel p, .career-hero.page-photo-hero .career-hero-panel span, .career-hero.page-photo-hero .career-hero-panel li, .career-hero.page-photo-hero .career-hero-panel small { color: #47617e !important; } .career-hero.page-photo-hero .career-hero-panel .eyebrow, .career-hero.page-photo-hero .career-hero-panel .career-hero-stat-label { color: var(--primary) !important; } .trust-logo-tabs { scroll-margin-top: calc(var(--public-header-height, 92px) + 18px); } @media (max-width: 900px) { .career-hero.page-photo-hero .career-hero-grid { gap: 22px !important; } } /* Upgrade 151 — transparent career hero panel + consistent centered hero pills */ .page-photo-hero .eyebrow, .service-detail-hero.has-parallax-hero .eyebrow, .services-modern-hero.has-parallax-hero .eyebrow, .contact-hero.has-contact-hero-image .eyebrow, .contact-hero.contact-hero-parallax .eyebrow, .career-hero.page-photo-hero .career-hero-eyebrow { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; max-width: max-content; min-height: 34px; margin: 0 auto 22px !important; padding: 8px 16px !important; border-radius: 999px; border: 1px solid rgba(122, 185, 255, .42); background: rgba(7, 88, 216, .18); color: #86c8ff !important; font-size: 13px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .17em !important; text-transform: uppercase; text-shadow: 0 10px 26px rgba(0,0,0,.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px rgba(0,0,0,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .page-photo-hero .eyebrow::after, .page-photo-hero .eyebrow::before, .service-detail-hero.has-parallax-hero .eyebrow::after, .service-detail-hero.has-parallax-hero .eyebrow::before, .services-modern-hero.has-parallax-hero .eyebrow::after, .services-modern-hero.has-parallax-hero .eyebrow::before, .contact-hero.has-contact-hero-image .eyebrow::after, .contact-hero.has-contact-hero-image .eyebrow::before, .contact-hero.contact-hero-parallax .eyebrow::after, .contact-hero.contact-hero-parallax .eyebrow::before, .career-hero.page-photo-hero .career-hero-eyebrow::after, .career-hero.page-photo-hero .career-hero-eyebrow::before { display: none !important; content: none !important; } .career-hero.page-photo-hero .career-hero-copy { display: flex; flex-direction: column; align-items: center; } .career-hero.page-photo-hero .career-hero-copy h1 { margin-top: 0 !important; } .career-hero.page-photo-hero .career-hero-panel, .career-hero.page-photo-hero .career-hero-panel * { text-shadow: none !important; } .career-hero.page-photo-hero .career-hero-panel { color: #fff !important; background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.10)) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: 0 34px 95px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.28) !important; backdrop-filter: blur(18px) saturate(1.18) !important; -webkit-backdrop-filter: blur(18px) saturate(1.18) !important; } .career-hero.page-photo-hero .career-hero-panel h1, .career-hero.page-photo-hero .career-hero-panel h2, .career-hero.page-photo-hero .career-hero-panel h3, .career-hero.page-photo-hero .career-hero-panel strong, .career-hero.page-photo-hero .career-hero-panel .career-hero-stat-value { color: #fff !important; } .career-hero.page-photo-hero .career-hero-panel p, .career-hero.page-photo-hero .career-hero-panel span, .career-hero.page-photo-hero .career-hero-panel li, .career-hero.page-photo-hero .career-hero-panel small { color: rgba(255,255,255,.78) !important; } .career-hero.page-photo-hero .career-hero-panel .career-panel-top span, .career-hero.page-photo-hero .career-hero-panel .career-panel-top small, .career-hero.page-photo-hero .career-hero-panel .career-hero-stat-label { color: rgba(224,240,255,.86) !important; } .career-hero.page-photo-hero .career-hero-stats .career-hero-stat, .career-hero.page-photo-hero .career-panel-flow > div { background: rgba(255,255,255,.13) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important; } .career-hero.page-photo-hero .career-panel-flow b { background: rgba(255,255,255,.20) !important; color: #fff !important; border-color: rgba(255,255,255,.22) !important; } @media (max-width: 900px) { .page-photo-hero .eyebrow, .service-detail-hero.has-parallax-hero .eyebrow, .services-modern-hero.has-parallax-hero .eyebrow, .contact-hero.has-contact-hero-image .eyebrow, .contact-hero.contact-hero-parallax .eyebrow, .career-hero.page-photo-hero .career-hero-eyebrow { min-height: 30px; margin-bottom: 16px !important; padding: 7px 13px !important; font-size: 11px !important; letter-spacing: .14em !important; } .career-hero.page-photo-hero .career-hero-panel { max-width: 560px; margin-inline: auto; } } /* Upgrade 152 — unified parallax hero polish */ .page-photo-hero, .service-detail-hero.has-parallax-hero, .services-modern-hero.has-parallax-hero, .contact-hero.has-contact-hero-image, .contact-hero.contact-hero-parallax { background-attachment: fixed !important; background-position: center center !important; box-shadow: none !important; filter: none !important; } /* Remove the heavy bottom fade/shadow so all page heroes end cleanly. */ .page-photo-hero::after, .service-detail-hero.has-parallax-hero::after, .services-modern-hero.has-parallax-hero::after, .contact-hero.has-contact-hero-image::after, .contact-hero.contact-hero-parallax::after { display: none !important; content: none !important; } /* Keep one consistent hero composition across all inner pages. */ .page-photo-hero .hero-content, .service-detail-hero.has-parallax-hero .hero-content, .services-modern-hero.has-parallax-hero .container, .contact-hero.has-contact-hero-image .contact-hero-inner, .contact-hero.contact-hero-parallax .contact-hero-inner { padding-block: clamp(98px, 9vw, 140px) !important; } .page-photo-hero h1, .service-detail-hero.has-parallax-hero h1, .services-modern-hero.has-parallax-hero h1, .contact-hero.has-contact-hero-image h1, .contact-hero.contact-hero-parallax h1, .career-hero.page-photo-hero .career-hero-copy h1 { width: min(1050px, 100%); max-width: 1050px !important; margin-inline: auto !important; margin-bottom: 22px !important; font-size: clamp(56px, 5.6vw, 88px) !important; line-height: .98 !important; letter-spacing: -.06em !important; font-weight: 950 !important; } .page-photo-hero p, .service-detail-hero.has-parallax-hero p, .services-modern-hero.has-parallax-hero p, .contact-hero.has-contact-hero-image p, .contact-hero.contact-hero-parallax p, .career-hero.page-photo-hero .career-hero-copy p { width: min(760px, 100%); max-width: 760px !important; margin-inline: auto !important; font-size: clamp(17px, 1.42vw, 22px) !important; line-height: 1.55 !important; } /* One pill language for About, Services, Clients, Careers, Contact and generic pages. */ .page-photo-hero .eyebrow, .service-detail-hero.has-parallax-hero .eyebrow, .services-modern-hero.has-parallax-hero .eyebrow, .contact-hero.has-contact-hero-image .eyebrow, .contact-hero.contact-hero-parallax .eyebrow, .career-hero.page-photo-hero .career-hero-eyebrow { transform: none !important; position: relative !important; top: auto !important; margin-bottom: 24px !important; } /* Remove any old hero card/section shadows that make page headers feel different. */ .hero.dark.page-photo-hero, .services-modern-hero.has-parallax-hero, .contact-hero.has-contact-hero-image, .contact-hero.contact-hero-parallax, .service-detail-hero.has-parallax-hero { border-bottom: 1px solid rgba(255,255,255,.08) !important; } /* About page trust strip should not look like a heavy shadow under the hero. */ .cms-page-about > .info-strip, .cms-page-about .trust-strip, .cms-page-about .home-trust-strip, .cms-page-about .about-trust-strip { box-shadow: none !important; } @media (max-width: 1024px) { .page-photo-hero, .service-detail-hero.has-parallax-hero, .services-modern-hero.has-parallax-hero, .contact-hero.has-contact-hero-image, .contact-hero.contact-hero-parallax { background-attachment: scroll !important; } } @media (max-width: 780px) { .page-photo-hero .hero-content, .service-detail-hero.has-parallax-hero .hero-content, .services-modern-hero.has-parallax-hero .container, .contact-hero.has-contact-hero-image .contact-hero-inner, .contact-hero.contact-hero-parallax .contact-hero-inner { padding-block: 76px 88px !important; } .page-photo-hero h1, .service-detail-hero.has-parallax-hero h1, .services-modern-hero.has-parallax-hero h1, .contact-hero.has-contact-hero-image h1, .contact-hero.contact-hero-parallax h1, .career-hero.page-photo-hero .career-hero-copy h1 { font-size: clamp(40px, 11vw, 60px) !important; line-height: 1.03 !important; } } /* Upgrade 153 — professional hero typography tune */ .page-photo-hero .hero-content, .service-detail-hero.has-parallax-hero .hero-content, .services-modern-hero.has-parallax-hero .container, .contact-hero.has-contact-hero-image .contact-hero-inner, .contact-hero.contact-hero-parallax .contact-hero-inner { width: min(980px, calc(100% - 32px)) !important; margin-inline: auto !important; text-align: center !important; padding-block: clamp(88px, 8vw, 124px) !important; } .page-photo-hero h1, .service-detail-hero.has-parallax-hero h1, .services-modern-hero.has-parallax-hero h1, .contact-hero.has-contact-hero-image h1, .contact-hero.contact-hero-parallax h1, .career-hero.page-photo-hero .career-hero-copy h1 { max-width: 820px !important; margin: 0 auto 18px !important; font-size: clamp(46px, 4.25vw, 70px) !important; line-height: 1.06 !important; letter-spacing: -.045em !important; font-weight: 900 !important; text-wrap: balance; text-shadow: 0 10px 30px rgba(0,0,0,.22) !important; } /* Short hero titles like Services should not look oversized. */ .services-modern-hero.has-parallax-hero h1, .page-photo-hero h1:only-child { max-width: 760px !important; } .page-photo-hero p, .service-detail-hero.has-parallax-hero p, .services-modern-hero.has-parallax-hero p, .contact-hero.has-contact-hero-image p, .contact-hero.contact-hero-parallax p, .career-hero.page-photo-hero .career-hero-copy p { max-width: 680px !important; margin: 0 auto !important; font-size: clamp(16px, 1.18vw, 19px) !important; line-height: 1.65 !important; font-weight: 500 !important; color: rgba(255,255,255,.90) !important; text-wrap: balance; text-shadow: 0 6px 20px rgba(0,0,0,.18) !important; } .page-photo-hero .eyebrow, .service-detail-hero.has-parallax-hero .eyebrow, .services-modern-hero.has-parallax-hero .eyebrow, .contact-hero.has-contact-hero-image .eyebrow, .contact-hero.contact-hero-parallax .eyebrow, .career-hero.page-photo-hero .career-hero-eyebrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; margin: 0 auto 20px !important; padding: 8px 18px !important; border-radius: 999px !important; border: 1px solid rgba(177, 215, 255, .38) !important; background: rgba(7, 88, 216, .20) !important; color: #bfe0ff !important; letter-spacing: .18em !important; font-size: 12px !important; line-height: 1 !important; font-weight: 900 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 34px rgba(0,0,0,.16) !important; backdrop-filter: blur(10px); } /* Keep hero overlays cinematic without swallowing the photo. */ .page-photo-hero::before, .service-detail-hero.has-parallax-hero::before, .services-modern-hero.has-parallax-hero::before, .contact-hero.has-contact-hero-image::before, .contact-hero.contact-hero-parallax::before { background: linear-gradient(90deg, rgba(4,18,39,.82) 0%, rgba(7,34,73,.58) 44%, rgba(4,18,39,.42) 100%), radial-gradient(circle at 50% 45%, rgba(7,88,216,.22), transparent 42%) !important; } /* Careers has side panel; keep its copy slightly narrower and elegant. */ .career-hero.page-photo-hero .career-hero-copy { text-align: center !important; } .career-hero.page-photo-hero .career-hero-copy h1 { max-width: 760px !important; } .career-hero.page-photo-hero .career-hero-copy p { max-width: 640px !important; } @media (min-width: 1180px) { .contact-hero.has-contact-hero-image h1, .contact-hero.contact-hero-parallax h1 { max-width: 880px !important; } } @media (max-width: 780px) { .page-photo-hero .hero-content, .service-detail-hero.has-parallax-hero .hero-content, .services-modern-hero.has-parallax-hero .container, .contact-hero.has-contact-hero-image .contact-hero-inner, .contact-hero.contact-hero-parallax .contact-hero-inner { padding-block: 70px 78px !important; } .page-photo-hero h1, .service-detail-hero.has-parallax-hero h1, .services-modern-hero.has-parallax-hero h1, .contact-hero.has-contact-hero-image h1, .contact-hero.contact-hero-parallax h1, .career-hero.page-photo-hero .career-hero-copy h1 { font-size: clamp(36px, 10vw, 52px) !important; letter-spacing: -.035em !important; line-height: 1.08 !important; } .page-photo-hero p, .service-detail-hero.has-parallax-hero p, .services-modern-hero.has-parallax-hero p, .contact-hero.has-contact-hero-image p, .contact-hero.contact-hero-parallax p, .career-hero.page-photo-hero .career-hero-copy p { font-size: 16px !important; line-height: 1.58 !important; } } /* Upgrade 154 — compact professional Services hero */ .cms-page-services-list .services-modern-hero.has-parallax-hero { min-height: clamp(430px, 36vw, 515px) !important; display: grid !important; align-items: center !important; background-size: cover !important; background-position: center 42% !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } .cms-page-services-list .services-modern-hero.has-parallax-hero .container { width: min(860px, calc(100% - 32px)) !important; min-height: unset !important; padding-block: clamp(58px, 6vw, 78px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; transform: translateY(4px); } .cms-page-services-list .services-modern-hero.has-parallax-hero .eyebrow { margin: 0 auto 18px !important; padding: 9px 19px !important; min-height: 36px !important; border-radius: 999px !important; font-size: 12px !important; letter-spacing: .16em !important; line-height: 1 !important; color: #e1f0ff !important; background: rgba(7, 88, 216, .28) !important; border-color: rgba(203, 229, 255, .42) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 26px rgba(0,0,0,.14) !important; } .cms-page-services-list .services-modern-hero.has-parallax-hero h1 { max-width: 690px !important; margin: 0 auto 16px !important; font-size: clamp(44px, 4.8vw, 72px) !important; line-height: 1.02 !important; letter-spacing: -.055em !important; font-weight: 950 !important; } .cms-page-services-list .services-modern-hero.has-parallax-hero p { max-width: 620px !important; margin: 0 auto !important; font-size: clamp(17px, 1.35vw, 22px) !important; line-height: 1.42 !important; font-weight: 600 !important; color: rgba(255,255,255,.94) !important; } .cms-page-services-list .services-modern-hero.has-parallax-hero::before { background: linear-gradient(90deg, rgba(3, 12, 28, .86) 0%, rgba(7, 34, 73, .62) 44%, rgba(4, 18, 39, .38) 100%), radial-gradient(circle at 50% 45%, rgba(7, 88, 216, .18), transparent 46%) !important; } .cms-page-services-list .services-modern-section { margin-top: 0 !important; padding-top: 34px !important; } .cms-page-services-list .services-filter-bar { margin-top: 0 !important; } @media (min-width: 1200px) { .cms-page-services-list .services-modern-hero.has-parallax-hero { min-height: 500px !important; } } @media (max-width: 900px) { .cms-page-services-list .services-modern-hero.has-parallax-hero { min-height: 440px !important; background-position: 62% center !important; } .cms-page-services-list .services-modern-hero.has-parallax-hero .container { padding-block: 58px !important; } .cms-page-services-list .services-modern-hero.has-parallax-hero h1 { font-size: clamp(40px, 10vw, 58px) !important; } .cms-page-services-list .services-modern-hero.has-parallax-hero p { font-size: 16px !important; line-height: 1.5 !important; } } @media (max-width: 560px) { .cms-page-services-list .services-modern-hero.has-parallax-hero { min-height: 390px !important; } .cms-page-services-list .services-modern-hero.has-parallax-hero .container { width: min(100% - 28px, 520px) !important; padding-block: 48px !important; } .cms-page-services-list .services-modern-hero.has-parallax-hero .eyebrow { min-height: 32px !important; margin-bottom: 14px !important; padding: 8px 15px !important; font-size: 11px !important; } .cms-page-services-list .services-modern-hero.has-parallax-hero h1 { margin-bottom: 12px !important; font-size: clamp(36px, 12vw, 48px) !important; } } /* Upgrade 155 — premium project strip cards and CTA readability */ .project-stats-strip{ width:min(var(--max),calc(100% - 48px)); margin:-66px auto 0; position:relative; z-index:3; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding:26px 24px; border-radius:18px; overflow:hidden; isolation:isolate; color:#fff; background: radial-gradient(circle at 18% 0%, rgba(38,140,255,.34), transparent 30%), radial-gradient(circle at 84% 16%, rgba(0,166,223,.22), transparent 34%), linear-gradient(135deg,#062452 0%, #0743a4 48%, #0758d8 100%); border:1px solid rgba(117,177,255,.55); box-shadow:0 24px 58px rgba(6,27,54,.20), inset 0 1px 0 rgba(255,255,255,.18); } .project-stats-strip::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.36; background: linear-gradient(120deg, transparent 0 34%, rgba(255,255,255,.13) 35%, transparent 48%), radial-gradient(circle at 78% 72%, rgba(255,255,255,.12), transparent 32%); } .project-stats-strip::after{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:linear-gradient(90deg, transparent, rgba(0,166,223,.9), transparent); } .project-stat-item{ display:grid; justify-items:center; text-align:center; gap:14px; min-width:0; padding:6px 20px; position:relative; } .project-stat-item:not(:last-child)::after{ content:""; position:absolute; inset-block:14px; inset-inline-end:0; width:1px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.32), transparent); } .project-stat-icon{ width:64px; height:64px; border-radius:999px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#0a73ff,#0758d8 68%,#00a6df); box-shadow:0 15px 32px rgba(0,60,160,.28), inset 0 1px 0 rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.22); } .project-stat-icon svg{ width:31px; height:31px; } .project-stat-copy small{ display:block; margin-bottom:5px; font-weight:850; font-size:15px; line-height:1.25; color:rgba(255,255,255,.88); } .project-stat-copy strong{ display:block; font-size:clamp(30px,3vw,42px); line-height:.95; letter-spacing:-.035em; color:#fff; text-shadow:0 5px 18px rgba(0,0,0,.18); } .project-partner-cta{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); gap:34px; align-items:center; padding:40px 44px; border-radius:22px; color:#fff; background: radial-gradient(circle at 12% 14%, rgba(0,166,223,.22), transparent 28%), radial-gradient(circle at 95% 28%, rgba(7,88,216,.34), transparent 32%), linear-gradient(135deg,#041a3a 0%, #073b95 48%, #0758d8 100%); border:1px solid rgba(132,190,255,.36); box-shadow:0 22px 56px rgba(6,27,54,.16); isolation:isolate; } .project-partner-cta::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.34; background: radial-gradient(circle at 86% 44%, rgba(255,255,255,.16) 1px, transparent 1.5px); background-size:14px 14px; mask-image:linear-gradient(90deg, transparent 0 42%, #000 68%, transparent 100%); } .project-partner-main{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:start; } .project-partner-icon, .project-partner-feature span{ width:60px; height:60px; border-radius:999px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#0a73ff,#0758d8 70%,#00a6df); box-shadow:0 16px 32px rgba(0,54,150,.28), inset 0 1px 0 rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.22); } .project-partner-icon svg, .project-partner-feature svg{ width:28px; height:28px; } .project-partner-cta .eyebrow{ color:#d8ebff; letter-spacing:.16em; } .project-partner-cta h2{ margin:12px 0 16px; max-width:13ch; color:#fff; font-size:clamp(34px,4vw,54px); letter-spacing:-.045em; } .project-partner-cta p{ max-width:560px; margin-bottom:24px; color:rgba(255,255,255,.84); font-size:17px; line-height:1.65; } .project-partner-cta .btn-light{ color:#0758d8; background:#fff; box-shadow:0 12px 26px rgba(0,0,0,.16); } .project-partner-features{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-inline-start:1px solid rgba(255,255,255,.24); padding-inline-start:34px; } .project-partner-feature{ min-height:124px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.16); } .project-partner-feature:nth-child(odd){ border-inline-end:1px solid rgba(255,255,255,.16); } .project-partner-feature:nth-last-child(-n+2){ border-bottom:0; } .project-partner-feature span{ width:52px; height:52px; background:rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.20); } .project-partner-feature strong{ display:block; color:#fff; font-size:16px; line-height:1.25; margin-bottom:5px; } .project-partner-feature small{ display:block; color:rgba(255,255,255,.78); font-size:13px; line-height:1.45; } .cms-page-projects-list .cta, .cms-page-projects-list .footer-cta, .cms-page-projects-list .project-partner-cta + *{ color:inherit; } @media (max-width: 1120px){ .project-stats-strip{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:20px;} .project-stat-item:nth-child(3)::after{display:none;} .project-partner-cta{grid-template-columns:1fr;} .project-partner-features{border-inline-start:0; padding-inline-start:0; padding-top:24px; border-top:1px solid rgba(255,255,255,.18);} } @media (max-width: 760px){ .project-stats-strip{grid-template-columns:1fr; margin-top:24px; padding:18px; border-radius:18px;} .project-stat-item{grid-template-columns:auto 1fr; justify-items:start; text-align:start; padding:16px 10px;} .project-stat-item:not(:last-child)::after{inset:auto 10px 0; height:1px; width:auto; background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);} .project-stat-icon{width:54px; height:54px;} .project-partner-cta{padding:28px 22px; border-radius:20px;} .project-partner-main{grid-template-columns:1fr; gap:18px;} .project-partner-features{grid-template-columns:1fr;} .project-partner-feature, .project-partner-feature:nth-child(odd){border-inline-end:0; border-bottom:1px solid rgba(255,255,255,.16);} .project-partner-feature:last-child{border-bottom:0;} } /* Upgrade 156 — project client logo slider + project-specific CTA copy/contrast */ .project-client-proof{ padding-top:clamp(52px,6vw,88px); padding-bottom:clamp(44px,5vw,72px); } .project-client-proof-head{ max-width:900px; margin-bottom:24px; } .project-client-proof-head h2{ margin-bottom:10px; } .project-client-proof-head p{ max-width:760px; color:#51657f; } .project-client-logo-slider{ position:relative; overflow:hidden; border:1px solid rgba(176,202,235,.78); border-radius:26px; background:linear-gradient(180deg,#fff,#f6faff); box-shadow:0 18px 48px rgba(7,31,65,.07); padding:18px 0; isolation:isolate; } .project-client-logo-slider::before, .project-client-logo-slider::after{ content:""; position:absolute; top:0; width:96px; height:100%; z-index:3; pointer-events:none; } .project-client-logo-slider::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));} .project-client-logo-slider::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0));} .project-client-logo-track{ display:flex; width:max-content; animation:projectClientMarquee 34s linear infinite; } .project-client-logo-slider:hover .project-client-logo-track, .project-client-logo-slider:focus-within .project-client-logo-track{animation-play-state:paused;} .project-client-logo-group{ display:flex; align-items:center; gap:16px; padding-inline:8px; } .project-client-logo-card{ width:176px; min-height:120px; display:grid; place-items:center; gap:8px; text-align:center; text-decoration:none; color:#092044; border:1px solid rgba(180,205,236,.78); border-radius:20px; background:rgba(255,255,255,.92); box-shadow:0 10px 26px rgba(7,31,65,.04); padding:16px 14px; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .project-client-logo-card:hover, .project-client-logo-card:focus-visible{ transform:translateY(-3px); border-color:rgba(7,88,216,.35); box-shadow:0 18px 38px rgba(7,31,65,.10); } .project-client-logo-media{ height:48px; display:grid; place-items:center; } .project-client-logo-media img{ max-width:118px; max-height:46px; width:auto; height:auto; object-fit:contain; filter:saturate(.92) contrast(1.03); } .project-client-logo-fallback{ width:50px; height:50px; display:grid; place-items:center; border-radius:15px; background:#eef5ff; color:#0758d8; font-weight:950; } .project-client-logo-card strong{ font-size:12px; line-height:1.25; color:#10284c; } .project-client-empty{color:#61738c;} @keyframes projectClientMarquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} } html[dir="rtl"] .project-client-logo-track{animation-name:projectClientMarqueeRtl;} @keyframes projectClientMarqueeRtl{ from{transform:translateX(-50%);} to{transform:translateX(0);} } .project-partner-cta{ color:#fff; } .project-partner-main h2, .project-partner-main p, .project-partner-feature strong, .project-partner-feature small{ color:#fff; } .project-partner-main p, .project-partner-feature small{ color:rgba(255,255,255,.84); } .project-partner-main .eyebrow{color:#cfe3ff;} @media (prefers-reduced-motion:reduce){ .project-client-logo-track{animation:none;} } @media (max-width:760px){ .project-client-logo-slider{border-radius:22px;} .project-client-logo-card{width:148px;min-height:112px;} .project-client-logo-slider::before,.project-client-logo-slider::after{width:42px;} } /* Upgrade 159 — center service detail card rows when a section has only a few cards */ .cms-page-service-detail .service-detail-card-grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 330px)); justify-content:center; justify-items:stretch; gap:24px; } .cms-page-service-detail .service-detail-card-grid > .card{ width:100%; min-height:190px; } .cms-page-service-detail .service-detail-keypoints-grid{ width:min(var(--max), calc(100% - 48px)); margin-inline:auto; } @media (max-width:980px){ .cms-page-service-detail .service-detail-card-grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:18px; } } @media (max-width:640px){ .cms-page-service-detail .service-detail-card-grid{ grid-template-columns:1fr; } } /* Upgrade 160: organize project detail detailed-scope section after hero and center short rows */ .project-detailed-scope-section { background: #fff; } .project-detailed-scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; gap: 24px; margin-top: 22px; } .project-detailed-scope-card { min-height: 190px; } .project-detailed-scope-card .icon { font-size: 44px; color: var(--primary); } @media (max-width: 760px) { .project-detailed-scope-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* Upgrade 162 — project detail contrast and PDF-aligned partner wording */ .project-metrics-card, .card.project-metrics-card { position: relative; overflow: hidden; background: linear-gradient(135deg, #05224f 0%, #074cb9 58%, #0758d8 100%) !important; color: #fff !important; border-color: rgba(255,255,255,.18) !important; box-shadow: 0 22px 55px rgba(4, 34, 79, .22); } .project-metrics-card::before { content: ""; position: absolute; inset: -44% -12% auto auto; width: 420px; height: 420px; border-radius: 999px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 64%); pointer-events: none; } .project-metrics-card > * { position: relative; z-index: 1; } .project-metrics-card .eyebrow, .project-metrics-card strong, .project-metrics-card span, .project-metrics-card div, .project-metrics-card p { color: #fff !important; } .project-metrics-card .eyebrow { color: #cfe2ff !important; } .project-metric-item { display: grid; gap: 8px; } .project-metric-item strong { font-size: clamp(23px, 2.1vw, 32px); line-height: 1.08; letter-spacing: -.035em; } .project-metric-item span { color: rgba(255,255,255,.78) !important; font-weight: 700; } .project-documents-cta-section .cta-card-contrast h3, .project-documents-cta-section .cta-card-contrast p, .project-documents-cta-section .cta-card-contrast span:not(.arrow), .project-documents-cta-section .cta-card-contrast div:not(.btn) { color: #fff !important; } .project-documents-cta-section .cta-card-contrast p { color: rgba(255,255,255,.88) !important; } .project-documents-cta-section .cta-card-contrast .btn-light { color: #0758d8 !important; } @media (max-width: 860px) { .project-metric-item strong { font-size: 24px; } } /* Upgrade 164 — localized certificate modal facts */ .certificate-modal-facts{ width:100%; margin:12px 0 18px; display:grid; gap:10px; } .certificate-modal-facts div{ display:grid; gap:4px; padding:12px 14px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.075); } .certificate-modal-facts div[hidden]{display:none!important} .certificate-modal-facts dt{ margin:0; color:#a7c9ff; font-size:11px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; } .certificate-modal-facts dd{ margin:0; color:#fff; font-size:14px; line-height:1.45; font-weight:800; } .certificate-modal-description-block{ width:100%; margin-top:4px; } .certificate-modal-description-block[hidden]{display:none!important} .certificate-modal-description-block > span{ display:block; margin-bottom:7px; color:#a7c9ff; font-size:11px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; } .certificate-modal-description-block p{ margin:0!important; } html[dir="rtl"] .certificate-modal-facts dt, html[dir="rtl"] .certificate-modal-description-block > span{ letter-spacing:0; } /* Upgrade 166 — accordion layout stability and localization polish */ .faq-accordion-grid, .contact-faq-grid, .services-faq-grid, .grid:has(> details.card), .grid:has(> .faq-accordion-card) { align-items: start; } details.card, .contact-faq-card, .services-faq-item, .faq-accordion-card { align-self: start; height: auto; } details.card:not([open]), .contact-faq-card:not([open]), .services-faq-item:not([open]), .faq-accordion-card:not([open]) { min-height: 0; } html[dir="rtl"] details.card summary, html[dir="rtl"] .contact-faq-card summary, html[dir="rtl"] .services-faq-item summary { text-align: right; } html[dir="rtl"] .career-application-form label, html[dir="rtl"] .career-application-form input, html[dir="rtl"] .career-application-form textarea, html[dir="rtl"] .career-application-form select, html[dir="rtl"] .career-email-status, html[dir="rtl"] .career-verification-inline-copy, html[dir="rtl"] .application-help, html[dir="rtl"] .contact-form-card label, html[dir="rtl"] .contact-form-card input, html[dir="rtl"] .contact-form-card textarea { text-align: right; } /* Upgrade 168 — centered page hero text and proper RTL alignment polish */ .page-photo-hero, .services-modern-hero, .hero.dark:not(.hero-home):not(.service-detail-hero):not(.career-form-hero):not(.career-detail-hero), .career-hero, .career-detail-hero, .career-form-hero { text-align: center; } .page-photo-hero .hero-content, .hero.dark:not(.hero-home):not(.service-detail-hero):not(.career-form-hero):not(.career-detail-hero) .hero-content, .career-hero .hero-content, .career-detail-hero .hero-content, .career-form-hero .hero-content { max-width: 780px; margin-left: auto !important; margin-right: auto !important; text-align: center; } .page-photo-hero .hero-content p, .hero.dark:not(.hero-home):not(.service-detail-hero):not(.career-form-hero):not(.career-detail-hero) .hero-content p, .career-hero .hero-content p, .career-detail-hero .hero-content p, .career-form-hero .hero-content p { margin-left: auto; margin-right: auto; } .services-modern-hero .container { text-align: center; } .project-detail-hero .container { display: flex; flex-direction: column; align-items: center; text-align: center; } .project-detail-hero-copy, .project-detail-hero-copy h1, .project-detail-hero-copy p { margin-left: auto; margin-right: auto; text-align: center; } .project-detail-breadcrumb, .project-detail-meta { justify-content: center; } html[dir="rtl"] .page-photo-hero .hero-content, html[dir="rtl"] .hero.dark:not(.hero-home):not(.service-detail-hero):not(.career-form-hero):not(.career-detail-hero) .hero-content, html[dir="rtl"] .career-hero .hero-content, html[dir="rtl"] .career-detail-hero .hero-content, html[dir="rtl"] .career-form-hero .hero-content { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } html[dir="rtl"] .project-detail-hero .container, html[dir="rtl"] .project-detail-hero-copy, html[dir="rtl"] .project-detail-hero-copy h1, html[dir="rtl"] .project-detail-hero-copy p { text-align: center !important; } html[dir="rtl"] .trust-logo-card h3, html[dir="rtl"] .project-client-logo-card strong, html[dir="rtl"] .home-proof-simple-logo-card strong { direction: rtl; unicode-bidi: plaintext; } /* source: prototype_alignment.css */ /* Upgrade 31 — Prototype design system alignment This layer makes the Django CMS follow the uploaded static HTML/CSS prototype: clean white header, strong SESCCO blue, soft blue hero visual, wide spacing, premium engineering cards, and consistent CMS-driven sections. */ :root { --sescco-navy: #061a35; --sescco-deep: #082452; --sescco-blue: #0057c8; --sescco-blue-2: #0b66d8; --sescco-sky: #e8f3fc; --sescco-sky-2: #b8cde4; --sescco-line: #dbe5f1; --sescco-muted: #52677f; --sescco-shadow: 0 18px 50px rgba(6, 27, 54, .08); } body { background: #fff; color: var(--sescco-navy); } .container { width: min(100% - 44px, 1360px); margin-inline: auto; } /* Header matches prototype: clean white, bold navigation, visible full logo. */ .site-header, .header, .main-header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--sescco-line); box-shadow: 0 6px 28px rgba(6, 27, 54, .035); backdrop-filter: blur(16px); } .navbar { min-height: 92px; display: flex; align-items: center; } .nav-links a { font-weight: 900; color: var(--sescco-navy); letter-spacing: -.01em; } .nav-links a:hover, .nav-links a.active { color: var(--sescco-blue); } .language-links { border: 1px solid var(--sescco-line); border-radius: 10px; padding: 3px; background: #fff; } .language-links a { border-radius: 7px; font-weight: 900; } .language-links a.active { background: var(--sescco-blue); color: #fff; } .btn { border-radius: 8px; font-weight: 950; min-height: 48px; padding: 13px 24px; } .btn-primary { background: var(--sescco-blue); border-color: var(--sescco-blue); box-shadow: 0 14px 30px rgba(0,87,200,.18); } .btn-primary:hover { background: #0049aa; border-color: #0049aa; } .btn-outline { background: rgba(255,255,255,.78); color: var(--sescco-blue); border: 1px solid rgba(0,87,200,.28); } /* Full logo lockup: use uploaded mark plus professional wordmark text. */ .site-logo-lockup { gap: 12px; min-width: 255px; } .site-logo-lockup .site-logo-mark, .site-logo-lockup .site-logo-mark img { width: 60px; height: 60px; flex-basis: 60px; } .site-logo-lockup .site-logo-text strong { font-size: 34px; letter-spacing: .285em; color: var(--sescco-deep); } .site-logo-lockup .site-logo-text small { color: var(--sescco-deep); font-weight: 900; } /* Hero: follow prototype primary composition with current photo modifications. */ .hero-home { min-height: 720px; background: linear-gradient(90deg, #ffffff 0%, #ffffff 42%, #dcebF8 42%, #b8cde4 100%); } .hero-home .hero-content { padding-top: 112px; } .hero-kicker { color: var(--sescco-blue); font-size: 13px; letter-spacing: .15em; font-weight: 950; text-transform: uppercase; } .hero-home h1 { color: var(--sescco-navy); font-weight: 950; letter-spacing: -.06em; line-height: .965; } .hero-home p { color: #213a59; font-weight: 500; } .hero-visual-photo { width: 59%; opacity: 1; filter: saturate(1) contrast(1) brightness(1.02); } .hero-visual-photo::before { background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.88) 10%, rgba(225,238,250,.62) 24%, rgba(210,228,245,.38) 42%, rgba(186,209,231,.20) 64%, rgba(169,196,222,.12) 100%), linear-gradient(180deg, rgba(245,250,255,.16), rgba(245,250,255,.02)); } .hero-side-grid { opacity: .42; } /* Trust strip: centered, wide, strong blue, matching prototype. */ .trust-strip, .metrics-strip, .hero-trust-strip { border-radius: 10px; background: linear-gradient(90deg, #07316f, #0057c8); box-shadow: 0 24px 60px rgba(0, 50, 130, .18); } .trust-strip .metric, .metrics-strip .metric, .hero-trust-strip .metric { color: #fff; } .trust-strip strong, .metrics-strip strong, .hero-trust-strip strong { color: #fff; font-weight: 950; } /* Cards: remove generic demo feel, enforce premium engineering spacing. */ .card, .service-card, .project-card, .highlight-card, .feature-card { border: 1px solid var(--sescco-line); border-radius: 10px; background: #fff; box-shadow: 0 12px 34px rgba(6,27,54,.035); } .card:hover, .service-card:hover, .project-card:hover, .highlight-card:hover, .feature-card:hover { border-color: rgba(0,87,200,.32); box-shadow: var(--sescco-shadow); } .card h3, .service-card h3, .project-card h3, .highlight-card h3, .feature-card h3 { color: var(--sescco-navy); font-weight: 950; letter-spacing: -.03em; } .card .icon, .service-card .icon, .highlight-card .icon, .feature-card .icon { color: var(--sescco-blue); } /* Sections. */ .section { padding-block: clamp(72px, 7vw, 120px); } .eyebrow { color: var(--sescco-blue); font-weight: 950; letter-spacing: .14em; text-transform: uppercase; } .section h2, .split h2 { color: var(--sescco-navy); font-weight: 950; letter-spacing: -.045em; } /* Forms and admin-facing public forms. */ input, select, textarea, .form-control { border: 1px solid var(--sescco-line); border-radius: 8px; } input:focus, select:focus, textarea:focus, .form-control:focus { border-color: rgba(0,87,200,.55); box-shadow: 0 0 0 4px rgba(0,87,200,.08); } /* RTL from prototype + current modifications. */ html[dir="rtl"] .hero-home { background: linear-gradient(90deg, #b8cde4 0%, #dcebf8 58%, #ffffff 58%, #ffffff 100%); } html[dir="rtl"] .hero-visual-photo { width: 58%; } html[dir="rtl"] .hero-home h1 { letter-spacing: -.025em; line-height: 1.12; } html[dir="rtl"] .hero-kicker { letter-spacing: .08em; } html[dir="rtl"] .nav-links a, html[dir="rtl"] .btn { letter-spacing: 0; } @media (max-width: 1180px) { .navbar { min-height: 82px; } .site-logo-lockup { min-width: 210px; } } @media (max-width: 980px) { .container { width: min(100% - 30px, 1360px); } .navbar { min-height: auto; padding-block: 14px; } .hero-home { min-height: auto; background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #dcebf8 58%, #b8cde4 100%); } html[dir="rtl"] .hero-home { background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #dcebf8 58%, #b8cde4 100%); } .hero-home .hero-content { padding-top: 24px; } .site-logo-lockup { min-width: 180px; } } @media (max-width: 640px) { .site-logo-lockup .site-logo-text strong { font-size: 20px; } .site-logo-lockup .site-logo-text small { font-size: 8px; } .site-logo-lockup .site-logo-mark, .site-logo-lockup .site-logo-mark img { width: 42px; height: 42px; } } /* Upgrade 32 — centered CMS icon/image capability cards */ .home-highlights-section { padding-block: clamp(54px, 5vw, 86px); background: radial-gradient(circle at 50% 0%, rgba(0, 87, 200, .055), transparent 30%), #fff; } .home-highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 360px)); justify-content: center; align-items: stretch; gap: clamp(18px, 2.2vw, 28px); max-width: 1160px; margin-inline: auto; } .home-highlight-card { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(30px, 3vw, 44px) clamp(24px, 2.7vw, 38px); border: 1px solid rgba(0, 87, 200, .16); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98)); box-shadow: 0 18px 48px rgba(6, 27, 54, .055); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .home-highlight-card:hover { transform: translateY(-4px); border-color: rgba(0, 87, 200, .34); box-shadow: 0 26px 70px rgba(6, 27, 54, .10); } .home-highlight-icon { width: 72px; height: 72px; flex: 0 0 72px; display: inline-grid; place-items: center; margin-bottom: 28px; border-radius: 22px; background: radial-gradient(circle at 32% 20%, rgba(255,255,255,.75), transparent 36%), linear-gradient(145deg, rgba(232, 243, 252, .96), rgba(218, 234, 250, .70)); border: 1px solid rgba(0, 87, 200, .20); color: var(--sescco-blue); box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 14px 30px rgba(0,87,200,.08); } .home-highlight-icon img { width: 42px; height: 42px; object-fit: contain; display: block; } .home-highlight-icon span { display: inline-grid; place-items: center; width: 42px; height: 42px; font-size: 36px; line-height: 1; font-weight: 950; } .home-highlight-value { max-width: 300px; margin: 0 0 8px; color: var(--sescco-blue); font-size: clamp(27px, 2.2vw, 36px); line-height: 1.16; font-weight: 950; letter-spacing: -.045em; } .home-highlight-title { display: block; max-width: 310px; margin-bottom: 18px; color: var(--sescco-navy); font-size: clamp(19px, 1.45vw, 25px); line-height: 1.12; font-weight: 950; letter-spacing: -.035em; } .home-highlight-card p { max-width: 290px; margin: 0 auto 22px; color: #203957; font-size: 16px; line-height: 1.62; } .home-highlight-btn { margin-top: auto; min-width: 132px; min-height: 44px; } .info-icon { overflow: hidden; font-size: 20px; } .info-icon-img { width: 24px; height: 24px; object-fit: contain; display: block; } @media (max-width: 980px) { .home-highlights-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); max-width: 760px; } .home-highlight-card { min-height: 320px; } } @media (max-width: 640px) { .home-highlights-section { padding-block: 40px; } .home-highlights-grid { grid-template-columns: 1fr; gap: 16px; } .home-highlight-card { min-height: auto; padding: 30px 22px; } .home-highlight-icon { width: 64px; height: 64px; flex-basis: 64px; margin-bottom: 20px; } .home-highlight-icon img, .home-highlight-icon span { width: 38px; height: 38px; } .home-highlight-icon span { font-size: 32px; } } /* Upgrade 18: premium CMS-driven trust metrics strip. Scope is only the home/about trust strip so existing project stats and other info strips stay untouched. */ .home-trust-strip { width: min(1280px, calc(100% - 64px)); min-height: 248px; margin: clamp(-72px, -4.2vw, -48px) auto 0; padding: clamp(34px, 3.2vw, 48px) clamp(28px, 4.2vw, 58px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; row-gap: 22px; column-gap: 0; align-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; background: radial-gradient(circle at 17% 4%, rgba(0, 166, 223, .28), transparent 30%), radial-gradient(circle at 92% 10%, rgba(0, 116, 255, .24), transparent 34%), linear-gradient(135deg, #052451 0%, #043c90 48%, #0758d8 100%); box-shadow: 0 30px 78px rgba(6, 27, 54, .18), 0 8px 24px rgba(7, 88, 216, .16); } .home-trust-strip::before, .home-trust-strip::after { content: ""; position: absolute; pointer-events: none; z-index: 0; } .home-trust-strip::before { inset: 16% 0 16%; background: linear-gradient(to right, transparent 0, transparent calc(25% - .5px), rgba(255,255,255,.34) calc(25% - .5px), rgba(255,255,255,.34) calc(25% + .5px), transparent calc(25% + .5px), transparent calc(50% - .5px), rgba(255,255,255,.34) calc(50% - .5px), rgba(255,255,255,.34) calc(50% + .5px), transparent calc(50% + .5px), transparent calc(75% - .5px), rgba(255,255,255,.34) calc(75% - .5px), rgba(255,255,255,.34) calc(75% + .5px), transparent calc(75% + .5px)); } .home-trust-strip::after { inset: auto -80px -105px auto; width: 340px; height: 260px; border: 1px solid rgba(255,255,255,.08); border-radius: 46px; transform: rotate(-34deg); box-shadow: -360px -40px 0 -18px rgba(255,255,255,.035); } .home-trust-strip .info-item { position: relative; z-index: 1; min-width: 0; min-height: 72px; padding: 0 clamp(18px, 2.3vw, 34px); border: 0; display: flex; align-items: center; justify-content: flex-start; gap: clamp(16px, 1.6vw, 22px); } .home-trust-strip .info-item:nth-child(1) { grid-column: 1; grid-row: 1; } .home-trust-strip .info-item:nth-child(2) { grid-column: 2; grid-row: 1; } .home-trust-strip .info-item:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; align-self: center; } .home-trust-strip .info-item:nth-child(4) { grid-column: 4; grid-row: 1 / span 2; align-self: center; } .home-trust-strip .info-item:nth-child(5) { grid-column: 1; grid-row: 2; } .home-trust-strip .info-item:nth-child(6) { grid-column: 2; grid-row: 2; } .home-trust-strip .info-item:nth-child(5)::before, .home-trust-strip .info-item:nth-child(6)::before { content: ""; position: absolute; top: -10px; inset-inline-start: clamp(18px, 2.3vw, 34px); width: min(74%, 260px); height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.30), rgba(255,255,255,.08)); } .home-trust-strip .info-icon { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.34), transparent 34%), linear-gradient(145deg, rgba(0, 115, 255, .95), rgba(0, 55, 142, .95)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 16px 32px rgba(0, 19, 62, .24); color: #fff; font-size: 30px; line-height: 1; font-weight: 950; } .home-trust-strip .info-icon-img { width: 32px; height: 32px; object-fit: contain; display: block; } .home-trust-strip .info-item div { min-width: 0; } .home-trust-strip .info-item small { display: block; margin: 0 0 4px; color: rgba(236, 246, 255, .92); font-size: clamp(13px, .95vw, 15px); font-weight: 850; line-height: 1.25; letter-spacing: -.01em; } .home-trust-strip .info-item strong { display: block; color: #fff; font-size: clamp(24px, 2.05vw, 34px); line-height: 1.05; font-weight: 950; letter-spacing: -.045em; text-wrap: balance; } .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong { font-size: clamp(24px, 1.9vw, 31px); } @media (max-width: 980px) { .home-trust-strip { width: min(760px, calc(100% - 32px)); min-height: unset; margin-top: -42px; padding: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 18px; } .home-trust-strip::before { display: none; } .home-trust-strip .info-item, .home-trust-strip .info-item:nth-child(1), .home-trust-strip .info-item:nth-child(2), .home-trust-strip .info-item:nth-child(3), .home-trust-strip .info-item:nth-child(4), .home-trust-strip .info-item:nth-child(5), .home-trust-strip .info-item:nth-child(6) { grid-column: auto; grid-row: auto; min-height: 74px; padding: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.055); } .home-trust-strip .info-item::before { display: none; } } @media (max-width: 640px) { .home-trust-strip { width: min(100% - 24px, 430px); margin-top: -32px; padding: 18px; grid-template-columns: 1fr; gap: 12px; border-radius: 16px; } .home-trust-strip .info-item { gap: 14px; padding: 16px; } .home-trust-strip .info-icon { width: 56px; height: 56px; flex-basis: 56px; font-size: 26px; } .home-trust-strip .info-icon-img { width: 30px; height: 30px; } } /* Upgrade 19 — zoomed-out hero + refined responsive home trust card */ .hero-home { min-height: clamp(560px, 52vw, 640px); background: linear-gradient(90deg, #ffffff 0%, #ffffff 44%, #e7f1fa 44%, #c2d6ea 100%); } .hero-inner { min-height: clamp(560px, 52vw, 640px); grid-template-columns: minmax(0, .86fr) minmax(440px, 1.14fr); gap: clamp(30px, 5vw, 84px); } .hero-home .hero-content { max-width: 600px; padding: clamp(64px, 7vw, 92px) 0 clamp(92px, 8vw, 122px); } .hero-kicker { margin-bottom: 14px; font-size: clamp(11px, .72vw, 13px); } .hero-home h1 { max-width: 650px; margin-bottom: 18px; font-size: clamp(34px, 3.15vw, 52px); line-height: 1.12; letter-spacing: -.038em; } .hero-home p { max-width: 575px; font-size: clamp(15.5px, 1.02vw, 18px); line-height: 1.72; } .hero-actions { margin-top: clamp(24px, 2.6vw, 34px); } .hero-visual-photo { width: 56%; background-size: auto 100%; background-position: center right; } .home-trust-strip { width: min(1120px, calc(100% - 72px)); min-height: clamp(178px, 14.4vw, 208px); margin: clamp(-58px, -4vw, -38px) auto 0; padding: clamp(26px, 2.5vw, 36px) clamp(28px, 3.4vw, 46px); grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: clamp(12px, 1.25vw, 18px); border-radius: 18px; background: radial-gradient(circle at 14% 3%, rgba(0, 166, 239, .30), transparent 30%), radial-gradient(circle at 91% 8%, rgba(0, 116, 255, .22), transparent 34%), linear-gradient(132deg, #052654 0%, #053d91 46%, #075bdc 100%); box-shadow: 0 28px 70px rgba(6, 27, 54, .16), 0 7px 22px rgba(7, 88, 216, .13); } .home-trust-strip::before { inset: 17% 0 17%; opacity: .82; } .home-trust-strip .info-item { min-height: 62px; padding-inline: clamp(14px, 1.8vw, 26px); gap: clamp(14px, 1.3vw, 18px); } .home-trust-strip .info-item:nth-child(3), .home-trust-strip .info-item:nth-child(4) { align-self: center; } .home-trust-strip .info-item:nth-child(5)::before, .home-trust-strip .info-item:nth-child(6)::before { top: -8px; inset-inline-start: clamp(14px, 1.8vw, 26px); width: min(76%, 230px); opacity: .78; } .home-trust-strip .info-icon { width: clamp(52px, 4.2vw, 58px); height: clamp(52px, 4.2vw, 58px); flex-basis: clamp(52px, 4.2vw, 58px); font-size: clamp(22px, 1.8vw, 27px); } .home-trust-strip .info-icon-img { width: clamp(26px, 2vw, 30px); height: clamp(26px, 2vw, 30px); } .home-trust-strip .info-item small { margin-bottom: 3px; font-size: clamp(11.5px, .78vw, 13.25px); line-height: 1.22; font-weight: 850; } .home-trust-strip .info-item strong { font-size: clamp(20px, 1.72vw, 28px); line-height: 1.08; letter-spacing: -.04em; } .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong { font-size: clamp(19px, 1.55vw, 26px); } @media (max-width: 1180px) { .hero-inner { grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); } .hero-visual-photo { width: 55%; } .home-trust-strip { width: min(1060px, calc(100% - 48px)); padding-inline: 26px; } } @media (max-width: 980px) { .hero-home { min-height: auto; background: linear-gradient(180deg, #ffffff 0%, #ffffff 57%, #e7f1fa 57%, #c2d6ea 100%); } .hero-inner { min-height: auto; grid-template-columns: 1fr; gap: 22px; padding-top: 6px; padding-bottom: 72px; } .hero-home .hero-content { max-width: 680px; padding: 26px 0 0; } .hero-home h1 { font-size: clamp(32px, 6vw, 46px); line-height: 1.14; } .hero-home p { max-width: 640px; font-size: 16px; } .hero-visual-photo { width: min(100% - 30px, 900px); height: clamp(245px, 48vw, 370px); background-size: cover; } .home-trust-strip { width: min(760px, calc(100% - 30px)); margin-top: -52px; padding: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border-radius: 18px; } .home-trust-strip .info-item, .home-trust-strip .info-item:nth-child(1), .home-trust-strip .info-item:nth-child(2), .home-trust-strip .info-item:nth-child(3), .home-trust-strip .info-item:nth-child(4), .home-trust-strip .info-item:nth-child(5), .home-trust-strip .info-item:nth-child(6) { grid-column: auto; grid-row: auto; min-height: 70px; padding: 15px; } } @media (max-width: 640px) { .hero-inner { padding-bottom: 58px; } .hero-home .hero-content { padding-top: 18px; } .hero-home h1 { font-size: clamp(30px, 10vw, 40px); line-height: 1.16; } .hero-home p { font-size: 15.5px; line-height: 1.65; } .hero-visual-photo { width: min(100% - 24px, 520px); height: clamp(215px, 62vw, 320px); margin-top: 18px; border-radius: 20px; } .home-trust-strip { width: min(100% - 24px, 440px); margin-top: -42px; padding: 16px; grid-template-columns: 1fr; gap: 11px; border-radius: 16px; } .home-trust-strip .info-item { min-height: 64px; padding: 14px; gap: 13px; } .home-trust-strip .info-icon { width: 50px; height: 50px; flex-basis: 50px; font-size: 23px; } .home-trust-strip .info-icon-img { width: 27px; height: 27px; } .home-trust-strip .info-item small { font-size: 12px; } .home-trust-strip .info-item strong, .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong { font-size: 23px; } } /* Upgrade 20 — compact trust strip typography fit Scoped only to the homepage trust strip so other cards/sections stay unchanged. */ .home-trust-strip { width: min(1120px, calc(100% - 80px)); min-height: clamp(166px, 13.4vw, 194px); padding: clamp(24px, 2.25vw, 32px) clamp(24px, 3vw, 40px); } .home-trust-strip .info-item { min-height: 56px; padding-inline: clamp(10px, 1.3vw, 20px); gap: clamp(10px, 1vw, 14px); } .home-trust-strip .info-item div { flex: 1 1 auto; min-width: 0; } .home-trust-strip .info-icon { width: clamp(46px, 3.7vw, 52px); height: clamp(46px, 3.7vw, 52px); flex: 0 0 clamp(46px, 3.7vw, 52px); font-size: clamp(19px, 1.45vw, 23px); } .home-trust-strip .info-icon-img { width: clamp(23px, 1.7vw, 27px); height: clamp(23px, 1.7vw, 27px); } .home-trust-strip .info-item small { margin-bottom: 2px; font-size: clamp(10px, .68vw, 11.75px); line-height: 1.16; font-weight: 850; letter-spacing: -.006em; } .home-trust-strip .info-item strong { font-size: clamp(18px, 1.28vw, 23px); line-height: 1.08; letter-spacing: -.032em; } .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong { font-size: clamp(17px, 1.18vw, 21px); } .home-trust-strip .info-item:nth-child(5)::before, .home-trust-strip .info-item:nth-child(6)::before { top: -7px; inset-inline-start: clamp(10px, 1.3vw, 20px); width: min(78%, 218px); } @media (min-width: 981px) { .home-trust-strip .info-item strong { white-space: nowrap; } } @media (max-width: 1180px) { .home-trust-strip { width: min(1040px, calc(100% - 42px)); padding-inline: 22px; } .home-trust-strip .info-item { padding-inline: 10px; } } @media (max-width: 980px) { .home-trust-strip { width: min(760px, calc(100% - 30px)); min-height: unset; padding: 22px; gap: 12px; } .home-trust-strip .info-item, .home-trust-strip .info-item:nth-child(1), .home-trust-strip .info-item:nth-child(2), .home-trust-strip .info-item:nth-child(3), .home-trust-strip .info-item:nth-child(4), .home-trust-strip .info-item:nth-child(5), .home-trust-strip .info-item:nth-child(6) { min-height: 66px; padding: 14px; gap: 12px; } .home-trust-strip .info-icon { width: 48px; height: 48px; flex-basis: 48px; font-size: 21px; } .home-trust-strip .info-icon-img { width: 25px; height: 25px; } .home-trust-strip .info-item small { font-size: 11px; } .home-trust-strip .info-item strong, .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong { font-size: 21px; } } @media (max-width: 640px) { .home-trust-strip { width: min(100% - 24px, 440px); padding: 15px; gap: 10px; } .home-trust-strip .info-item { min-height: 60px; padding: 12px; gap: 11px; } .home-trust-strip .info-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 20px; } .home-trust-strip .info-icon-img { width: 23px; height: 23px; } .home-trust-strip .info-item small { font-size: 10.75px; } .home-trust-strip .info-item strong, .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong { font-size: 19.5px; } } /* Upgrade 21 — premium responsive Why Choose cards with CMS image/text icons Scoped only to the homepage why-choose section. */ .why-choose-section { position: relative; overflow: hidden; padding-block: clamp(64px, 6vw, 96px); background: radial-gradient(circle at 9% 18%, rgba(0,87,200,.065), transparent 30%), radial-gradient(circle at 89% 12%, rgba(0,166,223,.055), transparent 30%), linear-gradient(180deg, #fff 0%, #f9fcff 100%); } .why-choose-section::before { content: ""; position: absolute; left: 50%; top: 0; width: min(720px, 76vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(0,87,200,.22), transparent); } .why-choose-head { max-width: 1040px; margin: 0 auto clamp(26px, 3vw, 38px); text-align: center; } .why-choose-head .eyebrow { display: inline-flex; margin-bottom: 12px; } .why-choose-head h2 { max-width: 1120px; margin: 0 auto; color: var(--sescco-navy); font-size: clamp(34px, 3.45vw, 56px); line-height: 1.05; letter-spacing: -.058em; } .why-choose-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 24px); max-width: 1120px; margin-inline: auto; } .why-choose-card { position: relative; min-height: 258px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: clamp(24px, 2.25vw, 32px) clamp(20px, 1.75vw, 26px); border: 1px solid rgba(0,87,200,.14); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.98)); box-shadow: 0 18px 44px rgba(6, 27, 54, .06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; isolation: isolate; } .why-choose-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(0,87,200,.055), transparent 38%), radial-gradient(circle at 100% 0%, rgba(0,166,223,.11), transparent 30%); opacity: .8; pointer-events: none; z-index: -1; } .why-choose-card::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--sescco-blue), var(--sescco-blue-2)); opacity: .0; transition: opacity .2s ease; } .why-choose-card:hover { transform: translateY(-4px); border-color: rgba(0,87,200,.30); box-shadow: 0 26px 64px rgba(6, 27, 54, .10); } .why-choose-card:hover::after { opacity: 1; } .why-choose-icon { width: 58px; height: 58px; flex: 0 0 58px; display: inline-grid; place-items: center; margin-bottom: 20px; border-radius: 18px; color: var(--sescco-blue); background: radial-gradient(circle at 32% 20%, rgba(255,255,255,.88), transparent 36%), linear-gradient(145deg, rgba(237,246,255,.98), rgba(217,235,252,.86)); border: 1px solid rgba(0,87,200,.20); box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 14px 30px rgba(0,87,200,.08); overflow: hidden; } .why-choose-icon img { width: 32px; height: 32px; display: block; object-fit: contain; } .why-choose-icon span { width: 32px; height: 32px; display: inline-grid; place-items: center; font-size: 29px; font-weight: 950; line-height: 1; } .why-choose-card h3 { max-width: 220px; margin: 0 auto 12px; color: var(--sescco-navy); font-size: clamp(20px, 1.55vw, 25px); line-height: 1.08; letter-spacing: -.045em; font-weight: 950; } .why-choose-card p { max-width: 236px; margin: 0 auto; color: #263d59; font-size: 15px; line-height: 1.6; } @media (max-width: 1180px) { .why-choose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } .why-choose-card { min-height: 230px; } } @media (max-width: 680px) { .why-choose-section { padding-block: 44px; } .why-choose-head { text-align: start; margin-bottom: 22px; } .why-choose-head h2 { font-size: clamp(28px, 9.4vw, 42px); line-height: 1.1; } .why-choose-grid { grid-template-columns: 1fr; max-width: 440px; gap: 14px; } .why-choose-card { min-height: auto; align-items: flex-start; text-align: start; padding: 22px; } .why-choose-card h3, .why-choose-card p { max-width: none; margin-inline: 0; } .why-choose-icon { width: 54px; height: 54px; flex-basis: 54px; margin-bottom: 16px; } .why-choose-icon img, .why-choose-icon span { width: 30px; height: 30px; } .why-choose-icon span { font-size: 27px; } } html[dir="rtl"] .why-choose-head, html[dir="rtl"] .why-choose-card { direction: rtl; } /* Upgrade 22 — compact-fit typography for homepage trust + highlight/why cards. Scoped to homepage CMS sections only; other site cards stay unchanged. */ .home-trust-strip { width: min(1100px, calc(100% - 88px)); min-height: clamp(136px, 10.8vw, 160px); padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2.7vw, 36px); row-gap: clamp(7px, .8vw, 11px); } .home-trust-strip .info-item { min-height: 46px; padding-inline: clamp(7px, .9vw, 15px); gap: clamp(8px, .8vw, 12px); align-items: center; } .home-trust-strip .info-item div { min-width: 0; max-width: 100%; } .home-trust-strip .info-icon { width: clamp(40px, 3vw, 46px); height: clamp(40px, 3vw, 46px); flex: 0 0 clamp(40px, 3vw, 46px); font-size: clamp(16px, 1.15vw, 20px); } .home-trust-strip .info-icon-img { width: clamp(20px, 1.35vw, 23px); height: clamp(20px, 1.35vw, 23px); } .home-trust-strip .info-item small { margin-bottom: 1px; font-size: clamp(8.5px, .58vw, 10px); line-height: 1.18; font-weight: 850; letter-spacing: 0; } .home-trust-strip .info-item strong, .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong { font-size: clamp(15px, 1.06vw, 19px); line-height: 1.12; letter-spacing: -.018em; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; } .home-trust-strip .info-item:nth-child(5)::before, .home-trust-strip .info-item:nth-child(6)::before { top: -5px; inset-inline-start: clamp(7px, .9vw, 15px); width: min(78%, 188px); } .home-highlights-section { padding-block: clamp(44px, 4.3vw, 70px); } .home-highlights-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 292px), 340px)); gap: clamp(18px, 2vw, 26px); max-width: 1100px; } .home-highlight-card { min-height: 330px; padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 28px); border-radius: 18px; } .home-highlight-icon { width: 64px; height: 64px; flex-basis: 64px; margin-bottom: 20px; border-radius: 19px; } .home-highlight-icon img, .home-highlight-icon span { width: 34px; height: 34px; } .home-highlight-icon span { font-size: 28px; } .home-highlight-value { max-width: 270px; margin-bottom: 8px; font-size: clamp(22px, 1.7vw, 29px); line-height: 1.17; letter-spacing: -.034em; } .home-highlight-title { max-width: 260px; margin-bottom: 14px; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.18; letter-spacing: -.024em; } .home-highlight-card p { max-width: 270px; margin-bottom: 20px; font-size: 14px; line-height: 1.62; } .home-highlight-btn { min-width: 118px; min-height: 40px; padding-inline: 18px; font-size: 14px; border-radius: 11px; } .why-choose-section { padding-block: clamp(48px, 4.7vw, 76px); } .why-choose-head { margin-bottom: clamp(22px, 2.4vw, 30px); } .why-choose-head h2 { max-width: 1010px; font-size: clamp(28px, 2.65vw, 44px); line-height: 1.12; letter-spacing: -.042em; } .why-choose-card { min-height: 224px; padding: clamp(22px, 2vw, 28px) clamp(18px, 1.5vw, 22px); } .why-choose-icon { width: 52px; height: 52px; flex-basis: 52px; margin-bottom: 16px; border-radius: 16px; } .why-choose-icon img, .why-choose-icon span { width: 28px; height: 28px; } .why-choose-icon span { font-size: 24px; } .why-choose-card h3 { max-width: 210px; margin-bottom: 10px; font-size: clamp(17px, 1.24vw, 21px); line-height: 1.16; letter-spacing: -.028em; } .why-choose-card p { max-width: 224px; font-size: 13.5px; line-height: 1.62; } html[dir="rtl"] .home-trust-strip, html[lang="ar"] .home-trust-strip, html[dir="rtl"] .home-highlights-grid, html[lang="ar"] .home-highlights-grid, html[dir="rtl"] .why-choose-grid, html[lang="ar"] .why-choose-grid { direction: rtl; } html[dir="rtl"] .home-trust-strip .info-item, html[lang="ar"] .home-trust-strip .info-item { direction: rtl; text-align: start; gap: clamp(7px, .72vw, 10px); } html[dir="rtl"] .home-trust-strip .info-item small, html[lang="ar"] .home-trust-strip .info-item small { font-size: clamp(8px, .52vw, 9px); line-height: 1.45; letter-spacing: 0; } html[dir="rtl"] .home-trust-strip .info-item strong, html[lang="ar"] .home-trust-strip .info-item strong, html[dir="rtl"] .home-trust-strip .info-item:nth-child(5) strong, html[dir="rtl"] .home-trust-strip .info-item:nth-child(6) strong, html[lang="ar"] .home-trust-strip .info-item:nth-child(5) strong, html[lang="ar"] .home-trust-strip .info-item:nth-child(6) strong { font-size: clamp(13px, .9vw, 16px); line-height: 1.45; letter-spacing: 0; white-space: normal; overflow-wrap: normal; word-break: normal; text-wrap: balance; } html[dir="rtl"] .home-highlight-card, html[lang="ar"] .home-highlight-card, html[dir="rtl"] .why-choose-card, html[lang="ar"] .why-choose-card { direction: rtl; text-align: center; } html[dir="rtl"] .home-highlight-value, html[lang="ar"] .home-highlight-value { font-size: clamp(20px, 1.45vw, 25px); line-height: 1.45; letter-spacing: 0; max-width: 14ch; } html[dir="rtl"] .home-highlight-title, html[lang="ar"] .home-highlight-title { font-size: clamp(14.5px, 1.02vw, 17px); line-height: 1.65; letter-spacing: 0; max-width: 18ch; } html[dir="rtl"] .home-highlight-card p, html[lang="ar"] .home-highlight-card p { font-size: 13.5px; line-height: 1.9; max-width: 28ch; } html[dir="rtl"] .why-choose-head h2, html[lang="ar"] .why-choose-head h2 { font-size: clamp(25px, 2.35vw, 38px); line-height: 1.35; letter-spacing: 0; } html[dir="rtl"] .why-choose-card h3, html[lang="ar"] .why-choose-card h3 { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6; letter-spacing: 0; max-width: 18ch; } html[dir="rtl"] .why-choose-card p, html[lang="ar"] .why-choose-card p { font-size: 13px; line-height: 1.9; max-width: 28ch; } @media (max-width: 1180px) { .home-trust-strip { width: min(1040px, calc(100% - 44px)); padding-inline: 20px; } .home-highlights-grid { max-width: 760px; } .home-highlight-card { min-height: 304px; } } @media (max-width: 980px) { .home-trust-strip { width: min(760px, calc(100% - 30px)); min-height: unset; padding: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .home-trust-strip .info-item, .home-trust-strip .info-item:nth-child(1), .home-trust-strip .info-item:nth-child(2), .home-trust-strip .info-item:nth-child(3), .home-trust-strip .info-item:nth-child(4), .home-trust-strip .info-item:nth-child(5), .home-trust-strip .info-item:nth-child(6) { min-height: 58px; padding: 12px; gap: 10px; } .home-trust-strip .info-icon { width: 42px; height: 42px; flex-basis: 42px; } .home-trust-strip .info-item small { font-size: 9.5px; } .home-trust-strip .info-item strong, .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong { font-size: 17px; } } @media (max-width: 680px) { .home-highlights-section, .why-choose-section { padding-block: 38px; } .home-highlights-grid, .why-choose-grid { grid-template-columns: 1fr; max-width: 430px; gap: 14px; } .home-highlight-card, .why-choose-card { min-height: auto; padding: 24px 20px 22px; } .home-highlight-icon, .why-choose-icon { width: 56px; height: 56px; flex-basis: 56px; margin-bottom: 16px; } .home-highlight-value { font-size: 22px; } .home-highlight-title, .why-choose-card h3 { font-size: 16px; } .home-highlight-card p, .why-choose-card p { font-size: 13.5px; } } @media (max-width: 640px) { .home-trust-strip { width: min(100% - 24px, 430px); padding: 14px; grid-template-columns: 1fr; gap: 9px; } .home-trust-strip .info-item { min-height: 54px; padding: 11px; } .home-trust-strip .info-icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 18px; } .home-trust-strip .info-icon-img { width: 21px; height: 21px; } .home-trust-strip .info-item small { font-size: 9px; } .home-trust-strip .info-item strong, .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong { font-size: 16px; } } /* Upgrade 23 — trust strip readable labels + corrected last metric alignment. Fixes overly tiny metric titles after Upgrade 22 while keeping the compact card fit. */ .home-trust-strip { width: min(1100px, calc(100% - 88px)); min-height: clamp(136px, 10.7vw, 158px); padding: clamp(18px, 1.7vw, 24px) clamp(24px, 3vw, 42px); row-gap: clamp(8px, .85vw, 12px); } .home-trust-strip .info-item { min-height: 50px; padding-inline: clamp(14px, 1.35vw, 22px); gap: clamp(10px, .95vw, 14px); align-items: center; } .home-trust-strip .info-icon { width: clamp(42px, 3.1vw, 48px); height: clamp(42px, 3.1vw, 48px); flex: 0 0 clamp(42px, 3.1vw, 48px); font-size: clamp(17px, 1.22vw, 21px); } .home-trust-strip .info-icon-img { width: clamp(21px, 1.42vw, 24px); height: clamp(21px, 1.42vw, 24px); } .home-trust-strip .info-item small { margin-bottom: 2px; font-size: clamp(10px, .68vw, 12px); line-height: 1.22; font-weight: 850; letter-spacing: -.006em; } .home-trust-strip .info-item strong, .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong { font-size: clamp(17px, 1.22vw, 23px); line-height: 1.08; letter-spacing: -.028em; } .home-trust-strip .info-item:nth-child(3), .home-trust-strip .info-item:nth-child(4) { min-height: 72px; padding-inline: clamp(18px, 1.75vw, 28px); align-self: center; } .home-trust-strip .info-item:nth-child(4) { padding-inline-start: clamp(24px, 2.25vw, 36px); } .home-trust-strip .info-item:nth-child(3) div, .home-trust-strip .info-item:nth-child(4) div { max-width: 172px; } html:not([dir="rtl"]) .home-trust-strip .info-item:nth-child(3) small, html:not([dir="rtl"]) .home-trust-strip .info-item:nth-child(4) small { white-space: nowrap; font-size: clamp(10.5px, .72vw, 12.5px); } .home-trust-strip .info-item:nth-child(5)::before, .home-trust-strip .info-item:nth-child(6)::before { top: -6px; inset-inline-start: clamp(14px, 1.35vw, 22px); width: min(80%, 194px); } html[dir="rtl"] .home-trust-strip, html[lang="ar"] .home-trust-strip { width: min(1100px, calc(100% - 88px)); padding-inline: clamp(24px, 2.8vw, 40px); } html[dir="rtl"] .home-trust-strip .info-item, html[lang="ar"] .home-trust-strip .info-item { gap: clamp(9px, .9vw, 13px); padding-inline: clamp(14px, 1.45vw, 22px); } html[dir="rtl"] .home-trust-strip .info-item:nth-child(4), html[lang="ar"] .home-trust-strip .info-item:nth-child(4) { padding-inline-start: clamp(16px, 1.45vw, 24px); padding-inline-end: clamp(18px, 2vw, 30px); } html[dir="rtl"] .home-trust-strip .info-item small, html[lang="ar"] .home-trust-strip .info-item small { font-size: clamp(9.5px, .62vw, 11px); line-height: 1.5; letter-spacing: 0; } html[dir="rtl"] .home-trust-strip .info-item strong, html[lang="ar"] .home-trust-strip .info-item strong, html[dir="rtl"] .home-trust-strip .info-item:nth-child(5) strong, html[dir="rtl"] .home-trust-strip .info-item:nth-child(6) strong, html[lang="ar"] .home-trust-strip .info-item:nth-child(5) strong, html[lang="ar"] .home-trust-strip .info-item:nth-child(6) strong { font-size: clamp(15px, 1.05vw, 20px); line-height: 1.32; letter-spacing: 0; } @media (max-width: 1180px) { .home-trust-strip { width: min(1040px, calc(100% - 44px)); padding-inline: 24px; } .home-trust-strip .info-item:nth-child(4) { padding-inline-start: 26px; } } @media (max-width: 980px) { .home-trust-strip, html[dir="rtl"] .home-trust-strip, html[lang="ar"] .home-trust-strip { width: min(760px, calc(100% - 30px)); padding: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .home-trust-strip .info-item, .home-trust-strip .info-item:nth-child(1), .home-trust-strip .info-item:nth-child(2), .home-trust-strip .info-item:nth-child(3), .home-trust-strip .info-item:nth-child(4), .home-trust-strip .info-item:nth-child(5), .home-trust-strip .info-item:nth-child(6), html[dir="rtl"] .home-trust-strip .info-item:nth-child(4), html[lang="ar"] .home-trust-strip .info-item:nth-child(4) { min-height: 58px; padding: 12px; gap: 10px; } html:not([dir="rtl"]) .home-trust-strip .info-item:nth-child(3) small, html:not([dir="rtl"]) .home-trust-strip .info-item:nth-child(4) small { white-space: normal; } } @media (max-width: 640px) { .home-trust-strip, html[dir="rtl"] .home-trust-strip, html[lang="ar"] .home-trust-strip { width: min(100% - 24px, 430px); padding: 14px; grid-template-columns: 1fr; gap: 9px; } .home-trust-strip .info-item, .home-trust-strip .info-item:nth-child(1), .home-trust-strip .info-item:nth-child(2), .home-trust-strip .info-item:nth-child(3), .home-trust-strip .info-item:nth-child(4), .home-trust-strip .info-item:nth-child(5), .home-trust-strip .info-item:nth-child(6) { min-height: 54px; padding: 11px; } .home-trust-strip .info-icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 18px; } .home-trust-strip .info-icon-img { width: 21px; height: 21px; } .home-trust-strip .info-item small, html[dir="rtl"] .home-trust-strip .info-item small, html[lang="ar"] .home-trust-strip .info-item small { font-size: 9px; } .home-trust-strip .info-item strong, .home-trust-strip .info-item:nth-child(5) strong, .home-trust-strip .info-item:nth-child(6) strong, html[dir="rtl"] .home-trust-strip .info-item strong, html[lang="ar"] .home-trust-strip .info-item strong, html[dir="rtl"] .home-trust-strip .info-item:nth-child(5) strong, html[dir="rtl"] .home-trust-strip .info-item:nth-child(6) strong, html[lang="ar"] .home-trust-strip .info-item:nth-child(5) strong, html[lang="ar"] .home-trust-strip .info-item:nth-child(6) strong { font-size: 16px; } } /* Upgrade 24: CEO / leadership message placement and responsive design. */ .home-leadership-section { padding-top: clamp(26px, 4vw, 54px); padding-bottom: clamp(26px, 4vw, 60px); } .home-leadership-card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(86px, 132px) minmax(0, 1fr); gap: clamp(20px, 3vw, 42px); align-items: center; width: min(1080px, 100%); margin-inline: auto; padding: clamp(24px, 3.4vw, 46px); border: 1px solid rgba(191, 211, 247, .82); border-radius: clamp(24px, 2vw, 34px); background: radial-gradient(circle at 96% 10%, rgba(0, 166, 223, .13), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,250,255,.96)); box-shadow: 0 24px 70px rgba(5, 47, 111, .09); overflow: hidden; } .home-leadership-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 8px; background: linear-gradient(180deg, #0758d8, #00a6df); z-index: -1; } .home-leadership-card__mark { width: clamp(82px, 9vw, 124px); height: clamp(82px, 9vw, 124px); border-radius: 30px; display: grid; place-items: center; background: linear-gradient(145deg, #052c68, #0758d8); border: 1px solid rgba(255,255,255,.38); box-shadow: 0 18px 46px rgba(7, 88, 216, .22); color: #fff; overflow: hidden; } .home-leadership-card__mark img { width: 74%; height: 74%; object-fit: contain; } .home-leadership-card__mark span { font-size: clamp(3rem, 6vw, 5.6rem); line-height: 1; font-weight: 900; transform: translateY(-.06em); } .home-leadership-card__content .eyebrow, .about-leadership-card__content .eyebrow { color: #0758d8; } .home-leadership-card__content h2 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(1.65rem, 2.45vw, 2.8rem); line-height: 1.12; letter-spacing: -.035em; color: #071c46; } .home-leadership-card__quote { max-width: 860px; margin: 0; font-size: clamp(1rem, 1.12vw, 1.18rem); line-height: 1.75; color: #29405f; } .home-leadership-card__footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid #dbe7fb; } .home-leadership-card__footer strong, .about-leadership-card__signature-row strong { display: block; font-size: 1.04rem; line-height: 1.25; color: #071c46; } .home-leadership-card__footer span, .about-leadership-card__signature-row span { display: block; margin-top: 3px; font-size: .92rem; line-height: 1.45; color: #5a6f8e; } .about-leadership-section { padding-top: clamp(42px, 6vw, 80px); padding-bottom: clamp(42px, 6vw, 82px); } .about-leadership-card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); gap: clamp(28px, 4vw, 58px); align-items: stretch; border-radius: clamp(28px, 2.8vw, 42px); padding: clamp(24px, 4vw, 52px); background: linear-gradient(135deg, rgba(4, 36, 82, .96), rgba(7, 88, 216, .94)), #063b91; color: #fff; box-shadow: 0 28px 86px rgba(3, 34, 84, .18); overflow: hidden; } .about-leadership-card::before, .about-leadership-card::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; z-index: -1; } .about-leadership-card::before { width: 420px; height: 420px; inset-inline-end: -160px; inset-block-start: -210px; border: 1px solid rgba(255,255,255,.14); } .about-leadership-card::after { width: 300px; height: 300px; inset-inline-start: -120px; inset-block-end: -150px; background: radial-gradient(circle, rgba(0, 166, 223, .35), transparent 68%); } .about-leadership-card__visual { min-height: 100%; border-radius: 30px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); overflow: hidden; } .about-leadership-card__visual img { width: min(72%, 220px); height: auto; max-height: 260px; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.2)); } .about-leadership-card__visual span { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 32px; background: rgba(255,255,255,.14); font-size: 2rem; font-weight: 900; letter-spacing: .04em; } .about-leadership-card__content .eyebrow { color: #bcd8ff; } .about-leadership-card__content h2 { margin: 8px 0 18px; max-width: 820px; font-size: clamp(2rem, 3.1vw, 3.55rem); line-height: 1.06; letter-spacing: -.04em; color: #fff; } .about-leadership-card__message { max-width: 880px; color: rgba(255,255,255,.9); } .about-leadership-card__message p { margin: 0 0 15px; font-size: clamp(1rem, 1.12vw, 1.16rem); line-height: 1.78; } .about-leadership-card__signature-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); } .about-leadership-card__signature-row strong, .about-leadership-card__signature-row span { color: #fff; } .about-leadership-card__signature-row span { color: rgba(255,255,255,.72); } .about-leadership-card__signature-row img { max-width: 148px; max-height: 58px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 6px 14px rgba(0,0,0,.15)); } .about-strengths-panel { width: 100%; padding: clamp(28px, 4vw, 50px); border-radius: clamp(26px, 2.5vw, 38px); background: linear-gradient(135deg,#062452,#074cb9); color: #fff; box-shadow: 0 24px 72px rgba(5, 47, 111, .12); } .about-strengths-panel .eyebrow { color: #bcd8ff; } .about-strengths-panel h2 { color: #fff; max-width: 860px; } .about-strengths-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); margin-top: 26px; } .about-strength-item { padding: 20px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); } .about-strength-title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #fff; font-size: 1.15rem; line-height: 1.3; } .about-strength-title img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; } .about-strength-title span { color: #9fd9ff; } .about-strength-item p { margin: 0; color: rgba(255,255,255,.78); font-size: .98rem; line-height: 1.7; } html[dir="rtl"] .home-leadership-card, html[lang="ar"] .home-leadership-card, html[dir="rtl"] .about-leadership-card, html[lang="ar"] .about-leadership-card { text-align: right; } html[dir="rtl"] .home-leadership-card__content h2, html[lang="ar"] .home-leadership-card__content h2, html[dir="rtl"] .about-leadership-card__content h2, html[lang="ar"] .about-leadership-card__content h2 { letter-spacing: 0; line-height: 1.22; } html[dir="rtl"] .home-leadership-card__quote, html[lang="ar"] .home-leadership-card__quote, html[dir="rtl"] .about-leadership-card__message p, html[lang="ar"] .about-leadership-card__message p { line-height: 1.95; } html[dir="rtl"] .about-strength-title, html[lang="ar"] .about-strength-title { line-height: 1.55; letter-spacing: 0; } @media (max-width: 980px) { .home-leadership-card, .about-leadership-card { grid-template-columns: 1fr; } .home-leadership-card__mark, .about-leadership-card__visual { justify-self: start; } .about-leadership-card__visual { min-height: 190px; } .about-strengths-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .home-leadership-card, .about-leadership-card, .about-strengths-panel { border-radius: 24px; padding: 22px; } .home-leadership-card__footer, .about-leadership-card__signature-row { align-items: flex-start; } .home-leadership-card__footer .btn { width: 100%; justify-content: center; } .about-strengths-grid { grid-template-columns: 1fr; } } /* Upgrade 43: refined full-width parallax managing committee message card. */ .home-leadership-parallax { --leadership-bg: linear-gradient(135deg, #062452, #0758d8); position: relative; isolation: isolate; margin-block: clamp(104px, 10vw, 164px); min-height: clamp(540px, 46vw, 680px); display: flex; align-items: center; overflow: hidden; background-color: #062452; background-image: var(--leadership-bg); background-size: 100% auto; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; color: #071c46; } .home-leadership-parallax::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(3,19,46,.42), rgba(3,19,46,.10) 45%, rgba(3,19,46,.30)), var(--leadership-bg); background-size: 100% auto; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } .home-leadership-parallax__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 80% 22%, rgba(155,220,255,.22), transparent 32%), linear-gradient(90deg, rgba(4,20,46,.56), rgba(4,20,46,.08) 56%, rgba(4,20,46,.24)); } .home-leadership-parallax__inner { width: 100%; padding-block: clamp(82px, 8vw, 116px); } .home-leadership-quote-card { position: relative; display: grid; grid-template-columns: minmax(64px, 104px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; width: min(980px, 100%); padding: clamp(28px, 3.4vw, 48px) clamp(26px, 4vw, 58px); border-radius: clamp(24px, 2.2vw, 34px); background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,250,255,.91)); border: 1px solid rgba(226,238,255,.92); box-shadow: 0 32px 92px rgba(2, 18, 46, .30); backdrop-filter: blur(14px); overflow: hidden; } .home-leadership-quote-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: linear-gradient(180deg, #0758d8, #00a6df); } .home-leadership-quote-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 91% 12%, rgba(0,166,223,.10), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.10), transparent 55%); } .home-leadership-quote-card__accent { position: relative; z-index: 1; display: flex; justify-content: center; min-height: 100%; } .home-leadership-quote-card__accent::after { content: ""; position: absolute; top: clamp(84px, 8vw, 112px); bottom: 8px; width: 2px; border-radius: 99px; background: linear-gradient(180deg, rgba(7,88,216,.68), rgba(7,88,216,0)); } .home-leadership-quote-card__accent span { width: clamp(62px, 6.8vw, 86px); height: clamp(62px, 6.8vw, 86px); border-radius: 999px; display: grid; place-items: center; border: 1px solid #d9e7fb; color: #2e86ff; background: rgba(255,255,255,.58); box-shadow: inset 0 0 0 10px rgba(7,88,216,.035), 0 14px 30px rgba(7,88,216,.08); font-size: clamp(3rem, 5vw, 4.7rem); font-weight: 900; line-height: 1; transform: translateY(-.02em); } .home-leadership-quote-card__body { position: relative; z-index: 1; } .home-leadership-quote-card .eyebrow { color: #0758d8; font-size: .82rem; letter-spacing: .18em; } .home-leadership-quote-card__line { display: block; width: 32px; height: 3px; border-radius: 99px; background: #0758d8; margin: 14px 0 18px; } .home-leadership-quote-card h2 { margin: 0 0 clamp(14px, 1.6vw, 20px); color: #071c46; font-size: clamp(1.9rem, 2.8vw, 3.2rem); line-height: 1.06; letter-spacing: -.045em; } .home-leadership-quote-card__message { max-width: 800px; color: #1d3556; } .home-leadership-quote-card__message p { margin: 0 0 15px; font-size: clamp(.98rem, 1.02vw, 1.08rem); line-height: 1.72; } .home-leadership-quote-card__footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid #d9e6fa; } .home-leadership-quote-card__footer strong { display: block; color: #071c46; font-size: 1.02rem; line-height: 1.3; } .home-leadership-quote-card__footer span { display: block; margin-top: 4px; color: #5b7190; font-size: .92rem; line-height: 1.45; } html[dir="rtl"] .home-leadership-quote-card, html[lang="ar"] .home-leadership-quote-card { direction: rtl; text-align: right; } html[dir="rtl"] .home-leadership-quote-card h2, html[lang="ar"] .home-leadership-quote-card h2 { letter-spacing: 0; line-height: 1.18; } html[dir="rtl"] .home-leadership-quote-card__message p, html[lang="ar"] .home-leadership-quote-card__message p { line-height: 1.95; } @media (max-width: 1280px) { .home-leadership-parallax, .home-leadership-parallax::before { background-size: cover; } } @media (max-width: 960px) { .home-leadership-parallax, .home-leadership-parallax::before { background-attachment: scroll; background-size: cover; } .home-leadership-parallax { margin-block: clamp(72px, 12vw, 106px); min-height: auto; } .home-leadership-quote-card { grid-template-columns: 1fr; } .home-leadership-quote-card__accent { min-height: auto; justify-content: flex-start; } .home-leadership-quote-card__accent::after { display: none; } } @media (max-width: 620px) { .home-leadership-parallax__inner { padding-block: 56px; } .home-leadership-quote-card { padding: 28px 22px; border-radius: 24px; } } /* Upgrade 44: centered frosted quote card + softened parallax background. */ .home-leadership-parallax { min-height: clamp(560px, 48vw, 720px); margin-block: clamp(116px, 11vw, 178px); background-image: none; background-color: #062452; } .home-leadership-parallax::before { inset: -18px; z-index: -3; background-image: linear-gradient(90deg, rgba(4,18,42,.48), rgba(4,18,42,.16) 46%, rgba(4,18,42,.38)), var(--leadership-bg); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; filter: blur(3px) saturate(.92) contrast(.92); transform: scale(1.025); } .home-leadership-parallax::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(2,16,38,.08), rgba(2,16,38,.28)), radial-gradient(circle at 50% 46%, rgba(255,255,255,.18), transparent 30%); } .home-leadership-parallax__shade { z-index: -1; background: radial-gradient(circle at 18% 48%, rgba(0,166,223,.20), transparent 28%), radial-gradient(circle at 82% 28%, rgba(255,255,255,.18), transparent 24%), linear-gradient(90deg, rgba(4,20,46,.34), rgba(4,20,46,.08) 54%, rgba(4,20,46,.32)); } .home-leadership-parallax__inner { display: flex; justify-content: center; align-items: center; padding-block: clamp(92px, 8vw, 132px); } .home-leadership-quote-card { margin-inline: auto; width: min(920px, calc(100% - 48px)); max-width: 920px; grid-template-columns: 74px minmax(0, 1fr); gap: clamp(18px, 2.4vw, 34px); padding: clamp(34px, 3.2vw, 50px) clamp(30px, 4vw, 60px); border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(243,249,255,.74)); border: 1px solid rgba(255,255,255,.62); box-shadow: 0 34px 90px rgba(1, 16, 40, .28), inset 0 1px 0 rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); } .home-leadership-quote-card::before { width: 4px; background: linear-gradient(180deg, #0758d8, rgba(0,166,223,.68)); } .home-leadership-quote-card::after { background: radial-gradient(circle at 91% 14%, rgba(0,166,223,.11), transparent 28%), radial-gradient(circle at 12% 88%, rgba(7,88,216,.08), transparent 24%); } .home-leadership-quote-card__accent { justify-content: center; } .home-leadership-quote-card__accent::after { top: 84px; bottom: 18px; width: 1px; background: linear-gradient(180deg, rgba(7,88,216,.44), rgba(7,88,216,0)); } .home-leadership-quote-mark { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; color: #0758d8; background: rgba(255,255,255,.62); border: 1px solid rgba(213,229,250,.95); box-shadow: 0 12px 28px rgba(7,88,216,.12), inset 0 0 0 7px rgba(7,88,216,.035); } .home-leadership-quote-mark svg { width: 27px; height: 27px; fill: currentColor; display: block; } .home-leadership-quote-card .eyebrow { font-size: .78rem; letter-spacing: .18em; } .home-leadership-quote-card__line { width: 28px; height: 2px; margin: 12px 0 18px; } .home-leadership-quote-card h2 { max-width: 760px; font-size: clamp(2rem, 2.7vw, 3rem); letter-spacing: -.04em; } .home-leadership-quote-card__message { max-width: 760px; } .home-leadership-quote-card__message p { font-size: clamp(.94rem, .98vw, 1.04rem); line-height: 1.7; margin-bottom: 14px; } .home-leadership-quote-card__footer { margin-top: 18px; padding-top: 16px; } @media (max-width: 960px) { .home-leadership-parallax, .home-leadership-parallax::before { background-attachment: scroll; } .home-leadership-parallax { margin-block: clamp(82px, 14vw, 122px); min-height: auto; } .home-leadership-parallax__inner { padding-block: 72px; } .home-leadership-quote-card { width: min(100%, calc(100% - 32px)); grid-template-columns: 1fr; } .home-leadership-quote-card__accent { justify-content: flex-start; } } @media (max-width: 620px) { .home-leadership-quote-card { padding: 28px 22px; border-radius: 24px; } .home-leadership-quote-card h2 { font-size: clamp(1.75rem, 9vw, 2.35rem); } } /* Upgrade 45: wider, lower-height frosted managing committee quote card. */ .home-leadership-parallax { min-height: clamp(430px, 37vw, 560px) !important; margin-block: clamp(54px, 5.4vw, 86px) !important; background-color: #0a2b5a; overflow: hidden; } .home-leadership-parallax::before { inset: -12px !important; background-size: cover !important; background-position: center center !important; background-attachment: fixed; filter: blur(4px) saturate(.86) contrast(.92) brightness(.82) !important; transform: scale(1.015) !important; } .home-leadership-parallax::after { background: linear-gradient(90deg, rgba(4,18,42,.42), rgba(7,33,72,.18) 46%, rgba(4,18,42,.46)), linear-gradient(180deg, rgba(2,16,38,.10), rgba(2,16,38,.20)) !important; } .home-leadership-parallax__shade { background: radial-gradient(circle at 24% 52%, rgba(255,255,255,.16), transparent 24%), radial-gradient(circle at 72% 20%, rgba(0,166,223,.12), transparent 26%), linear-gradient(90deg, rgba(3,18,42,.28), rgba(4,20,46,.05) 56%, rgba(3,18,42,.30)) !important; } .home-leadership-parallax__inner { width: min(1280px, calc(100% - 48px)); padding-block: clamp(54px, 5vw, 72px) !important; margin-inline: auto; } .home-leadership-quote-card { width: min(1180px, 100%) !important; max-width: 1180px !important; min-height: unset !important; grid-template-columns: 72px minmax(0, 1fr) !important; gap: clamp(18px, 2vw, 30px) !important; padding: clamp(28px, 2.6vw, 40px) clamp(34px, 4.2vw, 66px) !important; border-radius: 24px !important; background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(241,248,255,.68)) !important; border: 1px solid rgba(255,255,255,.72) !important; box-shadow: 0 26px 70px rgba(2,16,38,.22), inset 0 1px 0 rgba(255,255,255,.76) !important; backdrop-filter: blur(22px) saturate(1.08) !important; -webkit-backdrop-filter: blur(22px) saturate(1.08) !important; } .home-leadership-quote-card::before { width: 3px !important; opacity: .85; } .home-leadership-quote-card::after { background: radial-gradient(circle at 96% 8%, rgba(0,166,223,.10), transparent 26%), linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0)) !important; } .home-leadership-quote-card__accent { align-items: start; justify-content: start !important; padding-top: 0; } .home-leadership-quote-card__accent::after { top: 72px !important; bottom: 28px !important; left: 26px; width: 1px !important; opacity: .7; } .home-leadership-quote-mark { width: 52px !important; height: 52px !important; border-radius: 50% !important; color: #0758d8 !important; background: rgba(255,255,255,.76) !important; border: 1px solid rgba(211,229,250,.95) !important; box-shadow: 0 12px 28px rgba(7,88,216,.13), inset 0 0 0 8px rgba(7,88,216,.035) !important; } .home-leadership-quote-mark svg { width: 22px !important; height: 22px !important; } .home-leadership-quote-card .eyebrow { font-size: .72rem !important; letter-spacing: .18em !important; } .home-leadership-quote-card__line { width: 24px !important; height: 2px !important; margin: 8px 0 12px !important; } .home-leadership-quote-card h2 { max-width: none !important; font-size: clamp(1.85rem, 2.25vw, 2.75rem) !important; line-height: 1.02 !important; margin-bottom: 14px !important; letter-spacing: -.04em !important; } .home-leadership-quote-card__message { max-width: none !important; column-count: 1; } .home-leadership-quote-card__message p { max-width: 980px; font-size: clamp(.82rem, .82vw, .96rem) !important; line-height: 1.58 !important; margin-bottom: 10px !important; color: rgba(7, 32, 70, .92) !important; } .home-leadership-quote-card__footer { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid rgba(7,88,216,.16) !important; } .home-leadership-quote-card__footer strong { font-size: .94rem !important; color: #06214a !important; } .home-leadership-quote-card__footer span { font-size: .84rem !important; } html[dir="rtl"] .home-leadership-quote-card, html[lang="ar"] .home-leadership-quote-card { grid-template-columns: minmax(0, 1fr) 72px !important; } html[dir="rtl"] .home-leadership-quote-card__accent::after, html[lang="ar"] .home-leadership-quote-card__accent::after { left: auto; right: 26px; } @media (max-width: 960px) { .home-leadership-parallax, .home-leadership-parallax::before { background-attachment: scroll !important; } .home-leadership-parallax { margin-block: clamp(44px, 8vw, 70px) !important; } .home-leadership-parallax__inner { width: min(100%, calc(100% - 28px)); padding-block: 46px !important; } .home-leadership-quote-card, html[dir="rtl"] .home-leadership-quote-card, html[lang="ar"] .home-leadership-quote-card { grid-template-columns: 1fr !important; padding: 28px 24px !important; } .home-leadership-quote-card__accent::after { display: none !important; } .home-leadership-quote-card__accent { margin-bottom: -4px; } } @media (min-width: 1180px) { .home-leadership-quote-card__message p:nth-child(n+3) { max-width: 1040px; } } @media (max-width: 620px) { .home-leadership-parallax { min-height: auto !important; margin-block: 38px !important; } .home-leadership-parallax__inner { padding-block: 36px !important; } .home-leadership-quote-card { padding: 24px 20px !important; border-radius: 20px !important; } .home-leadership-quote-card h2 { font-size: clamp(1.6rem, 8vw, 2.1rem) !important; } } /* Upgrade 106 — home hero copy balance Keeps the existing sphere/background design unchanged; only brings the left hero copy slightly inward on desktop so the composition feels centered instead of edge-heavy. */ @media (min-width: 981px) { .hero-home .hero-content { transform: translateX(clamp(34px, 4.2vw, 82px)); } html[dir="rtl"] .hero-home .hero-content { transform: translateX(clamp(-82px, -4.2vw, -34px)); } } @media (min-width: 1321px) { .hero-home .hero-content { transform: translateX(clamp(58px, 5vw, 104px)); } html[dir="rtl"] .hero-home .hero-content { transform: translateX(clamp(-104px, -5vw, -58px)); } } @media (max-width: 980px) { .hero-home .hero-content { transform: none; } } /* Upgrade 107 — home hero sphere right balance Keeps the approved hero text alignment from Upgrade 106 and moves only the desktop sphere a little to the right for a more centered visual composition. */ @media (min-width: 1321px) { .hero-home .hero-trust-sphere-exact { right: clamp(-4px, 3.2vw, 72px) !important; transform: translateY(-50%) translateX(0) !important; } html[dir="rtl"] .hero-home .hero-trust-sphere-exact { right: auto !important; left: clamp(-4px, 3.2vw, 72px) !important; transform: translateY(-50%) translateX(0) !important; } } @media (min-width: 981px) and (max-width: 1320px) { .hero-home .hero-trust-sphere-exact { right: clamp(-18px, 1vw, 12px) !important; } html[dir="rtl"] .hero-home .hero-trust-sphere-exact { right: auto !important; left: clamp(-18px, 1vw, 12px) !important; } } /* Upgrade 108 — tablet header height lock and responsive home hero fix Fixes the 641–980px tablet mode issue where the fixed nav could expand into a tall blank block. The header is locked to the real tablet height, the language switcher cannot stretch, and the home hero starts cleanly below the fixed header. */ @media (min-width: 641px) and (max-width: 980px) { :root { --site-header-height: 74px; } html { scroll-padding-top: calc(var(--site-header-height, 74px) + 14px) !important; } body { padding-top: var(--site-header-height, 74px) !important; overflow-x: hidden !important; } .site-header { height: var(--site-header-height, 74px) !important; min-height: var(--site-header-height, 74px) !important; max-height: var(--site-header-height, 74px) !important; overflow: visible !important; } .site-header > .container, .site-header .container.navbar, .navbar { width: min(100% - 28px, 1360px) !important; height: var(--site-header-height, 74px) !important; min-height: var(--site-header-height, 74px) !important; max-height: var(--site-header-height, 74px) !important; padding: 0 !important; margin-inline: auto !important; display: grid !important; grid-template-columns: minmax(190px, 1fr) minmax(230px, auto) 44px !important; align-items: center !important; gap: 12px !important; } .site-header .nav-links:not(.mobile-open):not(.is-open), body:not(.mobile-nav-open) .site-header .nav-links:not(.mobile-open):not(.is-open) { display: none !important; } .site-header .btn-primary { display: none !important; } .site-logo-lockup, .navbar .site-logo-lockup, .site-header .site-logo-lockup, html[dir="rtl"] .navbar .site-logo-lockup, html[dir="rtl"] .site-header .site-logo-lockup { min-width: 0 !important; max-width: 310px !important; margin: 0 !important; gap: 10px !important; overflow: hidden !important; } .site-logo-lockup .site-logo-mark, .site-logo-lockup .site-logo-mark img { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; } .site-logo-lockup .site-logo-text { min-width: 0 !important; overflow: hidden !important; } .site-logo-lockup .site-logo-text strong { font-size: clamp(22px, 4.4vw, 30px) !important; letter-spacing: .17em !important; line-height: .9 !important; white-space: nowrap !important; } .site-logo-lockup .site-logo-text small { font-size: 8px !important; line-height: 1.06 !important; } .language-links { justify-self: end !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 3px !important; transform: none !important; } .language-links a { min-height: 34px !important; padding: 7px 10px !important; font-size: 12px !important; white-space: nowrap !important; } .mobile-toggle { justify-self: end !important; display: inline-grid !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } .nav-links.mobile-open, .nav-links.is-open, body.mobile-nav-open .nav-links { top: calc(var(--site-header-height, 74px) + 10px) !important; left: 14px !important; right: 14px !important; max-height: calc(100svh - var(--site-header-height, 74px) - 24px) !important; } .hero-home { padding-block: 0 !important; margin-top: 0 !important; min-height: auto !important; overflow: hidden !important; } .hero-home .hero-inner { padding-top: clamp(42px, 7vw, 64px) !important; padding-bottom: clamp(58px, 8vw, 78px) !important; min-height: auto !important; display: block !important; } .hero-home .hero-content { width: min(100%, 650px) !important; max-width: 650px !important; padding: 0 !important; transform: none !important; position: relative !important; z-index: 3 !important; } .hero-home h1 { max-width: 12.5ch !important; font-size: clamp(40px, 7.6vw, 58px) !important; line-height: 1.05 !important; } .hero-home p { max-width: 620px !important; } .hero-visual-layer { top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 66% !important; height: 100% !important; min-height: 100% !important; opacity: .45 !important; } .hero-side-panel, .hero-trust-sphere-exact { display: none !important; } } @media (max-width: 640px) { :root { --site-header-height: 68px; } body { padding-top: var(--site-header-height, 68px) !important; } .site-header { height: var(--site-header-height, 68px) !important; min-height: var(--site-header-height, 68px) !important; max-height: var(--site-header-height, 68px) !important; overflow: visible !important; } .site-header > .container, .site-header .container.navbar, .navbar { height: var(--site-header-height, 68px) !important; min-height: var(--site-header-height, 68px) !important; max-height: var(--site-header-height, 68px) !important; padding-block: 0 !important; align-items: center !important; } .hero-home { padding-block: 0 !important; } } /* Upgrade 109 — small laptop responsive polish Cleans the 981–1100px layout so laptop/devtools widths do not look cramped: compact header, hamburger nav, softer hero split, safer text width, and a smaller sphere. */ @media (min-width: 981px) and (max-width: 1100px) { :root { --site-header-height: 76px; } html { scroll-padding-top: calc(var(--site-header-height, 76px) + 14px) !important; } body { padding-top: var(--site-header-height, 76px) !important; overflow-x: hidden !important; } .site-header { height: var(--site-header-height, 76px) !important; min-height: var(--site-header-height, 76px) !important; max-height: var(--site-header-height, 76px) !important; overflow: visible !important; transform: translate3d(0,0,0) !important; } .site-header > .container, .site-header .container.navbar, .navbar { width: min(100% - 44px, 1180px) !important; height: var(--site-header-height, 76px) !important; min-height: var(--site-header-height, 76px) !important; max-height: var(--site-header-height, 76px) !important; margin-inline: auto !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(245px, 1fr) auto 44px !important; align-items: center !important; gap: 14px !important; } .site-header .nav-links:not(.mobile-open):not(.is-open), body:not(.mobile-nav-open) .site-header .nav-links:not(.mobile-open):not(.is-open) { display: none !important; } .site-header .btn-primary { display: none !important; } .site-logo-lockup, .navbar .site-logo-lockup, .site-header .site-logo-lockup, html[dir="rtl"] .navbar .site-logo-lockup, html[dir="rtl"] .site-header .site-logo-lockup { min-width: 0 !important; max-width: 345px !important; margin: 0 !important; gap: 10px !important; overflow: visible !important; } .site-logo-lockup .site-logo-mark, .site-logo-lockup .site-logo-mark img { width: 50px !important; height: 50px !important; flex: 0 0 50px !important; } .site-logo-lockup .site-logo-text strong { font-size: 29px !important; letter-spacing: .22em !important; line-height: .88 !important; white-space: nowrap !important; } .site-logo-lockup .site-logo-text small { font-size: 9.5px !important; line-height: 1.08 !important; } .language-links { justify-self: end !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; gap: 4px !important; padding: 4px !important; border-radius: 13px !important; transform: none !important; } .language-links a { min-height: 36px !important; padding: 7px 10px !important; font-size: 12px !important; white-space: nowrap !important; } .mobile-toggle { justify-self: end !important; display: inline-grid !important; place-items: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } .nav-links.mobile-open, .nav-links.is-open, body.mobile-nav-open .nav-links { position: fixed !important; top: calc(var(--site-header-height, 76px) + 10px) !important; left: 22px !important; right: 22px !important; max-height: calc(100svh - var(--site-header-height, 76px) - 24px) !important; display: flex !important; flex-direction: column !important; overflow: auto !important; padding: 12px 18px 18px !important; background: rgba(255,255,255,.98) !important; border: 1px solid rgba(220,229,242,.95) !important; border-radius: 18px !important; box-shadow: 0 24px 60px rgba(6,27,54,.16) !important; z-index: 1002 !important; } .nav-links.mobile-open a, .nav-links.is-open a, body.mobile-nav-open .nav-links a { min-height: 48px !important; display: flex !important; align-items: center !important; padding: 13px 4px !important; border-bottom: 1px solid #edf2f8 !important; font-size: 15px !important; white-space: nowrap !important; } .nav-links.mobile-open a::after, .nav-links.is-open a::after, body.mobile-nav-open .nav-links a::after { display: none !important; } .hero-home { min-height: 570px !important; background: linear-gradient(90deg, #ffffff 0%, #ffffff 44%, rgba(239,247,254,.94) 57%, rgba(204,223,241,.92) 100%) !important; overflow: hidden !important; } .hero-home::before { background: radial-gradient(circle at 77% 22%, rgba(255,255,255,.42), transparent 24%), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 45%, rgba(255,255,255,.04) 76%) !important; } .hero-home .hero-inner { width: min(100% - 72px, var(--max)) !important; min-height: 570px !important; display: grid !important; grid-template-columns: minmax(0, .94fr) minmax(330px, .84fr) !important; gap: 18px !important; align-items: center !important; padding: 0 !important; } .hero-home .hero-content { max-width: 500px !important; padding: 58px 0 96px !important; transform: translateX(18px) !important; position: relative !important; z-index: 4 !important; } html[dir="rtl"] .hero-home .hero-content { transform: translateX(-18px) !important; } .hero-home .hero-kicker { font-size: 11px !important; letter-spacing: .15em !important; margin-bottom: 14px !important; line-height: 1.25 !important; } .hero-home h1 { max-width: 12ch !important; font-size: clamp(40px, 4.35vw, 48px) !important; line-height: 1.04 !important; letter-spacing: -.052em !important; margin-bottom: 20px !important; } .hero-home p { max-width: 455px !important; font-size: 16px !important; line-height: 1.58 !important; } .hero-actions { gap: 12px !important; margin-top: 24px !important; } .hero-actions .btn { min-height: 46px !important; padding-inline: 22px !important; font-size: 15px !important; } .hero-visual-layer { inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 1 !important; } .hero-visual-photo { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 55% !important; height: 100% !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; background-position: center right !important; } .hero-visual-photo::before { background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.97) 18%, rgba(229,241,252,.78) 42%, rgba(205,225,244,.48) 68%, rgba(176,202,228,.26) 100%) !important; } .hero-visual-photo::after { background: radial-gradient(circle at 74% 54%, rgba(7,32,70,.08), transparent 34%), linear-gradient(90deg, rgba(219,233,248,.10), rgba(126,161,196,.16)) !important; } .hero-side-panel { display: block !important; min-height: 570px !important; align-self: stretch !important; position: relative !important; } .hero-trust-sphere-exact { display: block !important; width: clamp(294px, 30.5vw, 326px) !important; right: clamp(2px, 1.2vw, 16px) !important; top: 51% !important; transform: translateY(-50%) !important; } html[dir="rtl"] .hero-trust-sphere-exact { right: auto !important; left: clamp(2px, 1.2vw, 16px) !important; transform: translateY(-50%) !important; } .home-sphere-card { --card-w: clamp(64px, 5.5vw, 80px) !important; --card-h: clamp(88px, 7.4vw, 110px) !important; border-radius: 15px !important; } .home-sphere-card .card-label strong, .home-sphere-card .data-card-content .label { font-size: 10px !important; } .home-sphere-card .card-label small, .home-sphere-card .data-card-content .sub { display: none !important; } .info-strip { width: min(100% - 72px, var(--max)) !important; margin-top: -48px !important; border-radius: 14px !important; } } /* Keep full desktop navigation clean on wider small desktops without wrapping. */ @media (min-width: 1101px) and (max-width: 1180px) { .navbar { gap: 14px !important; } .navbar .site-logo-lockup, .site-header .site-logo-lockup, html[dir="rtl"] .navbar .site-logo-lockup, html[dir="rtl"] .site-header .site-logo-lockup { min-width: 195px !important; margin-right: 12px !important; } html[dir="rtl"] .navbar .site-logo-lockup, html[dir="rtl"] .site-header .site-logo-lockup { margin-right: 0 !important; margin-left: 12px !important; } .site-logo-lockup .site-logo-mark, .site-logo-lockup .site-logo-mark img { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; } .site-logo-lockup .site-logo-text strong { font-size: 25px !important; letter-spacing: .20em !important; } .site-logo-lockup .site-logo-text small { font-size: 9px !important; } .nav-links { gap: 15px !important; font-size: 13px !important; white-space: nowrap !important; } .nav-links a { white-space: nowrap !important; } .language-links a { padding-inline: 8px !important; font-size: 12px !important; } .site-header .btn-primary { min-height: 44px !important; padding-inline: 16px !important; font-size: 13px !important; } } /* source: rtl.css */ html[dir="rtl"] body{direction:rtl;text-align:right} html[dir="rtl"] .navbar,html[dir="rtl"] .hero-actions,html[dir="rtl"] .info-item,html[dir="rtl"] .cta .container,html[dir="rtl"] .footer-bottom{direction:rtl} html[dir="rtl"] .arrow{display:inline-block;transform:rotate(180deg)} html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select{text-align:right} html[lang="ar"] body{font-family:"Tajawal","Cairo","Noto Sans Arabic",system-ui,sans-serif} .language-switcher select{min-height:42px;border-radius:7px;border:1px solid var(--line);padding:0 10px;font-weight:800;background:white} /* Upgrade 15 RTL and multilingual polish */ html[dir="rtl"] .container { direction: rtl; } html[dir="rtl"] .hero { background-position: center left; } html[dir="rtl"] .hero-content { margin-left: auto; margin-right: 0; } html[dir="rtl"] .nav-links, html[dir="rtl"] .hero-actions, html[dir="rtl"] .tabs, html[dir="rtl"] .service-meta, html[dir="rtl"] .social { flex-direction: row-reverse; } html[dir="rtl"] .grid, html[dir="rtl"] .grid-2, html[dir="rtl"] .grid-3, html[dir="rtl"] .grid-4, html[dir="rtl"] .grid-5, html[dir="rtl"] .grid-6 { direction: rtl; } html[dir="rtl"] .card, html[dir="rtl"] .project-body, html[dir="rtl"] .footer, html[dir="rtl"] .table-card table { text-align: right; } html[dir="rtl"] table th, html[dir="rtl"] table td { text-align: right; } html[dir="rtl"] .btn .arrow, html[dir="rtl"] .arrow { transform: scaleX(-1); } html[dir="rtl"] .logo { flex-direction: row-reverse; } html[dir="rtl"] .footer-grid { text-align: right; } html[dir="rtl"] details summary { text-align: right; } html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 22px; padding-left: 0; } html[dir="rtl"] .admin-layout { direction: rtl; } html[dir="rtl"] .sidebar { border-left: 1px solid var(--line); border-right: 0; } html[lang="zh-hans"] body { font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .btn, html[lang="ar"] .nav-links a { letter-spacing: 0; } html[lang="ar"] .eyebrow { letter-spacing: .03em; } @media(max-width: 980px) { html[dir="rtl"] .navbar, html[dir="rtl"] .nav-links { flex-direction: column; align-items: stretch; } html[dir="rtl"] .hero-content { text-align: right; } .language-links { width: 100%; justify-content: center; } } /* Upgrade 26 — Arabic homepage hero fit fix */ html[dir="rtl"] .hero-home { /* Arabic should feel natural: visual/photo on the left, readable text on the right. */ background: linear-gradient(90deg, #b7cde4 0%, #dcebf8 58%, #ffffff 58%, #ffffff 100%); } html[dir="rtl"] .hero-visual-photo { right: auto; left: 0; width: 58.5%; background-position: center left; } html[dir="rtl"] .hero-visual-photo::before { /* Fade the left visual gently into the clean white Arabic text side. */ background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 10%, rgba(232,242,252,.78) 24%, rgba(210,228,245,.52) 42%, rgba(186,209,231,.34) 64%, rgba(169,196,222,.22) 100%), linear-gradient(180deg, rgba(245,250,255,.26), rgba(245,250,255,.05)); } html[dir="rtl"] .hero-visual-photo::after { background: radial-gradient(circle at 26% 54%, rgba(7,32,70,.12), transparent 32%), linear-gradient(270deg, rgba(219,233,248,.20), rgba(126,161,196,.22)); } html[dir="rtl"] .hero-inner { /* Do not rely on direction auto-placement; explicitly place both columns. */ direction: ltr; grid-template-columns: minmax(430px, 1.08fr) minmax(0, .92fr); } html[dir="rtl"] .hero-home .hero-content { grid-column: 2; grid-row: 1; text-align: right; justify-self: end; max-width: 700px; direction: rtl; } html[dir="rtl"] .hero-side-panel { grid-column: 1; grid-row: 1; } html[dir="rtl"] .hero-side-grid { inset: 0 -80px 0 -30px; mask-image: linear-gradient(270deg, transparent, #000 22%, #000 84%, transparent); } html[dir="rtl"] .hero-side-glow { right: auto; left: 2%; } html[dir="rtl"] .hero-actions { flex-direction: row-reverse; justify-content: flex-start; } html[dir="rtl"] .hero-kicker { letter-spacing: .08em; } html[dir="rtl"] .hero-home h1 { max-width: 700px; line-height: 1.12; letter-spacing: -.025em; } html[dir="rtl"] .hero-home p { max-width: 660px; margin-right: 0; margin-left: auto; } @media (max-width: 1180px) { html[dir="rtl"] .hero-inner { grid-template-columns: minmax(380px, .92fr) minmax(0, 1fr); } html[dir="rtl"] .hero-visual-photo { width: 55%; } } @media (max-width: 980px) { html[dir="rtl"] .hero-home { background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #dcebf8 58%, #b7cde4 100%); } html[dir="rtl"] .hero-visual-photo { position: relative; left: auto; right: auto; width: min(100% - 28px, 920px); height: clamp(250px, 52vw, 380px); margin: 28px auto 0; border-radius: 26px; overflow: hidden; background-position: center center; box-shadow: 0 18px 54px rgba(6, 27, 54, .10); } html[dir="rtl"] .hero-visual-photo::before { background: linear-gradient(180deg, rgba(232,243,252,.52), rgba(212,229,245,.32)), linear-gradient(90deg, rgba(255,255,255,.48), rgba(255,255,255,.08)); } html[dir="rtl"] .hero-inner { direction: rtl; grid-template-columns: 1fr; min-height: auto; padding-top: 12px; padding-bottom: 48px; } html[dir="rtl"] .hero-home .hero-content, html[dir="rtl"] .hero-side-panel { grid-column: auto; grid-row: auto; } html[dir="rtl"] .hero-home .hero-content { text-align: right; justify-self: stretch; } html[dir="rtl"] .hero-side-panel { display: none; } html[dir="rtl"] .hero-actions { flex-direction: column; } } /* Upgrade 19 — RTL parity for zoomed-out home hero */ html[dir="rtl"] .hero-home { min-height: clamp(560px, 52vw, 640px); background: linear-gradient(90deg, #c2d6ea 0%, #e7f1fa 56%, #ffffff 56%, #ffffff 100%); } html[dir="rtl"] .hero-inner { min-height: clamp(560px, 52vw, 640px); grid-template-columns: minmax(440px, 1.14fr) minmax(0, .86fr); gap: clamp(30px, 5vw, 84px); } html[dir="rtl"] .hero-visual-photo { width: 56%; background-size: auto 100%; background-position: center left; } html[dir="rtl"] .hero-home .hero-content { max-width: 600px; padding: clamp(64px, 7vw, 92px) 0 clamp(92px, 8vw, 122px); } html[dir="rtl"] .hero-home h1 { max-width: 650px; font-size: clamp(34px, 2.9vw, 50px); line-height: 1.18; letter-spacing: -.015em; } html[dir="rtl"] .hero-home p { max-width: 575px; font-size: clamp(15.5px, 1.02vw, 18px); } @media (max-width: 1180px) { html[dir="rtl"] .hero-inner { grid-template-columns: minmax(390px, 1.1fr) minmax(0, .9fr); } html[dir="rtl"] .hero-visual-photo { width: 55%; } } @media (max-width: 980px) { html[dir="rtl"] .hero-home { min-height: auto; background: linear-gradient(180deg, #ffffff 0%, #ffffff 57%, #e7f1fa 57%, #c2d6ea 100%); } html[dir="rtl"] .hero-inner { min-height: auto; grid-template-columns: 1fr; gap: 22px; padding-top: 6px; padding-bottom: 72px; } html[dir="rtl"] .hero-home .hero-content { max-width: 680px; padding: 26px 0 0; } html[dir="rtl"] .hero-home h1 { font-size: clamp(32px, 5.7vw, 46px); line-height: 1.22; } html[dir="rtl"] .hero-home p { max-width: 640px; font-size: 16px; } html[dir="rtl"] .hero-visual-photo { width: min(100% - 30px, 900px); height: clamp(245px, 48vw, 370px); background-size: cover; } } @media (max-width: 640px) { html[dir="rtl"] .hero-home h1 { font-size: clamp(30px, 9.5vw, 40px); line-height: 1.25; } html[dir="rtl"] .hero-home p { font-size: 15.5px; } } /* Upgrade 168 — keep public page heroes visually centered in RTL. */ html[dir="rtl"] .page-photo-hero .hero-content, html[dir="rtl"] .services-modern-hero .container, html[dir="rtl"] .project-detail-hero .container { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* source: career_ux.css */ /* Career UX Upgrade 8 — refined public career experience */ .career-page { --career-bg: #f5f8fc; --career-card: #ffffff; --career-line: #dce7f5; --career-text: #071f42; --career-muted: #63738b; background: var(--career-bg); } .career-page .hero.dark { min-height: 500px; padding: 0; align-items: center; } .career-hero, .career-detail-hero, .career-form-hero { isolation: isolate; background: radial-gradient(circle at 82% 24%, rgba(0, 166, 223, .28), transparent 28%), radial-gradient(circle at 38% 96%, rgba(7, 88, 216, .26), transparent 25%), linear-gradient(115deg, #041225 0%, #082a58 52%, #0758d8 100%) !important; } .career-hero::before, .career-detail-hero::before, .career-form-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.24)); opacity: .58; pointer-events: none; } .career-hero::after, .career-detail-hero::after, .career-form-hero::after { width: 680px; height: 680px; right: -210px; bottom: -270px; background: rgba(255,255,255,.075); } .career-list-page .career-hero-grid, .job-detail-page .career-detail-hero-grid { position: relative; z-index: 1; display: grid !important; align-items: center; gap: clamp(34px, 5vw, 78px); padding: clamp(58px, 7vw, 94px) 0; } @media (min-width: 901px) { .career-list-page .career-hero-grid, .job-detail-page .career-detail-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(330px, 410px) !important; } } .career-hero-copy, .career-detail-copy, .career-form-copy { max-width: 720px; padding: 0 !important; } .career-hero-copy .breadcrumb, .career-detail-copy .breadcrumb, .career-form-copy .breadcrumb { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 18px; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 900; letter-spacing: .02em; } .career-hero-eyebrow { display: inline-flex; width: fit-content; margin-bottom: 12px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); color: #bfe7ff !important; } .career-hero h1, .career-detail-hero h1, .career-form-hero h1 { max-width: 760px; margin-bottom: 20px; color: #fff; font-size: clamp(48px, 5.4vw, 78px); letter-spacing: -.065em; } .career-hero p, .career-detail-hero p, .career-form-hero p { max-width: 700px; color: #e4f0ff; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.68; } .career-page .hero-actions { gap: 13px; margin-top: 28px; } .career-page .hero-actions .btn { min-height: 52px; border-radius: 12px; padding-inline: 22px; } .career-hero-panel, .career-detail-quick-card { display: grid !important; gap: 18px; padding: clamp(22px, 2.4vw, 30px) !important; border: 1px solid rgba(255,255,255,.18); border-radius: 28px !important; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.075)); box-shadow: 0 24px 70px rgba(0, 0, 0, .24); backdrop-filter: blur(18px); } .career-panel-top { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.18); } .career-panel-top strong { grid-row: span 2; color: #fff; font-size: clamp(58px, 6vw, 86px); line-height: .82; letter-spacing: -.09em; } .career-panel-top span, .career-panel-top small, .career-detail-quick-card > span, .career-detail-quick-card dt { color: #cfe0f8; } .career-hero-panel .career-hero-stats { display: grid; grid-template-columns: 1fr; gap: 10px; } .career-hero-panel .career-hero-stat, .career-panel-flow div, .career-detail-quick-card dl div { border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.10); } .career-hero-panel .career-hero-stat { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 13px 14px; } .career-hero-panel .career-hero-stat span { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.14); } .career-hero-panel .career-hero-stat strong { color: #fff; font-size: 22px; line-height: 1; } .career-hero-panel .career-hero-stat small, .career-panel-flow span { color: #dceaff; } .career-panel-flow { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 0; } .career-panel-flow div { min-height: 54px; padding: 10px 12px; } .career-panel-flow b { background: #fff; color: var(--primary); } .career-list-page .careers-section { position: relative; padding: 0 0 76px; background: linear-gradient(180deg, #f5f8fc 0%, #fff 72%); } .career-list-page #open-roles .container { position: relative; } .career-list-page #open-roles .career-section-head { position: relative; z-index: 3; align-items: center; margin: -54px 0 22px; padding: clamp(22px, 3vw, 34px); border: 1px solid #dbe8f7; border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(6,27,54,.12); backdrop-filter: blur(14px); } .career-list-page #open-roles .career-section-head h2 { max-width: 780px; margin-bottom: 10px; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.06em; } .career-list-page #open-roles .career-section-head p { max-width: 820px; color: #43546b; font-size: 16px; line-height: 1.75; } .career-list-page .career-count-card { flex: 0 0 170px; border-color: #d8e7fb; border-radius: 22px; background: linear-gradient(180deg, #f8fbff, #edf5ff); box-shadow: none; } .career-list-page .career-count-card strong { font-size: 48px; } .career-department-rail { margin: 0 0 16px; padding: 5px 0 12px; } .career-chip { min-height: 42px; border-color: #dbe7f5; box-shadow: 0 8px 18px rgba(6,27,54,.035); } .career-chip.active, .career-chip:hover { background: var(--primary); color: #fff; box-shadow: 0 12px 26px rgba(7,88,216,.18); } .career-list-page .career-filter { display: grid !important; align-items: stretch; gap: 12px; margin-bottom: 18px; padding: 14px; border: 1px solid #d9e7f7; border-radius: 24px; background: #fff; box-shadow: 0 20px 50px rgba(6,27,54,.08); } @media (min-width: 981px) { .career-list-page .career-filter { grid-template-columns: minmax(310px, 1.55fr) minmax(156px, .72fr) minmax(150px, .68fr) minmax(146px, .62fr) auto !important; } .career-list-page .career-search-field { grid-column: auto !important; } } @media (min-width: 721px) and (max-width: 980px) { .career-list-page .career-filter { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .career-list-page .career-search-field, .career-list-page .career-filter .btn { grid-column: 1 / -1 !important; } } .career-search-field input, .career-list-page .career-filter select, .career-list-page .career-filter .btn { min-height: 54px; border-radius: 15px; } .career-search-field input, .career-list-page .career-filter select { border-color: #dfeaf7; background: #f8fbff; font-size: 14px; font-weight: 750; } .career-search-field input:focus, .career-list-page .career-filter select:focus { background: #fff; } .career-list-page .career-filter .btn { padding-inline: 22px; box-shadow: 0 12px 24px rgba(7,88,216,.20); } .career-results-bar { min-height: 44px; margin-bottom: 18px; padding: 0 4px; color: #596b83; } .career-results-bar a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; background: #eaf2ff; } .career-list-page .career-list-grid { grid-template-columns: 1fr !important; gap: 18px; } .career-list-page .career-job-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 250px); gap: 8px 26px; padding: 26px; border: 1px solid #dbe8f7; border-radius: 24px; background: radial-gradient(circle at 0% 0%, rgba(7,88,216,.055), transparent 28%), #fff; box-shadow: 0 16px 46px rgba(6,27,54,.07); } .career-list-page .career-job-card::before { left: 0; right: auto; top: 24px; bottom: 24px; width: 4px; height: auto; opacity: 1; background: #dce8f8; } .career-list-page .career-job-card.featured::before, .career-list-page .career-job-card:hover::before { background: linear-gradient(180deg, var(--primary), var(--accent)); } .career-list-page .career-job-top, .career-list-page .career-job-code, .career-list-page .career-job-card h3, .career-list-page .career-job-card p, .career-list-page .career-meta-grid { grid-column: 1; } .career-list-page .career-card-footer { grid-column: 2; grid-row: 1 / span 5; align-self: stretch; display: grid; align-content: center; gap: 18px; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid #edf2f8; } .career-list-page .career-job-top { justify-content: flex-start; flex-wrap: wrap; } .career-list-page .career-card-pills { justify-content: flex-start; } .career-list-page .career-job-code { width: fit-content; margin-top: 2px; padding: 5px 9px; border-radius: 999px; background: #f3f7fc; color: #53657d; font-size: 12px; font-weight: 950; } .career-list-page .career-job-card h3 { margin: 4px 0 6px; font-size: clamp(25px, 2.6vw, 34px); } .career-list-page .career-job-card p { max-width: 760px; color: #445771; font-size: 15px; line-height: 1.72; -webkit-line-clamp: 2; } .career-list-page .career-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; gap: 10px; margin-top: 12px; } .career-list-page .career-meta-grid span { min-height: 42px; border: 1px solid #e4edf8; background: #f8fbff; } .career-list-page .career-deadline { display: grid; gap: 4px; padding: 14px; border-radius: 17px; background: #f8fbff; color: #4f6178; text-align: center; } .career-list-page .career-card-actions { display: grid; grid-template-columns: 1fr; gap: 10px; } .career-list-page .career-card-actions .btn { width: 100%; min-height: 46px; border-radius: 13px; } .career-benefits-wrap, .career-process-wrap, .career-related-jobs { background: #fff; } .career-benefit-grid, .career-process-steps { gap: 18px; } .career-benefit-card, .career-step, .job-content-block, .job-summary-card, .application-help, .career-application-form, .career-success-card { border: 1px solid #dbe8f7; border-radius: 24px !important; box-shadow: 0 16px 44px rgba(6,27,54,.065); } .career-step b, .career-benefit-icon { box-shadow: 0 10px 22px rgba(7,88,216,.17); } .job-detail-page .job-detail-layout { grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); gap: 26px; } .job-detail-page .job-detail-content { order: 1; } .job-detail-page .job-summary-card { order: 2; top: 104px; } .job-section-nav { border-radius: 20px; } .job-content-block { padding: clamp(24px, 3vw, 34px); } .job-content-block h2 { letter-spacing: -.055em; } .career-apply-strip, .career-cta-card { border-radius: 28px; box-shadow: 0 22px 54px rgba(7,88,216,.18); } .application-page .career-form-hero .career-form-copy { padding: clamp(62px, 8vw, 96px) 0 !important; } .application-progress { gap: 12px; } .application-progress div { border-radius: 20px; background: #fff; } .application-layout { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); } .career-application-form { padding: clamp(24px, 3vw, 38px); } .career-form-section-title span { border-radius: 16px; } .form-grid-2 { gap: 16px 18px; } .form-field label, .upload-box strong { letter-spacing: .01em; } .career-page input, .career-page select, .career-page textarea { border-color: #dce8f6; border-radius: 14px; background: #f8fbff; } .career-page input:focus, .career-page select:focus, .career-page textarea:focus { background: #fff; } .upload-box { border-color: #cdddf1; border-radius: 18px; } .upload-box.required { border-color: rgba(7,88,216,.34); } @media (max-width: 1100px) { .career-list-page .career-job-card { grid-template-columns: minmax(0, 1fr) 220px; } .career-list-page .career-meta-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .career-list-page .career-hero-grid, .job-detail-page .career-detail-hero-grid { grid-template-columns: 1fr !important; padding: 48px 0; } .career-hero-panel, .career-detail-quick-card { max-width: 100%; } .career-list-page #open-roles .career-section-head { display: grid; margin-top: -32px; } .job-detail-page .job-detail-layout, .application-layout { grid-template-columns: 1fr; } .job-detail-page .job-summary-card, .job-detail-page .job-detail-content { order: initial; } } @media (max-width: 720px) { .career-page .hero.dark { min-height: auto; } .career-hero h1, .career-detail-hero h1, .career-form-hero h1 { font-size: clamp(38px, 11vw, 56px); } .career-list-page #open-roles .career-section-head { padding: 22px; border-radius: 22px; } .career-list-page .career-count-card { width: 100%; } .career-list-page .career-filter { grid-template-columns: 1fr !important; } .career-list-page .career-search-field, .career-list-page .career-filter .btn { grid-column: auto !important; } .career-list-page .career-job-card { grid-template-columns: 1fr; padding: 22px; } .career-list-page .career-card-footer { grid-column: auto; grid-row: auto; padding: 18px 0 0; border-left: 0; border-top: 1px solid #edf2f8; } .career-list-page .career-job-card::before { left: 22px; right: 22px; top: 0; bottom: auto; width: auto; height: 4px; } .career-list-page .career-meta-grid, .documents-v2, .form-grid-2 { grid-template-columns: 1fr; } .career-cta-card, .career-apply-strip { display: grid; } .career-cta-card .btn, .career-apply-strip .btn, .form-actions .btn { width: 100%; } .form-actions { display: grid; } } html[dir="rtl"] .career-list-page .career-job-card::before { left: auto; right: 0; } html[dir="rtl"] .career-list-page .career-card-footer { padding: 0 24px 0 0; border-left: 0; border-right: 1px solid #edf2f8; } @media (max-width: 720px) { html[dir="rtl"] .career-list-page .career-job-card::before { left: 22px; right: 22px; } html[dir="rtl"] .career-list-page .career-card-footer { padding: 18px 0 0; border-right: 0; border-top: 1px solid #edf2f8; } } /* Career UX Upgrade 9 — hero viewport fit and cleaner career pill */ .career-list-page .career-hero-copy .breadcrumb { display: none !important; } .career-list-page .career-hero-eyebrow { margin-bottom: 18px; } @media (min-width: 901px) { .career-list-page .career-page .hero.dark, .career-list-page .hero.dark.career-hero { min-height: calc(100svh - 94px) !important; overflow: hidden; } .career-list-page .career-hero-grid { min-height: calc(100svh - 94px); box-sizing: border-box; padding: clamp(34px, 5.2vh, 54px) 0 !important; align-items: center !important; gap: clamp(34px, 4vw, 62px) !important; } .career-list-page .career-hero-copy { align-self: center; } .career-list-page .career-hero h1 { max-width: 720px; margin-bottom: 16px; font-size: clamp(48px, 5vw, 68px); line-height: .98; } .career-list-page .career-hero p { max-width: 650px; font-size: clamp(16px, 1.22vw, 19px); line-height: 1.62; } .career-list-page .hero-actions { margin-top: 24px; } .career-list-page .career-hero-panel { align-self: center; width: min(100%, 390px); max-height: calc(100svh - 158px); gap: 12px; padding: 20px !important; border-radius: 24px !important; } .career-list-page .career-panel-top { padding-bottom: 12px; } .career-list-page .career-panel-top strong { font-size: clamp(48px, 5.2vw, 64px); } .career-list-page .career-panel-top span, .career-list-page .career-panel-top small { font-size: 12px; letter-spacing: .04em; } .career-list-page .career-hero-panel .career-hero-stats { gap: 8px; } .career-list-page .career-hero-panel .career-hero-stat { min-height: 58px; padding: 10px 12px; border-radius: 16px; } .career-list-page .career-hero-panel .career-hero-stat span { width: 34px; height: 34px; border-radius: 12px; } .career-list-page .career-hero-panel .career-hero-stat strong { font-size: 19px; } .career-list-page .career-hero-panel .career-hero-stat small { font-size: 12px; } .career-list-page .career-panel-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .career-list-page .career-panel-flow div { min-height: 76px; align-content: center; justify-items: center; padding: 10px 8px; text-align: center; border-radius: 16px; } .career-list-page .career-panel-flow b { width: 30px; height: 30px; margin-bottom: 7px; font-size: 11px; } .career-list-page .career-panel-flow span { font-size: 12px; line-height: 1.25; } } @media (min-width: 901px) and (max-height: 760px) { .career-list-page .career-hero-grid { padding: 28px 0 !important; } .career-list-page .career-hero h1 { font-size: clamp(44px, 4.65vw, 62px); margin-bottom: 14px; } .career-list-page .career-hero p { font-size: 16px; line-height: 1.55; } .career-list-page .career-page .hero-actions .btn, .career-list-page .hero-actions .btn { min-height: 48px; } .career-list-page .career-hero-panel { padding: 18px !important; gap: 10px; } .career-list-page .career-hero-panel .career-hero-stat { min-height: 52px; padding: 8px 10px; } .career-list-page .career-panel-flow div { min-height: 66px; } } /* Career UX Upgrade 10 — spacing and card polish */ .career-list-page #open-roles { padding-top: 34px; } .career-list-page #open-roles .career-section-head { margin-top: 0 !important; } @media (min-width: 901px) { .career-list-page .career-hero-grid { padding-bottom: clamp(38px, 6vh, 58px) !important; } .career-list-page .career-hero-panel { width: min(100%, 404px); } .career-list-page .career-panel-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .career-list-page .career-panel-flow div { min-height: 84px; padding: 10px 10px 12px; justify-items: center; align-content: start; } .career-list-page .career-panel-flow span { display: block; max-width: 74px; font-size: 11px; line-height: 1.22; text-wrap: balance; word-break: normal; overflow-wrap: anywhere; hyphens: auto; } } .career-list-page .career-job-card::before { background: #dce8f8; } .career-list-page .career-job-card.featured::before { background: #dce8f8; } .career-list-page .career-job-card:hover::before, .career-list-page .career-job-card:focus-within::before { background: linear-gradient(180deg, var(--primary), var(--accent)); } .career-list-page .career-job-card { overflow: hidden; } @media (max-width: 900px) { .career-list-page #open-roles { padding-top: 22px; } .career-list-page #open-roles .career-section-head { margin-top: 0 !important; } } /* Career UX Upgrade 11 — message spacing and admin text cleanup support */ .site-header + .container.messages { margin-top: 22px; margin-bottom: 22px; position: relative; z-index: 3; } .container.messages .message { border: 1px solid #cdebd7; border-radius: 12px; box-shadow: 0 12px 28px rgba(6, 27, 54, .06); } .job-rich-text p { margin: 0 0 14px; } .job-rich-text p:last-child { margin-bottom: 0; } /* Career UX Upgrade 12 — email verification, duplicate alert and draft save UI */ .career-email-field, .career-email-code-field { position: relative; } .career-email-verify-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; } .career-email-verify-row .btn { min-height: 48px; border-radius: 14px; padding-inline: 16px; white-space: nowrap; } .career-email-status { min-height: 20px; margin-top: 8px; font-size: 13px; font-weight: 800; line-height: 1.45; } .career-email-status.success { color: #047857; } .career-email-status.warning { color: #b45309; } .career-email-status.error { color: #b91c1c; } .career-email-code-field small, .career-draft-note { display: block; margin-top: 8px; color: #60728a; font-size: 13px; line-height: 1.55; } .career-draft-note { margin: 14px 0 0; padding: 12px 14px; border: 1px solid #dbe8f7; border-radius: 16px; background: #f8fbff; } .career-application-form button[disabled] { cursor: not-allowed; opacity: .62; } .duplicate-alert { border-color: #fecaca !important; background: #fff5f5 !important; color: #991b1b !important; } @media (max-width: 560px) { .career-email-verify-row { grid-template-columns: 1fr; } .career-email-verify-row .btn { width: 100%; } } /* Career UX Upgrade 13 — separate email verification, cleaner apply form */ .career-verification-card { grid-column: 1 / -1; display: grid; gap: 14px; padding: 18px; border: 1px solid #dbe8f7; border-radius: 22px; background: linear-gradient(180deg, #f8fbff, #eef6ff); } .career-verification-card.is-verified { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4, #ecfdf5); } .career-verification-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .career-verification-head strong { display: block; color: #071f42; font-size: 17px; font-weight: 950; } .career-verification-head span { display: block; margin-top: 3px; color: #5b6d84; font-size: 14px; line-height: 1.55; } .career-verification-head b { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 12px; border-radius: 999px; background: #fff7ed; color: #b45309; font-size: 12px; font-weight: 950; letter-spacing: .02em; } .career-verification-card.is-verified .career-verification-head b { background: #dcfce7; color: #047857; } .career-verification-card .career-email-verify-row { grid-template-columns: minmax(180px, 1fr) auto auto; } .career-verification-card .career-email-status { min-height: 0; margin-top: 0; } .career-verification-card small { color: #5f7189; font-weight: 700; } .career-application-form button[type="submit"][disabled] { box-shadow: none; } .career-admin-actions .career-inline-action { margin: 0; } .career-admin-actions .career-inline-action button { white-space: nowrap; } .career-one-click-panel { border-color: #bfdbfe !important; background: linear-gradient(180deg, #ffffff, #f8fbff) !important; } .career-one-click-panel h3 { color: #0758d8; } .career-inline-action button[disabled], .career-one-click-panel button[disabled] { cursor: not-allowed; opacity: .58; } @media (max-width: 720px) { .career-verification-head { display: grid; } .career-verification-card .career-email-verify-row { grid-template-columns: 1fr; } } /* Career UX Upgrade 14 — modal email verification */ .career-verification-inline { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; align-items: center; padding: 18px 20px; border: 1px solid #dbe8f7; border-radius: 22px; background: linear-gradient(180deg, #f8fbff, #eef6ff); } .career-verification-inline.is-verified { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4, #ecfdf5); } .career-verification-inline-copy strong { display: block; color: #071f42; font-size: 17px; font-weight: 950; } .career-verification-inline-copy p { margin: 4px 0 0; color: #5b6d84; font-size: 14px; line-height: 1.6; } .career-verification-inline-actions { display: flex; align-items: center; gap: 12px; } .career-verification-inline b { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 12px; border-radius: 999px; background: #fff7ed; color: #b45309; font-size: 12px; font-weight: 950; letter-spacing: .02em; } .career-verification-inline.is-verified b { background: #dcfce7; color: #047857; } .career-verification-inline .career-email-status { grid-column: 1 / -1; margin-top: -2px; } .career-modal-open { overflow: hidden; } .career-modal-backdrop[hidden] { display: none !important; } .career-modal-backdrop { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 24px; background: rgba(4, 18, 37, .58); backdrop-filter: blur(7px); } .career-modal-dialog { position: relative; width: min(100%, 560px); padding: 28px; border: 1px solid #dbe8f7; border-radius: 28px; background: #fff; box-shadow: 0 34px 80px rgba(4, 18, 37, .22); } .career-modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: #edf5ff; color: #0b2a52; font-size: 24px; line-height: 1; } .career-modal-head h3 { margin: 6px 0 10px; color: #071f42; font-size: clamp(28px, 4vw, 36px); letter-spacing: -.04em; } .career-modal-head p { margin: 0; color: #5b6d84; font-size: 15px; line-height: 1.65; } .career-modal-email-box { margin: 18px 0 16px; padding: 14px 16px; border: 1px solid #dbe8f7; border-radius: 18px; background: #f8fbff; } .career-modal-email-box small { display: block; color: #6a7b92; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .career-modal-email-box strong { display: block; margin-top: 6px; color: #071f42; font-size: 18px; font-weight: 900; word-break: break-word; } .career-verification-modal .modal-verify-row { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 12px; } .career-modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; } .career-modal-actions .btn, .career-verification-inline .btn, .career-verification-modal .btn { min-height: 48px; border-radius: 14px; } @media (max-width: 720px) { .career-verification-inline { grid-template-columns: 1fr; } .career-verification-inline-actions { justify-content: space-between; flex-wrap: wrap; } .career-modal-backdrop { padding: 14px; } .career-modal-dialog { width: 100%; padding: 22px; border-radius: 22px; } .career-verification-modal .modal-verify-row, .career-modal-actions { grid-template-columns: 1fr; display: grid; } .career-modal-actions .btn, .career-verification-modal .btn, .career-verification-inline .btn { width: 100%; } } /* Career UX Upgrade 15 — verified pill beside email only */ .career-email-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .career-email-label-row label { margin-bottom: 0 !important; } .career-email-verified-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 10px; border-radius: 999px; background: #dcfce7; color: #047857; font-size: 12px; font-weight: 950; letter-spacing: .02em; } .career-email-verified-pill::before { content: "✓"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 10px; line-height: 1; } .career-email-verified-pill[hidden] { display: none !important; } .career-verification-inline.is-verified { display: none !important; } .career-verification-inline .career-email-status:empty { display: none; } /* Career UX Upgrade 16 — already-applied state */ .btn.btn-applied, .btn-applied { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 1px solid #bbf7d0; border-radius: 14px; background: #ecfdf5; color: #047857; font-weight: 950; cursor: default; box-shadow: none; } .btn-applied::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-end: 8px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 12px; line-height: 1; } .btn-applied.full { width: 100%; } .career-already-applied-note { width: fit-content; max-width: 560px; margin-top: 16px; padding: 13px 16px; border: 1px solid rgba(187, 247, 208, .55); border-radius: 16px; background: rgba(236, 253, 245, .14); color: #dffbea; } .career-already-applied-note strong { display: block; color: #fff; font-size: 13px; font-weight: 950; letter-spacing: .02em; } .career-already-applied-note span { display: block; margin-top: 3px; color: #dffbea; font-size: 13px; line-height: 1.55; } .career-already-applied-note.is-hidden { display: none !important; } .job-summary-card .btn-applied { margin-top: 10px; } /* source: rtl_layout_stabilization.css */ /* Upgrade 140 — Arabic RTL layout stabilization This file is intentionally loaded last. It fixes visual RTL issues without changing CMS data: wide Arabic text blocks, safe hero widths, mirrored strips, readable CTA cards, and service/project/trust/career layout stability. */ html[dir="rtl"], html[lang="ar"] { text-rendering: optimizeLegibility; } html[dir="rtl"] body, html[lang="ar"] body { direction: rtl; text-align: right; overflow-x: hidden; font-family: "Tajawal", "Cairo", "Noto Kufi Arabic", "Noto Sans Arabic", system-ui, sans-serif; } html[dir="rtl"] .container, html[lang="ar"] .container { direction: rtl; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] small, html[dir="rtl"] .eyebrow, html[dir="rtl"] .card, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] p, html[lang="ar"] li, html[lang="ar"] small, html[lang="ar"] .eyebrow, html[lang="ar"] .card { letter-spacing: 0 !important; word-spacing: normal; } html[dir="rtl"] p, html[dir="rtl"] li, html[lang="ar"] p, html[lang="ar"] li { line-height: 1.85; } /* Generic Arabic hero stabilization */ html[dir="rtl"] .hero:not(.hero-home), html[lang="ar"] .hero:not(.hero-home) { min-height: clamp(430px, 46vw, 620px) !important; overflow: hidden !important; isolation: isolate; } html[dir="rtl"] .hero:not(.hero-home)::before, html[lang="ar"] .hero:not(.hero-home)::before { pointer-events: none; } html[dir="rtl"] .hero:not(.hero-home) .hero-content, html[lang="ar"] .hero:not(.hero-home) .hero-content, html[dir="rtl"] .career-hero-copy, html[dir="rtl"] .career-detail-copy, html[dir="rtl"] .career-form-hero .hero-content, html[lang="ar"] .career-hero-copy, html[lang="ar"] .career-detail-copy, html[lang="ar"] .career-form-hero .hero-content { width: min(100%, 860px) !important; max-width: 860px !important; margin-right: 0 !important; margin-left: auto !important; padding-inline: 0 !important; text-align: right !important; direction: rtl !important; position: relative; z-index: 2; } html[dir="rtl"] .hero:not(.hero-home) h1, html[lang="ar"] .hero:not(.hero-home) h1 { max-width: 12.8ch !important; font-size: clamp(3rem, 6.2vw, 6.6rem) !important; line-height: 1.16 !important; letter-spacing: 0 !important; margin-inline: 0 auto !important; overflow-wrap: normal; text-wrap: balance; } html[dir="rtl"] .hero:not(.hero-home) p, html[lang="ar"] .hero:not(.hero-home) p { max-width: 780px !important; font-size: clamp(1rem, 1.2vw, 1.22rem) !important; line-height: 1.9 !important; margin-right: 0 !important; margin-left: auto !important; } html[dir="rtl"] .hero.dark:not(.hero-home), html[lang="ar"] .hero.dark:not(.hero-home) { background-position: center left !important; } /* Page list heroes with pale backgrounds need the copy safely inside the viewport. */ html[dir="rtl"] .cms-page-projects-list .hero, html[dir="rtl"] .cms-page-services-list .hero, html[lang="ar"] .cms-page-projects-list .hero, html[lang="ar"] .cms-page-services-list .hero { background-position: center left !important; } html[dir="rtl"] .cms-page-projects-list .hero .hero-content, html[dir="rtl"] .cms-page-services-list .hero .hero-content, html[lang="ar"] .cms-page-projects-list .hero .hero-content, html[lang="ar"] .cms-page-services-list .hero .hero-content { max-width: 760px !important; padding-top: clamp(42px, 5vw, 76px) !important; padding-bottom: clamp(88px, 8vw, 140px) !important; } html[dir="rtl"] .cms-page-projects-list .hero h1, html[dir="rtl"] .cms-page-services-list .hero h1, html[lang="ar"] .cms-page-projects-list .hero h1, html[lang="ar"] .cms-page-services-list .hero h1 { max-width: 11.6ch !important; font-size: clamp(3.1rem, 6.1vw, 6.4rem) !important; } /* Service detail hero: stop giant Arabic title clipping and mirror controls. */ html[dir="rtl"] .service-detail-hero, html[lang="ar"] .service-detail-hero { min-height: clamp(500px, 54vw, 720px) !important; background-position: center left !important; } html[dir="rtl"] .service-detail-hero .hero-content, html[lang="ar"] .service-detail-hero .hero-content { max-width: 760px !important; } html[dir="rtl"] .service-detail-hero h1, html[lang="ar"] .service-detail-hero h1 { max-width: 10.8ch !important; font-size: clamp(3.4rem, 6vw, 6.4rem) !important; line-height: 1.17 !important; } html[dir="rtl"] .breadcrumb, html[lang="ar"] .breadcrumb { direction: rtl !important; text-align: right !important; unicode-bidi: isolate; } html[dir="rtl"] .hero-actions, html[lang="ar"] .hero-actions, html[dir="rtl"] .career-card-actions, html[lang="ar"] .career-card-actions { direction: rtl !important; flex-direction: row !important; justify-content: flex-start !important; } html[dir="rtl"] .btn .arrow, html[dir="rtl"] .arrow, html[lang="ar"] .btn .arrow, html[lang="ar"] .arrow { display: inline-block; transform: scaleX(-1) !important; } /* Info/stat strips should read naturally in Arabic and not squeeze labels. */ html[dir="rtl"] .info-strip, html[lang="ar"] .info-strip { direction: rtl !important; grid-auto-flow: row !important; align-items: stretch !important; } html[dir="rtl"] .info-item, html[lang="ar"] .info-item { direction: rtl !important; text-align: right !important; justify-content: flex-start !important; min-width: 0 !important; gap: 14px !important; } html[dir="rtl"] .info-item > div, html[lang="ar"] .info-item > div { min-width: 0 !important; flex: 1 1 auto !important; } html[dir="rtl"] .info-item small, html[dir="rtl"] .info-item strong, html[lang="ar"] .info-item small, html[lang="ar"] .info-item strong { display: block !important; text-align: right !important; direction: rtl !important; line-height: 1.45 !important; white-space: normal !important; } html[dir="rtl"] .info-icon, html[lang="ar"] .info-icon { flex: 0 0 auto !important; } /* Leadership / committee message: prevent the narrow vertical text column. */ html[dir="rtl"] .home-leadership-parallax, html[lang="ar"] .home-leadership-parallax { min-height: auto !important; margin-block: clamp(44px, 6vw, 82px) !important; } html[dir="rtl"] .home-leadership-parallax__inner, html[lang="ar"] .home-leadership-parallax__inner { width: min(1240px, calc(100% - 48px)) !important; padding-block: clamp(54px, 6vw, 84px) !important; } html[dir="rtl"] .home-leadership-quote-card, html[lang="ar"] .home-leadership-quote-card { direction: rtl !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 72px !important; width: min(1120px, 100%) !important; max-width: 1120px !important; min-height: unset !important; padding: clamp(30px, 3vw, 48px) clamp(32px, 4vw, 64px) !important; align-items: start !important; } html[dir="rtl"] .home-leadership-quote-card__body, html[lang="ar"] .home-leadership-quote-card__body { grid-column: 1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; text-align: right !important; } html[dir="rtl"] .home-leadership-quote-card__accent, html[lang="ar"] .home-leadership-quote-card__accent { grid-column: 2 !important; grid-row: 1 !important; justify-content: center !important; align-items: start !important; } html[dir="rtl"] .home-leadership-quote-card h2, html[lang="ar"] .home-leadership-quote-card h2 { width: 100% !important; max-width: 760px !important; font-size: clamp(2rem, 3vw, 3.4rem) !important; line-height: 1.22 !important; text-align: right !important; } html[dir="rtl"] .home-leadership-quote-card__message, html[lang="ar"] .home-leadership-quote-card__message { width: 100% !important; max-width: 900px !important; min-width: 0 !important; text-align: right !important; column-count: 1 !important; } html[dir="rtl"] .home-leadership-quote-card__message p, html[lang="ar"] .home-leadership-quote-card__message p { max-width: 900px !important; width: auto !important; font-size: clamp(.98rem, 1.05vw, 1.14rem) !important; line-height: 2.05 !important; text-align: right !important; margin: 0 0 14px !important; } html[dir="rtl"] .about-leadership-card, html[lang="ar"] .about-leadership-card { direction: rtl !important; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) !important; text-align: right !important; } html[dir="rtl"] .about-leadership-card__content, html[lang="ar"] .about-leadership-card__content { min-width: 0 !important; width: 100% !important; } html[dir="rtl"] .about-leadership-card__content h2, html[lang="ar"] .about-leadership-card__content h2 { max-width: 760px !important; font-size: clamp(2rem, 3vw, 3.4rem) !important; line-height: 1.22 !important; } html[dir="rtl"] .about-leadership-card__message, html[lang="ar"] .about-leadership-card__message { max-width: 900px !important; } html[dir="rtl"] .about-leadership-card__message p, html[lang="ar"] .about-leadership-card__message p { line-height: 2 !important; } /* Arabic cards, grids, process steps and FAQs. */ html[dir="rtl"] .grid, html[dir="rtl"] .grid-2, html[dir="rtl"] .grid-3, html[dir="rtl"] .grid-4, html[dir="rtl"] .grid-5, html[dir="rtl"] .grid-6, html[lang="ar"] .grid, html[lang="ar"] .grid-2, html[lang="ar"] .grid-3, html[lang="ar"] .grid-4, html[lang="ar"] .grid-5, html[lang="ar"] .grid-6 { direction: rtl !important; } html[dir="rtl"] .card, html[dir="rtl"] .icon-card, html[dir="rtl"] .project-card, html[dir="rtl"] .trust-standard-card, html[dir="rtl"] .career-job-card, html[dir="rtl"] .job-content-block, html[lang="ar"] .card, html[lang="ar"] .icon-card, html[lang="ar"] .project-card, html[lang="ar"] .trust-standard-card, html[lang="ar"] .career-job-card, html[lang="ar"] .job-content-block { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .icon-card, html[lang="ar"] .icon-card { align-items: center !important; text-align: center !important; } html[dir="rtl"] .icon-card h3, html[dir="rtl"] .icon-card p, html[lang="ar"] .icon-card h3, html[lang="ar"] .icon-card p { text-align: center !important; } html[dir="rtl"] details.card summary, html[lang="ar"] details.card summary { direction: rtl !important; text-align: right !important; unicode-bidi: plaintext !important; display: block !important; } html[dir="rtl"] details.card, html[lang="ar"] details.card { overflow-wrap: anywhere; } /* Dark CTA and dark cards: force readable contrast. */ html[dir="rtl"] .cta, html[dir="rtl"] .cta *, html[dir="rtl"] .card[style*="062452"], html[dir="rtl"] .card[style*="062452"] *, html[dir="rtl"] .card[style*="074cb9"], html[dir="rtl"] .card[style*="074cb9"] *, html[dir="rtl"] .about-strengths-panel, html[dir="rtl"] .about-strengths-panel *, html[lang="ar"] .cta, html[lang="ar"] .cta *, html[lang="ar"] .card[style*="062452"], html[lang="ar"] .card[style*="062452"] *, html[lang="ar"] .card[style*="074cb9"], html[lang="ar"] .card[style*="074cb9"] *, html[lang="ar"] .about-strengths-panel, html[lang="ar"] .about-strengths-panel * { color: #fff !important; } html[dir="rtl"] .cta .btn, html[dir="rtl"] .card[style*="062452"] .btn, html[dir="rtl"] .card[style*="074cb9"] .btn, html[lang="ar"] .cta .btn, html[lang="ar"] .card[style*="062452"] .btn, html[lang="ar"] .card[style*="074cb9"] .btn { color: #0758d8 !important; } /* Careers: labels and job detail lists should not remain LTR-looking. */ html[dir="rtl"] .career-detail-layout, html[dir="rtl"] .career-detail-main, html[dir="rtl"] .job-summary-card, html[dir="rtl"] .career-detail-sidebar, html[lang="ar"] .career-detail-layout, html[lang="ar"] .career-detail-main, html[lang="ar"] .job-summary-card, html[lang="ar"] .career-detail-sidebar { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .job-content-block li, html[lang="ar"] .job-content-block li { text-align: right !important; direction: rtl !important; line-height: 1.9 !important; } html[dir="rtl"] .job-content-block ul, html[lang="ar"] .job-content-block ul { padding-right: 0 !important; list-style-position: inside !important; } html[dir="rtl"] .job-summary-card strong, html[dir="rtl"] .job-summary-card span, html[lang="ar"] .job-summary-card strong, html[lang="ar"] .job-summary-card span { text-align: right !important; direction: rtl !important; } /* Keep large desktop header stable in Arabic. */ html[dir="rtl"] .navbar, html[lang="ar"] .navbar { direction: rtl !important; } html[dir="rtl"] .nav-links, html[lang="ar"] .nav-links { direction: rtl !important; } html[dir="rtl"] .language-links, html[lang="ar"] .language-links { direction: ltr !important; } @media (max-width: 1180px) { html[dir="rtl"] .hero:not(.hero-home) h1, html[lang="ar"] .hero:not(.hero-home) h1 { font-size: clamp(2.7rem, 7vw, 5.2rem) !important; max-width: 12ch !important; } } @media (max-width: 980px) { html[dir="rtl"] .hero:not(.hero-home), html[lang="ar"] .hero:not(.hero-home) { min-height: auto !important; } html[dir="rtl"] .hero:not(.hero-home) .hero-content, html[lang="ar"] .hero:not(.hero-home) .hero-content { width: min(100%, 720px) !important; padding-block: clamp(46px, 8vw, 76px) !important; } html[dir="rtl"] .hero:not(.hero-home) h1, html[lang="ar"] .hero:not(.hero-home) h1 { max-width: 13ch !important; font-size: clamp(2.35rem, 8vw, 4.4rem) !important; } html[dir="rtl"] .about-leadership-card, html[lang="ar"] .about-leadership-card, html[dir="rtl"] .home-leadership-quote-card, html[lang="ar"] .home-leadership-quote-card { grid-template-columns: 1fr !important; } html[dir="rtl"] .home-leadership-quote-card__accent, html[lang="ar"] .home-leadership-quote-card__accent { grid-column: 1 !important; } html[dir="rtl"] .about-leadership-card__visual, html[lang="ar"] .about-leadership-card__visual { min-height: 180px !important; } html[dir="rtl"] .hero-actions, html[lang="ar"] .hero-actions { flex-direction: column !important; align-items: stretch !important; } html[dir="rtl"] .hero-actions .btn, html[lang="ar"] .hero-actions .btn { justify-content: center !important; } } @media (max-width: 640px) { html[dir="rtl"] .hero:not(.hero-home) h1, html[lang="ar"] .hero:not(.hero-home) h1 { max-width: 100% !important; font-size: clamp(2rem, 11vw, 3.35rem) !important; line-height: 1.22 !important; } html[dir="rtl"] .home-leadership-parallax__inner, html[lang="ar"] .home-leadership-parallax__inner { width: min(100%, calc(100% - 28px)) !important; } html[dir="rtl"] .home-leadership-quote-card, html[lang="ar"] .home-leadership-quote-card { padding: 24px 20px !important; } } /* source: rtl_hero_restore_141.css */ /* Upgrade 141 — Arabic RTL hero/layout restoration Loaded after the previous RTL stabilization layer. It keeps the original home hero composition, then makes inner-page Arabic heroes readable instead of oversized or clipped. */ html[dir="rtl"] *, html[lang="ar"] * { box-sizing: border-box; } /* 1) Home hero must keep the approved visual composition: copy on the left, sphere/visual on the right. Only the text itself is RTL. */ html[dir="rtl"] .hero-home, html[lang="ar"] .hero-home { direction: ltr !important; text-align: initial !important; overflow: hidden !important; } html[dir="rtl"] .hero-home .hero-inner, html[lang="ar"] .hero-home .hero-inner { direction: ltr !important; } html[dir="rtl"] .hero-home .hero-content, html[lang="ar"] .hero-home .hero-content { direction: rtl !important; text-align: right !important; margin-inline: 0 !important; transform: none !important; } html[dir="rtl"] .hero-home .hero-kicker, html[dir="rtl"] .hero-home h1, html[dir="rtl"] .hero-home p, html[lang="ar"] .hero-home .hero-kicker, html[lang="ar"] .hero-home h1, html[lang="ar"] .hero-home p { text-align: right !important; direction: rtl !important; } html[dir="rtl"] .hero-home h1, html[lang="ar"] .hero-home h1 { font-size: clamp(42px, 4.15vw, 70px) !important; line-height: 1.12 !important; max-width: 640px !important; letter-spacing: 0 !important; text-wrap: balance; } html[dir="rtl"] .hero-home p, html[lang="ar"] .hero-home p { max-width: 610px !important; line-height: 1.9 !important; } html[dir="rtl"] .hero-home .hero-actions, html[lang="ar"] .hero-home .hero-actions { direction: rtl !important; justify-content: flex-start !important; flex-direction: row !important; } html[dir="rtl"] .hero-home .hero-side-panel, html[lang="ar"] .hero-home .hero-side-panel, html[dir="rtl"] .hero-home .hero-trust-sphere-exact, html[lang="ar"] .hero-home .hero-trust-sphere-exact { direction: ltr !important; } /* 2) Generic inner-page heroes: use safe centered container + Arabic-sized title. */ html[dir="rtl"] .hero:not(.hero-home), html[lang="ar"] .hero:not(.hero-home) { min-height: clamp(390px, 42vw, 560px) !important; padding-block: clamp(54px, 7vw, 96px) !important; overflow: hidden !important; } html[dir="rtl"] .hero:not(.hero-home) .hero-content, html[lang="ar"] .hero:not(.hero-home) .hero-content { width: min(1120px, calc(100% - 64px)) !important; max-width: 1120px !important; margin: 0 auto !important; padding: 0 !important; direction: rtl !important; text-align: right !important; } html[dir="rtl"] .hero:not(.hero-home) h1, html[lang="ar"] .hero:not(.hero-home) h1 { max-width: min(900px, 100%) !important; width: auto !important; margin: 0 0 22px auto !important; font-size: clamp(2.65rem, 4.35vw, 5rem) !important; line-height: 1.18 !important; letter-spacing: 0 !important; text-align: right !important; overflow-wrap: normal !important; word-break: normal !important; text-wrap: balance; } html[dir="rtl"] .hero:not(.hero-home) p, html[lang="ar"] .hero:not(.hero-home) p { max-width: min(820px, 100%) !important; margin: 0 0 0 auto !important; line-height: 1.9 !important; text-align: right !important; } html[dir="rtl"] .hero:not(.hero-home) .eyebrow, html[lang="ar"] .hero:not(.hero-home) .eyebrow { display: block !important; text-align: right !important; } /* 3) Project/service/client/trust heroes: smaller titles and no edge clipping. */ html[dir="rtl"] .cms-page-projects-list .hero h1, html[dir="rtl"] .cms-page-services-list .hero h1, html[dir="rtl"] .cms-page-clients-certifications .hero h1, html[lang="ar"] .cms-page-projects-list .hero h1, html[lang="ar"] .cms-page-services-list .hero h1, html[lang="ar"] .cms-page-clients-certifications .hero h1 { font-size: clamp(2.55rem, 4.2vw, 4.8rem) !important; max-width: min(920px, 100%) !important; line-height: 1.2 !important; } html[dir="rtl"] .service-detail-hero, html[lang="ar"] .service-detail-hero { min-height: clamp(440px, 44vw, 620px) !important; padding-block: clamp(58px, 7vw, 104px) !important; } html[dir="rtl"] .service-detail-hero .hero-content, html[lang="ar"] .service-detail-hero .hero-content { width: min(1080px, calc(100% - 64px)) !important; max-width: 1080px !important; margin: 0 auto !important; } html[dir="rtl"] .service-detail-hero h1, html[lang="ar"] .service-detail-hero h1 { font-size: clamp(2.7rem, 4.25vw, 4.9rem) !important; max-width: min(820px, 100%) !important; line-height: 1.22 !important; } html[dir="rtl"] .service-detail-hero .hero-actions, html[lang="ar"] .service-detail-hero .hero-actions, html[dir="rtl"] .hero:not(.hero-home) .hero-actions, html[lang="ar"] .hero:not(.hero-home) .hero-actions { justify-content: flex-start !important; align-items: center !important; flex-direction: row !important; direction: rtl !important; } /* 4) Large stats strip labels should not stay visually LTR. */ html[dir="rtl"] .info-strip, html[lang="ar"] .info-strip, html[dir="rtl"] .hero .info-strip, html[lang="ar"] .hero .info-strip { direction: rtl !important; } html[dir="rtl"] .info-item, html[lang="ar"] .info-item { text-align: right !important; direction: rtl !important; } html[dir="rtl"] .info-item small, html[dir="rtl"] .info-item strong, html[lang="ar"] .info-item small, html[lang="ar"] .info-item strong { text-align: right !important; direction: rtl !important; } /* 5) Leadership card: remove narrow side-column behavior in Arabic. */ html[dir="rtl"] .home-leadership-quote-card, html[lang="ar"] .home-leadership-quote-card { position: relative !important; display: block !important; width: min(1120px, calc(100% - 48px)) !important; max-width: 1120px !important; min-height: auto !important; padding: clamp(34px, 4vw, 64px) clamp(34px, 5vw, 76px) !important; direction: rtl !important; text-align: right !important; } html[dir="rtl"] .home-leadership-quote-card__body, html[lang="ar"] .home-leadership-quote-card__body { display: block !important; width: min(860px, calc(100% - 110px)) !important; max-width: 860px !important; margin-right: 0 !important; margin-left: auto !important; text-align: right !important; } html[dir="rtl"] .home-leadership-quote-card__accent, html[lang="ar"] .home-leadership-quote-card__accent { position: absolute !important; top: clamp(28px, 4vw, 54px) !important; right: auto !important; left: clamp(30px, 4vw, 62px) !important; width: 74px !important; height: 100px !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; } html[dir="rtl"] .home-leadership-quote-card__accent::after, html[lang="ar"] .home-leadership-quote-card__accent::after { right: 50% !important; left: auto !important; height: clamp(120px, 18vw, 260px) !important; } html[dir="rtl"] .home-leadership-quote-card h2, html[lang="ar"] .home-leadership-quote-card h2, html[dir="rtl"] .home-leadership-quote-card__message, html[lang="ar"] .home-leadership-quote-card__message, html[dir="rtl"] .home-leadership-quote-card__message p, html[lang="ar"] .home-leadership-quote-card__message p { width: 100% !important; max-width: 860px !important; text-align: right !important; } html[dir="rtl"] .home-leadership-quote-card h2, html[lang="ar"] .home-leadership-quote-card h2 { font-size: clamp(2.1rem, 3.4vw, 3.9rem) !important; line-height: 1.22 !important; } /* 6) Keep CTA/dark card contrast readable. */ html[dir="rtl"] .cta h1, html[dir="rtl"] .cta h2, html[dir="rtl"] .cta h3, html[dir="rtl"] .cta p, html[dir="rtl"] .card[style*="062452"] h1, html[dir="rtl"] .card[style*="062452"] h2, html[dir="rtl"] .card[style*="062452"] h3, html[dir="rtl"] .card[style*="062452"] p, html[dir="rtl"] .card[style*="074cb9"] h1, html[dir="rtl"] .card[style*="074cb9"] h2, html[dir="rtl"] .card[style*="074cb9"] h3, html[dir="rtl"] .card[style*="074cb9"] p, html[lang="ar"] .cta h1, html[lang="ar"] .cta h2, html[lang="ar"] .cta h3, html[lang="ar"] .cta p, html[lang="ar"] .card[style*="062452"] h1, html[lang="ar"] .card[style*="062452"] h2, html[lang="ar"] .card[style*="062452"] h3, html[lang="ar"] .card[style*="062452"] p, html[lang="ar"] .card[style*="074cb9"] h1, html[lang="ar"] .card[style*="074cb9"] h2, html[lang="ar"] .card[style*="074cb9"] h3, html[lang="ar"] .card[style*="074cb9"] p { color: #fff !important; } @media (max-width: 1180px) { html[dir="rtl"] .hero:not(.hero-home) h1, html[lang="ar"] .hero:not(.hero-home) h1, html[dir="rtl"] .service-detail-hero h1, html[lang="ar"] .service-detail-hero h1 { font-size: clamp(2.35rem, 5vw, 4.1rem) !important; max-width: min(760px, 100%) !important; } } @media (max-width: 980px) { html[dir="rtl"] .hero:not(.hero-home), html[lang="ar"] .hero:not(.hero-home) { min-height: auto !important; padding-block: 52px !important; } html[dir="rtl"] .hero:not(.hero-home) .hero-content, html[lang="ar"] .hero:not(.hero-home) .hero-content, html[dir="rtl"] .service-detail-hero .hero-content, html[lang="ar"] .service-detail-hero .hero-content { width: min(100% - 36px, 720px) !important; } html[dir="rtl"] .hero:not(.hero-home) h1, html[lang="ar"] .hero:not(.hero-home) h1, html[dir="rtl"] .service-detail-hero h1, html[lang="ar"] .service-detail-hero h1 { font-size: clamp(2rem, 7.4vw, 3.4rem) !important; max-width: 100% !important; } html[dir="rtl"] .home-leadership-quote-card__body, html[lang="ar"] .home-leadership-quote-card__body { width: 100% !important; margin-inline: 0 !important; } html[dir="rtl"] .home-leadership-quote-card__accent, html[lang="ar"] .home-leadership-quote-card__accent { position: static !important; width: auto !important; height: auto !important; margin-bottom: 18px !important; justify-content: flex-start !important; } } @media (max-width: 640px) { html[dir="rtl"] .hero-home h1, html[lang="ar"] .hero-home h1 { font-size: clamp(2.15rem, 10vw, 3.35rem) !important; max-width: 100% !important; } html[dir="rtl"] .hero-home .hero-actions, html[lang="ar"] .hero-home .hero-actions, html[dir="rtl"] .hero:not(.hero-home) .hero-actions, html[lang="ar"] .hero:not(.hero-home) .hero-actions { flex-direction: column !important; align-items: stretch !important; } } /* source: rtl_hero_spacing_breadcrumbs_142.css */ /* Upgrade 142 — Home hero spacing + global breadcrumb removal Loaded last so it only corrects the final visual issues after RTL stabilization. - Keeps the approved Arabic home hero structure. - Moves the Arabic hero copy a little closer to the sphere/visual. - Removes breadcrumb trails site-wide from public templates without leaving gaps. */ /* Remove all visible breadcrumb trails across the public site. */ .breadcrumb, .project-detail-breadcrumb, .hero .breadcrumb, .career-hero-copy .breadcrumb, .career-detail-copy .breadcrumb, .career-form-copy .breadcrumb, [class*="breadcrumb"]:not(.admin-breadcrumbs):not(.breadcrumbs) { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Pull the Arabic home hero copy closer to the sphere on desktop only. The sphere sits on the left in Arabic, so the copy moves slightly left. */ @media (min-width: 1101px) { html[dir="rtl"] .hero-home .hero-inner, html[lang="ar"] .hero-home .hero-inner { gap: clamp(12px, 2.2vw, 42px) !important; } html[dir="rtl"] .hero-home .hero-content, html[lang="ar"] .hero-home .hero-content { transform: translateX(clamp(-86px, -4.2vw, -34px)) !important; max-width: 620px !important; } html[dir="rtl"] .hero-home h1, html[lang="ar"] .hero-home h1 { max-width: 11.8ch !important; } html[dir="rtl"] .hero-home p, html[lang="ar"] .hero-home p { max-width: 600px !important; } } @media (min-width: 981px) and (max-width: 1100px) { html[dir="rtl"] .hero-home .hero-content, html[lang="ar"] .hero-home .hero-content { transform: translateX(-26px) !important; } } /* Keep mobile untouched; stacked layout is safer there. */ @media (max-width: 980px) { html[dir="rtl"] .hero-home .hero-content, html[lang="ar"] .hero-home .hero-content { transform: none !important; } } /* source: visible_localization_polish_143.css */ /* Upgrade 143: remaining visible Arabic RTL polish. */ html[dir="rtl"] .home-leadership-quote-card__accent, html[lang="ar"] .home-leadership-quote-card__accent { right: clamp(30px, 4vw, 62px) !important; left: auto !important; } html[dir="rtl"] .home-leadership-quote-card__accent::after, html[lang="ar"] .home-leadership-quote-card__accent::after { right: 50% !important; left: auto !important; } html[dir="rtl"] .home-leadership-quote-card__body, html[lang="ar"] .home-leadership-quote-card__body { margin-right: auto !important; margin-left: 0 !important; padding-right: 0 !important; padding-left: clamp(36px, 7vw, 110px) !important; } html[dir="rtl"] .home-leadership-quote-card__footer, html[lang="ar"] .home-leadership-quote-card__footer { text-align: right !important; } html[dir="rtl"] details.card summary, html[lang="ar"] details.card summary { direction: rtl !important; text-align: right !important; } html[dir="rtl"] details.card div, html[lang="ar"] details.card div { direction: rtl !important; text-align: right !important; } details.card summary:focus { outline: 2px solid rgba(7, 88, 216, .24); outline-offset: 6px; } html[dir="rtl"] .service-detail-hero .hero-actions .arrow, html[lang="ar"] .service-detail-hero .hero-actions .arrow { transform: scaleX(-1); display: inline-block; } html[dir="rtl"] .service-detail-hero .hero-actions .btn, html[lang="ar"] .service-detail-hero .hero-actions .btn { direction: rtl; } html[dir="rtl"] .service-detail-hero h1, html[lang="ar"] .service-detail-hero h1 { max-width: min(860px, 100%) !important; font-size: clamp(3rem, 6vw, 6.2rem) !important; line-height: 1.08 !important; } html[dir="rtl"] .card h2:only-child, html[lang="ar"] .card h2:only-child { text-align: right; } /* source: sticky_local_nav_top_144.css */ /* Upgrade 144: keep page-level sticky nav at the very top when the main header hides. */ /* Career detail local section navigation should not reserve the old header height. The global header hides on scroll, so local nav must pin to viewport top. */ .job-detail-page .job-section-nav { top: 0 !important; z-index: 39 !important; margin-top: 0 !important; border-radius: 0 0 18px 18px; border-top-color: transparent; } /* When the main header is visible it stays above the local nav; when it hides, the local nav occupies the top-most visible row. */ .site-header:not(.nav-hidden) ~ main .job-detail-page .job-section-nav, .site-header:not(.nav-hidden) + main .job-detail-page .job-section-nav { z-index: 39 !important; } /* Make in-page anchor jumps land below the sticky local nav, not underneath it. */ .job-detail-page .job-content-block { scroll-margin-top: 78px !important; } /* Keep tabs compact and stable across English, Arabic and Chinese. */ .job-detail-page .job-section-nav a { white-space: nowrap; } html[dir="rtl"] .job-detail-page .job-section-nav { direction: rtl; justify-content: flex-start; } html[dir="rtl"] .job-detail-page .job-section-nav a { text-align: center; } @media (max-width: 980px) { .job-detail-page .job-section-nav { position: static !important; border-radius: 18px; border-top-color: var(--line); } .job-detail-page .job-content-block { scroll-margin-top: 24px !important; } } /* source: sticky_local_nav_header_sync_145.css */ /* Upgrade 145: synchronize career local sticky nav with scroll-hide main header. When the public header is visible, the local nav sits directly below it. When the header hides, the local nav moves to the very top. */ :root { --job-local-nav-height: 60px; } .job-detail-page .job-section-nav { position: sticky !important; top: 0 !important; z-index: 990 !important; margin-top: 0 !important; transition: top .24s ease, border-radius .24s ease, box-shadow .24s ease; } body.public-header-visible .job-detail-page .job-section-nav { top: var(--site-header-height, 82px) !important; z-index: 990 !important; border-radius: 0 0 18px 18px !important; } body.public-header-hidden .job-detail-page .job-section-nav, .site-header.nav-hidden ~ main .job-detail-page .job-section-nav { top: 0 !important; } /* Keep jump targets visible in both states. */ body.public-header-visible .job-detail-page .job-content-block { scroll-margin-top: calc(var(--site-header-height, 82px) + var(--job-local-nav-height, 60px) + 22px) !important; } body.public-header-hidden .job-detail-page .job-content-block { scroll-margin-top: calc(var(--job-local-nav-height, 60px) + 22px) !important; } /* Use :has as a CSS fallback if JS class has not been applied yet. */ body:has(.site-header:not(.nav-hidden)) .job-detail-page .job-section-nav { top: var(--site-header-height, 82px) !important; } body:has(.site-header.nav-hidden) .job-detail-page .job-section-nav { top: 0 !important; } @media (prefers-reduced-motion: reduce) { .job-detail-page .job-section-nav { transition: none !important; } } @media (max-width: 980px) { body.public-header-visible .job-detail-page .job-section-nav, body.public-header-hidden .job-detail-page .job-section-nav, body:has(.site-header:not(.nav-hidden)) .job-detail-page .job-section-nav, body:has(.site-header.nav-hidden) .job-detail-page .job-section-nav { position: static !important; top: auto !important; border-radius: 18px !important; } } /* source: certificate_premium_cards_147.css */ /* Upgrade 157: Minimal professional certificate gallery - 3 column desktop, no status check badges */ .certificate-gallery-section { position: relative; background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); } .certificate-gallery-head { align-items: flex-end; gap: 28px; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid rgba(164, 190, 224, .48); } .certificate-gallery-head h2 { max-width: 760px; letter-spacing: -0.045em; } .certificate-gallery-head p { max-width: 410px; color: #52657f; } .certificate-photo-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; column-count: initial !important; column-gap: initial !important; align-items: stretch; } .certificate-photo-item { position: relative; display: flex !important; flex-direction: column; width: 100%; min-height: 0; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(185, 205, 232, .78) !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: 0 14px 34px rgba(9, 32, 68, .06) !important; overflow: hidden !important; isolation: isolate; cursor: zoom-in; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .certificate-photo-item::before, .certificate-photo-item::after { display: none !important; content: none !important; } .certificate-photo-item img { display: block; width: 100% !important; height: 360px !important; object-fit: contain; padding: 20px 22px; border-radius: 0; background: linear-gradient(180deg, #f9fcff 0%, #eef5ff 100%); box-shadow: inset 0 -1px 0 rgba(185, 205, 232, .68); transition: transform .24s ease, filter .24s ease; } .certificate-photo-item:hover, .certificate-photo-item:focus-visible { transform: translateY(-3px) !important; box-shadow: 0 22px 46px rgba(9, 32, 68, .11) !important; border-color: rgba(7, 88, 216, .34) !important; outline: none; } .certificate-photo-item:hover img, .certificate-photo-item:focus-visible img { transform: scale(1.006) !important; filter: saturate(1.02) contrast(1.01); } .certificate-photo-overlay { position: relative !important; inset: auto !important; z-index: 1; display: grid !important; gap: 8px; min-height: 132px; margin: 0; padding: 18px 20px 20px !important; border-radius: 0; color: #092044 !important; background: #ffffff !important; border: 0; opacity: 1 !important; transform: none !important; pointer-events: none; box-shadow: none; } .certificate-photo-title { color: #071b3a; font-size: 17px !important; font-weight: 900; line-height: 1.25; letter-spacing: -.015em; } .certificate-photo-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #52657f !important; font-size: 13.5px !important; line-height: 1.55 !important; } .certificate-photo-action { justify-self: start; align-self: end; min-height: 32px; margin-top: 2px; padding: 0 13px !important; border: 1px solid rgba(7, 88, 216, .16); border-radius: 999px; background: #f7fbff !important; color: #0758d8 !important; font-size: 11.5px !important; font-weight: 900; box-shadow: none; } html[dir="rtl"] .certificate-photo-action { justify-self: end; } .certificate-photo-placeholder { display: flex !important; min-height: 260px !important; padding: 24px !important; align-items: flex-start; justify-content: flex-end; gap: 10px; border: 1px dashed rgba(185, 205, 232, .95) !important; border-radius: 18px !important; background: #ffffff !important; color: #092044; cursor: default; text-align: start; } .certificate-placeholder-icon { display: none !important; } .certificate-photo-placeholder strong { font-size: 17px; line-height: 1.3; } .certificate-photo-placeholder small { color: #52657f; line-height: 1.55; } .home-certificate-gallery .certificate-photo-grid, .home-proof-simple-certificate-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; column-count: initial !important; } .home-certificate-gallery .certificate-photo-item img, .home-proof-simple-certificate-grid .certificate-photo-item img { height: 270px !important; padding: 16px 18px; } .home-certificate-gallery .certificate-photo-overlay, .home-proof-simple-certificate-grid .certificate-photo-overlay { min-height: 112px; padding: 16px 18px 18px !important; } .certificate-modal { background: rgba(2, 11, 24, .82) !important; } .certificate-modal-panel { border-radius: 26px !important; background: #071a36 !important; border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: 0 36px 100px rgba(0, 0, 0, .48) !important; } .certificate-modal-image-wrap { background: linear-gradient(180deg, #f1f7ff, #ffffff) !important; padding: 24px; } .certificate-modal-image { max-height: min(76vh, 820px) !important; object-fit: contain !important; background: #fff; border-radius: 14px; box-shadow: 0 18px 46px rgba(2, 11, 24, .22); } .certificate-modal-info { background: linear-gradient(180deg, #092552, #061a34) !important; } @media (max-width: 1180px) { .certificate-photo-grid, .home-certificate-gallery .certificate-photo-grid, .home-proof-simple-certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .certificate-gallery-head { display: block; align-items: flex-start; } .certificate-gallery-head p { margin-top: 12px; } .certificate-photo-grid, .home-certificate-gallery .certificate-photo-grid, .home-proof-simple-certificate-grid { grid-template-columns: 1fr; gap: 18px; } .certificate-photo-item { border-radius: 16px !important; } .certificate-photo-item img, .home-certificate-gallery .certificate-photo-item img, .home-proof-simple-certificate-grid .certificate-photo-item img { height: 330px !important; padding: 18px; } .certificate-photo-overlay, .home-certificate-gallery .certificate-photo-overlay, .home-proof-simple-certificate-grid .certificate-photo-overlay { min-height: auto; } } @media (max-width: 480px) { .certificate-photo-item img, .home-certificate-gallery .certificate-photo-item img, .home-proof-simple-certificate-grid .certificate-photo-item img { height: 300px !important; } } /* Upgrade 158: cleaner spacing + home preview capped at six certificates */ .certificate-gallery-section .container { max-width: 1320px; } .certificate-photo-grid { gap: clamp(22px, 2.2vw, 34px) !important; align-items: stretch !important; } .certificate-photo-item { border-radius: 20px !important; box-shadow: 0 12px 32px rgba(6, 27, 54, .055) !important; } .certificate-photo-item img { height: clamp(320px, 25vw, 390px) !important; padding: clamp(20px, 2vw, 30px) !important; } .certificate-photo-overlay { min-height: 126px !important; padding: 18px 22px 22px !important; } .home-proof-simple-certificates .home-proof-simple-intro { max-width: 720px; margin-inline: auto; margin-bottom: clamp(26px, 3vw, 38px); text-align: center; } .home-proof-simple-certificate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(20px, 2.2vw, 30px) !important; align-items: stretch; } .home-proof-simple-certificate-card { overflow: hidden; border: 1px solid rgba(201, 216, 238, .9) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 12px 30px rgba(6, 27, 54, .045) !important; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .home-proof-simple-certificate-media { height: clamp(240px, 18vw, 310px) !important; padding: clamp(16px, 1.8vw, 24px) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 -1px 0 rgba(201, 216, 238, .72) !important; background: linear-gradient(180deg, #fbfdff 0%, #f1f6fd 100%) !important; } .home-proof-simple-certificate-media::before, .home-proof-simple-certificate-media::after { display: none !important; } .home-proof-simple-certificate-media img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: none !important; } .home-proof-simple-certificate-copy { padding: 16px 20px 20px !important; text-align: start; } .home-proof-simple-certificate-copy strong { font-size: 1.02rem !important; font-weight: 900; } .home-proof-simple-certificate-copy small { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-proof-simple-certificate-card:hover, .home-proof-simple-certificate-card:focus-visible { transform: translateY(-3px); border-color: rgba(7, 88, 216, .3) !important; box-shadow: 0 20px 42px rgba(6, 27, 54, .08) !important; } .home-proof-simple-more { display: flex; justify-content: center; margin-top: clamp(22px, 3vw, 34px); } .home-proof-simple-more-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 1px solid rgba(7, 88, 216, .18); border-radius: 999px; background: #f7fbff; color: #0758d8; font-size: .92rem; font-weight: 900; text-decoration: none; box-shadow: 0 10px 24px rgba(6, 27, 54, .04); transition: transform .2s ease, border-color .2s ease, background .2s ease; } .home-proof-simple-more-link:hover, .home-proof-simple-more-link:focus-visible { transform: translateY(-2px); border-color: rgba(7, 88, 216, .34); background: #fff; outline: none; } @media (max-width: 1180px) { .home-proof-simple-certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { .certificate-photo-grid, .home-proof-simple-certificate-grid { gap: 18px !important; } .home-proof-simple-certificate-grid { grid-template-columns: 1fr !important; } .home-proof-simple-certificate-media { height: 280px !important; } } /* source: hero_center_proper_names_169.css */ /* Upgrade 169 — final hero centering and RTL-safe proper-name rendering. */ /* The older RTL restoration files intentionally right-align page heroes. This final override is loaded last so non-home page photo heroes stay centered. */ .hero.page-photo-hero, .page-photo-hero, .cms-page-clients-certifications .page-photo-hero, .cms-page-projects-list .page-photo-hero, .cms-page-services-list .page-photo-hero, .cms-page-downloads .page-photo-hero, .cms-page-careers .page-photo-hero, .service-detail-hero.has-parallax-hero, .services-modern-hero.has-parallax-hero, .project-detail-hero { display: grid !important; place-items: center !important; text-align: center !important; } .hero.page-photo-hero > .container.hero-content, .page-photo-hero > .container.hero-content, .cms-page-clients-certifications .page-photo-hero > .container.hero-content, .cms-page-projects-list .page-photo-hero > .container.hero-content, .cms-page-services-list .page-photo-hero > .container.hero-content, .cms-page-downloads .page-photo-hero > .container.hero-content, .cms-page-careers .page-photo-hero > .container.hero-content, .service-detail-hero.has-parallax-hero .hero-content, .services-modern-hero.has-parallax-hero > .container, .project-detail-hero > .container { width: min(980px, calc(100% - 48px)) !important; max-width: 980px !important; justify-self: center !important; align-self: center !important; margin-left: auto !important; margin-right: auto !important; margin-inline: auto !important; text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; } .hero.page-photo-hero .eyebrow, .hero.page-photo-hero h1, .hero.page-photo-hero p, .page-photo-hero .eyebrow, .page-photo-hero h1, .page-photo-hero p, .service-detail-hero.has-parallax-hero .eyebrow, .service-detail-hero.has-parallax-hero h1, .service-detail-hero.has-parallax-hero p, .services-modern-hero.has-parallax-hero .eyebrow, .services-modern-hero.has-parallax-hero h1, .services-modern-hero.has-parallax-hero p, .project-detail-hero .eyebrow, .project-detail-hero h1, .project-detail-hero p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; margin-inline: auto !important; } html[dir="rtl"] .hero.page-photo-hero, html[dir="rtl"] .page-photo-hero, html[dir="rtl"] .service-detail-hero.has-parallax-hero, html[dir="rtl"] .services-modern-hero.has-parallax-hero, html[dir="rtl"] .project-detail-hero, html[lang="ar"] .hero.page-photo-hero, html[lang="ar"] .page-photo-hero, html[lang="ar"] .service-detail-hero.has-parallax-hero, html[lang="ar"] .services-modern-hero.has-parallax-hero, html[lang="ar"] .project-detail-hero { direction: rtl !important; text-align: center !important; } html[dir="rtl"] .hero.page-photo-hero > .container.hero-content, html[dir="rtl"] .page-photo-hero > .container.hero-content, html[dir="rtl"] .service-detail-hero.has-parallax-hero .hero-content, html[dir="rtl"] .services-modern-hero.has-parallax-hero > .container, html[dir="rtl"] .project-detail-hero > .container, html[lang="ar"] .hero.page-photo-hero > .container.hero-content, html[lang="ar"] .page-photo-hero > .container.hero-content, html[lang="ar"] .service-detail-hero.has-parallax-hero .hero-content, html[lang="ar"] .services-modern-hero.has-parallax-hero > .container, html[lang="ar"] .project-detail-hero > .container { width: min(980px, calc(100% - 48px)) !important; max-width: 980px !important; justify-self: center !important; margin-left: auto !important; margin-right: auto !important; margin-inline: auto !important; text-align: center !important; } html[dir="rtl"] .hero.page-photo-hero .eyebrow, html[dir="rtl"] .hero.page-photo-hero h1, html[dir="rtl"] .hero.page-photo-hero p, html[dir="rtl"] .page-photo-hero .eyebrow, html[dir="rtl"] .page-photo-hero h1, html[dir="rtl"] .page-photo-hero p, html[dir="rtl"] .service-detail-hero.has-parallax-hero .eyebrow, html[dir="rtl"] .service-detail-hero.has-parallax-hero h1, html[dir="rtl"] .service-detail-hero.has-parallax-hero p, html[dir="rtl"] .services-modern-hero.has-parallax-hero .eyebrow, html[dir="rtl"] .services-modern-hero.has-parallax-hero h1, html[dir="rtl"] .services-modern-hero.has-parallax-hero p, html[dir="rtl"] .project-detail-hero .eyebrow, html[dir="rtl"] .project-detail-hero h1, html[dir="rtl"] .project-detail-hero p, html[lang="ar"] .hero.page-photo-hero .eyebrow, html[lang="ar"] .hero.page-photo-hero h1, html[lang="ar"] .hero.page-photo-hero p, html[lang="ar"] .page-photo-hero .eyebrow, html[lang="ar"] .page-photo-hero h1, html[lang="ar"] .page-photo-hero p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; margin-inline: auto !important; } html[dir="rtl"] .trust-logo-card h3, html[dir="rtl"] .project-client-logo-card strong, html[dir="rtl"] .home-proof-simple-logo-card strong, html[lang="ar"] .trust-logo-card h3, html[lang="ar"] .project-client-logo-card strong, html[lang="ar"] .home-proof-simple-logo-card strong { direction: rtl; unicode-bidi: plaintext; } /* source: home_hero_background_visibility_170.css */ /* Upgrade 170 — home hero background visibility Makes the home hero photo read closer to the other page heroes while keeping the landing-page split layout and sphere visual. Loaded after earlier hero CSS. */ .hero-home { background: linear-gradient(90deg, #ffffff 0%, #ffffff 38%, #e7f1fb 52%, #b9d2eb 100%) !important; } .hero-home::before { background: radial-gradient(circle at 76% 48%, rgba(11, 70, 143, .22), transparent 34%), linear-gradient(90deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 36%, rgba(12, 51, 95, .16) 62%, rgba(7, 31, 63, .30) 100%) !important; opacity: 1 !important; } .hero-home .hero-visual-layer { opacity: 1 !important; } .hero-home .hero-visual-photo { width: 63% !important; filter: saturate(1.08) contrast(1.08) brightness(.94) !important; background-position: center right !important; } .hero-home .hero-visual-photo::before { background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.94) 16%, rgba(239,247,255,.74) 31%, rgba(204,225,244,.36) 48%, rgba(34, 82, 132, .22) 68%, rgba(5, 31, 66, .36) 100%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(5,31,66,.16)) !important; } .hero-home .hero-visual-photo::after { background: radial-gradient(circle at 72% 52%, rgba(255,255,255,.16), transparent 22%), linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(29, 82, 142, .18) 54%, rgba(5, 31, 66, .42) 100%) !important; } .hero-home .hero-side-grid { opacity: .34 !important; } .hero-home .hero-side-glow { opacity: .62 !important; } .hero-home .hero-trust-sphere-exact { filter: saturate(1.03) contrast(1.02) !important; } /* RTL home keeps the same visual balance with the photo/sphere on the opposite side. */ html[dir="rtl"] .hero-home, html[lang="ar"] .hero-home { background: linear-gradient(270deg, #ffffff 0%, #ffffff 38%, #e7f1fb 52%, #b9d2eb 100%) !important; } html[dir="rtl"] .hero-home::before, html[lang="ar"] .hero-home::before { background: radial-gradient(circle at 24% 48%, rgba(11, 70, 143, .22), transparent 34%), linear-gradient(270deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 36%, rgba(12, 51, 95, .16) 62%, rgba(7, 31, 63, .30) 100%) !important; } html[dir="rtl"] .hero-home .hero-visual-photo, html[lang="ar"] .hero-home .hero-visual-photo { left: 0 !important; right: auto !important; background-position: center left !important; } html[dir="rtl"] .hero-home .hero-visual-photo::before, html[lang="ar"] .hero-home .hero-visual-photo::before { background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.94) 16%, rgba(239,247,255,.74) 31%, rgba(204,225,244,.36) 48%, rgba(34, 82, 132, .22) 68%, rgba(5, 31, 66, .36) 100%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(5,31,66,.16)) !important; } html[dir="rtl"] .hero-home .hero-visual-photo::after, html[lang="ar"] .hero-home .hero-visual-photo::after { background: radial-gradient(circle at 28% 52%, rgba(255,255,255,.16), transparent 22%), linear-gradient(270deg, rgba(255,255,255,.08) 0%, rgba(29, 82, 142, .18) 54%, rgba(5, 31, 66, .42) 100%) !important; } @media (max-width: 980px) { .hero-home .hero-visual-photo { width: 100% !important; opacity: .24 !important; } .hero-home .hero-visual-photo::before, .hero-home .hero-visual-photo::after { opacity: .78 !important; } } /* source: home_hero_consistent_dark_171.css */ /* Upgrade 171 — Home hero visual consistency Reworks the home hero from a bright split panel into the same dark, photo-led navy hero language used by Careers, Certificates, Services, and project pages while preserving the SESCCO sphere feature. */ .hero-home { min-height: 705px !important; background: #071b36 !important; color: #fff !important; isolation: isolate !important; } .hero-home .hero-visual-layer { opacity: 1 !important; z-index: 0 !important; } .hero-home .hero-visual-photo { inset: 0 !important; width: 100% !important; right: 0 !important; left: 0 !important; opacity: .92 !important; background-size: cover !important; background-position: center right !important; filter: saturate(1.04) contrast(1.08) brightness(.74) !important; } .hero-home .hero-visual-photo::before { background: linear-gradient(90deg, rgba(4, 18, 38, .96) 0%, rgba(4, 22, 48, .91) 29%, rgba(6, 32, 67, .72) 48%, rgba(7, 42, 88, .54) 66%, rgba(5, 25, 55, .70) 100%), linear-gradient(180deg, rgba(3, 17, 36, .32) 0%, rgba(3, 17, 36, .04) 45%, rgba(3, 17, 36, .32) 100%) !important; opacity: 1 !important; } .hero-home .hero-visual-photo::after { background: radial-gradient(circle at 74% 50%, rgba(255,255,255,.14), transparent 25%), radial-gradient(circle at 32% 42%, rgba(7, 88, 216, .20), transparent 35%), linear-gradient(90deg, rgba(7, 88, 216, .10) 0%, rgba(0, 166, 223, .07) 52%, rgba(3, 17, 36, .42) 100%) !important; opacity: 1 !important; mix-blend-mode: normal !important; } .hero-home::before { background: linear-gradient(90deg, rgba(3, 15, 33, .18) 0%, rgba(3, 15, 33, .06) 34%, rgba(255,255,255,.04) 54%, rgba(3, 15, 33, .16) 100%), radial-gradient(circle at 73% 50%, rgba(255,255,255,.16), transparent 27%) !important; opacity: 1 !important; z-index: 1 !important; } .hero-home .hero-inner { position: relative !important; z-index: 2 !important; } .hero-home .hero-content { color: #fff !important; max-width: 720px !important; text-shadow: 0 16px 38px rgba(0, 0, 0, .24) !important; } .hero-home .hero-kicker { color: #bcd8ff !important; text-shadow: none !important; } .hero-home h1, .hero-home p { color: #fff !important; } .hero-home p { color: rgba(255,255,255,.88) !important; text-shadow: 0 10px 28px rgba(0,0,0,.18) !important; } .hero-home .btn-outline { background: rgba(255,255,255,.94) !important; color: var(--primary) !important; border-color: rgba(255,255,255,.58) !important; box-shadow: 0 12px 28px rgba(0,0,0,.14) !important; } .hero-home .btn-primary { box-shadow: 0 16px 36px rgba(0,0,0,.22) !important; } .hero-home .hero-side-grid { opacity: .18 !important; background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px) !important; } .hero-home .hero-side-glow { opacity: .48 !important; } .hero-home .hero-trust-sphere-exact { filter: saturate(1.04) contrast(1.03) drop-shadow(0 34px 70px rgba(0,0,0,.30)) !important; } .hero-home .hero-trust-strip, .hero-home + .hero-trust-strip, .home-hero-trust-strip { position: relative; z-index: 5; } /* Arabic/RTL keeps the photo-led dark language with mirrored readability gradient. */ html[dir="rtl"] .hero-home, html[lang="ar"] .hero-home { background: #071b36 !important; } html[dir="rtl"] .hero-home .hero-visual-photo, html[lang="ar"] .hero-home .hero-visual-photo { inset: 0 !important; width: 100% !important; background-position: center left !important; } html[dir="rtl"] .hero-home .hero-visual-photo::before, html[lang="ar"] .hero-home .hero-visual-photo::before { background: linear-gradient(270deg, rgba(4, 18, 38, .96) 0%, rgba(4, 22, 48, .91) 29%, rgba(6, 32, 67, .72) 48%, rgba(7, 42, 88, .54) 66%, rgba(5, 25, 55, .70) 100%), linear-gradient(180deg, rgba(3, 17, 36, .32) 0%, rgba(3, 17, 36, .04) 45%, rgba(3, 17, 36, .32) 100%) !important; } html[dir="rtl"] .hero-home .hero-visual-photo::after, html[lang="ar"] .hero-home .hero-visual-photo::after { background: radial-gradient(circle at 26% 50%, rgba(255,255,255,.14), transparent 25%), radial-gradient(circle at 68% 42%, rgba(7, 88, 216, .20), transparent 35%), linear-gradient(270deg, rgba(7, 88, 216, .10) 0%, rgba(0, 166, 223, .07) 52%, rgba(3, 17, 36, .42) 100%) !important; } html[dir="rtl"] .hero-home::before, html[lang="ar"] .hero-home::before { background: linear-gradient(270deg, rgba(3, 15, 33, .18) 0%, rgba(3, 15, 33, .06) 34%, rgba(255,255,255,.04) 54%, rgba(3, 15, 33, .16) 100%), radial-gradient(circle at 27% 50%, rgba(255,255,255,.16), transparent 27%) !important; } @media (max-width: 1180px) { .hero-home .hero-visual-photo { opacity: .82 !important; } .hero-home .hero-visual-photo::before { background: linear-gradient(90deg, rgba(4,18,38,.97) 0%, rgba(4,22,48,.92) 38%, rgba(5,25,55,.76) 100%) !important; } } @media (max-width: 980px) { .hero-home { min-height: auto !important; } .hero-home .hero-visual-photo { width: 100% !important; opacity: .70 !important; } .hero-home .hero-visual-photo::before { background: linear-gradient(180deg, rgba(4,18,38,.94) 0%, rgba(4,22,48,.88) 48%, rgba(5,25,55,.94) 100%) !important; } .hero-home .hero-content { text-align: center !important; margin-inline: auto !important; } .hero-home .hero-actions { justify-content: center !important; } } /* source: home_sphere_no_extra_text_172.css */ /* Upgrade 172 — Home sphere visual cards only The generated sphere images already contain their own service wording. Hide any legacy overlay labels and text/data cards so reseeded or cached content cannot add duplicate text over the artwork. */ .hero-home .home-sphere-card .card-label, .hero-home .home-sphere-card .data-card-content { display: none !important; } .hero-home .home-sphere-card.is-data { display: none !important; } .hero-home .home-sphere-card img { width: 100%; height: 100%; object-fit: cover; } /* source: project_cards_fixed_media_176.css */ /* Upgrade 176: keep project list cards stable even when uploaded photos are portrait/tall. */ .project-grid, .projects-grid, .project-list-grid, [data-project-grid]{ align-items: stretch; } .project-result-card, .project-card{ display: flex !important; flex-direction: column; min-height: 100%; } .project-result-card .project-thumb, .project-card .project-thumb, .project-result-card > img.project-thumb, .project-card > img.project-thumb{ display: block; width: 100% !important; height: clamp(190px, 15vw, 230px) !important; max-height: 230px !important; aspect-ratio: 16 / 9; object-fit: cover !important; object-position: center center !important; flex: 0 0 auto; background: #eaf3ff; } .project-result-card .project-body, .project-card .project-body{ flex: 1 1 auto; display: flex; flex-direction: column; } .project-result-card h3, .project-card h3{ margin-bottom: 10px; } .project-result-card .project-body p, .project-card .project-body p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } /* Keep the featured project image wider, but still controlled. */ .featured-project img, .project-featured img{ height: clamp(220px, 22vw, 340px) !important; max-height: 340px !important; width: 100% !important; object-fit: cover !important; object-position: center center !important; } @media (max-width: 760px){ .project-result-card .project-thumb, .project-card .project-thumb, .project-result-card > img.project-thumb, .project-card > img.project-thumb{ height: 190px !important; max-height: 190px !important; } } /* source: nav_compact_sphere_smooth_177.css */ /* Upgrade 177 — compact top nav and smoother home sphere polish. */ :root{ --site-header-height: 74px; /* used as page offset only */ --sescco-header-compact-height: 74px; /* fixed visual header height */ } .site-header{ min-height: 0 !important; height: auto !important; max-height: none !important; padding: 0 !important; } .site-header .navbar, .navbar{ height: var(--sescco-header-compact-height) !important; min-height: var(--sescco-header-compact-height) !important; max-height: var(--sescco-header-compact-height) !important; gap: clamp(16px, 2vw, 24px) !important; } .site-header .site-logo-lockup, .site-header .logo{ transform: scale(.98); transform-origin: left center; } html[dir="rtl"] .site-header .site-logo-lockup, html[dir="rtl"] .site-header .logo{ transform-origin: right center; } .site-header .site-logo-mark, .site-header .site-logo-mark img, .site-header .logo-mark{ width: 52px !important; height: 52px !important; flex-basis: 52px !important; } .site-header .nav-links{ gap: clamp(18px, 1.9vw, 24px) !important; font-size: 13.5px !important; } .site-header .nav-links a{ padding-block: 27px !important; } .site-header .nav-links a.active::after, .site-header .nav-links a:hover::after{ bottom: 15px !important; } .site-header .language-links{ min-height: 42px !important; padding: 3px !important; } .site-header .language-links a{ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 34px !important; padding: 0 12px !important; font-size: 12.5px !important; line-height: 1 !important; text-align: center !important; } .site-header > .container > .btn-primary, .site-header .navbar > .btn-primary{ min-height: 44px !important; padding-inline: 22px !important; border-radius: 8px !important; } /* Smooth sphere: decorative rotating visual, not a selectable card carousel. */ .hero-home .home-sphere-wrap{ cursor: default !important; touch-action: pan-y !important; } .hero-home .home-sphere-card{ pointer-events: none !important; cursor: default !important; transition: none !important; /* Only the sphere parent moves. Avoid creating a separate GPU layer for every static card, which can produce compositor shimmer while rotating. */ will-change: auto !important; } .hero-home .home-sphere-card.is-active, .hero-home .home-sphere-card:focus, .hero-home .home-sphere-card:hover{ outline: 0 !important; } .hero-home .home-sphere-wrap.is-hovered .home-sphere-card{ filter: none !important; } .hero-home .home-sphere{ will-change: transform !important; transform-style: preserve-3d !important; } @media (min-width: 981px){ .hero-home .hero-trust-sphere-exact{ right: clamp(-4px, 4.2vw, 82px) !important; transform: translateY(-50%) translateX(4%) !important; } html[dir="rtl"] .hero-home .hero-trust-sphere-exact{ right: auto !important; left: clamp(-4px, 4.2vw, 82px) !important; transform: translateY(-50%) translateX(-4%) !important; } } @media (max-width: 980px){ :root{ --site-header-height: 68px; --sescco-header-compact-height: 68px; } .site-header .site-logo-lockup, .site-header .logo{ transform: none; } } @media (max-width: 560px){ :root{ --site-header-height: 64px; --sescco-header-compact-height: 64px; } .site-header .site-logo-mark, .site-header .site-logo-mark img, .site-header .logo-mark{ width: 40px !important; height: 40px !important; flex-basis: 40px !important; } } /* Upgrade 178 hotfix: prevent ResizeObserver/header-height feedback loop from ever stretching the public header. */ .site-header .container, .site-header .navbar{ overflow: visible !important; } .site-header .nav-links a{ display: inline-flex !important; align-items: center !important; height: var(--sescco-header-compact-height) !important; padding-top: 0 !important; padding-bottom: 0 !important; } .site-header .site-logo-lockup, .site-header .logo, .site-header .language-links, .site-header .btn{ flex-shrink: 0 !important; } /* source: accordion_consistency_184.css */ /* Upgrade 184 — consistent public accordion design and independent FAQ columns. */ .faq-accordion-grid, .contact-faq-grid, .services-faq-grid, .service-detail-faq-grid { display: block !important; column-count: 2; column-gap: clamp(18px, 2vw, 24px); align-items: start !important; } .faq-accordion-card, details.card.faq-accordion-card, .contact-faq-card, .services-faq-item { display: block; width: 100%; height: auto !important; min-height: 0 !important; margin: 0 0 clamp(16px, 2vw, 22px); padding: 0 !important; break-inside: avoid; page-break-inside: avoid; overflow: hidden; border: 1px solid #d8e4f2 !important; border-radius: 10px !important; background: #fff !important; box-shadow: 0 18px 44px rgba(6, 27, 54, .045) !important; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .faq-accordion-card[open], details.card.faq-accordion-card[open], .contact-faq-card[open], .services-faq-item[open] { border-color: var(--primary) !important; box-shadow: 0 22px 54px rgba(7, 88, 216, .08) !important; } .faq-accordion-card summary, details.card.faq-accordion-card summary, .contact-faq-card summary, .services-faq-item summary { position: relative; display: flex !important; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; padding: 22px 26px !important; color: #061b3f; font-size: 16px; line-height: 1.35; font-weight: 950 !important; cursor: pointer; list-style: none; outline: 0; } .faq-accordion-card summary::-webkit-details-marker, details.card.faq-accordion-card summary::-webkit-details-marker, .contact-faq-card summary::-webkit-details-marker, .services-faq-item summary::-webkit-details-marker { display: none; } .faq-accordion-card summary::marker, details.card.faq-accordion-card summary::marker, .contact-faq-card summary::marker, .services-faq-item summary::marker { content: ""; } .faq-accordion-card summary > span, details.card.faq-accordion-card summary > span, .services-faq-item summary > span:first-child { min-width: 0; } .faq-accordion-card summary::after, details.card.faq-accordion-card summary::after, .contact-faq-card summary::after { content: ""; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; background: #eef6ff; color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8L10 13L15 8' stroke='%230758d8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; transition: transform .18s ease, background-color .18s ease; } .services-faq-item summary::after { display: none; } .faq-accordion-card[open] summary::after, details.card.faq-accordion-card[open] summary::after, .contact-faq-card[open] summary::after { transform: rotate(180deg); background-color: #e7f1ff; } .services-faq-chevron { display: grid !important; place-items: center; flex: 0 0 36px; width: 36px !important; height: 36px !important; border-radius: 999px; background: #eef6ff; color: var(--primary); transition: transform .18s ease, background-color .18s ease; } .services-faq-item[open] .services-faq-chevron { transform: rotate(180deg); background: #e7f1ff; } .faq-accordion-card > div, details.card.faq-accordion-card > div, .contact-faq-card > div, .services-faq-answer { margin: 0 !important; padding: 18px 26px 24px !important; border-top: 1px solid #dbe7f6; color: #274465; font-size: 16px; line-height: 1.68; } .faq-accordion-card > div p:last-child, details.card.faq-accordion-card > div p:last-child, .contact-faq-card > div p:last-child, .services-faq-answer p:last-child { margin-bottom: 0; } .faq-accordion-card summary:focus-visible, details.card.faq-accordion-card summary:focus-visible, .contact-faq-card summary:focus-visible, .services-faq-item summary:focus-visible { box-shadow: inset 0 0 0 2px rgba(7, 88, 216, .22); } html[dir="rtl"] .faq-accordion-card summary, html[dir="rtl"] details.card.faq-accordion-card summary, html[dir="rtl"] .contact-faq-card summary, html[dir="rtl"] .services-faq-item summary { text-align: right; } html[dir="rtl"] .faq-accordion-card summary::after, html[dir="rtl"] details.card.faq-accordion-card summary::after, html[dir="rtl"] .contact-faq-card summary::after { margin-right: auto; margin-left: 0; } @media (max-width: 860px) { .faq-accordion-grid, .contact-faq-grid, .services-faq-grid, .service-detail-faq-grid { column-count: 1; } .faq-accordion-card summary, details.card.faq-accordion-card summary, .contact-faq-card summary, .services-faq-item summary { min-height: 70px; padding: 19px 20px !important; font-size: 15px; } .faq-accordion-card > div, details.card.faq-accordion-card > div, .contact-faq-card > div, .services-faq-answer { padding: 16px 20px 20px !important; font-size: 15px; } } /* source: gsap_prehide_186.css */ html.gsap-preload .site-header, html.gsap-preload .hero-home .hero-kicker, html.gsap-preload .hero-home h1, html.gsap-preload .hero-home p, html.gsap-preload .hero-home .hero-actions, html.gsap-preload .hero-home .hero-trust-sphere-exact, html.gsap-preload .services-modern-hero .breadcrumb, html.gsap-preload .services-modern-hero .eyebrow, html.gsap-preload .services-modern-hero h1, html.gsap-preload .services-modern-hero p, html.gsap-preload .services-modern-hero .hero-actions, html.gsap-preload .page-photo-hero .breadcrumb, html.gsap-preload .page-photo-hero .eyebrow, html.gsap-preload .page-photo-hero h1, html.gsap-preload .page-photo-hero p, html.gsap-preload .page-photo-hero .hero-actions, html.gsap-preload .service-detail-hero .breadcrumb, html.gsap-preload .service-detail-hero .eyebrow, html.gsap-preload .service-detail-hero h1, html.gsap-preload .service-detail-hero p, html.gsap-preload .service-detail-hero .hero-actions, html.gsap-preload .career-hero .breadcrumb, html.gsap-preload .career-hero .eyebrow, html.gsap-preload .career-hero h1, html.gsap-preload .career-hero p, html.gsap-preload .career-hero .hero-actions, html.gsap-preload .career-detail-hero .breadcrumb, html.gsap-preload .career-detail-hero .eyebrow, html.gsap-preload .career-detail-hero h1, html.gsap-preload .career-detail-hero p, html.gsap-preload .career-detail-hero .hero-actions, html.gsap-preload .career-form-hero .breadcrumb, html.gsap-preload .career-form-hero .eyebrow, html.gsap-preload .career-form-hero h1, html.gsap-preload .career-form-hero p, html.gsap-preload .career-form-hero .hero-actions, html.gsap-preload .hero.dark .breadcrumb, html.gsap-preload .hero.dark .eyebrow, html.gsap-preload .hero.dark h1, html.gsap-preload .hero.dark p, html.gsap-preload .hero.dark .hero-actions { opacity: 0; visibility: hidden; } html.gsap-preload .site-header, html.gsap-preload .site-header * { opacity: 1 !important; visibility: visible !important; transform: none !important; } html.gsap-preload .site-header { opacity: 1 !important; visibility: visible !important; transform: none !important; } html.gsap-preload .contact-hero .eyebrow, html.gsap-preload .contact-hero h1, html.gsap-preload .contact-hero p, html.gsap-preload .contact-hero .hero-actions, html.gsap-preload .project-detail-hero-copy .breadcrumb, html.gsap-preload .project-detail-hero-copy .eyebrow, html.gsap-preload .project-detail-hero-copy h1, html.gsap-preload .project-detail-hero-copy p, html.gsap-preload .project-detail-hero-copy .hero-actions { opacity: 0; visibility: hidden; transform: translate3d(0, 26px, 0); } @media (prefers-reduced-motion: reduce) { html.gsap-preload .contact-hero .eyebrow, html.gsap-preload .contact-hero h1, html.gsap-preload .contact-hero p, html.gsap-preload .contact-hero .hero-actions, html.gsap-preload .project-detail-hero-copy .breadcrumb, html.gsap-preload .project-detail-hero-copy .eyebrow, html.gsap-preload .project-detail-hero-copy h1, html.gsap-preload .project-detail-hero-copy p, html.gsap-preload .project-detail-hero-copy .hero-actions { opacity: 1; visibility: visible; transform: none; } } html.gsap-preload .site-header, html.gsap-preload .site-header * { opacity: 1 !important; visibility: visible !important; transform: none !important; } html.gsap-preload .hero-home .hero-kicker, html.gsap-preload .hero-home h1, html.gsap-preload .hero-home p, html.gsap-preload .hero-home .hero-actions, html.gsap-preload .services-modern-hero .breadcrumb, html.gsap-preload .services-modern-hero .eyebrow, html.gsap-preload .services-modern-hero h1, html.gsap-preload .services-modern-hero p, html.gsap-preload .services-modern-hero .hero-actions, html.gsap-preload .page-photo-hero .breadcrumb, html.gsap-preload .page-photo-hero .eyebrow, html.gsap-preload .page-photo-hero h1, html.gsap-preload .page-photo-hero p, html.gsap-preload .page-photo-hero .hero-actions, html.gsap-preload .service-detail-hero .breadcrumb, html.gsap-preload .service-detail-hero .eyebrow, html.gsap-preload .service-detail-hero h1, html.gsap-preload .service-detail-hero p, html.gsap-preload .service-detail-hero .hero-actions, html.gsap-preload .career-hero .breadcrumb, html.gsap-preload .career-hero .eyebrow, html.gsap-preload .career-hero h1, html.gsap-preload .career-hero p, html.gsap-preload .career-hero .hero-actions, html.gsap-preload .career-detail-hero .breadcrumb, html.gsap-preload .career-detail-hero .eyebrow, html.gsap-preload .career-detail-hero h1, html.gsap-preload .career-detail-hero p, html.gsap-preload .career-detail-hero .hero-actions, html.gsap-preload .career-form-hero .breadcrumb, html.gsap-preload .career-form-hero .eyebrow, html.gsap-preload .career-form-hero h1, html.gsap-preload .career-form-hero p, html.gsap-preload .career-form-hero .hero-actions, html.gsap-preload .hero.dark .breadcrumb, html.gsap-preload .hero.dark .eyebrow, html.gsap-preload .hero.dark h1, html.gsap-preload .hero.dark p, html.gsap-preload .hero.dark .hero-actions { transform: translate3d(0, 26px, 0); } html.gsap-preload .site-header { transform: translate3d(0, -12px, 0); } html.gsap-preload .hero-home .hero-trust-sphere-exact { transform: translate3d(0, 0, 0) scale(.965); } @media (prefers-reduced-motion: reduce) { html.gsap-preload .site-header, html.gsap-preload .hero-home .hero-kicker, html.gsap-preload .hero-home h1, html.gsap-preload .hero-home p, html.gsap-preload .hero-home .hero-actions, html.gsap-preload .hero-home .hero-trust-sphere-exact, html.gsap-preload .services-modern-hero .breadcrumb, html.gsap-preload .services-modern-hero .eyebrow, html.gsap-preload .services-modern-hero h1, html.gsap-preload .services-modern-hero p, html.gsap-preload .services-modern-hero .hero-actions, html.gsap-preload .page-photo-hero .breadcrumb, html.gsap-preload .page-photo-hero .eyebrow, html.gsap-preload .page-photo-hero h1, html.gsap-preload .page-photo-hero p, html.gsap-preload .page-photo-hero .hero-actions, html.gsap-preload .service-detail-hero .breadcrumb, html.gsap-preload .service-detail-hero .eyebrow, html.gsap-preload .service-detail-hero h1, html.gsap-preload .service-detail-hero p, html.gsap-preload .service-detail-hero .hero-actions, html.gsap-preload .career-hero .breadcrumb, html.gsap-preload .career-hero .eyebrow, html.gsap-preload .career-hero h1, html.gsap-preload .career-hero p, html.gsap-preload .career-hero .hero-actions, html.gsap-preload .career-detail-hero .breadcrumb, html.gsap-preload .career-detail-hero .eyebrow, html.gsap-preload .career-detail-hero h1, html.gsap-preload .career-detail-hero p, html.gsap-preload .career-detail-hero .hero-actions, html.gsap-preload .career-form-hero .breadcrumb, html.gsap-preload .career-form-hero .eyebrow, html.gsap-preload .career-form-hero h1, html.gsap-preload .career-form-hero p, html.gsap-preload .career-form-hero .hero-actions, html.gsap-preload .hero.dark .breadcrumb, html.gsap-preload .hero.dark .eyebrow, html.gsap-preload .hero.dark h1, html.gsap-preload .hero.dark p, html.gsap-preload .hero.dark .hero-actions { opacity: 1; visibility: visible; transform: none; } } /* source: mobile_polish_188.css */ .mobile-nav-extras { display: none; } @media (max-width: 980px) { :root { --mobile-header-height: 76px; } body.nav-open { overflow: hidden; touch-action: none; } .site-header { height: var(--mobile-header-height) !important; min-height: var(--mobile-header-height) !important; max-height: var(--mobile-header-height) !important; z-index: 1200 !important; transform: none !important; } .site-header .navbar { width: min(100% - 28px, var(--max)); height: var(--mobile-header-height) !important; min-height: var(--mobile-header-height) !important; margin-inline: auto; gap: 12px; } .site-header .site-logo-lockup, .site-header .logo { min-width: 0; max-width: calc(100% - 64px); transform: none !important; } .site-header .site-logo-mark, .site-header .site-logo-mark img, .site-header .logo-mark { width: 48px !important; height: 48px !important; flex: 0 0 48px; } .site-header .site-logo-text, .site-header .logo strong { max-width: 190px; } .site-header .site-logo-text img { max-width: 168px; } .mobile-toggle { position: relative; z-index: 1205; display: inline-grid !important; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid rgba(7, 88, 216, .2); border-radius: 14px; background: #fff !important; color: #071f42; box-shadow: 0 8px 20px rgba(6, 27, 54, .08); line-height: 1; transition: border-color .22s ease, box-shadow .22s ease, background .22s ease; } .mobile-toggle:focus:not(:focus-visible) { outline: none; } .mobile-toggle:focus-visible { outline: 2px solid rgba(0, 166, 223, .55); outline-offset: 3px; } .mobile-toggle-icon, .mobile-toggle-icon::before, .mobile-toggle-icon::after { display: block; width: 22px; height: 2px; border-radius: 999px; background: currentColor; transition: transform .24s ease, opacity .18s ease; } .mobile-toggle-icon { position: relative; } .mobile-toggle-icon::before, .mobile-toggle-icon::after { content: ""; position: absolute; left: 0; } .mobile-toggle-icon::before { transform: translateY(-7px); } .mobile-toggle-icon::after { transform: translateY(7px); } body.nav-open .mobile-toggle, .mobile-toggle.is-open { border-color: rgba(7, 31, 66, .18); background: #fff !important; box-shadow: 0 8px 20px rgba(6, 27, 54, .08); } .mobile-toggle.is-open .mobile-toggle-icon { transform: rotate(45deg); } .mobile-toggle.is-open .mobile-toggle-icon::before { transform: translateY(0) rotate(90deg); } .mobile-toggle.is-open .mobile-toggle-icon::after { opacity: 0; transform: translateY(0); } .mobile-nav-extras { display: none; } .site-header .navbar > .language-links, .site-header .navbar > .btn-primary { display: none !important; } .nav-links.mobile-open, body.nav-open .nav-links { position: fixed !important; inset: var(--mobile-header-height) 0 0 0 !important; display: grid !important; grid-template-columns: 1fr; align-content: start; gap: 0; max-height: none !important; height: calc(100svh - var(--mobile-header-height)); overflow-y: auto; padding: 28px 30px 28px !important; border: 0; border-radius: 0 !important; background: #fff !important; box-shadow: none; backdrop-filter: none; z-index: 990; transform-origin: top center; animation: mobileNavIn .26s ease both; } body.nav-open::before { content: none; } .nav-links.mobile-open a, body.nav-open .nav-links a { position: relative; display: flex !important; align-items: center; justify-content: flex-start; min-height: 62px; padding: 0 2px !important; border: 0; border-bottom: 1px solid rgba(220, 229, 242, .9); border-radius: 0 !important; color: #071f42; font-size: clamp(20px, 5vw, 25px); font-weight: 900; letter-spacing: -0.01em; background: transparent !important; box-shadow: none !important; opacity: 0; transform: translateY(14px); animation: mobileNavItemIn .36s ease forwards; } .nav-links.mobile-open > a:nth-of-type(1), body.nav-open .nav-links > a:nth-of-type(1) { animation-delay: .04s; } .nav-links.mobile-open > a:nth-of-type(2), body.nav-open .nav-links > a:nth-of-type(2) { animation-delay: .07s; } .nav-links.mobile-open > a:nth-of-type(3), body.nav-open .nav-links > a:nth-of-type(3) { animation-delay: .10s; } .nav-links.mobile-open > a:nth-of-type(4), body.nav-open .nav-links > a:nth-of-type(4) { animation-delay: .13s; } .nav-links.mobile-open > a:nth-of-type(5), body.nav-open .nav-links > a:nth-of-type(5) { animation-delay: .16s; } .nav-links.mobile-open > a:nth-of-type(6), body.nav-open .nav-links > a:nth-of-type(6) { animation-delay: .19s; } .nav-links.mobile-open > a:nth-of-type(7), body.nav-open .nav-links > a:nth-of-type(7) { animation-delay: .22s; } .nav-links.mobile-open a.active, body.nav-open .nav-links a.active { color: var(--primary); background: transparent !important; border-bottom-color: rgba(7, 88, 216, .34); } .nav-links.mobile-open a::after, body.nav-open .nav-links a::after { display: none !important; } .nav-links.mobile-open .mobile-nav-extras, body.nav-open .nav-links .mobile-nav-extras { display: grid; gap: 12px; padding-top: 20px; margin-top: 16px; border-top: 0; opacity: 0; transform: translateY(14px); animation: mobileNavItemIn .36s ease .26s forwards; } .nav-links.mobile-open .mobile-nav-extras .language-links, body.nav-open .nav-links .mobile-nav-extras .language-links { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100% !important; max-width: none !important; padding: 0; border: 0; background: transparent; box-shadow: none; transform: none !important; } .nav-links.mobile-open .mobile-nav-extras .language-links a, body.nav-open .nav-links .mobile-nav-extras .language-links a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(190, 211, 244, .9); background: #fff; color: #071f42; font-size: 13px; font-weight: 900; padding: 0 8px; width: auto !important; } .nav-links.mobile-open .mobile-nav-extras .language-links a.active, body.nav-open .nav-links .mobile-nav-extras .language-links a.active { color: #fff; background: var(--primary); border-color: var(--primary); } .nav-links.mobile-open .mobile-nav-extras .btn-primary, body.nav-open .nav-links .mobile-nav-extras .btn-primary { display: inline-flex !important; justify-content: center; min-height: 48px; border-radius: 999px; border-color: var(--primary) !important; background: var(--primary) !important; color: #fff !important; width: 100%; font-size: 15px; } .career-list-page .career-hero-panel { display: none !important; } .career-list-page .career-hero-grid, .career-hero-grid { display: block !important; } .career-list-page .career-hero, .career-list-page .page-photo-hero { min-height: auto !important; } .career-list-page .career-hero-copy { padding-block: clamp(64px, 18vw, 104px) !important; max-width: 100%; } .hero-home { min-height: min(620px, calc(100svh - var(--mobile-header-height))) !important; display: flex !important; align-items: center !important; overflow: hidden !important; background: #071b36 !important; } .hero-home .hero-visual-layer, .hero-home .hero-visual-photo { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 1 !important; } .hero-home .hero-visual-photo { background-image: var(--home-hero-bg) !important; background-size: cover !important; background-position: center center !important; filter: saturate(1.06) contrast(1.08) brightness(.58) !important; } .hero-home .hero-visual-photo::before { background: linear-gradient(180deg, rgba(3, 15, 33, .84) 0%, rgba(4, 18, 38, .72) 48%, rgba(3, 15, 33, .88) 100%), linear-gradient(90deg, rgba(4, 18, 38, .88), rgba(4, 18, 38, .62)) !important; opacity: 1 !important; } .hero-home .hero-visual-photo::after, .hero-home::before { background: linear-gradient(180deg, rgba(7, 88, 216, .12), rgba(3, 15, 33, .52)), linear-gradient(90deg, rgba(3, 15, 33, .34), rgba(7, 88, 216, .16)) !important; opacity: 1 !important; } .hero-home .hero-inner { position: relative !important; z-index: 2 !important; display: block !important; width: min(100% - 44px, var(--max)) !important; min-height: 0 !important; padding: clamp(58px, 14vw, 86px) 0 !important; } .hero-home .hero-content { max-width: 680px !important; margin-inline: auto !important; padding: 0 !important; text-align: center !important; color: #fff !important; text-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important; } .hero-home .hero-kicker { display: inline-block !important; max-width: 100% !important; color: #bcd8ff !important; font-size: 12px !important; line-height: 1.35 !important; letter-spacing: .08em !important; text-align: center !important; } .hero-home h1 { max-width: 11ch !important; margin: 16px auto 0 !important; color: #fff !important; font-size: clamp(34px, 10vw, 52px) !important; line-height: 1.05 !important; text-align: center !important; } .hero-home p { max-width: 32ch !important; margin: 22px auto 0 !important; color: rgba(255,255,255,.9) !important; font-size: clamp(16px, 4.2vw, 19px) !important; line-height: 1.7 !important; text-align: center !important; } .hero-home .hero-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: min(100%, 360px) !important; margin: 30px auto 0 !important; } .hero-home .hero-actions .btn { width: 100% !important; min-height: 56px !important; border-radius: 10px !important; } .hero-home .hero-side-panel, .hero-home .hero-side-grid, .hero-home .hero-side-glow, .hero-home .hero-trust-sphere, .hero-home .hero-trust-sphere-exact { display: none !important; } .home-highlights-section, .home-trust-strip, .hero-home + .info-strip, .hero-home + .home-trust-strip { margin-top: 0 !important; } } @media (max-width: 520px) { :root { --mobile-header-height: 76px; } body { padding-top: var(--mobile-header-height) !important; } .site-header .navbar { width: calc(100% - 28px); } .site-header .site-logo-mark, .site-header .site-logo-mark img, .site-header .logo-mark { width: 40px !important; height: 40px !important; flex-basis: 40px; } .site-header .site-logo-text img { max-width: 132px; } .mobile-toggle { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; } .nav-links.mobile-open, body.nav-open .nav-links { padding: 24px 24px 28px !important; } .hero-home { min-height: min(600px, calc(100svh - var(--mobile-header-height))) !important; } .hero-home .hero-inner { width: min(100% - 40px, var(--max)) !important; padding-block: clamp(50px, 13vw, 74px) !important; } } @media (max-width: 380px) { .site-header .site-logo-text img { max-width: 116px; } .nav-links.mobile-open a, body.nav-open .nav-links a { min-height: 54px; } } @keyframes mobileNavIn { from { opacity: .6; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes mobileNavItemIn { to { opacity: 1; transform: translateY(0); } } /* source: hero_card_spacing_clarity_194.css */ /* Upgrade 194 -- mobile-only hero clarity and first-card breathing room. Desktop hero and sphere rendering are intentionally untouched. */ @media (max-width: 780px) { .hero-home .hero-visual-photo, .page-photo-hero, .service-detail-hero.has-parallax-hero, .services-modern-hero.has-parallax-hero, .contact-hero.has-contact-hero-image, .contact-hero.contact-hero-parallax { image-rendering: auto; background-repeat: no-repeat !important; } .hero-home { min-height: auto !important; align-items: stretch !important; overflow: hidden !important; background: #03162f !important; } .hero-home .hero-visual-photo { position: absolute !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; background-color: #03162f !important; background-image: linear-gradient(180deg, rgba(3, 14, 31, .72), rgba(3, 14, 31, .78)), linear-gradient(90deg, rgba(3, 14, 31, .88) 0%, rgba(4, 18, 38, .68) 52%, rgba(4, 18, 38, .42) 100%), url("/media/services/list-page/services-hero.webp") !important; background-blend-mode: normal !important; background-size: cover !important; background-position: center center, center center, 74% 50% !important; filter: saturate(1.08) contrast(1.08) brightness(.86) !important; opacity: 1 !important; } .hero-home .hero-visual-photo::before { content: "" !important; position: absolute !important; inset: 0 !important; background: rgba(3, 14, 31, .22) !important; opacity: 1 !important; } .hero-home .hero-visual-photo::after { content: "" !important; position: absolute !important; inset: 0 !important; background: transparent !important; opacity: 0 !important; } .hero-home::before { opacity: 0 !important; } .hero-home .hero-inner { padding-block: clamp(70px, 18vw, 108px) clamp(58px, 14vw, 88px) !important; } .cms-page-home .hero-home + .home-trust-strip, .cms-page-home .hero-home + .info-strip, .home-highlights-section { margin-top: 22px !important; } .hero.dark.page-photo-hero + .section-sm, .hero.dark.page-photo-hero + .section, .services-modern-hero + .section-sm, .services-modern-hero + .section, .service-detail-hero + .section-sm, .service-detail-hero + .section, .project-detail-hero + .section-sm, .project-detail-hero + .section, .contact-hero + .section-sm, .contact-hero + .section, .career-hero + .section-sm, .career-hero + .section { padding-top: 52px !important; } .project-detail-hero + .project-stats-strip, .hero.dark.page-photo-hero + .info-strip, .hero.dark.page-photo-hero + .home-trust-strip { margin-top: 24px !important; } } @media (max-width: 520px) { .hero-home .hero-visual-photo { background-size: cover !important; background-position: center center, center center, 78% 50% !important; filter: saturate(1.08) contrast(1.08) brightness(.82) !important; } .hero-home .hero-inner { width: min(100% - 46px, var(--max)) !important; padding-block: 66px 58px !important; } .cms-page-home .hero-home + .home-trust-strip, .cms-page-home .hero-home + .info-strip { width: calc(100% - 48px) !important; margin-top: 24px !important; } } /* source: home_mobile_photo_visible_198.css */ /* Upgrade 198 -- make the mobile home hero photo visible, not frosted. Small-device only; desktop sphere/hero rules are intentionally untouched. */ @media (max-width: 980px) { .cms-page-home .hero-home { background-image: radial-gradient(circle at 50% 42%, rgba(7, 88, 216, .10), transparent 34%), linear-gradient(90deg, rgba(3, 13, 29, .84) 0%, rgba(4, 26, 61, .70) 42%, rgba(4, 26, 61, .46) 66%, rgba(3, 13, 29, .72) 100%), url("/media/pages/heroes/about-hero.webp") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: #03162f !important; isolation: isolate !important; } .cms-page-home .hero-home .hero-visual-layer, .cms-page-home .hero-home .hero-visual-photo { display: none !important; } .cms-page-home .hero-home::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; opacity: 1 !important; background: linear-gradient(90deg, rgba(4,18,39,.82) 0%, rgba(7,34,73,.58) 44%, rgba(4,18,39,.42) 100%), radial-gradient(circle at 50% 45%, rgba(7,88,216,.22), transparent 42%) !important; pointer-events: none !important; } .cms-page-home .hero-home::after { display: none !important; content: none !important; } .cms-page-home .hero-home .hero-inner { position: relative !important; z-index: 2 !important; width: min(100% - 34px, var(--max)) !important; padding-block: clamp(66px, 17vw, 98px) clamp(54px, 13vw, 80px) !important; } .cms-page-home .hero-home .hero-content { max-width: 720px !important; } .cms-page-home .hero-home h1 { max-width: 13.5ch !important; margin-top: 34px !important; } .cms-page-home .hero-home p { max-width: 38ch !important; margin-top: 24px !important; } } @media (max-width: 520px) { .cms-page-home .hero-home .hero-inner { width: min(100% - 32px, var(--max)) !important; padding-block: 62px 56px !important; } .cms-page-home .hero-home h1 { max-width: 13.8ch !important; font-size: clamp(32px, 9.2vw, 48px) !important; margin-top: 32px !important; } .cms-page-home .hero-home p { max-width: 37ch !important; } } /* source: mobile_site_polish_203.css */ /* Upgrade 203: mobile footer and card readability polish */ .project-card:not(.is-hidden), .project-result-card:not(.is-hidden), .project-featured-card:not(.is-hidden), [data-project-card]:not(.is-hidden) { opacity: 1 !important; filter: none !important; visibility: visible !important; } .project-card.is-hidden, .project-result-card.is-hidden, .project-featured-card.is-hidden, [data-project-card].is-hidden { display: none !important; } .project-gallery-showcase .project-slide::after, .project-gallery-showcase .project-gallery-caption { display: none !important; content: none !important; } .project-description-panel, .project-description-panel.has-frosted-visual { background: #fff !important; } .project-description-panel::before, .project-description-panel::after, .project-description-panel.has-frosted-visual::before, .project-description-panel.has-frosted-visual::after, .project-overview-blueprint { display: none !important; content: none !important; background: none !important; } @media (max-width: 760px) { .footer { padding: 42px 0 18px !important; background: radial-gradient(circle at 82% 18%, rgba(7, 88, 216, .18), transparent 34%), linear-gradient(145deg, #031126 0%, #061d3c 100%) !important; } .footer .container { width: min(100% - 32px, var(--max)) !important; } .footer-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; } .footer-grid > div { padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .10); } .footer-grid > div:first-child { padding-top: 0; } .footer-grid > div:last-child { padding-bottom: 0; border-bottom: 0; } .footer h4 { margin: 0 0 12px; color: #edf6ff; font-size: 12px; letter-spacing: .12em; } .footer .site-logo-lockup { width: min(100%, 320px); min-width: 0 !important; align-items: center; gap: 12px !important; margin: 0 0 14px !important; color: #fff; } .footer .site-logo-mark, .footer .site-logo-mark img { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; } .footer .site-logo-text { min-width: 0; } .footer .site-logo-text strong { display: block; color: #fff !important; font-size: clamp(20px, 6.4vw, 28px) !important; line-height: .95 !important; letter-spacing: .20em !important; text-shadow: 0 8px 24px rgba(0, 0, 0, .22); } .footer .site-logo-text small { display: block !important; margin-top: 5px; color: #cfe1f8 !important; font-size: 10px !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: 0 !important; } .footer p, .footer li, .footer a { line-height: 1.65; overflow-wrap: anywhere; text-wrap: pretty; } .footer p { max-width: 36ch; margin-bottom: 0; } .footer ul { gap: 8px; } .footer-social-block { margin-top: 18px !important; } .footer-social-links { gap: 10px !important; } .footer-mini-map { width: 100%; max-width: none !important; margin: 4px 0 14px; border-radius: 14px; overflow: hidden; } .footer-mini-map iframe { height: 170px !important; } .map-dots { min-height: 120px; margin-bottom: 14px; border-radius: 14px; background-color: rgba(255, 255, 255, .05); } .footer-bottom { display: grid !important; gap: 12px !important; align-items: start !important; margin-top: 26px !important; padding-top: 18px !important; color: #d9e8fb !important; font-size: 14px !important; line-height: 1.65 !important; } .footer-bottom > span:first-child { display: block; max-width: 34ch; } .footer-bottom-links { display: grid !important; width: 100%; gap: 10px !important; justify-items: start !important; text-align: left !important; } .footer-bottom-links > span:first-child { display: inline-flex; min-height: 30px; align-items: center; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; color: #edf6ff; background: rgba(255, 255, 255, .06); font-weight: 700; } .footer-dev-credit { display: flex !important; flex-wrap: wrap; gap: 6px 8px; color: #d6e6fb; line-height: 1.45; } .footer-dev-credit::before { display: none !important; } .footer-dev-credit a { color: #fff; border-bottom-color: rgba(255, 255, 255, .42); } } @media (max-width: 640px) { .grid, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .services-modern-grid, .project-results-grid, .project-grid, .projects-grid, .certificates-grid { grid-template-columns: 1fr !important; } .card, .service-modern-card, .project-card, .project-result-card, .contact-intro-card, .contact-form-card, .career-job-card, .home-highlight-card, .why-choose-card, .home-proof-simple-logo-card, .home-proof-simple-certificate-card { border-radius: 16px !important; overflow-wrap: anywhere; text-wrap: pretty; } .service-modern-card { min-height: 0 !important; } .service-card-thumb { height: 210px !important; } .service-card-thumb img, .service-card-thumb-placeholder { min-height: 210px !important; } .service-card-icon { position: relative !important; top: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; width: 74px !important; height: 74px !important; margin: -42px 0 18px 22px !important; border-radius: 18px !important; font-size: 1.7rem !important; } .service-card-body { padding: 0 22px 26px !important; gap: 14px; } .service-card-body h3, .project-card h3, .project-result-card h3 { max-width: 100%; margin-bottom: 0 !important; font-size: clamp(22px, 6.6vw, 28px) !important; line-height: 1.12 !important; letter-spacing: 0 !important; } .service-card-badge, .badge { max-width: 100%; white-space: normal; line-height: 1.28; text-align: start; } .service-card-body p, .project-card .project-body p, .project-result-card .project-body p, .card p { max-width: none; margin-bottom: 0; font-size: 16px; line-height: 1.68; } .service-card-arrow { margin-top: 4px !important; padding-top: 8px !important; } .project-card .project-body, .project-result-card .project-body { padding: 22px !important; gap: 12px; } .project-card .project-thumb, .project-result-card .project-thumb, .project-card > img.project-thumb, .project-result-card > img.project-thumb { height: 205px !important; max-height: 205px !important; } .project-stakeholder-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .project-stakeholder-card { display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; align-items: center !important; gap: 14px !important; min-height: 0 !important; padding: 18px !important; } .project-stakeholder-logo { width: 58px !important; height: 58px !important; } .project-stakeholder-card small { margin-bottom: 7px !important; font-size: 12px !important; letter-spacing: .14em !important; } .project-stakeholder-card strong { max-width: 100%; font-size: clamp(18px, 5.4vw, 22px) !important; line-height: 1.18 !important; letter-spacing: 0 !important; overflow-wrap: anywhere; } .btn { min-width: 0; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; } .project-filter-tabs, .career-department-rail { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; scroll-padding-inline: 0; } .project-filter-tab, .career-chip { max-width: 100%; } } @media (max-width: 420px) { .footer .site-logo-lockup { width: 100%; gap: 10px !important; } .footer .site-logo-mark, .footer .site-logo-mark img { width: 44px !important; height: 44px !important; flex-basis: 44px !important; } .footer .site-logo-text strong { font-size: clamp(19px, 6.2vw, 24px) !important; letter-spacing: .18em !important; } .footer .site-logo-text small { font-size: 9px !important; } .service-card-thumb { height: 190px !important; } .service-card-thumb img, .service-card-thumb-placeholder { min-height: 190px !important; } .service-card-body, .project-card .project-body, .project-result-card .project-body { padding-inline: 20px !important; } .service-card-icon { margin-inline-start: 20px !important; } .project-stakeholder-card { grid-template-columns: 52px minmax(0, 1fr) !important; gap: 12px !important; padding: 16px !important; } .project-stakeholder-logo { width: 52px !important; height: 52px !important; } .footer .container { width: min(100% - 28px, var(--max)) !important; } } @media (max-width: 760px) { html[dir="rtl"] .footer-bottom-links { text-align: right !important; justify-items: start !important; } } @media (max-width: 640px) { html[dir="rtl"] .service-card-icon { margin: -42px 22px 18px 0 !important; } } @media (max-width: 420px) { html[dir="rtl"] .service-card-icon { margin-inline-end: 20px !important; } } /* source: client_logo_rail_218.css */ /* Upgrade 218 — cardless, non-interactive trusted-client logo rail. */ .home-proof-simple-logo-slider{ min-height: 0; padding: 8px 0 18px; mask-image: none; -webkit-mask-image: none; } .home-proof-simple-logo-track, .home-proof-simple-logo-track-group{ min-height: 0; align-items: center; } .home-proof-simple-logo-track{ --client-slide-gap: clamp(50px, 5vw, 76px); --client-slide-half-gap: clamp(25px, 2.5vw, 38px); animation-name: homeClientSeamlessSlide218; animation-duration: 50s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: layout; will-change: transform; } .home-proof-simple-logo-slider.is-ready .home-proof-simple-logo-track{ animation-play-state: running; } /* * The track contains two identical groups separated by one flex gap. Moving by * half the track plus half that gap lands group two exactly where group one * started, making the animation reset visually identical to the previous frame. */ @keyframes homeClientSeamlessSlide218{ from{transform:translate3d(0,0,0);} to{transform:translate3d(calc(-50% - var(--client-slide-half-gap)),0,0);} } html[dir="rtl"] .home-proof-simple-logo-track{ animation-name:homeClientSeamlessSlide218 !important; } .home-proof-simple-logo-item{ flex: 0 0 clamp(210px, 17vw, 244px); min-width: 0; min-height: 116px; display: flex; align-items: center; justify-content: center; padding: 10px 8px; background: transparent; border: 0; border-radius: 0; box-shadow: none; pointer-events: none; user-select: none; overflow: hidden; } .home-proof-simple-logo-item .home-proof-simple-logo-media{ width: 100%; height: 82px; margin: 0; display: grid; place-items: center; } .home-proof-simple-logo-item .home-proof-simple-logo-media img{ width: auto; height: auto; max-width: 152px; max-height: 66px; object-fit: contain; object-position: center; filter: none; } .home-proof-simple-logo-item .home-proof-simple-logo-fallback{ width: auto; height: auto; border-radius: 0; background: transparent; color: var(--primary); } @media (max-width: 760px){ .home-proof-simple-logo-slider{ min-height: 0; padding-block: 6px 14px; } .home-proof-simple-logo-track, .home-proof-simple-logo-track-group{ min-height: 0; } .home-proof-simple-logo-track{ --client-slide-gap: 34px; --client-slide-half-gap: 17px; animation-duration: 42s; } .home-proof-simple-logo-item{ flex-basis: 156px; min-height: 96px; padding: 8px 6px; } .home-proof-simple-logo-item .home-proof-simple-logo-media{ height: 68px; } .home-proof-simple-logo-item .home-proof-simple-logo-media img{ max-width: 120px; max-height: 56px; } } /* source: vendor_company_logos_219.css */ /* Upgrade 219 — real SEC/Aramco branding in the shared trust strip. */ .home-trust-strip .info-icon--company-logo{ width: clamp(52px, 4.2vw, 58px); height: clamp(52px, 4.2vw, 58px); flex-basis: clamp(52px, 4.2vw, 58px); padding: 0; overflow: hidden; border-radius: 50%; border: 1px solid rgba(255,255,255,.24); background: #1b79b9; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 16px 32px rgba(0,19,62,.24); } .home-trust-strip .info-icon .info-icon-company-logo{ width: 100%; height: 100%; max-width: none; max-height: none; display: block; object-fit: contain; object-position: center; } @media (max-width: 640px){ .home-trust-strip .info-icon--company-logo{ width: 56px; height: 56px; flex-basis: 56px; } } /* source: project_category_tabs_220.css */ /* Upgrade 220 — compact project-category controls after adding telecom. */ @media (min-width: 761px){ .cms-page-projects-list .project-filter-tabs{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cms-page-projects-list .project-filter-tab{ width: auto; min-width: max-content; min-height: 48px; padding-inline: 18px; font-size: .94rem; text-align: center; } } /* source: project_client_logos_221.css */ /* Upgrade 221 — non-interactive, production-polished project client rail. */ .project-client-logo-slider{ padding-block:16px; border-color:rgba(174,199,230,.72); background:linear-gradient(180deg,#fff 0%,#f8fbff 100%); box-shadow:0 16px 42px rgba(7,31,65,.065); } .project-client-logo-track{ animation-duration:42s; animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform; transform:translate3d(0,0,0); backface-visibility:hidden; } /* Logo tiles are brand references, not navigation controls. */ .project-client-logo-slider:hover .project-client-logo-track, .project-client-logo-slider:focus-within .project-client-logo-track{ animation-play-state:running; } .project-client-logo-group{ gap:14px; } .project-client-logo-card{ width:178px; min-height:122px; grid-template-rows:54px auto; align-content:center; gap:9px; border-color:rgba(183,205,233,.68); border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 8px 22px rgba(7,31,65,.045); cursor:default; user-select:none; pointer-events:none; transition:none; } .project-client-logo-card:hover, .project-client-logo-card:focus-visible{ transform:none; border-color:rgba(183,205,233,.68); box-shadow:0 8px 22px rgba(7,31,65,.045); outline:0; } .project-client-logo-media{ width:100%; height:54px; } .project-client-logo-media img{ max-width:128px; max-height:50px; filter:none; } .project-client-logo-card strong{ max-width:150px; margin-inline:auto; font-size:12px; line-height:1.35; letter-spacing:-.01em; } @media (max-width:760px){ .project-client-logo-slider{padding-block:14px;} .project-client-logo-group{gap:10px;} .project-client-logo-card{ width:150px; min-height:108px; grid-template-rows:46px auto; padding:12px; } .project-client-logo-media{height:46px;} .project-client-logo-media img{max-width:112px;max-height:42px;} .project-client-logo-card strong{max-width:128px;font-size:11px;} } /* source: footer_brand_contact_225.css */ /* Footer brand/contact polish and shared lightweight logo presentation. */ .footer-grid { grid-template-columns: minmax(245px, 1.3fr) minmax(165px, .85fr) minmax(135px, .72fr) minmax(170px, .9fr) minmax(210px, 1.15fr); gap: clamp(26px, 3vw, 44px); } .footer .site-logo-lockup { color: #fff; margin-bottom: 18px; } .footer .site-logo-text strong { color: #fff !important; text-shadow: 0 8px 24px rgba(0, 0, 0, .24); } .footer .site-logo-text small { color: #cfe1f8 !important; } .footer-brand-column > p { max-width: 34ch; color: #d6e5f7; } .footer-email-list a { color: #e8f3ff; overflow-wrap: anywhere; transition: color .18s ease; } .footer-email-list a:hover { color: #72c9ff; } .footer-social-links a svg { width: 18px; height: 18px; fill: currentColor; } .footer-location { display: grid; gap: 7px; margin-top: 18px !important; } .footer-location strong { color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .footer-location a { color: #d6e5f7; line-height: 1.65; } .footer-location a:hover { color: #72c9ff; } @media (max-width: 1180px) and (min-width: 761px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }