/* ==========================================================================
   FRONTDESK — SKY DESIGN SYSTEM
   Bootstrap 5.3 supplies the reset, collapse, dropdown, accordion and modal.
   Everything visual is defined here, from one set of tokens.

   1. Tokens           6. Components (cards, icons, badges, media, chips)
   2. Base             7. Homepage sections
   3. Sky stage        8. Solution-page sections
   4. Header           9. Visit, contact, footer
   5. Heroes          10. Dialogs
                      11. Policy pages, responsive, reduced motion
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
}

:root {
  /* Brand */
  --sky-slate: #686868;
  --sky-cerulean: #1f8ccb;
  --sky-ocean: #1066af;
  --sky-ocean-deep: #0b4a80;
  --sky-navy: #0f2f4d;
  --sky-ink: #212529;
  --sky-surface: #f4f6f8;
  --sky-tint: #e8f3fb;

  /* Sky */
  --sky-zenith: #8fcdf2;
  --sky-mid: #cfeafa;
  --sky-horizon: #f4fafd;

  /* Text */
  --sky-text: #44505a;                 /* body copy directly on sky */
  --sky-text-paper: var(--sky-slate);  /* body copy on white */
  --sky-line: rgba(33, 37, 41, 0.1);
  --sky-border: #dde7ee;

  /* Type */
  --sky-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --sky-font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --sky-font-hand: "Caveat", "Segoe Print", cursive;
  --sky-leading: 1.6;

  /* Shape */
  --sky-radius-sm: 10px;
  --sky-radius: 16px;                  /* every card, frame and panel */
  --sky-pill: 999px;

  /* Rhythm */
  --sky-wrap: 1200px;
  --sky-gutter: clamp(20px, 5vw, 48px);
  --sky-section: clamp(48px, 6vw, 88px);
  --sky-head-gap: clamp(24px, 3.4vw, 44px);
  --sky-gap: clamp(16px, 2vw, 24px);
  --sky-header: 76px;

  /* Elevation */
  --sky-shadow-xs: 0 1px 2px rgba(15, 47, 77, 0.05);
  --sky-shadow-sm: 0 6px 18px -8px rgba(15, 47, 77, 0.18);
  --sky-shadow: 0 18px 40px -18px rgba(15, 47, 77, 0.28);
  --sky-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2. BASE ------------------------------------------------------------------ */

.sky-html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sky-header) + 16px);
  -webkit-text-size-adjust: 100%;
}

.sky-body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  font-family: var(--sky-font-body);
  font-size: 1.0625rem;
  line-height: var(--sky-leading);
  color: var(--sky-text);
  background: var(--sky-horizon);
  -webkit-font-smoothing: antialiased;
}

:where(.sky-body) :is(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--sky-font-display);
  font-weight: 700;
  color: var(--sky-navy);
  letter-spacing: -0.025em;
  text-wrap: balance;
  hyphens: none;
}
:where(.sky-body) h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1; letter-spacing: -0.035em; }
:where(.sky-body) h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.08; }
:where(.sky-body) h3 { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.25; letter-spacing: -0.015em; }
:where(.sky-body) p { margin: 0; text-wrap: pretty; hyphens: none; }
:where(.sky-body) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.sky-body) :is(img, video) { display: block; max-width: 100%; }
:where(.sky-body) a { color: inherit; text-decoration: none; }
:where(.sky-body) button { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.sky-body :focus-visible { outline: 3px solid var(--sky-cerulean); outline-offset: 3px; border-radius: 6px; }
.sky-body ::selection { background: rgba(31, 140, 203, 0.25); }

.sky-accent { color: var(--sky-ocean); }

/* Font Awesome 7 icons are inlined as SVG and sized by font-size. */
.sky-fa { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; overflow: visible; }

.sky-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--sky-pill);
  background: var(--sky-ocean);
  color: #fff !important;
  font-weight: 600;
  transform: translateY(-200%);
}
.sky-skip:focus { transform: none; }

.sky-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--sky-wrap) + var(--sky-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--sky-gutter);
}
.sky-main { position: relative; }
.sky-section { position: relative; padding-block: var(--sky-section); }
.sky-center { text-align: center; }

.sky-head { max-width: 760px; margin-bottom: var(--sky-head-gap); }
.sky-head--center { margin-inline: auto; text-align: center; }
.sky-head--center .sky-lead { margin-inline: auto; }
.sky-lead {
  max-width: 62ch;
  margin-top: 16px !important;
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.65;
}
.sky-lead + .sky-lead { margin-top: 12px !important; }

/* Handwritten note above a heading. */
.sky-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px !important;
  font-family: var(--sky-font-hand);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 600;
  line-height: 1;
  color: var(--sky-ocean);
  transform: rotate(-2deg);
  transform-origin: left center;
}
.sky-note::before {
  content: "";
  width: 36px;
  height: 2px;
  background-image: linear-gradient(90deg, currentColor 50%, transparent 0);
  background-size: 8px 2px;
}
.sky-head--center .sky-note { transform-origin: center; }

.sky-eyebrow {
  margin: 20px 0 10px !important;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-ocean);
}

/* 3. SKY STAGE ------------------------------------------------------------- */

