:root {

    --tv-blue: #0371d7;
    --tv-blue-dark: #04519f;
    --tv-blue-deep: #071a36;      /* very dark navy for dark sections */
    --tv-blue-bright: #5cb0ff;    /* blue text/accents on dark backgrounds */
    --tv-blue-light: #e6f1fc;     /* soft blue tint */

    --tv-red: #ef0707;
    --tv-red-dark: #c40505;
    --tv-red-bright: #ff4d4d;     /* red accents on dark backgrounds */
    --tv-red-light: #ffeaea;      /* soft red tint */

    /* Neutrals */
    --tv-ink: #1a1f24;
    --tv-text: #3a424a;
    --tv-white: #ffffff;
    --tv-soft: #f6f8fa;
    --tv-line: #e5e9ed;

    --tv-header-h: 70px;
    --tv-top-h: 40px;
}

/* ==========================================================
   2. LAYOUT
   ========================================================== */
.tv-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================
   3. HEADER
   ========================================================== */
.tv-header,
.tv-header * { box-sizing: border-box; }

.tv-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--tv-white);
    font-family: 'Inter', sans-serif;
    box-shadow: 0 1px 0 var(--tv-line), 0 8px 24px rgba(0, 0, 0, 0.18);
}
/* The top bar scrolls away; only the main nav stays stuck */
.tv-header.tv-has-topbar { top: calc(var(--tv-top-h) * -1); }

.tv-header a { text-decoration: none; }
.tv-header ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Top bar ---------- */
.tv-header-top {
    height: var(--tv-top-h);
    background: linear-gradient(90deg, #051a3d 0%, #07306b 50%, var(--tv-blue-dark) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}
.tv-header-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.tv-header-top-left {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: nowrap;
}
.tv-header a.tv-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s ease;
}
.tv-header a.tv-topbar-item:hover { color: #cfe3ff; }
.tv-topbar-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--tv-blue);
    font-size: 14px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tv-topbar-item:hover .tv-topbar-icon {
    background: var(--tv-red);
    color: #fff;
    transform: scale(1.08);
}
.tv-header a.tv-topbar-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--tv-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
}
.tv-header a.tv-topbar-whatsapp:hover {
    background: var(--tv-red-dark);
    transform: translateY(-1px);
}

/* ---------- Main bar ---------- */
.tv-header-main { background: var(--tv-white); }
.tv-header-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--tv-header-h);
}
.tv-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.tv-logo {
    display: block;
    height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ---------- Desktop nav ---------- */
.tv-nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
}
.tv-nav-item { position: relative; }
.tv-header a.tv-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 24px 10px;
    color: var(--tv-text);
    font-size: 15px;
    font-weight: 500;
    transition: color .25s ease;
}
.tv-nav-link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 17px;
    height: 2px;
    background: var(--tv-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.tv-header .tv-nav-item:hover > a.tv-nav-link,
.tv-header .tv-nav-item:focus-within > a.tv-nav-link,
.tv-header a.tv-nav-link.is-active { color: var(--tv-blue); }
.tv-nav-item:hover > .tv-nav-link::after,
.tv-nav-item:focus-within > .tv-nav-link::after,
.tv-nav-link.is-active::after { transform: scaleX(1); }

.tv-nav-caret { font-size: 20px; transition: transform .25s ease; }
.tv-has-dropdown:hover .tv-nav-caret,
.tv-has-dropdown:focus-within .tv-nav-caret { transform: rotate(180deg); }

/* ---------- Dropdown ---------- */
.tv-dropdown {
    position: absolute;
    top: calc(100% - 8px);
    left: 0;
    min-width: 250px;
    padding: 8px;
    background: var(--tv-white);
    border: 1px solid var(--tv-line);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(20, 30, 40, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.tv-has-dropdown:hover .tv-dropdown,
.tv-has-dropdown:focus-within .tv-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.tv-header a.tv-dropdown-link {
    display: block;
    padding: 11px 14px;
    border-radius: 8px;
    color: var(--tv-text);
    font-size: 14px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease, padding .2s ease;
}
.tv-header a.tv-dropdown-link:hover,
.tv-header a.tv-dropdown-link:focus {
    background: var(--tv-blue);
    color: #fff;
    padding-left: 22px;
}

/* ---------- Actions: Contact Us + hamburger ---------- */
.tv-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tv-header a.tv-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    background: var(--tv-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(3, 113, 215, 0.28);
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.tv-header a.tv-header-cta:hover {
    background: var(--tv-red);
    color: #fff;
    box-shadow: 0 8px 20px rgba(239, 7, 7, 0.3);
    transform: translateY(-1px);
}
.tv-header-actions a.tv-header-cta { display: none; }   /* shown on desktop only */

.tv-menu-toggle {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: var(--tv-blue-light);
    color: var(--tv-blue);
    font-size: 26px;
    cursor: pointer;
}
.tv-menu-toggle .tv-icon-close { display: none; }
.tv-menu-toggle.is-open .tv-icon-open { display: none; }
.tv-menu-toggle.is-open .tv-icon-close { display: inline-block; }

/* ---------- Mobile menu ---------- */
.tv-mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--tv-header-h));
    max-height: calc(100dvh - var(--tv-header-h));
    overflow-y: auto;
    background: var(--tv-white);
    border-top: 1px solid var(--tv-line);
    box-shadow: 0 20px 40px rgba(20, 30, 40, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.tv-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.tv-mobile-menu-inner { padding: 12px 24px 28px; }

/* !important on colors: the site's global "a" styles otherwise turned these links invisible */
.tv-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--tv-line);
    background: none;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.tv-header a.tv-mobile-link,
.tv-header button.tv-mobile-link { color: var(--tv-ink) !important; }
.tv-header a.tv-mobile-link:hover,
.tv-header button.tv-mobile-link:hover,
.tv-header a.tv-mobile-link.is-active,
.tv-header button.tv-mobile-link.is-active { color: var(--tv-blue) !important; }

.tv-mobile-accordion-btn i {
    color: var(--tv-red);
    font-size: 20px;
    transition: transform .25s ease;
}
.tv-mobile-accordion-btn[aria-expanded="true"] i { transform: rotate(45deg); }
.tv-mobile-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.tv-header a.tv-mobile-sublink {
    display: block;
    margin: 8px 0 0 4px;
    padding: 12px 0 12px 16px;
    border-left: 2px solid var(--tv-red);
    font-size: 16px;
    color: var(--tv-text) !important;
}
.tv-mobile-sublink:last-child { margin-bottom: 12px; }
.tv-header a.tv-mobile-sublink:hover { color: var(--tv-blue) !important; }

.tv-header a.tv-mobile-cta {
    display: flex;
    width: 100%;
    margin-top: 24px;
    padding: 15px 24px;
    color: #fff !important;
}

/* ---------- Header responsive ---------- */
@media (min-width: 1024px) {
    .tv-nav { display: flex; }
    .tv-header-actions a.tv-header-cta { display: inline-flex; }
    .tv-menu-toggle,
    .tv-mobile-menu { display: none; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .tv-logo { height: 54px; }
    .tv-header a.tv-nav-link { padding: 24px 8px; font-size: 14px; }
    .tv-nav-link::after { left: 8px; right: 8px; }
    .tv-header-actions a.tv-header-cta { padding: 11px 18px; font-size: 13.5px; }
    .tv-header-top-left { gap: 18px; }
}

/* Tablet and mobile: top bar becomes a slim icon strip */
@media (max-width: 1023px) {
    :root { --tv-header-h: 88px; --tv-top-h: 42px; }
    .tv-topbar-text,
    .tv-wa-text { display: none; }
    .tv-header-top-left { gap: 16px; }
    .tv-header a.tv-topbar-whatsapp { padding: 6px 10px; font-size: 16px; }
    .tv-logo { height: 68px; }
}

@media (max-width: 480px) {
    :root { --tv-header-h: 76px; --tv-top-h: 40px; }
    .tv-wrap { padding: 0 16px; }
    .tv-header-main-inner { gap: 12px; }
    .tv-logo { height: 58px; }
    .tv-menu-toggle { width: 42px; height: 42px; }
    .tv-mobile-menu-inner { padding: 8px 16px 24px; }
}

@media (max-width: 375px) {
    :root { --tv-header-h: 70px; }
    .tv-logo { height: 52px; }
    .tv-header-actions { gap: 8px; }
}

/* ==========================================================
   4. HOME — HERO + ENQUIRY FORM
   ========================================================== */
.tv-hero {
    width: 100%;
    padding: 8px 12px;
    background: var(--tv-white);
    box-sizing: border-box;
}

/* Desktop: slider fills the space, form column is 330px */
.tv-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    align-items: stretch;
    box-sizing: border-box;
}
.tv-hero-main { width: 100%; min-width: 0; }

/* ---------- Slider ---------- */
.tv-hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Makes the photo fill the whole card, even when the form is taller than the slide.
   !important beats any inline height the slider script may set. */
.tv-hero-slider .swiper-wrapper { height: 100% !important; }

.tv-hero-slide {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 470px;
    background-size: cover;
    background-position: center;
}

/* Light navy overlay, just enough to keep the text readable.
   To remove it completely, delete the "background" line below. */
.tv-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(5, 16, 36, 0.62) 0%,
        rgba(5, 16, 36, 0.3) 55%,
        rgba(5, 16, 36, 0) 100%);
}

