.sector-card-panel { background: rgba(var(--image-overlay-rgb), .92); }  .sector-card .sector-card-media::after { background: rgba(var(--image-overlay-rgb), .16); }  .needs-prototype-row-media::before { background: linear-gradient(45deg, transparent 0 19%, color-mix(in srgb, var(--brand-light-grey, #d4d4d4) 60%, transparent) 19% 23%, transparent 23% 43%, color-mix(in srgb, var(--accent) 16%, transparent) 43% 49%, transparent 49% 69%, color-mix(in srgb, var(--accent) 12%, transparent) 69% 76%, transparent 76%); }   body { color: var(--brand-jais); }   .sector-hover-visual::before { display: none !important; } .sector-hover-visual, .needs-prototype-media { filter: none !important; }  :root { --ground-sand-line: 1px; --ground-sand-line-gap: 14px; --ground-sand-band: 0px; --ground-sand-band-gap: 0px; --identity-band-line-ambient: 5%; --identity-band-fill-ambient: 0%; }  .hero-glass span { display: none !important; }  .company-nav-link:hover .company-nav-mark img, .company-nav-link:focus-visible .company-nav-mark img { opacity: 1 !important; transform: none !important; }  .sector-card-panel { box-shadow: none; } .ai-chat-panel, .ai-welcome-nudge { box-shadow: none; border: 1px solid var(--line); }  .news-card p, .news-item p { -webkit-line-clamp: none; display: block; min-block-size: calc(2 * 1lh); }  .needs { background: var(--surface-sunken); } .partner-card:hover { border-color: color-mix(in srgb, var(--accent) 26%, transparent); }  .hero .eyebrow { color: var(--accent); } .hero h1 { color: var(--brand-white); } .hero-content p { color: var(--brand-white); } .hero .scroll-hint { color: var(--brand-white); } .hero .btn-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-action); } .hero .btn-primary:is(:hover, :focus-visible) { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-action); }  .hero .btn-ghost { color: var(--brand-white); border-color: var(--brand-white); background: transparent; } .hero .scroll-hint .dot { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .95); } .hero .scroll-hint .dot::after { background: var(--brand-white); } .hero-slide-line { background-image: linear-gradient( rgba(0, 0, 0, 0) calc(50% - 1.5px), rgba(255, 255, 255, .38) calc(50% - 1.5px), rgba(255, 255, 255, .38) calc(50% + 1.5px), rgba(0, 0, 0, 0) calc(50% + 1.5px)); } .hero-slide-line.active::after, .hero-slide-line.done::after { background: var(--accent); }  .nav::before { transition: left var(--dur-base) var(--ease-out), right var(--dur-base) var(--ease-out), margin-inline var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out), bottom var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out), 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:not(.scrolled) .nav::before { left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; top: calc(-1 * var(--hd-gap)); bottom: calc(-1 * var(--hd-gap)); border-radius: 0; background: var(--brand-white); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }   .logo { color: var(--charcoal); } .menu a { color: var(--ink); } .menu a.active { color: var(--accent-text); } .nav-disclosure > summary { color: var(--ink); }  .lang { color: var(--muted); }  :is(.nav-search, .burger, .menu-close):focus-visible { outline-color: var(--accent); } .nav-disclosure > summary:focus-visible { outline-color: var(--accent); }  .menu-logo { display: inline-block; inline-size: min(152px, 52vw); block-size: 44px; } .menu.open .menu-contact { color: #fff; }     .hero-glass { display: block; opacity: 1; }  .hero-glass::before, .hero-glass::after { content: ""; position: absolute; inline-size: var(--photo-mark-width-hero); aspect-ratio: var(--photo-mark-p43-ratio); pointer-events: none; } .hero-glass::before { inset: 0 auto auto 0; background: url("../images/patterns/lines-rotated-180.svg?v=bc182f344a4d87fd") no-repeat left top / 100% 100%; } .hero-glass::after { inset: auto 0 0 auto; background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right bottom / 100% 100%; }  .about-visual::after { content: ""; position: absolute; inset: 0; background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right -28px bottom 0 / auto 80%; pointer-events: none; z-index: 2; transform: scale(1); transform-origin: 100% 100%; transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out); } .about-visual::before { content: ""; position: absolute; inset: 0; background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right -28px bottom -28px / auto 80%; pointer-events: none; z-index: 2; transform: rotate(180deg) scale(1); transform-origin: 100% 100%; transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out); }  .sector-hover-visual::after { content: ""; position: absolute; inset: 0; background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right -28px bottom 0 / auto 80%; pointer-events: none; z-index: 2; transform: scale(1); transform-origin: 100% 100%; transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out); } .sector-card-media::before { content: ""; position: absolute; inset: 0; background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right -28px bottom 0 / auto 80%; pointer-events: none; z-index: 2; opacity: 0; transform: scale(1); transform-origin: 100% 100%; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-normal, 200ms) var(--ease-out, ease-out); } .sector-card:is(:hover, :focus-within) .sector-card-media::before { opacity: 1; transform: scale(1.1); }  .about-visual::after { content: ""; position: absolute; inset: 0 auto auto 0;  inline-size: var(--photo-mark-width); aspect-ratio: var(--photo-mark-p43-ratio); background: url("../images/patterns/lines-rotated-180.svg?v=bc182f344a4d87fd") no-repeat left top / 100% 100%; pointer-events: none; z-index: 2; } .about-visual::before { display: none; }  .news-card:is(:hover, :focus-within) h3, .news-card:is(:hover, :focus-within) h3 a { color: var(--brand-black); } .news-card:is(:hover, :focus-within) .more { color: var(--link-hover); } .news-card:is(:hover, :focus-within) .more > i.ph { color: inherit; } .news-card.news-card h3, .news-card.news-card h3 a { transition: none; } .news-card.news-card h3 { inline-size: min(100%, 34ch); max-inline-size: 34ch; max-width: 34ch; } @media (max-width: 1280px) { .menu { inline-size: min(88vw, 320px); } .menu-head { min-block-size: 56px; } .menu-logo { block-size: 38px; } .menu-logo img { inline-size: min(132px, 42vw); } .menu-close { inline-size: 38px; block-size: 38px; flex: 0 0 38px; } .menu.open > a:not(.menu-logo), .menu.open > .nav-disclosure > summary { font-size: var(--type-control); } }  .hero { min-height: max(540px, 75dvh); } .hero-content { min-height: 75dvh; padding-block: 96px 48px; } @media (max-width: 920px) { .hero { min-height: max(500px, 80dvh); } .hero-content { min-height: 80dvh; padding-block: 84px 40px; } } @media (max-width: 640px) { .hero { min-height: max(460px, 82dvh); } .hero-content { min-height: 82dvh; padding-block: 80px 32px; } }  :is(.project-filters, .news-filters) { background: var(--surface-sunken); } :is(.project-filter, .news-filter) { background: transparent; } :is(.project-filter, .news-filter):not(.is-active):hover { background: var(--surface-raised); } .featured-projects .project-cards.is-filtered-view .project-card--feature, .featured-projects .project-cards.is-filtered-view .project-card--feature .project-card-body { background: var(--surface-sunken) !important; } .featured-projects .project-cards.is-filtered-view .project-card--feature { grid-template-rows: clamp(240px, 25vw, 340px) auto; min-height: 0 !important; height: auto; background: var(--surface-sunken) !important; } .featured-projects .project-cards.is-filtered-view .project-card--feature .project-card-img { position: relative; inset: auto; height: clamp(240px, 25vw, 340px); } .featured-projects .project-cards.is-filtered-view .project-card--feature .project-card-body { position: relative; inset: auto; max-width: none; min-height: 0; padding: clamp(24px, 2.4vw, 34px); background: var(--surface-sunken) !important; color: var(--ink); } .featured-projects .project-cards.is-filtered-view .project-card--feature h3 { font-size: var(--type-card); line-height: var(--leading-card); } .featured-projects .project-cards.is-filtered-view .project-card--feature .project-type, .featured-projects .project-cards.is-filtered-view .project-card--secondary .project-type { color: var(--ink); } .featured-projects .project-cards.is-filtered-view :is(.project-card--feature, .project-card--secondary):is(:hover, :focus-within) .project-type { color: var(--brand-white) !important; } .featured-projects .project-cards.is-filtered-view .project-card--feature:is(:hover, :focus-within) .project-card-body { background: var(--surface-sunken-strong) !important; }  .company-logo svg { width: 43.2px; height: 38.4px; }  .company-logo--image img { width: auto; max-width: min(100%, var(--company-mark-width, 262px)); height: auto; max-height: 64px; }  .company-logo { align-items: center; }  #company-eskan .company-logo--image img { --company-mark-width: 202px; }  .cta::after { background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right -28px bottom -28px / auto 60%, var(--scrim-control); }  .sector-grid { gap: 0; }  .hero-sectors { background: var(--brand-black); } .hero-sectors .sector-grid { gap: var(--hero-sector-gap); background: var(--scrim-bar); } @media (max-width: 980px) { .hero-sectors .sector-card, .hero-sectors .sector-card-media { border-radius: var(--hero-sector-mobile-radius); } }     .hero::after, .hero-content::after { background: none; }  .hero-content-copy { position: relative; z-index: 2; flex: 0 0 auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #ffffff; padding: 0; border-radius: var(--r, 18px); max-width: min(720px, 100%); }  @media (min-width: 981px) { .hero-content-copy { max-width: min(960px, 100%); } }  .hero .hero-content-copy .eyebrow, .hero .hero-content .eyebrow { color: #ffffff; } .hero .hero-content-copy h1, .hero-content-copy h1:not(.em) { color: #ffffff; }  .hero .hero-content-copy .em, .hero-content-copy .em, .hero .hero-content-copy h1.reveal .em, .hero-content-copy h1.reveal .em { display: inline; white-space: normal; background: none; color: var(--accent); margin: 0; padding: 0; vertical-align: baseline; transform: none; }  .hero .hero-content-copy h1 { font-weight: 500; } .hero .hero-content-copy h1 .em { font-weight: 700; } .hero-content-copy p { color: rgba(255, 255, 255, .88); }    .cta-inner { background: var(--scrim-glass); backdrop-filter: blur(var(--glass-blur)) saturate(112%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(112%); border-radius: var(--r, 18px); padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px); max-width: min(880px, 94%); margin-inline: auto; } .cta::after { background: none; } @media (max-width: 640px) { #contact .cta-inner { padding: var(--cta-mobile-panel-padding); } } .cta .kicker, .cta h2 { color: #ffffff; } .cta p { color: rgba(255, 255, 255, .88); }   .project-card--feature .project-card-img::after { background: none; }  .project-card--feature .project-card-img::before { content: none; display: none; }  .project-cards:not(.is-filtered-view) .project-card--feature .project-card-body { background: var(--scrim-glass); backdrop-filter: blur(var(--glass-blur)) saturate(112%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(112%); color: #ffffff; padding: clamp(26px, 3.4vw, 44px); border-radius: var(--r, 18px); max-width: min(560px, 88%); } .project-cards:not(.is-filtered-view) .project-card--feature :is(.project-type, h3, p, .project-meta) { color: #ffffff; } .project-cards:not(.is-filtered-view) .project-card--feature p { color: rgba(255, 255, 255, .88); } .project-cards:not(.is-filtered-view) .project-card--feature .project-meta { border-top-color: rgba(255, 255, 255, .32); }  .hero .hero-content-copy .hero-line-mark { background: none; padding: 0; } .hero h1 .em { background: none; padding: 0; margin-inline: 0; }  .hero-content { justify-content: flex-start; padding-block: clamp(112px, 15vh, 180px) 48px; }  .hero .hero-content-copy h1 { line-height: var(--leading-display); } .hero .hero-content-copy h1:has(.hero-line-mark) { line-height: var(--leading-display); } .hero .hero-content-copy .eyebrow, .hero .hero-content .eyebrow { color: var(--brand-black); } .hero .hero-content-copy h1, .hero-content-copy h1:not(.em) { color: var(--brand-black);  line-height: var(--leading-display); } .hero .hero-content-copy p, .hero-content-copy p { color: var(--brand-black); } .hero .hero-content-copy .btn-ghost, .hero .hero-content-copy .btn-ghost:is(:hover, :focus-visible) { color: var(--brand-black); border-color: var(--brand-black); background: transparent; } .hero .hero-slide-line { background-image: linear-gradient( rgba(0, 0, 0, 0) calc(50% - 1.5px), color-mix(in srgb, var(--brand-black) 45%, transparent) calc(50% - 1.5px), color-mix(in srgb, var(--brand-black) 45%, transparent) calc(50% + 1.5px), rgba(0, 0, 0, 0) calc(50% + 1.5px)); } .hero .scroll-hint { color: var(--brand-black); } .hero .scroll-hint .dot { background: transparent; border-color: var(--brand-black); } .hero .scroll-hint .dot::after { background: var(--brand-black); }  .hero::after { background: none; }  .needs-route--eskan .needs-route-copy::after { --wipe-fill: var(--brand-eskan-teal-deep); } .needs-route--khadamat .needs-route-copy::after { --wipe-fill: var(--brand-khadamat-green-deep); } .needs-route--zoad .needs-route-copy::after { --wipe-fill: var(--brand-zoad-blueberry); } .needs-route--eskan .card-chevron::after { background-image: url("../images/patterns/eskan-lines.svg?v=38120a19dcf1683e"); } .needs-route--khadamat .card-chevron::after { background-image: url("../images/patterns/khadamat-lines.svg?v=deea2893504e9ed7"); }  .needs-route--zoad .card-chevron.card-chevron { inline-size: 44%;  block-size: auto; aspect-ratio: 480 / 380;  max-block-size: none; } .needs-route--zoad .card-chevron::after { inset: 0; background: url("../images/patterns/zoad-dots.svg?v=99e97e7b1b9b5032") no-repeat 100% 100% / 200% 200%; -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #28374A, transparent 75%); mask-image: radial-gradient(ellipse at 0% 0%, #28374A, transparent 75%); rotate: 180deg; transform: none; transform-origin: center; opacity: .16; }  html[dir="rtl"] .needs .needs-route--zoad .card-chevron::after { transform: none; transform-origin: center; -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #28374A, transparent 75%); mask-image: radial-gradient(ellipse at 100% 0%, #28374A, transparent 75%); }  #company-eskan::after { --wipe-fill: var(--brand-eskan-teal-deep); } #company-khadamat::after { --wipe-fill: var(--brand-khadamat-green-deep); } #company-zoad::after { --wipe-fill: var(--brand-zoad-blueberry); }  #company-eskan .card-chevron::after { background-image: url("../images/patterns/eskan-lines.svg?v=38120a19dcf1683e"); } #company-khadamat .card-chevron::after { background-image: url("../images/patterns/khadamat-lines.svg?v=deea2893504e9ed7"); }   #company-zoad .card-chevron.card-chevron { position: absolute; inset: auto 0 0 auto; inline-size: 44%;  block-size: auto; aspect-ratio: 480 / 380;  max-block-size: none; } #company-zoad .card-chevron::after { inset: 0; background: url("../images/patterns/zoad-dots.svg?v=99e97e7b1b9b5032") no-repeat 100% 100% / 200% 200%; -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #28374A, transparent 75%); mask-image: radial-gradient(ellipse at 0% 0%, #28374A, transparent 75%); rotate: 180deg; transform: none; transform-origin: center; opacity: .16; }  html[dir="rtl"] #company-zoad .card-chevron.card-chevron { inset: auto auto 0 0; } html[dir="rtl"] #company-zoad .card-chevron::after { -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #28374A, transparent 75%); mask-image: radial-gradient(ellipse at 100% 0%, #28374A, transparent 75%); }  #company-laundry .card-chevron.card-chevron { position: absolute; inset: 0; inline-size: auto; block-size: auto; aspect-ratio: auto; max-block-size: none; } #company-laundry .card-chevron::after { inset: auto 0 0 0; block-size: 34px;  background: url("../images/patterns/your-laundry-wave.svg?v=d7686ed0ed0635ed") repeat-x left bottom / auto 100%; opacity: .16;  transform: none; transform-origin: center; -webkit-mask-image: none; mask-image: none; }