/* ============================================
   GREENPORT SHIPPING - Main Stylesheet
   Design System & Complete CSS
   ============================================ */


/* ---- CSS Custom Properties (Design Tokens) ---- */

:root {
    /* Semantic Brand Colors */
    --color-sky: #fd851f;
    --color-navy: #345B82;
    --color-navy-dark: #1A3050;
    /* Primary Colors (aliased for backwards compat) */
    --color-orange: var(--color-sky);
    --color-orange-dark: #e6760f;
    --color-orange-light: #ffa24d;
    --color-orange-10: rgba(253, 133, 31, 0.1);
    --color-orange-20: rgba(253, 133, 31, 0.2);
    --color-purple: var(--color-navy);
    --color-purple-dark: var(--color-navy-dark);
    --color-purple-light: #4A7BA8;
    --color-purple-10: rgba(52, 91, 130, 0.1);
    --color-purple-20: rgba(52, 91, 130, 0.2);
    /* Neutrals */
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-dark: #0D1B2A;
    /* Typography */
    --font-heading: 'Libre Franklin', sans-serif;
    --font-body: 'Libre Franklin', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 4.5rem;
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    /* Layout */
    --container-max: 1420px;
    --container-padding: 1.5rem;
    --topbar-height: 40px;
    --header-height: 80px;
    --header-total-height: 120px;
    /* Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 4px 24px rgba(52, 91, 130, 0.08);
    --shadow-card-hover: 0 12px 40px rgba(52, 91, 130, 0.15);
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: 16px;
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-dark) 100%);
    --gradient-glow: radial-gradient(circle, rgba(253, 133, 31, 0.15) 0%, transparent 70%);
    /* Glow Effects */
    --glow-orange: 0 0 20px rgba(253, 133, 31, 0.3);
    --glow-purple: 0 0 20px rgba(52, 91, 130, 0.3);
    /* Enhanced Shadows */
    --shadow-elevated: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
    --shadow-glow-orange: 0 8px 30px rgba(253, 133, 31, 0.25);
    --shadow-glow-purple: 0 8px 30px rgba(52, 91, 130, 0.2);
    /* Animation Easings */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
}


/* ---- Reset & Base ---- */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-gray-700);
    background-color: var(--color-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Default paragraph colour site-wide. Specific dark-section rules (hero,
   cards, footer, CTA, etc.) override this so light-on-dark text stays legible. */

p {
    color: #737373;
}

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

a {
    color: var(--color-sky);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-orange);
}

#contact a {
    /* color: #6b7280; */
}

#contact a:hover {
    color: #fd851f;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-gray-900);
    line-height: 1.2;
    font-weight: 700;
}

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}


/* ---- Accessibility ---- */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.skip-link:focus {
    clip: auto;
    width: auto;
    height: auto;
    padding: var(--space-md);
    background: var(--color-orange);
    color: var(--color-white);
    z-index: 100000;
    top: 0;
    left: 0;
}


/* ---- Layout ---- */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--space-4xl) 0;
}


/* ---- Buttons ---- */


/* ============================================
   CTA BUTTONS — modern, premium, accessible
   One shared system used site-wide. Variants:
   --primary (brand, highest emphasis), --outline
   (elegant minimal secondary), --accent,
   --outline-light. Full state set: hover,
   focus-visible, active, disabled. Touch-friendly
   sizing and reduced-motion fallback included.
   ============================================ */

.btn {
    --btn-radius: 10px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.8rem 1.85rem;
    min-height: 46px;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--btn-radius);
    transition: transform var(--transition-base) var(--ease-out-back), box-shadow var(--transition-base) ease, background-color var(--transition-base) ease, border-color var(--transition-base) ease, color var(--transition-base) ease, filter var(--transition-base) ease;
}

.btn svg {
    flex: 0 0 auto;
    transition: transform var(--transition-base) var(--ease-out-back);
}

.btn:hover svg {
    transform: translateX(3px);
}


/* Keyboard focus ring — shown for keyboard users, not on mouse click. */

.btn:focus-visible {
    outline: 3px solid rgba(253, 133, 31, 0.45);
    outline-offset: 2px;
}


/* Pressed — quick, tactile dip. */

.btn:active {
    transform: translateY(1px) scale(0.985);
    transition-duration: var(--transition-fast);
}


/* ---- Primary: brand-coloured, highest emphasis ---- */

.btn--primary {
    background-color: var(--color-orange);
    background-image: linear-gradient(135deg, var(--color-orange-light) 0%, var(--color-orange) 52%, var(--color-orange-dark) 100%);
    color: var(--color-white);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(253, 133, 31, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn--primary:hover {
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(253, 133, 31, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    filter: brightness(1.04);
}

.btn--primary:active {
    box-shadow: 0 3px 10px rgba(253, 133, 31, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    filter: brightness(0.99);
}


/* ---- Outline: elegant, minimal secondary ---- */

.btn--outline {
    background-color: transparent;
    color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn--outline:hover {
    background-color: var(--color-orange);
    color: var(--color-white);
    border-color: var(--color-orange);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(253, 133, 31, 0.26);
}

.btn--outline:active {
    box-shadow: 0 3px 10px rgba(253, 133, 31, 0.22);
}


/* ---- Accent: filled, inverts to white on hover ---- */

.btn--accent {
    background-color: var(--color-orange);
    color: var(--color-white);
    border-color: var(--color-orange);
    box-shadow: 0 4px 14px rgba(253, 133, 31, 0.24);
}

.btn--accent:hover {
    background-color: var(--color-white);
    color: var(--color-orange);
    border-color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.btn--accent:active {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}


/* ---- Sizes (radius scales subtly with size) ---- */

.btn--lg {
    --btn-radius: 12px;
    padding: 1rem 2.25rem;
    min-height: 54px;
    font-size: var(--font-size-base);
}

.btn--sm {
    --btn-radius: 8px;
    padding: 0.5rem 1.25rem;
    min-height: 38px;
    font-size: var(--font-size-xs);
}

.btn--full {
    width: 100%;
    justify-content: center;
}


/* ---- Disabled: native <button>/<input>, ARIA, and the utility class ---- */

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"],
.btn--disabled {
    opacity: 0.55;
    filter: grayscale(0.25);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    pointer-events: none;
}


/* ---- Respect reduced-motion: keep state changes, drop the movement ---- */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn svg {
        transition-duration: 1ms;
    }
    .btn:hover,
    .btn:active,
    .btn:hover svg {
        transform: none;
    }
}


/* ---- Section Headers ---- */

.section-label {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.section-label--center {
    justify-content: center;
}

.section-label__line {
    width: 40px;
    height: 2px;
    background: var(--color-orange);
}

.section-label__text {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-orange);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section-label--light .section-label__line {
    background: var(--color-orange);
}

.section-label--light .section-label__text {
    color: var(--color-orange);
}

.section-title {
    font-size: var(--font-size-4xl);
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--color-gray-900);
}

.section-title--light {
    color: var(--color-dark);
}

.text-accent {
    color: var(--color-orange);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    /* max-width: 640px; */
}

.section-header--center {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.section-header--center .section-subtitle {
    margin: 0 auto;
}


/* ============================================
   TOP BAR (Sub-header)
   ============================================ */

@keyframes topbarSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.site-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    height: var(--topbar-height);
    background: #234b7c;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-xs);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    will-change: transform;
    animation: topbarSlideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    border-bottom: 1px solid rgba(253, 133, 31, 0.15);
}

.site-topbar.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    animation: none;
}

.topbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.topbar-item:hover {
    color: #fff;
}

.topbar-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.topbar-item--address {
    color: rgba(255, 255, 255, 0.75);
}

.topbar-item--address svg {
    color: #ffff;
    opacity: 1;
}

.topbar-separator {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
}

.topbar-separator--comma {
    width: auto;
    height: auto;
    background: none;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: rgba(255, 255, 255, 0.65);
}

.topbar-right svg {
    flex-shrink: 0;
    opacity: 0.6;
    color: #fff;
    width: 16px;
}


/* Topbar Social Links */

.topbar-social {
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-social svg {
    color: #fd851f;
}

.topbar-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
}

.topbar-social__link:hover {
    background: var(--color-orange);
    color: var(--color-white);
    transform: translateY(-1px);
}


/* ============================================
   HEADER
   ============================================ */

.site-header {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    height: var(--header-height);
    border-bottom: 1px solid transparent;
    will-change: top;
}

.site-header.scrolled {
    top: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(52, 91, 130, 0.08);
    border-bottom-color: rgba(52, 91, 130, 0.06);
    height: 68px;
}


/* Header Glow Line (visible on scroll) */

.header-glow {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-sky), var(--color-orange-light), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10;
}

.site-header.scrolled .header-glow {
    opacity: 1;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}


/* Logo */

.header-logo {
    flex-shrink: 0;
}

.header-logo img {
    max-height: 60px;
    width: auto;
    transition: transform 0.3s ease;
}

.header-logo:hover img {
    transform: scale(1.03);
}

.site-logo-text {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease;
}

.site-logo-text:hover {
    opacity: 0.85;
}

.logo-green {
    color: var(--color-sky);
    transition: color 0.3s ease;
}

.logo-port {
    color: var(--color-orange);
    transition: color 0.3s ease;
}


/* Navigation */

.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

.primary-menu {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.primary-menu>.menu-item>a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: color 0.3s ease;
    position: relative;
}

.primary-menu>.menu-item>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-orange), var(--color-orange-light));
    border-radius: 1px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.primary-menu>.menu-item>a:hover,
.primary-menu>.menu-item.current-menu-item>a {
    color: var(--color-sky);
}

.primary-menu>.menu-item>a:hover::after,
.primary-menu>.menu-item.current-menu-item>a::after {
    width: 80%;
    left: 10%;
}

.menu-arrow {
    transition: transform var(--transition-fast);
}


/* Mega Menu Dropdown */

.has-mega-menu {
    position: relative;
}

.mega-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px) scale(0.96);
    transform-origin: top center;
    min-width: 560px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 60px rgba(52, 91, 130, 0.14), 0 0 0 1px rgba(52, 91, 130, 0.05), 0 0 50px rgba(253, 133, 31, 0.05);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
    border: 1px solid rgba(255, 255, 255, 0.7);
    z-index: 100;
    overflow: visible;
}


/* Top arrow indicator */

.mega-menu-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(52, 91, 130, 0.05);
    border-left: 1px solid rgba(52, 91, 130, 0.05);
    z-index: 1;
}


/* Ensure header/footer match container's border-radius */

.mega-menu-header {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.mega-menu-footer {
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.has-mega-menu:hover .mega-menu-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.has-mega-menu:hover .menu-arrow {
    transform: rotate(180deg);
}


/* Mega Menu Header */

.mega-menu-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-bottom: 1px solid var(--color-gray-100);
    background: linear-gradient(135deg, rgba(52, 91, 130, 0.02), rgba(253, 133, 31, 0.02));
}

.mega-menu-header__icon {
    color: var(--color-orange);
    display: flex;
    align-items: center;
}

.mega-menu-header__text {
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-gray-400);
}


/* Mega Menu List */

.mega-menu-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    padding: var(--space-sm);
}


/* Staggered entrance animation for items */

.mega-menu-list .menu-item {
    opacity: 0;
    transform: translateY(8px);
}

.has-mega-menu:hover .mega-menu-list .menu-item {
    animation: megaMenuItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.has-mega-menu:hover .mega-menu-list .menu-item:nth-child(1) {
    animation-delay: 0.04s;
}

.has-mega-menu:hover .mega-menu-list .menu-item:nth-child(2) {
    animation-delay: 0.07s;
}

.has-mega-menu:hover .mega-menu-list .menu-item:nth-child(3) {
    animation-delay: 0.10s;
}

.has-mega-menu:hover .mega-menu-list .menu-item:nth-child(4) {
    animation-delay: 0.13s;
}

.has-mega-menu:hover .mega-menu-list .menu-item:nth-child(5) {
    animation-delay: 0.16s;
}

.has-mega-menu:hover .mega-menu-list .menu-item:nth-child(6) {
    animation-delay: 0.19s;
}

.has-mega-menu:hover .mega-menu-list .menu-item:nth-child(7) {
    animation-delay: 0.22s;
}

.has-mega-menu:hover .mega-menu-list .menu-item:nth-child(8) {
    animation-delay: 0.25s;
}

.has-mega-menu:hover .mega-menu-list .menu-item:nth-child(9) {
    animation-delay: 0.28s;
}

.has-mega-menu:hover .mega-menu-list .menu-item:nth-child(10) {
    animation-delay: 0.31s;
}

@keyframes megaMenuItemIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Menu item links */

.mega-menu-list .menu-item a {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    position: relative;
    border-left: 3px solid transparent;
}

.mega-menu-list .menu-item a:hover {
    background: linear-gradient(135deg, rgba(52, 91, 130, 0.04), rgba(253, 133, 31, 0.06));
    border-left-color: var(--color-orange);
    transform: translateX(4px);
}


/* Service icon container */

.mega-menu-list .menu-item a .service-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-purple-10), var(--color-orange-10));
    border-radius: var(--radius-md);
    color: var(--color-orange);
    font-size: 18px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-menu-list .menu-item a .service-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

.mega-menu-list .menu-item a:hover .service-icon {
    background: linear-gradient(135deg, var(--color-orange), var(--color-orange-light));
    color: var(--color-white);
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(253, 133, 31, 0.3);
}


/* Text content */

.mega-menu-list .menu-item a span {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mega-menu-list .menu-item a strong {
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
    font-weight: 600;
    transition: color 0.25s ease;
}

.mega-menu-list .menu-item a:hover strong {
    color: var(--color-sky);
}

.mega-menu-list .menu-item a small {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-top: 2px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Right arrow indicator */

.mega-menu-item-arrow {
    flex-shrink: 0;
    color: var(--color-gray-300);
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-menu-list .menu-item a:hover .mega-menu-item-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--color-orange);
}


/* Mega Menu Footer */

.mega-menu-footer {
    border-top: 1px solid var(--color-gray-100);
    padding: var(--space-md) var(--space-xl);
    text-align: center;
    background: linear-gradient(135deg, rgba(52, 91, 130, 0.02), rgba(253, 133, 31, 0.02));
}

.mega-menu-footer__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-sky);
    transition: all 0.25s ease;
}

.mega-menu-footer__link svg {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-menu-footer__link:hover {
    color: var(--color-orange);
}

.mega-menu-footer__link:hover svg {
    transform: translateX(4px);
}


/* Header Utilities */

.header-utilities {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}


/* Language Switcher */

.language-switcher {
    position: relative;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.25s ease;
}

.lang-toggle:hover {
    border-color: var(--color-sky);
    color: var(--color-sky);
    background: var(--color-orange-10);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(52, 91, 130, 0.12), 0 0 0 1px rgba(52, 91, 130, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.6);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(0.96);
    transform-origin: top right;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 140px;
    z-index: 50;
}

.language-switcher.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.lang-option {
    display: block;
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    transition: all var(--transition-fast);
}

.lang-option:hover,
.lang-option.active {
    background: var(--color-orange-10);
    color: var(--color-sky);
}

.header-cta {
    padding: 0.6rem 1.25rem;
    position: relative;
    overflow: hidden;
}

.header-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
}

.header-cta:hover::before {
    left: 100%;
}


/* Mobile Menu Toggle */

.mobile-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.mobile-menu-toggle:hover {
    background: var(--color-gray-100);
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-gray-800);
    border-radius: 2px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.mobile-menu-toggle:hover .hamburger-line {
    background: var(--color-purple);
}

.mobile-menu-toggle[aria-expanded="false"]:hover .hamburger-line:nth-child(1) {
    transform: translateX(3px);
}

.mobile-menu-toggle[aria-expanded="false"]:hover .hamburger-line:nth-child(3) {
    transform: translateX(-3px);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* Mobile Menu Overlay */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background: var(--color-white);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    overflow-y: auto;
}


/* Adjust mobile overlay top when topbar is visible */

.has-topbar .mobile-menu-overlay {
    top: var(--header-total-height);
}

.has-topbar.topbar-hidden .mobile-menu-overlay {
    top: 68px;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-inner {
    padding: var(--space-xl);
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
}

.mobile-menu {
    flex: 1;
}

.mobile-menu li {
    border-bottom: 1px solid var(--color-gray-100);
}

.mobile-menu li a {
    display: block;
    padding: var(--space-md) 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-gray-800);
}

.mobile-menu li a:hover {
    color: var(--color-orange);
}

.mobile-menu .sub-menu {
    padding-left: var(--space-lg);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.mobile-menu .sub-menu.open {
    max-height: 600px;
    opacity: 1;
}

.mobile-menu .menu-item-has-children>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu .menu-item-has-children>a::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-gray-400);
    border-bottom: 2px solid var(--color-gray-400);
    transform: rotate(45deg);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.mobile-menu .submenu-open>a::after {
    transform: rotate(-135deg);
}

.mobile-menu .sub-menu li a {
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--color-gray-600);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
}

.mobile-menu .sub-menu li a::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-orange);
    flex-shrink: 0;
    opacity: 0.4;
    transition: all 0.25s ease;
}

.mobile-menu .sub-menu li a:hover::before {
    opacity: 1;
    transform: scale(1.3);
}

.mobile-menu-footer {
    padding-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
}

.mobile-lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.mobile-lang-switch a {
    font-weight: 600;
    color: var(--color-gray-600);
}

.mobile-lang-switch a:hover {
    color: var(--color-orange);
}


/* Header Scroll Progress Bar */

.header-scroll-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-sky), var(--color-orange-light));
    transition: width 0.1s linear;
    z-index: 10;
}


/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
    position: relative;
    height: 90vh;
    min-height: 540px;
    max-height: 800px;
    margin-top: var(--header-total-height);
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform, opacity;
    transform-origin: center center;
    z-index: 1;
}


/* GSAP handles active state - remove CSS transitions */

.hero-slide.active {
    z-index: 2;
}

.hero-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 37, 64, 0.45) 0%, rgba(52, 91, 130, 0.3) 50%, rgba(26, 48, 80, 0.35) 100%);
}


/* Cinematic gradient overlay */

.hero-slide__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 48, 80, 0.35) 0%, transparent 40%, transparent 60%, rgba(26, 48, 80, 0.1) 100%);
    z-index: 1;
}


/* Vignette effect */

.hero-slide__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(10, 5, 32, 0.25) 100%);
    z-index: 1;
}

.hero-slide__content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    /* Extra padding to clear the left/right nav arrows */
    padding-left: 92px;
    padding-right: 92px;
}

.hero-slide__text {
    max-width: 750px;
}


/* GSAP handles initial states and animations for title/subtitle/btn */

.hero-slide__title {
    font-size: var(--font-size-6xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.hero-slide__subtitle {
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-2xl);
    line-height: 1.6;
}

.hero-slide__btn {
    position: relative;
    overflow: hidden;
}


/* Tagline text above the title */

.hero-slide__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 540000;
    text-transform: capitalize;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-md);
    line-height: 1.4;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 100px;
}

.hero-slide__eyebrow::before {
    /* content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--color-orange, #e67e22);
    border-radius: 2px;
    flex-shrink: 0; */
}


/* Button row */

.hero-slide__btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}


/* Ghost (outline-on-image) button matching reference design */

.hero-slide__btn--ghost {
    background: transparent;
    color: var(--color-white);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
}

.hero-slide__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    border-color: var(--color-white);
    transform: translateY(-2px);
}


/* Hero Particle Field */

.hero-particle-field {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

.hero-particle-field .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}


/* Hero Controls (dots at bottom center) */

.hero-controls {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    z-index: 10;
}


/* Arrow buttons on left/right sides */

.hero-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    transition: all 0.35s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
}

.hero-control--prev {
    left: 24px;
}

.hero-control--next {
    right: 24px;
}

.hero-control:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    box-shadow: var(--glow-orange);
    transform: translateY(-50%) scale(1.1);
}


/* Pill-shaped dots */

.hero-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.4s var(--ease-out-expo);
    border: none;
}

.hero-dot.active {
    background: var(--color-orange);
    width: 32px;
    border-radius: var(--radius-full);
    box-shadow: 0 0 12px rgba(253, 133, 31, 0.4);
}


/* Scroll Indicator (hidden) */

.hero-scroll-indicator {
    display: none;
}

.scroll-down__mouse {
    display: none;
}

.scroll-down__wheel {
    display: none;
}

@keyframes scrollWheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
}


/* ============================================
   ABOUT SECTION
   ============================================ */

.section--about {
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}


/* Radial gradient background decoration */

.section--about::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(253, 133, 31, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.section--about .container {
    position: relative;
    z-index: 1;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}


/* ── About — label+heading / paragraph, divider, 4 figures ── */

.about-head {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-4xl);
    align-items: start;
}

.about-head__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
    color: var(--color-orange);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
}

.about-head__title {
    margin: 0;
    color: var(--color-gray-900);
    font-size: var(--font-size-4xl);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.01em;
}

.about-head__right {
    padding-top: 0.5rem;
}

.about-head__text {
    color: var(--color-gray-500);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.about-head__text p {
    margin: 0 0 1rem;
}

.about-head__text p:last-child {
    margin-bottom: 0;
}

.about-head__divider {
    border: 0;
    height: 1px;
    background: var(--color-gray-200);
    margin: clamp(1.5rem, 5vw, 1.5rem) 0;
}

.about-figures {
    display: grid;
    /* One equal column per figure, however many the admin keeps (3 by default). */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
}

.about-figure {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.about-figure__num {
    color: var(--color-orange);
    font-size: clamp(2rem, 4.5vw, 2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.about-figure__label {
    color: var(--color-gray-700);
    font-size: 1.125rem;
    /* font-weight: 500; */
    line-height: 1.3;
}

@media (max-width: 900px) {
    .about-head {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .about-figures {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl) var(--space-xl);
    }
}

@media (max-width: 480px) {
    .about-figures {
        grid-template-columns: 1fr 1fr;
    }
}

.about-text {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
}

.about-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.about-highlight {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.about-highlight__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-orange-10);
    border-radius: 50%;
}


/* Icon stroke uses the brand/button orange (overrides the inline SVG colour). */

.about-highlight__icon svg {
    stroke: var(--color-orange);
}

.about-highlight__text {
    font-weight: 500;
    color: var(--color-gray-800);
}

.about-visual {
    position: relative;
}

.about-image-wrapper {
    position: relative;
    z-index: 2;
}

.about-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
}

.about-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* Glass stat box */

.about-stat,
.about-stat--glass {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--color-orange);
    color: var(--color-white);
    padding: var(--space-xl) var(--space-2xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-glow-orange);
    z-index: 3;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.about-stat__number {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: 700;
    line-height: 1;
}

.about-stat__number::after {
    content: '+';
}

.about-stat__label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: var(--space-xs);
}


/* Enhanced accent shape */

.about-accent-shape {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-purple-20);
    border-radius: var(--radius-xl);
    z-index: 1;
    background: radial-gradient(circle at bottom right, rgba(52, 91, 130, 0.03), transparent 60%);
}


/* ============================================
   SERVICES SECTION (Horizontal Slider)
   ============================================ */

.section--services {
    background: linear-gradient(180deg, var(--color-gray-50) 0%, #f0f5fb 100%);
    overflow: hidden;
    padding-bottom: var(--space-4xl);
    position: relative;
}

.section--services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(253, 133, 31, 0.15), transparent);
}


/* Split Header */

.services-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.services-header__left {
    max-width: 600px;
}

.services-header__left .section-title {
    margin-bottom: var(--space-sm);
}

.services-header__left .section-subtitle {
    margin-bottom: 0;
}

.services-header__right {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
    padding-bottom: 4px;
}


/* Arrow Buttons */

.services-arrow {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-gray-300);
    background: var(--color-white);
    color: var(--color-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.services-arrow:hover {
    border-color: var(--color-sky);
    background: var(--color-sky);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(253, 133, 31, 0.3);
}

.services-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--color-gray-200);
    background: var(--color-gray-100);
    color: var(--color-gray-400);
    box-shadow: none;
}

.services-arrow svg {
    display: block;
}


/* Slider Container */

.services-slider {
    overflow: hidden;
    position: relative;
}


/* Slider Track */

.services-slider__track {
    display: flex;
    gap: 24px;
    will-change: transform;
}


/* Individual Slide */

.services-slide {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
}


/* Slide Card */

.services-slide__card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-gray-200);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.services-slide__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-sky), var(--color-navy));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.services-slide__card:hover {
    border-color: rgba(253, 133, 31, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(253, 133, 31, 0.12);
}

.services-slide__card:hover::before {
    transform: scaleX(1);
}


/* Icon Circle */

.services-slide__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: rgba(253, 133, 31, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-sky);
    margin-bottom: var(--space-xl);
    transition: all 0.4s ease;
}

.services-slide__card:hover .services-slide__icon {
    background: var(--color-sky);
    color: var(--color-white);
    transform: scale(1.05);
}

.services-slide__icon svg {
    width: 32px;
    height: 32px;
    display: block;
    overflow: visible;
}

.services-slide__icon .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
}

.services-slide__icon-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    border-radius: 0;
}


/* Title */

.services-slide__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}


/* Excerpt */

.services-slide__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.7;
    flex: 1;
    margin-bottom: var(--space-lg);
}


/* Learn More Link */

.services-slide__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-sky);
    text-decoration: none;
    transition: all 0.3s ease;
}

.services-slide__link:hover {
    color: var(--color-orange-dark);
    gap: var(--space-sm);
}

.services-slide__link svg {
    transition: transform 0.3s ease;
}

.services-slide__link:hover svg {
    transform: translateX(4px);
}


/* ============================================
   YACHT & LEISURE SECTION
   ============================================ */

.section--yacht {
    background-color: #0A2540;
    position: relative;
    overflow: hidden;
}

.section--yacht::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(253, 133, 31, 0.12), transparent);
}


/* Full-width header above the grid */

.yacht-header {
    margin-bottom: var(--space-3xl);
}

.yacht-header .section-title {
    max-width: 800px;
    color: #fff;
}

.yacht-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.yacht-visual {
    position: relative;
}

.yacht-image-wrapper {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
}

.yacht-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}


/* ── Yacht image slider (2+ images) ─────────────────────────
   The first image stays in normal flow so it sizes the wrapper;
   any additional images stack over it and crossfade. */

.yacht-image-wrapper--slider .yacht-slide {
    transition: opacity 0.8s ease;
}

.yacht-image-wrapper--slider .yacht-slide--base {
    position: relative;
    z-index: 0;
    opacity: 1;
}

.yacht-image-wrapper--slider .yacht-slide:not(.yacht-slide--base) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
}

.yacht-image-wrapper--slider .yacht-slide.is-active {
    opacity: 1;
    z-index: 2;
}


/* Arrows */

.yacht-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.yacht-slider__arrow--prev {
    left: 14px;
}

.yacht-slider__arrow--next {
    right: 14px;
}

.yacht-slider__arrow:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    transform: translateY(-50%) scale(1.08);
}


/* Dots */

.yacht-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.yacht-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.3s ease;
}

.yacht-slider__dot.is-active {
    width: 26px;
    background: var(--color-orange);
}


/* Subtitle label */

.yacht-subtitle {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-sky);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-lg);
}


/* Tags / pills */

.yacht-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.yacht-tag {
    display: inline-block;
    padding: 6px 16px;
    background: hsl(220deg 14% 96% / 10%);
    border: 0px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #bfbfbf;
    transition: all 0.3s ease;
}

a.btn.btn--outline.yacht-cta {
    color: #fff;
    border: 1px solid #fff;
}

.yacht-tag:hover {
    background: rgba(253, 133, 31, 0.1);
    border-color: rgba(253, 133, 31, 0.3);
    color: var(--color-sky);
}

.yacht-text {
    color: #fff !important;
    line-height: 1.8;
    margin-bottom: var(--space-xl);
}

.yacht-text p {
    margin-bottom: var(--space-md);
}

.yacht-cta {
    margin-top: var(--space-sm);
}

.yacht-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.yacht-actions .yacht-cta {
    margin-top: 0;
}


/* Feedback button: reversed (filled) version of the outline CTA. */

a.btn.btn--outline.yacht-cta--feedback {
    background: #fff;
    color: var(--color-dark);
    border: 1px solid #fff;
}

a.btn.btn--outline.yacht-cta--feedback:hover {
    background: transparent;
    color: #fff;
}


/* ============================================
   PORTS SECTION (Side-by-side layout)
   ============================================ */

.section--ports {
    background: linear-gradient(180deg, var(--color-white) 0%, #fff 100%);
    position: relative;
    overflow: hidden;
    padding-bottom: 100px;
}

.section--ports .container {
    position: relative;
    z-index: 1;
}


/* Side-by-side layout: sidebar left + map right */

.ports-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-2xl);
    align-items: start;
}


/* Left sidebar */

.ports-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    position: sticky;
    top: calc(var(--header-height) + var(--space-xl));
    padding: 30px 20px;
    background: #fbfbfb;
    height: 100%;
}

.ports-stats h4 {
    margin-bottom: 20px;
    color: #7a7a7a;
}


/* Bottom text below map */

.ports-bottom-text {
    margin-top: var(--space-2xl);
    text-align: center;
}

.ports-bottom-text p {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    line-height: 1.8;
    /* max-width: 900px; */
    margin: 0 auto;
    font-style: italic;
}


