:root {
  --navy: #062b4f;
  --navy-deep: #031f3b;
  --blue: #0d5f8f;
  --blue-bright: #1576aa;
  --gold: #f2bd4b;
  --gold-dark: #d79b20;
  --ink: #183247;
  --muted: #607487;
  --line: #dce5ec;
  --soft: #f4f8fb;
  --white: #ffffff;
  --shadow: 0 18px 45px rgba(6, 43, 79, .12);
  --radius: 18px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 88px 0; }
.soft-bg { background: var(--soft); }
.content-narrow { max-width: 850px; }

.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 9999;
  padding: 10px 16px; background: var(--white); color: var(--navy);
  border-radius: 8px; box-shadow: var(--shadow); font-weight: 700;
}
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(6,43,79,.08);
  backdrop-filter: blur(12px); transition: box-shadow .2s ease;
}
.site-header.scrolled { box-shadow: 0 8px 24px rgba(6,43,79,.09); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; width: 205px; height: auto; }
.primary-nav { display: flex; align-items: center; gap: 4px; }
.primary-nav a {
  padding: 11px 13px; border-radius: 9px; text-decoration: none;
  color: #29475e; font-size: .94rem; font-weight: 650; white-space: nowrap;
}
.primary-nav a:hover, .primary-nav a:focus-visible, .primary-nav a.active { color: var(--navy); background: #edf5fa; }
.primary-nav .nav-book { margin-left: 8px; padding-inline: 18px; color: var(--navy); background: var(--gold); }
.primary-nav .nav-book:hover, .primary-nav .nav-book:focus-visible { background: #f6ca6b; }
.menu-toggle { display: none; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--navy); font-weight: 700; }
.menu-toggle img { width: 24px; }
.menu-close-icon { display: none; }

.hero { position: relative; min-height: 650px; display: grid; align-items: center; overflow: hidden; background: var(--navy); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,25,47,.86) 0%, rgba(2,32,58,.68) 46%, rgba(2,32,58,.16) 78%); }
.hero-content { position: relative; z-index: 2; padding-block: 95px; color: var(--white); }
.eyebrow, .section-kicker { display: inline-block; margin-bottom: 10px; color: var(--blue); font-size: .78rem; line-height: 1.2; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero .eyebrow { color: var(--gold); }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(2.75rem, 5.4vw, 5rem); line-height: .99; letter-spacing: -.045em; text-wrap: balance; }
.hero-lead { max-width: 690px; margin: 24px 0 32px; font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: #edf5fa; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 22px; border-radius: 10px; text-decoration: none; font-weight: 800; line-height: 1.2; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: var(--navy-deep); background: var(--gold); }
.button-primary:hover { background: #f7cb6c; }
.button-secondary { color: var(--white); background: var(--navy); }
.button-secondary:hover { background: #0a3b69; }
.button-ghost { color: var(--white); border: 1px solid rgba(255,255,255,.62); background: rgba(255,255,255,.08); }
.button-ghost:hover { background: rgba(255,255,255,.16); }

.booking-panel { position: relative; z-index: 5; margin-top: -58px; }
.booking-card { background: var(--white); border: 1px solid rgba(6,43,79,.08); border-radius: 20px; box-shadow: var(--shadow); padding: 25px 28px 18px; }
.booking-copy { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(280px, 1.25fr); align-items: end; gap: 24px; margin-bottom: 18px; }
.booking-copy .section-kicker { grid-column: 1; margin-bottom: -8px; }
.booking-copy h2 { grid-column: 1; margin: 0; font-size: clamp(1.55rem, 2.6vw, 2.1rem); line-height: 1.15; color: var(--navy); }
.booking-copy p { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--muted); align-self: end; }
.booking-image-link { display: block; overflow: hidden; border-radius: 12px; background: var(--navy); }
.booking-image-link img { width: 100%; height: auto; }
.booking-note { margin: 10px 4px 0; color: #718394; font-size: .78rem; }

.section-heading { max-width: 790px; margin-bottom: 42px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2, .split-copy h2, .content-narrow h2, .final-cta h2 { margin: 0 0 16px; color: var(--navy); font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.08; letter-spacing: -.032em; text-wrap: balance; }
.section-heading p, .split-copy p, .content-narrow p { color: var(--muted); }
.section-heading p { margin: 0; font-size: 1.06rem; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card { min-height: 275px; display: flex; flex-direction: column; padding: 26px; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #c7dbe8; }
.icon-wrap { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 14px; background: #eaf4fa; }
.icon-wrap img { width: 30px; }
.feature-card h3 { margin: 0 0 9px; color: var(--navy); font-size: 1.24rem; line-height: 1.25; }
.feature-card p { margin: 0 0 20px; color: var(--muted); font-size: .95rem; }
.text-link { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--blue); font-weight: 800; font-size: .92rem; }
.text-link img, .text-cta img { width: 18px; }

.split-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(42px, 6vw, 84px); align-items: center; }
.split-media { overflow: hidden; border-radius: 22px; box-shadow: 0 16px 44px rgba(6,43,79,.11); }
.split-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.map-media img { object-fit: cover; }
.split-copy h2 { margin-bottom: 18px; }
.split-copy p { margin: 0 0 17px; }
.check-list { margin: 25px 0 28px; padding: 0; list-style: none; }
.check-list li { position: relative; margin: 10px 0; padding-left: 29px; color: #40586b; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 900; }
.route-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0; }
.route-tags a { padding: 7px 11px; border: 1px solid #cedce6; border-radius: 999px; color: #3c586d; background: var(--white); text-decoration: none; font-size: .87rem; font-weight: 700; }
.route-tags a:hover { border-color: #9fbed2; color: var(--navy); }
.text-cta { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-weight: 850; text-decoration: none; }

.navy-section { position: relative; overflow: hidden; color: var(--white); background: var(--navy-deep); }
.navy-section::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; bottom: -220px; border-radius: 50%; background: rgba(21,118,170,.18); }
.light-text h2, .light-text p { color: var(--white); }
.gold { color: var(--gold); }
.travel-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.travel-card { padding: 28px; border: 1px solid rgba(255,255,255,.11); border-radius: var(--radius); background: rgba(255,255,255,.055); }
.travel-card img { width: 34px; filter: brightness(0) invert(1); margin-bottom: 17px; }
.travel-card h3 { margin: 0 0 10px; font-size: 1.18rem; }
.travel-card p { margin: 0; color: #cfdae4; font-size: .94rem; }

.drive-card { position: relative; min-height: 430px; display: grid; align-items: center; overflow: hidden; border-radius: 24px; }
.drive-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drive-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,31,59,.9), rgba(3,31,59,.62) 54%, rgba(3,31,59,.08)); }
.drive-content { position: relative; z-index: 2; max-width: 610px; padding: 55px; color: var(--white); }
.drive-content h2 { margin: 0 0 14px; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; }
.drive-content p { margin: 0 0 25px; color: #e8f1f6; font-size: 1.06rem; }

.seo-content { border-top: 1px solid #edf1f4; }
.content-narrow h2 { margin-bottom: 20px; }
.content-narrow p { margin: 0 0 18px; font-size: 1.02rem; }

.final-cta { padding: 64px 0; background: #edf6fb; border-top: 1px solid #dce9f0; }
.final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.final-cta h2 { margin: 0 0 9px; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.final-cta p { margin: 0; color: var(--muted); }

.site-footer { color: #dfeaf2; background: var(--navy-deep); }
.footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, .8fr); gap: 48px; padding-top: 66px; padding-bottom: 48px; }
.footer-brand img { width: 185px; height: auto; margin-bottom: 20px; }
.footer-brand p { max-width: 330px; color: #aec0ce; }
.footer-heading { margin: 0 0 14px; color: var(--white); font-size: .98rem; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 8px 0; }
.site-footer a { color: #b9cad6; text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; padding: 20px 0 26px; border-top: 1px solid rgba(255,255,255,.09); color: #8fa8ba; font-size: .78rem; }
.footer-bottom p { margin: 0; }

:focus-visible { outline: 3px solid #56a8d5; outline-offset: 3px; }

@media (max-width: 1050px) {
  .header-inner { min-height: 74px; }
  .brand img { width: 174px; }
  .menu-toggle { display: inline-flex; cursor: pointer; }
  .primary-nav {
    position: absolute; left: 20px; right: 20px; top: calc(100% + 8px); display: none;
    padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow);
  }
  .primary-nav.open { display: grid; }
  .primary-nav a { padding: 12px 14px; }
  .primary-nav .nav-book { margin-left: 0; margin-top: 4px; text-align: center; }
  .menu-toggle[aria-expanded="true"] .menu-open-icon { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-close-icon { display: block; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.35fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 2 / 4; }
}

@media (max-width: 800px) {
  .section { padding: 70px 0; }
  .hero { min-height: 600px; }
  .hero-overlay { background: linear-gradient(90deg, rgba(2,25,47,.86), rgba(2,32,58,.58)); }
  .hero-content { padding-block: 82px 120px; }
  .booking-panel { margin-top: -72px; }
  .booking-card { padding: 22px 20px 16px; }
  .booking-copy { display: block; }
  .booking-copy .section-kicker { margin-bottom: 8px; }
  .booking-copy h2 { margin-bottom: 10px; }
  .booking-copy p { margin-bottom: 17px; }
  .split-grid { grid-template-columns: 1fr; gap: 35px; }
  .routes-section .split-copy { order: 2; }
  .routes-section .split-media { order: 1; }
  .travel-grid { grid-template-columns: 1fr; }
  .drive-content { padding: 42px 30px; }
  .final-cta-inner { display: block; }
  .final-cta .button { margin-top: 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > :last-child { grid-column: auto; }
}

@media (max-width: 560px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 58px 0; }
  .brand img { width: 158px; }
  .menu-toggle span { display: none; }
  .hero { min-height: 570px; }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .hero-lead { font-size: 1.02rem; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .booking-panel { margin-top: -54px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
  .split-media { border-radius: 16px; }
  .drive-card { min-height: 470px; border-radius: 18px; }
  .drive-overlay { background: linear-gradient(0deg, rgba(3,31,59,.92), rgba(3,31,59,.45)); }
  .drive-content { align-self: end; padding: 32px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid > :last-child { grid-column: auto; }
  .footer-bottom { display: block; }
  .footer-bottom p + p { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}


/* FerryEU homepage master layout — clean booking-led format */
.container-wide{width:min(calc(100% - 56px),1400px);margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.site-header{position:relative;z-index:50;background:#fff;border-bottom:1px solid #e9eef2;box-shadow:none}
.site-header.scrolled{box-shadow:0 5px 24px rgba(7,38,68,.07)}
.header-inner{min-height:78px;display:grid;grid-template-columns:250px 1fr auto;align-items:center;gap:30px}
.brand-header{display:block;width:215px;height:60px;overflow:hidden;text-decoration:none}
.brand-header img{display:block;width:100%;height:100%;object-fit:contain}
.primary-nav-clean{display:flex;align-items:center;justify-content:center;gap:34px}
.primary-nav-clean a{padding:28px 0;color:#092a4f;font-weight:650;font-size:.96rem;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.primary-nav-clean a:hover{color:#0870b7;border-bottom-color:#0870b7}
.header-tools{display:flex;align-items:center;gap:18px;color:#092a4f}
.header-tools a{display:inline-flex;align-items:center;gap:6px;color:#092a4f;text-decoration:none;font-weight:700;font-size:.9rem}
.header-tools img{width:20px;height:20px}
.header-search{width:36px;height:36px;justify-content:center;border-radius:50%}
.header-search:hover,.language-link:hover{color:#0870b7}

.hero-clean{position:relative;min-height:470px;height:min(33vw,520px);overflow:hidden;background:#dceefa}
.hero-clean .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%}
.hero-overlay-clean{position:absolute;inset:0;background:linear-gradient(90deg,rgba(240,248,254,.91) 0%,rgba(237,247,253,.73) 31%,rgba(236,247,253,.16) 55%,rgba(0,34,69,.02) 100%)}
.hero-content-clean{position:relative;z-index:2;display:flex;min-height:100%;height:100%;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:12px;padding-bottom:70px}
.hero-content-clean h1{max-width:650px;margin:0;color:#082e5b;font-size:clamp(2.8rem,4.4vw,4.5rem);line-height:1.04;letter-spacing:-.045em;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.hero-content-clean .hero-lead{max-width:530px;margin:18px 0 26px;color:#183b5d;font-size:clamp(1.03rem,1.45vw,1.28rem);line-height:1.48}
.hero-trust{display:flex;gap:30px;flex-wrap:wrap}
.hero-trust>span{display:grid;grid-template-columns:42px auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;color:#0a2d54}
.hero-trust img{grid-row:1/3;width:38px;height:38px;padding:8px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 3px 12px rgba(9,46,83,.10)}
.hero-trust strong{font-size:.9rem;line-height:1.2}
.hero-trust small{font-size:.77rem;color:#49647d;line-height:1.3;margin-top:2px}

.search-shell{position:relative;z-index:12;margin-top:-55px}
.search-card{overflow:hidden;border:7px solid #07396e;border-radius:15px;background:#fff;box-shadow:0 12px 28px rgba(5,39,74,.18)}
.search-tabs{height:45px;display:flex;align-items:center;background:linear-gradient(90deg,#0c4d89,#052f5b);color:#fff}
.search-tab{height:45px;display:inline-flex;align-items:center;gap:8px;padding:0 29px;border-right:1px solid rgba(255,255,255,.17);font-weight:750;font-size:.92rem}
.search-tab img{filter:brightness(0) invert(1)}
.search-tab.active{background:#0c76c4}
.tab-symbol{font-size:1.4rem;line-height:1}
.pseudo-search{display:grid;grid-template-columns:1.25fr 28px 1.25fr .96fr .96fr 1.12fr 1fr;align-items:stretch;gap:10px;padding:14px;background:#fff}
.pseudo-field{position:relative;min-height:72px;display:flex;flex-direction:column;justify-content:center;padding:10px 38px 9px 14px;border:1px solid #d9e2ea;border-radius:7px;background:#fff;color:#183a5a;text-decoration:none}
.pseudo-field:hover{border-color:#82b5d5;background:#fbfdff}
.pseudo-field small{font-size:.71rem;color:#60758a;margin-bottom:4px}
.pseudo-field small span{color:#8594a4}
.pseudo-field strong{font-size:.9rem;font-weight:600;color:#4c6075}
.pseudo-field>img{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:19px;height:19px;opacity:.8}
.swap-icon{align-self:center;justify-self:center;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#ddecf7;color:#0a5995;font-weight:900}
.search-button{display:grid;place-items:center;padding:0 22px;border-radius:8px;background:#ffbd21;color:#092b51;text-decoration:none;font-weight:850;font-size:1rem;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.search-button:hover{background:#ffc943}

.home-shortcuts{padding:24px 0 26px;background:#fff;border-bottom:1px solid #edf1f4}
.shortcut-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.shortcut-card{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center;min-height:124px;padding:14px;border:1px solid #e1e7ec;border-radius:12px;background:#fff;text-decoration:none;box-shadow:0 2px 9px rgba(8,45,80,.035);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.shortcut-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(8,45,80,.09);border-color:#bfd4e3}
.shortcut-image,.shortcut-icon-only{width:88px;height:88px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#e8f3fa}
.shortcut-image img{width:100%;height:100%;object-fit:cover}
.shortcut-icon-only img{width:38px;height:38px}
.shortcut-copy{display:flex;min-width:0;flex-direction:column}
.shortcut-copy strong{color:#082e5b;font-size:1rem;margin-bottom:5px}
.shortcut-copy small{color:#586d80;font-size:.79rem;line-height:1.45;margin-bottom:7px}
.shortcut-copy>span{color:#0870b7;font-size:.78rem;font-weight:800}

/* soften the long-form content to match the cleaner first-screen design */
.split-section.section{padding-top:78px;padding-bottom:78px}
.section{padding-top:82px;padding-bottom:82px}

@media(max-width:1180px){
 .header-inner{grid-template-columns:220px 1fr auto;gap:18px}.primary-nav-clean{gap:20px}.primary-nav-clean a{font-size:.9rem}
 .pseudo-search{grid-template-columns:1fr 24px 1fr 1fr 1fr}.passengers-field{grid-column:1/4}.search-button{grid-column:4/6;min-height:62px}.optional-return{display:none}
 .shortcut-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1050px){
 .header-inner{display:flex;justify-content:space-between}.brand-header{width:195px;height:56px}.header-tools{margin-left:auto}.menu-toggle{display:inline-flex;order:3}
 .primary-nav-clean{position:absolute;left:20px;right:20px;top:calc(100% + 8px);display:none;padding:12px;border:1px solid #dce5ec;border-radius:14px;background:#fff;box-shadow:0 15px 35px rgba(5,39,74,.16)}
 .primary-nav-clean.open{display:grid;gap:0}.primary-nav-clean a{padding:12px 14px;border-bottom:0}.header-tools{order:2}.menu-toggle{order:3}
 .hero-content-clean{padding-bottom:82px}.hero-content-clean h1{font-size:clamp(2.7rem,6vw,4rem)}
}
@media(max-width:760px){
 .container-wide{width:min(calc(100% - 28px),1400px)}.header-tools{display:none}.brand-header{width:178px;height:50px}
 .hero-clean{height:auto;min-height:520px}.hero-clean .hero-image{object-position:63% center}.hero-overlay-clean{background:linear-gradient(90deg,rgba(240,248,254,.96),rgba(240,248,254,.78) 62%,rgba(240,248,254,.34))}
 .hero-content-clean{padding-top:54px;padding-bottom:100px}.hero-content-clean h1{font-size:clamp(2.35rem,10vw,3.3rem)}.hero-content-clean h1 br{display:none}.hero-content-clean .hero-lead{max-width:90%;font-size:1.02rem}
 .hero-trust{gap:13px}.hero-trust>span{grid-template-columns:36px auto}.hero-trust img{width:34px;height:34px}.hero-trust small{display:none}
 .search-shell{margin-top:-68px}.search-card{border-width:5px}.search-tabs{overflow:auto}.search-tab{padding:0 18px;white-space:nowrap}.pseudo-search{grid-template-columns:1fr;gap:8px}.swap-icon{display:none}.pseudo-field,.passengers-field,.search-button{grid-column:auto;min-height:58px}.optional-return{display:flex}.search-button{min-height:58px}
 .shortcut-grid{grid-template-columns:1fr}.shortcut-card{min-height:112px}
}
@media(max-width:480px){
 .hero-trust{display:grid}.hero-trust>span:nth-child(3){display:none}.search-tabs .search-tab:nth-child(n+2){display:none}.search-tab.active{width:100%;justify-content:center}
 .shortcut-card{grid-template-columns:70px 1fr}.shortcut-image,.shortcut-icon-only{width:70px;height:70px}
}


/* Approved FerryEU homepage first-screen positioning — 7 Aug 2026 */
.hero-content-clean{
  justify-content:flex-start;
  padding-top:72px;
  padding-bottom:150px;
}

/* Lift the booking panel further into the hero without changing hero height. */
.search-shell{
  margin-top:-112px;
}

@media(max-width:1050px){
  .hero-content-clean{
    padding-top:60px;
    padding-bottom:150px;
  }
  .search-shell{
    margin-top:-118px;
  }
}

@media(max-width:760px){
  .hero-clean{
    min-height:520px;
  }
  .hero-content-clean{
    justify-content:flex-start;
    padding-top:42px;
    padding-bottom:160px;
  }
  .search-shell{
    margin-top:-128px;
  }
}

@media(max-width:480px){
  .hero-content-clean{
    padding-top:34px;
    padding-bottom:165px;
  }
  .search-shell{
    margin-top:-136px;
  }
}


/* Refinement: extend the hero photograph behind and below the booking panel
   while keeping the approved headline/search positioning. */
.hero-home,
.hero {
  min-height: 660px;
  padding-bottom: 150px;
  background-size: cover;
  background-position: center center;
}

/* Keep the two editorial feature images visually proportional to their
   neighbouring copy instead of allowing them to dominate the row. */
.split-media img,
.content-media img,
.editorial-media img,
.feature-image img,
.story-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* Target the two large inline homepage editorial images even if the
   current markup uses the generic split-card class. */
.split-card > img,
.split-card picture img,
.content-split > img,
.content-split picture img {
  height: 300px;
  object-fit: cover;
}

@media (max-width: 900px) {
  .hero-home,
  .hero {
    min-height: 700px;
    padding-bottom: 175px;
  }

  .split-media img,
  .content-media img,
  .editorial-media img,
  .feature-image img,
  .story-image img,
  .split-card > img,
  .split-card picture img,
  .content-split > img,
  .content-split picture img {
    height: 260px;
  }
}

@media (max-width: 600px) {
  .hero-home,
  .hero {
    min-height: 760px;
    padding-bottom: 205px;
  }

  .split-media img,
  .content-media img,
  .editorial-media img,
  .feature-image img,
  .story-image img,
  .split-card > img,
  .split-card picture img,
  .content-split > img,
  .content-split picture img {
    height: 220px;
  }
}


/* Final hero relationship:
   keep the complete search form inside the hero photograph and leave
   visible image below the form. */
.hero-clean {
  min-height: 720px;
  height: 720px;
  padding-bottom: 0;
}

.search-shell {
  margin-top: -215px;
}

/* The first editorial image needs more presence beside its longer copy.
   Keep the route-map image more compact. */
.split-section .split-media img {
  height: 390px;
  aspect-ratio: auto;
  object-fit: cover;
}

.routes-section .split-media img,
.routes-section .map-media img {
  height: 300px;
  aspect-ratio: auto;
  object-fit: cover;
}

@media (max-width: 1050px) {
  .hero-clean {
    min-height: 760px;
    height: 760px;
  }

  .search-shell {
    margin-top: -225px;
  }

  .split-section .split-media img {
    height: 360px;
  }
}

@media (max-width: 760px) {
  /* The mobile search card becomes much taller because its fields stack.
     Give the photograph enough depth for the entire card plus image below it. */
  .hero-clean {
    min-height: 1030px;
    height: 1030px;
  }

  .search-shell {
    margin-top: -470px;
  }

  .split-section .split-media img {
    height: 320px;
  }

  .routes-section .split-media img,
  .routes-section .map-media img {
    height: 240px;
  }
}

@media (max-width: 480px) {
  .hero-clean {
    min-height: 1040px;
    height: 1040px;
  }

  .search-shell {
    margin-top: -480px;
  }

  .split-section .split-media img {
    height: 300px;
  }
}


/* Refined balance: raise the booking panel toward the headline and reduce
   the hero depth by the corresponding amount, while retaining visible
   photograph beneath the complete booking panel. */
.hero-clean {
  min-height: 650px;
  height: 650px;
}

.search-shell {
  margin-top: -285px;
}

@media (max-width: 1050px) {
  .hero-clean {
    min-height: 680px;
    height: 680px;
  }

  .search-shell {
    margin-top: -305px;
  }
}

@media (max-width: 760px) {
  .hero-clean {
    min-height: 900px;
    height: 900px;
  }

  .search-shell {
    margin-top: -600px;
  }
}

@media (max-width: 480px) {
  .hero-clean {
    min-height: 910px;
    height: 910px;
  }

  .search-shell {
    margin-top: -610px;
  }
}




/* FerryEU navigation and enlarged cropped logo — audited 8 Aug 2026 */
.site-header{position:relative !important;top:auto !important;z-index:50 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.site-header.scrolled{box-shadow:none !important;}
.header-inner{min-height:78px !important;grid-template-columns:270px 1fr auto !important;}
.brand-header{width:250px !important;height:78px !important;overflow:hidden !important;display:flex !important;align-items:center !important;}
.brand-header img{width:100% !important;height:100% !important;object-fit:contain !important;object-position:left center !important;transform:scale(1.04);transform-origin:left center;}
@media(max-width:1180px){.header-inner{grid-template-columns:230px 1fr auto !important}.brand-header{width:220px !important;height:70px !important}}
@media(max-width:760px){.header-inner{min-height:78px !important}.brand-header{width:205px !important;height:64px !important}}

/* FerryEU header + homepage spacing refinements — 8 Aug 2026
   1) Keep the main white navigation bar visible while scrolling.
   2) Reduce the revised FerryEU logo by approximately 25% while preserving
      the existing 78px desktop header height.
   3) Keep homepage shortcut cards fully below the hero photograph. */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(6,43,79,.08) !important;
}
.site-header.scrolled {
  box-shadow: 0 7px 24px rgba(6,43,79,.10) !important;
}
.header-inner {
  min-height: 78px !important;
  grid-template-columns: 210px 1fr auto !important;
}
.brand-header {
  width: 190px !important;
  height: 78px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.brand-header img {
  width: auto !important;
  height: 60px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
}

/* The booking card intentionally overlaps the hero. Compensate for that
   negative overlap in normal flow so the shortcut cards begin after the
   visible hero instead of beneath it. */
.search-shell {
  margin-bottom: 145px;
}

@media (max-width: 1180px) {
  .header-inner {
    grid-template-columns: 185px 1fr auto !important;
  }
  .brand-header {
    width: 170px !important;
    height: 70px !important;
  }
  .brand-header img {
    height: 52px !important;
  }
}

@media (max-width: 1050px) {
  .search-shell {
    margin-bottom: 85px;
  }
}

@media (max-width: 760px) {
  .header-inner {
    min-height: 78px !important;
  }
  .brand-header {
    width: 158px !important;
    height: 64px !important;
  }
  .brand-header img {
    height: 48px !important;
  }
  .search-shell {
    margin-bottom: 115px;
  }
}

@media (max-width: 480px) {
  .search-shell {
    margin-bottom: 115px;
  }
}


/* FerryEU header/content separator — pre-routes audit 2026-08-09 */
.site-header {
  border-bottom: 3px solid var(--navy, #062b4f) !important;
}


/* FerryEU homepage hero refinement — 14 Aug 2026
   Match the approved Destinations hero treatment and trim the image depth. */
.home-page .hero-overlay-clean{
  background:linear-gradient(90deg,rgba(3,31,59,.92) 0%,rgba(6,43,79,.78) 48%,rgba(6,43,79,.30) 78%,rgba(6,43,79,.12) 100%);
}
.home-page .hero-content-clean{color:#fff;}
.home-page .hero-content-clean h1{
  max-width:830px;
  color:#fff;
  text-shadow:none;
}
.home-page .hero-content-clean .hero-lead{
  max-width:720px;
  color:#edf5fa;
}
.home-page .hero-content-clean .section-kicker{margin-bottom:12px;}

/* Keep the approved first-screen position while allowing only a modest strip
   of hero image beneath the completed booking panel. */
.home-page .hero-clean{min-height:580px;height:580px;}
.home-page .search-shell{margin-top:-215px;}

@media(max-width:1050px){
  .home-page .hero-clean{min-height:620px;height:620px;}
  .home-page .search-shell{margin-top:-245px;}
}
@media(max-width:760px){
  .home-page .hero-clean{min-height:820px;height:820px;}
  .home-page .search-shell{margin-top:-520px;}
  .home-page .hero-overlay-clean{background:linear-gradient(90deg,rgba(3,31,59,.94) 0%,rgba(6,43,79,.84) 62%,rgba(6,43,79,.56) 100%);}
  .home-page .hero-content-clean .hero-lead{max-width:90%;}
}
@media(max-width:480px){
  .home-page .hero-clean{min-height:830px;height:830px;}
  .home-page .search-shell{margin-top:-530px;}
}