.tv-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    padding: 56px 52px 84px;
}
.tv-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--tv-blue-bright);
    font-size: 16px;
    font-weight: 600;
}
.tv-hero-eyebrow i { font-size: 18px; }
.tv-hero-eyebrow p { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }

.tv-hero-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(30px, 3.8vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: left;
}
.tv-hero-accent { color: var(--tv-red-bright); }

.tv-hero-line {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
}
.tv-hero-text {
    margin: 22px 0 0;
    max-width: 500px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 17px;
    line-height: 1.6;
    text-align: left;
}
.tv-hero-text:empty { display: none; }

.tv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}
.tv-hero .tv-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.tv-hero .tv-hero-btn:hover { transform: translateY(-1px); }

.tv-hero a.tv-hero-btn-primary {
    background: var(--tv-red);
    border-color: var(--tv-red);
    color: #fff;
}
.tv-hero a.tv-hero-btn-primary:hover {
    background: var(--tv-red-dark);
    border-color: var(--tv-red-dark);
    color: #fff;
}
.tv-hero a.tv-hero-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.85);
    color: #fff;
}
.tv-hero a.tv-hero-btn-outline:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    color: #fff;
}

/* Pagination: small dashes along the bottom */
.tv-hero .tv-hero-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    top: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 5;
}
.tv-hero .tv-hero-pagination .swiper-pagination-bullet {
    width: 34px !important;
    height: 4px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
    transition: width .25s ease, background .25s ease;
}
.tv-hero .tv-hero-pagination .swiper-pagination-bullet-active {
    width: 56px !important;
    background: var(--tv-red) !important;
}

/* ---------- Enquiry form card ---------- */
.tv-hero-form { display: flex; min-width: 0; }

.tv-hero-form-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 24px;
    border-radius: 16px;
    background: linear-gradient(160deg, #051a3d 0%, #07306b 55%, var(--tv-blue-dark) 100%);
    color: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
    animation: tvHeroRise .7s ease both;
}
.tv-hero .tv-hero-form-title {
    align-self: flex-start;
    margin: 0 0 22px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tv-red);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}
