* { margin: 0; padding: 0; box-sizing: border-box; }  button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }  button { background: none; border: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-brand); background: var(--offwhite); color: var(--ink); line-height: 1.75;  -webkit-font-smoothing: antialiased; }  h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; line-height: 1.2; letter-spacing: 0; } h1 { font-size: var(--type-display); line-height: var(--leading-display); } h2 { font-size: var(--type-section); line-height: var(--leading-section); }  h1, h2 { text-wrap: balance; } h1, h2, h3, p, a, span { overflow-wrap: break-word; } ::selection { background: var(--accent-fill); color: #fff; } a { color: inherit; text-decoration: none; }  main p { font-size: var(--type-body); line-height: var(--leading-body); text-wrap: balance; }  i.ph { display: inline-block; line-height: 1; color: inherit; flex: 0 0 auto; font-size: var(--ic-md); }  section[id] { scroll-margin-top: 72px; }   :root { --page-gutter: 32px; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; } .pad { padding: var(--sec-pad) 0; background: var(--surface-base); }  .about-who-we-are > .wrap { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 112px); } .skip-link { position: fixed; top: 14px; right: 24px; z-index: 2000; padding: 10px 16px; background: var(--charcoal); color: #fff; border-radius: var(--r); transform: translateY(-140%); transition: transform var(--dur-base) var(--ease-out); } .skip-link:focus { transform: translateY(0); }  .skip-link:is(:hover, :focus-visible) { color: var(--link-hover-on-dark); }  .sec-head { margin-bottom: var(--sec-head-gap); max-width: 680px; } .sec-head h2 {  color: var(--charcoal); margin-bottom: 18px; } .sec-head p {  font-size: var(--type-lead); line-height: var(--leading-lead); color: var(--muted); font-weight: 400; } .kicker {  font-size: var(--type-meta); font-weight: 700; letter-spacing: 0; color: var(--label); display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }  main section:not(.hero) .kicker { display: inline-flex; align-items: center; gap: 10px; width: auto; } main section:not(.hero) .kicker::before { content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: url("../images/brand/sdeira-mark.svg?v=12a5a1af82a32441") center / contain no-repeat; }   .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-block-size: 46px; padding: 8px 30px;  font-size: var(--type-action); font-weight: 500; border-radius: var(--r); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); cursor: pointer; }  .btn-primary, .nav-cta {  background: var(--accent-fill); color: var(--brand-white); border-color: var(--accent-fill); font-weight: 800; }  .btn-primary, .btn-ghost, .nav-cta { position: relative; isolation: isolate; overflow: hidden; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }  .btn-primary:is(:hover, :focus-visible), .nav-cta:is(:hover, :focus-visible) { background: var(--accent-fill); color: var(--brand-white); border-color: var(--accent-fill); }  .btn-ghost {  border: 1px solid var(--brand-white); background: transparent; color: var(--brand-white); font-weight: 800; }  .btn.btn-ghost:is(:hover, :focus-visible) { color: var(--brand-white); border-color: var(--brand-white); background: transparent; }  .more { position: relative; display: inline-block; font-size: var(--type-action); } .more::after { content: ""; position: absolute; inset-block-end: -3px; inset-inline-start: 0; inline-size: 100%; block-size: 1px; background: currentColor; opacity: .32; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } a:hover .more::after, .more:hover::after { transform: scaleX(1); opacity: 1; }  .action-link { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: .48rem; min-height: 0; padding: 0 0 4px; overflow: visible; isolation: auto; background: transparent; color: var(--brand-white); font-size: var(--type-action); font-weight: 800; line-height: 1.3; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); } .action-link::before { content: none; } .action-link::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 100%; block-size: 2px; background: currentColor; transform: scaleX(.42); transform-origin: right center; transition: transform var(--dur-base) var(--ease-out); } .action-link:is(:hover, :focus-visible)::after { transform: scaleX(1); } .action-link > i.ph { flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-out); }  :is(.action-link, .more):is(:hover, :focus-visible) { color: var(--link-hover); } :is(.action-link, .more):is(:hover, :focus-visible) > i.ph { color: inherit; }  :is(.btn, .nav-cta, .cta-action, .action-link, .more, .sector-card-action, .section-view-all):focus-visible { outline: 3px solid var(--brand-razeen); outline-offset: 3px; }  #hd { position: fixed; top: 0; right: 0; left: 0; z-index: 1000;  --hd-gap: clamp(6px, .6vw, 8px); --hd-pad: clamp(6px, .6vw, 8px); --cta-h: clamp(34px, 2.6vw, 40px);   padding: var(--hd-gap); }  #hd.scrolled {  }  #hd::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 230px; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .58) 40%, rgba(0, 0, 0, .3) 72%, transparent 100%); }  .nav { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: var(--hd-pad); }  .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid transparent; border-radius: var(--r); background: rgba(255, 255, 255, 0); backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); transition: left var(--dur-base) var(--ease-out), right var(--dur-base) var(--ease-out), margin-inline var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out), bottom var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out); }  #hd:not(.scrolled) .nav::before { left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; top: calc(-1 * var(--hd-gap)); bottom: calc(-1 * var(--hd-gap)); border-radius: 0; background: var(--brand-white); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } #hd.scrolled .nav::before { background: rgba(255, 255, 255, .82); border-color: var(--line); backdrop-filter: blur(var(--glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); } .logo { font-family: var(--font-display); font-weight: 700;  font-size: 1.6rem;  letter-spacing: 0;  color: var(--charcoal); transition: color var(--dur-base);  flex: 0 0 auto; } .logo img, #navLogo { display: block; width: auto; max-width: 440px; height: var(--logo-h); object-fit: contain; transition: height var(--dur-base) var(--ease-out); }  .menu { display: flex;  gap: clamp(12px, 1.55vw, 20px); align-items: center; flex: 1 1 auto; min-width: 0; justify-content: center; } .menu a {  font-size: var(--type-control); font-weight: 500;  color: var(--ink); position: relative;  white-space: nowrap; transition: color var(--dur-base); } .menu a::after { content: ""; position: absolute; bottom: -6px; right: 0; width: 0; height: 1.5px; background: var(--accent); transition: width var(--dur-base); } .menu a:hover::after, .menu a.active::after { width: 100%; } .menu-mobile-actions a::after { display: none; }  .menu a.active { color: var(--ink); }  .menu-head { display: none; } .menu-mobile-actions { display: none; } .menu-lang, .menu-contact { display: none; } .nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .nav-cta {  min-height: var(--cta-h); display: inline-flex; align-items: center; justify-content: center; padding: 0 clamp(18px, 1.8vw, 28px); border-radius: var(--r);  font-size: var(--type-control); letter-spacing: 0; white-space: nowrap; }  #hd.scrolled .nav-cta, #hd.scrolled .nav-cta:is(:hover, :focus-visible) { background: var(--accent-fill); color: var(--brand-white); border-color: var(--accent-fill); font-weight: 800; }  .lang, .menu-lang { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding-inline: 8px; color: rgba(255, 255, 255, .84);  font-size: var(--type-control); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .lang i.ph, .menu-lang i.ph { font-size: var(--ic-sm); }  .lang { color: var(--muted); cursor: pointer; } .lang:hover, .lang:focus-visible {  color: var(--accent-strong); background: var(--accent-wash); }  .menu > .nav-disclosure { position: relative; flex: 0 0 auto; }  .nav-disclosure[open]::details-content { overflow: visible; }  @supports selector(.nav-disclosure::details-content) { @media (min-width: 1281px) { .nav-disclosure[open]::details-content { position: absolute; z-index: 4; inset-block-start: 100%; inset-inline-start: 0; } .nav-disclosure[open] > .nav-submenu { position: relative; z-index: auto; inset-block-start: 10px; inset-inline-start: auto; } } } .nav-disclosure > summary { min-block-size: 44px; display: flex; align-items: center; gap: 6px; padding-inline: 6px;  color: var(--ink);  font-size: var(--type-control); font-weight: 500; white-space: nowrap; list-style: none; cursor: pointer;  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .nav-disclosure > summary::-webkit-details-marker { display: none; }  .nav-disclosure > summary > a::after { display: none; } .nav-disclosure > summary::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 2px; inline-size: 0; block-size: 1.5px; background: var(--accent); transition: inline-size var(--dur-base) var(--ease-out); } .nav-disclosure > summary i.ph { font-size: var(--ic-xs); transition: transform var(--dur-fast) var(--ease-out); }  .nav-disclosure:is([open], :has(.nav-submenu a.active)):not(.is-closing) > summary::after, .nav-disclosure > summary.active::after { inline-size: 100%; } .nav-disclosure[open]:not(.is-closing) > summary i.ph { transform: rotate(180deg); }  .nav-disclosure[open]:not(.is-closing) > summary { background: transparent; } .nav-disclosure > summary:focus-visible {  outline: 3px solid var(--accent); outline-offset: 3px; }  .nav-submenu { position: absolute; z-index: 4; inset-block-start: calc(100% + 10px); inset-inline-start: 0; inline-size: max-content; min-inline-size: var(--nav-submenu-min); display: flex; flex-direction: column; gap: 2px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); } .menu .nav-submenu a { min-block-size: 42px; padding-inline: 12px; display: flex; align-items: center; justify-content: space-between; color: var(--ink);  font-size: var(--type-control); white-space: normal; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .menu .nav-submenu a::after { display: none; }  #hd .menu .nav-submenu a:is(:hover, :focus-visible, .active) { background: var(--accent-fill); color: #fff; } .menu .nav-submenu a:focus-visible { outline: 3px solid var(--brand-razeen); outline-offset: -3px; } .nav-submenu-hover-icon { flex: 0 0 1em; color: inherit; font-size: 1em; line-height: 1; opacity: 0; pointer-events: none; transform: translateX(4px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }  .menu .nav-submenu i.nav-submenu-hover-icon { font-size: 1em; } .menu .nav-submenu a:is(:hover, :focus-visible) .nav-submenu-hover-icon { opacity: 1; transform: translateX(0); } .nav-submenu--companies .company-nav-link { justify-content: flex-start; gap: 12px; } .company-nav-link .nav-submenu-hover-icon { margin-inline-start: auto; }  .company-nav-mark :is(img, svg) { transition: filter var(--dur-fast) var(--ease-out); } .company-nav-link:is(:hover, :focus-visible, .active) .company-nav-mark :is(img, svg) { filter: brightness(0) invert(1); }   .company-nav-mark {  inline-size: var(--company-nav-mark-w); block-size: var(--company-nav-mark-h); display: grid;  place-items: center start; flex: 0 0 var(--company-nav-mark-w); overflow: hidden; } .company-nav-mark svg { inline-size: 23px; block-size: 19px; } .company-nav-mark img {  inline-size: auto; block-size: var(--company-nav-mark-h);  max-inline-size: 100%;  object-fit: contain; object-position: left center; object-fit: contain; object-position: left center; }  .company-nav-mark--eskan img { block-size: var(--company-nav-mark-eskan-h); } .company-nav-mark--khadamat img { block-size: var(--company-nav-mark-khadamat-h); } .company-nav-mark--zoad img { block-size: var(--company-nav-mark-zoad-h); } .company-nav-mark--laundry img { block-size: var(--company-nav-mark-laundry-h); } .company-nav-mark--square img { block-size: var(--company-nav-mark-square-h); }    .burger { display: none; margin-inline-end: -9px; } .menu-backdrop { position: fixed; inset: 0; z-index: 999; display: none; border: 0; background: rgba(var(--image-overlay-rgb), .38); backdrop-filter: blur(8px); cursor: pointer; } body.menu-open .menu-backdrop { display: block; }  body.menu-open #hd > .nav > .logo, body.menu-open #hd > .nav > .nav-actions, body.menu-open #hd::before, body.menu-open #hd .nav::before { visibility: hidden; opacity: 0; }  .scroll-top { position: fixed; left: 24px; bottom: 24px; z-index: 999; width: 38px; height: 38px; border-radius: var(--r); background: rgba(65, 64, 66, .55); border: none; color: #fff;  font-size: .95rem;  line-height: 1; display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .scroll-top.visible { opacity: .55; pointer-events: auto; transform: none; }  .scroll-top:hover { background: var(--accent); border-color: var(--accent); color: var(--on-action); opacity: 1; } .scroll-top:focus-visible { background: var(--accent); opacity: 1; }  footer {  background: var(--scrim-footer); backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);  color: rgba(255, 255, 255, .96); font-weight: 600; padding: 80px 0 36px;  padding-bottom: max(36px, calc(96px + env(safe-area-inset-bottom))); position: relative; isolation: isolate; overflow: hidden; } footer > .wrap { position: relative; z-index: 1; } .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 40px; padding-bottom: 56px; } .foot-brand { min-width: 0; } .foot-brand .logo { display: block; color: #fff;  font-size: 1.9rem; 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; } .foot-brand p { font-weight: 400;  font-size: var(--type-body); line-height: var(--leading-body); max-width: 300px; text-wrap: balance; }  .foot-col :is(h3, h4) { font-family: var(--font-display); color: #fff;  font-size: var(--type-label); line-height: var(--leading-label); margin-bottom: 22px; font-weight: 500; } .foot-col a, .foot-col .foot-pending { display: block; margin-bottom: 13px;  font-size: var(--type-action); font-weight: 400; transition: color var(--dur-base); } .foot-col a { color: #fff; }  .foot-col .foot-pending { color: var(--muted-on-dark); cursor: default; }  :is(.foot-col a, .foot-contact):is(:hover, :focus-visible) { color: var(--link-hover-on-dark); } :is(.foot-col a, .foot-contact):is(:hover, :focus-visible) > i.ph { color: inherit; } .foot-contact bdi { direction: ltr; unicode-bidi: isolate; } .foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; flex-wrap: wrap; gap: 16px; } .copy {  font-size: var(--type-caption); } .foot-socials { display: flex; align-items: center; gap: 16px; } .foot-socials a { inline-size: 40px; block-size: 40px; display: grid; place-items: center;  border: 0; border-radius: var(--r); color: var(--icon-on-dark); background: rgba(255, 255, 255, .08); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .foot-socials a:is(:hover, :focus-visible) { background-color: var(--brand-razeen); color: var(--brand-black); transform: scale(1.06); } .foot-socials i.ph { font-size: var(--ic-sm); line-height: 1; }  .reveal.armed { opacity: 0; visibility: hidden; transform: translate3d(0, 24px, 0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); will-change: opacity, transform; } .reveal.armed.in { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); transition-delay: 0s; will-change: auto; } .reveal.armed[data-d="1"] { transition-delay: 80ms; } .reveal.armed[data-d="2"] { transition-delay: 160ms; } .reveal.armed[data-d="3"] { transition-delay: 240ms; } .reveal.armed.in[data-d="1"] { transition-delay: 80ms; } .reveal.armed.in[data-d="2"] { transition-delay: 160ms; } .reveal.armed.in[data-d="3"] { transition-delay: 240ms; }   @media (min-width: 981px) { .wrap { width: min(calc(100% - 84px), var(--max)); } .logo img, #navLogo { max-width: 180px; }  @media (min-width: 1331px) { .logo img, #navLogo { max-width: 220px; } } .menu { gap: 22px; } .nav-actions { gap: 8px; } .nav-cta { padding-inline: 20px; } }  @media (min-width: 981px) { .nav-disclosure.is-closing > .nav-submenu { pointer-events: none; } .nav-submenu::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: 10px; } }  @media (max-width: 1180px) { .menu { gap: 22px; } .nav-actions { gap: 8px; } .nav-cta { padding: 0 20px; } }  @media (max-width: 1280px) { body.menu-open { overflow: hidden; overscroll-behavior: none; } .nav { gap: 18px; } .logo img, #navLogo { max-width: 180px;  height: 42px; } .nav-cta { display: none; } .nav-actions > .lang { display: none; } .burger { display: flex; position: relative; margin-inline-end: 0; border: 0; background: transparent; } body.menu-open .burger { opacity: 0; pointer-events: none; }  .menu { display: flex; position: fixed; z-index: 1101; top: 0; right: 0; bottom: 0; left: auto; inline-size: min(88vw, 380px); block-size: 100dvh; padding: 16px var(--page-gutter) max(24px, env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-raised); color: var(--ink); visibility: hidden; pointer-events: none; opacity: .98; transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .menu::after { content: ""; position: absolute; z-index: -1; inset-inline-end: 0; inset-block-end: 0; inline-size: 160px; aspect-ratio: var(--photo-mark-p43-ratio); background: var(--drawer-corner-art, url("../images/patterns/lines.svg?v=d874099296964b63")) right bottom / contain no-repeat; opacity: .055; pointer-events: none; }  .menu.open { display: flex; position: fixed; z-index: 1001; top: 0; right: 0; bottom: 0; left: auto; flex-direction: column; align-items: stretch; background: var(--offwhite); padding: 16px var(--page-gutter) max(24px, env(safe-area-inset-bottom)); gap: 0; visibility: visible; pointer-events: auto; opacity: 1; transform: translateX(0); transition-delay: 0s; } .menu.open a { min-height: 44px; display: flex; align-items: center; color: var(--ink); } .menu-head { min-block-size: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-block-end: 1px solid var(--line); } .menu-logo { min-block-size: 44px; display: flex; align-items: center; } .menu-logo img { display: block; inline-size: min(152px, 52vw); block-size: auto; }  .menu-logo::after, .menu > a:not(.menu-logo)::after { display: none; }   .menu > a:not(.menu-logo) { position: relative; min-block-size: 54px; padding-inline: 4px 12px; display: flex; align-items: center; justify-content: flex-start; border-block-end: 1px solid var(--line); color: var(--ink); font-family: var(--font-display); font-weight: 600; opacity: 0; transform: translateX(10px); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .menu.open > a:not(.menu-logo) { opacity: 1; transform: translateX(0); } .menu.open > a:nth-of-type(2) { transition-delay: 45ms; } .menu.open > a:nth-of-type(3) { transition-delay: 70ms; } .menu.open > a:nth-of-type(4) { transition-delay: 95ms; } .menu.open > a:nth-of-type(5) { transition-delay: 120ms; } .menu.open > a:nth-of-type(6) { transition-delay: 145ms; } .menu.open > a:nth-of-type(7) { transition-delay: 170ms; } .menu.open > a:nth-of-type(8) { transition-delay: 195ms; } .menu.open > a:nth-of-type(9) { transition-delay: 220ms; }   .menu > a:not(.menu-logo):hover, .menu > a:not(.menu-logo):focus-visible, .menu > a:not(.menu-logo).active, .nav-disclosure > summary.active { background: var(--surface-sunken); color: var(--ink); } .menu > a:not(.menu-logo).active::before { content: ""; position: absolute; inset-inline-start: 0; inline-size: 3px; block-size: 24px; background: var(--accent); }  .menu > .nav-disclosure { inline-size: 100%; border-block-end: 1px solid var(--line); opacity: 0; transform: translateX(10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .menu.open > .nav-disclosure { opacity: 1; transform: translateX(0); } .nav-disclosure > summary { min-block-size: 54px; padding-inline: 4px 12px; justify-content: space-between; color: var(--ink); font-family: var(--font-display); font-weight: 600; } .nav-disclosure > summary::after { display: none; } .nav-disclosure[open]:not(.is-closing) > summary { background: var(--accent-fill); color: #fff; }  .nav-disclosure[open]:not(.is-closing) > summary a { color: inherit; } .nav-submenu { position: static; min-inline-size: 0; inline-size: 100%; padding: 4px 14px 12px; background: #fff; border-block-start: 0; border-inline-start: 0; border-radius: var(--r); }  .menu .nav-submenu { overflow: hidden; } .menu .nav-submenu a { min-block-size: 44px; padding-inline: 10px; }  .menu.open .menu-mobile-actions { width: 100%; display: flex; flex-direction: column; margin-block-start: auto; padding-block-start: 14px; gap: 10px; border-block-start: 1px solid var(--line); } .menu.open .menu-lang { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: flex-start; padding-inline: 4px; gap: 10px; color: var(--charcoal); font-weight: 700; } .menu.open .menu-contact { width: 100%; min-height: 52px; display: flex; justify-content: center; background: var(--accent-deep); color: #fff; border-radius: var(--r); font-weight: 800; }  .menu.open .menu-contact:hover { background: var(--accent-hover); color: var(--on-action); } .menu-backdrop { display: block; z-index: 999; visibility: hidden; pointer-events: none; opacity: 0; background: rgba(var(--image-overlay-rgb), .44); backdrop-filter: blur(4px); transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } body.menu-open .menu-backdrop { display: block; visibility: visible; pointer-events: auto; opacity: 1; transition-delay: 0s; } body.menu-open .scroll-top { z-index: 997; } }  @media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } }  @media (max-width: 720px) { :root { --page-gutter: clamp(14px, 4.6vw, 18px); } main > section > .wrap, footer > .wrap { padding-inline: var(--page-gutter); } .menu-lang { gap: 9px; } }  @media (max-width: 560px) { .wrap { padding: 0 20px; } .nav-actions { gap: 6px; }  .logo img, #navLogo { max-width: min(42vw, 158px); height: var(--logo-h); }  .scroll-top { left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: 34px; height: 34px;  font-size: .9rem; } .foot-grid { grid-template-columns: 1fr; } .foot-brand .logo { inline-size: min(190px, 100%); } }  @media (max-width: 420px) { .nav { gap: 10px; } .logo img, #navLogo { max-width: min(39vw, 146px); } .lang { display: none; } .nav-actions { gap: 4px; } }  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }  .reveal.armed { opacity: 1; visibility: visible; transform: none; transition: none; } #hd, #hd::before, .logo, .logo img, #navLogo, .menu, .menu a, .menu a::after, .menu-backdrop, .menu > a:not(.menu-logo), .lang, .menu-lang, .nav-disclosure, .nav-disclosure > summary, .nav-disclosure > summary::after, .nav-disclosure > summary i.ph, .nav-submenu-hover-icon, .menu .nav-submenu a, .btn, .btn-primary, .btn-ghost, .nav-cta, .more::after, .action-link, .action-link::after, .action-link > i.ph, .skip-link, .scroll-top, .foot-col a, .foot-socials a { transition: none; } .foot-socials a:is(:hover, :focus-visible) { transform: none; } }   .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }   .subpage-hero { position: relative; isolation: isolate; overflow: hidden;  min-block-size: clamp(210px, 27vh, 270px); display: block; padding-block: var(--hero-header-clearance) clamp(20px, 3vw, 30px); background: var(--surface-inverse); color: var(--brand-white); } .subpage-hero-media { position: absolute; inset: 0; z-index: -2; }  .subpage-hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 62%; transform: scale(1.08); animation: subpage-hero-zoom 7s var(--ease-out) forwards; } @keyframes subpage-hero-zoom { to { transform: scale(1); } }   .subpage-hero--photo { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-block-size: clamp(240px, 24vw, 340px); padding-block: var(--hero-header-clearance) clamp(24px, 3vw, 36px); }  .subpage-hero--photo .subpage-hero-media img { filter: blur(var(--glass-blur)); }  .subpage-hero-glass { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }  .subpage-hero-glass span { position: absolute; top: var(--identity-band-top); height: var(--identity-band-height); width: var(--identity-band-width); border: var(--identity-band-border) solid color-mix(in srgb, var(--brand-sweihan) var(--identity-band-line-on-photo), transparent); border-radius: var(--r); background: color-mix(in srgb, var(--brand-sweihan) var(--identity-band-fill-on-photo), transparent); transform: skewX(-24deg); } .subpage-hero-glass .r1 { inset-inline-start: 68%; } .subpage-hero-glass .r2 { inset-inline-start: 78%; }  .subpage-hero-glass .r3 { inset-inline-start: 88%; border-color: color-mix(in srgb, var(--brand-sweihan) calc(var(--identity-band-line-on-photo) / 2), transparent); }  @media (max-width: 920px) { .subpage-hero-glass { display: none; } }  @keyframes subpage-hero-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .subpage-hero .breadcrumb--hero, .subpage-hero .kicker, .subpage-hero h1, .subpage-hero p { animation-name: subpage-hero-reveal; animation-duration: var(--dur-base); animation-timing-function: var(--ease-out); animation-fill-mode: both; } .subpage-hero .kicker, .subpage-hero h1 { animation-delay: calc(var(--dur-fast) * 1); } .subpage-hero p { animation-delay: calc(var(--dur-fast) * 2); }  @media (prefers-reduced-motion: reduce) { .subpage-hero-media img { transform: none; animation: none; } .subpage-hero .breadcrumb--hero, .subpage-hero .kicker, .subpage-hero h1, .subpage-hero p { animation: none; } }  .subpage-hero .wrap { position: relative; z-index: 1; }  .subpage-hero--photo > .wrap { width: min(100%, var(--max)); }  @media (min-width: 981px) { .subpage-hero--photo > .wrap { width: min(calc(100% - 84px), var(--max)); } }  .subpage-hero .kicker { color: var(--brand-white); margin-block-end: 4px; } .subpage-hero h1 { font-size: var(--type-display); line-height: var(--leading-display); margin: 0; max-inline-size: 22ch; color: var(--brand-white); }  html[dir="rtl"] .subpage-hero h1 { line-height: 1.5; } .subpage-hero p { margin: 14px 0 0; max-inline-size: 62ch; font-size: var(--type-lead); line-height: var(--leading-lead); color: var(--brand-white); }  .subpage-hero .cta-actions { justify-content: start; margin-block-start: 22px; }    .subpage-hero--article h1 { font-size: var(--type-feature); line-height: var(--leading-feature); max-inline-size: 54ch; }   .article-meta-bar { background: var(--surface-sunken); } .article-meta-bar > .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }  .breadcrumb { background: var(--surface-raised); border-block-end: 1px solid var(--line); }  .breadcrumb--kicker-bar .kicker { margin-bottom: 0; padding-block: 14px; } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 14px 0; list-style: none; font-size: var(--type-meta); color: var(--label); } .breadcrumb li { display: flex; align-items: center; gap: 8px; } .breadcrumb li + li::before { content: "/"; color: var(--line); } .breadcrumb a { color: var(--muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .breadcrumb-home { display: inline-flex; align-items: center; line-height: 1; } .breadcrumb a:is(:hover, :focus-visible) { color: var(--link-hover); } .breadcrumb [aria-current="page"] { color: var(--ink); }  .breadcrumb--hero { background: none; border-block-end: 0; margin-block-end: 10px; } .breadcrumb--hero ol { padding: 0; color: var(--muted-on-dark); } .breadcrumb--hero li + li::before { color: var(--line-on-dark); } .breadcrumb--hero a { color: var(--muted-on-dark); } .breadcrumb--hero a:is(:hover, :focus-visible) { color: var(--link-hover-on-dark); } .breadcrumb--hero [aria-current="page"] { color: var(--brand-white); }   .news-index { background: var(--surface-base); }  .news-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 10px; margin-block-end: clamp(26px, 3vw, 40px); }  .news-toolbar { --control-h: 54px; }  .news-tabs { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 4px; min-inline-size: 0; max-inline-size: 100%; block-size: var(--control-h); padding: 4px; background: var(--surface-raised); border-radius: var(--r); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }  .news-toolbar-filters { display: flex; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; gap: 10px; min-inline-size: 0; } .news-tabs::-webkit-scrollbar { display: none; }  .news-tab { flex: none; border: 0; border-radius: var(--r); padding-inline: 22px; block-size: 100%; font: inherit; font-size: var(--type-action); font-weight: 700; color: var(--brand-jais); background: transparent; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .news-tab:hover { color: var(--brand-black); } .news-tab[aria-selected="true"] { color: var(--brand-white); background: var(--accent-fill); }  .news-tab[aria-pressed="true"] { color: var(--brand-white); background: var(--accent-fill); }  .jobs-tabs { background: var(--surface-sunken); } .news-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }  .news-search { position: relative; flex: 0 1 280px; min-inline-size: 120px; display: flex; align-items: center; }  .news-search > i.ph { position: absolute; inset-block: 0; block-size: 1em; margin-block: auto; inset-inline-start: 15px; font-size: var(--icon-control); line-height: 1; color: var(--icon); pointer-events: none; } .news-search input { inline-size: 100%; block-size: var(--control-h); font: inherit; font-size: var(--type-action); color: var(--ink); background: var(--surface-raised); border: 0; border-radius: var(--r);  padding-inline: 44px 40px; transition: background var(--dur-fast) var(--ease-out); } .news-search input::placeholder { color: var(--label); } .news-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }  .news-search input::-webkit-search-cancel-button { appearance: none; }  .news-search-clear { position: absolute; inset-inline-end: 8px; inset-block: 0; margin-block: auto; display: inline-flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; border: 0; border-radius: var(--r); color: var(--icon); background: transparent; font-size: var(--icon-control); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }  .news-search-clear[hidden] { display: none; }  .news-search-clear i.ph { display: block; font-size: inherit; line-height: 1; } .news-search-clear:is(:hover, :focus-visible) { color: var(--accent-text); background: var(--icon-wash); }  .news-dropdown { position: relative; flex: 0 1 auto; }  .jobs-filter-label { display: block; margin-block-end: 6px; color: var(--label); font-size: var(--type-meta); font-weight: 700; } .news-dropdown-toggle { display: inline-flex; align-items: center; gap: 10px; inline-size: 100%; block-size: var(--control-h); border: 0; border-radius: var(--r); padding-inline: 16px; font: inherit; font-size: var(--type-action); color: var(--ink); background: var(--surface-sunken); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }  .jobs-toolbar { align-items: flex-end; }  .news-dropdown-toggle:hover, .news-dropdown-toggle[aria-expanded="true"] { background: var(--surface-sunken); } .news-dropdown-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }  .jobs-filter { inline-size: 180px; } .jobs-filter .news-dropdown-value { white-space: nowrap; } .news-dropdown-value { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; text-align: start; overflow: hidden; text-overflow: ellipsis; } .news-dropdown-toggle i.ph { flex: none; font-size: var(--icon-control); line-height: 1; color: var(--icon); transition: transform var(--dur-base) var(--ease-out); } .news-dropdown-toggle[aria-expanded="true"] i.ph { transform: rotate(180deg); }  .news-dropdown-menu { position: absolute; z-index: 20; inset-inline-start: 0; inset-block-start: calc(100% + 6px);  inline-size: max-content; min-inline-size: 100%; max-inline-size: min(280px, calc(100vw - 64px)); margin: 0; padding: 4px; list-style: none;  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r);  box-shadow: var(--shadow-floating); max-block-size: 280px; overflow-y: auto; } .news-dropdown-menu[hidden] { display: none; } .news-dropdown-option { border-radius: var(--r); padding: 10px 14px; font-size: var(--type-action); color: var(--brand-jais); white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }  .news-dropdown-option:hover, .news-dropdown-option:focus-visible { color: var(--brand-black); background: var(--surface-sunken); outline: 0; } .news-dropdown-option[aria-selected="true"] { color: var(--brand-white); background: var(--accent-fill); } .news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: clamp(18px, 2vw, 26px); }  .news-list:has(> .news-card) { gap: 18px; }  .job-card-logo { display: grid; place-items: start; block-size: 48px; margin-block-end: 18px; } .job-card-logo img { inline-size: auto; block-size: 48px; max-inline-size: 100%; object-fit: contain; transition: filter var(--dur-slow) var(--ease-out); }  .project-card-base:is(:hover, :focus-within) .job-card-logo img { filter: brightness(0) invert(1); }  .jobs-search { position: relative; flex: 0 1 280px; min-inline-size: 120px; display: flex; align-items: center; } .jobs-search > i.ph { position: absolute; inset-block: 0; block-size: 1em; margin-block: auto; inset-inline-start: 15px; line-height: 1; color: var(--icon); pointer-events: none; } .jobs-search input { inline-size: 100%; block-size: var(--control-h); font: inherit; font-size: var(--type-action); color: var(--ink);  background: var(--surface-sunken); border: 0; border-radius: var(--r); padding-inline: 44px 16px; transition: background var(--dur-fast) var(--ease-out); } .jobs-search input::placeholder { color: var(--label); } .jobs-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .jobs-search input::-webkit-search-cancel-button { appearance: none; } .jobs-list .job-card[hidden] { display: none; } .jobs-empty { margin-block-start: 26px; }  .aryam-pending-projects { --grid-cols: 2; } .news-item { position: relative; display: flex; flex-direction: column; background: var(--surface-raised); border-radius: var(--r); overflow: hidden; }  .news-item h3 a { position: static; } .news-item h3 a::after { content: ""; position: absolute; inset: 0; } .news-item.is-hidden { display: none; }   .news-item-media { position: relative; display: block; aspect-ratio: var(--media-wide); block-size: auto;  overflow: hidden; background: var(--surface-sunken); } .news-item-media 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-item:is(:hover, :focus-within) .news-item-media img { filter: saturate(1) contrast(1.03) brightness(1); } .news-item-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1; background: var(--surface-raised); } .news-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--type-meta); }  .news-item-meta .date, .news-item-meta .tag, .news-item-meta .partner { color: var(--badge-text);  font-size: var(--badge-size); font-weight: var(--badge-weight); }  .news-item-meta .date { display: inline-flex; align-items: center; gap: 8px; } .news-item-meta .date::before { content: "◷"; color: currentColor; font-size: var(--icon-inline); }  .news-item h3 { margin: 0; font-size: var(--type-label); line-height: var(--leading-label);  min-block-size: calc(var(--card-title-lines, 3) * 1lh); } .news-item h3 a { color: inherit; text-decoration: none; } .news-item p { margin: 0; color: var(--muted);  min-block-size: calc(var(--card-sub-lines, 0) * 1lh); }  .news-item .action-link { margin-block-start: auto; padding-block-start: 6px; align-self: flex-start; color: var(--accent-text); font-weight: 700;  min-height: 44px; }  .news-item .action-link::after { background: currentColor; transform: scaleX(.42); transform-origin: right center; } .news-item:is(:hover, :focus-within) .action-link { color: var(--link-hover); } .news-item:is(:hover, :focus-within) .action-link::after { transform: scaleX(1); }  .news-item-body:not(:has(.action-link))::after { content: ""; display: block; margin-block-start: auto; padding-block-start: 6px; block-size: 44px; }  .news-item--information .news-item-body:not(:has(.action-link))::after { content: none; }  .news-item--pending .is-pending { color: var(--pending); }  .news-item--feature { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }  .news-item--feature .news-item-media { flex: 0 0 54%; block-size: auto; min-block-size: clamp(280px, 30vw, 360px); } .news-item--feature .news-item-body { flex: 1; justify-content: center; padding: clamp(28px, 3vw, 44px) clamp(26px, 3vw, 40px); }  .news-item--feature h3 { font-size: var(--type-card); line-height: var(--leading-card); min-block-size: calc(var(--card-title-lines, 3) * 1lh); }  .news-item--feature p { font-size: var(--type-lead); line-height: var(--leading-lead); min-block-size: calc(var(--card-sub-lines, 2) * 1lh); }   .article-layout {  background: transparent;   --article-card-pad: clamp(18px, 1.5vw, 24px); --article-body-pad: clamp(24px, 3vw, 44px); --article-stack-gap: clamp(14px, 1.4vw, 20px); --article-shell-gap: clamp(24px, 2.6vw, 40px);  --article-measure: 900px; }  .article-shell { display: grid; grid-template-columns: minmax(0, 7fr) minmax(240px, 3fr); gap: var(--article-shell-gap); align-items: start; }  .article-main { max-inline-size: min(100%, var(--article-measure)); margin-inline: auto; }   .article-shell--full { grid-template-columns: minmax(0, 1fr); } .article-shell--full .article-main { max-inline-size: 100%; margin-inline: 0; }  .article-shell--full .article-body > :not(.article-figure) { max-inline-size: min(100%, 95ch); }    .article-body { max-inline-size: 100%; font-size: var(--type-body); line-height: var(--leading-body); color: var(--ink); } .article-body p { font-size: var(--type-body); line-height: var(--leading-body); } .article-body p.article-lead { font-size: var(--type-lead); line-height: var(--leading-lead); }  .article-body h2.article-title { font-size: var(--type-card); line-height: var(--leading-card); font-weight: 700; margin-block-start: 0; } .article-body > * + * { margin-block-start: 1.15em; }  .article-body h2 { font-size: var(--type-label); line-height: var(--leading-label); margin-block-start: 1.7em; } .article-body h3 { font-size: var(--type-lead); line-height: var(--leading-lead); font-weight: 700; margin-block-start: 1.5em; } .article-body ul { padding-inline-start: 1.2em; margin-inline-start: 0; } .article-body li + li { margin-block-start: .5em; } .article-body li::marker { color: var(--accent); } .article-body strong { color: var(--ink); font-weight: 700; }     .article-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--article-stack-gap);  margin-block-start: var(--article-stack-gap); margin-block-end: calc(var(--article-stack-gap) * 1.8); }  .article-figures div { padding: var(--article-card-pad); background: var(--surface-sunken); border-radius: var(--r); }  .article-main .article-figures div { background: var(--surface-sunken); }  .article-figures-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }   .article-figures b { font-family: var(--font-display); font-size: var(--type-section); line-height: 1; font-weight: 700; color: var(--figure); }  .article-figures i.ph { flex-shrink: 0; font-size: var(--icon-display); color: var(--icon); opacity: .7; } .article-figures span { display: block; margin-block-start: 10px; font-size: var(--type-meta); color: var(--label); }    .article-figures--aside { grid-template-columns: 1fr; gap: var(--article-stack-gap); margin-block-start: 0; }  .article-figures--aside > div { padding: var(--article-card-pad); }  .article-figures--aside b { font-size: min(var(--type-section), 2.875rem); }  .article-figures--aside i.ph { font-size: var(--icon-feature); }   .article-figure { margin-block: calc(var(--article-stack-gap) * 1.8); } .article-figure img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r); } .article-figure figcaption { margin-block-start: 10px; font-size: var(--type-meta); line-height: var(--leading-body); color: var(--label); }  .article-aside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: var(--article-stack-gap); }  .article-share { display: flex; align-items: center; gap: 4px; }  .article-share-label { margin-inline-end: 8px; font-size: var(--type-meta); color: var(--label); }  .article-share a { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: var(--r); font-size: var(--icon-default); color: var(--icon); background: none; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }  .article-share a:is(:hover, :focus-visible) { color: var(--link-hover); background-color: var(--icon-wash); }  .article-related { background: var(--surface-sunken); }  :is(.article-related) { position: relative; isolation: isolate; } :is(.article-related)::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; } :is(.article-related) > .wrap { position: relative; z-index: 1; }  .article-related .news-list, .news-index .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }   .news-empty { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-block-size: clamp(280px, 32vw, 360px); padding: 46px 26px; text-align: center; color: var(--pending); background: var(--surface-raised); border-radius: var(--r); } .news-empty.is-shown { display: flex; }  .news-empty i.ph { font-size: var(--icon-display); color: var(--pending); opacity: .5; } .news-empty p { margin: 0; max-inline-size: 40ch; }  .news-pagination { display: grid; grid-template-columns: minmax(42px, 1fr) auto minmax(42px, 1fr); align-items: center; gap: 6px; margin-block-start: clamp(28px, 3vw, 40px); }  .news-pagination:not(.is-shown) { display: none; } .news-page { min-inline-size: 42px; block-size: 42px; border: 0; border-radius: var(--r); padding-inline: 14px; font: inherit; font-size: var(--type-action); color: var(--brand-jais); background: var(--surface-raised); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .news-page:hover:not(:disabled) { color: var(--brand-black); background: var(--surface-sunken); } .news-page[aria-current="page"] { color: var(--brand-white); background: var(--accent-fill); } .news-page:disabled { color: var(--pending); cursor: default; } .news-page:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }  .news-page--arrow { display: inline-flex; align-items: center; justify-content: center; inline-size: 42px; padding-inline: 0; } .news-pagination > .news-page--prev { justify-self: start; } .news-pagination > .news-page--next { justify-self: end; } .news-pagination-pages { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; } .news-page--arrow i.ph { font-size: var(--icon-control); line-height: 1; }  .news-page-gap { min-inline-size: 24px; text-align: center; font-size: var(--type-action); color: var(--pending); }  .sweep, .sweep.in { opacity: 1; visibility: visible; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .news-item-media img, .news-item:is(:hover, :focus-within) .news-item-media img { transform: none; transition: none; } }   @media (max-width: 1080px) { .article-shell { grid-template-columns: minmax(0, 1fr); }  .article-aside { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--article-stack-gap); inline-size: 100%; max-inline-size: min(100%, var(--article-measure)); margin-inline: auto; } }  @media (max-width: 860px) { .news-item--feature { flex-direction: column; } .news-item--feature .news-item-media { flex: none; block-size: clamp(200px, 34vw, 280px); min-block-size: 0; } }  @media (max-width: 720px) { .subpage-hero > .wrap, .breadcrumb > .wrap, .news-index > .wrap, .article-meta-bar > .wrap, .article-layout > .wrap, .article-related > .wrap { padding-inline: var(--page-gutter); } }  @media (max-width: 720px) {  .subpage-hero { min-block-size: 0; padding-block: clamp(112px, 18vh, 140px) 34px; } .subpage-hero h1 { max-inline-size: none; } }  @media (max-width: 900px) { .news-toolbar { flex-direction: column; align-items: stretch; } .news-tabs { align-self: flex-start; max-inline-size: 100%; } .news-toolbar-filters { inline-size: 100%; }  .jobs-search { flex: 0 0 auto; }  .news-search { flex: 1 1 auto; }  .news-dropdown { min-inline-size: 74px; }  .news-dropdown:last-child .news-dropdown-menu { inset-inline-start: auto; inset-inline-end: 0; } }  @media (max-width: 400px) { .news-toolbar-filters { gap: 8px; } .news-dropdown-toggle { padding-inline: 12px; } }  @media (max-width: 760px) { .article-related .news-list, .news-index .news-list { grid-template-columns: minmax(0, 1fr); } }  @media (max-width: 560px) { .news-list { grid-template-columns: minmax(0, 1fr); } .news-item h3 { min-block-size: 0; } .news-item-body { padding: 20px 20px 24px; } .article-figures { grid-template-columns: minmax(0, 1fr); } }  [dir="ltr"] :is(.action-link, .news-item .action-link)::after { transform-origin: left center; } [dir="ltr"] .more::after { transform-origin: left; }