/*
Theme Name: SAFE SKY Custom
Theme URI: https://safesky-aviation.com/
Author: SAFE SKY AVIATION
Author URI: https://safesky-aviation.com/
Description: Custom classic WordPress theme for SAFE SKY AVIATION, built to work alongside Elementor.
Version: 1.4.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: safesky-custom
Tags: one-column, grid-layout, wide-blocks, custom-logo, custom-menu, editor-style, featured-images
*/

/* =====================================================
   SAFE SKY AVIATION
   Main theme stylesheet
   Palette: black, charcoal, red
   VIP: black and gold
   ===================================================== */

:root {
    /* Surfaces: one deep navy family for the whole site. */
    --ss-bg: #0a0c11;
    --ss-bg-2: #0e1116;
    --ss-surface: #13171d;
    --ss-surface-2: #191e25;
    --ss-surface-3: #20262e;
    --ss-line: rgba(255, 255, 255, .10);

    /* Brand: corporate aviation red. */
    --ss-red: #c51b25;
    --ss-red-dark: #99141c;
    --ss-red-deep: #6f0f15;
    --ss-red-hover: #a8171f;
    --ss-red-light: #e42b36;
    --ss-red-bright: #ff3542;
    --ss-red-lighter: #ff4955;
    --ss-red-soft: #f3a0a5;
    /* Link and small text red, light enough for 4.5:1 on every dark surface. */
    --ss-link: #ee424c;

    /* Text: four steps from white to dim. */
    --ss-white: #ffffff;
    --ss-text: #e6e9ee;
    --ss-muted: #a2a7b0;
    --ss-dim: #868c97;

    /* Accents: gold for the VIP section, amber for warnings. */
    --ss-gold: #c9a45c;
    --ss-gold-light: #e2c889;
    --ss-amber: #ffb347;

    /* Effects and metrics. */
    --ss-shadow: 0 20px 55px rgba(0, 0, 0, .32);
    --ss-glow: rgba(197, 27, 37, .18);
    --ss-motion-red: var(--ss-red-light);
    --ss-motion-glow: rgba(228, 43, 54, .24);
    --ss-container: 1200px;
    --ss-radius: 8px;
    --ss-transition: 240ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Visitors who ask for reduced motion get no smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    background: var(--ss-bg);
    color: var(--ss-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--ss-link);
    text-decoration: none;
    transition: color var(--ss-transition),
                background-color var(--ss-transition),
                border-color var(--ss-transition);
}

a:hover {
    color: var(--ss-white);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 16px;
    color: var(--ss-white);
    line-height: 1.3;
}

p {
    margin: 0 0 18px;
}

::selection {
    background: var(--ss-red);
    color: var(--ss-white);
}

:focus-visible {
    outline: 2px solid var(--ss-red-light);
    outline-offset: 3px;
}

/* Browsers without :focus-visible (Safari before 15.4) still show the ring. */
@supports not selector(:focus-visible) {
    :focus {
        outline: 2px solid var(--ss-red-light);
        outline-offset: 3px;
    }
}

.safesky-container {
    width: min(var(--ss-container), calc(100% - 40px));
    margin-inline: auto;
}

.safesky-main {
    min-height: 50vh;
}

.safesky-skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 9999;
    padding: 10px 16px;
    background: var(--ss-red);
    color: var(--ss-white);
}

.safesky-skip-link:focus {
    top: 12px;
}

/* HEADER */

.safesky-header {
    position: relative;
    z-index: 100;
    /* Same background as the page; only a red tint in the top-left corner. */
    background: radial-gradient(circle at 0 0, rgba(197, 27, 37, .38) 0, rgba(197, 27, 37, 0) 360px);
    border-bottom: 1px solid var(--ss-line);
}

.safesky-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 88px;
}

.safesky-brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    /* Keeps the nav in place: the logo itself is taken out of the flow below. */
    min-width: 205px;
}

/* Order of the bar: the brand on the left, the controls on the right. */
.safesky-brand { order: 1; }
.safesky-nav { order: 2; }
.safesky-language-switcher { order: 3; }
.safesky-header-search { order: 4; }
.safesky-vip-header-link { order: 5; }
.safesky-header-cta { order: 6; }
.safesky-menu-toggle { order: 7; }

/* Oversized, faded logo pinned to the top-left corner of the header.
   About 15% of it sits outside the page edges; it never blocks clicks. */
.safesky-header > .custom-logo-link {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    transform: translate(-15%, -15%);
    opacity: .4;
    pointer-events: none;
}

.safesky-header > .custom-logo-link .custom-logo {
    display: block;
    width: auto;
    max-width: none;
    height: 310px;
    max-height: none;
    object-fit: contain;
}

/* Header content stays above the logo. */
.safesky-menu-toggle,
.safesky-nav,
.safesky-header-cta,
.safesky-vip-header-link {
    position: relative;
    z-index: 2;
}

/* VIP Header Link */
.safesky-vip-header-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 6px;
    color: var(--ss-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--ss-transition);
}

.safesky-vip-header-link:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--ss-gold-light);
    color: var(--ss-white);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}

.safesky-vip-gold-badge {
    display: inline-block;
    background: linear-gradient(135deg, #d4af37 0%, #fde68a 50%, #d4af37 100%);
    color: #0b0d12;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.2;
}

.safesky-nav-vip-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.safesky-nav-vip-link .safesky-vip-gold-badge {
    margin-right: 2px;
}


.safesky-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    color: var(--ss-white);
}

.safesky-brand-name {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 1px;
}

.safesky-brand-caption {
    margin-top: 5px;
    color: var(--ss-link);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}

.safesky-nav {
    display: flex;
    align-items: center;
}

.safesky-menu {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.safesky-menu li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.safesky-menu a {
    display: block;
    padding: 12px 0;
    color: var(--ss-text);
    font-size: 14px;
    font-weight: 600;
}

.safesky-menu a:hover,
.safesky-menu .current-menu-item > a,
.safesky-menu .current_page_item > a {
    color: var(--ss-link);
}

.safesky-menu-toggle {
    display: none;
    flex-shrink: 0;
}

.safesky-menu-toggle-lines,
.safesky-menu-toggle-lines::before,
.safesky-menu-toggle-lines::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
}

.safesky-menu-toggle-lines {
    position: relative;
}

.safesky-menu-toggle-lines::before,
.safesky-menu-toggle-lines::after {
    position: absolute;
    left: 0;
    content: "";
}

.safesky-menu-toggle-lines::before {
    top: -6px;
}

.safesky-menu-toggle-lines::after {
    top: 6px;
}

.safesky-menu-toggle-label {
    font-size: 14px;
}

/* ==========================================
   COLLAPSIBLE NAVIGATION
   The menu lives in a panel that opens from
   the toggle. Without JavaScript the menu
   stays open in the bar, so the site keeps
   working and every link stays reachable.
   ========================================== */

.safesky-js .safesky-menu-toggle {
    display: inline-flex;
}

/* The panel is the only background of the menu: one glass layer, one border,
   one shadow. It hangs below the bar and never covers the controls. */
.safesky-js .safesky-nav {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 130;
    display: block;
    width: auto;
    min-width: 240px;
    padding: 8px;
    background: rgba(16, 18, 22, .92);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .8);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.safesky-js .safesky-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.safesky-js .safesky-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    padding: 0;
}

.safesky-js .safesky-menu > li > a {
    padding: 11px 12px;
    border-radius: 8px;
}

.safesky-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 22px;
    background: var(--ss-red);
    border: 1px solid var(--ss-red);
    border-radius: 5px;
    color: var(--ss-white);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    transition: var(--ss-transition);
}