/* Right map container */

.ports-map-container {
    position: relative;
}


/* Port Stats - vertical in sidebar */

.ports-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.ports-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-md);
    text-align: left;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.ports-stat__icon {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(253, 133, 31, 0.10);
    color: var(--color-orange, #e67e22);
    box-shadow: inset 0 0 0 1px rgba(253, 133, 31, 0.18);
}

.ports-stat__icon svg {
    display: block;
}

.ports-stat__number {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-orange);
    line-height: 1;
    text-shadow: 0 2px 10px rgba(253, 133, 31, 0.15);
}

.ports-stat__label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: var(--space-xs);
}


/* Map Header (reference image style) */

.map-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xs);
}

.map-header__line {
    flex: 1;
    max-width: 200px;
    height: 1px;
    background: var(--color-gray-300);
}

.map-header__sub {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-orange);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.map-header__title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-gray-900);
    letter-spacing: 2px;
    margin-bottom: var(--space-xl);
}


/* Map Footer Line */


/* Map Container */

.ports-map {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: visible;
    /* border: 1px solid var(--color-gray-200);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); */
    --glow-x: 50%;
    --glow-y: 50%;
}


/* Map glow overlay (mouse-tracking) */

.map-glow-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(300px circle at var(--glow-x) var(--glow-y), rgba(253, 133, 31, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ports-map:hover .map-glow-overlay {
    opacity: 1;
}

.saudi-map {
    position: absolute;
    inset: 3%;
    width: 94%;
    height: 94%;
    z-index: 2;
    overflow: hidden;
}

.map-outline {
    transition: all 0.5s ease;
}

.map-label--sea {
    font-family: var(--font-body);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.map-label--region {
    font-family: var(--font-body);
    text-transform: uppercase;
}

.map-label--country {
    font-family: var(--font-body);
    text-transform: uppercase;
}


/* Port Markers - Region-colored dots with white ring */

.port-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 5;
    cursor: pointer;
    border: none;
    background: none;
    padding: 10px;
}

.port-marker__dot {
    display: block;
    width: 16px;
    height: 16px;
    background: #DC2626;
    border-radius: 50%;
    border: 3px solid var(--color-white);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}


/* Region-specific default dot colors */

.port-marker[data-region="red-sea"] .port-marker__dot {
    background: #DC2626;
}

.port-marker[data-region="arabian-gulf"] .port-marker__dot {
    background: #2563EB;
}

.port-marker[data-region="inland"] .port-marker__dot {
    background: #fd851f;
}

.port-marker__pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: rgba(220, 38, 38, 0.08);
    border-radius: 50%;
    animation: portPulse 3s ease-in-out infinite;
    z-index: 1;
}


/* Region-specific pulse colors */

.port-marker[data-region="red-sea"] .port-marker__pulse {
    background: rgba(220, 38, 38, 0.08);
}

.port-marker[data-region="arabian-gulf"] .port-marker__pulse {
    background: rgba(37, 99, 235, 0.08);
}

.port-marker[data-region="inland"] .port-marker__pulse {
    background: rgba(253, 133, 31, 0.08);
}

@keyframes portPulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}


/* Jeddah hub marker — blinking effect */

.port-marker--hub .port-marker__dot {
    animation: hubBlink 1.5s ease-in-out infinite;
}

.port-marker--hub .port-marker__pulse {
    width: 40px;
    height: 40px;
    animation: hubRing 2s ease-out infinite;
    background: rgba(220, 38, 38, 0.12);
}

@keyframes hubBlink {
    0%,
    100% {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 12px 4px rgba(220, 38, 38, 0.6);
        transform: scale(1.25);
    }
}

@keyframes hubRing {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
    }
}


/* Labels - always visible by default, positioned below dot */

.port-marker__label {
    position: absolute;
    top: calc(100% - 2px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    color: var(--color-gray-800);
    background: transparent;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.6);
}


/* Hover: dot scales up, keeps region color */

.port-marker:hover .port-marker__dot {
    border-color: var(--color-white);
    transform: scale(1.3);
}

.port-marker[data-region="red-sea"]:hover .port-marker__dot {
    background: #DC2626;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.4);
}

.port-marker[data-region="arabian-gulf"]:hover .port-marker__dot {
    background: #2563EB;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.4);
}

.port-marker[data-region="inland"]:hover .port-marker__dot {
    background: #fd851f;
    box-shadow: 0 3px 10px rgba(253, 133, 31, 0.4);
}

.port-marker:hover .port-marker__label {
    font-size: 11px;
}

.port-marker[data-region="red-sea"]:hover .port-marker__label {
    color: #DC2626;
}

.port-marker[data-region="arabian-gulf"]:hover .port-marker__label {
    color: #2563EB;
}

.port-marker[data-region="inland"]:hover .port-marker__label {
    color: #fd851f;
}


/* Dimmed state for filtered markers */

.port-marker.dimmed {
    opacity: 0.15;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.port-marker.dimmed .port-marker__label {
    opacity: 0;
}


/* Highlighted state for matching markers on tab switch - region colors */

.port-marker.highlighted .port-marker__dot {
    border-color: var(--color-white);
    transform: scale(1.15);
}

.port-marker.highlighted[data-region="red-sea"] .port-marker__dot {
    background: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.port-marker.highlighted[data-region="arabian-gulf"] .port-marker__dot {
    background: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.port-marker.highlighted[data-region="inland"] .port-marker__dot {
    background: #fd851f;
    box-shadow: 0 0 0 3px rgba(253, 133, 31, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.port-marker.highlighted .port-marker__label {
    opacity: 1;
    font-weight: 800;
}

.port-marker.highlighted[data-region="red-sea"] .port-marker__label {
    color: #DC2626;
}

.port-marker.highlighted[data-region="arabian-gulf"] .port-marker__label {
    color: #2563EB;
}

.port-marker.highlighted[data-region="inland"] .port-marker__label {
    color: #fd851f;
}


/* Port Popups */

.port-popup {
    position: absolute;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.port-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.port-popup__inner {
    background: var(--color-white);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    min-width: 280px;
    max-width: 360px;
    border-top: 3px solid var(--color-orange);
}

.port-popup__address {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.port-popup__contact {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.port-popup__contact a {
    color: var(--color-sky);
    text-decoration: none;
    transition: color 0.2s ease;
}

.port-popup__contact a:hover {
    color: var(--color-orange);
}

.port-popup__detail {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.port-popup__detail:last-child {
    margin-bottom: 0;
}

.port-popup__detail a {
    color: var(--color-sky);
    text-decoration: none;
    transition: color 0.2s ease;
}

.port-popup__detail a:hover {
    color: var(--color-orange);
}

.port-popup__icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-sky);
}

.port-popup__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.port-popup__title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #DC2626;
    border-radius: 50%;
    flex-shrink: 0;
}

.port-popup__desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.port-popup__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-orange);
    transition: gap 0.25s ease;
}

.port-popup__link:hover {
    gap: 10px;
    color: var(--color-orange-dark);
}


/* Ports Filter */

.ports-filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ports-filter__heading {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-xs);
}

.ports-filter__btn {
    padding: 10px 16px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.ports-filter__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
}

.ports-filter__btn:hover,
.ports-filter__btn.active {
    border-color: var(--color-orange);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(253, 133, 31, 0.2);
}

.ports-filter__btn:hover::before,
.ports-filter__btn.active::before {
    opacity: 1;
}

.ports-filter__btn span {
    position: relative;
    z-index: 1;
}


/* Region Legend */

.ports-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ports-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.ports-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #DC2626;
    border: 2px solid var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.ports-legend__dot--gulf {
    background: #2563EB;
}

.ports-legend__dot--inland {
    background: var(--color-orange);
}


/* ============================================
   COMBINED SECTION: SHARAF + DOCUMENTS + CTA
   ============================================ */

.section--combined {
    background: var(--color-gray-50);
    padding-top: var(--space-3xl);
    padding-bottom: 0;
    overflow: visible;
}


/* Sharaf banner container — sits above the docs-cta row */

.section--combined>.container {
    position: relative;
    z-index: 10;
}


/* ── Documents + CTA Row (two columns, full-width) ── */

.docs-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
    margin-top: -60px;
    position: relative;
    z-index: 1;
}


/* Left column – Documents */

.docs-cta-row__left {
    background: var(--color-white);
    display: flex;
    align-items: center;
}

.docs-cta-row__left-inner {
    padding: calc(var(--space-3xl) + 60px) var(--space-4xl) var(--space-3xl) var(--space-3xl);
    max-width: 640px;
    margin-left: auto;
    width: 100%;
}

.docs-cta-row__left .section-header {
    margin-bottom: var(--space-2xl);
}

.docs-cta-row__left .section-title {
    font-size: var(--font-size-3xl);
}


/* Documents list (stacked) */

.documents-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.document-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    position: relative;
}

.document-card:hover {
    border-color: var(--color-orange);
    box-shadow: var(--shadow-md);
}

.document-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-orange-10);
    border-radius: var(--radius-md);
}

.document-card__content {
    flex: 1;
    min-width: 0;
}

.document-card__type {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.document-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-top: 2px;
}

.document-card__desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: 2px;
    line-height: 1.5;
}

.document-card__download {
    flex-shrink: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #000000;
    background: #efefef;
    border: 0;
}


/* Right column – CTA */

.docs-cta-row__right {
    background: linear-gradient(160deg, rgb(10 37 64) 0%, rgb(10 37 64) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}


/* Curved left edge */

.docs-cta-row__right-curve {
    position: absolute;
    top: -5%;
    bottom: -5%;
    left: -60px;
    width: 120px;
    background: var(--color-white);
    border-radius: 0 50% 50% 0;
    z-index: 1;
    display: none;
}

.docs-cta-row__right-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: calc(var(--space-3xl) + 60px) var(--space-3xl) var(--space-3xl);
    max-width: 520px;
}


/* CTA headline & text */

.cta-headline {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 var(--space-sm);
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

.cta-word {
    display: inline-block;
}

.cta-subtext {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    line-height: 1.65;
    max-width: 700px;
}


/* CTA Button — light outlined pill on the blue banner */

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-orange);
    color: var(--color-white);
    border: 1px solid var(--color-orange);
    box-shadow: none;
    white-space: nowrap;
    transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.cta-btn svg {
    transition: transform var(--transition-fast);
}

.cta-btn:hover {
    background: var(--color-orange-dark);
    border-color: var(--color-orange-dark);
    color: var(--color-white);
    transform: translateY(-2px);
}

.cta-btn:hover svg {
    transform: translateX(3px);
}


/* ============================================
   RESOURCES / DOCUMENTS SECTION (home page)
   Used in template-parts/home-docs-cta.php
   ============================================ */

.section--docs {
    position: relative;
    background-color: #f4f8fe;
    padding: var(--space-4xl) 0;
    overflow: hidden;
    display: none;
}

section.section.section--gray.about-page-leadership {
    display: none;
}

svg.ym-promo-strip__waves {
    display: none;
}


/* Animated wave band — tileable SVG (~1 KB) scrolls right -> left.
   Uses transform on a wide layer so the animation is GPU-composited
   (no paint/layout work per frame) and won't fight Lenis smooth scroll.
   We translate by exactly one tile width (800px) so the loop is seamless
   on any viewport. */

.section--docs::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% + 800px);
    height: 180px;
    background-image: url("../images/resources-waves.svg");
    background-repeat: repeat-x;
    background-position: 0 bottom;
    background-size: 800px 180px;
    animation: gp-docs-waves-slide 30s linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
    z-index: 0;
}

.section--docs>.container {
    position: relative;
    z-index: 1;
}

@keyframes gp-docs-waves-slide {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-800px, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .section--docs::after {
        animation: none;
        will-change: auto;
    }
}

.docs-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 2fr;
    gap: var(--space-3xl);
    align-items: center;
}

.docs-row__intro {
    max-width: 360px;
}

.docs-row__intro .section-label--left {
    justify-content: flex-start;
    margin-bottom: var(--space-md);
}

.docs-row__intro .section-label--left .section-label__text {
    color: var(--color-orange);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.docs-row__title {
    font-size: clamp(1.9rem, 2.6vw, 2.4rem);
    line-height: 1.18;
    /* color: var(--color-navy, #0a2540); */
    margin: 0 0 var(--space-md);
    font-weight: 700;
}

.docs-row__title .text-accent {
    /* color: var(--color-navy, #0a2540); */
}

.docs-row__lead {
    margin: 0 0 var(--space-lg);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-gray-600, #6b7280);
}

.docs-row__rule {
    display: block;
    width: 56px;
    height: 3px;
    background: var(--color-orange);
    border-radius: 2px;
}

.docs-row__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}


/* Resource card */

.resource-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: var(--space-xl);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 6px 20px rgba(10, 37, 64, 0.06);
    text-align: left;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.resource-card:hover {
    transform: translateY(-3px);
    border-color: rgba(74, 144, 217, 0.4);
    box-shadow: 0 14px 30px rgba(10, 37, 64, 0.10);
}

.resource-card__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E8F1FB;
    color: #4A90D9;
    border-radius: 12px;
    margin-bottom: 6px;
}

.resource-card__type {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-orange);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.resource-card__title {
    margin: 2px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-navy, #0a2540);
    line-height: 1.35;
}

.resource-card__desc {
    margin: 4px 0 0;
    font-size: 0.92rem;
    color: var(--color-gray-500, #6b7280);
    line-height: 1.55;
}

.resource-card__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4A90D9;
    text-decoration: none;
}

.resource-card__status svg {
    flex-shrink: 0;
}

.resource-card__status--ready:hover {
    color: var(--color-orange);
}


/* Tablet */

@media (max-width: 1024px) {
    .docs-row {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .docs-row__intro {
        max-width: 100%;
    }
}


/* Mobile */

@media (max-width: 640px) {
    .section--docs {
        padding-top: var(--space-3xl);
    }
    .docs-row__cards {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .resource-card {
        padding: var(--space-lg);
    }
}


/* ============================================
   CONTACT SECTION
   ============================================ */


/* ---- Contact Section (Modern Layout) ---- */

.section--contact {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #0a2540 0%, #0d2c4d 55%, #08203a 100%);
    color: #fff;
    /* Fit the whole section within one screen (desktop), content centred. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Subtle decorative glow */

.contact-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 10% 16%, rgba(253, 133, 31, 0.12) 0%, transparent 42%), radial-gradient(circle at 92% 84%, rgba(255, 255, 255, 0.05) 0%, transparent 45%);
}

.section--contact .container {
    position: relative;
    z-index: 1;
}


/* Three-column layout: info | form | map */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: var(--space-2xl);
    align-items: stretch;
}


/* ── Left: contact info ── */

.contact-info {
    display: flex;
    flex-direction: column;
}

.contact-info__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--color-orange);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.contact-info__heading {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 600;
    line-height: 1.12;
}

.contact-info__lead {
    margin: 0 0 var(--space-xl);
    max-width: 38ch;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.7;
}

.contact-info__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-info__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact-info__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--color-orange);
    color: #fff;
}

.contact-info__icon svg {
    width: 22px;
    height: 22px;
}

.contact-info__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contact-info__label {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.contact-info__value {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    line-height: 1.55;
}

.contact-info__value a {
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

.contact-info__value a:hover {
    color: var(--color-orange);
}


/* Keep each phone number intact while allowing the comma-separated list to wrap. */

.contact-info-card__value a,
.contact-strip__value a,
.footer-contact__item a {
    white-space: nowrap;
}

.contact-info__meta {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}


/* ── Centre: white form card ── */

.contact-form-panel {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    padding: var(--space-2xl);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.contact-form-panel__title {
    margin: 0 0 var(--space-lg);
    color: #111827;
    font-size: 1.4rem;
    font-weight: 600;
}

.contact-form-panel .wpcf7-form p {
    margin: 0 0 14px;
}

.contact-form-panel .wpcf7-form label {
    display: block;
    font-size: 0.85rem;
    color: #4b5563;
    margin-bottom: 6px;
}

.contact-form-panel .wpcf7-form input[type="text"],
.contact-form-panel .wpcf7-form input[type="email"],
.contact-form-panel .wpcf7-form input[type="tel"],
.contact-form-panel .wpcf7-form input[type="url"],
.contact-form-panel .wpcf7-form textarea,
.contact-form-panel .wpcf7-form select {
    width: 100%;
    padding: 0.8rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #111827;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.contact-form-panel .wpcf7-form input::placeholder,
.contact-form-panel .wpcf7-form textarea::placeholder {
    color: #9ca3af;
}

.contact-form-panel .wpcf7-form input:focus,
.contact-form-panel .wpcf7-form textarea:focus,
.contact-form-panel .wpcf7-form select:focus {
    border-color: var(--color-orange);
    background: #fff;
}

.contact-form-panel .wpcf7-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form-panel .wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 6px;
    padding: 0.9rem 2rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-orange);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.contact-form-panel .wpcf7-form input[type="submit"]:hover {
    background: var(--color-orange-dark);
    transform: translateY(-2px);
}

.contact-form-panel .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 0.78rem;
    color: #dc2626;
}

.contact-form-panel .wpcf7-response-output {
    margin: 14px 0 0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #374151;
}


/* ── Right: map ── */

.contact-map {
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
    min-height: 100%;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 440px;
}

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }
    .contact-map {
        grid-column: 1 / -1;
    }
    .contact-map iframe {
        min-height: 320px;
    }
}

@media (max-width: 680px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}


/* ============================================
   CONTACT US PAGE (page-contact.php)
   Standalone /contact-us/ page. Light-theme design with white cards
   on a near-white section background. BEM classes here are unique
   to this template and don't collide with the home contact section.
   ============================================ */


/* The home-page version of .section--contact centres its content with
   min-height: 100vh + flex and a dark navy gradient. The standalone
   contact-us page is a light layout that stacks several rows, so we
   reset all of that here. */

.page-template-page-contact .section--contact {
    min-height: 0;
    display: block;
    padding: var(--space-3xl) 0;
    background: linear-gradient(180deg, #f4f7fb 0%, #ffffff 100%);
    color: var(--color-gray-900);
}


/* Hide the decorative dark shapes — they only made sense on navy. */

.page-template-page-contact .contact-bg,
.page-template-page-contact .contact-bg__shape {
    display: none;
}


/* Optional section header (when admin sets label/heading/text) */

.page-template-page-contact .contact-header {
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.page-template-page-contact .contact-header .section-title {
    color: var(--color-gray-900);
    margin-top: 8px;
}

.page-template-page-contact .contact-header .section-subtitle {
    color: var(--color-gray-600);
    max-width: 680px;
    margin: 12px auto 0;
}


/* ── Info-row: 3 white cards per row ── */

.contact-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.contact-info-row--offices {
    margin-bottom: var(--space-lg);
}


/* White card — icon on top centre, then label, then value */

.contact-info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: var(--space-xl);
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    text-decoration: none;
    color: var(--color-gray-900);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

a.contact-info-card {
    cursor: pointer;
}

.contact-info-card:hover,
.contact-info-card:focus-visible {
    border-color: rgba(253, 133, 31, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.10);
}


/* Pale circular icon tile with the orange brand inside */

.contact-info-card__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(253, 133, 31, 0.12);
    color: var(--color-orange);
    margin-bottom: 4px;
    flex-shrink: 0;
}

.contact-info-card__icon svg {
    width: 24px;
    height: 24px;
}


/* Card title (city / label) */

.contact-info-card__label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.25;
}


/* Card body (address / phone / email) */

.contact-info-card__value {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-gray-500);
    line-height: 1.55;
}

.contact-info-card__value a {
    color: var(--color-gray-500);
    text-decoration: none;
}

.contact-info-card__value a:hover {
    color: var(--color-orange);
}


/* ── Head-office strip ──
   Single wide white bar shown directly under the page banner: orange
   accent edge, circular building icon, city + role, then address /
   phone / email inline. */

.contact-strip-section {
    background: linear-gradient(180deg, #f4f7fb 0%, #f4f7fb 100%);
    padding: var(--space-2xl) 0 0;
}

.contact-info-row--strip {
    display: block;
    margin-bottom: 0;
}

.contact-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 20px 34px 20px 36px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}


/* Orange accent along the left edge */

.contact-strip::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: var(--color-orange);
    border-radius: 16px 0 0 16px;
}


/* City + role block */

.contact-strip__brand {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.contact-strip__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(253, 133, 31, 0.12);
    color: var(--color-orange);
    flex-shrink: 0;
}

.contact-strip__icon svg {
    width: 24px;
    height: 24px;
}

.contact-strip__city {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-navy-dark);
    line-height: 1.2;
}

.contact-strip__role {
    display: block;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--color-gray-500);
    line-height: 1.4;
    margin-top: 2px;
}


/* Thin vertical rule between the city block and the details */

.contact-strip__divider {
    width: 1px;
    align-self: stretch;
    margin: 6px 0;
    background: rgba(15, 23, 42, 0.10);
    flex-shrink: 0;
}


/* Address / phone / email details */

.contact-strip__items {
    display: flex;
    align-items: center;
    gap: 36px;
    flex: 1 1 auto;
    min-width: 0;
}

.contact-strip__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.contact-strip__item svg {
    width: 20px;
    height: 20px;
    color: var(--color-orange);
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-strip__item--address {
    flex: 1 1 auto;
    min-width: 0;
}

.contact-strip__item--phone,
.contact-strip__item--email {
    flex: 0 0 auto;
}

.contact-strip__value {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy-dark);
    line-height: 1.45;
}

.contact-strip__item--address .contact-strip__value {
    font-weight: 400;
    color: var(--color-gray-700);
}

.contact-strip__value a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.contact-strip__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-gray-500);
    line-height: 1.4;
    margin-top: 2px;
}

a.contact-strip__item:hover .contact-strip__value,
.contact-strip__value a:hover {
    color: var(--color-orange);
}


/* ── Form + Map row ── */

.contact-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: stretch;
    margin-top: 80px;
}


/* Form panel — white card matching the info cards */

.contact-form-wrap {
    background: #fff;
    color: #111827;
    padding: var(--space-2xl);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.contact-form-card__title {
    margin: 0 0 var(--space-lg);
    color: #111827;
    font-size: 1.15rem;
    font-weight: 700;
}

.contact-form-wrap .wpcf7-form p {
    margin: 0 0 14px;
}

.contact-form-wrap .wpcf7-form label {
    display: block;
    font-size: 0.85rem;
    color: #4b5563;
    margin-bottom: 6px;
}

.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"],
.contact-form-wrap .wpcf7-form input[type="tel"],
.contact-form-wrap .wpcf7-form input[type="url"],
.contact-form-wrap .wpcf7-form textarea,
.contact-form-wrap .wpcf7-form select {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #111827;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.contact-form-wrap .wpcf7-form input::placeholder,
.contact-form-wrap .wpcf7-form textarea::placeholder {
    color: #9ca3af;
}

.contact-form-wrap .wpcf7-form input:focus,
.contact-form-wrap .wpcf7-form textarea:focus,
.contact-form-wrap .wpcf7-form select:focus {
    border-color: var(--color-orange);
    background: #fff;
}

.contact-form-wrap .wpcf7-form textarea {
    min-height: 130px;
    resize: vertical;
}

.contact-form-wrap .wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 6px;
    padding: 0.95rem 2rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-orange);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.contact-form-wrap .wpcf7-form input[type="submit"]:hover {
    background: var(--color-orange-dark);
    transform: translateY(-2px);
}

.contact-form-wrap .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 0.78rem;
    color: #dc2626;
}

.contact-form-wrap .wpcf7-response-output {
    margin: 14px 0 0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #374151;
}


/* Map panel — same light-card style as the form */

.contact-map-wrap {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    background: #fff;
    min-height: 440px;
}

.contact-map-wrap .contact-map {
    width: 100%;
    height: 100%;
    line-height: 0;
}

.contact-map-wrap .contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 440px;
    border: 0;
}


/* Responsive */

@media (max-width: 1200px) {
    .contact-strip__items {
        flex-wrap: wrap;
        gap: 18px 28px;
    }
    .contact-strip__item--address {
        flex: 1 1 100%;
    }
}

@media (max-width: 1024px) {
    .contact-info-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-strip {
        align-items: flex-start;
        gap: 20px;
    }
    .contact-strip__brand {
        padding-top: 2px;
    }
    .contact-main {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    .contact-map-wrap,
    .contact-map-wrap .contact-map iframe {
        min-height: 360px;
    }
}

@media (max-width: 782px) {
    .contact-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 22px 22px 22px 26px;
    }
    .contact-strip__divider {
        width: 100%;
        height: 1px;
        align-self: auto;
        margin: 0;
    }
    .contact-strip__items {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .contact-info-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .contact-info-card {
        padding: var(--space-lg);
    }
    .contact-strip-section {
        padding-top: var(--space-xl);
    }
    .contact-strip__icon {
        width: 48px;
        height: 48px;
    }
    .contact-strip__city {
        font-size: 1.15rem;
    }
    .contact-form-wrap {
        padding: var(--space-xl);
    }
    .contact-map-wrap,
    .contact-map-wrap .contact-map iframe {
        min-height: 280px;
    }
}


/* ============================================
   FOOTER (Light Theme)
   ============================================ */

.site-footer {
    background: #F9FAFB;
    color: var(--color-gray-600);
    position: relative;
}


/* Purple gradient wave divider at top */

.footer-wave-divider {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    display: none;
}

.footer-wave-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

.footer-main {
    padding: var(--space-4xl) 0 var(--space-3xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr;
    gap: var(--space-3xl);
}

.footer-logo {
    margin-bottom: var(--space-lg);
}

.footer-logo .site-logo-text {
    font-size: var(--font-size-xl);
    color: var(--color-gray-900);
}

.footer-description {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
    color: var(--color-gray-500);
}


/* Certification / membership logos in the footer's first column. */

.footer-cert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.footer-cert__logo {
    height: 48px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    /* background: #fff; */
    padding: 6px 10px;
    border-radius: var(--radius-md);
}


/* "Follow Us" heading and the social icons sit on one line. */

.footer-social-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    align-items: baseline;
}

.footer-social a {
    position: relative;
    top: 5px;
}

.footer-heading--social {
    margin-bottom: 0;
}

.footer-social {
    display: flex;
    gap: var(--space-sm);
}

.social-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: var(--color-gray-50); */
    /* border: 1px solid var(--color-gray-200); */
    border-radius: var(--radius-md);
    color: var(--color-gray-500);
    transition: all var(--transition-base);
}

.topbar-right a:hover {
    background: transparent;
}

.social-link:hover {
    background: #fff;
    border-color: var(--color-orange);
    color: var(--color-white);
    transform: translateY(-3px);
    /* box-shadow: 0 4px 15px rgba(253, 133, 31, 0.3); */
}


/* Heading with orange underline */

.footer-heading {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-lg);
    position: relative;
    padding-bottom: var(--space-md);
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--color-orange);
    border-radius: 1px;
}

.footer-menu li {
    margin-bottom: var(--space-sm);
}

.footer-menu a {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-menu a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--color-orange);
    transition: width var(--transition-base);
}

.footer-menu a:hover {
    color: var(--color-orange);
}

.footer-menu a:hover::before {
    width: 12px;
}

.footer-contact__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.footer-logo img {
    max-width: 230px;
}

.footer-contact__item svg {
    flex-shrink: 0;
    color: var(--color-orange);
    margin-top: 2px;
}

.footer-contact__item a {
    color: var(--color-gray-600);
}

.footer-contact__item a:hover {
    color: var(--color-orange);
}


/* Footer Bottom */

.footer-bottom {
    border-top: 1px solid var(--color-gray-200);
    padding: var(--space-lg) 0;
}

.footer-bottom__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright,
.footer-credits {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}

.footer-legal-menu {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-legal-menu a {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    transition: color 0.2s ease;
}

.footer-legal-menu a:hover {
    color: var(--color-orange);
}


/* ============================================
   SCROLL TO TOP
   ============================================ */

.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-orange);
    color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
    z-index: 99;
    cursor: pointer;
    border: none;
}

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

.scroll-to-top:hover {
    background: var(--color-orange-light);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(253, 133, 31, 0.3);
}


/* ============================================
   PAGE HEADER (Archives / Singles)
   ============================================ */

.page-header {
    position: relative;
    display: flex;
    align-items: center;
    /* All inner-page banners share the service-detail banner height.
       (The home hero is .hero-section, not .page-header, so it's unaffected.) */
    min-height: clamp(330px, 39.6vw, 550px);
    padding: var(--space-4xl) 0 var(--space-3xl);
    margin-top: var(--header-total-height);
    background-color: var(--color-sky);
    background-size: cover;
    background-position: center;
}

.page-header>.container {
    width: 100%;
}

.page-header__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.10) 32%, rgba(10, 37, 64, 0.10) 50%, rgba(10, 37, 64, 0.05) 72%, rgba(10, 37, 64, 0.05) 100%);
}


/* ── Inner-page banner slider (JS-injected when 2+ banner images) ──
   Layers sit behind the overlay (which keeps the copy legible) and content. */

.page-header__slides {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.page-header__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1);
    /* will-change: transform;
    transition: opacity 1s ease; */
}


