/* ============================================================
   KEK Yachting — homepage v4
   • Pointy navbar on top of full-bleed hero image
   • Hero photo with rounded bottom corners
   • Search bar lower (after hero)
   • Bigger icons, larger cards, highlighted CTAs
   • New: Base location, Need help, Combined FAQ+contact
   ============================================================ */

:root {
  --navy:        #253D6F;
  --navy-deep:   #1A2C54;
  --navy-darker: #0F1B33;
  --navy-soft:   #4A6395;
  --ink:         #14213D;
  --paper:       #FFFFFF;
  --cream:       #F6F1E6;
  --cream-2:     #EDE3CE;
  --line:        #E5E2D8;
  --line-strong: #D4CDB8;
  --muted:       #6E7891;
  --gold:        #C9A663;
  --sky:         #BFD2DD;
  --teal:        #6E9A9C;

  --display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --sans:    'Manrope', system-ui, -apple-system, sans-serif;

  --container: 1560px;
  --gutter: clamp(16px, 2vw, 32px);
  --radius-card: 14px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

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

/* ============ Type ============ */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); color: var(--navy); }
/* Fluid type scale — one continuous curve from 320px → ~1560px (no breakpoint jumps) */
h1 { font-size: clamp(28px, 6px + 6.4vw, 100px); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: clamp(23px, 13.3px + 3.24vw, 60px); font-weight: 700; line-height: 1.0; letter-spacing: -0.03em; text-wrap: balance; }
h3 { font-size: clamp(18px, 16.7px + 0.65vw, 26px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h4 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 1em; text-wrap: pretty; }
.italic-accent {
  font-style: italic;
  font-family: var(--display);
  color: var(--navy-soft);
}

.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--navy);
}
.kicker::before {
  content: ""; width: 24px; height: 1.5px; background: var(--navy);
}
.section-navy .kicker { color: var(--cream); }
.section-navy .kicker::before { background: var(--cream); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 28px;
  font-family: var(--sans);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary {
  background: var(--navy); color: #fff;
}
.btn-primary:hover { background: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(37,61,111,0.5); }
.btn-light { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
.btn-light:hover { background: var(--cream); border-color: var(--cream); }
.btn-cream {
  background: var(--cream-2); color: var(--navy);
}
.btn-cream:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.2); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-on-image {
  background: rgba(255,255,255,0.95);
  color: var(--navy);
  height: 60px;
  padding: 0 32px;
  font-size: 15px;
}
.btn-on-image:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.4); }

/* Highlighted "see all" button — has a soft halo to draw attention */
.btn-highlight {
  position: relative;
  background: var(--navy);
  color: #fff;
  height: 60px;
  padding: 0 32px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 0 0 6px rgba(37,61,111,0.10), 0 14px 30px -12px rgba(37,61,111,0.4);
}
.btn-highlight::after {
  content: ""; position: absolute; inset: -6px; border-radius: var(--radius-pill);
  border: 1.5px dashed rgba(37,61,111,0.25);
  pointer-events: none;
}
.btn-highlight:hover { background: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(37,61,111,0.15), 0 18px 40px -14px rgba(37,61,111,0.55); }
.btn-highlight.on-cream { background: var(--navy); }
.btn-highlight.on-navy { background: var(--cream-2); color: var(--navy); box-shadow: 0 0 0 6px rgba(255,255,255,0.10), 0 14px 30px -12px rgba(0,0,0,0.4); }
.btn-highlight.on-navy::after { border-color: rgba(255,255,255,0.3); }

.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 700;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1.5px solid var(--navy);
  padding-bottom: 4px;
  transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.link:hover { gap: 14px; color: var(--navy-deep); }

/* ============ Combined utility + header strip ============ */
.header-utility {
  position: relative;
  z-index: 11;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  height: 40px;
  display: flex; align-items: center;
}
.header-utility .row {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 0 36px; width: 100%;
}
.header-utility .left, .header-utility .right { display: flex; gap: 22px; align-items: center; }
.header-utility a { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; transition: color .2s ease; }
.header-utility a:hover { color: #fff; }
.trust-mini { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.trust-mini .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.4); }
.lang-switch { display: flex; gap: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; }
.lang-switch a { padding: 0 10px; border-right: 1px solid rgba(255,255,255,0.18); opacity: 0.55; }
.lang-switch a:last-child { border-right: 0; padding-right: 0; }
.lang-switch a:first-child { padding-left: 0; }
.lang-switch a.active { opacity: 1; }