.tv-hero-form-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0;
}
.tv-hero .tv-hero-input {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
    color: var(--tv-ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tv-hero .tv-hero-input::placeholder { color: #6b757d; opacity: 1; }
.tv-hero .tv-hero-input:focus {
    border-color: var(--tv-blue-bright);
    box-shadow: 0 0 0 3px rgba(92, 176, 255, 0.4);
}
.tv-hero textarea.tv-hero-input { min-height: 100px; resize: vertical; }

.tv-hero .tv-hero-submit {
    width: 100%;
    padding: 14px 24px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--tv-blue);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.tv-hero .tv-hero-submit:hover {
    background: var(--tv-red);
    color: #fff;
    transform: translateY(-1px);
}

/* Honeypot: hidden from real users */
.tv-hero .tv-hero-hp {
    position: absolute;
    left: -10000px;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

@keyframes tvHeroRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tv-hero-form-card { animation: none; }
}

/* ---------- Hero responsive ---------- */
@media (max-width: 1199px) {
    .tv-hero-content { padding: 48px 40px 80px; }
    .tv-hero-form-card { padding: 26px 20px; }
}

/* Tablet and below: form moves BELOW the hero */
@media (max-width: 1023px) {
    .tv-hero-grid { grid-template-columns: 1fr; gap: 16px; }
    .tv-hero-slide { min-height: 460px; }
    .tv-hero-form-card { padding: 28px 26px; }
}

/* Tablet: name and email side by side */
@media (min-width: 600px) and (max-width: 1023px) {
    .tv-hero-form-body { grid-template-columns: 1fr 1fr; }
    .tv-hero-field-wide { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .tv-hero { padding: 12px 10px 8px; }
    .tv-hero-slider { border-radius: 12px; }
    .tv-hero-slide { min-height: 480px; }
    .tv-hero-overlay {
        background: linear-gradient(180deg,
            rgba(5, 16, 36, 0.45) 0%,
            rgba(5, 16, 36, 0.8) 100%);
    }
    .tv-hero-content { max-width: 100%; padding: 44px 26px 76px; }
    .tv-hero-eyebrow { font-size: 15px; margin-bottom: 14px; }
    .tv-hero-actions { margin-top: 26px; }
    .tv-hero .tv-hero-btn { padding: 13px 24px; font-size: 15px; }
    .tv-hero .tv-hero-pagination { bottom: 20px; }
    .tv-hero-form-card { border-radius: 12px; }
}

@media (max-width: 480px) {
    .tv-hero-slide { min-height: 460px; }
    .tv-hero-content { padding: 36px 20px 72px; }
    .tv-hero-actions { gap: 10px; }
    .tv-hero .tv-hero-btn { flex: 1 1 auto; }
    .tv-hero .tv-hero-pagination .swiper-pagination-bullet { width: 26px !important; }
    .tv-hero .tv-hero-pagination .swiper-pagination-bullet-active { width: 42px !important; }
    .tv-hero-form-card { padding: 24px 18px; }
    .tv-hero .tv-hero-form-title { font-size: 20px; margin-bottom: 18px; }
}

@media (max-width: 375px) {
    .tv-hero-slide { min-height: 440px; }
    .tv-hero-content { padding: 32px 16px 70px; }
    .tv-hero-title { font-size: 28px; }
}

/* ==========================================================
   5. HOME — ABOUT US (dark, background image + details)
   ========================================================== */

/* The wrapper takes the negative margin that used to sit on .tv-about */
.tv-about-wrap { margin-top: -60px; }

.tv-about {
    position: relative;
    isolation: isolate;
    padding: 72px 0;
    overflow: hidden;
    background: var(--tv-blue-deep) url("assets/about-bg.png") no-repeat right center / cover;
    color: #fff;
}
.tv-about-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.tv-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}
.tv-about-content { max-width: 600px; }

/* Eyebrow */
.tv-about-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}
.tv-about-eyebrow i { color: var(--tv-red-bright); font-size: 18px; }
.tv-about .tv-about-eyebrow p {
    margin: 0;
    color: var(--tv-blue-bright);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.tv-about-eyebrow::after {
    content: "";
    width: 48px;
    height: 2px;
    border-radius: 2px;
    background: var(--tv-red);
}

/* Heading */
.tv-about .tv-about-title {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(26px, 3.1vw, 42px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
    text-align: left;
}
.tv-about-accent {
    display: block;
    color: var(--tv-blue-bright);   /* fallback */
    background: linear-gradient(90deg, #5cb0ff, #a6d4ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* The existing decorative line, rendered white for the dark background */
.tv-about-line {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 0 24px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* Body text (top, trust and promise paragraphs) */
.tv-about .tv-about-text p,
.tv-about-more .tv-about-trust-text p,
.tv-about-more .tv-about-promise-body p {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.75;
    text-align: left;
}
.tv-about-more .tv-about-trust-text p:last-child,
.tv-about-more .tv-about-promise-body p:last-child { margin-bottom: 0; }
.tv-about strong,
.tv-about-more strong { color: #fff; font-weight: 600; }

/* CTA */
.tv-about-actions { margin-top: 28px; }
.tv-about a.tv-about-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 32px;
    border-radius: 8px;
    background: var(--tv-red);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(239, 7, 7, 0.35);
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.tv-about a.tv-about-btn i { font-size: 18px; transition: transform .25s ease; }
.tv-about a.tv-about-btn:hover {
    background: var(--tv-red-dark);
    color: #fff;
    box-shadow: 0 12px 28px rgba(239, 7, 7, 0.45);
    transform: translateY(-2px);
}
.tv-about a.tv-about-btn:hover i { transform: translateX(4px); }

/* Image (shown on tablet/mobile): offset blue frame + red corner accent */
.tv-about-media {
    position: relative;
    padding: 0 18px 18px 0;
}
.tv-about-media::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(92, 176, 255, 0.5);
    border-radius: 22px;
    z-index: 0;
}
.tv-about-media::after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 56px;
    height: 56px;
    border-top: 3px solid var(--tv-red);
    border-left: 3px solid var(--tv-red);
    border-radius: 14px 0 0 0;
    z-index: 2;
}
.tv-about-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;          /* adjust the image height here */
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    transition: transform .5s ease;
}
.tv-about-media:hover .tv-about-image { transform: scale(1.015); }

/* ---------- Bottom part: trust, team, promise ---------- */
.tv-about-more {
    position: relative;
    padding: 80px 0 90px;
    background: linear-gradient(180deg, var(--tv-blue-deep) 0%, #06101f 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}
.tv-about-more .tv-about-container {
    display: flex;
    flex-direction: column;
    gap: 72px;
}

/* Experience. Expertise. Trust. */
.tv-about-trust {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
}
.tv-about-more .tv-about-tagline {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 4.2vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: left;
}
.tv-about-tagline span { display: block; }
.tv-about-tagline .tv-about-tagline-blue { color: var(--tv-blue-bright); }
.tv-about-tagline .tv-about-tagline-red { color: var(--tv-red-bright); }
.tv-about-trust-text {
    padding-left: 36px;
    border-left: 2px solid rgba(255, 255, 255, 0.14);
}

/* ===== About Us: company cards (stacked, alternating) ===== */
/* ===== About Us: group & services heading ===== */
.tv-about-cards-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 8px;
}
.tv-about-cards-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tv-red, #d62839);
}
.tv-about-cards-heading {
  position: relative;
  margin-bottom: 14px; 
  padding-bottom: 10px;
  font-size: 2.2rem;
  line-height: 1.2;
  color: #fff;                 /* white for your dark About background */
}
/* red -> blue underline accent */
.tv-about-cards-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tv-red, #d62839), var(--tv-blue, #1f4e9c));
  transform: translateX(-50%);
}
.tv-about-cards-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 640px) {
  .tv-about-cards-head { margin-bottom: 4px; }
  .tv-about-cards-heading { font-size: 1.6rem; }
}
.tv-about-cards {
  --tv-ac-blue: var(--tv-blue, #1f4e9c);   /
  --tv-ac-red: var(--tv-red, #d62839);
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.tv-about-card {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* red -> blue accent bar along the top */
.tv-about-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tv-ac-red), var(--tv-ac-blue));
  z-index: 1;
}
.tv-about-card--reverse { flex-direction: row-reverse; }

.tv-about-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}

/* ---- Logo panel (~32% of card) ---- */
.tv-about-card-logo {
  flex: 0 0 32%;
  max-width: 32%;
  display: flex;
  align-items: center;       /* vertical centering */
  justify-content: center;
  padding: 40px 32px;
  background: linear-gradient(135deg, #f4f7fc 0%, #e6edf8 100%);
}
.tv-about-card:not(.tv-about-card--reverse) .tv-about-card-logo {
  border-right: 1px solid rgba(31, 78, 156, 0.10);
}
.tv-about-card--reverse .tv-about-card-logo {
  border-left: 1px solid rgba(31, 78, 156, 0.10);
}
.tv-about-card-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;  
  transition: transform 0.35s ease;
}
.tv-about-card:hover .tv-about-card-logo img { transform: scale(1.04); }

/* ---- Content area (~68%) ---- */
.tv-about-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 44px;
}

.tv-about-card-kicker {
  align-self: flex-start;
  margin-bottom: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tv-ac-red);
}
.tv-about-card-title {
  margin: 0 0 8px;
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--tv-ac-blue);
}
.tv-about-card-tagline {
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 600;
  color: #44546a;
}
.tv-about-card-text {
  margin: 0 0 18px;
  font-size: 0.97rem;
  line-height: 1.7;
  color: #5a6678;
}

/* ---- Service pills ---- */
.tv-about-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.tv-about-card-list li {
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tv-ac-blue);
  background: rgba(31, 78, 156, 0.08);
  border: 1px solid rgba(31, 78, 156, 0.14);
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.tv-about-card-list li:hover {
  background: var(--tv-ac-blue);
  border-color: var(--tv-ac-blue);
  color: #fff;
}

/* ---- Closing message ---- */
.tv-about-card-closing {
  margin-top: 4px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(214, 40, 57, 0.06), rgba(31, 78, 156, 0.06));
  border-left: 4px solid var(--tv-ac-red);
  border-radius: 0 12px 12px 0;
}
.tv-about-card-closing strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--tv-ac-blue);
}
.tv-about-card-closing span {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  color: #5a6678;
}
/* ===== About Us: compact card sizing (overrides) ===== */

/* Desktop */
@media (min-width: 1025px) {
  .tv-about-cards {
    max-width: 960px;          /* narrower cards, centered */
    margin-inline: auto;
    gap: 24px;
  }
  .tv-about-card { border-radius: 18px; }
  .tv-about-card-logo {
    flex-basis: 28%;
    max-width: 28%;
    padding: 24px 22px;
  }
  .tv-about-card-logo img { max-height: 140px; }
  .tv-about-card-body { padding: 26px 32px; }

  .tv-about-card-kicker { font-size: 0.68rem; margin-bottom: 6px; }
  .tv-about-card-title { font-size: 1.4rem; margin-bottom: 6px; }
  .tv-about-card-tagline { font-size: 0.92rem; margin-bottom: 10px; }
  .tv-about-card-text { font-size: 0.88rem; line-height: 1.6; margin-bottom: 14px; }

  .tv-about-card-list { gap: 6px; margin-bottom: 16px; }
  .tv-about-card-list li { padding: 5px 11px; font-size: 0.76rem; }

  .tv-about-card-closing { padding: 10px 14px; }
  .tv-about-card-closing strong { font-size: 0.88rem; }
  .tv-about-card-closing span { font-size: 0.8rem; }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .tv-about-cards { gap: 20px; }
  .tv-about-card-logo { padding: 20px 16px; }
  .tv-about-card-logo img { max-height: 120px; }
  .tv-about-card-body { padding: 22px 24px; }
  .tv-about-card-title { font-size: 1.3rem; }
  .tv-about-card-text { font-size: 0.86rem; }
  .tv-about-card-list li { padding: 5px 11px; font-size: 0.76rem; }
}