/* Same slow zoom-only (Ken Burns) effect as the homepage hero slider: the
   active banner crossfades in and then slowly zooms the whole time it is on
   screen, so each image change is a smooth dissolve with a subtle push-in. */

.page-header__slide.is-active {
    opacity: 1;
    animation: gp-hero-kenburns 9s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .page-header__slide.is-active {
        animation: none;
    }
}


/* Keep the service banner's overlay above the injected layers. */

.page-header--service .page-header__slides {
    z-index: 0;
}


/* Controls cluster — compact, bottom-right, clear of the copy and breadcrumb. */

.page-header__slider-nav {
    position: absolute;
    right: clamp(16px, 4vw, 40px);
    bottom: 74px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header__slider-arrow {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.page-header__slider-arrow:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    transform: scale(1.08);
}

.page-header__slider-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.page-header__slider-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-header__slider-dot.is-active {
    width: 26px;
    background: var(--color-orange);
}

@media (max-width: 640px) {
    .page-header__slider-nav {
        bottom: 66px;
        right: 16px;
        gap: 8px;
    }
    .page-header__slider-arrow {
        width: 34px;
        height: 34px;
    }
}

.page-header__content {
    position: relative;
    z-index: 2;
    max-width: 614px;
}

.page-header__title {
    font-size: 56px;
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.page-header__subtitle {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255);
    font-weight: 400;
}

.page-header__badge {
    display: inline-block;
    padding: 4px 14px;
    background: var(--color-orange);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

.breadcrumbs {
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-sm);
}

.breadcrumbs a {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumbs a:hover {
    color: var(--color-orange);
}

.breadcrumb-sep {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 var(--space-sm);
}

.breadcrumb-current {
    color: var(--color-orange);
}


/* Breadcrumb bar pinned to the bottom edge of a banner. */

.page-header__crumb {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: var(--space-md) 0;
    text-align: left;
    background: linear-gradient(0deg, rgba(6, 24, 44, 0.55) 0%, rgba(6, 24, 44, 0) 100%);
    /*     border-top: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(2px); */
}

.page-header__crumb .breadcrumbs {
    margin: 0;
}


/* Last word of the service-detail banner title in the brand accent. */

.svc-hero__title-accent {
    color: #fd851f;
}


/* Reserve room at the bottom so the banner copy clears the crumb bar
   (applies to every banner variant that opts in with .page-header--has-crumb). */

.page-header.page-header--has-crumb {
    padding-bottom: var(--space-4xl);
}


/* ============================================
   SINGLE PAGE LAYOUT
   ============================================ */

.single-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--space-3xl);
    align-items: start;
}

.single-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
    align-self: start;
}

.entry-content {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--color-gray-700);
}

.entry-content h2 {
    margin: var(--space-2xl) 0 var(--space-md);
}

.entry-content h3 {
    margin: var(--space-xl) 0 var(--space-md);
}

.entry-content p {
    margin-bottom: var(--space-lg);
}

.entry-content ul,
.entry-content ol {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-xl);
}

.entry-content li {
    margin-bottom: var(--space-sm);
    list-style: disc;
}

.entry-content img {
    border-radius: var(--radius-md);
    margin: var(--space-xl) 0;
}


/* Sidebar */

.sidebar-widget {
    background: var(--color-gray-50);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.sidebar-widget__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-sky);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-sky);
}

.sidebar-services-list li a {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-200);
    transition: all var(--transition-fast);
}

.sidebar-services-list li a:hover {
    color: var(--color-orange);
    padding-left: var(--space-sm);
}

.sidebar-cta {
    background: #0A2540;
    color: var(--color-white);
}

.sidebar-cta__title {
    color: var(--color-white);
}

.sidebar-cta p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-sm);
}


/* ============================================
   ARCHIVE GRIDS
   ============================================ */

.services-grid--archive {
    grid-template-columns: repeat(2, 1fr);
}

.service-card--archive .service-card__image {
    margin: calc(-1 * var(--space-2xl)) calc(-1 * var(--space-2xl)) var(--space-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

.service-card--archive .service-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.service-card--archive:hover .service-card__image img {
    transform: scale(1.05);
}

.ports-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.port-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
}

.port-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.port-card__image {
    position: relative;
    overflow: hidden;
}

.port-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.port-card:hover .port-card__image img {
    transform: scale(1.05);
}

.port-card__region {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    padding: 4px 12px;
    background: var(--color-orange);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.port-card__body {
    padding: var(--space-xl);
}

.port-card__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-sm);
}

.port-card__title a {
    color: var(--color-gray-900);
}

.port-card__title a:hover {
    color: var(--color-orange);
}

.port-card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
}

.port-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-orange);
}


/* ============================================
   ANIMATIONS (vanilla — [data-animate] driven by IntersectionObserver)
   ============================================ */


/* Initial state: hidden + offset. JS toggles .is-visible on enter. */

[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

[data-animate="fade"] {
    transform: none;
}

[data-animate="fade-up"] {
    transform: translateY(30px);
}

[data-animate="fade-down"] {
    transform: translateY(-30px);
}

[data-animate="fade-left"] {
    transform: translateX(30px);
}

[data-animate="fade-right"] {
    transform: translateX(-30px);
}

[data-animate="zoom-in"] {
    transform: scale(0.9);
}

[data-animate].is-visible {
    opacity: 1;
    transform: none;
}


/* Hero slide crossfade (replaces GSAP timeline). */

.hero-slide {
    opacity: 0;
    z-index: 1;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-slide.is-zooming {
    animation: gp-hero-kenburns 6s linear forwards;
}

@keyframes gp-hero-kenburns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}


/* Hero slide text entrance. JS adds .is-entered to animate in. */

.hero-slide__title {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.is-entered .hero-slide__title {
    clip-path: inset(0 0% 0 0);
}

.hero-slide__eyebrow,
.hero-slide__subtitle,
.hero-slide__btns {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.4s;
}

.hero-slide__subtitle {
    transition-delay: 0.55s;
}

.hero-slide__btns {
    transition-delay: 0.7s;
}

.hero-slide.is-entered .hero-slide__eyebrow,
.hero-slide.is-entered .hero-slide__subtitle,
.hero-slide.is-entered .hero-slide__btns {
    opacity: 1;
    transform: none;
}


/* Static hero entrance — JS adds .is-loaded to the section once
   DOMContentLoaded fires. */

.hero-section--static .hero-static__eyebrow,
.hero-section--static .hero-static__title,
.hero-section--static .hero-static__subtitle,
.hero-section--static .hero-static__actions,
.hero-section--static .hero-static__stats,
.hero-section--static .hero-route-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-section--static .hero-static__title {
    transition-duration: 0.7s;
}

.hero-section--static .hero-route-card {
    transform: translateY(14px) scale(0.98);
    transition-duration: 0.7s;
}

.hero-section--static.is-loaded .hero-static__eyebrow {
    transition-delay: 0.15s;
    opacity: 1;
    transform: none;
}

.hero-section--static.is-loaded .hero-static__title {
    transition-delay: 0.40s;
    opacity: 1;
    transform: none;
}

.hero-section--static.is-loaded .hero-static__subtitle {
    transition-delay: 0.70s;
    opacity: 1;
    transform: none;
    max-width: 620px;
}

.hero-section--static.is-loaded .hero-static__actions {
    transition-delay: 0.85s;
    opacity: 1;
    transform: none;
}

.hero-section--static.is-loaded .hero-static__stats {
    transition-delay: 1.05s;
    opacity: 1;
    transform: none;
}

.hero-section--static.is-loaded .hero-route-card {
    transition-delay: 0.60s;
    opacity: 1;
    transform: none;
}

.hero-trust__item {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-trust.is-visible .hero-trust__item {
    opacity: 1;
    transform: none;
}


/* Generic "section entrance" cards — JS adds .is-visible via IO. */

.contact-info-row .contact-info-card,
.contact-info-row--strip .contact-strip,
.contact-form-wrap,
.contact-map-wrap,
.section--yacht .yacht-tag,
[data-footer-col] {
    opacity: 1;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-info-row.is-visible .contact-info-card,
.contact-info-row--strip.is-visible .contact-strip,
.contact-form-wrap.is-visible,
.contact-map-wrap.is-visible,
.section--yacht.is-yacht-visible .yacht-tag,
[data-footer-col].is-visible {
    opacity: 1;
    transform: none;
}


/* Stagger via inline --i (set by JS) */

.contact-info-row.is-visible .contact-info-card {
    transition-delay: calc(var(--i, 0) * 0.12s);
}

.section--yacht.is-yacht-visible .yacht-tag {
    transition-delay: calc(var(--i, 0) * 0.08s);
}

[data-footer-col].is-visible {
    transition-delay: calc(var(--i, 0) * 0.1s);
}


/* Floating ambient particles (replaces GSAP yoyo tweens). */

.hero-particle-field .particle,
.cta-particle-field .particle {
    animation: gp-particle-drift var(--p-dur, 6s) ease-in-out infinite alternate;
    animation-delay: var(--p-delay, 0s);
}

@keyframes gp-particle-drift {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(var(--p-x, 0px), var(--p-y, -30px));
    }
}


/* Yacht & Marine hero particles drift away then loop. */

.ym-hero-particles span {
    animation: gp-ym-particle var(--p-dur, 5s) ease-out infinite;
    animation-delay: var(--p-delay, 0s);
}

@keyframes gp-ym-particle {
    0% {
        transform: translate(0, 0);
        opacity: var(--p-op, 0.2);
    }
    100% {
        transform: translate(var(--p-x, 0), var(--p-y, -60px));
        opacity: 0;
    }
}


/* Contact background shapes float (replaces GSAP yoyo). */

.contact-bg__shape {
    animation: gp-contact-shape-float var(--shape-dur, 8s) ease-in-out infinite alternate;
}

@keyframes gp-contact-shape-float {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(var(--shape-x, 10px), var(--shape-y, -20px));
    }
}


/* Yacht/Marine list-item entrance (IO) */

.ym-service-list li,
.ym-event-item,
.ym-service-card,
.ym-hero-badge {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ym-event-item {
    transform: translateX(-20px);
}

.ym-service-card {
    transform: translateY(40px);
    transition-duration: 0.6s;
}

.ym-service-list.is-visible li,
.ym-events-list.is-visible .ym-event-item,
.ym-service-card.is-visible,
.ym-hero-badges.is-visible .ym-hero-badge {
    opacity: 1;
    transform: none;
}

.ym-service-list.is-visible li {
    transition-delay: calc(var(--i, 0) * 0.06s);
}

.ym-events-list.is-visible .ym-event-item {
    transition-delay: calc(var(--i, 0) * 0.08s);
}

.ym-hero-badges.is-visible .ym-hero-badge {
    transition-delay: calc(var(--i, 0) * 0.1s + 0.5s);
}

.ym-service-card.is-visible {
    transition-delay: calc(var(--i, 0) * 0.15s);
}


/* Services slider track entrance + autoplay progress bar. */

#services-track {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#services-slider.is-visible #services-track {
    opacity: 1;
    transform: translateY(0);
}

#services-progress-fill {
    transition: width linear;
}


/* Services showcase — scroll-driven without pin. Visual transitions
   are already declared on .svc-showcase__item / .svc-showcase__stage-img
   higher up in this file; nothing extra needed here. */


/* ============================================
   ADMIN STYLES (used in frontend too)
   ============================================ */

.no-results {
    text-align: center;
    padding: var(--space-4xl) 0;
}

.no-results h2 {
    margin-bottom: var(--space-md);
}

.pagination {
    margin-top: var(--space-3xl);
    display: flex;
    justify-content: center;
}

.pagination .nav-links {
    display: flex;
    gap: var(--space-sm);
}

.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    font-weight: 500;
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
    transition: all var(--transition-fast);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-white);
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
     :root {
        --topbar-height: 0px;
        --header-total-height: var(--header-height);
    }
    /* Hide topbar below 1200px */
    .site-topbar {
        display: none;
    }
    .site-header {
        top: 0;
    }
    /* Tighten nav spacing to prevent overflow */
    .primary-menu>.menu-item>a {
        padding: var(--space-sm) var(--space-md);
    }
    .header-cta {
        padding: 0.5rem 1rem;
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 1024px) {
     :root {
        --font-size-6xl: 3rem;
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
    }
    /* Hero: tablet adjustments */
    .hero-slide__text {
        max-width: 600px;
    }
    .about-grid,
    .yacht-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    /* Ports: sidebar narrower on tablet */
    .ports-layout {
        grid-template-columns: 240px 1fr;
        gap: var(--space-xl);
    }
    /* Services slider: 2 visible on tablet */
    .services-slide {
        flex: 0 0 calc((100% - 24px) / 2);
    }
    .services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-lg);
    }
    .services-header__right {
        align-self: flex-end;
    }
    /* Contact: responsive — base layout in the contact-us block above
       already handles columns at <=1024px and <=600px. */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl);
    }
    .single-grid {
        grid-template-columns: 1fr;
    }
    .single-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .ports-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cta-headline {
        font-size: var(--font-size-3xl);
    }
    .docs-cta-row {
        grid-template-columns: 1fr;
        margin-top: 0;
    }
    .docs-cta-row__left-inner {
        padding-top: var(--space-3xl);
    }
    .docs-cta-row__right-inner {
        padding-top: var(--space-3xl);
    }
    .docs-cta-row__right-curve {
        display: none;
    }
    .docs-cta-row__right {
        min-height: 360px;
    }
}

@media (max-width: 768px) {
     :root {
        --font-size-6xl: 2.25rem;
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
        --space-4xl: 4rem;
        --space-5xl: 5rem;
    }
    /* Header mobile */
    .main-navigation {
        display: none;
    }
    .header-cta {
        display: none;
    }
    .mobile-menu-toggle {
        display: flex;
    }
    .has-topbar .mobile-menu-overlay,
    .has-topbar.topbar-hidden .mobile-menu-overlay {
        top: var(--header-height);
    }
    /* Hero */
    .hero-section {
        height: 80vh;
        min-height: 400px;
        max-height: 600px;
    }
    .hero-slide__content {
        padding-left: 72px;
        padding-right: 72px;
    }
    .hero-slide__text {
        max-width: 100%;
    }
    .hero-control {
        width: 44px;
        height: 44px;
    }
    .hero-control--prev {
        left: 16px;
    }
    .hero-control--next {
        right: 16px;
    }
    /* Disable parallax/particles on mobile */
    .hero-particle-field,
    .cta-particle-field {
        display: none;
    }
    /* Services slider: 1 visible on mobile */
    .services-slide {
        flex: 0 0 calc(100% - 40px);
    }
    .services-slider__track {
        gap: 16px;
    }
    .services-arrow {
        width: 42px;
        height: 42px;
    }
    /* Disable map glow on mobile */
    .map-glow-overlay {
        display: none;
    }
    /* Port popups: fixed bottom sheet on mobile/tablet */
    .port-popup {
        position: fixed;
        top: auto !important;
        left: 0 !important;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: 1000;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease;
    }
    .port-popup.active {
        transform: translateY(0) !important;
    }
    .port-popup__inner {
        min-width: 0;
        max-width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-top: 3px solid var(--color-orange);
        padding: var(--space-xl) var(--space-xl) var(--space-2xl);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
    }
    /* Backdrop overlay when popup is open */
    .port-popup-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
    }
    .port-popup-backdrop.active {
        display: block;
    }
    /* Services archive grid */
    .services-grid--archive {
        grid-template-columns: 1fr;
    }
    /* Ports: stack vertically on mobile */
    .ports-layout {
        grid-template-columns: 1fr;
    }
    .ports-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-lg);
    }
    .ports-stats {
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
    }
    .ports-stat__icon {
        width: 40px;
        height: 40px;
    }
    .ports-stat__icon svg {
        width: 22px;
        height: 22px;
    }
    .ports-filter {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    .ports-filter__heading {
        width: 100%;
    }
    .ports-filter__btn {
        width: auto;
        text-align: center;
    }
    .ports-legend {
        flex-direction: row;
        gap: var(--space-md);
        width: 100%;
    }
    .ports-stat__number {
        font-size: var(--font-size-2xl);
    }
    .map-header__sub {
        font-size: var(--font-size-base);
    }
    .map-header__title {
        font-size: var(--font-size-xl);
    }
    .port-marker__label {
        font-size: 8px;
    }
    .ports-grid {
        grid-template-columns: 1fr;
    }
    .docs-cta-row__left-inner {
        padding: var(--space-2xl) var(--space-lg);
        max-width: 100%;
    }
    .docs-cta-row__right-inner {
        padding: var(--space-2xl) var(--space-lg);
    }
    .document-card {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .footer-bottom__inner {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }
}

@media (max-width: 480px) {
     :root {
        --container-padding: 1rem;
        --font-size-6xl: 1.875rem;
        --font-size-5xl: 1.75rem;
        --font-size-4xl: 1.5rem;
    }
    .btn--lg {
        padding: 0.875rem 1.5rem;
        font-size: var(--font-size-sm);
    }
    .hero-slide__content {
        padding-left: 60px;
        padding-right: 60px;
    }
    .hero-controls {
        bottom: 20px;
    }
    .hero-control {
        width: 40px;
        height: 40px;
    }
    .hero-control--prev {
        left: 12px;
    }
    .hero-control--next {
        right: 12px;
    }
    .hero-control svg {
        width: 18px;
        height: 18px;
    }
    .about-stat,
    .about-stat--glass {
        right: 10px;
        bottom: -10px;
        padding: var(--space-md);
    }
    .about-stat__number {
        font-size: var(--font-size-2xl);
    }
    .cta-headline {
        font-size: var(--font-size-2xl);
    }
    .section--combined {
        padding-top: var(--space-2xl);
    }
    .services-slide__card {
        padding: var(--space-xl) var(--space-lg);
    }
    .services-slide {
        flex: 0 0 calc(100% - 24px);
    }
    /* Ports: smaller markers and labels on small screens */
    .port-marker {
        padding: 6px;
    }
    .port-marker__dot {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }
    .port-marker__pulse {
        width: 22px;
        height: 22px;
    }
    .port-marker__label {
        font-size: 7px;
    }
    .contact-info-card__icon {
        width: 44px;
        height: 44px;
    }
    .contact-form-wrap {
        padding: var(--space-xl);
    }
    .contact-map-wrap {
        min-height: 300px;
    }
    .contact-map iframe {
        min-height: 300px;
    }
    .event-card {
        flex-wrap: wrap;
    }
    .event-card__image {
        width: 100%;
        height: 150px;
        order: -1;
    }
}


/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .section-label__line+.section-label__text,
.greenport-rtl .section-label__line+.section-label__text {
    margin-right: 0;
}

[dir="rtl"] .footer-menu a::before,
.greenport-rtl .footer-menu a::before {
    display: none;
}

[dir="rtl"] .footer-menu a::after,
.greenport-rtl .footer-menu a::after {
    content: '';
    width: 0;
    height: 1px;
    background: var(--color-orange);
    transition: width var(--transition-base);
}

[dir="rtl"] .footer-menu a:hover::after,
.greenport-rtl .footer-menu a:hover::after {
    width: 12px;
}

[dir="rtl"] .btn svg,
.greenport-rtl .btn svg {
    transform: scaleX(-1);
}

[dir="rtl"] .btn:hover svg,
.greenport-rtl .btn:hover svg {
    transform: scaleX(-1) translateX(3px);
}

[dir="rtl"] .about-stat,
.greenport-rtl .about-stat {
    right: auto;
    left: -20px;
}

[dir="rtl"] .about-accent-shape,
.greenport-rtl .about-accent-shape {
    right: auto;
    left: -30px;
}

[dir="rtl"] .footer-heading::after,
.greenport-rtl .footer-heading::after {
    left: auto;
    right: 0;
}

[dir="rtl"] .sidebar-services-list li a:hover,
.greenport-rtl .sidebar-services-list li a:hover {
    padding-left: 0;
    padding-right: var(--space-sm);
}


/* RTL: GSAP handles data-animate transforms via JS */

[dir="rtl"] .services-slide__link svg,
.greenport-rtl .services-slide__link svg {
    transform: scaleX(-1);
}

[dir="rtl"] .services-slide__link:hover svg,
.greenport-rtl .services-slide__link:hover svg {
    transform: scaleX(-1) translateX(-4px);
}

[dir="rtl"] .services-arrow--prev svg,
.greenport-rtl .services-arrow--prev svg {
    transform: scaleX(-1);
}

[dir="rtl"] .services-arrow--next svg,
.greenport-rtl .services-arrow--next svg {
    transform: scaleX(-1);
}

[dir="rtl"] .footer-heading::after,
.greenport-rtl .footer-heading::after {
    left: auto;
    right: 0;
}


/* ============================================
   EVENTS (Yacht Division Page)
   ============================================ */

.section--events {
    background: var(--color-gray-50);
}

.events-timeline {
    max-width: 800px;
    margin: 0 auto;
}

.events-timeline__month {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.events-timeline__month:first-child {
    margin-top: 0;
}

.events-timeline__month h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-sky);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-sky);
    display: inline-block;
}

.event-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    border: 1px solid var(--color-gray-100);
}

.event-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-orange-20);
}

.event-card__date {
    flex-shrink: 0;
    width: 60px;
    text-align: center;
    background: var(--color-orange-10);
    padding: var(--space-md) var(--space-sm);
    border-radius: var(--radius-md);
}

.event-card__day {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-orange);
    line-height: 1;
}

.event-card__month-short {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-600);
    text-transform: uppercase;
    margin-top: 4px;
}

.event-card__content {
    flex: 1;
}

.event-card__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.event-card__title a {
    color: var(--color-gray-900);
}

.event-card__title a:hover {
    color: var(--color-orange);
}

.event-card__location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.event-card__location svg {
    color: var(--color-orange);
    flex-shrink: 0;
}

.event-card__desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.5;
}

.event-card__image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.event-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ============================================
   YACHT & MARINE LEISURE AGENCY PAGE
   ============================================ */


/* Hero override */

.page-header--yacht-marine {
    padding: var(--space-5xl) 0 var(--space-4xl);
    min-height: 550px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.page-header--yacht-marine .page-header__overlay {
    background: linear-gradient(90deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.10) 32%, rgba(10, 37, 64, 0.10) 50%, rgba(10, 37, 64, 0.05) 72%, rgba(10, 37, 64, 0.05) 100%);
}

.ym-hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ym-hero-badges {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    flex-wrap: wrap;
}

.ym-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.ym-hero-badge svg {
    opacity: 0.8;
}


/* Intro section */

.ym-intro {
    padding: var(--space-4xl) 0;
    background: #f9f9f9
}

.ym-intro__content {
    /* max-width: 900px; */
    margin: 0 auto;
    text-align: center;
}

.ym-intro__content .section-label {
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.ym-intro__text {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--color-gray-600);
}

.ym-intro__text p {
    margin-bottom: var(--space-md);
}

.ym-intro__actions {
    margin-top: var(--space-xl);
}


/* Two-column intro: copy on the left, image on the right. */

.ym-intro:not(.ym-intro--split) .ym-intro__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.ym-intro:not(.ym-intro--split) .ym-intro__content {
    margin: 0;
    text-align: left;
}

.ym-intro:not(.ym-intro--split) .ym-intro__content .section-label {
    justify-content: flex-start;
}

.ym-intro:not(.ym-intro--split) .ym-intro__media-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 5 / 5.4;
    max-height: 400px;
    /* box-shadow: 0 30px 70px -30px rgba(18, 48, 95, 0.35); */
}

.ym-intro:not(.ym-intro--split) .ym-intro__media-frame img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .ym-intro:not(.ym-intro--split) .ym-intro__grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .ym-intro:not(.ym-intro--split) .ym-intro__media {
        order: -1;
    }
    .ym-intro:not(.ym-intro--split) .ym-intro__media-frame {
        aspect-ratio: 16 / 10;
    }
}


/* Action button parked at the bottom of the Serving section. */

.ym-serving__actions {
    margin-top: var(--space-3xl);
}

.ym-serving__actions .ym-intro__actions {
    margin-top: 0;
}


/* ── Split intro (Tourism & Guest Experience): copy + feature list | image ── */

.ym-intro--split {
    padding: var(--space-3xl) 0;
}

.ym-intro--split .ym-intro__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    background: #faf8f5;
    border: 1px solid var(--color-gray-100);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(26, 48, 80, 0.06);
}

.ym-intro--split .ym-intro__content {
    max-width: none;
    margin: 0;
    text-align: left;
    align-self: center;
    padding: clamp(2rem, 4vw, 3.75rem);
}

.ym-intro--split .ym-intro__content .section-label {
    justify-content: flex-start;
    margin-bottom: var(--space-lg);
}

.ym-intro__heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.15;
    font-weight: 700;
    color: var(--color-navy-dark);
    margin: 0 0 var(--space-lg);
    padding-bottom: var(--space-lg);
    position: relative;
}

.ym-intro__heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-sky);
}

.ym-intro--split .ym-intro__text {
    font-size: var(--font-size-base);
    line-height: 1.75;
    color: var(--color-gray-600);
    margin-bottom: var(--space-xl);
}

.ym-intro--split .ym-intro__text p {
    margin-bottom: var(--space-sm);
}

.ym-intro__features {
    list-style: none;
    margin: 0 0 var(--space-2xl);
    padding: 0;
}

.ym-intro__feature {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(26, 48, 80, 0.08);
}

.ym-intro__feature:last-child {
    border-bottom: 0;
}

.ym-intro__feature-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-sky);
    color: #fff;
}

.ym-intro__feature-icon svg {
    width: 20px;
    height: 20px;
}

.ym-intro__feature-text {
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-navy-dark);
}

.ym-intro--split .ym-intro__actions {
    margin-top: 0;
}

.ym-intro__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ym-intro__media {
    position: relative;
    min-height: 100%;
}

.ym-intro__media-frame {
    position: relative;
    height: 100%;
    width: 100%;
}

.ym-intro__media-frame img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .ym-intro--split .ym-intro__grid {
        grid-template-columns: 1fr;
    }
    .ym-intro__media {
        min-height: 300px;
    }
}


/* Serving section */

.ym-serving {
    padding: var(--space-4xl) 0;
    background: var(--color-white);
}

.ym-serving__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.ym-serving__title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-md);
}

.ym-serving__text {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    line-height: 1.7;
}


/* Services grid */

.ym-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    max-width: 1100px;
    margin: 0 auto;
}


/* Single-card variant: the one card spans the full row. */

.ym-services-grid--single {
    grid-template-columns: 1fr;
}


/* Tourism promo strip — split banner: light copy panel on the left, full-bleed
   photo on the right cut by a diagonal edge with a navy wedge behind it. */


/* =====================================================================
   Tourism promo — premium rounded banner card (navy gradient + photo)
   ===================================================================== */


/* Light full-bleed band: the pattern + photo live on the section itself and
   blend with the rest of the page instead of a dark stand-out card. */

.ym-promo-strip {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(3rem, 6vw, 6rem) 0;
}


/* Faint navy dot texture across the section. */

.ym-promo-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* background-image: radial-gradient(rgba(18, 48, 95, 0.06) 2px, transparent 2.5px); */
    background-size: 30px 30px;
    pointer-events: none;
}


/* Transparent wrapper — no card chrome of its own. Static so the media
   below positions against the full-width section. */

.ym-promo-strip__card {
    position: static;
    display: block;
    /* min-height: 400px; */
}

.ym-promo-strip__content {
    position: relative;
    z-index: 2;
    /* padding: clamp(1.5rem, 4vw, 3rem) 0; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.ym-promo-strip__text {
    min-width: 0;
}


/* Compass icon inside a soft glass badge. */

.ym-promo-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    color: #fd851f;
    background: rgba(253, 133, 31, 0.14);
    border: 1px solid rgba(253, 133, 31, 0.30);
    margin-bottom: var(--space-lg);
}

.ym-promo-strip__icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.ym-promo-strip__title {
    margin: 0;
    color: #12305f;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.02em;
}

.ym-promo-strip__title-line {
    display: inline;
}

.ym-promo-strip__title-accent {
    color: #fd851f;
}


/* Short orange rule between the headline and the subtitle. */

.ym-promo-strip__rule {
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: #fd851f;
    margin: var(--space-md) 0;
}

.ym-promo-strip__subtitle {
    margin: 0;
    max-width: 38rem;
    color: var(--color-gray-600);
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.7;
}


/* Orange pill button with a white circular arrow. */

.ym-promo-strip__btn {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 16px;
    padding: 10px 32px 10px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff9e45 0%, #fd851f 48%, #ef6d0c 100%);
    box-shadow: 0 14px 30px -12px rgba(253, 133, 31, 0.60);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ym-promo-strip__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -12px rgba(253, 133, 31, 0.70);
}

.ym-promo-strip__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-white);
    color: #fd851f;
}

.ym-promo-strip__btn-icon svg {
    width: 20px;
    height: 20px;
}

.ym-promo-strip__btn-text {
    color: var(--color-white);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ym-promo-strip__btn:hover .ym-promo-strip__btn-icon svg {
    transform: translateX(2px);
    transition: transform 0.2s ease;
}

@media (max-width: 900px) {
    .ym-promo-strip__content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xl);
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }
    .ym-promo-strip__subtitle {
        max-width: none;
    }
}

.ym-service-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.ym-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-sky), var(--color-navy));
}