/* ============ HERO with rounded bottom corners ============ */
.hero {
  position: relative;
  background: var(--paper);
  padding: 0 var(--gutter) 0;
}
.hero-frame {
  position: relative;
  border-radius: 0 0 36px 36px;
  overflow: hidden;
  isolation: isolate;
  height: clamp(620px, 85vh, 880px);
  margin: 0 auto;
  max-width: calc(var(--container) + 2 * var(--gutter));
  background: var(--navy);
}
.hero-frame::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(20,33,61,0.55) 0%, rgba(20,33,61,0.18) 32%, rgba(20,33,61,0.05) 60%, rgba(20,33,61,0.55) 100%);
  z-index: 2;
}
.hero-photo {
  position: absolute; inset: 0;
  background-image: url('assets/hero-bg.jpeg');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Header sits on top of hero, edge-to-edge wide, transparent over photo */
.site-header {
  position: relative;
  z-index: 10;
  background: transparent;
}
.site-header::after {
  content: ""; position: absolute; left: 36px; right: 36px; bottom: 0;
  height: 1px; background: rgba(255,255,255,0.18);
  pointer-events: none;
}
.brand { display: inline-flex; align-items: center; gap: 14px; height: 100%; text-decoration: none; }
.brand-mark { height: 44px; width: auto; display: block; }
.brand-word { font-family: var(--display); font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.brand-word em { font-family: var(--display); font-style: italic; font-weight: 400; opacity: 0.85; }
.foot-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.foot-logo img { height: 38px; width: auto; }
.foot-logo span { font-family: var(--display); font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.foot-logo em { font-style: italic; font-weight: 400; opacity: 0.85; }
.site-header .nav {
  height: 88px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 36px; align-items: center;
  padding: 0 36px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 44px; width: auto; filter: brightness(0) invert(1); }
.nav-links { display: flex; gap: 28px; justify-content: center; }
.nav-links > a, .nav-links .has-menu > button {
  position: relative;
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  padding: 8px 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-links .caret { width: 11px; height: 11px; opacity: 0.7; transition: transform .25s ease; }
.nav-links a:hover, .nav-links button:hover { color: #fff; }
.nav-links a:hover .caret, .nav-links button:hover .caret { transform: rotate(-180deg); }
.nav-links a::after, .nav-links button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1.5px; background: #fff;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav-links a:hover::after, .nav-links button:hover::after { transform: scaleX(1); }

.nav-actions { display: flex; gap: 14px; align-items: center; }
.nav-actions .icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  transition: background .2s ease, border-color .2s ease;
}
.nav-actions .icon-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.45); }
.nav-actions .btn-book {
  background: #fff;
  color: var(--navy);
  height: 44px;
  padding: 0 22px;
  font-size: 13px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s ease, transform .2s ease;
}
.nav-actions .btn-book:hover { background: var(--cream); transform: translateY(-1px); }
.hamburger { display: none; width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.22); color: #fff; }
.hamburger span { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; }
.hamburger span::before, .hamburger span::after { content: ""; position: absolute; left:0; right:0; height: 1.5px; background: currentColor; }
.hamburger span::before { top: -6px; } .hamburger span::after { top: 6px; }

/* Hero content — overlay on photo, vertically centered */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 160px 56px 120px;
  color: #fff;
}
.hero-content-inner {
  max-width: 920px;
  margin-top: auto;
  margin-bottom: auto;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}
.hero-eyebrow .pill {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  display: inline-flex; align-items: center; gap: 8px;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4FD89C; box-shadow: 0 0 0 3px rgba(79,216,156,0.25); }
.hero h1 {
  color: #fff;
  font-weight: 700;
  text-wrap: balance;
  /* homepage hero — continuous scale, mobile-safe floor */
  font-size: clamp(27px, 5.3px + 6.85vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero h1 .italic-accent { color: #fff; opacity: 0.92; font-weight: 400; }
.hero-sub {
  font-size: clamp(14.5px, 13.6px + 0.4vw, 19px);
  color: rgba(255,255,255,0.92);
  max-width: 56ch;
  margin: 24px 0 36px;
  line-height: 1.55;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-watch {
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.hero-watch .play {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.hero-watch:hover .play { background: rgba(255,255,255,0.3); transform: scale(1.05); }

/* Bottom corner stamp */
.hero-stamp {
  position: absolute;
  right: 36px; bottom: 36px;
  z-index: 5;
  display: flex; gap: 10px;
  align-items: center;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.hero-stamp svg { color: #fff; opacity: 0.9; }

/* ============ SEARCH (lower, just above fleet) ============ */
.search-row {
  padding: 80px 0 0;
  margin-top: 40px;
  background: var(--paper);
  position: relative;
}
.search-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
  gap: 0;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 12px 12px 12px 28px;
  align-items: center;
  box-shadow: 0 30px 60px -25px rgba(20,33,61,0.25), 0 6px 18px -6px rgba(20,33,61,0.08);
  border: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.search-card .field {
  padding: 8px 22px 8px 0;
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--line);
  cursor: pointer;
  min-width: 0;
}
.search-card .field:first-child { padding-left: 0; }
.search-card .field label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.search-card .field .value {
  font-family: var(--display);
  font-size: 17px; font-weight: 700;
  color: var(--navy);
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -0.01em;
}
.search-card .field .value svg { color: var(--navy); flex-shrink: 0; }
.search-card .toggle { display: flex; gap: 6px; }
.search-card .toggle button {
  font-family: var(--display);
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  transition: background .2s ease, color .2s ease;
}
.search-card .toggle button.active { background: var(--navy); color: #fff; }
.search-card .btn-primary { padding: 0 30px; }
.search-helper {
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.search-helper a { color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--navy); padding-bottom: 1px; }

/* ============ TRUST RIBBON — bigger icons, no borders ============ */
.trust-ribbon {
  padding: 80px 0 40px;
  background: var(--paper);
}

/* Visual variant — sits above booking, horizontal row with dividers */
.trust-ribbon-visual {
  padding: 40px 0 8px;
  background: var(--paper);
}
.trust-ribbon-visual .trust-ribbon-inner {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: center;
}
.trust-ribbon-visual .item {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 14px !important;
}
.trust-ribbon-visual .ic svg { width: 56px !important; height: 56px !important; }
.trust-ribbon-visual .text strong { text-align: center; }
.trust-ribbon-visual .text span { text-align: center; }
.trust-ribbon-visual .divider {
  width: 1px; height: 70px;
  background: linear-gradient(to bottom, transparent 0%, rgba(37,61,111,0.18) 50%, transparent 100%);
}
@media (max-width: 1100px) {
  .trust-ribbon-visual .trust-ribbon-inner { grid-template-columns: 1fr 1fr 1fr; }
  .trust-ribbon-visual .divider { display: none; }
}
@media (max-width: 720px) {
  .trust-ribbon-visual .trust-ribbon-inner { grid-template-columns: 1fr 1fr; }
}
.trust-ribbon-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.trust-ribbon .item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 0 8px;
}
.trust-ribbon .ic {
  display: grid; place-items: center;
  color: var(--navy);
}
.trust-ribbon .ic svg { width: 48px; height: 48px; }
.trust-ribbon .text strong {
  display: block;
  font-family: var(--display);
  font-size: 22px; font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.trust-ribbon .text span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* ============ SECTION base ============ */
.section { padding: clamp(72px, 9vw, 130px) 0; position: relative; }
.section-cream { background: var(--cream); }
.section-cream-2 { background: var(--cream-2); }
.section-navy { background: var(--navy-deep); color: #fff; }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .italic-accent { color: var(--cream-2); }

.section-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 40px; align-items: end;
  margin-bottom: 56px;
}
.section-head .left h2 { margin-top: 18px; max-width: 14ch; }
.section-head .right { color: var(--muted); padding-bottom: 6px; max-width: 42ch; font-size: 15px; line-height: 1.55; }
.section-head .head-cta { padding-bottom: 4px; }

/* ============ FLEET — bigger cards, icons on data ============ */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.yacht-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.yacht-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(20,33,61,0.25); border-color: transparent; }
.yacht-card .photo {
  position: relative;
  aspect-ratio: 4 / 3.2;
  background: var(--cream);
  overflow: hidden;
}
.yacht-card .photo image-slot { width: 100%; height: 100%; }
.yacht-card .badge {
  position: absolute; top: 18px; left: 18px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.95);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy);
}
.yacht-card .feature-pills {
  position: absolute; bottom: 18px; left: 18px;
  display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 36px);
}
.yacht-card .feature-pills span {
  padding: 6px 12px;
  background: rgba(255,255,255,0.92);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.02em;
}
.yacht-card .body { padding: 28px 28px 26px; flex: 1; display: flex; flex-direction: column; }
.yacht-card .name {
  font-family: var(--display);
  font-size: clamp(24px, 20px + 1.2vw, 30px); font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy);
  line-height: 0.95;
  margin-bottom: 6px;
}
.yacht-card .model {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-bottom: 22px;
  font-weight: 500;
}
.yacht-card .specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.yacht-card .spec {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--ink);
}
.yacht-card .spec .ic {
  display: grid; place-items: center;
  color: var(--navy);
  flex-shrink: 0;
}
.yacht-card .spec .ic svg { width: 22px; height: 22px; }
.yacht-card .spec strong { font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 16px; letter-spacing: -0.01em; line-height: 1; }
.yacht-card .spec .lbl { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: 0.05em; }
.yacht-card .foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: auto;
}
.yacht-card .price small {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 2px;
}
.yacht-card .price strong {
  font-family: var(--display);
  font-size: 26px; font-weight: 700;
  color: var(--navy); letter-spacing: -0.02em;
}
.yacht-card .price strong span { font-size: 12px; color: var(--muted); font-family: var(--sans); font-weight: 500; }
.yacht-card .view {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy);
}
.yacht-card .arrow-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  transition: background .2s ease, color .2s ease;
}
.yacht-card .view:hover .arrow-circle { background: var(--navy); color: #fff; }

.fleet-cta {
  display: flex; justify-content: center; margin-top: 60px;
  gap: 16px; flex-wrap: wrap; align-items: center;
}
.fleet-cta .helper {
  font-size: 13px; color: var(--muted); margin-right: 8px;
}

/* ============ WHY KEK — big naked icons ============ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.why-grid .item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
.why-grid .ic {
  display: grid; place-items: center;
  color: var(--navy);
}
.why-grid .ic svg { width: 72px; height: 72px; stroke-width: 1.4; }
.why-grid h3 { font-size: 22px; line-height: 1.05; max-width: 14ch; }
.why-grid p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* ============ BASE LOCATION ============ */
.base-section {
  background: var(--cream);
  padding: clamp(72px, 9vw, 130px) 0;
}
.base-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.base-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--navy);
}
.base-photo image-slot { width: 100%; height: 100%; }
.base-photo .marker {
  position: absolute;
  top: 36%; left: 50%; transform: translate(-50%, -50%);
  z-index: 5;
}
.base-photo .marker .pin {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--navy);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 0 0 8px rgba(255,255,255,0.5), 0 0 0 16px rgba(255,255,255,0.2);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(255,255,255,0.5), 0 0 0 16px rgba(255,255,255,0.15); }
  50% { box-shadow: 0 0 0 12px rgba(255,255,255,0.5), 0 0 0 28px rgba(255,255,255,0.05); }
}
.base-photo .marker .label {
  margin-top: 12px;
  font-family: var(--display); font-weight: 700;
  font-size: 14px; color: var(--navy);
  background: #fff;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  text-align: center;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.base-info h2 { max-width: 14ch; }
.base-info .lead { font-size: 17px; color: var(--ink); line-height: 1.6; max-width: 52ch; margin-top: 18px; }
.base-info .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 36px 0;
  padding: 24px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.base-info .grid .item .lbl {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.base-info .grid .item strong {
  font-family: var(--display);
  font-size: 18px; font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  display: block;
  line-height: 1.2;
}
.base-info .grid .item small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.base-info .actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============ HOW IT WORKS — large numbered cards ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.step {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 36px 36px 36px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s ease, background .3s ease;
}
.step:hover { transform: translateY(-4px); background: var(--cream-2); }
.step .num {
  font-family: var(--display);
  font-size: clamp(72px, 8vw, 120px);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.06em;
  line-height: 0.85;
  opacity: 0.16;
  position: absolute;
  right: 28px; top: 18px;
  z-index: 0;
}
.step .step-icon {
  color: var(--navy);
  margin-bottom: 8px;
  position: relative; z-index: 1;
}
.step .step-icon svg { width: 56px; height: 56px; stroke-width: 1.4; }
.step h3 { font-size: 24px; margin-bottom: 4px; position: relative; z-index: 1; }
.step p { color: var(--ink); font-size: 14.5px; line-height: 1.55; max-width: 38ch; margin: 0; position: relative; z-index: 1; }
.step .meta {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--line-strong);
  position: relative; z-index: 1;
}

/* ============ OFFERS ============ */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.offer {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.offer:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -22px rgba(20,33,61,0.2); }
.offer .photo { aspect-ratio: 16 / 10; position: relative; }
.offer .photo image-slot { width: 100%; height: 100%; }
.offer .discount {
  position: absolute; top: 16px; right: 16px;
  background: var(--navy);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--display);
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
}
.offer .label {
  position: absolute; top: 16px; left: 16px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.92);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy);
}
.offer .body { padding: 24px 26px 26px; }
.offer h3 { font-size: 22px; margin-bottom: 6px; }
.offer .meta { font-size: 13px; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
.offer .pricing { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.offer .pricing .new { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.offer .pricing .old { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.offer .pricing .save {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal);
  background: rgba(110,154,156,0.12);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* ============ DESTINATIONS ============ */
.destinations {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
}
.destinations .big {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 600px;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 40px;
  color: #fff;
}
.destinations .big image-slot { position: absolute; inset: 0; z-index: 0; }
.destinations .big::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,33,61,0.05) 0%, rgba(20,33,61,0.7) 100%);
  z-index: 1;
}
.destinations .big > * { position: relative; z-index: 2; }
.destinations .big .stamp {
  align-self: flex-start;
  padding: 8px 16px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: auto;
}
.destinations .big .quote {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.destinations .big .quote span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 14px;
  opacity: 0.85;
  font-family: var(--sans);
  line-height: 1.5;
}
.destinations .stack { display: flex; flex-direction: column; gap: 14px; }
.route-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  align-items: center;
  transition: background .2s ease, transform .25s ease, border-color .2s ease;
}
.route-card:hover { background: var(--cream); border-color: var(--cream); transform: translateX(4px); }
.route-card .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 36px;
  color: var(--navy);
  letter-spacing: -0.04em;
  line-height: 0.9;
  width: 58px;
  text-align: center;
}
.route-card h3 { font-size: 20px; margin-bottom: 4px; }
.route-card .meta { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.route-card .meta .audience { font-weight: 600; color: var(--navy); }
.route-card .arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  color: var(--navy);
  transition: background .2s ease, color .2s ease;
}
.route-card:hover .arrow { background: var(--navy); color: #fff; }

.destinations-cta {
  display: flex; justify-content: center; margin-top: 56px;
}

/* ============ NEW ROUTES SECTION ============ */
.section-routes { background: var(--paper); }

.route-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 56px;
  background: var(--navy);
  min-height: 480px;
}
.route-hero-photo {
  position: relative;
  min-height: 480px;
}
.route-hero-photo image-slot {
  position: absolute; inset: 0;
}
.route-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(20,33,61,0) 0%, rgba(20,33,61,0) 60%, rgba(20,33,61,0.7) 100%);
}
.route-hero-content {
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 56px 56px 56px 56px;
  color: #fff;
  background: var(--navy);
}
.route-hero-stamp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(201,166,99,0.18);
  color: var(--gold, #C9A663);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 22px;
}
.route-hero-content h3 {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 18px;
}
.route-hero-sub {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 44ch;
  margin-bottom: 36px;
}
.route-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.16);
  margin-bottom: 32px;
}
.route-hero-stats > div { display: flex; flex-direction: column; gap: 4px; }
.route-hero-stats .lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.route-hero-stats strong {
  font-family: var(--display);
  font-size: 18px; font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.route-tile {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
  text-decoration: none;
  color: var(--ink);
}
.route-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(20,33,61,0.18);
  border-color: rgba(37,61,111,0.18);
}
.route-tile .photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream);
}
.route-tile .photo image-slot { position: absolute; inset: 0; }
.route-tile .photo .num {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  background: rgba(255,255,255,0.94);
  color: var(--navy);
  border-radius: var(--radius-pill);
}
.route-tile .body {
  padding: 24px 24px 26px;
  display: flex; flex-direction: column;
  gap: 14px;
  flex: 1;
}
.route-tile h4 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.route-tile p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.route-tile .meta-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink);
  margin-top: auto;
  padding-top: 8px;
}
.route-tile .meta-row span {
  display: inline-flex; align-items: center; gap: 6px;
}
.route-tile .meta-row svg { color: var(--navy); opacity: 0.7; }
.route-tile .meta-row .diff {
  margin-left: auto;
  padding: 4px 10px;
  background: var(--cream);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.route-tile .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}

