/* Reference canvas: 1536 × 864. All assets are local; no build step required. */
:root {
  color-scheme: dark;
  --cyan: #10d1ed;
  --white: #f8f8f8;
  --muted: #dedede;
  --ink: #101612;
  --unit: clamp(.72px, .0651041667vw, 1.35px);
  --page-gutter: calc(65 * var(--unit));
  font-family: "Inter", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  color: var(--white);
  background: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a { outline-offset: 6px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); }
button { border: 0; }
a { color: inherit; text-decoration: none; }
button, p, h1, h2 { margin: 0; }
button { background: transparent; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.hero { position: relative; isolation: isolate; min-height: max(100svh, calc(790 * var(--unit))); overflow: clip; }
.hero__image, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__image { object-fit: cover; object-position: center; }
.hero__shade { z-index: -1; background: linear-gradient(90deg, rgb(3 10 5 / 72%) 0%, rgb(5 10 7 / 66%) 29%, rgb(8 12 9 / 21%) 49%, transparent 68%), linear-gradient(0deg, rgb(3 9 7 / 22%), transparent 27%); }
.header { position: absolute; z-index: 2; inset: 0 0 auto; padding: calc(14 * var(--unit)) calc(38 * var(--unit)) 0 calc(56 * var(--unit)); display: flex; align-items: flex-start; gap: calc(45 * var(--unit)); }
.brand { display: block; flex-shrink: 0; width: calc(224 * var(--unit)); }
.brand img { display: block; width: 100%; height: auto; }
.navigation { display: flex; align-items: center; justify-content: space-between; gap: calc(45 * var(--unit)); padding-top: calc(17 * var(--unit)); }
.navigation button { padding: calc(10 * var(--unit)) 0; white-space: nowrap; font-size: calc(16 * var(--unit)); font-weight: 400; letter-spacing: -.035em; transition: color 180ms ease; }
.navigation button:hover { color: var(--cyan); }
.header__actions { display: flex; align-items: center; margin-left: auto; gap: calc(30 * var(--unit)); padding-top: calc(9 * var(--unit)); }
.location { display: flex; align-items: center; gap: calc(7 * var(--unit)); padding: 8px 0; white-space: nowrap; font-size: calc(16 * var(--unit)); letter-spacing: -.04em; }
.location__pin { width: calc(23 * var(--unit)); height: calc(28 * var(--unit)); }
.location__chevron { width: calc(15 * var(--unit)); height: calc(15 * var(--unit)); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: calc(11 * var(--unit)); min-height: calc(56 * var(--unit)); padding: calc(16 * var(--unit)) calc(26 * var(--unit)); border: 1px solid transparent; border-radius: calc(11 * var(--unit)); font-size: calc(16 * var(--unit)); font-weight: 500; line-height: 1.3; letter-spacing: -.035em; white-space: nowrap; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button--header { min-height: calc(52 * var(--unit)); padding: calc(14 * var(--unit)) calc(21 * var(--unit)); color: #072a31; background: var(--cyan); }
.button--header:hover, .button--primary:hover { background: #45def2; }
.button--primary { background: var(--cyan); }
.button--primary .icon { width: calc(21 * var(--unit)); height: calc(21 * var(--unit)); }
.button--outline { border-color: rgb(255 255 255 / 86%); background: rgb(10 15 13 / 12%); box-shadow: inset 0 0 0 .35px rgb(255 255 255 / 40%); }
.button--outline:hover { background: rgb(255 255 255 / 12%); border-color: var(--white); }
.menu-toggle { display: none; }
.hero__content { position: relative; margin-left: var(--page-gutter); padding-top: max(calc(160 * var(--unit)), 19.9svh); padding-bottom: calc(180 * var(--unit)); width: calc(650 * var(--unit)); }
.eyebrow { display: flex; align-items: center; gap: calc(16 * var(--unit)); font-size: calc(11 * var(--unit)); font-weight: 500; line-height: 1.4; letter-spacing: .47em; text-transform: uppercase; }
.eyebrow > span { width: calc(30 * var(--unit)); height: 1px; background: var(--cyan); }
.hero__title { margin-top: calc(17 * var(--unit)); font-size: calc(86 * var(--unit)); line-height: .85; font-weight: 600; letter-spacing: -.02em; }
.hero__title > span { color: var(--cyan); }
.hero__word { display: inline-block; transform: scaleX(1.075); transform-origin: left; }
.hero__word--2, .hero__word--3 { display: none; }
.hero__description { margin-top: calc(16 * var(--unit)); font-size: calc(21 * var(--unit)); font-weight: 400; line-height: 1.24; letter-spacing: -.025em; color: var(--muted); }
.hero__buttons { display: flex; gap: calc(16 * var(--unit)); margin-top: calc(26 * var(--unit)); }
.hero__buttons .button--primary { width: calc(260 * var(--unit)); min-width: calc(260 * var(--unit)); padding-inline: calc(18 * var(--unit)); font-size: calc(15 * var(--unit)); font-weight: 400; }
.hero__buttons .button--outline { min-width: calc(234 * var(--unit)); }
.benefits { display: flex; align-items: center; list-style: none; padding: 0; margin: calc(35 * var(--unit)) 0 0; }
.benefits li { display: flex; align-items: center; gap: calc(13 * var(--unit)); padding-inline: calc(17 * var(--unit)); font-size: calc(14 * var(--unit)); line-height: 1.35; letter-spacing: -.035em; }
.benefits li:first-child { padding-left: 0; }
.benefits li + li { border-left: 1px solid rgb(255 255 255 / 55%); }
.benefit__icon { width: calc(38 * var(--unit)); height: calc(38 * var(--unit)); color: var(--cyan); }
.hero__note { position: absolute; top: 21.2%; right: calc(104 * var(--unit)); padding-left: calc(36 * var(--unit)); border-left: 2px solid var(--cyan); font-size: calc(11 * var(--unit)); line-height: 1.6; font-weight: 400; text-transform: uppercase; }
.hero__footer { position: absolute; inset: auto calc(60 * var(--unit)) calc(44 * var(--unit)) calc(63 * var(--unit)); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.scroll-cue { display: flex; align-items: center; gap: calc(15 * var(--unit)); padding: 0 0 calc(5 * var(--unit)); }
.scroll-cue > span:last-child { font-size: calc(10 * var(--unit)); text-transform: uppercase; letter-spacing: .18em; }
.circle-button { display: inline-flex; align-items: center; justify-content: center; width: calc(49 * var(--unit)); height: calc(49 * var(--unit)); padding: 0; border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; transition: background 180ms ease, border-color 180ms ease; flex-shrink: 0; }
.circle-button:hover, .scroll-cue:hover .circle-button { border-color: var(--cyan); background: rgb(16 209 237 / 13%); }
.circle-button .icon { width: calc(25 * var(--unit)); height: calc(25 * var(--unit)); stroke-width: 1.4; }
.scroll-cue .icon { transform: rotate(90deg); }
.arrow-left { transform: rotate(180deg); }
.hero__footer-right { width: calc(468 * var(--unit)); }
.service-line { font-size: calc(11 * var(--unit)); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; margin-bottom: calc(12 * var(--unit)); text-align: right; }
.slider { display: flex; align-items: center; gap: calc(20 * var(--unit)); }
.slider__line { height: 1px; background: rgb(255 255 255 / 35%); flex: 1; }
.slider__count { display: flex; gap: calc(12 * var(--unit)); font-size: calc(12 * var(--unit)); color: #d8d8d8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slider__count > span { color: white; font-weight: 600; }
.slider__count i { font-style: normal; }
.slider__arrows { display: flex; gap: calc(20 * var(--unit)); }
.slider__arrows .circle-button { cursor: pointer; }
.slider__arrows--2, .slider__arrows--3, .slider__number--2, .slider__number--3 { display: none; }
.sr-only, .slider__radios { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; margin: -1px; border: 0; white-space: nowrap; }
.slider:focus-within .slider__arrows { outline: 2px solid var(--cyan); outline-offset: 5px; border-radius: 28px; }
.hero:has(#slide-2:checked) :is(.hero__word--1, .slider__number--1, .slider__arrows--1),
.hero:has(#slide-3:checked) :is(.hero__word--1, .slider__number--1, .slider__arrows--1) { display: none; }
.hero:has(#slide-2:checked) .hero__word--2,
.hero:has(#slide-3:checked) .hero__word--3 { display: inline-block; }
.hero:has(#slide-2:checked) :is(.slider__number--2, .slider__arrows--2),
.hero:has(#slide-3:checked) :is(.slider__number--3, .slider__arrows--3) { display: flex; }

/* Secondary panels keep the standalone hero's controls useful without JS. */
.panel, .mobile-menu { color: var(--white); background: #141c18; border: 1px solid #3c4640; border-radius: 18px; padding: 48px; width: min(640px, calc(100vw - 32px)); max-height: calc(100svh - 40px); margin: auto; overflow: auto; box-shadow: 0 24px 100px #0007; }
[popover]::backdrop { background: rgb(3 9 6 / 72%); backdrop-filter: blur(8px); }
.panel__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #25322b; z-index: 1; }
.panel__close:hover { background: #3b4d41; }
.panel .eyebrow { color: var(--cyan); font-size: 10px; letter-spacing: .2em; margin-bottom: 22px; }
.panel h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.045em; }
.panel h2 span { color: var(--cyan); }
.panel > p:not(.eyebrow) { color: #cbd1cd; font-size: 16px; line-height: 1.6; margin-top: 22px; }
.panel .button { font-size: 15px; min-height: 52px; margin-top: 26px; padding: 15px 22px; border-radius: 9px; gap: 12px; white-space: normal; }
.panel .button--primary, .mobile-menu .button--primary { color: #072a31; }
.panel__address { display: flex; align-items: center; gap: 16px; margin-top: 30px; font-size: 15px; line-height: 1.8; color: #cbd1cd; }
.panel__address .icon { color: var(--cyan); width: 30px; height: 34px; }
.panel__address strong { color: var(--white); font-weight: 500; }
.panel__benefits { padding-left: 20px; line-height: 2; color: #cbd1cd; margin-top: 20px; }
.panel__benefits li::marker { color: var(--cyan); }
.solution-list { display: grid; margin-top: 26px; }
.solution-list button { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 20px 0; border-bottom: 1px solid #ffffff26; }
.solution-list strong { display: block; font-size: 18px; font-weight: 500; }
.solution-list small { display: block; color: #b3c0b6; font-size: 14px; margin-top: 6px; }
.solution-list .icon, .panel__next .icon { color: var(--cyan); }
.solution-list button:hover strong, .panel__next:hover { color: var(--cyan); }
.panel__image { display: block; width: calc(100% + 96px); max-width: none; height: 240px; object-fit: cover; margin: -48px -48px 32px; }
.panel__next { display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 28px; font-size: 14px; line-height: 1.5; padding: 8px 0; }
.mobile-menu > img { margin-bottom: 24px; }
.mobile-menu > button:not(.panel__close):not(.button) { display: block; width: 100%; text-align: left; font-size: 22px; padding: 14px 0; }
.mobile-menu .button { width: 100%; margin-top: 20px; min-height: 52px; font-size: 15px; }

@media (min-width: 2000px) {
  .hero__content { padding-top: 23svh; }
  .header { gap: 60px; }
  .navigation { gap: 52px; }
}
@media (max-width: 1100px) {
  .header { align-items: center; padding-top: 18px; }
  .brand { width: 180px; }
  .navigation { gap: 22px; padding-top: 0; margin-left: auto; }
  .navigation button { font-size: 13px; }
  .header__actions { padding: 0; margin: 0; }
  .header__actions .location { display: none; }
  .button--header { font-size: 12px; min-height: 44px; padding: 12px 16px; }
  .hero__note { right: 38px; }
  .circle-button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 850px) {
  :root { --page-gutter: 32px; }
  .hero { min-height: max(780px, 100svh); }
  .header { padding: 18px 30px 0; }
  .brand { width: 184px; }
  .navigation { display: none; }
  .header__actions { margin-left: auto; }
  .button--header { font-size: 13px; }
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 44px; height: 44px; padding: 8px; }
  .menu-toggle span { display: block; width: 26px; height: 1px; background: white; }
  .hero__content { padding-top: 190px; padding-bottom: 180px; width: min(600px, calc(100% - 64px)); }
  .eyebrow { font-size: 10px; gap: 14px; }
  .hero__title { font-size: 72px; margin-top: 20px; }
  .hero__description { font-size: 19px; line-height: 1.4; margin-top: 26px; }
  .hero__buttons { margin-top: 26px; gap: 12px; }
  .hero__buttons .button { min-height: 52px; font-size: 14px; padding: 16px 18px; width: auto; min-width: auto; border-radius: 9px; }
  .benefits { margin-top: 32px; }
  .benefits li { font-size: 12px; gap: 9px; padding-inline: 14px; }
  .benefit__icon { width: 32px; height: 36px; }
  .hero__note { display: none; }
  .hero__footer { left: 32px; right: 32px; bottom: 30px; }
  .hero__footer-right { width: 340px; }
  .service-line { font-size: 7px; letter-spacing: .18em; }
  .scroll-cue > span:last-child { font-size: 8px; }
  .slider__count { font-size: 12px; }
  .slider, .slider__arrows { gap: 16px; }
}
@media (max-width: 580px) {
  :root { --page-gutter: 24px; }
  .hero { min-height: max(780px, 100svh); }
  .hero__image { object-position: 62% center; }
  .hero__shade { background: linear-gradient(90deg, rgb(3 10 5 / 76%), rgb(5 10 7 / 45%) 65%, rgb(8 12 9 / 22%)), linear-gradient(0deg, rgb(3 9 7 / 55%), transparent 45%); }
  .header { padding: 16px 18px 0 22px; justify-content: space-between; gap: 14px; }
  .brand { width: 170px; }
  .header__actions { display: none; }
  .hero__content { padding-top: 174px; padding-bottom: 155px; width: calc(100% - 48px); }
  .eyebrow { font-size: 9px; letter-spacing: .42em; }
  .eyebrow > span { width: 25px; }
  .hero__title { font-size: clamp(41px, 10.8vw, 62px); line-height: .97; letter-spacing: -.045em; margin-top: 21px; }
  .hero__description { font-size: 16px; line-height: 1.45; letter-spacing: -.025em; margin-top: 23px; max-width: 380px; }
  .desktop-break { display: none; }
  .hero__buttons { display: grid; gap: 10px; margin-top: 26px; max-width: 380px; }
  .hero__buttons .button { font-size: 14px; min-height: 51px; border-radius: 9px; }
  .hero__buttons .button .icon { width: 20px; height: 20px; }
  .benefits { justify-content: space-between; margin-top: 28px; max-width: 380px; gap: 10px; align-items: flex-start; }
  .benefits li { flex-direction: column; align-items: flex-start; padding: 0; gap: 9px; font-size: 11px; letter-spacing: -.04em; }
  .benefits li + li { border-left: 0; }
  .benefit__icon { width: 29px; height: 31px; }
  .hero__footer { left: 24px; right: 24px; bottom: 23px; align-items: center; gap: 12px; }
  .scroll-cue { padding: 0; gap: 11px; }
  .scroll-cue > span:last-child { font-size: 8px; max-width: 65px; line-height: 1.7; }
  .hero__footer-right { width: auto; }
  .service-line, .slider__line { display: none; }
  .slider, .slider__arrows { gap: 10px; }
  .slider__count { font-size: 10px; gap: 7px; margin-right: 3px; }
  .circle-button { width: 44px; height: 44px; }
  .circle-button .icon { width: 22px; height: 22px; }
  .panel, .mobile-menu { padding: 48px 26px 30px; border-radius: 14px; }
  .panel .eyebrow { font-size: 9px; line-height: 1.7; }
  .panel h2 { font-size: 31px; }
  .panel__image { width: calc(100% + 52px); height: 200px; margin: -48px -26px 26px; }
  .solution-list strong { font-size: 16px; }
  .solution-list small { font-size: 12px; }
}
@media (max-width: 360px) {
  .hero__content { padding-top: 145px; }
  .hero__title { font-size: 37px; }
  .hero__footer { left: 20px; right: 20px; }
  .scroll-cue > span:last-child { display: none; }
  .benefits li { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}