.sky-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sky-zenith) 0%, var(--sky-mid) 50%, var(--sky-horizon) 100%);
}
.sky-tint { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--sky-ease); }
.sky-tint--mist  { background: linear-gradient(180deg, #eef5fa 0%, #f8fbfd 50%, #f1f6fa 100%); }
.sky-tint--clear { background: linear-gradient(180deg, #a6d8f4 0%, #d3ecf9 50%, #f1f9fd 100%); }
.sky-tint--warm  { background: linear-gradient(180deg, #c3e3f6 0%, #e9f4fa 54%, #fbf4e9 100%); }
.sky-tint--calm  { background: linear-gradient(180deg, #dbeffa 0%, #f2f9fd 100%); }
.sky-body[data-act="mist"] .sky-tint--mist,
.sky-body[data-act="clear"] .sky-tint--clear,
.sky-body[data-act="descent"] .sky-tint--warm,
.sky-body[data-act="landing"] .sky-tint--calm { opacity: 1; }

.sky-sun {
  position: absolute;
  top: -22vmax;
  right: -14vmax;
  width: 56vmax;
  height: 56vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 22%, rgba(255, 255, 255, 0) 60%);
  opacity: 0.6;
  transition: opacity 1.2s var(--sky-ease);
}
.sky-body[data-act="takeoff"] .sky-sun { opacity: 1; }
.sky-body[data-act="mist"] .sky-sun { opacity: 0.2; }

.sky-layer { position: absolute; inset: 0; transition: opacity 1.2s var(--sky-ease); }
.sky-layer--far  { opacity: 0.5; }
.sky-layer--mid  { opacity: 0.65; }
.sky-layer--near { opacity: 0.7; }
.sky-body[data-act="takeoff"] .sky-layer { opacity: 1; }
.sky-body[data-act="landing"] .sky-layer--near { opacity: 0.3; }

/* Clouds. --x, --y and --w place each one; sky.js reads --y for the parallax. */
.sky-cloud {
  position: absolute;
  left: var(--x, 50%);
  top: 0;
  width: var(--w, 30vw);
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  animation: sky-drift var(--drift, 60s) ease-in-out infinite alternate;
}
.sky-cloud--img { object-fit: contain; }
@keyframes sky-drift {
  from { translate: -2.5vw 0; }
  to   { translate: 2.5vw 0; }
}

/* CSS-drawn cloud: used until a cloud image URL is set in the CMS. */
.sky-cloud--css {
  aspect-ratio: 2.3 / 1;
  filter: blur(calc(var(--w, 30vw) * 0.012));
  background:
    radial-gradient(closest-side, #fff 0 46%, rgba(236, 244, 250, 0.92) 72%, rgba(236, 244, 250, 0) 100%) 52% 12% / 46% 96% no-repeat,
    radial-gradient(closest-side, #fff 0 46%, rgba(236, 244, 250, 0.92) 72%, rgba(236, 244, 250, 0) 100%) 22% 64% / 42% 74% no-repeat,
    radial-gradient(closest-side, #fff 0 46%, rgba(236, 244, 250, 0.92) 72%, rgba(236, 244, 250, 0) 100%) 82% 70% / 40% 66% no-repeat,
    radial-gradient(closest-side, #fff 0 40%, rgba(226, 238, 247, 0.9) 70%, rgba(226, 238, 247, 0) 100%) 50% 100% / 78% 52% no-repeat,
    radial-gradient(closest-side, #fff 0 40%, rgba(226, 238, 247, 0.85) 70%, rgba(226, 238, 247, 0) 100%) 4% 96% / 34% 40% no-repeat,
    radial-gradient(closest-side, #fff 0 40%, rgba(226, 238, 247, 0.85) 70%, rgba(226, 238, 247, 0) 100%) 98% 98% / 30% 36% no-repeat;
}
.sky-cloud--css.sky-cloud--wisp {
  aspect-ratio: 5 / 1;
  opacity: 0.7;
  filter: blur(calc(var(--w, 30vw) * 0.02));
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 100%) 30% 50% / 70% 70% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 100%) 78% 40% / 52% 54% no-repeat;
}
.sky-cloud--css.sky-cloud--bank {
  aspect-ratio: 3.4 / 1;
  background:
    radial-gradient(closest-side, #fff 0 46%, rgba(236, 244, 250, 0.92) 72%, rgba(236, 244, 250, 0) 100%) 8% 60% / 30% 80% no-repeat,
    radial-gradient(closest-side, #fff 0 46%, rgba(236, 244, 250, 0.92) 72%, rgba(236, 244, 250, 0) 100%) 30% 14% / 32% 100% no-repeat,
    radial-gradient(closest-side, #fff 0 46%, rgba(236, 244, 250, 0.92) 72%, rgba(236, 244, 250, 0) 100%) 54% 46% / 30% 84% no-repeat,
    radial-gradient(closest-side, #fff 0 46%, rgba(236, 244, 250, 0.92) 72%, rgba(236, 244, 250, 0) 100%) 76% 20% / 28% 92% no-repeat,
    radial-gradient(closest-side, #fff 0 46%, rgba(236, 244, 250, 0.92) 72%, rgba(236, 244, 250, 0) 100%) 96% 66% / 28% 70% no-repeat,
    radial-gradient(closest-side, #fff 0 44%, rgba(226, 238, 247, 0.9) 74%, rgba(226, 238, 247, 0) 100%) 50% 100% / 104% 56% no-repeat;
}
.sky-c1  { --x: 6%;   --y: 0.10; --w: 40vw; --drift: 90s; }
.sky-c2  { --x: 72%;  --y: 0.34; --w: 15vw; --drift: 76s; }
.sky-c3  { --x: 48%;  --y: 0.66; --w: 46vw; --drift: 110s; }
.sky-c4  { --x: 12%;  --y: 0.86; --w: 18vw; --drift: 82s; }
.sky-c5  { --x: -8%;  --y: 0.22; --w: 24vw; --drift: 64s; }
.sky-c6  { --x: 80%;  --y: 0.52; --w: 26vw; --drift: 58s; }
.sky-c7  { --x: 30%;  --y: 0.78; --w: 14vw; --drift: 70s; }
.sky-c8  { --x: 56%;  --y: 0.04; --w: 36vw; --drift: 96s; }
.sky-c9  { --x: 86%;  --y: 0.16; --w: 24vw; --drift: 52s; }
.sky-c10 { --x: -16%; --y: 0.58; --w: 34vw; --drift: 66s; }
.sky-c11 { --x: 62%;  --y: 0.88; --w: 18vw; --drift: 48s; }

/* The plane (homepage). Above the sky and hero video, below all content. */
.sky-flight {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--sky-ease);
}
.sky-flight.is-ready { opacity: 1; }
.sky-flight__trail {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 9;
  transition: stroke 0.6s;
}
.sky-flight.is-on-light .sky-flight__trail { stroke: rgba(16, 102, 175, 0.45); }
.sky-flight__plane { filter: drop-shadow(0 6px 8px rgba(11, 74, 128, 0.42)); }
.sky-flight__bank { animation: sky-bob 3.6s ease-in-out infinite alternate; }
@keyframes sky-bob {
  from { translate: 0 -3px; }
  to   { translate: 0 3px; }
}

/* 4. HEADER ---------------------------------------------------------------- */

/* At the top: transparent, part of the hero. Past the hero: a full-width
   frosted bar with a hairline divider. */
.sky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--sky-ease), border-color 0.3s var(--sky-ease), box-shadow 0.3s var(--sky-ease);
}
.sky-header.is-stuck,
.sky-header--solid,
.sky-header:has(.sky-mobile.show),
.sky-header:has(.sky-mobile.collapsing),
.sky-header:has(.sky-mega__panel.show) {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom-color: rgba(15, 47, 77, 0.1);
  box-shadow: 0 6px 24px -18px rgba(15, 47, 77, 0.5);
}
.sky-nav { position: relative; display: block; padding: 0; }
.sky-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: calc(var(--sky-wrap) + var(--sky-gutter) * 2);
  min-height: var(--sky-header);
  margin-inline: auto;
  padding-inline: var(--sky-gutter);
}
.sky-nav__brand { display: inline-flex; align-items: center; min-height: 44px; }
.sky-nav .sky-nav__logo { height: 28px; width: auto; }
.sky-nav .sky-nav__logo--light { display: none; }
.sky-nav__desktop { align-items: center; gap: 8px; }
.sky-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--sky-pill);
  background: transparent;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sky-navy);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.sky-nav__link:hover,
.sky-nav__link[aria-expanded="true"] { background: rgba(15, 47, 77, 0.07); }
.sky-nav__link.is-current { color: var(--sky-ocean); }
.sky-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sky-shadow-sm);
  color: var(--sky-navy);
  cursor: pointer;
}

/* Homepage, at the top: white logo and links over the footage. */
.sky-body--home .sky-header:not(.is-stuck):not(:has(.sky-mobile.show)):not(:has(.sky-mobile.collapsing)):not(:has(.sky-mega__panel.show)) .sky-nav__logo--dark { display: none; }
.sky-body--home .sky-header:not(.is-stuck):not(:has(.sky-mobile.show)):not(:has(.sky-mobile.collapsing)):not(:has(.sky-mega__panel.show)) .sky-nav__logo--light { display: block; }
.sky-body--home .sky-header:not(.is-stuck):not(:has(.sky-mobile.show)):not(:has(.sky-mobile.collapsing)):not(:has(.sky-mega__panel.show)) .sky-nav__link { color: #fff; }
.sky-body--home .sky-header:not(.is-stuck):not(:has(.sky-mobile.show)):not(:has(.sky-mobile.collapsing)):not(:has(.sky-mega__panel.show)) .sky-nav__link:hover { background: rgba(255, 255, 255, 0.16); }
.sky-body--home .sky-header:not(.is-stuck):not(:has(.sky-mobile.show)):not(:has(.sky-mobile.collapsing)):not(:has(.sky-mega__panel.show)) .sky-nav__toggle { background: #fff; color: var(--sky-navy); }
.sky-body--home .sky-header:not(.is-stuck):not(:has(.sky-mobile.show)):not(:has(.sky-mobile.collapsing)):not(:has(.sky-mega__panel.show)) .sky-nav__cta { background: #fff; color: var(--sky-ocean) !important; box-shadow: none; }

.sky-mega { position: static; }
.sky-mega__panel {
  left: 50% !important;
  right: auto !important;
  top: 100% !important;
  width: min(var(--sky-wrap), calc(100vw - var(--sky-gutter) * 2));
  margin-top: 8px !important;
  padding: 24px;
  border: 1px solid var(--sky-border);
  border-radius: var(--sky-radius);
  background: #fff;
  box-shadow: var(--sky-shadow);
  transform: translateX(-50%) !important;
}
.sky-mega__grid { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.sky-mega__tabs { gap: 4px; padding-right: 20px; border-right: 1px solid var(--sky-line); }
.sky-mega__tab {
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--sky-radius-sm);
  background: transparent;
  text-align: left;
  font-weight: 600;
  color: var(--sky-slate);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.sky-mega__tab:hover { background: var(--sky-surface); color: var(--sky-navy); }
.sky-mega__tab.active { background: var(--sky-ocean); color: #fff; }
.sky-mega__desc { margin-bottom: 12px !important; color: var(--sky-slate); font-size: 0.95rem; }
.sky-mega__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; }
.sky-mega__list a {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--sky-radius-sm);
  transition: background-color 0.2s, border-color 0.2s;
}
.sky-mega__list a:hover { background: var(--sky-surface); }
.sky-mega__list a.is-current { background: var(--sky-tint); border-color: rgba(16, 102, 175, 0.35); }
.sky-mega__icon { flex: none; width: 20px; margin-top: 2px; font-size: 1rem; color: var(--sky-ocean); }
.sky-mega__text strong { display: block; font-weight: 600; color: var(--sky-navy); line-height: 1.3; }
.sky-mega__list a.is-current strong { color: var(--sky-ocean); }
.sky-mega__text > span { display: block; margin-top: 2px; font-size: 0.85rem; line-height: 1.4; color: var(--sky-slate); }

.sky-mobile__inner {
  max-height: calc(100dvh - var(--sky-header));
  overflow-y: auto;
  padding: 4px var(--sky-gutter) 20px;
  border-top: 1px solid var(--sky-line);
}
.sky-mobile__group { border-bottom: 1px solid var(--sky-line); }
.sky-mobile__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-weight: 600;
  color: var(--sky-navy);
  cursor: pointer;
  list-style: none;
}
.sky-mobile__group summary::-webkit-details-marker { display: none; }
.sky-mobile__group[open] summary .sky-fa { transform: rotate(180deg); }
.sky-mobile__group ul { padding-bottom: 10px; }
.sky-mobile__group a { display: block; padding: 10px 12px; border-radius: var(--sky-radius-sm); }
.sky-mobile__group a.is-current { background: var(--sky-tint); }
.sky-mobile__group a strong { display: block; font-weight: 600; color: var(--sky-navy); }
.sky-mobile__group a.is-current strong { color: var(--sky-ocean); }
.sky-mobile__group a span { display: block; font-size: 0.875rem; color: var(--sky-slate); }
.sky-mobile__cta { width: 100%; margin-top: 16px; }

/* 5. HEROES ---------------------------------------------------------------- */

.sky-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--sky-header) + 32px) 0 clamp(56px, 9vh, 96px);
  overflow: hidden;
  color: #fff;
}
.sky-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #5f9fd6 0%, #9cc4e4 55%, #d5e2ec 100%);
}
.sky-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  opacity: 0;
  /* Lifts the footage without re-encoding it. */
  filter: brightness(1.22) saturate(1.2) contrast(0.96);
  transition: opacity 1.2s var(--sky-ease);
}
.sky-hero__video.is-playing { opacity: 1; }

/* The footage is shown as it is. Only a faint shade sits behind the text column. */
.sky-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 40, 76, 0.16) 0%, rgba(6, 40, 76, 0.06) 40%, rgba(6, 40, 76, 0) 62%);
}
.sky-hero__inner { width: 100%; }
.sky-hero__copy { max-width: 720px; }
.sky-hero h1 { color: #fff; text-shadow: 0 2px 3px rgba(6, 40, 76, 0.55), 0 0 28px rgba(6, 40, 76, 0.5), 0 8px 44px rgba(6, 40, 76, 0.45); }
/* The accent phrase stays white for contrast and is marked with a brush underline. */
.sky-hero h1 .sky-accent {
  color: #fff;
  background: linear-gradient(transparent 0 78%, rgba(31, 140, 203, 0.95) 78% 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sky-hero .sky-note { color: #fff; text-shadow: 0 1px 3px rgba(6, 40, 76, 0.75), 0 0 18px rgba(6, 40, 76, 0.6); }
.sky-hero__lead {
  max-width: 36em;
  margin-top: 20px !important;
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem);
  line-height: 1.55;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 2px rgba(6, 40, 76, 0.85), 0 0 22px rgba(6, 40, 76, 0.7);
}
.sky-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* Solution-page hero: fills the first screen, no footage, no plane. */
.sky-subhero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--sky-header) + 56px) 0 clamp(56px, 9vh, 110px);
  overflow: hidden;
}
/* A cloud bank along the foot of the hero gives the open sky a horizon. */
.sky-subhero__deck { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none; }
.sky-subhero__deck .sky-cloud { top: auto; bottom: -14%; animation-duration: 46s; }
.sky-subhero__deck .sky-cloud:nth-child(1) { --x: -14%; --w: 62vw; }
.sky-subhero__deck .sky-cloud:nth-child(2) { --x: 34%; --w: 58vw; bottom: -24%; animation-direction: alternate-reverse; }
.sky-subhero__deck .sky-cloud:nth-child(3) { --x: 72%; --w: 48vw; bottom: -8%; }
.sky-subhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.sky-subhero__grid--solo { grid-template-columns: minmax(0, 820px); }
.sky-subhero h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
.sky-subhero .sky-lead { margin-top: 20px !important; }
.sky-subhero .sky-btn { margin-top: 28px; }

.sky-subhero__crumbs { position: absolute; top: calc(var(--sky-header) + 12px); left: 0; right: 0; z-index: 2; }
.sky-crumbs { font-size: 0.9rem; font-weight: 600; }
.sky-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sky-crumbs li { display: inline-flex; align-items: center; gap: 10px; color: var(--sky-text); }
.sky-crumbs li + li::before { content: "/"; color: #93a3b0; font-weight: 400; }
.sky-crumbs a { color: var(--sky-ocean); transition: color 0.2s; }
.sky-crumbs a:hover { color: var(--sky-ocean-deep); }
.sky-crumbs [aria-current] { color: var(--sky-navy); }

/* Hero scene: the solution's icon sits at the centre as a hub, a dashed ring
   turns slowly around it, and the four key-benefit cards sit at the corners,
   each joined to the hub by a line whose dashes flow inward. */
.sky-scene {
  --scene-line: rgba(16, 102, 175, 0.45);
  --scene-ring: rgba(16, 102, 175, 0.3);
  position: relative;
  width: 100%;
  max-width: 580px;
  margin-left: auto;
  aspect-ratio: 10 / 9;
}
.sky-scene__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sky-scene__links path {
  fill: none;
  stroke: var(--scene-line);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
  vector-effect: non-scaling-stroke;
  animation: sky-flow 1.6s linear infinite;
}
@keyframes sky-flow {
  to { stroke-dashoffset: 24; }
}
.sky-scene__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 1;
  margin: -31% 0 0 -31%;
  border: 2px dashed var(--scene-ring);
  border-radius: 50%;
  animation: sky-spin 48s linear infinite;
}
.sky-scene__orbit i { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--scene-ring); }
.sky-scene__orbit i:nth-child(1) { left: 50%; top: 0; }
.sky-scene__orbit i:nth-child(2) { left: 6.7%; top: 75%; width: 11px; height: 11px; margin: -5.5px; }
.sky-scene__orbit i:nth-child(3) { left: 93.3%; top: 75%; width: 22px; height: 22px; margin: -11px; }
@keyframes sky-spin {
  to { transform: rotate(360deg); }
}
.sky-scene__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(96px, 21%, 128px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sky-ocean);
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.55), var(--sky-shadow);
}
.sky-scene__hub::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 3px solid var(--sky-cerulean);
  border-radius: 50%;
  animation: sky-ping 2.8s ease-out infinite;
}
@keyframes sky-ping {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}
.sky-scene .sky-highlights { position: absolute; inset: 0; z-index: 1; display: block; }
.sky-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sky-gap); }
.sky-highlights__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sky-scene .sky-highlights__card { position: absolute; width: 41%; }
.sky-scene .sky-highlights__card:nth-child(1) { left: 0; top: 0; }
.sky-scene .sky-highlights__card:nth-child(2) { right: 0; top: 7%; }
.sky-scene .sky-highlights__card:nth-child(3) { left: 3%; bottom: 5%; }
.sky-scene .sky-highlights__card:nth-child(4) { right: 2%; bottom: 0; }
.sky-highlights__card strong { font-family: var(--sky-font-display); font-size: 1.0625rem; line-height: 1.3; color: var(--sky-navy); }
@keyframes sky-float {
  from { transform: translateY(-5px); }
  to   { transform: translateY(5px); }
}