.safesky-button:hover {
    background: var(--ss-red-dark);
    border-color: var(--ss-red-dark);
    color: var(--ss-white);
    transform: translateY(-2px);
}

.safesky-button--outline {
    background: transparent;
    border-color: rgba(255,255,255,.55);
}

.safesky-button--outline:hover {
    background: var(--ss-red);
    border-color: var(--ss-red);
}

.safesky-header-cta {
    flex-shrink: 0;
}

/* ==========================================
   HEADER CONTROLS
   The Menu toggle and the Contact Us button
   are the same control: one shape, one
   height, one corporate colour. The toggle
   opens the navigation, the button links to
   the contact page.
   ========================================== */

.safesky-menu-toggle,
.safesky-header-cta {
    /* Depth in the 3D bar. The desktop bar sets it, small screens reset it. */
    --ss-control-layer: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 20px;
    background: linear-gradient(180deg, var(--ss-red-light), var(--ss-red) 55%, var(--ss-red-dark));
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: var(--ss-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .35) inset,
        0 4px 0 var(--ss-red-deep),
        0 12px 22px -4px rgba(197, 27, 37, .55);
    transform: translateZ(var(--ss-control-layer));
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.safesky-menu-toggle:hover,
.safesky-header-cta:hover {
    background: linear-gradient(180deg, var(--ss-red-lighter), var(--ss-red) 55%, var(--ss-red-dark));
    color: var(--ss-white);
    transform: translateZ(var(--ss-control-layer)) translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .4) inset,
        0 6px 0 var(--ss-red-deep),
        0 18px 28px -4px rgba(197, 27, 37, .7);
}

.safesky-menu-toggle:active,
.safesky-header-cta:active {
    transform: translateZ(var(--ss-control-layer)) translateY(3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .3) inset,
        0 1px 0 var(--ss-red-deep),
        0 4px 10px -2px rgba(197, 27, 37, .5);
}

/* ==========================================
   LANGUAGE SWITCHER
   A compact EN | DE control in the header.
   ========================================== */

.safesky-language-switcher {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
}

.safesky-language-link {
    padding: 6px 2px;
    color: var(--ss-dim);
    text-transform: uppercase;
    transition: color var(--ss-transition);
}

.safesky-language-link:hover {
    color: var(--ss-white);
}

.safesky-language-link.is-active {
    color: var(--ss-link);
}

.safesky-language-separator {
    color: var(--ss-dim);
    opacity: .6;
}

/* ==========================================
   HEADER SEARCH
   A compact field that searches the whole
   site with the native WordPress query.
   ========================================== */

.safesky-header-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 46px;
    margin-left: auto;
    padding: 3px 3px 3px 14px;
    background: rgba(10, 12, 17, .55);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    transition: border-color var(--ss-transition), box-shadow var(--ss-transition);
}

.safesky-header-search:focus-within {
    border-color: rgba(228, 43, 54, .7);
    box-shadow: 0 0 0 2px rgba(228, 43, 54, .35);
}

.safesky-header-search-field {
    width: 150px;
    min-width: 0;
    padding: 6px 0;
    background: transparent;
    border: 0;
    color: var(--ss-white);
    font-size: 13px;
}

.safesky-header-search-field:focus {
    outline: none;
}

.safesky-header-search-field::placeholder {
    color: var(--ss-dim);
}

.safesky-header-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--ss-surface-3);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: var(--ss-text);
    transition: background-color var(--ss-transition), border-color var(--ss-transition), color var(--ss-transition);
}

.safesky-header-search-submit:hover {
    background: var(--ss-red);
    border-color: var(--ss-red);
    color: var(--ss-white);
}

.safesky-header-search-icon {
    display: block;
    width: 15px;
    height: 15px;
}

/* HERO */

.safesky-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 590px;
    padding: 90px 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 80% 45%, var(--ss-surface-3) 0%, transparent 45%),
        linear-gradient(120deg, var(--ss-bg-2) 0%, var(--ss-bg-2) 65%, var(--ss-surface-3) 100%);
}

.safesky-hero::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: var(--ss-red);
    content: "";
}

.safesky-hero-inner {
    position: relative;
    z-index: 1;
}

.safesky-eyebrow {
    margin-bottom: 15px;
    color: var(--ss-link);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.safesky-hero h1 {
    max-width: 900px;
    margin-bottom: 23px;
    color: var(--ss-white);
    font-size: clamp(36px, 5vw, 62px);
    font-weight: 800;
    line-height: 1.12;
}

.safesky-hero h1 span {
    color: var(--ss-link);
}

.safesky-hero-description {
    max-width: 700px;
    margin-bottom: 30px;
    color: var(--ss-text);
    font-size: 18px;
}

.safesky-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* INTRO */

.safesky-intro {
    padding: 85px 0;
    background: var(--ss-surface-2);
}

.safesky-intro-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;
    align-items: center;
    gap: 65px;
}

.safesky-intro-content h2 {
    max-width: 650px;
    margin-bottom: 22px;
    font-size: clamp(30px, 3.5vw, 42px);
}

.safesky-intro-content p:not(.safesky-eyebrow) {
    color: var(--ss-text);
}

.safesky-text-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--ss-link);
    font-weight: 700;
}

.safesky-text-link:hover {
    color: var(--ss-white);
}

.safesky-intro-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 35px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.04), transparent),
        var(--ss-bg-2);
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    text-align: center;
}

.safesky-intro-panel-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 105px;
    margin-bottom: 25px;
    border: 2px solid var(--ss-red);
    color: var(--ss-white);
    font-size: 42px;
    font-weight: 800;
    transform: rotate(-3deg);
}

.safesky-intro-panel > p {
    margin-bottom: 8px;
    color: var(--ss-white);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
}

.safesky-intro-panel > span {
    color: var(--ss-muted);
    font-size: 11px;
    letter-spacing: 1.5px;
}

/* SERVICES */

.safesky-services {
    padding: 85px 0;
    background: var(--ss-bg);
}

.safesky-section-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.safesky-section-title {
    margin-bottom: 14px;
    font-size: clamp(30px, 3.5vw, 42px);
}

.safesky-section-description {
    color: var(--ss-muted);
}

.safesky-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.safesky-service-card {
    padding: 30px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    transition: transform var(--ss-transition),
                border-color var(--ss-transition),
                background-color var(--ss-transition);
}

.safesky-service-card:hover {
    background: var(--ss-surface-3);
    border-color: rgba(197,27,37,.8);
    transform: translateY(-5px);
}

.safesky-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    margin-bottom: 23px;
    background: rgba(197,27,37,.13);
    border: 1px solid rgba(197,27,37,.4);
    border-radius: 6px;
    color: var(--ss-link);
    font-size: 14px;
    font-weight: 800;
}

.safesky-service-card h3 {
    margin-bottom: 13px;
    font-size: 21px;
}

.safesky-service-card p {
    margin-bottom: 20px;
    color: var(--ss-muted);
    font-size: 14px;
}

.safesky-service-card > a {
    color: var(--ss-link);
    font-size: 13px;
    font-weight: 700;
}

.safesky-service-card > a:hover {
    color: var(--ss-white);
}

/* CALL TO ACTION */

.safesky-cta {
    padding: 65px 0;
    background: var(--ss-bg-2);
    border-top: 1px solid var(--ss-line);
    border-bottom: 1px solid var(--ss-line);
}

.safesky-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.safesky-cta-inner > div {
    max-width: 750px;
}

.safesky-cta h2 {
    margin-bottom: 13px;
    font-size: clamp(26px, 3vw, 36px);
}