/* Mobile */
@media (max-width: 640px) {
  .tv-about-card-logo { padding: 20px 20px 16px; }
  .tv-about-card-logo img { max-height: 110px; max-width: 180px; }
  .tv-about-card-body { padding: 20px 18px 22px; }
  .tv-about-card-title { font-size: 1.2rem; }
}

/* ---- Tablet: keep horizontal, tighten up ---- */
@media (max-width: 1024px) {
  .tv-about-card-logo {
    flex-basis: 30%;
    max-width: 30%;
    padding: 28px 20px;
  }
  .tv-about-card-logo img { max-height: 180px; }
  .tv-about-card-body { padding: 30px 28px; }
  .tv-about-card-title { font-size: 1.5rem; }
}

/* ---- Mobile: logo on top, text below ---- */
@media (max-width: 640px) {
  .tv-about-cards { gap: 24px; }
  .tv-about-card,
  .tv-about-card--reverse { flex-direction: column; }
  .tv-about-card-logo {
    flex: none;
    max-width: 100%;
    width: 100%;
    padding: 28px 24px 22px;
    border: 0 !important;
    border-bottom: 1px solid rgba(31, 78, 156, 0.10) !important;
  }
  .tv-about-card-logo img { max-width: 220px; max-height: 150px; }
  .tv-about-card-body { padding: 24px 20px 26px; }
  .tv-about-card-title { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-about-card,
  .tv-about-card-logo img,
  .tv-about-card-list li { transition: none; }
  .tv-about-card:hover,
  .tv-about-card:hover .tv-about-card-logo img { transform: none; }
}


/* Our Promise */
.tv-about-promise {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 40px 44px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(3, 113, 215, 0.22) 0%, rgba(7, 26, 54, 0.4) 60%);
}
.tv-about-promise::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--tv-red);
}
.tv-about-more .tv-about-promise-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}
.tv-about-more .tv-about-promise-tagline {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}
.tv-about-promise-tagline span { display: block; }
.tv-about-promise-tagline .tv-about-promise-accent { color: var(--tv-red-bright); }

/* ---------- About responsive ---------- */

/* Desktop: the photo is part of the background image, so the image column stays empty */
@media (min-width: 900px) {
    .tv-about-media { visibility: hidden; }
}

@media (max-width: 1199px) {
    .tv-about-wrap { margin-top: -50px; }
    .tv-about {
        padding: 84px 0;
        background:
            linear-gradient(rgba(6, 16, 31, 0.88), rgba(6, 16, 31, 0.88)),
            url("assets/about-bg.png") center / cover no-repeat,
            var(--tv-blue-deep);
    }
    .tv-about-grid { gap: 48px; }
    .tv-about-more { padding: 72px 0 80px; }
    .tv-about-more .tv-about-container { gap: 60px; }
    .tv-about-trust { gap: 40px; }
}

/* Tablet and below: stack */
@media (max-width: 899px) {
    .tv-about { padding: 72px 0; }
    .tv-about-grid { grid-template-columns: 1fr; gap: 44px; }
    .tv-about-content { max-width: 100%; }
    .tv-about-media { width: 100%; max-width: 620px; margin: 0 auto; }
    .tv-about-image { max-height: 460px; }

    .tv-about-trust { grid-template-columns: 1fr; gap: 28px; }
    .tv-about-more .tv-about-tagline { font-size: clamp(30px, 6vw, 44px); }
    .tv-about-tagline span { display: inline; }
    .tv-about-trust-text {
        padding: 24px 0 0;
        border-left: 0;
        border-top: 2px solid rgba(255, 255, 255, 0.14);
    }
    .tv-about-cards { grid-template-columns: 1fr; }
    .tv-about-promise { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 767px) {
    .tv-about { padding: 60px 0; }
    .tv-about-container { padding: 0 20px; }
    .tv-about-image { max-height: 380px; }
    .tv-about-more { padding: 60px 0 64px; }
    .tv-about-more .tv-about-container { gap: 48px; }
    .tv-about-promise { padding: 30px 24px 30px 28px; }
}

@media (max-width: 480px) {
    .tv-about { padding: 52px 0; }
    .tv-about-actions { margin-top: 24px; }
    .tv-about a.tv-about-btn { width: 100%; justify-content: center; }
    .tv-about-media { padding: 0 12px 12px 0; }
    .tv-about-media::before { top: 12px; left: 12px; }
    .tv-about-media::after { width: 44px; height: 44px; top: -8px; left: -8px; }
    .tv-about-line { max-width: 260px; }
    .tv-about-card { padding: 24px 20px; }
    .tv-about-more .tv-about-promise-title { font-size: 24px; }
    .tv-about-card-logo { height: 112px; }
}

@media (max-width: 375px) {
    .tv-about .tv-about-title { font-size: 25px; }
}

/* ==========================================================
   6. HOME — POPULAR DESTINATIONS (light, flip cards)
   ========================================================== */
.tv-destinations {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: -110px;
    padding: 90px 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(3, 113, 215, 0.08) 0%, rgba(3, 113, 215, 0) 45%),
        radial-gradient(circle at 92% 90%, rgba(239, 7, 7, 0.05) 0%, rgba(239, 7, 7, 0) 45%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}
.tv-destinations::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(rgba(3, 113, 215, 0.10) 1px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    pointer-events: none;
}

.tv-destinations-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1080px;
    margin: -50px auto 0;
    padding: 0 24px;
}

/* Heading */
.tv-destinations .tv-destinations-heading {
    margin: 0 0 52px;
    color: var(--tv-ink);
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}
.tv-destinations-heading span {
    color: var(--tv-blue);   /* fallback */
    background: linear-gradient(90deg, var(--tv-blue-dark), var(--tv-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tv-destinations-heading::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 3px;
    background: var(--tv-red);
}

/* Grid */
.tv-destinations-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

/* Flip card */
.tv-destination-card {
    height: 290px;
    perspective: 1200px;
}
.tv-destination-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.4, .2, .2, 1);
}
.tv-destination-card.is-flipped .tv-destination-inner,
.tv-destination-card:has(a:focus-visible) .tv-destination-inner {
    transform: rotateY(180deg);
}
@media (hover: hover) {
    .tv-destination-card:hover .tv-destination-inner { transform: rotateY(180deg); }
}

.tv-destination-front,
.tv-destination-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 18px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

/* Front */
.tv-destination-front {
    justify-content: center;
    padding: 30px 20px 24px;
    background: var(--tv-white);
    border: 1px solid #e1e8f1;
    box-shadow: 0 8px 22px rgba(3, 113, 215, 0.08);
    transition: box-shadow .3s ease, border-color .3s ease;
}
.tv-destination-card:hover .tv-destination-front {
    border-color: rgba(3, 113, 215, 0.5);
    box-shadow: 0 18px 40px rgba(3, 113, 215, 0.16);
}