/* 6. COMPONENTS ------------------------------------------------------------ */

.sky-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: var(--sky-pill);
  font-family: var(--sky-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--sky-ease), box-shadow 0.2s;
}
.sky-btn .sky-fa { transition: transform 0.25s var(--sky-ease); }
.sky-btn:hover .sky-fa { transform: translateX(3px); }
.sky-btn:active { transform: scale(0.98); }
.sky-btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.sky-btn--block { width: 100%; }
.sky-btn--primary { background: var(--sky-ocean); color: #fff !important; box-shadow: var(--sky-shadow-xs); }
.sky-btn--primary:hover { background: var(--sky-ocean-deep); box-shadow: var(--sky-shadow-sm); }
.sky-btn--light { background: #fff; color: var(--sky-ocean) !important; box-shadow: 0 8px 22px -10px rgba(6, 40, 76, 0.6); }
.sky-btn--light:hover { background: #eaf5fc; }
.sky-btn--glass { border-color: rgba(255, 255, 255, 0.8); background: rgba(6, 40, 76, 0.38); color: #fff !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sky-btn--glass:hover { background: rgba(6, 40, 76, 0.6); border-color: #fff; }
.sky-btn--ghost { border-color: var(--sky-ocean); background: transparent; color: var(--sky-ocean) !important; }
.sky-btn--ghost:hover { background: var(--sky-ocean); color: #fff !important; }
.sky-btn[disabled] { opacity: 0.6; cursor: progress; }

.sky-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--sky-ocean) !important;
  cursor: pointer;
  transition: color 0.2s;
}
.sky-link:hover { color: var(--sky-ocean-deep) !important; }
.sky-link .sky-fa { transition: transform 0.25s var(--sky-ease); }
.sky-link:hover .sky-fa { transform: translateX(4px); }

/* The one card. Every boxed thing on the site is this. */
.sky-card {
  position: relative;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--sky-border);
  border-radius: var(--sky-radius);
  background: #fff;
  box-shadow: var(--sky-shadow-xs);
  color: var(--sky-text-paper);
}
.sky-card--hover,
.sky-card--link { transition: transform 0.25s var(--sky-ease), box-shadow 0.25s var(--sky-ease), border-color 0.25s; }
.sky-card--hover:hover,
.sky-card--link:hover { transform: translateY(-3px); border-color: rgba(31, 140, 203, 0.55); box-shadow: var(--sky-shadow); }
.sky-paper { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--sky-border); border-radius: var(--sky-radius); background: #fff; box-shadow: var(--sky-shadow-sm); color: var(--sky-text-paper); }

.sky-iconbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--sky-tint);
  color: var(--sky-ocean);
  font-size: 1.35rem;
}
.sky-iconbox--sm { width: 40px; height: 40px; border-radius: 10px; font-size: 1.05rem; }
.sky-card--hover:hover .sky-iconbox,
.sky-card--link:hover .sky-iconbox { background: var(--sky-ocean); color: #fff; }
.sky-iconbox { transition: background-color 0.25s, color 0.25s; }
.sky-iconbox:empty,
.sky-mega__icon:empty { display: none; }

.sky-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sky-ocean);
  font-family: var(--sky-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.sky-index { display: block; margin-bottom: 6px; font-family: var(--sky-font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--sky-ocean); }
.sky-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--sky-pill);
  background: var(--sky-tint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky-ocean);
}
.sky-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sky-tags li { padding: 2px 10px; border: 1px solid var(--sky-border); border-radius: var(--sky-pill); font-size: 0.8125rem; font-weight: 500; color: var(--sky-navy); }