.safesky-cta p:not(.safesky-eyebrow) {
    margin-bottom: 0;
    color: var(--ss-muted);
}

/* POSTS */

.safesky-latest-posts {
    padding: 80px 0;
    background: var(--ss-surface-2);
}

.safesky-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.safesky-post-card {
    overflow: hidden;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
}

.safesky-post-image {
    display: block;
    overflow: hidden;
    background: var(--ss-bg-2);
}

.safesky-post-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 350ms ease;
}

.safesky-post-card:hover .safesky-post-image img {
    transform: scale(1.04);
}

.safesky-post-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    color: var(--ss-muted);
    font-weight: 800;
}

.safesky-post-card-content {
    padding: 23px;
}

.safesky-post-meta {
    color: var(--ss-muted);
    font-size: 12px;
}

.safesky-post-card h3 {
    font-size: 20px;
}

.safesky-post-card h3 a {
    color: var(--ss-white);
}

.safesky-post-card h3 a:hover {
    color: var(--ss-link);
}

.safesky-post-card-content > p:not(.safesky-post-meta) {
    color: var(--ss-muted);
    font-size: 14px;
}

/* GENERAL PAGE TEMPLATES */

.safesky-page,
.safesky-content-area,
.safesky-archive {
    min-height: 400px;
    padding: 65px 0;
    background: var(--ss-bg);
}

.safesky-page-title {
    margin-bottom: 28px;
    font-size: clamp(30px, 4vw, 44px);
}

.safesky-content {
    color: var(--ss-text);
}

.safesky-content h2 {
    margin-top: 32px;
    font-size: 28px;
}

.safesky-content h3 {
    margin-top: 25px;
    font-size: 22px;
}

.safesky-content ul,
.safesky-content ol {
    padding-left: 24px;
}

.safesky-content li {
    margin-bottom: 8px;
}

.safesky-content blockquote {
    margin: 25px 0;
    padding: 18px 24px;
    background: var(--ss-surface);
    border-left: 4px solid var(--ss-red);
}

.safesky-content table {
    width: 100%;
    border-collapse: collapse;
}

.safesky-content th,
.safesky-content td {
    padding: 12px;
    border: 1px solid var(--ss-line);
    text-align: left;
}

.safesky-content th {
    background: var(--ss-surface);
    color: var(--ss-white);
}

.safesky-content td {
    background: var(--ss-surface-2);
}

/* FOOTER */

.safesky-footer {
    padding: 60px 0 22px;
    background: var(--ss-bg-2);
    border-top: 1px solid var(--ss-line);
}

.safesky-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr .8fr 1fr;
    gap: 50px;
}

.safesky-footer-brand {
    display: inline-flex;
    flex-direction: column;
    margin-bottom: 20px;
    color: var(--ss-white);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
}

.safesky-footer-brand span {
    color: var(--ss-link);
    font-size: 12px;
    letter-spacing: 4px;
}

.safesky-footer h3 {
    margin-bottom: 20px;
    font-size: 17px;
}

.safesky-footer p {
    color: var(--ss-muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.safesky-footer a {
    color: var(--ss-text);
}

.safesky-footer a:hover {
    color: var(--ss-link);
}

.safesky-footer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.safesky-footer-menu li {
    margin-bottom: 10px;
    list-style: none;
}

.safesky-footer-menu a {
    font-size: 14px;
}

.safesky-footer-bottom {
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid var(--ss-line);
}

.safesky-footer-bottom p {
    margin: 0;
    font-size: 12px;
}

/* ==========================================
   FOOTER CALENDAR
   A live Gregorian calendar. The month is
   printed by the server and kept up to date
   by the browser, so the footer never shows a
   stale date.
   ========================================== */

.safesky-calendar {
    max-width: 280px;
}

.safesky-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.safesky-footer .safesky-calendar-title,
.safesky-calendar-title {
    margin: 0;
    color: var(--ss-white);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;
}

.safesky-calendar-navs {
    display: flex;
    gap: 6px;
}

.safesky-calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: 999px;
    color: var(--ss-text);
    transition: background-color var(--ss-transition),
                border-color var(--ss-transition),
                color var(--ss-transition);
}

.safesky-calendar-nav:hover {
    background: var(--ss-red);
    border-color: var(--ss-red);
    color: var(--ss-white);
}

.safesky-calendar-nav svg {
    display: block;
    width: 12px;
    height: 12px;
}

.safesky-calendar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.safesky-calendar-table th {
    padding: 0 0 6px;
    color: var(--ss-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.safesky-calendar-table th abbr {
    border: 0;
    text-decoration: none;
}

.safesky-calendar-cell {
    padding: 2px 0;
    text-align: center;
}

.safesky-calendar-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--ss-text);
    font-size: 13px;
    line-height: 1;
}

.safesky-calendar-day.is-today {
    background: var(--ss-red);
    color: var(--ss-white);
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset;
}

/* VIP — APPLY ONLY INSIDE VIP WRAPPERS */

.safesky-vip,
.safesky-vip-page,
.safesky-vip-portal,
.safesky-vip-register,
.safesky-vip-catalog,
.safesky-part-request {
    background: var(--ss-bg-2);
    color: var(--ss-white);
}

.safesky-vip .safesky-button,
.safesky-vip-page .safesky-button,
.safesky-vip-portal .safesky-button,
.safesky-vip-register .safesky-button,
.safesky-vip-catalog .safesky-button,
.safesky-part-request .safesky-button {
    background: var(--ss-gold);
    border-color: var(--ss-gold);
    color: var(--ss-bg-2);
}

.safesky-vip .safesky-button:hover,
.safesky-vip-page .safesky-button:hover,
.safesky-vip-portal .safesky-button:hover,
.safesky-vip-register .safesky-button:hover,
.safesky-vip-catalog .safesky-button:hover,
.safesky-part-request .safesky-button:hover {
    background: var(--ss-gold-light);
    border-color: var(--ss-gold-light);
    color: var(--ss-bg-2);
}

.safesky-vip .safesky-service-card,
.safesky-vip-page .safesky-service-card,
.safesky-vip-portal .safesky-service-card,
.safesky-vip-register .safesky-service-card,
.safesky-vip-catalog .safesky-service-card,
.safesky-part-request .safesky-service-card {
    border-color: rgba(201,164,92,.3);
}

/* WORDPRESS */

.alignleft {
    float: left;
    margin: 0 20px 15px 0;
}

.alignright {
    float: right;
    margin: 0 0 15px 20px;
}

.aligncenter {
    display: block;
    margin-inline: auto;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .safesky-header-inner {
        gap: 15px;
    }

    .safesky-menu {
        gap: 15px;
    }

    .safesky-menu-toggle,
    .safesky-header-cta {
        padding-inline: 15px;
    }

    .safesky-services-grid,
    .safesky-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .safesky-header-inner {
        min-height: 75px;
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-block: 12px;
    }

    /* The search field and the language switcher move to their own row, so
       the controls of the bar keep their place and nothing overlaps on
       small screens. */
    .safesky-header-search {
        order: 10;
        flex: 1 1 auto;
        margin-left: 0;
    }

    .safesky-language-switcher {
        order: 11;
    }

    .safesky-header-search-field {
        width: 100%;
    }

    .safesky-nav {
        display: block;
        flex: 0 0 100%;
        width: 100%;
    }

    /* The panel spans the whole bar on small screens. */
    .safesky-js .safesky-nav {
        left: 0;
        right: 0;
        min-width: 0;
    }

    .safesky-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 8px 0;
    }

    .safesky-menu > li {
        border-top: 1px solid var(--ss-line);
    }

    .safesky-menu a {
        padding: 12px 4px;
    }

    .safesky-menu .sub-menu {
        position: static;
        display: block;
        padding: 0 15px;
    }

    .safesky-intro-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .safesky-hero {
        min-height: 500px;
        padding: 65px 0;
    }

    .safesky-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }

    .safesky-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .safesky-container {
        width: calc(100% - 30px);
    }

    .safesky-brand {
        min-width: 0;
    }

    .safesky-menu-toggle,
    .safesky-header-cta {
        gap: 7px;
        min-height: 42px;
        padding: 9px 13px;
        font-size: 13px;
    }

    .safesky-menu-toggle-lines,
    .safesky-menu-toggle-lines::before,
    .safesky-menu-toggle-lines::after {
        width: 17px;
    }

    .safesky-header > .custom-logo-link .custom-logo {
        height: 160px;
    }

    .safesky-brand-name {
        font-size: 21px;
    }

    .safesky-hero {
        min-height: 430px;
        padding: 55px 0;
    }

    .safesky-hero h1 {
        font-size: 34px;
    }

    .safesky-hero-description {
        font-size: 15px;
    }

    .safesky-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .safesky-hero-actions .safesky-button,
    .safesky-cta .safesky-button {
        width: 100%;
    }

    .safesky-intro,
    .safesky-services,
    .safesky-latest-posts {
        padding: 55px 0;
    }

    .safesky-services-grid,
    .safesky-post-grid,
    .safesky-footer-grid {
        grid-template-columns: 1fr;
    }

    .safesky-service-card {
        padding: 24px;
    }

    .safesky-footer-grid {
        gap: 25px;
    }

    .safesky-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .alignleft,
    .alignright {
        float: none;
        display: block;
        margin: 15px auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

.safesky-404-inner {
    padding-top: 55px;
    padding-bottom: 55px;
    text-align: center;
}

.safesky-404-inner > p:not(.safesky-eyebrow) {
    max-width: 620px;
    margin: 0 auto 25px;
    color: var(--ss-muted);
}

.safesky-404-search,
.safesky-search-form {
    max-width: 500px;
    margin: 35px auto 0;
}

.safesky-404-search form,
.safesky-search-form form {
    display: flex;
    gap: 10px;
}

.safesky-404-search input[type="search"],
.safesky-search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 12px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: 5px;
    color: var(--ss-white);
}

