:root {
    --ink: #082b4c;
    --ink-dark: #041a30;
    --blue: #1299db;
    --sky: #28b7f1;
    --sand: #f5f1e9;
    --cream: #fbfaf7;
    --mist: #eaf2f5;
    --line: #d8e3e7;
    --muted: #667783;
    --white: #fff;
    --shadow: 0 28px 80px rgba(4, 26, 48, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

.site-body {
    color: var(--ink);
    background: var(--cream);
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden;
}

.shell { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.section-space { padding: 118px 0; }

.utility-bar { background: var(--ink-dark); color: rgba(255,255,255,.72); font-size: 12px; }
.utility-inner { min-height: 34px; display: flex; justify-content: space-between; align-items: center; }
.utility-contact, .utility-note, .language-switcher { display: flex; align-items: center; }
.utility-contact { gap: 26px; }
.utility-contact a, .utility-note > span { display: flex; align-items: center; gap: 8px; }
.utility-contact i, .utility-note i { color: var(--sky); font-size: 10px; }
.utility-note { gap: 28px; }
.language-switcher { gap: 5px; }
.language-switcher a { padding: 3px 7px; opacity: .55; }
.language-switcher a.active { color: var(--white); background: rgba(255,255,255,.12); opacity: 1; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(251, 250, 247, .96);
    border-bottom: 1px solid rgba(8,43,76,.09);
    backdrop-filter: blur(18px);
    transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled { box-shadow: 0 12px 40px rgba(4,26,48,.09); background: rgba(251,250,247,.99); }
.header-inner { height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-logo { width: 260px; flex: 0 0 260px; display: flex; align-items: center; gap: 10px; }
.site-logo-image, .site-logo > svg { width: 100%; height: 68px; display: block; object-fit: contain; object-position: left center; }
.site-logo > svg { overflow: visible; }
.logo-boat { transform-box: fill-box; transform-origin: center bottom; animation: logoAutoMotion 10s ease-in-out infinite; }
.logo-wave-one { transform-box: fill-box; transform-origin: center; animation: logoWaveFlow 10s ease-in-out infinite; }
.site-logo:hover .logo-boat { animation: logoHoverMotion 1.55s ease-in-out infinite; }
.site-logo:hover .logo-wave-one { animation: logoWaveFlow 1.15s ease-in-out infinite alternate; }
.site-logo-mark { width: 58px; height: 58px; flex: 0 0 58px; overflow: visible; }
.logo-mast { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.logo-sail-blue { fill: var(--blue); }
.logo-sail-navy, .logo-hull { fill: var(--ink); }
.logo-wave { fill: none; stroke: var(--sky); stroke-width: 4; stroke-linecap: round; }
.logo-wave-two { stroke-width: 2.5; opacity: .7; }
.site-logo-copy { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.site-logo-copy strong { color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 17px; letter-spacing: .08em; white-space: nowrap; }
.site-logo-copy small { margin-top: 7px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .5em; }

@media (hover: hover) and (pointer: fine) {
    .site-logo:hover .logo-boat {
        transform-origin: 48px 61px;
        animation: logoBoatFloat 1.55s ease-in-out infinite;
    }
    .site-logo:hover .logo-wave-one {
        animation: logoWaveFlow 1.15s ease-in-out infinite alternate;
    }
    .site-logo:hover .logo-wave-two {
        animation: logoWaveFlowReverse 1.35s ease-in-out infinite alternate;
    }
}

@keyframes logoBoatFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2.5px) rotate(-1.2deg); }
    55% { transform: translateY(1px) rotate(1deg); }
    78% { transform: translateY(-1.5px) rotate(-.5deg); }
}

/* The logo is an SVG image, so animate the mark as a whole when hovered and
   give it a short wave every ten seconds even without mouse interaction. */
@keyframes logoAutoMotion {
    0%, 82%, 100% { transform: translateY(0) rotate(0deg); }
    87% { transform: translateY(-2px) rotate(-1deg); }
    93% { transform: translateY(1px) rotate(1deg); }
}

@keyframes logoHoverMotion {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2.5px) rotate(-1.2deg); }
    55% { transform: translateY(1px) rotate(1deg); }
    78% { transform: translateY(-1.5px) rotate(-.5deg); }
}

@keyframes logoWaveFlow {
    from { transform: translateX(-3px) scaleX(.96); opacity: .65; }
    to { transform: translateX(3px) scaleX(1.04); opacity: 1; }
}

@keyframes logoWaveFlowReverse {
    from { transform: translateX(3px) scaleX(1.03); opacity: .45; }
    to { transform: translateX(-3px) scaleX(.97); opacity: .82; }
}

.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 2px; }
.desktop-nav a { position: relative; padding: 31px 11px 29px; color: #334b5d; font-size: 13px; font-weight: 500; white-space: nowrap; }
.desktop-nav a::after { content: ''; position: absolute; bottom: 21px; left: 11px; right: 11px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--ink); }
.desktop-nav a:hover::after, .desktop-nav a.active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-whatsapp { width: 42px; height: 42px; border: 1px solid var(--line); display: grid; place-items: center; color: #13a95e; font-size: 18px; transition: .25s ease; }
.header-whatsapp { background: #16b867; color: #fff; border-color: #16b867; box-shadow: 0 8px 22px rgba(7,83,43,.22); }
.header-whatsapp:hover { background: #0f9e56; color: white; border-color: #0f9e56; transform: translateY(-2px); }
.header-cta { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: white; font-size: 13px; font-weight: 600; transition: .25s ease; }
.header-cta:hover { background: var(--blue); transform: translateY(-2px); }
.header-cta i { font-size: 10px; }
.mobile-toggle { display: none; position: relative; width: 44px; height: 44px; background: var(--ink); border: 0; cursor: pointer; }
.mobile-toggle span { position: absolute; left: 12px; width: 20px; height: 2px; background: white; transition: .25s ease; }
.mobile-toggle span:first-child { top: 17px; }
.mobile-toggle span:last-child { top: 25px; width: 14px; }
.mobile-toggle.open span:first-child { top: 21px; transform: rotate(45deg); }
.mobile-toggle.open span:last-child { top: 21px; width: 20px; transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 120px 0 0; background: var(--cream); padding: 28px 24px 40px; overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav > a { display: flex; align-items: center; justify-content: space-between; padding: 17px 2px; border-bottom: 1px solid var(--line); font-family: 'Bodoni Moda', serif; font-size: 24px; }
.mobile-menu nav > a i { font-size: 13px; color: var(--blue); }
.mobile-menu .mobile-booking { margin-top: 22px; justify-content: center; background: var(--blue); color: white; border: 0; font-family: 'DM Sans',sans-serif; font-size: 15px; }
.mobile-menu-footer { margin-top: 28px; display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }

.home-hero { min-height: 760px; height: calc(100vh - 120px); position: relative; display: flex; align-items: stretch; color: white; overflow: hidden; }
.hero-image { position: absolute; inset: 0; background: url('../images/mersin-hero-yacht.png') center 38%/cover no-repeat; transform: scale(1.005); }
.hero-slider { position: absolute; inset: 0; background: var(--ink-dark); }
.hero-slide { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0; transform: scale(1.035); transition: opacity .9s ease,transform 7s ease; }
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,23,43,.91) 0%, rgba(3,23,43,.66) 43%, rgba(3,23,43,.13) 69%, rgba(3,23,43,.17) 100%), linear-gradient(0deg, rgba(2,18,34,.48), transparent 52%); }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr); align-items: center; padding: 58px 0 100px; }
.hero-copy-stack { min-width: 0; }
.hero-copy { max-width: 735px; }
.hero-copy-panel { display: none; }
.hero-copy-panel.active { display: block; animation: heroCopyEnter .65s ease both; }
@keyframes heroCopyEnter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px; color: #bceaff; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.hero-kicker i { font-size: 13px; }
.hero-copy h1 { margin: 0; font-family: 'Bodoni Moda',serif; font-weight: 500; font-size: clamp(62px,7.1vw,108px); line-height: .94; letter-spacing: -.055em; }
.hero-copy h1 em { color: #79d5ff; font-weight: 500; }
.hero-copy p { max-width: 605px; margin: 30px 0 38px; color: rgba(255,255,255,.8); font-size: 18px; line-height: 1.65; }
.hero-links { display: flex; align-items: center; gap: 28px; }
.button { min-height: 54px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; font-size: 14px; font-weight: 600; transition: transform .25s ease, background .25s ease, color .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-blue { background: var(--blue); color: white; box-shadow: 0 16px 36px rgba(18,153,219,.25); }
.button-blue:hover { background: var(--sky); color: var(--ink); }
.button-white { background: white; color: var(--ink); }
.button-white:hover { background: var(--sky); }
.text-link { min-height: 40px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.45); padding: 6px 0; }
.text-link i { color: #59df94; font-size: 19px; }
.hero-planner { width: min(100%,340px); justify-self: end; align-self: start; margin-top: 0; border-top: 3px solid var(--sky); background: rgba(246,250,251,.84); color: var(--ink); padding: 20px; box-shadow: 0 24px 65px rgba(2,18,34,.28); backdrop-filter: blur(7px); }
.planner-head { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.planner-head > span { display: grid; place-items: center; width: 42px; height: 42px; background: var(--mist); color: var(--blue); font-family: 'Bodoni Moda',serif; }
.planner-head div { display: flex; flex-direction: column; gap: 2px; }
.planner-head small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .15em; }
.planner-head strong { font-size: 16px; }
.hero-planner label { display: block; }
.hero-planner label > span { display: block; margin: 10px 0 5px; color: #657886; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero-planner select, .hero-planner input { width: 100%; height: 44px; padding: 0 12px; color: var(--ink); background: white; border: 1px solid var(--line); outline: none; }
.hero-planner select:focus, .hero-planner input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,153,219,.1); }
.planner-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; }
.hero-planner button { width: 100%; min-height: 48px; margin-top: 14px; border: 0; background: var(--ink); color: white; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .25s ease; }
.hero-planner button:hover { background: var(--blue); }
.hero-index { position: absolute; z-index: 2; bottom: 28px; left: 0; right: 0; padding: 0 max(24px,calc((100vw - 1240px)/2)); display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .2em; }
.hero-index span:first-child { font-family: 'Bodoni Moda',serif; font-size: 17px; color: white; }
.hero-slider-controls { display: flex; align-items: center; gap: 12px; }
.hero-slide-arrow { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.24); cursor: pointer; transition: .25s ease; }
.hero-slide-arrow:hover { color: var(--ink); background: var(--sky); border-color: var(--sky); }
.hero-slider-dots { display: flex; align-items: center; gap: 7px; }
.slider-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.38); cursor: pointer; transition: .25s ease; }
.slider-dot.active { width: 22px; border-radius: 5px; background: var(--sky); }
.hero-slider-progress { position: relative; width: 82px; height: 2px; overflow: hidden; background: rgba(255,255,255,.22); }
.hero-slider-progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; }

