@layer legacy { * { margin: 0; padding: 0; box-sizing: border-box }  button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }  button { background: none; border: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-brand); background: var(--offwhite); color: var(--ink); line-height: 1.75; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; line-height: 1.2; letter-spacing: 0 } h1, h2 { text-wrap: balance; } h1, h2, h3, p, a, span { overflow-wrap: break-word; } ::selection { background: var(--accent); color: #fff } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px } a { color: inherit; text-decoration: none } .skip-link { position: fixed; top: 14px; right: 24px; z-index: 2000; padding: 10px 16px; background: var(--charcoal); color: #fff; border-radius: var(--r); transform: translateY(-140%); transition: transform var(--dur-base) var(--ease-out); } .skip-link:focus { transform: translateY(0); }  i.ph { display: inline-block; line-height: 1; color: inherit; flex: 0 0 auto;  font-size: var(--ic-md); }  .project-card-img img, .why-media img, .news-card img, .story-image img { filter: saturate(.94) contrast(1.04); }  .sector-grid { display: grid; grid-template-columns: repeat(3, clamp(170px, 19vw, 232px)); justify-content: center; gap: 18px; } @media (min-width: 1600px) { .sector-grid { grid-template-columns: repeat(5, clamp(170px, 13vw, 210px)); } } .sector-card { position: relative; isolation: isolate; aspect-ratio: 1 / 1; display: flex; align-items: flex-end; border-radius: var(--r); background: var(--surface-inverse); }  .sector-card-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: var(--r); }  .sector-card-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.85) brightness(.92); transition: transform var(--dur-slow) var(--ease-out); }  .sector-card-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--image-overlay-rgb), .40) 0%, rgba(var(--image-overlay-rgb), .58) 40%, rgba(var(--image-overlay-rgb), .92) 100%); transition: opacity var(--dur-base) var(--ease-out); } .sector-card-media::after { content: ""; position: absolute; inset: 0; background: rgba(var(--image-overlay-rgb), .82); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .sector-card-body { position: relative; inline-size: 100%; padding: 22px 20px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: #fff; } .sector-card-mark { display: grid; place-items: center; inline-size: 40px; block-size: 40px; margin-bottom: 4px; border-radius: var(--r); background: rgba(255, 255, 255, .14); color: #fff; } .sector-card-mark i.ph { font-size: var(--ic-md); } .sector-card-title { font-family: var(--font-display); font-size: clamp(1.22rem, 1.5vw, 1.5rem); line-height: 1.25; margin: 0; color: #fff; } .sector-card-sub { color: rgba(255, 255, 255, .88); font-size: .92rem; line-height: 1.6; }  .sector-card-subs { color: var(--gold-on-dark); font-size: .82rem; line-height: 1.5; }  .sector-card-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: #fff; font-size: .88rem; font-weight: 800; opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .sector-card-action i.ph { font-size: var(--ic-sm); }  .sector-card-action.is-pending { color: rgba(255, 255, 255, .82); font-weight: 600; cursor: default; } .sector-card-action.is-pending .pending-val { color: currentColor; }  @media (hover: none) { .sector-card-action { opacity: 1; transform: none; } }  .sector-card-panel { position: absolute; right: max(20px, calc((100vw - var(--max)) / 2 + 20px)); left: max(20px, calc((100vw - var(--max)) / 2 + 20px)); bottom: 100%; margin-bottom: 14px; z-index: 6; display: grid; grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr); background: rgba(255, 255, 255, .98); color: var(--charcoal); border-radius: var(--r); box-shadow: 0 26px 70px rgba(0, 0, 0, .32); opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out); } .sector-card:hover .sector-card-panel, .sector-card:focus-within .sector-card-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .sector-card-panel-visual { min-height: 220px; background-size: cover; background-position: center; border-radius: var(--r); } .sector-card-panel-copy { padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; gap: 12px; text-align: left; } .sector-card-panel-copy h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--charcoal); } .sector-card-panel-copy p { color: var(--muted); line-height: 1.85; } .sector-card-panel-subs { color: var(--label); font-size: .86rem; } .sector-card-panel-link { width: fit-content; display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 700; margin-top: 4px; } .sector-card-panel-link i.ph { font-size: var(--ic-sm); } .sector-card-panel-link.is-pending { color: var(--pending); font-weight: 600; cursor: default; }  @media (hover: none) { .sector-card-panel { display: none; } } @media (max-width: 980px) { .sector-card-panel { display: none; } } .project-card:hover .project-card-img img, .why-card:hover .why-media img, .news-card:hover img, .story-item:hover .story-image img { filter: saturate(1) contrast(1.03) brightness(1); }  .project-card-img img[src$=".png"], .why-media img[src$=".png"], .project-card:hover .project-card-img img[src$=".png"], .why-card:hover .why-media img[src$=".png"] { filter: saturate(.55) contrast(1.06) brightness(.98) sepia(.1); }  [dir="rtl"] i.ph.icon--dir { transform: scaleX(-1); }   .pending-val { display: inline-block; inline-size: .62em; min-inline-size: 22px; block-size: .1em; min-block-size: 3px; background: currentColor; color: var(--pending); border-radius: var(--r); vertical-align: middle; }  .surface-inverse .pending-val, .cta .pending-val, .about-badge .pending-val, footer .pending-val { color: var(--pending-on-dark); }   header { position: fixed; top: 0; right: 0; left: 0; z-index: 1000; }  header::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 230px; z-index: -1; pointer-events: none;  background: linear-gradient(180deg, rgba(var(--image-overlay-rgb), .82) 0%, rgba(var(--image-overlay-rgb), .78) 45%, rgba(var(--image-overlay-rgb), .30) 78%, transparent 100%); transition: opacity var(--dur-base) var(--ease-out); } header.scrolled::before { opacity: 0; }  .nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: 0; color: #fff; transition: color var(--dur-base);  flex: 0 0 auto; } .logo img { display: block; width: auto; max-width: 220px; height: var(--logo-h); object-fit: contain; transition: height var(--dur-base) var(--ease-out); } header.scrolled .logo { color: var(--charcoal) } .menu { display: flex;  gap: clamp(12px, 1.55vw, 30px); align-items: center; flex: 1 1 auto; min-width: 0; justify-content: center; } .menu a { font-size: clamp(.86rem, .95vw, .95rem); font-weight: 500;  color: #fff; position: relative;  white-space: nowrap; transition: color var(--dur-base) } .menu a::after { content: ""; position: absolute; bottom: -6px; right: 0; width: 0; height: 1.5px; background: var(--accent); transition: width var(--dur-base) } .menu a:hover::after, .menu a.active::after { width: 100% } .menu-mobile-actions a::after { display: none; } header.scrolled .menu a { color: var(--ink) } .menu a.active { color: #fff; } header.scrolled .menu a.active { color: var(--accent-text); } .menu-mobile-actions { display: none; } .menu-lang, .menu-contact { display: none; } .nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .nav-icon { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--r); color: #fff; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .nav-icon i.ph { font-size: var(--ic-md); line-height: 1; } .nav-icon:hover { background: rgba(255, 255, 255, .14); } header.scrolled .nav-icon { color: var(--charcoal); } header.scrolled .nav-icon:hover { background: rgba(145, 8, 17, .1); color: var(--accent-text); } .nav-cta {  min-height: var(--cta-h); display: inline-flex; align-items: center; justify-content: center; padding: 0 clamp(18px, 1.8vw, 28px); background: var(--charcoal); border-radius: var(--r); font-size: .82rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; color: #fff; transition: min-height var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .nav-cta:hover { background: var(--accent); color: #fff; border-color: var(--accent); } header.scrolled .nav-cta { border-color: var(--charcoal); background: var(--charcoal); color: #fff } header.scrolled .nav-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff } .lang { font-size: .85rem; font-weight: 500; color: rgba(255, 255, 255, .8); cursor: pointer } header.scrolled .lang { color: var(--muted) } .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer;  min-inline-size: 44px; min-block-size: 44px; margin-inline-end: -9px; } .burger span { width: 26px; height: 2px; background: #fff; transition: var(--dur-base) } header.scrolled .burger span { background: var(--charcoal) } .menu-backdrop { position: fixed; inset: 0; z-index: 999; display: none; border: 0; background: rgba(var(--image-overlay-rgb), .38); backdrop-filter: blur(8px); cursor: pointer; } body.menu-open .menu-backdrop { display: block; }  .scroll-top { position: fixed; left: 24px; bottom: 24px; z-index: 999; width: 38px; height: 38px; border-radius: var(--r); background: rgba(65, 64, 66, .55); border: none; color: #fff; font-size: .95rem; line-height: 1; display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .scroll-top.visible { opacity: .55; pointer-events: auto; transform: none; } .scroll-top:hover, .scroll-top:focus-visible { background: var(--accent); opacity: 1; }   .hero { position: relative; min-height: max(680px, 100dvh); } .hero-bg { position: absolute; inset: 0; z-index: -2 } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); } .hero-slide.active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); } .hero-slide.active img { animation: slowZoom 7s ease-out forwards; } @keyframes slowZoom { to { transform: scale(1) } }  .hero::after {  background: none; content: ""; position: absolute; inset: 0; z-index: -1; }   .hero-glass { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; } .hero-glass span { position: absolute; top: -10%; height: 120%; width: 60px; border: 1px solid var(--brand-sweihan); border-radius: var(--r); background: color-mix(in srgb, var(--brand-sweihan) 8%, transparent); transform: skewX(-24deg); } .hero-glass .r1 { inset-inline-start: 68%; } .hero-glass .r2 { inset-inline-start: 78%; }  .hero-glass .r3 { inset-inline-start: 88%; border-color: color-mix(in srgb, var(--brand-sweihan) 55%, transparent); } @media (max-width: 920px) { .hero-glass { display: none; } }  .ribbon-frame { --ribbon-line: color-mix(in srgb, var(--brand-sweihan) var(--image-ribbon-line-strength), transparent); --ribbon-fill: color-mix(in srgb, var(--brand-sweihan) var(--image-ribbon-fill-strength), transparent); position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: var(--r); pointer-events: none; } .ribbon-frame::before { content: ""; position: absolute; right: 14%; top: var(--identity-band-top); width: var(--identity-band-width); height: var(--identity-band-height); border: var(--identity-band-border) solid var(--ribbon-line); border-radius: var(--r); background: var(--ribbon-fill); transform: skewX(-24deg); }  .project-card-img { position: relative; }  .about-visual .ribbon-frame::before { left: auto; right: 14%; }  .ribbon-frame--tall::before { right: auto; left: -4%; }  .needs-route:nth-child(even) .ribbon-frame--tall::before { left: auto; right: -4%; }  .hero-content { position: relative; width: min(100%, 860px); min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 120px 64px; max-width: 860px; }  .hero-content-row { display: flex; align-items: stretch; gap: 22px; } .hero-content-copy { flex: 1 1 auto; min-width: 0; text-align: left; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }  .hero-content::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--image-overlay-rgb), .04) 0%, rgba(var(--image-overlay-rgb), .10) 16%, rgba(var(--image-overlay-rgb), .68) 46%, rgba(var(--image-overlay-rgb), .76) 65%, rgba(var(--image-overlay-rgb), .80) 100%); }  .hero-content-copy.is-changing { opacity: 0; transform: translateY(14px); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 500; letter-spacing: 0;  color: #fff; margin-bottom: 22px }  .__removed-eyebrow-rule-hero { display: none } .hero h1 { font-size: clamp(2.25rem, min(4.75vw, 8svh), 4.18rem); color: #fff; font-weight: 700; margin-bottom: 22px; line-height: 1.16; text-wrap: balance; } .hero h1 .em { display: inline-block; color: #fff; background: var(--accent); padding: .02em .11em .09em; margin-inline: .075em; white-space: nowrap; vertical-align: baseline; line-height: inherit; -webkit-text-stroke: 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; } @media (max-width: 360px) { .hero h1 .em { margin-inline: .06em; } } .hero p { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255, 255, 255, .88); max-width: 560px; font-weight: 400; line-height: 1.8; } .hero-actions { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap } .btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px; font-weight: 500; font-size: 1rem; border-radius: var(--r); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); cursor: pointer; } .btn-primary { background: var(--accent); color: #fff } .btn-primary:hover { background: var(--accent-deep); color: #fff; box-shadow: 0 14px 30px rgba(145, 8, 17, .35); }  .btn-ghost {  border: 1px solid rgba(255, 255, 255, .6); color: #fff; } .btn-ghost:hover { border-color: #fff }  .more { position: relative; display: inline-block; } .more::after { content: ""; position: absolute; inset-block-end: -3px; inset-inline-start: 50%; inline-size: 100%; block-size: 1px; background: currentColor; opacity: .32; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } a:hover .more::after, .more:hover::after { transform: scaleX(1); opacity: 1; } .btn:hover .__arr-removed { transform: none }  .scroll-hint { position: absolute; top: calc(100dvh - 76px); left: 24px; z-index: 2; display: flex; align-items: center; gap: 10px;  color: rgba(255, 255, 255, .95); font-size: .8rem; letter-spacing: 0 }  .scroll-hint .dot { width: 2px; height: 34px; background: rgba(255, 255, 255, .28); position: relative; overflow: hidden; }  .scroll-hint .dot::after { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 3px; height: 8px; background: #fff; border-radius: var(--r); animation: scrollDot 2s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes scrollDot { 0% { opacity: 0; top: 4px } 20% { opacity: 1 } 72% { opacity: 1; top: 24px } 100% { opacity: 0; top: 24px } }  .hero-slides-ind { display: flex; flex-direction: column; gap: 10px; width: 3px; flex: 0 0 auto; } .hero-slide-line { flex: 1 1 0; width: 3px; padding: 0; border: 0; border-radius: var(--r); background: rgba(255, 255, 255, .28); cursor: pointer; position: relative; overflow: hidden; } .hero-slide-line::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 0; background: var(--accent); }  .hero-slide-line:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .hero-slide-line.active::before { transition: none; } }  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }  .reveal.armed { opacity: 1 !important; transform: none !important; } }   .impact { background: var(--surface-sunken-strong); padding: var(--sec-pad) 0; color: var(--ink); }  .impact-panel { position: relative; isolation: isolate; } .impact-main { display: grid; grid-template-columns: minmax(310px, .72fr) minmax(0, 1.18fr); gap: clamp(26px, 3.2vw, 46px); align-items: stretch; } .impact-visual { min-height: 520px; position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface-sunken-strong); } .impact-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); opacity: 1; } .impact-visual::after { content: ""; position: absolute; inset: 0;  background: linear-gradient(to bottom, rgba(var(--image-overlay-rgb), .76) 0%, rgba(var(--image-overlay-rgb), .76) 15%, transparent 46%), linear-gradient(to top, rgba(var(--image-overlay-rgb), .85) 0%, rgba(var(--image-overlay-rgb), .85) 20%, transparent 50%); } .impact-identity-strips { position: absolute; z-index: 1; top: 34%; left: clamp(24px, 8%, 42px); width: 92px; height: 32%; pointer-events: none; } .impact-identity-strips span { position: absolute; bottom: 0; width: 9px; transform: rotate(var(--brand-stripe-angle)); transform-origin: center; } .impact-identity-strips span:nth-child(1) { left: 4px; height: 72%; background: var(--brand-white); } .impact-identity-strips span:nth-child(2) { left: 26px; height: 100%; background: var(--brand-razeen); } .impact-identity-strips span:nth-child(3) { left: 50px; height: 84%; background: var(--brand-al-khatim); } .impact-identity-strips span:nth-child(4) { left: 74px; height: 58%; background: var(--brand-liwa); } .impact-visual-brand, .impact-visual-copy { position: absolute; z-index: 2; } .impact-visual-brand { top: 34px; right: 34px; display: flex; align-items: center; gap: 14px; color: #fff; font-size: .98rem; line-height: 1.7; }  .impact-visual-brand i.ph { color: var(--icon-on-dark); font-size: var(--ic-lg); line-height: 1; } .impact-visual-copy { right: 34px; bottom: 32px; left: 34px; color: rgba(255, 255, 255, .82); font-size: 1rem; line-height: 1.85; } .impact-content { min-width: 0; } .impact-head { text-align: left; max-width: 780px; margin: 0 0 34px; } .impact-kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--label); font-size: .84rem; font-weight: 800; letter-spacing: 0; margin-bottom: 18px; }  .__removed-impact-kicker-rules { display: none } .impact h2 { color: var(--ink); font-size: clamp(2.25rem, 4.6vw, 4.2rem); margin-bottom: 18px; } .impact-head p { color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.16rem); line-height: 1.9; } .impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; }  .impact-card { padding: 24px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; border-radius: var(--r);  background: var(--surface-raised); transition: background var(--dur-base) var(--ease-out); } .impact-card:hover { background: var(--surface-sunken); } .impact-number { font-family: var(--font-display); font-size: clamp(2.1rem, 3.4vw, 3rem); font-weight: 800; line-height: 1; color: var(--figure); letter-spacing: 0; } .impact-number .accent { color: var(--figure); }  .impact-rule { display: none; }  .impact-icon { order: -1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r); background: var(--icon-wash); color: var(--icon); transition: background var(--dur-base) var(--ease-out); }  .impact-card:hover .impact-icon { background: var(--icon-warm-wash); } .impact-icon i.ph { font-size: var(--ic-lg); line-height: 1; } .impact-card-body { min-width: 0; } .impact-label { color: var(--ink); font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 800; line-height: 1.25; } .impact-note { color: var(--muted); font-size: .84rem; margin-top: 8px; line-height: 1.55; } .impact-dots { display: none; } .impact-dots span { width: 4px; height: 4px; border-radius: var(--r); background: var(--gold); }  .impact-footer { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; padding: 0; background: none; color: var(--ink); } .impact-value { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 20px; border-radius: var(--r); background: var(--surface-raised); transition: background var(--dur-base) var(--ease-out); } .impact-value:hover { background: var(--surface-sunken); } .impact-value-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); background: var(--icon-wash); color: var(--icon); } .impact-value-icon i.ph { font-size: var(--ic-md); line-height: 1; } .impact-value h3 { color: var(--ink); font-size: 1.05rem; margin-bottom: 6px; } .impact-value p { color: var(--muted); font-size: .86rem; line-height: 1.6; }   .process { position: relative; overflow: hidden; padding: var(--sec-pad) 0; background: var(--surface-sunken); color: var(--ink); isolation: isolate; } .process-head {  margin-inline-start: auto; margin-bottom: 48px; text-align: left; } .process-kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--label); font-size: .86rem; font-weight: 800; letter-spacing: 0; margin-bottom: 18px; }  .__removed-process-kicker-rules { display: none } .process h2 { color: var(--ink); font-size: clamp(2.45rem, 5vw, 4.4rem); margin-bottom: 18px; } .process-head p { color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.16rem); line-height: 1.9; } .process-flow { display: grid;  grid-template-columns: repeat(auto-fit, minmax(max(180px, calc(100% / 6 + 1px)), 1fr)); gap: 22px; align-items: stretch; } .process-step { position: relative;  padding: 30px 24px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; border-radius: var(--r);  background: var(--surface-raised); transition: background var(--dur-base) var(--ease-out); }   .process-num { order: -1; font-family: var(--font-display); color: var(--icon); font-size: 1.05rem; font-weight: 700; line-height: 1; letter-spacing: 0; } .process-step h3 { color: var(--ink); font-size: clamp(1.25rem, 1.7vw, 1.6rem); margin: 0; } .process-line { display: none; } .process-icon { order: -2; width: 58px; height: 58px; display: grid; place-items: center; border-radius: var(--r); background: var(--icon-wash); color: var(--icon); margin: 0; transition: background var(--dur-base) var(--ease-out); }  .process-icon i.ph { font-size: var(--ic-lg); line-height: 1; } .process-summary { margin-top: 28px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 26px 34px; border-radius: var(--r); background: var(--surface-raised); } .process-summary strong { color: var(--ink); font-size: 1.25rem; padding-inline-start: 24px; white-space: nowrap; }  section { position: relative }  .pad { padding: var(--sec-pad) 0; background: var(--surface-base); }  .news-card, .why-card, .partner-card, .news-tabs, .news-subscribe, .about-values, .story-footer, .why-footer, .projects-footer, .project-tab { background: var(--card); border: 1px solid var(--line); }  section[id] { scroll-margin-top: 72px; } .sec-head { margin-bottom: var(--sec-head-gap); max-width: 680px } .kicker { font-size: .82rem; font-weight: 700; letter-spacing: 0; color: var(--label); display: flex; align-items: center; gap: 12px; margin-bottom: 20px }  .__removed-kicker-rule-about-projects-why-news-cta { display: none } .sec-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); color: var(--charcoal); margin-bottom: 18px } .sec-head p { font-size: 1.12rem; color: var(--muted); font-weight: 400; }  .sectors { background: var(--surface-sunken); }  .impact, .story, .partners { --label: var(--brand-jais); --pending: var(--brand-jais);  --figure: var(--ink); } .about { background: var(--surface-base); } .about-layout { direction: ltr; display: grid;  grid-template-columns: minmax(360px, 1fr) minmax(0, 1fr); gap: clamp(64px, 7vw, 132px); align-items: center; }   .about-visual { position: relative; } .about-visual img { width: 100%; object-fit: cover; border-radius: var(--r); filter: saturate(.94) contrast(1.04); } .about-badge { position: absolute; right: -36px; bottom: -28px; width: min(420px, 72%); padding: 34px 42px; border-radius: var(--r);  background: var(--surface-brand); color: #fff; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; } .about-badge i.ph { font-size: var(--ic-sm); line-height: 1; color: inherit; } .about-badge .big { font-family: var(--font-display); font-size: clamp(2.8rem, 4vw, 4.6rem);  color: #fff; line-height: .9; letter-spacing: 0; } .about-badge .label { margin-top: 8px; color: #fff; font-size: 1.05rem; font-weight: 700; } .about-badge .t { grid-column: 2; color: rgba(255, 255, 255, .72); font-size: .98rem; line-height: 1.7; } .about-content { direction: rtl; text-align: left;  container-type: inline-size; } .about-content .kicker { justify-content: flex-start; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--charcoal); margin-bottom: 30px; }  .about-title-line { white-space: nowrap; } .about-content h2 { max-width: 850px; color: var(--charcoal); font-size: clamp(2.6rem, 7cqi, 4.6rem); line-height: 1.12; margin: 0 0 34px; letter-spacing: 0; } .about-copy { max-width: 820px; margin-inline-start: auto; padding-inline-start: 28px; } .about-copy p { color: var(--ink); font-size: clamp(1.08rem, 1.25vw, 1.32rem); line-height: 2; margin: 0 0 14px; } .about-copy p:last-child { margin-bottom: 0; } .about-pillars { margin-top: 46px; display: grid;  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .about-icon, .about-value-icon { display: grid; place-items: center; } .about-icon { width: 74px; height: 74px; margin: 0 auto 20px; border-radius: var(--r); color: var(--icon); background: var(--icon-razeen-wash); }  .about-value-icon { color: var(--icon-warm-text); background: var(--icon-warm-fill); border-radius: var(--r); } .about-value-icon i.ph { font-size: var(--ic-lg); line-height: 1; } .about-pillar h3 { margin: 0 0 12px; color: var(--charcoal); font-size: 1.22rem; } .about-pillar p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.8; } .about-values { margin-top: 72px; padding: 32px 36px; border-radius: var(--r); background: var(--card); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0; } .about-value { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 0 28px; } .about-value:first-child { border-inline-start: 0; } .about-value h3 { margin: 0 0 8px; color: var(--charcoal); font-size: 1.1rem; } .about-value p { margin: 0; color: var(--muted); line-height: 1.65; font-size: .94rem; }  .featured-projects { background: var(--surface-base); } .projects-head { display: grid;  gap: 44px; align-items: end; margin-bottom: 54px; justify-content: space-between; align-items: end; } .projects-copy { text-align: left; max-width: 620px; margin-inline-start: auto; } .projects-copy h2 { color: var(--charcoal); font-size: clamp(2.3rem, 4.8vw, 4.2rem); margin-bottom: 18px; } .projects-copy p { color: var(--muted); font-size: 1.08rem; line-height: 1.9; } .project-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(130px, calc(20% + 1px)), 1fr)); gap: 18px; direction: rtl; } .project-tab { min-height: 62px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: var(--r); background: rgba(242, 242, 242, .72); color: var(--muted); font-size: .88rem; font-weight: 700; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .project-tab i.ph { font-size: var(--ic-sm); line-height: 1; } .project-tab { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .project-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(250px, calc(20% + 1px)), 1fr)); gap: 22px; } .project-card { overflow: hidden; border-radius: var(--r); background: var(--charcoal); transition: transform var(--dur-base) var(--ease-out); } .project-card:hover { background: var(--surface-sunken); } .project-card-img { height: 310px; overflow: hidden; background: var(--charcoal-soft); }  .project-card-img img[src$=".png"], .why-media img[src$=".png"] { object-position: 78% center; } .project-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out); } .project-card:hover .project-card-img img { transform: scale(var(--zoom)); }  .project-card-body { padding: 27px 28px 25px; color: var(--ink); background: var(--surface-sunken); } .project-type { display: block; color: var(--label); font-size: .82rem; font-weight: 800; margin-bottom: 8px; } .project-card h3 { color: var(--ink); font-size: 1.45rem; margin-bottom: 12px; } .project-card p { color: var(--muted); font-size: .94rem; line-height: 1.8; min-height: 76px; } .projects-footer { margin-top: 38px; display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 26px 30px; border-radius: var(--r); background: var(--card); } .projects-footer-cta { white-space: nowrap; background: var(--accent); color: #fff; font-weight: 700; } .projects-footer-cta:hover { background: var(--accent-deep); color: #fff; } .projects-footer-mark i.ph, .footer-mark i.ph { font-size: var(--ic-lg); line-height: 1; } .projects-footer h3 { color: var(--charcoal); font-size: 1.25rem; margin-bottom: 6px; } .projects-footer p { color: var(--muted); line-height: 1.7; }  .projects-footer-mark, .footer-mark { color: var(--icon); width: 50px; height: 50px; display: grid; place-items: center; padding-inline-end: 28px; }  .story { background: var(--surface-sunken-strong); color: var(--ink); overflow: hidden; } .story-head {  margin: 0 auto 58px; text-align: left; } .story-kicker { display: inline-flex; align-items: center; gap: 14px; color: var(--label); font-size: .86rem; font-weight: 800; margin-bottom: 18px; }  .__removed-story-kicker-rules { display: none } .story h2 { color: var(--charcoal); font-size: clamp(2.4rem, 5vw, 4.35rem); margin-bottom: 18px; } .story-head p { color: var(--muted); font-size: 1.08rem; line-height: 1.9; } .story-item { position: relative; direction: rtl; text-align: center; padding: 0 22px;  display: flex; flex-direction: column; }  .story-item>p { flex: 1 0 auto; } .story-dot { position: absolute; top: -43px; left: 50%; width: 24px; height: 24px; border-radius: var(--r); background: var(--icon); transform: translateX(-50%); } .story-year { font-family: var(--font-display); color: var(--figure); font-size: clamp(1.85rem, 3vw, 2.55rem); font-weight: 800; line-height: 1; margin-bottom: 24px; } .story-item h3 { color: var(--charcoal); font-size: 1.2rem; margin-bottom: 12px; } .story-item p { color: var(--muted); font-size: .94rem; line-height: 1.75; min-height: 96px; } .story-image { margin-top: 28px; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--warm-grey); } .story-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .story-item:hover .story-image img { transform: scale(var(--zoom)); } .story-achievement { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;  margin-top: auto; padding-top: 22px; text-align: left; } .story-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); color: var(--icon-warm-text); background: var(--icon-warm-fill); } .story-icon i.ph { font-size: var(--ic-md); line-height: 1; } .story-achievement strong { display: block; color: var(--charcoal); font-size: .98rem; margin-bottom: 4px; } .story-achievement span { color: var(--muted); font-size: .86rem; line-height: 1.55; } .story-footer { margin-top: 62px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 26px 30px; border-radius: var(--r); background: var(--card); } .story-footer p { color: var(--muted); line-height: 1.85; font-size: 1.02rem; padding-inline-start: 24px; }  .why { background: var(--surface-base); color: var(--ink) } .why .sec-head { max-width: 760px;  text-align: left; } .why .sec-head h2 { color: var(--charcoal) } .why .sec-head p { color: var(--muted) } .why .kicker { color: var(--label); }  .__removed-why-kicker-rule-recolour { display: none }  .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .why-card { display: grid; grid-template-columns: minmax(160px, 34%) 1fr; overflow: hidden; border-radius: var(--r); background: var(--card); transition: transform var(--dur-base) var(--ease-out); } .why-card:hover { background: var(--surface-sunken); } .why-media { position: relative; overflow: hidden;  background: var(--surface-sunken-strong); }  .why-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); } .why-card:hover .why-media img { transform: scale(var(--zoom)); } .why-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--image-overlay-rgb), .12) 0%, rgba(var(--image-overlay-rgb), .34) 45%, rgba(var(--image-overlay-rgb), .88) 100%); }   .why-ic { position: absolute; inset-block-end: 0; inset-inline-start: 0; z-index: 1; width: 62px; height: 62px; display: grid; place-items: center; color: var(--icon-warm-text); background: var(--icon-warm-fill); } .why-ic i.ph { font-size: var(--ic-lg); line-height: 1; } .why-card-body { padding: 30px 30px 32px; text-align: left; } .why-card h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); color: var(--charcoal); margin-bottom: 12px; } .why-card h3::after { content: none; display: block; width: 34px; height: 2px; background: var(--accent); margin-top: 12px; } .why-card p { color: var(--muted); font-weight: 400; font-size: .98rem; line-height: 1.85; margin-bottom: 22px; } .why-card ul { list-style: none; display: grid; gap: 10px; color: var(--muted); font-size: .92rem; line-height: 1.65; } .why-card li { position: relative; padding-inline-start: 18px; } .why-card li::before { content: ""; position: absolute; top: .75em; inset-inline-start: 0; width: 6px; height: 6px; border-radius: var(--r); background: var(--accent); } .why-footer { margin-top: 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 26px 30px; border-radius: var(--r); background: var(--card); } .why-footer p { color: var(--muted); line-height: 1.85; font-size: 1.04rem; text-align: left; padding-inline-start: 24px; }  .partners { background: var(--surface-sunken-strong); } .partners-head { max-width: 820px; margin: 0 auto 58px; text-align: center; } .partners-kicker { display: inline-flex; align-items: center; gap: 14px; color: var(--label); font-size: .86rem; font-weight: 800; margin-bottom: 18px; }  .__removed-partners-kicker-rules { display: none } .partners h2 { color: var(--charcoal); font-size: clamp(2.35rem, 5vw, 4.25rem); margin-bottom: 18px; } .partners-head p { color: var(--muted); font-size: 1.08rem; line-height: 1.9; }  .partners-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(190px, calc(100% / 6 + 1px)), 1fr)); gap: 20px; } .partner-card { min-height: 300px; padding: 34px 26px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: var(--r); background: var(--card); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .partner-card:hover { border-color: rgba(221, 177, 118, .32); background: var(--surface-sunken-strong); } .partner-logo i.ph { font-size: var(--ic-xl); color: var(--muted); } .partner-logo { min-height: 74px; display: grid; place-items: center; margin-bottom: 24px; font-family: var(--font-display); font-weight: 800; line-height: 1; } .partner-card h3 { color: var(--charcoal); font-size: 1.18rem; margin-bottom: 14px; } .partner-card h3::after { content: none; display: block; width: 34px; height: 2px; margin: 14px auto 0; background: var(--accent); } .partner-card p { color: var(--muted); font-size: .94rem; line-height: 1.8; flex: 1; } .partner-domain { color: var(--pending); font-size: .85rem; font-weight: 800; margin-top: 22px; } .partners-trust { margin-top: 42px; position: relative; overflow: hidden; display: grid;  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); gap: 0; align-items: center; border-radius: var(--r);  background: var(--surface-raised); color: var(--ink); } .partners-trust-copy { padding: 34px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; } .partners-trust-icon { width: 54px; height: 54px;  color: var(--icon); } .partner-stat i.ph { font-size: var(--ic-md); line-height: 1; } .partners-trust h3 { color: var(--ink); font-size: 1.32rem; margin-bottom: 8px; } .partners-trust p { color: var(--muted); line-height: 1.75; font-size: .95rem; } .partner-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 4px; padding: 22px; } .partner-stat { padding: 14px 16px; text-align: center; } .partner-stat strong { display: block; color: var(--figure); font-family: var(--font-display); font-size: 2rem; line-height: 1; margin-bottom: 10px; } .partner-stat span { display: block; color: var(--ink); font-weight: 800; margin-bottom: 6px; } .partner-stat small { color: var(--muted); line-height: 1.6; }  .news-section { background: var(--surface-base); } .news-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 34px; max-width: none; margin-bottom: 30px; } .news-head h2 { margin: 0; } .news-head p { max-width: 620px; margin: 16px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.8; } .news-all { min-height: 44px; padding: 0 26px; border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-text); font-weight: 700; white-space: nowrap; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .news-all:hover { background: var(--accent); color: #fff; }  .news-pending { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 2.4vw, 34px); align-items: center; padding: clamp(34px, 4vw, 56px); border-radius: var(--r); background: var(--card); border: 1px dashed var(--line); } .news-pending-icon { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: var(--r); background: var(--surface-sunken); color: var(--muted); } .news-pending-icon i.ph { font-size: var(--ic-lg); } .news-pending h3 { margin: 0 0 8px; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--ink); } .news-pending p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.85; } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(250px, calc(20% + 1px)), 1fr)); gap: 24px; align-items: stretch; } .news-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--card); border-radius: var(--r); cursor: pointer; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .news-card .img { overflow: hidden; aspect-ratio: 16 / 9.7; height: auto; margin-bottom: 0; background: #ddd; } .news-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) } .news-card:hover, .news-card:focus-within { background: #fff; border-color: rgba(145, 8, 17, .34); } .news-body { display: flex; flex-direction: column; align-items: flex-start; min-height: 270px; padding: 24px 26px; } .news-card .date { margin-top: 14px; font-size: .86rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0; }  .news-category { color: var(--label); font-size: .84rem; font-weight: 800; } .news-card h3 { font-size: clamp(1.05rem, 1.35vw, 1.28rem); color: var(--charcoal); margin: 18px 0 0; line-height: 1.5; transition: color var(--dur-base) } .news-card p { margin: 14px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.8; } .news-card:hover h3 { color: var(--accent-text); } .news-card .more { min-height: 44px; margin-top: auto; font-size: .92rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px } .news-subscribe { margin-top: 48px; min-height: 116px; padding: 24px 32px; border-radius: var(--r); background: var(--card); display: grid; grid-template-columns: 1fr minmax(320px, .8fr) auto; gap: 28px; align-items: center; } .news-subscribe-copy { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; } .news-subscribe-icon { width: 52px; aspect-ratio: 1; border-radius: var(--r); color: var(--icon); display: grid; place-items: center; } .news-subscribe-icon i.ph, .news-social a i.ph { font-size: var(--ic-sm); line-height: 1; } .news-subscribe h3 { margin: 0; color: var(--charcoal); font-size: 1.12rem; } .news-subscribe p { margin: 6px 0 0; color: var(--muted); line-height: 1.7; }  .news-form { position: relative; min-width: 0; display: flex; align-items: stretch; gap: 0; padding: 5px; border-radius: var(--r); background: var(--surface-sunken); transition: background var(--dur-base) var(--ease-out); }  .news-form::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 100%; block-size: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out); } .news-form:focus-within::after { transform: scaleX(1); } .news-form input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 16px; border: 0; border-radius: var(--r); background: none; color: var(--charcoal); font: inherit; outline: 0; } .news-form input::placeholder { color: var(--muted); } .news-form button { position: relative; overflow: hidden; flex: 0 0 auto; min-height: 46px; padding: 0 26px; border-radius: var(--r); background: var(--accent-deep); color: #fff; font: inherit; font-weight: 700; cursor: pointer; z-index: 0; }  .news-social { padding-inline-start: 28px; display: flex; align-items: center; gap: 12px; color: var(--charcoal); font-weight: 800; white-space: nowrap; } .news-social a { width: 42px; aspect-ratio: 1; border-radius: var(--r); color: var(--icon); display: grid; place-items: center; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .news-social a:hover { background: var(--accent); color: #fff; }    .cta { position: relative; color: #fff; overflow: hidden; margin: 0; display: grid; align-items: center; background: var(--surface-inverse-soft); }  .cta-inner { width: min(980px, 100%); margin: 0 auto; padding: calc(var(--sec-pad) * 1.35) 0; text-align: center; } .cta .kicker { color: var(--gold-on-dark); justify-content: center; margin-bottom: 30px; } .cta h2 { font-size: clamp(3rem, 6vw, 5.4rem); color: #fff; margin: 0 auto 26px; line-height: 1.16; } .cta p { max-width: 720px; margin: 0 auto 54px; font-size: clamp(1.1rem, 1.55vw, 1.42rem); color: rgba(255, 255, 255, .8); font-weight: 400; line-height: 1.9; } .cta-actions { display: grid;  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1120px; margin: 0 auto; }   .cta-action { padding: 30px 22px 26px; border-radius: var(--r); background: var(--surface-raised); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; font-weight: 700; font-size: 1.02rem; text-align: center; transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .cta-action i.ph { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: var(--r);  background: var(--accent-wash); color: var(--accent-text); font-size: var(--ic-md); line-height: 1; flex: 0 0 auto; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .cta-action .cta-action-note { font-weight: 400; font-size: .92rem; line-height: 1.7; color: var(--muted); } .cta-action .arr { color: rgba(255, 255, 255, .82); font-size: 1.35rem; }  footer {  background: var(--scrim-footer); backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);  color: rgba(255, 255, 255, .96); font-weight: 600; padding: 80px 0 36px;  padding-bottom: max(36px, calc(96px + env(safe-area-inset-bottom))); } .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 40px; padding-bottom: 56px; } .foot-brand .logo { color: #fff; font-size: 1.9rem; margin-bottom: 20px; display: inline-block } .foot-brand p { font-weight: 400; max-width: 300px; font-size: .98rem; } .foot-col h4 { font-family: var(--font-display); color: #fff; font-size: 1.05rem; margin-bottom: 22px; font-weight: 500 } .foot-col a, .foot-col .foot-pending { display: block; margin-bottom: 13px; font-size: .95rem; font-weight: 400; transition: color var(--dur-base) } .foot-col a { color: #fff; }  .foot-col .foot-pending { color: var(--muted-on-dark); cursor: default; } .foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; flex-wrap: wrap; gap: 16px } .foot-bottom .socials { display: flex; gap: 14px } .foot-bottom .socials a { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: rgba(255, 255, 255, .12); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .foot-bottom .socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .foot-bottom .socials i.ph { font-size: var(--ic-sm); line-height: 1; } .copy { font-size: .85rem; }    @keyframes hero-reveal { from { opacity: 0; visibility: hidden; transform: translateY(30px); } .1% { visibility: visible; } to { opacity: 1; visibility: visible; transform: none; } }   .hero .reveal { animation-name: hero-reveal; animation-duration: var(--dur-base); animation-timing-function: var(--ease-out); animation-fill-mode: both; } .hero h1 { animation-delay: calc(var(--dur-fast) * 1); } .hero p { animation-delay: calc(var(--dur-fast) * 2); } .hero .hero-actions { animation-delay: calc(var(--dur-fast) * 3); } .hero .hero-slides-ind { animation-delay: calc(var(--dur-fast) * 4); }  @media(max-height:900px) and (min-width:981px) { .hero { min-height: 760px; } .hero-content { width: min(100%, 780px); max-width: 780px; padding-block: 96px 48px; } .hero h1 { font-size: clamp(2.25rem, min(4.05vw, 6.9svh), 3.55rem); line-height: 1.18; margin-bottom: 16px; } .hero p { max-width: 540px; font-size: clamp(.98rem, 1.35vw, 1.14rem); line-height: 1.72; } .hero-actions { margin-top: 26px; } .scroll-hint { top: calc(100dvh - 68px); } } @media(max-width:1500px) and (min-width:981px) { .wrap { width: min(calc(100% - 84px), var(--max)); }  .nav-cta { letter-spacing: 0; } .logo img { max-width: 180px; } .menu { gap: 22px; } .nav-actions { gap: 8px; } .nav-cta { padding-inline: 20px; } .hero-content { width: min(100%, 800px); max-width: 800px; } .hero h1 { font-size: clamp(2.35rem, min(4.25vw, 7.4svh), 3.85rem); line-height: 1.17; } .hero p { max-width: 540px; }  .about-content h2 { font-size: clamp(3rem, 4.85vw, 5.15rem); line-height: 1.14; } .impact-head h2, .process-head h2, .projects-copy h2, .story-head h2, .why .sec-head h2, .partners-head h2, .news-head h2 { font-size: clamp(2.2rem, 4vw, 3.65rem); line-height: 1.18; } .cta h2 { font-size: clamp(2.65rem, 5vw, 4.6rem); } } @media(max-width:1180px) { .menu { gap: 22px; } .nav-actions { gap: 8px; } .nav-cta { padding: 0 20px; letter-spacing: 0; } .impact-main { grid-template-columns: minmax(280px, .62fr) minmax(0, 1fr); } } @media(max-width:980px) { .cta-actions, .about-pillars { grid-template-columns: 1fr; }  .news-pending { grid-template-columns: 1fr; gap: 20px; }  .sector-card-action { opacity: 1; transform: none; }  .hero { height: auto; min-height: 0; display: block; }  .hero-content { min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; }  .scroll-hint { display: none; } .hero-sectors { position: static; padding-block: 22px clamp(28px, 6vw, 40px); background: var(--surface-inverse); }  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .hero-sectors-label { color: rgba(255, 255, 255, .7); } .menu, .nav-cta { display: none } .menu.open { display: flex; position: fixed; top: 74px; right: 20px; left: 20px; z-index: 1001; flex-direction: column; align-items: center; background: var(--offwhite); padding: 28px 32px; gap: 22px; } .menu.open a { min-height: 44px; display: flex; align-items: center; color: var(--ink); } .menu.open .menu-mobile-actions { width: 100%; display: flex; flex-direction: column; gap: 22px; padding-top: 12px; } .menu.open .menu-lang { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between; color: var(--charcoal); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; } .menu.open .menu-lang::after { content: "›"; color: var(--charcoal); font-size: 2.2rem; line-height: 1; } .menu.open .menu-contact { width: 100%; min-height: 58px; display: flex; justify-content: center; background: var(--charcoal); color: #fff; border-radius: var(--r); font-size: .88rem; font-weight: 800; letter-spacing: 0; } .menu.open .menu-contact:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .nav-actions>.lang { display: none; } .nav { gap: 18px; } .logo img { max-width: 180px; height: 42px; } .hero { min-height: 640px; } .hero-content { padding-block: 90px 40px; } .hero h1 { font-size: clamp(2.05rem, 6.1vw, 3.35rem); line-height: 1.2; max-width: 760px; } .hero p { max-width: 620px; } .hero-actions { width: min(100%, 620px); } .hero-actions .btn { flex: 1 1 230px; justify-content: center; min-height: 54px; } .burger { display: flex } .impact-main { grid-template-columns: 1fr; } .impact-visual { min-height: 360px; } .process-head { margin-inline-start: 0; } .about-layout { grid-template-columns: 1fr; gap: 56px; } .about-content h2 { font-size: clamp(3rem, 8vw, 5.2rem); } .about-pillar { border-inline-start: 0; padding: 28px 18px; } .about-pillar:first-child { border-top: 0; } .about-values { gap: 28px 0; } .about-badge { right: 24px; bottom: -22px; } .projects-head { grid-template-columns: 1fr; align-items: start; } .projects-copy { margin-inline-start: 0; } .project-tabs { order: 2; } .project-card-img { height: 260px; } .projects-footer { grid-template-columns: auto 1fr; } .projects-footer-mark { display: none; } .story-timeline { gap: 42px 0; } .story-timeline::before { display: none; } .story-item { border-inline-start: 0; } .story-dot { display: none; } .story-item p { min-height: 0; } .story-footer { grid-template-columns: auto 1fr; } .story-footer .btn { grid-column: 1 / -1; justify-content: center; } .why-footer { grid-template-columns: auto 1fr; } .why-footer .footer-mark { display: none; } .partners-trust { grid-template-columns: 1fr; } .partner-stat { border-inline-start: 0; } .news-head { flex-direction: column; align-items: stretch; margin-bottom: 36px; } .news-head p { max-width: none; } .news-all { align-self: flex-start; } .news-tabs { width: 100%; margin-bottom: 34px; } .news-grid { gap: 18px; } .news-card .img { aspect-ratio: 16 / 10; } .news-body { padding: 22px; } .news-subscribe { grid-template-columns: 1fr; padding: 26px 24px; } .news-form { max-width: 560px; } .news-social { padding-inline-start: 0; padding-top: 22px; border-inline-start: 0; } .cta-inner { padding: var(--sec-pad) 0; } .cta-actions { max-width: 620px; } .foot-grid { grid-template-columns: 1fr 1fr } } @media(max-width:560px) { .wrap { padding: 0 20px } .pad { padding: var(--sec-pad) 0 }  .nav-actions { gap: 6px; } .logo img { max-width: min(42vw, 158px); height: var(--logo-h); } .nav-icon { width: 40px; height: 40px; } .nav-icon i.ph { font-size: var(--ic-sm); line-height: 1; } .burger { width: 40px; height: 40px; align-items: center; justify-content: center; } .burger span { width: 24px; } .hero { min-height: 820px; } .hero-content { padding-block: 70px 32px; } .hero h1 { font-size: clamp(1.72rem, 7.6vw, 2.28rem); line-height: 1.22; margin-bottom: 18px; } .hero p { font-size: .98rem; line-height: 1.8; } .hero-actions { gap: 12px; margin-top: 28px; } .hero-actions .btn { width: 100%; flex-basis: 100%; justify-content: center; min-height: 52px; } .scroll-top { left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: 34px; height: 34px; font-size: .9rem; } .impact { padding: var(--sec-pad) 0; } .about { padding: var(--sec-pad) 0; } .about-layout { gap: 46px; } .about-visual img { border-radius: var(--r); } .about-badge { width: calc(100% - 28px); right: 14px; bottom: -26px; padding: 24px 24px; } .about-badge .big { font-size: 2.7rem; } .about-badge .t { grid-column: 1 / -1; } .about-content h2 { font-size: clamp(2.35rem, 12vw, 3.6rem); margin-bottom: 24px; } .about-copy { padding-inline-start: 18px; } .about-copy p { font-size: 1rem; } .about-pillars { margin-top: 34px; } .about-values { margin-top: 42px; padding: 24px 20px; } .about-value { border-inline-start: 0; padding: 22px 0 0; } .about-value:first-child { border-top: 0; padding-top: 0; } .impact-panel { padding: 34px 18px 28px; } .impact-grid { gap: 10px; } .impact-card { padding: 20px 18px; gap: 12px; } .impact-icon { width: 44px; height: 44px; } .impact-note { font-size: .74rem; } .impact-value { padding: 18px 16px; } .impact-value:first-child { border-top: 0; padding-top: 0; } .process { padding: var(--sec-pad) 0; } .process-head { margin-bottom: 34px; } .process-flow { gap: 38px; } .process-step { min-height: 0; padding: 28px 22px 26px; } .process-step:not(:last-child)::after { content: "⌄"; top: auto; right: 50%; left: auto; bottom: -32px; width: 42px; height: 42px; font-size: 1.55rem; transform: translateX(50%); } .process-summary { grid-template-columns: 1fr; gap: 14px; padding: 24px 20px; } .process-summary strong { width: fit-content; } .projects-head { gap: 26px; margin-bottom: 34px; } .project-tabs { gap: 10px; } .project-tab { min-height: 56px; } .project-card-img { height: 245px; } .project-card-body { padding: 24px 22px 22px; } .projects-footer { grid-template-columns: 1fr; padding: 24px 22px; } .projects-footer-cta { justify-self: start; } .story-head { margin-bottom: 36px; } .story-timeline { gap: 0; padding-top: 0; direction: rtl; } .story-item { display: grid; grid-template-columns: 84px 1fr; gap: 0 20px; padding: 0 0 34px; text-align: left; border-inline-start: 0; padding-inline-end: 24px; } .story-item:last-child { padding-bottom: 0; } .story-year { grid-row: 1 / span 4; font-size: 1.8rem; margin: 0; } .story-image { margin-top: 18px; } .story-achievement { margin-top: 18px; } .story-footer { grid-template-columns: 1fr; padding: 24px 22px; } .story-footer p { border-inline-start: 0; padding-inline-start: 0; } .why .sec-head { margin-bottom: 34px; }  .why-grid { grid-template-columns: 1fr; } .why-card { grid-template-columns: 1fr; } .why-media { height: 220px; } .why-card-body { padding: 26px 22px 28px; } .why-footer { grid-template-columns: 1fr; padding: 24px 22px; } .why-footer p { text-align: left; } .partners-head { margin-bottom: 34px; } .partner-card { min-height: 0; padding: 30px 22px 26px; } .partners-trust-copy { grid-template-columns: 1fr; padding: 28px 24px; } .partner-stat { padding: 26px 22px; } .news-tabs { border-radius: var(--r); padding: 6px; } .news-tab { min-height: 40px; padding: 0 16px; } .news-body { min-height: 0; } .news-subscribe { gap: 22px; padding: 24px 20px; } .news-subscribe-copy { grid-template-columns: 1fr; } .news-form { flex-wrap: wrap; } .news-form input { flex-basis: 100%; } .news-form button { flex: 1 1 100%; } .news-social { flex-wrap: wrap; white-space: normal; } .cta-inner { padding: 88px 0; } .cta h2 { font-size: clamp(2.35rem, 13vw, 3.6rem); } .cta h2 br { display: none; } .cta p { margin-bottom: 34px; } .cta-action { min-height: 74px; padding: 0 20px; font-size: .98rem; } .foot-grid { grid-template-columns: 1fr } } @media(max-width:420px) { .nav { gap: 10px; } .logo img { max-width: min(39vw, 146px); } .lang { display: none; } .nav-actions { gap: 4px; } } .h-\[3rem\] { height: 3rem }   .project-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); overflow: hidden; border-radius: var(--r); } .project-card { min-width: 0; height: 100%; display: grid; grid-template-rows: clamp(220px, 22vw, 310px) 1fr; background: var(--surface-sunken); border-radius: var(--r); } .project-card-img { height: auto; } .project-card-body { min-height: 100%; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 34px); } .project-card p { min-height: 0; flex: 1 1 auto; } .projects-footer { margin-top: 1px; border: 0; background: var(--surface-warm); padding: clamp(26px, 3vw, 38px); } .projects-footer h3, .projects-footer p { color: var(--ink); }  .story-timeline { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); grid-template-rows: repeat(5, auto); gap: 0; padding-top: 0; margin-top: clamp(48px, 6vw, 82px); direction: rtl; } .story-timeline::before { top: 0; bottom: 0; right: 50%; left: auto; width: 2px; height: auto; transform: translateX(50%); background: var(--icon-warm-fill); } .story-item { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(180px, .95fr); grid-template-rows: auto auto 1fr; gap: 0 clamp(24px, 3vw, 42px); align-items: start; padding: clamp(26px, 3.2vw, 42px); margin: 0 0 clamp(30px, 4vw, 54px); background: var(--surface-raised); text-align: left; border-radius: var(--r); } .story-item:nth-child(odd) { grid-column: 1; margin-inline-end: 0; } .story-item:nth-child(even) { grid-column: 3; margin-inline-start: -17px; } .story-item:nth-child(1) { grid-row: 1; } .story-item:nth-child(2) { grid-row: 2; } .story-item:nth-child(3) { grid-row: 3; } .story-item:nth-child(4) { grid-row: 4; } .story-item:nth-child(5) { grid-row: 5; } .story-dot { top: clamp(30px, 3.2vw, 42px); left: auto; right: auto; width: 18px; height: 18px; transform: none; background: var(--accent); outline: 8px solid var(--surface-sunken-strong); } .story-item:nth-child(odd) .story-dot { left: calc(-40px - 9px); right: auto; } .story-item:nth-child(even) .story-dot { right: calc(-40px - 9px); left: auto; } .story-item h3 { grid-column: 1; margin-bottom: 12px; font-size: clamp(1.25rem, 1.8vw, 1.65rem); } .story-image { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; min-height: 230px; margin: 0; aspect-ratio: auto; } .story-footer .btn { min-height: 54px; justify-content: center; text-align: center; line-height: 1.45; }  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); overflow: hidden; border-radius: var(--r); } .why-card { min-width: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: clamp(280px, 30vw, 390px) 1fr; border-radius: var(--r); background: var(--surface-raised); } .why-media img { position: relative; } .why-card-body { padding: clamp(28px, 3.4vw, 46px); } .why-card h3 { min-height: 0; }  .partners-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); overflow: hidden; border-radius: var(--r); } .partner-card { min-width: 0; min-height: 360px; border-radius: var(--r); background: var(--surface-raised); } .partner-logo { width: 100%; min-height: 88px; color: var(--ink); font-family: Arial, sans-serif; font-size: clamp(1.45rem, 2.2vw, 2rem); letter-spacing: 0; } .partner-logo span { font-size: .62em; letter-spacing: 0; } .partner-logo.schneider { color: var(--brand-liwa); } .partner-logo.abb { color: var(--brand-liwa); font-weight: 900; } .partner-logo.carrier { color: var(--brand-jais); font-weight: 500; } .partner-logo.honeywell { color: var(--brand-liwa); font-weight: 700; } .partner-logo.johnson { color: var(--brand-jais); } .partners-trust { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.5fr); background: var(--surface-raised); } .partner-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0; background: var(--line); } .partner-stat { min-width: 0; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 18px; background: var(--surface-sunken); } .partner-stat i.ph { margin-bottom: 12px; color: var(--icon); } .partner-stat strong { font-size: clamp(1.35rem, 2.2vw, 2rem); color: var(--ink); } .partner-stat span, .partner-stat small { color: var(--muted); }  .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); overflow: hidden; border-radius: var(--r); } .news-card { min-width: 0; border-radius: var(--r); cursor: default; } .news-image-link { display: block; overflow: hidden; } .news-card h3 a { color: inherit; } .news-subscribe { background: var(--surface-warm); color: var(--ink); } .news-subscribe h3, .news-subscribe p { color: var(--ink); } .news-form { background: var(--surface-raised); } .news-form:focus-within { background: var(--surface-base); } .news-social { border-color: rgba(65, 64, 66, .22); } .news-social, .news-social a { color: var(--ink); }  .cta-action { min-height: 230px; justify-content: center; background: var(--surface-inverse); color: #fff; } .foot-contact bdi { direction: ltr; unicode-bidi: isolate; } @media(max-width:1180px) { .project-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .partners-trust { grid-template-columns: 1fr; } } @media(max-width:900px) { .story-timeline { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: none; direction: ltr; } .story-timeline::before { left: 15px; right: auto; transform: none; } .story-item, .story-item:nth-child(odd), .story-item:nth-child(even) { grid-column: 2; grid-row: auto; margin-inline: 0; direction: rtl; } .story-item .story-dot, .story-item:nth-child(odd) .story-dot, .story-item:nth-child(even) .story-dot { display: block; left: -24px; right: auto; }  } @media(max-width:720px) { .project-cards, .why-grid, .partners-grid, .partner-stats { grid-template-columns: 1fr; } .project-card { grid-template-rows: clamp(240px, 72vw, 340px) 1fr; } .projects-footer { grid-template-columns: auto 1fr; } .projects-footer-cta { grid-column: 1 / -1; width: 100%; justify-content: center; } .story-item { grid-template-columns: 1fr; } .story-image { grid-column: 1; grid-row: auto; min-height: 260px; margin-top: 24px; } .story-achievement { grid-column: 1; } .why-card { grid-template-rows: clamp(240px, 76vw, 360px) 1fr; } .partner-card { min-height: 300px; } .news-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .news-card .img { height: auto; } .news-subscribe { background: var(--surface-warm); } .cta-action { min-height: 190px; padding: 30px 22px; } }  .lang, .menu-lang { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding-inline: 8px; color: rgba(255, 255, 255, .84); font-size: .82rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .lang i.ph, .menu-lang i.ph { font-size: var(--ic-sm); } .lang:hover, .lang:focus-visible { color: var(--brand-white); background: rgba(255, 255, 255, .12); } header.scrolled .lang:hover, header.scrolled .lang:focus-visible {  color: var(--accent-strong); background: var(--accent-wash); } main section:not(.hero) :is(.kicker, .impact-kicker, .process-kicker, .story-kicker, .partners-kicker) { display: inline-flex; align-items: center; gap: 10px; width: auto; } main section:not(.hero) :is(.kicker, .impact-kicker, .process-kicker, .story-kicker, .partners-kicker)::before { content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: url("../images/brand/sdeira-mark.svg?v=12a5a1af82a32441") center / contain no-repeat; } .about-badge { grid-template-columns: auto 1fr; align-items: start; } .about-badge .big { font-size: clamp(4rem, 7vw, 7.4rem); line-height: .72; font-variant-numeric: tabular-nums; } .about-badge .label { margin-top: 18px; } .about-values { margin-top: clamp(64px, 8vw, 112px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--surface-sunken-strong); border: 0; }  .about-values-head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(190px, .6fr) minmax(0, 1.4fr); align-items: end; gap: 32px; padding: clamp(28px, 4vw, 48px); color: var(--brand-white); }  #about .about-layout + .stat-strip { margin-block-start: var(--sec-head-gap); } .about-values-head .kicker { color: var(--accent-on-dark); margin: 0; } .about-values-head h3 { margin: 0; color: var(--brand-white); font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.1; } .about-value { min-height: 220px; padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; align-items: flex-start; gap: 24px; background: var(--surface-sunken); } .about-value:nth-child(even) { background: var(--surface-base); } .about-value-icon { width: 54px; height: 54px; } .about-value h3 { font-size: clamp(1.1rem, 1.55vw, 1.35rem); margin-bottom: 10px; } .about-value p { max-width: 26ch; font-size: 1rem; line-height: 1.8; } .process-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .54fr); gap: clamp(30px, 5vw, 76px); align-items: end; max-width: none; margin: 0 0 clamp(42px, 6vw, 76px); } .process-head .process-kicker, .process-head h2 { grid-column: 1; } .process-head p { grid-column: 2; grid-row: 1 / span 2; max-width: 42ch; margin: 0; padding-inline-start: clamp(22px, 3vw, 42px); border-inline-start: 1px solid var(--brand-grey-70); } .process-step { min-width: 0; height: 100%; padding: clamp(28px, 3vw, 46px); align-items: flex-start; justify-content: flex-end; text-align: left; overflow: hidden; isolation: isolate; background: var(--surface-raised); transition: background var(--dur-base) var(--ease-out); } .process-step:nth-child(1) { grid-column: span 5; } .process-step:nth-child(2) { grid-column: span 4; background: var(--surface-sunken-strong); } .process-step:nth-child(3) { grid-column: span 3; } .process-step:nth-child(4) { grid-column: span 7; background: var(--surface-inverse); color: var(--brand-white); } .process-step:nth-child(5) { grid-column: span 5; background: var(--surface-warm); } .process-step::after, .process-step:not(:last-child)::after { content: none; display: none; } .process-step:nth-child(4):hover { background: var(--surface-inverse-soft); } .process-step:nth-child(5):hover { background: var(--brand-al-khatim); } .process-num { position: absolute; z-index: -1; inset-block-start: clamp(10px, 2vw, 24px); inset-inline-end: clamp(18px, 3vw, 42px); color: var(--surface-sunken-strong); font-size: clamp(5.6rem, 10vw, 9.6rem); font-weight: 700; line-height: .8; opacity: .62; pointer-events: none; transition: transform 480ms var(--ease-out); } .process-step:nth-child(2) .process-num { color: var(--brand-white); } .process-step:nth-child(4) .process-num { color: var(--brand-grey-70); opacity: .48; } .process-step:nth-child(5) .process-num { color: var(--brand-white); opacity: .42; } .process-step:hover .process-num { transform: translate3d(-10px, 0, 0); } .process-step h3, .process-step p, .process-icon { position: relative; z-index: 1; } .process-step:nth-child(4) h3, .process-step:nth-child(4) p { color: var(--brand-white); } .process-step:nth-child(4) p { color: var(--muted-on-dark); } .process-icon { order: -2; width: 60px; height: 60px; margin-bottom: auto; background: var(--surface-sunken); color: var(--brand-jais); } .process-step:nth-child(2) .process-icon { background: var(--brand-razeen); color: var(--brand-black); } .process-step:nth-child(3) .process-icon { background: var(--brand-al-khatim); color: var(--brand-black); } .process-step:nth-child(4) .process-icon { background: var(--brand-grey-70); color: var(--brand-white); } .process-step:nth-child(5) .process-icon { background: var(--brand-black); color: var(--brand-white); } .process-step:hover .process-icon { background: inherit; } .process-summary { position: relative; margin-top: clamp(28px, 4vw, 48px); grid-template-columns: minmax(230px, .6fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 88px); padding: clamp(34px, 5vw, 64px); overflow: hidden; background: var(--surface-brand); color: var(--brand-white); } .process-summary::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 5px; transform: scaleX(0); transform-origin: right center; background: var(--brand-razeen); transition: transform 800ms var(--ease-out); } .process-summary.reveal.in::before { transform: scaleX(1); } .process-summary-title { display: grid; gap: 12px; align-self: start; } .process-summary-title span { color: var(--accent-on-dark); font-family: var(--font-display); font-size: .82rem; letter-spacing: .08em; } .process-summary strong { padding: 0; color: var(--brand-white); font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.2; white-space: normal; } .process-summary p { max-width: 52ch; margin: 0; color: var(--brand-white); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 2; } @media(max-width:980px) { .process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto); } .process-step:nth-child(n) { grid-column: span 1; } .process-step:nth-child(5) { grid-column: 1 / -1; } } @media(max-width:720px) { .nav-actions > .lang { display: none; } .menu-lang { gap: 9px; } .about-values-head { grid-template-columns: 1fr; gap: 14px; } .about-value { min-height: 0; } .process-head { grid-template-columns: 1fr; gap: 22px; } .process-head .process-kicker, .process-head h2, .process-head p { grid-column: 1; grid-row: auto; } .process-head p { max-width: none; padding-inline-start: 0; padding-block-start: 20px; border-inline-start: 0; border-block-start: 1px solid var(--brand-grey-70); } .process-flow { grid-template-columns: 1fr; grid-auto-rows: minmax(280px, auto); } .process-step:nth-child(n) { grid-column: 1; } .process-summary { grid-template-columns: 1fr; gap: 26px; } } @media(prefers-reduced-motion: reduce) { .process-summary::before { transform: scaleX(1); transition: none; } .process-step:hover .process-num { transform: none; } }  .hero { min-height: max(700px, 100svh); display: flex; flex-direction: column; isolation: isolate; background: var(--image-overlay); } .hero-content { width: min(calc(100% - 40px), var(--max)); max-width: var(--max); min-height: clamp(430px, 55svh, 560px); margin-inline: auto; padding-block: clamp(104px, 14svh, 140px) clamp(28px, 5svh, 48px); justify-content: flex-end; } .hero-content::after { content: none; display: none; } .hero-content-row { width: min(100%, 860px); gap: clamp(18px, 3vw, 34px); align-items: stretch; } .hero-content-copy { max-width: 760px; } .hero h1 { max-width: 15ch; font-size: clamp(2.35rem, min(5vw, 7.5svh), 4.4rem); margin-bottom: 18px; } .hero p { max-width: 52ch; font-size: clamp(1rem, 1.6vw, 1.2rem); } .hero-actions { gap: 10px; margin-top: 28px; align-items: center; } .hero-actions .btn { width: auto; min-width: 0; min-height: 48px; padding: 0 22px; justify-content: center; font-size: .95rem; } .hero-sectors { flex: 1 0 auto; padding-block: 0 clamp(24px, 4svh, 38px); } .hero-sectors-label { margin-bottom: 10px; } .sector-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: stretch; gap: 1px; overflow: hidden; background: rgba(var(--image-overlay-rgb), .7); } @media(min-width:1600px) { .sector-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .sector-card { min-width: 0; min-height: clamp(210px, 24svh, 260px); aspect-ratio: auto; border-radius: var(--r); } .sector-card-media { border-radius: var(--r); } .sector-card-media::after { background: rgba(var(--image-overlay-rgb), .82); } .sector-card-body { min-height: 100%; padding: clamp(18px, 2.2vw, 26px); justify-content: flex-end; gap: 7px; } .sector-card-mark { width: 42px; height: 42px; margin-bottom: auto; background: rgba(255, 255, 255, .15); } .sector-card-title { font-size: clamp(1.08rem, 1.45vw, 1.35rem); } .sector-card-sub { min-height: 3.1em; font-size: .86rem; } .sector-card-action { min-height: 24px; margin-top: 2px; opacity: .82; transform: none; font-size: .8rem; } .sector-card-panel { display: none; } .about-copy { max-width: 820px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(28px, 4vw, 52px); padding: 0; } .about-copy p { margin: 0; font-size: clamp(1rem, 1.18vw, 1.18rem); line-height: 1.95; } .about-copy p:first-child { grid-column: 1 / -1; color: var(--accent-text); font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.45; } .about-copy p:nth-child(3) { padding-inline-start: clamp(22px, 3vw, 38px); border-inline-start: 1px solid var(--surface-sunken-strong); } .about-pillars { margin-top: clamp(42px, 6vw, 68px); gap: 0; border-block: 1px solid var(--surface-sunken-strong); } .about-pillar { min-width: 0; padding: clamp(26px, 3vw, 38px); text-align: left; border-inline-start: 1px solid var(--surface-sunken-strong); } .about-pillar:first-child { border-inline-start: 0; } .about-icon { width: 50px; height: 50px; margin: 0 0 20px; } .about-pillar p { max-width: 22ch; } .impact-visual::after { background: linear-gradient(to bottom, rgba(var(--image-overlay-rgb), .78) 0%, rgba(var(--image-overlay-rgb), .78) 15%, transparent 48%), linear-gradient(to top, rgba(var(--image-overlay-rgb), .88) 0%, rgba(var(--image-overlay-rgb), .88) 20%, transparent 52%); } @media(max-width:980px) { .hero-content { min-height: clamp(470px, 64svh, 610px); } .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sector-card { min-height: 230px; } } @media(max-width:720px) { .hero-content { width: calc(100% - 36px); min-height: clamp(470px, 66svh, 590px); padding-block: 94px 30px; } .hero-content-row { width: 100%; gap: 16px; } .hero-slides-ind { flex-basis: 14px; } .hero h1 { max-width: none; font-size: clamp(2.15rem, 11vw, 3.2rem); line-height: 1.14; } .hero p { font-size: 1rem; line-height: 1.75; } .hero-actions { flex-wrap: nowrap; } .hero-actions .btn { min-height: 46px; padding-inline: 16px; font-size: .88rem; } .hero-sectors { padding-block: 4px 26px; } .hero-sectors .wrap { width: 100%; max-width: none; padding-inline: 18px; } .sector-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100vw - 48px) / 2); justify-content: start; gap: 1px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: inline mandatory; scrollbar-width: thin; overscroll-behavior-inline: contain; } .sector-grid::-webkit-scrollbar { height: 4px; } .sector-grid::-webkit-scrollbar-track { background: rgba(var(--image-overlay-rgb), .65); } .sector-grid::-webkit-scrollbar-thumb { background: var(--brand-razeen); } .sector-card { min-height: 224px; scroll-snap-align: start; } .sector-card-body { padding: 16px; } .sector-card-mark { width: 38px; height: 38px; } .sector-card-title { font-size: 1rem; } .sector-card-sub { min-height: 3.2em; font-size: .78rem; } .sector-card-subs, .sector-card-action { font-size: .72rem; } .about-copy { grid-template-columns: 1fr; gap: 18px; } .about-copy p:first-child { grid-column: 1; } .about-copy p:nth-child(3) { padding-inline-start: 0; padding-block-start: 18px; border-inline-start: 0; border-block-start: 1px solid var(--surface-sunken-strong); } .about-pillars { grid-template-columns: 1fr; } .about-pillar { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; border-inline-start: 0; border-block-start: 1px solid var(--surface-sunken-strong); } .about-pillar:first-child { border-block-start: 0; } .about-icon { grid-row: 1 / span 2; margin: 0; } .about-pillar h3, .about-pillar p { grid-column: 2; } }  .about-badge { grid-template-columns: 1fr; overflow: hidden; isolation: isolate; } .about-badge > i.ph { position: absolute; z-index: -1; inset-block-start: 18px; inset-inline-end: 18px; font-size: clamp(6.5rem, 10vw, 10rem); line-height: 1; color: var(--brand-white); opacity: .12; transform: rotate(-8deg); pointer-events: none; } .about-badge .t { grid-column: 1; max-width: 25ch; } .about-values { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--surface-base); border: 0; }  .about-values-head { grid-column: 1 / -1; display: block; padding: 18px clamp(24px, 3vw, 34px); color: var(--ink); } .about-values-head h3 { color: var(--ink); font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 600; line-height: 1.3; } .about-value, .about-value:nth-child(even) { min-height: 210px; background: var(--surface-sunken); } .about-value-icon { background: var(--icon-value-fill); color: var(--icon-value-text); } @media(max-width:980px) { .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(max-width:720px) { .about-badge > i.ph { inset-block-start: 14px; inset-inline-end: 14px; font-size: 5.25rem; opacity: .08; } .about-values { grid-template-columns: 1fr; } .about-values-head { padding: 16px 20px; } .about-value, .about-value:nth-child(even) { min-height: 220px; } }  .hero { display: block; height: max(700px, 100svh); min-height: max(700px, 100svh); overflow: hidden; background: transparent; } header:not(.scrolled)::before { opacity: 0; } .hero-content { height: 100%; min-height: 0; padding-block: clamp(104px, 14svh, 140px) clamp(132px, 15.75svh, 160px); }  .scroll-hint { top: auto; bottom: calc(200px + 32px); z-index: 5; } .hero-sectors { position: relative; z-index: 4; width: 100%; margin-top: clamp(-112px, -10svh, -84px); padding: 0 0 clamp(28px, 4svh, 40px); background: var(--surface-inverse); } .hero-sectors .wrap { width: 100%; max-width: none; padding-inline: clamp(24px, 6vw, 84px); } .hero-sectors-label { min-height: 38px; margin: 0; display: flex; align-items: center; color: var(--muted-on-dark); } .sector-grid { width: 100%; } @media(max-width:720px) { .hero { height: 100svh; min-height: 680px; } .hero-content { min-height: 0; height: 100%; padding-block: 94px 128px; } .scroll-hint { display: flex; left: 18px; bottom: 112px; font-size: .74rem; } .scroll-hint span:last-child { display: none; } .hero::after {  background: none; } .hero-sectors { margin-top: -92px; padding-bottom: 26px; } .hero-sectors .wrap { padding-inline: 18px; } .hero-sectors-label { min-height: 34px; } }  .sector-card-img { filter: saturate(.96) contrast(1.02); transition: transform 450ms var(--ease-out), filter 300ms ease; } .sector-card:nth-child(3) .sector-card-img { object-position: 65% center; } .sector-card:nth-child(4) .sector-card-img { object-position: 48% center; } .sector-card-veil { background: linear-gradient(180deg, rgba(var(--image-overlay-rgb), .08) 0%, rgba(var(--image-overlay-rgb), .26) 46%, rgba(var(--image-overlay-rgb), .78) 100%); transition: background 300ms ease; } .sector-card-media::after { display: none; } .sector-card:hover .sector-card-img, .sector-card:focus-within .sector-card-img { transform: scale(1.025); filter: saturate(1) contrast(1.03); } .sector-card:hover .sector-card-veil, .sector-card:focus-within .sector-card-veil { background: linear-gradient(180deg, rgba(var(--image-overlay-rgb), .1) 0%, rgba(var(--image-overlay-rgb), .3) 46%, rgba(var(--image-overlay-rgb), .84) 100%); } .sector-card-body { position: relative; padding-bottom: 52px; } .sector-card-mark { color: var(--color-white); background: rgba(var(--image-overlay-rgb), .62); transition: background-color 200ms ease, transform 200ms var(--ease-out); } .sector-card-action { position: absolute; inset-inline-start: clamp(18px, 2.2vw, 26px); bottom: 20px; min-height: 24px; margin: 0; opacity: 0; visibility: visible; pointer-events: none; transform: translateY(6px); transition: opacity 200ms ease, transform 200ms var(--ease-out); } .sector-card:hover .sector-card-action, .sector-card:focus-within .sector-card-action { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .sector-card-action.is-pending { display: none; } .sector-card-action:focus, .sector-card-action:focus-visible { outline: 2px solid var(--color-white); outline-offset: 5px; } .sector-card:focus-within { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: -4px; } @media (hover: none), (pointer: coarse) { .sector-card-action:not(.is-pending) { display: flex; min-height: 44px; opacity: 1; visibility: visible; pointer-events: auto; transform: none; } } @media (max-width: 720px) { .sector-card-action:not(.is-pending) { display: flex; min-height: 44px; opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .sector-card-action { bottom: 10px; } } @media (prefers-reduced-motion: reduce) { .sector-card-img, .sector-card-action, .sector-card-veil, .sector-card-mark { transition: none; } .sector-card:hover .sector-card-img, .sector-card:focus-within .sector-card-img { transform: none; } .sector-card:hover .sector-card-mark, .sector-card:focus-within .sector-card-mark { transform: none; } }  .hero-sectors-label { min-height: 58px; padding-inline: max(20px, calc((100vw - var(--max)) / 2 + 20px)); font-family: var(--font-display); font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 700; letter-spacing: 0; color: var(--color-white); } .sector-grid { gap: 1px; } .projects-footer { position: relative; isolation: isolate; overflow: hidden; grid-template-columns: 1fr auto; min-height: 170px; padding: clamp(30px, 4vw, 48px); padding-inline-start: clamp(150px, 17vw, 210px); } .projects-footer-mark { display: none; } .projects-footer::after { content: ""; position: absolute; z-index: -1; inset-inline-start: clamp(-48px, -3vw, -24px); inset-block-end: clamp(-72px, -5vw, -46px); width: clamp(170px, 18vw, 230px); aspect-ratio: 1; background: url("../images/brand/sdeira-mark.svg?v=12a5a1af82a32441") center / contain no-repeat; } .projects-footer h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.45; }  .story-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, min(38vw, 450px)); grid-template-columns: none; grid-template-rows: 1fr; gap: 1px; margin-top: clamp(42px, 6vw, 72px); padding: 0 0 18px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: var(--accent) rgba(var(--image-overlay-rgb), .12); background: transparent; } .story-timeline::-webkit-scrollbar { height: 6px; } .story-timeline::-webkit-scrollbar-track { background: rgba(var(--image-overlay-rgb), .1); } .story-timeline::-webkit-scrollbar-thumb { background: var(--accent); } .story-timeline:focus-visible { outline: 3px solid var(--accent); outline-offset: 8px; } .story-item, .story-item:nth-child(odd), .story-item:nth-child(even) { grid-column: auto; grid-row: 1; width: auto; min-width: 0; min-height: 620px; display: grid; grid-template-columns: 1fr; grid-template-rows: 250px auto auto 1fr auto; gap: 0; align-items: start; margin: 0; padding: 0; overflow: hidden; scroll-snap-align: start; text-align: left; background: var(--surface-raised); border-radius: var(--r); } .story-item::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 3; width: 42%; height: 5px; background: var(--accent); } .story-dot { display: none; } .story-image { grid-column: 1; grid-row: 1; width: 100%; min-height: 0; height: 250px; margin: 0; aspect-ratio: auto; } .story-year { grid-column: 1; grid-row: 2; margin: 0; padding: 26px 28px 4px; font-family: var(--font-brand); font-size: clamp(2.6rem, 4vw, 4rem); line-height: 1; color: var(--accent-text); } .story-item h3 { grid-column: 1; grid-row: 3; margin: 0; padding: 8px 28px 10px; font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); } .story-item>p { grid-column: 1; grid-row: 4; min-height: 0; margin: 0; padding: 0 28px 24px; font-size: .96rem; line-height: 1.85; } .story-achievement { grid-column: 1; grid-row: 5; min-height: 92px; margin: 0; padding: 20px 28px; border-top: 1px solid var(--line); background: var(--surface-sunken); } .story-icon { background: var(--surface-inverse); color: var(--color-white); } .why-card { position: relative; } .why-media::after { background: linear-gradient(180deg, rgba(var(--image-overlay-rgb), .02) 0%, rgba(var(--image-overlay-rgb), .12) 58%, rgba(var(--image-overlay-rgb), .46) 100%); } .why-ic { inset-block-end: 20px; inset-inline-start: 22px; width: 92px; height: 92px; color: #fff; background: transparent; } .why-card:nth-child(2) .why-media img { object-position: 50% 24%; } .why-ic::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 10px; width: 3px; background: var(--accent); } .why-ic i.ph { font-size: 3.25rem; filter: drop-shadow(0 2px 8px rgba(var(--image-overlay-rgb), .34)); } .why-card:hover .why-ic i.ph { transform: translateY(-2px); } @media (max-width: 720px) { .hero-sectors-label { min-height: 50px; padding-inline: 18px; font-size: .98rem; } .projects-footer { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 30px 28px 118px; } .projects-footer::after { width: 140px; inset-inline-start: -24px; inset-block-end: -44px; } .projects-footer-cta { width: fit-content; } .story-timeline { grid-auto-columns: min(84vw, 340px); margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; } .story-item, .story-item:nth-child(odd), .story-item:nth-child(even) { min-height: 590px; grid-template-rows: 220px auto auto 1fr auto; } .story-image { height: 220px; } .story-year { padding: 24px 24px 4px; } .story-item h3 { padding-inline: 24px; } .story-item>p { padding-inline: 24px; } .story-achievement { padding-inline: 24px; } .why-ic { width: 72px; height: 72px; inset-block-end: 16px; inset-inline-start: 16px; } .why-ic i.ph { font-size: 2.6rem; } } @media (prefers-reduced-motion: reduce) { .why-card:hover .why-ic i.ph { transform: none; } }  .news-card { grid-template-rows: auto 1fr; border: 0; border-radius: var(--r); } .news-card .img { block-size: clamp(220px, 22vw, 260px); aspect-ratio: auto; margin: 0; } .news-card:nth-child(1) img { object-position: 55% center; } .news-card:nth-child(2) img { object-position: center 38%; } .news-card:nth-child(3) img { object-position: center 42%; } .news-card h3 { min-height: 4.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .news-card p { min-height: 3.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .news-card .more { gap: 9px; color: var(--accent-text); font-weight: 700; } .news-card .more i.ph { font-size: 1.15rem; line-height: 1; transition: transform var(--dur-base) var(--ease-out); } .news-card .more:hover i.ph, .news-card .more:focus-visible i.ph { transform: translate(-2px, -2px); } .news-category::before { content: "◈"; margin-inline-end: 7px; color: var(--accent); font-size: .78rem; } .news-card .date::before { content: "◷"; color: var(--icon); font-size: 1rem; } .news-subscribe { min-height: 0; padding: 20px 24px; grid-template-columns: minmax(240px, .85fr) minmax(340px, 1.15fr) 132px; gap: 22px; } .news-subscribe-copy { gap: 12px; } .news-subscribe-icon { inline-size: 40px; } .news-subscribe p { font-size: .9rem; line-height: 1.55; } .news-social { padding: 0; display: grid; grid-template-columns: repeat(3, 44px); gap: 6px 8px; justify-content: start; white-space: normal; } .news-social > span { grid-column: 1 / -1; font-size: .8rem; line-height: 1.2; } .news-social a { inline-size: 44px; min-block-size: 44px; } .cta { position: relative; isolation: isolate; overflow: hidden; }  .cta .wrap, .cta-inner { position: relative; z-index: 1; } .cta-action { min-height: 202px; padding: 26px 22px; gap: 11px; border: 0; } .cta-action > span:not(.cta-action-note) { font-family: var(--font-display); font-size: clamp(1.12rem, 1.35vw, 1.28rem); line-height: 1.35; font-weight: 700; } .cta-action i.ph { inline-size: 64px; block-size: 58px; font-size: 2.5rem; } .foot-brand { min-width: 0; } .foot-brand .logo { display: block; inline-size: min(220px, 100%); max-inline-size: 100%; aspect-ratio: 360 / 92; margin-bottom: 20px; } .foot-brand .logo img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: 100%; object-fit: contain; object-position: left center; } @media (max-width: 800px) { .news-subscribe { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); } .news-social { grid-column: 1 / -1; } } @media (max-width: 560px) { .news-body { padding: 20px; } .news-card h3 { min-height: 4.5em; } .news-card p { min-height: 3.6em; } .news-subscribe { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 16px; } .news-social { grid-column: auto; } .news-subscribe-copy { grid-template-columns: 40px minmax(0, 1fr); } .news-form { flex-wrap: nowrap; } .news-form input { flex: 1 1 auto; flex-basis: auto; } .news-form button { flex: 0 0 auto; padding-inline: 18px; } .cta-action { min-height: 168px; } .cta-action i.ph { inline-size: 56px; block-size: 52px; font-size: 2.15rem; } .foot-brand .logo { inline-size: min(190px, 100%); } }   .hero-content-row { flex-direction: column; gap: clamp(12px, 2vw, 18px); } .hero-slides-ind { order: -1; flex: 0 0 44px; inline-size: clamp(220px, 28vw, 320px); block-size: 44px; flex-direction: row; align-items: center; align-self: flex-start; gap: 8px; } .hero-slide-line { flex: 1 1 0; inline-size: auto; block-size: 44px; overflow: visible; background: linear-gradient(to bottom, transparent calc(50% - 1.5px), rgba(255, 255, 255, .28) calc(50% - 1.5px), rgba(255, 255, 255, .28) calc(50% + 1.5px), transparent calc(50% + 1.5px)); } .hero-slide-line::before { inset-inline-start: 0; inset-inline-end: auto; inset-block-start: 50%; inline-size: 0; block-size: 3px; height: 3px; transform: translateY(-50%); } .hero-slide-line.done::before { inline-size: 100%; height: 3px; } .hero-slide-line.active::before { inline-size: 100%; height: 3px; transition: inline-size var(--hero-slide-duration, 5.2s) linear; } @media (max-width: 720px) { .hero { min-height: 660px; } .hero-content { inline-size: calc(100% - 24px); min-height: 100svh; padding-block: 88px 86px; padding-inline: 4px; } .hero-content-row { gap: 8px; } .hero-content-copy { text-align: left; } .hero-slides-ind { flex-basis: 44px; inline-size: 100%; gap: 6px; } .hero .eyebrow { margin-bottom: 10px; font-size: .78rem; } .hero h1 { max-inline-size: 100%; margin: 0 0 16px; font-size: clamp(1.9rem, 9.6vw, 2.6rem); line-height: 1.17; } .hero p { max-inline-size: 31ch; margin: 0; font-size: clamp(.92rem, 4.1vw, .98rem); line-height: 1.68; } .hero-actions { inline-size: 100%; margin-top: 22px; gap: 8px; } .hero-actions .btn { flex: 1 1 0; min-inline-size: 0; padding-inline: 10px; } .hero-sectors { margin-top: -56px; padding-block: 0 24px; } .scroll-hint { display: none; } .hero-sectors .wrap { inline-size: 100%; max-inline-size: none; padding-inline: 0; } .hero-sectors-label { min-height: 48px; padding-inline: 12px; } .sector-grid { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: 1px; overflow: visible; scroll-snap-type: none; scrollbar-width: none; } .sector-card { min-inline-size: 0; min-height: clamp(190px, 58vw, 224px); scroll-snap-align: none; } .sector-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 168px; } .sector-card-body { padding: 14px; padding-bottom: 56px; } .sector-card-title { font-size: clamp(.98rem, 5vw, 1.14rem); } .sector-card-sub { min-height: 3em; font-size: clamp(.74rem, 3.6vw, .84rem); line-height: 1.55; } .sector-card-mark { inline-size: 40px; block-size: 40px; } } @media (max-width: 360px) { .hero-content { inline-size: calc(100% - 20px); padding-inline: 4px; } .hero h1 { font-size: 2rem; } .hero p { font-size: .94rem; } .sector-card { min-height: 190px; } }  :root { --page-gutter: 32px; } .menu-head { display: none; } @media (max-width: 720px) { :root { --page-gutter: clamp(14px, 4.6vw, 18px); } main > section > .wrap, footer > .wrap { padding-inline: var(--page-gutter); }  .hero > .wrap { padding-inline: 4px; } .hero-sectors > .wrap { padding-inline: 0; } .hero-sectors-label { padding-inline: var(--page-gutter); } .impact-panel { padding-inline: 0; } .story-timeline { margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); scroll-padding-inline: var(--page-gutter); } } @media (max-width: 980px) { .sector-card.is-marquee-clone { display: none; } .sector-motion-toggle { display: none; } }  @media (max-width: 1280px) { .nav-cta, .nav-actions > .lang { display: none; } .burger { display: flex; } body.menu-open { overflow: hidden; overscroll-behavior: none; } .menu { display: flex; position: fixed; z-index: 1101; top: 0; right: 0; bottom: 0; left: auto; inline-size: min(88vw, 380px); block-size: 100dvh; padding: 16px var(--page-gutter) max(24px, env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-raised); color: var(--ink); visibility: hidden; pointer-events: none; opacity: .98; transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .menu::after { content: ""; position: absolute; z-index: -1; inset-inline-end: 0; inset-block-end: 0; inline-size: 160px; aspect-ratio: var(--photo-mark-p43-ratio); background: var(--drawer-corner-art, url("../images/patterns/lines.svg?v=d874099296964b63")) right bottom / contain no-repeat; opacity: .055; pointer-events: none; } .menu.open { display: flex; top: 0; right: 0; bottom: 0; left: auto; padding: 16px var(--page-gutter) max(24px, env(safe-area-inset-bottom)); align-items: stretch; gap: 0; visibility: visible; pointer-events: auto; opacity: 1; transform: translateX(0); transition-delay: 0s; } .menu-head { min-block-size: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-block-end: 1px solid var(--line); } .menu-logo { min-block-size: 44px; display: flex; align-items: center; } .menu-logo img { display: block; inline-size: min(152px, 52vw); block-size: auto; } .menu-logo::after, .menu > a:not(.menu-logo)::after { display: none; } .menu-close { position: relative; inline-size: 44px; block-size: 44px; flex: 0 0 44px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; } .menu-close span { position: absolute; left: 50%; right: auto; top: 50%; inline-size: 22px; block-size: 2px; background: currentColor; transform-origin: center; } .menu-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .menu-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .menu > a:not(.menu-logo) { position: relative; min-block-size: 54px; padding-inline: 4px 12px; display: flex; align-items: center; justify-content: flex-start; border-block-end: 1px solid var(--line); color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; opacity: 0; transform: translateX(10px); transition: color 180ms var(--ease-out), background 180ms var(--ease-out), opacity 220ms var(--ease-out), transform 260ms var(--ease-out); } .menu.open > a:not(.menu-logo) { opacity: 1; transform: translateX(0); } .menu.open > a:nth-of-type(2) { transition-delay: 45ms; } .menu.open > a:nth-of-type(3) { transition-delay: 70ms; } .menu.open > a:nth-of-type(4) { transition-delay: 95ms; } .menu.open > a:nth-of-type(5) { transition-delay: 120ms; } .menu.open > a:nth-of-type(6) { transition-delay: 145ms; } .menu.open > a:nth-of-type(7) { transition-delay: 170ms; } .menu.open > a:nth-of-type(8) { transition-delay: 195ms; } .menu.open > a:nth-of-type(9) { transition-delay: 220ms; } .menu > a:not(.menu-logo):hover, .menu > a:not(.menu-logo):focus-visible, .menu > a:not(.menu-logo).active { background: var(--surface-sunken); color: var(--accent-text); } .menu > a:not(.menu-logo).active::before { content: ""; position: absolute; inset-inline-start: 0; inline-size: 3px; block-size: 24px; background: var(--accent); } .menu.open .menu-mobile-actions { width: 100%; display: flex; flex-direction: column; margin-block-start: auto; padding-block-start: 14px; gap: 10px; border-block-start: 1px solid var(--line); } .menu.open .menu-lang { width: 100%; display: flex; align-items: center; min-height: 48px; padding-inline: 4px; justify-content: flex-start; gap: 10px; color: var(--ink); font-size: .95rem; } .menu.open .menu-lang::after { content: none; } .menu.open .menu-contact { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 52px; background: var(--accent-deep); } .menu-backdrop { display: block; z-index: 999; visibility: hidden; pointer-events: none; opacity: 0; background: rgba(var(--image-overlay-rgb), .44); backdrop-filter: blur(4px); transition: opacity 250ms var(--ease-out), visibility 0s linear 250ms; } body.menu-open .menu-backdrop { display: block; visibility: visible; pointer-events: auto; opacity: 1; transition-delay: 0s; } body.menu-open .scroll-top { z-index: 997; } .burger { position: relative; margin-inline-end: 0; border: 0; background: transparent; } .burger span { position: absolute; left: 50%; right: auto; inline-size: 24px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .burger span:nth-child(1) { transform: translate(-50%, -7px); } .burger span:nth-child(2) { transform: translate(-50%, 0); } .burger span:nth-child(3) { transform: translate(-50%, 7px); } .burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translate(-50%, 0) scaleX(.2); } .burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); } body.menu-open .burger { opacity: 0; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .menu, .menu-backdrop, .menu > a:not(.menu-logo), .burger span { transition: none !important; } }  .btn-primary, .news-form button { background: var(--brand-sweihan); color: var(--brand-black); } .btn-primary:hover, .btn-primary:focus-visible, .news-form button:hover, .news-form button:focus-visible { background: var(--brand-al-khatim); color: var(--brand-black); box-shadow: none; } .method-en { display: block; color: var(--brand-jais); font-size: .78rem; font-weight: 700; text-transform: uppercase; margin-block: 14px 2px; } .about-figures .about-values-head p { max-width: 34ch; margin: 8px 0 0; color: var(--muted-on-dark); line-height: 1.6; } .verified-figure { display: block; direction: ltr; font-size: clamp(2rem, 3.8vw, 3.7rem); line-height: 1; color: var(--brand-black); font-weight: 500; margin-bottom: 12px; border-inline-start: 5px solid var(--brand-sweihan); padding-inline-start: 14px; } .value-sections { background: var(--surface-sunken); padding-block: var(--sec-pad); } .value-block + .value-block { margin-top: clamp(54px, 7vw, 96px); } .value-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); } .value-head .kicker { color: var(--brand-jais); } .value-head h2 { margin: 8px 0 0; font-size: clamp(2rem, 4vw, 4.4rem); line-height: 1.08; } .value-head p { margin: 0; color: var(--muted); font-size: 1.03rem; line-height: 1.8; } .companies-grid, .services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--line); gap: 1px; } .company-card, .service-card { background: var(--surface-base); padding: clamp(24px, 3vw, 40px); min-height: 250px; position: relative; overflow: hidden; } .company-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 7px; height: 100%; background: var(--company-accent, var(--brand-sweihan)); } .company-card .company-num, .service-card .service-num { color: var(--label); font-size: .8rem; direction: ltr; display: block; margin-bottom: 44px; } .company-card h3, .service-card h3 { font-size: clamp(1.45rem, 2vw, 2rem); margin: 0 0 12px; } .company-card p, .service-card p { color: var(--muted); margin: 0; line-height: 1.7; } .company-card a, .service-card a { color: var(--ink); display: inline-flex; gap: 8px; align-items: center; margin-top: 24px; font-weight: 700; min-height: 44px; padding-block: 10px; } .service-card .service-meta { color: var(--brand-jais); font-size: .8rem; font-weight: 700; margin-bottom: 10px; } .service-card a { margin-top: auto; padding-top: 24px; } .service-pending { margin-top: auto; padding-top: 24px; min-height: 44px; display: inline-flex; align-items: center; color: var(--label); font-size: .88rem; } .openings-panel { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); background: var(--brand-black); color: white; } .openings-intro { padding: clamp(28px, 4vw, 52px); background: var(--brand-sweihan); color: var(--brand-black); } .openings-intro i { font-size: 2rem; } .openings-intro h3 { font-size: clamp(1.7rem, 3vw, 2.8rem); margin: 28px 0 10px; } .openings-intro p { margin: 0; line-height: 1.7; } .opening-row { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 24px; align-items: center; padding: clamp(24px, 3vw, 36px); } .opening-row + .opening-row { border-top: 1px solid var(--line-on-dark); } .opening-row strong { font-size: 1.25rem; } .opening-row span, .opening-row time { color: var(--muted-on-dark); } .opening-status { color: var(--brand-razeen) !important; font-weight: 700; } .opening-announcement { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto minmax(220px, .8fr); align-items: center; gap: 22px; padding: 22px 26px; margin-top: 28px; background: var(--brand-black); color: white; } .opening-announcement-icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--brand-sweihan); color: var(--brand-black); font-size: 1.45rem; } .opening-announcement .kicker, .opening-announcement time, .opening-announcement > span:last-child { color: var(--muted-on-dark); } .opening-announcement h3 { margin: 3px 0 0; font-size: 1.25rem; } @media (min-width: 981px) { .hero-sectors { overflow: hidden; } .hero-sectors .wrap { max-width: none; padding-inline: 0; } .hero-sectors-head { max-width: var(--max); margin-inline: auto; padding-inline: clamp(28px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 18px; } .sector-motion-toggle { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; background: transparent; color: var(--muted-on-dark); border: 0; cursor: pointer; } .sector-grid { display: flex; width: max-content; grid-template-columns: none; animation: sectors-marquee 38s linear infinite; } .sector-grid:hover, .sector-grid:focus-within, .sector-grid.is-paused { animation-play-state: paused; } .sector-card { flex: 0 0 clamp(240px, 20vw, 340px); } .sector-card-panel { display: grid; inset: 0; margin: 0; grid-template-columns: 1fr; background: rgba(var(--image-overlay-rgb), .88); color: white; transform: translateY(12px); z-index: 8; } .sector-card-panel-visual { position: absolute; inset: 0; min-height: 0; opacity: .18; } .sector-card-panel-copy { position: relative; z-index: 1; text-align: start; padding: 28px; } .sector-card-panel-copy h3, .sector-card-panel-copy p { color: white; } .sector-card-panel-link { color: var(--brand-razeen); } @keyframes sectors-marquee { from { transform: translateX(0); } to { transform: translateX(50%); } } @media (prefers-reduced-motion: reduce) { .sector-grid { animation: none; } } } @media (max-width: 980px) { .value-head { grid-template-columns: 1fr; align-items: start; } .companies-grid, .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .openings-panel { grid-template-columns: 1fr; } .opening-announcement { grid-template-columns: auto 1fr; } .opening-announcement time, .opening-announcement > span:last-child { grid-column: 2; } } @media (max-width: 560px) { .companies-grid, .services-grid { grid-template-columns: 1fr; } .company-card, .service-card { min-height: 0; padding: 24px; } .companies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .company-card { padding: 18px; }  .company-card h3 { font-size: 1.25rem; } .service-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "num meta action" "num title action" "num copy action"; align-items: center; gap: 4px 12px; min-height: 132px; } .service-card .service-num { grid-area: num; margin: 0; } .service-card .service-meta { grid-area: meta; margin: 0; } .service-card h3 { grid-area: title; font-size: 1.18rem; margin: 0; } .service-card p { grid-area: copy; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; } .service-card a { grid-area: action; margin: 0; padding: 10px; font-size: 0; } .service-card .service-pending { grid-area: action; margin: 0; padding: 8px; max-width: 78px; font-size: .72rem; } .service-card a i { font-size: 1.25rem; } .company-card .company-num, .service-card .service-num { margin-bottom: 24px; } .opening-row { grid-template-columns: 1fr; gap: 8px; } } .partner-logo.schneider, .partner-logo.abb, .partner-logo.honeywell { color: var(--brand-black); } .investment-rail { max-width: var(--max); margin: 0 auto; padding: 0 clamp(28px, 5vw, 72px) 28px; } .investment-rail .sector-card { min-height: 150px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; background: var(--brand-black); color: white; padding: 28px; } .investment-rail .sector-card-media, .investment-rail .sector-card-panel { display: none; } .investment-rail .sector-card-body { display: contents; } .investment-rail .sector-card-title, .investment-rail .sector-card-sub { color: white; } .investment-rail .sector-card-action { color: var(--brand-razeen); } @media (max-width: 980px) { .investment-rail { padding-inline: var(--page-gutter, 16px); } .investment-rail .sector-card { grid-template-columns: 1fr; gap: 8px; } }  .hero { isolation: isolate; min-height: max(760px, 100svh); padding-bottom: clamp(236px, 23vw, 320px); } .hero::after {  background: none; z-index: 0; } .hero-content, .scroll-hint, .hero-sectors { z-index: 2; } .hero-content { min-height: max(560px, 100svh - clamp(236px, 23vw, 320px)); padding-block: 120px 38px; } .hero-content::after { display: none; } .hero-content-row { gap: 18px; } .hero h1 .em { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; padding: .13em .18em .17em; margin-inline: .07em; transform: translateY(-.015em); } .hero-slides-ind .hero-slide-line { isolation: isolate; } .hero-slides-ind .hero-slide-line.active::before { animation: heroProgress var(--hero-slide-duration, 5.2s) linear both; transition: none; } @keyframes heroProgress { from { inline-size: 0; } to { inline-size: 100%; } } .hero-sectors { position: absolute; inset-inline: 0; inset-block-end: 0; width: 100%; padding: 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78) 30%, rgba(0,0,0,.93)); } .hero-sectors .wrap { max-width: none; padding-inline: 0; } .hero-sectors-head { width: min(100%, var(--max)); min-height: 42px; margin-inline: auto; padding-inline: clamp(24px, 5vw, 80px); display: flex; align-items: end; } .hero-sectors-label { margin: 0 0 9px; color: #fff; font-size: .9rem; letter-spacing: 0; } .sector-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 1px; overflow: visible; background: rgba(255,255,255,.22); animation: none !important; transform: none !important; } .sector-card, .sector-card.is-marquee-clone { display: block; min-width: 0; min-height: clamp(184px, 17vw, 238px); margin: 0; outline: none; } .sector-card.is-marquee-clone { display: none; } .sector-card-body { z-index: 3; padding: clamp(18px, 2.1vw, 30px); background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.78)); } .sector-card-title, .sector-card-sub { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.66); } .sector-card-sub { min-height: 0; opacity: .94; } .sector-card-mark { background: rgba(0,0,0,.64); color: #fff; } .sector-card-action { min-height: 44px; color: #fff; } .sector-card-panel { display: grid; grid-template-columns: 1fr; inset: 0; margin: 0; z-index: 6; opacity: 0; pointer-events: none; transform: translateY(8px); background: rgba(0, 0, 0, .92); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .sector-card:hover .sector-card-panel, .sector-card:focus .sector-card-panel, .sector-card:focus-within .sector-card-panel { opacity: 1; transform: none; pointer-events: auto; } .sector-card-panel-visual { opacity: .16; } .sector-card-panel-copy { padding: clamp(18px, 2.1vw, 30px); } .sector-card-panel-copy h3, .sector-card-panel-copy p { color: #fff; } .sector-card-panel-link { min-height: 44px; color: var(--brand-razeen); } .investment-rail { display: none; } .sector-card:focus-visible { outline: 3px solid var(--brand-razeen); outline-offset: -3px; } @media (max-width: 980px) { .hero { height: auto; min-height: auto; overflow: visible; padding-bottom: 0; } .hero-content { min-height: 100svh; } .hero-sectors { position: relative; background: var(--surface-inverse); } .hero-sectors-head { padding-inline: var(--page-gutter); align-items: center; } .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sector-card { min-height: clamp(190px, 46vw, 242px); } } @media (max-width: 560px) { .hero-content { padding-block: 96px 54px; } .hero h1 .em { padding: .14em .16em .18em; margin-inline: .04em; } .hero-sectors-head { min-height: 44px; } .sector-grid { gap: 1px; } .sector-card { min-height: 196px; } .sector-card-body, .sector-card-panel-copy { padding: 15px; } .sector-card-title { font-size: 1rem; } .sector-card-sub { font-size: .78rem; line-height: 1.45; } .sector-card-mark { inline-size: 38px; block-size: 38px; } .sector-card:last-child:nth-child(odd) { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .hero-slides-ind .hero-slide-line.active::before { animation: none; inline-size: 100%; } }  .about-copy { display: block; max-width: 62ch; padding: 0; } .about-copy p, .about-copy p:first-child, .about-copy p:nth-child(3) { display: block; margin: 0; padding: 0; border: 0; color: var(--ink); font-family: inherit; font-size: clamp(1.08rem, 1.3vw, 1.3rem); font-weight: 400; line-height: 1.9; } .about-pillars { border-block: 0; } .about-badge > i.ph { display: none; } .about-badge::before { content: ""; position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: clamp(96px, 10vw, 148px); aspect-ratio: 1; background: url("../images/brand/sdeira-mark.svg?v=12a5a1af82a32441") center / contain no-repeat; opacity: .16; transform: rotate(-10deg); pointer-events: none; } .process-head .process-kicker, .process-head h2, .process-head p { display: block; margin-inline: 0; padding: 0; border: 0; } .process-head h2 { margin-bottom: 18px; } .impact-card-unverified { display: none; } .impact-footer { display: none; } .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 640px) { .impact-grid { grid-template-columns: 1fr; } }  .process-flow { display: flex; flex-direction: column; gap: 0; background: var(--surface-base); overflow: visible; } .process-step { display: flex; gap: clamp(16px, 3vw, 42px); align-items: center; min-height: 128px; padding: 24px clamp(22px, 4vw, 52px); background: var(--surface-raised); color: var(--ink); text-align: left; border: 0; border-block-end: 1px solid var(--surface-sunken-strong); } .process-step:last-child { border-block-end: 0; } .process-step:hover { background: var(--surface-raised); } .process-step .process-num { flex: 0 0 84px; font-size: clamp(2.1rem, 4vw, 3.5rem); color: var(--brand-razeen); opacity: .78; } .process-step .process-icon { flex: 0 0 48px; width: 48px; height: 48px; margin: 0; background: var(--icon-wash); color: var(--brand-black); } .process-step h3 { flex: 0 1 240px; margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.55rem); } .process-step p { flex: 1 1 360px; max-width: 48ch; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75; } .projects-footer { background: var(--brand-black); } .projects-footer h3 { color: var(--brand-white); } .projects-footer p { color: var(--muted-on-dark); } .projects-footer-mark { color: var(--brand-razeen); }  .projects-head:has(.project-filters) { margin-bottom: 28px; }  :is(.project-filters, .news-filters) { display: inline-flex; flex-wrap: nowrap; gap: 4px; width: fit-content; min-inline-size: 0; max-inline-size: 100%; padding: 4px; border: 0; border-radius: var(--r); background: var(--surface-raised); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; } :is(.project-filters, .news-filters)::-webkit-scrollbar { display: none; } :is(.project-filter, .news-filter) { flex: none; white-space: nowrap; border: 0; background: var(--surface-raised); color: var(--brand-jais); padding: 10px 22px; border-radius: var(--r); font-size: .92rem; font-weight: 700; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } :is(.project-filter, .news-filter):hover { background: var(--surface-raised); color: var(--brand-black); } :is(.project-filter, .news-filter).is-active { background: var(--accent); color: var(--brand-white); } :is(.project-filter, .news-filter):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .project-card.is-filtered-out { display: none; }  .featured-projects .project-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); background: transparent; overflow: visible; border-radius: var(--r); }  .featured-projects .project-card { height: auto; min-height: 0; grid-template-rows: clamp(230px, 25vw, 350px) auto; background: var(--surface-base); }  .featured-projects .project-card-body { gap: 10px; } .featured-projects :is(.project-type, .project-card h3) { margin-bottom: 0; } .featured-projects .project-card-action { margin-top: 0; } .project-card--feature { grid-column: 1 / -1; position: relative; min-height: clamp(460px, 52vw, 650px) !important; overflow: hidden; background: var(--brand-black) !important; } .project-card--feature .project-card-img { position: absolute; inset: 0; height: auto; } .project-card--feature .project-card-img::after { content: ""; position: absolute; inset: 0;  background: linear-gradient(90deg, rgba(var(--image-overlay-rgb), .74), rgba(var(--image-overlay-rgb), .20) 68%, rgba(var(--image-overlay-rgb), .48)); pointer-events: none; } .project-card--feature .project-card-img img { object-position: center 54%; transform: scale(1); transform-origin: center; } .project-card--feature:is(:hover, :focus-within) .project-card-img img { transform: scale(var(--zoom)); } .project-card--feature .project-card-body { position: absolute; z-index: 2; inset: auto clamp(24px, 5vw, 72px) clamp(28px, 5vw, 70px); max-width: min(620px, 62%); min-height: 0; padding: 0; background: transparent; color: var(--brand-white); } .project-card--feature :is(.project-type, h3, p, .project-meta) { color: var(--brand-white); } .project-card--feature h3 { font-size: clamp(2.1rem, 4.3vw, 4.4rem); line-height: 1.04; } .project-card--feature p { max-width: 52ch; } .project-card--feature .project-meta { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .46); }  .project-card-action { margin-top: 18px; font-size: .88rem; align-self: flex-start; width: fit-content; transition: color var(--dur-fast) var(--ease-out); } .project-card-action i.ph { color: currentColor; font-size: .95rem; } .project-card-action.is-pending { color: var(--label); cursor: pointer; } .project-card-action.is-pending::after { opacity: .35; } .project-card--feature .project-card-action.is-pending { color: rgba(255, 255, 255, .82); }  .featured-projects .project-card, .project-card.is-clickable { cursor: pointer; }  .project-card--secondary { border: 0; margin-top: 0; } .project-card--secondary .project-card-img { min-height: clamp(240px, 27vw, 370px); }  .project-card--secondary .project-card-body { min-height: 0; background: var(--surface-sunken); } .project-card--secondary .project-card-action { color: var(--brand-black); font-weight: 700; }   .featured-projects .project-card p { text-wrap: balance; } @media (max-width: 760px) { .featured-projects .project-cards { grid-template-columns: 1fr; gap: 28px; } .project-card--feature { min-height: 560px !important; } .project-card--feature .project-card-body { max-width: none; inset-inline: 22px; bottom: 28px; } .project-card--feature h3 { font-size: clamp(2rem, 10vw, 3rem); } .project-card--secondary { border-inline-start: 0; border-block-start: 1px solid var(--surface-sunken-strong); margin-top: 0; } } @media (max-width: 720px) { .process-step { flex-wrap: wrap; align-items: start; gap: 8px 14px; min-height: 0; padding: 24px 18px; } .process-step .process-num { flex-basis: 52px; font-size: 2rem; } .process-step h3 { flex-basis: calc(100% - 66px); } .process-step p { flex-basis: calc(100% - 66px); margin-inline-start: 66px; } }  .story { background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-base) 100%); } .story-timeline { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto; gap: 0; margin: 0; padding: 50px 0 0; overflow: visible; direction: rtl; background: transparent; scrollbar-width: auto; } .story-timeline::before { content: ""; position: absolute; inset-block-start: 16px; inset-inline: 5%; inline-size: auto; block-size: 2px; transform: none; background: linear-gradient(90deg, transparent, var(--brand-razeen), transparent); } .story-item, .story-item:nth-child(odd), .story-item:nth-child(even) { grid-column: auto; grid-row: auto; display: flex; flex-direction: column; align-items: stretch; width: auto; min-width: 0; margin: 0; padding: 0 18px; text-align: center; direction: rtl; background: transparent; border: 0; border-inline-start: 1px solid color-mix(in srgb, var(--brand-black) 12%, transparent); box-shadow: none; transform: none; } .story-item:first-child { border-inline-start: 0; } .story-dot { position: absolute; inset-block-start: -43px; inset-inline-start: 0; inset-inline-end: auto; transform: translateX(-50%); } .story-year { min-height: 3.5em; margin: 0 0 24px; color: var(--brand-sweihan); } .story-item > p { min-height: 96px; } .story-image { margin-top: 28px; aspect-ratio: 4 / 3; } .story-achievement { margin-top: 22px; padding-top: 18px; } .why-footer a.btn.btn-primary:hover { background: var(--brand-sweihan); color: var(--brand-black); } @media (max-width: 900px) { .story-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 0; padding-top: 0; } .story-timeline::before, .story-dot { display: none; } .story-item, .story-item:nth-child(odd), .story-item:nth-child(even) { padding: 0 14px; border-inline-start: 0; } .story-item > p { min-height: 0; } } @media (max-width: 560px) { .story-timeline { grid-template-columns: 1fr; gap: 30px; } .story-item, .story-item:nth-child(odd), .story-item:nth-child(even) { padding: 0; } }  .value-head { display: block; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); } .value-head h2 { max-width: 14ch; } .value-head p { max-width: 58ch; margin: 16px 0 0; font-size: 1.04rem; } .companies-grid { display: flex; flex-wrap: wrap; gap: 16px; background: transparent; } .company-card { flex: 1 1 230px; min-height: 270px; padding: clamp(26px, 3vw, 38px); background: var(--surface-base); border-block: 1px solid var(--surface-sunken-strong); border-inline-start: 0; box-shadow: none; } .company-card::before { inset-inline-start: auto; inset-inline-end: 0; width: 4px; } .company-card .company-num { margin-bottom: 34px; color: var(--brand-jais); font-weight: 700; } .company-card a { color: var(--brand-black); margin-top: 18px; } .services-grid { display: flex; flex-direction: column; gap: 14px; background: transparent; } .service-card { display: flex; flex-direction: row; align-items: center; gap: clamp(18px, 3vw, 42px); min-height: 0; padding: 24px clamp(24px, 4vw, 48px); background: var(--surface-base); border-inline: 0; border-block: 1px solid var(--surface-sunken-strong); } .service-card .service-num { flex: 0 0 42px; margin: 0; color: var(--brand-jais); font-weight: 700; } .service-card .service-meta { flex: 0 1 190px; margin: 0; color: var(--brand-jais); } .service-card h3 { flex: 0 1 280px; margin: 0; font-size: clamp(1.2rem, 2vw, 1.55rem); } .service-card p { flex: 1 1 340px; margin: 0; max-width: 42ch; } .service-card a, .service-pending { flex: 0 0 auto; margin: 0; padding: 0; color: var(--brand-black); white-space: nowrap; } .openings-block { margin-top: clamp(54px, 7vw, 96px); } .openings-block .value-head h2 { max-width: none; } .openings-panel { border-block: 1px solid var(--surface-sunken-strong); } .openings-intro { background: var(--surface-raised); } .opening-row { grid-template-columns: 1.2fr 1fr auto; } .opening-row .opening-status { grid-column: 2 / -1; color: var(--brand-razeen) !important; }  .partners-head p { max-width: 62ch; margin: 16px auto 0; text-wrap: balance; }  .news-grid { --news-media-height: clamp(260px, 26vw, 380px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 18px; background: transparent; }  .news-filters { margin: 0; }  .news-card.is-filtered-out { display: none !important; }  .news-card { background: var(--surface-raised); border: 0; border-radius: var(--r); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out); } .news-card:hover, .news-card:focus-within { background: var(--surface-raised); } .news-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; } .news-card--feature .news-image-link { height: 100%; } .news-card--feature .img { block-size: 100%; min-height: clamp(260px, 26vw, 380px); } .news-card--feature .news-body { justify-content: center; } .news-card--feature h3 { font-size: clamp(1.35rem, 2vw, 1.85rem); -webkit-line-clamp: 3; }  .news-card .img, .news-card--feature .img { block-size: var(--news-media-height); min-height: 0; aspect-ratio: auto; background: var(--brand-black); } .news-card img { object-fit: cover; } .news-body { min-height: 0; padding: 22px 24px 20px; }   .news-card h3 { min-height: 2.8em; margin-top: 14px; color: var(--brand-black); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.4; text-wrap: balance; -webkit-line-clamp: 2; } .news-card p { min-height: 1.7em; margin-top: 10px; font-size: .96rem; line-height: 1.7; -webkit-line-clamp: 1; }  .news-card .more { margin-top: 16px; color: var(--brand-black); font-weight: 700; } .news-card .more i.ph { color: currentColor; } @media (max-width: 860px) { .news-card--feature { grid-template-columns: minmax(0, 1fr); } .news-card--feature .img { min-height: 220px; } } @media (max-width: 680px) {  .news-card--feature { grid-column: auto; } } @media (max-width: 860px) { .company-card { flex-basis: calc(50% - 8px); } .service-card { flex-wrap: wrap; gap: 10px 18px; } .service-card .service-meta { flex-basis: calc(100% - 60px); } .service-card h3 { flex-basis: calc(100% - 60px); margin-inline-start: 60px; } .service-card p { flex-basis: calc(100% - 60px); margin-inline-start: 60px; } .service-card a, .service-pending { margin-inline-start: 60px; } } @media (max-width: 560px) { .company-card { flex-basis: 100%; min-height: 0; } .service-card { padding: 22px; } .service-card h3, .service-card p, .service-card a, .service-pending { margin-inline-start: 0; flex-basis: 100%; } .opening-row { grid-template-columns: 1fr; } .opening-row .opening-status { grid-column: auto; } .news-grid { --news-media-height: 210px; } }  .news-subscribe { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 5vw, 76px); grid-template-columns: none; padding: clamp(24px, 3vw, 36px); } .news-subscribe-copy { display: block; } .news-subscribe-copy h3 { margin: 0; } .news-subscribe-copy p { max-width: 46ch; margin: 8px 0 0; } .news-form { flex: 1 1 380px; max-width: 520px; } .news-social { display: none; } @media (max-width: 680px) { .news-subscribe { align-items: stretch; flex-direction: column; gap: 18px; } .news-form { max-width: none; width: 100%; } }  @media (min-width: 981px) { .sector-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .sector-card, .sector-card:hover, .sector-card:focus-within { transform: none; box-shadow: none; } .sector-card .sector-card-img, .sector-card:hover .sector-card-img, .sector-card:focus-within .sector-card-img { transform: none; filter: saturate(.9) brightness(.9); } .sector-card .sector-card-media::after { opacity: 0; background: rgba(0, 0, 0, .16); } .sector-card:hover .sector-card-media::after, .sector-card:focus-within .sector-card-media::after { opacity: 1; } .sector-card:hover .sector-card-veil, .sector-card:focus-within .sector-card-veil { opacity: .86; } .sector-card:hover .sector-card-title, .sector-card:focus-within .sector-card-title, .sector-card:hover .sector-card-sub, .sector-card:focus-within .sector-card-sub { color: var(--brand-white); }  .sector-feature { width: min(calc(100% - clamp(32px, 7vw, 112px)), var(--max)); margin: 0 auto clamp(14px, 2vw, 24px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(214px, 18vw, 280px); background: var(--surface-base); color: var(--brand-black); overflow: hidden; } .sector-feature-copy { position: relative; padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; } .sector-feature-copy::after { content: ""; position: absolute; inset-inline-end: clamp(24px, 4vw, 58px); inset-block-end: -34px; width: 118px; height: 118px; background: url("../images/brand/sdeira-mark.svg?v=12a5a1af82a32441") center / contain no-repeat; opacity: .07; pointer-events: none; } .sector-feature-kicker { color: var(--brand-liwa); font-size: .82rem; font-weight: 700; } .sector-feature h2 { margin: 0; color: var(--brand-black); font-family: var(--font-display); font-size: clamp(1.65rem, 2.6vw, 2.45rem); line-height: 1.15; } .sector-feature p { max-width: 53ch; margin: 0; color: var(--brand-jais); font-size: clamp(.98rem, 1.2vw, 1.1rem); line-height: 1.8; } .sector-feature-link { position: relative; z-index: 1; min-height: 44px; margin-top: 5px; padding-inline: 17px; display: inline-flex; align-items: center; gap: 9px; background: var(--brand-black); color: var(--brand-white); font-weight: 700; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .sector-feature-link:hover, .sector-feature-link:focus-visible { background: var(--brand-sweihan); color: var(--brand-black); } .sector-feature-link i.ph { font-size: var(--ic-sm); } .sector-feature-visual { padding: clamp(20px, 3vw, 42px); display: grid; place-items: center; background: var(--surface-sunken); } .sector-feature-visual img { width: min(100%, 520px); height: auto; display: block; object-fit: contain; } @media (min-width: 981px) {  .sector-card-panel { display: none; } } @media (max-width: 980px) { .sector-feature { width: calc(100% - (var(--page-gutter) * 2)); grid-template-columns: 1fr; margin-block: 14px 18px; } .sector-feature-copy { order: 2; } .sector-feature-visual { order: 1; padding: 18px; } .sector-feature-visual img { width: min(100%, 440px); } }  @media (min-width: 981px) { .hero-content-row { width: min(100%, 1080px); } .hero-content-copy { flex-basis: auto; max-width: 960px; } .hero h1 { max-width: 23ch; font-size: clamp(2.35rem, min(4.1vw, 6.8svh), 3.95rem); line-height: 1.12; text-wrap: balance; } .hero p { max-width: 64ch; } }  .process-head { display: block; max-width: 760px; margin: 0 0 clamp(30px, 4vw, 46px); text-align: left; } .process-head .process-kicker, .process-head h2, .process-head p { grid-column: auto; grid-row: auto; } .process-head h2 { margin: 0; } .process-head p { max-width: 58ch; margin: 14px 0 0; padding: 0; border: 0; } .process-flow { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; overflow: visible; background: var(--surface-sunken-strong); } .process-step, .process-step:nth-child(n) { position: relative; display: grid; grid-template-columns: 74px 52px minmax(150px, .55fr) minmax(0, 1.45fr); grid-column: auto; align-items: center; min-width: 0; min-height: 136px; height: auto; padding: 24px clamp(22px, 4vw, 52px); gap: clamp(14px, 2.5vw, 34px); overflow: visible; isolation: auto; background: var(--surface-raised); color: var(--ink); text-align: left; transition: background var(--dur-base) var(--ease-out); } .process-step:not(:last-child) { border-block-end: 1px solid var(--surface-sunken-strong); } .process-step:hover, .process-step:nth-child(n):hover { background: var(--surface-sunken); } .process-step .process-num, .process-step:nth-child(n) .process-num { position: static; z-index: auto; inset: auto; order: initial; margin: 0; color: var(--brand-sweihan); font-size: clamp(1.85rem, 3vw, 2.65rem); font-weight: 700; line-height: 1; opacity: 1; transform: none; } .process-step .process-icon, .process-step:nth-child(n) .process-icon { position: static; z-index: auto; order: initial; width: 48px; height: 48px; margin: 0; background: var(--icon-wash); color: var(--brand-black); } .process-step h3, .process-step p, .process-step:nth-child(n) h3, .process-step:nth-child(n) p { position: static; z-index: auto; margin: 0; color: var(--ink); } .process-step h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); } .process-step p { max-width: 54ch; font-size: 1rem; line-height: 1.75; } @media (max-width: 720px) { .process-step, .process-step:nth-child(n) { grid-template-columns: 48px 1fr; grid-template-areas: "number icon" "number title" "number copy"; align-items: start; min-height: 0; padding: 22px 18px; gap: 8px 14px; } .process-step .process-num { grid-area: number; } .process-step .process-icon { grid-area: icon; } .process-step h3 { grid-area: title; } .process-step p { grid-area: copy; } }  [hidden] { display: none !important; }  .sector-feature { display: none !important; } .hero-sectors, .hero-sectors .wrap { overflow: visible; } .hero-sectors-head { position: relative; z-index: 2; background: none; } .sector-card-panel { display: none !important; } .sector-hover-region { position: absolute; inset-inline: 0; bottom: 100%; z-index: 12; display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); } .sector-hover-panels { width: min(calc(100% - clamp(32px, 7vw, 112px)), var(--max)); margin-inline: auto; display: grid; overflow: visible; } .sector-hover-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(300px, .82fr) minmax(480px, 1.38fr); align-items: stretch; width: 100%; min-height: 0; margin-block-end: 18px; background: var(--surface-base); color: var(--brand-black); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 18px, 0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); } .sector-hover-copy { padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; } .sector-hover-copy > span { color: var(--brand-liwa); font-size: .82rem; font-weight: 700; }  .sector-hover-copy h3 { margin: 0; color: var(--brand-black); font-family: var(--font-display); font-size: var(--type-feature); line-height: var(--leading-feature); } .sector-hover-copy p { max-width: 52ch; margin: 0; color: var(--brand-jais); line-height: 1.8; } .sector-hover-visual { position: relative; isolation: isolate; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; background: var(--surface-sunken); }  [data-sector="development"] .sector-hover-visual { --sector-preview-image: url("../images/group-living/development-community.webp?v=68728a30c31c2fdf"); } [data-sector="properties"] .sector-hover-visual { --sector-preview-image: url("../images/group-living/living-community.webp?v=fefa859f798661ee"); } [data-sector="management"] .sector-hover-visual { --sector-preview-image: url("../images/group-living/community-operations.webp?v=b91e58e0f0fcdd77"); } [data-sector="services"] .sector-hover-visual { --sector-preview-image: url("../images/group-living/community-services.webp?v=d2e331d3adaa40f0"); } [data-sector="investment"] .sector-hover-visual { --sector-preview-image: url("../images/group-living/community-portfolio.webp?v=a90b62bf4f0db5e7"); } .sector-hover-visual::before { content: ""; position: absolute; z-index: 0; inset: -18px; background-image: var(--sector-preview-image); background-size: cover; background-position: center; filter: blur(18px) saturate(.78) brightness(.92); opacity: .82; transform: scale(1.04); } .sector-hover-visual img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } @media (hover: hover) and (pointer: fine) { .hero-sectors:has(.sector-card:nth-child(-n + 5):hover) .sector-hover-region, .hero-sectors:has(.sector-card:nth-child(-n + 5):focus-within) .sector-hover-region { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .hero-sectors:has(.sector-card:nth-child(1):hover) .sector-hover-panel:nth-child(1), .hero-sectors:has(.sector-card:nth-child(1):focus-within) .sector-hover-panel:nth-child(1), .hero-sectors:has(.sector-card:nth-child(2):hover) .sector-hover-panel:nth-child(2), .hero-sectors:has(.sector-card:nth-child(2):focus-within) .sector-hover-panel:nth-child(2), .hero-sectors:has(.sector-card:nth-child(3):hover) .sector-hover-panel:nth-child(3), .hero-sectors:has(.sector-card:nth-child(3):focus-within) .sector-hover-panel:nth-child(3), .hero-sectors:has(.sector-card:nth-child(4):hover) .sector-hover-panel:nth-child(4), .hero-sectors:has(.sector-card:nth-child(4):focus-within) .sector-hover-panel:nth-child(4), .hero-sectors:has(.sector-card:nth-child(5):hover) .sector-hover-panel:nth-child(5), .hero-sectors:has(.sector-card:nth-child(5):focus-within) .sector-hover-panel:nth-child(5) { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 90ms, 90ms, 0s; } .sector-card .sector-card-media::after { display: block;  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-brand-deep) 76%, transparent) 0%, color-mix(in srgb, var(--surface-brand-deep) 90%, transparent) 100%), linear-gradient(180deg, rgba(var(--image-overlay-rgb), .46) 0%, rgba(var(--image-overlay-rgb), .62) 100%);  inset: -1px -40%; opacity: 1; clip-path: polygon(78% 0, 0 0, 22% 100%, 100% 100%); transform: translate3d(-78%, 0, 0); transition: transform var(--dur-slow) var(--ease-out); } .sector-card:hover .sector-card-media::after, .sector-card:focus-within .sector-card-media::after { transform: none; } .sector-card:hover .sector-card-veil, .sector-card:focus-within .sector-card-veil {  opacity: 1; } .sector-card:hover .sector-card-img, .sector-card:focus-within .sector-card-img { transform: none; filter: saturate(.9) brightness(.9); } .sector-card:hover .sector-card-sub, .sector-card:focus-within .sector-card-sub { opacity: 0; visibility: hidden; } .sector-card:hover .sector-card-title, .sector-card:focus-within .sector-card-title, .sector-card:hover .sector-card-mark, .sector-card:focus-within .sector-card-mark { color: var(--brand-white); } .sector-card:hover .sector-card-body, .sector-card:focus-within .sector-card-body { background: none; } .sector-card:hover .sector-card-action, .sector-card:focus-within .sector-card-action { width: fit-content; min-height: 0; padding: 0 0 8px; background: transparent; color: var(--brand-white); } }  .sector-card-title, .sector-card-sub, .sector-card-action { text-shadow: none !important; } .sector-card-body { height: 100%; padding: 20px clamp(16px, 1.7vw, 24px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 42px auto minmax(0, 1fr) auto; align-items: end; gap: 8px; } .sector-card-mark { grid-row: 1; align-self: start; margin: 0; background: transparent; transform: none; } .sector-card:hover .sector-card-mark, .sector-card:focus-within .sector-card-mark { background: transparent; transform: none; } .sector-card-title { grid-row: 2; grid-column: 1; align-self: end; } .sector-card-sub, .sector-card-action { grid-column: 1; align-self: start; margin: 0; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out); } .sector-card-sub { grid-row: 3; } .sector-card-action { grid-row: 4; position: static; inset: auto; inline-size: fit-content; min-height: 0; pointer-events: none; transform: none; } .sector-card:hover .sector-card-action, .sector-card:focus-within .sector-card-action { pointer-events: auto; transform: none; }  .action-link, .sector-card-action { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 0; padding: 0 0 8px; overflow: visible; isolation: auto; background: transparent; color: var(--brand-white); font-weight: 800; line-height: 1.3; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); } .action-link::before, .sector-card-action::before { content: none; } .action-link::after, .sector-card-action::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 100%; block-size: 3px; background: currentColor; transform: scaleX(.42); transform-origin: right center; transition: transform 300ms var(--ease-out); } .action-link:is(:hover, :focus-visible)::after, .sector-card:hover .sector-card-action::after, .sector-card:focus-within .sector-card-action::after { transform: scaleX(1); } .sector-card-action i.ph { color: currentColor; }  .sector-card { cursor: pointer; } @media (max-width: 980px) { .sector-grid > .sector-card:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 680px) { .sector-hover-region { display: none; } .hero-sectors-head { background: none; } } @media (prefers-reduced-motion: reduce) { .sector-card-media::after, .sector-card-sub, .sector-card-action, .sector-hover-region, .sector-hover-panel { transition: none; } }  .about-visual > img { position: relative; z-index: 0; display: block; }  .about-badge { z-index: 2; } .about-badge::before { content: none; } .about-badge > i.ph { position: absolute; z-index: 1; inset-block-start: 24px; inset-inline-end: 24px; color: var(--brand-white); font-size: 1.7rem; opacity: .9; } .about-badge > div { position: relative; z-index: 1; }  .impact-alt { padding: clamp(72px, 7vw, 108px) 0; background: var(--surface-base); } .impact-alt-intro { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr); gap: clamp(44px, 6vw, 92px); align-items: center; } .impact-alt-copy { text-align: left; } .impact-alt-copy .impact-kicker { margin-bottom: 18px; } .impact-alt-copy h2 { max-width: 13ch; margin: 0 0 22px; color: var(--brand-black); font-family: var(--font-display); font-size: clamp(2.5rem, 4.7vw, 5rem); line-height: 1.05; } .impact-alt-copy p { max-width: 52ch; margin: 0; color: var(--brand-jais); font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.9; }  .impact-alt-action { margin-top: 26px; margin-inline-start: -4px; } .impact-alt-collage { direction: ltr; display: grid; grid-template-columns: 1.08fr 1fr; grid-template-rows: repeat(3, minmax(128px, 1fr)); gap: 8px; height: clamp(470px, 43vw, 620px);  padding-block: 22px; overflow: hidden; background: var(--surface-base); } .impact-alt-collage figure { position: relative; margin: 0; overflow: hidden; background: var(--surface-sunken-strong); } .impact-alt-collage figure:first-child { grid-row: 1 / -1; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); } .impact-alt-collage figure:not(:first-child) { margin-left: -12%; clip-path: polygon(4.881% 0, 100% 0, 95.119% 100%, 0 100%); } .impact-alt-collage img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.9) contrast(1.03); } .impact-alt-collage figure:nth-child(2) img { object-position: center 58%; } .impact-alt-collage figure:nth-child(3) img { object-position: center 45%; } .impact-alt-collage figure:nth-child(4) img { object-position: center 55%; }  @media (max-width: 980px) { .impact-alt-collage figure:not(:first-child) { margin-left: 0; clip-path: none; } }  @media (min-width: 981px) { .impact-alt-collage { overflow: hidden; } .impact-alt-collage figure:not(:first-child) { margin-left: 0; z-index: 1; }  .impact-alt-collage figure:nth-child(2) { transform: translate3d(-5.513%, 0, 0); } .impact-alt-collage figure:nth-child(3) { transform: translate3d(-10.632%, 0, 0); } .impact-alt-collage figure:nth-child(4) { transform: translate3d(-15.751%, 0, 0); } } .impact-alt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 4vw, 58px); background: var(--surface-raised); } .impact-alt-stat { position: relative; min-width: 0; min-height: 212px; padding: 30px clamp(18px, 1.9vw, 30px); display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 54px 26px minmax(66px, auto); align-content: start; align-items: start; gap: 6px 14px; } .impact-alt-stat + .impact-alt-stat::before { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 72px; background: var(--brand-sweihan); transform: translateY(-50%) rotate(var(--brand-stripe-angle)); } .impact-alt-stat i.ph { grid-column: 1; grid-row: 1; align-self: center; color: var(--brand-sweihan); font-size: var(--ic-lg); } .impact-alt-stat strong { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; color: var(--brand-black); font-family: var(--font-display); font-size: clamp(1.65rem, 2.2vw, 2.55rem); line-height: 1.3; font-weight: 500; white-space: nowrap; } .impact-alt-stat span { grid-column: 2; grid-row: 2; color: var(--brand-black); font-size: .96rem; line-height: 1.35; white-space: nowrap; } .impact-alt-stat p { grid-row: 3; grid-column: 2; margin: 0; color: var(--brand-jais); font-size: .86rem; line-height: 1.6;  min-block-size: calc(3 * 1lh); } @media (max-width: 1180px) { .impact-alt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .impact-alt-stat { min-height: 196px; }  .impact-alt-stat + .impact-alt-stat::before { content: none; } .impact-alt-stat:nth-child(even)::before { content: ""; } } @media (max-width: 980px) { .impact-alt-intro { grid-template-columns: 1fr; } .impact-alt-collage { grid-row: 2; } } @media (max-width: 640px) { .impact-alt { padding-block: 64px; } .impact-alt-intro { gap: 38px; } .impact-alt-copy h2 { font-size: clamp(2.25rem, 12vw, 3rem); } .impact-alt-collage { height: min(126vw, 490px); } .impact-alt-stats { grid-template-columns: 1fr; margin-top: 28px; } .impact-alt-stat { min-height: 168px; padding: 24px 22px; grid-template-rows: 46px 24px minmax(52px, auto); } .impact-alt-stat:nth-child(even)::before { content: none; } .impact-alt-stat strong { font-size: clamp(1.45rem, 7vw, 1.8rem); } .impact-alt-stat p { min-block-size: calc(2 * 1lh); } }  .hero-slides-ind { display: flex; visibility: visible; opacity: 1; order: 2; inline-size: 100%; margin-top: 4px; }  .hero::after {  background: none; } header::before { background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .48) 52%, transparent 100%); }  @media (min-width: 981px) { .hero { padding-bottom: clamp(236px, 23vw, 320px); } .hero-content { min-height: calc(100svh - clamp(236px, 23vw, 320px)); padding-block: 120px 38px; } }  :is(.btn-primary, .news-form button, .nav-cta, .projects-footer .projects-footer-cta, .sector-hover-copy a) { background: var(--brand-sweihan); color: var(--brand-white); border-color: var(--brand-sweihan); font-weight: 800; box-shadow: none; } :is(.btn-primary, .btn-ghost, .news-form button, .nav-cta, .projects-footer .projects-footer-cta, .sector-hover-copy a, .project-tab) { position: relative; isolation: isolate; overflow: hidden; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } :is(.btn-primary, .btn-ghost, .news-form button, .nav-cta, .projects-footer .projects-footer-cta, .sector-hover-copy a, .project-tab):is(:hover, :focus-visible) { background: var(--brand-sweihan); color: var(--brand-white); border-color: var(--brand-sweihan); box-shadow: none; }  .projects-footer .projects-footer-cta { background: var(--brand-sweihan); color: var(--brand-white); border-color: var(--brand-sweihan); font-weight: 800; } .projects-footer .projects-footer-cta:is(:hover, :focus-visible) { background: var(--brand-sweihan); color: var(--brand-white); border-color: var(--brand-sweihan); } .sector-hover-copy a:is(:hover, :focus-visible), .why-footer a.btn.btn-primary:is(:hover, :focus-visible) { background: var(--brand-sweihan); color: var(--brand-white); } .why-footer a.btn.btn-primary { background: var(--brand-sweihan); color: var(--brand-white); border-color: var(--brand-sweihan); font-weight: 800; }  .btn-ghost { background: transparent; color: var(--brand-white); border-color: var(--brand-white); font-weight: 800; } .btn.btn-ghost:is(:hover, :focus-visible) { color: var(--brand-white); border-color: var(--brand-white); } header.scrolled .nav-cta, header.scrolled .nav-cta:is(:hover, :focus-visible) { background: var(--brand-sweihan); color: var(--brand-white); border-color: var(--brand-sweihan); font-weight: 800; } .project-tab.active, .project-tab:hover { background: var(--brand-black); border-color: var(--brand-black); color: var(--brand-white); } .project-tab.active:hover, .project-tab:focus-visible { background: var(--brand-black); border-color: var(--brand-black); color: var(--brand-white); }  .foot-bottom .socials a:hover, .menu.open .menu-contact:hover { background: var(--brand-razeen); border-color: var(--brand-razeen); color: var(--brand-black); }   .companies-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: transparent; } .company-card { position: relative; min-width: 0; min-height: 310px; padding: clamp(24px, 2.5vw, 36px) clamp(32px, 3.4vw, 46px); display: flex; flex-direction: column; align-items: flex-start; border: 0; background: var(--surface-base); }  .companies-grid { gap: clamp(16px, 2vw, 24px); background: transparent; } @media (max-width: 760px) { .companies-grid { grid-template-columns: 1fr; gap: clamp(14px, 4vw, 24px); background: transparent; } }  .company-card::before { inset: auto; top: -40px; right: -78px; width: clamp(230px, 46%, 360px); height: clamp(230px, 46%, 360px); z-index: -1; opacity: .1; pointer-events: none; transform: translate3d(0, 0, 0); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }  .company-card::before { background: url("../images/brand/sdeira-mark.svg?v=12a5a1af82a32441") center / contain no-repeat; }  .company-card:hover::before, .company-card:focus-within::before { opacity: .16; transform: translate3d(6px, 0, 0); }  .company-card .company-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .company-logo { position: relative; z-index: 1; width: 100%; min-height: 78px; margin-bottom: 24px; display: flex; align-items: flex-start; gap: 14px; color: var(--company-accent);  align-self: flex-end; } .company-logo svg { width: 54px; height: 48px; flex: 0 0 auto; } .company-logo--eskan { align-items: center; justify-content: flex-start; color: var(--brand-black); } .company-logo--eskan-wordmark { display: grid; gap: 0; color: var(--brand-black); font-family: var(--font-display); font-weight: 600; line-height: .85; } .company-logo--eskan-wordmark b { font-size: clamp(2rem, 2.8vw, 2.85rem); font-weight: 600; } .company-logo--eskan-wordmark small { margin: 0; color: var(--brand-black); font-size: .78rem; font-weight: 600; line-height: 1; } .company-logo strong, .company-logo h3 { margin: 0; color: var(--brand-black); font-family: var(--font-display); font-size: clamp(1.6rem, 2vw, 2.1rem); font-weight: 500; line-height: 1; } .company-logo small { display: block; margin-top: 7px; color: var(--brand-jais); font-size: .72rem; }   .company-logo--image img { width: auto; max-width: 100%; height: auto; max-height: 96px; } .company-card-title--sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .company-card > h3 { margin-top: 0; } .company-card > h3 small { display: block; margin-top: 7px; color: var(--brand-jais); font-size: .72rem; font-weight: 400; } .company-card p { flex: 1 1 auto; }  .company-card .action-link { margin-top: 18px; color: var(--brand-black); font-weight: 700; } .company-card .action-link i.ph { color: currentColor; font-size: .95rem; } .company-card .action-link.is-pending { color: var(--brand-jais); cursor: default; } .company-card.is-clickable { cursor: pointer; } .company-card:hover .action-link:not(.is-pending)::after, .company-card:focus-within .action-link:not(.is-pending)::after { transform: scaleX(1); }   .cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../images/sectors/real-estate-v2.webp?v=0178be6a058fa800") center / cover no-repeat; opacity: 1; transform: none; pointer-events: none; } .cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand-black); opacity: .55; pointer-events: none; }  .cta .kicker, .cta h2 { color: var(--brand-white); } .cta p { color: rgba(255, 255, 255, .82); } .cta-action { border: 1px solid color-mix(in srgb, var(--brand-black) 14%, transparent); } .cta-inner { width: min(1120px, 100%); text-align: left; } .cta .kicker { justify-content: flex-start; } .cta h2, .cta p { margin-inline: 0; } .cta-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; background: transparent; } .cta-action { position: relative; isolation: isolate; overflow: hidden; min-height: 190px; padding: 30px 28px; align-items: flex-start; text-align: left; background: var(--brand-razeen); color: var(--brand-black); clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); }  .cta-action:first-child { clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); } .cta-action:last-child { clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%); } .cta-action i.ph { width: auto; height: auto; background: transparent; color: var(--brand-black); position: relative; z-index: 1; } .cta-action > span { position: relative; z-index: 1; } .cta-action .cta-action-note { color: var(--brand-black); text-align: left; }  .cta-action::before { content: ""; position: absolute; z-index: -1; inset: -1px -40%; background: color-mix(in srgb, var(--brand-sweihan) 30%, transparent); clip-path: polygon(78% 0, 0 0, 22% 100%, 100% 100%); transform: translate3d(-78%, 0, 0); transition: transform var(--dur-slow) var(--ease-out) 55ms; pointer-events: none; } .cta-action:is(:hover, :focus-visible)::before { transform: none; }  @media (max-width: 620px) { .cta-actions { grid-template-columns: 1fr; }  .cta-action, .cta-action:first-child, .cta-action:last-child { clip-path: none; } }  .cta-action::before { display: block; z-index: 0; inset: -1px -40%; background: var(--brand-sweihan); opacity: .34; clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); transform: translate3d(78%, 0, 0); transition: transform var(--dur-slow) var(--ease-out) 55ms; } .cta-action:first-child::before { background: color-mix(in srgb, var(--brand-liwa) 58%, var(--brand-sweihan)); } .cta-action:is(:hover, :focus-visible) { border-color: var(--accent); }  .cta-action, .cta-action:first-child, .cta-action:last-child { display: flex; position: relative; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 20px; min-height: 168px; padding: 26px 30px; } .cta-action > i.ph:not(.cta-arrow) { font-size: 2.15rem; line-height: 1; } .cta-action > span:not(.cta-action-note) { max-width: 18ch; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.35; } .cta-action .cta-arrow { display: none !important; } @media (max-width: 620px) { .cta-actions { grid-template-columns: 1fr; gap: 12px; } }  .reveal.armed { opacity: 0; visibility: hidden; transform: translate3d(0, 24px, 0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); will-change: opacity, transform; } .reveal.armed.in { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); transition-delay: 0s; will-change: auto; } .reveal.armed[data-d="1"] { transition-delay: 80ms; } .reveal.armed[data-d="2"] { transition-delay: 160ms; } .reveal.armed[data-d="3"] { transition-delay: 240ms; } .reveal.armed.in[data-d="1"] { transition-delay: 80ms; } .reveal.armed.in[data-d="2"] { transition-delay: 160ms; } .reveal.armed.in[data-d="3"] { transition-delay: 240ms; } :is(.btn, .nav-cta, .project-tab, .sector-card-action, .sector-hover-copy a, .cta-action):focus-visible { outline: 3px solid var(--brand-razeen); outline-offset: 3px; }   .hero-sectors-head { position: relative; isolation: isolate; justify-content: center; text-align: center; min-height: 42px; padding-block: 0; background: var(--scrim-bar); backdrop-filter: blur(18px) saturate(112%); -webkit-backdrop-filter: blur(18px) saturate(112%); } .hero-sectors-head::after { content: ""; position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 1px; background: rgb(255 255 255 / .16); } .hero-sectors-label { width: 100%; min-height: 0; margin: 0; display: grid; place-items: center; font-family: var(--font-display); gap: 10px; font-size: .86rem; font-weight: 700;  color: var(--brand-white); }  @media (min-width: 981px) and (hover: hover) and (pointer: fine) { .sector-hover-region { position: relative; inset: auto; bottom: auto; height: 0; } .sector-hover-panels { position: absolute; inset-inline: 0; bottom: 6px; } .sector-hover-panel { margin-block-end: 0; } }  @media (min-width: 981px) { .hero-sectors .wrap { width: 100%; max-width: none; padding-inline: 0; } .hero-sectors-head { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); padding-inline: 0; display: grid; place-items: center; } .hero-sectors-label { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; text-align: center; }  .sector-grid { gap: clamp(6px, .55vw, 12px); background: var(--scrim-bar); border-top: 0; backdrop-filter: blur(18px) saturate(112%); -webkit-backdrop-filter: blur(18px) saturate(112%); } .sector-card { border-inline-start: 0; } .sector-card:first-child { border-inline-start: 0; } }  @media (min-width: 981px) { .hero-slides-ind { inline-size: clamp(160px, 18vw, 240px); } }   .hero-scroll-cue { display: flex; align-items: center; justify-content: space-between; gap: 16px; }   .hero-scroll-cue > .hero-slides-ind { margin-top: 0; flex: 0 0 auto; inline-size: clamp(160px, 18vw, 240px); order: 0; }  @media (max-width: 720px) { .hero-scroll-cue > .hero-slides-ind { inline-size: 100%; } } @media (min-width: 981px) { .hero { display: grid;  grid-template-rows: minmax(0, 1fr) auto; height: max(760px, 100svh); min-height: max(760px, 100svh); padding-bottom: 0; } .hero-content { grid-row: 1; align-self: stretch; min-height: 0; height: auto; } .hero-scroll-cue { position: relative; z-index: 3; } .hero-sectors { grid-row: 2; position: relative; inset: auto; margin-top: 0; } }  @media (max-width: 720px) { .scroll-hint { display: none; } }  .news-grid.is-filtered-view, .featured-projects .project-cards.is-filtered-view { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); background: transparent; overflow: visible; border-radius: var(--r); }  .news-grid.is-filtered-view .news-card--feature { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .news-grid.is-filtered-view .news-card--feature.is-filtered-out { display: none; } .news-grid.is-filtered-view .news-card--feature .news-image-link { height: auto; }  .news-grid.is-filtered-view .news-card--feature .img { min-height: 0; aspect-ratio: var(--media-wide); block-size: auto; } .news-grid.is-filtered-view .news-card--feature .news-body { justify-content: initial; } .news-grid.is-filtered-view .news-card--feature h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); -webkit-line-clamp: 2; } .featured-projects .project-cards.is-filtered-view .project-card--feature { grid-column: auto; position: static; min-height: 0 !important; overflow: hidden; background: var(--surface-raised) !important; } .project-cards.is-filtered-view .project-card--feature .project-card-img {  position: relative; inset: auto; height: auto; }  .featured-projects .project-cards.is-filtered-view .project-card { grid-template-rows: clamp(240px, 25vw, 340px) auto; min-height: 0; height: auto; background: var(--surface-raised); } .project-cards.is-filtered-view .project-card .project-card-img, .project-cards.is-filtered-view .project-card--secondary .project-card-img { min-height: 0; height: clamp(240px, 25vw, 340px); } .project-cards.is-filtered-view .project-card .project-card-body { min-height: 0; padding: clamp(24px, 2.4vw, 34px); background: var(--surface-raised); } .project-cards.is-filtered-view .project-card--feature .project-card-img::after { display: none; }  .project-cards.is-filtered-view .project-card--feature .project-card-body { position: relative; overflow: hidden; inset: auto; max-width: none; min-height: 0; padding: clamp(24px, 2.4vw, 34px); background: var(--surface-sunken); color: var(--brand-black); } .project-cards.is-filtered-view .project-card--feature:hover .project-card-body { background: var(--surface-sunken-strong); }  html[dir="ltr"] .project-cards.is-filtered-view .project-card--feature, html[dir="ltr"] .project-cards.is-filtered-view .project-card--feature .project-card-body { background: var(--surface-raised); } html[dir="ltr"] .project-cards.is-filtered-view .project-card--feature:hover .project-card-body { background: var(--surface-sunken); }  .project-cards.is-filtered-view .project-card--feature h3 { color: var(--brand-black); } .project-cards.is-filtered-view .project-card--feature p { color: var(--muted); } .project-cards.is-filtered-view .project-card--feature h3 { font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.25; } .project-cards.is-filtered-view .project-card--feature p { max-width: none; } .project-cards.is-filtered-view .project-card--feature .project-meta {  margin-top: 0; padding-top: 0; border-top: 0; } .project-cards.is-filtered-view .project-card--feature .project-card-action {  color: var(--brand-black); font-weight: 700; }  .project-card--feature .card-chevron { display: none; } .project-cards.is-filtered-view .project-card--feature .card-chevron { display: block; position: absolute; z-index: 0;  inset: auto; left: auto; right: -7%; bottom: -8%; width: min(40%, 180px); aspect-ratio: 434 / 281; opacity: 1; --chev-line: var(--brand-white); --chev-tint: rgba(255, 255, 255, .30); pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .project-cards.is-filtered-view .project-card--feature .card-chevron svg { width: 100%; height: 100%; overflow: visible; transform: scaleX(-1); } .project-cards.is-filtered-view .project-card--feature .project-card-body > :not(.card-chevron) { position: relative; z-index: 1; } .project-cards.is-filtered-view .project-card--feature:is(:hover, :focus-within) .card-chevron { transform: translate3d(-14px, -10px, 0); } @media (prefers-reduced-motion: reduce) { .project-cards.is-filtered-view .project-card--feature .card-chevron { transition: none; } } @media (max-width: 720px) { .news-grid.is-filtered-view, .featured-projects .project-cards.is-filtered-view { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .project-card--feature .project-card-img img { transition: none; } .project-card--feature:is(:hover, :focus-within) .project-card-img img { transform: none; } }  footer { position: relative; isolation: isolate; overflow: hidden; }  footer > .wrap { position: relative; z-index: 1; }  main p, footer .foot-brand p { text-wrap: balance; } .cta-inner > p { max-inline-size: 53ch; }  .section-filter-bar { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; width: 100%; } .section-filter-bar :is(.project-filters, .news-filters) { margin: 0; } .section-view-all { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 0; padding: 10px 4px; border: 0; background: transparent; color: var(--brand-black); font: inherit; font-weight: 700; cursor: pointer; } .section-view-all i { color: var(--accent); font-size: 1.1rem; } .section-view-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } @media (max-width: 620px) { .section-filter-bar { align-items: flex-start; flex-direction: column; }  :is(.featured-projects, .news-section) .section-view-all { display: none; } }  .cta::before { background-image: none; background-position: center; } .cta::after { background: rgb(0 0 0); opacity: .76; } .cta-inner { width: min(1420px, 100%); text-align: center; } .cta .kicker { justify-content: center; } .cta h2, .cta p { margin-inline: auto; } .cta-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; max-width: none; } .cta-action, .cta-action:first-child, .cta-action:last-child { background: rgba(43, 41, 41, .92); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r); color: var(--brand-white); clip-path: none; } .cta-action:first-child { background: var(--accent); border-color: var(--accent); } .cta-action i.ph { color: currentColor; } .cta-action .cta-action-note { display: none; }  .cta-action, .cta-action:first-child, .cta-action:last-child { display: flex; position: relative; flex-direction: row; align-items: center; justify-content: center; gap: 14px; min-height: 84px; padding: 14px 20px; text-align: start; } .cta-action > i.ph:not(.cta-arrow) { display: none !important; }  .cta-action > i.ph.cta-action-mark:not(.cta-arrow) { display: block !important; position: relative; z-index: 2; width: auto; height: auto; margin: 0; background: transparent; color: currentColor; font-size: 1.7rem; line-height: 1; opacity: 1; pointer-events: none; transform: none; } .cta-action > span:not(.cta-action-note), .cta-action .cta-arrow { position: relative; z-index: 2; } .cta-action > span:not(.cta-action-note) { flex: 0 1 auto; max-width: none; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.35; text-align: start; } .cta-action .cta-arrow { display: grid !important; place-items: center; position: relative !important; inset: auto; margin-inline-start: auto; font-size: .9rem !important; transform: none; }  .cta-action { overflow: hidden; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .cta-action::before { display: none; } .cta-action:is(:hover, :focus-visible), .cta-action:first-child:is(:hover, :focus-visible) { transform: none; background-color: var(--accent-deep); border-color: var(--accent-deep); }  @media (min-width: 621px) { .cta-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 620px) { .cta-actions { grid-template-columns: 1fr; gap: 12px; } }  .section-filter-bar { margin-block: clamp(28px, 3vw, 42px) clamp(24px, 2.5vw, 36px); } .projects-head:has(.section-filter-bar) { gap: clamp(28px, 3vw, 42px); margin-bottom: 0; grid-template-columns: minmax(0, 1fr); justify-content: stretch; } .projects-head .section-filter-bar { margin-block: 0 clamp(24px, 2.5vw, 36px); }  :is(.action-link, .sector-card-action) { gap: .48rem; padding-block-end: 4px; overflow: visible; } :is(.action-link, .sector-card-action, .section-view-all) > i.ph { flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-out); } :is(.news-card, .project-card, .sector-card, .company-card, .needs-route):is(:hover, :focus-within) :is(.action-link, .sector-card-action):not(.is-pending)::after { transform: scaleX(1); } :is(.action-link, .sector-card-action)::after { block-size: 2px; }  @media (max-width: 720px) { .hero-sectors .sector-grid { gap: 8px; } } @media (prefers-reduced-motion: reduce) { :is(.action-link, .sector-card-action, .section-view-all) > i.ph { transition: none; } }  .hero-sectors .sector-grid { grid-auto-rows: 1fr; align-items: stretch; }  .hero-sectors .sector-card { aspect-ratio: auto; inline-size: 100%; block-size: auto; min-block-size: 0; min-height: 0; overflow: hidden; }  .hero-sectors .sector-card-veil { background: linear-gradient(180deg, rgba(var(--image-overlay-rgb), .04) 0%, rgba(var(--image-overlay-rgb), .06) 10%, rgba(var(--image-overlay-rgb), .09) 20%, rgba(var(--image-overlay-rgb), .14) 30%, rgba(var(--image-overlay-rgb), .22) 40%, rgba(var(--image-overlay-rgb), .34) 50%, rgba(var(--image-overlay-rgb), .42) 55%, rgba(var(--image-overlay-rgb), .52) 60%, rgba(var(--image-overlay-rgb), .62) 65%, rgba(var(--image-overlay-rgb), .70) 70%, rgba(var(--image-overlay-rgb), .80) 80%, rgba(var(--image-overlay-rgb), .87) 90%, rgba(var(--image-overlay-rgb), .92) 100%); } .hero-sectors .sector-card-body { position: relative; min-block-size: 0; padding: clamp(14px, 1.35vw, 18px); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; } .hero-sectors .sector-card-mark, .hero-sectors .sector-card-title, .hero-sectors .sector-card-sub { margin: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .hero-sectors .sector-card-mark { flex: 0 0 auto; margin-block-end: 2px; } .hero-sectors .sector-card-sub { min-height: 0; } .hero-sectors .sector-card-action { position: absolute; inset-inline-start: clamp(14px, 1.35vw, 18px); inset-block-end: clamp(14px, 1.35vw, 18px); margin: 0; padding: 0 0 4px; min-height: 0; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .hero-sectors .sector-card:is(:hover, :focus-within) :is(.sector-card-title, .sector-card-sub) { transform: translateY(-32px); } .hero-sectors .sector-card:is(:hover, :focus-within) .sector-card-sub { opacity: 1; visibility: visible; } .hero-sectors .sector-card:is(:hover, :focus-within) .sector-card-action { opacity: 1; pointer-events: auto; transform: none; } @media (prefers-reduced-motion: reduce) { .hero-sectors .sector-card-mark, .hero-sectors .sector-card-title, .hero-sectors .sector-card-sub, .hero-sectors .sector-card-action { transition: none; } } @media (max-width: 980px) { .hero-sectors .sector-grid { grid-auto-rows: auto; }  .hero-sectors .sector-card { aspect-ratio: auto; } }  .needs { position: relative; overflow: hidden; padding-block: clamp(76px, 8vw, 124px); background: var(--surface-sunken); color: var(--ink); } .needs-layout { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: clamp(40px, 6vw, 92px); align-items: start; } .needs-intro { padding-top: clamp(8px, 1.2vw, 20px); } .needs-intro .kicker { color: var(--label); } .needs-intro h2 { max-width: 10ch; margin: 16px 0 24px; color: var(--ink); font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1.03; } .needs-intro p { max-width: 37ch; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.16rem); line-height: 1.85; } .needs-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } .needs-route { position: relative; display: grid; grid-template-rows: clamp(132px, 12vw, 176px) 1fr; overflow: hidden; min-width: 0; min-height: 360px; background: var(--surface-base); color: var(--ink); text-decoration: none; } .needs-route-media { position: relative; display: block; overflow: hidden; border-radius: var(--r); } .needs-route-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow); } .needs-route:hover .needs-route-media img, .needs-route:focus-within .needs-route-media img { transform: scale(var(--zoom)); }  .card-chevron { --chev-tint: color-mix(in srgb, var(--brand-razeen) 34%, var(--brand-white)); --chev-line: var(--brand-sweihan); position: absolute; z-index: 0;  inset: auto; left: -7%; bottom: -8%; width: min(62%, 300px); aspect-ratio: 434 / 281; opacity: .78; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .card-chevron svg { width: 100%; height: 100%; overflow: visible; }  html[dir="ltr"] .card-chevron { left: auto; right: -7%; } html[dir="ltr"] .card-chevron svg { transform: scaleX(-1); } html[dir="ltr"] :is(.needs-route, .company-card, .project-card--secondary):is(:hover, :focus-within) .card-chevron { transform: translate3d(-14px, -10px, 0); }  .needs-route-copy > :not(.card-chevron), .company-card > :not(.card-chevron, .company-num) { position: relative; z-index: 1; } :is(.needs-route, .company-card, .project-card--secondary):is(:hover, :focus-within) .card-chevron { transform: translate3d(14px, -10px, 0); }  :is(.needs-route, .project-card--secondary, .company-card) .card-chevron, :is(.needs-route, .project-card--secondary, .company-card):is(:hover, :focus-within) .card-chevron { --chev-line: var(--brand-white); --chev-tint: rgba(255, 255, 255, .30); opacity: 1; }  :is(.needs-route, .project-card--secondary, .company-card) .card-chevron { width: min(40%, 180px); } @media (prefers-reduced-motion: reduce) { .card-chevron { transition: none; } } .needs-route:focus-visible { outline: 2px solid var(--brand-black); outline-offset: 4px; } .needs-route:focus-visible { outline: 2px solid var(--brand-black); outline-offset: 4px; } .needs-route-copy { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: clamp(22px, 2.3vw, 30px); min-width: 0; } .needs-route-audience { display: block; margin-bottom: 12px; color: var(--label); font-size: .84rem; font-weight: 700; line-height: 1.45; } .needs-route h3 { margin: 0; min-block-size: 2.5em; color: var(--ink); font-size: clamp(1.25rem, 1.7vw, 1.65rem); line-height: 1.25; text-wrap: balance; } .needs-route p { flex: 1 1 auto; margin: 12px 0 0; min-block-size: 3.3em; color: var(--muted); line-height: 1.65; text-wrap: balance; } .needs-route-action {  margin-top: auto; padding-top: 20px; color: var(--ink); align-self: flex-start; width: auto; max-width: calc(100% - 1.5em); white-space: nowrap; } .needs-route-action i.ph { color: currentColor; } @media (max-width: 920px) { .needs-layout { grid-template-columns: 1fr; gap: 42px; } .needs-intro h2 { max-width: none; } } @media (max-width: 620px) { .needs { padding-block: 68px; } .needs-routes { grid-template-columns: 1fr; } .needs-route { grid-template-rows: 168px 1fr; min-height: 0; } } @media (prefers-reduced-motion: reduce) { .needs-route-media img, .needs-route-action i { transition: none; } }  .needs-prototypes { padding-block: clamp(84px, 10vw, 148px); background: var(--surface-base); color: var(--ink); } .needs-prototypes-intro { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 76px); text-align: center; } .needs-prototypes-intro .kicker { justify-content: center; } .needs-prototypes-intro h2 { margin: 14px 0 12px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.18; } .needs-prototypes-intro p { margin: 0; color: var(--muted); text-wrap: balance; } .needs-prototype + .needs-prototype { margin-top: clamp(76px, 10vw, 148px); padding-top: clamp(76px, 10vw, 148px); border-top: 1px solid var(--surface-sunken-strong); } .needs-prototype-head { position: static !important; inset: auto !important; transform: none !important; max-width: 760px; margin: 0 auto; padding: 0; text-align: center; } .needs-prototype-head .kicker { justify-content: center; } .needs-prototype-head h3 { margin: 14px 0 12px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.18; } .needs-prototype-head p { margin: 0; color: var(--muted); text-wrap: balance; } .needs-prototype-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2vw, 24px); margin-top: clamp(38px, 5vw, 64px); } .needs-prototype-tile { display: grid; grid-template-rows: auto auto; min-width: 0; min-height: 0; align-self: start; overflow: hidden; background: #fff; color: var(--ink); text-decoration: none; } .needs-prototype-media, .needs-prototype-tile-media, .needs-prototype-row-media { position: relative; overflow: hidden; background: var(--brand-black); } .needs-prototype-media::after, .needs-prototype-tile-media::after, .needs-prototype-row-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(23, 22, 20, .32)); pointer-events: none; } .needs-prototype-media::before, .needs-prototype-tile-media::before, .needs-prototype-row-media::before { content: ""; position: absolute; z-index: 1; inset-block: -20%; inset-inline-start: -5%; width: 62%; background: linear-gradient(var(--brand-stripe-gradient-angle), transparent 0 17%, rgba(255, 255, 255, .72) 17% 21%, transparent 21% 40%, rgba(201, 151, 55, .8) 40% 47%, transparent 47% 64%, rgba(220, 105, 40, .75) 64% 72%, transparent 72%); pointer-events: none; } .needs-prototype-tile img, .needs-prototype-row img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .needs-prototype-tile .needs-prototype-media { aspect-ratio: 16 / 9; } .needs-prototype-copy, .needs-prototype-tile-copy { display: flex; flex-direction: column; min-height: 290px; padding: clamp(22px, 2.4vw, 30px); } .needs-prototype-copy small, .needs-prototype-row-copy small { color: var(--label); font-size: .82rem; font-weight: 700; line-height: 1.45; } .needs-prototype-copy strong { margin: 12px 0 0; font-size: clamp(1.28rem, 1.7vw, 1.55rem); line-height: 1.3; text-wrap: balance; } .needs-prototype-copy em { flex: 1 1 auto; margin: 14px 0 0; color: var(--muted); font-size: .94rem; font-style: normal; line-height: 1.7; text-wrap: balance; } .needs-prototype-copy b, .needs-prototype-row-copy b, .needs-prototype-link { position: relative; display: inline-flex; align-self: flex-start; max-width: calc(100% - 1.5em); margin-top: 24px; color: var(--ink); font-size: .92rem; font-weight: 700; white-space: nowrap; } .needs-prototype-copy b::after, .needs-prototype-row-copy b::after, .needs-prototype-link::after { content: ""; position: absolute; inset-inline: 0; bottom: -5px; block-size: 2px; background: currentColor; transform-origin: right; transform: scaleX(.38); transition: transform var(--dur-base) var(--ease-out); } .needs-prototype-copy b i, .needs-prototype-row-copy b i, .needs-prototype-link i { position: absolute; inset-inline-end: -1.45em; opacity: 0; transform: translateX(7px); transition: opacity 180ms var(--ease-out), transform 240ms var(--ease-out); } .needs-prototype-tile:is(:hover, :focus-visible) img, .needs-prototype-row:is(:hover, :focus-visible) img { transform: scale(var(--zoom)); } .needs-prototype-tile:is(:hover, :focus-visible) b::after, .needs-prototype-row:is(:hover, :focus-visible) b::after, .needs-prototype-tile:is(:hover, :focus-visible) .needs-prototype-link::after, .needs-prototype-row:is(:hover, :focus-visible) .needs-prototype-link::after { transform: scaleX(1); } .needs-prototype-tile:is(:hover, :focus-visible) b i, .needs-prototype-row:is(:hover, :focus-visible) b i, .needs-prototype-tile:is(:hover, :focus-visible) .needs-prototype-link i, .needs-prototype-row:is(:hover, :focus-visible) .needs-prototype-link i { opacity: 1; transform: none; } .needs-prototype-stream { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(38px, 5vw, 64px); } .needs-prototype-row { display: grid; grid-template-columns: minmax(360px, 1.1fr) minmax(320px, .9fr); align-items: stretch; min-width: 0; color: var(--ink); text-decoration: none; }  .needs-prototype-row-media { min-height: 0; aspect-ratio: 16 / 9; } .needs-prototype-row-media::after { background: linear-gradient(180deg, rgba(23, 22, 20, .04), rgba(23, 22, 20, .16)); } .needs-prototype-row-media::before { inset-block: -12%; inset-inline-start: -7%; width: 70%; background: linear-gradient(var(--brand-stripe-gradient-angle), transparent 0 19%, rgba(250, 246, 239, .38) 19% 23%, transparent 23% 43%, rgba(201, 151, 55, .16) 43% 49%, transparent 49% 69%, rgba(220, 105, 40, .12) 69% 76%, transparent 76%); } .needs-prototype-row:nth-child(1) .needs-prototype-row-media::before { width: 38%; background: linear-gradient(var(--brand-stripe-gradient-angle), transparent 0 42%, rgba(250, 246, 239, .42) 42% 49%, transparent 49%); } .needs-prototype-row:nth-child(2) .needs-prototype-row-media::before { width: 56%; background: linear-gradient(var(--brand-stripe-gradient-angle), transparent 0 25%, rgba(250, 246, 239, .38) 25% 32%, transparent 32% 57%, rgba(201, 151, 55, .14) 57% 64%, transparent 64%); } .needs-prototype-row:nth-child(3) .needs-prototype-row-media::before { width: 73%; } .needs-prototype-row:nth-child(4) .needs-prototype-row-media::before { inset-inline-start: 30%; width: 46%; background: linear-gradient(var(--brand-stripe-gradient-angle), transparent 0 25%, rgba(250, 246, 239, .42) 25% 33%, transparent 33% 58%, rgba(220, 105, 40, .12) 58% 65%, transparent 65%); } .needs-prototype-row-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-self: center; min-height: min(74%, 300px); margin-inline-start: clamp(-96px, -7vw, -44px); padding: clamp(30px, 4vw, 58px); background: #fff; box-shadow: none; } .needs-prototype-row-copy strong { margin: 12px 0 0; font-size: clamp(1.55rem, 2.4vw, 2.35rem); line-height: 1.2; text-wrap: balance; } .needs-prototype-row-copy > small { display: inline-flex; align-self: flex-start; padding: 6px 10px; border-radius: var(--r); background: var(--surface-sunken); color: var(--brand-jais); font-size: .78rem; font-weight: 800; line-height: 1.35; } .needs-prototype-row-copy em { margin: 18px 0 0; color: var(--muted); font-style: normal; line-height: 1.8; text-wrap: balance; } .needs-prototype-row-copy b, .needs-prototype-row .needs-prototype-link { margin-top: auto; padding-top: 26px; } @media (max-width: 700px) { .needs-prototype-grid { grid-template-columns: 1fr; } .needs-prototype-row { grid-template-columns: 1fr; } .needs-prototype-row-copy { margin: -36px 18px 0; min-height: 0; } } @media (prefers-reduced-motion: reduce) { .needs-prototype-tile img, .needs-prototype-row img, .needs-prototype-link, .needs-prototype-link i { transition: none; } }  .needs { padding-block: clamp(84px, 10vw, 144px); background: #F6E9D6; color: var(--ink); } .needs-layout { display: block; }  .needs-intro { max-width: 760px; margin-inline: 0; padding: 0; text-align: start; } .needs-intro .kicker { justify-content: flex-start; } .needs-intro h2 { max-width: none; margin: 14px 0 12px; font-size: clamp(2.25rem, 4.4vw, 3.55rem); line-height: 1.16; } .needs-intro p { max-width: 55ch; margin-inline: 0; } .needs-routes { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3.6vw, 52px); margin-top: clamp(42px, 5.5vw, 74px); } .needs-route { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(clamp(330px, 40vw, 470px), auto); align-items: center; min-height: clamp(330px, 40vw, 470px); direction: rtl; color: var(--ink); background: transparent; isolation: isolate; } .needs-route-media { grid-area: 1 / 1; justify-self: end; align-self: center; z-index: 1; width: min(72%, 800px); min-height: 0; aspect-ratio: 16 / 9; background: var(--surface-sunken); } .needs-route:nth-child(even) .needs-route-media { justify-self: start; } .needs-route-copy { grid-area: 1 / 1; justify-self: start; direction: ltr; position: relative; z-index: 3; align-self: center;  width: min(48%, 520px); min-height: 0; margin: 0; padding: clamp(28px, 3.4vw, 46px); background: var(--surface-raised); box-shadow: none;  overflow: hidden; border-radius: var(--r); } .needs-route:nth-child(even) .needs-route-copy { justify-self: end; } .needs-route-audience { display: inline-flex; align-self: flex-start; width: fit-content; margin: 0; padding: 6px 10px; background: var(--surface-sunken); color: var(--brand-jais); font-size: .78rem; font-weight: 800; line-height: 1.35; } .needs-route-copy > strong { min-block-size: 0; margin: 14px 0 0; color: var(--ink); font-size: clamp(1.55rem, 2.4vw, 2.35rem); font-weight: 400; line-height: 1.2; text-wrap: balance; } .needs-route-copy > em { flex: 0 1 auto; min-block-size: 0; margin: 18px 0 0; color: var(--muted); font-size: 1rem; font-style: normal; line-height: 1.8; text-wrap: balance; } .needs-route-action { align-self: flex-start;  margin-top: clamp(30px, 3.6vw, 54px); padding-top: 0; } @media (max-width: 700px) { .needs-route { display: flex; flex-direction: column; min-height: 0; } .needs-route-media { width: 100%; aspect-ratio: 16 / 9; } .needs-route-copy { width: calc(100% - 36px); margin: -42px auto 0; min-height: 0; } }  html[dir="ltr"] :is(.action-link, .sector-card-action)::after { transform-origin: left center; }  html[dir="ltr"] .hero-sectors .sector-card-body { align-items: flex-start; text-align: start; } html[dir="ltr"] .hero-sectors :is(.sector-card-mark, .sector-card-title, .sector-card-sub) { align-self: flex-start; text-align: start; } html[dir="ltr"] .about-content, html[dir="ltr"] .about-copy { direction: ltr; }  html[dir="ltr"] .about-layout { direction: rtl; } html[dir="ltr"] .about-badge { right: auto; left: -36px; direction: ltr; text-align: start; }  html[dir="ltr"] .split-badge { direction: ltr; text-align: start; } html[dir="ltr"] #companiesTitle { max-width: 18ch; } html[dir="ltr"] #newsTitle { max-width: 26ch; text-wrap: balance; } @media (max-width: 980px) { html[dir="ltr"] .about-badge { right: auto; left: 24px; } } @media (max-width: 600px) { html[dir="ltr"] .about-badge { right: auto; left: 14px; } } html[dir="ltr"] .company-card:hover::before, html[dir="ltr"] .company-card:focus-within::before { transform: translate3d(-6px, 0, 0); } html[dir="ltr"] .projects-copy { margin-inline-start: 0; margin-inline-end: auto; text-align: left; } html[dir="ltr"] .project-card--feature .project-card-img::after { background: linear-gradient(90deg, rgba(var(--image-overlay-rgb), .74), rgba(var(--image-overlay-rgb), .20) 68%, rgba(var(--image-overlay-rgb), .48)); } html[dir="ltr"] .project-card--secondary, html[dir="ltr"] .project-card--secondary .project-card-body { background: var(--surface-raised); } html[dir="ltr"] :is(.project-cards, .news-grid).is-filtered-view { grid-auto-rows: 1fr; } html[dir="ltr"] .project-cards.is-filtered-view .project-card, html[dir="ltr"] .news-grid.is-filtered-view .news-card { height: 100%; } html[dir="ltr"] .project-cards.is-filtered-view .project-card--secondary { margin-top: 0; border-inline-start: 0; } html[dir="ltr"] .companies-grid { grid-auto-rows: 1fr; } html[dir="ltr"] .company-card { height: 100%; }  .foot-socials { display: flex; align-items: center; gap: 16px; } .foot-socials a { inline-size: 40px; block-size: 40px; display: grid; place-items: center;  border: 0; border-radius: var(--r); color: var(--icon-on-dark); background: rgba(255, 255, 255, .08); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .foot-socials a:is(:hover, :focus-visible) { background-color: var(--brand-razeen); color: var(--brand-black); transform: scale(1.06); } .foot-socials i.ph { font-size: var(--ic-sm); line-height: 1; }  .menu > .nav-disclosure { position: relative; flex: 0 0 auto; }  .nav-disclosure[open]::details-content { overflow: visible; } @supports selector(.nav-disclosure::details-content) { @media (min-width: 1281px) { .nav-disclosure[open]::details-content { position: absolute; z-index: 4; inset-block-start: 100%; inset-inline-start: 0; } .nav-disclosure[open] > .nav-submenu { position: relative; z-index: auto; inset-block-start: 10px; inset-inline-start: auto; } } } .nav-disclosure > summary { min-block-size: 44px; display: flex; align-items: center; gap: 6px; color: #fff; font-size: clamp(.86rem, .95vw, .95rem); font-weight: 500; white-space: nowrap; list-style: none; cursor: pointer;  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .nav-disclosure > summary::-webkit-details-marker { display: none; }  .nav-disclosure > summary > a::after { display: none; } .nav-disclosure > summary::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 2px; inline-size: 0; block-size: 1.5px; background: var(--accent); transition: inline-size var(--dur-base) var(--ease-out); } .nav-disclosure > summary i.ph { font-size: var(--ic-xs); transition: transform var(--dur-fast) var(--ease-out); } .nav-disclosure:is([open], :has(.nav-submenu a.active)):not(.is-closing) > summary::after { inline-size: 100%; } .nav-disclosure[open]:not(.is-closing) > summary i.ph { transform: rotate(180deg); } .nav-disclosure > summary:focus-visible { outline: 3px solid var(--brand-razeen); outline-offset: 3px; } header.scrolled .nav-disclosure > summary { color: var(--ink); }  .nav-submenu { position: absolute; z-index: 4; inset-block-start: calc(100% + 10px); inset-inline-start: 0; inline-size: max-content; min-inline-size: var(--nav-submenu-min); display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r); } .menu .nav-submenu a { min-block-size: 42px; padding-inline: 12px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); font-size: .88rem; white-space: normal; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }  .nav-submenu-hover-icon { flex: 0 0 1em; color: inherit; font-size: 1em; line-height: 1; opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .menu .nav-submenu i.nav-submenu-hover-icon { font-size: 1em !important; } .menu .nav-submenu a:is(:hover, :focus-visible) .nav-submenu-hover-icon { opacity: 1; transform: translateX(0); } .menu .nav-submenu a::after { display: none; } .menu .nav-submenu a:is(:hover, :focus-visible, .active) { background: var(--accent); color: #fff; } .menu .nav-submenu a:focus-visible { outline: 3px solid var(--brand-razeen); outline-offset: -3px; } .nav-submenu--companies .company-nav-link { justify-content: flex-start; gap: 12px; } .company-nav-mark {  inline-size: var(--company-nav-mark-w); block-size: var(--company-nav-mark-h); display: grid;  place-items: center start; flex: 0 0 var(--company-nav-mark-w); overflow: hidden; } .company-nav-mark svg { inline-size: 23px; block-size: 19px; } .company-nav-mark--eskan {  display: flex; align-items: center; justify-content: flex-start; gap: 3px; } .company-nav-mark--eskan svg { inline-size: 15px; block-size: 19px; flex: 0 0 15px; } .company-nav-mark--eskan b, .company-nav-mark--eskan small { display: block; color: var(--brand-black); font-family: var(--font-display); line-height: 1; } .company-nav-mark--eskan b { font-size: .72rem; } .company-nav-mark--eskan small { margin-top: 2px; font-size: .54rem; } .company-nav-mark img {  inline-size: auto; block-size: var(--company-nav-mark-h); object-fit: contain; }  .company-nav-mark--eskan img { block-size: var(--company-nav-mark-eskan-h); } .company-nav-mark--khadamat img { block-size: var(--company-nav-mark-khadamat-h); } .company-nav-mark--zoad img { block-size: var(--company-nav-mark-zoad-h); } .company-nav-mark--laundry img { block-size: var(--company-nav-mark-laundry-h); } .company-nav-mark--khadamat { color: var(--brand-black); font-family: var(--font-display); font-size: .72rem; font-weight: 600; line-height: 1; text-align: center; } .company-nav-mark--khadamat small { display: block; margin-top: 2px; font-size: .58rem; }  .company-nav-mark--zoad img { inline-size: auto; block-size: var(--company-nav-mark-zoad-h); object-fit: contain; object-position: left center; } [dir="rtl"] .company-nav-mark--zoad img { object-position: right center; } .company-nav-mark--laundry { color: var(--brand-black); font-family: var(--font-display); font-size: .7rem; font-weight: 600; line-height: 1; text-align: center; } .company-nav-link .nav-submenu-hover-icon { margin-inline-start: auto; }  @media (min-width: 1181px) {  .nav-disclosure.is-closing > .nav-submenu { pointer-events: none; }  .nav-submenu::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: 10px; } } .sector-card[id], .company-card[id] { scroll-margin-top: 104px; } @media (max-width: 1280px) { .menu > .nav-disclosure { inline-size: 100%; border-block-end: 1px solid var(--line); opacity: 0; transform: translateX(10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .menu.open > .nav-disclosure { opacity: 1; transform: translateX(0); } .nav-disclosure > summary { min-block-size: 54px; padding-inline: 4px 12px; justify-content: space-between; color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; } .nav-disclosure > summary::after { display: none; } .nav-disclosure[open] > summary { background: var(--surface-sunken); color: var(--accent-text); } .nav-submenu { position: static; min-inline-size: 0; inline-size: 100%; padding: 4px 14px 12px; background: var(--surface-sunken); border: 0; border-radius: var(--r); } .menu .nav-submenu a { min-block-size: 44px; padding-inline: 10px; font-size: .92rem; }  .menu .nav-submenu { overflow: hidden; } .menu .nav-disclosure.is-animating > .nav-submenu { will-change: block-size; transition: block-size var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .menu .nav-disclosure > summary { transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .menu .nav-disclosure.is-closing > summary { background: transparent; color: var(--ink); } .menu .nav-disclosure.is-closing > summary i.ph { transform: none; } } @media (prefers-reduced-motion: reduce) { .nav-disclosure, .nav-disclosure > summary, .nav-disclosure > summary i.ph { transition: none !important; } }   .about-copy { margin-inline-start: 0; } }    .about-visual { aspect-ratio: var(--media-wide); } .about-visual > img { height: 100%; }  .sector-hover-visual { aspect-ratio: 16 / 9; }  .menu.open .menu-contact:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-action); }   h1, .type-display { font-size: var(--type-display); line-height: var(--leading-display); } h2, .type-section { font-size: var(--type-section); line-height: var(--leading-section); }   :is(.sec-head, .impact-head, .process-head, .story-head, .partners-head, .news-head, .projects-copy, .value-head, .needs-intro, .needs-prototypes-intro, .impact-alt-copy, .about-copy, .cta-inner, .hero-content-copy, .sector-hover-copy) p, .hero p, .cta p, .type-lead { font-size: var(--type-lead); line-height: var(--leading-lead); }  main p, footer .foot-brand p, .type-body { font-size: var(--type-body); line-height: var(--leading-body); }  :is(.btn, .more, .action-link, .section-view-all, .news-all, .news-form button, .projects-footer-cta, .sector-feature-link, .needs-route-action, .project-card-action, .news-card .more, .project-filter, .news-filter, .project-tab, .foot-col a, .foot-col .foot-pending, .needs-prototype-link), .cta-action > span:not(.cta-action-note), .type-action { font-size: var(--type-action); }  :is(.menu > a, .nav-cta, .lang, .menu-lang, .menu-contact, .sector-card-action, .nav-disclosure > summary, .menu .nav-submenu a), .type-control { font-size: var(--type-control); }  :is(.kicker, .impact-kicker, .process-kicker, .story-kicker, .partners-kicker, .sector-feature-kicker, .eyebrow, .project-type, .news-category, .needs-route-audience, .partner-domain, .impact-note, .impact-label, .service-card .service-meta, .service-pending, .hero-sectors-label), .news-card .date, .impact-alt-stat p, .type-meta { font-size: var(--type-meta); }  :is(.project-type, .news-card .date, .needs-route-audience, .partner-domain, .service-card .service-meta, .impact-label, .needs-prototype-copy small) { color: var(--badge-text); background: var(--badge-fill);  font-size: var(--badge-size); font-weight: var(--badge-weight); padding: 0; border: 0; }  :is(.copy, .cta-action-note), .type-caption { font-size: var(--type-caption); }  .sector-card-sub { --card-sub-measure: 29.5ch; max-inline-size: var(--card-sub-measure); min-block-size: calc(var(--card-sub-lines) * 1lh);  color: var(--muted-on-dark); }  .sector-card:is(:hover, :focus-within) .sector-card-sub { color: var(--brand-white); } @media (max-width: 440px) { .sector-card-sub { --card-sub-lines: 3; } }  .hero-sectors .sector-card .sector-card-mark { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .hero-sectors .sector-card:is(:hover, :focus-within) .sector-card-mark { opacity: 0; transform: translateY(-6px) scale(.94); } @media (prefers-reduced-motion: reduce) { .hero-sectors .sector-card .sector-card-mark { transition: none; } .hero-sectors .sector-card:is(:hover, :focus-within) .sector-card-mark { transform: none; } }  :is(.action-link, .sector-card-action, .more, .needs-route, .section-view-all, .news-all):is(:hover, :focus-visible) { color: var(--link-hover); }  :is(.hero-sectors .sector-card-action, .project-card .action-link, .action-link.project-card-action, .foot-col a, .foot-contact, .skip-link):is(:hover, :focus-visible) { color: var(--link-hover-on-dark); }  :is(.action-link, .sector-card-action, .more, .needs-route, .foot-contact, .foot-col a):is(:hover, :focus-visible) > i.ph, :is(.news-card, .project-card, .company-card, .needs-route):is(:hover, :focus-within) :is(.action-link, .more, .needs-route-action) > i.ph { color: inherit; }  :is(.news-card, .project-card--secondary, .company-card, .needs-route):is(:hover, :focus-within) :is(.action-link, .more, .needs-route-action) { color: var(--link-hover); } .project-card:not(.project-card--secondary):is(:hover, :focus-within) .action-link { color: var(--link-hover-on-dark); }  .hero-sectors .sector-card:is(:hover, :focus-within) .sector-card-action { color: var(--brand-white); }  .company-card { overflow: hidden; border-radius: var(--r); }  .project-card--feature .project-meta, .project-card--secondary:is(:hover, :focus-within) .project-meta, .project-card--feature .project-meta i.ph, .project-card--secondary:is(:hover, :focus-within) .project-meta i.ph { color: var(--brand-white); }  .project-cards.is-filtered-view .project-card--feature .project-meta, .project-cards.is-filtered-view .project-card--feature .project-meta i.ph { color: var(--icon); } .project-cards.is-filtered-view .project-card--feature:is(:hover, :focus-within) .project-meta, .project-cards.is-filtered-view .project-card--feature:is(:hover, :focus-within) .project-meta i.ph { color: var(--brand-white); }  .project-cards.is-filtered-view .project-card--feature .project-type { color: var(--badge-text); }  .project-card.is-filtered-out.is-filtered-out { display: none; }  .menu .nav-submenu a:is(:hover, :focus-visible, .active) { color: var(--brand-white); }  .company-card { background: var(--brand-white); }  .hero.is-slider-paused .hero-slide-line.active::before { animation-play-state: paused; }  .news-card .date::before { color: currentColor; }  .news-card { position: relative; } .news-card h3 a { position: static; } .news-card h3 a::after { content: ""; position: absolute; inset: 0; }  .news-card:not(.news-card--feature) .img { aspect-ratio: var(--media-wide); block-size: auto; }  .company-card, .needs-route .needs-route-copy { transition: background-color var(--dur-base) var(--ease-out); }  @property --wipe-p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }  @property --wipe-op { syntax: "<percentage>"; inherits: false; initial-value: 72%; }  .needs-route .needs-route-copy::after, .project-card--secondary .project-card-body::after, .project-cards.is-filtered-view .project-card--feature .project-card-body::after { content: ""; position: absolute; z-index: 0; inset: -1px -40%; background: color-mix(in srgb, var(--wipe-fill) var(--wipe-op, 72%), transparent); clip-path: polygon(78% 0, 0 0, 22% 100%, 100% 100%); transform: translate3d(-78%, 0, 0); transition: transform var(--dur-slow) var(--ease-out); pointer-events: none; } .needs-route:is(:hover, :focus-within) .needs-route-copy::after, .project-card--secondary:is(:hover, :focus-within) .project-card-body::after, .project-cards.is-filtered-view .project-card--feature:is(:hover, :focus-within) .project-card-body::after { --wipe-op: 100%; transform: none; }  @media (prefers-reduced-motion: reduce) { .needs-route .needs-route-copy::after, .project-card--secondary .project-card-body::after, .project-cards.is-filtered-view .project-card--feature .project-card-body::after { transition: none; } }  .project-card--secondary .project-card-body, .project-cards.is-filtered-view .project-card--feature .project-card-body { position: relative; z-index: 3; }  .needs-route .card-chevron, .company-card .card-chevron, .project-card--secondary .card-chevron { z-index: 1; } .needs-route-copy > :not(.card-chevron), .company-card > :not(.card-chevron, .company-num), .project-card--secondary .project-card-body > :not(.card-chevron), .project-cards.is-filtered-view .project-card--feature .project-card-body > :not(.card-chevron) { position: relative; z-index: 2; }  .project-card--secondary .project-card-body, .project-cards.is-filtered-view .project-card--feature .project-card-body { position: relative; overflow: hidden; }  .project-card--secondary:is(:hover, :focus-within) .project-card-body :is(.project-type, h3, p, .project-meta, .project-card-action), .project-cards.is-filtered-view .project-card--feature:is(:hover, :focus-within) .project-card-body :is(.project-type, h3, p, .project-meta, .project-card-action) { color: var(--brand-white); } .project-card--secondary .project-card-body :is(.project-type, h3, p, .project-meta, .project-card-action), .project-cards.is-filtered-view .project-card--feature .project-card-body :is(.project-type, h3, p, .project-meta, .project-card-action) { transition: color var(--dur-slow) var(--ease-out); }  :is(.needs-route, .company-card, .project-card--secondary, .project-cards.is-filtered-view .project-card--feature) :is(.action-link, .more, .needs-route-action, .project-card-action) { transition-property: opacity, visibility, color; transition-duration: var(--dur-base), var(--dur-base), var(--dur-slow); transition-timing-function: var(--ease-out); }   .company-card::after, .needs-route .needs-route-copy::after, .project-card--secondary .project-card-body::after, .project-cards.is-filtered-view .project-card--feature .project-card-body::after { --wipe-fill: var(--surface-brand-deep); }  .needs-route { pointer-events: none; } .needs-route .needs-route-copy { pointer-events: auto; }   .company-card > *:not(.action-link):not(.card-chevron):not(.company-logo), .needs-route .needs-route-copy > *:not(.needs-route-action):not(.card-chevron) { transition: color var(--dur-slow) var(--ease-out); } .company-card:is(:hover, :focus-within) > *:not(.action-link):not(.card-chevron):not(.company-logo), .needs-route:is(:hover, :focus-within) .needs-route-copy > *:not(.needs-route-action):not(.card-chevron) { color: var(--brand-white); }   .company-card .company-logo img { transition: filter var(--dur-slow) var(--ease-out); }  .company-card:is(:hover, :focus-within) .company-logo:not(.company-logo--zoad) img { filter: brightness(0) invert(1); }  .company-card .company-logo--zoad img { filter: none; } .company-logo--zoad .company-logo-alt { position: absolute;  inset-inline-start: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); } .company-card:is(:hover, :focus-within) .company-logo--zoad .company-logo-alt { opacity: 1; }  .company-card:is(:hover, :focus-within) .company-logo svg { --company-accent: var(--brand-white); --company-accent-2: rgba(255, 255, 255, .72); }   .company-card .company-logo--eskan svg { transition: filter var(--dur-slow) var(--ease-out); } .company-card:is(:hover, :focus-within) .company-logo--eskan svg { filter: brightness(0) invert(1); }  .company-nav-mark :is(img, svg) { transition: filter var(--dur-fast) var(--ease-out); } .company-nav-mark--eskan :is(b, small) { transition: color var(--dur-fast) var(--ease-out); } .company-nav-link:is(:hover, :focus-visible, .active) .company-nav-mark :is(img, svg) { filter: brightness(0) invert(1); } .company-nav-link:is(:hover, :focus-visible, .active) .company-nav-mark--eskan :is(b, small) { color: var(--brand-white); }  .company-card .company-logo--eskan, .company-card .company-logo--eskan-wordmark, .company-card .company-logo--eskan-wordmark small, .company-card > h3 small { transition: color var(--dur-slow) var(--ease-out); } .company-card:is(:hover, :focus-within) .company-logo--eskan, .company-card:is(:hover, :focus-within) .company-logo--eskan-wordmark, .company-card:is(:hover, :focus-within) .company-logo--eskan-wordmark small, .company-card:is(:hover, :focus-within) > h3 small { color: var(--brand-white); }  :is(.news-card, .project-card--secondary):is(:hover, :focus-within) :is(.action-link, .more) { color: var(--link-hover); }  .project-card:not(.project-card--secondary):is(:hover, :focus-within) .action-link { color: var(--link-hover-on-dark); }  .needs-route:is(:hover, :focus-within), .needs-route:is(:hover, :focus-within) :is(.action-link, .more, .needs-route-action), .company-card:is(:hover, :focus-within) :is(.action-link, .more) { color: var(--brand-white); }  .about { min-block-size: 100vh; display: flex; align-items: center; } .about > .wrap { width: 100%; } @media (max-width: 640px) { .about { min-block-size: 0; } }  .cta-glass { position: absolute; z-index: 0; opacity: .28; inset: 0; overflow: hidden; pointer-events: none; } .cta-glass span { position: absolute; top: -10%; height: 120%; width: 60px; border: 1px solid var(--brand-sweihan); border-radius: var(--r); background: color-mix(in srgb, var(--brand-sweihan) 8%, transparent); transform: skewX(-24deg); } .cta-glass .r1 { inset-inline-start: 68%; } .cta-glass .r2 { inset-inline-start: 78%; }  .cta-glass .r3 { inset-inline-start: 88%; border-color: color-mix(in srgb, var(--brand-sweihan) 55%, transparent); } @media (max-width: 920px) { .cta-glass { display: none; } }  :is(.news-section, .about, .needs, .featured-projects, .value-sections) { position: relative; isolation: isolate; }  :is(.news-section, .about, .needs, .featured-projects, .value-sections) > .wrap { position: relative; z-index: 1; } :is(.section-glass, .news-glass) { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }  :is(.hero-glass, .cta-glass, .section-glass, .news-glass) span { top: var(--identity-band-top); height: var(--identity-band-height); width: var(--identity-band-width); }  :is(.hero-glass, .cta-glass) span { border-width: var(--identity-band-border); background: color-mix(in srgb, var(--brand-sweihan) var(--identity-band-fill), transparent); }  :is(.section-glass, .news-glass) span { position: absolute; border: var(--identity-band-border) solid color-mix(in srgb, var(--brand-sweihan) var(--identity-band-line-ambient), transparent); border-radius: var(--r); background: color-mix(in srgb, var(--brand-sweihan) var(--identity-band-fill-ambient), transparent); transform: skewX(-24deg); }  :is(.section-glass, .news-glass) span { inset-inline-start: calc(var(--band-origin, 68%) + var(--band-step, 0) * 10%); } :is(.section-glass, .news-glass) :is(.r1, .b1) { --band-step: 0; } :is(.section-glass, .news-glass) :is(.r2, .b2) { --band-step: 1; } :is(.section-glass, .news-glass) :is(.r3, .b3) { --band-step: 2; }  .section-glass--start { --band-origin: -4%; } .section-glass--end { --band-origin: 68%; }  @keyframes bandDrift { from { transform: skewX(-24deg) translate3d(0, 0, 0); } to { transform: skewX(-24deg) translate3d(0, -14px, 0); } } :is(.section-glass, .news-glass) span { animation: bandDrift var(--dur-ambient) var(--ease-out) infinite alternate; animation-delay: calc(var(--band-step, 0) * var(--dur-ambient) / -3); }  @media (max-width: 920px) { .section-glass, .news-glass { display: none; } } @media (prefers-reduced-motion: reduce) { :is(.section-glass, .news-glass) span { animation: none; } }  .cta-action { position: relative; isolation: isolate; overflow: hidden; transition: color var(--dur-fast) var(--ease-out); }   .cta-action:is(:hover, :focus-visible) { background-color: rgba(43, 41, 41, .92); border-color: rgba(255, 255, 255, .22); color: var(--brand-white); } .cta-action:first-child:is(:hover, :focus-visible) { background-color: var(--accent); border-color: var(--accent); } @media (prefers-reduced-motion: reduce) { .cta-action .cta-arrow { transition: none; } }  .btn.btn-ghost:is(:hover, :focus-visible) { background: transparent; } .menu-close { display: none; }  .nav-icon--accessibility { pointer-events: none; }   @media (max-width: 1280px) { .nav-actions > .nav-icon--accessibility { display: inline-flex; } } @media (max-width: 420px) { .nav-icon--accessibility { display: inline-flex; } }  @media (max-width: 1280px) { body.menu-open .nav-icon--accessibility { visibility: hidden; } body.menu-open :is(.ai-chat-toggle, .ai-chat-panel) { visibility: hidden; pointer-events: none; } .menu-close { display: grid; place-items: center; } }  :is(.needs-route, .project-card--secondary, .company-card) .card-chevron { left: auto; right: -7%; }  :is(.needs-route, .project-card--secondary, .company-card) .card-chevron svg { transform: scaleX(-1); }  .company-card::before { display: none; }  :is(.needs-route, .company-card, .project-card--secondary):is(:hover, :focus-within) .card-chevron { transform: translate3d(-14px, -10px, 0); }  .burger { color: rgba(255, 255, 255, .84); transition: color var(--dur-fast) var(--ease-out); } .burger:is(:hover, :focus-visible) { color: var(--brand-white); } header.scrolled .burger { color: var(--muted); } header.scrolled .burger:is(:hover, :focus-visible) { color: var(--accent-text); }  :is(.nav-search, .nav-icon--accessibility, .nav-icon--search, .burger) { min-inline-size: 44px; }  .burger { margin-inline-end: max(calc((var(--icon-control) - 44px) / 2), calc(-1 * var(--hd-pad))); }  .about-badge .t { color: var(--brand-white); }  :is(.scroll-hint span, .story-achievement span, .company-card h3 small, .company-num, .service-num, .sector-hover-copy span, .partner-stat small, .sector-card-sub) { font-size: var(--type-meta); }  :is(.btn-primary, .news-form button, .nav-cta, .projects-footer .projects-footer-cta, .sector-hover-copy a), :is(.btn-primary, .news-form button, .nav-cta, .projects-footer .projects-footer-cta, .sector-hover-copy a):is(:hover, :focus-visible), .why-footer a.btn.btn-primary, .why-footer a.btn.btn-primary:is(:hover, :focus-visible), header.scrolled .nav-cta, header.scrolled .nav-cta:is(:hover, :focus-visible) { background: var(--accent-fill); border-color: var(--accent-fill); } :is(.project-filter, .news-filter).is-active, .about-badge, .cta-action { background: var(--accent-fill); } .project-card--feature .project-type { color: var(--badge-text-on-dark); }   :is(.openings-intro h3, .company-card h3, .why-card-body h3, .service-card h3, .story-item h3, .project-card-body h3, .process-step h3, .sector-card-title, .about-values-head h3, .needs-route-copy strong, .news-card h3 a, .news-card h3) { font-size: var(--type-card); line-height: var(--leading-card); }  .news-card h3 { min-block-size: 0; display: block; -webkit-line-clamp: unset; overflow: visible; }  :is(.partner-card h3, .foot-col h3, .foot-col h4) { font-size: var(--type-label); line-height: var(--leading-label); }  :is(.story-year, .verified-figure, .process-num, .partner-stat strong, .about-badge .big) { font-size: var(--figure-size); }  :is(.verified-figure, .partner-stat strong, .about-badge .big) bdi { font-size: inherit; }  :is(.about-badge .t, .about-badge .label, .opening-row strong) { font-size: var(--type-body); line-height: var(--leading-body); } :is(.partner-logo span, .impact-alt-stat span) { font-size: var(--type-action); }  .impact-alt-stat strong, .impact-alt-stat strong bdi { font-size: var(--type-card); } :is(.opening-announcement h3, .partner-card .partner-logo, .news-subscribe-copy h3, .partners-trust-copy h3) { font-size: var(--type-label); line-height: var(--leading-label); } .story-achievement strong { font-size: var(--type-body); line-height: var(--leading-body); }  :is(.needs, .value-sections)::before { content: ""; position: absolute; z-index: 0; inset: 0; background: url("../images/patterns/solid-a.svg?v=032800d78a7d41e0") no-repeat center / cover; opacity: 0.05; pointer-events: none; }  .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: none; } .cta-action, .cta-action:first-child, .cta-action:last-child { flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: auto; min-height: 48px; min-block-size: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--r); background: var(--accent-fill); color: var(--brand-white); font-size: var(--type-action); font-weight: 800; line-height: var(--leading-label); text-align: center; }  .cta-action--ghost, .cta-action--ghost:first-child, .cta-action--ghost:last-child { border-color: var(--brand-white); background: transparent; }  .cta-action > i.ph.cta-action-mark:not(.cta-arrow) { font-size: var(--ic-lg); color: var(--brand-white); } .cta-action .cta-arrow { margin-inline-start: 0; font-size: var(--ic-sm); }  .cta-action::before, .cta-action:first-child::before { display: none; } #contact .cta-action:is(:hover, :focus-visible, :active), #contact .cta-action:first-child:is(:hover, :focus-visible, :active) { background: var(--accent-fill); color: var(--brand-white); }  .cta-action:is(:hover, :focus-visible), .cta-action:first-child:is(:hover, :focus-visible) { border-color: transparent; background-color: var(--accent-fill); color: var(--brand-white); } .cta-action--ghost:is(:hover, :focus-visible, :active), .cta-action--ghost:first-child:is(:hover, :focus-visible, :active), .cta-action--ghost:last-child:is(:hover, :focus-visible, :active) { border-color: var(--accent-fill); background-color: var(--accent-fill); }  .cta-action { transition: color var(--dur-slow) var(--ease-out); } .cta-action--ghost { background-color: transparent; } .cta-action:is(:hover, :focus-visible) { background-color: var(--accent-fill); } .cta-action--ghost:is(:hover, :focus-visible) { background-color: var(--accent-fill); border-color: var(--accent-fill); }  .btn-ghost { transition: color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); } .btn-ghost:is(:hover, :focus-visible) { background-color: transparent; }  header { --hd-gap: clamp(6px, .6vw, 8px); --hd-pad: clamp(6px, .6vw, 8px); --cta-h: clamp(34px, 2.6vw, 40px); --logo-h: clamp(40px, 4.4vw, 54px); padding: var(--hd-gap); background: transparent; backdrop-filter: none; } header.scrolled { --logo-h: clamp(30px, 3.2vw, 38px); background: transparent; backdrop-filter: none; } .nav { position: relative; isolation: isolate; padding-block: var(--hd-pad);  padding-inline: 32px; } .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid transparent; border-radius: var(--r); background: rgba(255, 255, 255, 0); backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out); } header.scrolled .nav::before { background: rgba(255, 255, 255, .82); border-color: var(--line); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }  @media (min-width: 561px) and (max-width: 1280px) { header :is(.logo img, #navLogo) { height: 42px; } } @media (max-width: 560px) { .nav { padding-inline: 20px; } }  .project-cards.is-filtered-view .project-card--feature .project-card-body { background: var(--surface-raised); transition: background-color var(--dur-base) var(--ease-out); } .project-cards.is-filtered-view .project-card--feature:is(:hover, :focus-within) .project-card-body { background: var(--surface-raised); }  @media (max-width: 1280px) { body.menu-open .nav > .logo { opacity: 0; visibility: hidden; pointer-events: none; } }  @media (min-width: 981px) { footer .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } footer .foot-brand { grid-row: span 2; } } @media (max-width: 980px) { footer .foot-brand { grid-row: auto; } }  .foot-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy socials" "legal legal"; align-items: center; row-gap: 14px; } .foot-bottom .copy { grid-area: copy; } .foot-bottom .foot-socials { grid-area: socials; } .foot-legal { grid-area: legal; display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; } .foot-legal a { color: var(--muted-on-dark); font-size: var(--type-caption); font-weight: 400; transition: color var(--dur-fast) var(--ease-out); } .foot-legal a:is(:hover, :focus-visible) { color: var(--link-hover-on-dark); } @media (max-width: 560px) { .foot-bottom { grid-template-columns: 1fr; grid-template-areas: "copy" "legal" "socials"; justify-items: start; } }  .menu.open .menu-contact { position: relative; isolation: isolate; overflow: hidden; border-color: var(--accent-fill); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .menu.open .menu-contact:is(:hover, :focus-visible) { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--brand-white); } @media (prefers-reduced-motion: reduce) { .menu.open .menu-contact, .menu.open .menu-contact::before { transition: none; } }  #contact .cta-action, #contact .cta-action:first-child, #contact .cta-action:last-child { transition: color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); background-color: var(--accent-fill); border-color: transparent; } #contact .cta-action--ghost, #contact .cta-action--ghost:first-child, #contact .cta-action--ghost:last-child { background-color: transparent; border-color: var(--brand-white); }  #contact .cta-action > * { position: relative; z-index: 1; }  #contact .cta-action:is(:hover, :focus-visible, :active), #contact .cta-action:first-child:is(:hover, :focus-visible, :active) { background-color: var(--accent-fill); border-color: transparent; } #contact .cta-action--ghost:is(:hover, :focus-visible, :active), #contact .cta-action--ghost:first-child:is(:hover, :focus-visible, :active), #contact .cta-action--ghost:last-child:is(:hover, :focus-visible, :active) { background-color: var(--accent-fill); border-color: var(--accent-fill); } @media (prefers-reduced-motion: reduce) { #contact .cta-action { transition: none; } }  .menu.open .menu-contact { background-color: var(--accent-fill); border-color: transparent; transition: color var(--dur-slow) var(--ease-out); } .menu.open .menu-contact:is(:hover, :focus-visible) { background-color: var(--accent-fill); border-color: transparent; }  :is(.btn-primary, .btn-ghost, .nav-cta, .news-form button, .projects-footer .projects-footer-cta, .sector-hover-copy a) { position: relative; isolation: isolate; overflow: hidden; transition: color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), min-height var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out); } :is(.btn-primary, .nav-cta, .news-form button, .projects-footer .projects-footer-cta, .sector-hover-copy a) { background-color: var(--accent-fill); border-color: var(--accent-fill); color: var(--brand-white); } :is(.btn-ghost) { background-color: transparent; } :is(.btn-primary, .btn-ghost, .nav-cta, .news-form button, .projects-footer .projects-footer-cta, .sector-hover-copy a):is(:hover, :focus-visible) { background-color: var(--accent-fill); border-color: var(--accent-fill); color: var(--brand-white); }  .btn.btn-ghost:is(:hover, :focus-visible), :is(.btn-ghost):is(:hover, :focus-visible) { background-color: transparent; } @media (prefers-reduced-motion: reduce) { :is(.btn-primary, .btn-ghost, .nav-cta, .news-form button, .projects-footer .projects-footer-cta, .sector-hover-copy a) { transition: none; } }  .hero-sectors .sector-card-veil { background: linear-gradient(180deg, rgba(89, 89, 92, .03) 0%, rgba(89, 89, 92, .04) 10%, rgba(89, 89, 92, .06) 20%, rgba(89, 89, 92, .09) 30%, rgba(89, 89, 92, .15) 40%, rgba(89, 89, 92, .22) 50%, rgba(89, 89, 92, .28) 55%, rgba(89, 89, 92, .34) 60%, rgba(89, 89, 92, .41) 65%, rgba(89, 89, 92, .47) 70%, rgba(89, 89, 92, .54) 80%, rgba(89, 89, 92, .59) 90%, rgba(89, 89, 92, .62) 100%); } .hero-sectors { background: linear-gradient(180deg, rgba(89, 89, 92, 0) 0%, rgba(89, 89, 92, .33) 30%, rgba(89, 89, 92, .45) 100%); }  .cta { padding-block: var(--sec-pad); }  .hero .scroll-hint.scroll-hint { color: var(--brand-white); } .hero .scroll-hint.scroll-hint .dot { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .95); } .hero .scroll-hint.scroll-hint .dot::after { background: var(--brand-white); }  :is(.btn-primary, .btn-ghost, .nav-cta, .news-form button, .cta-action, .cta-action--ghost, .projects-footer .projects-footer-cta, .sector-hover-copy a, .project-tab)::before, #contact :is(.cta-action, .cta-action--ghost, .cta-action:first-child, .cta-action:last-child)::before { content: none; }  .cta-action:is(:hover, :focus-visible), .cta-action:first-child:is(:hover, :focus-visible), #contact .cta-action:is(:hover, :focus-visible, :active), #contact .cta-action:first-child:is(:hover, :focus-visible, :active) { background-color: var(--accent-fill); color: var(--brand-white); }  .cta-action--ghost:is(:hover, :focus-visible), .cta-action--ghost:first-child:is(:hover, :focus-visible), .cta-action--ghost:last-child:is(:hover, :focus-visible), #contact .cta-action--ghost:is(:hover, :focus-visible, :active), #contact .cta-action--ghost:first-child:is(:hover, :focus-visible, :active), #contact .cta-action--ghost:last-child:is(:hover, :focus-visible, :active) { background-color: var(--accent-fill); border-color: var(--accent-fill); }  @media (max-width: 980px) {  .hero-bg { height: 100dvh; bottom: auto; overflow: hidden; }  .hero .hero-content-copy p:has(.hero-line-mark) { margin-block-start: 22px; } }  .hero { --hero-sky-drop: 440px; } .hero-slide { background: var(--hero-sky); } .hero-slide:nth-child(1) { --hero-sky: linear-gradient(to right, #dfdcd2, #dadad5 25%, #dbdbd8 50%, #e6e4de 75%, #d3d9d7); } .hero-slide:nth-child(2) { --hero-sky: linear-gradient(to right, #d8cfc4, #d3cdc7 25%, #cdcbc7 50%, #d5d1cc 75%, #d1cfca); } .hero-slide:nth-child(3) { --hero-sky: linear-gradient(to right, #dee0dc, #dee1e0 25%, #e7e8e5 50%, #e4e5e2 75%, #dfe3e2); } .hero .hero-slide img { position: absolute; inset-block-start: var(--hero-sky-drop); inset-inline: 0; block-size: calc(100% - var(--hero-sky-drop)); object-position: 50% 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%); } @media (min-width: 981px) { .hero { --hero-horizon: calc(300px + 9vw); --hero-sky-drop: calc(var(--hero-horizon) - 3.66vw); } .hero .hero-slide img { object-position: 50% calc(-0.26 * 56.25vw); } }  .hero { overflow: clip; }  @media (min-width: 981px) and (max-width: 1330px) { .logo img, #navLogo { max-width: 180px; } } @media (min-width: 1331px) { .logo img, #navLogo { max-width: 220px; } } @media (min-width: 981px) { .nav-actions { gap: 8px; } }