.tv-destination-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--tv-red);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.03em;
}
.tv-destination-swap {
    position: absolute;
    top: 46px;
    right: 16px;
    color: #9aa7b5;
    font-size: 20px;
    line-height: 1;
    transition: color .3s ease;
}
.tv-destination-card:hover .tv-destination-swap { color: var(--tv-blue); }

.tv-destination-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #eef2f7;
    box-shadow: inset 0 0 0 1px #e1e8f1;
}
.tv-destination-image img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.tv-destination-card:hover .tv-destination-image img { transform: scale(1.08); }

.tv-destination-icon {
    color: var(--tv-blue);
    font-size: 28px;
    line-height: 1;
}
.tv-destinations .tv-destination-name {
    margin: 8px 0 0;
    color: var(--tv-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

/* Back */
.tv-destination-back {
    justify-content: center;
    padding: 24px 22px;
    background: linear-gradient(145deg, var(--tv-blue-dark) 0%, var(--tv-blue) 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(3, 113, 215, 0.25);
    transform: rotateY(180deg);
}
.tv-destinations .tv-destination-back-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.tv-destination-back-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--tv-red-bright);
}
.tv-destination-list {
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.tv-destination-list li {
    position: relative;
    padding: 4px 0 4px 22px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.4;
}
.tv-destination-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a6d4ff;
}
/* !important on colors: the site's global link styles otherwise override them */
.tv-destinations .tv-destination-back a.tv-destination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 10px 22px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--tv-blue) !important;
    -webkit-text-fill-color: var(--tv-blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.tv-destinations .tv-destination-back a.tv-destination-btn i {
    color: inherit !important;
    font-size: 16px;
    line-height: 1;
    transition: transform .25s ease;
}
.tv-destinations .tv-destination-back a.tv-destination-btn:hover,
.tv-destinations .tv-destination-back a.tv-destination-btn:focus-visible {
    background: var(--tv-red);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    transform: translateY(-2px);
    outline: none;
}
.tv-destinations .tv-destination-back a.tv-destination-btn:hover i {
    transform: translateX(4px);
}

/* Flight route decoration (behind cards) */
.tv-destination-route {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
}
.tv-destination-route svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.tv-destination-route path { stroke: var(--tv-blue); }
.tv-destination-pin {
    position: absolute;
    left: 2.5%;
    top: 68%;
    color: var(--tv-red);
    font-size: 30px;
    line-height: 1;
    transform: translate(-50%, -100%);
}
.tv-destination-plane {
    position: absolute;
    right: 2.5%;
    top: 34%;
    color: var(--tv-blue);
    font-size: 40px;
    line-height: 1;
    transform: translate(50%, -50%) rotate(45deg);
}

/* ---------- Destinations responsive ---------- */
@media (max-width: 1199px) {
    .tv-destinations { padding: 76px 0; }
}
@media (max-width: 899px) {
    .tv-destinations { margin-top: 10px; padding: 60px 0; }
    .tv-destinations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .tv-destinations .tv-destinations-heading { margin-bottom: 40px; }
    .tv-destination-route { opacity: 0.4; }
}
@media (max-width: 599px) {
    .tv-destinations { padding: 45px 0 52px; }
    .tv-destinations-container { padding: 0 20px; }
    .tv-destinations-grid { grid-template-columns: 1fr; gap: 18px; }
    .tv-destinations .tv-destinations-heading { margin-bottom: 32px; }
    .tv-destination-plane { font-size: 28px; right: 4%; }
    .tv-destination-pin { font-size: 22px; left: 4%; }
}
@media (prefers-reduced-motion: reduce) {
    .tv-destination-inner,
    .tv-destination-front,
    .tv-destination-image img { transition: none !important; }
}

/* ==========================================================
   7. HOME — SERVICES (light)
   ========================================================== */
.tv-services {
    position: relative;
    isolation: isolate;
    overflow: visible;
    overflow: clip;            /* clip (not hidden) so the sticky image keeps working */
    padding: 50px 0;
    background:
        radial-gradient(circle at 6% 10%, rgba(3, 113, 215, 0.08) 0%, rgba(3, 113, 215, 0) 42%),
        radial-gradient(circle at 96% 92%, rgba(239, 7, 7, 0.05) 0%, rgba(239, 7, 7, 0) 45%),
        #f8fbff;
}
.tv-services::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(rgba(3, 113, 215, 0.09) 1px, transparent 1.5px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
    pointer-events: none;
}
.tv-services::after {
    content: "";
    position: absolute;
    top: 60px;
    right: 6%;
    z-index: -1;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(3, 113, 215, 0.22);
    border-radius: 50%;
    pointer-events: none;
}

.tv-services-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
.tv-services-header { margin-bottom: 56px; text-align: center; }
.tv-services-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.tv-services-eyebrow i { color: var(--tv-red); font-size: 18px; }
.tv-services .tv-services-eyebrow p {
    margin: 0;
    color: var(--tv-blue);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.tv-services .tv-services-title {
    margin: 0;
    color: var(--tv-ink);
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
}
.tv-services-title span {
    color: var(--tv-blue);   /* fallback */
    background: linear-gradient(90deg, var(--tv-blue-dark), var(--tv-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tv-services-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 3px;
    background: var(--tv-red);
}

/* Layout: two columns of equal height (the cards set the height) */
.tv-services-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 48px;
    align-items: stretch;
}

/* Left column: full height, so the sticky image has room to travel */
.tv-services-media {
    position: relative;
    display: block;
    align-self: stretch;
    height: auto;
    padding: 0;
}

/* Image + badge stay together as one sticky composition */
.tv-services .tv-services-visual {
    position: sticky;
    top: 110px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 16px 16px 0;
}
.tv-services-visual::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(3, 113, 215, 0.4);
    border-radius: 24px;
}
.tv-services-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;          /* natural aspect ratio, never stretched */
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(3, 113, 215, 0.18);
}
.tv-services-badge {
    position: absolute;
    z-index: 2;
    left: 46%;
    bottom: 34px;
    transform: translateX(-50%);
    width: max-content;
    max-width: 78%;
    padding: 18px 28px 14px;
    background: #fff;
    border-top: 4px solid var(--tv-red);
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
    text-align: center;
}
.tv-services .tv-services-badge-number {
    margin: 0;
    color: var(--tv-blue);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
}
.tv-services .tv-services-badge-text {
    margin: 4px 0 8px;
    color: var(--tv-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}
.tv-services-badge-line { display: block; max-width: 120px; height: auto; margin: 0 auto; }

/* Cards */
.tv-services-list { display: flex; flex-direction: column; gap: 18px; }

.tv-service-card {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 24px;
    padding: 30px 32px;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(3, 113, 215, 0.08);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tv-service-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tv-red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s ease;
}
.tv-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(3, 113, 215, 0.5);
    box-shadow: 0 18px 44px rgba(3, 113, 215, 0.14);
}
.tv-service-card:hover::before { transform: scaleY(1); }

.tv-service-number {
    position: absolute;
    top: 18px;
    right: 26px;
    color: rgba(3, 113, 215, 0.10);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    pointer-events: none;
}

.tv-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 20px;
    background: rgba(3, 113, 215, 0.08);
    box-shadow: inset 0 0 0 1px rgba(3, 113, 215, 0.14);
    transition: background .3s ease, box-shadow .3s ease;
}
.tv-service-icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    transition: transform .35s ease;
}
.tv-service-card:hover .tv-service-icon {
    background: rgba(3, 113, 215, 0.16);
    box-shadow: inset 0 0 0 1px rgba(3, 113, 215, 0.45);
}
.tv-service-card:hover .tv-service-icon img { transform: scale(1.1) translateY(-2px); }