/* Custom-route tile (last card) */
.route-tile-custom {
  background: var(--cream);
  border: 1px dashed rgba(37,61,111,0.32);
  text-align: left;
}
.route-tile-custom .photo-custom {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background: transparent;
  color: var(--navy);
}
.route-tile-custom .photo-custom svg {
  width: 50%;
  height: auto;
  opacity: 0.85;
}
.route-tile-custom h4 { color: var(--navy); }
.route-tile-custom .custom-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  color: var(--navy);
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  letter-spacing: 0.04em;
}
.route-tile-custom:hover .custom-cta .arrow { transform: translateX(4px); }
.route-tile-custom .custom-cta .arrow { transition: transform .2s ease; }

@media (max-width: 1100px) {
  .route-hero { grid-template-columns: 1fr; }
  .route-hero-photo { min-height: 320px; }
  .route-hero-content { padding: 36px; }
  .routes-grid { grid-template-columns: repeat(2, 1fr); }
  .route-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .routes-grid { grid-template-columns: 1fr; }
}

/* ============ REVIEWS ============ */
.reviews-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
  margin-bottom: 56px;
}
.reviews-badge {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.06);
  padding: 16px 22px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-card);
}
.reviews-badge .g {
  width: 44px; height: 44px;
  background: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 20px;
  color: var(--navy);
}
.reviews-badge .stars { color: var(--gold); font-size: 13px; letter-spacing: 0.18em; }
.reviews-badge strong { font-family: var(--display); font-size: 24px; font-weight: 700; }
.reviews-badge span { font-size: 11px; color: rgba(255,255,255,0.7); line-height: 1.4; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review {
  padding: 32px 30px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-card);
}
.review .stars { color: var(--gold); font-size: 13px; letter-spacing: 0.18em; margin-bottom: 18px; }
.review p {
  font-family: var(--display);
  font-size: 19px; font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 24px;
  text-wrap: pretty;
}
.review .meta { display: flex; align-items: center; gap: 14px; }
.review .ava {
  width: 44px; height: 44px;
  background: var(--cream);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: var(--navy);
  flex-shrink: 0;
}
.review .meta strong { display: block; color: #fff; font-size: 14px; font-family: var(--sans); font-weight: 700; }
.review .meta div small { font-size: 12px; color: rgba(255,255,255,0.55); display: block; margin-top: 2px; }
.reviews-foot { display: flex; justify-content: center; margin-top: 48px; }

/* ============ INSTAGRAM — bigger tiles ============ */
.ig-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
  margin-bottom: 48px;
}
.ig-head .ig-handle {
  font-size: 14px; color: var(--muted); margin-top: 16px;
  display: flex; align-items: center; gap: 8px;
}
.ig-head .ig-handle::before {
  content: ""; display: inline-block; width: 18px; height: 18px;
  background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
  border-radius: 5px; flex-shrink: 0;
}
.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ig-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--cream);
  cursor: pointer;
  transition: transform .3s ease;
}
.ig-tile:nth-child(5), .ig-tile:nth-child(6) { aspect-ratio: 4 / 5; }
.ig-tile image-slot { width: 100%; height: 100%; }
.ig-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20,33,61,0.3));
  opacity: 0;
  transition: opacity .25s ease;
}
.ig-tile .ig-meta {
  position: absolute; bottom: 14px; left: 14px;
  display: flex; gap: 14px;
  font-size: 12px; font-weight: 700; color: #fff;
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease;
}
.ig-tile:hover { transform: translateY(-3px); }
.ig-tile:hover::after, .ig-tile:hover .ig-meta { opacity: 1; }