.sky-ticks { display: grid; gap: 10px; margin-top: 20px !important; }
.sky-ticks li { display: flex; align-items: flex-start; gap: 12px; color: var(--sky-navy); font-weight: 500; }
.sky-ticks .sky-fa { margin-top: 5px; color: var(--sky-ocean); }

.sky-steps { counter-reset: step; display: grid; gap: 10px; }
.sky-steps li { counter-increment: step; display: flex; align-items: center; gap: 12px; color: var(--sky-navy); font-weight: 500; line-height: 1.4; }
.sky-steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sky-ocean);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.sky-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sky-chip {
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px solid #c9dceb;
  border-radius: var(--sky-pill);
  background: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--sky-navy);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.sky-chip:hover { border-color: var(--sky-ocean); color: var(--sky-ocean); }
.sky-chip.is-active { border-color: var(--sky-ocean); background: var(--sky-ocean); color: #fff; }

/* Media frame with a visible play / expand affordance. */
.sky-media {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sky-border);
  border-radius: var(--sky-radius);
  background: #fff;
  box-shadow: var(--sky-shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s var(--sky-ease), box-shadow 0.25s var(--sky-ease), border-color 0.25s;
}
button.sky-media:hover { transform: translateY(-3px); border-color: rgba(31, 140, 203, 0.55); box-shadow: var(--sky-shadow); }
/* Screen recordings come in every shape, so they are fitted inside the frame
   whole, on white, never cropped. */
.sky-media img,
.sky-media video { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #fff; }
div.sky-media { cursor: default; }
.sky-media--wide img,
.sky-media--wide video { aspect-ratio: 16 / 9; }
.sky-media__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--sky-ocean);
  box-shadow: 0 10px 26px -8px rgba(6, 40, 76, 0.65);
  transition: transform 0.25s var(--sky-ease), box-shadow 0.25s;
}
:hover > .sky-media__play { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.25), 0 10px 26px -8px rgba(6, 40, 76, 0.65); }
.sky-media__expand {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(11, 23, 34, 0.62);
  color: #fff;
}
.sky-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.sky-dots span,
.sky-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(11, 23, 34, 0.25); transition: background-color 0.2s, transform 0.2s; }
.sky-dots .is-active { background: #fff; transform: scale(1.3); }

.sky-js .sky-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease-out, transform 0.45s var(--sky-ease), box-shadow 0.25s var(--sky-ease), border-color 0.25s; }
.sky-js .sky-reveal.is-in { opacity: 1; transform: none; }
.sky-js .sky-reveal.is-in.sky-card--hover:hover { transform: translateY(-3px); }

/* 7. HOMEPAGE SECTIONS ----------------------------------------------------- */

/* Numbered lists (problems, benefits): dividers only between items. */
.sky-problems__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.sky-problems__head { position: sticky; top: calc(var(--sky-header) + 32px); margin-bottom: 0; }
.sky-problems__list li { display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; padding: 22px 0; }
.sky-problems__list li:first-child { padding-top: 0; }
.sky-problems__list li:last-child { padding-bottom: 0; }
.sky-problems__list li + li { border-top: 1px solid var(--sky-line); }
.sky-problems__num { font-family: var(--sky-font-display); font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--sky-ocean); }
.sky-problems__list h3 { margin-bottom: 6px; }