.ym-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.ym-service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-orange-10);
    border-radius: var(--radius-lg);
    color: var(--color-sky);
    margin-bottom: var(--space-lg);
}

.ym-service-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-lg);
}

.ym-service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ym-service-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    line-height: 1.5;
    border-bottom: 1px solid var(--color-gray-100);
    transition: all 0.2s ease;
}

.ym-service-list li:last-child {
    border-bottom: none;
}

.ym-service-list li:hover {
    color: var(--color-gray-900);
    padding-left: var(--space-xs);
}

.ym-service-list li svg {
    flex-shrink: 0;
    color: var(--color-sky);
    margin-top: 3px;
}


/* Events section overrides for yacht marine page */

.ym-events {
    padding: var(--space-5xl) 0;
    background: var(--color-white);
}

.ym-events-group {
    max-width: 900px;
    margin: 0 auto var(--space-2xl);
}

.ym-events-group__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-navy);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-sky);
}

.ym-events-group__title svg {
    color: var(--color-sky);
}

.ym-events-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ym-event-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
}

.ym-event-item:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    border-color: var(--color-orange-20);
    transform: translateX(4px);
}

.ym-event-item--marine {
    border-left: 3px solid var(--color-sky);
}

.ym-event-item__date {
    flex-shrink: 0;
    width: 56px;
    text-align: center;
    background: var(--color-white);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.ym-event-item__day {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-sky);
    line-height: 1;
}

.ym-event-item__month {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-top: 2px;
}

.ym-event-item__content {
    flex: 1;
}

.ym-event-item__content h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.ym-event-item__content h4 a {
    color: var(--color-gray-900);
    transition: color 0.2s ease;
}

.ym-event-item__content h4 a:hover {
    color: var(--color-sky);
}

.ym-event-item__location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.ym-event-item__location svg {
    color: var(--color-sky);
    flex-shrink: 0;
}

.ym-event-item__desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.5;
}

.ym-event-item__range {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-sky);
    background: var(--color-orange-10);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    align-self: center;
}


/* Events note */

.ym-events-note {
    max-width: 900px;
    margin: var(--space-xl) auto 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(135deg, var(--color-orange-10), rgba(52, 91, 130, 0.08));
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-sky);
}

.ym-events-note svg {
    flex-shrink: 0;
    color: var(--color-sky);
    margin-top: 2px;
}

.ym-events-note p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: 1.6;
    margin: 0;
}


/* Responsive: Yacht Marine page */

@media (max-width: 1024px) {
    .ym-services-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 768px) {
    .page-header--yacht-marine {
        min-height: 320px;
        padding: var(--space-4xl) 0 var(--space-3xl);
    }
    .ym-hero-badges {
        gap: var(--space-sm);
    }
    .ym-hero-badge {
        font-size: var(--font-size-xs);
        padding: 4px 12px;
    }
    .ym-serving__title {
        font-size: var(--font-size-2xl);
    }
    .ym-service-card {
        padding: var(--space-xl);
    }
    .ym-event-item {
        flex-wrap: wrap;
    }
    .ym-event-item__range {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .ym-event-item {
        flex-direction: column;
        gap: var(--space-sm);
    }
    .ym-event-item__date {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        width: auto;
    }
    .ym-event-item__day {
        font-size: var(--font-size-lg);
    }
    .ym-events-note {
        flex-direction: column;
        gap: var(--space-sm);
    }
}


/* Reduced motion: disable staggered animations */

@media (prefers-reduced-motion: reduce) {
    .mega-menu-dropdown {
        transition: opacity 0.15s ease, visibility 0.15s ease;
        transform: translateX(-50%) scale(1) !important;
    }
    .mega-menu-list .menu-item {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
    .lang-dropdown {
        transition: opacity 0.15s ease, visibility 0.15s ease;
        transform: translateY(0) scale(1) !important;
    }
    .mobile-menu .sub-menu {
        transition: none;
    }
}


/* ============================================
   ABOUT US PAGE
   ============================================ */


/* -- Standalone CTA Section (About page, Yacht page) -- */


/* Modern CTA banner (matches service-cta.png): rounded blue card with a
   ship photo blended on the right, copy on the left, button on the right. */

.section--cta {
    position: relative;
    background: transparent;
    padding: 0;
}


/* Full-bleed: let the CTA band span the whole viewport width. */

.section--cta .container {
    position: relative;
    z-index: 1;
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.section--cta .cta-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-xl);
    /* Full height band */
    min-height: clamp(340px, 30vw, 460px);
    /* Full width, but keep the copy/button aligned to the site container. */
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    padding-left: max(var(--container-padding), calc((100% - var(--container-max)) / 2));
    padding-right: max(var(--container-padding), calc((100% - var(--container-max)) / 2));
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #06182c 0%, #0A2540 52%, #0e3258 100%);
    box-shadow: none;
}


/* Ship photo pinned to the right edge */

.section--cta .cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center right;
}


/* Gradient: opaque navy on the left for legible copy, clear on the right. */

.section--cta .cta-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #06182c 0%, rgba(6, 24, 44, 0.96) 34%, rgba(10, 37, 64, 0.86) 52%, rgba(14, 50, 88, 0.55) 74%, rgba(14, 50, 88, 0.22) 100%);
}


/* When no photo is set, keep a clean blue gradient banner. */

.section--cta .cta-inner:not(.has-bg) .cta-overlay {
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
}


/* About / Yacht pages put the CTA image as an inline background on the
   <section> itself (no .cta-bg child). Drop the inner panel's own navy
   gradient so the section's image shows through; the .cta-overlay (also
   only rendered when an image is set) handles legibility. */

.section--cta[style*="background-image"] .cta-inner {
    background: transparent;
}

.section--cta .cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.section--cta .cta-action {
    position: relative;
    z-index: 2;
    flex: none;
}


/* Floating bubbles drifting up over the CTA band (decorative). */

.section--cta .cta-bubbles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.section--cta .cta-bubble {
    position: absolute;
    bottom: -90px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 55%, rgba(255, 255, 255, 0) 72%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    will-change: transform, opacity;
    animation: gp-cta-bubble-rise linear infinite;
}

@keyframes gp-cta-bubble-rise {
    0% {
        transform: translate3d(0, 60px, 0) scale(0.6);
        opacity: 0;
    }
    12% {
        opacity: 0.85;
    }
    85% {
        opacity: 0.40;
    }
    100% {
        transform: translate3d(28px, -520px, 0) scale(1);
        opacity: 0;
    }
}

.section--cta .cta-bubble:nth-child(1) {
    left: 6%;
    width: 44px;
    height: 44px;
    animation-duration: 14s;
    animation-delay: 0s;
}

.section--cta .cta-bubble:nth-child(2) {
    left: 18%;
    width: 20px;
    height: 20px;
    animation-duration: 10s;
    animation-delay: 2.4s;
}

.section--cta .cta-bubble:nth-child(3) {
    left: 30%;
    width: 60px;
    height: 60px;
    animation-duration: 18s;
    animation-delay: 1s;
}

.section--cta .cta-bubble:nth-child(4) {
    left: 45%;
    width: 26px;
    height: 26px;
    animation-duration: 12s;
    animation-delay: 4.2s;
}

.section--cta .cta-bubble:nth-child(5) {
    left: 60%;
    width: 16px;
    height: 16px;
    animation-duration: 9s;
    animation-delay: 3s;
}

.section--cta .cta-bubble:nth-child(6) {
    left: 73%;
    width: 50px;
    height: 50px;
    animation-duration: 16s;
    animation-delay: 0.8s;
}

.section--cta .cta-bubble:nth-child(7) {
    left: 88%;
    width: 30px;
    height: 30px;
    animation-duration: 13s;
    animation-delay: 5s;
}

@media (prefers-reduced-motion: reduce) {
    .section--cta .cta-bubble {
        animation: none;
        opacity: 0;
    }
}

@media (max-width: 860px) {
    .section--cta .cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xl);
        padding: var(--space-2xl) var(--space-xl);
    }
    .section--cta .cta-overlay {
        background: linear-gradient(180deg, rgba(10, 37, 64, 0.82) 0%, rgba(10, 37, 64, 0.94) 100%);
    }
    .section--cta .cta-content {
        max-width: 100%;
    }
}


/* -- Intro Section -- */

.about-page-intro {
    background: var(--color-white);
}

.about-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.about-page-content .section-label {
    margin-bottom: var(--space-md);
}

.about-page-content .section-title {
    margin-bottom: var(--space-xl);
}

.about-page-content p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.about-page-image__wrapper {
    position: relative;
}

.about-page-image__wrapper img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.about-page-image__wrapper:hover img {
    transform: scale(1.045);
    box-shadow: var(--shadow-card-hover);
}

.about-page-stat {
    position: absolute;
    bottom: -24px;
    left: -24px;
    background: linear-gradient(135deg, rgba(52, 91, 130, 0.95), rgba(26, 48, 80, 0.95));
    backdrop-filter: blur(12px);
    color: var(--color-white);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    min-width: 140px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}


/* -- Scope Section -- */

.section--gray {
    background: var(--color-gray-50);
}

.section-subtitle {
    max-width: 680px;
    margin: var(--space-md) auto 0;
    color: var(--color-gray-500);
    font-size: var(--font-size-lg);
    text-align: center;
    line-height: 1.7;
}

.about-scope-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-3xl);
}

.about-scope-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid var(--color-gray-100);
}

.about-scope-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(253, 133, 31, 0.12);
    border-color: var(--color-orange-20);
}


/* Card rendered as a link to the service detail page — keep it visually
   identical to the non-linked card. */

.about-scope-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.about-scope-card--link .about-scope-card__title {
    transition: color 0.2s ease;
}

.about-scope-card--link:hover .about-scope-card__title {
    color: var(--color-sky);
}

.about-scope-card__icon {
    width: 56px;
    height: 56px;
    background: var(--color-orange-10);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);
    color: var(--color-sky);
}

.about-scope-card__icon svg {
    width: 32px;
    height: 32px;
}

.about-scope-card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
}

.about-scope-card__desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.7;
}

.about-scope-note {
    margin-top: var(--space-2xl);
    text-align: center;
}

.about-scope-note p {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    font-style: italic;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

.about-scope-btn-wrap {
    margin-top: var(--space-xl);
    text-align: center;
}


/* -- Mission & Vision band --
   One rounded card holding four bands: photo | mission | vision | photo.
   Each band is a flex item whose negative margin-left slides it back over the
   band before it; the exposed edge is then carved by a quarter-ellipse corner
   radius (horizontal radius = sweep depth, vertical radius = 100% of height),
   which is what draws the long diagonal-looking curves. The widths and the
   negative margins are tuned to cancel out to exactly 100%. */


/* The soft gradient + wave pattern now fills the whole section (full-bleed). */

.about-mv-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(1rem, 2vw, 6rem) 0;
    background: linear-gradient(135deg, #f4f8fd 0%, #eef3fb 55%, #e9f0f9 100%);
}


/* Faint decorative "waves" anchored to the section's right corners. */

.about-mv-band::before,
.about-mv-band::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 45% 55% 52% 48% / 55% 48% 52% 45%;
    pointer-events: none;
}

.about-mv-band::before {
    top: -16%;
    right: -3%;
    width: 30%;
    height: 66%;
    background: rgba(255, 255, 255, 0.55);
    transform: rotate(18deg);
}

.about-mv-band::after {
    bottom: -28%;
    right: -5%;
    width: 34%;
    height: 74%;
    background: rgba(214, 227, 244, 0.45);
    transform: rotate(-12deg);
}


/* Transparent content wrapper — no panel of its own now. */

.about-mv-band__card {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}


/* Blue dot grid in the lower-left corner. */

.about-mv-band__dots {
    position: absolute;
    left: clamp(1.75rem, 4vw, 4.5rem);
    bottom: clamp(1.5rem, 3vw, 2.75rem);
    width: 132px;
    height: 66px;
    z-index: 1;
    background-image: radial-gradient(#2f6fe0 2.2px, transparent 2.3px);
    background-size: 22px 22px;
    opacity: 0.55;
    pointer-events: none;
}


/* Vertical divider with a dot at its centre. */

.about-mv-band__divider {
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 50%;
    width: 1px;
    z-index: 1;
    background: linear-gradient(180deg, rgba(47, 111, 224, 0) 0%, rgba(47, 111, 224, 0.35) 18%, rgba(47, 111, 224, 0.35) 82%, rgba(47, 111, 224, 0) 100%);
    transform: translateX(-50%);
    pointer-events: none;
}

.about-mv-band__divider::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2f6fe0;
    transform: translate(-50%, -50%);
}

.about-mv-band__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: clamp(300px, 26vw, 380px);
    gap: clamp(2rem, 5vw, 5.5rem);
}


/* ---- Single mission / vision item ---- */

.about-mv-item {
    --mv-accent: #2f6fe0;
    --mv-accent-soft: rgba(47, 111, 224, 0.28);
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.about-mv-item--vision {
    --mv-accent: #fd851f;
    --mv-accent-soft: rgba(253, 133, 31, 0.30);
}


/* Circular photo with a gapped accent ring + number badge. */

.about-mv-item__figure {
    position: relative;
    flex: 0 0 auto;
    width: clamp(150px, 15vw, 210px);
    aspect-ratio: 1;
}

.about-mv-item__photo {
    position: absolute;
    inset: 14px;
    display: block;
    border-radius: 50%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--color-navy-dark);
    box-shadow: 0 18px 40px -18px rgba(16, 32, 60, 0.55);
}


/* Faint full ring. */

.about-mv-item__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--mv-accent-soft);
    opacity: 0.6;
}


/* Two bold accent arcs at opposite corners (top-right / bottom-left). */

.about-mv-item__arc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--mv-accent);
    border-bottom-color: var(--mv-accent);
    transform: rotate(45deg);
}


/* Filled number badge, top-right over the ring. */

.about-mv-item__num {
    position: absolute;
    top: 2%;
    right: -6%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(46px, 3.4vw, 58px);
    height: clamp(46px, 3.4vw, 58px);
    border-radius: 50%;
    background: var(--mv-accent);
    color: var(--color-white);
    font-size: clamp(1.05rem, 1.3vw, 1.35rem);
    font-weight: 800;
    box-shadow: 0 12px 26px -10px rgba(16, 32, 60, 0.45);
}

.about-mv-item__content {
    min-width: 0;
}

.about-mv-item__title {
    margin: 0;
    color: #12305f;
    font-size: clamp(1.5rem, 2.2vw, 2.35rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.about-mv-item__rule {
    display: block;
    width: 58px;
    height: 4px;
    border-radius: 3px;
    background: var(--mv-accent);
    margin: clamp(14px, 1.4vw, 20px) 0 clamp(18px, 1.8vw, 26px);
}

.about-mv-item__text {
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    line-height: 1.8;
    color: var(--color-gray-600);
}

.about-mv-item__text p {
    margin: 0 0 1em;
}

.about-mv-item__text p:last-child {
    margin-bottom: 0;
}


/* -- Leadership Message -- */

.about-leadership-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.about-leadership-block .section-label {
    margin-bottom: var(--space-md);
}

.about-leadership-block .section-title {
    margin-bottom: var(--space-xl);
}

.about-leadership-quote {
    border-left: 4px solid var(--color-sky);
    padding-left: var(--space-xl);
    margin: 0;
}

.about-leadership-quote p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.about-leadership-quote p:last-child {
    margin-bottom: 0;
}

.about-leadership-block__visual {
    position: relative;
}

.about-leadership-block__visual img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.about-leadership-block__visual:hover img {
    transform: scale(1.045);
    box-shadow: var(--shadow-card-hover);
}


/* -- Port Presence Stats -- */

.about-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.about-stats-item {
    /* Per-card accent — overridden by the colour modifiers below. */
    --stat-accent: var(--color-orange);
    --stat-accent-soft: rgba(253, 133, 31, 0.12);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 44px 28px 40px;
    min-height: 300px;
    border-radius: 22px;
    border: 1px solid rgba(15, 30, 55, 0.06);
    box-shadow: 0 20px 50px rgba(15, 30, 55, 0.07);
    background: #ffffff;
}

.about-stats-item--linked {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.about-stats-item--linked:hover {
    color: inherit;
}

.about-stats-item--linked:focus-visible {
    outline: 3px solid var(--stat-accent);
    outline-offset: 3px;
}

.about-stats-item__badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin-bottom: 26px;
    border-radius: 50%;
    background: var(--stat-accent-soft);
    color: var(--stat-accent);
}

.about-stats-item__badge svg {
    width: 44px;
    height: 44px;
}

.about-stats-item__number {
    position: relative;
    z-index: 2;
    display: block;
    font-size: clamp(2.6rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--stat-accent);
    line-height: 1;
    margin-bottom: 14px;
}

.about-stats-item__label {
    position: relative;
    z-index: 2;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.about-stats-item__desc {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    max-width: 16rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-gray-500, #64748b);
}

.about-stats-item__rule {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 4px;
    margin-top: 18px;
    border-radius: 2px;
    background: var(--stat-accent);
}


/* Card 1 — Port Locations (orange accent) */

.about-stats-item--ports {
    --stat-accent: #f3640c;
    --stat-accent-soft: rgba(253, 133, 31, 0.12);
}


/* Card 2 — Coastal Regions (blue accent) */

.about-stats-item--regions {
    --stat-accent: #2563eb;
    --stat-accent-soft: rgba(37, 99, 235, 0.10);
}


/* Card 3 — Hour Support (green accent) */

.about-stats-item--support {
    --stat-accent: #16a34a;
    --stat-accent-soft: rgba(22, 163, 74, 0.10);
}


/* ── Jeddah Head Office — full-width clickable bar below the stats ── */

button.about-office-bar {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    width: 100%;
    margin-bottom: var(--space-3xl);
    padding: 22px 28px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid rgba(15, 30, 55, 0.08);
    border-left: 4px solid var(--color-orange);
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(15, 30, 55, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    outline: 0;
}

button.about-office-bar:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 55px rgba(243, 100, 12, 0.18);
}

.about-office-bar__brand {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    padding-right: clamp(20px, 3vw, 44px);
    border-right: 1px solid rgba(15, 30, 55, 0.10);
}

.about-office-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(253, 133, 31, 0.12);
    color: var(--color-orange);
}

.about-office-bar__icon svg {
    width: 26px;
    height: 26px;
}

.about-office-bar__id {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.about-office-bar__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.2;
}

.about-office-bar__sub {
    font-size: 0.95rem;
    color: var(--color-gray-500, #64748b);
}

.about-office-bar__field {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 auto;
}


/* Address grows to take the extra width — and absorbs the phone/email
   space whenever those fields are empty. */

.about-office-bar__field--address {
    flex: 1 1 auto;
    min-width: 0;
}

.about-office-bar__field-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-orange);
}

.about-office-bar__field-icon svg {
    width: 22px;
    height: 22px;
}

.about-office-bar__field-text {
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--color-gray-600, #475569);
}

.about-office-bar__field-main {
    display: block;
    font-weight: 600;
    color: var(--color-navy);
}

.about-office-bar__field-note {
    display: block;
    color: var(--color-gray-500, #64748b);
}

.about-office-bar__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--color-orange);
    transition: transform 0.3s ease;
}

.about-office-bar__chevron svg {
    width: 22px;
    height: 22px;
}

button.about-office-bar:hover .about-office-bar__chevron {
    transform: translateX(4px);
}

.about-ports-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

a.about-port-tag,
div.about-port-tag,
button.about-port-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.5rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    color: var(--color-gray-700);
    transition: all 0.3s ease;
    text-decoration: none;
}

button.about-port-tag {
    cursor: pointer;
    outline: 0;
}

.about-port-tag svg {
    color: var(--color-sky);
    flex-shrink: 0;
}

.about-port-tag:hover {
    border-color: var(--color-sky);
    background: var(--color-orange-10);
    color: var(--color-navy);
}


/* Locations that carry a view-only document get a small file icon. */

.about-port-tag__doc-icon {
    margin-left: 2px;
    opacity: 0.65;
}

.about-port-tag--doc:hover .about-port-tag__doc-icon {
    opacity: 1;
}


/* -- About Page Responsive -- */

@media (max-width: 1024px) {
    .about-page-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .about-scope-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Mission & Vision stack into one column; hide the centre divider. */
    .about-mv-band__grid {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 5vw, 3rem);
    }
    .about-mv-band__divider {
        display: none;
    }
    .about-leadership-block {
        grid-template-columns: 1fr;
    }
    .about-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Bar wraps to two rows: brand on top, contact fields below. */
    button.about-office-bar {
        flex-wrap: wrap;
        gap: 18px 28px;
    }
    .about-office-bar__brand {
        border-right: 0;
        padding-right: 0;
        flex-basis: 100%;
    }
    .about-office-bar__chevron {
        align-self: flex-start;
    }
}

@media (max-width: 768px) {
    .about-scope-grid {
        grid-template-columns: 1fr;
    }
    /* Stack the circular photo above the copy on phones. */
    .about-mv-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .about-mv-band__dots {
        display: none;
    }
    .about-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    .about-stats-item {
        min-height: 300px;
        padding: 32px 16px 28px;
    }
    .about-stats-item__badge {
        width: 74px;
        height: 74px;
        margin-bottom: 18px;
    }
    .about-stats-item__badge svg {
        width: 36px;
        height: 36px;
    }
    .about-stats-item__number {
        font-size: var(--font-size-4xl);
    }
    .about-page-stat {
        left: 50%;
        transform: translateX(-50%);
        bottom: -20px;
    }
    .about-ports-list {
        gap: var(--space-sm);
    }
    .about-port-tag {
        font-size: var(--font-size-xs);
        padding: 0.4rem 0.75rem;
    }
    /* Stack the office bar's contact fields into a single column. */
    button.about-office-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }
    .about-office-bar__chevron {
        display: none;
    }
}

@media (max-width: 480px) {
    .about-stats-row {
        grid-template-columns: 1fr 1fr;
    }
    .about-stats-item {
        padding: var(--space-lg);
    }
    .about-stats-item__number {
        font-size: var(--font-size-3xl);
    }
}


/* ============================================
   FRONTEND EDIT BUTTON (admin only)
   ============================================ */

.gp-frontend-edit {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--color-sky);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 20px rgba(253, 133, 31, 0.4);
    transition: all 0.3s ease;
}

.gp-frontend-edit:hover {
    background: var(--color-navy);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(52, 91, 130, 0.5);
}

.gp-frontend-edit svg {
    flex-shrink: 0;
}


/* ============================================
   SERVICES PAGE (page-services.php)
   ============================================ */


/* Banner */

.page-header--services {
    padding: var(--space-5xl) 0 var(--space-4xl);
    text-align: center;
}

.page-header--services .page-header__subtitle {
    max-width: 680px;
    margin: 0 auto;
}


/* Section header */

.section--services-page {
    padding: var(--space-4xl) 0 var(--space-5xl);
}

.svc-page-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.svc-page-header .section-label {
    justify-content: center;
}

.svc-page-header .section-subtitle {
    color: var(--color-gray-500);
    max-width: 600px;
    margin: 0 auto;
}


/* ---- Cards Layout ---- */

.svc-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.svc-page-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    display: flex;
    flex-direction: column;
}

.svc-page-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-sky), var(--color-navy));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2;
}

.svc-page-card:hover {
    border-color: rgba(253, 133, 31, 0.3);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(253, 133, 31, 0.12);
}

.svc-page-card:hover::before {
    transform: scaleX(1);
}


/* Card image */

.svc-page-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.svc-page-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.svc-page-card:hover .svc-page-card__image img {
    transform: scale(1.08);
}


/* Card body */

.svc-page-card__body {
    padding: var(--space-xl) var(--space-xl) var(--space-2xl);
    display: flex;
    flex-direction: column;
    flex: 1;
}


/* Card icon */

.svc-page-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: rgba(253, 133, 31, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-sky);
    margin-bottom: var(--space-lg);
    transition: all 0.4s ease;
}

.svc-page-card:hover .svc-page-card__icon {
    background: var(--color-sky);
    color: var(--color-white);
    transform: scale(1.05);
}

.svc-page-card__icon svg {
    width: 28px;
    height: 28px;
    display: block;
    overflow: visible;
}

.svc-page-card__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 0;
}


/* Card title */

.svc-page-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.svc-page-card__title a {
    color: inherit;
    text-decoration: none;
}

.svc-page-card__title a:hover {
    color: var(--color-sky);
}


/* Card excerpt */

.svc-page-card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.7;
    flex: 1;
    margin-bottom: var(--space-lg);
}


/* Card link */

.svc-page-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-sky);
    text-decoration: none;
    transition: all 0.3s ease;
}

.svc-page-card__link:hover {
    color: var(--color-orange-dark);
    gap: var(--space-sm);
}

.svc-page-card__link svg {
    transition: transform 0.3s ease;
}

.svc-page-card__link:hover svg {
    transform: translateX(4px);
}


/* ---- List Layout ---- */

.svc-page-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.svc-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-2xl);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.svc-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-sky), var(--color-navy));
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.svc-list-item:hover {
    border-color: rgba(253, 133, 31, 0.3);
    transform: translateX(4px);
    box-shadow: 0 8px 30px rgba(253, 133, 31, 0.1);
}

.svc-list-item:hover::before {
    transform: scaleY(1);
}

.svc-list-item__icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: var(--radius-full);
    background: rgba(253, 133, 31, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-sky);
    transition: all 0.3s ease;
}

.svc-list-item:hover .svc-list-item__icon {
    background: var(--color-sky);
    color: var(--color-white);
}

.svc-list-item__icon svg {
    width: 28px;
    height: 28px;
    display: block;
    overflow: visible;
}

.svc-list-item__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 0;
}

.svc-list-item__body {
    flex: 1;
    min-width: 0;
}

.svc-list-item__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 4px;
}

.svc-list-item:hover .svc-list-item__title {
    color: var(--color-sky);
}

.svc-list-item__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.6;
}

.svc-list-item__arrow {
    color: var(--color-gray-300);
    transition: all 0.3s ease;
}

.svc-list-item:hover .svc-list-item__arrow {
    color: var(--color-sky);
    transform: translateX(4px);
}


/* ---- Services Page CTA ---- */

.svc-page-cta {
    margin-top: 0;
}


/* ---- Responsive ---- */

@media (max-width: 1024px) {
    .svc-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section--services-page {
        padding: var(--space-3xl) 0 var(--space-4xl);
    }
    .svc-page-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .svc-list-item {
        flex-wrap: wrap;
        padding: var(--space-lg);
        gap: var(--space-md);
    }
    .svc-list-item__arrow {
        display: none;
    }
}

@media (max-width: 480px) {
    .svc-page-card__body {
        padding: var(--space-lg);
    }
    .svc-list-item {
        gap: var(--space-md);
    }
    .svc-list-item__icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }
    .svc-list-item__icon svg {
        width: 24px;
        height: 24px;
    }
}


/* ============================================
   Hero Bottom Wave (animated, layered)
   ============================================ */

.hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.hero-wave__svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 70px;
}

.hero-wave__layers>use {
    animation: gp-hero-wave 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.hero-wave__layers>use:nth-child(1) {
    animation-duration: 11s;
    animation-delay: -2s;
}

.hero-wave__layers>use:nth-child(2) {
    animation-duration: 14s;
    animation-delay: -3s;
}

.hero-wave__layers>use:nth-child(3) {
    animation-duration: 18s;
    animation-delay: -4s;
}

.hero-wave__layers>use:nth-child(4) {
    animation-duration: 22s;
    animation-delay: -5s;
}

@keyframes gp-hero-wave {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

@media (max-width: 768px) {
    .hero-wave {
        height: 50px;
    }
    .hero-wave__svg {
        min-height: 50px;
    }
}


/* ============================================
   Animated Water Bubbles — SCOPED TO #yacht ONLY
   (home page only — every selector is prefixed with #yacht so
   the bubbles cannot bleed into any other section/template)
   ============================================ */

#yacht .yacht-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}


/* Keep #yacht content above the bubble layer */

#yacht>.container {
    position: relative;
    z-index: 1;
}

#yacht .yacht-bubble {
    position: absolute;
    bottom: -120px;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.42) 0%, rgba(120, 180, 230, 0.26) 45%, rgba(10, 37, 64, 0.10) 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 -4px 12px rgba(255, 255, 255, 0.25);
    opacity: 0;
    animation: gp-yacht-bubble 14s linear infinite;
    will-change: transform, opacity;
}

#yacht .yacht-bubble:nth-child(1) {
    left: 5%;
    width: 40px;
    height: 40px;
    animation-duration: 12s;
    animation-delay: 0s;
}

#yacht .yacht-bubble:nth-child(2) {
    left: 12%;
    width: 18px;
    height: 18px;
    animation-duration: 9s;
    animation-delay: 2s;
}

#yacht .yacht-bubble:nth-child(3) {
    left: 20%;
    width: 70px;
    height: 70px;
    animation-duration: 18s;
    animation-delay: 4s;
}

#yacht .yacht-bubble:nth-child(4) {
    left: 30%;
    width: 24px;
    height: 24px;
    animation-duration: 10s;
    animation-delay: 1s;
}

#yacht .yacht-bubble:nth-child(5) {
    left: 42%;
    width: 50px;
    height: 50px;
    animation-duration: 14s;
    animation-delay: 5s;
}