/* ============ BLOG — featured + grid ============ */
.blog-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--paper);
  border-radius: var(--radius-card);
  border: 1px solid var(--line-strong);
  margin-bottom: 32px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
.blog-featured .featured-stamp {
  position: absolute;
  top: 24px; left: 24px;
  background: var(--navy);
  color: #fff;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  z-index: 2;
}
.blog-featured .photo {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  background: var(--cream);
  display: block;
}
.blog-featured .photo image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.blog-featured .body { display: flex; flex-direction: column; justify-content: center; padding: 48px 48px; min-width: 0; }
.blog-featured .meta-top { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.blog-featured .cat {
  padding: 5px 12px;
  background: var(--cream);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy);
}
.blog-featured .read-time { font-size: 13px; color: var(--muted); }
.blog-featured h3 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}
.blog-featured .excerpt { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 24px; max-width: 50ch; }
.blog-featured .author { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.post {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.post:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -22px rgba(20,33,61,0.2); }
.post .photo {
  position: relative;
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
  background: var(--cream);
}
.post .photo image-slot { width: 100%; height: 100%; }
.post .cat {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.95);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy);
}
.post .body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.post .meta { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 10px; }
.post h3 { font-size: 22px; margin-bottom: 12px; line-height: 1.15; }
.post .excerpt { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 20px; flex: 1; }
.post .author { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }

.author-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--navy);
  flex-shrink: 0;
  border: 1.5px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}
.author-name {
  font-family: var(--sans); font-weight: 700;
  font-size: 13px; color: var(--ink);
  letter-spacing: -0.01em;
}
.author-role { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ============ Help channels (now in final CTA) ============ */
.help-channel {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.06);
  padding: 20px 22px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background .25s ease, border-color .25s ease;
  text-align: left;
}
.help-channel:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
.help-channel .ic {
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.help-channel .ic svg { width: 36px; height: 36px; stroke-width: 1.6; }
.help-channel .lbl {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: block;
}
.help-channel strong {
  font-family: var(--display);
  font-size: 15px; font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  display: block;
  margin-top: 2px;
}

/* ============ Ambient background illustrations ============ */
.ambient {
  position: absolute;
  pointer-events: none;
  color: var(--navy);
  opacity: 0.05;
  z-index: 0;
}
.ambient-compass { width: 720px; height: 720px; right: -180px; top: -120px; }
.ambient-wave { width: 900px; height: 200px; left: -100px; bottom: 40px; opacity: 0.07; }
.ambient-knot { width: 360px; height: 360px; left: -80px; top: 60px; opacity: 0.06; }
.ambient-anchor { width: 480px; height: 480px; right: -100px; bottom: -120px; opacity: 0.04; }

/* ============ Big contact feature card ============ */
.contact-feature {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 0;
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: 0 30px 80px -40px rgba(20,33,61,0.28);
  margin-bottom: 100px;
}
.contact-feature-left {
  padding: 64px 56px;
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.contact-feature-left::after {
  content: ""; position: absolute; right: -80px; bottom: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
  pointer-events: none;
}
.contact-feature-left .kicker { color: rgba(255,255,255,0.7); }
.contact-feature-left .kicker::before { background: rgba(255,255,255,0.5); }
.contact-feature-left h2 {
  color: #fff; max-width: 14ch; margin: 18px 0 22px;
  font-size: clamp(40px, 4vw, 60px);
}
.contact-feature-left .italic-accent { color: rgba(255,255,255,0.65); font-weight: 400; }
.contact-feature-left .lead { color: rgba(255,255,255,0.85); font-size: 16px; line-height: 1.6; max-width: 44ch; margin-bottom: 36px; }

.big-quick { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.big-channel {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.big-channel:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); transform: translateX(4px); }
.big-channel .ic { color: #fff; flex-shrink: 0; }
.big-channel .ic svg { width: 32px; height: 32px; stroke-width: 1.6; }
.big-channel .lbl {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: block;
}
.big-channel strong {
  font-family: var(--display); font-size: 18px; font-weight: 700;
  color: #fff; letter-spacing: -0.01em;
  display: block; margin-top: 4px;
}

.founders { display: flex; gap: 28px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 22px; }
.founder { display: flex; gap: 12px; align-items: center; }
.founder .av { width: 42px; height: 42px; border-radius: 50%; background: var(--cream); color: var(--navy); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 16px; }
.founder strong { font-family: var(--display); font-size: 14px; color: #fff; display: block; }
.founder span { font-size: 11px; color: rgba(255,255,255,0.6); display: block; }

.hours { display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: rgba(255,255,255,0.85); }
.hours .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); display: block; margin-bottom: 2px; }

/* form side */
.contact-feature-form {
  padding: 64px 56px;
  background: #fff;
  display: flex; flex-direction: column; gap: 18px;
}
.contact-feature-form .form-head { margin-bottom: 12px; }
.contact-feature-form h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -0.02em;
  margin-top: 14px; max-width: 18ch;
}
.contact-feature-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-feature-form label { display: flex; flex-direction: column; gap: 6px; }
.contact-feature-form label.full { width: 100%; }
.contact-feature-form label > span { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.contact-feature-form input, .contact-feature-form select, .contact-feature-form textarea {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--sans);
  font-size: 14.5px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
}
.contact-feature-form input:focus, .contact-feature-form select:focus, .contact-feature-form textarea:focus {
  outline: none; border-color: var(--navy); background: #fff;
}
.contact-feature-form textarea { resize: vertical; min-height: 140px; }
.contact-feature-form .big-submit { width: 100%; height: 64px; justify-content: center; font-size: 15px; margin-top: 6px; }
.contact-feature-form .terms-line { font-size: 11px; color: var(--muted); line-height: 1.5; }
.contact-feature-form .terms-line a { color: var(--navy); border-bottom: 1px solid currentColor; }

/* FAQ below */
.faq-below { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
.faq-below-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: end; margin-bottom: 40px;
}
.faq-below-head h2 { margin-top: 16px; }
.faq-below-head .faq-lead { color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 38ch; }
.faq-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
}

@media (max-width: 980px) {
  .contact-feature { grid-template-columns: 1fr; }
  .contact-feature-left, .contact-feature-form { padding: 40px 28px; }
  .faq-list-grid { grid-template-columns: 1fr; }
  .faq-below-head { grid-template-columns: 1fr; gap: 12px; }
  .contact-feature-form .row { grid-template-columns: 1fr; }
  .founders { flex-direction: column; gap: 14px; }
}