.tv-services .tv-service-title {
    margin: 0 44px 14px 0;
    color: var(--tv-blue-dark);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}
.tv-service-points { margin: 0; padding: 0; list-style: none; }
.tv-service-points li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 24px;
    color: var(--tv-text);
    font-size: 15.5px;
    line-height: 1.6;
}
.tv-service-points li:last-child { margin-bottom: 0; }
.tv-service-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tv-blue);
    box-shadow: 0 0 0 3px rgba(3, 113, 215, 0.15);
}

/* ---------- Services responsive ---------- */
@media (max-width: 1199px) {
    .tv-services { padding: 76px 0; }
    .tv-services-layout { gap: 36px; }
    .tv-services .tv-services-visual { max-width: 460px; }
}

/* Stack: image first, natural height, no sticky */
@media (max-width: 1023px) {
    .tv-services { padding: 60px 0; }
    .tv-services-header { margin-bottom: 40px; }
    .tv-services-layout { grid-template-columns: 1fr; gap: 32px; }
    .tv-services-media { width: 100%; margin: 0; }
    .tv-services .tv-services-visual { position: relative; top: auto; }
}

/* Mobile */
@media (max-width: 599px) {
    .tv-services { padding: 45px 0 52px; }
    .tv-services-container { padding: 0 20px; }
    .tv-services-header { margin-bottom: 32px; }
    .tv-services-layout { gap: 28px; }
    .tv-services .tv-services-visual { padding: 0 10px 10px 0; }
    .tv-services-visual::before { top: 10px; left: 10px; }
    .tv-services-badge { bottom: 18px; padding: 12px 18px 10px; }
    .tv-services .tv-services-badge-number { font-size: 32px; }
    .tv-services .tv-services-badge-text { font-size: 14px; }
    .tv-services-list { gap: 16px; }
    .tv-service-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 22px;
    }
    .tv-service-icon { width: 64px; height: 64px; border-radius: 16px; }
    .tv-service-icon img { width: 38px; height: 38px; }
    .tv-service-number { top: 16px; right: 20px; font-size: 36px; }
    .tv-services .tv-service-title { margin-right: 0; font-size: 18px; }
    .tv-service-points li { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-service-card,
    .tv-service-card::before,
    .tv-service-icon,
    .tv-service-icon img { transition: none !important; }
}


/* ==========================================================
   8. HOME — FIVE STAR SERVICE (light, red + blue)
   ========================================================== */
