/* A single illuminated brand sculpture. All movement belongs to hero.js. */
.hero-story.hero-scroll { --hero-ground: #e7f0e9; --hero-ink: #103e35; --hero-muted: #49655b; height: auto; background: var(--hero-ground); }
.hero.hero-renewed { position: relative; isolation: isolate; height: auto; min-height: min(900px, 100svh); padding: 0 5%; background: var(--hero-ground); color: var(--hero-ink); overflow: clip; clip-path: none; }
.hero-nav { position: relative; z-index: 5; display: flex; align-items: center; gap: 40px; height: 112px; }
.hero-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--hero-ink); font-size: 25px; font-weight: 600; letter-spacing: -.8px; }
.hero-brand img { width: 43px; height: 43px; }
.hero-links { display: flex; gap: 36px; margin-inline-start: auto; }
.hero-links a { padding-block: 14px; font-size: 15px; color: var(--hero-muted); transition: color .2s; }
.hero-links a:hover { color: #006e63; }
.hero-renewed .lang-toggle { color: var(--hero-muted); border: 0; padding: 14px 0; font-size: 13px; margin: 0; min-height: 44px; }
.hero-composition { position: relative; min-height: 620px; display: grid; grid-template-columns: 45% 55%; align-items: center; }
.hero-heading { position: relative; z-index: 2; padding-bottom: 32px; }
.hero.hero-renewed h1 { width: auto; max-width: none; margin: 0 !important; font-family: Arial, Helvetica, sans-serif; font-size: clamp(64px, 7.3vw, 112px); line-height: .98; font-weight: 400; letter-spacing: -.065em; white-space: normal; text-align: start; animation: none; }
.hero-description { font-size: 18px; line-height: 1.5; color: var(--hero-muted); margin: 32px 0; }
.hero-explore { display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; min-height: 54px; padding: 15px 22px; background: #f99a1e; color: #103e35; font-size: 15px; border-radius: 0; transition: transform .25s, background .25s; }
.hero-explore:hover { background: #ffad38; transform: translateY(-3px); }
.hero-explore:active { transform: translateY(1px); }
.hero-art { position: relative; width: 118%; margin-inline-start: -7%; height: 620px; min-width: 0; }
.hero-sculpture { position: relative; display: none; width: 100%; height: 100%; outline-offset: -8px !important; touch-action: pan-y pinch-zoom; }
.hero-art.has-webgl .hero-sculpture { display: block; }
.hero-art.is-interactive .hero-sculpture { cursor: grab; }
.hero-art.is-interactive .hero-sculpture:active { cursor: grabbing; }
.hero-emblem-fallback { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; transform: perspective(900px) rotateY(-18deg) rotateZ(6deg); }
.hero-art.has-webgl .hero-emblem-fallback { visibility: hidden; }
.hero-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0 28px; position: relative; z-index: 3; color: var(--hero-muted); font-size: 14px; }
.hero-renewed :focus-visible { outline: 2px solid #006e63; outline-offset: 6px; }
.hero-scroll.is-live { height: 260svh; }
.hero-scroll.is-live .hero.hero-renewed { position: sticky; top: 0; height: 100svh; min-height: 0; display: flex; flex-direction: column; }
.hero-scroll.is-live .hero-nav, .hero-scroll.is-live .hero-foot { flex-shrink: 0; }
.hero-scroll.is-live .hero-composition { flex: 1; min-height: 0; }
.hero-scroll.is-live .hero-art { height: 100%; max-height: 740px; }
.lang-rtl .hero.hero-renewed h1 { font-family: 'NRT', sans-serif; letter-spacing: 0; font-size: clamp(58px, 6.5vw, 100px); line-height: 1.22; text-align: right; }
@media (min-width: 1600px) { .hero.hero-renewed { padding-inline: 7%; } }
@media (max-width: 1050px) {
  .hero-nav { gap: 26px; }
  .hero-links { gap: 24px; }
  .hero.hero-renewed h1 { font-size: 8vw; }
  .hero-art { height: 520px; }
  .hero-composition { min-height: 520px; }
}
@media (max-width: 650px) {
  .hero.hero-renewed { min-height: 0; padding-inline: 6%; }
  .hero-nav { height: auto; min-height: 100px; flex-wrap: wrap; gap: 0 18px; padding-top: 16px; }
  .hero-brand { font-size: 23px; }
  .hero-brand img { width: 36px; height: 36px; }
  .hero-links { order: 3; width: 100%; justify-content: space-between; margin: 0; gap: 16px; }
  .hero-links a { font-size: 14px; }
  .hero-renewed .lang-toggle { margin-inline-start: auto; }
  .hero-composition { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-top: 38px; }
  .hero-heading { padding: 0; }
  .hero.hero-renewed h1 { font-size: clamp(55px, 15vw, 86px); line-height: .98; }
  .hero-description { font-size: 16px; margin: 22px 0; }
  .hero-explore { min-height: 48px; padding: 12px 18px; }
  .hero-art { height: 360px; width: 116%; margin: -4px -8% -18px; }
  .hero-foot { padding-top: 0; font-size: 13px; }
  .lang-rtl .hero.hero-renewed h1 { font-size: 13vw; }
}

/* Depth scene. hero.js moves every layer at its own rate for pointer and scroll;
   everything below is the resting composition, which also serves no-JS and reduced motion. */
.hero-depth { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.hero-depth--back { z-index: 0; }
.hero-depth--front { z-index: 4; }
.hero-composition { z-index: 1; }
.hero-foot { z-index: 5; }
.hero-line { display: block; will-change: transform; }
.hero-stop { color: #f99a1e; }
.hero-sub { will-change: transform; }
.hero-field { position: absolute; inset: -12%; background-image: radial-gradient(circle, rgba(16, 62, 53, .2) 1.1px, transparent 1.6px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse 46% 52% at 68% 50%, #000 0, transparent 100%); mask-image: radial-gradient(ellipse 46% 52% at 68% 50%, #000 0, transparent 100%); will-change: transform; }
[dir="rtl"] .hero-field { -webkit-mask-image: radial-gradient(ellipse 46% 52% at 32% 50%, #000 0, transparent 100%); mask-image: radial-gradient(ellipse 46% 52% at 32% 50%, #000 0, transparent 100%); }
.hero-halo { position: absolute; inset: 2% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .4) 48%, rgba(255, 255, 255, 0)); will-change: transform; }
.hero-orbits { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; fill: none; will-change: transform; }
.hero-orbits ellipse { stroke: rgba(16, 62, 53, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-orbits circle { fill: #00a99d; }
.hero-orbit:nth-child(2) circle { fill: #f99a1e; }
.hero-shadow { position: absolute; left: 50%; bottom: 2%; width: 44%; height: 8%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(16, 62, 53, .26), rgba(16, 62, 53, 0)); filter: blur(6px); }
.hero-art { will-change: transform; }

.hero-bit { position: absolute; display: block; will-change: transform; }
.hero-bit--plus { top: 19%; inset-inline-start: 53%; width: 18px; height: 18px; background: linear-gradient(#103e35, #103e35) center / 100% 1.5px no-repeat, linear-gradient(#103e35, #103e35) center / 1.5px 100% no-repeat; opacity: .55; }
.hero-bit--ring { top: 74%; inset-inline-end: 7%; width: 92px; height: 92px; border: 1.5px solid rgba(0, 169, 157, .55); border-radius: 50%; }
.hero-bit--dot { top: 85%; inset-inline-start: 57%; width: 12px; height: 12px; border-radius: 50%; background: #00a99d; }
.hero-bit--orb { top: 21%; inset-inline-start: 46%; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffd693 0, #f99a1e 42%, #b55d05 100%); box-shadow: 0 14px 22px -10px rgba(140, 70, 0, .5); }
.hero-bit--pill { top: 15%; inset-inline-end: 6%; width: 128px; height: 30px; rotate: -24deg; border-radius: 30px; background: linear-gradient(180deg, #5fd3c6 0, #06917f 46%, #04594f 100%); box-shadow: 0 18px 26px -14px rgba(4, 70, 62, .6); }
.hero-bit--orb-teal { top: 77%; inset-inline-start: 42%; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #8fe6da 0, #06917f 45%, #04483f 100%); box-shadow: 0 22px 30px -16px rgba(4, 70, 62, .6); }
.hero-bit--near { top: 52%; inset-inline-end: -4%; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffd693 0, #f99a1e 42%, #b55d05 100%); filter: blur(9px); opacity: .9; }

/* Second act: the three services arrive as type behind and in front of the emblem. */
.hero-words { display: none; }
.hero-scroll.is-live .hero-words { display: block; position: absolute; inset: 0; }
.hero-word { position: absolute; left: 50%; opacity: 0; transform: translate3d(-50%, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: min(15vw, 25svh); line-height: 1; letter-spacing: -.06em; white-space: nowrap; will-change: transform, opacity; }
.hero-word--far { top: 17%; color: transparent; -webkit-text-stroke: 1.5px rgba(16, 62, 53, .3); }
.hero-word--mid { top: 39%; color: #9fcbbb; }
.hero-word--near { top: 63%; color: #103e35; }
.lang-rtl .hero-word { font-family: 'NRT', sans-serif; line-height: 1.3; }
.lang-rtl .hero-word--far { color: rgba(16, 62, 53, .1); -webkit-text-stroke: 0; }
.hero-scroll.is-live .hero.is-act2 .hero-heading { visibility: hidden; }

.hero-cue { display: none; position: relative; width: 1px; height: 38px; background: rgba(16, 62, 53, .2); overflow: hidden; }
.hero-scroll.is-live .hero-cue { display: block; }
.hero-cue::after { content: ''; position: absolute; inset: 0; background: #103e35; animation: hero-cue 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes hero-cue { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }

/* Entrance. Uses translate/scale so it never competes with the transforms hero.js writes. */
@keyframes hero-rise { from { opacity: 0; translate: 0 .42em; } }
@keyframes hero-settle { from { opacity: 0; scale: .9; } }
@keyframes hero-fade { from { opacity: 0; } }
.hero-line, .hero-sub { animation: hero-rise 1s cubic-bezier(.16, 1, .3, 1) backwards; }
.hero-line:nth-child(2) { animation-delay: .1s; }
.hero-sub { animation-delay: .24s; }
.hero-art { animation: hero-settle 1.5s cubic-bezier(.16, 1, .3, 1) backwards; }
.hero-bit, .hero-field { animation: hero-fade 1.4s .35s ease-out backwards; }

@media (max-width: 1050px) {
  .hero-bit--near { width: 120px; height: 120px; }
  .hero-scroll:not(.is-live) .hero-bit--orb-teal, .hero-scroll:not(.is-live) .hero-bit--ring { display: none; }
}
@media (max-width: 650px) {
  .hero-field { -webkit-mask-image: radial-gradient(ellipse 80% 34% at 50% 68%, #000 0, transparent 100%) !important; mask-image: radial-gradient(ellipse 80% 34% at 50% 68%, #000 0, transparent 100%) !important; }
  .hero-bit--plus, .hero-bit--dot, .hero-bit--orb-teal { display: none; }
  .hero-bit--orb { top: 41%; inset-inline-start: 80%; width: 22px; height: 22px; }
  .hero-bit--pill { top: 50%; inset-inline-end: 4%; width: 84px; height: 20px; }
  .hero-bit--near { top: 80%; inset-inline-end: -9%; width: 96px; height: 96px; filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-renewed * { transition: none !important; animation: none !important; }
}