/* ============ FAQ + CONTACT combined — split-card layout (legacy, retained) ============ */
.faq-contact-shell {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--paper);
  border-radius: var(--radius-card);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.faq-side {
  padding: 56px 56px 48px;
  border-right: 1px solid var(--line-strong);
}
.faq-side h2 { max-width: 14ch; margin-top: 18px; margin-bottom: 16px; }
.faq-side .lead { color: var(--muted); margin-bottom: 32px; max-width: 42ch; font-size: 15px; line-height: 1.55; }
.contact-side {
  background: var(--cream);
  padding: 56px 56px 48px;
}
.contact-side h3 { font-family: var(--display); font-size: 30px; font-weight: 700; margin-bottom: 8px; max-width: 14ch; letter-spacing: -0.02em; }
.contact-side .lead { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-bottom: 28px; }
.contact-side .quick { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line-strong); }
.contact-side .quick a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--navy); }
.contact-side .quick a svg { width: 18px; height: 18px; }
.faq-form { display: flex; flex-direction: column; gap: 14px; }
.faq-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq-form input, .faq-form textarea, .faq-form select {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--sans);
  font-size: 14.5px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  transition: border-color .2s ease;
}
.faq-form input:focus, .faq-form textarea:focus, .faq-form select:focus {
  outline: none; border-color: var(--navy);
}
.faq-form textarea { resize: vertical; min-height: 130px; }
.faq-form .terms-line { font-size: 11px; color: var(--muted); line-height: 1.5; }
.faq-form .terms-line a { color: var(--navy); border-bottom: 1px solid currentColor; }
.faq-form button { width: 100%; height: 56px; justify-content: center; }

.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid var(--line-strong);
}
.faq-item summary {
  padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--display);
  font-size: 19px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--navy);
  cursor: pointer; list-style: none;
  gap: 24px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .toggle-ic {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--navy);
  transition: transform .3s ease;
}
.faq-item[open] summary .toggle-ic {
  transform: rotate(45deg);
}
.faq-item summary .toggle-ic svg { width: 22px; height: 22px; }
.faq-item .answer { padding: 0 0 28px; max-width: 60ch; color: var(--muted); font-size: 14px; line-height: 1.7; }
.faq-item .answer ul { padding-left: 0; margin: 12px 0; }
.faq-item .answer ul li {
  display: flex; gap: 8px;
  margin-bottom: 4px;
  align-items: flex-start;
  font-size: 13px;
}
.faq-item .answer ul li::before {
  content: ""; flex-shrink: 0; width: 5px; height: 5px;
  background: var(--navy); border-radius: 50%;
  margin-top: 8px;
}
.faq-item .answer a { color: var(--navy); border-bottom: 1px solid currentColor; font-weight: 600; }
.faq-cta-row {
  display: flex; justify-content: center; margin-top: 36px; gap: 14px; flex-wrap: wrap;
}

/* ============ NEWSLETTER ============ */
.newsletter {
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 56px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.newsletter .deco {
  position: absolute;
  right: -30px; top: 50%;
  transform: translateY(-50%);
  opacity: 0.18;
  pointer-events: none;
}
.newsletter .deco svg { width: 220px; height: 220px; color: var(--navy); }
.newsletter > * { position: relative; z-index: 1; }
.newsletter h2 { max-width: 16ch; }
.newsletter .lead-mag {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 8px 14px;
  background: #fff;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.newsletter form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.newsletter form input {
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--sans); font-size: 14px;
  color: var(--ink);
}
.newsletter form input:focus { outline: none; border-color: var(--navy); }
.newsletter form button { padding: 0 28px; }
.newsletter .terms { font-size: 11px; color: var(--muted); margin-top: 14px; }

/* ============ FINAL CTA — combined Set Sail + Need Help ============ */
.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 var(--gutter) clamp(60px, 8vw, 100px);
  border-radius: var(--radius-card);
  background: var(--navy-deep);
  color: #fff;
}
.final-cta-bg { position: absolute; inset: 0; z-index: 0; }
.final-cta-bg image-slot { width: 100%; height: 100%; }
.final-cta-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(15,27,51,0.92) 0%, rgba(15,27,51,0.7) 50%, rgba(15,27,51,0.85) 100%);
}
.final-cta-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  padding: 80px 56px;
  align-items: center;
}
.final-cta .left h2 { color: #fff; max-width: 16ch; margin: 18px 0 20px; }
.final-cta .italic-accent { color: rgba(255,255,255,0.65); font-weight: 400; }
.final-cta .sub { font-size: 17px; color: rgba(255,255,255,0.85); max-width: 50ch; margin: 0 0 32px; line-height: 1.55; }
.final-cta .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.final-cta .right .channels-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.final-cta .right .channels-title::before { content: ""; width: 24px; height: 1.5px; background: rgba(255,255,255,0.4); }
.final-cta .channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============ FOOTER ============ */
.site-foot {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.62);
  padding: 80px 0 32px;
}
.site-foot a { color: rgba(255,255,255,0.78); transition: color .2s ease; }
.site-foot a:hover { color: #fff; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.foot-brand img { height: 38px; margin-bottom: 22px; }
.foot-brand .tagline { font-size: 13px; line-height: 1.6; max-width: 32ch; margin-bottom: 18px; }
.foot-mini-trust {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.foot-mini-trust span { padding: 6px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-pill); }
.foot-col h4 {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 18px;
}
.foot-col ul { display: flex; flex-direction: column; gap: 11px; }
.foot-col li, .foot-col p, .foot-col span { font-size: 13px; line-height: 1.6; }
.contact-line { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.78); }
.contact-line a { display: block; margin-top: 6px; font-weight: 600; }
.social { display: flex; gap: 8px; margin-top: 18px; }
.social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.78);
}
.social a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.foot-col .hours { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 18px; line-height: 1.5; }

.partner-strip {
  padding: 28px 0;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.partner-strip .lbl { font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; }
.partner-strip .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.3); }