.tv-five-star {
    --fs-blue: var(--tv-blue, #0371d7);
    --fs-blue-dark: var(--tv-blue-dark, #024a8f);
    --fs-red: var(--tv-red, #ef0707);
    --fs-red-deep: #b30505;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 80px 0;
    margin-top: -80px;
    background:
        radial-gradient(circle at 4% 90%, rgba(3, 113, 215, 0.07) 0%, rgba(3, 113, 215, 0) 40%),
        radial-gradient(circle at 96% 10%, rgba(239, 7, 7, 0.05) 0%, rgba(239, 7, 7, 0) 40%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
@supports (color: color-mix(in srgb, red, blue)) {
    .tv-five-star { --fs-red-deep: color-mix(in srgb, var(--fs-red) 70%, #000); }
}

.tv-five-star-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 28px;
}

/* Heading */
.tv-five-star-header { margin-bottom: 64px; text-align: center; }
.tv-five-star .tv-five-star-title {
    margin: 0;
    color: var(--tv-ink);
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}
.tv-five-star-title span {
    color: var(--fs-blue);   /* fallback */
    background: linear-gradient(90deg, var(--fs-blue-dark) 0%, var(--fs-blue) 35%, var(--fs-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tv-five-star-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--fs-blue), var(--fs-red));
}

/* Grid: 2 columns x 3 rows, equal heights */
.tv-five-star-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 64px;
}
.tv-five-star-item { display: flex; }

/* Pill card */
.tv-five-star-card {
    --fs-icon: var(--fs-blue);
    --fs-shadow: rgba(3, 113, 215, 0.22);
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100px;
    padding: 20px 128px 20px 44px;
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 12px 28px rgba(3, 113, 215, 0.14);
    transition: translate .28s ease, box-shadow .28s ease, filter .28s ease;
}
.tv-five-star-card--1,
.tv-five-star-card--4,
.tv-five-star-card--5 {            /* blue -> red */
    --fs-icon: var(--fs-red);
    --fs-shadow: rgba(239, 7, 7, 0.24);
    background: linear-gradient(90deg,
        var(--fs-blue-dark) 0%,
        var(--fs-blue) 38%,
        var(--fs-red) 100%);
}
.tv-five-star-card--2,
.tv-five-star-card--3,
.tv-five-star-card--6 {            /* red -> blue */
    --fs-icon: var(--fs-blue);
    --fs-shadow: rgba(3, 113, 215, 0.26);
    background: linear-gradient(90deg,
        var(--fs-red-deep) 0%,
        var(--fs-red) 38%,
        var(--fs-blue) 100%);
}


.tv-five-star-card:hover {
    translate: 4px 0;
    filter: brightness(1.08);
    box-shadow: 0 18px 38px var(--fs-shadow);
}

.tv-five-star-content { min-width: 0; }
.tv-five-star .tv-five-star-title-text {
    margin: 0 0 6px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
}
.tv-five-star .tv-five-star-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14.5px;
    line-height: 1.55;
    text-align: left;
}

/* Circular visual overlapping the right side */
.tv-five-star-icon {
    position: absolute;
    top: 50%;
    right: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 30px rgba(3, 113, 215, 0.15);
    transform: translateY(-50%);
    transition: transform .28s ease;
}
.tv-five-star-icon::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #f3f7fc;
}
.tv-five-star-icon i {
    position: relative;
    color: var(--fs-icon);
    font-size: 46px;
    line-height: 1;
}
.tv-five-star-card:hover .tv-five-star-icon {
    transform: translateY(-50%) scale(1.07);
}

/* Flight route (behind cards) */
.tv-five-star-route {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
}
.tv-five-star-route svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.tv-five-star-route svg path { stroke: url(#tv-five-star-grad); }
.tv-five-star-plane {
    position: absolute;
    right: 2%;
    top: 18%;
    color: var(--fs-red);
    font-size: 34px;
    line-height: 1;
    transform: translate(50%, -50%) rotate(40deg);
}

/* ---------- Five Star responsive ---------- */
@media (max-width: 1199px) {
    .tv-five-star-grid { gap: 34px 52px; }
    .tv-five-star-card { padding: 18px 112px 18px 38px; }
    .tv-five-star-icon { width: 94px; height: 94px; }
    .tv-five-star-icon i { font-size: 40px; }
}

/* Tablet and below: single column, centred */
@media (max-width: 899px) {
    .tv-five-star { padding: 65px 0; }
    .tv-five-star-header { margin-bottom: 48px; }
    .tv-five-star-grid {
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 620px;
        margin: 0 auto;
    }
    .tv-five-star-route { opacity: 0.25; }
}

/* Mobile */
@media (max-width: 599px) {
    .tv-five-star { padding: 55px 0; }
    .tv-five-star-container { padding: 0 20px; }
    .tv-five-star-header { margin-bottom: 38px; }
    .tv-five-star-grid { gap: 20px; }
    .tv-five-star-card { min-height: 92px; padding: 18px 84px 18px 26px; }
    .tv-five-star .tv-five-star-title-text { font-size: 17px; margin-bottom: 4px; }
    .tv-five-star .tv-five-star-description { font-size: 13.5px; line-height: 1.5; }
    .tv-five-star-icon { right: -8px; width: 72px; height: 72px; }
    .tv-five-star-icon::before { inset: 7px; }
    .tv-five-star-icon i { font-size: 30px; }
    .tv-five-star-plane { font-size: 24px; right: 4%; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-five-star-card,
    .tv-five-star-icon { transition: none !important; }
}

/* ==========================================================
   9. HOME — SIMPLE STEPS (scroll timeline, red + blue)
   ========================================================== */
.tv-steps {
    --st-blue: var(--tv-blue, #0371d7);
    --st-blue-dark: var(--tv-blue-dark, #024a8f);
    --st-red: var(--tv-red, #ef0707);
    --st-red-deep: #b30505;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 90px 0;
    margin-top: -110px;
    background:
        radial-gradient(circle at 5% 8%, rgba(3, 113, 215, 0.08) 0%, rgba(3, 113, 215, 0) 42%),
        radial-gradient(circle at 95% 95%, rgba(239, 7, 7, 0.05) 0%, rgba(239, 7, 7, 0) 45%),
        #f8fbff;
}
@supports (color: color-mix(in srgb, red, blue)) {
    .tv-steps { --st-red-deep: color-mix(in srgb, var(--st-red) 70%, #000); }
}
.tv-steps::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(3, 113, 215, 0.09) 1px, transparent 1.5px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    pointer-events: none;
}

.tv-steps-container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    margin-top: -50px;
}

/* Header */
.tv-steps-header { margin-bottom: 64px; text-align: center; }
.tv-steps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.tv-steps-eyebrow i { color: var(--st-red); font-size: 18px; }
.tv-steps .tv-steps-eyebrow p {
    margin: 0;
    color: var(--st-blue);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.tv-steps .tv-steps-title {
    margin: 0;
    color: var(--tv-ink, #1a1f24);
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}
.tv-steps-title span {
    color: var(--st-blue);   /* fallback */
    background: linear-gradient(90deg, var(--st-blue-dark) 0%, var(--st-blue) 40%, var(--st-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tv-steps-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--st-blue), var(--st-red));
}

/* Timeline */
.tv-steps-timeline {
    --tv-line-x: 50%;
    position: relative;
}
/* base line (top/height are set by JS to run first marker -> last marker) */
.tv-steps-timeline::before {
    content: "";
    position: absolute;
    left: var(--tv-line-x);
    top: var(--tv-line-top, 0px);
    height: var(--tv-line-span, 100%);
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: #dde6f1;
}
/* progress line: blue at the top fading to red at the bottom */
.tv-step-progress {
    position: absolute;
    left: var(--tv-line-x);
    top: var(--tv-line-top, 0px);
    height: var(--tv-line-span, 100%);
    width: 3px;
    margin-left: -1.5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--st-blue) 0%, var(--st-blue) 25%, var(--st-red) 100%);
    transform: scaleY(0);
    transform-origin: top;
    z-index: 1;
    will-change: transform;
}

/* Airplane */
.tv-step-airplane {
    position: absolute;
    left: var(--tv-line-x);
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: #fff;
    color: var(--st-red);
    box-shadow: 0 8px 22px rgba(3, 113, 215, 0.25), 0 0 0 2px rgba(3, 113, 215, 0.18);
    will-change: transform;
}
.tv-step-airplane svg { transform: rotate(180deg); } /* nose points down the timeline */

/* Step row: [image][marker][content] / reversed: [content][marker][image] */
.tv-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    grid-template-areas: "image marker content";
    align-items: center;
    padding: 30px 0;
}
.tv-step--reverse { grid-template-areas: "content marker image"; }

.tv-step-content { grid-area: content; max-width: 470px; padding: 0 44px; transition: opacity .4s ease; }
.tv-step-image   { grid-area: image; justify-self: center; transition: opacity .4s ease, transform .4s ease, border-color .4s ease, box-shadow .4s ease; }
.tv-step-marker  { grid-area: marker; justify-self: center; }

.tv-step--reverse .tv-step-content { justify-self: end; text-align: right; }

/* Text */
.tv-step-number {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(3, 113, 215, 0.10);
    color: var(--st-blue-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tv-steps .tv-step-title {
    margin: 0 0 10px;
    color: var(--tv-ink, #1a1f24);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}
.tv-steps .tv-step-description {
    margin: 0;
    color: var(--tv-text, #3a424a);
    font-size: 16px;
    line-height: 1.7;
}

/* Marker */
.tv-step-marker {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #dde6f1;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.tv-step-marker::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transition: opacity .3s ease;
}
.tv-step.is-active .tv-step-marker {
    border-color: transparent;
    background: linear-gradient(135deg, var(--st-blue), var(--st-red));
    box-shadow: 0 0 0 7px rgba(3, 113, 215, 0.15);
    transform: scale(1.1);
}
.tv-step.is-active .tv-step-marker::after { opacity: 1; }

/* Illustration panel */
.tv-step-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4 / 3;
    border-radius: 26px;
    border: 1px solid #e1e8f1;
    background:
        radial-gradient(circle at 25% 18%, rgba(3, 113, 215, 0.13) 0%, rgba(3, 113, 215, 0) 55%),
        radial-gradient(circle at 80% 90%, rgba(239, 7, 7, 0.09) 0%, rgba(239, 7, 7, 0) 55%),
        #fff;
    box-shadow: 0 10px 30px rgba(3, 113, 215, 0.08);
}
.tv-step-image::before {
    content: "";
    position: absolute;
    width: 62%;
    aspect-ratio: 1;
    border: 1.5px dashed rgba(3, 113, 215, 0.25);
    border-radius: 50%;
}
.tv-step-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 14px 30px rgba(3, 113, 215, 0.24);
}
.tv-step-icon i { font-size: 46px; line-height: 1; }
/* alternate gradient direction, same pattern as the Five Star cards */
.tv-step--blue  .tv-step-icon { background: linear-gradient(135deg, var(--st-blue-dark) 0%, var(--st-blue) 45%, var(--st-red) 100%); }
.tv-step--green .tv-step-icon { background: linear-gradient(135deg, var(--st-red-deep) 0%, var(--st-red) 45%, var(--st-blue) 100%); }

/* Active / inactive (only dims once JS is running) */
.tv-steps.is-ready .tv-step:not(.is-active) .tv-step-content,
.tv-steps.is-ready .tv-step:not(.is-active) .tv-step-image { opacity: 0.65; }
.tv-step.is-active .tv-step-image {
    transform: scale(1.03);
    border-color: rgba(3, 113, 215, 0.4);
    box-shadow: 0 18px 44px rgba(3, 113, 215, 0.14);
}

/* ==========================================================
   10. HOME — ACCREDITATIONS (trust, red + blue)
   ========================================================== */
.tv-accreditations {
    --ac-blue: var(--tv-blue, #0371d7);
    --ac-blue-dark: var(--tv-blue-dark, #024a8f);
    --ac-red: var(--tv-red, #ef0707);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 90px 0;
    margin-top: -110px;
    background:
        radial-gradient(circle at 8% 15%, rgba(3, 113, 215, 0.08) 0%, rgba(3, 113, 215, 0) 42%),
        radial-gradient(circle at 94% 90%, rgba(239, 7, 7, 0.05) 0%, rgba(239, 7, 7, 0) 45%),
        #f8fbff;
}
.tv-accreditations::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(3, 113, 215, 0.09) 1px, transparent 1.5px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
    pointer-events: none;
}

.tv-accreditations-container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    margin-top: -50px;
}

/* Header */
.tv-accreditations-header { margin-bottom: 52px; text-align: center; }
.tv-accreditations-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.tv-accreditations-eyebrow i { color: var(--ac-red); font-size: 20px; }
.tv-accreditations .tv-accreditations-eyebrow p {
    margin: 0;
    color: var(--ac-blue);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.tv-accreditations .tv-accreditations-title {
    margin: 0;
    color: var(--tv-ink, #1a1f24);
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}
.tv-accreditations-title span {
    color: var(--ac-blue);   /* fallback */
    background: linear-gradient(90deg, var(--ac-blue-dark) 0%, var(--ac-blue) 40%, var(--ac-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tv-accreditations-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ac-blue), var(--ac-red));
}

/* Grid */
.tv-accreditations-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

/* Card */
.tv-accreditation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 18px 18px 22px;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(3, 113, 215, 0.08);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* gradient accent bar that grows in on hover */
.tv-accreditation-card::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--ac-blue), var(--ac-red));
    transform: scaleX(0);
    transition: transform .3s ease;
}
.tv-accreditation-card:hover {
    transform: translateY(-6px);
    border-color: rgba(3, 113, 215, 0.5);
    box-shadow: 0 18px 44px rgba(3, 113, 215, 0.14);
}
.tv-accreditation-card:hover::after { transform: scaleX(1); }

/* Image frame (button). The certificate itself is never filtered or cropped. */
.tv-accreditations button.tv-accreditation-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: 12px;
    overflow: hidden;
    border: 1px solid #eef2f3;
    border-radius: 14px;
    background: #fff;
    cursor: zoom-in;
    -webkit-appearance: none;
            appearance: none;
}
.tv-accreditations button.tv-accreditation-image:focus-visible {
    outline: 3px solid var(--ac-blue);
    outline-offset: 3px;
}
.tv-accreditation-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .35s ease;
}
.tv-accreditation-card:hover .tv-accreditation-image img { transform: scale(1.025); }

.tv-accreditation-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ac-blue), var(--ac-red));
    color: #fff;
    font-size: 19px;
    box-shadow: 0 6px 16px rgba(3, 113, 215, 0.35);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}
.tv-accreditation-card:hover .tv-accreditation-zoom,
.tv-accreditation-image:focus-visible .tv-accreditation-zoom {
    opacity: 1;
    transform: none;
}

/* Label */
.tv-accreditations .tv-accreditation-label {
    position: relative;
    margin: 18px 0 0;
    padding-top: 16px;
    color: var(--ac-blue-dark);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}
.tv-accreditation-label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 36px;
    height: 2px;
    margin-left: -18px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ac-blue), var(--ac-red));
}

/* Lightbox */
.tv-accreditation-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 20, 38, 0.88);
    opacity: 0;
    transition: opacity .22s ease;
}
.tv-accreditation-lightbox[hidden] { display: none; }
.tv-accreditation-lightbox.is-open { opacity: 1; }

.tv-accreditation-lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    margin: 0;
}
.tv-accreditation-lightbox-image {
    display: block;
    max-width: min(96vw, 1100px);
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    transform: scale(.96);
    transition: transform .22s ease;
}
.tv-accreditation-lightbox.is-open .tv-accreditation-lightbox-image { transform: scale(1); }

