:is(.hero, .subpage-hero--carousel) .hero-content-copy .btn-ghost, :is(.hero, .subpage-hero--carousel) .hero-content-copy .btn-ghost:is(:hover, :focus-visible) { color: var(--button-photo-ink); border-color: var(--button-photo-fill); background: var(--button-photo-fill); position: relative; isolation: isolate; overflow: hidden; }  .subpage-hero--carousel { min-block-size: var(--hero-carousel-height); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding-block: var(--hero-carousel-pad-top) 0;  --hero-mark-inline-size: var(--hero-carousel-mark-inline-size); --hero-mark-block-size: var(--hero-carousel-mark-block-size); --hero-mark-ratio: var(--hero-carousel-mark-ratio); } .subpage-hero--carousel > .wrap { position: relative; flex: 1 0 auto; padding-block-end: var(--hero-carousel-pad-bottom); } .subpage-hero--carousel .hero-content-copy { z-index: 2; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--hero-carousel-ink); padding: 0; border-radius: 0; max-width: var(--hero-carousel-copy-width); }  .subpage-hero--carousel .hero-content-copy .hero-line-mark { display: inline; background: none; padding: 0; } .hero-content-copy h1:has(.hero-line-mark) { display: block; line-height: var(--hero-carousel-heading-leading); margin-block: 0; padding-bottom: var(--hero-carousel-heading-tail); } html[dir="rtl"] :is(.hero, .subpage-hero--carousel) .hero-content-copy h1:has(.hero-line-mark) { line-height: var(--hero-carousel-heading-leading-ar); } .hero-content-copy p:has(.hero-line-mark) { display: block; margin-block: 0; margin-block-start: var(--hero-carousel-lead-gap); line-height: var(--hero-carousel-lead-leading); } @media (min-width: 981px) { .subpage-hero--carousel .hero-content-copy { max-width: var(--hero-carousel-copy-width-wide); } } .subpage-hero--carousel .hero-content-copy :is(h1, p) { color: var(--hero-carousel-ink); }  .subpage-hero--carousel .hero-content-copy h1 { font-weight: var(--hero-carousel-heading-weight); max-inline-size: var(--hero-carousel-heading-measure); } .subpage-hero--carousel .hero-content-copy p { max-inline-size: var(--hero-carousel-lead-measure); } .subpage-hero--carousel .hero-content-copy .em { color: var(--hero-carousel-em); font-weight: 700; } .subpage-hero--carousel .subpage-hero-media::after { display: none; } .subpage-hero--carousel .subpage-hero-media img { filter: none;  object-position: var(--hero-carousel-object-position); }  .subpage-hero--carousel .cta-actions { gap: var(--hero-carousel-actions-gap); margin-block-start: var(--hero-carousel-actions-margin); } .subpage-hero--carousel .cta-actions .btn { min-block-size: var(--hero-carousel-button-min-block); padding-block: 0; padding-inline: var(--hero-carousel-button-padding-inline); } @media (max-width: 720px) { .subpage-hero--carousel .cta-actions { gap: var(--hero-carousel-actions-gap-mobile); margin-block-start: var(--hero-carousel-actions-margin-mobile); } .subpage-hero--carousel .cta-actions .btn { min-block-size: var(--hero-carousel-button-min-block-mobile); padding-inline: var(--hero-carousel-button-padding-inline-mobile); } } @media (max-width: 640px) { .hero .hero-content { min-block-size: var(--hero-carousel-height-mobile); } .subpage-hero--carousel { min-block-size: var(--hero-carousel-height-mobile); } }  @media (max-width: 980px) { .subpage-hero--carousel > .wrap { inline-size: 100%; } }  .hero-carousel-copy { position: absolute; inset-inline: 0; inset-block-start: 0; opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out); } .hero-carousel-copy.is-active { position: relative; opacity: 1; visibility: visible; } @media (max-width: 560px) { .hero .hero-actions, .subpage-hero--carousel .cta-actions { display: flex; flex-direction: column; align-items: stretch; } .hero .hero-actions .btn, .subpage-hero--carousel .cta-actions .btn { flex: 0 0 auto; inline-size: 100%; white-space: nowrap; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .hero-carousel-copy { transition: none; } } .hero-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); } .hero-carousel-slide.is-active { opacity: 1; z-index: 1; } @media (prefers-reduced-motion: reduce) { .hero-carousel-slide { transition: none; } }  .hero-carousel-ind { position: relative; z-index: 1; display: flex; gap: var(--hero-carousel-rail-gap); margin-block-start: var(--hero-carousel-rail-margin); inline-size: var(--hero-carousel-rail-width); } .hero-carousel-dot { flex: 1 1 0; inline-size: auto;  block-size: 44px; margin-block: 0; padding: 0; border: 0; border-radius: var(--r); background: transparent; cursor: pointer; position: relative; overflow: visible; } .hero-carousel-dot::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: calc((100% - var(--hero-carousel-rail-height)) / 2); block-size: var(--hero-carousel-rail-height); border-radius: var(--r); background: color-mix(in srgb, var(--hero-carousel-ink) var(--hero-carousel-rail-rest), transparent); } .hero-carousel-dot::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc((100% - var(--hero-carousel-rail-height)) / 2); block-size: var(--hero-carousel-rail-height); border-radius: var(--r); z-index: 1; inline-size: 0; background: var(--hero-carousel-ink); } .hero-carousel-dot.is-active::before { inline-size: 100%; transition: inline-size var(--hero-carousel-interval) linear; } .hero-carousel-dot.is-done::before { inline-size: 100%; transition: none; } .hero-carousel .hero-carousel-dot:focus-visible, .subpage-hero--carousel .hero-content-copy :focus-visible { outline: var(--hero-carousel-focus-width) solid var(--hero-carousel-focus); outline-offset: var(--hero-carousel-focus-offset); } @media (max-width: 720px) { .hero-carousel-ind { inline-size: 100%; gap: var(--hero-carousel-rail-gap-mobile); } } @media (prefers-reduced-motion: reduce) { .hero-carousel-dot.is-active::before { transition: none; } }  .subpage-hero--carousel .hero-carousel-hint { position: relative; z-index: 2;  align-self: stretch; inline-size: fit-content; margin-left: 24px; margin-right: auto; margin-block-end: var(--hero-carousel-hint-gap); display: flex; align-items: center; gap: 10px; color: var(--hero-carousel-hint-ink); font-size: var(--type-meta); letter-spacing: 0; } .subpage-hero--carousel .hero-carousel-hint-dot { inline-size: 2px; block-size: 34px; background: color-mix(in srgb, var(--hero-carousel-hint-ink) 28%, transparent); position: relative; overflow: hidden; } .subpage-hero--carousel .hero-carousel-hint-dot::after { content: ""; position: absolute; inset-block-start: 4px; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 3px; block-size: 8px; background: var(--hero-carousel-hint-ink); border-radius: var(--r); animation: hero-carousel-hint-fall 2s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes hero-carousel-hint-fall { 0% { opacity: 0; inset-block-start: 4px; } 20% { opacity: 1; } 72% { opacity: 1; inset-block-start: 24px; } 100% { opacity: 0; inset-block-start: 24px; } } @media (max-width: 720px) { .subpage-hero--carousel .hero-carousel-hint { display: none; } } @media (prefers-reduced-motion: reduce) { .subpage-hero--carousel .hero-carousel-hint-dot::after { animation: none; inset-block-start: 11px; opacity: 1; } }  .subpage-hero--sectors { flex-direction: column; justify-content: space-between; row-gap: var(--hero-carousel-rail-margin); padding-block-end: 0; }  @media (max-width: 980px) { .subpage-hero--sectors > .wrap { inline-size: 100%; } } .hero-carousel-sectors { position: relative; z-index: 2; inline-size: 100%; background: var(--surface-inverse); } .hero-carousel-sectors-head { display: grid; place-items: center; min-block-size: 42px; background: color-mix(in srgb, var(--surface-inverse) 90%, transparent); } .hero-carousel-sectors-label { color: var(--brand-white); font-size: var(--type-body); font-weight: 700; } .sector-grid--content.sector-grid--hero { grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr)); gap: 4px; } .sector-grid--content.sector-grid--hero .sector-card { min-block-size: 0; } .sector-grid--content.sector-grid--hero .sector-card-body { padding: 18px; gap: 6px; } .sector-grid--content.sector-grid--hero .sector-card-mark { inline-size: auto; block-size: auto; place-items: start; background: none; }  .sector-grid--content.sector-grid--hero .sector-card-veil, .sector-grid--content.sector-grid--hero .sector-card-media::after { display: none; } .sector-grid--content.sector-grid--hero .sector-card-body { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-inverse) 60%, transparent)); }  .sector-grid--content.sector-grid--hero .sector-card { --sector-reveal: calc(var(--type-action) * 1.5 + 6px); } .sector-grid--content.sector-grid--hero .sector-card-action { min-block-size: 0; padding: 0; margin: 0 0 calc(-1 * var(--sector-reveal)); line-height: 1.5; } .sector-grid--content.sector-grid--hero .sector-card-action::after { content: none; } .sector-grid--content.sector-grid--hero .sector-card-body > * { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .sector-grid--content.sector-grid--hero .sector-card:is(:hover, :focus-within) .sector-card-body > * { transform: translateY(calc(-1 * var(--sector-reveal))); } .sector-grid--content.sector-grid--hero .sector-card:is(:hover, :focus-within) .sector-card-mark { opacity: 0; } .sector-grid--content.sector-grid--hero .sector-card:is(:hover, :focus-within) .sector-card-action { opacity: 1; }  @media (hover: none), (pointer: coarse) { .sector-grid--content.sector-grid--hero .sector-card-action { margin: 0; } } @media (prefers-reduced-motion: reduce) { .sector-grid--content.sector-grid--hero .sector-card-body > * { transition: none; } }  @media (max-width: 980px) { .sector-grid--content.sector-grid--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }  .sector-grid--content.sector-grid--hero .sector-card-body { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-inverse) 45%, transparent), color-mix(in srgb, var(--surface-inverse) 80%, transparent)); } .sector-grid--content.sector-grid--hero :is(.sector-card-title, .sector-card-title a) { font-size: var(--type-lead); } .sector-grid--content.sector-grid--hero .sector-card-img { object-position: center; }  .sector-grid--content.sector-grid--hero .sector-card { border-radius: 0; } .hero-carousel-sectors-label { font-size: var(--type-meta); font-weight: 500; }  .sector-grid--content.sector-grid--hero .sector-card { min-block-size: 0; } .sector-grid--content.sector-grid--hero .sector-card-title { min-block-size: 2lh; }  .sector-grid--content.sector-grid--hero .sector-card-body { position: relative; z-index: 1; padding-block: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-inverse) 50%, transparent), color-mix(in srgb, var(--surface-inverse) 72%, transparent)); }