.legal-strip {
  padding: 22px 0 0;
  font-size: 11px; color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.foot-bottom {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  font-size: 12px; color: rgba(255,255,255,0.45);
}
.foot-bottom .legal { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-bottom .pay { display: flex; gap: 10px; align-items: center; }
.foot-bottom .pay span {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em;
}

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-actions .icon-btn { display: none; }
  .hamburger { display: flex; }
  .hero-frame { height: clamp(560px, 80vh, 720px); }
  .hero-content { padding: 36px 36px 36px; }
  .hero-stamp { right: 24px; bottom: 24px; }
  .search-card { grid-template-columns: 1fr 1fr; padding: 16px; border-radius: 24px; }
  .search-card .field { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
  .search-card .btn-primary { grid-column: 1 / 3; height: 56px; justify-content: center; }
  .trust-ribbon-inner { grid-template-columns: 1fr 1fr 1fr; }
  .fleet-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps::before { display: none; }
  .offers-grid { grid-template-columns: 1fr 1fr; }
  .destinations { grid-template-columns: 1fr; }
  .destinations .big { min-height: 420px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  .ig-tile:nth-child(5), .ig-tile:nth-child(6) { aspect-ratio: 1; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .help-card { grid-template-columns: 1fr; gap: 36px; padding: 36px; }
  .faq-contact { grid-template-columns: 1fr; gap: 48px; }
  .newsletter { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
  .base-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .section-head { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .utility .left a:not(:first-child) { display: none; }
  .utility .right .trust-mini { display: none; }
  .hero { padding: 0; }
  /* Let the frame grow with content so the heading can never collide
     with the header on narrow screens. */
  .hero-frame { border-radius: 0 0 32px 32px; height: auto; min-height: 78vh; }
  /* Take the hero copy out of absolute centering and put it in normal flow,
     directly below the (in-flow) header — no more overlap. */
  .hero-content {
    position: relative;
    inset: auto;
    z-index: 5;
    justify-content: flex-start;
    padding: 28px 22px 40px;
  }
  .hero-content-inner { margin-top: 0; margin-bottom: 0; }
  .hero h1 { font-size: clamp(34px, 8vw, 52px); line-height: 1.02; }
  .hero-stamp { display: none; }
  .site-header .nav { padding: 0 22px; gap: 16px; }
  .brand img { height: 36px; }
  .nav-actions .btn-book { padding: 0 16px; height: 40px; font-size: 12px; }
  .trust-ribbon-inner { grid-template-columns: 1fr 1fr; }
  .fleet-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .why-grid .ic { width: 80px; height: 80px; }
  .why-grid .ic svg { width: 40px; height: 40px; }
  .offers-grid { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr; }
  .help-card .channels { grid-template-columns: 1fr; }
  .faq-form .row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .final-cta { margin: 0 12px 60px; }
  .final-cta-inner { padding: 56px 24px; }
  .yacht-card .specs { grid-template-columns: 1fr 1fr; }
}


/* ============ Merged footer + newsletter ============ */
.site-foot-merged { padding-top: 60px; }
.foot-newsletter { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; padding-bottom: 48px; }
.foot-newsletter h2 { color: #fff; max-width: 16ch; margin-top: 14px; }
.foot-newsletter .italic-accent { color: rgba(255,255,255,0.65); font-weight: 400; }
.foot-newsletter .lead-mag { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); padding: 10px 16px; border-radius: 999px; color: rgba(255,255,255,0.9); font-size: 13px; margin-top: 18px; }
.foot-newsletter .news-form { display: flex; gap: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 6px 6px 6px 22px; }
.foot-newsletter .news-form input { flex: 1; background: transparent; border: 0; color: #fff; font-size: 15px; outline: none; }
.foot-newsletter .news-form input::placeholder { color: rgba(255,255,255,0.5); }
.foot-newsletter .news-form button { white-space: nowrap; height: 48px; padding: 0 22px; }
.foot-divider { border: 0; border-top: 1px solid rgba(255,255,255,0.12); margin: 0 0 56px; }


/* ============================================================
   FRESH ADRIATIC LAYER — kicker removal, de-glass solids,
   airier spacing, sea-fresh accents, booking + footer merge.
   Appended last so it wins on equal specificity.
   ============================================================ */
:root{
  --sea-fresh:#1C8FA0;        /* bright Adriatic water accent */
  --sea-fresh-deep:#15727F;
  --sea-fresh-tint:#EAF4F4;
}

/* --- Remove the dashed eyebrow kickers above section headings.
       Keep them only inside the page heroes (other-page H1 eyebrows). --- */
.kicker{ display:none !important; }
.page-hero .kicker, .page-hero-content .kicker{ display:inline-block !important; }

/* --- De-glass: keep hero chrome legible now blur is gone --- */
.hero-eyebrow .pill{ background:rgba(14,28,48,0.42); border:1px solid rgba(255,255,255,0.45); }
.hero-stamp{ background:rgba(14,28,48,0.46); border:1px solid rgba(255,255,255,0.34); }
.hero-watch .play{ background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.5); }
.btn-on-image{ background:#fff; }

/* --- Airier rhythm --- */
.section{ padding: clamp(84px, 10vw, 148px) 0; }
.section-head{ margin-bottom: 60px; }

/* --- Softer, fresher cards (less heavy shadow, lighter borders) --- */
.yacht-card, .offer, .post, .route-tile, .yacht-card-rich{ box-shadow:none; }
.yacht-card:hover, .offer:hover, .post:hover, .route-tile:hover, .yacht-card-rich:hover{
  box-shadow: 0 20px 44px -30px rgba(15,27,51,0.32);
}

/* --- Sea-fresh accents (subtle, q-yacht feel) --- */
.trust-ribbon-visual{ border-top:2px solid var(--sea-fresh); }
.search-card .btn-primary{ background:var(--sea-fresh); }
.search-card .btn-primary:hover{ background:var(--sea-fresh-deep); box-shadow:0 14px 30px -12px rgba(28,143,160,0.5); }
.search-card .field .value svg{ color:var(--sea-fresh-deep); }
.link{ border-bottom-color: var(--sea-fresh); }
.link:hover{ color: var(--sea-fresh-deep); border-color: var(--sea-fresh-deep); }
.route-tile .meta-row svg, .route-tile-custom .photo-custom svg{ color: var(--sea-fresh-deep); }

/* ============================================================
   BEFORE YOU SET SAIL — 3 columns + facts strip as ONE panel
   ============================================================ */
.booking-plan{ background: var(--cream); padding: clamp(84px,10vw,148px) 0; }
.booking-plan .bp-head{ max-width: 60ch; margin: 0 0 40px; }
.booking-plan .bp-head h2{ margin: 0 0 12px; }
.booking-plan .bp-head p{ color: var(--muted); font-size: 16px; margin:0; max-width: 54ch; }

.bp-panel{
  border:1px solid var(--line-strong); border-radius: var(--radius-card);
  overflow:hidden; background:#fff;
}
.bp-cols{ display:grid; grid-template-columns:repeat(3,1fr); }
.bp-col{ padding: 40px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.bp-col:last-child{ border-right:0; }
.bp-col .num{ font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--sea-fresh-deep); }
.bp-col h3{ font-family:var(--display); font-size:23px; font-weight:700; color:var(--navy); margin:0; line-height:1.14; letter-spacing:-0.01em; }
.bp-col p{ font-size:14.5px; line-height:1.62; color:var(--muted); margin:0; }
.bp-col a{ margin-top:auto; font-size:14px; font-weight:700; color:var(--sea-fresh-deep); display:inline-flex; align-items:center; gap:8px; transition:gap .2s ease; }
.bp-col a:hover{ gap:12px; }

.bp-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  background: var(--navy); color:#fff; padding: 32px 40px;
}
.bp-facts .col{ display:flex; flex-direction:column; gap:4px; }
.bp-facts .lbl{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.bp-facts strong{ font-family:var(--display); font-size:22px; font-weight:700; }
.bp-facts p{ font-size:13px; color:rgba(255,255,255,0.72); margin:0; line-height:1.45; }
@media (max-width:900px){
  .bp-cols{ grid-template-columns:1fr; }
  .bp-col{ border-right:0; border-bottom:1px solid var(--line); }
  .bp-facts{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   READY TO SET SAIL — framed Adriatic image section (distinct,
   echoes the hero's rounded photo frame; sits on paper)
   ============================================================ */
.final-cta{ position:relative; background: var(--paper); padding: clamp(36px,5vw,72px) var(--gutter) clamp(76px,9vw,120px); margin:0; }
.final-cta-frame{
  position:relative; max-width: calc(var(--container) + 2*var(--gutter)); margin:0 auto;
  border-radius: 6px; overflow:hidden; isolation:isolate; min-height: 480px; display:flex; align-items:center;
}
.final-cta-frame .final-cta-bg{ display:block !important; position:absolute; inset:0; z-index:0; }
.final-cta-frame .final-cta-bg image-slot{ width:100%; height:100%; }
.final-cta-frame::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(11,20,40,0.82) 0%, rgba(11,20,40,0.5) 48%, rgba(11,20,40,0.12) 100%); }
.final-cta-frame .final-cta-inner{ position:relative; z-index:2; display:block; padding: clamp(40px,5vw,76px); color:#fff; max-width:660px; margin:0; }
.final-cta .left{ max-width:none; }
.final-cta .right{ display:none !important; }
.final-cta h2{ color:#fff; }
.final-cta .sub{ color:rgba(255,255,255,0.9); max-width:46ch; }
.final-cta .actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }

/* ============================================================
   ICONS — larger on desktop, no boxes / borders / fills
   ============================================================ */
.values-grid .ic, .why-pirovac .ic, .cert-grid .ic, .highlights-grid .ic,
.contact-channels .ic, .contact-channel .ic, .legal-cluster .ic,
.extras-card .ic, .extras-table-head .ic, .extras-row .ic,
.equip-cat-head .cat-ic, .included-grid .ic, .step .step-icon,
.why-home-item .ic, .help-channel .ic, .big-channel .ic, .trust-ribbon .ic{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-bottom: 14px;
  color: var(--navy);
  display: inline-flex;
}
.contact-channel.wa .ic, .contact-channels .wa .ic{ color:#2C7A63; }
.contact-channel.tel .ic, .contact-channels .tel .ic{ color:#A07C30; }

@media (min-width:900px){
  .values-grid .ic svg, .why-pirovac .ic svg, .cert-grid .ic svg, .highlights-grid .ic svg,
  .contact-channels .ic svg, .contact-channel .ic svg, .legal-cluster .ic svg,
  .extras-card .ic svg, .included-grid .ic svg, .step .step-icon svg,
  .why-home-item .ic svg, .help-channel .ic svg, .big-channel .ic svg{
    width: 52px !important; height: 52px !important; stroke-width: 1.3;
  }
  .extras-table-head .ic svg, .extras-row .ic svg, .equip-cat-head .cat-ic svg{
    width: 34px !important; height: 34px !important;
  }
}

/* ============================================================
   SECTION DISTINCTION — alternate tones + hairline seams so the
   lower homepage stops reading as one long block
   ============================================================ */
.section + .section{ position: relative; }
.section-paper{ background: var(--paper); }
/* contact + FAQ block reads lighter than the cream blog above it */
#faq.section-cream{ background: var(--paper); border-top:1px solid var(--line); }
#faq.section-cream .contact-feature-form input,
#faq.section-cream .contact-feature-form select,
#faq.section-cream .contact-feature-form textarea{ background: var(--cream); }
.booking-plan{ border-top:1px solid var(--line-strong); }
@media (max-width:900px){ .final-cta .final-cta-frame{ min-height:420px; } }



/* ============================================================
   SERVICES — Charter Management + Ownership (owner-facing)
   ============================================================ */
.svc-intro{ max-width: 780px; }
.svc-intro h2{ margin:0 0 18px; }
.svc-intro p{ font-size:17px; color:var(--ink-soft); line-height:1.72; margin:0 0 26px; }
.svc-switch{ display:flex; gap:12px; flex-wrap:wrap; }
.svc-switch a{ padding:13px 24px; border:1px solid var(--line-strong); border-radius:var(--radius-pill); font-weight:600; color:var(--navy); transition:background .2s,color .2s,border-color .2s; }
.svc-switch a:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

.svc-do{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px 30px; margin:8px 0 52px; }
.svc-do .item{ display:flex; flex-direction:column; }
.svc-do .ic{ color:var(--navy); margin-bottom:14px; display:inline-flex; }
.svc-do .ic svg{ width:46px; height:46px; stroke-width:1.3; }
.svc-do h4{ font-family:var(--display); font-size:20px; font-weight:700; margin:0 0 8px; color:var(--navy); letter-spacing:-0.01em; }
.svc-do p{ font-size:14.5px; line-height:1.62; color:var(--muted); margin:0; }
@media(max-width:900px){ .svc-do{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .svc-do{ grid-template-columns:1fr; } }

.svc-h3{ font-family:var(--display); font-size:24px; font-weight:700; color:var(--navy); margin:0 0 18px; letter-spacing:-0.01em; }
.svc-adv{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 32px; padding:0; }
.svc-adv li{ list-style:none; display:flex; align-items:center; gap:10px; font-weight:600; font-size:14.5px; color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); padding:11px 20px; }
.svc-adv li svg{ width:18px; height:18px; color:var(--sea-fresh-deep); flex-shrink:0; }
.section-cream .svc-adv li{ background:var(--paper); }
.svc-prog-foot{ margin-top:8px; }


/* ============================================================
   ROUND 4 — galleries, image bands, map, dividers, reviews,
   newsletter-in-CTA, custom icon sizing, section redesigns
   ============================================================ */

/* ---- Custom icon baseline: thin, no box, sea-navy ---- */
.ic-c{ display:inline-flex; color:var(--navy); }
.ic-c svg{ width:44px; height:44px; stroke-width:1.4; fill:none; }
@media(min-width:900px){ .ic-c svg{ width:52px; height:52px; } }

/* ---- Interesting section seams (hand-drawn wave hairline) ---- */
.wave-sep{ display:block; width:100%; line-height:0; color:var(--line-strong); background:inherit; }
.wave-sep svg{ display:block; width:100%; height:26px; }
.section-divider{ position:relative; height:0; }
.section-divider::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(1480px, calc(100% - 2*var(--gutter))); height:1px;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 7px, transparent 7px 14px);
}

/* ---- Homepage gallery (editorial, varied tiles) ---- */
.gallery-section{ background:var(--paper); }
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px;
}
.gallery-grid .g{ position:relative; border-radius:6px; overflow:hidden; background:var(--cream); }
.gallery-grid .g image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.gallery-grid .wide{ grid-column:span 2; }
.gallery-grid .tall{ grid-row:span 2; }
.gallery-cap{ position:absolute; left:14px; bottom:12px; z-index:3; color:#fff; font-size:12px; font-weight:600; letter-spacing:0.04em; text-shadow:0 1px 6px rgba(0,0,0,0.5); }
@media(max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; } .gallery-grid .wide{ grid-column:span 2; } }

/* ---- Full-width image band (breaks up corporate feel) ---- */
.image-band{ position:relative; height:clamp(300px,42vw,520px); overflow:hidden; background:var(--sea-deep); }
.image-band image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.image-band .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:32px var(--gutter);
  background:linear-gradient(transparent, rgba(11,20,40,0.6)); color:#fff;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.image-band .cap .t{ font-family:var(--display); font-size:clamp(22px,2.6vw,34px); font-weight:700; letter-spacing:-0.01em; max-width:22ch; }
.image-band .cap .s{ font-size:13px; color:rgba(255,255,255,0.8); letter-spacing:0.08em; text-transform:uppercase; }

/* ---- Map (Google embed) ---- */
.map-embed{ position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line-strong); background:var(--cream); min-height:380px; }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(0.25) contrast(1.02); }
.map-embed .map-tag{
  position:absolute; left:18px; top:18px; z-index:2; display:flex; align-items:center; gap:8px;
  background:#fff; border-radius:var(--radius-pill); padding:9px 16px 9px 12px; box-shadow:0 6px 20px -8px rgba(14,42,59,0.4);
  font-family:var(--display); font-weight:700; font-size:14px; color:var(--navy);
}
.map-embed .map-tag svg{ width:18px; height:18px; color:var(--accent, #B5523A); }

/* ---- why-home redesign ---- */
.why-home-grid{ grid-template-columns:1.05fr 1fr; gap:56px; align-items:stretch; }
.why-home-map{ display:flex; flex-direction:column; gap:14px; }
.why-home-map .map-embed{ flex:1; min-height:420px; }
.why-home-stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.why-home-stats-row .s{ background:var(--surface,#fff); border:1px solid var(--line); border-radius:8px; padding:16px 18px; }
.why-home-stats-row strong{ display:block; font-family:var(--display); font-size:22px; font-weight:700; color:var(--navy); line-height:1; }
.why-home-stats-row span{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:6px; display:block; }
.why-home-reasons{ display:flex; flex-direction:column; gap:8px; }
.why-home-reasons .r{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding:22px 0; border-top:1px solid var(--line); }
.why-home-reasons .r:first-child{ border-top:0; padding-top:0; }
.why-home-reasons .r .ic-c{ color:var(--accent, #B5523A); }
.why-home-reasons h3{ font-family:var(--display); font-size:21px; font-weight:700; color:var(--navy); margin:0 0 6px; letter-spacing:-0.01em; }
.why-home-reasons p{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0; }
@media(max-width:900px){ .why-home-grid{ grid-template-columns:1fr; } }

/* ---- Reviews redesign ('What guests say') ---- */
.reviews-redesign .reviews-grid{ grid-template-columns:1.4fr 1fr 1fr; align-items:stretch; }
.review-lead{ display:flex; flex-direction:column; justify-content:center; gap:20px; padding:0; border:0; }
.review-lead .big-quote{ font-family:var(--display); font-size:clamp(26px,2.6vw,38px); font-weight:500; line-height:1.25; letter-spacing:-0.015em; color:var(--paper-soft,#fff); }
.review-lead .big-quote .mark{ color:var(--accent-soft,#D98C72); }
.review-lead .scorebar{ display:flex; align-items:center; gap:16px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.2); }
.review-lead .scorebar .num{ font-family:var(--display); font-size:44px; font-weight:700; line-height:1; color:#fff; }
.review-lead .scorebar .stars{ color:var(--gold,#BC8A3E); font-size:15px; letter-spacing:2px; }
.review-lead .scorebar small{ display:block; font-size:12px; color:rgba(255,255,255,0.6); margin-top:3px; }
.review-quiet{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:26px 26px; display:flex; flex-direction:column; }
.review-quiet .stars{ color:var(--gold,#BC8A3E); font-size:13px; letter-spacing:2px; margin-bottom:14px; }
.review-quiet p{ font-size:15.5px; line-height:1.55; color:rgba(255,255,255,0.92); margin:0 0 18px; }
.review-quiet .who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.review-quiet .who .av{ width:40px; height:40px; border-radius:50%; background:var(--accent,#B5523A); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:700; }
.review-quiet .who strong{ display:block; color:#fff; font-size:14px; }
.review-quiet .who small{ color:rgba(255,255,255,0.55); font-size:12px; }
@media(max-width:900px){ .reviews-redesign .reviews-grid{ grid-template-columns:1fr; } }

/* ---- Newsletter merged into Set-sail CTA ---- */
.final-cta-news{ position:relative; z-index:2; margin-top:28px; max-width:520px; }
.final-cta-news .lab{ font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-soft,#D98C72); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.final-cta-news form{ display:flex; gap:10px; flex-wrap:wrap; }
.final-cta-news input{ flex:1; min-width:200px; padding:15px 18px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.12); color:#fff; font-family:var(--sans); font-size:15px; }
.final-cta-news input::placeholder{ color:rgba(255,255,255,0.65); }
.final-cta-news .note{ font-size:12px; color:rgba(255,255,255,0.6); margin-top:10px; }

/* ---- Fleet help redesign ---- */
.fleet-help-2{ position:relative; overflow:hidden; border-radius:var(--radius-card); background:var(--sea); color:#fff; margin-top:64px; display:grid; grid-template-columns:1.2fr 1fr; }
.fleet-help-2 .fh-body{ padding:48px 52px; display:flex; flex-direction:column; justify-content:center; }
.fleet-help-2 .fh-body h3{ font-family:var(--display); font-size:clamp(30px,3.2vw,42px); font-weight:700; color:#fff; letter-spacing:-0.02em; margin:0 0 14px; line-height:1.05; }
.fleet-help-2 .fh-body h3 .italic-accent{ color:var(--accent-soft,#D98C72); }
.fleet-help-2 .fh-body p{ font-size:16px; color:rgba(255,255,255,0.82); margin:0 0 26px; max-width:42ch; }
.fleet-help-2 .fh-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.fleet-help-2 .fh-photo{ position:relative; min-height:300px; }
.fleet-help-2 .fh-photo image-slot{ position:absolute; inset:0; width:100%; height:100%; }
@media(max-width:820px){ .fleet-help-2{ grid-template-columns:1fr; } .fleet-help-2 .fh-photo{ min-height:220px; } }

/* ---- Generic image strip for content pages ---- */
.photo-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.photo-strip .ph{ position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--cream); }
.photo-strip .ph image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.photo-strip .ph.tall{ aspect-ratio:3/4; }
@media(max-width:720px){ .photo-strip{ grid-template-columns:1fr 1fr; } }


/* ============================================================
   ROUND 4b — contact stepper, about values (not centered),
   yacht FAQ width, services two-way chooser
   ============================================================ */

/* ---- Contact: 'Five steps from brief to boat' connected stepper ---- */
.booking-steps{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; background:transparent; }
.booking-steps::before{ content:""; position:absolute; top:38px; left:9%; right:9%; height:2px;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 13px); z-index:0; }
.booking-steps li{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; position:relative; z-index:1; }
.booking-steps .num-row{ flex-direction:column; gap:0; }
.booking-steps .num-icon{ width:76px; height:76px; border-radius:50%; background:var(--surface,#fff);
  border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--accent,#B5523A); margin:0 auto; }
.booking-steps .num-icon svg{ width:30px; height:30px; }
.booking-steps .num{ width:24px; height:24px; margin:-12px auto 8px; border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--display); font-weight:700; font-size:13px; display:grid; place-items:center; position:relative; z-index:2; }
.booking-steps strong{ font-family:var(--display); font-size:18px; color:var(--navy); }
.booking-steps p{ font-size:13.5px; color:var(--muted); line-height:1.5; max-width:22ch; margin:0 auto; }
@media(max-width:820px){ .booking-steps{ grid-template-columns:1fr 1fr; } .booking-steps::before{ display:none; } }

/* ---- About: 'won't compromise' — left-aligned, hairline-joined grid ---- */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; }
.values-grid .val{ background:var(--surface,#fff); padding:34px 32px; text-align:left;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.values-grid .val .ic{ color:var(--accent,#B5523A); margin-bottom:6px; display:inline-flex; background:none; border:0; }
.values-grid .val .ic svg{ width:42px; height:42px; stroke-width:1.4; }
.values-grid .val h3{ font-family:var(--display); font-size:20px; font-weight:700; color:var(--navy); margin:0; letter-spacing:-0.01em; line-height:1.15; }
.values-grid .val p{ font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0; }
@media(max-width:820px){ .values-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .values-grid{ grid-template-columns:1fr; } }

/* ---- Yacht detail: widen 'Specific to' FAQ to full column ---- */
.yacht-content #faq .faq-list, #faq.yacht-faq .faq-list{ max-width:none; margin:0; }
.yacht-content .faq-list details{ max-width:none; }

/* ---- Services: two-way chooser cards ---- */
.svc-chooser{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px; }
.svc-chooser a{ display:flex; flex-direction:column; gap:14px; padding:36px 34px; border:1px solid var(--line-strong);
  border-radius:var(--radius-card); background:var(--surface,#fff); color:var(--ink); transition:border-color .2s, transform .2s, box-shadow .2s; }
.svc-chooser a:hover{ border-color:var(--sea-fresh,#1C8FA0); transform:translateY(-3px); box-shadow:0 22px 44px -32px rgba(15,27,51,0.4); }
.svc-chooser .ic-c{ color:var(--accent,#B5523A); }
.svc-chooser h3{ font-family:var(--display); font-size:26px; font-weight:700; color:var(--navy); margin:0; letter-spacing:-0.01em; }
.svc-chooser p{ font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0; }
.svc-chooser .go{ margin-top:auto; font-weight:700; font-size:14px; color:var(--sea-fresh-deep,#15727F); display:inline-flex; align-items:center; gap:8px; transition:gap .2s; }
.svc-chooser a:hover .go{ gap:12px; }
@media(max-width:720px){ .svc-chooser{ grid-template-columns:1fr; } }


/* ============================================================
   JOURNAL — index + article pages
   ============================================================ */
.article{ max-width:760px; margin:0 auto; }
.article .lead{ font-family:var(--display); font-size:clamp(20px,2vw,24px); line-height:1.5; color:var(--navy); font-weight:500; margin:0 0 28px; letter-spacing:-0.01em; }
.article p{ font-size:17px; line-height:1.8; color:var(--ink-soft); margin:0 0 18px; }
.article h2{ font-family:var(--display); font-size:clamp(26px,2.8vw,34px); font-weight:700; color:var(--navy); letter-spacing:-0.02em; margin:44px 0 14px; line-height:1.1; }
.article h3{ font-family:var(--display); font-size:21px; font-weight:700; color:var(--navy); margin:28px 0 10px; letter-spacing:-0.01em; }
.article ul{ margin:0 0 20px; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.article ul li{ position:relative; padding-left:26px; font-size:16.5px; line-height:1.65; color:var(--ink-soft); }
.article ul li::before{ content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--sea-fresh,#1C8FA0); }
.article a{ color:var(--sea-fresh-deep,#15727F); border-bottom:1px solid currentColor; }
.article .pull{ font-family:var(--display); font-size:clamp(22px,2.4vw,30px); line-height:1.3; color:var(--navy); font-weight:500; border-left:3px solid var(--accent,#B5523A); padding:6px 0 6px 26px; margin:34px 0; letter-spacing:-0.01em; }
.article-figure{ margin:34px 0; }
.article-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-bottom:22px; }
.article-meta .cat{ background:var(--cream); color:var(--navy); border-radius:var(--radius-pill); padding:6px 14px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; font-size:11px; }
.article-share{ margin-top:48px; padding-top:28px; border-top:1px solid var(--line); display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

.blog-hero{ text-align:left; }
.blog-index-intro{ max-width:62ch; }
.blog-index-intro p{ font-size:17px; color:var(--ink-soft); line-height:1.7; }