.safesky-404-search input[type="submit"],
.safesky-search-form input[type="submit"] {
    padding: 12px 18px;
    background: var(--ss-red);
    border: 1px solid var(--ss-red);
    border-radius: 5px;
    color: var(--ss-white);
}

.safesky-pagination {
    margin-top: 40px;
    text-align: center;
}

.safesky-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.safesky-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: 4px;
    color: var(--ss-white);
}

.safesky-pagination .page-numbers.current,
.safesky-pagination a.page-numbers:hover {
    background: var(--ss-red);
    border-color: var(--ss-red);
    color: var(--ss-white);
}

.safesky-page-featured-image,
.safesky-single-featured-image {
    margin-bottom: 30px;
}

.safesky-page-featured-image img,
.safesky-single-featured-image img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    border-radius: var(--ss-radius);
}

.safesky-post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--ss-line);
}

.safesky-post-navigation a {
    color: var(--ss-link);
    font-weight: 700;
}

@media (max-width: 520px) {
    .safesky-404-search form,
    .safesky-search-form form {
        flex-direction: column;
    }

    .safesky-post-navigation {
        flex-direction: column;
    }
}

/* ==========================================
   SAFE SKY — PREMIUM MOTION EXPERIENCE
   ========================================== */

/* Animated progress line */
.safesky-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ss-red-dark), var(--ss-red-bright), var(--ss-red-soft));
    box-shadow: 0 0 12px rgba(228, 43, 54, .7);
    pointer-events: none;
}

/* Ambient pointer light */
.safesky-pointer-glow {
    position: fixed;
    z-index: 0;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(197, 27, 37, .10) 0%,
        rgba(197, 27, 37, .035) 40%,
        transparent 72%
    );
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .safesky-pointer-glow {
        opacity: 1;
    }
}

/* Hero visual atmosphere */
.safesky-hero {
    isolation: isolate;
}

.safesky-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(197, 27, 37, .16),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(255, 255, 255, .05),
            transparent 25%
        );
    content: "";
    pointer-events: none;
}

.safesky-hero-inner {
    animation: safesky-hero-enter .9s cubic-bezier(.2,.75,.25,1) both;
}

.safesky-hero .safesky-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.safesky-hero .safesky-eyebrow::before {
    width: 28px;
    height: 2px;
    background: var(--ss-red-light);
    content: "";
}

.safesky-hero h1 span {
    text-shadow: 0 0 28px rgba(228, 43, 54, .18);
}

/* Reveal elements on scroll */
.safesky-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.7,.25,1);
    transition-delay: var(--ss-reveal-delay, 0ms);
}

.safesky-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Service cards */
.safesky-service-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}

.safesky-service-card::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        circle at var(--ss-card-x, 50%) var(--ss-card-y, 50%),
        rgba(197, 27, 37, .20),
        transparent 60%
    );
    content: "";
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.safesky-service-card:hover::before {
    opacity: 1;
}

.safesky-service-card:hover {
    border-color: rgba(228, 43, 54, .7);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
}

.safesky-service-icon {
    font-size: 25px;
    line-height: 1;
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        background-color .3s ease,
        box-shadow .3s ease;
}

.safesky-service-card:hover .safesky-service-icon {
    transform: translateY(-3px) rotate(-7deg) scale(1.12);
    background: rgba(197, 27, 37, .22);
    box-shadow: 0 0 24px rgba(197, 27, 37, .12);
}

/* Buttons: light sweep */
.safesky-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.safesky-button::before {
    position: absolute;
    top: -50%;
    left: -75%;
    z-index: -1;
    width: 45%;
    height: 200%;
    background: rgba(255, 255, 255, .18);
    content: "";
    transform: skewX(-22deg);
    transition: left .55s ease;
}

.safesky-button:hover::before {
    left: 140%;
}

/* Click ripple */
.safesky-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .42);
    transform: translate(-50%, -50%) scale(0);
    animation: safesky-ripple .55s ease-out forwards;
    pointer-events: none;
}

/* Intro brand mark */
.safesky-intro-panel-mark {
    position: relative;
    animation: safesky-mark-float 5s ease-in-out infinite;
    box-shadow: 0 0 35px rgba(197, 27, 37, .08);
}

.safesky-intro-panel-mark::after {
    position: absolute;
    inset: -9px;
    border: 1px solid rgba(197, 27, 37, .25);
    content: "";
    animation: safesky-mark-ring 4s ease-in-out infinite;
}

/* Image hover */
.safesky-post-image img,
.safesky-page-featured-image img,
.safesky-single-featured-image img {
    transition: transform .65s cubic-bezier(.2,.7,.2,1);
}

.safesky-post-card:hover .safesky-post-image img {
    transform: scale(1.055);
}

/* Back-to-top button */
.safesky-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--ss-red);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    color: white;
    font-size: 22px;
    box-shadow: 0 8px 28px rgba(0,0,0,.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .25s ease;
    cursor: pointer;
}

.safesky-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.safesky-back-to-top:hover {
    background: var(--ss-red);
    color: white;
    transform: translateY(-4px);
}

/* Motion keyframes */
@keyframes safesky-hero-enter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes safesky-ripple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(15);
    }
}