#yacht .yacht-bubble:nth-child(6) {
    left: 55%;
    width: 30px;
    height: 30px;
    animation-duration: 11s;
    animation-delay: 3s;
}

#yacht .yacht-bubble:nth-child(7) {
    left: 65%;
    width: 60px;
    height: 60px;
    animation-duration: 16s;
    animation-delay: 0s;
}

#yacht .yacht-bubble:nth-child(8) {
    left: 75%;
    width: 22px;
    height: 22px;
    animation-duration: 8s;
    animation-delay: 6s;
}

#yacht .yacht-bubble:nth-child(9) {
    left: 85%;
    width: 45px;
    height: 45px;
    animation-duration: 13s;
    animation-delay: 2s;
}

#yacht .yacht-bubble:nth-child(10) {
    left: 93%;
    width: 28px;
    height: 28px;
    animation-duration: 10s;
    animation-delay: 4s;
}

#yacht .yacht-bubble:nth-child(11) {
    left: 38%;
    width: 16px;
    height: 16px;
    animation-duration: 7s;
    animation-delay: 1s;
}

#yacht .yacht-bubble:nth-child(12) {
    left: 70%;
    width: 36px;
    height: 36px;
    animation-duration: 12s;
    animation-delay: 6s;
}

@keyframes gp-yacht-bubble {
    0% {
        transform: translate3d(0, 0, 0) scale(0.85);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    50% {
        transform: translate3d(20px, -400px, 0) scale(1);
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translate3d(-15px, -800px, 0) scale(1.1);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #yacht .yacht-bubble {
        animation: none;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-wave__layers>use {
        animation: none;
    }
}


/* ============================================
   Hero Floating Card — "Shipping Route" overlay
   (right side of hero banner, above the wave)
   ============================================ */

.hero-route-card {
    position: absolute;
    right: 6%;
    bottom: 70px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    max-width: 380px;
    color: #fff;
    background: linear-gradient(135deg, rgb(15 56 118) 0%, rgb(0 33 66 / 86%) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.hero-route-card__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgb(15 56 118);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
}

.hero-route-card__icon svg {
    width: 22px;
    height: 22px;
}

.hero-route-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.hero-route-card__title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    letter-spacing: 0.01em;
}

.hero-route-card__route {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

.hero-route-card__from,
.hero-route-card__to {
    flex: 0 0 auto;
    white-space: nowrap;
}

.hero-route-card__line {
    position: relative;
    flex: 1 1 auto;
    height: 14px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1px, transparent 1.2px);
    background-size: 6px 14px;
    background-repeat: repeat-x;
    background-position: 0 center;
}

.hero-route-card__ship {
    position: absolute;
    top: 50%;
    left: 0;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #fd8d2b 0%, #345B82 100%);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    animation: gp-hero-card-ship 4.5s ease-in-out infinite;
}

.hero-route-card__ship svg {
    width: 12px;
    height: 12px;
}

@keyframes gp-hero-card-ship {
    0% {
        left: 0;
        transform: translateY(0) rotate(0deg);
    }
    50% {
        left: calc(100% - 22px);
        transform: translateY(-1px) rotate(2deg);
    }
    100% {
        left: 0;
        transform: translateY(0) rotate(0deg);
    }
}

@media (max-width: 1024px) {
    .hero-route-card {
        right: 4%;
        bottom: 90px;
        max-width: 320px;
        padding: 14px 18px;
    }
    .hero-route-card__title {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .hero-route-card {
        display: none;
        /* keep mobile hero clean; design unchanged */
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-route-card__ship {
        animation: none;
    }
}


/* ============================================
   Docs CTA Right Column — Animated Wave Overlay
   (home page only — .docs-cta-row__right-* classes
   are used exclusively in template-parts/home-docs-cta.php)
   ============================================ */

.docs-cta-row__right-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: .1;
}

.docs-cta-row__right-wave {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 180px;
}

.docs-cta-row__right-wave-layers>use {
    animation: gp-docs-cta-wave 22s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.docs-cta-row__right-wave-layers>use:nth-child(1) {
    animation-duration: 13s;
    animation-delay: -2s;
}

.docs-cta-row__right-wave-layers>use:nth-child(2) {
    animation-duration: 16s;
    animation-delay: -3s;
}

.docs-cta-row__right-wave-layers>use:nth-child(3) {
    animation-duration: 19s;
    animation-delay: -4s;
}

.docs-cta-row__right-wave-layers>use:nth-child(4) {
    animation-duration: 22s;
    animation-delay: -5s;
}

@keyframes gp-docs-cta-wave {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .docs-cta-row__right-wave-layers>use {
        animation: none;
    }
}


/* ============================================
   Docs CTA Right Column — Animated Rising Bubbles
   ============================================ */

.docs-cta-row__right-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.docs-cta-row__bubble {
    position: absolute;
    bottom: -30px;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.25);
    opacity: 0;
    animation: gp-docs-cta-bubble-rise 9s linear infinite;
}

.docs-cta-row__bubble:nth-child(1) {
    left: 6%;
    width: 6px;
    height: 6px;
    animation-duration: 7s;
    animation-delay: 0s;
}

.docs-cta-row__bubble:nth-child(2) {
    left: 14%;
    width: 10px;
    height: 10px;
    animation-duration: 10s;
    animation-delay: 1.4s;
}

.docs-cta-row__bubble:nth-child(3) {
    left: 22%;
    width: 5px;
    height: 5px;
    animation-duration: 6s;
    animation-delay: 2.2s;
}

.docs-cta-row__bubble:nth-child(4) {
    left: 30%;
    width: 8px;
    height: 8px;
    animation-duration: 8.5s;
    animation-delay: 0.6s;
}

.docs-cta-row__bubble:nth-child(5) {
    left: 40%;
    width: 12px;
    height: 12px;
    animation-duration: 11s;
    animation-delay: 3s;
}

.docs-cta-row__bubble:nth-child(6) {
    left: 48%;
    width: 4px;
    height: 4px;
    animation-duration: 5.5s;
    animation-delay: 1s;
}

.docs-cta-row__bubble:nth-child(7) {
    left: 58%;
    width: 9px;
    height: 9px;
    animation-duration: 9s;
    animation-delay: 2.8s;
}

.docs-cta-row__bubble:nth-child(8) {
    left: 66%;
    width: 6px;
    height: 6px;
    animation-duration: 7.5s;
    animation-delay: 0.3s;
}

.docs-cta-row__bubble:nth-child(9) {
    left: 74%;
    width: 11px;
    height: 11px;
    animation-duration: 10.5s;
    animation-delay: 4s;
}

.docs-cta-row__bubble:nth-child(10) {
    left: 82%;
    width: 5px;
    height: 5px;
    animation-duration: 6.5s;
    animation-delay: 1.8s;
}

.docs-cta-row__bubble:nth-child(11) {
    left: 90%;
    width: 8px;
    height: 8px;
    animation-duration: 8s;
    animation-delay: 3.5s;
}

.docs-cta-row__bubble:nth-child(12) {
    left: 96%;
    width: 6px;
    height: 6px;
    animation-duration: 7.2s;
    animation-delay: 2s;
}

@keyframes gp-docs-cta-bubble-rise {
    0% {
        transform: translate3d(0, 0, 0) scale(0.6);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    50% {
        transform: translate3d(8px, -50vh, 0) scale(1);
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translate3d(-6px, -105%, 0) scale(1.05);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .docs-cta-row__bubble {
        animation: none;
        opacity: 0;
    }
}


/* ============================================
   STATIC HERO (homepage redesign — Section 1)
   Used when admin's Hero Layout Mode = 'static' (default).
   Coexists with the legacy .hero-slide markup; .hero-section
   already provides the outer height/positioning context.
   ============================================ */

.hero-section--static {
    /* Allow the trust ribbon to sit BELOW the visual hero band without
       being cropped by the 90vh/800px constraint. */
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding-top: 0px !important;
}

.hero-static {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 540px;
    max-height: 800px;
    overflow: hidden;
    background-color: #0D1B2A;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    isolation: isolate;
}


/* Layered background: brand gradient (always) + optional image overlay
   reading + soft vignette for legibility */

.hero-static__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 80% 110%, rgba(10, 37, 64, 0.50) 0%, transparent 55%), radial-gradient(ellipse at 0% 0%, rgba(52, 91, 130, 0.55) 0%, transparent 60%), linear-gradient(135deg, #0a1f33 0%, #1A3050 50%, #0a1f33 100%);
    pointer-events: none;
}


/* Home hero background video — full-cover, behind the scrim & content. */

.hero-static__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}


/* Banner slider layers — stacked bg images that crossfade. They sit on the
   same base plane as the video (behind the scrim) and mirror the .hero-static
   background sizing so a single active slide is visually identical to the old
   inline background. Only rendered when the admin adds 2+ banner images. */

.hero-static__slides {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-static__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1);
    will-change: transform;
}


/* Slow zoom-only (Ken Burns) while a slide is showing — no pan. The active
   image crossfades in (see the transition on the base rule) and then slowly
   zooms in the whole time it is on screen, so an image change is a smooth
   dissolve with no visible jump — exactly like the sceca.center hero. */

.hero-static__slide.is-active {
    opacity: 1;
    animation: gp-hero-kenburns 9s ease-out forwards;
}

@keyframes gp-hero-kenburns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-static__slide.is-active {
        animation: none;
    }
}


/* With slides present, the scrim overlay goes transparent (same as the
   inline-image case) so the banners show through. */

.hero-static--has-slides .hero-static__bg {
    background: transparent;
}


/* When a video is present, the gradient layer becomes a legibility scrim
   (darker on the left where the copy sits) so the footage shows through. */

.hero-static--has-video .hero-static__bg {
    background: radial-gradient(ellipse at 0% 0%, rgba(52, 91, 130, 0.35) 0%, transparent 60%), linear-gradient(90deg, rgba(6, 18, 40, 0.85) 0%, rgba(6, 18, 40, 0.55) 50%, rgba(6, 18, 40, 0.30) 100%);
}


/* When a hero bg image is set, lay a dark gradient on top so type stays readable */

.hero-static[style*="background-image"] .hero-static__bg {
    /* background:
        linear-gradient(180deg, rgba(10, 31, 51, 0.35) 0%, rgba(10, 31, 51, 0.55) 60%, rgba(10, 31, 51, 0.75) 100%),
        radial-gradient(ellipse at center, transparent 40%, rgba(10, 31, 51, 0.35) 100%); */
    /* background: linear-gradient(90deg, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 50%) 35%, rgba(255, 255, 255, 0.2) 55%, rgba(255, 255, 255, 0) 100%); */
    background: transparent;
}

.hero-static__inner {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 140px;
    /* leave room above the wave */
}

.hero-static__content {
    max-width: 760px;
    color: #fff;
}


/* ── Eyebrow chip ───────────────────────────── */

.hero-static__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 24px;
}

.hero-static__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fd851f;
    box-shadow: 0 0 0 4px rgba(253, 133, 31, 0.25);
    flex-shrink: 0;
    animation: gp-hero-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes gp-hero-dot-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(253, 133, 31, 0.25);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(253, 133, 31, 0.05);
    }
}


/* ── Headline ───────────────────────────────── */

.hero-static__title {
    font-size: clamp(2.25rem, 5.2vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 20px;
    text-wrap: balance;
}

.hero-static__title .hero-static__accent {
    color: #ffa24d;
    background: linear-gradient(135deg, #ffa24d 0%, #fd851f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}


/* ── Subtitle ───────────────────────────────── */

.hero-static__subtitle {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.65;
    color: #fff;
    margin: 0 0 32px;
    max-width: 58ch;
    /* font-weight: 500; */
}


/* ── CTA row ────────────────────────────────── */

.hero-static__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-bottom: 48px;
}

.hero-static__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.hero-static__btn svg {
    transition: transform 0.25s ease;
}

.hero-static__btn:hover svg {
    transform: translateX(4px);
}

.hero-static__btn--ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.hero-static__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}


/* "Watch Video" button — ghost style with an orange play badge. */

.hero-static__btn--video {
    background: transparent;
    color: #000;
    /* border: 1.5px solid rgb(253 133 31); */
}

.hero-static__btn--video:hover {
    background: rgba(255, 255, 255, 0.10);
    /* border-color: #fff; */
    /* color: #fff; */
    transform: translateY(-2px);
}

.hero-static__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-orange);
    color: #fff;
    flex-shrink: 0;
    position: relative;
    /* Pulsing ring to draw attention to the video button. */
    animation: gp-play-pulse 2s ease-out infinite;
}

.hero-static__play svg {
    width: 12px;
    height: 12px;
    margin-left: 1px;
    /* optically centre the play triangle */
}


/* The play badge shouldn't slide like the arrow buttons do on hover. */

.hero-static__btn--video:hover .hero-static__play svg {
    transform: none;
}

@keyframes gp-play-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(253, 133, 31, 0.55);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(253, 133, 31, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(253, 133, 31, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-static__play {
        animation: none;
    }
}


/* ── Hero "Watch Video" modal ─────────────────── */

.gp-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gp-video-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.gp-video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 30, 0.85);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.gp-video-modal__dialog {
    position: relative;
    width: min(960px, 100%);
    transform: scale(0.96);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gp-video-modal.is-open .gp-video-modal__dialog {
    transform: scale(1);
}

.gp-video-modal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.gp-video-modal__frame iframe,
.gp-video-modal__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.gp-video-modal__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--color-orange);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 2;
}

.gp-video-modal__close:hover {
    transform: scale(1.08);
    background: var(--color-orange-dark);
}

.gp-video-modal__close svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 600px) {
    .gp-video-modal__close {
        top: 8px;
        right: 8px;
    }
}


/* ── Stat strip ─────────────────────────────── */

.hero-static__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    max-width: 640px;
}

.hero-static__stat {
    color: #fff;
}

.hero-static__stat-value {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #ffffff 0%, #ffddc2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-static__stat-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}


/* ── Trust ribbon (below hero) ──────────────── */

.hero-trust {
    background: #f7f9fb;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 28px 0;
}

.hero-trust__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.hero-trust__caption {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6b7280;
    flex-shrink: 0;
}

.hero-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 36px;
    flex: 1;
    justify-content: flex-end;
}

.hero-trust__item {
    display: flex;
    align-items: center;
    height: 38px;
}

.hero-trust__item img {
    max-height: 38px;
    width: auto;
    max-width: 130px;
    filter: grayscale(100%) brightness(0.6) contrast(1.1);
    opacity: 0.72;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
    object-fit: contain;
}

.hero-trust__item img:hover {
    filter: grayscale(0%) brightness(1) contrast(1);
    opacity: 1;
    transform: scale(1.04);
}


/* ── Responsive (tablet) ────────────────────── */

@media (max-width: 1024px) {
    .hero-static {
        height: auto;
        min-height: 600px;
        max-height: none;
    }
    .hero-static__inner {
        padding-top: 64px;
        padding-bottom: 160px;
    }
    .hero-static__stats {
        gap: 20px;
    }
    .hero-trust__inner {
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
    .hero-trust__list {
        justify-content: center;
        gap: 28px;
    }
}


/* ── Responsive (mobile) ────────────────────── */

@media (max-width: 640px) {
    .hero-static {
        min-height: 560px;
    }
    .hero-static__inner {
        padding-top: 48px;
        padding-bottom: 140px;
    }
    .hero-static__eyebrow {
        font-size: 11px;
        letter-spacing: 1.3px;
        padding: 6px 12px 6px 10px;
        margin-bottom: 18px;
    }
    .hero-static__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        padding-top: 22px;
    }
    .hero-static__stat-value {
        font-size: 1.4rem;
    }
    .hero-static__stat-label {
        font-size: 11px;
        letter-spacing: 0.3px;
    }
    .hero-static__actions {
        gap: 10px;
        margin-bottom: 36px;
    }
    .hero-trust__list {
        gap: 20px;
    }
    .hero-trust__item {
        height: 30px;
    }
    .hero-trust__item img {
        max-height: 30px;
        max-width: 100px;
    }
}


/* ── Reduced motion ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hero-static__eyebrow-dot {
        animation: none;
    }
    .hero-static__btn,
    .hero-static__btn svg,
    .hero-trust__item img {
        transition: none;
    }
}


/* ============================================
   SHARED HERO CTA HELPERS
   (used by single-service.php and page-ports.php)
   ============================================ */

.page-header__cta {
    margin-top: var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.btn--outline-light {
    background-color: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.55);
}

.btn--outline-light:hover {
    background-color: var(--color-white);
    color: var(--color-sky);
    border-color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.btn--outline-light:active {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

.btn--full {
    width: 100%;
    justify-content: center;
}


/* ============================================
   SINGLE SERVICE — RICH SECTIONS
   ============================================ */

.page-header--service {
    padding-bottom: var(--space-4xl);
}

.page-header--service .page-header__overlay {
    background: linear-gradient(90deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.10) 32%, rgba(10, 37, 64, 0.10) 50%, rgba(10, 37, 64, 0.05) 72%, rgba(10, 37, 64, 0.05) 100%);
}

.site-main--service .section--single {
    /* padding: var(--space-4xl) 0 var(--space-2xl); */
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-50) 100%);
}


/* ============================================
   SERVICE DETAIL — consistent section spacing system.
   Every section uses the same vertical rhythm; distinct-background
   sections stay separated by their backgrounds (no extra gaps), so the
   page reads as a connected, premium layout. CTA is full-bleed (excluded).
   ============================================ */

.site-main--service>.section:not(.section--cta) {
    /* padding: var(--space-4xl) 0 var(--space-2xl); */
}

@media (max-width: 768px) {
    .site-main--service>.section:not(.section--cta) {
        padding: var(--space-3xl) 0 var(--space-xl);
    }
}

.service-block {
    margin-top: var(--space-3xl);
}

.service-block__header {
    margin-bottom: var(--space-xl);
}

.service-block__heading {
    font-size: var(--font-size-3xl);
    color: var(--color-gray-900);
    margin-top: var(--space-sm);
    line-height: 1.25;
}

.service-included-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.service-included-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-gray-100);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    list-style: none;
}

.service-included-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(253, 133, 31, 0.18);
}

.service-included-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(253, 133, 31, 0.10);
    color: var(--color-sky);
    margin-bottom: var(--space-md);
}

.service-included-card__icon svg {
    width: 26px;
    height: 26px;
}

.service-included-card__title {
    font-size: var(--font-size-lg);
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
}

.service-included-card__text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.65;
    margin: 0;
}

.service-how-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: relative;
}

.service-how-list::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-sky) 0%, rgba(253, 133, 31, 0.1) 100%);
    z-index: 0;
}

.service-how-step {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    background: var(--color-white);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-gray-100);
    position: relative;
    z-index: 1;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    list-style: none;
}

.service-how-step:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-card-hover);
}

.service-how-step__num {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--font-size-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(52, 91, 130, 0.25);
}

.service-how-step__body {
    flex: 1 1 auto;
}

.service-how-step__title {
    font-size: var(--font-size-lg);
    color: var(--color-gray-900);
    margin-bottom: var(--space-xs);
}

.service-how-step__text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: 1.65;
    margin: 0;
}

.single-sidebar .sidebar-widget {
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-gray-100);
    padding: var(--space-xl);
    transition: box-shadow var(--transition-base);
}

.single-sidebar .sidebar-widget:hover {
    box-shadow: var(--shadow-card-hover);
}

.single-sidebar .sidebar-widget__title {
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-navy-dark);
    border-bottom: 2px solid var(--color-sky);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
}

.sidebar-benefits-list,
.sidebar-checklist,
.sidebar-trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sidebar-benefits-list li,
.sidebar-checklist li,
.sidebar-trust-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: 1.55;
    list-style: none;
}

.sidebar-benefits-list__icon,
.sidebar-checklist__icon,
.sidebar-trust-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(253, 133, 31, 0.12);
    color: var(--color-sky);
    margin-top: 1px;
}

.sidebar-benefits-list__icon svg,
.sidebar-checklist__icon svg,
.sidebar-trust-list__icon svg {
    width: 14px;
    height: 14px;
}

.sidebar-trust-list__icon {
    background: rgba(52, 91, 130, 0.10);
    color: var(--color-navy);
}

.single-sidebar .sidebar-cta {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
    color: var(--color-white);
    border-color: transparent;
}

.single-sidebar .sidebar-cta:hover {
    box-shadow: 0 18px 40px rgba(26, 48, 80, 0.35);
}

.single-sidebar .sidebar-cta .sidebar-cta__title,
.single-sidebar .sidebar-cta p {
    color: var(--color-white);
}

.single-sidebar .sidebar-cta .sidebar-cta__title {
    border-color: rgba(255, 255, 255, 0.25);
}

.single-sidebar .sidebar-cta p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-md);
}

.section--stand-out {
    background: var(--color-white);
}

.stand-out-grid {
    list-style: none;
    margin: var(--space-2xl) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-lg);
}

.stand-out-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    list-style: none;
    position: relative;
    overflow: hidden;
}

.stand-out-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
}

.stand-out-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(253, 133, 31, 0.2);
}

.stand-out-card:hover::after {
    transform: scaleX(1);
}

.stand-out-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(253, 133, 31, 0.10);
    color: var(--color-sky);
    margin-bottom: var(--space-md);
    transition: transform var(--transition-base), background var(--transition-base);
}

.stand-out-card:hover .stand-out-card__icon {
    background: var(--color-sky);
    color: var(--color-white);
    transform: scale(1.05);
}

.stand-out-card__icon svg {
    width: 28px;
    height: 28px;
}

.stand-out-card__title {
    font-size: var(--font-size-lg);
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
}

.stand-out-card__text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0;
}

.section--testimonials {
    background: var(--color-gray-50);
    position: relative;
}

.testimonials-grid {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.testimonial-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-gray-100);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: var(--space-md);
    right: var(--space-xl);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 5rem;
    line-height: 1;
    color: rgba(253, 133, 31, 0.10);
    pointer-events: none;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.testimonial-card__rating {
    display: flex;
    gap: 4px;
}

.testimonial-card__star {
    width: 18px;
    height: 18px;
    color: var(--color-gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.testimonial-card__star.is-on {
    color: #f5b301;
}

.testimonial-card__star svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: currentColor;
}

.testimonial-card__quote {
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

.testimonial-card__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-100);
}

.testimonial-card__name {
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    font-weight: 600;
}

.testimonial-card__location {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

@media (max-width: 1024px) {
    .stand-out-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .service-included-grid {
        grid-template-columns: 1fr;
    }
    .stand-out-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stand-out-card:nth-child(5) {
        grid-column: 1 / -1;
    }
    .service-how-list::before {
        left: 26px;
    }
    .service-how-step {
        padding: var(--space-md);
        gap: var(--space-md);
    }
    .service-how-step__num {
        width: 48px;
        height: 48px;
        font-size: var(--font-size-base);
    }
    .page-header__cta {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header__cta .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .stand-out-grid {
        grid-template-columns: 1fr;
    }
    .stand-out-card:nth-child(5) {
        grid-column: auto;
    }
}


/* ============================================
   PORT COVERAGE — REDESIGN
   (page-ports.php / archive-port.php)
   ============================================ */


/* ── Hero polish ───────────────────────────── */

.page-header--ports {
    padding: calc(var(--space-5xl) + var(--space-md)) 0 var(--space-4xl);
}

.page-header--ports .page-header__overlay {
    background: linear-gradient(90deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.10) 32%, rgba(10, 37, 64, 0.10) 50%, rgba(10, 37, 64, 0.05) 72%, rgba(10, 37, 64, 0.05) 100%);
}

.page-header--ports .page-header__pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.08) 0%, transparent 35%), radial-gradient(circle at 82% 76%, rgba(255, 255, 255, 0.07) 0%, transparent 40%);
    pointer-events: none;
    z-index: 1;
}

.page-header--ports .page-header__content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.page-header__title--accent {
    position: relative;
    display: inline-block;
    padding-bottom: var(--space-md);
}

.page-header__title-underline {
    display: block;
    height: 4px;
    width: 80px;
    background: linear-gradient(90deg, var(--color-sky) 0%, rgba(253, 133, 31, 0) 100%);
    border-radius: var(--radius-full);
    margin-top: var(--space-md);
    animation: gp-port-underline-grow 900ms var(--ease-out-expo) 200ms backwards;
}

@keyframes gp-port-underline-grow {
    from {
        transform: scaleX(0);
        transform-origin: left center;
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        transform-origin: left center;
        opacity: 1;
    }
}


/* ── Section: Map + stats ──────────────────── */

.section--ports-map {
    background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-white) 100%);
    position: relative;
}

.ports-stats-strip {
    list-style: none;
    margin: var(--space-2xl) 0 var(--space-3xl);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.ports-stat-card {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 12px 30px rgba(52, 91, 130, 0.08);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    list-style: none;
    position: relative;
    overflow: hidden;
}

.ports-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(253, 133, 31, 0.05) 0%, rgba(52, 91, 130, 0.02) 100%);
    pointer-events: none;
}

.ports-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(52, 91, 130, 0.15);
}

.ports-stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-orange);
    color: var(--color-white);
    margin-bottom: var(--space-md);
    box-shadow: 0 8px 20px rgba(253, 133, 31, 0.30);
    position: relative;
}

.ports-stat-card__value {
    display: block;
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-navy-dark);
    line-height: 1;
    margin-bottom: var(--space-xs);
    position: relative;
}

.ports-stat-card__label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    position: relative;
}

.ports-map-wrap {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-gray-100);
    padding: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.ports-map-wrap__title {
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-navy-dark);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-sky);
}

.section--ports-map .ports-map {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.section--ports-map .ports-map iframe {
    position: absolute;
    top: -70px;
    left: 0;
    width: 100%;
    height: calc(100% + 70px);
    border: none;
    pointer-events: none;
}

.section--ports-map .ports-map:hover iframe {
    pointer-events: auto;
}

.ports-bottom-text {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    color: var(--color-gray-600);
    font-size: var(--font-size-base);
    line-height: 1.65;
    padding: 0 4%;
}


/* ── Section: Shipping Network timeline ────── */

.section--ports-network {
    background: var(--color-white);
}

.ports-network {
    list-style: none;
    margin: var(--space-2xl) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-lg);
    counter-reset: gp-ports-step;
    position: relative;
}

.ports-network::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-sky) 0%, var(--color-navy) 50%, rgba(253, 133, 31, 0.2) 100%);
    z-index: 0;
}

.ports-network__step {
    background: var(--color-white);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    list-style: none;
    position: relative;
    z-index: 1;
}

.ports-network__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--font-size-lg);
    box-shadow: 0 12px 24px rgba(52, 91, 130, 0.3);
    margin: 0 auto var(--space-md);
    border: 4px solid var(--color-white);
    transition: transform var(--transition-base);
}

.ports-network__step:hover .ports-network__num {
    transform: scale(1.05);
}

.ports-network__title {
    font-size: var(--font-size-lg);
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
}

.ports-network__text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.65;
    margin: 0;
}


/* ── Section: Ports grid + filter bar ──────── */

.section--ports-grid {
    background: var(--color-gray-50);
}

.port-filter {
    margin: var(--space-2xl) 0 var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-md);
    box-shadow: var(--shadow-card);
}

.port-filter__search {
    position: relative;
    flex: 1 1 240px;
    display: flex;
    align-items: center;
}

.port-filter__search-icon {
    position: absolute;
    left: var(--space-md);
    color: var(--color-gray-400);
    pointer-events: none;
}

.port-filter__input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.6rem 0.6rem 0.6rem 2.5rem;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
    outline: none;
}

.port-filter__input::placeholder {
    color: var(--color-gray-400);
}

.port-filter__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--color-gray-50);
    border-radius: var(--radius-full);
    padding: 4px;
}

.port-filter__pill {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.55rem 1.1rem;
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-600);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}

.port-filter__pill:hover {
    color: var(--color-sky);
}

.port-filter__pill.is-active {
    background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: 0 6px 14px rgba(52, 91, 130, 0.3);
}

.port-filter__empty {
    text-align: center;
    padding: var(--space-2xl) 0;
    color: var(--color-gray-500);
    font-size: var(--font-size-base);
}


/* ── Redesigned port card ──────────────────── */

.ports-grid--page {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    gap: var(--space-xl);
}

.port-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-gray-100);
}

.port-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

.port-card.is-hidden {
    display: none;
}

.port-card__body {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1 1 auto;
}

.port-card__flag-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.port-card__flag {
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    /* Fallback so emoji still works without color-emoji fonts */
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif;
}

.port-card__country {
    font-weight: 600;
    color: var(--color-gray-700);
}

.port-card__city-sep {
    color: var(--color-gray-300);
}

.port-card__city {
    color: var(--color-gray-500);
    font-weight: 500;
}

.port-card__title {
    font-size: var(--font-size-xl);
    margin: 0;
    line-height: 1.25;
}

.port-card__title a {
    color: var(--color-gray-900);
    transition: color var(--transition-fast);
}

.port-card__title a:hover {
    color: var(--color-sky);
}

.port-card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.65;
    margin: 0;
}

.port-card__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.port-card__chips li {
    background: rgba(253, 133, 31, 0.08);
    color: var(--color-sky);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    list-style: none;
}

.port-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-sky);
    margin-top: auto;
    padding-top: var(--space-sm);
    transition: gap var(--transition-fast);
}