.tv-accreditation-lightbox-caption {
    margin-top: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.tv-accreditation-lightbox button.tv-accreditation-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--tv-ink, #1a1f24);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.tv-accreditation-lightbox button.tv-accreditation-close:hover,
.tv-accreditation-lightbox button.tv-accreditation-close:focus-visible {
    background: var(--ac-red);
    color: #fff;
    transform: rotate(90deg);
    outline: none;
}

html.tv-accreditation-lock,
html.tv-accreditation-lock body { overflow: hidden; }


/* ==========================================================
   11. FOOTER (dark navy, red + blue)
   ========================================================== */
.tv-footer {
    --ft-blue: var(--tv-blue, #0371d7);
    --ft-blue-dark: var(--tv-blue-dark, #024a8f);
    --ft-red: var(--tv-red, #ef0707);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 72px 0 0;
    color: rgba(255, 255, 255, 0.76);
    background:
        radial-gradient(circle at 6% 0%, rgba(3, 113, 215, 0.28) 0%, rgba(3, 113, 215, 0) 45%),
        radial-gradient(circle at 98% 100%, rgba(239, 7, 7, 0.16) 0%, rgba(239, 7, 7, 0) 45%),
        linear-gradient(135deg, #06172c 0%, #082a50 55%, #071a33 100%);
}
/* gradient top edge */
.tv-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ft-blue), var(--ft-red));
}
.tv-footer-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Grid */
.tv-footer-grid { display: grid; gap: 48px; align-items: start; }
.tv-footer-grid--4 { grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; }
.tv-footer-grid--3 { grid-template-columns: 1.6fr 1fr 1.3fr; }

/* Brand */
.tv-footer-logo {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    transition: transform .3s ease, box-shadow .3s ease;
}
.tv-footer-logo:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}
.tv-footer-logo img { display: block; width: 190px; max-width: 100%; height: auto; }

.tv-footer .tv-footer-about {
    max-width: 380px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.75;
}

/* Social */
.tv-footer-social { display: flex; gap: 12px; margin-top: 24px; }
.tv-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    text-decoration: none;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.tv-footer-social a:hover,
.tv-footer-social a:focus-visible {
    background: linear-gradient(135deg, var(--ft-blue), var(--ft-red));
    box-shadow: 0 8px 20px rgba(3, 113, 215, 0.4);
    transform: translateY(-3px);
    color: #fff;
    outline: none;
}

/* Headings */
.tv-footer .tv-footer-heading {
    position: relative;
    margin: 0 0 26px;
    padding-bottom: 14px;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
.tv-footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ft-blue), var(--ft-red));
}

/* Link lists */
.tv-footer-links { margin: 0; padding: 0; list-style: none; }
.tv-footer-links li { margin: 0 0 16px; }
.tv-footer-links li:last-child { margin-bottom: 0; }
.tv-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
}
.tv-footer-links a i {
    color: var(--ft-red);
    font-size: 16px;
    transition: color .25s ease;
}
.tv-footer-links a:hover,
.tv-footer-links a:focus-visible {
    color: #fff;
    transform: translateX(5px);
    outline: none;
}
.tv-footer-links a:hover i { color: #5aa9ff; }

/* Address (only renders when $tv_footer_address is set) */
.tv-footer .tv-footer-address {
    display: flex;
    gap: 12px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15.5px;
    line-height: 1.7;
}
.tv-footer-address i { flex: none; margin-top: 3px; color: var(--ft-red); font-size: 20px; }

/* Bottom bar */
.tv-footer-bottom {
    margin-top: 56px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}
.tv-footer .tv-footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Footer responsive ---------- */
@media (max-width: 1023px) {
    .tv-footer { padding-top: 60px; }
    .tv-footer-grid--4,
    .tv-footer-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; }
    .tv-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
    .tv-footer { padding-top: 48px; }
    .tv-footer-container { padding: 0 20px; }
    .tv-footer-grid--4,
    .tv-footer-grid--3 { grid-template-columns: 1fr; gap: 34px; }
    .tv-footer-logo img { width: 160px; }
    .tv-footer .tv-footer-heading { margin-bottom: 20px; }
    .tv-footer-links li { margin-bottom: 14px; }
    .tv-footer-bottom { margin-top: 40px; padding: 20px 0 84px; } /* clears the floating WhatsApp button */
}

@media (prefers-reduced-motion: reduce) {
    .tv-footer-logo,
    .tv-footer-social a,
    .tv-footer-links a { transition: none !important; }
}