@keyframes safesky-mark-float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes safesky-mark-ring {
    0%, 100% { transform: scale(1); opacity: .45; }
    50% { transform: scale(1.06); opacity: 1; }
}

/* Reduced motion and touch devices */
@media (hover: none), (max-width: 820px) {
    .safesky-pointer-glow {
        display: none;
    }

    .safesky-service-card {
        transform: none !important;
    }

    .safesky-service-card:hover {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .safesky-reveal {
        opacity: 1;
        transform: none;
    }

    .safesky-pointer-glow {
        display: none;
    }
}
.safesky-service-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}
/* SAFE SKY — Animated Service Icons */
.safesky-service-icon {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: var(--ss-white);
  background:
    radial-gradient(circle at 50% 45%, rgba(197,27,37,.16), transparent 70%),
    linear-gradient(145deg, var(--ss-surface-2), var(--ss-bg-2));
  border: 1px solid rgba(197,27,37,.28);
  border-radius: 20px;
  box-shadow: inset 0 0 22px rgba(255,255,255,.025);
  transition: border-color .35s ease, box-shadow .35s ease,
              background .35s ease;
}

.safesky-service-icon svg {
  width: 43px;
  height: 43px;
  position: relative;
  z-index: 2;
  overflow: visible;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}

.safesky-service-icon::before {
  content: "";
  position: absolute;
  width: 130%;
  height: 1px;
  left: -140%;
  top: 50%;
  background: linear-gradient(90deg, transparent, var(--ss-red), transparent);
  opacity: 0;
}

.safesky-service-card:hover .safesky-service-icon {
  border-color: rgba(197,27,37,.8);
  box-shadow: 0 0 26px rgba(197,27,37,.16),
              inset 0 0 20px rgba(197,27,37,.07);
}

/* Airplane takeoff */
.ss-icon-plane svg {
  transform-origin: center;
}

.safesky-service-card:hover .ss-icon-plane svg {
  animation: ss-plane-flight .8s cubic-bezier(.2,.8,.2,1) both;
}

.safesky-service-card:hover .ss-icon-plane::before {
  animation: ss-flight-trail .65s ease-out both;
}

/* Inspection: scanning lens */
.safesky-service-card:hover .ss-icon-inspect svg {
  animation: ss-inspect .7s ease-in-out;
}

/* Tools: quick mechanical turn */
.safesky-service-card:hover .ss-icon-tools svg {
  animation: ss-tools .7s ease-in-out;
}

/* Lab: subtle instrument pulse */
.safesky-service-card:hover .ss-icon-lab svg {
  animation: ss-lab-pulse .65s ease-in-out;
}

/* Borescope: camera inspection movement */
.safesky-service-card:hover .ss-icon-borescope svg {
  animation: ss-scope .75s ease-in-out;
}

/* Engineering: rotating mechanism */
.safesky-service-card:hover .ss-icon-engineering svg {
  animation: ss-gear-turn .9s ease-in-out;
}

@keyframes ss-plane-flight {
  0%   { transform: translate(0, 0) rotate(0); }
  35%  { transform: translate(5px, -2px) rotate(5deg); }
  65%  { transform: translate(15px, -9px) rotate(10deg); }
  100% { transform: translate(9px, -5px) rotate(7deg); }
}

@keyframes ss-flight-trail {
  0%   { left: -140%; opacity: 0; }
  30%  { opacity: .9; }
  100% { left: 120%; opacity: 0; }
}

@keyframes ss-inspect {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(3px, -2px) rotate(5deg); }
  70% { transform: translate(-2px, 1px) rotate(-3deg); }
}

@keyframes ss-tools {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-9deg) scale(1.08); }
  70% { transform: rotate(6deg) scale(1.04); }
}

@keyframes ss-lab-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.13); }
}

@keyframes ss-scope {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(4px) rotate(4deg); }
  75% { transform: translateX(-2px); }
}

@keyframes ss-gear-turn {
  0% { transform: rotate(0); }
  70% { transform: rotate(45deg); }
  100% { transform: rotate(25deg); }
}

@media (prefers-reduced-motion: reduce) {
  .safesky-service-icon *,
  .safesky-service-icon::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   SAFE SKY AVIATION — ENGINEERING HOME
   Scoped styles: ss-
   ========================================================== */

.ss-engineering-home {
  background: var(--ss-bg);
  color: var(--ss-white);
  overflow: clip;
}

.ss-engineering-home *,
.ss-engineering-home *::before,
.ss-engineering-home *::after {
  box-sizing: border-box;
}

.ss-container {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

.ss-engineering-home a {
  text-decoration: none;
}

.ss-hero {
  min-height: 690px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 92px 0 82px;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 78% 46%, rgba(197,27,37,.10), transparent 33%),
    linear-gradient(110deg, var(--ss-bg) 30%, var(--ss-bg-2) 100%);
}

.ss-hero-grid,
.ss-contact-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .20;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, black, transparent 92%);
}

.ss-hero-layout {
  display: grid;
  grid-template-columns: 1fr .9fr;
  align-items: center;
  gap: clamp(35px, 6vw, 90px);
  position: relative;
  z-index: 1;
}

.ss-hero-copy {
  animation: ss-enter-left .85s cubic-bezier(.2,.7,.2,1) both;
}

.ss-eyebrow,
.ss-section-index,
.ss-services-toolbar,
.ss-hero-footnote,
.ss-hero-bottom-line,
.ss-card-topline,
.ss-card-tag,
.ss-card-corner,
.ss-card-more,
.ss-image-label,
.ss-image-coordinate,
.ss-floating-data,
.ss-services-footer {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
  font-size: 10px;
  line-height: 1.6;
}

.ss-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ss-text);
  margin-bottom: 25px;
}

.ss-status-dot,
.ss-card-status::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--ss-red);
  box-shadow: 0 0 13px rgba(197,27,37,.75);
}

.ss-hero h1 {
  max-width: 690px;
  margin: 0;
  font-size: clamp(46px, 6.4vw, 82px);
  line-height: .99;
  letter-spacing: -.065em;
  font-weight: 800;
  color: var(--ss-white);
}

.ss-hero h1 span,
.ss-intro-heading h2 span,
.ss-services-heading h2 span,
.ss-contact-layout h2 span {
  color: var(--ss-red);
}

.ss-hero-copy > p {
  max-width: 510px;
  margin: 28px 0 30px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ss-muted);
}

.ss-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ss-btn {
  min-height: 49px;
  padding: 0 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 700;
  transition: transform .25s ease, background .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}

.ss-btn:hover {
  transform: translateY(-3px);
}

/* The brand red keeps white button text above the AA 4.5:1 ratio
   (var(--ss-white) on var(--ss-red) = 5.9:1, on the hover shade = 7.5:1). */
.ss-btn-primary {
  color: var(--ss-white) !important;
  background: var(--ss-red);
  border: 1px solid var(--ss-red);
  box-shadow: 0 7px 25px var(--ss-glow);
}

.ss-btn-primary:hover {
  background: var(--ss-red-hover);
  border-color: var(--ss-red-hover);
  box-shadow: 0 10px 34px rgba(197, 27, 37, .28);
}

.ss-btn-outline {
  color: var(--ss-text) !important;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.2);
}

.ss-btn-outline:hover {
  border-color: var(--ss-red);
  background: rgba(197,27,37,.07);
}

.ss-hero-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 45px;
  color: var(--ss-dim);
  font-size: 9px;
}

.ss-hero-visual {
  position: relative;
  min-width: 0;
  perspective: 1000px;
  animation: ss-enter-right 1s cubic-bezier(.2,.7,.2,1) both;
}