/* Solutions directory: one toolbar card holding search and both filters. */
.sky-directory__bar {
  display: grid;
  gap: 16px;
  margin-bottom: var(--sky-gap);
  padding: clamp(14px, 1.8vw, 20px);
  border: 1px solid var(--sky-border);
  border-radius: var(--sky-radius);
  background: #fff;
  box-shadow: var(--sky-shadow-xs);
}
.sky-directory__search {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid transparent;
  border-radius: var(--sky-radius-sm);
  background: var(--sky-surface);
  color: var(--sky-slate);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.sky-directory__search:focus-within { border-color: var(--sky-cerulean); background: #fff; box-shadow: 0 0 0 4px rgba(31, 140, 203, 0.18); }
.sky-directory__search input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--sky-ink); }
.sky-directory__search input::placeholder { color: #7b8690; }
.sky-directory__filters { display: grid; gap: 12px; }
.sky-filter { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.sky-filter__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky-slate); }
.sky-directory__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sky-gap); }
.sky-directory__list li[hidden] { display: none; }
.sky-directory__list a { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 18px; }
.sky-directory__text { flex: 1; min-width: 0; }
.sky-directory__list strong { display: block; font-family: var(--sky-font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--sky-navy); }
.sky-directory__text > span { display: block; margin-top: 4px; font-size: 0.9rem; line-height: 1.5; }
.sky-directory__list a > .sky-icon { margin-top: 5px; color: #9fb6c7; transition: transform 0.25s var(--sky-ease), color 0.25s; }
.sky-directory__list a:hover > .sky-icon { transform: translateX(3px); color: var(--sky-ocean); }
.sky-directory__list a:hover strong { color: var(--sky-ocean); }
.sky-directory__empty { padding: 28px 10px; text-align: center; }
.sky-directory__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: clamp(36px, 4.5vw, 56px); }
.sky-directory__foot:not(:has(button:not([hidden]))) { display: none; }
[data-sky-more][aria-expanded="true"] .sky-fa { transform: rotate(180deg); }

/* Rollout process (homepage): three icon cards. */
.sky-process__route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sky-gap); }
.sky-process__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sky-process__route h3 { margin-bottom: 8px; }

/* Workflow rows and feature rows. */
.sky-workflow {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.sky-workflow + .sky-workflow { margin-top: clamp(64px, 8vw, 120px); }
.sky-workflows .sky-head { margin-bottom: clamp(40px, 5vw, 72px); }
.sky-workflow--flip .sky-workflow__media { order: 2; }
.sky-workflow--text { grid-template-columns: minmax(0, 760px); }
.sky-workflow__copy h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; }
.sky-workflow__copy h3 + p { margin-top: 16px; line-height: 1.7; }
.sky-workflow__copy .sky-eyebrow { margin: 32px 0 16px !important; }
.sky-workflow__copy .sky-steps { gap: 14px; }
.sky-workflow__copy .sky-ticks { margin-top: 24px !important; gap: 12px; }
.sky-workflow__copy .sky-btn { margin-top: 32px; }

/* One partner, the whole stack. */
.sky-stack__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sky-stack__head { margin-bottom: 0; }
.sky-stack__head h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.sky-stack__head .sky-btn { margin-top: 26px; }
.sky-stack__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sky-stack__cards li { display: flex; align-items: center; gap: 12px; padding: 16px; }
.sky-stack__cards strong { font-weight: 600; line-height: 1.3; color: var(--sky-navy); }

/* Why Frontdesk. */
.sky-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sky-gap); }
.sky-why__grid .sky-iconbox { margin-bottom: 18px; }
.sky-why__grid h3 { margin-bottom: 8px; }
.sky-why__grid p { font-size: 0.975rem; }

/* Experience cards. */
.sky-postcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sky-gap); align-items: stretch; }
.sky-postcards li[hidden] { display: none; }
.sky-postcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer; }
.sky-postcard__media { position: relative; background: var(--sky-surface); overflow: hidden; }
/* The strip is moved by the arrows only, so a swipe or wheel over it scrolls the page. */
.sky-postcard__track { display: flex; overflow: hidden; }
.sky-postcard__slide { flex: 0 0 100%; }
.sky-postcard__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: var(--sky-shadow-sm); color: var(--sky-navy); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.sky-postcard__nav--prev { left: 10px; }
.sky-postcard__nav--next { right: 10px; }
.sky-postcard__nav:hover,
.sky-postcard__nav:focus-visible { background: var(--sky-ocean); color: #fff; }
.sky-2d .sky-postcard__nav { border: 2px solid var(--toon-ink); box-shadow: 0 3px 0 var(--toon-ink); }
.sky-postcard__slide img,
.sky-postcard__slide video { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; transition: transform 0.6s var(--sky-ease); }
.sky-postcard:hover .sky-postcard__slide img,
.sky-postcard:hover .sky-postcard__slide video { transform: scale(1.05); }
.sky-postcard .sky-media__expand { opacity: 0.85; transition: opacity 0.2s, background-color 0.2s; }
.sky-postcard:hover .sky-media__expand { opacity: 1; background: var(--sky-ocean); }
.sky-postcard__copy { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.sky-postcard__copy h3 { margin-bottom: 8px; }
.sky-postcard__copy p { font-size: 0.95rem; line-height: 1.55; }
.sky-postcard__for { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; }
.sky-activities .sky-center { margin-top: var(--sky-head-gap); }
/* Catalogue search: a rounded pill with room to breathe. */
.sky-catalog__search { max-width: 640px; min-height: 58px; margin: 0 auto var(--sky-head-gap); padding: 0 22px; border: 1.5px solid var(--sky-border); border-radius: var(--sky-pill); background: #fff; box-shadow: var(--sky-shadow-sm); }
.sky-catalog__search .sky-icon { color: var(--sky-ocean); }
.sky-catalog__search input { height: 54px; font-size: 1.0625rem; }

/* Video showcase: one card per video, footers on one baseline. */
.sky-videos__rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 290px)); gap: var(--sky-gap); align-items: stretch; }
.sky-videos__card { display: flex; flex-direction: column; padding: 12px 12px 16px; }
.sky-videos__thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--sky-radius-sm); background: #0b1722; overflow: hidden; cursor: pointer; }
.sky-videos__thumb img,
.sky-videos__thumb video { width: 100%; aspect-ratio: 9 / 16; height: auto; object-fit: cover; }
.sky-videos__card h3 { display: flex; align-items: flex-start; min-height: 2.5em; margin: 16px 4px 6px; }
.sky-videos__card p { flex: 1; margin-inline: 4px; font-size: 0.95rem; line-height: 1.55; }
.sky-videos__link { margin: 12px 4px 0; }

/* FAQ. */
.sky-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sky-faq__grid .sky-head { position: sticky; top: calc(var(--sky-header) + 32px); margin-bottom: 0; }
.sky-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--sky-line);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--sky-ocean);
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 20px;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  padding: 4px clamp(18px, 2.6vw, 32px);
  border: 1px solid var(--sky-border);
  border-radius: var(--sky-radius);
  background: #fff;
  box-shadow: var(--sky-shadow-sm);
}
.sky-accordion .accordion-item { border-width: 0 0 1px; border-radius: 0 !important; }
.sky-accordion .accordion-item:last-child { border-bottom: 0; }
.sky-accordion .accordion-button {
  min-height: 48px;
  font-family: var(--sky-font-display);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--sky-navy);
  box-shadow: none;
}
.sky-accordion .accordion-button:focus-visible { outline: 3px solid var(--sky-cerulean); outline-offset: 2px; }
.sky-accordion .accordion-body { max-width: 68ch; padding-bottom: 22px; color: var(--sky-text-paper); }

/* 8. SOLUTION-PAGE SECTIONS ------------------------------------------------ */

/* Features: card grid when no item has media, pinned media when one does. */
.sky-features__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sky-gap); }
.sky-features__cards .sky-iconbox { margin-bottom: 16px; }
.sky-features__cards h3 + p,
.sky-features__list h3 + p { margin-top: 8px; }
.sky-features__split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.sky-features__pin { position: sticky; top: 120px; }
.sky-features__list li { padding: 22px 0; }
.sky-features__list li:first-child { padding-top: 0; }
.sky-features__list li + li { border-top: 1px solid var(--sky-line); }

/* Process steps on a light dashed line. */
.sky-process__line { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.sky-process__line li { position: relative; }
.sky-process__line li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 42px;
  right: calc(-1 * clamp(20px, 3vw, 40px) + 12px);
  height: 2px;
  background-image: linear-gradient(90deg, rgba(16, 102, 175, 0.45) 45%, transparent 0);
  background-size: 10px 2px;
}
.sky-process__line .sky-badge { position: relative; margin-bottom: 16px; }
.sky-process__line h3 { margin-bottom: 8px; }
.sky-process__closer { margin-top: clamp(40px, 5vw, 64px); }
.sky-process__closer-title { margin-bottom: clamp(18px, 2.4vw, 28px) !important; font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important; color: var(--sky-navy); }