.port-card__link:hover {
    gap: 10px;
}

@media (max-width: 1200px) {
    .ports-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .ports-network {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1024px) {
    .ports-grid--page {
        grid-template-columns: repeat(2, 1fr);
    }
    .ports-network {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .ports-network::before {
        top: 0;
        bottom: 0;
        left: 32px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--color-sky) 0%, rgba(253, 133, 31, 0.2) 100%);
    }
    .ports-network__step {
        text-align: left;
        display: flex;
        align-items: flex-start;
        gap: var(--space-lg);
        padding: var(--space-md) 0;
    }
    .ports-network__num {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .ports-stats-strip {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }
    .ports-stat-card {
        padding: var(--space-lg) var(--space-md);
    }
    .ports-stat-card__value {
        font-size: var(--font-size-3xl);
    }
    .ports-grid--page {
        grid-template-columns: 1fr;
    }
    .section--ports-map .ports-map {
        height: 360px;
    }
    .port-filter {
        border-radius: var(--radius-lg);
        flex-direction: column;
        align-items: stretch;
    }
    .port-filter__pills {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ports-stats-strip {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   YACHT & MARINE — REDESIGN
   (page-yacht-marine.php)
   ============================================ */


/* ── Hero polish: pattern overlay + CTA row ── */

.page-header--yacht-marine .page-header__pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.09) 0%, transparent 40%), radial-gradient(circle at 88% 82%, rgba(255, 255, 255, 0.08) 0%, transparent 45%);
    pointer-events: none;
    z-index: 1;
}

.page-header--yacht-marine .page-header__content {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.ym-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.ym-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.ym-hero-badge:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.ym-hero-badge svg {
    width: 14px;
    height: 14px;
    color: var(--color-white);
    opacity: 0.9;
}


/* ── Section 2: Stats Strip ──────────────── */

.section--ym-stats {
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-50) 100%);
    padding-top: var(--space-3xl);
}

.ym-stats-strip {
    list-style: none;
    margin: var(--space-2xl) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.ym-stat-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    box-shadow: 0 12px 30px rgba(52, 91, 130, 0.08);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    list-style: none;
    position: relative;
    overflow: hidden;
}

.ym-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(253, 133, 31, 0.04) 0%, rgba(52, 91, 130, 0.02) 100%);
    pointer-events: none;
}

.ym-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(52, 91, 130, 0.16);
}

.ym-stat-card__value {
    display: block;
    font-size: var(--font-size-5xl);
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-xs);
    background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-navy) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-navy-dark);
    position: relative;
}

.ym-stat-card__label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    position: relative;
}


/* ── Section 3: Concierge Journey Timeline ── */

.section--ym-journey {
    background: var(--color-white);
}

.ym-journey {
    list-style: none;
    margin: var(--space-2xl) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-lg);
    position: relative;
}

.ym-journey::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-sky) 0%, var(--color-navy) 50%, rgba(253, 133, 31, 0.2) 100%);
    z-index: 0;
}

.ym-journey__step {
    background: var(--color-white);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    list-style: none;
    position: relative;
    z-index: 1;
}

.ym-journey__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--font-size-lg);
    box-shadow: 0 12px 24px rgba(52, 91, 130, 0.3);
    margin: 0 auto var(--space-md);
    border: 4px solid var(--color-white);
    transition: transform var(--transition-base);
}

.ym-journey__step:hover .ym-journey__num {
    transform: scale(1.05);
}

.ym-journey__title {
    font-size: var(--font-size-lg);
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
}

.ym-journey__text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.65;
    margin: 0;
}


/* ── Section 5: Events Filter Pills ───────── */

.ym-events-filter {
    margin: var(--space-2xl) 0 var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--radius-full);
    padding: 6px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-gray-100);
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.ym-events-filter__pill {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.55rem 1.1rem;
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-600);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}

.ym-events-filter__pill:hover {
    color: var(--color-sky);
}

.ym-events-filter__pill.is-active {
    background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: 0 6px 14px rgba(52, 91, 130, 0.3);
}


/* Filter visibility helpers (toggled by initEventsFilter()) */

.ym-event-item.is-hidden,
.ym-events-group.is-hidden {
    display: none;
}

.ym-events-group {
    transition: opacity 0.25s ease;
}


/* ── Responsive ────────────────────────────── */

@media (max-width: 1200px) {
    .ym-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .ym-journey {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .ym-journey::before {
        top: 0;
        bottom: 0;
        left: 32px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--color-sky) 0%, rgba(253, 133, 31, 0.2) 100%);
    }
    .ym-journey__step {
        text-align: left;
        display: flex;
        align-items: flex-start;
        gap: var(--space-lg);
        padding: var(--space-md) 0;
    }
    .ym-journey__num {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .ym-stats-strip {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }
    .ym-stat-card {
        padding: var(--space-lg) var(--space-sm);
    }
    .ym-stat-card__value {
        font-size: var(--font-size-4xl);
    }
    .ym-events-filter {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .ym-events-filter__pill {
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    .ym-stats-strip {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   SERVICES — PREMIUM IMAGE-HOVER CARDS
   (page-services.php "premium" layout)
   ============================================ */

.svc-premium-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.svc-premium-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-2xl);
    color: var(--color-white);
    isolation: isolate;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.svc-premium-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}


/* Full-bleed background image */

.svc-premium-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 700ms var(--ease-out-expo);
    z-index: 0;
}

.svc-premium-card:hover .svc-premium-card__bg {
    transform: scale(1.06);
}


/* Overlay: lighter in default state, darker on hover */

.svc-premium-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 27, 48, 0.45) 0%, rgba(10, 27, 48, 0.78) 100%);
    transition: background 450ms ease, opacity 450ms ease;
    z-index: 1;
}

.svc-premium-card:hover .svc-premium-card__overlay {
    background: linear-gradient(180deg, rgba(10, 27, 48, 0.78) 0%, rgba(8, 21, 38, 0.92) 100%);
}


/* Clickable surface — sits above the bg/overlay but below content; pointer-events ensures
   the whole card is a link, while text inside stays selectable. */

.svc-premium-card__link {
    position: absolute;
    inset: 0;
    z-index: 5;
    text-indent: -9999px;
    overflow: hidden;
}

.svc-premium-card__top,
.svc-premium-card__bottom {
    position: relative;
    z-index: 2;
    pointer-events: none;
    /* text doesn't intercept the overlay link */
}

.svc-premium-card__number {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.12em;
    margin-bottom: var(--space-md);
}

.svc-premium-card__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.15;
    margin: 0;
    max-width: 80%;
}


/* Bottom area:
   - Default: only the icon is visible (excerpt + CTA hidden via opacity/translate)
   - Hover:   icon hides, excerpt + READ MORE slide up into view */

.svc-premium-card__bottom {
    display: grid;
    grid-template-areas: "excerpt" "icon" "cta";
    gap: var(--space-md);
}

.svc-premium-card__icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.88);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 320ms ease, transform 320ms ease;
}

.svc-premium-card__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
}

.svc-premium-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.svc-premium-card__excerpt {
    grid-area: excerpt;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
    margin: 0;
    max-width: 90%;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 380ms ease 60ms, transform 380ms var(--ease-out-expo) 60ms;
}

.svc-premium-card__cta {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-white);
    padding-bottom: 6px;
    width: max-content;
    border-bottom: 2px solid rgba(255, 255, 255, 0.85);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 380ms ease 120ms, transform 380ms var(--ease-out-expo) 120ms;
}

.svc-premium-card:hover .svc-premium-card__icon,
.svc-premium-card:focus-within .svc-premium-card__icon {
    opacity: 0;
    transform: translateY(6px);
}

.svc-premium-card:hover .svc-premium-card__excerpt,
.svc-premium-card:focus-within .svc-premium-card__excerpt,
.svc-premium-card:hover .svc-premium-card__cta,
.svc-premium-card:focus-within .svc-premium-card__cta {
    opacity: 1;
    transform: translateY(0);
}


/* Touch devices (no hover): show the reveal content permanently so users
   on phones/tablets see the full info without needing hover. */

@media (hover: none) {
    .svc-premium-card__icon {
        opacity: 0;
    }
    .svc-premium-card__excerpt,
    .svc-premium-card__cta {
        opacity: 1;
        transform: translateY(0);
    }
    .svc-premium-card__overlay {
        background: linear-gradient(180deg, rgba(10, 27, 48, 0.7) 0%, rgba(8, 21, 38, 0.92) 100%);
    }
}

@media (max-width: 1024px) {
    .svc-premium-card {
        min-height: 420px;
        padding: var(--space-xl);
    }
    .svc-premium-card__title {
        font-size: var(--font-size-2xl);
    }
}

@media (max-width: 768px) {
    .svc-premium-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .svc-premium-card {
        min-height: 380px;
    }
}


/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .svc-premium-card,
    .svc-premium-card__bg,
    .svc-premium-card__overlay,
    .svc-premium-card__icon,
    .svc-premium-card__excerpt,
    .svc-premium-card__cta {
        transition: none;
    }
    .svc-premium-card:hover .svc-premium-card__bg {
        transform: none;
    }
}


/* ============================================
   SINGLE SERVICE — HOVER ZOOM EFFECTS
   (hero banner image + card grids)
   ============================================ */


/* Hero: separated bg layer so the image can scale without
   dragging the overlay or title with it. */

.page-header--service {
    overflow: hidden;
    position: relative;
}

.page-header--service .page-header__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 900ms var(--ease-out-expo);
    z-index: 0;
    will-change: transform;
}

.page-header--service:hover .page-header__bg {
    transform: scale(1.06);
}

.page-header--service .page-header__overlay {
    z-index: 1;
}

.page-header--service .page-header__content,
.page-header--service .container {
    position: relative;
    z-index: 2;
}


/* Card hover zooms — keep the existing lift and add a small
   scale so the cards feel like they pop forward. */

.service-included-card {
    will-change: transform;
}

.service-included-card:hover {
    transform: translateY(-4px) scale(1.02);
}

.stand-out-card {
    will-change: transform;
}

.stand-out-card:hover {
    transform: translateY(-6px) scale(1.02);
}

.testimonial-card {
    will-change: transform;
}

.testimonial-card:hover {
    transform: translateY(-4px) scale(1.015);
}


/* Reduced-motion: no scale, no parallax */

@media (prefers-reduced-motion: reduce) {
    .page-header--service .page-header__bg,
    .service-included-card,
    .stand-out-card,
    .testimonial-card {
        transition: none;
    }
    .page-header--service:hover .page-header__bg,
    .service-included-card:hover,
    .stand-out-card:hover,
    .testimonial-card:hover {
        transform: none;
    }
}


/* In-content images (Gutenberg image blocks) inside the service body —
   the <figure> clips and the <img> scales on hover. Scoped to
   .site-main--service so other pages keep their normal img styling. */

.site-main--service .entry-content .wp-block-image,
.site-main--service .entry-content figure {
    overflow: hidden;
    border-radius: var(--radius-md);
    margin: var(--space-xl) 0;
    display: block;
    line-height: 0;
}

.site-main--service .entry-content .wp-block-image img,
.site-main--service .entry-content figure>img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
    transition: transform 700ms var(--ease-out-expo);
    will-change: transform;
}

.site-main--service .entry-content .wp-block-image:hover img,
.site-main--service .entry-content figure:hover>img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .site-main--service .entry-content .wp-block-image img,
    .site-main--service .entry-content figure>img {
        transition: none;
    }
    .site-main--service .entry-content .wp-block-image:hover img,
    .site-main--service .entry-content figure:hover>img {
        transform: none;
    }
}


/* ============================================
   SERVICE DETAIL — MODERN SPLIT BANNER
   Matches service-list.png: eyebrow + title + subtitle
   and three feature pills on a navy panel that blends
   into the featured photo on the right. Copy enters with
   a staggered [data-animate] fade; the photo gently pans.
   ============================================ */

.page-header--svc-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(330px, 39.6vw, 550px);
    /* margin-top is inherited from .page-header for the fixed header. */
    padding: var(--space-3xl) 0;
    background: linear-gradient(115deg, #0a1f3a 0%, #102a4c 52%, #0d2138 100%);
    color: var(--color-white);
    overflow: hidden;
}

.page-header--svc-hero.has-bg {
    background-color: #0a1f3a;
}


/* Featured photo pinned to the right; slow ambient pan keeps it alive. */

.page-header--svc-hero .page-header__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center right;
    transform: scale(1.06);
    animation: gp-svc-hero-pan 22s ease-in-out infinite alternate;
}

@keyframes gp-svc-hero-pan {
    from {
        transform: scale(1.06) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.13) translate3d(-1.6%, 0, 0);
    }
}


/* Navy gradient: opaque on the left for legible copy, clear on the right
   so the photo reads through — exactly like the reference image. */

.page-header--svc-hero .page-header__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.10) 32%, rgba(10, 37, 64, 0.10) 50%, rgba(10, 37, 64, 0.05) 72%, rgba(10, 37, 64, 0.05) 100%);
}


/* No featured image: keep a clean navy wash with a soft brand glow. */

.page-header--svc-hero:not(.has-bg) .page-header__overlay {
    background: linear-gradient(115deg, rgba(10, 37, 64, 0.35) 0%, transparent 58%);
}

.page-header--svc-hero .page-header__pattern {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at 6% 16%, rgba(10, 37, 64, 0.32) 0%, transparent 42%), radial-gradient(circle at 2% 92%, rgba(10, 37, 64, 0.18) 0%, transparent 40%);
    pointer-events: none;
}

.page-header--svc-hero .container {
    position: relative;
    z-index: 3;
    width: 100%;
}

.svc-hero__content {
    max-width: 600px;
}


/* Eyebrow */

.svc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--color-orange-light);
    margin-bottom: var(--space-md);
}

.svc-hero__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-orange-light);
    box-shadow: 0 0 0 3px rgba(253, 133, 31, 0.16);
    animation: gp-svc-eyebrow-pulse 2.4s ease-in-out infinite;
}

@keyframes gp-svc-eyebrow-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(253, 133, 31, 0.16);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(253, 133, 31, 0.04);
    }
}


/* Title */

.page-header--svc-hero .svc-hero__title {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-md);
    color: var(--color-white);
}


/* Subtitle */

.page-header--svc-hero .svc-hero__subtitle {
    font-size: var(--font-size-base);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    max-width: 480px;
    margin: 0 0 var(--space-xl);
}


/* Feature pills */

.svc-hero__pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-xl);
}

.svc-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.svc-hero__pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    color: var(--color-orange-light);
    background: rgba(253, 133, 31, 0.22);
    border: 1px solid rgba(253, 133, 31, 0.35);
    transition: transform var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.svc-hero__pill-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
}

.svc-hero__pill:hover .svc-hero__pill-icon {
    transform: translateY(-2px);
    background: rgba(253, 133, 31, 0.42);
    box-shadow: 0 8px 18px rgba(253, 133, 31, 0.35);
}


/* Content section keeps its normal top padding. */

.site-main--service .section--single {
    padding-top: var(--space-4xl);
}

@media (max-width: 1024px) {
    .page-header--svc-hero {
        min-height: 0;
    }
    .page-header--svc-hero .page-header__overlay {
        background: linear-gradient(90deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.10) 32%, rgba(10, 37, 64, 0.10) 50%, rgba(10, 37, 64, 0.05) 72%, rgba(10, 37, 64, 0.05) 100%);
    }
    .svc-hero__content {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .page-header--svc-hero {
        padding: var(--space-2xl) 0;
    }
    .page-header--svc-hero .page-header__overlay {
        background: linear-gradient(90deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.10) 32%, rgba(10, 37, 64, 0.10) 50%, rgba(10, 37, 64, 0.05) 72%, rgba(10, 37, 64, 0.05) 100%);
    }
    .svc-hero__pills {
        gap: var(--space-sm) var(--space-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-header--svc-hero .page-header__bg,
    .svc-hero__eyebrow-dot {
        animation: none;
    }
}


/* ── Service-list banner: floating bubbles (decorative, page-services.php) ──
   Sits above the overlay/pattern but below the content (z 2). Purely
   additive — does not alter the existing banner layout or colours. */

.svc-hero__bubbles {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.svc-hero__bubble {
    position: absolute;
    bottom: -80px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0) 72%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    will-change: transform, opacity;
    animation: gp-svc-bubble-rise linear infinite;
}

@keyframes gp-svc-bubble-rise {
    0% {
        transform: translate3d(0, 40px, 0) scale(0.6);
        opacity: 0;
    }
    12% {
        opacity: 0.85;
    }
    85% {
        opacity: 0.45;
    }
    100% {
        transform: translate3d(24px, -520px, 0) scale(1);
        opacity: 0;
    }
}


/* Per-bubble size / position / timing for an organic, modern drift. */

.svc-hero__bubble:nth-child(1) {
    left: 7%;
    width: 42px;
    height: 42px;
    animation-duration: 13s;
    animation-delay: 0s;
}

.svc-hero__bubble:nth-child(2) {
    left: 19%;
    width: 18px;
    height: 18px;
    animation-duration: 9s;
    animation-delay: 2.2s;
}

.svc-hero__bubble:nth-child(3) {
    left: 31%;
    width: 58px;
    height: 58px;
    animation-duration: 17s;
    animation-delay: 1s;
}

.svc-hero__bubble:nth-child(4) {
    left: 44%;
    width: 24px;
    height: 24px;
    animation-duration: 11s;
    animation-delay: 4s;
}

.svc-hero__bubble:nth-child(5) {
    left: 58%;
    width: 14px;
    height: 14px;
    animation-duration: 8s;
    animation-delay: 3s;
}

.svc-hero__bubble:nth-child(6) {
    left: 70%;
    width: 48px;
    height: 48px;
    animation-duration: 15s;
    animation-delay: 0.6s;
}

.svc-hero__bubble:nth-child(7) {
    left: 83%;
    width: 30px;
    height: 30px;
    animation-duration: 12s;
    animation-delay: 5s;
}

.svc-hero__bubble:nth-child(8) {
    left: 92%;
    width: 20px;
    height: 20px;
    animation-duration: 10s;
    animation-delay: 1.8s;
}

@media (prefers-reduced-motion: reduce) {
    .svc-hero__bubble {
        animation: none;
        opacity: 0;
    }
}


/* ============================================
   SINGLE SERVICE — WHY CHOOSE US (dark, 3 + ship + 3)
   Replaces the old .section--stand-out 5-card strip.
   Loaded after the old rules so they win on the cascade.
   ============================================ */

.section--why-us {
    background: #0A2540;
    color: var(--color-white);
    /* padding: var(--space-5xl) 0; */
    position: relative;
    overflow: hidden;
}

.section--why-us::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 18%, rgba(255, 80, 60, 0.06) 0%, transparent 38%), radial-gradient(circle at 88% 82%, rgba(253, 133, 31, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.section--why-us>.container {
    position: relative;
    z-index: 1;
}

.why-us__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--space-3xl);
}

.why-us__eyebrow {
    color: #fd851f;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 var(--space-md);
}

.why-us__heading {
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.18;
    color: var(--color-white);
    margin: 0 0 var(--space-md);
    letter-spacing: -0.005em;
}

.why-us__subtitle {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    max-width: 620px;
    margin: 0 auto;
}


/* 3-column grid: list / image / list */

.why-us__grid {
    display: grid;
    grid-template-columns: 1fr 360px 1fr;
    gap: var(--space-3xl);
    align-items: stretch;
}


/* 3 or fewer visible features → 50/50 split:
   the list stacks vertically on the left, the image fills the right half. */

.why-us__grid--split {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}


/* The image column matches the height of the feature list beside it:
   drop the fixed 520px floor so the row height comes from the content. */


/* Desktop only — below 1025px the grid stacks and the shared responsive
   rules for .why-us__visual take over again. */

@media (min-width: 1025px) {
    .why-us__grid--split .why-us__visual {
        align-self: stretch;
        min-height: 360px;
        height: auto;
    }
    /* Absolutely positioned so the photo's intrinsic height never inflates the
       row — the figure simply fills whatever height the list sets. */
    .why-us__grid--split .why-us__visual img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }
}

.why-us__grid--split .why-us__list {
    justify-content: center;
}

.why-us__grid--split .why-us__list--left .why-us__item {
    text-align: left;
}

.why-us__grid--split .why-us__list--left .why-us__icon {
    right: auto;
    left: 0;
}

.why-us__grid--split .why-us__list--left .why-us__item-title,
.why-us__grid--split .why-us__list--left .why-us__item-text {
    padding-right: 0;
    padding-left: 60px;
}

.why-us__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-md);
}

.why-us__item {
    list-style: none;
    padding: var(--space-lg) 0;
    position: relative;
    transition: transform var(--transition-base);
}


/* Thin divider between items (not below the last one) */

.why-us__item+.why-us__item {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.why-us__item:hover {
    transform: translateY(-3px);
}


/* Left column: text right-aligned, icon top-right (points toward ship) */

.why-us__list--left .why-us__item {
    text-align: right;
}

.why-us__list--left .why-us__icon {
    position: absolute;
    top: var(--space-lg);
    right: 0;
}

.why-us__list--left .why-us__item-title,
.why-us__list--left .why-us__item-text {
    padding-right: 60px;
}


/* Right column: text left-aligned, icon top-left (points toward ship) */

.why-us__list--right .why-us__item {
    text-align: left;
}

.why-us__list--right .why-us__icon {
    position: absolute;
    top: var(--space-lg);
    left: 0;
}

.why-us__list--right .why-us__item-title,
.why-us__list--right .why-us__item-text {
    padding-left: 60px;
}

.why-us__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.why-us__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
}

.why-us__item:hover .why-us__icon {
    color: var(--color-white);
    transform: scale(1.08);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25));
}

.why-us__item-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 var(--space-sm);
    line-height: 1.3;
}

.why-us__item-text {
    font-size: var(--font-size-sm);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}


/* Center ship image */

.why-us__visual {
    margin: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
    position: relative;
    transition: box-shadow var(--transition-base), transform 700ms var(--ease-out-expo);
    align-self: stretch;
    min-height: 520px;
    background: #111;
}

.why-us__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.why-us__visual img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    display: block;
    transition: transform 900ms var(--ease-out-expo);
}

.why-us__visual:hover {
    box-shadow: 0 36px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(253, 133, 31, 0.18);
}

.why-us__visual:hover img {
    transform: scale(1.04);
}


/* ── Responsive ────────────────────────────── */

@media (max-width: 1024px) {
    .why-us__grid,
    .why-us__grid--split {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    /* On mobile/tablet the ship should appear first per the spec */
    .why-us__visual {
        order: -1;
        max-width: 480px;
        margin: 0 auto;
        min-height: 380px;
    }
    .why-us__visual img {
        min-height: 380px;
    }
    /* On stacked layout, mirror both columns to left-aligned */
    .why-us__list--left .why-us__item,
    .why-us__list--right .why-us__item {
        text-align: left;
    }
    .why-us__list--left .why-us__item-title,
    .why-us__list--left .why-us__item-text {
        padding-right: 0;
        padding-left: 60px;
    }
    .why-us__list--left .why-us__icon {
        right: auto;
        left: 0;
    }
}

@media (max-width: 768px) {
    .section--why-us {
        padding: var(--space-4xl) 0;
    }
    .why-us__visual,
    .why-us__visual img {
        min-height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .why-us__item,
    .why-us__icon,
    .why-us__visual,
    .why-us__visual img {
        transition: none;
    }
    .why-us__item:hover,
    .why-us__visual:hover img {
        transform: none;
    }
}


/* ============================================
   SINGLE SERVICE — CERTIFIED & TRUSTED (dark slab)
   Sits between Why Choose Us (Section 6) and
   Testimonials (Section 8). Full-width dark band,
   2 columns x 3 rows, no per-item cards.
   ============================================ */

.section--certified {
    position: relative;
    background: #f5f7fb;
    background-image: radial-gradient(circle at 18% 22%, rgba(253, 133, 31, 0.0) 0%, transparent 40%), radial-gradient(circle at 82% 78%, rgba(52, 91, 130, 0.05) 0%, transparent 42%);
    padding: var(--space-4xl) 0;
    overflow: hidden;
    color: var(--color-gray-800);
}


/* Subtle SVG wave pattern overlay — navy-tinted for the light band */

.cert__wave {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cpath d='M0 40 Q 50 10 100 40 T 200 40' fill='none' stroke='%230066b3' stroke-opacity='0.12' stroke-width='1.2'/%3E%3Cpath d='M0 60 Q 50 30 100 60 T 200 60' fill='none' stroke='%23345B82' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 600px 240px;
    background-repeat: repeat-x;
    background-position: 0 bottom;
    pointer-events: none;
    z-index: 0;
    animation: gp-cert-wave-flow 16s linear infinite;
}


/* Gently drift the wave pattern sideways (one tile = 600px) for a
   seamless flowing-water motion behind the Certified & Trusted cards. */

@keyframes gp-cert-wave-flow {
    from {
        background-position: 0 bottom;
    }
    to {
        background-position: 600px bottom;
    }
}

.section--certified>.container {
    position: relative;
    z-index: 1;
}


/* No panel container in the dark variant — we let the section bg breathe.
   Keep .cert__panel as a width-clamping wrapper only. */

.cert__panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
}

.cert__header {
    text-align: center;
    max-width: 660px;
    margin: 0 auto var(--space-3xl);
}

.cert__eyebrow {
    color: var(--color-sky);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 var(--space-sm);
}

.cert__heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-navy-dark);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.005em;
}


/* Animated accent line */

.cert__accent {
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-sky) 0%, var(--color-navy) 100%);
    border-radius: var(--radius-full);
    margin: var(--space-md) auto var(--space-md);
    position: relative;
    overflow: hidden;
}

.cert__accent::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
    animation: gp-cert-shimmer 2.6s ease-in-out infinite;
}

@keyframes gp-cert-shimmer {
    0% {
        left: -40%;
    }
    100% {
        left: 100%;
    }
}

.cert__subtitle {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin: var(--space-md) 0 0;
}


/* Single row of 6 cards (matches certificate.png) */

.cert__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
}


/* Fixed-width cards so a small, variable set (2–4) stays centred as one
   row rather than stretching across the full width. */

.cert__grid>.cert__card {
    flex: 0 1 200px;
}

.cert__card {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-md);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.cert__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(253, 133, 31, 0.30);
}

.cert__card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(52, 91, 130, 0.10) 0%, rgba(52, 91, 130, 0.04) 100%);
    color: var(--color-navy-dark);
    border: 1px solid rgba(52, 91, 130, 0.16);
    transition: transform var(--transition-base), color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.cert__card-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
}

.cert__card:hover .cert__card-icon {
    transform: scale(1.08);
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
    color: var(--color-white);
    box-shadow: 0 10px 24px rgba(52, 91, 130, 0.28);
}


/* Uploaded custom icon image — keep the round badge but show the artwork on a
   clean white field (don't navy-fill it on hover, since an image won't recolor). */

.cert__card-icon--img {
    background: var(--color-white);
    border-color: var(--color-gray-200);
    overflow: hidden;
}

.cert__card-icon--img img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.cert__card:hover .cert__card-icon--img {
    background: var(--color-white);
    box-shadow: 0 10px 24px rgba(52, 91, 130, 0.18);
}

.cert__card-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-navy-dark);
    margin: 0;
    line-height: 1.4;
}


/* Logo cards (ISO / BIMCO / FONASBA) show a contained image instead of the
   round icon badge. Box height matches .cert__card-icon so rows stay aligned. */

.cert__card-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: auto;
    padding: 4px;
}

.cert__card-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* ── Auto-scroll marquee (7+ cards) ──────────────
   When the combined card count exceeds 6, single-service.php wraps the grid in
   .cert__slider and switches it to .cert__grid--marquee with a duplicated card
   set. Cards use right margin (not gap) so a -50% translate lands exactly on the
   second copy → a seamless right-to-left loop. Pauses on hover. */

.cert__slider {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.cert__grid--marquee {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    gap: 0;
    will-change: transform;
    animation: cert-marquee var(--cert-marquee-duration, 32s) linear infinite;
}

.cert__grid--marquee>.cert__card {
    flex: 0 0 200px;
    margin-right: var(--space-lg);
}

.cert__slider:hover .cert__grid--marquee {
    animation-play-state: paused;
}

@keyframes cert-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}


/* ── Responsive ────────────────────────────── */

@media (max-width: 1024px) {
    .cert__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .section--certified {
        padding: var(--space-3xl) 0;
    }
}

@media (max-width: 560px) {
    .cert__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cert__wave,
    .cert__card,
    .cert__card-icon,
    .cert__accent::after {
        transition: none;
        animation: none;
    }
    .cert__card:hover,
    .cert__card:hover .cert__card-icon {
        transform: none;
    }
    /* Stop the marquee; show all cards as a static centered, wrapping row and
       drop the duplicated (aria-hidden) copy so nothing appears twice. */
    .cert__grid--marquee {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        gap: var(--space-lg);
    }
    .cert__grid--marquee>.cert__card {
        margin-right: 0;
    }
    .cert__grid--marquee>[aria-hidden="true"] {
        display: none;
    }
}


/* ============================================
   SERVICES LISTING — LOGISTICS GRID + PROCESS TIMELINE
   (page-services.php "logistics" layout)
   ============================================ */