.ss-hero-image-frame {
  min-height: 390px;
  height: clamp(390px, 43vw, 510px);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: var(--ss-surface-2);
  transform-style: preserve-3d;
  transition: transform .18s ease-out, border-color .3s ease;
}

.ss-hero-image-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(.72) contrast(1.08) brightness(.78);
  transform: scale(1.04);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.ss-hero-visual:hover .ss-hero-image-frame > img {
  transform: scale(1.1);
  filter: saturate(.9) contrast(1.1) brightness(.9);
}

.ss-image-shade,
.ss-card-image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(5,6,8,.88), transparent 42%),
    linear-gradient(120deg, rgba(7,8,10,.35), transparent 60%);
}

.ss-image-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background: linear-gradient(120deg, transparent 40%, rgba(197,27,37,.2), transparent 75%);
  mix-blend-mode: screen;
}

.ss-image-crosshair {
  width: 26px;
  height: 26px;
  position: absolute;
  border-color: var(--ss-red);
  opacity: .9;
}

.ss-crosshair-tl {
  left: 18px;
  top: 18px;
  border-left: 1px solid;
  border-top: 1px solid;
}

.ss-crosshair-br {
  right: 18px;
  bottom: 18px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.ss-image-label {
  position: absolute;
  top: 24px;
  left: 25px;
  display: grid;
  gap: 5px;
  color: var(--ss-text);
}

.ss-image-label strong {
  color: white;
  font-weight: 700;
}

.ss-image-coordinate {
  position: absolute;
  bottom: 23px;
  left: 25px;
  right: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  color: var(--ss-muted);
  font-size: 8px;
}

.ss-floating-data {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: rgba(16,17,20,.9);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 15px 45px rgba(0,0,0,.25);
  color: var(--ss-muted);
  font-size: 9px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.ss-floating-data strong {
  color: var(--ss-white);
  font-weight: 700;
}

.ss-data-top {
  top: 46px;
  right: -23px;
}

.ss-data-bottom {
  bottom: 70px;
  left: -30px;
}

.ss-data-mark {
  width: 24px;
  height: 24px;
  border: 1px solid var(--ss-red);
  position: relative;
}

.ss-data-mark::before,
.ss-data-mark::after {
  content: "";
  position: absolute;
  background: var(--ss-red);
}

.ss-data-mark::before {
  width: 1px;
  height: 100%;
  left: 50%;
}

.ss-data-mark::after {
  height: 1px;
  width: 100%;
  top: 50%;
}

.ss-data-number {
  font-size: 22px;
  font-weight: 800;
  color: white;
  letter-spacing: -.06em;
}

.ss-data-number span {
  color: var(--ss-link);
}

.ss-hero-bottom-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px max(24px, calc((100vw - 1240px) / 2));
  border-top: 1px solid rgba(255,255,255,.09);
  color: var(--ss-dim);
  font-size: 8px;
}

/* INTRO */
.ss-intro {
  padding: 105px 0 112px;
  border-bottom: 1px solid var(--ss-line);
  background: var(--ss-bg-2);
}

.ss-intro-layout {
  display: grid;
  grid-template-columns: 145px 1.15fr .85fr;
  gap: 32px;
  align-items: start;
}

.ss-section-index {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  color: var(--ss-dim);
  font-size: 9px;
}

.ss-section-index > span:first-child {
  color: var(--ss-link);
  font-weight: 700;
}

.ss-index-line {
  width: 25px;
  height: 1px;
  background: var(--ss-red);
}

.ss-intro-heading h2,
.ss-services-heading h2,
.ss-contact-layout h2 {
  margin: 0;
  color: var(--ss-white);
  font-size: clamp(32px, 4.2vw, 53px);
  line-height: 1.13;
  letter-spacing: -.055em;
  font-weight: 750;
}

.ss-intro-description p {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ss-muted);
}

.ss-text-link {
  display: inline-flex;
  gap: 24px;
  align-items: center;
  color: white !important;
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 700;
}

.ss-text-link span {
  color: var(--ss-link);
  transition: transform .25s ease;
}

.ss-text-link:hover span {
  transform: translate(4px,-4px);
}

/* SERVICES */
.ss-services {
  position: relative;
  padding: 105px 0 95px;
  background:
    radial-gradient(ellipse at 10% 18%, rgba(197,27,37,.045), transparent 30%),
    var(--ss-bg);
}

.ss-services-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 52px;
}

.ss-services-heading .ss-section-index {
  margin-bottom: 25px;
}

.ss-services-heading > p {
  max-width: 355px;
  margin: 0 0 6px;
  color: var(--ss-muted);
  font-size: 14px;
  line-height: 1.9;
}

.ss-services-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--ss-line);
  border-bottom: 1px solid var(--ss-line);
  color: var(--ss-dim);
  font-size: 9px;
}

.ss-services-toolbar > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ss-services-toolbar i {
  width: 6px;
  height: 6px;
  background: var(--ss-red);
  display: inline-block;
}

.ss-services-toolbar b {
  color: var(--ss-link);
  padding-left: 8px;
}

.ss-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.ss-service-card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  outline: none;
  background: linear-gradient(150deg, var(--ss-surface-2), var(--ss-bg-2) 78%);
  border: 1px solid rgba(255,255,255,.11);
  transform-style: preserve-3d;
  transition: border-color .3s ease, box-shadow .35s ease,
              background .3s ease, transform .15s ease-out;
  cursor: pointer;
}

.ss-service-card:hover,
.ss-service-card:focus-visible,
.ss-service-card.is-active {
  border-color: rgba(197,27,37,.62);
  box-shadow: var(--ss-shadow),
              0 0 30px rgba(197,27,37,.06);
}

.ss-service-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: -110%;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ss-red), transparent);
  pointer-events: none;
}

.ss-service-card:hover::after,
.ss-service-card.is-active::after {
  left: 150%;
  transition: left .8s ease;
}

.ss-card-media-link {
  display: block;
  height: 100%;
}

a.ss-card-more {
  color: inherit;
}

.ss-card-media {
  height: 218px;
  position: relative;
  overflow: hidden;
  background: var(--ss-surface-2);
}

.ss-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(.48) saturate(.7) brightness(.72);
  transform: scale(1.02);
  transition: transform .8s cubic-bezier(.2,.7,.2,1),
              filter .6s ease;
}

.ss-service-card:hover .ss-card-media img,
.ss-service-card.is-active .ss-card-media img {
  transform: scale(1.09);
  filter: grayscale(.05) saturate(.88) brightness(.9);
}

.ss-card-image-overlay {
  background: linear-gradient(0deg, rgba(8,9,11,.86), transparent 70%);
  transition: opacity .35s ease;
}

.ss-card-tag,
.ss-card-corner {
  position: absolute;
  z-index: 1;
  top: 15px;
  padding: 6px 8px;
  color: var(--ss-text);
  background: rgba(10,11,13,.72);
  border: 1px solid rgba(255,255,255,.13);
  font-size: 8px;
}

.ss-card-tag {
  left: 15px;
}

.ss-card-corner {
  right: 15px;
  color: var(--ss-muted);
}

.ss-card-crosshair {
  position: absolute;
  bottom: 15px;
  right: 17px;
  color: var(--ss-link);
  font-size: 23px;
  line-height: 1;
  opacity: .85;
  transition: transform .3s ease;
}

.ss-service-card:hover .ss-card-crosshair {
  transform: rotate(90deg) scale(1.12);
}

.ss-card-body {
  padding: 21px 21px 18px;
}

.ss-card-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ss-dim);
  font-size: 8px;
}

.ss-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ss-muted);
}

