/* ==========================================================================
   FRONTDESK — 2D CARTOON VARIANT
   The site's default look. A visitor can switch to the original design with
   ?2d=0, and back with ?2d=1.
   It restyles the sky design; it does not replace it.

   To remove this variant completely, delete:
     - this file, sky-hero.js and fonts/fredoka.woff2
     - the blocks marked "2D variant" in templates/platform/sky/helpers.php,
       templates/platform/sky/index.php, assets-compile/sky/sky.js and
       sky-motion.js, modules/mod_frontpage/tmpl/sky.php and
       components/com_platform/tmpl/landing/sky_content.php
   ========================================================================== */


.sky-2d {
  --sky-font-display: "Fredoka", "Bricolage Grotesque", system-ui, sans-serif;
  --toon-ink: #12365c;
  --toon-sky-top: #0a4aa8;
  --toon-sky-mid: #2389e6;
  --toon-sky-low: #8fd3ff;
  --toon-pop: #a9dcff;   /* light Bright Cerulean: the fill for small pieces and the title accent */
  --toon-line: 2.5px;
  --sky2d-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 252 136'%3E%3Cg fill='%23b9d4ee' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round' transform='translate%280 9%29'%3E%3Ccircle cx='62' cy='76' r='32'/%3E%3Ccircle cx='108' cy='54' r='42'/%3E%3Ccircle cx='154' cy='64' r='36'/%3E%3Ccircle cx='192' cy='82' r='26'/%3E%3Ccircle cx='38' cy='88' r='20'/%3E%3Crect x='22' y='70' width='196' height='40' rx='17'/%3E%3Cellipse cx='118' cy='78' rx='74' ry='26'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round'%3E%3Ccircle cx='62' cy='76' r='32'/%3E%3Ccircle cx='108' cy='54' r='42'/%3E%3Ccircle cx='154' cy='64' r='36'/%3E%3Ccircle cx='192' cy='82' r='26'/%3E%3Ccircle cx='38' cy='88' r='20'/%3E%3Crect x='22' y='70' width='196' height='40' rx='17'/%3E%3Cellipse cx='118' cy='78' rx='74' ry='26'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='62' cy='76' r='32'/%3E%3Ccircle cx='108' cy='54' r='42'/%3E%3Ccircle cx='154' cy='64' r='36'/%3E%3Ccircle cx='192' cy='82' r='26'/%3E%3Ccircle cx='38' cy='88' r='20'/%3E%3Crect x='22' y='70' width='196' height='40' rx='17'/%3E%3Cellipse cx='118' cy='78' rx='74' ry='26'/%3E%3C/g%3E%3C/svg%3E");
  --sky2d-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 302 116'%3E%3Cg fill='%23b9d4ee' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round' transform='translate%280 9%29'%3E%3Ccircle cx='40' cy='70' r='20'/%3E%3Ccircle cx='72' cy='56' r='28'/%3E%3Ccircle cx='112' cy='62' r='24'/%3E%3Ccircle cx='150' cy='48' r='34'/%3E%3Ccircle cx='194' cy='60' r='28'/%3E%3Ccircle cx='232' cy='70' r='22'/%3E%3Ccircle cx='262' cy='78' r='14'/%3E%3Crect x='22' y='58' width='254' height='32' rx='14'/%3E%3Cellipse cx='146' cy='66' rx='104' ry='20'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round'%3E%3Ccircle cx='40' cy='70' r='20'/%3E%3Ccircle cx='72' cy='56' r='28'/%3E%3Ccircle cx='112' cy='62' r='24'/%3E%3Ccircle cx='150' cy='48' r='34'/%3E%3Ccircle cx='194' cy='60' r='28'/%3E%3Ccircle cx='232' cy='70' r='22'/%3E%3Ccircle cx='262' cy='78' r='14'/%3E%3Crect x='22' y='58' width='254' height='32' rx='14'/%3E%3Cellipse cx='146' cy='66' rx='104' ry='20'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='40' cy='70' r='20'/%3E%3Ccircle cx='72' cy='56' r='28'/%3E%3Ccircle cx='112' cy='62' r='24'/%3E%3Ccircle cx='150' cy='48' r='34'/%3E%3Ccircle cx='194' cy='60' r='28'/%3E%3Ccircle cx='232' cy='70' r='22'/%3E%3Ccircle cx='262' cy='78' r='14'/%3E%3Crect x='22' y='58' width='254' height='32' rx='14'/%3E%3Cellipse cx='146' cy='66' rx='104' ry='20'/%3E%3C/g%3E%3C/svg%3E");
  --sky2d-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 202 140'%3E%3Cg fill='%23b9d4ee' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round' transform='translate%280 9%29'%3E%3Ccircle cx='84' cy='46' r='40'/%3E%3Ccircle cx='124' cy='74' r='32'/%3E%3Ccircle cx='52' cy='82' r='26'/%3E%3Ccircle cx='156' cy='92' r='20'/%3E%3Ccircle cx='30' cy='98' r='14'/%3E%3Crect x='18' y='80' width='160' height='34' rx='13'/%3E%3Cellipse cx='96' cy='84' rx='62' ry='26'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round'%3E%3Ccircle cx='84' cy='46' r='40'/%3E%3Ccircle cx='124' cy='74' r='32'/%3E%3Ccircle cx='52' cy='82' r='26'/%3E%3Ccircle cx='156' cy='92' r='20'/%3E%3Ccircle cx='30' cy='98' r='14'/%3E%3Crect x='18' y='80' width='160' height='34' rx='13'/%3E%3Cellipse cx='96' cy='84' rx='62' ry='26'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='84' cy='46' r='40'/%3E%3Ccircle cx='124' cy='74' r='32'/%3E%3Ccircle cx='52' cy='82' r='26'/%3E%3Ccircle cx='156' cy='92' r='20'/%3E%3Ccircle cx='30' cy='98' r='14'/%3E%3Crect x='18' y='80' width='160' height='34' rx='13'/%3E%3Cellipse cx='96' cy='84' rx='62' ry='26'/%3E%3C/g%3E%3C/svg%3E");
  --sky2d-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 256 134'%3E%3Cg fill='%23b9d4ee' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round' transform='translate%280 9%29'%3E%3Ccircle cx='120' cy='44' r='38'/%3E%3Ccircle cx='74' cy='66' r='28'/%3E%3Ccircle cx='166' cy='68' r='30'/%3E%3Ccircle cx='204' cy='84' r='18'/%3E%3Ccircle cx='40' cy='84' r='18'/%3E%3Cellipse cx='122' cy='90' rx='104' ry='18'/%3E%3Cellipse cx='122' cy='72' rx='72' ry='24'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round'%3E%3Ccircle cx='120' cy='44' r='38'/%3E%3Ccircle cx='74' cy='66' r='28'/%3E%3Ccircle cx='166' cy='68' r='30'/%3E%3Ccircle cx='204' cy='84' r='18'/%3E%3Ccircle cx='40' cy='84' r='18'/%3E%3Cellipse cx='122' cy='90' rx='104' ry='18'/%3E%3Cellipse cx='122' cy='72' rx='72' ry='24'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='120' cy='44' r='38'/%3E%3Ccircle cx='74' cy='66' r='28'/%3E%3Ccircle cx='166' cy='68' r='30'/%3E%3Ccircle cx='204' cy='84' r='18'/%3E%3Ccircle cx='40' cy='84' r='18'/%3E%3Cellipse cx='122' cy='90' rx='104' ry='18'/%3E%3Cellipse cx='122' cy='72' rx='72' ry='24'/%3E%3C/g%3E%3C/svg%3E");
  --sky2d-e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 132 102'%3E%3Cg fill='%23b9d4ee' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round' transform='translate%280 9%29'%3E%3Ccircle cx='54' cy='44' r='28'/%3E%3Ccircle cx='84' cy='54' r='22'/%3E%3Ccircle cx='30' cy='58' r='18'/%3E%3Crect x='14' y='48' width='92' height='28' rx='12'/%3E%3Cellipse cx='58' cy='54' rx='36' ry='18'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round'%3E%3Ccircle cx='54' cy='44' r='28'/%3E%3Ccircle cx='84' cy='54' r='22'/%3E%3Ccircle cx='30' cy='58' r='18'/%3E%3Crect x='14' y='48' width='92' height='28' rx='12'/%3E%3Cellipse cx='58' cy='54' rx='36' ry='18'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='54' cy='44' r='28'/%3E%3Ccircle cx='84' cy='54' r='22'/%3E%3Ccircle cx='30' cy='58' r='18'/%3E%3Crect x='14' y='48' width='92' height='28' rx='12'/%3E%3Cellipse cx='58' cy='54' rx='36' ry='18'/%3E%3C/g%3E%3C/svg%3E");
  --sky2d-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 202 76'%3E%3Cg fill='%23b9d4ee' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round' transform='translate%280 9%29'%3E%3Ccircle cx='50' cy='34' r='16'/%3E%3Ccircle cx='82' cy='28' r='20'/%3E%3Ccircle cx='118' cy='34' r='16'/%3E%3Ccircle cx='150' cy='38' r='12'/%3E%3Crect x='26' y='28' width='140' height='22' rx='9'/%3E%3Cellipse cx='96' cy='36' rx='60' ry='12'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%239cc3ea' stroke-width='5' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='34' r='16'/%3E%3Ccircle cx='82' cy='28' r='20'/%3E%3Ccircle cx='118' cy='34' r='16'/%3E%3Ccircle cx='150' cy='38' r='12'/%3E%3Crect x='26' y='28' width='140' height='22' rx='9'/%3E%3Cellipse cx='96' cy='36' rx='60' ry='12'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='50' cy='34' r='16'/%3E%3Ccircle cx='82' cy='28' r='20'/%3E%3Ccircle cx='118' cy='34' r='16'/%3E%3Ccircle cx='150' cy='38' r='12'/%3E%3Crect x='26' y='28' width='140' height='22' rx='9'/%3E%3Cellipse cx='96' cy='36' rx='60' ry='12'/%3E%3C/g%3E%3C/svg%3E");
  --sky2d-deck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cg fill='%23bcdcf9'%3E%3Ccircle cx='-6' cy='220' r='73'/%3E%3Ccircle cx='95' cy='222' r='64'/%3E%3Ccircle cx='206' cy='212' r='53'/%3E%3Ccircle cx='330' cy='190' r='55'/%3E%3Ccircle cx='440' cy='202' r='56'/%3E%3Ccircle cx='544' cy='187' r='82'/%3E%3Ccircle cx='667' cy='172' r='83'/%3E%3Ccircle cx='759' cy='175' r='61'/%3E%3Ccircle cx='873' cy='145' r='62'/%3E%3Ccircle cx='1008' cy='138' r='71'/%3E%3Ccircle cx='1113' cy='134' r='70'/%3E%3Ccircle cx='1203' cy='116' r='59'/%3E%3Ccircle cx='1336' cy='117' r='62'/%3E%3Ccircle cx='1443' cy='109' r='62'/%3E%3Cpath d='M0 240 L1440 120 L1440 320 L0 320Z'/%3E%3C/g%3E%3Cg fill='%23e2f0fd'%3E%3Ccircle cx='11' cy='268' r='50'/%3E%3Ccircle cx='99' cy='258' r='67'/%3E%3Ccircle cx='200' cy='246' r='69'/%3E%3Ccircle cx='274' cy='245' r='64'/%3E%3Ccircle cx='371' cy='242' r='45'/%3E%3Ccircle cx='486' cy='245' r='59'/%3E%3Ccircle cx='590' cy='227' r='62'/%3E%3Ccircle cx='675' cy='230' r='56'/%3E%3Ccircle cx='780' cy='235' r='56'/%3E%3Ccircle cx='870' cy='205' r='62'/%3E%3Ccircle cx='965' cy='226' r='65'/%3E%3Ccircle cx='1048' cy='205' r='61'/%3E%3Ccircle cx='1135' cy='202' r='48'/%3E%3Ccircle cx='1234' cy='186' r='64'/%3E%3Ccircle cx='1331' cy='186' r='54'/%3E%3Ccircle cx='1453' cy='176' r='56'/%3E%3Cpath d='M0 272 L1440 198 L1440 320 L0 320Z'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='2' cy='307' r='54'/%3E%3Ccircle cx='98' cy='288' r='45'/%3E%3Ccircle cx='164' cy='303' r='57'/%3E%3Ccircle cx='242' cy='281' r='41'/%3E%3Ccircle cx='329' cy='288' r='49'/%3E%3Ccircle cx='415' cy='272' r='45'/%3E%3Ccircle cx='504' cy='286' r='57'/%3E%3Ccircle cx='600' cy='282' r='50'/%3E%3Ccircle cx='684' cy='268' r='56'/%3E%3Ccircle cx='772' cy='288' r='54'/%3E%3Ccircle cx='843' cy='273' r='38'/%3E%3Ccircle cx='937' cy='262' r='37'/%3E%3Ccircle cx='1006' cy='263' r='43'/%3E%3Ccircle cx='1085' cy='256' r='39'/%3E%3Ccircle cx='1172' cy='264' r='37'/%3E%3Ccircle cx='1284' cy='269' r='39'/%3E%3Ccircle cx='1346' cy='260' r='44'/%3E%3Ccircle cx='1426' cy='272' r='58'/%3E%3Cpath d='M0 306 L1440 272 L1440 320 L0 320Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Type: round, chunky, friendly. */
.sky-2d :is(h1, h2, h3, h4) { letter-spacing: -0.01em; }
.sky-2d h1 { font-weight: 700; line-height: 1.04; }
.sky-2d h2 { font-weight: 600; line-height: 1.12; }
.sky-2d h3 { font-weight: 600; }
.sky-2d .sky-btn,
.sky-2d .sky-chip,
.sky-2d .sky-nav__link,
.sky-2d .sky-badge,
.sky-2d .sky-problems__num,
.sky-2d .sky-index { font-family: var(--sky-font-display); }

/* The sky behind the page fades between white and blue as each section
   comes into view. The clouds carry a soft blue outline, so they read as
   clouds on the white as well as on the blue. Six shapes are shared out,
   and each one slowly swells and shrinks on its own rhythm. */
.sky-2d .sky-stage { background: linear-gradient(180deg, #bfe2fd 0%, #dff0fe 55%, #f2f9ff 100%); }
.sky-2d .sky-tint--mist  { background: #ffffff; }
.sky-2d .sky-tint--clear { background: linear-gradient(180deg, #a9d8fc 0%, #dcefff 100%); }
.sky-2d .sky-tint--warm  { background: linear-gradient(180deg, #c5e4fd 0%, #eef7ff 100%); }
.sky-2d .sky-tint--calm  { background: linear-gradient(180deg, #d5ecff 0%, #ffffff 100%); }
.sky-2d .sky-sun { display: none; }
.sky-2d .sky-layer { opacity: 1 !important; }
@keyframes sky2d-breathe {
  from { scale: 0.92; }
  to   { scale: 1.1; }
}
.sky-2d .sky-cloud--css {
  aspect-ratio: 240 / 124;
  filter: none;
  opacity: 1;
  background: var(--sky2d-a) center / contain no-repeat;
  animation:
    sky-drift var(--drift, 60s) ease-in-out infinite alternate,
    sky2d-breathe var(--breathe, 11s) ease-in-out infinite alternate;
}
.sky-2d .sky-cloud--css.sky-cloud--wisp,
.sky-2d .sky-cloud--css.sky-cloud--bank { background-image: var(--sky2d-a); }
.sky-2d .sky-c1  { --w: 22vw; --breathe: 13s; background-image: var(--sky2d-b) !important; aspect-ratio: 290 / 104; }
.sky-2d .sky-c2  { --w: 9vw;  --breathe: 8s;  background-image: var(--sky2d-e) !important; aspect-ratio: 120 / 90; }
.sky-2d .sky-c3  { --w: 15vw; --breathe: 15s; background-image: var(--sky2d-d) !important; aspect-ratio: 244 / 122; }
.sky-2d .sky-c4  { --w: 12vw; --breathe: 10s; background-image: var(--sky2d-c) !important; aspect-ratio: 190 / 128; }
.sky-2d .sky-c5  { --w: 14vw; --breathe: 12s; background-image: var(--sky2d-a) !important; }
.sky-2d .sky-c6  { --w: 18vw; --breathe: 16s; background-image: var(--sky2d-b) !important; aspect-ratio: 290 / 104; }
.sky-2d .sky-c7  { --w: 8vw;  --breathe: 7s;  background-image: var(--sky2d-e) !important; aspect-ratio: 120 / 90; }
.sky-2d .sky-c8  { --w: 16vw; --breathe: 14s; background-image: var(--sky2d-f) !important; aspect-ratio: 190 / 64; }
.sky-2d .sky-c9  { --w: 13vw; --breathe: 9s;  background-image: var(--sky2d-c) !important; aspect-ratio: 190 / 128; }
.sky-2d .sky-c10 { --w: 20vw; --breathe: 17s; background-image: var(--sky2d-d) !important; aspect-ratio: 244 / 122; }
.sky-2d .sky-c11 { --w: 11vw; --breathe: 10s; background-image: var(--sky2d-a) !important; }

/* Heroes: the same light sky as the sections below, with a white cloud deck
   along the bottom. Headlines are navy like every other heading, so nothing
   needs an outline to stay readable. */
.sky-2d .sky-hero__media,
.sky-2d .sky-subhero {
  background:
    var(--sky2d-deck) center bottom / max(100%, 1100px) clamp(150px, 30vh, 320px) no-repeat,
    linear-gradient(180deg, #a9d8fc 0%, #dcefff 58%, #f2f9ff 100%);
}
.sky-2d .sky-hero { flex-direction: column; justify-content: center; padding-bottom: clamp(170px, 32vh, 340px); color: inherit; }
.sky-2d .sky-hero__inner { position: relative; z-index: 2; }
.sky-2d .sky-hero__split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 30px; align-items: stretch; }
.sky-2d .sky-hero__copy { max-width: none; }
.sky-2d .sky-hero h1 { margin: 0; color: var(--sky-navy); font-size: clamp(2.2rem, 5.2vw, 4.3rem); line-height: 1.05; text-shadow: none; }
.sky-2d .sky-hero h1 .sky-accent,
.sky-2d .sky-subhero h1 .sky-accent { background: none; color: var(--sky-ocean); }
.sky-2d .sky-hero .sky-note { color: var(--sky-ocean); text-shadow: none; }
.sky-2d .sky-hero__lead { max-width: 34em; margin-top: 18px !important; font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--sky-text); text-shadow: none; }
.sky-2d .sky-hero__actions { margin-top: 26px; }
.sky-2d .sky-hero__actions .sky-btn { flex: 0 1 auto; }
.sky-2d .sky-hero .sky-tags { margin-top: 22px; }

.sky-2d .sky-subhero { background-size: max(100%, 1100px) clamp(120px, 24vh, 260px), auto; padding-bottom: clamp(150px, 28vh, 300px); }
.sky-2d .sky-subhero__deck { display: none; }
.sky-2d .sky-subhero__grid { position: relative; z-index: 2; }
.sky-2d .sky-subhero h1 { color: var(--sky-navy); }
.sky-2d .sky-highlights__card strong { font-weight: 600; }
/* The hero scene on the light sky: inked lines and ring, an inked hub. */
.sky-2d .sky-scene { --scene-line: rgba(18, 54, 92, 0.5); --scene-ring: rgba(18, 54, 92, 0.35); }
.sky-2d .sky-scene__hub { border: var(--toon-line) solid var(--toon-ink); background: var(--toon-pop); color: var(--toon-ink); box-shadow: 0 6px 0 var(--toon-ink); }
.sky-2d .sky-scene__orbit i { border: 2px solid var(--toon-ink); box-shadow: none; }

/* The hero's flying layer: clouds that come and go, the paper plane and its
   dotted trail. sky-hero.js places and moves them; they sit behind the text. */
.sky-fly { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sky-fly__clouds,
.sky-fly__trail { position: absolute; inset: 0; }
.sky-fly__trail { width: 100%; height: 100%; overflow: visible; }
.sky-fly__trail path { stroke: var(--toon-ink); stroke-width: 2.5; stroke-dasharray: 3 10; stroke-linecap: round; stroke-linejoin: round; }
.sky-fly__cloud {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 160px);
  aspect-ratio: 240 / 124;
  translate: -50% -50%;
  background: var(--sky2d-a) center / contain no-repeat;
  animation: sky-fly-breathe 7s ease-in-out infinite alternate;
  transition: scale 0.45s cubic-bezier(0.3, 1.7, 0.5, 1), opacity 0.2s;
}
.sky-fly__cloud:nth-child(2n) { animation-duration: 9s; }
.sky-fly__cloud:nth-child(3n) { animation-duration: 11s; }
.sky-fly__cloud--b { background-image: var(--sky2d-b); aspect-ratio: 290 / 104; }
.sky-fly__cloud--c { background-image: var(--sky2d-c); aspect-ratio: 190 / 128; }
.sky-fly__cloud--d { background-image: var(--sky2d-d); aspect-ratio: 244 / 122; }
.sky-fly__cloud--e { background-image: var(--sky2d-e); aspect-ratio: 120 / 90; }
.sky-fly__cloud--f { background-image: var(--sky2d-f); aspect-ratio: 190 / 64; }
.sky-fly__cloud.is-away { scale: 0; opacity: 0; transition: scale 0.5s ease-in, opacity 0.5s; }
@keyframes sky-fly-breathe {
  from { transform: scale(0.95); }
  to   { transform: scale(1.06); }
}
.sky-fly__plane { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; will-change: transform; }
.sky-fly__plane svg { position: absolute; left: -32px; top: -27px; width: 68px; height: auto; overflow: visible; }
/* The open strip of sky the clouds keep to on phones. */
.sky-fly__zone { min-height: 380px; }
.sky-subhero .sky-fly__zone { display: none; }

/* The white cloud deck runs straight into the next section. */
.sky-2d .sky-hero + .sky-section,
.sky-2d .sky-subhero + .sky-section { background: linear-gradient(180deg, #fff 0%, #fff 30%, rgba(255, 255, 255, 0) 100%); }
/* The hint sits on the pale cloud deck, so it is inked rather than white. */
.sky-2d .sky-hint { color: var(--toon-ink); text-shadow: none; }
.sky-2d .sky-game { border: var(--toon-line) solid var(--toon-ink); box-shadow: 0 4px 0 var(--toon-ink); }
.sky-2d .sky-game__toast { border: var(--toon-line) solid var(--toon-ink); box-shadow: 0 5px 0 var(--toon-ink); }

/* Over a hero the header is clear, with the dark logo and links on the light sky. */
.sky-2d .sky-header.is-stuck,
.sky-2d .sky-header--solid { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: var(--toon-line) solid var(--toon-ink); box-shadow: none; }

/* Outlined, sticker-like pieces. */
.sky-2d .sky-btn { border: var(--toon-line) solid var(--toon-ink); box-shadow: 0 4px 0 var(--toon-ink); font-weight: 600; }
.sky-2d .sky-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--toon-ink); }
.sky-2d .sky-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--toon-ink); }
.sky-2d .sky-btn--primary { background: var(--sky-ocean); }
.sky-2d .sky-btn--light { background: #fff !important; color: var(--sky-ocean) !important; }
.sky-2d .sky-btn--glass { background: var(--sky-ocean); color: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sky-2d .sky-btn--ghost { background: #fff; color: var(--toon-ink) !important; }
.sky-2d .sky-btn--ghost:hover { background: var(--sky-ocean); color: #fff !important; }

.sky-2d .sky-card,
.sky-2d .sky-paper,
.sky-2d .sky-accordion,
.sky-2d .sky-directory__bar,
.sky-2d .sky-media,
.sky-2d .sky-visit__map {
  border: var(--toon-line) solid var(--toon-ink);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--toon-ink);
}
.sky-2d .sky-card--hover:hover,
.sky-2d .sky-card--link:hover,
.sky-2d button.sky-media:hover { transform: translateY(-4px); border-color: var(--toon-ink); box-shadow: 0 10px 0 var(--toon-ink); }
.sky-2d.sky-js .sky-reveal.is-in.sky-card--hover:hover { transform: translateY(-4px); }
.sky-2d .sky-iconbox { border: 2px solid var(--toon-ink); background: var(--toon-pop); color: var(--toon-ink); }
.sky-2d .sky-card--hover:hover .sky-iconbox,
.sky-2d .sky-card--link:hover .sky-iconbox { background: var(--sky-ocean); color: #fff; }
.sky-2d .sky-badge,
.sky-2d .sky-steps li::before { border: 2px solid var(--toon-ink); background: var(--sky-ocean); color: #fff; }
.sky-2d .sky-chip { border: 2px solid var(--toon-ink); color: var(--toon-ink); }
.sky-2d .sky-chip.is-active { background: var(--sky-ocean); color: #fff; }
.sky-2d .sky-label { border: 2px solid var(--toon-ink); background: var(--toon-pop); color: var(--toon-ink); }
.sky-2d .sky-tags li { border: 2px solid var(--toon-ink); }
.sky-2d .sky-directory__search { border: 2px solid var(--toon-ink); background: #fff; }
.sky-2d .sky-catalog__search { border-width: var(--toon-line); box-shadow: 0 5px 0 var(--toon-ink); }
.sky-2d .sky-catalog__search .sky-icon { color: var(--sky-ocean); }
.sky-2d .sky-field input,
.sky-2d .sky-field textarea { border: 2px solid var(--toon-ink); }
/* The menu button sits quietly on the light sky: no outline, no shadow. */
.sky-2d .sky-nav__toggle { border: 0; box-shadow: none; background: #acd9fb; }
.sky-2d .sky-media__play { border: var(--toon-line) solid var(--toon-ink); background: #fff; color: var(--sky-ocean); box-shadow: 0 4px 0 var(--toon-ink); }
.sky-2d .sky-postcard,
.sky-2d .sky-videos__thumb { overflow: hidden; }
.sky-2d .sky-nodes__hub { border: var(--toon-line) solid var(--toon-ink); box-shadow: 0 5px 0 var(--toon-ink); }
.sky-2d .sky-nodes__node { border: 2px solid var(--toon-ink); box-shadow: 0 4px 0 var(--toon-ink); }
.sky-2d .sky-whatsapp { border: var(--toon-line) solid var(--toon-ink); box-shadow: 0 4px 0 var(--toon-ink); }

.sky-2d .sky-nav .sky-btn,
.sky-2d dialog .sky-btn,
.sky-2d .sky-modal .sky-btn { animation: none; }

/* The plane, inked. */
.sky-2d .sky-flight__plane { filter: none; }
.sky-2d .sky-flight__bank path:last-child { stroke: var(--toon-ink); stroke-opacity: 1; stroke-width: 2.4; }
.sky-2d .sky-flight .sky-flight__trail { stroke: var(--toon-ink); stroke-width: 2.5; stroke-dasharray: 3 10; }

.sky-2d .sky-footer { border-top: var(--toon-line) solid var(--toon-ink); background: var(--toon-ink); }

@media (max-width: 991.98px) {
  .sky-2d .sky-hero__split { grid-template-columns: minmax(0, 1fr); }
  .sky-fly__zone { min-height: 230px; }
  /* On solution pages the strip sits between the text and the highlight cards. */
  .sky-subhero .sky-fly__zone { display: block; min-height: 190px; margin-block: -28px; }
  .sky-fly__plane svg { left: -25px; top: -21px; width: 53px; }
}

@media (max-width: 767.98px) {
  .sky-2d .sky-hero { padding-bottom: 190px; }
  .sky-2d .sky-subhero { padding-bottom: 170px; }
  .sky-2d .sky-card,
  .sky-2d .sky-paper,
  .sky-2d .sky-accordion,
  .sky-2d .sky-directory__bar,
  .sky-2d .sky-media { box-shadow: 0 4px 0 var(--toon-ink); border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sky-fly__cloud,
  .sky-2d .sky-cloud--css { animation: none; }
  .sky-2d .sky-card,
  .sky-2d .sky-paper,
  .sky-2d .sky-accordion,
  .sky-2d .sky-directory__bar,
  .sky-2d .sky-media,
  .sky-2d .sky-visit__map,
  .sky-2d .sky-btn,
  .sky-2d .sky-highlights__card { animation: none; }
}