/* ============================================================
   Captain's Log Travel — production styles
   Adapted from the approved design mockup (same design system):
   navy #0A2140 · gold #C79A3B · deep gold #A87F27 · text navy #23466B
   ============================================================ */
:root{
  --teal:#0084A2;
  --teal-dark:#005E75;
  --teal-deep:#0A2140;
  --navy:#0A2140;
  --navy-deep:#0A2140;
  --ink:#23466B;
  --body:#23466B;
  --text-navy:#23466B;
  --muted:#54687E;
  --bg:#FFFFFF;
  --bg-soft:#F7F4EC;
  --bg-band:#EFE7D2;
  --line:#DFE2E6;
  --gold:#C79A3B;
  --gold-deep:#A87F27;
  --gold-soft:#F6ECD4;
  --card:#FFFFFF;
  --shadow:0 10px 30px rgba(10,33,64,.12);
  --radius:14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --teal:#2FA8C4;
    --teal-dark:#7CC6DA;
    --teal-deep:#0A1C33;
    --navy:#0A1C33;
    --navy-deep:#0A1C33;
    --ink:#EDF1F7;
    --body:#C2CEDD;
    --text-navy:#0A1C33;
    --muted:#8E9DB2;
    --bg:#081426;
    --bg-soft:#0C1E38;
    --bg-band:#152A47;
    --line:#22395C;
    --gold:#D9AE55;
    --gold-deep:#E3C078;
    --gold-soft:#2E2A1A;
    --card:#10233C;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--body);
  background:var(--bg);
  line-height:1.6;
  font-size:17px;
}
h1,h2,h3,.serif{font-family:"Playfair Display", Georgia, "Times New Roman", serif; color:var(--gold-deep); line-height:1.18; margin:0}
img{max-width:100%; display:block}
a{color:var(--teal)}
.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
.sr-only{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- top bar ---------- */
.topbar{background:var(--bg); position:-webkit-sticky; position:sticky; top:0; z-index:50}
/* Sticky guard fallback (script-driven, engages only if native sticky fails in the viewer's browser/webview): pin the same header with fixed positioning and hold its place in the flow with a spacer, so the logo bar + rope + knot stay at the top exactly as sticky intended. */
.topbar.topbar-fixed{position:fixed; top:0; left:0; right:0; z-index:50}
.topbar-spacer{display:block}
.topbar-inner{display:flex; align-items:center; gap:28px; padding:14px 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand-logo{height:90px; width:auto; background:#fff; border-radius:8px; padding:6px 10px}
@media (max-width: 620px){ .brand-logo{height:64px} }
nav.main{display:flex; gap:4px; flex-wrap:wrap}
nav.main a{
  font-size:15.5px; font-weight:600; color:var(--text-navy); text-decoration:none;
  padding:8px 11px; border-radius:8px;
}
nav.main a:hover{color:var(--teal); background:var(--bg-soft)}
nav.main a.active{color:var(--text-navy); box-shadow:inset 0 -3px 0 var(--gold)}
.top-contact{display:flex; flex-direction:column; line-height:1.35; font-size:14.5px}
.top-contact a{color:var(--text-navy); text-decoration:none; font-weight:600}
.top-contact a:hover{color:var(--teal)}
.top-contact .lbl{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); font-weight:700}
/* Anchored sections (deep links from the homepage specialty cards) land
   below the sticky header instead of underneath it: full header is ~134px
   on desktop; on phones the compact ribbon is ~65px once scrolled. */
section[id]{scroll-margin-top:152px}
@media (max-width: 620px){ section[id]{scroll-margin-top:88px} }
/* Menu button for the tuck-away phone header: hidden everywhere except
   inside the compact mobile ribbon (see the 620px block below). */
.nav-toggle{display:none}

/* ---------- tuck-away phone header (<= 620px only) ----------
   Full header at the top of the page, exactly as designed. Once the
   reader has scrolled past the full header's own height, script.js adds
   .is-compact and the header tucks into a slim ribbon: small logo, a
   Menu button, and a thin rope line with a scaled-down knot. Tapping
   Menu adds .menu-open and the main nav becomes a dropdown panel under
   the ribbon. Desktop never sees any of this. */
@media (max-width: 620px){
  .topbar-inner{transition:padding .25s ease}
  .brand-logo{transition:height .25s ease, padding .25s ease}
  .header-rope{transition:height .25s ease}
  /* compact ribbon */
  .topbar.is-compact .topbar-inner{padding:6px 0; gap:6px 12px}
  .topbar.is-compact .brand-logo{height:34px; padding:3px 6px; border-radius:6px}
  .topbar.is-compact nav.main{display:none}
  .topbar.is-compact .top-contact{display:none}
  .topbar.is-compact .header-rope{height:6px; border-top-width:1px; border-bottom-width:1px}
  .topbar.is-compact .header-rope .knot{width:21px; height:13px}
  .topbar.is-compact .nav-toggle{
    display:inline-flex; align-items:center; gap:7px; margin-left:auto;
    font:inherit; font-size:15.5px; font-weight:700; color:var(--text-navy);
    background:var(--gold-soft); border:2px solid var(--gold); border-radius:9px;
    padding:9px 16px; min-height:44px; cursor:pointer;
  }
  .topbar.is-compact .nav-toggle::after{content:"\25BE"; font-size:12px; line-height:1; color:var(--gold-deep); transition:transform .2s ease}
  .topbar.is-compact.menu-open .nav-toggle::after{transform:rotate(180deg)}
  /* dropdown panel: the same nav.main, restacked under the ribbon */
  .topbar.is-compact.menu-open nav.main{
    display:flex; flex-direction:column; flex-basis:100%; gap:0;
    margin-top:4px; padding-top:4px; border-top:1px solid var(--line);
  }
  .topbar.is-compact.menu-open nav.main a{
    font-size:17px; padding:13px 10px; border-radius:0;
    border-bottom:1px solid var(--line);
  }
  .topbar.is-compact.menu-open nav.main a:last-child{border-bottom:none}
  .topbar.is-compact.menu-open nav.main a.active{
    box-shadow:inset 4px 0 0 var(--gold); background:var(--gold-soft);
  }
}
@media (max-width: 620px) and (prefers-reduced-motion: reduce){
  .topbar-inner, .brand-logo, .header-rope, .topbar.is-compact .nav-toggle::after{transition:none}
}

/* ---------- hero ---------- */
.hero{position:relative; color:#fff; overflow:hidden; border-bottom:4px solid var(--gold)}
.hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 68% 95% at 24% 46%, rgba(10,33,64,.42) 0%, rgba(10,33,64,0) 72%), linear-gradient(100deg, rgba(10,33,64,.52) 0%, rgba(10,33,64,.28) 46%, rgba(10,33,64,.05) 100%)}
.hero-inner{position:relative; z-index:2; padding:96px 0 104px; max-width:640px}
.hero .over{font-size:13px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:#DDBB6B; margin:0 0 16px}
.hero h1{color:#E9C87A; font-size:clamp(40px, 6vw, 62px); font-weight:600}
.hero h1 em{font-style:italic; color:#F3E3B3}
.hero p.pitch{font-size:19.5px; color:#E4F2F6; margin:20px 0 32px; max-width:34em}
.hero h1, .hero .over, .hero p.pitch{text-shadow:0 1px 3px rgba(10,33,64,.55), 0 2px 16px rgba(10,33,64,.40)}
.cta-row{display:flex; gap:14px; flex-wrap:wrap}
.btn{
  display:inline-block; font-weight:700; font-size:16.5px; text-decoration:none;
  padding:14px 26px; border-radius:10px; border:2px solid transparent; cursor:pointer; font-family:inherit;
}
.btn-primary{background:var(--teal); color:#fff}
.btn-primary:hover{background:var(--teal-dark); color:#fff}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.75)}
.btn-ghost:hover{background:rgba(255,255,255,.2); color:#fff}
.btn-outline{background:transparent; color:var(--teal); border-color:var(--teal)}
.btn-outline:hover{background:var(--bg-soft)}
@media (prefers-color-scheme: dark){ .btn-primary{color:#06222C} .btn-primary:hover{color:#06222C} }

/* ---------- trust strip (At a Glance) ---------- */
.trust{background:var(--bg-band); border-bottom:1px solid var(--line)}
.trust-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:10px 26px; padding:22px 0}
.trust-item{display:flex; gap:11px; align-items:flex-start}
.trust-item svg{flex:none; margin-top:3px}
.trust-item p{margin:0; font-size:15px; line-height:1.45; color:var(--ink)}
.trust-item p span{display:block; color:var(--muted); font-size:13.5px}
.trust-item strong{font-weight:700}

/* ---------- sections ---------- */
section.block{padding:76px 0}
section.block.soft{background:var(--bg-soft)}
.sec-head{max-width:720px; margin-bottom:38px}
.sec-head h2{font-size:clamp(30px,4vw,40px); font-weight:600; margin-bottom:10px}
.sec-head p{margin:0; font-size:18px}

/* --- nautical trim: rope, anchors, wheels --- */
.rope-divider{height:14px; background:repeating-linear-gradient(48deg, #EFE0B0 0 7px, #C79A3B 7px 13px, #96742E 13px 15px, #E2C87A 15px 22px); border-top:2px solid #8C6E2A; border-bottom:2px solid #8C6E2A; box-shadow:inset 0 2px 3px rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.22)}
.rope-divider.thin{height:9px; border-top-width:1px; border-bottom-width:1px; opacity:.92}
.header-rope{position:relative; height:12px; background:repeating-linear-gradient(48deg, #EFE0B0 0 7px, #C79A3B 7px 13px, #96742E 13px 15px, #E2C87A 15px 22px); border-top:2px solid #8C6E2A; border-bottom:2px solid #8C6E2A; box-shadow:inset 0 2px 3px rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.22)}
.header-rope .knot{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:42px; height:25px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.nautical-ornament{display:flex; align-items:center; gap:18px; margin-bottom:20px}
.nautical-ornament .rope-line{height:11px; width:92px; border-radius:999px; background:repeating-linear-gradient(48deg, #E9D8A6 0 9px, #C79A3B 9px 17px, #8C6E2A 17px 20px, #D9B95C 20px 27px); border:1px solid rgba(140,110,42,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15)}
.nautical-ornament .rope-line.long{width:128px}
.nautical-ornament .wheel-spin{width:50px; height:50px}
.nautical-ornament .anchor-mark{width:30px; height:30px}
.wheel-spin{flex:none; color:var(--gold-deep)}
.anchor-mark{flex:none; color:var(--teal)}
.sec-head .nautical-ornament{margin-bottom:18px}
@media (max-width: 620px){
  .nautical-ornament{gap:12px}
  .nautical-ornament .rope-line{width:56px}
  .nautical-ornament .rope-line.long{width:80px}
  .nautical-ornament .wheel-spin{width:42px; height:42px}
  .nautical-ornament .anchor-mark{width:26px; height:26px}
}
.card h3{display:flex; align-items:center; gap:9px}
.card h3 .anchor-mark{color:var(--gold-deep)}
/* anchor-bullet lists (specialties, About sidebar) */
.anchor-list{list-style:none; padding-left:2px; margin:4px 0 0; font-size:15.5px}
.anchor-list li{position:relative; padding-left:22px; margin-bottom:5px}
.anchor-list li::before{content:""; position:absolute; left:0; top:4px; width:14px; height:14px; background:var(--gold-deep); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.2' r='1.9'/%3E%3Cpath d='M12 6.1V21M5.5 12.5c.6 3.8 3.1 6.4 6.5 7.5 3.4-1.1 5.9-3.7 6.5-7.5M5.5 12.5L3.8 15.8M5.5 12.5l3 .7M18.5 12.5l1.7 3.3M18.5 12.5l-3 .7M8.5 9.5h7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.2' r='1.9'/%3E%3Cpath d='M12 6.1V21M5.5 12.5c.6 3.8 3.1 6.4 6.5 7.5 3.4-1.1 5.9-3.7 6.5-7.5M5.5 12.5L3.8 15.8M5.5 12.5l3 .7M18.5 12.5l1.7 3.3M18.5 12.5l-3 .7M8.5 9.5h7'/%3E%3C/svg%3E") center/contain no-repeat}
.advisor-wrap{position:relative; overflow:hidden}
.advisor-wrap .wheel-watermark{position:absolute; right:0; top:18px; width:210px; height:210px; color:var(--gold); opacity:.13; pointer-events:none}
@media (max-width: 620px){
  .advisor-wrap .wheel-watermark{width:150px; height:150px; top:10px}
}
footer .foot-wheel{color:var(--gold); opacity:.9}
.certs{position:relative; overflow:hidden}
.certs .wheel-watermark{position:absolute; left:-36px; bottom:-52px; width:220px; height:220px; color:#fff; opacity:.07; pointer-events:none}
.certs .wrap{position:relative; z-index:1}
.about-body article h2 .anchor-mark{vertical-align:-3px; color:var(--gold-deep); width:22px; height:22px}
.about-hero{position:relative; overflow:hidden}
.about-hero .wheel-watermark{position:absolute; right:4%; top:50%; transform:translateY(-50%); width:150px; height:150px; color:var(--teal); opacity:.10; pointer-events:none}

/* specialties / cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.cards-two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card figure{margin:0; aspect-ratio:16/10; overflow:hidden}
.card figure img{width:100%; height:100%; object-fit:cover}
.card figure img.land-card-photo{object-position:100% 50%}
.card figure img.scarlet-card-photo{object-position:50% 58%}
.card .pad{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1}
.card h3{font-size:22px; font-weight:600}
.card p{margin:0; font-size:15.5px; flex:1}
.card a.more{font-weight:700; font-size:15px; text-decoration:none}
.card a.more:hover{text-decoration:underline}
.card .brand-mark{font-family:"Playfair Display", Georgia, serif; font-size:25px; font-weight:700; color:var(--ink); line-height:1.2}
.card .brand-logo{text-align:center; margin:2px 0 4px}
.card .brand-logo img{height:54px; width:auto; max-width:82%; object-fit:contain; display:inline-block}
/* LGBTQ+ spotlight card (homepage, full-width under the specialties grid) */
.spotlight-card{margin-top:22px}
.spotlight-card .pad{justify-content:center}
.fact-list{list-style:none; margin:4px 0 14px; padding:0; display:grid; gap:8px; font-size:15.5px}
.fact-list li{display:flex; gap:9px; align-items:flex-start}
.fact-list li svg{flex:none; margin-top:4px}
.file-tag{
  display:inline-block; background:var(--bg-band); color:var(--ink);
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; align-self:flex-start;
}

/* Travel Partners name list (homepage) */
.partners-list{columns:3; column-gap:36px; list-style:none; margin:0; padding:0}
.partners-list li{
  font-family:"Playfair Display", Georgia, serif; font-size:18.5px; font-weight:600;
  color:var(--ink); padding:7px 0; border-bottom:1px solid var(--line);
  break-inside:avoid; display:flex; align-items:center; gap:10px;
}
.partners-list li::before{content:""; width:7px; height:7px; background:var(--gold); transform:rotate(45deg); flex:none; opacity:.75}
@media (max-width: 820px){ .partners-list{columns:2} }
@media (max-width: 520px){ .partners-list{columns:1} }

/* why book */
.why{display:grid; grid-template-columns:repeat(2,1fr); gap:20px 34px}
.why-item{display:flex; gap:16px; align-items:flex-start}
.why-icon{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:var(--bg-band); display:flex; align-items:center; justify-content:center;
}
.why-item h3{font-size:21px; font-weight:600; margin-bottom:4px}
.why-item p{margin:0; font-size:16px}

/* certifications */
.certs{background:var(--navy); color:#D5E0EE; padding:56px 0; border-top:3px solid var(--gold); border-bottom:3px solid var(--gold)}
.certs h2{color:var(--gold); font-size:clamp(26px,3.4vw,34px); font-weight:600; text-align:center}
.certs .sub{text-align:center; margin:10px auto 30px; max-width:640px; font-size:16.5px}
.cert-list{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; list-style:none; margin:0; padding:0}
.cert-list li{
  border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:8px 18px;
  font-size:15px; font-weight:600; color:#fff; display:flex; align-items:center; gap:8px;
}
.cert-list li svg{flex:none}

/* partner wordmark marquee — banner artwork can replace .mark spans later */
.partners{background:var(--bg); border-bottom:1px solid var(--line); padding:28px 0 32px; overflow:hidden}
.partners .lbl{text-align:center; font-size:12px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 20px}
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee-track{display:flex; width:max-content; animation:marquee 104s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex; align-items:center; gap:54px; padding-right:54px}
.marquee-set .mark{font-family:"Playfair Display", Georgia, serif; font-size:23px; font-weight:600; color:var(--ink); white-space:nowrap; opacity:.85}
.marquee-set .mark-sep{width:7px; height:7px; background:var(--gold); transform:rotate(45deg); flex:none; opacity:.75}
/* real-logo marks (cruises & land bottom banners): uniform height, capped width, letterboxed */
.marquee-set img.mark{height:46px; width:auto; max-width:170px; object-fit:contain; flex:none; opacity:1}
/* owner-requested larger marks: six flagship partner logos get extra presence in the banners */
.marquee-set img.mark.mark-lg{height:62px; max-width:230px}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none; flex-wrap:wrap; width:auto; justify-content:center}
  .marquee-set{flex-wrap:wrap; justify-content:center; row-gap:14px}
  .marquee-set.dup{display:none}
}

/* Travel Leaders Network affiliation band */
.tln{background:var(--navy); color:#D5E0EE; padding:60px 0; position:relative; overflow:hidden}
.tln .wheel-watermark{position:absolute; right:-30px; bottom:-64px; width:230px; height:230px; color:#fff; opacity:.06; pointer-events:none}
.tln .wrap{position:relative; z-index:1}
.tln-grid{display:grid; grid-template-columns:300px 1fr; gap:42px; align-items:center}
.tln-badge{border:1.5px solid var(--gold); border-radius:var(--radius); padding:28px 22px; text-align:center; background:rgba(255,255,255,.04)}
.tln-badge .anchor-mark{color:var(--gold); margin-bottom:10px}
.tln-badge .tln-name{font-family:"Playfair Display", Georgia, serif; font-size:27px; font-weight:700; color:#fff; line-height:1.25; display:block}
.tln-badge .tln-sub{display:block; margin-top:9px; font-size:11.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:#E9C87A}
.tln h2{color:var(--gold); font-size:clamp(26px,3.4vw,34px); font-weight:600; margin-bottom:12px}
.tln p{margin:0; font-size:17px; max-width:46em}
.tln-points{display:flex; flex-wrap:wrap; gap:10px 28px; list-style:none; margin:20px 0 0; padding:0}
.tln-points li{display:flex; align-items:center; gap:9px; font-weight:600; color:#fff; font-size:15.5px}
.tln-points li svg{flex:none}
@media (max-width: 820px){ .tln-grid{grid-template-columns:1fr; gap:26px} }

/* reviews */
.stars{color:var(--gold); letter-spacing:3px; font-size:22px; line-height:1}
.review-aggregate{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:28px}
.review-aggregate p{margin:0; font-size:17px}
/* slow-scrolling review cards: one set is 10 cards x 380px + gaps (~4,020px);
   170s linear = ~24px/s, so every card stays readable on screen, and the
   track holds exactly two identical sets so translateX(-50%) loops seamlessly */
.reviews-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent)}
.reviews-track{display:flex; width:max-content; animation:reviews-scroll 170s linear infinite}
.reviews-marquee:hover .reviews-track{animation-play-state:paused}
.reviews-set{display:flex; align-items:stretch; gap:22px; padding-right:22px}
.review-card{
  flex:none; width:380px; margin:0; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px;
}
.review-card .stars{font-size:17px; letter-spacing:2px}
.review-text{margin:12px 0 18px; font-size:16px}
.review-meta{margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.review-name{font-weight:700; color:var(--ink); font-size:16.5px}
.review-detail{color:var(--muted); font-size:14px}
.review-source{
  margin-top:9px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); background:var(--gold-soft); padding:3px 10px; border-radius:999px;
}
@keyframes reviews-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (max-width: 620px){
  .review-card{width:85vw}
}
@media (prefers-reduced-motion: reduce){
  .reviews-marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
  .reviews-track{animation:none}
  .reviews-set.dup{display:none}
}

/* advisor teaser / about */
.advisor{display:grid; grid-template-columns: 420px 1fr; gap:44px; align-items:center}
.advisor figure{margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.advisor figure img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/4.4}
.advisor h2{font-size:clamp(28px,3.6vw,38px); font-weight:600; margin-bottom:12px}
.advisor p{font-size:17px; margin:0 0 14px}
.chip-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0 24px; padding:0; list-style:none}
.chip-row li{background:var(--bg-band); color:var(--ink); font-size:14px; font-weight:600; padding:6px 11px; border-radius:999px; display:flex; align-items:center; line-height:1.3}

/* connect + contact form */
.connect-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width: 820px){ .connect-cards{grid-template-columns:1fr} }
.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:820px}
.contact-form .field{display:flex; flex-direction:column; gap:6px}
.contact-form .field.full{grid-column:1 / -1}
.contact-form label{font-weight:700; font-size:14.5px; color:var(--ink)}
.contact-form input, .contact-form textarea{
  font:inherit; font-size:16px; color:var(--text-navy);
  padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; background:var(--card);
}
.contact-form input:focus, .contact-form textarea:focus{outline:3px solid var(--gold-soft); border-color:var(--gold)}
@media (max-width: 620px){ .contact-form{grid-template-columns:1fr} }
.form-done{font-weight:600; background:var(--gold-soft); color:var(--ink); border-radius:10px; padding:16px 20px; max-width:820px}

/* mailing band */
.mailing{background:var(--navy); color:#fff; padding:54px 0}
.mailing-inner{display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center}
.mailing h2{color:var(--gold); font-size:clamp(26px,3.4vw,34px); font-weight:600}
.mailing p{margin:8px 0 0; color:#D5E0EE; font-size:16.5px}
.mailing form{display:flex; gap:10px; flex-wrap:wrap}
.mailing input[type=email]{
  flex:1 1 240px; font:inherit; padding:13px 16px; border-radius:10px; border:0; color:#0A2140;
}
.mailing button{
  font:inherit; font-weight:700; background:var(--gold); color:#0A2140; border:0;
  padding:13px 24px; border-radius:10px; cursor:pointer;
}
.mailing button:hover{background:var(--gold-deep); color:#fff}
.mailing .done{font-weight:600; background:rgba(255,255,255,.14); border-radius:10px; padding:14px 18px; margin:0}
.mailing .fineprint{font-size:13px; color:#A9BCD6; margin-top:10px}
.mailing .fineprint a{color:#fff; font-weight:700}

/* footer */
footer{background:var(--navy); color:#C3D2E4; padding:56px 0 0; font-size:15px; border-top:3px solid var(--gold)}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:34px; padding-bottom:40px}
footer h3{color:var(--gold); font-size:19px; margin-bottom:12px}
footer p{margin:0 0 8px}
footer a{color:#C3D2E4; text-decoration:none}
footer a:hover{color:#fff; text-decoration:underline}
.foot-links{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.social{display:flex; gap:10px; margin-top:14px}
.social a{
  width:40px; height:40px; border:1px solid rgba(255,255,255,.4); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.social a:hover{background:rgba(255,255,255,.12); text-decoration:none}
.registrations{border-top:1px solid rgba(255,255,255,.18); padding:20px 0 26px; font-size:13px; color:#93A7BE; line-height:1.65}
.registrations p{margin:0}
.legal-links{margin-top:8px}

/* ---------- About page ---------- */
.about-hero{position:relative; color:#fff; overflow:hidden; border-bottom:4px solid var(--gold)}
.about-hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.about-hero::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 64% 100% at 22% 46%, rgba(10,33,64,.40) 0%, rgba(10,33,64,0) 72%), linear-gradient(100deg, rgba(10,33,64,.50) 0%, rgba(10,33,64,.26) 52%, rgba(10,33,64,.04) 100%)}
.about-hero-inner{position:relative; z-index:2; padding:78px 0 84px; max-width:760px}
.about-hero h1{font-size:clamp(36px,5vw,52px); font-weight:600; margin-bottom:12px; color:#E9C87A}
.about-hero p.lede{font-size:20px; max-width:600px; margin:0; color:#F1EAD8}
.about-hero h1, .about-hero p.lede{text-shadow:0 1px 3px rgba(10,33,64,.55), 0 2px 16px rgba(10,33,64,.40)}
.about-hero .nautical-ornament .wheel-spin{color:#E9C87A}
.about-hero .nautical-ornament .anchor-mark{color:#E9C87A}
.meet-grid{display:grid; grid-template-columns:320px 1fr; gap:28px; align-items:start; margin-bottom:6px}
.meet-grid figure{margin:0}
.meet-grid figure img{width:100%; aspect-ratio:4/3.4; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow)}
.meet-grid figcaption, .about-photo figcaption, .photo-strip figcaption{font-size:13.5px; color:var(--muted); margin-top:8px}
.about-photo{margin:28px 0}
.about-photo img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow)}
.photo-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0}
.photo-strip figure{margin:0}
.photo-strip img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; box-shadow:var(--shadow)}
@media (max-width: 620px){
  .photo-strip{grid-template-columns:1fr}
  .about-hero-inner{padding:56px 0 60px}
}
/* Meet Anne: keep the photo on the left beside the text down to small tablets;
   stack (photo above text) only on narrow phones */
@media (max-width: 620px) and (min-width: 481px){
  .meet-grid{grid-template-columns:190px 1fr; gap:20px}
}
@media (max-width: 480px){
  .meet-grid{grid-template-columns:1fr}
}
.about-body{display:grid; grid-template-columns:1fr 340px; gap:48px; padding:58px 0 70px; align-items:start; color:var(--text-navy)}
.about-body article p{font-size:17.5px; margin:0 0 18px; color:var(--text-navy)}
.about-body article h2{font-size:27px; font-weight:600; margin:30px 0 12px; color:var(--gold-deep)}
aside.facts{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:24px; color:var(--text-navy)}
aside.facts h3{font-size:20px; margin-bottom:12px; color:var(--navy)}
aside.facts dl{margin:0; display:grid; gap:12px}
aside.facts dt{font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-deep); font-weight:700}
aside.facts dd{margin:2px 0 0; font-size:15.5px; color:var(--text-navy)}
/* About page: headings gold, body/info text navy — links stay teal */
body.page-about{color:var(--text-navy)}
body.page-about .about-hero h1{color:#E9C87A}
body.page-about .about-hero p.lede{color:#F1EAD8}
body.page-about figcaption{color:var(--muted)}
@media (prefers-color-scheme: dark){
  body.page-about, body.page-about p, body.page-about li, body.page-about dd, body.page-about strong{color:#D5E0EE}
  body.page-about figcaption{color:#A9BCD6}
  body.page-about .about-hero p.lede{color:#F1EAD8}
}

/* ---------- feature rows (Cruises / Land) ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:30px 0}
.feature + .feature{border-top:1px solid var(--line)}
.feature figure{margin:0}
.feature figure img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow)}
.feature figcaption{font-size:13.5px; color:var(--muted); margin-top:8px}
.photo-pair{display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:4px 0 26px}
.photo-pair figure{margin:0}
.photo-pair figure img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow)}
.photo-pair figcaption{font-size:13.5px; color:var(--muted); margin-top:8px}
@media (max-width: 820px){
  .photo-pair{grid-template-columns:1fr; gap:22px}
}
.video-figure{margin:6px 0 30px}
.video-figure video{width:100%; max-width:100%; display:block; border-radius:var(--radius); box-shadow:var(--shadow); background:#0A2140}
.video-figure figcaption{font-size:13.5px; color:var(--muted); margin-top:8px}
/* Blog POST pages only: photo captions are part of the post (pattern credits, progress notes),
   so they render at the post body size in the regular body text color — not small print.
   figure.post-hero exists only on single-post pages (the blog index/section pages use .post-card
   figures and have no .post-hero figures), so this rule scopes itself to post pages; any future
   post page built from the same scaffolding is covered automatically. Specificity (0,1,2) beats
   the blog pages' shared inline .post-hero figcaption rule (0,1,1). Margin/alignment unchanged. */
main .post-hero figcaption{font-size:18px; color:var(--text-navy)}
.feature h3{font-size:26px; font-weight:600; margin-bottom:10px; display:flex; align-items:center; gap:9px}
.feature h3 .anchor-mark{color:var(--gold-deep)}
.feature p{margin:0 0 12px; font-size:16.5px}
.feature .cert-line{font-size:18px; font-weight:700; color:var(--gold-deep); margin:14px 0 0}
.feature.flip figure{order:2}
@media (max-width: 820px){
  .feature{grid-template-columns:1fr; gap:20px; padding:24px 0}
  .feature.flip figure{order:0}
}
.cta-band{background:var(--bg-soft); text-align:center; padding:64px 0}
.cta-band h2{font-size:clamp(28px,3.6vw,38px); font-weight:600; margin-bottom:12px}
.cta-band p{margin:0 auto 26px; max-width:580px; font-size:17.5px}
.cta-band .cta-row{justify-content:center}
.text-band-body{max-width:760px}
.text-band-body p{font-size:17px; margin:0 0 14px}
.text-band-body p.lead{font-size:18.5px}

/* proof strip (Land Vacations / About closing) */
.proof-strip{text-align:center; max-width:760px; margin:0 auto}
.proof-strip .rating-line{font-family:"Playfair Display", Georgia, serif; font-size:clamp(21px,3vw,27px); font-weight:700; color:var(--ink); margin:0 0 10px}
.proof-strip .cert-line{font-size:19px; font-weight:700; color:var(--gold-deep); margin:0 0 10px}
.proof-strip p{font-size:16.5px; margin:0}

/* two-list specialties (About) */
.spec-cols{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width: 620px){ .spec-cols{grid-template-columns:1fr} }

/* ---------- recipe card (From the Galley — standing template) ----------
   Navy shell with the header's gold rope + centered knot across the top,
   gold title, knot-and-rope divider, meta line, and a white inner panel:
   ingredients left (~38%), directions right. The panel keeps its printed-
   card colors (#fff / #23466B / #A87F27) in both color schemes so a recipe
   always reads — and prints — like a recipe card. */
.recipe-card{background:var(--navy); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin:34px 0 30px}
.recipe-card .rc-head{padding:26px 24px 4px; text-align:center}
.recipe-card .rc-title{font-size:clamp(30px,4vw,38px); font-weight:700; color:var(--gold); margin:0; line-height:1.15}
.recipe-card .rc-divider{display:flex; align-items:center; justify-content:center; gap:12px; margin:15px auto 13px}
.recipe-card .rc-divider .rope-line{height:9px; width:76px; border-radius:999px; background:repeating-linear-gradient(48deg, #E9D8A6 0 9px, #C79A3B 9px 17px, #8C6E2A 17px 20px, #D9B95C 20px 27px); border:1px solid rgba(140,110,42,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15)}
.recipe-card .rc-divider .knot{width:38px; height:22px; flex:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.recipe-card .rc-meta{margin:0 0 20px; color:#E9C87A; font-size:15.5px; font-weight:600; line-height:1.5}
.recipe-card .rc-panel{background:#FFFFFF; color:#23466B; border-radius:10px; margin:0 18px 18px; padding:26px 28px; display:grid; grid-template-columns:38fr 62fr; gap:6px 36px}
.recipe-card .rc-panel h3{font-family:"Source Sans 3", system-ui, sans-serif; font-size:13.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#A87F27; margin:0 0 12px}
.recipe-card .rc-ingredients ul{list-style:none; margin:0; padding:0}
.recipe-card .rc-ingredients li{font-size:16.5px; line-height:1.45; padding:7px 0; border-bottom:1px solid #DFE2E6}
.recipe-card .rc-ingredients li:last-child{border-bottom:none}
.recipe-card .rc-directions ol{margin:0; padding-left:22px}
.recipe-card .rc-directions li{font-size:16.5px; line-height:1.6; margin-bottom:12px; padding-left:4px}
.recipe-card .rc-directions li:last-child{margin-bottom:0}
.recipe-card .rc-directions li::marker{color:#A87F27; font-weight:700}
@media (max-width: 720px){
  .recipe-card .rc-head{padding:22px 16px 2px}
  .recipe-card .rc-divider .rope-line{width:52px}
  .recipe-card .rc-panel{grid-template-columns:1fr; margin:0 12px 12px; padding:22px 20px; gap:20px}
}
@media print{
  .recipe-card{box-shadow:none; border:1.5px solid #0A2140; break-inside:avoid}
  .recipe-card .rc-panel{border:1px solid #DFE2E6}
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .trust-inner{grid-template-columns:repeat(2,1fr)}
  .advisor{grid-template-columns:1fr; gap:26px}
  .advisor figure img{aspect-ratio:16/9}
  .about-body{grid-template-columns:1fr}
  .mailing-inner{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 620px){
  .cards{grid-template-columns:1fr}
  .cards-two{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .trust-inner{grid-template-columns:1fr}
  .hero::after{background:radial-gradient(ellipse 105% 88% at 32% 42%, rgba(10,33,64,.46) 0%, rgba(10,33,64,0) 74%), linear-gradient(100deg, rgba(10,33,64,.58) 0%, rgba(10,33,64,.38) 46%, rgba(10,33,64,.12) 100%)}
  .hero-inner{padding:64px 0 72px}
  .top-contact{flex-direction:row; gap:6px 16px; flex-wrap:wrap; width:100%}
  .top-contact .lbl{display:none}
  .foot-grid{grid-template-columns:1fr}
  section.block{padding:56px 0}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}