.ss-card-status::before {
  content: "";
  width: 5px;
  height: 5px;
  flex-basis: 5px;
}

.ss-card-body h3 {
  margin: 21px 0 12px;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.15;
  letter-spacing: -.04em;
  font-weight: 700;
  color: var(--ss-white);
}

.ss-card-body > p {
  min-height: 53px;
  margin: 0;
  color: var(--ss-muted);
  font-size: 12px;
  line-height: 1.8;
}

.ss-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 23px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.ss-card-more {
  color: var(--ss-text);
  font-size: 8px;
  font-weight: 700;
}

.ss-card-more b {
  color: var(--ss-link);
  padding-left: 7px;
  transition: padding .2s ease;
}

.ss-service-card:hover .ss-card-more b,
.ss-service-card.is-active .ss-card-more b,
.ss-card-disclosure[open] .ss-card-more b {
  padding-left: 13px;
}

.ss-card-symbol {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.17);
  color: white;
  font-size: 13px;
  transition: background .25s ease, border-color .25s ease;
}

.ss-service-card:hover .ss-card-symbol,
.ss-service-card.is-active .ss-card-symbol,
.ss-card-disclosure[open] .ss-card-symbol {
  background: var(--ss-red);
  border-color: var(--ss-red);
}

/* Service card disclosure: a native <details> element. While the panel is
   closed the browser keeps it out of the layout and out of the tab order, so
   the contact link inside it is only reachable once it has been opened. */
.ss-card-disclosure {
  margin-top: 23px;
}

.ss-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.1);
  list-style: none;
  cursor: pointer;
}

.ss-card-summary::-webkit-details-marker {
  display: none;
}

.ss-card-summary:focus-visible {
  outline: 2px solid var(--ss-red-light);
  outline-offset: 3px;
}

.ss-card-detail-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s ease, opacity .3s ease;
}

.ss-card-detail-content {
  overflow: hidden;
}

.ss-card-disclosure[open] .ss-card-detail-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.ss-card-detail p {
  margin: 0;
  color: var(--ss-muted);
  font-size: 12px;
  line-height: 1.85;
}

.ss-card-detail a {
  display: inline-block;
  margin-top: 0;
  color: var(--ss-white);
  font-size: 9px;
  letter-spacing: .08em;
  font-weight: 700;
}

.ss-service-card.is-active .ss-card-detail {
  grid-template-rows: 1fr;
  opacity: 1;
}

.ss-service-card.is-active .ss-card-detail p {
  padding-top: 17px;
}

.ss-service-card.is-active .ss-card-detail a {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: var(--ss-red-soft);
}

.ss-services-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 35px;
  color: var(--ss-dim);
  font-size: 8px;
}

.ss-footer-line {
  height: 1px;
  flex: 1;
  background: var(--ss-line);
}

.ss-services-footer a {
  color: var(--ss-text) !important;
  white-space: nowrap;
  font-weight: 700;
}

.ss-services-footer a:hover {
  color: var(--ss-link) !important;
}

/* CONTACT BAND */
.ss-contact-band {
  position: relative;
  padding: 85px 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 75% 50%, rgba(197,27,37,.12), transparent 35%),
    var(--ss-bg-2);
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.ss-contact-grid {
  opacity: .13;
  mask-image: linear-gradient(90deg, transparent, black);
}

.ss-contact-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  position: relative;
}

.ss-contact-layout .ss-section-index {
  margin-bottom: 24px;
}

.ss-contact-layout h2 {
  font-size: clamp(35px, 4.5vw, 56px);
}

.ss-contact-layout p {
  max-width: 480px;
  margin: 20px 0 0;
  color: var(--ss-muted);
  font-size: 13px;
  line-height: 1.8;
}

.ss-contact-button {
  flex-shrink: 0;
}

/* SCROLL REVEAL */
.safesky-js .ss-engineering-home .ss-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}

.ss-engineering-home .ss-reveal.ss-visible {
  opacity: 1;
  transform: translateY(0);
}

.ss-service-card.ss-visible:nth-child(3n + 2) {
  transition-delay: .08s;
}

.ss-service-card.ss-visible:nth-child(3n) {
  transition-delay: .16s;
}

/* Motion */
@keyframes ss-enter-left {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ss-enter-right {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1000px) {
  .ss-hero-layout {
    grid-template-columns: 1fr .85fr;
    gap: 30px;
  }

  .ss-hero h1 {
    font-size: clamp(44px, 6vw, 66px);
  }

  .ss-intro-layout {
    grid-template-columns: 115px 1fr 1fr;
    gap: 22px;
  }

  .ss-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-card-media {
    height: 235px;
  }
}

@media (max-width: 720px) {
  .ss-container {
    width: min(100% - 34px, 520px);
  }

  .ss-hero {
    padding: 70px 0 74px;
  }

  .ss-hero-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .ss-hero h1 {
    font-size: clamp(46px, 12vw, 68px);
  }

  .ss-hero-copy > p {
    font-size: 14px;
  }

  .ss-hero-image-frame {
    height: 370px;
    min-height: 0;
  }

  .ss-data-top {
    right: -6px;
  }

  .ss-data-bottom {
    left: -5px;
  }

  .ss-hero-bottom-line {
    padding: 13px 17px;
  }

  .ss-hero-bottom-line span:nth-child(2) {
    display: none;
  }

  .ss-intro {
    padding: 75px 0;
  }

  .ss-intro-layout {
    grid-template-columns: 1fr;
    gap: 23px;
  }

  .ss-intro-heading h2,
  .ss-services-heading h2 {
    font-size: clamp(34px, 9vw, 46px);
  }

  .ss-services {
    padding: 76px 0;
  }

  .ss-services-heading {
    display: grid;
    gap: 20px;
    margin-bottom: 32px;
  }

  .ss-services-toolbar {
    font-size: 8px;
  }

  .ss-services-toolbar > span:last-child {
    text-align: right;
  }

  .ss-service-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ss-card-media {
    height: clamp(205px, 58vw, 300px);
  }

  .ss-card-body h3 {
    font-size: 25px;
  }

  .ss-card-body > p {
    min-height: 0;
  }

  .ss-contact-band {
    padding: 68px 0;
  }

  .ss-contact-layout {
    align-items: flex-start;
    flex-direction: column;
    gap: 30px;
  }

  .ss-contact-button {
    width: 100%;
  }

  .ss-services-footer {
    flex-wrap: wrap;
  }

  .ss-footer-line {
    min-width: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-engineering-home *,
  .ss-engineering-home *::before,
  .ss-engineering-home *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .safesky-js .ss-engineering-home .ss-reveal {
    opacity: 1;
    transform: none;
  }
}

/* SAFE SKY — Interactive aircraft cursor */
#ss-flight-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9990;
  pointer-events: none;
}

#ss-cursor-plane {
  position: fixed;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  z-index: 9991;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  filter:
    drop-shadow(0 0 5px rgba(255, 35, 55, .9))
    drop-shadow(0 0 15px rgba(229, 57, 69, .65));
}

#ss-cursor-plane svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#ss-cursor-plane .ss-plane-body {
  fill: var(--ss-white);
  stroke: #ff394b;
  stroke-width: .65;
  stroke-linejoin: round;
}

#ss-cursor-plane .ss-plane-detail {
  fill: #ff394b;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  #ss-flight-canvas,
  #ss-cursor-plane {
    display: none !important;
  }
}

/* Link set on a text from the on-site editor. */
.ss-textlink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ss-textlink:hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   HEADER -- floating controls (3D)
   The header no longer paints a background bar. The logo, the search field,
   the Menu toggle and the Contact Us button sit directly on the background
   of the page, so no empty panel is left behind them.
   ========================================================================== */