/* Light grey section background */

.section--svc-logistics {
    background: #f5f5f5;
    padding: var(--space-5xl) 0;
    padding-top: 66px;
    padding-bottom: 86px;
    overflow: hidden;
}


/* Centered eyebrow/heading variant */

.svc-page-header--center {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-3xl);
}

.svc-page-header--center .section-label {
    justify-content: center;
}

.svc-page-header--center .section-title {
    color: var(--color-navy-dark);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin-top: var(--space-sm);
}


/* Modern 3-col service cards (matches servie-card.png): photo on top,
   white body with title + description, and a circular arrow button. */

.svc-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 320ms var(--ease-out-expo), box-shadow 320ms var(--ease-out-expo), border-color 320ms var(--ease-out-expo);
}


/* Whole-card link overlay; the arrow sits above it via a higher z-index. */

.svc-card__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.svc-card:hover {
    transform: translateY(0px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(253, 133, 31, 0.25);
}

.svc-card__media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--color-gray-200);
}

.svc-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 700ms var(--ease-out-expo);
    will-change: transform;
}

.svc-card:hover .svc-card__img {
    transform: scale(1.07);
}


/* Modern image overlay: a constant bottom shade for depth + badge
   legibility, plus a brand-blue wash that fades in when the card link
   (.svc-card__link) is hovered. Sits above the photo, below the badge. */

.svc-card__media::before,
.svc-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.svc-card__media::after {
    background: linear-gradient(180deg, rgba(13, 27, 42, 0) 38%, rgba(13, 27, 42, 0.55) 100%);
}

.svc-card__media::before {
    background: linear-gradient(135deg, rgba(253, 133, 31, 0.55) 0%, rgba(253, 133, 31, 0) 62%);
    opacity: 0;
    transition: opacity 450ms var(--ease-out-expo);
}

.svc-card__link:hover~.svc-card__media::before,
.svc-card:hover .svc-card__media::before {
    opacity: 1;
}


/* Number badge, top-left of the photo */

.svc-card__num {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    background: #fd851f;
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(13, 27, 42, 0.35);
}

.svc-card__body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Right padding leaves room for the circular arrow button. */
    padding: var(--space-lg) calc(var(--space-lg) + 48px) var(--space-lg) var(--space-lg);
}

.svc-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-navy-dark);
    line-height: 1.3;
    margin: 0 0 8px;
    transition: color var(--transition-base);
}

.svc-card:hover .svc-card__title {
    color: var(--color-sky);
}

.svc-card__excerpt {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-gray-600);
    margin: 0;
    /* Clamp to ~2 lines for a clean, uniform grid */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Plain line arrow, bottom-right of the body.
   pointer-events:none so clicks fall through to the full-card link. */

.svc-card__arrow {
    position: absolute;
    right: var(--space-lg);
    bottom: var(--space-lg);
    z-index: 3;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-sky);
    transition: transform var(--transition-base), color var(--transition-base);
}

.svc-card:hover .svc-card__arrow {
    transform: translateX(4px);
    color: var(--color-orange-dark);
}


/* Extra service cards (beyond the first 6) stay hidden until the
   "show more" toggle is clicked — then the grid gets .is-expanded. */

.svc-cards-grid .svc-card--more {
    display: none;
}

.svc-cards-grid.is-expanded .svc-card--more {
    display: flex;
}


/* "Show more / show less" toggle row (only rendered when > 6 services) */

.svc-cards-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2xl);
}


/* The toggle is a <button> styled as a .btn — reset native chrome. */

.svc-cards-more__toggle {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.svc-cards-more .btn svg {
    transition: transform var(--transition-fast);
}

.svc-cards-more .btn:hover svg {
    transform: translateX(3px);
}


/* ── Process Timeline ───────────────────────── */

.section--svc-process {
    background: var(--color-white);
    padding: var(--space-5xl) 0;
}

.svc-process__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-3xl);
}

.svc-process__eyebrow {
    color: #fd851f;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 var(--space-sm);
}

.svc-process__heading {
    color: var(--color-navy-dark);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.18;
    margin: 0;
    letter-spacing: -0.005em;
}


/* Horizontal timeline */

.svc-process__timeline {
    list-style: none;
    margin: var(--space-3xl) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    position: relative;
    counter-reset: gp-svc-step;
}


/* The horizontal line behind the dots */

.svc-process__timeline::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: var(--color-gray-300);
    z-index: 0;
}

.svc-process__step {
    list-style: none;
    text-align: center;
    position: relative;
    z-index: 1;
    padding-top: 36px;
    transition: transform var(--transition-base);
}

.svc-process__step:hover {
    transform: translateY(-6px);
}

.svc-process__step-label {
    display: block;
    color: var(--color-gray-500);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-md);
}

.svc-process__dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fd851f;
    margin: 0 auto var(--space-lg);
    box-shadow: 0 0 0 4px rgba(253, 133, 31, 0.15);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    position: relative;
    z-index: 2;
}

.svc-process__step:hover .svc-process__dot {
    box-shadow: 0 0 0 6px rgba(253, 133, 31, 0.25), 0 0 18px rgba(253, 133, 31, 0.5);
    transform: scale(1.15);
}


/* Large faded background step number */

.svc-process__step-num {
    display: block;
    font-size: 4.5rem;
    font-weight: 700;
    color: rgba(13, 27, 42, 0.06);
    line-height: 1;
    margin-bottom: -8px;
    transition: color var(--transition-base);
}

.svc-process__step:hover .svc-process__step-num {
    color: rgba(253, 133, 31, 0.12);
}

.svc-process__step-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-navy-dark);
    margin: 0 0 var(--space-sm);
    line-height: 1.3;
}

.svc-process__step-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.6;
    margin: 0;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}


/* ── Responsive ────────────────────────────── */

@media (max-width: 1024px) {
    .svc-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .svc-process__timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl) var(--space-xl);
    }
    .svc-process__timeline::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .section--svc-logistics,
    .section--svc-process {
        padding: var(--space-3xl) 0;
    }
    .svc-cards-grid {
        grid-template-columns: 1fr;
    }
    .svc-process__timeline {
        grid-template-columns: 1fr;
    }
    .svc-process__step-num {
        font-size: 3.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-card,
    .svc-card__img,
    .svc-card__arrow,
    .svc-process__step,
    .svc-process__dot,
    .svc-process__step-num {
        transition: none;
    }
    .svc-card:hover,
    .svc-card:hover .svc-card__img,
    .svc-process__step:hover,
    .svc-process__step:hover .svc-process__dot {
        transform: none;
    }
}


/* ============================================
   SERVICE DETAIL HERO — CINEMATIC BACKGROUND VIDEO
   Stacking inside .page-header--svc-hero:
     z 0: .page-header__bg      (poster image — visible until video plays)
     z 0: .page-header__video   (full-cover MP4, sits over the image)
     z 1: .page-header__overlay (dark gradient for legibility)
     z 2: .page-header__pattern (subtle dot/glow texture)
     z 3: .container content    (breadcrumb, title, CTA, stats — unchanged)
   ============================================ */

.page-header--svc-hero .page-header__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    /* Tiny scale prevents 1px sub-pixel edges that some browsers show
       on full-cover video; also gives a faint cinematic punch. */
    transform: scale(1.01);
    pointer-events: none;
    background: #0a1f3a;
}


/* When the video layer is present, hide its image-fallback sibling so the
   hover-zoom on the still image doesn't fight the playing video. The poster
   attribute keeps a still frame visible until the video buffer is ready. */

.page-header--svc-hero.has-video .page-header__bg {
    display: none;
}


/* Slightly deeper overlay when video is playing — pure dark gradient reads
   well across many video frames, ensuring the title/breadcrumbs/CTA stay
   legible regardless of which frame is on screen. */

.page-header--svc-hero.has-video .page-header__overlay {
    background: linear-gradient(135deg, rgba(10, 37, 64, 0.86) 0%, rgba(10, 37, 64, 0.66) 55%, rgba(10, 37, 64, 0.88) 100%);
}


/* Subtle cinematic vignette on top of the video for that 'film' edge feel. */

.page-header--svc-hero.has-video::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
    z-index: 1;
}


/* Mobile/tablet: keep the video but lower preload weight via the markup
   attribute we already set (preload="metadata"). No CSS height tweak needed —
   the existing .page-header padding rules already keep the hero responsive. */

@media (max-width: 768px) {
    .page-header--svc-hero .page-header__video {
        /* Slightly lower contrast adjustment by deepening the overlay below */
    }
    .page-header--svc-hero.has-video .page-header__overlay {
        background: linear-gradient(90deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.10) 32%, rgba(10, 37, 64, 0.10) 50%, rgba(10, 37, 64, 0.05) 72%, rgba(10, 37, 64, 0.05) 100%);
    }
}


/* Reduced motion / data-saver: pause the video, fall back to the poster.
   The poster attribute on the <video> already provides the still image. */

@media (prefers-reduced-motion: reduce) {
    .page-header--svc-hero .page-header__video {
        /* Browsers honor the user preference; we also visually quiet the
           transform so the hero is fully still. */
        transform: none;
    }
}


/* ============================================
   HOME — SERVICES SLIDER CARDS: HOVER IMAGE REVEAL
   (#services-track .services-slide__card)
   On hover: featured image fades in as background,
   dark overlay + white text keep things legible.
   ============================================ */


/* Bg layer + overlay sit behind content and behind the existing
   top accent line. The card's existing ::before stays in place. */

.services-slide__card .services-slide__bg,
.services-slide__card .services-slide__bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 420ms var(--ease-out-expo);
    border-radius: inherit;
}

.services-slide__card .services-slide__bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.04);
    transition: opacity 420ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}

ul.ym-service-list.is-visible {
    display: grid;
    grid-template-columns: auto auto;
}

.services-slide__card .services-slide__bg-overlay {
    background: linear-gradient(180deg, rgba(10, 27, 48, 0.55) 0%, rgba(10, 27, 48, 0.85) 100%);
}


/* Make sure the existing top accent line + the inner content sit
   above the new bg layer. */

.services-slide__card::before {
    z-index: 3;
}

.services-slide__icon,
.services-slide__title,
.services-slide__excerpt,
.services-slide__link {
    position: relative;
    z-index: 2;
    transition: color 320ms ease;
}


/* Default state: bg/overlay invisible, content uses original colors. */


/* Hover: bg fades in + zooms slightly, overlay deepens, all card text
   shifts to white so it stays readable on top of the image. */

.services-slide__card:hover .services-slide__bg {
    opacity: 1;
    transform: scale(1);
}

.services-slide__card:hover .services-slide__bg-overlay {
    opacity: 1;
}

.services-slide__card:hover .services-slide__title,
.services-slide__card:hover .services-slide__link {
    color: var(--color-white);
}

.services-slide__card:hover .services-slide__excerpt {
    color: rgba(255, 255, 255, 0.88);
}

.services-slide__card:hover .services-slide__icon {
    color: var(--color-white);
}


/* If the icon is rendered as an image (custom upload), invert it to
   white so it stays visible on the dark hover overlay. */

.services-slide__card:hover .services-slide__icon-img {
    filter: brightness(0) invert(1);
}


/* Touch devices (no hover): keep the original light card. The image
   reveal is purely a desktop-hover affordance — touch users still
   tap the Learn More link. */

@media (hover: none) {
    .services-slide__card .services-slide__bg,
    .services-slide__card .services-slide__bg-overlay {
        display: none;
    }
}


/* Reduced motion: no scale + no fade transitions. The bg can still
   appear on hover, just without animation. */

@media (prefers-reduced-motion: reduce) {
    .services-slide__card .services-slide__bg,
    .services-slide__card .services-slide__bg-overlay,
    .services-slide__icon,
    .services-slide__title,
    .services-slide__excerpt,
    .services-slide__link {
        transition: none;
    }
    .services-slide__card .services-slide__bg {
        transform: none;
    }
}


/* ============================================
   HOME — SERVICES FLIP CARDS
   Image + number + icon + title; flips on hover/focus
   to reveal a short description + Read More. Scrolls
   horizontally (4 per view) when there are 5+ cards.
   ============================================ */

.section--services-cards {
    background: #f5f5f5;
}

.svc-cards__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    margin: 0 0 var(--space-2xl);
}

.svc-cards__head-text {
    max-width: 680px;
}

.svc-cards__head-text .section-label {
    justify-content: flex-start;
}


/* Top-right slider nav (square buttons, per the reference) */

.svc-cards__nav {
    display: inline-flex;
    gap: 10px;
    flex-shrink: 0;
    opacity: 0;
}

.svc-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    /* Room under the cards for the scrollbar so it never crowds them. */
    padding-bottom: 18px;
    /* No scroll-snap: the continuous auto-scroll advances the track a fraction
       of a pixel per frame, and any snap (mandatory OR proximity) would keep
       tugging it back to a card edge, killing the glide. The arrow tween lands
       on exact card boundaries on its own, so alignment stays correct. */
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    /* The native bar is hidden — the custom .svc-scrollbar below the track
       replaces it. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}


/* WebKit / Blink scrollbar (Chrome, Edge, Safari) */

.svc-cards::-webkit-scrollbar {
    height: 0;
    width: 0;
    display: none;
}


/* ── Custom drag scrollbar (injected by JS under the card track) ──
   Hidden until the cursor enters the section / a card takes focus — the same
   moment the auto-glide pauses — so it is easy to grab and drag. */

.svc-scrollbar {
    width: 100%;
    max-width: var(--container-max);
    margin: 4px auto 0;
    padding: 0 var(--container-padding);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.section--services-cards:hover .svc-scrollbar,
.section--services-cards:focus-within .svc-scrollbar,
.svc-scrollbar.is-dragging {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.svc-scrollbar__track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(10, 37, 64, 0.12);
    cursor: pointer;
    touch-action: none;
}

.svc-scrollbar__thumb {
    position: absolute;
    top: -3px;
    left: 0;
    height: 12px;
    min-width: 44px;
    border-radius: 999px;
    background: var(--color-orange);
    transition: background 0.2s ease;
    will-change: transform;
}

.svc-scrollbar__track:hover .svc-scrollbar__thumb,
.svc-scrollbar.is-dragging .svc-scrollbar__thumb {
    background: var(--color-orange-dark);
}


/* Touch devices have no hover — keep the bar permanently visible there. */

@media (hover: none) {
    .svc-scrollbar {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-scrollbar {
        transition: none;
        transform: none;
    }
}


/* Square nav buttons (top-right of the section) */

.svc-cards__arrow {
    width: 46px;
    height: 46px;
    border: 1px solid var(--color-orange);
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.svc-cards__arrow:hover:not(:disabled) {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #fff;
    transform: translateY(-2px);
}

.svc-cards__arrow svg {
    width: 20px;
    height: 20px;
}

.svc-cards__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.svc-card {
    flex: 0 0 calc((100% - 3 * 24px) / 4);
    /* ≤4 cards fill the row */
    height: 380px;
    scroll-snap-align: start;
    cursor: pointer;
    border-radius: 0px;
    outline: none;
}


/* Full-bleed track, but the first card lines up with the container gutter.
   The padding is part of the scroll area, so it slides away (cards fill the
   gutter) as you scroll, while the row still bleeds off the right edge. */

.svc-cards--scroll {
    padding-left: max(var(--container-padding), calc((100% - var(--container-max)) / 2 + var(--container-padding)));
    padding-right: 0;
    scroll-padding-left: max(var(--container-padding), calc((100% - var(--container-max)) / 2 + var(--container-padding)));
}


/* 5+ cards: show ~4.5 per view so the next card peeks (half) — Owl-style. */

.svc-cards--scroll .svc-card {
    flex-basis: calc((100% - 3 * 24px) / 3.5);
}


/* Last card keeps a container-width gutter on its right at the scroll end.
   A margin is used (not container padding-right, which flex scroll containers
   ignore at the end). 100vw keeps the value correct on the card itself. */

.svc-cards--scroll .svc-card:last-child {
    margin-right: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
}

.svc-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(10, 37, 64, 0.20);
    /* Gentle lift on hover instead of the old 3D flip. */
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
    will-change: transform;
}

.svc-card:hover .svc-card__inner,
.svc-card:focus-within .svc-card__inner {
    transform: translateY(-6px);
    box-shadow: 0 32px 70px rgba(10, 37, 64, 0.34);
}

.svc-card__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9;
}


/* ── Front face ── */

.svc-card__front {
    justify-content: flex-end;
}

.svc-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s ease;
}

.svc-card:hover .svc-card__bg {
    transform: scale(1.08);
}

.svc-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 37, 64, 0.15) 0%, rgba(10, 37, 64, 0.10) 32%, rgba(10, 37, 64, 0.10) 50%, rgba(10, 37, 64, 0.05) 72%, rgba(10, 37, 64, 0.05) 100%);
}

.svc-card__front-body {
    position: relative;
    z-index: 2;
    padding: 24px;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* Hide the front icon + title while the info panel is shown (it repeats them). */

.svc-card:hover .svc-card__front-body,
.svc-card:focus-within .svc-card__front-body {
    opacity: 0;
    transform: translateY(12px);
}

.svc-card__icon {
    display: block;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    color: #fff;
}

.svc-card__icon svg {
    width: 100%;
    height: 100%;
}

#services .svc-card__title {
    color: #fff;
}

.svc-card__title {
    margin: 0;
    color: #fd851f;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 10px;
}


/* ── Info panel (revealed on hover/focus — no flip) ── */

.svc-card__back {
    justify-content: flex-start;
    gap: 12px;
    padding: 28px 26px;
    background: linear-gradient(160deg, rgba(10, 37, 64, 0.96) 0%, rgba(20, 54, 92, 0.96) 100%);
    color: #fff;
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.svc-card:hover .svc-card__back,
.svc-card:focus-within .svc-card__back {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* Panel content drifts up a touch later for a soft, layered reveal. */

.svc-card__back>* {
    transform: translateY(10px);
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.06s;
}

.svc-card:hover .svc-card__back>*,
.svc-card:focus-within .svc-card__back>* {
    transform: translateY(0);
}

.svc-card__back .svc-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.svc-card__back-title {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.svc-card__desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.80);
    font-size: 0.95rem;
    line-height: 1.7;
}

.svc-card__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-orange);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.svc-card__more svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

.svc-card__more:hover svg {
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .svc-card {
        flex-basis: calc((100% - 2 * 24px) / 3);
    }
    .svc-cards--scroll .svc-card {
        flex-basis: calc((100% - 3 * 24px) / 3.5);
    }
}

@media (max-width: 768px) {
    .svc-card {
        flex-basis: calc((100% - 24px) / 2);
        height: 340px;
    }
    .svc-cards--scroll .svc-card {
        flex-basis: calc((100% - 2 * 24px) / 2.5);
    }
}

@media (max-width: 640px) {
    .svc-cards__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
}

@media (max-width: 560px) {
    .svc-card {
        flex-basis: 82%;
        height: 360px;
    }
    .svc-cards--scroll .svc-card {
        flex-basis: 86%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-card__inner,
    .svc-card__bg,
    .svc-card__face,
    .svc-card__back,
    .svc-card__back>*,
    .svc-card__front-body,
    .svc-card__more svg {
        transition: none;
    }
    .svc-card:hover .svc-card__inner,
    .svc-card:focus-within .svc-card__inner {
        transform: none;
    }
}


/* ============================================
   HOME — SERVICES SHOWCASE (split-screen, legacy)
   Left: dark stage with cycling bg image and big
   "OUR SERVICES" overlay. Right: numbered active
   service + description + "+" nav. Auto-cycles.
   ============================================ */

.section--services-showcase {
    background: #f5f7fb;
    padding: var(--space-5xl) 0;
}

.svc-showcase__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--space-3xl);
}

.svc-showcase__header .section-label {
    justify-content: center;
}

.svc-showcase__header .section-title {
    color: var(--color-navy-dark);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin-top: var(--space-sm);
}

.svc-showcase__header .section-subtitle {
    color: var(--color-gray-600);
    margin-top: var(--space-md);
}


/* Split layout — fills the viewport while pinned so the
   storytelling scroll feels deliberate and cinematic. */

.svc-showcase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: stretch;
    min-height: 500px;
}


/* CSS-driven .is-active / .is-passed transitions handle the visual
   crossfade — no JS inline tween overrides needed. */


/* ── LEFT: STAGE ──────────────────────────── */

.svc-showcase__stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    /* When pinned, the stage fills the available column height (set by
       .svc-showcase min-height). On narrow screens it falls back to a
       square aspect ratio via the responsive @media block below. */
    height: 100%;
    min-height: 480px;
    background: #0d1b2a;
    /* box-shadow: 0 30px 60px -20px rgba(13, 27, 42, 0.4); */
}


/* Each item has a stage image stacked on top — all hidden except the
   active one which fades in. Crossfade via opacity transition. */

.svc-showcase__stage-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 800ms var(--ease-out-expo), transform 6000ms linear;
    transform: scale(1);
    z-index: 0;
}

.svc-showcase__stage-img.is-active {
    opacity: 1;
    /* Subtle Ken Burns on the active frame for cinematic feel. */
    transform: scale(1.05);
}

.svc-showcase__stage-overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(135deg, rgba(8, 17, 32, 0.2) 0%, rgba(13, 27, 42, 0.2) 55%, rgba(8, 17, 32, 0.2) 100%); */
    z-index: 1;
    pointer-events: none;
}


/* ── RIGHT: PANEL ──────────────────────────── */

.svc-showcase__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(var(--space-md), 2vw, var(--space-xl)) 0;
    min-height: 100%;
}


/* All items stacked. The active one sits centered with translateY(-50%)
   (because we're anchoring at top: 50% of the panel). Items below sit
   offset DOWN (40px); items already passed sit offset UP (-40px).
   Combined with opacity transitions this gives the "scroll-driven
   slide-from-top" feel. Each item is now its own card with an
   alternative-colour surface (white on the light section bg). */

.svc-showcase__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
    align-items: center;
    opacity: 0;
    transform: translateY(calc(-50% + 40px));
    pointer-events: none;
    transition: opacity 700ms var(--ease-out-expo), transform 800ms var(--ease-out-expo), box-shadow 320ms var(--ease-out-expo);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform-origin: top center;
    will-change: transform, opacity;
    /* Card surface (alternative to the section bg) */
    background: var(--color-white);
    border: 1px solid rgba(13, 27, 42, 0.06);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-lg), 2.4vw, var(--space-2xl));
    box-shadow: 0 18px 40px -22px rgba(13, 27, 42, 0.15);
    height: 500px;
}


/* Items that have already been visited slide up + fade out (so the
   visual feels like a top-down stack moving through the focus point). */

.svc-showcase__item.is-passed {
    opacity: 0;
    transform: translateY(calc(-50% - 40px));
}

.svc-showcase__item.is-active {
    opacity: 1;
    transform: translateY(-50%);
    pointer-events: auto;
    box-shadow: none;
}

span.svc-showcase__num {
    position: relative;
    bottom: 140px;
    opacity: 0.03;
}

.svc-showcase__num {
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    font-weight: 700;
    color: var(--color-navy-dark);
    line-height: 0.9;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.svc-showcase__title {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 700;
    color: var(--color-navy-dark);
    letter-spacing: 0.04em;
    line-height: 1.25;
    margin: 0 0 var(--space-sm);
}

.svc-showcase__excerpt {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-gray-600);
    margin: 0 0 var(--space-lg);
    max-width: 36ch;
}


/* Per-card "Read More" link — text + line + small + chip,
   matching the MVP-style minimal corporate look. */

.svc-showcase__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--color-orange);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color var(--transition-base);
    position: relative;
    padding-bottom: 4px;
    /* Underline grows on hover via a pseudo element */
}

.svc-showcase__more::after {
    content: '';
    position: absolute;
    left: 0;
    right: 28px;
    /* leave room for the arrow */
    bottom: 0;
    height: 1px;
    background: var(--color-orange);
    transform: scaleX(1);
    transform-origin: left center;
    transition: background var(--transition-base);
}

.svc-showcase__more-text {
    display: inline-block;
    transition: transform 320ms var(--ease-out-expo);
}


/* Plain orange arrow — no circular chip. */

.svc-showcase__more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-orange);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.svc-showcase__more:hover {
    color: var(--color-orange-dark);
}

.svc-showcase__more:hover::after {
    background: var(--color-orange-dark);
}

.svc-showcase__more:hover .svc-showcase__more-text {
    transform: translateX(-3px);
}

.svc-showcase__more:hover .svc-showcase__more-icon {
    color: var(--color-orange-dark);
    transform: translateX(4px);
}


/* ── Responsive ────────────────────────────── */

@media (max-width: 1024px) {
    .svc-showcase {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .svc-showcase__stage {
        aspect-ratio: 16 / 10;
    }
    .svc-showcase__panel {
        min-height: 0;
    }
    .svc-showcase__item {
        column-gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .section--services-showcase {
        padding: var(--space-3xl) 0;
    }
    .svc-showcase__stage {
        aspect-ratio: 4 / 3;
    }
    .svc-showcase__num {
        font-size: clamp(2.8rem, 12vw, 4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-showcase__stage-img,
    .svc-showcase__item {
        transition: none;
    }
    .svc-showcase__stage-img.is-active {
        transform: none;
    }
    .svc-showcase__item.is-active {
        transform: translateY(-50%);
    }
}

.svc-showcase__stage {
    grid-column: 1;
    grid-row: 1;
}

.svc-showcase__panel {
    grid-column: 2;
    grid-row: 1;
}


/* Panel is a relative container for the absolutely-positioned items
   that fade/slide in and out as the carousel cycles. */

.svc-showcase__panel {
    min-height: 100%;
    padding: var(--space-3xl) 0;
}


/* Mobile/tablet: stack stage above panel. */

@media (max-width: 1023px) {
    .svc-showcase {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        min-height: 0;
    }
    .svc-showcase__stage {
        grid-column: 1;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
    .svc-showcase__panel {
        grid-column: 1;
        min-height: 360px;
        padding: var(--space-md) 0;
    }
}


/* ============================================
   SINGLE SERVICE — OVERVIEW (image + coverage cards)
   ============================================ */

.section--single-service {
    background: var(--color-white);
}

.svc-overview__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.svc-overview__header {
    margin-bottom: 0;
}

.svc-overview__heading {
    font-size: var(--font-size-4xl);
    font-weight: 600;
    color: var(--color-gray-900);
    line-height: 1.2;
    margin: var(--space-sm) 0 0;
}

.svc-overview__subtitle {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-gray-600);
    margin: var(--space-md) 0 0;
}


/* "Our Quality Services" intro band — large heading on the left, intro
   paragraph on the right, vertical divider between (matches service-quality.png). */

.section--svc-quality {
    padding: var(--space-4xl) var(--space-4xl) 0px;
}

.svc-quality {
    display: grid;
    grid-template-columns: minmax(240px, 0.85fr) 2fr;
    gap: var(--space-2xl);
    align-items: center;
}

.svc-quality__heading {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.08;
    color: var(--color-navy-dark);
}

.svc-quality__text {
    margin: 0;
    padding-left: var(--space-2xl);
    border-left: 1px solid var(--color-gray-200);
    font-size: var(--font-size-lg);
    line-height: 1.75;
    color: var(--color-gray-600);
}

.svc-overview__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px var(--space-lg);
}


/* .postid-77
.svc-overview__cards, .postid-18 .svc-overview__cards, .postid-76 .svc-overview__cards, .postid-19  .svc-overview__cards {

    grid-template-columns: repeat(2, 1fr);

} */

.svc-cov-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
    align-items: start;
    align-content: start;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.svc-cov-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-sky);
    box-shadow: var(--shadow-card-hover);
}

.svc-cov-card__icon {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: rgba(253, 133, 31, 0.08);
    color: var(--color-sky);
    transition: background var(--transition-base), color var(--transition-base);
}

.svc-cov-card__icon svg {
    width: 26px;
    height: 26px;
}

.svc-cov-card:hover .svc-cov-card__icon {
    background: var(--color-sky);
    color: var(--color-white);
}

section#ports p {
    text-align: center;
}

section#ports .ports-bottom-text.is-visible p {
    margin-top: 20px;
}

.svc-cov-card__title {
    grid-column: 2;
    grid-row: 1;
    /* Reserve two lines so single- and double-line titles push their
       paragraph to the same Y across cards, keeping every card aligned. */
    min-height: calc(var(--font-size-lg) * 1.3 * 2);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.3;
    margin: 0;
    display: flex;
    align-items: center;
}

.svc-cov-card__text {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: var(--font-size-sm);
    line-height: 1.65;
    color: var(--color-gray-500);
    margin: 0;
}

.svc-overview__intro {
    margin-top: var(--space-2xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--color-gray-200);
}