/* Integrations: points on the left, a small node diagram on the right. */
.sky-integrations__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sky-integrations__list { display: grid; gap: 14px; margin-top: var(--sky-head-gap) !important; }
.sky-integrations__list li { display: flex; align-items: flex-start; gap: 14px; line-height: 1.55; }
.sky-integrations__list li > span:last-child { padding-top: 7px; }
.sky-nodes { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin-inline: auto; }
.sky-nodes::before { content: ""; position: absolute; inset: 14%; border: 2px dashed rgba(16, 102, 175, 0.3); border-radius: 50%; }
.sky-nodes__hub {
  position: absolute;
  inset: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sky-ocean);
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 0 0 12px rgba(16, 102, 175, 0.12), var(--sky-shadow);
}
.sky-nodes__node {
  --angle: calc(var(--n) * 60deg - 90deg);
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 1px solid var(--sky-border);
  border-radius: 14px;
  background: #fff;
  color: var(--sky-ocean);
  font-size: 1.3rem;
  box-shadow: var(--sky-shadow-sm);
  transform: rotate(var(--angle)) translate(122px) rotate(calc(var(--angle) * -1));
}

/* 9. VISIT, CONTACT, FOOTER ------------------------------------------------ */

.sky-visit__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sky-gap); align-items: stretch; }
.sky-visit__map {
  position: relative;
  min-height: 340px;
  border: 1px solid var(--sky-border);
  border-radius: var(--sky-radius);
  background: var(--sky-surface);
  box-shadow: var(--sky-shadow-sm);
  overflow: hidden;
}
.sky-visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sky-visit__badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--sky-pill);
  background: #fff;
  box-shadow: var(--sky-shadow);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sky-ocean) !important;
  transition: background-color 0.2s, color 0.2s;
}
.sky-visit__badge:hover { background: var(--sky-ocean); color: #fff !important; }
.sky-visit__list { display: grid; gap: var(--sky-gap); align-content: stretch; }
.sky-visit__list h3 { margin-bottom: 12px; }
.sky-visit__row { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px !important; color: var(--sky-text); }
.sky-visit__row .sky-fa { margin-top: 5px; color: var(--sky-ocean); }
.sky-visit__row a {
  border-bottom: 1px solid transparent;
  font-weight: 600;
  color: var(--sky-text);
  transition: color 0.2s, border-color 0.2s;
}
.sky-visit__row a:hover { border-bottom-color: currentColor; color: var(--sky-ocean); }

.sky-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sky-contact__copy { position: sticky; top: calc(var(--sky-header) + 32px); }
.sky-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sky-field--wide { grid-column: 1 / -1; }
.sky-field label { display: block; margin-bottom: 6px; font-size: 0.9375rem; font-weight: 600; color: var(--sky-navy); }
.sky-field label span { color: var(--sky-ocean); }
.sky-field input,
.sky-field textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid #c9d8e3;
  border-radius: var(--sky-radius-sm);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--sky-ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sky-field textarea { min-height: 124px; resize: vertical; }
.sky-field input::placeholder,
.sky-field textarea::placeholder { color: #8a949c; }
.sky-field input:focus,
.sky-field textarea:focus { outline: 0; border-color: var(--sky-cerulean); box-shadow: 0 0 0 4px rgba(31, 140, 203, 0.22); }
.sky-field.is-invalid input,
.sky-field.is-invalid textarea { border-color: #c0392b; }
.sky-field__error { margin-top: 6px !important; font-size: 0.875rem; font-weight: 500; color: #a93226; }
/* Turnstile: left aligned. sky.js scales it down when the form is narrower than the widget. */
.sky-turnstile { width: 100%; min-height: 65px; }
.sky-turnstile__box { width: 300px; max-width: none; transform-origin: left top; }

.sky-footer {
  position: relative;
  padding: clamp(40px, 5vw, 64px) 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--sky-ocean-deep);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.sky-footer__grid { display: grid; grid-template-columns: 1.5fr 1.3fr 0.9fr 0.9fr; gap: clamp(24px, 4vw, 56px); }
.sky-footer .sky-footer__logo { height: 26px; width: auto; margin-bottom: 16px; }
.sky-footer__tagline { max-width: 34ch; }
.sky-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px !important; }
.sky-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}
.sky-footer__social a:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.sky-footer__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 18px !important; }
.sky-footer .sky-footer__badges img { height: 42px; width: auto; }
.sky-footer .sky-footer__title { margin-bottom: 4px; font-family: var(--sky-font-body); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; color: #fff; }
.sky-footer__reg { margin-bottom: 4px !important; font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); }
.sky-footer .sky-footer__sub { margin: 16px 0 4px; font-family: var(--sky-font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #bfe3fb; }
.sky-footer p a,
.sky-footer__links a { border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.sky-footer p a:hover,
.sky-footer__links a:hover { border-bottom-color: rgba(255, 255, 255, 0.8); color: #fff; }
.sky-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px !important; }
.sky-footer__legal { margin-top: clamp(28px, 4vw, 44px) !important; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); }

.sky-whatsapp {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #128c4b;
  color: #fff !important;
  box-shadow: 0 12px 26px -10px rgba(16, 90, 48, 0.7);
  transition: transform 0.25s var(--sky-ease);
}
.sky-whatsapp:hover { transform: translateY(-3px) scale(1.04); }

/* Production motion (sky-motion.js). */
.sky-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 4px;
  background: linear-gradient(90deg, var(--sky-ocean), var(--sky-cerulean), #a9dcff);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
/* Hero plane loop. */
.sky-loop { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sky-loop__path { stroke: rgba(255, 255, 255, 0.75); stroke-width: 2.5; stroke-linecap: round; }
.sky-loop__plane { visibility: hidden; }
/* Split headings: room for descenders inside the line masks. */
.sky-motion .sky-head h2 > div,
.sky-motion .sky-contact__copy h2 > div,
.sky-motion .sky-integrations__copy h2 > div { padding-bottom: 0.08em; }

/* The mini-game. */
.sky-flight__plane { pointer-events: auto; cursor: pointer; }
.sky-flight__hit { pointer-events: all; }
.sky-hint {
  position: absolute;
  left: var(--sky-gutter);
  bottom: clamp(16px, 4vh, 40px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sky-font-hand);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(6, 40, 76, 0.7);
  pointer-events: none;
  transition: opacity 0.6s;
  animation: sky-hint 2.4s ease-in-out infinite alternate;
}
.sky-subhero .sky-hint { color: var(--sky-ocean); text-shadow: none; }
.sky-hint.is-used { opacity: 0; }
@keyframes sky-hint {
  from { translate: 0 0; }
  to   { translate: 0 -6px; }
}
.sky-throw { position: fixed; left: 0; top: 0; z-index: 45; width: 54px; height: 40px; margin: -20px 0 0 -27px; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(11, 74, 128, 0.4)); }
.sky-spark { position: fixed; left: 0; top: 0; z-index: 45; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 3px; pointer-events: none; }
.sky-game {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border-radius: var(--sky-pill);
  background: #fff;
  box-shadow: var(--sky-shadow);
  font-size: 0.9375rem;
  color: var(--sky-navy);
}
.sky-game[hidden] { display: none; }
.sky-game__icon { color: var(--sky-ocean); }
.sky-game__count { font-family: var(--sky-font-display); font-size: 1.15rem; font-weight: 700; color: var(--sky-ocean); }
.sky-game.is-bump { animation: sky-bump 0.45s var(--sky-ease); }
@keyframes sky-bump {
  40% { scale: 1.14; }
}
.sky-game__toast {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 56px);
  z-index: 40;
  width: min(320px, calc(100vw - 36px));
  padding: 16px 44px 16px 18px;
  border-radius: var(--sky-radius);
  background: #fff;
  box-shadow: var(--sky-shadow);
  color: var(--sky-navy);
  font-weight: 500;
  line-height: 1.45;
}
.sky-game__toast a { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; color: var(--sky-ocean); }
.sky-game__toast button { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 1.3rem; line-height: 1; color: var(--sky-slate); cursor: pointer; }

/* 10. DIALOGS -------------------------------------------------------------- */

.sky-modal .modal-content { border: 0; border-radius: var(--sky-radius); box-shadow: var(--sky-shadow); }
.sky-modal .modal-header,
.sky-modal .modal-footer { border: 0; }
.sky-modal .modal-title { font-size: 1.35rem; }
.sky-modal .modal-body { color: var(--sky-text-paper); }

.sky-viewer,
.sky-lightbox {
  width: min(1120px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--sky-radius);
  background: #fff;
  box-shadow: 0 40px 120px -30px rgba(6, 40, 76, 0.7);
  overflow: hidden;
}
.sky-viewer::backdrop,
.sky-lightbox::backdrop { background: rgba(8, 30, 52, 0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sky-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 22px; }
.sky-viewer__bar h2 { font-size: 1.15rem; }
.sky-viewer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--sky-surface);
  color: var(--sky-navy);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.sky-viewer__close:hover { background: var(--sky-ocean); color: #fff; }
.sky-viewer__body { display: flex; align-items: center; justify-content: center; background: #0b1722; }
.sky-viewer__body img,
.sky-viewer__body video { width: 100%; max-height: calc(100dvh - 110px); object-fit: contain; }

.sky-lightbox__close { position: absolute; top: 10px; right: 10px; z-index: 3; box-shadow: var(--sky-shadow-sm); }
.sky-lightbox__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); max-height: calc(100dvh - 24px); }
.sky-lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; background: #0b1722; }
.sky-lightbox__media { width: 100%; }
.sky-lightbox__media img,
.sky-lightbox__media video { width: 100%; max-height: calc(100dvh - 24px); object-fit: contain; }
.sky-lightbox__nav {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--sky-navy);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.sky-lightbox__nav:hover { background: var(--sky-ocean); color: #fff; }
.sky-lightbox__nav--prev { left: 12px; }
.sky-lightbox__nav--next { right: 12px; }
.sky-lightbox__nav[hidden] { display: none; }
.sky-lightbox__dots { bottom: 14px; pointer-events: auto; }
.sky-lightbox__dots button { width: 10px; height: 10px; cursor: pointer; }
.sky-lightbox__copy { padding: 30px 26px 26px; overflow-y: auto; color: var(--sky-text-paper); }
.sky-lightbox__copy h2 { padding-right: 48px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.sky-lightbox__text { margin-top: 12px !important; }
.sky-lightbox__block { margin-top: 18px; }
.sky-lightbox__block[hidden] { display: none; }
.sky-lightbox__block h3 { margin-bottom: 6px; font-family: var(--sky-font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky-ocean); }
.sky-lightbox__copy .sky-btn { margin-top: 24px; }

/* 11. POLICY PAGES, RESPONSIVE, REDUCED MOTION ---------------------------- */

.sky-policy { padding: calc(var(--sky-header) + clamp(24px, 4vw, 48px)) 0 var(--sky-section); }
.sky-policy__wrap { max-width: calc(860px + var(--sky-gutter) * 2); }
.sky-policy .sky-crumbs { margin-bottom: 16px; }
.sky-policy h1 { margin-bottom: clamp(20px, 3vw, 32px); font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
/* Long-form text written in the CMS. */
.sky-prose { line-height: 1.7; }
.sky-prose > :first-child { margin-top: 0; }
.sky-prose h2 { margin: 2em 0 0.5em; font-size: 1.3rem; line-height: 1.25; }
.sky-prose h4 { margin: 1.4em 0 0.4em; font-family: var(--sky-font-display); font-size: 1.05rem; font-weight: 700; color: var(--sky-navy); }
.sky-prose p { margin: 0 0 1em; }
.sky-prose ul,
.sky-prose ol { margin: 0 0 1em; padding-left: 1.4rem; }
.sky-prose ul { list-style: disc; }
.sky-prose ol { list-style: decimal; }
.sky-prose li { margin-bottom: 0.4em; }
.sky-prose strong { color: var(--sky-navy); }
.sky-prose a { color: var(--sky-ocean); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1199.98px) {
  .sky-mega__list { grid-template-columns: repeat(2, 1fr); }
  .sky-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sky-stack__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sky-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  :root { --sky-header: 68px; }
  .sky-problems__grid,
  .sky-workflow,
  .sky-stack__grid,
  .sky-faq__grid,
  .sky-visit__grid,
  .sky-contact__grid,
  .sky-subhero__grid,
  .sky-features__split,
  .sky-integrations__grid,
  .sky-lightbox__grid { grid-template-columns: minmax(0, 1fr); }
  .sky-problems__head,
  .sky-faq__grid .sky-head,
  .sky-contact__copy,
  .sky-features__pin { position: static; }
  .sky-workflow--flip .sky-workflow__media { order: 0; }
  .sky-directory__list,
  .sky-postcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sky-process__route { grid-template-columns: minmax(0, 1fr); }
  .sky-subhero { display: block; min-height: auto; padding-top: calc(var(--sky-header) + 16px); padding-bottom: 56px; }
  .sky-subhero__crumbs { position: static; margin-bottom: 20px; }
  .sky-crumbs { font-size: 0.78rem; }
  .sky-crumbs ol { gap: 2px 6px; }
  .sky-crumbs li { gap: 6px; }
  .sky-subhero__deck { display: none; }
  .sky-scene { max-width: none; aspect-ratio: auto; }
  .sky-scene__links,
  .sky-scene__orbit,
  .sky-scene__hub { display: none; }
  .sky-scene .sky-highlights { position: static; display: grid; }
  .sky-scene .sky-highlights__card { position: static; width: auto; }
  .sky-highlights__card { animation: none; }
  .sky-lightbox { overflow-y: auto; }
  .sky-lightbox__grid { max-height: none; }
  .sky-lightbox__media img,
  .sky-lightbox__media video { max-height: 56dvh; }
  .sky-visit__map { min-height: 320px; }
  .sky-nodes { width: min(100%, 300px); }
  .sky-nodes__node { transform: rotate(var(--angle)) translate(106px) rotate(calc(var(--angle) * -1)); }
}

@media (max-width: 767.98px) {
  .sky-body { font-size: 1rem; }
  .sky-hero { align-items: center; padding-top: calc(var(--sky-header) + 16px); padding-bottom: 72px; }
  .sky-hero__video { object-position: 50% 0; }
  .sky-hero__veil { background: linear-gradient(180deg, rgba(6, 40, 76, 0.1) 0%, rgba(6, 40, 76, 0.22) 45%, rgba(6, 40, 76, 0.3) 100%); }
  .sky-hero__actions .sky-btn { flex: 1 1 100%; }
  .sky-directory__list,
  .sky-postcards,
  .sky-why__grid,
  .sky-form__grid,
  .sky-footer__grid,
  .sky-highlights { grid-template-columns: minmax(0, 1fr); }
  .sky-stack__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sky-problems__list li { grid-template-columns: 44px 1fr; }
  .sky-problems__num { font-size: 1.4rem; }
  .sky-filter { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sky-chips { flex-wrap: nowrap; margin-inline: -14px; padding-inline: 14px; overflow-x: auto; scrollbar-width: none; }
  .sky-chips::-webkit-scrollbar { display: none; }
  .sky-chip { flex: none; }
  .sky-videos__rail {
    display: flex;
    margin-inline: calc(var(--sky-gutter) * -1);
    padding: 12px var(--sky-gutter) 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sky-videos__rail::-webkit-scrollbar { display: none; }
  .sky-videos__card { flex: 0 0 74%; scroll-snap-align: center; }
  .sky-process__line { grid-template-columns: minmax(0, 1fr); }
  .sky-process__line li { padding-left: 46px; }
  .sky-process__line .sky-badge { position: absolute; left: 0; top: 0; margin: 0; }
  .sky-process__line li:not(:last-child)::before {
    top: 36px;
    bottom: -20px;
    left: 14px;
    right: auto;
    width: 2px;
    height: auto;
    background-image: linear-gradient(180deg, rgba(16, 102, 175, 0.45) 45%, transparent 0);
    background-size: 2px 10px;
  }
  .sky-contact { padding-bottom: 96px; }
  .sky-footer__links { gap: 6px; margin-top: 8px !important; }
  .sky-footer__grid { gap: 28px; }
  .sky-footer .sky-footer__logo { height: 24px; }
  .sky-footer .sky-footer__badges img { height: 46px; }
  .sky-footer__badges { gap: 20px; }
  .sky-c3, .sky-c4, .sky-c7, .sky-c8, .sky-c11 { display: none; }
  .sky-cloud { width: calc(var(--w, 30vw) * 1.7); }
}

@media (max-width: 419.98px) {
  .sky-stack__cards { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .sky-html { scroll-behavior: auto; }
  .sky-cloud,
  .sky-flight__bank,
  .sky-highlights__card,
  .sky-scene__links path,
  .sky-scene__orbit,
  .sky-scene__hub::after { animation: none; }
  .sky-flight, .sky-hint { display: none; }
  .sky-tint, .sky-sun, .sky-layer, .sky-header { transition: none; }
  .sky-js .sky-reveal { opacity: 1; transform: none; transition: none; }
  .sky-hero__video { display: none; }
  .sky-card, .sky-media, .sky-btn, .sky-btn .sky-fa, .sky-postcard__slide img { transition: none; }
}

@media print {
  .sky-stage, .sky-flight, .sky-header, .sky-whatsapp, .sky-hero__media, .sky-game, .sky-game__toast, .sky-hint, .sky-progress { display: none !important; }
}

/* Cross-links inside CMS paragraph text */
.sky-textlink { color: var(--sky-ocean, #1066AF); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sky-textlink:hover, .sky-textlink:focus-visible { color: var(--sky-charcoal, #212529); }

/* Icon sizes (set by fd_icon) */
.sky-icon--11 { font-size: 11px !important; }
.sky-icon--14 { font-size: 14px !important; }
.sky-icon--16 { font-size: 16px !important; }
.sky-icon--18 { font-size: 18px !important; }
.sky-icon--20 { font-size: 20px !important; }
.sky-icon--26 { font-size: 26px !important; }

/* Position of each integration node around the hub (the hub is the first child) */
.sky-nodes__node:nth-child(2) { --n: 0; }
.sky-nodes__node:nth-child(3) { --n: 1; }
.sky-nodes__node:nth-child(4) { --n: 2; }
.sky-nodes__node:nth-child(5) { --n: 3; }
.sky-nodes__node:nth-child(6) { --n: 4; }
.sky-nodes__node:nth-child(7) { --n: 5; }

/* Login page: a card floating in a deeper blue sky */
.sky-body--auth .sky-stage { background: linear-gradient(180deg, #0b4a80 0%, var(--sky-ocean) 28%, var(--sky-cerulean) 58%, var(--sky-mid) 100%); }
.sky-body--auth :is(.sky-visit, .sky-contact, .sky-whatsapp, .sky-game, .sky-flight) { display: none !important; }
.sky-login {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 128px 16px 72px;
}
.sky-login__card { width: 100%; max-width: 440px; padding: clamp(24px, 5vw, 40px); }
.sky-login__card h1 { margin: 0 0 6px; font-size: clamp(1.75rem, 4vw, 2.125rem); color: var(--sky-navy); }
.sky-login__lead { margin: 0 0 24px; color: var(--sky-slate); }
.sky-login__error {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid #e3b3ad;
  border-radius: var(--sky-radius-sm);
  background: #fdf1ef;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #8e2a20;
}
.sky-login__form { display: grid; gap: 18px; }
.sky-login__password { position: relative; }
.sky-login__password input { padding-right: 52px; }
.sky-login__toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sky-slate);
  transform: translateY(-50%);
  cursor: pointer;
}
.sky-login__toggle:hover, .sky-login__toggle:focus-visible { color: var(--sky-ocean); }
.sky-login__toggle span { display: grid; font-size: 18px; }
.sky-login__toggle span[hidden] { display: none; }
@media (max-width: 575.98px) {
  .sky-login { padding: 104px 16px 48px; align-items: start; }
}

/* Homepage company story */
.sky-about__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
/* Cookie notice: a small card at the foot of the screen until the visitor chooses. */
.sky-cookie { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(420px, calc(100vw - 32px)); padding: 18px 20px; border: 1px solid var(--sky-border); border-radius: var(--sky-radius); background: #fff; box-shadow: var(--sky-shadow); }
.sky-cookie[hidden] { display: none; }
.sky-cookie p { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.5; color: var(--sky-text); }
.sky-cookie a { font-weight: 600; color: var(--sky-ocean); text-decoration: underline; }
.sky-cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sky-cookie .sky-btn { min-height: 44px; padding: 0 18px; font-size: 0.95rem; animation: none; }
.sky-2d .sky-cookie { border: var(--toon-line) solid var(--toon-ink); box-shadow: 0 6px 0 var(--toon-ink); }
@media (max-width: 575.98px) {
  .sky-cookie { bottom: 88px; }
}
@media print {
  .sky-cookie { display: none; }
}

/* Photo galleries: captioned photos, like prints laid out on a table. */
.sky-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sky-gap); margin: 0; padding: 0; list-style: none; }
.sky-gallery__grid--wide { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sky-gallery__card { display: flex; flex-direction: column; padding: 10px 10px 0; overflow: hidden; cursor: pointer; }
.sky-gallery__card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--sky-radius) - 8px); background: var(--sky-surface); }
.sky-gallery__copy { padding: 12px 6px 16px; }
.sky-gallery__copy h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.sky-gallery__copy p { margin: 6px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--sky-text); }
@media (max-width: 575.98px) {
  .sky-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sky-gallery__grid--wide { grid-template-columns: minmax(0, 1fr); }
}
/* Use cases: stops along a dotted route, each one a card held by a map pin. */
.sky-usecases__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(36px, 4vw, 44px) clamp(20px, 3vw, 36px); margin: 0; padding: 34px 0 0; list-style: none; }
.sky-usecases__grid::before { content: ""; position: absolute; left: 5%; right: 5%; top: 34px; border-top: 2.5px dotted var(--sky-navy); opacity: 0.5; }
.sky-usecases__card { position: relative; padding-top: 42px; text-align: center; transition: rotate 0.3s var(--sky-ease), transform 0.3s var(--sky-ease), box-shadow 0.3s var(--sky-ease); }
.sky-usecases__card:nth-child(odd) { rotate: -1.2deg; }
.sky-usecases__card:nth-child(even) { rotate: 1.2deg; }
.sky-usecases__card:hover { rotate: 0deg; }
.sky-usecases__pin { position: absolute; left: 50%; top: -26px; width: 44px; height: 44px; margin-left: -22px; border: 2.5px solid var(--sky-navy); border-radius: 50% 50% 50% 0; background: var(--sky-ocean); rotate: -45deg; }
.sky-usecases__pin::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.sky-usecases__card h3 { margin-bottom: 8px; font-size: 1.2rem; line-height: 1.25; }
.sky-usecases__card p { margin: 0; color: var(--sky-text); }
@media (max-width: 575.98px) {
  .sky-usecases__grid::before { content: none; }
}
.sky-about__grid--solo { grid-template-columns: minmax(0, 820px); }
.sky-about__copy h2 { margin-bottom: 18px; }
.sky-about__copy p { max-width: 62ch; margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.65; color: var(--sky-text-paper, var(--sky-ink)); }
.sky-about__photo { max-width: 400px; margin: 0; justify-self: end; border-radius: var(--sky-radius); overflow: hidden; box-shadow: var(--sky-shadow); }
.sky-about__photo img { display: block; width: 100%; height: auto; }
.sky-2d .sky-about__photo { border: var(--toon-line) solid var(--toon-ink); box-shadow: 0 6px 0 var(--toon-ink); }
@media (max-width: 767.98px) {
  .sky-about__grid { grid-template-columns: 1fr; }
  .sky-about__photo { justify-self: start; max-width: 320px; }
}