.safesky-header {
    position: relative;
    padding: 14px 0;
    background: none;
    border-bottom: 0;
    perspective: 1100px;
    perspective-origin: 50% 0;
    /* Clicks pass through the empty areas of the header. */
    pointer-events: none;
}

/* Red tint in the top-left corner. */
.safesky-header::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 0 0, rgba(197, 27, 37, .38) 0, rgba(197, 27, 37, 0) 360px);
    content: "";
}

.safesky-header-inner {
    position: relative;
    min-height: 68px;
    padding: 6px 12px 6px 26px;
    transform: rotateX(var(--ss-rx, 0deg)) rotateY(var(--ss-ry, 0deg));
    transform-style: preserve-3d;
    transition: transform .25s ease-out, min-height .35s ease;
    pointer-events: auto;
    animation: ss-header-in .9s cubic-bezier(.2, .8, .2, 1) both;
}

/* The glass layer of the old background bar. It stays switched off, so the
   bar can never paint an empty panel behind the controls again. */
.safesky-header-inner::before {
    display: none;
    content: none;
}

/* The light that followed the pointer belonged to the glass bar. */
.safesky-header-inner::after {
    display: none;
    content: none;
}

/* Every control of the bar sits on the same depth, so the brand, the search
   field, the Menu toggle and the Contact Us button stay on one line. */
.safesky-brand { transform: translateZ(34px); }
.safesky-header-search { transform: translateZ(34px); }
.safesky-vip-header-link { --ss-control-layer: 34px; transform: translateZ(34px); }
.safesky-menu-toggle,
.safesky-header-cta { --ss-control-layer: 34px; }

/* Menu */
.safesky-menu { gap: 4px; }

.safesky-menu > li > a {
    position: relative;
    z-index: 1;
    padding: 10px 16px;
    border-radius: 999px;
    transition: color .25s ease;
}

.safesky-menu > li > a:hover,
.safesky-menu > li > a:focus-visible,
.safesky-menu .current-menu-item > a,
.safesky-menu .current_page_item > a,
.safesky-menu .current-menu-ancestor > a {
    color: var(--ss-white);
}

.safesky-menu > li > a:focus-visible {
    outline: 2px solid var(--ss-red-light);
    outline-offset: 2px;
}

/* Soft highlight behind the hovered item of the open panel (created by JS). */
.safesky-menu-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 999px;
    background: rgba(197, 27, 37, .18);
    box-shadow: inset 0 0 0 1px rgba(197, 27, 37, .38);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), width .4s cubic-bezier(.3, 1.3, .5, 1), height .4s ease, opacity .25s ease;
}

.safesky-menu-indicator.is-visible { opacity: 1; }

/* Dropdowns */
.safesky-menu .sub-menu {
    top: calc(100% + 12px);
    display: block;
    padding: 8px;
    background: rgba(16, 18, 22, .92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .8);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) rotateX(-12deg);
    transform-origin: top center;
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
    visibility: hidden;
}

.safesky-menu li:hover > .sub-menu,
.safesky-menu li:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
}

.safesky-menu .sub-menu a {
    padding: 9px 14px;
    border-radius: 12px;
    transition: background .2s ease, color .2s ease;
}

.safesky-menu .sub-menu a:hover { background: rgba(197, 27, 37, .3); }

/* The Menu toggle and the Contact Us button share one style, so the
   call-to-action rules live with the other header controls further up. */

/* Entrance */
@keyframes ss-header-in {
    from {
        opacity: 0;
        transform: translateY(-34px) rotateX(-22deg) scale(.96);
    }
}

@keyframes ss-header-item-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.safesky-menu > li {
    animation: ss-header-item-in .6s cubic-bezier(.2, .8, .2, 1) both;
}

.safesky-menu > li:nth-child(1) { animation-delay: .25s; }
.safesky-menu > li:nth-child(2) { animation-delay: .32s; }
.safesky-menu > li:nth-child(3) { animation-delay: .39s; }
.safesky-menu > li:nth-child(4) { animation-delay: .46s; }
.safesky-menu > li:nth-child(5) { animation-delay: .53s; }
.safesky-menu > li:nth-child(n+6) { animation-delay: .6s; }

/* Tablet: tighter spacing. */
@media (max-width: 1050px) {
    .safesky-header-inner { padding-left: 20px; }
    .safesky-menu > li > a { padding: 10px 12px; }
}

/* Mobile: compact controls with a glass dropdown panel. */
@media (max-width: 820px) {
    .safesky-header { padding: 10px 0; }

    .safesky-header-inner {
        min-height: 58px;
        padding: 6px 10px 10px 18px;
    }

    /* No 3D depth on small screens: the controls keep the same size and
       stay aligned with each other. */
    .safesky-brand,
    .safesky-header-search,
    .safesky-vip-header-link,
    .safesky-menu-toggle,
    .safesky-header-cta { transform: none; }

    .safesky-menu-toggle,
    .safesky-header-cta,
    .safesky-vip-header-link { --ss-control-layer: 0px; }

    .safesky-menu-toggle-lines,
    .safesky-menu-toggle-lines::before,
    .safesky-menu-toggle-lines::after {
        transition: transform .3s ease, top .3s ease, background .2s ease;
    }

    /* Hamburger turns into a cross while the menu is open. */
    .safesky-menu-toggle[aria-expanded="true"] .safesky-menu-toggle-lines { background: transparent; }
    .safesky-menu-toggle[aria-expanded="true"] .safesky-menu-toggle-lines::before { top: 0; transform: rotate(45deg); }
    .safesky-menu-toggle[aria-expanded="true"] .safesky-menu-toggle-lines::after { top: 0; transform: rotate(-45deg); }

    .safesky-menu > li > a { padding: 13px 8px; border-radius: 12px; }
    .safesky-menu > li { animation: none; }

    .safesky-js .safesky-nav.is-open .safesky-menu > li {
        animation: ss-header-item-in .45s cubic-bezier(.2, .8, .2, 1) both;
    }

    .safesky-js .safesky-nav.is-open .safesky-menu > li:nth-child(2) { animation-delay: .05s; }
    .safesky-js .safesky-nav.is-open .safesky-menu > li:nth-child(3) { animation-delay: .1s; }
    .safesky-js .safesky-nav.is-open .safesky-menu > li:nth-child(4) { animation-delay: .15s; }
    .safesky-js .safesky-nav.is-open .safesky-menu > li:nth-child(n+5) { animation-delay: .2s; }

    .safesky-menu-indicator { display: none; }

    .safesky-menu .sub-menu {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
        background: rgba(255, 255, 255, .04);
        box-shadow: none;
    }
}

@media (max-width: 520px) {
    .safesky-vip-header-link .safesky-vip-link-text {
        display: none;
    }
    .safesky-vip-header-link {
        padding: 6px 8px;
    }
}

/* Calm everything down for people who ask for less motion, and on touch screens. */
@media (prefers-reduced-motion: reduce) {
    .safesky-header-inner,
    .safesky-menu > li,
    .safesky-js .safesky-nav.is-open .safesky-menu > li { animation: none; }

    .safesky-header-inner,
    .safesky-js .safesky-nav,
    .safesky-menu-indicator,
    .safesky-menu .sub-menu { transition: none; }
}

@media (hover: none) {
    .safesky-header-inner { transform: none; }

    .safesky-brand,
    .safesky-header-search,
    .safesky-vip-header-link { transform: none; }

    .safesky-menu-toggle,
    .safesky-header-cta,
    .safesky-vip-header-link { --ss-control-layer: 0px; }
}