@media (max-width: 1024px) {
    .svc-overview__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .svc-quality {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .svc-quality__text {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .svc-overview__cards {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   SERVICE DETAIL — orange accent (#fd851f) for icons & buttons.
   Scoped to .site-main--service so it only affects single-service.php.
   ============================================ */

.site-main--service {
    --gp-accent: #fd851f;
    --gp-accent-dark: #e6760f;
}


/* Overview coverage-card icons + arrow */

.site-main--service .svc-cov-card__icon {
    background: rgba(253, 133, 31, 0.12);
    color: var(--gp-accent);
}

.site-main--service .svc-cov-card:hover {
    border-color: var(--gp-accent);
}

.site-main--service .svc-cov-card:hover .svc-cov-card__icon {
    background: var(--gp-accent);
    color: var(--color-white);
}


/* Hero banner feature-pill icons */

.site-main--service .svc-hero__pill-icon {
    color: var(--gp-accent);
    background: rgba(253, 133, 31, 0.18);
    border-color: rgba(253, 133, 31, 0.40);
}

.site-main--service .svc-hero__pill:hover .svc-hero__pill-icon {
    background: rgba(253, 133, 31, 0.34);
    box-shadow: 0 8px 18px rgba(253, 133, 31, 0.35);
}


/* Why Choose Us icons (dark section) */

.site-main--service .why-us__icon {
    color: var(--gp-accent);
}

.site-main--service .why-us__item:hover .why-us__icon {
    color: var(--gp-accent);
    filter: drop-shadow(0 0 8px rgba(253, 133, 31, 0.40));
}


/* Certified & Trusted card icons */

.site-main--service .cert__card-icon {
    background: linear-gradient(135deg, rgba(253, 133, 31, 0.16) 0%, rgba(253, 133, 31, 0.06) 100%);
    color: var(--gp-accent);
    border-color: rgba(253, 133, 31, 0.22);
}

.site-main--service .cert__card:hover .cert__card-icon {
    background: linear-gradient(135deg, var(--gp-accent) 0%, var(--gp-accent-dark) 100%);
    color: var(--color-white);
}


/* Final CTA button */

.site-main--service .cta-btn {
    background: var(--gp-accent);
    border-color: var(--gp-accent);
    color: var(--color-white);
}

.site-main--service .cta-btn:hover {
    background: var(--gp-accent-dark);
    border-color: var(--gp-accent-dark);
    color: var(--color-white);
}


/* ============================================
   GUEST EXPERIENCE CENTER (luxury glass cards + doc viewer)
   ============================================ */

.gec {
    --gec-gold: #c9a44c;
    --gec-gold-light: #e6c878;
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 9vw, 130px) 0;
    background: var(--color-navy-dark, #1A3050);
    isolation: isolate;
}

.gec__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: radial-gradient(120% 90% at 80% -10%, rgba(201, 164, 76, 0.18) 0%, rgba(201, 164, 76, 0) 55%), radial-gradient(90% 80% at 0% 110%, rgba(52, 91, 130, 0.55) 0%, rgba(52, 91, 130, 0) 60%), linear-gradient(160deg, #12243d 0%, #0d1b2a 55%, #0a1622 100%);
}


/* Subtle ocean-wave texture overlaid on the gradient. */

.gec__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.5'%3E%3Cpath d='M0 100 C150 40 300 160 450 100 C600 40 750 160 900 100 C1050 40 1200 160 1350 100'/%3E%3Cpath d='M0 140 C150 80 300 200 450 140 C600 80 750 200 900 140 C1050 80 1200 200 1350 140'/%3E%3Cpath d='M0 60 C150 0 300 120 450 60 C600 0 750 120 900 60 C1050 0 1200 120 1350 60'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 1200px auto;
    background-repeat: repeat;
    pointer-events: none;
}

.gec__container {
    position: relative;
    z-index: 1;
}

.gec__header {
    max-width: 720px;
    margin: 0 auto clamp(40px, 5vw, 64px);
    text-align: center;
}

.gec__label {
    justify-content: center;
    margin-bottom: 22px;
}

.gec__label .section-label__line {
    width: 34px;
    /* background: linear-gradient(90deg, transparent, var(--gec-gold)); */
}

.gec__label .section-label__line:last-child {
    /* background: linear-gradient(90deg, var(--gec-gold), transparent); */
}

.gec__label .section-label__text {
    /* color: var(--gec-gold-light); */
    letter-spacing: 0.18em;
}

.gec__title {
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.12;
    color: #fff;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.gec__subtitle {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.gec__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.4vw, 32px);
}


/* ---- Glassmorphism card ---- */

.gec-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 3vw, 40px);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(5, 12, 22, 0.45);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}

.gec-card__glow {
    position: absolute;
    top: -40%;
    right: -30%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 164, 76, 0.35) 0%, rgba(201, 164, 76, 0) 70%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.gec-card:hover {
    transform: translateY(-10px);
    border-color: rgba(201, 164, 76, 0.55);
    box-shadow: 0 34px 80px rgba(5, 12, 22, 0.6);
}

.gec-card:hover .gec-card__glow {
    opacity: 1;
}

.gec-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 24px;
    font-size: 30px;
    line-height: 1;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(201, 164, 76, 0.22), rgba(201, 164, 76, 0.06));
    border: 1px solid rgba(201, 164, 76, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.gec-card__title {
    font-size: 1.32rem;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 12px;
}

.gec-card__desc {
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.66);
    margin: 0 0 26px;
    flex: 1 1 auto;
}

.gec-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark));
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.gec-card__btn svg {
    transition: transform 0.3s ease;
}

.gec-card__btn:hover {
    background: transparent;
    color: var(--color-orange);
    border-color: rgba(253, 133, 31, 0.6);
    box-shadow: 0 10px 26px rgba(253, 133, 31, 0.22);
}

.gec-card__btn:hover svg {
    transform: translateX(4px);
}


/* ---- Read-only document viewer modal ---- */

.gec-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    opacity: 0;
    transition: opacity 0.32s ease;
}

.gec-modal.is-open {
    opacity: 1;
}

.gec-modal[hidden] {
    display: none;
}

.gec-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 15, 26, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.gec-modal__dialog {
    position: relative;
    width: min(900px, 100%);
    height: min(88vh, 920px);
    display: flex;
    flex-direction: column;
    background: #f4f6f9;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    transform: translateY(24px) scale(0.98);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.gec-modal.is-open .gec-modal__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.gec-modal__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #1a3050, #12243d);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gec-modal__dots {
    display: inline-flex;
    gap: 7px;
}

.gec-modal__dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4a5b72;
}

.gec-modal__dots span:nth-child(1) {
    background: #ff5f57;
}

.gec-modal__dots span:nth-child(2) {
    background: #febc2e;
}

.gec-modal__dots span:nth-child(3) {
    background: #28c840;
}

.gec-modal__doc-name {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gec-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
    border: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.gec-modal__close:hover {
    background: rgba(255, 95, 87, 0.85);
    color: #fff;
}

.gec-modal__viewer {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: #e9edf2;
}

.gec-modal__frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* Floating close button (the modal header bar was removed). */

.gec-modal__close--float {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(18, 24, 38, 0.78);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.gec-modal__close--float:hover {
    background: var(--color-orange, #fd851f);
    color: #fff;
}


/* PDF.js view-only viewer (no native toolbar / download / print). */

.gec-modal__pdf {
    position: absolute;
    inset: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    text-align: center;
    background: #e9edf2;
}

.gec-pdf-page {
    display: block;
    width: 100%;
    max-width: 880px;
    height: auto;
    margin: 0 auto 14px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.gec-pdf-msg {
    color: #5a6b82;
    padding: 40px 20px;
    font-size: 0.9rem;
}


/* Loading spinner shown until the PDF renders. */

.gec-modal__loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #e9edf2;
    z-index: 1;
}

.gec-modal__viewer.is-loading .gec-modal__loader {
    display: flex;
}

.gec-modal__loader span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(26, 48, 80, 0.18);
    border-top-color: #c9a44c;
    animation: gec-spin 0.8s linear infinite;
}

@keyframes gec-spin {
    to {
        transform: rotate(360deg);
    }
}

.gec-modal__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: #fff;
    border-top: 1px solid #e2e7ee;
}

.gec-modal__readonly {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #7a8aa0;
    text-transform: uppercase;
}


/* ---- Responsive ---- */

@media (max-width: 992px) {
    .gec__grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .gec-card {
        padding: 26px;
    }
}


/* ============================================
   CUSTOMER FEEDBACK PAGE + CF7 FORM
   ============================================ */

.section--feedback {
    position: relative;
    overflow: hidden;
    padding: clamp(60px, 7vw, 100px) 0;
    background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 100%);
}

.cf-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cf-bg__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
}

.cf-bg__shape--1 {
    width: 420px;
    height: 420px;
    top: -120px;
    right: -100px;
    background: radial-gradient(circle, rgba(253, 133, 31, 0.16), transparent 70%);
}

.cf-bg__shape--2 {
    width: 380px;
    height: 380px;
    bottom: -140px;
    left: -120px;
    background: radial-gradient(circle, rgba(52, 91, 130, 0.16), transparent 70%);
}

.cf-container {
    position: relative;
    z-index: 1;
    max-width: 1000px;
}


/* Intro / Purpose */

.cf-intro {
    text-align: center;
    max-width: 100%;
    margin: 0 auto clamp(32px, 4vw, 48px);
}

.cf-intro__heading {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    color: var(--color-navy-dark, #1A3050);
    margin: 0 0 14px;
}

.cf-intro__text {
    color: var(--color-gray-600, #56606e);
    line-height: 1.8;
    font-size: 1.02rem;
}

.cf-intro__text p {
    margin: 0 0 12px;
}


/* Form card */

.cf-form-card {
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(20, 36, 61, 0.08);
    padding: clamp(26px, 4vw, 48px);
}

.cf-form-card__head {
    text-align: center;
    margin-bottom: clamp(22px, 3vw, 34px);
    padding-bottom: clamp(18px, 2.4vw, 26px);
    border-bottom: 1px solid #eef1f5;
}

.cf-form-card__head .section-label {
    justify-content: center;
    margin-bottom: 14px;
}

.cf-form-card__title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--color-navy-dark, #1A3050);
    margin: 0 0 10px;
}

.cf-form-card__intro {
    color: var(--color-gray-600, #56606e);
    margin: 0;
    font-size: 0.98rem;
}

.cf-form-missing {
    text-align: center;
    color: #b3261e;
    padding: 20px;
    background: #fdecea;
    border-radius: 12px;
}


/* ---- CF7 form internals (modern) ---- */

.fb-form .fb-fieldset {
    border: 0;
    margin: 0 0 34px;
    padding: 0;
}

.fb-form .fb-fieldset:last-of-type {
    margin-bottom: 0;
}

.fb-form .fb-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--color-navy-dark, #1A3050);
    letter-spacing: 0.01em;
    padding: 0 0 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid #eaeef3;
}

.fb-form .fb-legend-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--color-sky, #fd851f), #ffa450);
    border-radius: 9px;
    box-shadow: 0 4px 10px rgba(253, 133, 31, 0.3);
}

.fb-form .fb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
    align-items: stretch;
}


/* Field = label as a flex column; the input is pushed to the bottom so inputs
   across a row stay aligned even when a label wraps to two lines. */

.fb-form .fb-field {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.fb-form .fb-label-text {
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #51607a;
    line-height: 1.45;
}

.fb-form .fb-field .wpcf7-form-control-wrap {
    display: block;
    margin-top: auto;
}

.fb-form .fb-req {
    color: var(--color-sky, #fd851f);
}

.fb-form .fb-help {
    color: var(--color-gray-600, #56606e);
    font-size: 0.96rem;
    margin: 0 0 16px;
}


/* Inputs */

.fb-form input[type="text"],
.fb-form input[type="email"],
.fb-form input[type="tel"],
.fb-form input[type="date"],
.fb-form textarea {
    width: 100%;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 0.97rem;
    color: #1f2a3a;
    background: #f7f9fc;
    border: 1.5px solid #e3e8ef;
    border-radius: 12px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.fb-form input::placeholder,
.fb-form textarea::placeholder {
    color: #9aa6b6;
}

.fb-form textarea {
    resize: vertical;
    min-height: 130px;
}

.fb-form input:focus,
.fb-form textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--color-sky, #fd851f);
    box-shadow: 0 0 0 4px rgba(253, 133, 31, 0.12);
}


/* ---- Pill choice groups (submission type, recommendation) ---- */

.fb-form .fb-chips .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fb-form .fb-chips .wpcf7-list-item {
    margin: 0;
}

.fb-form .fb-chips input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.fb-form .fb-chips .wpcf7-list-item-label {
    display: inline-flex;
    align-items: center;
    padding: 11px 24px;
    font-size: 0.94rem;
    font-weight: 600;
    color: #44546b;
    background: #f4f7fb;
    border: 1.5px solid #e3e8ef;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.22s ease;
}

.fb-form .fb-chips .wpcf7-list-item-label:hover {
    border-color: var(--color-sky, #fd851f);
    color: var(--color-sky, #fd851f);
}

.fb-form .fb-chips input:checked+.wpcf7-list-item-label {
    color: #fff;
    background: var(--color-sky, #fd851f);
    border-color: var(--color-sky, #fd851f);
    box-shadow: 0 8px 18px rgba(253, 133, 31, 0.28);
}


/* ---- Rating rows (1-5 number boxes) ---- */

.fb-form .fb-ratings {
    display: flex;
    flex-direction: column;
}

.fb-form .fb-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-bottom: 1px solid #eef1f5;
}

.fb-form .fb-rating-row:last-child {
    border-bottom: 0;
}

.fb-form .fb-rating-label {
    font-weight: 600;
    color: #2a3950;
    font-size: 0.95rem;
}

.fb-form .fb-rating-scale .wpcf7-radio {
    display: inline-flex;
    gap: 8px;
}

.fb-form .fb-rating-scale .wpcf7-list-item {
    margin: 0;
}

.fb-form .fb-rating-scale input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.fb-form .fb-rating-scale .wpcf7-list-item-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #51607a;
    background: #f4f7fb;
    border: 1.5px solid #e3e8ef;
    border-radius: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fb-form .fb-rating-scale .wpcf7-list-item-label:hover {
    border-color: var(--color-sky, #fd851f);
    color: var(--color-sky, #fd851f);
}

.fb-form .fb-rating-scale input:checked+.wpcf7-list-item-label {
    color: #fff;
    background: linear-gradient(135deg, var(--color-sky, #fd851f), #ffa450);
    border-color: var(--color-sky, #fd851f);
    box-shadow: 0 6px 14px rgba(253, 133, 31, 0.3);
    transform: translateY(-1px);
}


/* Submit button */

.fb-form .fb-submit {
    margin: 28px 0 0;
    text-align: center;
}

.fb-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 15px 38px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--color-sky, #fd851f);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.fb-form .wpcf7-submit:hover {
    background: var(--color-navy, #345B82);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(52, 91, 130, 0.25);
}

.fb-form .wpcf7-spinner {
    margin: 0 0 0 12px;
}


/* CF7 validation / response messages */

.fb-form .wpcf7-not-valid-tip {
    color: #e5484d;
    font-size: 0.82rem;
    font-weight: 500;
    margin-top: 5px;
}

.fb-form .wpcf7-not-valid {
    border-color: #e5484d !important;
}

.wpcf7 .wpcf7-response-output {
    margin: 22px 0 0;
    padding: 14px 18px;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    font-size: 0.95rem;
}


/* Footer note */

.cf-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
    margin: clamp(28px, 4vw, 40px) auto 0;
    padding: 16px 20px;
    background: rgba(52, 91, 130, 0.06);
    border: 1px solid rgba(52, 91, 130, 0.14);
    border-radius: 14px;
    color: var(--color-gray-600, #56606e);
    font-size: 0.92rem;
    line-height: 1.65;
}

.no-results.is-visible {
    padding: 0;
}

.cf-note svg {
    flex: 0 0 auto;
    color: var(--color-sky, #fd851f);
    margin-top: 2px;
}

@media (max-width: 600px) {
    .fb-form .fb-grid {
        grid-template-columns: 1fr;
    }
    .fb-form .fb-rating-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .fb-form .fb-rating-scale .wpcf7-list-item-label {
        width: 40px;
        height: 40px;
    }
}


/* ============================================
   Location contact popup (About page tags)
   ============================================ */

.gp-loc-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    opacity: 0;
    transition: opacity 0.32s ease;
}

.gp-loc-modal.is-open {
    opacity: 1;
}

.gp-loc-modal[hidden] {
    display: none;
}

.gp-loc-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 28, 44, 0.78);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.gp-loc-modal__dialog {
    position: relative;
    display: flex;
    width: min(960px, 100%);
    max-height: 92vh;
    overflow: hidden;
    background: linear-gradient(135deg, #fdfdfe 0%, #f5f7fc 100%);
    border-radius: 28px;
    box-shadow: 0 40px 120px rgba(8, 15, 26, 0.55);
    transform: translateY(26px) scale(0.97);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.gp-loc-modal.is-open .gp-loc-modal__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.gp-loc-modal__close {
    position: absolute;
    top: 22px;
    right: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--color-navy);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 10px rgba(8, 15, 26, 0.08);
    border: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    z-index: 4;
}

.gp-loc-modal__close:hover {
    background: var(--color-orange);
    color: #fff;
    transform: rotate(90deg);
}


/* ---- Left panel ---- */

.gp-loc-modal__aside {
    position: relative;
    flex: 0 0 42%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    padding: clamp(34px, 4vw, 54px) clamp(28px, 3vw, 46px);
    border-right: 1px solid rgba(26, 48, 80, 0.10);
    overflow: hidden;
}

.gp-loc-modal__eyebrow {
    position: relative;
    z-index: 2;
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange);
    padding-bottom: 12px;
}

.gp-loc-modal__eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-orange);
}

.gp-loc-modal__title {
    position: relative;
    z-index: 2;
    margin: 18px 0 0;
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-navy);
}

.gp-loc-modal__meta {
    position: relative;
    z-index: 2;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gp-loc-modal__address,
.gp-loc-modal__contact,
.gp-loc-modal__doc {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--color-gray-700);
    text-decoration: none;
}

.gp-loc-modal__contact {
    transition: color 0.2s ease;
}

.gp-loc-modal__contact:hover {
    color: var(--color-orange);
}

.gp-loc-modal__contact-text {
    word-break: break-word;
}


/* Hide rows the JS turns off (only shown when the admin fills them in). */

.gp-loc-modal__address[hidden],
.gp-loc-modal__contact[hidden],
.gp-loc-modal__doc[hidden] {
    display: none;
}

.gp-loc-modal__ic {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(253, 133, 31, 0.10);
    color: var(--color-orange);
}

.gp-loc-modal__doc {
    font-weight: 700;
    color: var(--color-orange);
}

.gp-loc-modal__doc-arrow {
    transition: transform 0.25s ease;
}

.gp-loc-modal__doc:hover .gp-loc-modal__doc-arrow {
    transform: translateX(5px);
}


/* Decorative skyline + sun (design only) */

.gp-loc-modal__sun {
    position: absolute;
    left: clamp(22px, 3vw, 44px);
    bottom: 108px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 133, 31, 0.55), rgba(253, 133, 31, 0) 68%);
    z-index: 1;
    pointer-events: none;
}

.gp-loc-modal__skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    color: #c3cde8;
    opacity: 0.75;
    z-index: 1;
    pointer-events: none;
}


/* ---- Right panel: form ---- */

.gp-loc-modal__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: clamp(34px, 4vw, 54px) clamp(28px, 4vw, 54px);
    overflow-y: auto;
}

.gp-loc-modal__body .wpcf7 {
    width: 100%;
}

.gp-loc-modal__body .wpcf7-form p {
    margin: 0 0 16px;
}

.gp-loc-modal__body .wpcf7-form p:last-child {
    margin-bottom: 0;
}


/* Hide CF7's bare label text — we use in-field placeholders instead. */

.gp-loc-modal__body .wpcf7-form label {
    display: block;
    font-size: 0;
    margin: 0;
}

.gp-loc-modal__body .wpcf7-form .wpcf7-form-control-wrap {
    position: relative;
    display: block;
    font-size: 1rem;
}

.gp-loc-modal__body .gp-field__ic {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: #9aa6bd;
    pointer-events: none;
}

.gp-loc-modal__body .gp-field--textarea .gp-field__ic {
    top: 19px;
    transform: none;
}

.gp-loc-modal__body .wpcf7-form input[type="text"],
.gp-loc-modal__body .wpcf7-form input[type="email"],
.gp-loc-modal__body .wpcf7-form input[type="tel"],
.gp-loc-modal__body .wpcf7-form input[type="url"],
.gp-loc-modal__body .wpcf7-form input[type="number"],
.gp-loc-modal__body .wpcf7-form textarea,
.gp-loc-modal__body .wpcf7-form select {
    width: 100%;
    padding: 1.05rem 1.1rem 1.05rem 3.4rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-navy);
    background: #fff;
    border: 1px solid #e4e8f0;
    border-radius: 14px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.gp-loc-modal__body .wpcf7-form input::placeholder,
.gp-loc-modal__body .wpcf7-form textarea::placeholder {
    color: #9aa6bd;
    opacity: 1;
}

.gp-loc-modal__body .wpcf7-form input:focus,
.gp-loc-modal__body .wpcf7-form textarea:focus,
.gp-loc-modal__body .wpcf7-form select:focus {
    border-color: var(--color-orange);
    box-shadow: 0 0 0 3px rgba(253, 133, 31, 0.13);
}

.gp-loc-modal__body .wpcf7-form textarea {
    min-height: 132px;
    resize: vertical;
    padding-top: 1.05rem;
}

.gp-loc-modal__body .wpcf7-form input[type="submit"] {
    width: 100%;
    margin-top: 8px;
    padding: 1.15rem 2rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4 20-7z'/%3E%3C/svg%3E") no-repeat calc(50% - 84px) center, linear-gradient(135deg, #fd9a3f 0%, #fd6a12 100%);
    box-shadow: 0 14px 32px rgba(253, 133, 31, 0.34);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gp-loc-modal__body .wpcf7-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(253, 133, 31, 0.42);
}

.gp-loc-modal__body .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 0.78rem;
    color: #dc2626;
}

.gp-loc-modal__body .wpcf7-response-output {
    margin: 14px 0 0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #374151;
}

.gp-loc-modal__body .wpcf7-spinner {
    margin: 10px auto 0;
    display: block;
}

section.section.section--ports-presence {
    margin-top: -180px;
}

button[data-loc-name="Jeddah Head Office"] {
    order: -1;
    border-color: var(--color-sky);
    background: var(--color-orange-10);
    color: var(--color-navy);
}

.yacht-image-wrapper--slider .yacht-slide.is-zooming {
    animation: gp-hero-kenburns 9s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .yacht-image-wrapper--slider .yacht-slide.is-zooming {
        animation: none;
    }
}


/* ---- Responsive ---- */

@media (max-width: 860px) {
    .gp-loc-modal__dialog {
        flex-direction: column;
        width: min(520px, 100%);
        overflow-y: auto;
    }
    .gp-loc-modal__aside {
        flex: 0 0 auto;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid rgba(26, 48, 80, 0.10);
        padding-bottom: 96px;
    }
    .gp-loc-modal__sun {
        bottom: 78px;
    }
    .gp-loc-modal__skyline {
        opacity: 0.5;
    }
}

@media (max-width: 600px) {
    .gp-loc-modal {
        padding: 0;
        align-items: flex-end;
    }
    .gp-loc-modal__dialog {
        width: 100%;
        max-height: 94vh;
        border-radius: 26px 26px 0 0;
    }
}


/* ==========================================================================
   Events Date Strip (Tourism & Guest Experience page)
   Horizontal run of days above the calendar embed. Picking a day filters the
   plugin's event cards; days with no events render greyed and disabled.
   ========================================================================== */

.ym-datestrip {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}


/* Left "More dates" cluster */

.ym-datestrip__more {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ym-datestrip__more-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-gray-900);
    white-space: nowrap;
}

.ym-datestrip__more-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    color: var(--color-gray-700);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ym-datestrip__more-btn:hover {
    color: var(--color-sky);
    border-color: var(--color-sky);
}


/* The native picker is only an anchor point for the popup — the button above
   opens it via showPicker(). It must not overlay the button: an input sitting
   on top swallows the click and merely focuses itself, which opens nothing. */

.ym-datestrip__picker {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}


/* Scroller. overflow-x:auto makes the vertical axis clip too, so the month
   captions must sit INSIDE this box — hence the padding on the cell below
   rather than on .ym-datestrip itself. */

.ym-datestrip__viewport {
    flex: 1 1 auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ym-datestrip__viewport::-webkit-scrollbar {
    display: none;
}

.ym-datestrip__track {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: max-content;
}

.ym-datestrip__cell {
    position: relative;
    flex: 0 0 auto;
    padding-top: 26px;
    /* reserves the caption row for every cell */
}

.ym-datestrip__month {
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-gray-900);
    white-space: nowrap;
    pointer-events: none;
}


/* Day cells */

.ym-datestrip__day {
    appearance: none;
    border: none;
    background: transparent;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 54px;
    padding: 8px 4px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ym-datestrip__num {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.1;
}

.ym-datestrip__dow {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-500);
}


/* Weekend days (Fri–Sun) pick up the brand accent, as in the reference. */

.ym-datestrip__day.is-weekend .ym-datestrip__dow,
.ym-datestrip__day.is-weekend .ym-datestrip__num {
    color: var(--color-sky);
}

.ym-datestrip__day:hover {
    background: var(--color-gray-100);
}


/* Today reads as "today" even before anything is picked. */

.ym-datestrip__day.is-today {
    background: var(--color-gray-100);
}


/* Days with no events: greyed and unclickable, so a visitor can never land
   on an empty result by clicking the strip. */

.ym-datestrip__day.is-empty,
.ym-datestrip__day.is-empty:hover {
    cursor: default;
    background: transparent;
}

.ym-datestrip__day.is-empty .ym-datestrip__num,
.ym-datestrip__day.is-empty .ym-datestrip__dow {
    color: var(--color-gray-300);
}

.ym-datestrip__day.is-selected,
.ym-datestrip__day.is-selected:hover {
    background: var(--gradient-primary);
}

.ym-datestrip__day.is-selected .ym-datestrip__num,
.ym-datestrip__day.is-selected .ym-datestrip__dow {
    color: var(--color-white);
}


/* Nav arrows */

.ym-datestrip__nav {
    flex: 0 0 auto;
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-gray-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 44px;
    cursor: pointer;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.ym-datestrip__nav:hover {
    color: var(--color-sky);
}

.ym-datestrip__nav[disabled] {
    opacity: 0.25;
    cursor: default;
}


/* "Show all events" — clears the picked date. Active while nothing is picked. */

.ym-datestrip__all {
    flex: 0 0 auto;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 1.1rem;
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-700);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.ym-datestrip__all svg {
    flex: 0 0 auto;
}

.ym-datestrip__all:hover {
    color: var(--color-sky);
    border-color: var(--color-sky);
}

.ym-datestrip__all.is-active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--color-white);
    box-shadow: 0 6px 14px rgba(52, 91, 130, 0.3);
}


/* Empty state — shown when the picked date has no events. */

.ym-datestrip__empty {
    margin: 0;
    padding: var(--space-2xl) var(--space-md);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    background: var(--color-white);
    border: 1px dashed var(--color-gray-200);
    border-radius: var(--radius-lg);
}


/* Hidden by the date filter — the plugin's cards and their category groups. */

.cec-card.is-date-hidden,
.cec-cat-group.is-date-hidden {
    display: none;
}

@media (max-width: 768px) {
    .ym-datestrip {
        flex-wrap: wrap;
    }
    .ym-datestrip__more-label {
        display: none;
    }
    .ym-datestrip__nav--prev {
        display: none;
    }
    .ym-datestrip__day {
        width: 46px;
    }
    .ym-datestrip__more-btn {
        width: 46px;
    }
    /* The reset button drops to its own row rather than squeezing the strip. */
    .ym-datestrip__all {
        order: 1;
        width: 100%;
        justify-content: center;
        margin-top: var(--space-sm);
    }
}

.ports-presence-note {
    max-width: 900px;
    margin: var(--space-2xl) auto 0;
    text-align: center;
}

.ports-presence-note__title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-md);
}

.ports-presence-note__text {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--color-gray-500);
    margin: 0;
}

/* ── Ports map (MapLibre, English-only labels) ────────────────
   Replaces the Google My Maps iframe; fills whichever .ports-map
   wrapper it sits in (fixed height on Ports page, 4:3 on Home). */
.ports-map .gp-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    background: #eef2f5;
    font-family: inherit;
}

.ports-map .gp-map .maplibregl-ctrl-attrib {
    font-size: 10px;
}

.gp-map-pin {
    position: relative;
    background: none;
    border: 0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.gp-map-pin svg {
    display: block;
}

.gp-map-pin__label {
    position: absolute;
    left: 34px;
    top: 37%;
    transform: translateY(-50%);
    max-width: 180px;
    overflow: hidden;
    padding: 3px 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    color: var(--color-navy-dark, #0f2a44);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    pointer-events: none;
}

.gp-map-popup__title {
    display: block;
    font-size: 14px;
    color: var(--color-navy-dark, #0f2a44);
    margin-bottom: 2px;
}

.gp-map-popup__desc {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-gray-600, #555);
}


/* ── Contact / office map (MapLibre, English-only labels) ─────
   Same footprint as the iframe it replaces inside .contact-map. */
.contact-map .gp-map {
    display: block;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 440px;
    line-height: normal;
    background: #eef2f5;
    font-family: inherit;
}

@media (max-width: 1024px) {
    .contact-map .gp-map {
        min-height: 320px;
    }
}