.pad--raised { background: var(--surface-raised); }  .pad--raised :is(.row-item, .stat-strip, .logo-tile, .faq-item, .icon-item, .news-item-body) { background: var(--surface-sunken); }   .pad--sunken { background: var(--surface-sunken); } .pad--inverse { background: var(--surface-inverse); } .pad--flush { padding-block-start: 0; }  :is(.hero, .subpage-hero) + .pad { padding-block-start: var(--sec-pad-under-hero); }  .section-glass { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; } .section--glass { position: relative; isolation: isolate; } .section--glass > .wrap { position: relative; z-index: 1; }  .section-group--glass { position: relative; isolation: isolate; overflow: hidden; background: var(--surface-base); } .section-group--glass > .pad { position: relative; z-index: 1; background: transparent; } .section-glass span { position: absolute; top: var(--identity-band-top); block-size: var(--identity-band-height); inline-size: var(--identity-band-width); inset-inline-start: calc(var(--band-origin, 68%) + var(--band-step, 0) * 10%); border: var(--identity-band-border) solid color-mix(in srgb, var(--identity-mark) var(--identity-band-line-ambient), transparent); border-radius: var(--r); background: color-mix(in srgb, var(--identity-mark) var(--identity-band-fill-ambient), transparent); transform: skewX(-24deg); animation: sectionBandDrift var(--dur-ambient) var(--ease-out) infinite alternate; } .section-glass .b1 { --band-step: 0; } .section-glass .b2 { --band-step: 1; } .section-glass .b3 { --band-step: 2; } .section-glass--start { --band-origin: -4%; } .section-glass--end { --band-origin: 68%; }  .section-glass--photo span { border-color: color-mix(in srgb, var(--identity-mark) var(--identity-band-line-on-photo), transparent); background: color-mix(in srgb, var(--identity-mark) var(--identity-band-fill-on-photo), transparent); animation: none; } @keyframes sectionBandDrift { from { transform: skewX(-24deg) translate3d(0, 0, 0); } to { transform: skewX(-24deg) translate3d(0, -14px, 0); } } @media (max-width: 920px) { .section-glass { display: none; } } @media (prefers-reduced-motion: reduce) { .section-glass span { animation: none; } }   .pad--inverse :is(h2, h3, h4) { color: var(--brand-white); }  .pad--inverse .sec-head h2 { color: var(--brand-white); } .pad--inverse p { color: var(--muted-on-dark); } .pad--inverse .kicker { color: var(--label-on-dark); } .pad--inverse .sec-head p { color: var(--muted-on-dark); }  .pad--inverse .kicker::before { display: none; }   .news-list--cols { grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); }  .project-card-base { min-inline-size: 0; } .project-card-media { min-inline-size: 0; } .project-card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; } .project-card-copy { min-inline-size: 0; display: flex; flex-direction: column; }  .project-card-base.project-card-base { position: relative; display: flex; flex-direction: column; align-items: stretch; overflow: visible; background: var(--surface-raised); border: 0; border-radius: var(--r); }  .project-card-base.is-clickable, .news-item--wipe.is-clickable, .company-card.is-clickable, .sector-card.is-clickable { cursor: pointer; }  .project-card-base .project-card-media { flex: 0 0 auto; aspect-ratio: var(--media-card); min-block-size: 0; overflow: hidden; } .project-card-base .project-card-copy { position: relative; flex: 1 1 auto; overflow: hidden; padding: clamp(24px, 2.4vw, 34px); background: var(--surface-raised); } :is(.project-card-base, .news-item--wipe) .project-card-copy > :not(.card-chevron) { position: relative; z-index: 2; } .project-card-base .project-card-copy h3 { font-size: var(--type-card); line-height: var(--leading-card); } @property --wipe-p { syntax: "<percentage>"; inherits: false; initial-value: 0%; } @property --wipe-op { syntax: "<percentage>"; inherits: false; initial-value: 72%; } :is(.project-card-base, .news-item--wipe) .project-card-copy::after { content: ""; position: absolute; z-index: 0;  block-size: auto;  inset: -1px -40%;   inset: 0; --wipe-fill: var(--card-wipe-fill); --wipe-p: 0%; background: linear-gradient(var(--route-card-wipe-angle), var(--wipe-fill) 0 var(--wipe-p), transparent var(--wipe-p) 100%); clip-path: none; transform: none; transition: --wipe-p var(--dur-slow) var(--ease-out); pointer-events: none; } [dir="ltr"] :is(.project-card-base, .news-item--wipe) .project-card-copy::after { transform: none; } :is(.project-card-base, .news-item--wipe):where(a[href], :has(a[href])):is(:hover, :focus-within) .project-card-copy::after { --wipe-p: 100%; --wipe-op: 100%; transform: none; }  :is(.project-card-base, .news-item--wipe) .project-card-copy > :not(.card-chevron) { transition: color var(--dur-slow) var(--ease-out); } :is(.project-card-base, .news-item--wipe):where(a[href], :has(a[href])):is(:hover, :focus-within) .project-card-copy > :not(.card-chevron) { color: var(--brand-white); }   .project-card-base:where(a[href], :has(a[href])):is(:hover, :focus-within) .news-item-meta :is(.date, .tag, .partner) { color: var(--brand-white); }  .project-card-base:where(a[href], :has(a[href])):is(:hover, :focus-within) .row-item-meta i.ph { color: var(--brand-white); }  .card-chevron svg { display: none; } .card-chevron.card-chevron { inset: 0; inline-size: auto; width: auto; aspect-ratio: auto; opacity: 1; pointer-events: none; transform-origin: var(--card-mark-pivot); transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out); }  .card-chevron::after { content: ""; position: absolute; inset: var(--card-mark-inset); inline-size: var(--card-mark-inline-size); block-size: var(--card-mark-block-size); aspect-ratio: var(--card-mark-ratio); background: var(--card-mark-art) var(--card-mark-repeat) var(--card-mark-anchor) / var(--card-mark-size); -webkit-mask-image: var(--card-mark-mask); mask-image: var(--card-mark-mask); rotate: var(--card-mark-rotate); opacity: var(--card-mark-opacity); pointer-events: none; transform: scale(1); transform-origin: var(--card-mark-pivot); transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out); }  :is(.needs-route:not(:where(.business-needs-route)), .project-card-base, .news-item--wipe, .company-card, .project-card--feature):where(a[href], :has(a[href])):is(:hover, :focus-within) .card-chevron, .business-needs-routes .business-needs-route:where(a[href]) .needs-route-copy:is(:hover, :focus-within) .card-chevron, .business-needs-routes .business-needs-route:focus-visible .needs-route-copy .card-chevron { transform: scale(var(--card-mark-hover-scale)); transform-origin: var(--card-mark-pivot); }   html[dir="rtl"] :is(.needs-route:not(:where(.business-needs-route)), .project-card-base, .news-item--wipe, .project-card--secondary, .project-card--feature, .company-card):where(a[href], :has(a[href])):is(:hover, :focus-within) .card-chevron { transform: scale(var(--card-mark-hover-scale)); transform-origin: var(--card-mark-pivot-rtl); }  html[dir="rtl"] :is(.needs-route, .project-card-base, .project-card--secondary, .project-card--feature, .news-item--wipe, .business-needs-routes) .card-chevron::after { inset: var(--card-mark-inset-rtl); transform-origin: var(--card-mark-pivot-rtl); transform: translateX(calc((1 - var(--card-mark-flip-rtl)) * 50%)) scale(var(--card-mark-flip-rtl), 1); }  :is(.needs-route:not(:where(.business-needs-route)), .project-card-base, .news-item--wipe, .company-card, .project-card--feature):where(a[href], :has(a[href])):is(:hover, :focus-within), .business-needs-routes .business-needs-route:where(a[href]) .needs-route-copy:is(:hover, :focus-within), .business-needs-routes .business-needs-route:focus-visible .needs-route-copy { --card-mark-art: var(--card-mark-art-on-fill); }  html[dir="rtl"] :is(.needs-route, .project-card-base, .project-card--secondary, .project-card--feature, .news-item--wipe, .company-card, .business-needs-routes) .card-chevron { transform-origin: var(--card-mark-pivot-rtl); }  .company-card .card-chevron.card-chevron { inset: auto 0 0 auto; inline-size: clamp(160px, 20vw, 260px); aspect-ratio: 434 / 281; block-size: auto; }  html[dir="rtl"] .company-card .card-chevron.card-chevron { inset: auto auto 0 0; } html[dir="rtl"] .company-card .card-chevron::after {  transform-origin: center; transform: scale(-1, 1); }  :is(.needs-route, .project-card--secondary, .project-card--feature) .card-chevron.card-chevron { inset: var(--card-mark-host-inset-rtl, auto auto 0 0);  inline-size: var(--card-mark-host-inline-size, clamp(160px, 20vw, 260px)); block-size: var(--card-mark-host-block-size, auto); aspect-ratio: var(--card-mark-host-ratio, 434 / 281);  max-block-size: var(--card-mark-host-max-block, 90%); } html[dir="ltr"] :is(.needs-route, .project-card--secondary, .project-card--feature) .card-chevron.card-chevron { inset: var(--card-mark-host-inset-ltr, auto 0 0 auto); }  .project-card--feature .card-chevron { z-index: 1; }   :is(.project-card-base, .news-item--wipe) .card-chevron { position: absolute; z-index: 1;  inset: var(--card-mark-host-inset-rtl, auto auto 0 0);  block-size: var(--card-mark-host-block-size, min(80%, 180px)); inline-size: var(--card-mark-host-inline-size, auto); aspect-ratio: var(--card-mark-host-ratio, 434 / 281); opacity: 1; pointer-events: none; transition: transform var(--dur-slow) var(--ease-out); } .project-card-base .card-chevron svg { width: 100%; height: 100%; overflow: visible; }  [dir="ltr"] :is(.project-card-base, .news-item--wipe) .card-chevron { inset: var(--card-mark-host-inset-ltr, auto 0 0 auto); } [dir="ltr"] .project-card-base .card-chevron svg { transform: scaleX(-1); } .project-card-base .project-card-action:focus-visible, .project-card-base .action-link:focus-visible { outline: 3px solid var(--brand-razeen); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { :is(.project-card-base, .news-item--wipe) .project-card-copy::after, .project-card-base .card-chevron { transition: none; } }  .news-card:not(.news-card--feature) { min-inline-size: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--surface-raised); border-radius: var(--r); cursor: pointer; } .news-card:not(.news-card--feature) > * { min-inline-size: 0; } .news-card:not(.news-card--feature) .news-image-link { display: block; overflow: hidden; } .news-card:not(.news-card--feature) .img { display: block; overflow: hidden; aspect-ratio: var(--media-wide); block-size: auto; min-block-size: 0; margin: 0; background: var(--brand-black); } .news-card:not(.news-card--feature) img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.94) contrast(1.04); transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out); } .news-card:not(.news-card--feature):is(:hover, :focus-within) img { filter: saturate(1) contrast(1.03) brightness(1); } .news-card:not(.news-card--feature) .news-body { display: flex; flex-direction: column; align-items: flex-start; min-block-size: 0; padding: 22px 24px 20px; } .news-card:not(.news-card--feature) .news-body > * { min-inline-size: 0; max-inline-size: 100%; } .news-card:not(.news-card--feature) .date { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 14px; color: var(--badge-text); font-size: var(--badge-size); font-weight: var(--badge-weight); letter-spacing: 0; } .news-card:not(.news-card--feature) .date::before { content: "◷"; color: currentColor; font-size: var(--icon-inline); } .news-card:not(.news-card--feature) h3 { min-block-size: 0; margin-block-start: 14px; color: var(--brand-black); font-size: var(--type-card); line-height: var(--leading-card); text-wrap: balance; transition: color var(--dur-base) var(--ease-out); } .news-card:not(.news-card--feature) h3 a { color: inherit; text-decoration: none; } .news-card:not(.news-card--feature) p { min-block-size: var(--leading-card); margin-block-start: 10px; overflow: hidden; color: var(--muted); font-size: var(--type-action); line-height: 1.7; text-overflow: ellipsis; white-space: nowrap; } .news-card:not(.news-card--feature) .more { display: inline-flex; align-items: center; gap: 9px; min-block-size: 44px; margin-block-start: 16px; padding-block-end: 4px; color: var(--brand-black); font-size: var(--badge-size); font-weight: var(--badge-weight); } .news-card:not(.news-card--feature) .more i.ph { color: currentColor; transition: transform var(--dur-base) var(--ease-out); }  .news-card:not(.news-card--feature):is(:hover, :focus-within) .more { color: var(--link-hover); } @media (prefers-reduced-motion: reduce) { .news-card:not(.news-card--feature) img, .news-card:not(.news-card--feature) .more i.ph { transition: none; } }  .pad--sunken :is(.kicker, .is-pending, .pending-note) { color: var(--icon); } .pad--sunken .pending-note i.ph { color: var(--icon); }  .sec-head--center { margin-inline: auto; text-align: center; }  .sec-head--wide-heading { max-width: 800px; } .sec-head--wide-heading h2 { max-inline-size: 800px; }  .sec-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 3vw, 48px); max-width: none; } .sec-head--split h2 { margin-bottom: 0; } .sec-head--split > p { margin: 0; font-size: var(--type-lead); line-height: var(--leading-lead); color: var(--muted); }  .sec-head--split-wide-heading { grid-template-columns: minmax(0, 2fr) minmax(260px, .55fr); }  .news-item--link .news-item-media { display: none; } .news-item--link .news-item-body { padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.2vw, 28px); }  .section-lead { max-width: 680px; font-size: var(--type-lead); line-height: var(--leading-lead); color: var(--muted); }  .pad--field, .pad--sunken, .pad--edge, .pad--wedge { position: relative; overflow: hidden; isolation: isolate; } .pad--field > .wrap, .pad--sunken > .wrap, .pad--edge > .wrap, .pad--wedge > .wrap { position: relative; z-index: 1; }  .pad--sunken::before, .pad--edge::before, .pad--field::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; }  .pad--wedge::before { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient( var(--brand-stripe-gradient-angle), transparent 0%, transparent 38%, color-mix(in srgb, var(--brand-sweihan) 3%, transparent) 68%, color-mix(in srgb, var(--brand-sweihan) 5%, transparent) 100%); pointer-events: none; }  .pad--inverse.pad--wedge::before { background: linear-gradient( var(--brand-stripe-gradient-angle), transparent 0%, transparent 38%, color-mix(in srgb, var(--brand-white) 4%, transparent) 100%); }  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 64px); }  .split--media-dominant { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "heading heading" "body media" "actions media"; align-items: start; row-gap: 20px; column-gap: var(--sec-head-gap); }  .split-copy > * + * { margin-block-start: 20px; } .split-copy > .kicker + h2 { margin-block-start: 0; }  .split-copy .cta-actions { justify-content: flex-start; }  .split-copy .action-link { color: var(--accent-strong); } .section-view-all { color: var(--accent-strong); }  .section-heading-row { display: grid; grid-template-columns: minmax(0, 680px) auto; align-items: end; justify-content: space-between; gap: var(--sec-head-gap); margin-block-end: var(--sec-head-gap); } .section-heading-row .sec-head { margin-block-end: 0; } .section-heading-row .section-view-all { justify-self: end; } @media (max-width: 860px) { .section-heading-row { grid-template-columns: minmax(0, 1fr); align-items: start; } .section-heading-row .section-view-all { justify-self: start; } } .pad--inverse .split-copy .action-link { color: var(--brand-white); } .pad--inverse .split-copy .action-link:is(:hover, :focus-visible) { color: var(--link-hover-on-dark); } .split-copy p { font-size: var(--type-lead); line-height: var(--leading-lead); color: var(--muted); }  .split-media { position: relative; overflow: visible; border-radius: var(--r); aspect-ratio: var(--media-wide); background: var(--surface-sunken); } .split-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--r); } .split-media-link { display: block; color: inherit; text-decoration: none; } .split-media-link:focus-visible { outline: 3px solid var(--brand-razeen); outline-offset: 4px; }  .split-ribbon { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: var(--r); pointer-events: none; } .split-ribbon::after { content: ""; position: absolute; top: var(--identity-band-top); left: 8%; width: var(--identity-band-width); height: var(--identity-band-height);  border: var(--identity-band-border) solid color-mix(in srgb, var(--identity-mark) var(--identity-band-line-on-photo), transparent); background: color-mix(in srgb, var(--identity-mark) var(--identity-band-fill-on-photo), transparent); transform: rotate(var(--brand-stripe-angle)); }  .split-media::after { content: ""; position: absolute; z-index: 2; bottom: 0; right: 0; inline-size: var(--photo-mark-width); aspect-ratio: var(--photo-mark-p43-ratio); background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right bottom / contain; pointer-events: none; }  .split--logo .split-media::after, .split--logo-wide .split-media::after, .person-rows .split-media::after, .split--no-mark .split-media::after { display: none; }  .project-card-media::after { display: none; } @media (max-width: 920px) {  .split-media::after { display: none; } }  .split--reverse .split-media { order: -1; }  .split--headline .split-copy h2 { font-size: var(--type-headline); line-height: var(--leading-headline); font-weight: 700; }  .split--text { align-items: start; } .split--text .split-copy h3 { font-size: var(--type-card); line-height: var(--leading-card);  margin-block-end: 0; }  .split--text .split-copy .kicker { line-height: 1.2; } .split--text .split-copy > * + * { margin-block-start: 2px; }  .split--text { row-gap: clamp(56px, 5.5vw, 88px); }   .split--logo .split-media, .split--logo-wide .split-media { aspect-ratio: var(--media-card); display: grid; place-items: center; padding: clamp(24px, 3vw, 44px);  background: var(--surface-raised); } .split--logo .split-media img { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 100%; object-fit: contain;  border-radius: 0; } .split--logo-body { grid-template-areas: "kicker kicker" "heading heading" "body media" "actions media";  grid-template-rows: auto auto auto 1fr; align-items: start; row-gap: 20px; } .split--logo-body .split-copy { display: contents; } .split--logo-body .split-copy > .kicker { grid-area: kicker; } .split--logo-body .split-copy > h2 { grid-area: heading; } .split--logo-body .split-copy > .split-copy-body { grid-area: body; } .split--logo-body .split-copy > .cta-actions { grid-area: actions; } .split--logo-body .split-media { grid-area: media; align-self: center; } .split--logo-body .split-media img { inline-size: min(100%, 320px); } .split--logo .split-ribbon { display: none; }    .pad:has(> .wrap > .split--tall) { display: grid; align-content: center; min-block-size: var(--section-tall-min); } .split--logo-wide { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); } .split--logo-wide .split-copy { min-inline-size: 0; flex: 1 1 auto; } .split--logo-wide .split-copy > h2 { margin-block-start: 0; } .split--logo-wide .split-media { flex: 0 0 auto; aspect-ratio: auto; inline-size: min(100%, 320px); } .split--logo-wide .split-media img { inline-size: 100%; block-size: auto; max-inline-size: 100%;  border-radius: 0; } .split--logo-wide .split-ribbon { display: none; }  .split--logo-wide.split--transparent .split-media { padding: 0; background: transparent; }  .split--logo-wide.split--logo .split-media { aspect-ratio: var(--media-card); min-block-size: 0; inline-size: min(100%, var(--logo-wide-portrait-inline)); } .split--logo-wide.split--logo .split-media img { inline-size: auto; block-size: auto; min-block-size: 0; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; } .split--logo-wide.split--logo .split-copy > p:nth-of-type(3) { max-inline-size: var(--logo-wide-copy-measure); } .split--logo-wide.split--copy-measured .split-copy > p:nth-of-type(2) { max-inline-size: var(--logo-wide-copy-measure); } .split--media-dominant .split-copy { display: contents; } .split--media-dominant .split-copy > .split-heading { grid-area: heading; display: grid; gap: 0; margin-block-start: 0; } .split--media-dominant .split-heading h2 { margin-block-start: 0; } .split--media-dominant .split-copy > .split-copy-body { grid-area: body; display: grid; gap: 10px; margin-block-start: var(--sec-head-gap); } .split--media-dominant .split-copy > .cta-actions { grid-area: actions; } .split--media-dominant .split-media { grid-area: media; align-self: start; margin-block-start: var(--sec-head-gap);  inline-size: 100%; } [dir="rtl"] .split--media-dominant { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "heading heading" "media body" "media actions"; } .split--media-dominant-no-actions { grid-template-areas: "heading heading" "body media"; row-gap: var(--sec-head-gap); }  .split--media-dominant-no-actions .split-copy > .split-copy-body, .split--media-dominant-no-actions .split-media { margin-block-start: 0; align-self: start; } [dir="rtl"] .split--media-dominant-no-actions { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "heading heading" "media body"; }  .split-badge { position: absolute; bottom: calc(-1 * var(--photo-caption-overhang)); left: -36px; z-index: 2; max-inline-size: min(72%, 340px); padding: clamp(22px, 2.4vw, 34px) clamp(26px, 3vw, 42px); background: var(--accent-fill); color: var(--brand-white); border-radius: var(--r); }  .split-badge b { display: block; font-family: var(--font-display); font-size: var(--figure-size); line-height: 1; font-weight: 400; color: var(--brand-white); }  .split-badge span { display: block; margin-block-start: 18px; font-size: var(--type-body); line-height: var(--leading-body); font-weight: var(--badge-weight); color: var(--brand-white); }  .split-badge p { margin: 0; font-size: var(--type-body); line-height: var(--leading-body); color: var(--brand-white); } .split-badge span + p { margin-block-start: 14px; } @media (max-width: 980px) {  .about-layout { row-gap: calc(var(--photo-caption-overhang) + var(--about-stacked-copy-gap)); } .about-content .kicker { margin-block-end: var(--about-stacked-heading-gap); } }  .split-logo-badge { position: absolute; inset-block-end: -36px; inset-inline-start: -36px; z-index: 2; inline-size: min(50%, 320px); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: clamp(20px, 2.5vw, 32px); min-block-size: 0; background: var(--surface-raised); border-radius: var(--r); } .split-logo-badge:is(a) { color: inherit; text-decoration: none; } .split-logo-badge img { display: block; inline-size: min(90%, 280px); block-size: auto; max-block-size: 100%; object-fit: contain; } .split-logo-badge--portrait { inline-size: min(21%, 112px); aspect-ratio: 1 / 1; }  .split--heading-logo .split-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); column-gap: var(--sec-head-gap); row-gap: 0; } .split--heading-logo .split-heading > .kicker { grid-column: 1 / -1; } .split--heading-logo .split-heading > h2 { grid-column: 1; grid-row: 2; } .split--heading-logo .split-heading > .split-logo-badge--heading { position: static; grid-column: 2; grid-row: 2; align-self: center; justify-self: end; inline-size: min(100%, 320px); }  .stat-strip { display: grid; grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr)); background: var(--surface-raised); border-radius: var(--r); overflow: hidden; }  .stat-strip--attached { margin-block-start: var(--sec-head-gap); }  .stat { background: var(--surface-sunken); } .project-card--secondary .project-card-body { background: var(--surface-sunken); } .news-card { background: var(--surface-sunken); } .news-item { background: var(--surface-sunken); }  .project-card-base.project-card-base, .project-card-base .project-card-copy { background: var(--surface-sunken); }  .news-card.news-card { background: var(--surface-sunken); }  .pad--sunken :is(.stat, .news-card, .news-item) { background: var(--surface-base); } .pad--sunken .project-card-base.project-card-base, .pad--sunken .project-card-base .project-card-copy { background: var(--surface-base); }  .pad--sunken :is(.search-field, .site-search-field, .jobs-search input, .news-dropdown-toggle) { background: var(--surface-raised); } .stat { position: relative; min-width: 0; padding: 30px clamp(18px, 1.9vw, 30px); display: grid; grid-template-columns: 42px minmax(0, 1fr); align-content: start; gap: 6px 14px; }  .stat + .stat::before { content: ""; position: absolute; top: 50%;  left: calc(clamp(18px, 1.9vw, 30px) / -2); width: 2px; height: 24px; background: var(--identity-mark); transform: translateY(-50%) rotate(var(--brand-stripe-angle)); } .stat i.ph { grid-column: 1; grid-row: 1; align-self: center; color: var(--figure); font-size: var(--ic-lg); } .stat b { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--figure-size); line-height: 1.25; font-weight: 500; }  .stat b bdi { direction: ltr; unicode-bidi: isolate; }  .stat-figure-prefix, .stat-figure-suffix { margin-inline-end: 6px; font-size: var(--type-action); font-weight: 400; color: var(--muted); } .stat-figure-suffix { margin-inline-end: 0; margin-inline-start: 6px; white-space: nowrap; } .pad--inverse :is(.stat-figure-prefix, .stat-figure-suffix) { color: var(--muted-on-dark); } .stat > span { grid-column: 2; grid-row: 2; color: var(--ink); font-size: var(--type-action); line-height: var(--leading-label); } .stat p { grid-column: 2; grid-row: 3; margin: 0; color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-body);  min-block-size: calc(3 * 1lh); }  .stat-strip--compact .stat { padding-block: 18px; } .stat-strip--compact .stat p { min-block-size: auto; }  .stat time { grid-column: 2; grid-row: 4; color: var(--label); font-size: var(--type-caption); }  .pad--inverse .stat-strip { background: var(--card-dark); } .operations-photo .stat-strip { background: var(--glass-card-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); backdrop-filter: blur(var(--glass-blur)) saturate(120%); } .pad--inverse .stat b, .pad--inverse .stat > span { color: var(--brand-white); } .pad--inverse .stat i.ph { color: var(--figure-on-dark); } .pad--inverse .stat p { color: var(--muted-on-dark); } .pad--inverse .stat time { color: var(--label-on-dark); }  .pad--inverse .stat + .stat::before { background: var(--figure-on-dark); }  .operations-photo .stat { grid-template-columns: minmax(0, 1fr); } .operations-photo .stat > :not(i) { grid-column: 1; }  .stat-strip--facts .stat { grid-template-columns: minmax(0, 1fr); gap: 6px; } .stat-strip--facts .stat > span { grid-column: 1; grid-row: 1; color: var(--label); font-size: var(--type-meta); } .stat-strip--facts .stat b { grid-column: 1; grid-row: 2; align-self: start; font-size: var(--type-label); }  .stat-strip--facts-icons .stat { grid-template-columns: var(--icon-feature) minmax(0, 1fr); } .stat-strip--facts-icons .stat > i.ph { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-size: var(--icon-feature); color: var(--accent-strong); } .stat-strip--facts-icons .stat > span, .stat-strip--facts-icons .stat > b { grid-column: 2; }  .icon-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }  .icon-grid--balanced-five { grid-template-columns: repeat(6, minmax(0, 1fr)); } .icon-grid--balanced-five .icon-item { grid-column: span 2; } .icon-grid--balanced-five .icon-item:nth-child(4) { grid-column: 2 / span 2; } .icon-grid--balanced-five .icon-item:nth-child(5) { grid-column: 4 / span 2; }  .icon-grid--balanced-five-stretch { grid-template-columns: repeat(6, minmax(0, 1fr)); } .icon-grid--balanced-five-stretch .icon-item { grid-column: span 2; } .icon-grid--balanced-five-stretch .icon-item:nth-child(4), .icon-grid--balanced-five-stretch .icon-item:nth-child(5) { grid-column: span 3; }  .icon-grid--stacked { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); }  .icon-item { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--r); background: var(--surface-raised); }  .icon-item-mark, .icon-item h3, .icon-item p, .icon-item-action { position: relative; z-index: 1; } .icon-item-mark { display: grid; place-items: center; inline-size: 1em; block-size: 1em; color: var(--icon-feature-color); font-size: var(--icon-display); } .icon-item-mark > i.ph { inline-size: 1em; block-size: 1em; font-size: inherit; }  :where(.icon-grid:not(.icon-grid--corner-mark, .icon-grid--amenities)) .icon-item::after { content: var(--card-mark-icon-content); position: absolute; z-index: 0; right: 0; bottom: 0; inline-size: var(--card-mark-panel-inline-size, 40%); block-size: var(--card-mark-panel-block-size, auto); aspect-ratio: var(--card-mark-panel-ratio, var(--photo-mark-p43-ratio)); max-block-size: var(--card-mark-icon-max-block); background: var(--card-mark-art) var(--card-mark-panel-repeat, no-repeat) var(--card-mark-panel-anchor, right bottom) / var(--card-mark-panel-size, 100% 100%); opacity: var(--card-mark-opacity); pointer-events: none; transform: scale(1); transform-origin: var(--card-mark-pivot); transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out); } [dir="rtl"] :where(.icon-grid:not(.icon-grid--corner-mark, .icon-grid--amenities)) .icon-item::after { right: auto; left: 0; transform-origin: var(--card-mark-pivot-rtl); transform: translateX(calc((1 - var(--card-mark-flip-rtl)) * 50%)) scale(var(--card-mark-flip-rtl), 1); } :where(.icon-grid:not(.icon-grid--corner-mark, .icon-grid--amenities)) .icon-item--link:is(:hover, :focus-visible)::after, :where(.icon-grid:not(.icon-grid--corner-mark, .icon-grid--amenities)).icon-grid--interactive .icon-item:hover::after { transform: scale(var(--card-mark-hover-scale)); } [dir="rtl"] :where(.icon-grid:not(.icon-grid--corner-mark, .icon-grid--amenities)) .icon-item--link:is(:hover, :focus-visible)::after, [dir="rtl"] :where(.icon-grid:not(.icon-grid--corner-mark, .icon-grid--amenities)) .icon-grid--interactive .icon-item:hover::after { transform: translateX(calc((1 - var(--card-mark-flip-rtl)) * 0.5 * var(--card-mark-hover-scale) * 100%)) scale(calc(var(--card-mark-flip-rtl) * var(--card-mark-hover-scale)), var(--card-mark-hover-scale)); }  .icon-item--link:is(:hover, :focus-visible), .icon-grid--interactive .icon-item:hover { --card-mark-art: var(--card-mark-art-on-fill); }  .icon-grid--corner-mark .icon-item::after { content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; inline-size: var(--card-mark-panel-inline-size, 40%); block-size: var(--card-mark-panel-block-size, auto); aspect-ratio: var(--card-mark-panel-ratio, var(--photo-mark-p43-ratio));  max-block-size: var(--card-mark-icon-max-block); background: var(--card-mark-art) var(--card-mark-panel-repeat, no-repeat) var(--card-mark-panel-anchor, right bottom) / var(--card-mark-panel-size, 100% 100%); opacity: var(--card-mark-opacity); pointer-events: none;  transform: scale(1); transform-origin: var(--card-mark-pivot); transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out); }  [dir="rtl"] .icon-grid--corner-mark .icon-item::after { right: auto; left: 0; transform-origin: var(--card-mark-pivot-rtl); transform: translateX(calc((1 - var(--card-mark-flip-rtl)) * 50%)) scale(var(--card-mark-flip-rtl), 1); }  .icon-grid--corner-mark.icon-grid--interactive .icon-item:hover::after, .icon-grid--corner-mark .icon-item--link:is(:hover, :focus-visible)::after { transform: scale(var(--card-mark-hover-scale)); } html[dir="rtl"] .icon-grid--corner-mark.icon-grid--interactive .icon-item:hover::after, html[dir="rtl"] .icon-grid--corner-mark .icon-item--link:is(:hover, :focus-visible)::after { transform: translateX(calc((1 - var(--card-mark-flip-rtl)) * 0.5 * var(--card-mark-hover-scale) * 100%)) scale(calc(var(--card-mark-flip-rtl) * var(--card-mark-hover-scale)), var(--card-mark-hover-scale)); } .icon-item h3 { margin: 0; font-size: var(--type-card); line-height: var(--leading-card); font-weight: 700; color: var(--ink); } .icon-item p { margin: 0; min-block-size: calc(2 * 1lh); color: var(--muted); }  .icon-item-action { margin-block-start: auto; color: var(--accent-strong); pointer-events: none; }  .icon-grid .needs-route-action { align-self: flex-start; margin-block-start: auto; color: var(--ink); pointer-events: none; } :is(.icon-item--link:is(:hover, :focus-visible), .icon-grid--interactive .icon-item:hover) .icon-item-action { color: var(--brand-white); } :is(.icon-item--link:is(:hover, :focus-visible), .icon-grid--interactive .icon-item:hover) .needs-route-action { color: var(--brand-white); } :is(.icon-item--link:is(:hover, :focus-visible), .icon-grid--interactive .icon-item:hover) .icon-item-action::after { transform: scaleX(1); }  .pad--inverse .icon-item { background: var(--card-dark); } .pad--inverse .icon-item-mark { color: var(--icon-feature-color-on-dark); } .pad--inverse .icon-item h3 { color: var(--brand-white); } .pad--inverse .icon-item p { color: var(--muted-on-dark); } .pad--inverse .icon-item-action { color: var(--brand-white); }  .icon-grid--labels-only .icon-item { flex-direction: row; align-items: center; gap: 12px; padding: 0; border-radius: 0; background: none; } .pad--inverse .icon-grid--labels-only .icon-item { background: none; } .icon-grid--labels-only .icon-item-mark { color: var(--icon); font-size: var(--icon-default); flex: 0 0 auto; } .pad--inverse .icon-grid--labels-only .icon-item-mark { color: var(--icon-on-dark); }  .icon-grid--amenities .icon-item { flex-direction: row; align-items: center; background: var(--surface-sunken); } .pad--sunken .icon-grid--amenities .icon-item { background: var(--surface-raised); }  .icon-grid--stacked-copy .icon-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; } .icon-grid--stacked-copy .icon-item-mark { grid-column: 1; grid-row: 1; } .icon-grid--stacked-copy .icon-item h3 { grid-column: 2; grid-row: 1; } .icon-grid--stacked-copy .icon-item p { grid-column: 2; grid-row: 2; min-block-size: 0; }  .icon-grid--amenities .icon-item::after { content: ""; position: absolute; inset: auto 0 0 auto; z-index: 0; inline-size: var(--card-mark-panel-inline-size, auto); block-size: var(--card-mark-panel-block-size, 130%); aspect-ratio: var(--card-mark-panel-ratio, var(--photo-mark-p43-ratio)); background: var(--card-mark-art) var(--card-mark-panel-repeat, no-repeat) var(--card-mark-panel-anchor, right bottom) / var(--card-mark-panel-size, 100% 100%); opacity: var(--card-mark-opacity); pointer-events: none; }  [dir="rtl"] .icon-grid--amenities .icon-item::after { inset: auto auto 0 0; transform: scaleX(var(--card-mark-flip-rtl)); } .icon-grid--amenities .icon-item-mark { flex: 0 0 auto; color: var(--accent-strong); font-size: var(--icon-feature); } .pad--inverse .icon-grid--amenities .icon-item-mark { color: var(--icon-feature-color-on-dark); }   :is(.icon-item--link, .icon-grid--interactive .icon-item) { transition: color var(--dur-slow) var(--ease-out); }  :is(.icon-item--link, .icon-grid--interactive .icon-item) :is(.icon-item-mark, h3, p, .icon-item-action) {  transition: color var(--dur-fast) var(--ease-out) calc(var(--dur-base) - var(--dur-fast)); } :is(.icon-item--link:is(:hover, :focus-visible), .icon-grid--interactive .icon-item:hover) :is(.icon-item-mark, h3, p, .icon-item-action) { transition-delay: 0s; } :is(.icon-item--link, .icon-grid--interactive .icon-item)::before { content: ""; position: absolute; z-index: 0; inset: 0; --wipe-p: 0%; --wipe-fill: var(--card-wipe-fill); background-image: linear-gradient(var(--route-card-wipe-angle), var(--wipe-fill) 0 var(--wipe-p), transparent var(--wipe-p) 100%); transition: --wipe-p var(--dur-slow) var(--ease-out); pointer-events: none; }  :is(.icon-item--link, .icon-grid--interactive .icon-item)::before { transition-duration: var(--dur-base); } :is(.icon-item--link:is(:hover, :focus-visible), .icon-grid--interactive .icon-item:hover)::before { --wipe-p: 100%; transition-duration: var(--dur-slow); } :is(.icon-item--link:is(:hover, :focus-visible), .icon-grid--interactive .icon-item:hover) :is(.icon-item-mark, h3, p, .icon-item-action) { color: var(--brand-white); }  .step-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 38px); padding: clamp(24px, 2.6vw, 38px);  background: var(--surface-sunken); border-radius: var(--r); } .step { position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; }  .step-mark { display: grid; place-items: start; min-inline-size: 0; block-size: auto; padding-inline: 0; color: var(--figure); font-family: var(--font-display); font-size: var(--figure-size); font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1; } .step h3 { margin: 0; font-size: var(--type-card); line-height: var(--leading-card); color: var(--ink); } .step p { margin: 0; color: var(--muted); }  .step-list--divided { gap: 0; padding: 0; background: var(--surface-raised); overflow: hidden; }  #process.pad--raised .step-list--divided { background: var(--surface-sunken); }  #next .step-list--divided { background: var(--surface-sunken); } .step-list--divided .step { padding: 30px clamp(18px, 1.9vw, 30px); }  .step-list--two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .step-list--two-columns.step-list--divided .step:nth-child(odd)::before, .step-list--two-columns.step-list--divided .step:nth-child(even)::before { content: ""; position: absolute; top: 50%; left: 0; width: var(--step-separator-thickness); height: var(--step-separator-length); background: var(--identity-mark); transform: translateY(-50%) rotate(var(--brand-stripe-angle)); } .step-list--two-columns.step-list--divided .step:nth-child(odd)::before { content: none; }  .step-list--divided .step:nth-child(3n + 2)::before, .step-list--divided .step:nth-child(3n)::before { content: ""; position: absolute; top: 50%; left: 0; width: var(--step-separator-thickness); height: var(--step-separator-length); background: var(--identity-mark); transform: translateY(-50%) rotate(var(--brand-stripe-angle)); }  .pad--inverse .step-list .step-mark { color: var(--figure-on-dark); } .pad--inverse .step h3 { color: var(--brand-white); }  .step-list--timeline { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; background: none; border-radius: 0; }  .step-list--timeline::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: calc(50% - 1px); width: 2px; background: color-mix(in srgb, var(--identity-mark) 26%, transparent); } .step-list--timeline .step { position: relative; grid-template-columns: minmax(0, 1fr); inline-size: calc(50% - clamp(28px, 3vw, 46px)); gap: 8px; padding: clamp(18px, 1.9vw, 26px) 0; margin-block-end: clamp(24px, 2.6vw, 38px); }  .step-list--timeline .step:nth-child(even) { margin-inline-start: auto; } .step-list--timeline .step::after { content: ""; position: absolute; top: clamp(24px, 2.4vw, 34px); right: calc(clamp(28px, 3vw, 46px) * -1 - 5px); width: 10px; height: 10px; background: var(--identity-mark); transform: rotate(var(--brand-stripe-angle)); } .step-list--timeline .step:nth-child(even)::after { right: auto; left: calc(clamp(28px, 3vw, 46px) * -1 - 5px); }  .step-list--timeline .step-mark { margin-block-end: 4px; line-height: 1; } .step-list--timeline .step h3 { grid-column: 1; align-self: start; } .step-list--timeline .step p { grid-column: 1; } .pad--inverse .step-list--timeline .step-mark { color: var(--figure-on-dark); } .pad--inverse .step-list--timeline::before { background: color-mix(in srgb, var(--brand-white) 22%, transparent); }  .step-list--compact { grid-template-columns: minmax(0, 1fr); }  .step-list--compact.step-list--divided { grid-template-columns: repeat(3, minmax(0, 1fr)); } .step-list--compact .step-mark { color: var(--figure); }  .step-list--chapters { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 1.8vw, 24px); padding: 0; background: none; border-radius: 0; } .step-chapter { position: relative; display: grid; grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); overflow: hidden; border-radius: var(--r); background: var(--surface-raised); } .step-chapter-header { position: relative; overflow: visible; display: grid; align-content: center; gap: 12px; min-width: 0; padding: clamp(24px, 2.6vw, 38px); background: var(--surface-raised); }  .step-chapter-band { position: absolute; z-index: 0; inset-inline-end: calc(var(--step-separator-thickness) / -2); top: 50%; inline-size: var(--step-separator-thickness); block-size: var(--step-separator-length); background: var(--line); transform: translateY(-50%) rotate(var(--brand-stripe-angle)); pointer-events: none; } .step-chapter-header > :not(.step-chapter-band) { position: relative; z-index: 1; } .step-chapter-header h3 { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--type-card); line-height: var(--leading-card); font-weight: 400; } .step-chapter-header p { margin: 0; color: var(--figure); font-family: var(--font-display); font-size: var(--type-label); line-height: var(--leading-label); } .step-chapter-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .step-list--chapters .step { align-content: center; gap: 12px; padding: clamp(24px, 2.6vw, 38px); } .step-list--chapters .step-mark { color: var(--figure); font-size: var(--figure-size); } .step-list--chapters .step h4 { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--type-card); line-height: var(--leading-card); font-weight: 400; } .step-list--chapters .step p { margin: 0; color: var(--muted); font-size: var(--type-body); line-height: var(--leading-body); } .step-list--chapters .step--highlight h4 { font-weight: 700; }   .row-list { display: grid; gap: 10px; } .row-list--square { grid-template-columns: repeat(2, minmax(0, 1fr)); } .row-list--square .row-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; align-items: start; } .row-list--square .row-item h3, .row-list--square .row-item p { grid-column: 1 / -1; } .row-list--square .row-item-meta { grid-column: 1; } .row-list--square .row-item p { align-self: start; } .row-list--square .row-item-meta { align-self: end; } .row-list--square .row-item-action { grid-column: 2; grid-row: 3; align-self: end; }  .row-item { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px clamp(18px, 2vw, 32px); padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px); border-radius: var(--r); background: var(--surface-sunken); transition: background var(--dur-fast) var(--ease-out); }   .pad--sunken .row-list--company-lines.row-list--company-branded .row-item { background: var(--surface-raised); } .row-list--company-lines.row-list--company-branded .row-item { grid-template-columns: var(--company-row-logo-w) minmax(0, 1fr) auto; align-items: center; } .row-list--company-lines.row-list--company-branded .row-item > .row-item-logo { grid-column: 1; } .row-list--company-lines.row-list--company-branded .row-item > .row-item-copy { grid-column: 2; min-inline-size: 0; } .row-list--company-lines.row-list--company-branded .row-item > .row-item-action-wrap { grid-column: 3; }  .row-list--company-lines.row-list--company-branded .row-item-copy p { max-inline-size: 30ch; }  .row-list--company-lines.row-list--company-branded .row-item-logo { display: grid; place-items: center; inline-size: var(--company-row-logo-w); block-size: var(--company-row-logo-h); padding: var(--company-row-logo-pad); background: transparent; border-radius: var(--r); } .row-list--company-lines.row-list--company-branded .row-item-logo img {  grid-area: 1 / 1; display: block; inline-size: auto; block-size: var(--company-row-logo-mark-h); max-inline-size: 100%; object-fit: contain; }  .row-list--company-lines.row-list--company-branded .row-item-logo img[src*="khadamat-logo-dual"] { block-size: var(--company-row-logo-khadamat-h); } .row-list--company-lines.row-list--company-branded .row-item-logo img[src*="zoad-logo-dual"] { block-size: var(--company-row-logo-zoad-h); } .row-list--company-lines.row-list--company-branded .row-item-logo:has(img:is([src*="zoad-emblem"], [src*="zoad-logo-hover"], [src*="zoad-logo-transparent"])) { padding: 0; }  .row-list--company-lines.row-list--company-branded .row-item-logo img:is([src*="zoad-emblem"], [src*="zoad-logo-hover"], [src*="zoad-logo-transparent"]) { block-size: var(--company-row-logo-h); } .row-list--company-lines.row-list--company-branded .row-item-logo img[src*="your-laundry-logo-dual"] { block-size: var(--company-row-logo-laundry-h); } .row-list--company-lines.row-list--company-branded .row-item-logo--swap { position: relative; } .row-list--company-lines.row-list--company-branded .row-item-logo--swap :is(.row-item-logo-default, .row-item-logo-hover) { transition: opacity var(--dur-slow) var(--ease-out); }  .row-list--company-lines.row-list--company-branded .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) .row-item-logo:not(.row-item-logo--swap) img { filter: brightness(0) invert(1); } .row-list--company-lines.row-list--company-branded .row-item-logo--swap .row-item-logo-hover {  opacity: 0; } .row-list--company-lines.row-list--company-branded .row-item > .row-item-action-wrap { position: relative; display: inline-flex; align-items: center; gap: 12px; align-self: center; padding-block-end: 4px; color: var(--accent-strong); font-size: var(--type-action); font-weight: 800; line-height: 1.3; transition: color var(--dur-fast) var(--ease-out); } .row-list--company-lines.row-list--company-branded .row-item-action-wrap .row-item-action-label { font-size: var(--type-meta); }  .row-list--company-lines.row-list--company-branded .row-item { --company-row-hover-fill: var(--accent); } .row-list--company-lines.row-list--company-branded .row-item::before { --wipe-fill: var(--company-row-hover-fill); } .row-list--company-lines.row-list--company-branded .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) { color: var(--brand-white); }  .row-list--company-lines.row-list--company-branded .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) .row-item-logo { background: transparent; } .row-list--company-lines.row-list--company-branded .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) :is(h3, p, .row-item-action-label, .row-item-action) { color: var(--brand-white); } .row-list--company-lines.row-list--company-branded .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) .row-item-logo--swap .row-item-logo-default { opacity: 0; } .row-list--company-lines.row-list--company-branded .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) .row-item-logo--swap .row-item-logo-hover { opacity: 1; } .row-list--company-lines.row-list--company-branded .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) .row-item-action-wrap { color: var(--brand-white); }  .row-list--company-lines.row-list--company-branded .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) .row-item-action-wrap::after { transform: scaleX(1); }  @property --wipe-p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }  .row-item::before { content: ""; position: absolute; z-index: 0; inset: 0; --wipe-p: 0%; --wipe-fill: var(--card-wipe-fill); background-image: linear-gradient(var(--row-action-wipe-angle), var(--wipe-fill) 0 var(--wipe-p), transparent var(--wipe-p) 100%); transition: --wipe-p var(--dur-slow) var(--ease-out); pointer-events: none; } .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within)::before { --wipe-p: 100%; }  .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) :is(h3, p, .row-item-meta) { color: var(--brand-white); }  .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) .row-item-meta span i.ph, .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) .row-item-meta i.ph { color: var(--icon-on-dark); } .row-item .section-glass { transition: transform var(--dur-slow) var(--ease-out); } .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) .section-glass { transform: translate3d(-14px, -10px, 0); } [dir="ltr"] .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) .section-glass { transform: translate3d(14px, -10px, 0); }  .row-item > :not(.section-glass) { position: relative; z-index: 1; } .row-item h3 { margin: 0; font-size: var(--type-label); line-height: var(--leading-label); color: var(--ink); }   :is(.row-item--link, .icon-item--link) { color: inherit; text-decoration: none; } :is(.row-item--link, .icon-item--link):focus-visible {  outline: 3px solid var(--accent); outline-offset: 3px; }  .row-item h3 a { position: static; color: inherit; text-decoration: none; } .row-item h3 a::after { content: ""; position: absolute; inset: 0; } .row-item p { grid-column: 1; margin: 0; color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-body);  min-block-size: calc(var(--row-sub-lines, 0) * 1lh); } .row-item-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--label); font-size: var(--type-meta); } .row-item-meta span { display: inline-flex; align-items: center; gap: 6px; }  [dir="ltr"] .foot-contact, .foot-contact { align-items: center; } [dir="ltr"] .foot-contact { flex-direction: row; justify-content: flex-start; } .row-item-meta i.ph { color: var(--icon); font-size: var(--ic-sm); } i.row-item-action { grid-column: 2; grid-row: 1 / -1; align-self: center; color: var(--ink); font-size: var(--ic-md); transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }  .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) i.row-item-action { color: var(--brand-white); } .pad--inverse .row-item { background: var(--card-dark); } .pad--inverse .row-item::before { --wipe-fill: var(--card-dark-hover); } .pad--inverse .row-item h3 { color: var(--brand-white); } .pad--inverse i.row-item-action { color: var(--brand-white); } .pad--inverse .row-item p, .pad--inverse .row-item-meta { color: var(--muted-on-dark); }  .row-list--downloads i.row-item-action { display: inline-flex; align-items: center; gap: 10px; font-size: var(--type-meta); } .row-list--downloads .row-item-action i.ph { font-size: var(--ic-md); }  .row-item--numbered { grid-template-columns: auto minmax(0, 1fr) auto; padding-block: clamp(24px, 2.4vw, 32px); } .row-item-num { grid-column: 1; grid-row: 1 / -1; align-self: center; color: var(--figure); font-size: var(--figure-size); font-weight: 700; line-height: 1; } .row-item--numbered h3, .row-item--numbered .row-item-meta { grid-column: 2; } .row-item--numbered i.row-item-action { grid-column: 3; } .pad--inverse .row-item-num { color: var(--figure-on-dark); }  .logo-wall { display: grid; grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }  .logo-tile { position: relative; overflow: hidden; display: grid;  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; padding: clamp(20px, 2.2vw, 32px); aspect-ratio: var(--media-card); background: var(--surface-sunken); border-radius: var(--r); } .pad--sunken .logo-tile { background: var(--surface-raised); }  .logo-tile img, .logo-tile figcaption { position: relative; z-index: 1; }  .logo-tile img { inline-size: 100%; block-size: 100%; align-self: stretch; justify-self: stretch; object-fit: contain; }  .logo-tile figcaption { margin-block-start: 12px; color: var(--label); font-size: var(--type-meta); text-align: center; } .logo-tile--captioned { grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: auto; place-items: center; } .pad--inverse .logo-tile { background: var(--card-dark); } .pad--inverse .logo-tile figcaption { color: var(--label-on-dark); }  .people-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 34px); } .person { display: flex; flex-direction: column; gap: 16px; } .person-photo { overflow: hidden; border-radius: var(--r); aspect-ratio: var(--media-square); background: var(--surface-sunken); } .person-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; } .person h3 { margin: 0; font-size: var(--type-label); line-height: var(--leading-label); color: var(--ink); } .person-role { color: var(--label); font-size: var(--type-meta);  min-block-size: calc(2 * 1lh); } .person p { margin: 0; color: var(--muted); }  .person-photo--pending { display: grid; place-items: center; color: var(--pending); font-size: var(--ic-xl); }  .person-rows { display: flex; flex-direction: column; gap: clamp(56px, 6vw, 96px); } .person-rows .split { grid-template-columns: min(420px, 42%) minmax(0, 1fr); align-items: center; gap: 0; } .person-rows .split-media { aspect-ratio: var(--media-square); }  .person-rows .split-ribbon { display: none; }  .split-media-pending { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r); background: var(--brand-razeen); color: var(--ink);  font-size: clamp(3.5rem, 9vw, 5.5rem); } .split-media-pending i.ph { inline-size: 1em; block-size: 1em; }  .person-rows .split-copy { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; justify-self: start; gap: 12px; inline-size: min(100%, 680px); min-block-size: 260px; padding: clamp(28px, 3vw, 48px); background: var(--surface-sunken); border-radius: var(--r); } .pad--sunken .person-rows .split-copy { background: var(--surface-raised); }  .person-rows .split-copy::after { content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; inline-size: var(--card-mark-panel-inline-size, 34%); block-size: var(--card-mark-panel-block-size, auto); aspect-ratio: var(--card-mark-panel-ratio, var(--photo-mark-p43-ratio)); background: var(--card-mark-art) var(--card-mark-panel-repeat, no-repeat) var(--card-mark-panel-anchor, right bottom) / var(--card-mark-panel-size, 100% 100%); opacity: var(--card-mark-opacity); pointer-events: none; }  [dir="rtl"] .person-rows .split-copy::after { right: auto; left: 0; transform: scaleX(var(--card-mark-flip-rtl)); }  .person-rows .split-copy > * { position: relative; z-index: 1; }  .person-rows .split-copy h3 { margin: 0; font-size: var(--type-headline); line-height: var(--leading-headline); font-weight: 700; color: var(--ink); } .person-rows .split-copy .person-role { margin: 0; min-block-size: 0; } .person-rows .split-copy p:not(.person-role) { margin: 0; color: var(--muted); }  .photo-band > .wrap, .cta-band > .wrap .cta-inner { background: var(--scrim-glass); } .photo-band > .wrap, .cta-band > .wrap .cta-inner { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(112%); backdrop-filter: blur(var(--glass-blur)) saturate(112%); color: var(--brand-white); border-radius: var(--r); padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px); max-inline-size: min(var(--max), 94%); }  .subpage-hero-media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-glass); pointer-events: none; }  .subpage-hero--photo:not(.subpage-hero--error)::before, .subpage-hero--photo:not(.subpage-hero--error)::after { content: ""; display: block; position: absolute; z-index: 0; inline-size: var(--hero-mark-inline-size); block-size: var(--hero-mark-block-size); aspect-ratio: var(--hero-mark-ratio); opacity: var(--hero-mark-opacity); transform: none; mask: none; -webkit-mask: none; pointer-events: none; }  .subpage-hero--photo:not(.subpage-hero--error)::before { inset: var(--hero-mark-inset-start); background: var(--hero-mark-art-start) var(--hero-mark-repeat-start) var(--hero-mark-anchor-start) / var(--hero-mark-size-start); } .subpage-hero--photo:not(.subpage-hero--error)::after { inset: var(--hero-mark-inset-end); background: var(--hero-mark-art-end) var(--hero-mark-repeat-end) var(--hero-mark-anchor-end) / var(--hero-mark-size-end); }  .cta-band { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--sec-pad); padding-inline: 0; background: var(--surface-inverse-soft); color: var(--brand-white); }  .cta-band::before { content: ""; position: absolute; z-index: -2; inset: 0; background-image: var(--cta-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; }  :is(.cta, .cta-band, .photo-band) > .band-photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }  :is(.cta, .cta-band, .photo-band) > .band-photo--focus-left { object-position: left center; } :is(.cta, .cta-band, .photo-band) > .band-photo--focus-right { object-position: right center; }  @media (max-width: 1200px) { :is(.cta, .cta-band, .photo-band):has(> .band-photo--focus-left), :is(.cta, .cta-band, .photo-band):has(> .band-photo--focus-right) { padding-block-start: 230px; } }   .cta-glass { position: absolute; z-index: 0; inset: 0; overflow: hidden; opacity: .28; pointer-events: none; }  .section-glass, .news-glass, .ribbon-frame, .split-ribbon { display: none !important; }  .needs-route-media::before, .needs-route-media::after, .project-card-media::before, .project-card-media::after { display: none !important; } .cta-glass { opacity: 1; }  .cta-glass::before, .cta-glass::after { content: ""; position: absolute; inline-size: var(--photo-mark-width-hero); aspect-ratio: var(--band-mark-ratio); opacity: var(--band-mark-opacity); pointer-events: none; }  .cta-glass::before { inset: 0 auto auto 0; background: var(--band-mark-art-start) no-repeat left top / 100% 100%; } .cta-glass::after { inset: auto 0 0 auto; background: var(--band-mark-art-end) no-repeat right bottom / 100% 100%; } .cta-glass span { display: none; position: absolute; top: var(--identity-band-top); block-size: var(--identity-band-height); inline-size: var(--identity-band-width); border: var(--identity-band-border) solid var(--identity-mark); border-radius: var(--r); background: color-mix(in srgb, var(--identity-mark) var(--identity-band-fill), 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(--identity-mark) 55%, transparent); } @media (max-width: 920px) { .cta-glass { display: none; } } .cta-band > .wrap { position: relative; z-index: 1; } .cta-inner { text-align: center;  margin-inline: auto; } .cta-inner .kicker { justify-content: center; margin-block-end: 30px; color: var(--brand-white); } .cta-inner h2 { margin: 0; color: var(--brand-white); }   .cta-inner > p { max-inline-size: 56ch; margin: 18px auto 0; font-size: var(--type-lead); line-height: var(--leading-lead); color: color-mix(in srgb, var(--brand-white) 82%, transparent); }  .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }  .cta-inner > .cta-actions { margin-block-start: 54px; }   .cta-action { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-block-size: 48px; padding: 0 22px; 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 { border: 1px solid var(--brand-white); background: 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); }  .cta-action.cta-action--ghost:is(:hover, :focus-visible, :active), #contact .cta-action.cta-action--ghost:is(:hover, :focus-visible, :active) { background-color: transparent; } .cta-action.cta-action--ghost::before, #contact .cta-action.cta-action--ghost::before, :is(.hero, .subpage-hero--carousel) .hero-content-copy .btn.btn-ghost::before { content: ""; display: block; opacity: 1; position: absolute; z-index: -1; inset: -1px -40%; background: var(--accent-fill); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); transform: translate3d(-78%, 0, 0); transition: transform var(--dur-slow) var(--ease-out); pointer-events: none; } [dir="rtl"] .cta-action.cta-action--ghost::before, [dir="rtl"] #contact .cta-action.cta-action--ghost::before, [dir="rtl"] :is(.hero, .subpage-hero--carousel) .hero-content-copy .btn.btn-ghost::before { transform: translate3d(78%, 0, 0); } .cta-action.cta-action--ghost:is(:hover, :focus-visible, :active)::before, #contact .cta-action.cta-action--ghost:is(:hover, :focus-visible, :active)::before, :is(.hero, .subpage-hero--carousel) .hero-content-copy .btn.btn-ghost:is(:hover, :focus-visible, :active)::before { transform: none; } @media (prefers-reduced-motion: reduce) { .cta-action.cta-action--ghost::before, #contact .cta-action.cta-action--ghost::before, :is(.hero, .subpage-hero--carousel) .hero-content-copy .btn.btn-ghost::before { transition: none; } }  i.cta-action-mark { flex: 0 0 auto; font-size: var(--ic-lg); color: var(--brand-white); }  .cta-action span { flex: 0 1 auto; } i.cta-arrow { flex: 0 0 auto; font-size: var(--ic-sm); transition: transform var(--dur-base) var(--ease-out); }  .btn-company-mark { display: inline-block; flex: 0 0 auto; inline-size: var(--ic-md); block-size: var(--ic-md); background: var(--brand-white); -webkit-mask: url("../images/brand/sdeira-mark.svg?v=12a5a1af82a32441") center / contain no-repeat; mask: url("../images/brand/sdeira-mark.svg?v=12a5a1af82a32441") center / contain no-repeat; }  .cta-band--surface { background: var(--surface-sunken); } .cta-band--surface::before, .cta-band--surface::after { content: none; }  .cta-band--surface > .wrap .cta-inner { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .cta-band--surface .cta-inner :is(h2, .kicker) { color: var(--ink); } .cta-band--surface .cta-inner > p { color: var(--muted); }   .photo-band { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: center; min-block-size: clamp(360px, 38vw, 520px); padding-block: clamp(40px, 5vw, 64px); padding-inline: 0; background: var(--surface-inverse-soft); color: var(--brand-white); } .photo-band::before { content: ""; position: absolute; z-index: -2; inset: 0; background-image: var(--photo-band-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; }  .photo-band > .wrap { position: relative; z-index: 1; inline-size: 100%; display: flex; flex-direction: column; gap: 32px; }  .photo-band.section--glass { padding-block: var(--sec-pad); } .photo-band-top .kicker { color: var(--brand-white); } .photo-band-top h2 { margin: 0; max-inline-size: 60ch; color: var(--brand-white); }  .photo-band-lead { max-inline-size: 60ch; margin: 0; font-size: var(--type-lead); line-height: var(--leading-lead); color: color-mix(in srgb, var(--brand-white) 88%, transparent); } .photo-band-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sec-head-gap); } .photo-band-column h3 { margin: 0 0 12px; color: var(--brand-white); font-size: var(--type-card); } @media (max-width: 980px) { .photo-band-columns { grid-template-columns: 1fr; } }  .photo-band-action { align-self: flex-start; }  .photo-band--wide .photo-band-top h2, .photo-band--wide .photo-band-lead { max-inline-size: var(--photo-band-copy-measure); } .photo-band--wide > .wrap, .photo-band--columns > .wrap { gap: var(--photo-band-wide-gap); }  .photo-band--wide, .photo-band--columns { min-block-size: var(--photo-band-wide-min-block); } .photo-band--columns .photo-band-copy { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--photo-band-wide-gap); max-inline-size: 100%; } .photo-band--columns .photo-band-lead { max-inline-size: none; } .cta-action > .cta-action-mark--mobile { display: none; } @media (max-width: 640px) {  :is(.cta-band, #contact.cta) > .wrap { width: 100%; max-inline-size: none; padding-inline: 0; } .cta-band > .wrap .cta-inner, #contact.cta .cta-inner, .photo-band > .wrap { width: 100%; max-width: none; max-inline-size: none; padding-inline: var(--mobile-panel-inset); } :is(.cta-band, #contact.cta, .photo-band) > .wrap { width: calc(100% - 2 * var(--mobile-panel-inset)); margin-inline: auto; } :is(.cta-band, #contact.cta) .cta-actions { display: grid; width: 100%; margin-block-start: var(--cta-mobile-heading-gap); grid-template-columns: minmax(0, 1fr); gap: var(--cta-mobile-action-gap); } :is(.cta-band, #contact.cta) .cta-action { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--cta-mobile-action-gap); padding: var(--cta-mobile-action-padding); height: auto; text-align: start; } :is(.cta-band, #contact.cta) .cta-action > span { min-width: 0; max-width: none; } .cta-action > .cta-action-mark--mobile { display: inline-block; } }  .photo-band .sec-head h2, .photo-band .sec-head > p, .photo-band .sec-head .kicker { color: var(--brand-white); } .step-list-photo .step-chapter { background: var(--surface-raised); }  .photo-band .stat-strip { background: var(--glass-card-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); backdrop-filter: blur(var(--glass-blur)) saturate(120%); }  .photo-band .stat-strip .stat { background: transparent; } .photo-band .stat b, .photo-band .stat > span, .photo-band .stat-strip--facts .stat > span { color: var(--brand-white); } .photo-band :is(.stat-figure-prefix, .stat-figure-suffix) { color: var(--muted-on-dark); } .photo-band .stat i.ph, .photo-band .stat-strip--facts-icons .stat > i.ph { color: var(--figure-on-dark); } .photo-band .stat p { color: var(--muted-on-dark); } .photo-band .stat time { color: var(--label-on-dark); }  .photo-band .stat + .stat::before { background: var(--figure-on-dark); }  .step-list--chapters-dark .step-chapter { background: var(--glass-card-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); backdrop-filter: blur(var(--glass-blur)) saturate(120%); }  .step-list--chapters-dark .step-chapter-header { background: transparent; } .step-list--chapters-dark .step-chapter-header h3, .step-list--chapters-dark .step h4 { color: var(--brand-white); } .step-list--chapters-dark .step-chapter-header p, .step-list--chapters-dark .step-mark { color: var(--figure-on-dark); } .step-list--chapters-dark .step p { color: var(--muted-on-dark); } .step-list--chapters-dark .step-chapter-band { background: var(--line-on-dark); }  .step-list-photo .step-list--divided { background: var(--glass-card-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); backdrop-filter: blur(var(--glass-blur)) saturate(120%); } .step-list-photo .step-list--divided .step { background: transparent; } .step-list-photo .step-list--divided .step h3 { color: var(--brand-white); } .step-list-photo .step-list--divided .step p { min-block-size: 2lh; color: var(--muted-on-dark); } .step-list-photo .step-list--divided .step-mark { color: var(--figure-on-dark); } .step-list-photo .step-list--divided .step:nth-child(3n + 2)::before, .step-list-photo .step-list--divided .step:nth-child(3n)::before { background: var(--line-on-dark); }  .spec-table-scroll { overflow-x: auto; } .spec-table { inline-size: 100%; border-collapse: collapse; text-align: start; } .spec-table th, .spec-table td { padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.2vw, 20px); vertical-align: top; }  .spec-table tbody tr:nth-child(odd) { background: var(--surface-raised); } .spec-table tbody tr:first-child :is(th, td):first-child { border-start-start-radius: var(--r); } .spec-table tbody tr:first-child :is(th, td):last-child { border-start-end-radius: var(--r); } .spec-table tbody tr:last-child :is(th, td):first-child { border-end-start-radius: var(--r); } .spec-table tbody tr:last-child :is(th, td):last-child { border-end-end-radius: var(--r); }  .pad--sunken .spec-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-raised) 50%, var(--surface-sunken)); } .spec-table thead th { color: var(--label); font-size: var(--type-meta); font-weight: 700; white-space: nowrap;  text-align: start; } .spec-table tbody th { color: var(--ink); font-size: var(--type-body); font-weight: 700;  text-align: start; } .spec-table td { color: var(--muted); } .pad--inverse .spec-table tbody tr:nth-child(odd) { background: var(--card-dark); } .pad--inverse .spec-table thead th { color: var(--label-on-dark); } .pad--inverse .spec-table tbody th { color: var(--brand-white); } .pad--inverse .spec-table td { color: var(--muted-on-dark); }   .gallery-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: var(--page-gutter); scrollbar-width: thin; scrollbar-color: var(--accent) var(--surface-sunken); cursor: grab; -webkit-user-select: none; user-select: none; } .gallery-scroll:active, .gallery-scroll.is-dragging { cursor: grabbing; }  .gallery-scroll.is-dragging { scroll-snap-type: none; } .gallery-scroll::-webkit-scrollbar { height: 6px; } .gallery-scroll::-webkit-scrollbar-track { background: var(--surface-sunken); } .gallery-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: var(--r); } .gallery-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .gallery { display: flex; gap: clamp(16px, 2vw, 28px); padding-inline: var(--page-gutter);  width: max-content; } .gallery-item { position: relative; display: block; overflow: hidden; padding: 0; border: 0; border-radius: var(--r); aspect-ratio: var(--media-wide); background: var(--surface-sunken); cursor: pointer; flex: 0 0 auto;  inline-size: min(72vw, 640px); scroll-snap-align: start; } .gallery-item img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.94) contrast(1.04); transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out);  pointer-events: none; } .gallery-item:is(:hover, :focus-visible) img { transform: scale(var(--zoom)); filter: saturate(1) contrast(1.03); } .lightbox { inline-size: min(94vw, 1200px); max-block-size: 92vh; padding: 0; border: 0; border-radius: var(--r); background: var(--surface-inverse); color: var(--brand-white); overflow: hidden; } .lightbox::backdrop { background: var(--scrim-hero); } .lightbox-figure { margin: 0; display: grid; gap: 0; } .lightbox-figure img { inline-size: 100%; block-size: auto; max-block-size: 78vh; object-fit: contain; background: var(--brand-black); } .lightbox-figure figcaption { padding: 14px 20px; color: var(--muted-on-dark); font-size: var(--type-meta); } .lightbox-bar { position: absolute; top: 0; right: 0; display: flex; gap: 4px; padding: 10px; } .lightbox-btn { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: var(--r); background: var(--scrim-control); color: var(--brand-white); font-size: var(--ic-md); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .lightbox-btn:is(:hover, :focus-visible) { background: var(--brand-sweihan); }  .map-panel { position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface-sunken); } .map-stage { position: relative; aspect-ratio: var(--media-card); } .map-stage :is(img, iframe) { inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; } .map-pin { position: absolute; top: var(--pin-y); left: var(--pin-x); transform: translate(-50%, -100%); display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; z-index: 2; border: 0; border-radius: var(--r); background: var(--scrim-control); color: var(--brand-white); font-size: var(--ic-lg); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .map-pin:is(:hover, :focus-visible, [aria-expanded="true"]) { background: var(--accent-fill); } .map-card { position: absolute; inset-block-end: 16px; inset-inline-start: 16px; max-inline-size: min(340px, calc(100% - 32px)); padding: 18px 20px; border-radius: var(--r); background: var(--scrim-control); color: var(--brand-white); z-index: 3; } .map-card[hidden] { display: none; } .map-card h3 { margin: 0 0 6px; color: var(--brand-white); font-size: var(--type-label); line-height: var(--leading-label); } .map-card p { margin: 0; color: var(--brand-white); font-size: var(--type-meta); } .map-proximity { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 18px); margin-block-start: var(--space-component); color: var(--label); font-size: var(--type-meta); } .map-proximity span { display: inline-flex; align-items: center; gap: 6px; } .map-proximity i.ph { color: var(--accent-strong); font-size: var(--icon-inline); }  .faq { display: grid; gap: 8px; max-width: 860px; margin-inline: auto; }   .faq-item { position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface-sunken); transition: background var(--dur-fast) var(--ease-out); } .pad--sunken .faq-item { background: var(--surface-raised); } .faq-item[open] { background: var(--surface-sunken); } .pad--sunken .faq-item[open] { background: var(--surface-raised); } .faq-item::after { content: ""; position: absolute; inset: auto 0 0 auto; z-index: 0; inline-size: var(--card-mark-panel-inline-size, auto); block-size: var(--card-mark-panel-block-size, 90%); aspect-ratio: var(--card-mark-panel-ratio, var(--photo-mark-p43-ratio)); background: var(--card-mark-art) var(--card-mark-panel-repeat, no-repeat) var(--card-mark-panel-anchor, right bottom) / var(--card-mark-panel-size, 100% 100%); opacity: var(--card-mark-opacity); pointer-events: none; }  html[dir="rtl"] .faq-item::after { inset: auto auto 0 0; transform: scale(var(--card-mark-flip-rtl), 1); } .faq-item > summary, .faq-item > :not(summary) { position: relative; z-index: 1; } .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px); color: var(--ink); font-size: var(--type-body); font-weight: 700; cursor: pointer; list-style: none; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary i.ph { flex: 0 0 auto; color: var(--icon); font-size: var(--ic-md); transition: transform var(--dur-base) var(--ease-out); } .faq-item[open] > summary i.ph { transform: rotate(180deg); } .faq-item[open] > summary { color: var(--accent-text); }  .faq-item:not([open]) > .faq-answer { display: grid; } .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); } .faq-item[open] > .faq-answer { grid-template-rows: 1fr; } .faq-answer-inner { overflow: hidden; min-block-size: 0; padding: 0 clamp(18px, 2vw, 24px) clamp(18px, 2vw, 26px); color: var(--muted); max-width: 68ch; opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .faq-item[open] > .faq-answer > .faq-answer-inner { opacity: 1; transform: translateY(0); } .faq-answer-inner p { margin: 0; } .faq-answer-inner > * + * { margin-block-start: 14px; } @media (prefers-reduced-motion: reduce) { .faq-answer, .faq-answer-inner { transition: none; } } .pad--inverse .faq-item { background: var(--card-dark); } .pad--inverse .faq-item[open] { background: var(--card-dark-hover); } .pad--inverse .faq-item > summary { color: var(--brand-white); } .pad--inverse .faq-answer-inner { color: var(--muted-on-dark); }  .contact-details { display: grid; gap: clamp(16px, 1.8vw, 24px); } .contact-line { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 14px; } .contact-line > i.ph { grid-row: 1 / span 2; align-self: center; color: var(--icon); font-size: var(--ic-md); } .contact-line dt { color: var(--label); font-size: var(--type-meta); } .contact-line dd { margin: 0; color: var(--ink); } .contact-line a { color: inherit; text-decoration: none; } .contact-line a:is(:hover, :focus-visible) { color: var(--link-hover); } .pad--inverse .contact-line > i.ph { color: var(--icon-on-dark); } .pad--inverse .contact-line dt { color: var(--label-on-dark); } .pad--inverse .contact-line dd { color: var(--brand-white); } .pad--inverse .contact-line a:is(:hover, :focus-visible) { color: var(--link-hover-on-dark); }  .org-diagram { display: grid; justify-items: center; inline-size: 100%; gap: 0; }  .org-root { display: grid; place-items: center; min-inline-size: 220px; padding: 18px 28px; border-radius: var(--r); background: var(--surface-inverse); color: var(--brand-white); font-family: var(--font-display); font-size: var(--type-label); line-height: var(--leading-label); font-weight: 500; text-align: center; }  .org-drop { inline-size: 2px; block-size: 36px; background: var(--line); } .org-tier { position: relative; display: grid; grid-template-columns: repeat(var(--grid-cols, 5), minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); inline-size: 100%;  align-items: start; }  .org-tier::before { content: ""; position: absolute; z-index: 0; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: var(--line); } .org-branch { position: relative; display: grid; justify-items: center; align-content: start; gap: 0; }  .org-sector { display: grid; place-items: center; inline-size: 100%; min-block-size: 64px; padding: 14px 18px; border-radius: var(--r);  background: var(--surface-sunken); color: var(--ink); font-size: var(--type-action); font-weight: 700; text-align: center; } .pad--sunken .org-sector { background: var(--surface-raised); }  .org-companies { display: grid;  gap: 12px; inline-size: 100%; margin-block-start: 0; } .org-company { position: relative; isolation: isolate; display: grid; place-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--r);  background: var(--surface-base); color: var(--ink); font-size: var(--type-meta); text-align: center; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }  a.org-company::before { content: ""; position: absolute; z-index: -1; inset: 0; --wipe-p: 0%; background-image: linear-gradient(var(--route-card-wipe-angle), var(--accent-fill) 0 var(--wipe-p), transparent var(--wipe-p) 100%); transition: --wipe-p var(--dur-slow) var(--ease-out); pointer-events: none; } a.org-company:is(:hover, :focus-visible)::before { --wipe-p: 100%; } .org-company > * { position: relative; z-index: 1; } .org-company-mark { display: grid; place-items: center; inline-size: 100%; block-size: 2lh; }  .org-company-logo { inline-size: auto; block-size: 100%; min-inline-size: 0; min-block-size: 0; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; transition: filter var(--dur-slow) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .org-company-name { font-size: var(--type-meta); line-height: var(--leading-meta); }  a.org-company:is(:hover, :focus-visible) .org-company-logo { filter: brightness(0) invert(1); } a.org-company:is(:hover, :focus-visible) { color: var(--link-hover); }  span.org-company { color: var(--muted); }  .pad--sunken .org-company { background: var(--surface-base); } .pad--sunken a.org-company:is(:hover, :focus-visible) { background: var(--surface-base); }  .org-drop--company { block-size: 24px; }  .is-pending { color: var(--pending); font-style: normal; }  :is(.pad--inverse, .photo-band) .is-pending { color: var(--pending-on-dark); }    [dir="rtl"] .split-ribbon::after { left: auto; right: 8%; }  [dir="rtl"] .stat + .stat::before { left: auto; right: calc(clamp(18px, 1.9vw, 30px) / -2); } [dir="rtl"] .step-list--divided .step::before { left: auto; right: 0; }  [dir="rtl"] .step-chapter-header p { text-align: right; }  [dir="rtl"] .step-list--timeline .step::after { right: auto; left: calc(clamp(28px, 3vw, 46px) * -1 - 5px); } [dir="rtl"] .step-list--timeline .step:nth-child(even)::after { left: auto; right: calc(clamp(28px, 3vw, 46px) * -1 - 5px); }   @media (max-width: 1180px) {  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }  .stat-strip:not(.stat-strip--facts):has(> .stat:nth-child(3):last-child) > .stat:last-child { grid-column: 1 / -1; } .stat + .stat::before { content: none; } .stat:nth-child(even)::before { content: ""; }  .logo-wall { grid-template-columns: repeat(min(var(--grid-cols, 4), 3), minmax(0, 1fr)); } }  @media (max-width: 980px) {  .org-tier { grid-template-columns: repeat(2, minmax(0, 1fr)); } .org-tier::before { content: none; }  .split { grid-template-columns: minmax(0, 1fr); }  .split--logo-wide { display: flex; flex-direction: column; gap: var(--sec-head-gap); } .split--logo-wide .split-media { order: 1; } .split--logo-wide .split-copy { display: contents; } .split--logo-wide .split-copy > h2 { order: 0; } .split--logo-wide .split-copy > :is(p, .cta-actions) { order: 2; }  .split--logo-wide .split-copy > .kicker { order: 0; align-self: flex-start; } .split--media-dominant { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "media" "body" "actions"; row-gap: var(--sec-head-gap); } [dir="rtl"] .split--media-dominant { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "media" "body" "actions"; } .split--media-dominant .split-media { justify-self: start; } .split--media-dominant .split-copy-body, .split--media-dominant .split-media { margin-block-start: 0; }  .split--logo-body { grid-template-areas: "kicker" "heading" "body" "media" "actions"; } .split--logo-body .split-media { justify-self: start; } .split--media-dominant-no-actions { grid-template-areas: "heading" "media" "body"; } [dir="rtl"] .split--media-dominant-no-actions { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "media" "body"; } .split--heading-logo .split-heading { grid-template-columns: minmax(0, 1fr); row-gap: var(--sec-head-gap); } .split--heading-logo .split-heading > .split-logo-badge--heading { grid-column: 1; grid-row: auto; align-self: start; justify-self: start; } .split--media-dominant-no-actions .split-copy-body, .split--media-dominant-no-actions .split-media { align-self: start; }  .split--logo-wide .split-media { justify-self: start; inline-size: min(100%, 240px); min-block-size: 40px; } .split--logo-wide .split-media img { inline-size: 100%; block-size: 100%; object-fit: contain; } .split--logo-wide.split--logo .split-media { min-block-size: 0; } .split--logo-wide.split--logo .split-media img { inline-size: auto; block-size: auto; border-radius: 0; min-block-size: 0; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; } .split--reverse .split-media { order: 0; }  .split-badge, .split-logo-badge { inset-inline-start: 0; max-inline-size: min(86%, 340px); }  [dir="rtl"] .split-badge { inset-inline-start: auto; left: 0; right: auto; }  .person-rows .split { grid-template-columns: minmax(0, 1fr); }  .sec-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }  .icon-grid { grid-template-columns: repeat(min(var(--grid-cols, 3), 2), minmax(0, 1fr)); } .icon-grid--balanced-five .icon-item, .icon-grid--balanced-five .icon-item:nth-child(4), .icon-grid--balanced-five .icon-item:nth-child(5) { grid-column: auto; } .icon-grid--balanced-five-stretch .icon-item, .icon-grid--balanced-five-stretch .icon-item:nth-child(4), .icon-grid--balanced-five-stretch .icon-item:nth-child(5) { grid-column: auto; }  .news-list--cols { grid-template-columns: repeat(min(var(--grid-cols), 2), minmax(0, 1fr)); }  .people-grid { grid-template-columns: repeat(min(var(--grid-cols, 3), 2), minmax(0, 1fr)); } .step-list--compact.step-list--divided { grid-template-columns: repeat(2, minmax(0, 1fr)); }  }  @media (max-width: 860px) {  .step-list { grid-template-columns: minmax(0, 1fr); }  .step-list--divided .step:nth-child(3n + 2)::before, .step-list--divided .step:nth-child(3n)::before { content: none; } .step-list--divided .step:nth-child(even) { background: var(--surface-raised); } .step-list-photo .step-list--divided .step:nth-child(even) { background: transparent; } .step-list--timeline::before { left: 5px; } .step-list--timeline .step, .step-list--timeline .step:nth-child(even) { inline-size: auto; margin-inline-start: clamp(26px, 6vw, 40px); } .step-list--timeline .step::after, .step-list--timeline .step:nth-child(even)::after { right: auto; left: calc(clamp(26px, 6vw, 40px) * -1 - 5px); } } @media (max-width: 860px) { [dir="rtl"] .step-list--timeline::before { left: auto; right: 5px; } [dir="rtl"] .step-list--timeline .step::after, [dir="rtl"] .step-list--timeline .step:nth-child(even)::after { left: auto; right: calc(clamp(26px, 6vw, 40px) * -1 - 5px); } }  @media (max-width: 640px) {  .org-tier { grid-template-columns: minmax(0, 1fr); } .org-drop { block-size: 20px; } .stat-strip { grid-template-columns: minmax(0, 1fr); } .stat:nth-child(even)::before { content: none; } .stat:nth-child(even) { background: var(--surface-sunken); } .pad--inverse .stat:nth-child(even) { background: var(--card-dark); } .icon-grid { grid-template-columns: minmax(0, 1fr); } .people-grid { grid-template-columns: minmax(0, 1fr); } .news-list--cols { grid-template-columns: minmax(0, 1fr); } .step-chapter { grid-template-columns: minmax(0, 1fr); } .step-chapter-header { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 20px; }  .step-chapter-header p { justify-self: end; } [dir="rtl"] .step-chapter-header p { justify-self: start; } .step-chapter-band { inset-inline-end: auto; top: auto; bottom: calc(var(--step-separator-thickness) / -2); left: 50%; transform: translateX(-50%) rotate(var(--brand-stripe-angle)); } .step-list--chapters .step { align-content: start; padding: 22px 18px; text-align: center; }   .map-card { position: static; max-inline-size: none; border-start-start-radius: 0; border-start-end-radius: 0; } .map-proximity { padding-inline-start: calc( var(--assistant-panel-offset-inline-mobile) + var(--assistant-launcher-target-mobile) ); }  .spec-table thead { display: none; } .spec-table tr { display: grid; padding-block: 10px; } .spec-table th, .spec-table td { padding-block: 4px; } .spec-table tbody tr { padding: 14px 16px; border-radius: var(--r); } .spec-table td::before { content: attr(data-label) ": "; color: var(--label); font-size: var(--type-meta); font-weight: 700; } .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }  .row-item { grid-template-columns: minmax(0, 1fr); } .row-list--square { grid-template-columns: minmax(0, 1fr); } .row-list--square .row-item { aspect-ratio: auto; } i.row-item-action { grid-column: 1; grid-row: auto; justify-self: start; }  .row-list:not(.row-list--square) > .row-item:has(> h3:first-child + i.row-item-action:last-child) { grid-template-columns: minmax(0, 1fr) auto; } .row-list:not(.row-list--square) > .row-item:has(> h3:first-child + i.row-item-action:last-child) > i.row-item-action { grid-column: 2; grid-row: 1; justify-self: end; }  .row-item--numbered { grid-template-columns: minmax(0, 1fr); } .row-item-num, .row-item--numbered h3, .row-item--numbered .row-item-logo, .row-item--numbered .row-item-meta, .row-item--numbered i.row-item-action { grid-column: 1; grid-row: auto; } .row-item-num { justify-self: start; } .row-list--company-lines.row-list--company-branded .row-item { grid-template-columns: minmax(0, 1fr); row-gap: 14px; } .row-list--company-lines.row-list--company-branded .row-item > :is(.row-item-logo, .row-item-copy, .row-item-action-wrap) { grid-column: 1; } .row-list--company-lines.row-list--company-branded .row-item-logo { justify-self: start; }  .cta-actions { flex-direction: column; align-items: center; } .split-copy .cta-actions { align-items: flex-start; }  .step { gap: 4px 14px; } }  .sector-grid--content { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, .55vw, 12px); } .sector-grid--content .sector-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-inline-size: 0; min-block-size: clamp(210px, 24svh, 260px); overflow: hidden; border-radius: var(--r); background: var(--surface-inverse); color: var(--brand-white); } .sector-grid--content .sector-card-media, .sector-grid--content .sector-card-img, .sector-grid--content .sector-card-veil { position: absolute; inset: 0; } .sector-grid--content .sector-card-media { z-index: -1; } .sector-grid--content .sector-card-img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.9) brightness(.9); transition: transform var(--dur-slow) var(--ease-out); } .sector-grid--content .sector-card-veil { background: var(--scrim-hero); transition: opacity var(--dur-base) var(--ease-out); } .sector-grid--content .sector-card-media::after { content: ""; position: absolute; inset: -1px -40%; 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%); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); transform: translate3d(78%, 0, 0); transition: transform var(--dur-slow) var(--ease-out); } .sector-grid--content .sector-card-body { inline-size: 100%; padding: clamp(18px, 2.1vw, 30px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .sector-grid--content .sector-card-mark { display: grid; place-items: center; inline-size: var(--icon-default); block-size: var(--icon-default); border-radius: var(--r); background: color-mix(in srgb, var(--brand-white) 14%, transparent); color: var(--brand-white); } .sector-grid--content .sector-card-mark i.ph { font-size: var(--icon-control); } .sector-grid--content .sector-card-title, .sector-grid--content .sector-card-title a { margin: 0; color: inherit; font-size: var(--type-card); line-height: var(--leading-card); text-decoration: none; } .sector-grid--content .sector-card-sub { min-block-size: calc(var(--card-sub-lines) * 1lh); color: var(--muted-on-dark); font-size: var(--type-body); line-height: var(--leading-body); } .sector-grid--content .sector-card-action { position: static; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--brand-white); font-size: var(--type-action); text-decoration: none; opacity: 0; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }  .sector-grid--content .sector-card-action::before { content: ""; position: absolute; inset: 0; } .sector-grid--content .sector-card:is(:hover, :focus-within) .sector-card-media::after { transform: none; } .sector-grid--content .sector-card:is(:hover, :focus-within) .sector-card-action { opacity: 1; transform: none; } .sector-grid--content .sector-card:focus-within { outline: 3px solid var(--accent-on-dark); outline-offset: -3px; } @media (hover: none), (pointer: coarse) { .sector-grid--content .sector-card-action { opacity: 1; transform: none; } } @media (max-width: 980px) { .sector-grid--content { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .sector-grid--content { grid-template-columns: minmax(0, 1fr); } .sector-grid--content .sector-card { min-block-size: clamp(196px, 58vw, 242px); } } @media (prefers-reduced-motion: reduce) { .sector-grid--content :is(.sector-card-img, .sector-card-veil, .sector-card-media::after, .sector-card-action) { transition: none; } } @media (max-width: 640px) {  .step-list--compact.step-list--divided { grid-template-columns: minmax(0, 1fr); } .pad--inverse .stat:nth-child(even) { background: var(--card-dark-hover); } }  .business-needs-routes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sec-head-gap); margin-block-start: var(--sec-head-gap); } .business-needs-routes .business-needs-route { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(clamp(330px, 40vw, 470px), auto); align-items: center; min-block-size: clamp(330px, 40vw, 470px); color: var(--ink); text-decoration: none; isolation: isolate; } .business-needs-routes .needs-route-media { grid-area: 1 / 1; justify-self: end; align-self: center; position: relative; z-index: 1; display: block; overflow: hidden; inline-size: min(72%, 800px);  aspect-ratio: 16 / 9; background: var(--surface-sunken); border-radius: var(--r); } .business-needs-routes .business-needs-route:nth-child(even) .needs-route-media { justify-self: start; } .business-needs-routes .needs-route-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }  .business-needs-routes .business-needs-route:nth-child(odd) .needs-route-ribbon::after { left: auto; right: 8%; } .business-needs-routes .business-needs-route:nth-child(even) .needs-route-ribbon::after { left: 8%; right: auto; } [dir="rtl"] .business-needs-routes .business-needs-route:nth-child(odd) .needs-route-ribbon::after { left: 8%; right: auto; } [dir="rtl"] .business-needs-routes .business-needs-route:nth-child(even) .needs-route-ribbon::after { left: auto; right: 8%; } .business-needs-routes .needs-route-copy { grid-area: 1 / 1; justify-self: start; direction: inherit; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; align-self: center; inline-size: min(48%, 520px); padding: clamp(28px, 3.4vw, 46px); overflow: hidden; border-radius: var(--r); background: var(--surface-raised); transition: background-color var(--dur-base) var(--ease-out); } .business-needs-routes .business-needs-route:nth-child(even) .needs-route-copy { justify-self: end; }  .needs-route .needs-route-copy::after, .business-needs-routes .needs-route-copy::after { content: ""; position: absolute; z-index: 0; inset: 0; clip-path: none; transform: none; --wipe-p: 0%; --wipe-fill: var(--card-wipe-fill); background-color: transparent; background-image: linear-gradient(var(--route-card-wipe-angle), var(--wipe-fill) 0 var(--wipe-p), transparent var(--wipe-p) 100%); transition: --wipe-p var(--dur-slow) var(--ease-out); pointer-events: none; }  .needs-route:not(:where(.business-needs-route)):where(a[href], :has(a[href])):is(:hover, :focus-within) .needs-route-copy::after { --wipe-p: 100%; } .business-needs-routes .needs-route-copy > :not(.card-chevron) { position: relative; z-index: 2; }  .business-needs-route[href*="eskan"] .needs-route-copy::after { --wipe-fill: var(--brand-eskan-teal-deep); } .business-needs-route[href*="khadamat"] .needs-route-copy::after { --wipe-fill: var(--brand-khadamat-green-deep); } .business-needs-route[href*="zoad"] .needs-route-copy::after { --wipe-fill: var(--brand-zoad-blueberry); } #company-laundry::after, .business-needs-route[href*="your-laundry"] .needs-route-copy::after { --wipe-fill: var(--laundry-promo-fill); } .business-needs-route[href*="eskan"] .card-chevron::after { background-image: url("../images/patterns/eskan-lines.svg?v=38120a19dcf1683e"); } .business-needs-route[href*="khadamat"] .card-chevron::after { background-image: url("../images/patterns/khadamat-lines.svg?v=deea2893504e9ed7"); }   html[dir] .business-needs-route[href*="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; } .business-needs-route[href*="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"] .business-needs-routes .business-needs-route[href*="zoad"] .card-chevron.card-chevron { inset: auto auto 0 0; } html[dir="rtl"] .business-needs-routes .business-needs-route[href*="zoad"] .card-chevron.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%); }  .business-needs-route[href*="your-laundry"] { --card-mark-art: url("../images/patterns/your-laundry-wave.svg?v=d7686ed0ed0635ed"); --card-mark-repeat: repeat-x; --card-mark-anchor: left bottom; --card-mark-size: auto 100%; --card-mark-opacity: .16;  --card-mark-inset: auto 0 0 0; --card-mark-inset-rtl: auto 0 0 0; --card-mark-block-size: 34px;  --card-mark-flip-rtl: 1; --card-mark-host-inset-ltr: 0; --card-mark-host-inset-rtl: 0; --card-mark-host-inline-size: auto; --card-mark-host-block-size: auto; --card-mark-host-ratio: auto; --card-mark-host-max-block: none; }  .business-needs-routes .needs-route-copy > strong { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--type-card); font-weight: 400; line-height: var(--leading-card); text-wrap: balance; }  .business-needs-routes .needs-route-copy > h3 { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--type-card); font-weight: 400; line-height: var(--leading-card); text-wrap: balance; } .business-needs-routes .needs-route-copy > em { margin: 18px 0 0; color: var(--muted); font-size: var(--type-body); font-style: normal; line-height: var(--leading-body); text-wrap: balance; } .business-needs-routes .needs-route-copy > p { margin: 18px 0 0; color: var(--muted); font-size: var(--type-body); font-style: normal; line-height: var(--leading-body); text-wrap: balance; } .business-needs-routes .needs-route-action { align-self: flex-start; margin-block-start: clamp(18px, 2vw, 26px); color: var(--ink); } .business-needs-routes .card-chevron { position: absolute; z-index: 1;  inset: auto;  left: 0; bottom: 0;  block-size: min(80%, 220px); inline-size: auto; aspect-ratio: 434 / 281; opacity: 1; pointer-events: none; transition: transform var(--dur-slow) var(--ease-out); } .business-needs-routes .card-chevron svg { inline-size: 100%; block-size: 100%; overflow: visible; }  [dir="ltr"] .business-needs-routes .card-chevron { left: auto; right: 0; } [dir="ltr"] .business-needs-routes .card-chevron svg { transform: scaleX(-1); } .business-needs-routes .business-needs-route .needs-route-media img { transform: none; } .business-needs-routes .business-needs-route:where(a[href]) .needs-route-copy:is(:hover, :focus-within) .card-chevron, .business-needs-routes .business-needs-route:focus-visible .needs-route-copy .card-chevron {  transform: scale(var(--card-mark-hover-scale)); transform-origin: var(--card-mark-pivot-rtl); }  [dir="ltr"] .business-needs-routes .business-needs-route:where(a[href]) .needs-route-copy:is(:hover, :focus-within) .card-chevron, [dir="ltr"] .business-needs-routes .business-needs-route:focus-visible .needs-route-copy .card-chevron { transform: scale(var(--card-mark-hover-scale)); transform-origin: var(--card-mark-pivot); } .business-needs-routes .business-needs-route:where(a[href]) .needs-route-copy:is(:hover, :focus-within)::after, .business-needs-routes .business-needs-route:focus-visible .needs-route-copy::after { --wipe-p: 100%; } .business-needs-routes .needs-route-copy > :not(.card-chevron) { transition: color var(--dur-slow) var(--ease-out); } .business-needs-routes .business-needs-route:where(a[href]) .needs-route-copy:is(:hover, :focus-within) > :not(.card-chevron), .business-needs-routes .business-needs-route:focus-visible .needs-route-copy > :not(.card-chevron) { color: var(--brand-white); } .business-needs-routes .business-needs-route:where(a[href]) .needs-route-copy:is(:hover, :focus-within) .needs-route-action::after, .business-needs-routes .business-needs-route:focus-visible .needs-route-copy .needs-route-action::after { transform: scaleX(1); } .business-needs-routes .business-needs-route:focus-visible { outline: 2px solid var(--brand-black); outline-offset: 4px; } @media (max-width: 700px) { .business-needs-routes .business-needs-route { display: flex; flex-direction: column; min-block-size: 0; } .business-needs-routes .needs-route-media { inline-size: 100%; aspect-ratio: 16 / 9; } .business-needs-routes .needs-route-copy { inline-size: calc(100% - 36px); margin: -42px auto 0; } } @media (prefers-reduced-motion: reduce) { a.org-company::before { transition: none; } .needs-route .needs-route-copy::after { transition: none; } .business-needs-routes :is(.needs-route-media img, .card-chevron, .needs-route-copy), .business-needs-routes .needs-route-copy::after { transition: none; } }  @media (prefers-reduced-motion: reduce) { .org-company, .row-item, .row-item::before, .row-item .section-glass, .faq-item, i.row-item-action { transition: none; }  .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within)::before { --wipe-p: 100%; }  .cta-arrow { transition: none; } .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) i.row-item-action { transform: none; } .gallery-item img, .faq-item > summary i.ph, .lightbox-btn, .map-pin { transition: none; } .gallery-item:is(:hover, :focus-visible) img { transform: none; } [dir="rtl"] .row-item:where(a[href], :has(a[href])):is(:hover, :focus-within) i.row-item-action { transform: scaleX(-1); } :is(.icon-item--link, .icon-grid--interactive .icon-item), :is(.icon-item--link, .icon-grid--interactive .icon-item)::before, :is(.icon-item--link, .icon-grid--interactive .icon-item) :is(.icon-item-mark, h3, p, .icon-item-action) { transition: none; } :is(.icon-item--link:is(:hover, :focus-visible), .icon-grid--interactive .icon-item:hover)::before { --wipe-p: 100%; } }  .card-scroller { display: flex; gap: clamp(16px, 2vw, 28px); padding-inline: var(--page-gutter);  width: max-content; }  .card-scroller .news-item { flex: 0 0 auto; inline-size: min(88vw, 380px); scroll-snap-align: start; }  .card-scroller-scroll { padding-block: 4px; }  @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-brand .foot-socials { margin-block-start: 20px; } .foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }  .foot-legal-group { display: flex; flex-direction: column; gap: 8px; } .foot-legal-heading { font-family: var(--font-display);  color: var(--brand-white); font-size: var(--type-caption); font-weight: 600; } .foot-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); }  footer { background: var(--scrim-footer); color: color-mix(in srgb, var(--brand-white) 96%, transparent); font-weight: 600; padding-block: 80px max(36px, calc(96px + env(safe-area-inset-bottom))); position: relative; isolation: isolate; overflow: hidden; } footer > .wrap { position: relative; z-index: 1; } .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: right center; } [dir="ltr"] .foot-brand .logo img { object-position: left center; } .foot-brand p { font-weight: 400; font-size: var(--type-body); line-height: var(--leading-body); max-inline-size: 300px; text-wrap: balance; } .foot-col :is(h3, h4) { font-family: var(--font-display); color: var(--brand-razeen); font-size: var(--type-label); line-height: var(--leading-label); margin-bottom: 22px;  font-weight: 700; } .foot-col a, .foot-col .foot-pending { display: block; margin-bottom: 13px; font-size: var(--type-action); font-weight: 400; } .foot-col a { color: var(--brand-white); } .foot-socials a { border: 0; border-radius: var(--r); color: var(--icon-on-dark); background: color-mix(in srgb, var(--brand-white) 8%, transparent); } @media (max-width: 560px) { footer .foot-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .foot-bottom { justify-content: flex-start; } }  .company-grid--content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } .company-grid--content .company-card { position: relative; isolation: isolate; 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; overflow: hidden; background: var(--surface-raised); }  .company-grid--content .company-card { background: var(--surface-sunken); }  .pad--sunken .company-grid--content .company-card { background: var(--surface-raised); }  .company-card::after { content: ""; position: absolute; z-index: 0; inset: 0; --wipe-p: 0%; --wipe-fill: var(--card-wipe-fill); background: linear-gradient( var(--route-card-wipe-angle), var(--wipe-fill) 0 var(--wipe-p), transparent var(--wipe-p) 100%); transition: --wipe-p var(--dur-slow) var(--ease-out); pointer-events: none; } .company-grid--content .company-card::before { display: none; } .company-grid--content .company-card > :not(.card-chevron, .company-num) { position: relative; z-index: 2; } .company-grid--content .company-card .company-num { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .company-grid--content .company-logo { position: relative; z-index: 1; inline-size: 100%; min-block-size: 78px; margin-block-end: 24px; display: flex; align-items: flex-start; gap: 14px; align-self: flex-end; color: var(--company-accent); } .company-grid--content .company-logo svg { inline-size: 54px; block-size: 48px; flex: 0 0 auto; } .company-grid--content .company-logo--eskan { align-items: center; color: var(--brand-black); } .company-grid--content .company-logo--eskan-wordmark { display: grid; gap: 0; color: var(--brand-black); font-family: var(--font-display); font-weight: 600; line-height: .85; } .company-grid--content .company-logo--eskan-wordmark b { font-size: var(--type-feature); font-weight: 600; } .company-grid--content .company-logo--eskan-wordmark small, .company-grid--content .company-card h3 small { display: block; margin-block-start: 7px; color: var(--brand-jais); font-size: var(--type-action); font-weight: 400; line-height: 1; } .company-grid--content .company-logo--image img { inline-size: min(190px, 88%); block-size: 76px; object-fit: contain; object-position: left center; } .company-grid--content .company-logo--zoad img { inline-size: auto; block-size: 64px; align-self: center; }  .company-grid--content .company-card .company-logo--zoad img { filter: none; } .company-grid--content .company-logo--zoad .company-logo-alt { position: absolute; inset-inline-start: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); } .company-grid--content .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within) .company-logo--zoad .company-logo-alt { opacity: 1; } .company-grid--content .company-card h3 { margin: 0; min-block-size: calc(2em + 7px); color: var(--ink); font-size: var(--type-card); line-height: var(--leading-card); } .company-grid--content .company-card p { flex: 1 1 auto; min-block-size: 3.4em; margin: 0; color: var(--muted); font-size: var(--type-body); line-height: var(--leading-body); text-wrap: balance; } .company-grid--content .company-card-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-block-start: 24px; color: var(--label); font-size: var(--type-meta); } .company-grid--content .company-card-meta span { display: inline-flex; align-items: center; gap: 6px; } .company-grid--content .company-card-meta i.ph { color: var(--icon); font-size: var(--ic-sm); } .company-grid--content .company-card .action-link { margin-block-start: 18px; color: var(--ink); font-weight: 700; }  .company-grid--content .company-card .card-chevron { position: absolute; z-index: 1; opacity: 1; transition: transform var(--dur-base) var(--ease-out); } .company-grid--content .company-card .card-chevron svg { inline-size: 100%; block-size: 100%; overflow: visible; } .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within)::after { --wipe-p: 100%; } .company-grid--content .company-card > :not(.action-link):not(.card-chevron):not(.company-logo) { transition: color var(--dur-slow) var(--ease-out); } .company-grid--content .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within) > :not(.action-link):not(.card-chevron):not(.company-logo) { color: var(--brand-white); } .company-grid--content .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within) .company-card-meta i.ph { color: var(--icon-on-dark); } .company-grid--content .company-card .company-logo img { transition: filter var(--dur-slow) var(--ease-out); } .company-grid--content .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within) .company-logo:not(.company-logo--zoad) img { filter: brightness(0) invert(1); }  .company-nav-link:is(:hover, :focus-visible, .active) .company-nav-mark.company-nav-mark--zoad img {  content: url("../images/companies/zoad-logo-hover.svg?v=2febf60aa0c96252"); filter: none; mix-blend-mode: normal; } .company-grid--content .company-card .company-logo--eskan svg { transition: filter var(--dur-slow) var(--ease-out); } .company-grid--content .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within) .company-logo--eskan svg { filter: brightness(0) invert(1); } .company-grid--content .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within) .company-logo--eskan-wordmark, .company-grid--content .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within) .company-logo--eskan-wordmark small, .company-grid--content .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within) > h3 small { color: var(--brand-white); }  .company-grid--content .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within) .company-logo svg { --company-accent: var(--brand-white); } .company-grid--content .company-card:where(a[href], :has(a[href])):is(:hover, :focus-within) .action-link { color: var(--brand-white); } .company-grid--content .company-card:focus-within { outline: 3px solid var(--accent-on-dark); outline-offset: -3px; }  #company-laundry:is(:hover, :focus-within) > :not(.card-chevron):not(.company-logo), .business-needs-routes .business-needs-route[href*="your-laundry"] .needs-route-copy:is(:hover, :focus-within) > :not(.card-chevron), .business-needs-routes .business-needs-route[href*="your-laundry"]:focus-visible .needs-route-copy > :not(.card-chevron) { color: var(--laundry-promo-ink); } #company-laundry:is(:hover, :focus-within) .company-logo img { filter: brightness(0) invert(1); } #company-laundry:focus-within { outline-color: var(--laundry-promo-ink); } #company-laundry:is(:hover, :focus-within) .card-chevron::after, .business-needs-routes .business-needs-route[href*="your-laundry"] .needs-route-copy:is(:hover, :focus-within) .card-chevron::after, .business-needs-routes .business-needs-route[href*="your-laundry"]:focus-visible .needs-route-copy .card-chevron::after { background-image: var(--laundry-promo-wave); opacity: var(--laundry-promo-wave-opacity); } [dir="ltr"] .company-grid--content .company-card .card-chevron svg { transform: scaleX(-1); } [dir="rtl"] .company-grid--content .company-logo--image img { object-position: right center; } @media (hover: none), (pointer: coarse) { .company-grid--content .company-card .action-link { color: var(--ink); } } @media (max-width: 760px) { .company-grid--content { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 4vw, 24px); } } @media (prefers-reduced-motion: reduce) { .company-card::after, .company-grid--content .company-card .card-chevron { transition: none; } .company-grid--content .company-card > :not(.action-link):not(.card-chevron):not(.company-logo), .company-grid--content .company-card .company-logo img, .company-grid--content .company-card .company-logo--eskan svg { transition: none; } }  .org-diagram--model .org-companies { display: flex; flex-wrap: wrap; justify-content: center; } @media (max-width: 760px) { .org-diagram--model .org-tier { grid-template-columns: minmax(0, 1fr); } .org-diagram--model .org-tier::before { content: ""; inset-inline-start: 50%; inset-inline-end: auto; inline-size: 2px; block-size: 100%; } }  :is(.btn, .btn-primary, .btn-ghost, .nav-cta, .news-form button) > i.ph:last-child:not(.ph-arrow-square-out) { transition: transform var(--dur-base) var(--ease-out); } @media (prefers-reduced-motion: reduce) {  :is(.btn, .btn-primary, .btn-ghost, .nav-cta, .news-form button) > i.ph:last-child:not(.ph-arrow-square-out) { transition: none; } }  :is(.action-link, .more, .sector-card-action, .section-view-all, .needs-route-action, .land-plot-action):is(:hover, :focus-visible) > i.ph:not(.ph-arrow-square-out), .cta-action:is(:hover, :focus-visible) > i.cta-arrow:not(.ph-arrow-square-out), :is(.btn, .btn-primary, .btn-ghost, .nav-cta, .news-form button):is(:hover, :focus-visible) > i.ph:last-child:not(.ph-arrow-square-out), :is(.news-item, .news-card, .project-card, .project-card-base, .company-card, .needs-route, .business-needs-route, .sector-card, .row-item, .icon-item--link):where(a[href], :has(a[href])):is(:hover, :focus-within) :is(:is(.action-link, .more, .sector-card-action, .section-view-all, .needs-route-action, .land-plot-action) > i.ph, i.row-item-action):not(.ph-arrow-square-out) { transform: translateX(calc(var(--action-arrow-travel) * var(--action-arrow-dir))); } [dir="rtl"] :is(:is(.action-link, .more, .sector-card-action, .section-view-all, .needs-route-action, .land-plot-action) > i.ph, i.row-item-action, i.cta-arrow, :is(.btn, .btn-primary, .btn-ghost, .nav-cta, .news-form button) > i.ph:last-child).ph-arrow-square-out { transform: scaleX(-1); } [dir="rtl"] i.ph.ph-paper-plane-tilt { scale: -1 1; --action-arrow-dir: 1; }   #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; }   .needs-route-copy .project-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-block-start: 16px; }