.eyebrow { display: inline-block; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow-light { color: #83ddff; }
.manifesto { position: relative; background: linear-gradient(115deg,#e6f0f3 0 36%,var(--sand) 36% 100%); overflow: hidden; }
.manifesto::after { content: 'MYK'; position: absolute; right: -16px; bottom: -72px; color: rgba(8,43,76,.035); font: 600 clamp(170px,21vw,330px)/1 'Bodoni Moda',serif; letter-spacing: -.08em; pointer-events: none; }
.manifesto-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .92fr 1.08fr; gap: 6.5vw; align-items: center; }
.manifesto-visual { position: relative; min-height: 0; aspect-ratio: 1.12 / 1; margin: 14px 0 30px; box-shadow: 0 28px 70px rgba(4,26,48,.18); }
.manifesto-visual::before { content: ''; position: absolute; z-index: -1; inset: 24px -24px -24px 24px; border: 1px solid rgba(18,153,219,.42); }
.manifesto-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.manifesto-visual-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(3,24,43,.48),rgba(3,24,43,.03) 42%,rgba(3,24,43,.78)); }
.manifesto-visual > .eyebrow { position: absolute; left: 28px; top: 27px; padding-bottom: 9px; border-bottom: 1px solid rgba(131,221,255,.65); }
.manifesto-visual-note { position: absolute; left: 28px; right: 28px; bottom: 26px; display: flex; align-items: end; justify-content: space-between; gap: 20px; color: white; }
.manifesto-visual-note strong { font: 500 32px/1 'Bodoni Moda',serif; letter-spacing: .08em; }
.manifesto-visual-note span { color: #a8e8ff; font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.manifesto-copy { padding: 26px 0; }
.manifesto h2, .section-heading h2, .service-story-copy h2, .process-intro h2 { margin: 0; font-family: 'Bodoni Moda',serif; font-size: clamp(42px,5vw,72px); line-height: 1.08; font-weight: 500; letter-spacing: -.045em; }
.manifesto h2 em, .service-story-copy h2 em, .process-intro h2 em { color: var(--blue); font-weight: 500; }
.manifesto p { max-width: 740px; margin: 30px 0; color: var(--muted); font-size: 18px; line-height: 1.8; }
.arrow-link { min-height: 40px; display: inline-flex; align-items: center; gap: 18px; padding: 6px 0; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 600; }
.arrow-link i { transition: transform .25s ease; }
.arrow-link:hover i { transform: translateX(5px); }

.fleet-showcase { background: #e7f0f3; }
.section-heading { margin-bottom: 52px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-heading h2 { margin-top: 12px; }
.centered-heading { justify-content: center; text-align: center; }
.fleet-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(2, 280px); gap: 16px; }
.fleet-card { position: relative; min-height: 280px; overflow: hidden; color: white; }
.fleet-card-large { grid-row: 1 / 3; }
.fleet-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.fleet-card:hover img { transform: scale(1.055); }
.fleet-card-shade { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(2,18,34,.88),rgba(2,18,34,.04) 72%); }
.fleet-card-index { position: absolute; top: 22px; left: 24px; font-family: 'Bodoni Moda',serif; color: rgba(255,255,255,.78); font-size: 14px; }
.fleet-card-content { position: absolute; left: 28px; right: 76px; bottom: 26px; }
.fleet-card-content > span { color: #9de4ff; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; }
.fleet-card-content h3 { margin: 5px 0 10px; font-family: 'Bodoni Moda',serif; font-size: 34px; font-weight: 500; }
.fleet-card-large .fleet-card-content h3 { font-size: 50px; }
.fleet-meta { display: flex; gap: 18px; color: rgba(255,255,255,.72); font-size: 11px; }
.fleet-arrow { position: absolute; right: 22px; bottom: 23px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); transition: .25s ease; }
.fleet-card:hover .fleet-arrow { background: var(--blue); border-color: var(--blue); }

.service-story { background: var(--sand); }
.service-story-layout { display: block; }
.service-story-copy { max-width: 920px; margin: 0 auto; }
.service-story-copy h2 { margin: 16px 0 28px; }
.service-story-copy > p { color: var(--muted); font-size: 17px; line-height: 1.8; }
.service-points { margin-top: 38px; border-top: 1px solid #c9d6da; }
.service-points div { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 14px; padding: 17px 0; border-bottom: 1px solid #c9d6da; }
.service-points strong { color: var(--blue); font-family: 'Bodoni Moda',serif; }
.service-points span { font-size: 14px; font-weight: 600; }

.experiences { background: #dbe9ee; }
.experience-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.experience-card { position: relative; min-height: 390px; padding: 36px; display: flex; flex-direction: column; background: rgba(255,255,255,.42); border-right: 1px solid #bdcfd6; border-bottom: 1px solid #bdcfd6; transition: .3s ease; }
.experience-card:hover { background: var(--ink); color: white; transform: translateY(-6px); box-shadow: var(--shadow); }
.experience-number { color: #93a5b0; font-family: 'Bodoni Moda',serif; font-size: 13px; }
.experience-card > i { margin: 68px 0 25px; color: var(--blue); font-size: 28px; }
.experience-card h3 { margin: 0 0 14px; font-family: 'Bodoni Moda',serif; font-size: 29px; font-weight: 500; }
.experience-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.experience-card:hover p { color: rgba(255,255,255,.68); }
.circle-arrow { position: absolute; right: 28px; bottom: 28px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--blue); transition: .25s ease; }
.experience-card:hover .circle-arrow { border-color: var(--blue); background: var(--blue); color: white; }

.routes { background: var(--ink); color: white; }
.routes .section-heading h2 { color: white; }
.arrow-link-light { color: white; border-color: rgba(255,255,255,.55); }
.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.route-card { position: relative; min-height: 470px; overflow: hidden; }
.route-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s ease; }
.route-card:hover img { transform: scale(1.055); }
.route-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(2,18,34,.92),transparent 70%); }
.route-content { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 27px; }
.route-content > div { display: flex; gap: 20px; color: #bdeaff; font-size: 11px; }
.route-content span { display: flex; align-items: center; gap: 7px; }
.route-content h3 { margin: 12px 0 0; font-family: 'Bodoni Moda',serif; font-size: 32px; line-height: 1.2; font-weight: 500; }

.process { background: var(--sand); }
.process-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; }
.process-intro h2 { margin-top: 15px; }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.process-list li { display: grid; grid-template-columns: 55px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.process-list li > span { color: var(--blue); font-family: 'Bodoni Moda',serif; }
.process-list h3 { margin: 0 0 8px; font-family: 'Bodoni Moda',serif; font-size: 25px; font-weight: 500; }
.process-list p { margin: 0; color: var(--muted); font-size: 14px; }

.voices { background: #0b3555; color: white; }
.voices-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; }
.voices-title h2 { margin: 18px 0 0; color: white; font-family: 'Bodoni Moda',serif; font-size: clamp(42px,4.7vw,68px); line-height: 1.08; font-weight: 500; }
.voice-stage { min-width: 0; }
@keyframes voiceGroupIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.voice-list { display: grid; gap: 14px; }
.voice-list.voice-group { display: none; }
.voice-list.voice-group.active { display: grid; animation: voiceGroupIn .48s ease both; }
.voice-list blockquote { margin: 0; padding: 28px 30px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-left: 3px solid transparent; transition: .25s ease; }
.voice-list blockquote:hover { border-color: var(--blue); transform: translateX(-6px); box-shadow: 0 12px 30px rgba(4,26,48,.07); }
.stars { color: #f0a32b; letter-spacing: .12em; font-size: 10px; }
.voice-list blockquote p { margin: 12px 0 16px; color: rgba(255,255,255,.78); line-height: 1.65; }
.voice-list blockquote footer { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.voice-list blockquote footer span { color: #91bed4; }
.voice-controls { display: flex; align-items: center; gap: 9px; margin-top: 34px; }
.voice-controls > button { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: white; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: .25s ease; }
.voice-controls > button:hover { color: #082b4c; background: #28b7f1; border-color: #28b7f1; }
.voice-dots { display: flex; align-items: center; gap: 0; }
.voice-dots button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.voice-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.3); transition: .25s ease; }
.voice-dots button.active::before { width: 24px; background: #28b7f1; }
.voice-count { margin-left: 5px; color: rgba(255,255,255,.48); font-size: 11px; letter-spacing: .12em; }
.voice-count strong { color: white; }

.prefooter { padding: 78px 0; background: var(--blue); color: white; }
.prefooter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: center; }
.prefooter h2 { margin: 12px 0 0; font-family: 'Bodoni Moda',serif; font-size: clamp(44px,5vw,70px); line-height: 1; font-weight: 500; }
.prefooter-action p { max-width: 550px; margin: 0 0 24px; color: rgba(255,255,255,.8); line-height: 1.7; }

.site-footer { background: var(--ink-dark); color: rgba(255,255,255,.68); }
.footer-main { padding: 80px 0 68px; display: grid; grid-template-columns: 1.5fr .7fr .9fr 1fr; gap: 6vw; }
.footer-brand > a { display: block; width: 270px; padding: 0; background: transparent; }
.footer-brand p { max-width: 360px; margin: 24px 0; line-height: 1.75; font-size: 14px; }
.footer-socials { display: flex; gap: 9px; }
.footer-socials a { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); transition: .25s ease; }
.footer-socials a:hover { background: var(--blue); border-color: var(--blue); color: white; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-column h3 { margin: 0 0 12px; color: white; font-family: 'Bodoni Moda',serif; font-size: 18px; font-weight: 500; }
.footer-column a { font-size: 13px; transition: color .2s ease; }
.footer-column a:hover { color: #83ddff; }
.footer-contact > span { font-size: 13px; }
.footer-contact small { margin-top: 9px; color: #83ddff; }
.footer-bottom { min-height: 68px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.floating-contact { position: fixed; z-index: 90; right: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.floating-social { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; border-radius: 50%; box-shadow: 0 10px 28px rgba(2,18,34,.24); font-size: 20px; transition: .25s ease; }
.floating-social:hover { transform: translateY(-2px) scale(1.05); }
.floating-instagram { background: linear-gradient(135deg,#833ab4,#e1306c 55%,#fcb045); }
.floating-maps { background: #fff; color: #ea4335; border: 1px solid rgba(2,18,34,.1); }
.floating-whatsapp { height: 58px; padding: 0 22px; display: flex; align-items: center; gap: 10px; background: #16b867; color: white; border-radius: 29px; box-shadow: 0 15px 38px rgba(7,83,43,.36); font-size: 13px; font-weight: 700; transition: .25s ease; }
.floating-whatsapp:hover { background: #0f9e56; transform: translateY(-2px); }
.floating-whatsapp i { font-size: 25px; }


.page-header { position: relative; padding: 95px 0 75px !important; background: var(--ink) !important; color: white; overflow: hidden; }
.page-header::after { content: ''; position: absolute; right: -8%; top: -70%; width: 440px; height: 440px; border: 1px solid rgba(40,183,241,.22); border-radius: 50%; box-shadow: 0 0 0 70px rgba(40,183,241,.04),0 0 0 140px rgba(40,183,241,.025); }
.page-header h1 { font-family: 'Bodoni Moda',serif !important; font-size: clamp(46px,6vw,78px) !important; font-weight: 500 !important; letter-spacing: -.04em; }
.page-header p { color: rgba(255,255,255,.7) !important; }
.section-label, .hero-badge { display: inline-flex; align-items: center; padding: 0 0 7px; color: var(--blue); border: 0; border-bottom: 2px solid var(--blue); border-radius: 0; background: none; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.gradient-text { color: var(--blue); background: none; -webkit-text-fill-color: currentColor; }
.btn-primary, .footer-newsletter-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; background: var(--blue) !important; color: white !important; border: 0; border-radius: 0 !important; font-weight: 600; box-shadow: none; }
.btn-outline, .btn-outline-white { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 23px; border: 1px solid var(--ink); border-radius: 0 !important; color: var(--ink); }
.site-body main > section:not(.home-hero):not(.manifesto):not(.fleet-showcase):not(.service-story):not(.experiences):not(.routes):not(.process):not(.voices):not(.page-header):not(.section-dark):not(.about-dark-surface) { background-color: var(--cream); }
.section-dark { background: var(--ink) !important; color: #fff; }
.yacht-card, .service-card, .tour-card-enhanced, .blog-card-enhanced, .glass-card, .stat-card, .about-preview-feature { background: white !important; border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: 0 14px 40px rgba(4,26,48,.07) !important; color: var(--ink); }
.yacht-card:hover, .service-card:hover, .tour-card-enhanced:hover, .blog-card-enhanced:hover { transform: translateY(-7px); box-shadow: var(--shadow) !important; }


.blog-filter-bar { background: var(--cream) !important; border-color: var(--line) !important; }
.blog-filter-bar a { color: var(--muted); border-color: var(--line); }
.blog-filter-bar a.bg-turquoise { color: #fff; }
.blog-filter-bar a:not(.bg-turquoise):hover { color: var(--blue); background: var(--mist); }

.blog-card-enhanced,
.tour-card-enhanced,
.yacht-card,
.service-card { overflow: hidden; }
.blog-card-enhanced h3,
.tour-card-enhanced h3,
.yacht-card > .p-5 h3,
.service-card h3 { color: var(--ink) !important; }
.blog-card-enhanced .p-6 > p,
.tour-card-enhanced .p-6 > p,
.service-card > p { color: var(--muted) !important; }
.blog-card-enhanced .blog-meta { color: var(--ink); }
.blog-read-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    color: #fff;
    background: rgba(4,26,48,.82);
    border: 1px solid rgba(255,255,255,.22);
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(7px);
}

.blog-detail-hero {
    border-top: 1px solid rgba(131,221,255,.1);
    border-bottom: 1px solid rgba(131,221,255,.12);
}
.blog-detail-hero .max-w-7xl { position: relative; padding-top: 92px; padding-bottom: 86px; }
.blog-detail-hero h1 { max-width: 980px; font-size: clamp(42px,5.5vw,78px); line-height: 1.02; letter-spacing: -.045em; }
.blog-detail-hero .inline-block {
    color: #83ddff !important;
    background: rgba(40,183,241,.1) !important;
    border-color: rgba(131,221,255,.35) !important;
    border-radius: 999px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.blog-detail-content {
    background:
        radial-gradient(circle at 15% 0%, rgba(40,183,241,.1), transparent 28%),
        linear-gradient(180deg, #082f50 0%, #062640 100%) !important;
}
.blog-detail-column { max-width: 900px; }
.blog-detail-cover {
    height: 460px !important;
    border-radius: 3px !important;
    border-color: rgba(131,221,255,.28) !important;
    box-shadow: 0 28px 65px rgba(1,16,30,.3) !important;
}
.blog-detail-article {
    padding: 42px 48px;
    background: rgba(3,23,43,.34);
    border: 1px solid rgba(131,221,255,.14);
    border-top: 3px solid var(--blue);
    box-shadow: 0 20px 55px rgba(1,16,30,.14);
    font-size: 18px !important;
    line-height: 1.85 !important;
}
.blog-detail-article p { margin: 0 0 1.25em; }
.blog-detail-article h2,
.blog-detail-article h3,
.blog-detail-article h4 { color: #fff !important; font-family: 'Bodoni Moda',serif; line-height: 1.15; margin-top: 1.5em; }
.blog-detail-article h2 { font-size: 32px; }
.blog-detail-article h3 { font-size: 26px; }
.blog-detail-article strong { color: #fff; }
.blog-detail-article a { color: #83ddff; text-decoration: underline; text-underline-offset: 3px; }
.blog-detail-article ul, .blog-detail-article ol { padding-left: 1.4em; }
.blog-detail-share { padding-inline: 8px; }
.blog-related-section { background: var(--cream) !important; }
.blog-related-section h2 { color: var(--ink) !important; }

@media (max-width: 640px) {
    .blog-detail-hero .max-w-7xl { padding-top: 60px; padding-bottom: 54px; }
    .blog-detail-hero h1 { font-size: clamp(36px,10vw,52px); }
    .blog-detail-hero .flex { gap: 12px; }
    .blog-detail-cover { height: 250px !important; margin-bottom: 24px !important; }
    .blog-detail-article { padding: 26px 20px; font-size: 16px !important; line-height: 1.72 !important; }
}

.service-card {
    display: block;
    min-height: 0;
    padding: 0;
    border-top: 3px solid var(--blue) !important;
}
.service-card-media { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.service-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .55s ease; }
.service-card:hover .service-card-media img { transform: scale(1.045); }
.service-card-body { padding: 26px 28px 28px; }
.service-card-body p { color: var(--muted) !important; }
.service-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    color: var(--blue);
    background: var(--mist);
}

.tour-card-enhanced .tour-specs,
.tour-card-enhanced .tour-spec-item,
.yacht-card .yacht-spec { color: var(--ink); }
.tour-card-enhanced .tour-spec-item i,
.yacht-card .yacht-spec i { color: var(--blue) !important; }
.yacht-card .yacht-spec { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.yacht-card .yacht-spec span { color: var(--ink); }

.section-dark .glass-card .text-white,
.section-dark .glass-card h3 { color: var(--ink) !important; }
.section-dark .glass-card .text-gray-300,
.section-dark .glass-card .text-gray-400 { color: var(--muted) !important; }

.dark-cta h2 { color: #fff !important; }
.dark-cta p { color: rgba(234,242,245,.82) !important; }
.dark-cta .btn-outline {
    border-color: rgba(255,255,255,.5);
    color: #fff;
}
.dark-cta .btn-outline:hover { color: #fff; border-color: #25d366; background: rgba(37,211,102,.13); }
.dark-cta .btn-outline i { color: #25d366; }

.about-dark-surface { color: #fff; }
.site-body main > .about-dark-surface .text-white,
.site-body main > .about-dark-surface h1,
.site-body main > .about-dark-surface h2,
.site-body main > .about-dark-surface h3,
.site-body main > .about-dark-surface h4 { color: #fff !important; }
.site-body main > .about-dark-surface .text-gray-300 { color: rgba(234,242,245,.82) !important; }
.site-body main > .about-dark-surface .text-gray-400 { color: rgba(234,242,245,.68) !important; }
.site-body main > .about-dark-surface .gradient-text { color: var(--sky) !important; -webkit-text-fill-color: currentColor !important; }

.about-hero .about-stat-card {
    min-height: 148px;
    padding: 25px 27px;
    border: 1px solid rgba(40,183,241,.2);
    background: rgba(8,43,76,.48);
    backdrop-filter: blur(10px);
    box-shadow: inset 3px 0 0 rgba(40,183,241,.7);
}
.about-hero .about-stat-icon { color: var(--sky); margin-bottom: 12px; }
.about-hero .stat-number { color: #fff; font: 600 30px/1 'Bodoni Moda',serif; margin-bottom: 8px; }
.about-hero .btn-outline {
    border-color: rgba(255,255,255,.55);
    color: #fff;
}
.about-hero .btn-outline:hover { border-color: var(--sky); background: rgba(40,183,241,.12); }

.about-values-section {
    background:
        radial-gradient(circle at 12% 10%, rgba(40,183,241,.13), transparent 28%),
        radial-gradient(circle at 88% 88%, rgba(18,153,219,.1), transparent 30%),
        linear-gradient(135deg, #061f39 0%, #082b4c 52%, #061d35 100%) !important;
}
.about-values-section .about-value-card {
    position: relative;
    min-height: 292px;
    padding: 34px 32px 38px;
    overflow: hidden;
    border: 1px solid rgba(188,234,255,.16);
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow: 0 24px 55px rgba(2,18,34,.2);
    backdrop-filter: blur(8px);
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.about-values-section .about-value-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--sky), rgba(40,183,241,.08));
}
.about-values-section .about-value-card::after {
    content: '';
    position: absolute;
    right: -66px;
    bottom: -76px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(40,183,241,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(40,183,241,.025);
    pointer-events: none;
}
.about-values-section .about-value-card:hover {
    transform: translateY(-8px);
    border-color: rgba(40,183,241,.42);
    background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(40,183,241,.035));
    box-shadow: 0 30px 70px rgba(2,18,34,.32);
}
.about-values-section .about-value-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}
.about-values-section .about-value-icon > i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #d8f4ff;
    font-size: 19px;
    border: 1px solid rgba(40,183,241,.4);
    background: rgba(40,183,241,.12);
    box-shadow: inset 0 0 24px rgba(40,183,241,.08);
}
.about-values-section .about-value-number {
    color: rgba(188,234,255,.28);
    font: 600 48px/1 'Bodoni Moda', serif;
    letter-spacing: -.04em;
}
.about-values-section .about-value-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 14px !important;
    font-size: 23px !important;
    line-height: 1.2;
}
.about-values-section .about-value-card p {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    font-size: 14px !important;
    line-height: 1.75 !important;
}
.about-values-section .about-value-line {
    position: absolute;
    z-index: 1;
    left: 32px;
    bottom: 24px;
    width: 38px;
    height: 2px;
    background: var(--sky);
    transition: width .35s ease;
}
.about-values-section .about-value-card:hover .about-value-line { width: 78px; }

.about-offers-section .about-offering-card {
    min-height: 190px;
    padding: 28px 25px;
    border-top: 2px solid rgba(40,183,241,.8);
    background: linear-gradient(145deg, rgba(16,58,92,.72), rgba(8,43,76,.34));
    box-shadow: 0 18px 45px rgba(2,18,34,.18);
}
.about-offers-section .about-offering-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    color: var(--sky);
    border: 1px solid rgba(40,183,241,.32);
}

.about-content-section .glass-card { color: var(--ink); }
.about-content-section .glass-card .text-gray-300,
.about-content-section .glass-card .text-gray-400 { color: var(--muted) !important; }
.about-content-section .glass-card h2,
.about-content-section .glass-card h3 { color: var(--ink) !important; }

.about-cta .btn-outline-white {
    border-color: rgba(255,255,255,.55);
    color: #fff;
}
.about-cta .btn-outline-white:hover { color: #fff; border-color: #25d366; background: rgba(37,211,102,.13); }
.about-cta .btn-outline-white i { color: #25d366; }

@media (max-width: 767px) {
    .about-hero .about-stat-card { min-height: 130px; padding: 20px 18px; }
    .about-values-section .about-value-card { min-height: 0; padding: 28px 24px 34px; }
    .about-values-section .about-value-icon { margin-bottom: 22px; }
    .about-values-section .about-value-icon > i { width: 48px; height: 48px; }
    .about-values-section .about-value-number { font-size: 42px; }
    .about-values-section .about-value-line { left: 24px; bottom: 20px; }
    .about-offers-section .about-offering-card { min-height: auto; }
}
.site-body main > .routes .text-white, .site-body main > .routes h2, .site-body main > .routes h3 { color: white !important; }
.form-input, .booking-select, .footer-newsletter-input { width: 100%; min-height: 48px; padding: 11px 14px; color: var(--ink) !important; background: white !important; border: 1px solid var(--line) !important; border-radius: 0 !important; outline: none; }
.form-input:focus, .booking-select:focus, .footer-newsletter-input:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(18,153,219,.1) !important; }

.contact-form-card input:not([type="hidden"]),
.contact-form-card textarea {
    color: var(--ink) !important;
    background: #fff !important;
    border: 1px solid #c7d5dc !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}
.contact-form-card input:not([type="hidden"]):hover,
.contact-form-card textarea:hover { border-color: #94b3c2 !important; }
.contact-form-card input:not([type="hidden"]):focus,
.contact-form-card textarea:focus {
    color: var(--ink) !important;
    background: #fff !important;
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(18,153,219,.11) !important;
}
.contact-form-card label { color: #536c7d !important; }
.contact-form-card form i { color: #7f96a5; }
.contact-form-card form .group:focus-within i { color: var(--blue) !important; }


.gallery-section { position: relative; }
.gallery-section .gallery-filter-btn { min-width: 96px; border-radius: 2px !important; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-auto-rows: 130px;
    grid-auto-flow: dense;
    gap: 14px;
}
.gallery-grid .gallery-item {
    position: relative;
    grid-column: span 4;
    grid-row: span 2;
    min-width: 0;
    overflow: hidden;
    cursor: zoom-in;
    background: #0b3555;
    border: 1px solid rgba(131,221,255,.18);
    box-shadow: 0 18px 38px rgba(2,18,34,.18);
}
.gallery-grid .gallery-item:nth-child(1) { grid-column: span 7; grid-row: span 3; }
.gallery-grid .gallery-item:nth-child(2),
.gallery-grid .gallery-item:nth-child(3) { grid-column: span 5; }
.gallery-grid .gallery-item:nth-child(7) { grid-column: span 6; }
.gallery-grid .gallery-item:nth-child(8),
.gallery-grid .gallery-item:nth-child(9) { grid-column: span 3; }
.gallery-grid .gallery-item > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.2,1),filter .35s ease; }
.gallery-grid .gallery-item:hover > img { transform: scale(1.055); filter: saturate(1.08); }
.gallery-grid .gallery-item .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    color: #fff;
    background: linear-gradient(180deg,rgba(2,18,34,.03) 34%,rgba(2,18,34,.85) 100%);
    opacity: 1;
}
.gallery-card-info { min-width: 0; transform: translateY(3px); transition: transform .3s ease; }
.gallery-grid .gallery-item:hover .gallery-card-info { transform: none; }
.gallery-card-info span { color: #8fe0ff; font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.gallery-card-info h3 { margin: 5px 0 0; color: #fff !important; font: 500 clamp(17px,1.8vw,26px)/1.15 'Bodoni Moda',serif; }
.gallery-open { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.55); transition: .25s ease; }
.gallery-grid .gallery-item:hover .gallery-open { color: var(--ink); background: var(--sky); border-color: var(--sky); }
.lightbox {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 38px;
    background: rgba(2,18,34,.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease,visibility .25s ease;
}
.lightbox.active { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox img { display: block; max-width: min(1180px,92vw); max-height: 86vh; object-fit: contain; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.lightbox-close { position: absolute; top: 24px; right: 28px; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.35); cursor: pointer; transition: .25s ease; }
.lightbox-close:hover { color: var(--ink); background: var(--sky); border-color: var(--sky); }


.yacht-photo-item {
    position: relative;
    min-width: 0;
    height: 128px;
    overflow: hidden;
    border: 1px solid rgba(131,221,255,.2);
    border-radius: 12px;
    background: #082b4c;
    cursor: zoom-in;
    box-shadow: 0 12px 28px rgba(2,18,34,.2);
}
.yacht-photo-item > img {
    width: 100%;
    height: 100% !important;
    display: block;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.7,.2,1),filter .3s ease;
}
.yacht-photo-zoom {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(2,18,34,.72);
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(2,18,34,.25);
    backdrop-filter: blur(7px);
    transition: color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease;
    pointer-events: none;
}
.yacht-photo-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(2,18,34,.16),transparent 46%);
    opacity: .4;
    transition: opacity .3s ease;
    pointer-events: none;
}
.yacht-photo-item:hover > img { transform: scale(1.07); filter: saturate(1.08); }
.yacht-photo-item:hover::after { opacity: .8; }
.yacht-photo-item:hover .yacht-photo-zoom {
    color: var(--ink);
    background: var(--sky);
    border-color: var(--sky);
    transform: scale(1.08);
}


.service-detail-hero {
    position: relative;
    min-height: clamp(620px,76vh,780px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    color: #fff;
    background: var(--ink-dark) !important;
}
.service-detail-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
}
.service-detail-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,rgba(2,18,34,.94) 0%,rgba(2,18,34,.76) 42%,rgba(2,18,34,.2) 78%,rgba(2,18,34,.08) 100%),
        linear-gradient(0deg,rgba(2,18,34,.58),transparent 55%);
}
.service-detail-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 74px 52px;
}
.service-breadcrumb { display: flex; align-items: center; gap: 12px; margin-bottom: 44px; color: rgba(255,255,255,.72); font-size: 12px; }
.service-breadcrumb a { transition: color .2s ease; }
.service-breadcrumb a:hover { color: var(--sky); }
.service-detail-hero .eyebrow { color: #8fe0ff; }
.service-detail-hero h1 {
    max-width: 850px;
    margin: 18px 0 20px;
    color: #fff;
    font: 500 clamp(58px,7vw,104px)/.92 'Bodoni Moda',serif;
    letter-spacing: -.055em;
}
.service-detail-hero-content > p { max-width: 690px; margin: 0; color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.75; }
.service-detail-actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; }
.service-whatsapp { display: inline-flex; align-items: center; gap: 10px; padding: 12px 0; color: #fff; font-size: 14px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.55); }
.service-whatsapp i { color: #42dc87; font-size: 19px; }
.service-route-line { margin-top: auto; padding-top: 54px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.service-route-line i { color: var(--sky); }

.service-detail-intro { background: var(--sand) !important; }
.service-detail-intro-grid { display: grid; grid-template-columns: .34fr 1fr; gap: 9vw; align-items: start; }
.service-detail-number { display: flex; flex-direction: column; gap: 18px; padding-top: 9px; color: var(--blue); }
.service-detail-number span { font: 500 52px/1 'Bodoni Moda',serif; }
.service-detail-number strong { max-width: 175px; color: var(--ink); font-size: 11px; letter-spacing: .18em; line-height: 1.5; text-transform: uppercase; }
.service-detail-prose { max-width: 780px; color: #536b7b; font-size: 17px; line-height: 1.9; }
.service-detail-prose h2, .service-detail-prose h3 { margin: 0 0 24px; color: var(--ink); font: 500 clamp(38px,4.5vw,66px)/1.08 'Bodoni Moda',serif; letter-spacing: -.035em; }
.service-detail-prose h3 { margin-top: 38px; font-size: 30px; }
.service-detail-prose p { margin: 0 0 22px; }
.service-detail-prose ul { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 30px; }
.service-detail-prose li { position: relative; padding-left: 21px; color: var(--ink); }
.service-detail-prose li::before { content: ''; position: absolute; left: 0; top: .8em; width: 8px; height: 2px; background: var(--blue); }

.service-detail-benefits { background: var(--mist) !important; }
.service-detail-benefits .section-heading { max-width: 850px; margin-bottom: 58px; }
.service-detail-benefits .section-heading h2 { max-width: 760px; }
.service-benefit-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #bfd2da; border-left: 1px solid #bfd2da; }
.service-benefit-card { position: relative; min-height: 330px; padding: 34px 38px 38px; border-right: 1px solid #bfd2da; border-bottom: 1px solid #bfd2da; transition: background .28s ease,transform .28s ease; }
.service-benefit-card:hover { z-index: 1; background: #fff; transform: translateY(-7px); box-shadow: 0 24px 55px rgba(4,26,48,.1); }
.service-benefit-card > span { color: #8297a4; font: 500 13px/1 'Bodoni Moda',serif; }
.service-benefit-card > i { display: block; margin: 62px 0 24px; color: var(--blue); font-size: 28px; }
.service-benefit-card h3 { margin: 0 0 13px; color: var(--ink); font: 600 25px/1.18 'Bodoni Moda',serif; }
.service-benefit-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.72; }

.service-detail-process { color: #fff; background: var(--ink-dark) !important; }
.service-process-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; align-items: start; }
.service-process-intro { position: sticky; top: 150px; }
.service-process-intro h2 { max-width: 510px; margin: 20px 0 24px; color: #fff; font: 500 clamp(48px,5.5vw,78px)/.98 'Bodoni Moda',serif; letter-spacing: -.045em; }
.service-process-intro p { max-width: 510px; margin: 0; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.75; }
.service-process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.18); }
.service-process-list li { display: grid; grid-template-columns: 66px 1fr; gap: 24px; padding: 35px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.service-process-list li > span { color: var(--sky); font: 500 19px/1.25 'Bodoni Moda',serif; }
.service-process-list h3 { margin: 0 0 10px; color: #fff; font: 500 27px/1.15 'Bodoni Moda',serif; }
.service-process-list p { margin: 0; color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.7; }

.service-detail-cta { padding: 82px 0; background: var(--sky) !important; }
.service-detail-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.service-detail-cta .eyebrow { color: var(--ink); }
.service-detail-cta h2 { max-width: 800px; margin: 14px 0 0; color: var(--ink-dark); font: 500 clamp(40px,4vw,62px)/1.04 'Bodoni Moda',serif; letter-spacing: -.04em; }
.service-detail-cta .button-white { flex: 0 0 auto; }

@media (max-width: 1024px) {
    .service-detail-hero { min-height: 660px; }
    .service-detail-intro-grid, .service-process-layout { grid-template-columns: 1fr; gap: 44px; }
    .service-detail-number { flex-direction: row; align-items: center; }
    .service-process-intro { position: static; }
}

@media (max-width: 768px) {
    .service-detail-hero { min-height: 620px; }
    .service-detail-hero-content { padding-block: 60px 36px; }
    .service-breadcrumb { margin-bottom: 30px; }
    .service-detail-hero h1 { font-size: clamp(48px,13vw,70px); }
    .service-detail-hero-content > p { font-size: 16px; line-height: 1.6; }
    .service-route-line { padding-top: 34px; line-height: 1.5; }
    .service-detail-prose ul { grid-template-columns: 1fr; }
    .service-benefit-grid { grid-template-columns: 1fr; }
    .service-benefit-card { min-height: 250px; }
    .service-benefit-card > i { margin-top: 36px; }
    .service-detail-cta-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
    .service-detail-hero { min-height: 590px; }
    .service-detail-hero-shade { background: linear-gradient(90deg,rgba(2,18,34,.9),rgba(2,18,34,.47)),linear-gradient(0deg,rgba(2,18,34,.6),transparent 55%); }
    .service-detail-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
    .service-detail-actions .button { width: 100%; justify-content: center; }
    .service-route-line { font-size: 9px; letter-spacing: .09em; }
    .service-detail-number span { font-size: 42px; }
    .service-process-list li { grid-template-columns: 44px 1fr; gap: 14px; }
}

.tour-detail-body {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 14%, rgba(40,183,241,.1), transparent 30%),
        linear-gradient(180deg, #082f50 0%, #062742 100%);
}
.tour-detail-body::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(131,221,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(131,221,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.tour-detail-layout { position: relative; z-index: 1; align-items: start; }
.tour-detail-main { display: grid; gap: 24px; }
.tour-info-block {
    padding: 28px 30px;
    border: 1px solid rgba(131,221,255,.16);
    background: rgba(3,23,43,.28);
    box-shadow: 0 18px 45px rgba(1,16,30,.14);
}
.tour-info-block > h2 { display: flex; align-items: center; gap: 4px; margin-bottom: 18px !important; }
.tour-about-block { border-top: 3px solid var(--blue); }
.tour-highlight-item,
.tour-included-item {
    min-height: 58px;
    border: 1px solid rgba(131,221,255,.12);
    background: rgba(255,255,255,.045) !important;
    border-radius: 2px !important;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.tour-highlight-item:hover,
.tour-included-item:hover { transform: translateY(-2px); border-color: rgba(40,183,241,.5); background: rgba(40,183,241,.08) !important; }
.tour-booking-column { position: relative; }
.tour-booking-card {
    overflow: hidden;
    padding: 30px !important;
    color: #fff;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(131,221,255,.48);
    border-radius: 3px !important;
    box-shadow: 0 28px 65px rgba(1,16,30,.32) !important;
}
.tour-booking-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg,var(--blue),var(--sky)); }
.tour-booking-card h3 { font-size: 30px !important; line-height: 1.1; }
.tour-booking-card p { font-size: 15px; line-height: 1.65; }
.tour-booking-card .btn-primary { min-height: 58px; border-radius: 1px; box-shadow: 0 13px 28px rgba(18,153,219,.24); transition: transform .25s ease, box-shadow .25s ease; }
.tour-booking-card .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(18,153,219,.34); }
.tour-gallery-block { padding-bottom: 30px; }
.tour-photo-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr .85fr;
    grid-auto-rows: 205px;
    gap: 14px;
}
.tour-photo-card {
    position: relative;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    color: #fff;
    background: #0b3555;
    border: 1px solid rgba(131,221,255,.2);
    border-radius: 2px;
    cursor: zoom-in;
    box-shadow: 0 14px 34px rgba(2,18,34,.18);
}
.tour-photo-card:first-child { grid-row: span 2; }
.tour-photo-card:nth-child(4) { grid-column: span 2; }
.tour-photo-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1),filter .3s ease; }
.tour-photo-card:hover img { transform: scale(1.055); filter: saturate(1.08); }
.tour-photo-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(2,18,34,.05) 50%,rgba(2,18,34,.58)); }
.tour-photo-index { position: absolute; left: 14px; bottom: 13px; color: rgba(255,255,255,.84); font: 500 13px/1 'Bodoni Moda',serif; letter-spacing: .12em; }
.tour-photo-open { position: absolute; right: 12px; bottom: 11px; width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.55); transition: .25s ease; }
.tour-photo-card:hover .tour-photo-open { color: var(--ink); background: var(--sky); border-color: var(--sky); }

@media (max-width: 720px) {
    .tour-info-block { padding: 22px 18px; }
    .tour-booking-card { padding: 24px 20px !important; }
    .tour-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 190px; }
    .tour-photo-card:first-child,
    .tour-photo-card:nth-child(4) { grid-row: auto; grid-column: auto; }
}

@media (max-width: 480px) {
    .tour-photo-grid { grid-template-columns: 1fr; grid-auto-rows: 230px; }
}

@media (max-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 220px; }
    .gallery-grid .gallery-item,
    .gallery-grid .gallery-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
    .gallery-grid .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 560px) {
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; gap: 11px; }
    .gallery-grid .gallery-item,
    .gallery-grid .gallery-item:nth-child(n),
    .gallery-grid .gallery-item:nth-child(1) { grid-column: span 1; grid-row: span 1; }
    .gallery-section .gallery-filter-btn { min-width: 0; padding-inline: 14px; }
    .gallery-grid .gallery-item .overlay { padding: 17px; }
}

.fade-up, .fade-in, .slide-left, .slide-right { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.fade-up.visible, .fade-in.visible, .slide-left.visible, .slide-right.visible { opacity: 1; transform: none; }
.reveal { animation: revealUp .8s both; }
.hero-planner.reveal { animation-delay: .15s; }
@keyframes revealUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
    .desktop-nav a { padding-inline: 7px; font-size: 12px; }
    .site-logo { width: 220px; flex-basis: 220px; }
    .header-cta span { display: none; }
    .header-cta { width: 42px; padding: 0; justify-content: center; }
    .hero-layout { gap: 5vw; }
}

@media (max-width: 1024px) {
    .site-header { backdrop-filter: none; }
    .utility-note > span, .desktop-nav, .header-whatsapp, .header-cta { display: none; }
    .mobile-toggle { display: block; }
    .site-logo { width: 240px; flex-basis: 240px; }
    .home-hero { height: auto; min-height: 780px; }
    .hero-layout { grid-template-columns: 1fr; align-content: center; gap: 35px; padding-top: 80px; }
    .hero-copy { max-width: 800px; }
    .hero-planner { width: min(560px,100%); align-self: auto; margin: 0; }
    .manifesto-grid, .process-grid, .voices-layout { grid-template-columns: 1fr; }
    .manifesto-grid { gap: 35px; }
    .manifesto { background: linear-gradient(180deg,#e6f0f3 0 35%,var(--sand) 35% 100%); }
    .manifesto-visual { min-height: 500px; margin-right: 24px; }
    .experience-card { padding: 28px; }
    .footer-main { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-contact { grid-column: 2 / 4; }
}

@media (max-width: 768px) {
    .shell { width: min(100% - 32px, 1240px); }
    .section-space { padding: 78px 0; }
    .utility-contact a:last-child { display: none; }
    .utility-note { gap: 8px; }
    .header-inner { height: 74px; }
    .site-logo { width: 205px; flex-basis: 205px; }
    .site-logo-mark { width: 52px; height: 52px; flex-basis: 52px; }
    .site-logo-copy strong { font-size: 15px; }
    .site-logo-copy small { font-size: 9px; }
    .mobile-menu { inset: 108px 0 0; }
    .home-hero { min-height: 760px; }
    .hero-slide { background-position: center center; }
    .hero-layout { padding: 72px 0 76px; }
    .hero-copy h1 { font-size: clamp(50px,15vw,72px); }
    .hero-copy p { font-size: 16px; margin: 24px 0 30px; }
    .hero-links { flex-wrap: wrap; gap: 22px; }
    .hero-planner { padding: 22px; }
    .hero-index { display: none; }
    .manifesto-grid { grid-template-columns: 1fr; }
    .manifesto-visual { min-height: 390px; aspect-ratio: auto; margin: 0 12px 20px 0; }
    .manifesto-visual::before { inset: 14px -12px -14px 12px; }
    .manifesto-visual-note { left: 20px; right: 20px; bottom: 20px; align-items: flex-start; flex-direction: column; gap: 8px; }
    .manifesto h2, .section-heading h2, .service-story-copy h2, .process-intro h2 { font-size: 43px; }
    .manifesto p { font-size: 16px; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .fleet-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .fleet-card, .fleet-card-large { grid-row: auto; min-height: 390px; }
    .fleet-card-content h3, .fleet-card-large .fleet-card-content h3 { font-size: 38px; }
    .manifesto { padding-bottom: 44px; }
    .service-story { padding-top: 44px; }
    .experience-grid { grid-template-columns: 1fr; }
    .experience-card { min-height: 310px; }
    .experience-card > i { margin-top: 42px; }
    .route-grid { grid-template-columns: 1fr; }
    .route-card { min-height: 390px; }
    .prefooter-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / 3; }
    .footer-contact { grid-column: 1 / 3; }
    .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; }
    .floating-whatsapp span { display: none; }
    .floating-contact { right: 10px; bottom: 10px; gap: 7px; }
    .floating-social { width: 42px; height: 42px; font-size: 18px; }
    .floating-whatsapp { width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
    .floating-whatsapp i { font-size: 23px; }
}

@media (max-width: 480px) {
    .utility-bar { display: none; }
    .mobile-menu { inset: 74px 0 0; }
    .site-logo { width: 186px; flex-basis: 186px; }
    .home-hero { min-height: calc(100svh - 74px); }
    .hero-layout { align-content: start; gap: 24px; padding: 58px 0 110px; }
    .hero-slider { background: #03172b; }
    .hero-slide {
        background-color: #03172b;
        background-image: url('../images/mobile-hero-yacht.png') !important;
        background-repeat: no-repeat;
        /* Show the full yacht without side-cropping and lift it below the CTA. */
        background-size: 100% auto;
        background-position: center 85%;
    }
    .hero-shade {
        background:
            linear-gradient(180deg, #03172b 0%, rgba(3,23,43,.94) 34%, rgba(3,23,43,.24) 50%, rgba(3,23,43,.08) 70%, rgba(2,18,34,.28) 100%),
            linear-gradient(90deg, rgba(3,23,43,.28), rgba(3,23,43,.05));
    }
    .hero-kicker { margin-bottom: 18px; font-size: 10px; letter-spacing: .18em; }
    .hero-copy h1 { max-width: 100%; font-size: clamp(37px,10.6vw,44px); line-height: 1.01; letter-spacing: -.045em; }
    .hero-copy p { margin: 20px 0 24px; font-size: 15px; line-height: 1.5; }
    .hero-links { gap: 16px; }
    .hero-links .button { min-height: 52px; padding: 0 20px; }
    .hero-links .button { width: 100%; }
    .text-link { margin-left: 4px; }
    .hero-planner { display: none; }
    .planner-row { grid-template-columns: 1fr; }
    .fleet-card, .fleet-card-large { min-height: 340px; }
    .fleet-meta { gap: 11px; flex-wrap: wrap; }
    .route-card { min-height: 350px; }
    .voices-title h2 { font-size: 42px; }
    .footer-main { grid-template-columns: 1fr; gap: 45px; }
    .footer-brand, .footer-contact { grid-column: auto; }
    .footer-brand > a { width: 245px; }
}